/* torrea — site styles
   Paper, pigment, and a slow dive: the page moves from sunlit paper
   into deep water for the whale piece, then surfaces again. */

:root{
  color-scheme:light;
  --paper:#f6f3ee;          /* Arches cold-press white, warm */
  --paper-2:#eee9e1;
  --mat:#fffdf9;
  --ink:#15212a;
  --ink-soft:#4f5e68;
  --ink-faint:#8a959c;
  --sea:#1e6b95;            /* cerulean from the paintings */
  --sea-soft:#8fc3da;
  --deep:#0b2c42;           /* the dive */
  --deep-2:#0f3a55;
  --line:rgba(21,33,42,.13);
  --shadow:rgba(21,33,42,.22);
  --chop-knock:var(--paper);

  --serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;

  --t-label:.72rem;
  --t-meta:.875rem;
  --t-body:1.0625rem;

  --maxw:1320px;
  --gutter:clamp(20px,4.5vw,64px);
  /* spacing: one gap between sections (split evenly around any rule), one inside them */
  --head-h:84px;
  --gap:clamp(96px,11vw,160px);
  --gap-half:calc(var(--gap) / 2);
  --block:clamp(32px,4.5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* page colours, swapped when the page dives */
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-soft:var(--ink-soft);
  --fg-faint:var(--ink-faint);
  --rule:var(--line);
  --accent:var(--sea);
}
body.is-deep{
  --bg:var(--deep);
  --fg:#eef3f5;
  --fg-soft:#a9c2cf;
  --fg-faint:#6f8fa1;
  --rule:rgba(238,243,245,.14);
  --accent:#8fd0ec;
  --chop-knock:var(--deep);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:clip}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--serif);font-size:var(--t-body);line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  transition:background-color 1.1s var(--ease),color 1.1s var(--ease);
  overflow-x:clip;
}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-size:var(--t-meta);padding:10px 14px;border-radius:2px;transition:top .2s}
.skip:focus{top:16px}

/* ---------- shared type ---------- */
.eyebrow{font-family:var(--sans);font-size:var(--t-label);font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--fg-soft);transition:color 1.1s var(--ease)}
.eyebrow .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);
  vertical-align:middle;margin:0 .9em;transform:translateY(-1px)}
.meta{font-family:var(--sans);font-size:var(--t-meta);color:var(--fg-soft);line-height:1.55}
.meta i{font-family:var(--serif);font-style:italic}
.status{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:var(--t-label);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:pulse 2.6s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent)}
  70%,100%{box-shadow:0 0 0 9px transparent}}
.line-mask{display:block;padding:0 .08em .24em;margin:0 -.08em -.24em}
.js-motion .line-mask{overflow:hidden}
.js-motion .is-landed .line-mask{overflow:visible}
.line-mask > span{display:block}
.char{display:inline-block;will-change:transform}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);
  font-size:var(--t-label);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg);padding:15px 22px;border:1px solid currentColor;border-radius:100px;overflow:hidden;
  isolation:isolate;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--fg);border-radius:inherit;
  transform:translateY(101%);transition:transform .5s var(--ease-out)}
.btn:hover,.btn:focus-visible{color:var(--bg)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn .arrow{width:14px;height:10px;flex:none}
.btn.solid{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.solid::before{background:var(--accent)}
.btn.solid:hover{color:#fff;border-color:var(--accent)}
.text-link{font-family:var(--sans);font-size:var(--t-label);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  padding-bottom:4px;transition:background-size .45s var(--ease-out),color .3s}
.text-link:hover{background-size:0 1px;background-position:100% 100%;color:var(--accent)}

/* ---------- logos ---------- */
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--fg);line-height:1}
.logo svg{display:block;overflow:visible}
.logo .wm{font-family:var(--serif);font-weight:300;font-size:1.6rem;letter-spacing:.08em;
  font-variation-settings:"SOFT" 50,"opsz" 144;transform:translateY(-2px)}
.logo .wm-i{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.55rem;letter-spacing:.01em}
.logo-a .mark{width:40px;height:40px;fill:var(--accent);transition:fill 1.1s var(--ease)}
.logo-b .sig{height:54px;width:auto;fill:var(--fg);transition:fill 1.1s var(--ease)}
.logo-c .chop{width:38px;height:38px;color:var(--accent);fill:var(--chop-knock);stroke:var(--chop-knock);
  transition:color 1.1s var(--ease)}
[data-logo="a"] .logo-b,[data-logo="a"] .logo-c,
[data-logo="b"] .logo-a,[data-logo="b"] .logo-c,
[data-logo="c"] .logo-a,[data-logo="c"] .logo-b{display:none !important}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:40;pointer-events:none;
  transition:transform .6s var(--ease-out)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--head-h)}
