/* Call Time v2 · shared styles. Cover-led magazine: dark scrim, ecru masthead that shrinks into a solid ink bar. */
:root{
  --ink:#111010; --ecru:#EFE8DA; --paper:#F7F3EB; --blue:#5583C3; --grey:#6E6A62; --line:#cfc8ba;
  --display:"Bodoni Moda", Didot, "Times New Roman", serif;
  --mono:"Courier Prime", "Courier New", monospace;
  --hand:"Rock Salt", cursive;
  --bar:64px;
  color-scheme: light;
}
*{box-sizing:border-box;margin:0}
body{background:var(--ecru);color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.k{font-size:12px;letter-spacing:.24em;text-transform:uppercase}

/* ---------- header ---------- */
.bar{position:fixed;inset:0 0 auto 0;height:var(--bar);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 28px;color:var(--ecru)}
.bar::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .35s ease}
.bar.solid::before,body.inner .bar::before{opacity:1}
.bar nav{position:relative;display:flex;gap:28px}
.bar nav a{text-decoration:none;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent}
.bar nav a:hover,.bar nav a[aria-current]{border-color:var(--ecru)}
.menu-btn{display:none;position:relative;background:none;border:1px solid var(--ecru);color:var(--ecru);font:inherit;font-size:11px;letter-spacing:.22em;padding:6px 10px;cursor:pointer}
.mast{position:fixed;left:50%;top:0;z-index:21;width:min(88vw,980px);transform-origin:50% 0;will-change:transform;backface-visibility:hidden;transition:transform .18s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: reduce){.mast,.bar::before{transition:none}}
.mast img{width:100%;height:auto}
.mast a{display:block}
/* inner pages: bar is solid from the start, masthead already small */
body.inner main{padding-top:var(--bar)}

/* ---------- cover ---------- */
.cover{position:relative;height:max(88svh,600px);background:var(--ink);overflow:hidden;color:var(--ecru);contain:paint}
.cover .blur{position:absolute;inset:-40px;background:url("../img/cover.jpg") center 30%/cover;filter:blur(36px) brightness(.45) saturate(.6);transform:translateZ(0)}
.cover .portrait{position:absolute;left:50%;bottom:0;height:calc(100% - 120px);transform:translateX(-50%);object-fit:cover;aspect-ratio:3/4}
.cover::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(17,16,16,.92) 0,rgba(17,16,16,.7) 16%,rgba(17,16,16,0) 40%)}
.cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(17,16,16,.85) 0,rgba(17,16,16,0) 38%)}
.lines{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 40px 36px;display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.lead{max-width:440px;display:grid;gap:10px}
.lead h1,.lead h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(34px,4.4vw,58px);line-height:1;text-wrap:balance}
.lead a{text-decoration:none}
.lead .by{font-size:13px;letter-spacing:.08em}
.side{display:grid;gap:12px;text-align:right;font-family:var(--display);font-size:20px;line-height:1.15;max-width:280px}
.side a{text-decoration:none}
.side span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.75;margin-bottom:2px}

/* ---------- sections ---------- */
section.block{padding:88px 40px;max-width:1240px;margin:0 auto}
.head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:32px;gap:16px}
.head h1,.head h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,4vw,52px);line-height:1;position:relative}
.head a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);white-space:nowrap}
.intro{max-width:60ch;margin:-12px 0 36px}

/* hand-drawn doodles in Bleu Réveil */
.doodle{position:absolute;pointer-events:none;color:var(--blue);fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.scrawl-under{left:-4px;bottom:-14px;width:min(240px,100%);height:18px}
.ring svg{position:absolute;inset:-10px -14px;width:calc(100% + 28px);height:calc(100% + 20px)}
.hand{font-family:var(--hand);color:var(--blue);font-size:15px;line-height:1.4}

.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;margin-bottom:56px}
.feature img{aspect-ratio:4/5;object-fit:cover;width:100%}
.feature h3{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.05;margin:12px 0 14px;text-wrap:balance}
.feature p{max-width:46ch}
.more{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.card{display:grid;gap:10px;text-decoration:none;align-content:start}
.card img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:grayscale(.15)}
.card h4{font-family:var(--display);font-weight:700;font-size:22px;line-height:1.15;text-wrap:balance}
.card .meta{font-size:12px;color:var(--grey);letter-spacing:.06em}
.write{position:relative;margin-top:56px;border:1px solid var(--ink);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--paper)}
.write b{font-family:var(--display);font-size:24px;font-weight:700}

