/* Hollow Field v3: printed art magazine, Issue 07.
   Every spread is pulled in two spot inks. --g is the ground (stock or flood ink), --k the text ink,
   --spot the second drum (registration shadows, rules, decoration only), --head the headline ink.
   Inazda tokens are remapped per spread so the kit's components print in the spread's inks. */

@property --mis { syntax: "<length>"; inherits: true; initial-value: 0.035em; }

:root{
  /* fixed inks (used where a plate never changes, e.g. duotone figures, the coupon) */
  --hf-paper-fixed:#F1ECE0;
  --hf-ink-fixed:#141311;
  --hf-ox-fixed:#6B1D24;
  --hf-blue-fixed:#2343B8;
  --hf-chart:#D4F03C;
  --hf-orange:#FF6A2B;
  /* day edition: uncoated stock */
  --hf-paper:#F1ECE0;
  --hf-ink:#141311;
  --hf-ox:#6B1D24;
  --hf-ox-ground:#6B1D24;
  --hf-blue:#2343B8;
  --hf-light-ink:#F1ECE0;
  --hf-grain-blend:multiply;
  --hf-grain-o:.2;

  --hf-display:"Anybody", "Arial Narrow", sans-serif;
  --hf-text:"Newsreader", Georgia, "Times New Roman", serif;
  --hf-gutter:clamp(16px, 3.6vw, 56px);
  --hf-bar:40px;
  --hf-t-fast:.18s;
  --hf-t:.45s;
  --hf-t-slow:.8s;
  --hf-ease:cubic-bezier(.22, 1, .36, 1);
  --kv:0;
}
/* night edition: black stock, fluorescent and light inks */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --hf-paper:#11100E; --hf-ink:#EDE6D6; --hf-ox:#FF5A4E; --hf-ox-ground:#2A0C10; --hf-blue:#8EA2FF; --hf-light-ink:#EDE6D6;
    --hf-grain-blend:screen; --hf-grain-o:.09;
  }
}
:root[data-theme="dark"]{
  --hf-paper:#11100E; --hf-ink:#EDE6D6; --hf-ox:#FF5A4E; --hf-ox-ground:#2A0C10; --hf-blue:#8EA2FF; --hf-light-ink:#EDE6D6;
  --hf-grain-blend:screen; --hf-grain-o:.09;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--hf-bar) + 8px)}
body{margin:0;background:var(--hf-paper);color:var(--hf-ink);font:400 18px/1.55 var(--hf-text);font-optical-sizing:auto;overflow-x:clip;
  -webkit-font-smoothing:antialiased;font-variant-numeric:oldstyle-nums proportional-nums}
img,svg{display:block;max-width:100%}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:inherit;text-wrap:balance}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.iz-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--hf-ink-fixed);color:var(--hf-chart);font:700 14px/1 var(--hf-display);text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:52px}

/* ---------- type ---------- */
.dsp{font-family:var(--hf-display);text-transform:uppercase;line-height:.84;letter-spacing:-.015em;font-optical-sizing:auto}
.kin{--w0:780;--wd:120;--s0:92;--sx:30;
  font-weight:calc(var(--w0) + var(--kv) * var(--wd));
  font-stretch:calc((var(--s0) + var(--kv) * var(--sx)) * 1%)}
.mis{text-shadow:var(--mis) calc(var(--mis) * .7) 0 var(--spot)}
.dropcap::first-letter{float:left;font:800 4.2em/.78 var(--hf-display);font-stretch:80%;text-transform:uppercase;margin:.06em .1em 0 -.02em;color:var(--head, var(--k))}
.lede{font-size:clamp(20px, 1.6vw, 24px);line-height:1.45;max-width:36ch}
.ul{text-decoration:none;background:linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;padding-bottom:1px;transition:background-size var(--hf-t-fast) var(--hf-ease)}
.ul:hover,.ul:focus-visible{background-size:100% 3px}

/* ---------- surfaces: grain, stage, loupe ---------- */
.grain{position:fixed;inset:-50%;z-index:5;pointer-events:none;opacity:var(--hf-grain-o);mix-blend-mode:var(--hf-grain-blend);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* The canvas sits above spread grounds (z 2) and below spread content (z 3): the loop prints onto the page. */
.stage{position:fixed;inset:0;z-index:2;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .5s linear}
.stage.is-live canvas{opacity:1}
.loupe{position:fixed;left:0;top:0;z-index:80;width:148px;height:148px;margin:-74px 0 0 -74px;border-radius:50%;pointer-events:none;overflow:hidden;
  opacity:0;transition:opacity var(--hf-t-fast) linear;color:var(--loupe-k, var(--hf-ink));will-change:transform}
.loupe.on{opacity:1}
.loupe-in{position:absolute;inset:0;border-radius:50%;-webkit-backdrop-filter:contrast(1.45) saturate(1.6);backdrop-filter:contrast(1.45) saturate(1.6);
  background:radial-gradient(circle, color-mix(in srgb, currentColor 30%, transparent) 30%, transparent 33%) 0 0 / 5px 5px}
.loupe-in .zoom{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--zoom-bg, transparent)}
.loupe.zooming .loupe-in{background:none}
.loupe-ret{position:absolute;inset:0;fill:none;stroke:currentColor;stroke-width:1.2}
.loupe-ret .t{stroke-width:.8}

/* ---------- running folio (navigation) ---------- */
.folio-bar{position:fixed;z-index:20;top:0;left:0;right:0;height:var(--hf-bar);display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:14px;
  padding:0 var(--hf-gutter);background:var(--bar-g, var(--hf-chart));color:var(--bar-k, var(--hf-ink-fixed));border-bottom:1.5px solid currentColor;
  font:400 15px/1 var(--hf-text);font-variant-numeric:lining-nums tabular-nums;transition:background-color var(--hf-t) var(--hf-ease), color var(--hf-t) var(--hf-ease)}
.fb-mast{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.fb-name{white-space:nowrap;font:800 16px/1 var(--hf-display);text-transform:uppercase;font-stretch:118%;letter-spacing:-.01em}
.fb-issue,.fb-sec{font-style:italic}
.fb-sec{justify-self:center}
.fb-page{display:flex;align-items:baseline;gap:2px}
.fb-page #fb-page{font:800 16px/1 var(--hf-display);display:inline-block;min-width:2ch;text-align:right}
.fb-of{opacity:.8}
.fb-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1.5px solid currentColor;background:transparent;color:inherit;cursor:pointer;
  font:700 12.5px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.05em;font-stretch:110%;transition:background-color var(--hf-t-fast), color var(--hf-t-fast)}
