/* ══════════════════════════════════════════════════════════════
   Fonts are SELF-HOSTED, deliberately.
   This page argues that being watched changes what people do. Loading type from
   fonts.googleapis.com would hand Google the IP address of every reader as the
   price of reading it. The page would be watching you while it told you not to be.
   Ten woff2 files, 208 KB, latin subset. Nothing leaves this origin.
   ══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/cormorant-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/cormorant-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/cormorant-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Cormorant"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/cormorant-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond"; font-style:italic; font-weight:400; font-display:swap;
  src:url("../fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"EB Garamond"; font-style:italic; font-weight:500; font-display:swap;
  src:url("../fonts/eb-garamond-latin-500-italic.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:300; font-display:swap;
  src:url("../fonts/montserrat-latin-300-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/montserrat-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Montserrat"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/montserrat-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ══════════════════════════════════════════════════════════════
   pat.hinabiprive.com — Hinabi Privé · Volume 01 (Essence · Soul · Fleeting Moments)
   Ground: Seafoam Bone. Word: Deep Ocean. Gold: a whisper.
   Type duality — Cormorant (rock) · EB Garamond (water) · Montserrat (order)
   ══════════════════════════════════════════════════════════════ */
:root{
  /* palette — 70 Bone / 22 Ocean / 6 Mist / 2 Gold */
  --bone:#F4F1EA;
  --bone-2:#EDE9E0;
  --ocean:#0E242B;
  --ocean-soft:#2C4149;
  --rock:#1A1A1A;
  --plate:#0D0D0D;   /* sampled from pat-portrait.jpg corners — the hero ground must match exactly */
  --mist:#9FB0AE;        /* rules & hairlines ONLY — 2.00:1 on Bone, never set text in this */
  --mist-deep:#586A67;   /* the small-text register — 5.07:1 on Bone, 4.72:1 on Bone-2. Clears AA on both grounds. */
  --gold:#B8975A;
  --gold-lift:#D4B77E;
  --hair:rgba(14,36,43,.14);
  --zone:#E9EEEC;        /* the highlighted zone — Mist breathed over Bone. Holds AA for every ink on it. */
  --zone-hair:rgba(14,36,43,.16);

  /* modular scale — major third (1.25) from 18px */
  --t-xs:11.5px; --t-sm:14.4px; --t-base:18px; --t-md:22.5px;

  --rockface:"Cormorant",Georgia,serif;
  --water:"EB Garamond",Georgia,serif;
  --order:"Montserrat",system-ui,sans-serif;
}
*{box-sizing:border-box;}

/* visually hidden, still read by crawlers and screen readers — carries her name inside the <h1> */
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;}

/* skip link — first tab stop, invisible until focused */
.skip{
  position:fixed; top:-100px; left:12px; z-index:100;
  background:var(--ocean); color:var(--bone); padding:12px 18px;
  font-family:var(--order); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  transition:top .2s ease;
}
.skip:focus{top:12px;}

/* keyboard focus — gold, because it is the one place an outline belongs */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:1px;}
.hero :focus-visible, nav:not(.solid) :focus-visible{outline-color:var(--gold-lift);}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bone); color:var(--ocean-soft);
  font-family:var(--water); font-weight:400; font-size:var(--t-base); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%;}
/* the signature must always keep its 1.76:1 — width follows height, always */
.sigmark, .hero .sig, .signoff img{width:auto !important;}

/* ── the order: eyebrows, labels, folios ── */
.eyebrow{
  font-family:var(--order); font-size:var(--t-xs); font-weight:400;
  letter-spacing:.30em; text-transform:uppercase; color:var(--mist-deep); text-indent:.30em;
}
.folio{
  /* was gold: 2.45:1 on Bone — invisible. Numerals are the order register, not the jewel. */
  display:block; text-align:center; font-family:var(--order); font-size:var(--t-xs);
  letter-spacing:.28em; color:var(--mist-deep); margin-bottom:16px; text-indent:.28em;
}
.folio::after{
  content:""; display:block; width:14px; height:1px; background:var(--gold);
  margin:10px auto 0;   /* gold stays — as a rule, which is the thing it can actually do on light */
}

