/* ============================================================
   QUIRE - editorial design system  (v3, art-directed)
   Four colours. Big type, asymmetric spreads, full-bleed colour
   chapters, the real product as the hero object. Lines come from
   the planner itself, not decoration.
   ============================================================ */

@font-face{
  font-family:"Mofaze Del Monte";
  src:url("assets/fonts/mofaze-del-monte.woff2") format("woff2"),
      url("assets/fonts/mofaze-del-monte.otf") format("opentype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{ font-family:"Garet"; src:url("assets/fonts/garet-book.woff2") format("woff2");
  font-weight:300 400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Garet"; src:url("assets/fonts/garet-heavy.woff2") format("woff2");
  font-weight:600 800; font-style:normal; font-display:swap; }

:root{
  --page:#F9F6EE; --page-2:#F1EBDC; --paper:#fff;
  --ink:#3C3A36; --ink-soft:#6F685D;
  --board:#7A6E5E; --verdigris:#596152; --verdigris-deep:#474E41;
  --hair:rgba(60,58,54,.16);
  --display:"Mofaze Del Monte",Georgia,serif;
  --body:"Garet","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;
  --pad:clamp(20px,5.2vw,90px);
  --ease:cubic-bezier(.16,.84,.34,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}
body{background:var(--page);color:var(--ink);font-family:var(--body);font-weight:300;
  font-size:clamp(16px,1.05vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
em,i{font-style:italic;}

/* ---- type ---- */
.display{font-family:var(--display);font-weight:400;line-height:.96;letter-spacing:-.012em;}
h1{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.015em;
  font-size:clamp(2.8rem,8.5vw,8.5rem);}
h2{font-family:var(--display);font-weight:400;line-height:.98;letter-spacing:-.012em;
  font-size:clamp(2.2rem,5.6vw,5rem);}
h3{font-family:var(--display);font-weight:400;line-height:1.02;font-size:clamp(1.6rem,2.6vw,2.4rem);}
p{max-width:60ch;}
.lead{font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.45;color:var(--ink);max-width:34ch;}
.big-quote{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.01em;
  font-size:clamp(2.2rem,6vw,5.6rem);}

/* the only "label": a small mono kicker, used sparingly */
.kicker{font-family:var(--mono);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--board);}
.num{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;color:var(--board);}
.serif-it{font-family:var(--display);font-style:italic;}

/* ---- layout ---- */
.wrap{padding-inline:var(--pad);}
.bleed{width:100%;}
.chapter{padding-block:clamp(70px,12vh,150px);position:relative;}
.tight{padding-block:clamp(40px,6vh,80px);}
.ed{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,40px);align-items:start;}
.measure{max-width:54ch;}
.stack>*+*{margin-top:1.1em;}
.stack-l>*+*{margin-top:1.8em;}

/* colour chapters, full-bleed */
.on-ink{background:var(--ink);color:var(--page);}
.on-verdigris{background:var(--verdigris);color:var(--page);}
.on-board{background:var(--board);color:var(--page);}
.on-paper2{background:var(--page-2);}
.on-ink .kicker,.on-verdigris .kicker,.on-board .kicker{color:rgba(249,246,238,.6);}
.on-ink .num,.on-verdigris .num,.on-board .num{color:rgba(249,246,238,.65);}

/* the writing line: one confident rule under a statement (the only "line") */
.ruled{padding-bottom:.18em;background-image:linear-gradient(var(--ink),var(--ink));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;display:inline;}
.on-ink .ruled,.on-verdigris .ruled,.on-board .ruled{background-image:linear-gradient(var(--page),var(--page));}

/* ---- header: airy, no border, no announcement block ---- */
.topline{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--board);text-align:center;padding:10px 16px;}
.site-header{position:sticky;top:0;z-index:60;mix-blend-mode:normal;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px var(--pad);background:linear-gradient(var(--page),rgba(249,246,238,0));}
.site-header.solid{background:var(--page);border-bottom:1px solid var(--hair);}
.wordmark{display:block;color:var(--ink);}
.wordmark svg,.wordmark img{height:30px;width:auto;}
.nav{display:flex;gap:clamp(18px,2vw,40px);align-items:center;}
.nav a{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);opacity:.78;transition:opacity .3s;}
.nav a:hover,.nav a[aria-current="page"]{opacity:1;}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--board);}
.menu-toggle{display:none;background:none;border:0;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--ink);}
@media (max-width:860px){
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:28px;
    background:var(--page);transform:translateY(-100%);transition:transform .5s var(--ease);z-index:55;}
  .nav.open{transform:none;}
  .nav a{font-family:var(--display);font-size:2rem;letter-spacing:-.01em;text-transform:none;opacity:1;}
  .menu-toggle{display:block;z-index:60;}
}

/* ---- buttons / links ---- */
.btn{display:inline-flex;align-items:center;gap:.7em;font-family:var(--mono);font-size:.74rem;
  letter-spacing:.14em;text-transform:uppercase;padding:14px 26px;border:1px solid currentColor;
  border-radius:100px;color:var(--ink);transition:background .4s var(--ease),color .4s var(--ease);}
