:root{
  --black:#0B0B0B;
  --charcoal:#2F2F2F;
  --paper:#F2ECE3;
  --paper-deep:#EDE5D2;
  --white:#F5F5F5;
  --crimson:#8B1A1A;
  --gold:#C6A46C;
  --gold-dim:rgba(198,164,108,0.28);
  --ink-dim:rgba(11,11,11,0.55);
  --ink-faint:rgba(11,11,11,0.14);
  --rule:rgba(11,11,11,0.22);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--black);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:300;
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--crimson);color:var(--paper);}
em,i{font-style:italic;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* ---------- grain + vignette ---------- */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);animation:rv .95s cubic-bezier(.4,0,.2,1) forwards;}
.d1{animation-delay:.08s}.d2{animation-delay:.18s}.d3{animation-delay:.28s}
.d4{animation-delay:.38s}.d5{animation-delay:.48s}.d6{animation-delay:.58s}
@keyframes rv{to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .rv{animation:none;opacity:1;transform:none;}
}

/* ---------- type utilities ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--crimson);font-weight:500;
}
.eyebrow--ink{color:var(--ink-dim);}
.smallcaps{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);}
.numeral{color:var(--gold);}
.rule{border:none;border-top:1px solid var(--rule);margin:0;}
.rule--crimson{border-top:1px solid var(--crimson);}

/* ---------- shell ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 min(5vw,48px);}

/* ---------- masthead ---------- */
header.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
  position:sticky;top:0;z-index:100;
}
.masthead-inner{
  max-width:1080px;margin:0 auto;padding:18px min(5vw,48px);
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
}
.masthead .monogram{
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;cursor:pointer;white-space:nowrap;
}
.masthead .monogram .numeral{color:var(--gold);font-style:italic;text-transform:none;font-size:15px;}
.masthead nav{display:flex;gap:28px;align-items:baseline;}
.masthead nav a{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
  cursor:pointer;transition:color .3s;padding-bottom:2px;border-bottom:1px solid transparent;
}
.masthead nav a:hover{color:var(--black);}
.masthead nav a.on{color:var(--crimson);border-bottom-color:var(--crimson);}
.masthead nav a.signout{color:var(--ink-dim);font-style:italic;text-transform:none;letter-spacing:.06em;font-size:14px;}
.masthead nav a.signout:hover{color:var(--crimson);}

/* ---------- login (typographic entrance: cream) ---------- */
#page-login{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:8vh 20px;
}
.gate{width:100%;max-width:460px;text-align:center;}
.gate .crest{
  font-size:13px;letter-spacing:.5em;text-transform:uppercase;font-weight:500;margin-bottom:6px;
}
.gate .crest b{color:var(--crimson);font-weight:500;}
.gate .collection-mark{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--ink-dim);
}
.gate .sigil{margin:44px auto 40px;width:64px;height:64px;position:relative;}
.gate .sigil svg{width:100%;height:100%;}
.gate h1{
  font-size:clamp(34px,5vw,44px);font-weight:300;font-style:italic;line-height:1.15;margin-bottom:14px;
}
.gate h1 .dot{color:var(--crimson);font-style:normal;}
.gate .gloss{
  font-style:italic;color:var(--ink-dim);font-size:18px;max-width:340px;margin:0 auto 52px;
}
.gate form{text-align:left;}
.gate .field{margin-bottom:34px;}
.gate label{
  display:block;font-size:10px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:8px;font-weight:500;
}
.gate input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--rule);
  font-family:'Cormorant Garamond',serif;font-weight:300;font-size:21px;color:var(--black);
  padding:6px 2px 10px;outline:none;transition:border-color .35s;border-radius:0;
}
.gate input:focus{border-bottom-color:var(--crimson);}
.gate input::placeholder{color:rgba(11,11,11,0.3);font-style:italic;}
.gate button{
  width:100%;margin-top:10px;padding:16px 0 15px;cursor:pointer;
  background:var(--black);color:var(--paper);border:1px solid var(--black);
  font-family:'Cormorant Garamond',serif;font-size:12px;letter-spacing:.36em;text-transform:uppercase;font-weight:500;
  transition:background .35s,color .35s;
}
.gate button:hover{background:var(--crimson);border-color:var(--crimson);}
.gate button:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;}
.gate .notice{
  margin-bottom:34px;border-left:2px solid var(--crimson);padding:4px 0 4px 18px;
  font-style:italic;font-size:16px;color:var(--crimson);
}
.gate .foot{
  margin-top:46px;text-align:center;font-style:italic;color:var(--ink-dim);font-size:15px;
}
.gate .foot .sect{color:var(--gold);font-style:normal;}
.gate .yearline{
  margin-top:14px;font-size:10px;letter-spacing:.4em;color:var(--ink-dim);text-transform:uppercase;text-align:center;
}