.site-head a,.site-head button{pointer-events:auto}
.site-head.is-hidden{transform:translateY(-110%)}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bg);opacity:0;
  border-bottom:1px solid var(--rule);transition:opacity .5s,background-color 1.1s var(--ease)}
.site-head.is-solid::before{opacity:1}
.nav{display:flex;align-items:center;gap:clamp(18px,3vw,36px);font-family:var(--sans);font-size:var(--t-label);
  font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-soft)}
.nav a{position:relative;padding:6px 0;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav a:hover{color:var(--fg)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.nav .pill{color:var(--fg);border:1px solid var(--rule);border-radius:100px;padding:9px 16px;
  display:inline-flex;align-items:center;gap:9px}
.nav .pill::after{display:none}
.nav .pill .status::before{width:6px;height:6px}
@media (max-width:720px){.nav .hide-sm{display:none}}

/* ---------- intro ---------- */
.intro{position:fixed;inset:0;z-index:90;display:none;place-items:center;background:var(--paper);color:var(--ink)}
.play-intro .intro{display:grid}
.intro .stage{display:grid;justify-items:center;gap:18px}
.intro .stage{opacity:0}            /* hidden until the script has set the starting pose, so the finished logo never flashes */
.intro.is-ready .stage{opacity:1}
.intro .wave{position:absolute;left:0;right:0;top:100%;height:9vh;width:100%;fill:var(--paper)}
.intro .i-a{width:min(34vw,190px);height:auto;overflow:visible;fill:var(--sea)}
.intro .i-a .tail{transform-box:fill-box;transform-origin:50% 100%}
.intro .i-b{width:min(64vw,420px);height:auto;fill:var(--ink)}
.intro .i-c{width:min(40vw,190px);height:auto;color:var(--sea);fill:var(--paper);stroke:var(--paper)}
.intro .word{font-family:var(--serif);font-weight:300;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:.12em;
  font-variation-settings:"SOFT" 50}
.intro .skip-intro{position:absolute;bottom:28px;right:28px;font-family:var(--sans);font-size:var(--t-label);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
[data-logo="a"] .intro .i-b,[data-logo="a"] .intro .i-c,
[data-logo="b"] .intro .i-a,[data-logo="b"] .intro .i-c,[data-logo="b"] .intro .word,
[data-logo="c"] .intro .i-a,[data-logo="c"] .intro .i-b,[data-logo="c"] .intro .word{display:none}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(var(--head-h) + clamp(32px,5vw,80px))}
.hero-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,2.5vw,34px) var(--gutter);align-items:end}
.display{grid-column:1 / -1;font-size:clamp(2.9rem,7.4vw,7.6rem);line-height:.94;letter-spacing:-.025em;font-weight:300;
  font-variation-settings:"SOFT" 30,"WONK" 0}
.display em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;color:var(--accent)}
.hero .lede{grid-column:2;font-family:var(--sans);font-size:var(--t-meta);color:var(--fg-soft);max-width:30em;line-height:1.7}
.hero .lede b{color:var(--fg);font-weight:600}
.hero-eyebrow{margin-bottom:clamp(20px,2.5vw,36px)}
.hero-media{position:relative;margin-top:var(--block);transform-origin:50% 0}
.hero-media .frame{max-width:none;padding:clamp(10px,1.3vw,18px)}
.hero-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:14px 28px;
  padding:22px 0 0}