.fb-btn:hover,.fb-btn[aria-expanded="true"]{background:var(--bar-k, var(--hf-ink-fixed));color:var(--bar-g, var(--hf-chart));border-color:var(--bar-k, var(--hf-ink-fixed))}
.fb-btn .t-night{display:none}
:root[data-theme="dark"] .fb-btn .t-day{display:none}
:root[data-theme="dark"] .fb-btn .t-night{display:inline}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .fb-btn .t-day{display:none}:root:not([data-theme="light"]) .fb-btn .t-night{display:inline}}
.fb-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* contents dialog */
.toc{position:fixed;inset:0;z-index:40;background:var(--hf-chart);color:var(--hf-ink-fixed);overflow:auto;--g:var(--hf-chart);--k:var(--hf-ink-fixed);--spot:var(--hf-ox-fixed)}
.toc[hidden]{display:none}
.toc-in{max-width:1440px;margin:0 auto;padding:calc(var(--hf-bar) + 28px) var(--hf-gutter) 48px}
.toc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid currentColor;padding-bottom:16px}
.toc-t{font-size:clamp(64px, 12vw, 200px);font-weight:860;font-stretch:120%}
.toc-x{margin-top:10px}
.toc-list li a{display:grid;grid-template-columns:4ch minmax(0, 1fr) minmax(0, 1fr);align-items:baseline;gap:20px;padding:18px 0;border-bottom:1.5px solid currentColor;text-decoration:none}
.tp{font:800 clamp(28px, 3vw, 44px)/1 var(--hf-display);font-variant-numeric:lining-nums tabular-nums}
.tn{font:800 clamp(30px, 4.4vw, 72px)/.9 var(--hf-display);text-transform:uppercase;font-stretch:90%;transition:font-stretch var(--hf-t) var(--hf-ease)}
.td{font-style:italic;font-size:19px}
.toc-list a:hover .tn,.toc-list a:focus-visible .tn{font-stretch:125%}

/* ---------- spreads ---------- */
main{position:relative}
.spread{position:relative;background:var(--g);color:var(--k);
  --iz-bg:var(--g);--iz-fg:var(--k);--iz-card:var(--g);--iz-primary:var(--k);--iz-primary-fg:var(--g);
  --iz-muted:color-mix(in srgb, var(--k) 8%, var(--g));--iz-muted-fg:color-mix(in srgb, var(--k) 84%, var(--g));
  --iz-border:color-mix(in srgb, var(--k) 35%, var(--g));--iz-ring:var(--k);
  --iz-radius:0px;--iz-radius-md:0px;--iz-radius-sm:0px;--iz-radius-xs:0px;
  --iz-font:var(--hf-text);
  padding:calc(var(--hf-bar) + 18px) var(--hf-gutter) 22px;overflow:clip}
.spread > *:not(.crop){position:relative;z-index:3}
.spread + .spread,.band + .spread{box-shadow:inset 0 14px 18px -16px rgb(0 0 0 / .45)}
.cover{--g:var(--hf-chart);--k:var(--hf-ink-fixed);--spot:var(--hf-ox-fixed);--head:var(--hf-ink-fixed)}
.contents{--g:var(--hf-paper);--k:var(--hf-ink);--spot:var(--hf-ox);--head:var(--hf-ox)}
.features{--g:var(--hf-paper);--k:var(--hf-ink);--spot:var(--hf-blue);--head:var(--hf-blue)}
.process{--g:var(--hf-ox-ground);--k:var(--hf-light-ink);--spot:var(--hf-chart);--head:var(--hf-chart)}
.masthead{--g:var(--hf-paper);--k:var(--hf-blue);--spot:var(--hf-orange);--head:var(--hf-blue)}
.letters{--g:var(--hf-orange);--k:var(--hf-ink-fixed);--spot:var(--hf-blue-fixed);--head:var(--hf-ink-fixed)}
.back{--g:var(--hf-ink-fixed);--k:var(--hf-chart);--spot:var(--hf-ox);--head:var(--hf-chart)}
/* the loop's inks per spread (read by stage.js): A = halftone dots, B = deep-shadow second drum, line = engraving */
.spread{--loop-a:var(--head);--loop-b:var(--spot);--loop-line:var(--head);--loop-cell:6}
.cover{--loop-b:var(--spot);--loop-cell:7}
.contents{--loop-b:var(--k);--loop-cell:5}
.features{--loop-b:var(--k);--loop-cell:5}
.process{--loop-a:var(--k);--loop-line:var(--head);--loop-cell:4}
.masthead{--loop-cell:4}
.letters{--loop-a:var(--k);--loop-cell:8}
:root[data-theme="dark"] .cover{--g:var(--hf-paper);--k:var(--hf-chart);--spot:var(--hf-ox);--head:var(--hf-chart)}
:root[data-theme="dark"] .letters{--g:var(--hf-paper);--k:var(--hf-orange);--spot:var(--hf-chart);--head:var(--hf-orange)}
:root[data-theme="dark"] .back{--g:var(--hf-chart);--k:var(--hf-ink-fixed);--spot:var(--hf-ox-fixed);--head:var(--hf-ink-fixed)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cover{--g:var(--hf-paper);--k:var(--hf-chart);--spot:var(--hf-ox);--head:var(--hf-chart)}
  :root:not([data-theme="light"]) .letters{--g:var(--hf-paper);--k:var(--hf-orange);--spot:var(--hf-chart);--head:var(--hf-orange)}
  :root:not([data-theme="light"]) .back{--g:var(--hf-chart);--k:var(--hf-ink-fixed);--spot:var(--hf-ox-fixed);--head:var(--hf-ink-fixed)}
}

/* trim furniture */
.crop{position:absolute;width:22px;height:22px;z-index:3;pointer-events:none;opacity:.7;--c:var(--k)}
.crop::before,.crop::after{content:"";position:absolute;background:var(--c)}
.crop::before{width:22px;height:1px}
.crop::after{width:1px;height:22px}
.crop.tl{left:6px;top:calc(var(--hf-bar) + 6px)}
.crop.tr{right:6px;top:calc(var(--hf-bar) + 6px)}.crop.tr::before{right:0}.crop.tr::after{right:0}
.crop.bl{left:6px;bottom:6px}.crop.bl::before{bottom:0}.crop.bl::after{bottom:0}
.crop.br{right:6px;bottom:6px}.crop.br::before{right:0;bottom:0}.crop.br::after{right:0;bottom:0}
.folio{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:italic 400 14px/1.2 var(--hf-text);font-variant-numeric:lining-nums tabular-nums}
.folio-top{padding-bottom:10px;border-bottom:1px solid var(--k);margin-bottom:clamp(24px, 4vh, 48px)}
.folio-bot{padding-top:10px;border-top:1px solid var(--k);margin-top:clamp(40px, 7vh, 88px)}
.pgn{font:800 18px/1 var(--hf-display);font-style:normal}
.bars{display:inline-flex;gap:3px}
.bars i{width:16px;height:10px;background:var(--k)}
.bars i:nth-child(2){background:var(--spot)}
.bars i:nth-child(3){background:color-mix(in srgb, var(--k) 50%, var(--g))}
.grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px)}

/* headline reveal: a drum-roll wipe, the second ink converging into register */
.js .reveal{clip-path:inset(0 100% 0 0);--mis:.14em;transition:clip-path .9s var(--hf-ease), --mis 1.1s var(--hf-ease) .2s}
.js .reveal.in{clip-path:inset(0 -10% 0 0);--mis:.035em}

/* rubber-stamp button */
.stamp{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 22px;border:0;background:var(--k);color:var(--g);cursor:pointer;text-decoration:none;
  font:800 15px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.04em;font-stretch:112%;box-shadow:5px 5px 0 var(--spot);
  transition:transform var(--hf-t-fast) var(--hf-ease), box-shadow var(--hf-t-fast) var(--hf-ease)}
.stamp:hover{transform:translate(-2px, -2px);box-shadow:7px 7px 0 var(--spot)}
.stamp:active{transform:translate(5px, 5px);box-shadow:0 0 0 var(--spot)}
.stamp:focus-visible{outline:2px solid var(--k);outline-offset:4px}
.stamp .pg{font:italic 400 15px/1 var(--hf-text);text-transform:none;letter-spacing:0}
.stamp-sm{min-height:36px;padding:8px 14px;font-size:13px;box-shadow:3px 3px 0 var(--spot)}
.stamp-sm:hover{box-shadow:5px 5px 0 var(--spot)}
.stamp .iz-i{font-size:16px}

