:root{
    --paper:#F6F1E6;
    --paper-deep:#EEE6D4;
    --ink:#221E18;
    --ink-soft:#55503F;
    --wine:#6E1F2A;
    --wine-soft:#8B4B4F;
    --private:#726A57;
    --rule:#DED2B4;
    --serif:'Fraunces', Georgia, 'Times New Roman', serif;
    --mono:'Space Mono', 'Courier New', monospace;
    --ease:cubic-bezier(.4,0,.2,1);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--serif); -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  img,.tex{display:block;}
  ::selection{background:var(--wine); color:var(--paper);}
  :focus-visible{outline:2px solid var(--wine); outline-offset:3px;}

  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:80;
    opacity:.045; mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  .skip-link{
    position:absolute; left:6vw; top:-100px; z-index:100;
    background:var(--ink); color:var(--paper); font-family:var(--mono); font-size:12px;
    padding:.8rem 1.2rem; text-decoration:none; transition:top .25s var(--ease);
  }
  .skip-link:focus{ top:1rem; }

  /* ---------- NAV ---------- */
  header.nav{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; align-items:center; justify-content:space-between;
    padding:1.6rem 6vw; transition:background .5s var(--ease), padding .5s var(--ease);
  }
  header.nav.solid{ background:rgba(246,241,230,.92); backdrop-filter:blur(6px); padding:1.1rem 6vw; border-bottom:1px solid var(--rule); }
  .wordmark{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    text-decoration:none;
  }
  .idx-btn{
    font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
    background:none; border:none; color:var(--ink); cursor:pointer;
    padding:.85rem .5rem; margin:-.85rem -.5rem; position:relative;
  }
  .idx-btn::after{
    content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:var(--ink);
    transition:width .35s var(--ease);
  }
  .idx-btn:hover::after{ width:100%; }

  /* ---------- INDEX OVERLAY ---------- */
  .overlay{
    position:fixed; inset:0; z-index:90; background:var(--paper);
    display:flex; flex-direction:column; justify-content:center;
    padding:6vw; transform:translateY(-100%); transition:transform .55s var(--ease);
  }
  .overlay.open{ transform:translateY(0); }
  .overlay .close{
    position:absolute; top:1.6rem; right:6vw; font-family:var(--mono); font-size:12px;
    letter-spacing:.14em; text-transform:uppercase; background:none; border:none; color:var(--ink); cursor:pointer;
  }
  .overlay nav{ display:flex; flex-direction:column; gap:.3rem; }
  .overlay nav a{
    font-family:var(--serif); font-weight:340; font-size:clamp(2rem,6vw,3.6rem);
    text-decoration:none; color:var(--ink); padding:.25rem 0; border-bottom:1px solid transparent;
    transition:color .3s var(--ease), border-color .3s var(--ease); width:fit-content;
  }
  .overlay nav a:hover{ color:var(--wine); border-color:var(--rule); }
  .overlay .foot{
    margin-top:3rem; font-family:var(--mono); font-size:11px; color:var(--ink-soft);
    letter-spacing:.08em;
  }

  .private{
    font-family:var(--mono); font-size:13px; line-height:1.65; color:var(--private);
  }

  /* ---------- HERO ---------- */
  #hero{
    min-height:100svh; display:flex; flex-direction:column; justify-content:center;
    padding:9vh 6vw 8vh 6vw; position:relative;
  }
  #hero h1{
    font-weight:340; font-size:clamp(2.8rem, 7.2vw, 6.4rem); line-height:1.03;
    letter-spacing:-.01em; max-width:16ch; margin:0 0 1.6rem 0;
    animation:rise 1.15s var(--ease) both;
  }
  @keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:translateY(0);} }
  #hero .private{
    max-width:36ch; opacity:0; animation:fadeLate 1.1s ease .95s both;
  }
  @keyframes fadeLate{ to{opacity:1;} }
  #hero .cue{
    position:absolute; bottom:6vh; left:6vw; font-family:var(--mono); font-size:11px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
    animation:breathe 3.2s ease-in-out infinite;
  }
  @keyframes breathe{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

  /* ---------- RECOGNITION ---------- */
  #recognition{ padding:16vh 6vw 16vh 6vw; }

  /* ---------- MANIFESTO ---------- */
  #manifesto{ padding:16vh 6vw 16vh 6vw; }
  .manifesto-inner{ max-width:680px; margin-left:4vw; }
  .manifesto-inner .lede{
    font-weight:440; font-size:clamp(1.8rem,3.6vw,2.9rem); line-height:1.26;
    letter-spacing:-.005em; margin:0 0 1.6rem 0;
  }
  .manifesto-inner .body{
    font-weight:340; font-size:1.08rem; line-height:1.8; color:var(--ink-soft);
    max-width:58ch;
  }
  .manifesto-inner .statement{
    font-style:italic; font-weight:400; color:var(--wine-soft);
    font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.5;
    max-width:32ch; margin:2.6rem 0;
  }

  /* ---------- IMAGE REST ---------- */
  #rest-img{ position:relative; min-height:60svh; background:var(--paper); }
  #rest-img picture{ position:absolute; inset:0; display:block; }
  .rest-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:50% 68%; display:block;
  }
  .tex{
    position:absolute; inset:0;
    background:
      radial-gradient(120% 90% at 25% 15%, #B79E7A 0%, transparent 55%),
      radial-gradient(90% 70% at 82% 88%, #6E5A40 0%, transparent 60%),
      linear-gradient(155deg,#C9B48C 0%, #8E7455 55%, #43341F 100%);
  }
  .tex::after{
    content:""; position:absolute; inset:0; mix-blend-mode:overlay; opacity:.35;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)' opacity='0.35'/></svg>");
  }
  .img-caption{
    position:absolute; left:6vw; bottom:6vh; z-index:2; color:var(--paper);
    font-family:var(--serif); font-style:italic; font-weight:340; font-size:clamp(1rem,2vw,1.25rem);
    max-width:26ch;
  }

  /* ---------- THEMES / TABLE ---------- */
  #themes{ padding:14vh 6vw; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
  #themes .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--wine); margin-bottom:2rem;
  }
  .theme-flow{
    font-family:var(--serif); font-weight:340; font-size:clamp(1.3rem,2.8vw,2.1rem);
    line-height:1.7; max-width:900px; color:var(--ink-soft);
  }
  .theme-flow span{ color:var(--ink); }
  .theme-flow .now{
    color:var(--wine); font-style:italic;
  }
  .theme-note{
    margin-top:2rem; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
    color:var(--private); text-transform:lowercase;
  }

  /* ---------- CHAPTERS ---------- */
  #chapters{ padding:14vh 6vw 4vh 6vw; }
  #chapters .eyebrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:2.5rem;
  }
  .door{
    display:flex; align-items:center; gap:3vw; padding:2.6rem 0;
    border-top:1px solid var(--rule); text-decoration:none; color:var(--ink);
    position:relative; transition:background .4s var(--ease);
  }
  .door:last-child{ border-bottom:1px solid var(--rule); }
  .door .num{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); width:2.4ch; flex-shrink:0; }
  .door .title{
    font-family:var(--serif); font-weight:400; font-size:clamp(1.6rem,3.4vw,2.6rem);
    flex:1; transition:transform .5s var(--ease); min-width:0;
  }
  .door .teaser{
    font-family:var(--serif); font-style:italic; font-weight:340; color:var(--ink-soft);
    font-size:.98rem; max-width:34ch; text-align:right; flex-shrink:0;
  }
  .door .thumb{
    width:0; height:64px; border-radius:2px; overflow:hidden; flex-shrink:0;
    transition:width .45s var(--ease); opacity:0;
  }
  .door .thumb .tex{ position:relative; inset:auto; width:96px; height:64px; }
  .door .thumb img{
    width:96px; height:64px; object-fit:cover; display:block;
  }
  .door .thumb.contain{ background:#000; }
  .door .thumb.contain img{ object-fit:contain; }
  @media (hover:hover){
    .door:hover{ background:var(--paper-deep); }
    .door:hover .title{ transform:translateX(10px); }
    .door:hover .thumb{ width:96px; opacity:1; }
  }

  /* ---------- ABOUT TEASER ---------- */
  #about-teaser{ padding:16vh 6vw; background:var(--paper-deep); }
  #about-teaser .frag{
    font-weight:400; font-size:clamp(1.7rem,4.2vw,2.6rem); line-height:1.5;
    max-width:20ch; margin:0 0 .4rem 0;
  }
  #about-teaser .private{ display:block; margin:1rem 0 2.2rem 1.5rem; max-width:34ch; }
  .link-arrow{
    font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
    text-decoration:none; color:var(--ink); border-bottom:1px solid var(--ink);
    padding:.6rem 0 2px 0; margin:-.6rem 0 0 0; display:inline-block;
    transition:color .3s var(--ease), border-color .3s var(--ease);
  }
  .link-arrow:hover{ color:var(--wine); border-color:var(--wine); }

  /* ---------- NEWSLETTER ---------- */
  #newsletter{ padding:16vh 6vw; }
  .letter-inner{ max-width:560px; }
  .letter-inner .lede{
    font-weight:400; font-size:clamp(1.8rem,4.6vw,2.6rem); line-height:1.3;
    margin:0 0 2rem 0; max-width:16ch;
  }
  .letter-row{
    display:flex; align-items:center; gap:1.2rem; border-bottom:1px solid var(--ink);
    padding-bottom:.7rem; max-width:440px; margin-bottom:1rem;
  }
  .letter-row input{
    flex:1; border:none; background:transparent; outline:none;
    font-family:var(--serif); font-style:italic; font-size:1.1rem; color:var(--ink);
  }
  .letter-row input::placeholder{ color:var(--ink-soft); opacity:.55; }
  .letter-row button{
    border:none; background:none; font-family:var(--mono); font-size:12px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--wine); cursor:pointer;
    padding:.85rem .25rem; margin:-.85rem -.25rem; position:relative;
  }
  .letter-row button::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--wine);
    transition:width .3s var(--ease);
  }
  .letter-row button:hover::after{ width:100%; }
  .letter-inner .micro{
    font-family:var(--serif); font-style:italic; font-size:.92rem; color:var(--ink-soft);
  }

  /* ---------- FOOTER ---------- */
  footer{ padding:6vh 6vw 5vh 6vw; border-top:1px solid var(--rule); }
  .foot-grid{
    display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem 3rem;
    padding-bottom:2.5rem;
  }
  .foot-links{ display:flex; flex-direction:column; gap:.55rem; }
  .foot-links a{
    font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-decoration:none;
    color:var(--ink-soft); transition:color .3s var(--ease);
    padding:.35rem 0; margin:-.35rem 0; display:inline-block;
  }
  .foot-links a:hover{ color:var(--wine); }
  .foot-social{ display:flex; flex-direction:column; gap:.55rem; }
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:1rem;
    padding-top:1.6rem; border-top:1px solid var(--rule);
  }
  .foot-bottom .rights{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
  footer .private{ max-width:38ch; }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ---------- CHAPTER / ENTRY LIST (interior pages) ---------- */
  .chapter-hero{ min-height:60svh; display:flex; flex-direction:column; justify-content:flex-end; padding:16vh 6vw 8vh 6vw; }
  .chapter-hero .back{
    font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft); text-decoration:none; position:absolute; top:6vh; left:6vw;
  }
  .chapter-hero h1{
    font-weight:340; font-size:clamp(2.2rem,5.6vw,4.2rem); line-height:1.08; max-width:16ch; margin:0;
  }
  .chapter-intro-block{ max-width:640px; margin:0 6vw 12vh 10vw; }
  .chapter-intro-block .body{ font-weight:340; font-size:1.05rem; line-height:1.8; color:var(--ink-soft); max-width:56ch; }
  .entry-list{ border-top:1px solid var(--rule); }
  .entry{
    display:flex; align-items:baseline; justify-content:space-between; gap:2rem;
    padding:2rem 6vw; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink);
    transition:background .4s var(--ease);
  }
  .entry:hover{ background:var(--paper-deep); }
  .entry .entry-title{ font-family:var(--serif); font-weight:400; font-size:clamp(1.2rem,2.6vw,1.7rem); }
  .entry .entry-meta{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); letter-spacing:.06em; white-space:nowrap; }
  .chapter-outro{ padding:12vh 6vw; }

  /* ---------- IMAGE FRAME (aspect-ratio placeholder system) ----------
     Usage: <div class="img-frame ar-16-9"><div class="tex"></div></div>
     To drop in real photography later: replace the inner <div class="tex">
     with <img src="..." alt="..."> — .img-frame already positions it. */
  .img-frame{ position:relative; overflow:hidden; background:var(--paper-deep); }
  .img-frame .tex{ position:absolute; inset:0; }
  .img-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .ar-21-9{ aspect-ratio:21/9; }
  .ar-16-9{ aspect-ratio:16/9; }
  .ar-4-3{ aspect-ratio:4/3; }
  .ar-3-4{ aspect-ratio:3/4; }
  .ar-3-2{ aspect-ratio:3/2; }
  .ar-4-5{ aspect-ratio:4/5; }
  .ar-2-3{ aspect-ratio:2/3; }
  .ar-1-1{ aspect-ratio:1/1; }
  /* For precise graphic assets (logos, key art) that must never be cropped —
     shows the whole image, letterboxed on a matching background if needed. */
  .img-frame.contain{ background:#000; }
  .img-frame.contain img{ object-fit:contain; }

  /* ---------- CLARITY ZONE (commerce / practical info, per Strategic Foundation §15) ---------- */
  .clarity-zone{
    border:1px solid var(--rule); padding:2rem 6vw; margin:3rem 0;
    display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:1rem 2rem;
  }
  .clarity-zone .cz-label{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
  .clarity-zone .cz-value{ font-family:var(--serif); font-size:1.3rem; }
  .clarity-zone .link-arrow{ margin-left:auto; }

  /* ---------- PLACEHOLDER ROWS (for chapters awaiting CMS content) ---------- */
  .placeholder-row{
    display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1.5rem;
    padding:1.6rem 0; border-bottom:1px solid var(--rule);
    font-family:var(--mono); font-size:13px; color:var(--ink-soft); letter-spacing:.02em;
  }
  .placeholder-row:first-child{ border-top:1px solid var(--rule); }
  .placeholder-note{
    font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--private); margin:1.5rem 0 0 0;
  }

  /* ---------- FORM FIELDS (contact) ---------- */
  .field-row{ margin-bottom:1.8rem; max-width:480px; }
  .field-row label{
    display:block; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--ink-soft); margin-bottom:.5rem;
  }
  .field-row input, .field-row textarea{
    width:100%; border:none; border-bottom:1px solid var(--ink); background:transparent; outline:none;
    font-family:var(--serif); font-size:1.05rem; color:var(--ink); padding:.4rem 0; resize:vertical;
  }
  .field-row input::placeholder, .field-row textarea::placeholder{ color:var(--ink-soft); opacity:.5; }
  .form-submit{
    border:none; background:none; font-family:var(--mono); font-size:12px; letter-spacing:.1em;
    text-transform:uppercase; color:var(--wine); cursor:pointer; padding:.85rem .25rem; margin:.5rem -.25rem 0 -.25rem;
    border-bottom:1px solid var(--wine);
  }
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }

  /* ---------- MOBILE ---------- */
  @media (max-width:760px){
    header.nav{ padding:1.3rem 6vw; }
    .overlay nav a{ font-size:clamp(1.7rem,9vw,2.6rem); }
    #hero{ padding-top:12vh; }
    #hero h1{ max-width:none; }
    .manifesto-inner{ margin-left:0; }
    .door{ flex-wrap:wrap; gap:1rem 0; padding:2rem 0; }
    .door .teaser{ display:block; text-align:left; order:3; width:100%; margin-left:2.4ch; font-size:.9rem; }
    .door .thumb{ display:none; }
    .door:hover .title{ transform:none; }
    .letter-row{ max-width:none; }
    .foot-grid{ flex-direction:column; gap:1.6rem; }
  }