/* ══ NAV ══ */
nav{
  position:fixed; inset:0 0 auto 0; z-index:50; display:flex; align-items:center;
  justify-content:space-between; padding:20px 44px;
  transition:background .5s ease, padding .5s ease, border-color .5s ease;
  border-bottom:1px solid transparent;
}
nav.solid{
  background:rgba(244,241,234,.90); backdrop-filter:blur(12px);
  padding:12px 44px; border-bottom:1px solid var(--hair);
}
/* The mark is never filtered. brightness(0) crushes the antialiased brush edges to black before
   rebuilding a colour from them — it mangles a hand-drawn signature. Two faithful PNGs cross-fade
   instead: the ocean variant is a pure channel recolour with the alpha untouched, so every edge
   pixel of the original survives exactly. */
/* THE MARK IS NEVER STRETCHED.
   Set height, let width follow. Never `inset:0` (pins four edges = force-fill = smear),
   never width/height attributes in the HTML (the attribute beats a height-only CSS rule),
   never a `filter` chain. The original rule was simply: nav .sigmark{height:40px;} */
nav .mark{position:relative; display:inline-block; line-height:0;}
nav .sigmark{height:40px; width:auto; display:block; transition:opacity .45s ease;}
nav .sigmark.on-light{position:absolute; top:0; left:0; height:40px; width:auto; opacity:0;}
nav.solid .sigmark.on-dark{opacity:0;}
nav.solid .sigmark.on-light{opacity:1;}
nav .social{display:flex; gap:20px; align-items:center;}
nav .social a{padding:12px; margin:-12px;} /* 41px target, icon does not move */
nav .social a{color:var(--bone-2); display:inline-flex; transition:color .35s ease;}
nav.solid .social a{color:var(--mist-deep);}
nav .social a:hover{color:var(--gold);}
nav .social svg{width:17px; height:17px; fill:currentColor;}

/* ══ HERO — the deliberate deep bleed (sanctioned exception to the light ground) ══ */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 24px 90px; overflow:hidden; background:var(--plate); color:var(--bone);
}
/* atmosphere only — pulled down to the plate value so it never lifts the field
   around the portrait. The square edge is invisible when the grounds match. */
