/* ============================================================
   house.css — the look of the house page at kelldor.com
   (index.html, privacy/index.html, 404.html in this folder).

   A quiet public front door for Kelldor before launch: it says what the house is and
   how to reach it, and gives nothing else away. Every colour, size, space and motion
   value comes from /tokens.css, the site's single source of truth; this file only
   arranges them. The page runs no scripts, so everything here is plain CSS.

   Paths start at the site root (/tokens.css, /fonts/…) because these pages are
   published on their own at kelldor.com's root by tools/site/pack-house.sh, and a
   not-found page can be shown at any depth of address. Preview the packed folder
   (bash tools/site/pack-house.sh --preview), not site/ on :3000.

   Refined 2026-10-28: a larger mark and name that shrink on short screens, a link
   underline visible without colour, and narrower summary padding on phones.
   ============================================================ */

/* ─── Fonts, served from this site (never from Google: see the privacy policy) ─── */
/* Each is one variable file holding every weight the page uses; the Latin subset
   covers ©, ™ and the em dash. Fetched and hash-checked by tools/site/fetch-house-fonts.sh. */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('/fonts/outfit-latin.woff2') format('woff2');
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
}

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

html {
    background: var(--bg-deepest);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg-deepest);
    color: var(--fg-body);
    font-family: var(--font-body);
    font-weight: var(--weight-light);
    font-size: var(--text-16);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 48rem) {
    body { font-size: var(--text-18); }
}

img { display: block; max-width: 100%; height: auto; }

p { margin: 0 0 var(--space-5); }

/* The ™ beside the name: small and raised, tucked against the wordmark's last letter
   (wide wordmark tracking would otherwise leave a gap before it). */
.tm {
    font-size: 0.42em;
    letter-spacing: 0;
    vertical-align: super;
    margin-left: -0.2em;
}

/* Film grain over everything, as on the homepage: depth for flat plum. An inline SVG
   filter (feTurbulence), so it costs no image file and no script. */
.grain {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.03;
    z-index: 10;
}

/* ─── Links: cream text on a gold hairline; the hairline fills on hover ─── */
.link {
    position: relative;
    display: inline-block;
    color: var(--fg);
    text-decoration: none;
    padding-bottom: 2px;
    /* Strong enough (about 3.3:1) that a link is told apart without colour (WCAG 1.4.1);
       the hover line below still fills in full gold. */
    border-bottom: 1px solid rgba(var(--brand-gold-rgb), 0.55);
}
/* The hover line is a separate layer that grows from the left with transform, so the
   motion never re-lays out the text. */
.link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--brand-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--dur-base) var(--ease-out);
}
.link:hover { color: var(--fg-high); }
.link:hover::after { transform: scaleX(1); }
.link:focus-visible {
    outline: 1px solid var(--brand-gold);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}
.link:active { opacity: 0.7; }

/* ─── The door: the first screen, the mark lit by one lamp ─── */
.door {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;   /* phones: the visible height, without the browser's bars */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16) var(--space-6) var(--space-20);
    text-align: center;
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(var(--brand-plum-rgb), 0.85) 0%, transparent 72%),
        var(--bg-side-accents),
        var(--bg-deepest);
}
/* The lamp: a warm pool of light above the mark. It is its own layer so the page's one
   entrance moment can switch it on with opacity alone. */
.door::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 34% 30% at 50% 34%, rgba(var(--metal-lamp-rgb), 0.09) 0%, transparent 100%),
        radial-gradient(ellipse 60% 50% at 50% 36%, rgba(var(--brand-gold-rgb), 0.05) 0%, transparent 100%);
    animation: lamp-on 2400ms var(--ease-out) both;
}

.door-mark {
    /* The second line keeps a landscape phone's first screen from overflowing; the first is for browsers without svh. */
    width: clamp(144px, 36vw, 224px);
    width: clamp(144px, min(36vw, 30svh), 224px);
    margin-bottom: var(--space-10);
    animation: rise 1600ms var(--ease-spring) 200ms both;
}

.door-name {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    /* Same pattern as .door-mark: the second line shrinks the name on short screens */
    font-size: clamp(var(--text-36), 9.5vw, var(--text-60));
    font-size: clamp(var(--text-36), min(9.5vw, 7svh), var(--text-60));
    line-height: var(--leading-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wordmark);
    margin-right: calc(-1 * var(--tracking-wordmark));   /* tracking also follows the last letter; this re-centres the word */
    color: var(--fg);
    animation: rise 1600ms var(--ease-spring) 500ms both;
}

.door-line {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: clamp(var(--text-20), 2.6vw, var(--text-24));
    line-height: var(--leading-heading);
    color: var(--fg-body);
    animation: rise 1600ms var(--ease-spring) 750ms both;
}

/* A row of saddle stitches closes the first screen: the one decoration drawn from the
   leather itself. Short gold dashes, as thread looks on a finished edge. */