/* ---------- typographic aphorism band ---------- */
.aph-t{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin:96px 0 0;padding:76px 24px 70px;text-align:center;
}
.aph-t .aq{
  font-style:italic;font-weight:300;color:var(--black);
  font-size:clamp(26px,3.6vw,40px);line-height:1.35;max-width:680px;margin:0 auto;
}
.aph-t .aq .em{color:var(--crimson);}
.aph-t .asig{
  margin-top:30px;font-size:11px;letter-spacing:.52em;text-transform:uppercase;
  color:var(--ink-dim);font-weight:500;
}

/* ---------- reading wire ---------- */
#wire{
  position:fixed;top:0;left:0;height:2px;width:0;background:var(--crimson);
  z-index:9600;display:none;transition:width .1s linear;
}
#wire.on{display:block;}

/* ---------- home split (portrait left, content right) ---------- */
.home-split{
  display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:min(6vw,72px);align-items:start;padding:72px 0 40px;
}
.home-split.no-img{grid-template-columns:1fr;}
.home-portrait{margin:0;position:sticky;top:96px;}
.home-portrait img{
  width:100%;height:auto;display:block;filter:saturate(.92);
  aspect-ratio:4/5;object-fit:cover;
}
.home-portrait figcaption{
  padding-top:12px;font-style:italic;color:var(--ink-dim);font-size:14px;
  border-bottom:1px solid var(--rule);padding-bottom:16px;
}
.home-portrait figcaption b{
  font-style:normal;font-weight:500;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--black);margin-right:14px;
}
.home-content h1{
  font-size:clamp(34px,4.2vw,50px);font-weight:300;font-style:italic;line-height:1.12;
  margin:16px 0 18px;
}
.home-content h1 .dot{color:var(--crimson);font-style:normal;}
.home-content .lede{font-style:italic;color:var(--ink-dim);font-size:19px;max-width:520px;margin-bottom:44px;}
.doors--stack{grid-template-columns:1fr;margin-bottom:0;}
.doors--stack .door{padding:38px 36px 34px;}
.doors--stack .door p{min-height:0;}
.doors--stack .door .ghost{font-size:150px;top:-30px;}
.doors--stack .door .go{bottom:34px;}
.home-split + .plate{margin-top:88px;}
@media (max-width:900px){
  .home-split{grid-template-columns:1fr;padding-top:48px;}
  .home-portrait{position:static;max-width:520px;}
}

/* ---------- hero blocks ---------- */
.hero{padding:88px 0 64px;}
.hero h1{
  font-size:clamp(40px,6.4vw,66px);font-weight:300;font-style:italic;line-height:1.1;
  max-width:760px;margin:18px 0 22px;
}
.hero h1 .dot{color:var(--crimson);font-style:normal;}
.hero p.lede{
  font-style:italic;color:var(--ink-dim);font-size:20px;max-width:560px;
}

/* ---------- hub doors ---------- */
.doors{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-bottom:88px;
}
@media (max-width:1020px){.doors{grid-template-columns:1fr;}}
.door{
  background:var(--paper);padding:56px 44px 48px;cursor:pointer;position:relative;overflow:hidden;
  transition:background .5s;display:block;
}
.door:hover{background:var(--paper-deep);}
.door .no{
  font-size:12px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;font-weight:500;
}
.door h2{
  font-size:clamp(30px,3.6vw,42px);font-weight:300;font-style:italic;margin:16px 0 14px;line-height:1.1;
}
.door h2 .dot{color:var(--crimson);font-style:normal;}
.door p{color:var(--ink-dim);font-style:italic;font-size:17px;max-width:340px;min-height:78px;}
.door .count{
  margin-top:30px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-dim);
}
.door .go{
  position:absolute;right:40px;bottom:42px;font-size:26px;color:var(--crimson);
  transform:translateX(-6px);opacity:0;transition:all .45s;
}
.door:hover .go{transform:translateX(0);opacity:1;}
.door .ghost{
  position:absolute;right:16px;top:-16px;font-size:170px;font-style:italic;font-weight:300;
  color:rgba(198,164,108,0.5);line-height:1;pointer-events:none;user-select:none;
  transition:color .5s;
}
.door:hover .ghost{color:rgba(198,164,108,0.72);}