.hero-cap .title{font-size:clamp(1.5rem,2.4vw,2rem)}
/* painting 01: the same outline numeral as 02 and 03, scaled to the caption */
.hero-cap .num{display:inline-block;margin-right:.12em;font-size:1.9em;line-height:.8;font-weight:300;vertical-align:-.12em;
  color:transparent;-webkit-text-stroke:1px var(--fg-faint);font-variation-settings:"SOFT" 0;letter-spacing:-.04em}
.hero-cap .left{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px}
.scroll-cue{font-size:.7rem !important;position:absolute;right:var(--gutter);top:calc(var(--head-h) + clamp(32px,5vw,80px));display:flex;flex-direction:column;
  align-items:center;gap:12px;font-family:var(--sans);font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fg-faint);writing-mode:vertical-rl}
.scroll-cue::after{content:"";width:1px;height:56px;background:linear-gradient(var(--fg-faint),transparent);
  animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:980px){.scroll-cue{display:none}}

/* ---------- frames ---------- */
.frame{position:relative;display:block;line-height:0;background:var(--mat);
  padding:clamp(10px,1.3vw,18px);
  box-shadow:0 1px 2px var(--shadow),0 40px 70px -40px var(--shadow);
  transition:background-color 1.1s var(--ease),box-shadow 1.1s var(--ease)}
button.frame,button.ph{width:100%;border:0;margin:0;font:inherit;color:inherit;text-align:inherit;-webkit-appearance:none;appearance:none}
.frame::after{content:"";position:absolute;inset:0}                 /* catches clicks, not the image */
.frame picture,.frame img{display:block;width:100%;height:auto}
.frame img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;pointer-events:none}
.viewable{cursor:zoom-in}
.viewable:focus-visible{outline-offset:6px}

/* watercolor bleed reveal (mask set only while JS is animating) */
.js-motion .bleed{
  -webkit-mask-image:url(/assets/bleed-1.png),url(/assets/bleed-2.png),url(/assets/bleed-3.png);
          mask-image:url(/assets/bleed-1.png),url(/assets/bleed-2.png),url(/assets/bleed-3.png);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:28% 38%,78% 26%,52% 84%;mask-position:28% 38%,78% 26%,52% 84%;
  -webkit-mask-size:var(--b1,0%) auto,var(--b2,0%) auto,var(--b3,0%) auto;
          mask-size:var(--b1,0%) auto,var(--b2,0%) auto,var(--b3,0%) auto;
}
.js-motion .bleed.is-dry{-webkit-mask-image:none;mask-image:none}

/* ---------- marquee ---------- */
.marquee{position:relative;overflow:hidden;padding-block:clamp(24px,3.5vw,48px);
  border-block:1px solid var(--rule);margin-top:var(--gap-half);white-space:nowrap}
.marquee-track{display:inline-flex;will-change:transform}
.marquee-track span{font-size:clamp(2.2rem,5.4vw,5rem);font-weight:300;font-style:italic;letter-spacing:-.015em;
  font-variation-settings:"SOFT" 100,"WONK" 1;padding-right:.5em;display:inline-flex;align-items:center;gap:.5em}
.marquee-track span::after{content:"";width:.34em;height:.34em;border-radius:48% 52% 46% 54%/55% 45% 55% 45%;
  background:var(--accent);opacity:.85;flex:none}
.marquee-track .hollow{-webkit-text-stroke:1px var(--fg);color:transparent;font-style:normal;
  font-variation-settings:"SOFT" 30}

/* ---------- works ---------- */
.works{padding-top:var(--gap-half)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:var(--block);
  transition:border-color 1.1s var(--ease)}
.section-head .count{font-family:var(--sans);font-size:var(--t-label);letter-spacing:.14em;color:var(--fg-faint);
  font-variant-numeric:tabular-nums}