.about{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.founder{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}
.founder img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1)}
.founder h4{font-family:var(--display);font-size:26px;font-weight:700;line-height:1.1}
.founder .role{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey);margin:6px 0 10px}

/* ---------- downloads page ---------- */
.acc{border-top:2px solid var(--ink)}
.acc details{border-bottom:1px solid var(--ink)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0}
.acc summary::-webkit-details-marker{display:none}
.acc summary b{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:700;line-height:1}
.acc summary span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)}
.acc summary::after{content:"+";font-family:var(--display);font-size:30px;line-height:1}
.acc details[open] summary::after{content:"−"}
.acc .inner{padding:4px 0 36px;display:grid;gap:36px}
.sub{display:grid;gap:16px}
.sub h3{font-size:12px;letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:8px}
.dlgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.dl{background:var(--paper);border:1px solid var(--line);display:grid;align-content:start}
.dl .thumb{aspect-ratio:4/3;background:var(--ecru);overflow:hidden}
.dl .thumb.tall{aspect-ratio:3/4}
.dl .thumb img{width:100%;height:100%;object-fit:cover}
.dl .body{padding:16px 16px 18px;display:grid;gap:6px}
.dl h4{font-family:var(--display);font-size:22px;font-weight:700;line-height:1.1}
.dl .meta{font-size:12px;color:var(--grey)}
.btn{justify-self:start;margin-top:8px;background:var(--ink);color:var(--ecru);border:0;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:10px 16px;cursor:pointer}
.btn:hover{background:#2a2826}
.howto{border-left:3px solid var(--blue);padding:4px 0 4px 16px;display:grid;gap:8px;max-width:72ch}
.howto b{font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.howto ol{padding-left:20px;display:grid;gap:4px}
.howto small{color:var(--grey)}
.note{margin-top:20px;font-size:13px;color:var(--grey)}

/* ---------- shop page ---------- */
.soon{min-height:calc(100svh - var(--bar));display:grid;place-items:center;text-align:center;padding:64px 16px}
.soon .wrap{display:grid;gap:18px;justify-items:center;max-width:560px}
.soon img.clock{width:120px}
.soon h1{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(48px,8vw,96px);line-height:1}
.soon form{display:flex;border-bottom:1px solid var(--ink);width:min(420px,100%)}
.soon input{flex:1;background:none;border:0;font:inherit;padding:10px 0}
.soon button{background:none;border:0;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.cats{display:none} /* shop categories go here once decided */

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--ecru);padding:64px 40px 40px}
.foot{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.foot img{width:min(420px,80vw)}
.join{display:grid;gap:10px}
.join form{display:flex;border-bottom:1px solid var(--ecru)}
.join input{flex:1;background:none;border:0;color:var(--ecru);font:inherit;padding:10px 0}
.join input::placeholder{color:#8f897d}
.join button{background:none;border:0;color:var(--ecru);font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.fine{max-width:1240px;margin:40px auto 0;display:flex;justify-content:space-between;font-size:12px;opacity:.6;gap:16px;flex-wrap:wrap}
.fine a{text-decoration:none}

/* ---------- email gate ---------- */
.gate{position:fixed;inset:0;z-index:50;background:rgba(17,16,16,.6);display:none;place-items:center;padding:16px}
.gate.on{display:grid}
.gate .box{background:var(--ecru);color:var(--ink);max-width:440px;width:100%;padding:30px;display:grid;gap:12px;border:1px solid var(--ink)}
.gate h3{font-family:var(--display);font-size:30px;font-style:italic;font-weight:400;line-height:1.05}
.gate form{display:grid;gap:10px}
.gate input[type=email]{border:1px solid var(--ink);background:#fff;font:inherit;padding:11px 12px}
.gate label{font-size:13px;display:flex;gap:8px;align-items:flex-start}
.gate .row{display:flex;gap:10px;justify-content:space-between;align-items:center}
.gate .x{background:none;border:0;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;text-decoration:underline}
.gate .go{background:var(--ink);color:var(--ecru);border:0;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;padding:12px 18px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--ecru);padding:12px 18px;font-size:13px;z-index:60;display:none;max-width:calc(100% - 32px)}
.toast.on{display:block}

/* ---------- mobile menu ---------- */
.sheet{position:fixed;inset:0;z-index:30;background:var(--ink);color:var(--ecru);display:none;flex-direction:column;justify-content:center;gap:22px;padding:40px}
.sheet.on{display:flex}
.sheet a{font-family:var(--display);font-size:44px;text-decoration:none;line-height:1}
.sheet button{position:absolute;top:18px;right:20px;background:none;border:1px solid var(--ecru);color:var(--ecru);font:inherit;font-size:11px;letter-spacing:.22em;padding:6px 10px}

@media (max-width:820px){
  .bar{padding:0 16px}
  .bar nav{display:none}
  .menu-btn{display:block;margin-left:auto}
  .cover .portrait{left:0;transform:none;width:100%;height:100%;aspect-ratio:auto;object-position:50% 12%}
  .cover .blur{display:none}
  .lines{padding:0 20px 28px;flex-direction:column;align-items:flex-start}
  .side{text-align:left;font-size:17px}
  section.block{padding:64px 16px}
  .feature,.about{grid-template-columns:1fr;gap:24px}
  .cards,.dlgrid{grid-template-columns:1fr}
  .founder{grid-template-columns:120px 1fr}
  .write{flex-direction:column;align-items:flex-start}
  footer{padding:48px 16px 32px}
  .foot{grid-template-columns:1fr}
}

/* ---------- downloads hub and pages ---------- */
.crumb{font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;display:flex;gap:10px;color:var(--grey)}
.crumb a{text-decoration:none;border-bottom:1px solid var(--grey)}
.hub{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:24px}
.tile{position:relative;display:grid;align-content:end;min-height:260px;text-decoration:none;color:var(--ecru);background:var(--ink);overflow:hidden;padding:24px}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;transition:transform .5s ease,opacity .3s ease}
.tile:hover img{transform:scale(1.03);opacity:.65}
.tile .t{position:relative;display:grid;gap:4px}
.tile b{font-family:var(--display);font-size:clamp(34px,4vw,54px);line-height:1}
.tile span{font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.tile.main{grid-row:1 / span 2;min-height:560px}
.tile.main::after{content:"Start here";position:absolute;top:22px;left:24px;font-family:var(--hand);color:var(--ecru);font-size:16px;transform:rotate(-4deg)}
.dl .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--ink)}
.guide{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start}
.guide .covr{aspect-ratio:3/4;object-fit:cover;width:100%;box-shadow:10px 10px 0 var(--ink)}
.guide h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,5vw,64px);line-height:1}
.guide h1 i{font-weight:400}
.guide .sum{margin:14px 0 22px;max-width:52ch}
.inside{display:grid;gap:0;border-top:2px solid var(--ink);margin:10px 0 28px}
.inside li{list-style:none;display:grid;grid-template-columns:60px 1fr;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}
.inside li em{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--grey)}
.inside li b{font-family:var(--display);font-size:20px;font-weight:700;display:block;line-height:1.15}
.previews{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.previews img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:grayscale(1)}
@media (max-width:820px){
  .hub,.guide{grid-template-columns:1fr}
  .tile.main{grid-row:auto;min-height:420px}
  .previews{grid-template-columns:repeat(2,1fr)}
}