/* ---------- section listing ---------- */
.listing{border-top:1px solid var(--rule);margin-bottom:96px;}
.row{
  display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:baseline;
  padding:30px 4px;border-bottom:1px solid var(--rule);cursor:pointer;
  transition:background .4s,padding-left .4s;
}
.row:hover{background:var(--paper-deep);padding-left:16px;}
.row .idx{font-size:13px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase;font-weight:500;}
.row .body h3{font-size:26px;font-weight:300;font-style:italic;line-height:1.15;}
.row .body h3 .em{color:var(--crimson);}
.row .body p{color:var(--ink-dim);font-style:italic;font-size:16px;margin-top:4px;}
.row .meta{
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);white-space:nowrap;
}
.row .meta .arrow{color:var(--crimson);margin-left:10px;}
.part-break{padding:26px 4px 12px;border-bottom:1px solid var(--rule);}

/* ---------- breadcrumb ---------- */
.crumb{
  padding:34px 0 0;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);
}
.crumb a{cursor:pointer;transition:color .3s;}
.crumb a:hover{color:var(--crimson);}
.crumb .sep{margin:0 12px;color:var(--gold);}
.crumb .here{color:var(--black);}

/* ---------- film page ---------- */
.film-stage{
  margin:44px 0 40px;background:var(--black);position:relative;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.film-stage video{width:100%;height:100%;object-fit:contain;}
.film-stage .slate{
  text-align:center;color:var(--white);padding:24px;
  width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.film-stage .slate .playring{
  width:84px;height:84px;border:1px solid rgba(245,245,245,.4);border-radius:50%;
  margin:0 auto 26px;display:flex;align-items:center;justify-content:center;
  transition:border-color .4s,transform .4s;cursor:pointer;
}
.film-stage .slate .playring:hover{border-color:var(--crimson);transform:scale(1.05);}
.film-stage .slate .playring .tri{
  width:0;height:0;border-left:20px solid var(--crimson);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px;
}
.film-stage .slate .slug{
  font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:rgba(245,245,245,.55);
}
.film-stage .slate .name{
  font-style:italic;font-size:clamp(22px,3vw,32px);margin:12px 0 8px;font-weight:300;
}
.film-stage .slate .note{
  font-style:italic;font-size:14px;color:rgba(245,245,245,.45);
}
.film-detail{max-width:680px;margin-bottom:72px;}
.film-detail h1{
  font-size:clamp(32px,4.4vw,46px);font-weight:300;font-style:italic;margin-top:10px;
}
.film-detail h1 .dot{color:var(--crimson);font-style:normal;}
.film-detail .about{font-size:20px;font-style:italic;color:var(--charcoal);margin:20px 0 26px;}
.film-detail .specs{
  display:flex;gap:40px;border-top:1px solid var(--rule);padding-top:20px;flex-wrap:wrap;
}
.film-detail .spec .k{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px;}
.film-detail .spec .v{font-style:italic;font-size:17px;}
.film-detail .spec .v.crimson{color:var(--crimson);}

/* ---------- volume grid ---------- */
.volumes{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-bottom:96px;
}
.vol{
  background:var(--paper-deep);aspect-ratio:250/312;padding:34px 30px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;
  transition:background .5s;
}
.vol:hover{background:#E7DDC8;}
.vol .author{font-size:9px;letter-spacing:.32em;text-transform:uppercase;opacity:.62;font-weight:500;}
.vol .rn{
  font-size:clamp(72px,8vw,104px);font-style:italic;font-weight:300;color:#A88547;line-height:1;
  margin:auto 0 8px;padding-top:20px;
}
.vol .t{font-size:21px;line-height:1.2;margin-bottom:6px;}
.vol .t .w{font-style:italic;color:var(--crimson);}
.vol .sub{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:auto;}
.vol .brandmark{font-size:8px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);padding-top:18px;}
.vol .chn{
  position:absolute;top:14px;right:16px;font-size:10px;letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;
}

/* ---------- reader ---------- */
.reader{max-width:640px;margin:0 auto;padding:72px 0 40px;}
.reader .r-eyebrow{text-align:center;margin-bottom:26px;}
.reader h1{
  text-align:center;font-size:clamp(34px,4.6vw,48px);font-weight:300;font-style:italic;line-height:1.15;margin-bottom:10px;
}
.reader h1 .dot{color:var(--crimson);font-style:normal;}
.reader .r-sub{text-align:center;font-style:italic;color:var(--ink-dim);margin-bottom:52px;font-size:17px;}
.reader .epigraph{
  border-left:2px solid var(--crimson);padding:6px 0 6px 26px;margin:0 0 44px;
  font-style:italic;font-size:22px;line-height:1.5;color:var(--charcoal);
}
.reader .epigraph .em{color:var(--crimson);}
.reader .body p{margin-bottom:1.4em;text-align:justify;text-indent:1.6em;font-size:19px;}
.reader .body p:first-of-type{text-indent:0;}
.reader .body p:first-of-type::first-letter{
  font-size:64px;float:left;line-height:.82;padding:6px 10px 0 0;font-style:italic;
}
.reader .sect{
  text-align:center;color:var(--gold);font-size:22px;margin:38px 0;
}
.reader .sig{
  margin-top:56px;text-align:center;font-size:11px;letter-spacing:.5em;text-transform:uppercase;font-weight:500;
}
.reader .colophon{
  margin-top:44px;text-align:center;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-dim);
}
.reader .placeholder-note{
  margin-top:60px;border-top:1px solid var(--rule);padding-top:18px;
  font-style:italic;font-size:14px;color:var(--ink-dim);text-align:center;
}

/* volume epigraph (standalone, outside .reader) */
.vol-epigraph{
  border-left:2px solid var(--crimson);padding:6px 0 6px 26px;margin:0 0 56px;
  font-style:italic;font-size:23px;line-height:1.5;color:var(--charcoal);max-width:640px;
}
.vol-epigraph .em{color:var(--crimson);}
.vol-epigraph .attrib{
  margin-top:14px;font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  font-style:normal;color:var(--black);
}
.flipbook-link{margin:-48px 0 96px;}
.flipbook-link a{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--crimson);
  border-bottom:1px solid var(--crimson);padding-bottom:3px;
}