/* ---------- p. 01 cover ---------- */
.cover{min-height:max(100svh, 720px);display:flex;flex-direction:column}
.mast{font-size:var(--mast-fs, clamp(100px, 20.5vw, 400px));line-height:.79;--w0:860;--wd:30;--s0:100;--sx:0;margin:0 0 0 -.045em;white-space:nowrap}
.m-l{display:block}
.m-2{padding-left:.9em}
.cover-low{margin-top:auto;display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2vw, 32px);align-items:end;padding-top:clamp(20px, 4vh, 40px)}
.coverline{grid-column:1 / span 6;display:grid;gap:18px}
.cl-t{font-size:clamp(36px, 4vw, 68px);font-weight:820;font-stretch:84%;line-height:.88}
.cl-sf{font-size:clamp(19px, 1.5vw, 22px);max-width:40ch;font-style:italic}
.cl-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:6px}
.cl-avail{font-size:15px;font-style:italic}
.teasers{grid-column:8 / span 5}
.teasers-h{font:italic 400 15px/1 var(--hf-text);padding-bottom:10px;border-bottom:2px solid var(--k)}
.teasers li a{display:grid;grid-template-columns:58px minmax(0, 1fr);gap:2px 14px;padding:12px 0;border-bottom:1px solid var(--k);text-decoration:none}
.teasers .pg{grid-row:span 2;font:800 40px/.9 var(--hf-display);font-variant-numeric:lining-nums tabular-nums}
.teasers b{font:800 22px/1 var(--hf-display);text-transform:uppercase;font-stretch:96%;transition:font-stretch var(--hf-t) var(--hf-ease)}
.teasers li a > span:last-child{font-style:italic;font-size:16px}
.teasers li a:hover b,.teasers li a:focus-visible b{font-stretch:124%}
/* first load: the cover ink floods down, the masthead prints out of register and settles */
.js .cover::before{content:"";position:absolute;inset:0;z-index:1;background:var(--hf-paper);transform-origin:50% 100%;transform:scaleY(1)}
.js .ready .cover::before{transform:scaleY(0);transition:transform .45s cubic-bezier(.6, 0, .3, 1)}
.js .mast{opacity:0;--mis:.2em}
.js .ready .mast{opacity:1;--mis:.035em;transition:opacity .12s linear .3s, --mis .75s var(--hf-ease) .35s}
.js .cover-low,.js .cover .folio{opacity:0}
.js .ready .cover-low,.js .ready .cover .folio{opacity:1;transition:opacity .4s linear .7s}

/* strap */
.band{position:relative;z-index:3;background:var(--hf-ink-fixed);color:var(--hf-chart);padding:18px 0;transform:rotate(-1.2deg);margin:-14px -2vw;overflow:clip;border-block:2px solid var(--hf-chart)}
.band-row{--p:0;background:var(--hf-ink-fixed);width:max-content;display:flex;align-items:center;gap:.4em;white-space:nowrap;font-size:clamp(40px, 6vw, 104px);--w0:800;--wd:100;--s0:110;--sx:20;
  transform:translate3d(calc(var(--p) * -38%), 0, 0);will-change:transform}
.band-row i{flex:none;width:.5em;height:.5em;border-radius:50%;border:.06em solid currentColor;
  background:linear-gradient(currentColor, currentColor) 50% 50% / 100% .06em no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / .06em 100% no-repeat}

/* ---------- pp. 02–03 contents ---------- */
.contents{padding-bottom:22px}
.svc-head{grid-column:1 / span 5;align-self:start;position:sticky;top:calc(var(--hf-bar) + 24px);display:grid;gap:28px}
.h-sec{font-size:clamp(60px, 8.6vw, 156px);font-weight:840;font-stretch:88%;color:var(--head);--w0:840;--s0:88}
.svc-list{grid-column:7 / span 6;border-top:2px solid var(--k)}
.svc-list > li{display:grid;grid-template-columns:clamp(64px, 7vw, 112px) minmax(0, 1fr);gap:20px;padding:26px 0 30px;border-bottom:1px solid var(--k)}
.svc-n{font-size:clamp(48px, 5.4vw, 92px);font-weight:800;color:transparent;-webkit-text-stroke:1.5px var(--k);font-variant-numeric:lining-nums tabular-nums;line-height:.8;transition:color var(--hf-t) var(--hf-ease)}
.svc-list > li:hover .svc-n{color:var(--head)}
.svc-name{font-size:clamp(30px, 3vw, 48px);font-weight:820;font-stretch:84%;margin-bottom:12px;transition:font-stretch var(--hf-t) var(--hf-ease)}
.svc-list > li:hover .svc-name{font-stretch:110%}
.svc-list p{max-width:52ch}
.svc-tags{margin-top:10px;font-variant-caps:all-small-caps;letter-spacing:.05em;font-size:18px}

/* ---------- pp. 04–07 features ---------- */
.work-head{display:grid;gap:18px;margin-bottom:clamp(40px, 7vh, 80px)}
.h-giant{font-size:clamp(84px, 13.2vw, 280px);font-weight:860;--w0:860;--s0:84;color:var(--head);white-space:nowrap;margin-left:-.04em;line-height:.8}
.work-note{font-style:italic;max-width:46ch;margin-left:auto;margin-right:8%}
.feat-grid{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));column-gap:clamp(16px, 2.4vw, 40px);row-gap:clamp(56px, 10vh, 120px)}
.f-1{grid-column:1 / span 7}
.f-2{grid-column:9 / span 4;margin-top:clamp(60px, 18vh, 220px)}
.f-3{grid-column:2 / span 5}
.f-4{grid-column:7 / span 6;margin-top:clamp(40px, 12vh, 140px)}
.feat-link{display:grid;gap:12px;text-decoration:none;color:inherit}
.feat-kick{display:flex;justify-content:space-between;font:italic 400 15px/1 var(--hf-text);padding-top:8px;border-top:2px solid var(--k);font-variant-numeric:lining-nums tabular-nums}
.feat-fig{display:block;aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--duo-b);
  transition:transform var(--hf-t) var(--hf-ease), box-shadow var(--hf-t) var(--hf-ease);box-shadow:0 0 0 var(--k)}
.feat-fig.tall{aspect-ratio:4/5}
.feat-fig .vis,.case-hero-fig .vis{width:100%;height:100%}
.feat-link:hover .feat-fig,.feat-link:focus-visible .feat-fig{transform:translate(-4px, -6px) rotate(-.6deg);box-shadow:8px 10px 0 var(--k)}
.feat-h{font-size:clamp(34px, 3.6vw, 60px);font-weight:840;font-stretch:84%;transition:font-stretch var(--hf-t) var(--hf-ease)}
.feat-link:hover .feat-h,.feat-link:focus-visible .feat-h{font-stretch:112%}
.feat-sf{font-size:clamp(18px, 1.4vw, 21px);font-style:italic;max-width:40ch}
.feat-meta{font-variant-caps:all-small-caps;letter-spacing:.05em;font-size:17px;font-variant-numeric:lining-nums}
.feat-link:focus-visible{outline:none}
.feat-link:focus-visible .feat-fig{outline:3px solid var(--k);outline-offset:4px}
/* duotone figures keep the plate's own inks whatever the edition */
.vis{--vbg:var(--duo-b)}
.vis text{font-family:var(--hf-text)}