/* ---------- cover text tone: set by js from the photo behind the text ---------- */
.cover .lines{transition:color .3s ease}
.cover::after{transition:opacity .3s ease}
.cover .lightfade{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .3s ease;background:linear-gradient(to top,rgba(239,232,218,.88) 0,rgba(239,232,218,0) 40%)}
.cover.tone-light::after{opacity:0}
.cover.tone-light .lightfade{opacity:1}
.cover.tone-light .lines{color:var(--ink)}
@media (max-width:820px){
  .cover::after{background:linear-gradient(to top,rgba(17,16,16,.9) 0,rgba(17,16,16,.75) 40%,rgba(17,16,16,0) 66%)}
  .cover .lightfade{background:linear-gradient(to top,rgba(239,232,218,.92) 0,rgba(239,232,218,.75) 40%,rgba(239,232,218,0) 66%)}
}

/* desktop backdrop follows the tone: light covers get a pale, soft backdrop */
.cover .blur{transition:filter .3s ease}
.cover.tone-light .blur{filter:blur(36px) brightness(1.12) saturate(.4)}

/* ===== rev 6: white reading base, ecru and ink sections, named series (Highsnobiety-style structure) ===== */
:root{--white:#FFFFFF}
body{background:var(--white)}
.band{width:100%}
.band.ecru{background:var(--ecru)}
.band.ink{background:var(--ink);color:var(--ecru)}
.band.ink .head{border-color:var(--ecru)}
.band.ink .head a,.band.ink .more{border-color:var(--ecru)}
.band.ink .card .meta,.band.ink .series-desc{color:#b9b2a5}
section.block.tight{padding-top:56px;padding-bottom:56px}
.byline{font-size:12px;letter-spacing:.06em;color:var(--grey)}
.byline b{font-weight:700;color:inherit}
.series-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 16px;border-bottom:2px solid currentColor;padding-bottom:12px;margin-bottom:26px}
.series-head h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.4vw,44px);line-height:1}
.series-desc{grid-column:1;font-size:14px;color:var(--grey);max-width:56ch}
.series-head a{grid-row:1 / span 2;grid-column:2;align-self:end;font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap}
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.row .card img{aspect-ratio:4/5}
.signup{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:end}
.signup h2{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(34px,4.4vw,56px);line-height:1}
.signup form{display:flex;border-bottom:1px solid currentColor}
.signup input{flex:1;background:none;border:0;color:inherit;font:inherit;padding:12px 0}
.signup input::placeholder{color:#8f897d}
.signup button{background:none;border:0;color:inherit;font:inherit;font-size:12px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.feature .byline{display:block;margin-top:6px}
/* menu: featured image + series */
.sheet{justify-content:flex-start;padding:72px 24px 32px;gap:14px;overflow-y:auto}
.sheet .feat{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;margin-bottom:10px}
.sheet .feat img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(.2)}
.sheet .feat span{position:absolute;left:12px;bottom:10px;font-family:var(--display);font-style:italic;font-size:22px;color:var(--ecru)}
.sheet .feat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,16,16,.7),transparent 60%)}
.sheet .feat span{z-index:1}
.sheet .grp{font-size:11px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;margin-top:16px}
.sheet a{font-size:34px}
.sheet a.s{font-size:22px;font-style:italic}
@media (max-width:820px){
  .row{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;margin-right:-16px;padding-right:16px}
  .row > *{scroll-snap-align:start}
  .signup{grid-template-columns:1fr}
}
@media (min-width:821px){ .sheet .feat{max-width:520px} }

