/* Hallmark · macrostructure: Masthead + brand row · tone: editorial-austere · anchor hue: none (ink on paper)
 * theme: custom (vibe: "the Promenader's page 3, on a screen" · paper oklch(100% 0 0) · accent none · MuseoModerno + Merriweather)
 * axes: light / geometric-sans / neutral · nav: inline four (brief) · footer: statement · enrichment: E-C generated stills (gpt-image-2, watercolour)
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */

:root{
  --paper: oklch(100% 0 0);
  --ink: oklch(16% 0 0);
  --ink-2: oklch(44% 0 0);
  --ink-3: oklch(64% 0 0);
  --rule: oklch(90% 0 0);
  --focus: oklch(16% 0 0);

  --font-display: "MuseoModerno", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body: "Merriweather", Georgia, "Times New Roman", serif;

  --text-masthead: clamp(4rem, 15vw, 14.5rem);
  --text-h2: clamp(1.875rem, 3.2vw, 2.5rem);
  --text-wordmark: clamp(1.5rem, 2vw, 1.75rem);
  --text-lede: clamp(1.0625rem, 1.5vw, 1.25rem);
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-fast: 150ms;
  --dur-reveal: 700ms;
  --dur-develop: 1000ms;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--paper);font:300 var(--text-body)/1.7 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:400;color:var(--ink)}
.prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;color:var(--ink)}
.prose a:hover{color:var(--ink-2)}

/* ── top bar ── */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--rule)}
.top .mark{display:block;line-height:0;flex:none}
.top .mark img{width:100px;height:100px}
.top nav{display:flex;gap:clamp(14px,2.4vw,32px)}
.top nav a{font:500 .9375rem/1 var(--font-display);color:var(--ink-2);padding:6px 0;white-space:nowrap;border-bottom:1px solid transparent}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media (max-width:520px){ .top .mark img{width:78px;height:78px} .top nav a{font-size:.875rem} }
@media (max-width:360px){ .top .mark img{width:64px;height:64px} .top nav{gap:10px} .top nav a{font-size:.8125rem} }

/* ── masthead ── */
.masthead{display:grid;grid-template-columns:1fr;padding:clamp(40px,7vw,88px) 0 clamp(20px,3vw,32px)}
.masthead h1{margin:0 0 0 -0.04em;font:800 var(--text-masthead)/0.86 var(--font-display);letter-spacing:-.045em;min-width:0;white-space:nowrap}
.masthead .tag{justify-self:end;text-align:right;max-width:26ch;margin:var(--space-4) 0 0;font:italic 700 var(--text-lede)/1.45 var(--font-body);color:var(--ink)}
@media (max-width:720px){ .masthead .tag{justify-self:start;text-align:left;margin-top:var(--space-6)} }

/* ── hero painting ── */
.hero{margin:0;padding:0}
.hero img{width:100%;aspect-ratio:3/2;object-fit:cover}
.hero figcaption{margin-top:var(--space-3);font:italic 300 var(--text-small)/1.4 var(--font-body);color:var(--ink-3)}

/* ── motion: page-load sequence ── */
@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes develop{to{clip-path:inset(0 0 0 0);transform:none}}
@media (prefers-reduced-motion:no-preference){
  .masthead h1 .l{display:inline-block;opacity:0;transform:translateY(.35em);animation:rise var(--dur-reveal) var(--ease-out) forwards}
  .masthead h1 .l:nth-of-type(2){animation-delay:90ms}
  .masthead .tag{opacity:0;transform:translateY(8px);animation:rise 500ms var(--ease-out) 280ms forwards}
  .hero img{clip-path:inset(0 0 100% 0);transform:scale(1.03);animation:develop var(--dur-develop) var(--ease-in-out) 200ms forwards}
  .hero figcaption{opacity:0;animation:fade 400ms var(--ease-out) 1000ms forwards}
  .vein-text > *{opacity:0;transform:translateY(10px);animation:rise 500ms var(--ease-out) forwards}
  .vein-text > :nth-child(2){animation-delay:70ms} .vein-text > :nth-child(3){animation-delay:140ms}
  .vein-text > :nth-child(4){animation-delay:210ms} .vein-text > :nth-child(5){animation-delay:280ms}
  .vein-text > :nth-child(6){animation-delay:350ms} .vein-text > :nth-child(n+7){animation-delay:420ms}
  .vein-art img{clip-path:inset(0 0 100% 0);transform:scale(1.03);animation:develop var(--dur-develop) var(--ease-in-out) 150ms forwards}
  .sent h1{opacity:0;transform:translateY(.2em);animation:rise 500ms var(--ease-out) forwards}
  .sent p{opacity:0;animation:fade 400ms var(--ease-out) 200ms forwards}
}
@media (prefers-reduced-motion:reduce){
  .hero img,.vein-art img{opacity:0;animation:fade 200ms ease forwards}
}