.hero .bg{
  position:absolute; inset:-4%; background-image:url("../images/pat-portrait-bg.jpg");
  background-size:cover; background-position:center;
  filter:blur(30px) saturate(.55) brightness(.72); transform:scale(1.08);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{ from{transform:scale(1.08) translate3d(0,0,0);} to{transform:scale(1.14) translate3d(-1.2%,-1.6%,0);} }
/* Portra grade — the teal and the warm light live at the OUTER field only.
   The centre stays exactly --plate so the portrait is enveloped, not mounted. */
.hero .scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(78% 58% at 50% 42%, var(--plate) 0%, var(--plate) 46%, rgba(13,13,13,0) 78%),
    radial-gradient(120% 96% at 50% 30%, rgba(184,151,90,.10) 0%, rgba(13,13,13,0) 62%),
    radial-gradient(130% 100% at 50% 46%, rgba(14,36,43,.30) 0%, rgba(13,13,13,.86) 72%, var(--plate) 100%);
}
.hero .grain{
  position:absolute; inset:0; opacity:.19; mix-blend-mode:overlay; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero .inner{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:30px;}
.hero .portrait{
  max-height:52vh; max-width:min(88vw,560px); width:auto; height:auto; display:block;
  /* the JPG ground is #0D0D0D, identical to --plate, so the frame already disappears.
     This soft edge dissolves the gold ring's crop rather than letting it stop dead. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 7%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.hero .namewrap{display:flex; flex-direction:column; align-items:center; gap:8px;}
.hero .hello{
  font-family:var(--rockface); font-weight:300; font-size:clamp(36px,5.4vw,64px);
  line-height:1.06; margin:0; color:var(--bone);
}
.hero .sig{height:112px; width:auto; margin-top:2px;}
.hero .role{
  margin-top:12px; font-family:var(--order); font-size:var(--t-xs); font-weight:400;
  letter-spacing:.40em; text-transform:uppercase; color:var(--gold); text-indent:.40em;
}
nav .social .house{
  font-family:var(--order); font-size:var(--t-xs); font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; text-indent:.22em; color:var(--bone-2);
  padding:12px 6px; margin:-12px 0 -12px -6px;
}
nav.solid .social .house{color:var(--mist-deep);}
nav .social .house:hover{color:var(--gold);}

.hero .oneline{
  font-family:var(--water); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.7vw,27px); color:rgba(244,241,234,.80);
  margin:16px 0 0; letter-spacing:.01em;
}
.scrollcue{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;}
.scrollcue span{
  display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, rgba(184,151,90,0), var(--gold));
  animation:cue 3.2s ease-in-out infinite;
}
@keyframes cue{0%,100%{opacity:.25; transform:scaleY(.6);} 50%{opacity:1; transform:scaleY(1);}}

/* ══ NARRATIVE — the Bone ground ══ */
.story{max-width:700px; margin:0 auto; padding:132px 32px 40px;}
.block{padding:62px 0;}
.block + .block{border-top:1px solid var(--hair);}
.block .eyebrow{display:block; text-align:center; margin-bottom:18px;}

/* the rock — display */
.block h2{
  font-family:var(--rockface); font-weight:300; font-size:clamp(31px,4.3vw,47px);
  line-height:1.14; letter-spacing:.005em; text-align:center;
  color:var(--ocean); margin:0 0 34px; text-wrap:balance;
}
/* the water — body, at a 60–75ch measure.
   Centred in the column (was pinned left: 0px gutter one side, 42px the other, which
   threw it off the headings' axis) and justified, so both edges are flush.
   `hyphens:auto` is not optional here — justified text without hyphenation opens
   rivers of white space. It needs lang="en-GB" on <html>, which is set. */
.block p{
  font-size:var(--t-base); line-height:1.72; color:var(--ocean-soft);
  margin:0 auto 1.3em; max-width:66ch; letter-spacing:.004em;
  text-align:justify; text-justify:inter-word;
  hyphens:auto; -webkit-hyphens:auto; hyphenate-limit-chars:7 3 3;
}
.block p:last-child{margin-bottom:0;}
.block p em{font-style:italic; color:var(--ocean);}
.block p .lead-in{font-style:italic; color:var(--ocean);}
.pull, .facet p, .signoff .closer{text-align:center; hyphens:none;}

/* the single emphasised word — register shift, not colour.
   Fleeting Gold as inline body text is 2.45:1 on Bone and unreadable; the brand's other
   sanctioned emphasis is REGISTER, so the word moves to the rock and gold does what it may: a hairline. */
.gilt{
  font-family:var(--rockface); font-weight:500; font-size:1.06em;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ocean);
  padding-bottom:1px; border-bottom:1px solid var(--gold);
}

/* the poem — her own words, given the room to be a poem */
/* The poem is left as it was — the alignment pass does not apply to it.
   Gold rail down the left edge, lines left-aligned, never justified, never hyphenated.
   Do not centre it, do not re-rag it, do not touch the line breaks. They are hers. */
.poem{margin:44px 0; padding:0 0 0 30px; border-left:1px solid var(--gold);}
.poem .ptitle{
  font-family:var(--order); font-size:11.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--mist-deep); text-indent:.30em; margin-bottom:22px;
}
.poem p{
  font-family:var(--water); font-style:italic; font-size:20px; line-height:1.62;
  color:var(--ocean); margin:0 0 1.1em; max-width:none;
  text-align:left; hyphens:none;   /* verse. The line breaks are hers. */
}
.poem p:last-of-type{margin-bottom:0;}
.poem .pmeta{
  font-family:var(--order); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--mist-deep); margin-top:26px;
}

/* a cited quote — someone else's voice, so it sits differently from the poem (Pat's own) */
.quote{margin:42px 0; padding:0; text-align:center;}
.quote blockquote{
  margin:0; font-family:var(--rockface); font-weight:300; font-style:normal;
  font-size:clamp(25px,3.3vw,34px); line-height:1.3; color:var(--ocean);
  letter-spacing:.005em; text-wrap:balance;
}
.quote figcaption{
  margin-top:22px; padding-top:18px; font-family:var(--order); font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mist-deep);
  position:relative; display:inline-block;
}
.quote figcaption::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:34px; height:1px; background:var(--gold);
}