.work{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--block) var(--gutter);align-items:start}
.work .num{font-family:var(--serif);font-size:clamp(4.5rem,11vw,10rem);line-height:.8;font-weight:300;
  color:transparent;-webkit-text-stroke:1px var(--fg-faint);font-variation-settings:"SOFT" 0;
  letter-spacing:-.04em;transition:-webkit-text-stroke-color 1.1s var(--ease)}
.work .title{font-size:clamp(2.1rem,4.4vw,4rem);line-height:1.02;letter-spacing:-.018em;margin:26px 0 18px;
  font-variation-settings:"SOFT" 40}
.work .title em{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1}
.work .note{font-size:1.14rem;line-height:1.6;color:var(--fg-soft);max-width:26em;margin-top:22px;
  transition:color 1.1s var(--ease)}
.work .actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.work .tomb{position:sticky;top:120px}

.work.tall .tomb{grid-column:1 / span 5;padding-top:var(--block)}
.work.tall .media{grid-column:7 / span 6}

/* the dive */
.deep{position:relative;overflow-x:clip;margin-top:var(--gap);isolation:isolate}
.deep .rays{position:absolute;left:0;right:0;top:calc(var(--gap) * -1);height:110vh;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity 1.6s var(--ease);
  background:
    repeating-conic-gradient(from 172deg at 62% -18%,rgba(143,208,236,.00) 0deg,rgba(143,208,236,.11) 1.6deg,rgba(143,208,236,0) 4.2deg,rgba(143,208,236,0) 7deg);
  -webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
          mask-image:linear-gradient(#000 0%,rgba(0,0,0,.35) 55%,transparent 100%);
  animation:rays 14s ease-in-out infinite alternate}
@keyframes rays{from{transform:translateX(-2%) skewX(-2deg)}to{transform:translateX(2%) skewX(2deg)}}
.deep canvas.snow{position:absolute;left:0;top:calc(var(--gap) * -1);width:100%;height:calc(100% + var(--gap) * 2);z-index:-1;pointer-events:none;opacity:0;
  transition:opacity 1.6s var(--ease)}
body.is-deep .deep .rays,body.is-deep .deep canvas.snow{opacity:1}
.work.wide{grid-template-rows:auto auto}
.work.wide .media{grid-column:1 / -1;max-width:1180px;margin:0 auto;width:100%}
.work.wide .tomb{grid-column:1 / span 12;position:static;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);
  gap:28px var(--gutter);align-items:end}
.work.wide .tomb .title{margin-bottom:0}
body.is-deep .frame{background:#0d3550;box-shadow:0 1px 2px rgba(0,0,0,.4),0 60px 90px -40px rgba(0,0,0,.7)}

/* ---------- up close ---------- */
.closer{padding-top:var(--gap)}
.closer-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:24px var(--gutter);align-items:end;
  margin-bottom:var(--block)}
.closer-head h2{font-size:clamp(2.4rem,5.6vw,5rem);line-height:1;letter-spacing:-.02em;font-variation-settings:"SOFT" 40}
.closer-head h2 em{font-style:italic;color:var(--accent);font-variation-settings:"SOFT" 100,"WONK" 1}
.closer-head p{font-size:1.1rem;color:var(--fg-soft);max-width:28em}
.details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start}
.detail{margin:0}
.detail:nth-child(2){margin-top:clamp(40px,6vw,96px)}
.detail:nth-child(3){margin-top:clamp(16px,2.5vw,36px)}
.detail .ph{position:relative;overflow:hidden;line-height:0;border-radius:2px;background:var(--paper-2)}
.detail .ph img{width:100%;height:auto;display:block;transform:scale(1.12);transition:transform 1.4s var(--ease-out);
  -webkit-user-drag:none;user-select:none;pointer-events:none}
.detail:hover .ph img{transform:scale(1.18)}
.detail figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:14px;font-family:var(--sans);
  font-size:var(--t-meta);color:var(--fg-soft)}
.detail figcaption b{font-family:var(--serif);font-weight:400;font-size:1.06rem;color:var(--fg)}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px var(--gutter);align-items:center;
  padding-block:var(--gap) var(--gap-half)}