/* ── motion: scroll reveal (only once JS has marked <html class="js">) ── */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
  .js [data-reveal="stagger"]{transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .block[data-reveal] .art img{clip-path:inset(0 0 100% 0);transform:scale(1.03);transition:clip-path 900ms var(--ease-in-out) 150ms,transform 900ms var(--ease-in-out) 150ms}
  .js .block[data-reveal].is-in .art img{clip-path:inset(0 0 0 0);transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:0;transition:opacity 200ms ease}
  .js [data-reveal].is-in{opacity:1}
}

/* ── motion: hover + press (tens-a-day tier: near-imperceptible) ── */
.top nav a,.foot nav a,.foot .who a,.links a,.back,.social a,.prose a,.contact-line a{transition:color var(--dur-fast) ease,border-color var(--dur-fast) ease}
.veins a.card .art{transition:transform 400ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){ .veins a.card:hover .art{transform:translateY(-2px) scale(1.015)} }


/* ── social bar ── */
.social{display:flex;align-items:center;gap:var(--space-8);margin-top:var(--space-8);padding:var(--space-4) 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.social .lbl{font:500 var(--text-small)/1 var(--font-display);color:var(--ink-3);letter-spacing:.01em}
.social .icons{display:flex;gap:var(--space-6)}
.social a{display:grid;place-items:center;width:40px;height:40px;color:var(--ink-2);border-radius:0}
.social svg{width:22px;height:22px;fill:currentColor;display:block}
.social a:hover{color:var(--ink)}
@media (max-width:520px){ .social{gap:var(--space-4)} .social .icons{gap:var(--space-3)} .social a{width:36px;height:36px} }

/* ── the four veins ── */
.veins{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--ink);padding-top:var(--space-8)}
.veins ul{list-style:none;margin:0 calc(-1 * var(--space-6));padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.veins li{padding:0 var(--space-6) var(--space-6);min-width:0}
.veins li + li{border-left:1px solid var(--rule)}
.veins .art{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:var(--space-6)}
.veins .vein-name{margin:0 0 var(--space-4);font:700 var(--text-wordmark)/1.1 var(--font-display);letter-spacing:-.025em}
.veins .wm{display:flex;align-items:flex-end;height:80px;margin-bottom:var(--space-4)}
.wm-text{font:700 var(--text-wordmark)/1 var(--font-display);letter-spacing:-.025em;color:var(--ink);overflow-wrap:anywhere;min-width:0}
.wm-text img{display:inline-block;height:.74em;width:auto;vertical-align:-.03em;margin:0 .02em}
.veins .wm-logo{height:80px;width:auto}
.veins .wm-tile{height:80px;width:auto;max-width:100%;object-fit:contain}
.veins .wm-afna{height:46px;width:auto;max-width:100%;object-fit:contain;margin-bottom:6px}
.veins p{color:var(--ink-2);margin-bottom:var(--space-4)}
.btn{display:inline-block;font:600 .875rem/1 var(--font-display);color:var(--ink);border:1px solid var(--ink);padding:11px 16px;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.btn:hover,a.card:hover .btn{background:var(--ink);color:var(--paper)}
.veins a.card{display:flex;flex-direction:column;height:100%}
.veins a.card .btn{align-self:flex-start;margin-top:auto}
.veins a.card p{margin-bottom:var(--space-6)}
@media (max-width:900px){
  .veins ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-8)}
  .veins li:nth-child(3){border-left:0}
  .veins li:nth-child(n+3){border-top:1px solid var(--rule);padding-top:var(--space-6)}
}
@media (max-width:520px){
  .veins ul{grid-template-columns:1fr;row-gap:0;margin:0}
  .veins li{padding-left:0;padding-right:0;border-left:0 !important;padding-top:var(--space-6);border-top:1px solid var(--rule)}
  .veins li:first-child{padding-top:0;border-top:0}
  .veins .wm{height:auto} .veins .wm-logo{height:80px} .veins .wm-tile{height:80px}
  .veins a.card .art{order:4;margin:var(--space-6) 0 0}
  .veins a.card .btn{margin-top:0}
}