.soon{background:var(--ecru)}
body.inner section.block{background:transparent}

/* rev 7 */
.series-head h2{position:relative;justify-self:start}
.series-head .scrawl-under{bottom:-12px}
.guide-feature{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:48px;align-items:center}
.guide-feature img{aspect-ratio:3/4;object-fit:cover;width:100%;box-shadow:10px 10px 0 var(--ink)}
.guide-feature h3{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.4vw,60px);line-height:1;margin:10px 0 14px}
.guide-feature h3 i{font-weight:400}
.guide-feature p{max-width:48ch}
.guide-feature .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;align-items:center}
.guide-feature .alldl{font-size:12px;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);margin-left:8px}
@media (max-width:820px){.guide-feature{grid-template-columns:1fr;gap:24px}.guide-feature img{max-width:300px}}
.series-desc{margin-top:14px}

/* rev 8: hand-drawn circle around Downloads */
.circled{position:relative}
.circled .loop{position:absolute;inset:-9px -16px -8px -16px;width:calc(100% + 32px);height:calc(100% + 17px);stroke-width:2.4;color:var(--blue)}
.bar nav a.circled:hover,.bar nav a.circled[aria-current]{border-color:transparent}
.sheet a.circled{align-self:flex-start}
.sheet a.circled .loop{inset:-10px -18px -4px -18px;width:calc(100% + 36px);height:calc(100% + 14px)}
/* phone menu: Downloads gets a hand-drawn underline, kept in line with the other links */
.sheet a.circled{margin:0;padding-bottom:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12 C 40 4, 80 16, 120 8 S 200 6, 236 10' fill='none' stroke='%235583C3' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% 14px no-repeat}
.sheet a.circled .loop{display:none}
/* rev 10: English meaning beside the French series names */
.series-head h2 .en{font-weight:400;font-style:italic;font-size:.62em;white-space:nowrap}
.sheet a.s small{font-size:.7em;opacity:.7}
.sheet a.circled{margin-bottom:-6px}

/* rev 11: the bar carries its own dark fade, so the nav is readable at every scroll position
   (the cover's own top fade scrolls away with the photo; this one stays put) */
.bar::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(17,16,16,.9) 0,rgba(17,16,16,.72) 42%,rgba(17,16,16,0) 100%);transition:opacity .35s ease}
.bar{isolation:isolate}
.bar::before{z-index:-1}
.bar.solid::after,body.inner .bar::after{opacity:0}