.about .frame{max-width:440px;transform:rotate(-1.4deg)}
.about h2{font-size:clamp(2.6rem,6vw,5.2rem);line-height:1;letter-spacing:-.02em;margin:18px 0 28px;
  font-variation-settings:"SOFT" 50}
.about p{max-width:33em;color:var(--fg-soft);font-size:1.12rem;line-height:1.75}
.about p + p{margin-top:1.1em}
.about p b{font-weight:400;color:var(--fg);font-style:italic}
.signoff{margin-top:34px;width:min(260px,60vw)}
.signoff svg{display:block;width:100%;height:auto;fill:var(--fg)}

/* ---------- prints ---------- */
.prints{position:relative;padding-block:var(--gap-half);border-top:1px solid var(--rule);text-align:center;overflow:hidden}
.prints .big{font-size:clamp(2.8rem,8vw,7.4rem);line-height:.98;letter-spacing:-.028em;max-width:12ch;margin:26px auto 30px;
  font-variation-settings:"SOFT" 40}
.prints .big em{font-style:italic;color:var(--accent);font-variation-settings:"SOFT" 100,"WONK" 1}
.prints p.sub{font-size:1.14rem;color:var(--fg-soft);max-width:31em;margin:0 auto 40px}
.prints .fine{font-family:var(--sans);font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-faint);margin-top:18px}
.prints .blot{position:absolute;z-index:-1;width:46vw;max-width:620px;aspect-ratio:1;opacity:.13;
  background:var(--sea);-webkit-mask:url(/assets/bleed-2.png) center/contain no-repeat;mask:url(/assets/bleed-2.png) center/contain no-repeat}
.prints .blot.one{left:-10vw;top:8%}
.prints .blot.two{right:-12vw;bottom:-6%;-webkit-mask-image:url(/assets/bleed-3.png);mask-image:url(/assets/bleed-3.png);opacity:.09}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:var(--gap-half) 0 40px;font-family:var(--sans);
  font-size:var(--t-meta);color:var(--fg-soft)}
footer .big-logo{display:flex;justify-content:center;margin-bottom:var(--block)}
footer .big-logo .logo-a svg{width:clamp(90px,14vw,150px);height:auto}
footer .big-logo .logo-a .wm{font-size:clamp(3rem,11vw,9rem);letter-spacing:.06em}
footer .big-logo .logo-a{gap:clamp(10px,2vw,24px)}
footer .big-logo .logo-b svg{width:min(560px,80vw);height:auto}
footer .big-logo .logo-c .chop{width:clamp(110px,15vw,170px);height:auto}
footer .big-logo .logo-c .wm-i{font-size:clamp(3rem,10vw,8rem)}
footer .big-logo .logo-c{gap:clamp(16px,3vw,40px)}
footer .fine{font-size:var(--t-label);letter-spacing:.06em;color:var(--fg-faint);text-align:center;text-wrap:balance}
footer .base{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px 32px;
  border-top:1px solid var(--rule);margin-top:20px;padding-top:20px}
footer .base nav{justify-self:end}
footer nav{display:flex;gap:24px}
footer nav a:hover{color:var(--fg)}
footer .credit a{display:inline-flex;align-items:center;gap:12px;font-size:12px;opacity:.8;transition:opacity .2s,color .2s}
footer .credit a:hover{opacity:1;color:var(--fg)}
footer .credit svg{height:20px;width:auto;display:block;overflow:visible}
@media (max-width:720px){footer .base{grid-template-columns:1fr;justify-items:center;text-align:center}footer .base nav{justify-self:center}footer .credit{order:1}}