.btn:hover{background:var(--ink);color:var(--page);}
.on-ink .btn:hover,.on-verdigris .btn:hover,.on-board .btn:hover{background:var(--page);color:var(--ink);}
.btn .a{transition:transform .4s var(--ease);}
.btn:hover .a{transform:translateX(5px);}
.tlink{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;border-bottom:1px solid var(--hair);padding-bottom:3px;}
.tlink:hover{border-color:currentColor;}
.tlink .a{transition:transform .35s var(--ease);} .tlink:hover .a{transform:translateX(4px);}

/* ============================================================
   HERO  (clean, full-screen, calm. No product yet.)
   ============================================================ */
.hero-clean{min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:18vh var(--pad) 16vh;position:relative;}
.hero-clean h1{max-width:15ch;font-size:clamp(2.7rem,7vw,6.8rem);}
.hero-clean h1 .dim{color:var(--board);}
.hero-kicker{margin-bottom:clamp(12px,1.8vh,22px);}
.hero-lead{font-size:clamp(1.05rem,1.3vw,1.25rem);color:var(--ink-soft);max-width:44ch;
  margin-top:clamp(16px,2.4vh,26px);}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:clamp(20px,3vh,34px);}
.scroll-cue{position:absolute;left:var(--pad);bottom:4.5vh;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--board);display:flex;align-items:center;gap:.7em;}
.scroll-cue .dn{display:inline-block;animation:bob 1.9s var(--ease) infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(5px);}}

/* ============================================================
   TEAR  (its own full-screen section; the product, isolated)
   ============================================================ */
.scene{position:relative;}
.scene--tear{height:360vh;}
.tear-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(22px,4.5vh,56px);padding:13vh var(--pad) 9vh;}
.tear-kicker{text-align:center;}
.tear-stage{position:relative;width:min(92vw,1280px);aspect-ratio:2.83/1;margin:0 auto;flex:none;}
/* each layer carries its own paper sheet, so it tears and slides as one */
.tear-layer{position:absolute;inset:0;background:var(--page);}
.tear-layer img{width:100%;height:100%;object-fit:contain;}
#tornL{will-change:transform,opacity,filter;transform-origin:left center;}
#baseL,#rawE{will-change:transform;}
.tear-seam{position:absolute;top:4%;bottom:4%;width:1px;background:var(--hair);left:19.3%;}
.tear-rawedge{position:absolute;top:0;bottom:0;left:0;width:100%;}
.tear-caps{position:relative;width:100%;text-align:center;min-height:clamp(46px,8vh,84px);}
.tear-cap{position:absolute;left:0;right:0;top:0;font-family:var(--display);line-height:1.04;
  font-size:clamp(1.5rem,3.6vw,3rem);letter-spacing:-.01em;}
#capB{opacity:0;}
.tear-bar{width:min(280px,60vw);height:1px;background:var(--hair);position:relative;}
.tear-bar i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ink);}
/* on a dark ground the white sheet pops; lift the seam + progress to suit */
.on-verdigris .tear-bar,.on-board .tear-bar,.on-ink .tear-bar{background:rgba(249,246,238,.28);}
.on-verdigris .tear-bar i,.on-board .tear-bar i,.on-ink .tear-bar i{background:var(--page);}
.on-verdigris .tear-layer,.on-board .tear-layer,.on-ink .tear-layer{
  filter:drop-shadow(0 28px 55px rgba(28,26,22,.4));}
.rm-only{display:none;}
@media (prefers-reduced-motion:reduce){
  .scene--tear{height:auto;}
  .tear-sticky{position:static;height:auto;padding-block:14vh;}
  .tear-bar{display:none;}
  #capB{opacity:1;position:static;}
  #capA{display:none;}
  .rm-only{display:block;}
}

/* ============================================================
   EDITORIAL SPREADS
   ============================================================ */
/* big confessional statement block */
.statement{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px);align-items:end;}
.statement .big-quote{grid-column:1 / 8;}
.statement .aside{grid-column:9 / 13;align-self:end;}
@media (max-width:820px){.statement .big-quote,.statement .aside{grid-column:1 / -1;}}

/* the index (range / contents) - big rows, not cards */
.index{border-top:1px solid var(--hair);}
.index-row{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,3vw,48px);
  align-items:center;padding:clamp(22px,3.4vw,46px) 0;border-bottom:1px solid var(--hair);
  transition:padding-left .4s var(--ease);position:relative;}
.index-row:hover{padding-left:clamp(8px,1.4vw,22px);}
.index-row .ix-no{font-family:var(--mono);font-size:.8rem;color:var(--board);align-self:start;padding-top:.5em;}
.index-row .ix-title{font-family:var(--display);font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1;}
.index-row .ix-sub{display:block;font-family:var(--body);font-size:.98rem;color:var(--ink-soft);
  margin-top:.5em;max-width:46ch;}