/* guide covers are 4:5 pages, show them whole */
img[src*="img/guide0"],img[src*="img/g01-"]{aspect-ratio:4/5 !important;object-fit:cover}
.tile.main img[src*="guide0"]{opacity:.9;object-fit:contain;background:var(--ecru)}
.tile.main:has(img[src*="guide0"]){background:var(--ecru);color:var(--ink)}
.previews img{filter:none;box-shadow:0 1px 0 var(--line);border:1px solid var(--line)}
.tile.main:has(img[src*="guide0"]){align-content:start;justify-items:center;gap:18px;border:1px solid var(--line)}
.tile.main img[src*="guide0"]{position:static;width:auto;max-width:100%;height:min(420px,60vw);opacity:1;box-shadow:8px 8px 0 var(--ink);transform:none}
.tile.main:has(img[src*="guide0"]):hover img{transform:none}
.tile.main:has(img[src*="guide0"]) .t{justify-items:center;text-align:center}
.tile.main:has(img[src*="guide0"])::after{color:var(--blue)}

/* rev 13: every card image in The latest matches the guide cover's 4:5 */
.cards .card img{aspect-ratio:4/5}
/* rev 14: no hard offset shadow on guide covers, just a soft edge so they sit like printed paper */
.guide-feature img,.guide .covr,.tile.main img[src*="guide0"]{box-shadow:0 1px 2px rgba(17,16,16,.08),0 14px 34px rgba(17,16,16,.12);outline:1px solid rgba(17,16,16,.08);outline-offset:-1px}

/* rev 15 (10 Nov 2026): inner pages never rely on the masthead animation. The small masthead is set in CSS,
   with no transition, so it can't stick at full size over the Menu button (phones, in-app browsers, previews). */
