/* Cormorant Garamond (OFL, se fonts/OFL.txt). Kun latin-subsettet, som dekker æøå. */
@font-face {
    font-family: "Cormorant Garamond";
    src: url(fonts/cormorant-garamond-500.woff2) format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url(fonts/cormorant-garamond-500-italic.woff2) format("woff2");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

/* Fargene er hentet fra portrettet: mahogni, skinn, sepia og messing */
:root {
    --mahogni: #1a120c;
    --mahogni-lys: #2e2016;
    --pergament: #ece0c8;
    --sepia: #b9a688;
    --messing: #c4a265;
    --messing-mørk: #7d6236;
    --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    background: var(--mahogni);
}

html, body {
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--pergament);
    font-family: var(--serif);
    font-weight: 500;
    /* Lampelys oppe til venstre, mørkere mot kantene */
    background:
        radial-gradient(ellipse 70% 60% at 30% 35%, rgb(196 162 101 / 0.16), transparent 70%),
        radial-gradient(ellipse at center, transparent 40%, rgb(0 0 0 / 0.55) 100%),
        var(--mahogni);
    -webkit-font-smoothing: antialiased;
}

h1 {
    margin: 0;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

h1 em {
    color: var(--messing);
}

/* ---------- Ornament: linje – rute – linje ---------- */

.ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(260px, 70%);
    margin: 28px 0;
    color: var(--messing);
}

.ornament::before,
.ornament::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor);
}

.ornament::after {
    background: linear-gradient(90deg, currentColor, transparent);
}

.ornament span {
    width: 7px;
    height: 7px;
    border: 1px solid currentColor;
    flex-shrink: 0;
    transform: rotate(45deg);
}

/* ---------- Ja ---------- */

.ja {
    display: grid;
    grid-template-columns: auto minmax(0, 34rem);
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 6vw, 96px);
    min-height: 100vh;
    min-height: 100dvh;
    padding: 48px clamp(16px, 5vw, 64px);
}

.ja[hidden], .nei[hidden] {
    display: none;
}

.portrett {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: inn 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Forgylt ramme: messinggradient ytterst, mørk fals, tynn gulllinje inntil bildet */
.ramme {
    padding: 12px;
    background: linear-gradient(135deg, #e2c88e, var(--messing) 25%, var(--messing-mørk) 50%, var(--messing) 75%, #e2c88e);
    box-shadow:
        0 30px 60px -20px rgb(0 0 0 / 0.8),
        0 0 0 1px rgb(0 0 0 / 0.6);
}

.ramme img {
    display: block;
    width: auto;
    height: min(72vh, 680px);
    height: min(72dvh, 680px);
    aspect-ratio: 682 / 1024;
    object-fit: cover;
    border: 6px solid var(--mahogni);
    outline: 1px solid rgb(226 200 142 / 0.6);
    outline-offset: -7px;
}

.plakett {
    margin-top: 20px;
    padding: 4px 18px;
    color: var(--mahogni);
    background: linear-gradient(180deg, #e2c88e, var(--messing) 60%, var(--messing-mørk));
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgb(0 0 0 / 0.5);
}

.tekst {
    animation: inn 1.6s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.dato {
    margin: 0 0 20px;
    color: var(--sepia);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.ja h1 {
    font-size: clamp(3rem, 7vw, 5.5rem);
}

.hilsen {
    margin: 0;
    color: var(--sepia);
    font-size: 1rem;
    line-height: 1.6;
}

.hilsen span {
    font-style: italic;
    font-size: 1.3rem;
    color: var(--pergament);
}

@keyframes inn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* Mobil: portrettet over teksten, alt sentrert */
@media (max-width: 820px) {
    .ja {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 40px;
        padding-top: 32px;
        padding-bottom: calc(48px + env(safe-area-inset-bottom));
        text-align: center;
    }

    .ramme { padding: 8px; }

    .ramme img {
        height: auto;
        width: min(72vw, 340px);
        max-height: 60dvh;
        border-width: 4px;
        outline-offset: -5px;
    }

    .tekst .ornament { margin-inline: auto; }
}

/* ---------- Nei ---------- */

.nei {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    text-align: center;
    animation: inn 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.nei h1 {
    font-size: clamp(4rem, 14vw, 8rem);
    font-style: italic;
}

.snarlig {
    margin: 0;
    color: var(--sepia);
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    font-style: italic;
}

/* Diskret henvisning til den mindre dannede søstersiden */
.fredag {
    margin-top: 48px;
    padding: 0 0 4px 0.3em; /* venstre-padding balanserer sperringen etter siste bokstav */
    color: var(--messing);
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid rgb(196 162 101 / 0.35);
    transition: color 0.4s, border-color 0.4s;
}

.fredag:hover,
.fredag:focus-visible {
    color: var(--pergament);
    border-color: var(--pergament);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; }
}