.stitch {
    position: absolute;
    left: 50%;
    bottom: var(--space-12);
    width: min(240px, 50vw);
    height: 1px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(90deg, var(--brand-gold-soft) 0 6px, transparent 6px 11px);
    animation: lamp-on 1600ms var(--ease-out) 1000ms both;
}

@keyframes lamp-on {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Reduced motion: tokens.css shortens every animation to an instant, and "both" keeps
   each element at its finished state. tokens.css leaves the delays alone, so they are
   cleared here too: otherwise the stitch would still appear a second late. */
@media (prefers-reduced-motion: reduce) {
    .door::before, .door-mark, .door-name, .door-line, .stitch { animation-delay: 0s; }
}

/* ─── The letter: the page's reading column, one sheet above the base ─── */
.letter {
    position: relative;
    /* The sheet catches a little of the lamp at its top edge, so it reads as lit from the same place */
    background:
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(var(--brand-plum-rgb), 0.55) 0%, transparent 100%),
        var(--bg);
    box-shadow: var(--shadow-floating);
    border-top: 1px solid var(--brand-gold-faint);
}
.letter-inner {
    max-width: 38rem;
    margin: 0 auto;
    padding: var(--section-y) var(--space-6);
}
@media (min-width: 48rem) {
    .letter-inner { padding: var(--section-y-lg) var(--space-8); }
}

.letter-part + .letter-part { margin-top: var(--space-20); }

.letter h2 {
    margin: 0 0 var(--space-6);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-30);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-snug);
    color: var(--fg);
}

/* The house's founding line, set large: the page's one statement. */
.statement {
    margin: 0 0 var(--space-8);
    font-family: var(--font-display);
    font-weight: var(--weight-light);
    font-size: clamp(var(--text-24), 4.4vw, var(--text-36));
    line-height: 1.25;
    letter-spacing: var(--tracking-snug);
    color: var(--fg);
}

.email-line { margin-top: var(--space-6); }
.link-email {
    font-family: var(--font-display);
    font-weight: var(--weight-medium);
    font-size: clamp(var(--text-24), 3.4vw, var(--text-30));
    line-height: var(--leading-heading);
}

/* ─── Footer: the company line, one surface below the letter ─── */
.foot {
    background: var(--bg-deepest);
    color: var(--fg-muted);
    font-size: var(--text-14);
}
.foot-inner {
    max-width: 38rem;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-20);
}
@media (min-width: 48rem) {
    .foot-inner { padding-left: var(--space-8); padding-right: var(--space-8); }
}
.foot-mark {
    width: 32px;
    margin-bottom: var(--space-6);
    opacity: 0.6;
}
.foot p { margin: 0 0 var(--space-2); }
.foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    margin-top: var(--space-6);
}

/* ─── Masthead on the inner pages: the mark and name, back to the home page ─── */
.masthead {
    max-width: 38rem;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6) 0;
}
@media (min-width: 48rem) {
    .masthead { padding-left: var(--space-8); padding-right: var(--space-8); }
}
.masthead-home {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--fg);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.masthead-home:hover .masthead-name { color: var(--fg-high); }
.masthead-home:focus-visible {
    outline: 1px solid var(--brand-gold);
    outline-offset: 6px;
}
.masthead-home:active { opacity: 0.7; }
.masthead-mark { width: 28px; }
.masthead-name {
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--text-18);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wordmark);
}

/* ─── Inner pages: the privacy policy and the not-found page ─── */
.page {
    background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(var(--brand-plum-rgb), 0.7) 0%, transparent 70%), var(--bg-deepest);
    min-height: 100vh;
}
.page .letter { margin-top: var(--space-10); }
.page .letter-inner { padding-top: var(--space-16); }

.page h1 {
    margin: 0 0 var(--space-3);
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: clamp(var(--text-36), 6vw, var(--text-48));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    color: var(--fg);
}
.policy-date {
    margin-bottom: var(--space-12);
    font-size: var(--text-14);
    color: var(--fg-muted);
}

.policy h2 { font-size: var(--text-24); margin-top: var(--space-16); }
.policy h3 {
    margin: var(--space-8) 0 var(--space-3);
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-16);
    color: var(--fg);
}

/* The short version: a floating panel above the letter's sheet, so it reads first. */
.summary {
    background: var(--bg-elevated);
    border: 1px solid var(--brand-gold-faint);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-8) var(--space-5);   /* phones: 8 px more width for the list text */
}
.summary h2 { margin-top: 0; }
@media (min-width: 48rem) {
    .summary { padding: var(--space-10); }
}

/* Lists wear the mark's own shape: a small gold diamond in place of a bullet. */
.diamonds {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}
.diamonds li {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
}
.diamonds li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 6px;
    height: 6px;
    background: var(--brand-gold-soft);
    transform: rotate(45deg);
}
.summary .diamonds { margin-bottom: 0; }
.summary .diamonds li:last-child { margin-bottom: 0; }

.policy strong {
    font-weight: var(--weight-medium);
    color: var(--fg);
}
/* The cookie names the policy mentions, set apart as literal names */
.policy code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    color: var(--fg);
    background: rgba(var(--brand-cream-rgb), 0.06);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}