/* ---------- pp. 08–09 process ---------- */
.proc-pin{grid-column:1 / span 5;position:sticky;top:calc(var(--hf-bar) + 24px);align-self:start;height:calc(100svh - var(--hf-bar) - 60px);min-height:520px;display:flex;flex-direction:column}
.process .h-sec{font-size:clamp(48px, 5.4vw, 104px)}
.proc-num{margin-top:auto;margin-left:-.06em;font-size:clamp(150px, 22vw, 400px);line-height:.76;color:transparent;-webkit-text-stroke:2px var(--head);--w0:820;--wd:80;--s0:84;--sx:30;font-variant-numeric:lining-nums tabular-nums}
.proc-num #proc-num{display:inline-block}
.proc-num.swap #proc-num{animation:stampIn .5s var(--hf-ease)}
@keyframes stampIn{0%{transform:scale(1.08);opacity:0}60%{opacity:1}100%{transform:none}}
.proc-rail{display:flex;gap:8px;margin-top:22px}
.proc-rail li{flex:1;height:6px;border:1.5px solid var(--k);transition:background-color var(--hf-t)}
.proc-rail li.on{background:var(--k)}
.proc-steps{grid-column:7 / span 6}
.step{min-height:56svh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:40px 0;max-width:600px;transition:color var(--hf-t) var(--hf-ease)}
.js .step:not(.on){color:color-mix(in srgb, var(--k) 66%, var(--g))}
.step-when{font-style:italic;font-variant-numeric:lining-nums}
.step-t{font-size:clamp(48px, 5.4vw, 92px);font-weight:840;font-stretch:84%;display:flex;gap:.25em;align-items:baseline}
.step-n{display:none;font-size:.45em}
.step p:not(.step-when):not(.step-out){font-size:clamp(19px, 1.5vw, 23px);line-height:1.5}
.step-out{padding-top:12px;border-top:1px solid currentColor;font-size:17px}
.step-out i{font-variant-caps:all-small-caps;font-style:normal;letter-spacing:.05em;margin-right:6px}

/* ---------- pp. 10–11 masthead ---------- */
.letter{grid-column:1 / span 6;display:grid;gap:30px;align-content:start}
.beliefs{counter-reset:b;display:grid;gap:14px;max-width:46ch;border-top:1px solid var(--k);padding-top:18px}
.beliefs li{counter-increment:b;display:grid;grid-template-columns:2.4ch 1fr;gap:12px}
.beliefs li::before{content:counter(b, upper-roman) ".";font:800 18px/1.5 var(--hf-display)}
.beliefs b{font-weight:650}
.sign{font-style:italic;font-size:20px}
.sign::before{content:"";display:inline-block;width:56px;height:1px;background:currentColor;vertical-align:middle;margin-right:12px}
.mh{grid-column:8 / span 5;border:2px solid var(--k);background:var(--g);padding:22px 22px 8px;align-self:start}
.mh-h{font:840 clamp(36px, 3.6vw, 60px)/.85 var(--hf-display);text-transform:uppercase;font-stretch:120%;padding-bottom:14px;border-bottom:2px solid var(--k)}
.mh-list > div{padding:14px 0;border-bottom:1px solid var(--k)}
.mh-list > div:last-child{border-bottom:0}
.mh-list dt{font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:16px}
.mh-list dd{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center}
.av{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--k);color:var(--g);font-size:15px;font-weight:800;font-stretch:110%;line-height:1}
.mh-n{font-weight:650;font-size:20px;line-height:1.2}
.mh-note{font-style:italic;font-size:16px;line-height:1.35}

/* ---------- p. 12 letters ---------- */
.contact-head{grid-column:1 / span 5;display:grid;gap:26px;align-content:start}
.direct{display:grid;gap:10px;border-top:1px solid var(--k);padding-top:16px}
.direct li{display:grid;grid-template-columns:8ch 1fr;gap:12px}
.direct li > span:first-child{font-variant-caps:all-small-caps;letter-spacing:.06em}
.direct a{font-weight:650}
.coupon{grid-column:7 / span 6;position:relative;border:2px dashed var(--k);padding:12px;
  --cg:var(--hf-paper-fixed);--ck:var(--hf-ink-fixed)}
.cut{position:absolute;top:-13px;left:22px;display:flex;align-items:center;gap:8px;padding:0 8px;background:var(--g);font-style:italic;font-size:15px}
.cut .iz-i{font-size:18px}
#brief{display:grid;gap:22px;background:var(--cg);color:var(--ck);padding:clamp(20px, 2.6vw, 34px);
  --g:var(--cg);--k:var(--ck);--spot:var(--hf-orange);
  --iz-bg:var(--cg);--iz-fg:var(--ck);--iz-card:var(--cg);--iz-primary:var(--ck);--iz-primary-fg:var(--cg);
  --iz-muted:color-mix(in srgb, var(--ck) 8%, var(--cg));--iz-muted-fg:color-mix(in srgb, var(--ck) 82%, var(--cg));--iz-ring:var(--ck)}
.form-t{font-size:clamp(32px, 3vw, 48px);font-weight:840;font-stretch:118%;border-bottom:2px solid var(--ck);padding-bottom:10px}
#brief .iz-field{max-width:none}
#brief .iz-label{font:400 16px/1.2 var(--hf-text);font-variant-caps:all-small-caps;letter-spacing:.06em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#brief .iz-input{height:44px;padding:0 2px;border:0;border-radius:0;background:transparent;box-shadow:inset 0 -1.5px 0 var(--ck);font:400 19px/1.3 var(--hf-text);color:var(--ck)}
#brief .iz-input:hover{box-shadow:inset 0 -3px 0 var(--ck)}
#brief .iz-input:focus-visible{outline:2px solid var(--ck);outline-offset:3px;box-shadow:inset 0 -3px 0 var(--ck)}
#brief .iz-input[aria-invalid="true"]{box-shadow:inset 0 -3px 0 var(--iz-destructive)}
#brief textarea.iz-input{height:auto;min-height:120px;padding:10px;box-shadow:inset 0 0 0 1.5px var(--ck);resize:vertical;
  background:repeating-linear-gradient(transparent 0 29px, color-mix(in srgb, var(--ck) 18%, transparent) 29px 30px) 0 10px}
#brief .iz-error{color:var(--hf-ox-fixed);font:italic 500 16px/1.3 var(--hf-text)}
#brief .iz-desc{color:var(--iz-muted-fg);font-style:italic;font-size:15.5px}
.needs{border:0;margin:0;padding:0}
.needs legend{padding:0;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:10px 20px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:10px;min-height:32px;font-size:18px}
.chip span::before{content:"";width:20px;height:20px;flex:none;box-shadow:inset 0 0 0 1.5px var(--ck);transition:background-color var(--hf-t-fast), transform var(--hf-t-fast) var(--hf-ease);
  background:no-repeat center / 14px}