/* ---------- recipe reader ---------- */
.recipe-cols{display:grid;grid-template-columns:1fr 1.6fr;gap:44px;margin-top:8px;}
.recipe-cols .larder{
  font-style:italic;font-size:17px;line-height:2.05;color:var(--charcoal);
  border-top:1px solid var(--rule);padding-top:16px;
}
.recipe-cols .method{border-top:1px solid var(--rule);padding-top:16px;font-size:18px;}
.recipe-cols .method p{margin-bottom:1.2em;}
.recipe-cols .method p:last-child{margin-bottom:0;}
.recipe-cols .method .step{font-style:italic;margin-right:14px;}
@media (max-width:700px){
  .recipe-cols{grid-template-columns:1fr;gap:34px;}
}

/* ---------- pager ---------- */
.pager{
  max-width:1080px;margin:0 auto 90px;padding:0 min(5vw,48px);
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.pager .pcard{
  background:var(--paper);padding:28px 32px;cursor:pointer;transition:background .45s;min-height:118px;
  display:block;
}
.pager .pcard:hover{background:var(--paper-deep);}
.pager .pcard.empty{cursor:default;background:var(--paper);}
.pager .plabel{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:10px;}
.pager .ptitle{font-size:21px;font-style:italic;font-weight:300;line-height:1.2;}
.pager .pcard.next{text-align:right;}
.pager .ptitle .em{color:var(--crimson);}

/* ---------- photo plates ---------- */
.plate{margin:0 0 88px;}
.plate img{width:100%;height:auto;display:block;filter:saturate(.92);}
.plate figcaption{
  padding-top:12px;font-style:italic;color:var(--ink-dim);font-size:14px;
  border-bottom:1px solid var(--rule);padding-bottom:16px;
}
.plate figcaption b{
  font-style:normal;font-weight:500;font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--black);margin-right:14px;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--rule);padding:34px 0 44px;
}
footer .f-inner{
  max-width:1080px;margin:0 auto;padding:0 min(5vw,48px);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
}
footer .fm{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);}
footer .fm b{color:var(--crimson);font-weight:500;}
footer .fyr{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-dim);}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .doors{grid-template-columns:1fr;}
  .volumes{grid-template-columns:repeat(2,1fr);}
  .row{grid-template-columns:64px 1fr;gap:14px;}
  .row .meta{grid-column:2;}
  .pager{grid-template-columns:1fr;}
  .pager .pcard.next{text-align:left;}
}
@media (max-width:480px){
  .volumes{grid-template-columns:1fr;}
  body{font-size:18px;}
}