body.inner .mast{transition:none;transform:translate3d(-50%,11px,0) scale(.25)}
@media (max-width:820px){body.inner .mast{transform:translate3d(-50%,18px,0) scale(.5)}}
/* the home masthead follows scroll frame by frame (rAF), so it needs no transition either */
.mast{transition:none}
/* rev 15: series headings could push the page wider than a small phone (360px), shifting the bar and Menu off screen */
.series-head{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:820px){.series-head h2 .en{white-space:normal}}
html,body{overflow-x:clip}

/* rev 17 (12 Nov 2026): Newsreader is the reading font site-wide (Zikale, 11 Nov). Bodoni stays for display
   (headlines, titles, pull quotes); Courier Prime stays for labels, nav, buttons, bylines and forms. */
main p, main li, .series-desc, .lead .by, .soon p, .gate p, .feature p, .guide .sum, .write p, .founder p{font-family:"Newsreader",Georgia,serif;font-optical-sizing:auto;font-size:17px;line-height:1.6}
.inside li b{font-family:var(--display)}
.inside li em, .k, .byline, .crumb, .more, .btn, .howto b{font-family:var(--mono)}

/* Standing rule (12 Nov 2026): never crop a head. Photo crops anchor to the top, so any trimming comes off the bottom. */
.feature img,.card img,.founder img,.sheet .feat img,.dl .thumb img,.previews img,.tophero img,.tile img,.guide .covr,.guide-feature img{object-position:50% 0 !important}

/* Blue doodles, 12 Nov 2026: one per section, never over a face. */
.series-head h2,.guide h1.ul,.art .take h2{position:relative;display:inline-block}
.guide h1.ul{margin-bottom:22px}.guide h1.ul .scrawl-under{bottom:-16px}
.art .take h2 .scrawl-under{width:150px;height:14px;bottom:-11px;left:-2px;stroke-width:2.6}
.signup .ring svg{inset:-6px -12px -10px -12px;width:calc(100% + 24px);height:calc(100% + 16px);stroke-width:2.6}
.art .wfu-wrap + .wfu{margin-top:0}

/* hand note + arrow sit side by side, never on top of letters */
.note{display:flex;align-items:flex-start;gap:10px;pointer-events:none}
.note .hand{position:static;transform:rotate(-4deg);font-size:16px;white-space:nowrap;padding-top:4px}
.note .arrow{position:static;flex:none;width:64px;height:46px;transform:scaleX(-1);margin-top:12px}
.wfu-wrap{margin-top:40px;margin-bottom:6px}
.write .note{position:absolute;right:120px;top:-50px}
@media (max-width:820px){.write{padding-top:68px}.write .note{right:auto;left:22px;top:12px}}
.ring svg,.signup .ring svg{inset:-12px -18px -12px -18px;width:calc(100% + 36px);height:calc(100% + 24px)}
#le-guide .series-head .scrawl-under{bottom:-20px}
@media (max-width:820px){.write{padding-top:84px}.write .note{top:8px}.write .note .arrow{height:40px;margin-top:6px}}
.ring svg{inset:-7px -16px -7px -16px;width:calc(100% + 32px);height:calc(100% + 14px)}
/* auto-doodles in article body */
.art h2.ul{position:relative;display:inline-block}
.art h2.ul .scrawl-under{width:min(200px,100%);height:14px;bottom:-12px;left:-2px;stroke-width:2.6}