.chip:hover span::before{box-shadow:inset 0 0 0 2.5px var(--ck)}
.chip:active span::before{transform:scale(.9)}
.chip input:checked + span::before{background-color:var(--ck);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1ECE0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 4.5 4.5 10.5-10.5'/%3E%3C/svg%3E")}
.chip input:focus-visible + span{outline:2px solid var(--ck);outline-offset:3px}
#brief .iz-seg{background:transparent;padding:0;box-shadow:inset 0 0 0 1.5px var(--ck);border-radius:0;justify-self:start;max-width:100%}
#brief .iz-seg-thumb{background:var(--ck) !important;box-shadow:none !important;border-radius:0;top:0;bottom:0}
#brief .iz-seg-opt{height:40px;border-radius:0;font:400 17px/1.1 var(--hf-text);font-variant-numeric:lining-nums;color:var(--ck);opacity:1;transition:color var(--hf-t-fast)}
#brief .iz-seg-opt[aria-checked="true"]{color:var(--cg)}
#brief .iz-seg-opt:focus-visible{outline:2px solid var(--ck);outline-offset:2px}
.form-end{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-note{font-style:italic;font-size:15.5px}
.form-ok[hidden]{display:none}
.form-ok{display:flex;gap:10px;padding:14px 16px;border:1.5px solid var(--ck);font-style:italic}

/* ---------- back cover ---------- */
.back{padding-bottom:0;display:flex;flex-direction:column}
.back-in{display:grid;gap:40px}
.colophon{display:grid;grid-template-columns:minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);gap:32px;padding-top:28px;border-top:2px solid var(--k)}
.col-h{font:800 15px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}
.colophon p{max-width:42ch;font-size:17px}
.col-links{display:grid;gap:8px}
.col-links a{display:inline-flex;gap:12px;justify-content:space-between;min-width:14ch}
.col-links span{font-variant-numeric:lining-nums tabular-nums;font-style:italic}
.col-end{display:grid;gap:16px;justify-items:start;align-content:start}
.credit,.copy{font-size:15.5px}
.back-word{margin:clamp(40px, 7vh, 80px) 0 0 -.03em;height:.62em;overflow:hidden;line-height:.8;white-space:nowrap;font-size:20vw;--w0:880;--wd:20;--s0:100;--sx:12}
.back-word span{display:inline-block}

/* ---------- features (case pages) ---------- */
.case{display:none;position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;background:var(--hf-paper);color:var(--hf-ink);
  --g:var(--hf-paper);--k:var(--hf-ink);--spot:var(--duo-a);--head:var(--hf-ink)}
.case:target{display:block}
.js .case:target{display:none}
.js .case.is-open{display:block}
.case::before{content:"";position:fixed;inset:-50%;pointer-events:none;opacity:var(--hf-grain-o);mix-blend-mode:var(--hf-grain-blend);z-index:5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.case-shade{position:fixed;inset:0;pointer-events:none;z-index:6;background:linear-gradient(90deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 60%)}
.case-bar{position:sticky;top:0;z-index:4;display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:16px;height:56px;padding:0 var(--hf-gutter);
  background:var(--g);border-bottom:1.5px solid var(--k);font:italic 400 15px/1 var(--hf-text);font-variant-numeric:lining-nums}
.cb-c{font-style:normal;font:800 15px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.05em}
.cb-r{justify-self:end}
.case-page{position:relative;z-index:3;max-width:1440px;margin:0 auto;padding:clamp(32px, 6vh, 72px) var(--hf-gutter) 80px;display:grid;gap:clamp(36px, 6vh, 72px)}
.case-head{display:grid;gap:22px}
.case-kick{display:flex;gap:18px;font-style:italic;font-size:16px;padding-top:8px;border-top:2px solid var(--k);font-variant-numeric:lining-nums}
.case-kick span:first-child{font:800 15px/1.2 var(--hf-display);font-style:normal;text-transform:uppercase;letter-spacing:.05em}
.case-t{font-size:clamp(52px, 8.4vw, 150px);font-weight:860;font-stretch:84%;max-width:12ch}
.case-sf{font-size:clamp(21px, 2vw, 30px);font-style:italic;line-height:1.35;max-width:38ch}
.case-hero{margin:0 calc(var(--hf-gutter) * -1);display:grid;gap:10px}
.case-hero-fig{aspect-ratio:16/9;max-height:calc(100svh - 120px);overflow:hidden;background:var(--duo-b);transform-origin:0 0}
.case-hero figcaption,.case-fig figcaption{font-style:italic;font-size:15.5px;padding:0 var(--hf-gutter)}
.case-fig figcaption{padding:0}
.case-cols{display:grid;grid-template-columns:minmax(0, 4fr) minmax(0, 8fr);gap:clamp(24px, 4vw, 72px)}
.inbrief{border-top:2px solid var(--k);border-bottom:2px solid var(--k);padding:14px 0;align-self:start}
.inbrief h3{font:800 16px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.inbrief dl > div{padding:8px 0;border-top:1px solid var(--k)}
.inbrief dt{font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:15.5px}
.inbrief dd{font-size:17px}
.case-text{columns:2 300px;column-gap:clamp(24px, 3vw, 48px)}
.case-text h3{font:800 18px/1.1 var(--hf-display);text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px;break-after:avoid}
.case-text p,.case-text ul{margin-bottom:22px;font-size:19px}
.case-text .dropcap::first-letter{color:var(--k)}
.ship li{padding-left:1.2em;position:relative;margin-bottom:6px}
.ship li::before{content:"";position:absolute;left:0;top:.6em;width:.5em;height:.5em;background:var(--k)}
.case-fig{margin:0;display:grid;gap:12px}
.fig-stage{display:grid;place-items:center;min-height:min(56vh, 520px);padding:40px 20px;background:var(--duo-b);
  background-image:radial-gradient(circle, color-mix(in srgb, var(--duo-a) 35%, transparent) 28%, transparent 30%);background-size:7px 7px}
.case-next{display:grid;gap:4px;padding-top:24px;border-top:2px solid var(--k);text-decoration:none}
.case-next span:first-child{font-style:italic}
.case-next .dsp{font-size:clamp(48px, 7vw, 120px);font-weight:840;font-stretch:84%;transition:font-stretch var(--hf-t) var(--hf-ease)}
.case-next:hover .dsp,.case-next:focus-visible .dsp{font-stretch:118%}
/* print cards in figures (paper and ink, both editions) */
.print-card{--k:var(--hf-ink-fixed);--g:var(--hf-paper-fixed);background:var(--g);color:var(--k);box-shadow:inset 0 0 0 1.5px var(--k), 8px 8px 0 var(--k);padding:24px;width:min(440px, 100%);display:grid;gap:12px;
  --iz-fg:var(--k);--iz-bg:var(--g);--iz-muted-fg:color-mix(in srgb, var(--k) 80%, var(--g))}
.print-card .iz-badge{border-radius:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--k);color:var(--k);font:400 15px/1 var(--hf-text);font-variant-caps:all-small-caps;letter-spacing:.06em}
.print-card .iz-badge .dot{background:var(--k) !important}
.t-top,.d-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.t-dim,.d-dim,.s-dim{font-style:italic;font-size:16px}
.t-time{font:860 88px/.86 var(--hf-display)}
.t-route{font-weight:650}
.t-code{width:88px;height:88px;fill:currentColor;justify-self:end;margin-top:-76px}
.d-name{font:820 26px/1 var(--hf-display);text-transform:uppercase}
.d-act{justify-content:flex-start}
.print-card .iz-btn{border-radius:0;background:transparent;color:var(--k);box-shadow:inset 0 0 0 1.5px var(--k);font-family:var(--hf-text)}
.suggest{width:min(540px, 100%)}
.s-line{font-size:20px;line-height:1.55}
.s-mark{text-decoration:underline wavy var(--k);text-underline-offset:5px}
.s-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;box-shadow:inset 0 0 0 1.5px var(--k);font-size:16px}
.s-keys{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:14px;font-style:italic}
.s-keys .iz-kbd{border-radius:0;box-shadow:inset 0 0 0 1px var(--k);background:transparent;color:var(--k)}
table.print-card{display:table;border-collapse:collapse;padding:0;min-width:min(360px, 100%);font-variant-numeric:lining-nums tabular-nums}
.tides caption{caption-side:bottom;padding-top:12px;font-style:italic;font-size:14px;color:var(--hf-ink-fixed)}
.tides th{font:400 15px/1 var(--hf-text);font-variant-caps:all-small-caps;letter-spacing:.06em;text-align:left;padding:14px 16px 10px}
.tides td{padding:12px 16px;border-top:1px solid var(--k);font-size:18px}
.tides tr:first-child td{font-weight:700}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .coverline{grid-column:1 / span 7}
  .teasers{grid-column:8 / span 5}
  .svc-list{grid-column:6 / span 7}
  .colophon{grid-template-columns:1fr 1fr}
  .col-end{grid-column:1 / -1}
}
@media (max-width: 860px){
  .grid,.cover-low,.feat-grid{grid-template-columns:minmax(0, 1fr)}
  .grid > *,.cover-low > *,.feat-grid > *{grid-column:1 !important}
  .svc-head,.proc-pin,.contact-head{position:static}
  .svc-head{margin-bottom:28px}
  .teasers{margin-top:32px}
  .f-2,.f-4{margin-top:0}
  .f-2{margin-left:14%}
  .proc-pin{height:auto;min-height:0}
  .proc-num,.proc-rail{display:none}
  .step{min-height:0;padding:28px 0;border-top:1px solid var(--k)}
  .js .step:not(.on){color:inherit}
  .step-n{display:inline}
  .mh{margin-top:40px}
  .coupon{margin-top:36px}
  .case-cols{grid-template-columns:minmax(0, 1fr)}
  .fb-sec{display:none}
  .folio-bar{grid-template-columns:auto 1fr auto auto}
  .fb-page{justify-self:end}
}
@media (max-width: 560px){
  :root{--hf-bar:44px}
  body{font-size:17px}
  .fb-issue,.hide-s{display:none}
  .folio-bar{gap:8px}
  .fb-btn{padding:0 8px;font-size:11.5px;letter-spacing:.03em}
  .fb-name{font-size:14px;font-stretch:104%}
  .teasers li a{grid-template-columns:48px minmax(0, 1fr)}
  .teasers .pg{font-size:34px}
  .mast{--s0:84;line-height:.82}
  .m-2{padding-left:.5em}
  .cover{min-height:max(100svh, 640px)}
  .h-giant{font-size:16.5vw;--s0:76;white-space:normal}
  .work-note{margin:0}
  .f-2{margin-left:0}
  .row2{grid-template-columns:1fr}
  #brief .iz-seg{display:flex;width:100%}
  #brief .iz-seg-opt{flex:1;min-width:0;height:auto;min-height:40px;padding:6px 4px;font-size:15px;white-space:normal}
  .toc-list li a{grid-template-columns:3ch minmax(0, 1fr);gap:4px 14px}
  .td{grid-column:2}
  .colophon{grid-template-columns:1fr}
  .case-bar{grid-template-columns:1fr auto;gap:10px}
  .cb-l,.cb-r{display:none}
  .t-time{font-size:64px}
  .t-code{width:64px;height:64px;margin-top:-56px}
  .direct li{grid-template-columns:1fr}
  .back-word{font-size:21vw}
}