.index-row .ix-meta{text-align:right;font-family:var(--mono);font-size:.86rem;white-space:nowrap;}
.index-row .ix-meta .was{color:var(--board);text-decoration:line-through;margin-right:.5em;font-size:.78rem;}
.index-row .ix-thumb{position:absolute;right:14%;top:50%;transform:translateY(-50%) scale(.96);
  width:230px;aspect-ratio:3/2;object-fit:cover;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);box-shadow:0 30px 60px -30px rgba(60,58,54,.5);z-index:2;}
.index-row:hover .ix-thumb{opacity:1;transform:translateY(-50%) scale(1);}
@media (max-width:820px){
  .index-row{grid-template-columns:auto 1fr;}
  .index-row .ix-meta{grid-column:2;text-align:left;margin-top:.4em;}
  .index-row .ix-thumb{display:none;}
}

/* asymmetric image + text spread */
.spread{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px);align-items:center;}
.spread .media{grid-column:1 / 7;}
.spread .copy{grid-column:8 / 13;}
.spread.flip .media{grid-column:7 / 13;order:2;}
.spread.flip .copy{grid-column:1 / 6;}
.spread .media img{width:100%;height:auto;}
@media (max-width:860px){.spread .media,.spread .copy{grid-column:1 / -1;order:0;}}

/* the six clusters as a specimen contents list */
.specimen{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px);align-items:start;}
.specimen .plate-col{grid-column:1 / 6;position:sticky;top:14vh;}
.specimen .list-col{grid-column:7 / 13;}
@media (max-width:920px){.specimen .plate-col{position:static;grid-column:1 / -1;margin-bottom:6vh;}
  .specimen .list-col{grid-column:1 / -1;}}
.cluster{padding:clamp(26px,3vw,40px) 0;border-top:1px solid var(--hair);}
.cluster:first-child{border-top:0;}
.cluster .c-head{display:flex;align-items:baseline;gap:1em;}
.cluster .c-head .rn{font-family:var(--mono);font-size:.8rem;color:var(--board);}
.cluster h3{margin:.1em 0;}
.cluster .lat{font-style:italic;color:var(--ink-soft);font-family:var(--display);font-size:1.15rem;}
.cluster .frame{font-size:.95rem;color:var(--ink-soft);margin-top:.3em;}
.cluster .ps{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--board);
  margin-top:1em;line-height:1.9;}
.cluster .body{margin-top:.8em;max-width:52ch;}
.flag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--board);border:1px solid var(--hair);border-radius:100px;
  padding:3px 11px;margin-top:1em;}

/* product detail */
.pdp{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,56px);align-items:start;}
.pdp .pdp-media{grid-column:1 / 8;}
.pdp .pdp-buy{grid-column:9 / 13;position:sticky;top:14vh;}
@media (max-width:920px){.pdp .pdp-media,.pdp .pdp-buy{grid-column:1 / -1;position:static;}}
.pick{border-top:1px solid var(--hair);margin-top:1.6em;}
.pick label{display:flex;justify-content:space-between;gap:1em;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--hair);cursor:pointer;}
.pick .pn{font-family:var(--display);font-size:1.3rem;}
.pick .psub{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--board);margin-top:.2em;}
.pick .pp{font-family:var(--mono);font-size:.9rem;}
.pick .was{color:var(--board);text-decoration:line-through;margin-right:.5em;font-size:.76rem;}
.acc details{border-bottom:1px solid var(--hair);}
.acc summary{cursor:pointer;list-style:none;padding:18px 0;display:flex;justify-content:space-between;
  font-family:var(--display);font-size:clamp(1.2rem,2vw,1.6rem);}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";color:var(--board);}
.acc details[open] summary::after{content:"–";}
.acc .ab{padding-bottom:20px;color:var(--ink-soft);}

/* footer: confident, spacious */
.site-footer{background:var(--ink);color:var(--page);padding:clamp(60px,9vh,120px) var(--pad) 40px;}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,70px);
  align-items:start;border-bottom:1px solid rgba(249,246,238,.16);padding-bottom:48px;}
.foot-top .wordmark{color:var(--page);margin-bottom:20px;}
.foot-top .wordmark img{height:40px;}
.foot-statement{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.6rem);line-height:1.05;max-width:18ch;}
.foot-col h4{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(249,246,238,.5);font-weight:400;margin-bottom:14px;}
.foot-col a{display:block;padding:5px 0;color:rgba(249,246,238,.84);font-size:1rem;}
.foot-col a:hover{color:var(--page);}
.foot-base{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:26px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:rgba(249,246,238,.5);}
@media (max-width:760px){.foot-top{grid-template-columns:1fr 1fr;}.foot-top .brand{grid-column:1 / -1;}}

/* reveal - quiet, ink-settling */
.reveal{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.d1{transition-delay:.09s;}.d2{transition-delay:.18s;}.d3{transition-delay:.27s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

.spacer{height:clamp(40px,8vh,110px);}
.right{text-align:right;} .center{text-align:center;}