/* ---------- article template (moved out of the inline <style> blocks, 13 Nov 2026) ---------- */
.tophero{margin:8px -24px 40px}
.tophero img{width:100%;height:auto;max-height:68vh;object-fit:cover}
@media (max-width:640px){.tophero{margin:8px -16px 32px}}
.tophero figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px;padding:0 24px}
.tophero figcaption a{text-decoration:none;border-bottom:1px solid var(--line)}
.art{max-width:760px;margin:0 auto;padding:40px 24px 88px}
.art .crumb{margin-bottom:28px}
.art h1{font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:"opsz" 24;font-size:clamp(44px,7vw,80px);line-height:1;margin:14px 0 18px;text-wrap:balance}
.art .stand{font-family:var(--display);font-weight:600;font-variation-settings:"opsz" 24;font-size:clamp(19px,2.2vw,23px);line-height:1.4;max-width:40ch;margin-bottom:18px}
.art .byline{display:block;margin-bottom:36px}
.art .byline a{text-decoration:none;border-bottom:1px solid var(--grey)}
.art figure{margin:36px 0}
.art figure.wide{margin:40px -24px}
.art figure img{width:100%;height:auto}
.art figcaption a{text-decoration:none;border-bottom:1px solid var(--line)}
.art figcaption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px;padding:0 24px}
.art figure:not(.hero):not(.wide) figcaption{padding:0}
.art .intro{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:22px;line-height:1.5;color:var(--ink);border-left:3px solid var(--blue);padding-left:18px;margin-bottom:36px}
.art .body p{font-family:"Newsreader",Georgia,serif;font-optical-sizing:auto;font-weight:400;font-variation-settings:normal;font-size:20px;line-height:1.6;margin-bottom:22px}
.art .body.first p:first-child::first-letter{float:left;font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:"opsz" 24;font-size:72px;line-height:.85;padding:6px 10px 0 0}
.art blockquote{font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:"opsz" 24;font-size:clamp(26px,3.4vw,36px);line-height:1.2;margin:40px 0;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-wrap:balance}
.art .take{background:var(--paper);border:1px solid var(--line);padding:28px 28px 8px;margin:48px 0}
.art .take h2{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:700;margin-bottom:18px}
.art .take p{margin-bottom:18px}
.art .take a{border-bottom:1px solid var(--ink);text-decoration:none}
.art .bio{border-top:1px solid var(--line);padding-top:24px;margin-top:40px;font-size:15px}
.art .bio p{margin-top:8px}
.art .bio a{text-decoration:none;border-bottom:1px solid var(--grey)}
.art .wfu{font-style:italic;color:var(--grey);font-size:14px;margin-top:28px}
@media (max-width:640px){.art{padding:40px 16px 64px}.art figure.hero,.art figure.wide{margin-left:-16px;margin-right:-16px}.art figcaption a{text-decoration:none;border-bottom:1px solid var(--line)}
.art figcaption{padding:0 16px}.art .body p{font-size:18px}}
.react{border-top:2px solid var(--ink);border-bottom:1px solid var(--line);margin:48px 0 8px;padding:20px 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px 32px;align-items:center}
.react .row2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.react .k{margin-right:6px}
.react button,.react a.x{background:none;border:1px solid var(--ink);color:var(--ink);font:inherit;font-size:12px;letter-spacing:.16em;text-transform:uppercase;padding:9px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;line-height:1}
.react button:hover,.react a.x:hover{background:var(--ink);color:var(--ecru)}
.react button[aria-pressed="true"]{background:var(--ink);color:var(--ecru)}
.react .vote button{padding:9px 11px}
.react svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.react{flex-direction:column;align-items:flex-start}}
.art > .k,.art h1,.art .stand,.art > .byline{text-align:center}
.art > .k{display:block}
.art .stand{margin-left:auto;margin-right:auto}
.art > .crumb{justify-content:center}
.art h1,.art h2:not(.take h2){color:var(--blue)}
.art .take h2{color:var(--ink)}
/* Zikale's collage hero and section headings (body headings are direct children of the article) */
.art .tophero.collage{width:min(100vw - 32px,1240px);margin-left:50%;transform:translateX(-50%)}
.art .tophero.collage img{max-height:none;aspect-ratio:auto}
.art > h2{font-variant-ligatures:no-common-ligatures;font-feature-settings:'liga' 0,'dlig' 0;font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:'opsz' 24;font-size:30px;margin:36px 0 14px}