/* ---------- preferences ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal{clip-path:none;--mis:.035em;transition:none}
  .js .cover::before{display:none}
  .js .mast,.js .cover-low,.js .cover .folio{opacity:1;transition:none;--mis:.035em}
  .band{transform:none;margin:0}
  .band-row{transform:none;flex-wrap:wrap;white-space:normal;row-gap:.1em}
  .band-row span:nth-of-type(n+6),.band-row i:nth-of-type(n+5){display:none}
  .kin{font-weight:var(--w0);font-stretch:calc(var(--s0) * 1%)}
  .feat-fig,.feat-h,.svc-name,.svc-n,.tn,.teasers b,.case-next .dsp,.stamp,.step,.chip span::before,.ul{transition:none}
  .feat-link:hover .feat-fig{transform:none}
  .proc-num.swap #proc-num{animation:none}
  .loupe{display:none}
  .stage canvas{transition:none}
}
@media (prefers-reduced-transparency: reduce){
  .grain,.case::before{display:none}
  .loupe-in{-webkit-backdrop-filter:none;backdrop-filter:none}
}
:root[data-glass="solid"] .grain{display:none}
@media (hover: none), (pointer: coarse){.loupe{display:none}}

/* =====================================================================
   v3 on photoreal plates (Oct 2026): loader, cover plate, figures, proofing room, collage
   ===================================================================== */
body{cursor:auto}
/* ---------- loader: two drums, registration converging ---------- */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--hf-chart);color:var(--hf-ink-fixed)}
.ld-reg{width:120px;height:120px;stroke-width:2}
.ld-a{stroke:var(--hf-ink-fixed)}
.ld-b{stroke:var(--hf-ox-fixed);transform:translate(9px, 6px);animation:ldReg 1.4s var(--hf-ease) infinite alternate}
@keyframes ldReg{to{transform:translate(1px, 1px)}}
.ld-t{font:800 22px/1 var(--hf-display);text-transform:uppercase;font-stretch:118%;letter-spacing:-.01em}
.ld-t i{font:italic 400 18px/1 var(--hf-text);text-transform:none;margin-left:6px}
.ld-n{font:italic 400 16px/1 var(--hf-text);font-variant-numeric:lining-nums tabular-nums}
:root[data-theme="dark"] .loader{background:var(--hf-paper);color:var(--hf-chart)}
:root[data-theme="dark"] .ld-a{stroke:var(--hf-chart)}
:root[data-theme="dark"] .ld-b{stroke:var(--hf-ox)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .loader{background:var(--hf-paper);color:var(--hf-chart)}:root:not([data-theme="light"]) .ld-a{stroke:var(--hf-chart)}:root:not([data-theme="light"]) .ld-b{stroke:var(--hf-ox)}}
@media (prefers-reduced-motion: reduce){.loader{display:none}}