/* the lyric line */
.pull{
  font-family:var(--water); font-style:italic; font-weight:400;
  font-size:clamp(23px,3.2vw,33px); line-height:1.46; color:var(--ocean);
  text-align:center; margin:46px auto !important; max-width:26ch !important;
}

/* ── 03 · the award ── */
.award{
  /* The jewel. Gold is 2.45:1 on Bone and invisible; on Deep Ocean it is 5.83 and finally reads.
     An award is the one place on this page where gold is allowed to be the loudest thing. */
  margin:38px auto 44px; padding:44px 34px; max-width:430px; text-align:center;
  background:var(--ocean); border:0; position:relative;
}
.award::before, .award::after{
  content:""; position:absolute; left:34px; right:34px; height:1px; background:rgba(184,151,90,.34);
}
.award::before{top:14px;} .award::after{bottom:14px;}
.award .aname{
  font-family:var(--rockface); font-weight:400; font-size:clamp(25px,3.3vw,32px);
  letter-spacing:.19em; text-transform:uppercase; color:var(--gold);
  line-height:1.2; text-indent:.19em;
}
.award .ameta{
  font-family:var(--order); font-size:var(--t-sm); font-weight:300; letter-spacing:.10em;
  color:var(--mist); margin-top:16px; line-height:1.6;
}
.award .ahair{width:44px; height:1px; background:rgba(184,151,90,.5); margin:24px auto;}
.award .anote{font-family:var(--water); font-style:italic; font-size:var(--t-md); color:var(--bone);}

/* ── 04 · the study index ── */
.index{
  /* Deliberately NOT the award's treatment. Light, open, a single gold thread down the edge —
     the two blocks are a pair, not an echo. */
  margin:42px 0 10px; padding:30px 30px 26px;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  border-left:1px solid var(--gold);
}

.index .ilabel{
  display:block; text-align:left; font-family:var(--order); font-size:11.5px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--mist-deep);
  text-indent:.34em; margin-bottom:28px;
}
.ilist{list-style:none; margin:0; padding:0;}
.ilist li{padding:19px 0; border-top:1px solid var(--hair);}
.ilist li:first-child{border-top:0; padding-top:0;}
.ilist .inst{
  display:block; font-family:var(--rockface); font-weight:400; font-size:20px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ocean); line-height:1.34; text-indent:.13em;
}
.ilist .idisc{
  display:block; font-family:var(--water); font-style:italic; font-size:var(--t-sm);
  color:var(--mist-deep); margin-top:7px; line-height:1.5;
}
.index .ifoot{
  text-align:left; font-family:var(--water); font-style:italic; font-size:15px;
  letter-spacing:.01em; color:var(--mist-deep); margin-top:28px;
}

/* ── the highlighted zone — §02, the credentials.
   A Mist-over-Bone ground: on-palette, full-bleed, and the only tinted section on the page. ── */
.block.zone{
  position:relative; padding:70px 0 66px;
  background:var(--zone);
  box-shadow:0 0 0 100vmax var(--zone);
  clip-path:inset(0 -100vmax);
}
.block.zone + .block{border-top:0;}
.block.zone .index{border-top-color:var(--zone-hair); border-bottom-color:var(--zone-hair);} /* leave border-left — that is the gold thread */
.block.zone .ilist li{border-color:var(--zone-hair);}

/* ── 03 · the lineage — quiet attributions, never a bibliography ── */
.sources{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  margin:44px auto 0; padding-top:22px; border-top:1px solid var(--hair); max-width:62ch;
}
.sources span{
  font-family:var(--order); font-size:11.5px; font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; color:var(--mist-deep); white-space:nowrap;
}
.sources span em{font-family:var(--water); font-style:italic; text-transform:none; letter-spacing:.02em; font-size:12px;}
.sources .bek{font-style:normal; text-transform:none; letter-spacing:.10em;} /* Bekker numbers are lowercase */