/* ---------- viewer (lightbox) ---------- */
.viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(8,24,36,.97);color:#eef3f5;overflow:hidden}
.viewer::backdrop{background:transparent}
.viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.viewer .v-top,.viewer .v-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px var(--gutter);font-family:var(--sans);font-size:var(--t-label);letter-spacing:.2em;text-transform:uppercase;color:#a9c2cf}
.viewer .v-stage{position:relative;display:grid;place-items:center;padding:0 var(--gutter);min-height:0}
.viewer .v-stage img{max-width:100%;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);width:auto;height:auto;object-fit:contain;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7);-webkit-user-drag:none;user-select:none;cursor:none}
.viewer .v-title{font-family:var(--serif);font-size:1.5rem;letter-spacing:0;text-transform:none;color:#fff}
.viewer .v-bottom .meta{color:#a9c2cf;letter-spacing:0;text-transform:none}
.viewer .v-close,.viewer .v-nav button{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid rgba(238,243,245,.25);border-radius:50%;transition:background .3s,border-color .3s}
.viewer .v-close:hover,.viewer .v-nav button:hover{background:rgba(238,243,245,.1);border-color:rgba(238,243,245,.6)}
.viewer .v-nav{display:flex;gap:10px}
.viewer .v-count{font-variant-numeric:tabular-nums}
.loupe{position:fixed;z-index:3;width:230px;height:230px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(255,255,255,.7);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 0 0 6px rgba(255,255,255,.08);
  background-repeat:no-repeat;opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .25s,transform .35s var(--ease-out)}
.loupe.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media (hover:none),(pointer:coarse){.loupe{display:none}.viewer .v-stage img{cursor:auto}}
.viewer .hint{font-family:var(--sans);font-size:var(--t-label);letter-spacing:.14em;color:#6f8fa1}
@media (hover:none),(pointer:coarse){.viewer .hint{display:none}}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:10px;height:10px;margin:-5px 0 0 -5px;
  border-radius:50%;background:var(--accent);opacity:0;transition:opacity .3s,background-color 1.1s var(--ease)}
.cursor .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:transform .45s var(--ease-out),opacity .3s}
.cursor.is-view .lbl{transform:translate(-50%,-50%) scale(1);opacity:1}
.has-cursor .cursor{opacity:1}

/* ---------- logo review switcher (?logo=a|b|c) ---------- */
.logo-switch{position:fixed;left:50%;bottom:18px;z-index:85;transform:translateX(-50%);display:none;align-items:center;gap:4px;
  padding:5px;border-radius:100px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.logo-switch.on{display:flex}
.logo-switch span{padding:0 10px 0 12px;opacity:.7}
.logo-switch button{padding:8px 14px;border-radius:100px;letter-spacing:.14em;text-transform:uppercase}
.logo-switch button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero-top{grid-template-columns:1fr}
  .hero .lede{grid-column:1}
  .work.tall .tomb,.work.tall .media{grid-column:1 / -1}
  .work .tomb{position:static}
  .work.tall .tomb{padding-top:0;order:2}
  .work.wide .tomb{grid-template-columns:1fr}
  .closer-head{grid-template-columns:1fr}
  .details{grid-template-columns:1fr 1fr}
  .detail:nth-child(2){margin-top:60px}
  .detail:nth-child(3){grid-column:1 / -1;max-width:70%;margin:0 auto}
  .about{grid-template-columns:1fr}
  .about .frame{max-width:340px}
}
@media (max-width:560px){
  :root{--head-h:70px}
  .logo .wm{font-size:1.35rem}
  .logo-a .mark{width:34px;height:34px}
  .logo-b .sig{height:44px}
  .nav{gap:16px}
  .details{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);
    padding:0 var(--gutter) 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .details::-webkit-scrollbar{display:none}
  .detail{flex:0 0 76%;scroll-snap-align:center}
  .detail:nth-child(2),.detail:nth-child(3){margin-top:0;max-width:none}

  .viewer .v-bottom{flex-direction:column;align-items:flex-start}
}

/* touch screens: 44px+ tap areas without changing how links look */
@media (pointer:coarse){
  .text-link,.nav a,footer nav a{position:relative}
  .text-link::after,.nav a::before,footer nav a::after{content:"";position:absolute;inset:-12px -8px}
  .nav .pill::before{inset:-4px -4px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .detail .ph img{transform:none}
}