/* ---------- custom cursor: a registration target (fine pointers only, native cursor kept) ---------- */
.hf-cursor{display:none;position:fixed;left:0;top:0;z-index:150;pointer-events:none;width:0;height:0;color:var(--cur-k, var(--hf-ink))}
.hf-cursor .stage-cursor-dot{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;border:1.5px solid currentColor;transition:transform .25s var(--hf-ease), border-width .25s;
  background:linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 40px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 40px 1.5px no-repeat;mix-blend-mode:difference;color:#fff}
.hf-cursor.is-hover .stage-cursor-dot{transform:scale(1.7);border-width:1px}
.hf-cursor .stage-cursor-label{position:absolute;left:22px;top:14px;white-space:nowrap;padding:5px 8px;background:var(--hf-ink-fixed);color:var(--hf-chart);font:700 12px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.06em;opacity:0;transform:translateY(4px);transition:opacity .2s, transform .2s var(--hf-ease)}
.hf-cursor.is-label .stage-cursor-label{opacity:1;transform:none}
.hf-moved .hf-cursor{display:block}
.hf-cursor.on-lens{opacity:0}

/* ---------- cover plate ---------- */
.cover{min-height:max(100svh, 760px)}
.cover .mast{position:relative;z-index:4;pointer-events:none}
.cover-low{align-items:start}
.cover-left{grid-column:1 / span 5;display:grid;gap:clamp(28px, 5vh, 52px);padding-top:clamp(8px, 2vh, 24px)}
.cover .coverline,.cover .teasers{grid-column:auto}
.cover-plate{grid-column:6 / span 7;margin:calc(var(--mast-fs, clamp(100px, 20.5vw, 400px)) * -.36) 0 0;display:grid;gap:10px;position:relative;z-index:2 !important;
  transform:rotate(1.2deg);transform-origin:70% 10%}
.cover-plate picture,.cover-plate img{display:block;width:100%;height:auto}
.cover-plate picture{box-shadow:12px 14px 0 var(--hf-ink-fixed);outline:1.5px solid var(--hf-ink-fixed);outline-offset:-1px}
.cover-plate figcaption{display:flex;justify-content:space-between;gap:12px;font:italic 400 14px/1.2 var(--hf-text);font-variant-numeric:lining-nums;padding-top:6px}
.cover-plate figcaption span:first-child{font:800 13px/1.2 var(--hf-display);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.cp-night{display:none !important}
:root[data-theme="dark"] .cp-day{display:none !important}
:root[data-theme="dark"] .cp-night{display:block !important}
:root[data-theme="dark"] .cover-plate picture{box-shadow:12px 14px 0 var(--hf-ox);outline-color:var(--hf-chart)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cp-day{display:none !important}:root:not([data-theme="light"]) .cp-night{display:block !important}:root:not([data-theme="light"]) .cover-plate picture{box-shadow:12px 14px 0 var(--hf-ox);outline-color:var(--hf-chart)}}
.js .cover-plate{opacity:0;transform:rotate(4deg) translateY(60px)}
.js .ready .cover-plate{opacity:1;transform:rotate(1.2deg);transition:opacity .5s linear .55s, transform 1.1s var(--hf-ease) .5s}
.cover-plate:hover{transform:rotate(0deg) translateY(-4px) !important;transition:transform .6s var(--hf-ease) !important}

/* ---------- duotone figures (SVG scenes printed in the feature's two inks) ---------- */
.vis{font-family:var(--hf-text)}
.vis .v-bg{fill:var(--duo-b)}
.vis .v-dot{fill:var(--duo-a);opacity:.35}
.vis .v-river{fill:none;stroke:var(--duo-a);stroke-width:70;opacity:.16;stroke-linecap:round}
.vis .v-route{fill:none;stroke:var(--duo-a);stroke-width:6;stroke-dasharray:2 16;stroke-linecap:round}
.vis .v-stop circle{fill:var(--duo-b);stroke:var(--duo-a);stroke-width:5}
.vis .v-stop text,.vis .v-small,.vis .v-mid{fill:var(--duo-a);font-size:30px}
.vis .v-mid{font-size:36px;font-weight:600}
.vis .v-huge{fill:var(--duo-a);font:800 150px/1 var(--hf-display);letter-spacing:-.02em}
.vis .v-big{fill:var(--duo-a);font:800 58px/1 var(--hf-display);text-transform:uppercase}
.vis .v-boat{fill:var(--duo-a)}
.vis .v-card{fill:var(--duo-b);stroke:var(--duo-a);stroke-width:5}
.vis .v-card-shadow{fill:var(--duo-a);stroke:none}
.vis .v-acc{fill:var(--duo-a)}
.vis .v-on-acc{fill:var(--duo-b);font-size:28px;font-weight:600}
.vis .v-arch{fill:var(--duo-a);opacity:.1}
.vis .v-plinth rect,.vis .v-plinth ellipse{fill:var(--duo-a);opacity:.22}
.vis .v-plinth ellipse{opacity:.32}
.vis .v-glaze-a,.vis .v-glaze-b,.vis .v-glaze-c{fill:var(--duo-a)}
.vis .v-glaze-a2,.vis .v-glaze-b2,.vis .v-glaze-c2{fill:var(--duo-a);opacity:.7}
.vis .v-sheen{fill:none;stroke:var(--duo-b);stroke-width:9;stroke-linecap:round;opacity:.8}
.vis .v-chip{fill:var(--duo-a)}
.vis .v-chip-t{fill:var(--duo-b);font-size:24px;font-weight:600}
.vis .v-edges{fill:none;stroke:var(--duo-a);stroke-width:3;opacity:.45}
.vis .v-path{fill:none;stroke:var(--duo-a);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.vis .v-node circle{fill:var(--duo-b);stroke:var(--duo-a);stroke-width:4}
.vis .v-node-on circle,.vis .v-node-big{fill:var(--duo-a)}
.vis .v-mut{opacity:.72}
.vis .v-bar{fill:var(--duo-a)}
.vis .v-txt{fill:var(--duo-a);opacity:.24}
.vis .v-link{fill:var(--duo-a);opacity:.14}
.vis .v-link-t{fill:var(--duo-a);font-size:26px;font-weight:600}
.vis .v-quote{fill:var(--duo-a)}
.vis .v-night{fill:var(--duo-a)}
.vis .v-stars circle,.vis .v-moon{fill:var(--duo-b)}
.vis .v-const{fill:none;stroke:var(--duo-b);stroke-width:2;opacity:.5}
.vis .v-wave-b{fill:var(--duo-b);opacity:.35}
.vis .v-wave-a{fill:var(--duo-b);opacity:.7}
.vis .v-tideline{stroke:var(--duo-b);stroke-width:3;stroke-dasharray:14 12}
.vis .v-night-small{fill:var(--duo-b);font-size:32px}
.vis .v-night-huge{fill:var(--duo-b);font:800 170px/1 var(--hf-display)}
/* every figure carries the drum's dot screen */
.feat-fig::after,.case-hero-fig::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.22;
  background:radial-gradient(circle, var(--duo-a) 26%, transparent 29%) 0 0 / 6px 6px}
.case-hero-fig{position:relative}

/* ---------- collage: tape on figures, sticker and tick on the coupon ---------- */
.feat{position:relative}
.feat-link{position:relative}
.tape{position:absolute;z-index:4;width:150px;height:auto;pointer-events:none;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .18))}
.tp-a{left:-26px;top:34px;transform:rotate(-34deg)}
.tp-b{right:-22px;top:28px;transform:rotate(28deg);width:132px}
.tp-c{left:30%;top:20px;transform:rotate(-4deg);width:170px}
.tp-d{right:-14px;top:30px;transform:rotate(38deg);width:108px}
.sticker{position:absolute;z-index:5;right:-18px;top:-30px;width:150px;height:auto;transform:rotate(9deg);pointer-events:none}
.sticker-t{position:absolute;z-index:6;right:-6px;top:6px;width:126px;transform:rotate(9deg);text-align:center;pointer-events:none;
  font:800 15px/1 var(--hf-display);text-transform:uppercase;letter-spacing:.06em;color:var(--hf-ink-fixed)}
.sticker-t::before{content:attr(data-t)} /* decorative print on the sticker image: drawn as generated content so checkers do not read it against the page colour */
.tick-mark{position:absolute;z-index:6;left:42%;top:28%;width:min(300px, 60%);height:auto;pointer-events:none;opacity:0;transform:scale(.6) rotate(-10deg);transform-origin:30% 70%}
.tick-mark.on{opacity:1;transform:none;transition:opacity .15s linear, transform .5s cubic-bezier(.3, 1.6, .5, 1)}