/* ---------- sign-up honeypot, gate privacy link, About h1, privacy page, 404 ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.gate .priv{font-size:12px;letter-spacing:.22em;text-transform:uppercase;justify-self:start}
.series-head h1{font-family:var(--display);font-size:clamp(36px,4.4vw,56px);line-height:1;position:relative}
section.block.prose{max-width:840px}
.prose .date{opacity:.6;margin:-12px 0 8px}
.prose h2{font-family:var(--display);font-size:26px;line-height:1.15;margin:40px 0 10px}
.prose p+p{margin-top:12px}
.prose ul{padding-left:20px;display:grid;gap:10px;margin-bottom:12px}
.nf-actions{display:flex;gap:10px;flex-wrap:wrap}
.nf-actions .btn{text-decoration:none;display:inline-block}

/* ---------- Bodoni rule (8 Nov 2026), one late rule: every display face is weight 600 at opsz 24, never thinner ---------- */
.lead h1,.lead h2,.side,.head h1,.head h2,.series-head h1,.series-head h2,.feature h3,.card h4,.write b,.founder h4,.acc summary b,.acc summary::after,.dl h4,.tile b,.guide h1,.inside li b,.guide-feature h3,.signup h2,.gate h3,.soon h1,.sheet a,.sheet .feat span,.prose h2,.art h1,.art > h2{font-weight:600;font-variation-settings:"opsz" 24}
.side span{font-weight:400;font-variation-settings:normal}

/* ---------- second pass, 13 Nov 2026 ---------- */
/* Hand marks never move text: no margin or padding on a marked word. Look (path, rotation, offset, stroke) is set per phrase in _doodles.py. */
.ring{position:relative;display:inline-block}
.scrawl-under{overflow:visible;transform:rotate(var(--r,0deg));transform-origin:50% 50%}
.ul-word{position:relative;display:inline;white-space:nowrap}
.ul-word .scrawl-under{left:0;width:100%;height:7px;bottom:-5px;transform:translateX(var(--off,0px)) rotate(var(--r,0deg))}
.ul-word .scrawl-under path{vector-effect:non-scaling-stroke}
/* series templates: L'Entretien (guest box, questions, credits) and Le Guide (In short, steps, download block) */
.art .guest{display:grid;gap:4px;text-align:left;background:var(--paper);border:1px solid var(--line);padding:18px 22px;margin:0 auto 28px;max-width:440px}
.art .guest .gname{font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:"opsz" 24;font-size:26px;line-height:1.1}
.art .guest span:not(.k){font-family:"Newsreader",Georgia,serif;font-size:17px}
.art .guest a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-decoration:none;border-bottom:1px solid var(--grey);color:var(--grey);justify-self:start}
.art .short{text-align:left;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--blue);padding:20px 24px;margin:0 0 28px}
.art .short p{font-family:"Newsreader",Georgia,serif;font-size:20px;line-height:1.5;margin-top:8px}
.art .q{margin:40px 0 14px}
.art .q .k{display:block;color:var(--grey);margin-bottom:6px}
.art .q p{font-family:var(--display);font-style:italic;font-weight:600;font-variation-settings:"opsz" 24;font-size:clamp(22px,2.6vw,28px);line-height:1.2}
.art .q.std{background:var(--paper);border-left:3px solid var(--blue);padding:18px 22px;margin:44px 0 18px}
.art .credits{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;border-top:1px solid var(--line);padding-top:16px;margin:36px 0 0}
.art .credits dt{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--grey)}
.art .credits dd{font-family:"Newsreader",Georgia,serif;font-size:17px}
.art > h2.step em{display:block;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--grey);font-weight:400;margin-bottom:4px}
.art .dlcta .btn{margin:0 6px 20px 0;display:inline-block;text-decoration:none;border-bottom:0}
@media (max-width:640px){.art .credits{grid-template-columns:1fr}}

/* 13 Nov 2026 (Zikale): every article card carries a short brief under the byline, so people can see what it is about */
.card .brief{font-family:"Newsreader",Georgia,serif;font-size:16px;line-height:1.5;color:var(--ink);margin-top:2px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.band.ink .card .brief{color:var(--ecru)}