/* ── content blocks ── */
.block{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8) var(--space-12);padding:clamp(48px,7vw,88px) 0;border-top:1px solid var(--rule)}
.block > *{min-width:0}
.block .full{grid-column:1 / -1}
.block .text{grid-column:span 7}
.block .art{grid-column:span 5;margin:0;align-self:center}
.block.art-left .art{order:-1}
.block h2{margin:0 0 var(--space-4);font:700 var(--text-h2)/1 var(--font-display);letter-spacing:-.03em;scroll-margin-top:var(--space-6)}
.block h2 + h2{margin-top:var(--space-12)}
.block .lede{font:italic 400 var(--text-lede)/1.45 var(--font-body);color:var(--ink);margin-bottom:var(--space-6);max-width:30ch}
.block .prose{color:var(--ink-2);max-width:62ch}
.block .prose p{margin-bottom:1.1em}
dl.rows{margin:0;padding:0;border-top:1px solid var(--rule)}
dl.rows div{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--space-2) var(--space-6);padding:var(--space-4) 0;border-bottom:1px solid var(--rule)}
dl.rows dt{margin:0;font:600 1rem/1.35 var(--font-display);letter-spacing:-.01em}
dl.rows dd{margin:0;color:var(--ink-2)}
.contact-line{margin-top:var(--space-6);font:500 .9375rem/1.4 var(--font-display)}
.contact-line a{border-bottom:1px solid var(--ink)}
.contact-line a:hover{color:var(--ink-2);border-bottom-color:var(--ink-2)}
.sub{margin-top:var(--space-12)}
@media (max-width:880px){
  .block{grid-template-columns:1fr;gap:var(--space-8)}
  .block .text,.block .art{grid-column:auto}
  .block .art{max-width:520px}
}
@media (max-width:520px){ dl.rows div{grid-template-columns:1fr} }