/* ── 07 · the series — inside the house ── */
.series{margin:44px 0 40px; padding:32px 30px; background:var(--bone-2); border:1px solid var(--hair);}
.series .slabel{
  display:block; text-align:center; font-family:var(--order); font-size:var(--t-xs);
  letter-spacing:.28em; text-transform:uppercase; color:var(--mist-deep);
  text-indent:.28em; margin-bottom:26px;
}
.slist{list-style:none; margin:0; padding:0;}
.slist li{border-top:1px solid var(--hair);}
.slist li:first-child{border-top:0;}
.slist a{display:block; padding:20px 0; transition:opacity .35s ease;}
.slist a:hover{opacity:.62;}
.slist a:hover .sname{color:var(--gold);}
.slist .sname{
  display:block; font-family:var(--rockface); font-weight:400; font-size:19px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ocean);
  text-indent:.16em; transition:color .35s ease;
}
.slist .sdesc{
  display:block; font-family:var(--water); font-size:var(--t-sm);
  color:var(--mist-deep); margin-top:7px; line-height:1.56; max-width:52ch;
}
.slist .sdesc em{color:var(--ocean-soft);}
.series .sfoot{text-align:center; margin-top:26px; padding-top:22px; border-top:1px solid var(--hair);}
.series .sfoot a{
  /* an interactive control must be legible — this is not decoration, it is the CTA */
  display:inline-block; padding:12px 8px; margin:-12px -8px;
  font-family:var(--order); font-size:var(--t-xs); letter-spacing:.24em;
  text-transform:uppercase; color:var(--ocean); text-indent:.24em;
  border-bottom:1px solid var(--gold); transition:color .3s ease, border-color .3s ease;
}
.series .sfoot a:hover{color:var(--mist-deep); border-bottom-color:var(--mist-deep);}

/* ── 07 · three worlds ── */
.trio{margin:10px 0 38px;}
.facet{padding:32px 0; border-top:1px solid var(--hair);}
.facet:first-child{border-top:0;}
.facet .flabel a{
  color:inherit; display:inline-block; padding:6px 2px 4px; border-bottom:1px solid rgba(184,151,90,.42);
  transition:border-color .3s ease, color .3s ease;
}
.facet .flabel a:hover{color:var(--gold); border-bottom-color:var(--gold);}
.facet .flabel{
  display:block; text-align:center; font-family:var(--rockface); font-weight:400; font-size:17px;
  letter-spacing:.20em; text-transform:uppercase; color:var(--ocean); margin-bottom:15px; text-indent:.20em;
}
.facet p{text-align:center; margin:0 auto !important; max-width:56ch !important;}

/* ── sign-off ── */
.signoff{text-align:center; padding:34px 0 6px;}
.signoff .closer{
  font-family:var(--water); font-style:italic; font-size:var(--t-md);
  color:var(--ocean); margin-bottom:24px;
}
.signoff img{height:98px; width:auto; margin:8px 0 10px;}

/* ══ FOOTER ══ */
footer{border-top:1px solid var(--hair); padding:80px 24px 64px; text-align:center; background:var(--bone-2);}
footer .line{font-family:var(--water); font-style:italic; font-size:var(--t-md); color:var(--mist-deep);}
footer .socials{display:flex; gap:30px; justify-content:center; align-items:center; margin:36px 0 22px; flex-wrap:wrap;}
footer .socials a{
  color:var(--ocean); display:inline-flex; align-items:center; gap:9px;
  padding:12px 6px; margin:-12px -6px;
  font-family:var(--order); font-size:var(--t-xs); letter-spacing:.20em;
  text-transform:uppercase; transition:color .35s ease;
}
footer .socials a:hover{color:var(--gold);}
footer .socials svg{width:16px; height:16px; fill:currentColor;}
footer .handle{font-family:var(--order); font-size:12px; letter-spacing:.28em; color:var(--mist-deep); margin-top:4px;}
footer .fhouse{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin-top:30px; padding-top:26px; border-top:1px solid var(--hair);
}
/* footer legal links — small, but still tappable at 44px */
footer .fhouse a{
  padding:12px 4px; min-height:44px; display:inline-flex; align-items:center;
  font-family:var(--order); font-size:var(--t-xs); font-weight:300; letter-spacing:.20em;
  text-transform:uppercase; color:var(--mist-deep); transition:color .35s ease;
}
footer .fhouse a:hover{color:var(--gold);}

footer .legal{
  margin-top:32px; font-family:var(--order); font-size:10.5px; font-weight:400;
  letter-spacing:.16em; text-transform:uppercase; color:var(--mist-deep);
}