/* ---------- pp. 08–09 proofing room ---------- */
.proof{--g:var(--hf-paper);--k:var(--hf-ink);--spot:var(--hf-orange);--head:var(--hf-ink)}
.proof-grid{align-items:start}
.proof-copy{grid-column:1 / span 4;display:grid;gap:24px;position:sticky;top:calc(var(--hf-bar) + 24px)}
.proof .h-sec{font-size:clamp(56px, 7vw, 132px)}
.proof-ctl{display:grid;gap:14px;border-top:2px solid var(--k);padding-top:16px}
.pc-row{display:grid;gap:8px}
.proof .iz-label{font:400 16px/1.2 var(--hf-text);font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--k)}
.proof .iz-seg{background:transparent;padding:0;box-shadow:inset 0 0 0 1.5px var(--k);border-radius:0;justify-self:start;max-width:100%}
.proof .iz-seg-thumb{background:var(--k) !important;box-shadow:none !important;border-radius:0;top:0;bottom:0}
.proof .iz-seg-opt{height:40px;border-radius:0;font:400 17px/1.1 var(--hf-text);font-variant-numeric:lining-nums;color:var(--k);opacity:1;padding:0 16px}
.proof .iz-seg-opt[aria-checked="true"]{color:var(--g)}
.proof .iz-seg-opt:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.readout{border-top:1px solid var(--k);display:grid}
.readout > div{display:grid;grid-template-columns:12ch minmax(0, 1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--k)}
.readout dt{font-variant-caps:all-small-caps;letter-spacing:.06em;font-size:16px}
.readout dd{font-size:17px;line-height:1.35;font-variant-numeric:lining-nums tabular-nums}
#ro-what{font-weight:650}
.proof-note{font-style:italic;font-size:15.5px;max-width:36ch}
.proof-plate{grid-column:5 / span 8;margin:0;display:grid;gap:10px}
.pp-sheet{position:relative;aspect-ratio:3 / 2;background:#ECE7DB;box-shadow:0 1px 0 rgb(0 0 0 / .1), 0 30px 50px -30px rgb(0 0 0 / .45);touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
.pp-print{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-sheet::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:40px;margin-left:-20px;pointer-events:none;background:linear-gradient(90deg, transparent, rgb(0 0 0 / .14) 48%, rgb(255 255 255 / .1) 52%, transparent)}
.proof-plate{position:relative}
.pp-prop{position:absolute;z-index:2;right:1.5%;bottom:1%;width:25%;height:auto;pointer-events:none;transition:opacity .4s linear, transform .6s var(--hf-ease);filter:drop-shadow(0 10px 14px rgb(0 0 0 / .25))}
.proof-plate.held .pp-prop{opacity:0;transform:translate(10%, 10%) rotate(8deg)}
.lens{--d:min(230px, 34%);position:absolute;left:0;top:0;width:var(--d);aspect-ratio:1;border-radius:50%;z-index:3;cursor:grab;touch-action:none;outline:none;
  transform:translate(-50%, -50%);will-change:left, top;box-shadow:0 0 0 7px #111, 0 0 0 9px #3a3a3a, 0 22px 30px -10px rgb(0 0 0 / .55)}
.lens:active{cursor:grabbing}
.lens:focus-visible{box-shadow:0 0 0 7px #111, 0 0 0 9px #3a3a3a, 0 0 0 13px var(--hf-orange), 0 22px 30px -10px rgb(0 0 0 / .55)}
.lens-view{position:absolute;inset:0;border-radius:50%;background-color:#ECE7DB;background-repeat:no-repeat;overflow:hidden}
.lens-view::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%, rgb(255 255 255 / .35), transparent 34%), radial-gradient(circle, transparent 62%, rgb(0 0 0 / .28) 100%)}
.lens-ret{position:absolute;inset:0;fill:none;stroke:rgb(20 19 17 / .8);stroke-width:.7}
.lens-ret .t{stroke-width:.5}
.proof-plate figcaption{display:flex;justify-content:space-between;gap:12px;font:italic 400 14.5px/1.3 var(--hf-text);font-variant-numeric:lining-nums}
.proof-plate figcaption span:first-child{font:800 13px/1.3 var(--hf-display);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
/* optional page-turn sequence (shown only when img/seq/turn/ exists) */
.turn{position:relative;height:100svh;width:100vw;margin:0 0 clamp(30px, 6vh, 60px) calc(50% - 50vw)}
.turn[hidden]{display:none}
.turn-c{position:absolute;inset:0;width:100%;height:100%}
.turn-cap{position:absolute;left:var(--hf-gutter);right:var(--hf-gutter);bottom:18px;display:flex;justify-content:space-between;font:italic 400 14.5px/1 var(--hf-text);color:var(--hf-ink-fixed)}
.turn-cap span{padding:5px 9px;background:color-mix(in srgb,#f3efe6 90%,transparent);border-radius:2px}

/* ---------- masthead plate ---------- */
.mh-plate{margin:0 calc(var(--hf-gutter) * -1) clamp(36px, 7vh, 72px);display:grid;gap:10px}
.mh-plate img{display:block;width:100%;height:clamp(300px, 52vw, 720px);object-fit:cover;object-position:50% 46%}
.mh-plate figcaption{display:flex;justify-content:space-between;gap:12px;padding:0 var(--hf-gutter);font:italic 400 14.5px/1.3 var(--hf-text)}
.mh-plate figcaption span:first-child{font:800 13px/1.3 var(--hf-display);font-style:normal;text-transform:uppercase;letter-spacing:.06em}
.beliefs li > span{min-width:0}

@media (max-width: 860px){
  .cover-plate{margin:8px 0 0;transform:rotate(1deg)}
  .js .ready .cover-plate{transform:rotate(1deg)}
  .proof-copy{position:static}
  .proof-plate{margin-top:28px}
  .tape{width:110px}
  .tp-a{left:-12px}.tp-b{right:-8px}.tp-d{right:-6px}
  .sticker{right:-6px;width:120px}
  .sticker-t{right:4px;top:2px;width:100px;font-size:13px}
}
@media (max-width: 560px){
  .lens{--d:44%}
  .readout > div{grid-template-columns:1fr;gap:2px}
  .proof .iz-seg{display:flex;width:100%}
  .proof .iz-seg-opt{flex:1;min-width:0;padding:0 6px;font-size:15px}
}
@media (prefers-reduced-motion: reduce){
  .js .cover-plate,.js .ready .cover-plate{opacity:1;transform:rotate(1.2deg);transition:none}
  .tick-mark.on{transition:none}
  .pp-prop{transition:none}
}
.work-head{grid-template-columns:minmax(0, 1fr)}
.work-head > *,.contact-head > *,.svc-head > *,.letter > *,.proof-copy > *{min-width:0}
@media (max-width: 400px){
  .h-sec,.proof .h-sec,.process .h-sec{font-size:14vw}
  .fb-page{display:none}
  .folio-bar{grid-template-columns:1fr auto auto}
  .cl-t{font-size:10.5vw}
}

/* page-turn leaf for features (a blank page swinging round the spine) */
.leaf{display:none;position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--hf-paper);backface-visibility:hidden;
  box-shadow:inset -40px 0 60px -40px rgb(0 0 0 / .35);background-image:linear-gradient(90deg, rgb(0 0 0 / .08), transparent 6%)}
.leaf-shade{position:absolute;inset:0;background:linear-gradient(90deg, rgb(0 0 0 / .5), rgb(0 0 0 / 0) 70%);opacity:0}