/* ── note form ── */
.note .text{grid-column:span 5}
.note form{grid-column:span 7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8)}
.note .field{display:flex;flex-direction:column;gap:var(--space-2)}
.note .field.wide{grid-column:1 / -1}
.note label{font:500 var(--text-small)/1 var(--font-display);color:var(--ink-2)}
.note label .opt{color:var(--ink-3);font-weight:500}
.vein .block{margin-top:clamp(48px,7vw,88px)}
.vein .block .contact-line{margin-top:var(--space-6)}
.note input,.note textarea{width:100%;border:0;border-bottom:1px solid var(--ink-3);background:transparent;padding:var(--space-2) 0;font:300 1rem/1.5 var(--font-body);color:var(--ink);border-radius:0}
.note textarea{resize:vertical;min-height:6.5em}
.note input,.note textarea{transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease}
.note input:hover,.note textarea:hover{border-bottom-color:var(--ink-2)}
.note input:focus-visible,.note textarea:focus-visible{outline:none;border-bottom-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.note input:user-invalid,.note textarea:user-invalid{border-bottom-color:var(--ink);border-bottom-style:dashed}
.note .actions{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap}
.note button{appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:600 .9375rem/1 var(--font-display);padding:14px 22px;cursor:pointer;border-radius:0;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform 160ms var(--ease-out)}
.note button:hover{background:var(--paper);color:var(--ink)}
.note button:active{transform:scale(0.97)}
.note button:disabled{opacity:.45;cursor:default}
.note .hint{font:italic 300 var(--text-small)/1.4 var(--font-body);color:var(--ink-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fout{display:none;grid-column:1 / -1;margin:0;padding:var(--space-3) 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font:400 var(--text-body)/1.5 var(--font-body)}
.fout:target{display:block}
.fout a{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:880px){ .note .text,.note form{grid-column:auto} }
@media (max-width:520px){ .note form{grid-template-columns:1fr} }

/* ── footer ── */
.foot{border-top:1px solid var(--ink);padding:var(--space-12) 0 var(--space-16);display:grid;grid-template-columns:auto 1fr auto;gap:var(--space-8) var(--space-12);align-items:start}
.foot .emblem{width:120px;height:120px}
.foot .who{font:300 var(--text-body)/1.7 var(--font-body);color:var(--ink-2)}
.foot .who b{display:block;font:600 1.0625rem/1.2 var(--font-display);color:var(--ink);letter-spacing:-.01em;margin-bottom:var(--space-2)}
.foot .who a{border-bottom:1px solid var(--rule)}
.foot .who a:hover{border-bottom-color:var(--ink);color:var(--ink)}
.foot nav{display:grid;gap:var(--space-2);justify-items:start}
.foot nav a{font:500 .9375rem/1.2 var(--font-display);color:var(--ink-2);padding:2px 0}
.foot nav a:hover{color:var(--ink)}
.foot .legal{grid-column:1 / -1;margin-top:var(--space-4);font:500 var(--text-small)/1.4 var(--font-display);color:var(--ink-3)}
@media (max-width:720px){ .foot{grid-template-columns:1fr} .foot nav{grid-column:auto} .foot .emblem{width:96px;height:96px} }

/* ── vein pages ── */
.vein{padding:clamp(40px,7vw,88px) 0 0}
.vein-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-8) var(--space-12)}
.vein-head > *{min-width:0}
.vein-text{grid-column:span 7}
.vein-art{grid-column:span 5;margin:0;align-self:start}
.vein-art img{width:100%;aspect-ratio:1;object-fit:cover}
.back{display:inline-block;margin-bottom:var(--space-8);font:500 var(--text-small)/1 var(--font-display);color:var(--ink-3)}
.back:hover{color:var(--ink)}
.vein-mark{display:flex;align-items:flex-end;margin-bottom:var(--space-8)}
.vein-mark img{height:clamp(96px,12vw,140px);width:auto;max-width:100%;object-fit:contain}
.vein-mark img.tile{height:clamp(96px,12vw,130px)}
.vein-mark img.afna{height:clamp(56px,7vw,80px)}
.vein-mark .wm-text{font-size:clamp(2.5rem,5.5vw,4.25rem)}
.vein-mark .wm-text img{height:.74em;width:auto;vertical-align:-.03em;margin:0 .02em}
.vein .lede{font:italic 400 var(--text-lede)/1.5 var(--font-body);margin-bottom:var(--space-6);max-width:36ch}
.vein .prose{color:var(--ink-2);max-width:62ch}
.links{list-style:none;margin:var(--space-8) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:baseline}
.links .lbl{flex-basis:100%;font:500 var(--text-small)/1 var(--font-display);color:var(--ink-3)}
.links a{font:500 .9375rem/1.2 var(--font-display);border-bottom:1px solid var(--ink);padding-bottom:2px}
.links a:hover{color:var(--ink-2);border-bottom-color:var(--ink-2)}
.links .soon{font:500 .9375rem/1.2 var(--font-display);color:var(--ink-3)}
.vein-more{margin-top:clamp(48px,7vw,88px);padding:clamp(40px,6vw,64px) 0 0;border-top:1px solid var(--rule)}
.vein-more h2{margin:0 0 var(--space-8);font:700 var(--text-h2)/1 var(--font-display);letter-spacing:-.03em}
.pod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-12)}
.pod-grid > *{min-width:0}
.pod-grid img{width:100%;max-width:320px;aspect-ratio:1;object-fit:contain;margin-bottom:var(--space-6)}
.pod-grid.home img{max-width:200px}
.pod-grid .links{margin-top:var(--space-4)}
.pod-grid h3{margin:0 0 var(--space-2);font:600 1.25rem/1.2 var(--font-display);letter-spacing:-.015em}
.pod-grid p{color:var(--ink-2);max-width:44ch}
.issue{margin:0;max-width:420px}
.issue img{width:100%;border:1px solid var(--rule)}
.issue figcaption{margin-top:var(--space-3);font:italic 300 var(--text-small)/1.4 var(--font-body);color:var(--ink-3)}
.vein + .foot,.vein-more + .foot{margin-top:clamp(48px,7vw,88px)}
@media (max-width:880px){
  .vein-head{grid-template-columns:1fr}
  .vein-text,.vein-art{grid-column:auto}
  .vein-art{order:-1;max-width:520px}
  .pod-grid{grid-template-columns:1fr}
}

/* ── sent page ── */
.sent{max-width:52ch;padding-bottom:var(--space-24)}
.sent h1{margin:0 0 .3em -0.03em;font:800 clamp(3rem,9vw,7rem)/0.9 var(--font-display);letter-spacing:-.04em}
.sent p{color:var(--ink-2)}
.sent a{border-bottom:1px solid var(--ink)}