/* ══ MOTION — lamp-up reveal ══ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .hero .bg{animation:none;} .scrollcue span{animation:none;}
  html{scroll-behavior:auto;}
}

@media (max-width:680px){
  nav{padding:16px 22px;} nav.solid{padding:11px 22px;}
  nav .sigmark, nav .sigmark.on-light{height:34px;}
  .hero{padding:104px 22px 80px;}
  .hero .portrait{max-height:44vh;}
  .hero .sig{height:88px;}
  nav .social .house{
  font-family:var(--order); font-size:var(--t-xs); font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; text-indent:.22em; color:var(--bone-2);
  padding:12px 6px; margin:-12px 0 -12px -6px;
}
nav.solid .social .house{color:var(--mist-deep);}
nav .social .house:hover{color:var(--gold);}

.hero .oneline{font-size:19px;}
  .story{padding:92px 24px 30px;}
  /* below ~46ch, justification opens gaps faster than hyphenation can close them */
  .block p, .legal-body p{text-align:left; hyphens:none;}
  .block{padding:48px 0;}
  .award{padding:34px 20px;}
  .award::before, .award::after{left:20px; right:20px;}
  .index{padding-left:20px;}
  .index .ilabel, .index .ifoot{padding-right:20px;}
  .poem{padding-left:20px;}
  .poem p{font-size:18px;}
  .series{padding:26px 20px;}
  .sources{gap:8px 16px;}
  .sources span{white-space:normal;}
  footer .fhouse{gap:14px 18px;}
  footer .socials{flex-direction:column; gap:18px;}
}

/* ══════════════════════════════════════════════════════════════
   LEGAL PAGES — /privacy and /terms
   Same house, quieter room. No hero, no reveals, no gold except the rules.
   ══════════════════════════════════════════════════════════════ */
body.legal-page{background:var(--bone);}
.legal-head{
  padding:150px 32px 0; max-width:700px; margin:0 auto; text-align:center;
}
.legal-head .eyebrow{display:block; margin-bottom:18px;}
.legal-head h1{
  font-family:var(--rockface); font-weight:300; font-size:clamp(34px,4.6vw,50px);
  line-height:1.12; color:var(--ocean); margin:0 0 18px; text-wrap:balance;
}
.legal-head .updated{
  font-family:var(--order); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mist-deep);
}
.legal-head .rule{width:44px; height:1px; background:var(--gold); margin:34px auto 0;}
.legal-body{max-width:700px; margin:0 auto; padding:8px 32px 60px;}
.legal-body section{padding:44px 0; border-bottom:1px solid var(--hair);}
.legal-body section:last-of-type{border-bottom:0;}
.legal-body h2{
  font-family:var(--rockface); font-weight:400; font-size:19px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ocean); margin:0 0 20px; text-indent:.16em;
}
.legal-body p{
  font-family:var(--water); font-size:17px; line-height:1.72; color:var(--ocean-soft);
  margin:0 auto 1.1em; max-width:66ch;
  text-align:justify; text-justify:inter-word; hyphens:auto; -webkit-hyphens:auto;
}
.legal-body li{
  font-family:var(--water); font-size:17px; line-height:1.72; color:var(--ocean-soft);
  margin:0 0 1.1em; max-width:66ch;
}
.legal-body li{margin-bottom:.6em;}
.legal-body ul{margin:0 0 1.2em; padding-left:20px;}
.legal-body a{color:var(--ocean); border-bottom:1px solid var(--gold); padding-bottom:1px;}
.legal-body a:hover{color:var(--mist-deep); border-bottom-color:var(--mist-deep);}
.legal-body strong{color:var(--ocean); font-weight:500;}
.legal-note{
  margin-top:34px; padding:24px 26px; background:var(--bone-2); border-left:1px solid var(--gold);
}
.legal-note p{font-style:italic; font-size:15.5px; margin:0; color:var(--mist-deep);}
.legal-back{text-align:center; padding:0 32px 90px;}
.legal-back a{
  font-family:var(--order); font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ocean); text-indent:.24em; border-bottom:1px solid var(--gold);
  padding:12px 8px; display:inline-block;
}
.legal-back a:hover{color:var(--mist-deep); border-bottom-color:var(--mist-deep);}
@media (max-width:680px){
  .legal-head{padding:120px 24px 0;}
  .legal-body{padding:8px 24px 40px;}
}