:root{
  color-scheme:light dark;
  --ink:#0a0a09;
  --paper:#ebe7dc;
  --paper-2:#d8d2c3;
  --signal:#030303;
  --signal-ink:#ecece7;
  --soft:#99978f;
  --dim:#6c6a63;
  --green:#294b36;
  --violet:#7254a6;
  --red:#9c3328;
  --hair:rgba(236,236,231,.45);
  --line:rgba(10,10,9,.28);
  --pad:clamp(18px,3vw,44px);
  --serif:"Iowan Old Style","Baskerville","Times New Roman",serif;
  --mono:"SFMono-Regular","SF Mono","Roboto Mono","Menlo","Consolas",monospace;
  --sans:"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--paper)}
body{min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--mono);text-rendering:optimizeLegibility}
a,button{color:inherit;font:inherit}
button{border:0}
a{text-decoration:none}
::selection{background:var(--violet);color:var(--paper)}

.scroll-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:2px;pointer-events:none}
.scroll-progress i{display:block;width:0;height:100%;background:var(--violet)}

.eyebrow{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.muted{margin-top:5px;color:#686862;font-size:7px;line-height:1.45}
.timeline{position:relative;height:17px;border-bottom:1px solid var(--hair);background:repeating-linear-gradient(90deg,var(--hair) 0 1px,transparent 1px 8px) bottom/100% 5px no-repeat}
.timeline i{position:absolute;top:1px;left:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid var(--signal-ink);transition:left .12s linear}

/* archive system */
.archive{position:relative;z-index:1;background:var(--paper);color:var(--ink);min-height:100vh}
.archive-nav{position:sticky;z-index:20;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:58px;padding:0 var(--pad);border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(12px);font-size:9px;letter-spacing:.12em}
.archive-brand{justify-self:start;font-weight:600}.archive-brand span{margin-right:8px}.archive-nav nav{display:flex;gap:clamp(15px,3vw,35px);font-family:var(--serif);font-size:17px}.archive-nav nav a,.archive-nav nav button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;transition:transform .2s,color .2s}.archive-nav nav a:hover,.archive-nav nav a:focus-visible,.archive-nav nav button:hover,.archive-nav nav button:focus-visible{color:var(--violet);transform:translateY(-2px);outline:0}.archive-nav button,.archive-nav .archive-return{justify-self:end;background:none;cursor:pointer;font-size:8px;letter-spacing:.12em;border-bottom:1px solid var(--line);padding-bottom:3px}
.paper-section{background-color:var(--paper);background-image:radial-gradient(rgba(10,10,9,.08) .55px,transparent .7px);background-size:5px 5px}
.section-code{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:8px;letter-spacing:.14em;color:var(--dim)}
/* scroll-margin keeps the sticky archive nav (58px) from parking on top of a
   section heading when an in-page anchor jumps to it. */
.chapter,.index-section,.about-section{position:relative;min-height:100vh;padding:clamp(76px,10vw,145px) var(--pad);scroll-margin-top:72px}
.index-section{min-height:calc(100vh - 58px)}
.index-section{isolation:isolate}
.index-section>:not(.portfolio-pine):not(.portfolio-glass){position:relative;z-index:3}
.portfolio-pine{--pine-y:88%;--pine-opacity:1;--pine-brightness:1;--pine-saturation:1;position:fixed;z-index:2;right:-2vw;top:58px;width:min(62vw,900px);height:calc(100vh - 58px);pointer-events:none;opacity:0;visibility:hidden;transform:translate3d(0,var(--pine-y),0);will-change:transform;transition:opacity .42s ease,transform .55s cubic-bezier(.2,.75,.2,1)}
.portfolio-pine.is-visible{opacity:var(--pine-opacity);visibility:visible}
.portfolio-pine.is-crossing-about{z-index:4;opacity:1}
.portfolio-pine.is-covering-next{z-index:2}
.portfolio-pine canvas{display:block;width:100%;height:100%;filter:brightness(var(--pine-brightness)) saturate(var(--pine-saturation));transition:filter .48s ease}
.portfolio-pine [data-pine-status]{position:absolute;right:18px;bottom:14px;color:transparent;font-size:7px;letter-spacing:.14em}
.portfolio-pine[data-pine-state="error"] [data-pine-status]{color:rgba(242,240,233,.52)}
.portfolio-glass{--glass-y:100%;position:fixed;z-index:1;inset:58px 0 0;pointer-events:none;visibility:hidden;transform:translate3d(0,var(--glass-y),0);background:rgba(4,6,5,.58);border-top:1px solid rgba(238,245,235,.11);box-shadow:0 -24px 72px rgba(0,0,0,.3);will-change:transform}
.portfolio-glass.is-active{visibility:visible}
@media(max-width:900px){.portfolio-pine{right:-8vw;width:86vw}.portfolio-pine.is-visible{opacity:1}}
@media(max-width:600px){.portfolio-pine{right:-20vw;width:116vw}.portfolio-pine.is-visible{opacity:1}}
@media(prefers-reduced-motion:reduce){.portfolio-pine,.portfolio-glass{transition:none}}

/* ---------------------------------------------------------------------------
   DARK GROUND for the archive. The reference stack reads the way it does partly
   because it sits on black: the slab edges, the sheen under the bottom card and
   the depth of the recede all disappear against paper. The panels the cards
   open keep their own paper/ink identities, so this only affects the shell.
   To go back to the paper archive, delete this block and restore
   `class="index-section paper-section"` on #index in index.html.
--------------------------------------------------------------------------- */
.archive{background:#080807;color:var(--paper)}
.archive-nav{
  border-bottom-color:rgba(235,231,220,.14);
  background:color-mix(in srgb,#080807 88%,transparent);
}
.index-section{
  background:#080807;
  background-image:radial-gradient(130% 70% at 50% -10%,rgba(255,255,255,.055),transparent 62%);
}
.index-section .section-code{border-bottom-color:rgba(235,231,220,.2);color:rgba(235,231,220,.45)}
.index-section .index-heading h2{color:var(--paper)}
.index-section .index-heading>p:not(.vertical-note){color:rgba(235,231,220,.62)}
.index-section .vertical-note{color:rgba(235,231,220,.34)}
.archive-foot{color:rgba(235,231,220,.42)}
.archive-foot a{border-bottom-color:rgba(235,231,220,.26)}
.archive-brand{color:var(--paper)}
.index-heading{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(230px,.6fr);gap:8vw;align-items:end;padding:clamp(55px,8vw,110px) 8vw 5vw}
.index-heading h2,.chapter-title h2,.ritual-copy h2,.about-grid h2{font-family:var(--serif);font-weight:400;font-size:clamp(48px,8vw,124px);line-height:.82;letter-spacing:-.06em}
.index-heading>p:not(.vertical-note){max-width:380px;font-family:var(--serif);font-size:clamp(14px,1.45vw,20px);line-height:1.7}
.vertical-note{position:absolute;left:0;top:60px;writing-mode:vertical-rl;font-size:8px;letter-spacing:.26em;color:var(--dim)}

/* Tilt, spine height and lift live on :root rather than on .category-stack
   because the hover portal is a clone parked in <body>, outside the stack — it
   has to inherit the same numbers or its label lands at a different angle than
   the card it grew out of. Purely geometric vars (width/height/stride) can stay
   on the stack: the portal gets those from JS as explicit pixels. */
/* The live tilt angle. Registering it makes it animatable, which lets the card
   rotate and the label's squash correction be derived from the SAME number on
   every frame. Transitioning the two independently does not work: the card's
   angle interpolates linearly while the correction it needs is 1/cos(angle),
   so the two only agree at the endpoints — measured a 26% vertical stretch on
   the title around a third of the way through the 1.8s pull-out. */
/* ---------------------------------------------------------------------------
   The category stack, built as a real perspective scene rather than six
   identically-tilted planes.

   Every card is a horizontal slab hanging off its own title bar, and the
   viewpoint sits on a focal line (the middle of the viewport). A slab level
   with that line is seen edge-on; the further a slab is from it the more of
   its face opens up — which is simply what a perspective camera does to a
   stack of shelves, and is what gives the reference its depth.

   Two consequences drive the markup:
   - the far edge of every slab points TOWARDS the focal line, so slabs above
     it recede downwards and slabs below it recede upwards. The title bar is
     always on the near edge, which is why it reads at the top of the upper
     cards and at the bottom of the lower ones.
   - the title bar is NOT part of the tilted plane. It is an untransformed
     child, so it stays square to the screen and stays legible even when its
     slab has gone almost edge-on. (The previous build painted the label onto
     the card face and cancelled the squash with scaleY, which could never
     survive a near-90° tilt.)
--------------------------------------------------------------------------- */
@property --slab-tilt{syntax:'<angle>';inherits:true;initial-value:70deg}

.category-stack{
  position:relative;
  padding:0 8vw;
  /* a short focal length: the difference between a slab at the focal line and
     one at the ends has to be dramatic, or the whole effect flattens out */
  perspective:1100px;
  /* origin X sits on the middle of the CARDS, not of this container — the cards
     are narrower than the stack, and centring the viewpoint on the container
     sheared every slab off to one side */
  perspective-origin:calc(var(--card-w) / 2) var(--focal,50%);
  --card-w:min(760px,58%);
  /* The projected depth of a fully-open slab has to fit inside one stride
     minus the title bar, or an open slab reaches over its neighbour's bar:
     165 * cos(46deg) is about 115, against 190 - 44 = 146 of room. */
  --card-h:112px;      /* a restrained photographic glimpse, not a poster */
  --card-stride:142px; /* air between the smaller title bars */
  --label-h:44px;
  --slab:11px;         /* how thick the card reads */
  height:calc(var(--card-stride) * 5 + var(--label-h) + 150px);
}
/* a soft sheen on the ground under the bottom slab */
.category-stack::after{
  content:'';
  position:absolute;
  left:0;
  width:var(--card-w);
  bottom:10px;
  height:120px;
  background:radial-gradient(60% 100% at 50% 0%,rgba(255,255,255,.09),transparent 72%);
  pointer-events:none;
}

.category-card{
  position:absolute;
  left:0;
  width:var(--card-w);
  height:var(--label-h);
  padding:0;
  border:0;
  background:none;
  font:inherit;
  text-align:left;
  color:#f2f0e9;
  cursor:pointer;
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.33,1.02,.4,1),filter .4s;
}
.category-card:focus-visible{outline:2px solid rgba(242,240,231,.85);outline-offset:4px}

/* cumulative stride: top(n) = n * stride */
.category-card:nth-child(1){top:0}
.category-card:nth-child(2){top:var(--card-stride)}
.category-card:nth-child(3){top:calc(var(--card-stride) * 2)}
.category-card:nth-child(4){top:calc(var(--card-stride) * 3)}
.category-card:nth-child(5){top:calc(var(--card-stride) * 4)}
.category-card:nth-child(6){top:calc(var(--card-stride) * 5)}

.category-card__slab{
  position:absolute;
  left:0;
  right:0;
  height:var(--card-h);
  transform-style:preserve-3d;
  transition:transform .4s cubic-bezier(.33,1.02,.4,1);
}
/* above the focal line: the slab hangs below its bar and recedes downwards */
.category-card__slab{top:100%;transform-origin:50% 0%;transform:rotateX(calc(var(--slab-tilt) * -1))}
/* below it: the slab rises above its bar and recedes upwards */
.category-card.is-below .category-card__slab{
  top:auto;
  bottom:100%;
  transform-origin:50% 100%;
  transform:rotateX(var(--slab-tilt));
}

.category-card__face{
  position:absolute;
  inset:0;
  background-color:var(--tone);
  background-size:cover;
  background-position:center;
  box-shadow:inset 0 0 90px rgba(0,0,0,.45);
  filter:saturate(.72) brightness(.78);
}
.category-card--objects .category-card__face{background-image:linear-gradient(90deg,rgba(41,75,54,.22),rgba(10,10,9,.58)),url("assets/portfolio/launch/new-wave/column-01.jpg")}
.category-card--spaces .category-card__face{background-image:linear-gradient(90deg,rgba(60,74,99,.2),rgba(10,10,9,.58)),url("assets/portfolio/launch/new-wave/column-02.jpg")}
.category-card--rituals .category-card__face{background-image:linear-gradient(90deg,rgba(156,51,40,.2),rgba(10,10,9,.58)),url("assets/portfolio/launch/new-wave/column-03.jpg")}
.category-card--drawn .category-card__face{background-image:linear-gradient(90deg,rgba(88,66,121,.2),rgba(10,10,9,.58)),url("assets/portfolio/launch/new-wave/column-04.jpg")}
.category-card--motion .category-card__face{background-image:linear-gradient(90deg,rgba(35,35,31,.14),rgba(10,10,9,.58)),url("assets/portfolio/launch/new-wave/column-05.jpg")}
.category-card--about .category-card__face{background-image:linear-gradient(90deg,rgba(92,70,50,.3),rgba(10,10,9,.82)),url("assets/about/alice-portrait-about.jpg")}
/* the slab's thickness: a strip standing perpendicular to the face along its
   near edge, so the card reads as an object with mass instead of a decal */
.category-card__edge{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--slab);
  transform-origin:50% 0%;
  transform:rotateX(90deg);
  background-color:color-mix(in srgb,var(--tone) 72%,#ffffff);
  box-shadow:0 12px 26px -6px rgba(0,0,0,.75);
}
.category-card.is-below .category-card__edge{
  top:auto;
  bottom:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
}

.category-card__glyph{
  position:absolute;
  right:26px;
  bottom:18px;
  font-family:var(--serif);
  font-size:64px;
  line-height:1;
  opacity:.26;
}

/* the title bar — square to the screen, never tilted */
.category-card__label{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:var(--label-h);
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 18px;
  background-color:color-mix(in srgb,var(--tone) 58%,#0a0a09);
  box-shadow:0 2px 16px rgba(0,0,0,.5);
}
.category-card__label b{
  font-family:var(--sans,inherit);
  font-size:clamp(13px,1.35vw,17px);
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.category-card__label span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  opacity:.66;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.category-card__label::after{content:"OPEN ↗";margin-left:auto;font-family:var(--mono);font-size:8px;letter-spacing:.12em;opacity:.62}

.category-card--objects{--tone:#294b36}
.category-card--spaces{--tone:#3c4a63}
.category-card--rituals{--tone:#9c3328}
.category-card--drawn{--tone:#584279}
.category-card--motion{--tone:#23231f}
.category-card--about{--tone:#5c4632}

@media (hover:hover) and (pointer:fine){
  .category-stack .category-card:hover,
  .category-stack .category-card:focus-visible{
    transform:translateZ(34px);
    filter:brightness(1.1);
  }
}

/* ---- the pulled-out card ---- */
.category-card-portal-backdrop{
  position:fixed;
  inset:0;
  z-index:40;
  background:rgba(10,10,9,.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,.77,.21,1);
}
.category-card-portal-backdrop.is-visible{opacity:1;pointer-events:auto}

.category-card-portal{
  position:fixed;
  z-index:50;
  margin:0;
  height:auto;
  /* transparent at rest so the first frame is only the slab + bar, exactly the
     card it grew out of; the solid fill arrives as it opens */
  background-color:transparent;
  --close-ms:.5s;
  --open-ms:1.8s;
  --close-ease:cubic-bezier(.4,0,.2,1);
  --open-ease:cubic-bezier(.33,1.15,.4,1);
  transition:
    top var(--close-ms) var(--close-ease),
    left var(--close-ms) var(--close-ease),
    width var(--close-ms) var(--close-ease),
    height var(--close-ms) var(--close-ease),
    background-color var(--close-ms) var(--close-ease),
    box-shadow var(--close-ms) var(--close-ease);
}
.category-card-portal.is-open{
  background-color:var(--tone);
  box-shadow:0 40px 110px rgba(0,0,0,.55);
  transition:
    top var(--open-ms) var(--open-ease),
    left var(--open-ms) var(--open-ease),
    width var(--open-ms) var(--open-ease),
    height var(--open-ms) var(--open-ease),
    background-color var(--open-ms) var(--open-ease),
    box-shadow var(--open-ms) var(--open-ease);
}
/* the slab lies down into the frame as it opens, then hands over to the panel */
.category-card-portal .category-card__slab{transition:opacity .35s ease,transform var(--close-ms) var(--close-ease)}
.category-card-portal.is-open .category-card__slab{opacity:0;transform:rotateX(0deg)}
.category-card-portal .category-card__label{transition:opacity .4s}
.category-card-portal.is-open .category-card__label{
  background-color:transparent;
  box-shadow:none;
  justify-content:flex-start;
  padding:0 34px;
}
.category-card-portal.is-open .category-card__label b{font-size:clamp(22px,3vw,38px)}
.category-card-portal.is-open .category-card__label span{font-size:12px;letter-spacing:.2em;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .category-card,.category-card__slab,.category-card-portal,.category-card-portal *,
  .category-card-portal-backdrop{transition:none!important}
}

/* ---- the panels the cards open ---- */
/* Parked here at rest. portfolio.js MOVES the real node into the opened card
   (never clones it), so ids stay unique and every listener wired elsewhere in
   this file keeps working. */
.card-panels{display:none}
.card-panel{
  position:absolute;
  inset:0;
  margin:0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  /* keep a flick at the end of the panel from scrolling the page behind it */
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:clamp(30px,4vw,58px) clamp(22px,3.4vw,52px) clamp(40px,5vw,70px);
  opacity:0;
  transition:opacity .4s ease;
}
/* once the panel is in, clip it to the frame (the slab has faded out by now,
   so losing preserve-3d here costs nothing) */
.category-card-portal.is-mounted{overflow:hidden}
.category-card-portal.is-mounted .card-panel{opacity:1}
/* once the real content is in, the card's own spine label would just repeat
   the panel's heading */
.category-card-portal.is-mounted .category-card__label,
.category-card-portal.is-mounted .category-card__glyph{opacity:0;pointer-events:none;transition:opacity .3s}
.card-panel>.section-code:first-child{margin-top:0}
/* The panel content was written to fill a full-bleed page section. Inside a
   card it needs to come down a couple of steps — otherwise a single heading
   eats the whole frame and the generous section padding wastes most of it. */
.card-panel .about-grid h2,
.card-panel .chapter-title h2,
.card-panel .ritual-copy h2,
.card-panel .photo-archive__head h2,
.card-panel .motion-feature__copy h3{font-size:clamp(32px,4.2vw,62px)}
.card-panel .about-grid{padding:34px 0 6vw;gap:5vw}
.card-panel .ritual-layout{padding:30px 0 5vw;gap:4vw}
.card-panel .chapter-title{padding-top:0;margin-top:26px}
.card-panel .chapter-glyph{font-size:clamp(70px,9vw,130px)}
.card-panel .specimen>b{font-size:72px}
.card-panel .object-stills,
.card-panel .quiet-pair{margin-top:46px}
.card-panel .projects-run span{font-size:clamp(38px,6vw,72px)}
.card-panel .about-symbols span{font-size:clamp(26px,4vw,54px)}
.card-panel .kakejiku{margin-bottom:40px}

.card-close{
  position:absolute;
  z-index:2;
  top:14px;
  right:16px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  /* a dark pill rather than currentColor: the panels behind it run from paper
     to near-black, and an outline-only button disappeared on the light ones */
  border:1px solid rgba(242,240,231,.35);
  border-radius:50%;
  background:rgba(10,10,9,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:#f2f0e9;
  font-family:var(--mono);
  font-size:15px;
  line-height:1;
  cursor:pointer;
  opacity:0;
  transition:opacity .3s,background .25s,transform .25s;
}
.category-card-portal.is-mounted .card-close{opacity:1}
.card-close:hover,.card-close:focus-visible{background:#0a0a09;transform:rotate(90deg);outline:0}

/* the archive page itself must not scroll behind an open card */
body.card-open{overflow:hidden}

.archive-foot{display:flex;justify-content:space-between;padding:60px 8vw 0;font-size:8px;letter-spacing:.11em;color:var(--dim)}
.archive-foot a{color:inherit;border-bottom:1px solid var(--line);padding-bottom:2px}


/* photo block grid — small squares, hover enlarges to reveal one photo */
.photo-grid-section--horse{position:relative;z-index:3;height:100vh;min-height:520px;overflow:hidden;background:rgba(6,7,6,.58);box-shadow:0 -28px 90px rgba(0,0,0,.34);isolation:isolate}
.photo-grid-section--horse::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(20,25,21,.38),rgba(4,5,4,.8));backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18);pointer-events:none}
.photo-grid-section--horse #c{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block}
.photo-grid-section__intro{position:absolute;z-index:3;left:clamp(22px,5vw,76px);top:clamp(36px,8vh,90px);width:min(410px,36vw);color:var(--paper);pointer-events:none}
.photo-grid-section__intro p{margin:0 0 18px;font-family:var(--mono);font-size:7px;letter-spacing:.16em;color:rgba(240,241,232,.55)}
.photo-grid-section__intro h2{margin:0;font-family:var(--serif);font-size:clamp(42px,5vw,76px);font-weight:400;line-height:.88;letter-spacing:-.045em}
.photo-grid-section__intro button{pointer-events:auto;margin-top:25px;padding:11px 14px;border:1px solid rgba(240,241,232,.38);background:rgba(9,9,8,.56);color:var(--paper);font-family:var(--mono);font-size:8px;letter-spacing:.14em;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.photo-grid-section__intro button:hover,.photo-grid-section__intro button:focus-visible{background:var(--paper);color:var(--ink);transform:translateY(-2px);outline:0}
.photo-grid-section__hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;width:max-content;margin:0;font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:rgba(240,241,232,.72);pointer-events:none}

/* Single reveal window. The 900 particles are hit-tested on the canvas (nearest
   point within a snap radius), so only ONE DOM node exists — it pins in place
   while viewed instead of galloping away. JS sets its position + tile size. */
.horse-reveal{position:absolute;left:0;top:0;width:0;height:0;z-index:4;pointer-events:none;transform:translate3d(-9999px,-9999px,0)}
.horse-reveal__media{position:absolute;left:0;top:0;display:block;background-size:cover;background-position:center;overflow:hidden;transform:scale(.5);transform-origin:50% 50%;opacity:0;box-shadow:0 24px 64px rgba(0,0,0,0);transition:transform .6s cubic-bezier(.7,0,.3,1),opacity .45s cubic-bezier(.7,0,.3,1),box-shadow .6s;will-change:transform,opacity}
.horse-reveal.is-on .horse-reveal__media{transform:scale(1);opacity:1;box-shadow:0 24px 64px rgba(0,0,0,.6)}
.horse-reveal__cap{position:absolute;left:0;right:0;bottom:0;padding:7px 9px;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);color:#f2f0e9;font-family:var(--mono);font-size:9px;letter-spacing:.05em;opacity:0;transition:opacity .3s .12s}
.horse-reveal.is-on .horse-reveal__cap{opacity:1}
.photo-grid-section--horse:focus-visible{outline:2px solid rgba(120,191,255,.7);outline-offset:-6px}
.horse-reveal-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-width:700px){
  .photo-grid-section--horse{height:92vh;min-height:680px}
  .photo-grid-section__intro{left:18px;top:32px;width:calc(100% - 36px)}
  .photo-grid-section__intro p{margin-bottom:11px;font-size:6px}
  .photo-grid-section__intro h2{max-width:320px;font-size:clamp(38px,12vw,54px)}
  .photo-grid-section__intro button{margin-top:16px;padding:10px 11px;font-size:7px}
  .photo-grid-section__hint{bottom:20px;max-width:calc(100% - 36px);white-space:normal;text-align:center;font-size:6px;line-height:1.6}
}

/* --------------------------------------------------------------------------
   SELECTED WORK / compact Safari window

   Five categories share one flat preview surface. The browser chrome carries
   the navigation metaphor; photographs stay square to the viewer.
---------------------------------------------------------------------------- */
.index-card-view .category-stack[data-work-layout="safari"]{
  position:relative;
  display:block;
  width:min(820px,64vw);
  height:clamp(320px,40vh,420px);
  margin:0 auto;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(242,240,233,.18);
  border-radius:8px;
  background:#171816;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  perspective:none;
  isolation:isolate;
}
.index-card-view .category-stack[data-work-layout="safari"]::before,
.category-card-portal--safari::before{
  content:"";
  position:absolute;
  z-index:20;
  inset:0 0 auto;
  height:30px;
  border-bottom:1px solid rgba(242,240,233,.11);
  background:linear-gradient(180deg,rgba(48,49,45,.98),rgba(33,34,31,.98));
  pointer-events:none;
}
.index-card-view .category-stack[data-work-layout="safari"]::after,
.category-card-portal--safari::after{
  content:"";
  position:absolute;
  z-index:22;
  left:12px;
  top:12px;
  width:6.5px;
  height:6.5px;
  border-radius:50%;
  background:#ff6258;
  box-shadow:11px 0 #ffbd2e,22px 0 #28c840;
  pointer-events:none;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card{
  --tab-index:0;
  position:absolute;
  inset:0;
  top:0!important;
  left:0;
  z-index:auto!important;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  transform:none!important;
  transform-style:flat;
  pointer-events:none;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card:nth-child(2){--tab-index:1}
.index-card-view .category-stack[data-work-layout="safari"] .category-card:nth-child(3){--tab-index:2}
.index-card-view .category-stack[data-work-layout="safari"] .category-card:nth-child(4){--tab-index:3}
.index-card-view .category-stack[data-work-layout="safari"] .category-card:nth-child(5){--tab-index:4}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview{pointer-events:none}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__slab{
  position:absolute;
  inset:30px 0 0;
  top:30px;
  width:100%;
  height:calc(100% - 30px);
  opacity:0;
  transform:none!important;
  transform-style:flat;
  transition:opacity .28s ease;
  pointer-events:none;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview .category-card__slab{opacity:1;pointer-events:auto}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__face{
  inset:0;
  border:0;
  border-radius:0!important;
  background-position:center;
  filter:saturate(.86) brightness(.92) contrast(1.02);
  box-shadow:none;
  transform:scale(1.001)!important;
  transition:filter .35s ease,transform .55s cubic-bezier(.2,.75,.2,1);
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__face::after{
  background:linear-gradient(180deg,transparent 44%,rgba(5,5,4,.58));
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__edge,
.index-card-view .category-stack[data-work-layout="safari"] .category-card__glyph{display:none}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label{
  position:absolute;
  z-index:24;
  left:calc(58px + var(--tab-index) * ((100% - 68px) / 5));
  right:auto;
  top:4px;
  width:calc((100% - 68px) / 5);
  height:23px;
  justify-content:center;
  align-items:center;
  gap:0;
  padding:0 9px;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:8px 8px 4px 4px!important;
  background:transparent;
  box-shadow:none;
  color:rgba(242,240,233,.62);
  backdrop-filter:none;
  pointer-events:auto;
  transition:background .22s,color .22s,border-color .22s;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview .category-card__label{
  border-color:rgba(255,255,255,.09);
  background:rgba(7,8,7,.62);
  color:#f2f0e9;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label b{
  overflow:hidden;
  font-family:var(--sans);
  font-size:clamp(8px,.72vw,10px);
  font-weight:600;
  letter-spacing:.07em;
  text-overflow:ellipsis;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label span,
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label::before,
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label::after{display:none}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview::after{
  content:"OPEN CASE ↗";
  position:absolute;
  z-index:12;
  right:18px;
  bottom:16px;
  padding:9px 11px;
  border:1px solid rgba(242,240,233,.28);
  border-radius:999px;
  background:rgba(8,9,8,.52);
  color:#f2f0e9;
  font:8px/1 var(--mono);
  letter-spacing:.12em;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine){
  .index-card-view .category-stack[data-work-layout="safari"] .category-card:hover,
  .index-card-view .category-stack[data-work-layout="safari"] .category-card:focus-visible{transform:none!important;box-shadow:none;filter:none}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview:hover .category-card__face,
  .index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview:focus-visible .category-card__face{filter:saturate(1) brightness(1);transform:scale(1.001)!important}
}
.safari-window-hint{
  display:flex;
  justify-content:space-between;
  width:min(820px,64vw);
  margin:12px auto 0;
  color:rgba(242,240,233,.4);
  font-size:7px;
  letter-spacing:.14em;
}
.safari-window-hint span:last-child{display:none}

/* The pulled-out case keeps the same flat browser chrome; only its viewport grows. */
.category-card-portal--safari{
  overflow:hidden;
  border:1px solid rgba(242,240,233,.2);
  border-radius:8px;
  transform:none!important;
  transform-style:flat;
  --open-ms:1s;
}
.category-card-portal--safari .category-card__slab{
  position:absolute;
  inset:30px 0 0;
  top:30px;
  height:calc(100% - 30px);
  opacity:1;
  transform:none!important;
}
.category-card-portal--safari .category-card__face{inset:0;border-radius:0!important;background-size:cover;background-position:center;transform:none!important}
.category-card-portal--safari .category-card__edge,
.category-card-portal--safari .category-card__glyph{display:none}
.category-card-portal--safari .category-card__label,
.category-card-portal--safari.category-card-portal.is-open .category-card__label{
  position:absolute;
  z-index:24;
  left:58px;
  right:auto;
  top:4px;
  width:min(180px,28vw);
  height:23px;
  justify-content:center;
  padding:0 10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.09);
  border-radius:8px 8px 4px 4px!important;
  background:rgba(7,8,7,.62);
  box-shadow:none;
}
.category-card-portal--safari .category-card__label b{font-size:9px!important;letter-spacing:.07em}
.category-card-portal--safari .category-card__label span,
.category-card-portal--safari .category-card__label::before,
.category-card-portal--safari .category-card__label::after{display:none}
.category-card-portal--safari.category-card-portal.is-open .category-card__slab{opacity:0;transform:none!important}
.category-card-portal--safari.is-mounted .card-panel{inset:30px 0 0}
.category-card-portal--safari .card-close{z-index:30;top:3px;right:9px;width:24px;height:24px;font-size:10px}

@media (max-width:700px){
  .index-card-view .category-stack[data-work-layout="safari"]{
    display:block;
    width:100%;
    height:290px;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(242,240,233,.18);
    border-radius:8px;
    background:#171816;
    box-shadow:none;
  }
  .index-card-view .category-stack[data-work-layout="safari"]::before{height:52px}
  .index-card-view .category-stack[data-work-layout="safari"]::after{top:11px}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card{
    position:absolute;
    inset:0;
    left:0;
    top:0!important;
    width:100%;
    height:100%;
  }
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__slab{inset:52px 0 0;top:52px;height:238px}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__label{
    left:calc(var(--tab-index) * 20%);
    top:26px;
    width:20%;
    height:22px;
    padding:0 3px;
    border-radius:6px 6px 3px 3px!important;
  }
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__label b{font-size:7px;letter-spacing:.04em}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview::after{right:12px;bottom:12px;font-size:7px}
  .safari-window-hint{width:100%;margin-top:10px;font-size:7px;line-height:1.5}
  .safari-window-hint span:first-child{display:none}.safari-window-hint span:last-child{display:block}
  .category-card-portal--safari,
  .category-card-portal--safari::before{border-radius:8px}
}
@media (prefers-reduced-motion:reduce){.horse-reveal__media{transition:opacity .2s}.horse-reveal.is-on .horse-reveal__media{transform:scale(1)}}

/* Safari work index polish: keep the browser metaphor quiet and let the work
   read as a live preview rather than a dark card with a fake title bar. */
.index-card-view .category-stack[data-work-layout="safari"]{
  width:min(960px,72vw);
  height:clamp(360px,43vh,480px);
  border:1px solid rgba(242,240,233,.25);
  border-radius:12px;
  background:#10110f;
  box-shadow:0 18px 46px rgba(0,0,0,.28),0 0 0 7px rgba(242,240,233,.025);
}
.index-card-view .category-stack[data-work-layout="safari"]::before,
.category-card-portal--safari::before{
  height:34px;
  border-bottom-color:rgba(242,240,233,.16);
  background:linear-gradient(180deg,#30322e,#20221f);
}
.index-card-view .category-stack[data-work-layout="safari"]::after,
.category-card-portal--safari::after{
  display:none;
}
.safari-window__toolbar{
  position:absolute;
  z-index:26;
  inset:0 0 auto;
  height:34px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 14px;
  color:rgba(242,240,233,.64);
  font:8px/1 var(--mono);
  letter-spacing:.08em;
  pointer-events:none;
}
.safari-window__traffic{display:flex;gap:6px;flex:0 0 auto}
.safari-window__traffic i{display:block;width:7px;height:7px;border-radius:50%;background:#ff6258}
.safari-window__traffic i:nth-child(2){background:#ffbd2e}
.safari-window__traffic i:nth-child(3){background:#28c840}
.safari-window__address{
  flex:1;
  min-width:0;
  padding:7px 14px;
  border:1px solid rgba(242,240,233,.12);
  border-radius:7px;
  background:rgba(8,9,8,.28);
  color:rgba(242,240,233,.58);
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.safari-window__address b{margin-right:6px;color:#a4d36f;font-size:7px}
.safari-window__tools{flex:0 0 auto;color:rgba(242,240,233,.42);white-space:nowrap}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__slab{
  inset:61px 0 0;
  top:61px;
  height:calc(100% - 61px);
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__face{
  filter:saturate(.96) brightness(1.02) contrast(1.03);
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__face::after{
  background:linear-gradient(180deg,rgba(5,5,4,.04) 30%,rgba(5,5,4,.1) 55%,rgba(5,5,4,.72));
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card__label{
  top:39px;
  height:22px;
  border-color:rgba(242,240,233,.08);
  border-radius:6px 6px 3px 3px!important;
  background:rgba(16,17,15,.46);
  color:rgba(242,240,233,.56);
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview .category-card__label{
  border-color:rgba(242,240,233,.2);
  background:rgba(16,17,15,.9);
  color:#f2f0e9;
}
.index-card-view .category-stack[data-work-layout="safari"] .category-card.is-preview::after{
  right:20px;
  bottom:20px;
  border-color:rgba(242,240,233,.44);
  background:rgba(10,11,10,.68);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.safari-window-hint{width:min(960px,72vw);margin-top:14px;color:rgba(242,240,233,.5)}

/* The opened Safari frame contains the real case-study node. Pin its viewport
   to the frame so the former full-page section rules cannot push it below the
   document when portfolio.js moves it out of #card-panels. */
.category-card-portal--safari .safari-window__toolbar{display:flex}
.category-card-portal--safari{position:fixed!important}
.category-card-portal--safari .category-card__slab{inset:61px 0 0;top:61px;height:calc(100% - 61px)}
.category-card-portal--safari .category-card__label{top:39px}
.category-card-portal--safari.is-mounted .card-panel{
  position:absolute!important;
  inset:61px 0 0!important;
  width:100%!important;
  height:calc(100% - 61px)!important;
  min-height:0!important;
  max-height:none!important;
  transform:none!important;
  overflow-y:auto!important;
  z-index:12;
}
.category-card-portal--safari.is-mounted .card-panel .section-code{margin-top:0}

@media (max-width:700px){
  .index-card-view .category-stack[data-work-layout="safari"]{width:100%;height:310px;border-radius:9px}
  .index-card-view .category-stack[data-work-layout="safari"]::before,
  .category-card-portal--safari::before{height:52px}
  .safari-window__toolbar{height:32px;padding:0 11px;gap:8px;font-size:6px}
  .safari-window__tools{display:none}
  .safari-window__address{padding:6px 8px}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__slab{inset:70px 0 0;top:70px;height:240px}
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__label{top:40px;height:22px}
  .category-card-portal--safari .category-card__slab{inset:52px 0 0;top:52px;height:calc(100% - 52px)}
  .category-card-portal--safari .category-card__label{top:27px}
  .category-card-portal--safari.is-mounted .card-panel{inset:52px 0 0!important;height:calc(100% - 52px)!important}
  .safari-window-hint{width:100%;margin-top:10px}
}

/* fullscreen lightbox — click/tap a mosaic tile to view it large and browse all 104 */
.horse-lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;gap:2vw;padding:4vh 3vw;background:rgba(8,8,7,0);opacity:0;transition:opacity .3s ease,background .3s ease}
.horse-lightbox.is-open{opacity:1;background:rgba(8,8,7,.93)}
.horse-lightbox__stage{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:88vw;max-height:88vh;transform:scale(.96);transition:transform .35s cubic-bezier(.7,0,.3,1)}
.horse-lightbox.is-open .horse-lightbox__stage{transform:scale(1)}
.horse-lightbox__img{max-width:86vw;max-height:80vh;object-fit:contain;background:#111;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.horse-lightbox__meta{display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(240,241,232,.72)}
.horse-lightbox__meta .count{color:rgba(240,241,232,.45)}
.horse-lightbox__nav,.horse-lightbox__close{border:0;background:rgba(240,241,232,.06);color:#f2f0e9;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1;transition:background .2s}
.horse-lightbox__nav{width:52px;height:52px;font-size:26px;flex:none}
.horse-lightbox__nav:hover,.horse-lightbox__close:hover{background:rgba(240,241,232,.16)}
.horse-lightbox__close{position:absolute;top:18px;right:20px;width:40px;height:40px;font-size:15px}
@media (max-width:700px){.horse-lightbox{gap:6px;padding:2vh 2vw}.horse-lightbox__nav{width:40px;height:40px;font-size:20px}.horse-lightbox__img{max-height:72vh}}
@media (prefers-reduced-motion:reduce){.horse-lightbox,.horse-lightbox__stage{transition:opacity .2s}}

/* masonry photography gallery — clicking a mosaic tile enters the full library */
.horse-gallery{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;background:rgba(11,10,9,0);opacity:0;transition:opacity .32s ease,background .32s ease}
.horse-gallery.is-open{opacity:1;background:#0b0a09}
.horse-gallery__bar{flex:none;display:flex;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid rgba(240,241,232,.1);font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:#f2f0e9}
.horse-gallery__title{font-weight:600}
.horse-gallery__count{color:rgba(240,241,232,.45)}
.horse-gallery__close{margin-left:auto;border:0;background:rgba(240,241,232,.06);color:#f2f0e9;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;transition:background .2s}
.horse-gallery__close:hover{background:rgba(240,241,232,.16)}
.horse-gallery__grid{flex:1;overflow-y:auto;padding:22px 28px 60px;column-gap:14px;column-count:5}
.horse-gallery__item{display:block;width:100%;margin:0 0 14px;padding:0;border:0;background:none;cursor:zoom-in;break-inside:avoid;overflow:hidden;line-height:0;border-radius:1px}
.horse-gallery__item img{width:100%;height:auto;display:block;filter:saturate(.92);transition:transform .5s cubic-bezier(.7,0,.3,1),filter .3s}
.horse-gallery__item:hover img,.horse-gallery__item:focus-visible img{transform:scale(1.045);filter:saturate(1)}
@media (max-width:1100px){.horse-gallery__grid{column-count:3}}
@media (max-width:700px){.horse-gallery__grid{column-count:2;padding:16px 14px 50px}.horse-gallery__bar{padding:14px 18px}}
@media (prefers-reduced-motion:reduce){.horse-gallery,.horse-gallery__item img{transition:opacity .2s}}

.scroll-cue{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);font-family:"SFMono-Regular",Consolas,monospace;font-size:7px;letter-spacing:.14em;color:rgba(240,241,232,.72);text-decoration:none;animation:scroll-cue-bob 2.2s ease-in-out infinite}
.scroll-cue:hover,.scroll-cue:focus-visible{color:var(--signal,#d8ff52);outline:0}
@keyframes scroll-cue-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,4px)}}
@media (prefers-reduced-motion:reduce){.scroll-cue{animation:none}}

.chapter--ink{background:var(--ink);color:var(--paper)}
.chapter--ink .section-code{border-color:rgba(235,231,220,.28);color:var(--soft)}
.chapter-title{display:grid;grid-template-columns:minmax(120px,24vw) 1fr;gap:4vw;align-items:start;padding:clamp(65px,9vw,130px) 0}
.chapter-title h2{font-size:clamp(55px,9vw,140px)}
.chapter-glyph{font-family:var(--serif);font-size:clamp(110px,22vw,340px);line-height:.7;color:transparent;-webkit-text-stroke:1px currentColor;opacity:.42}
.specimen-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(235,231,220,.32);border-left:1px solid rgba(235,231,220,.32)}
.specimen{position:relative;min-height:320px;padding:18px;background:none;color:var(--paper);border-right:1px solid rgba(235,231,220,.32);border-bottom:1px solid rgba(235,231,220,.32);cursor:pointer;text-align:left;overflow:hidden;transition:background .3s,color .3s}
.specimen::before{content:"";position:absolute;inset:0;background-size:cover;background-position:center;filter:grayscale(1);opacity:.18;transition:opacity .35s,filter .35s,transform .5s}
.specimen:nth-child(1)::before{background-image:linear-gradient(rgba(9,9,8,.15),rgba(9,9,8,.7)),url("assets/portfolio/objects/instil-01.jpg")}
.specimen:nth-child(2)::before{background-image:linear-gradient(rgba(9,9,8,.15),rgba(9,9,8,.7)),url("assets/portfolio/objects/instil-02.jpg")}
.specimen:nth-child(3)::before{background-image:linear-gradient(rgba(9,9,8,.15),rgba(9,9,8,.7)),url("assets/portfolio/objects/instil-03.jpg")}
.specimen:nth-child(4)::before{background-image:linear-gradient(rgba(9,9,8,.15),rgba(9,9,8,.7)),url("assets/portfolio/photo/archive/photo-02.jpg")}
.specimen>*{position:relative;z-index:1}
.specimen:hover::before,.specimen:focus-visible::before,.specimen.is-selected::before{opacity:.62;filter:grayscale(0);transform:scale(1.035)}
.specimen>i{position:absolute;left:18px;top:16px;font-family:var(--serif);font-style:normal}.specimen>b{display:block;font-family:var(--serif);font-size:clamp(90px,12vw,180px);font-weight:400;text-align:center;transition:transform .5s}.specimen>span{position:absolute;left:18px;bottom:17px;font-size:9px;line-height:1.5;letter-spacing:.08em}.specimen small{color:var(--soft);font-size:7px}.specimen:hover,.specimen:focus-visible,.specimen.is-selected{background:var(--paper);color:var(--ink);outline:0}.specimen:hover>b,.specimen:focus-visible>b,.specimen.is-selected>b{transform:rotate(-8deg) scale(1.12)}.specimen:hover small,.specimen.is-selected small{color:var(--dim)}
.specimen-readout{padding:12px 0;font-size:8px;letter-spacing:.13em;color:var(--soft);text-align:right}
.object-stills{display:grid;grid-template-columns:1fr .82fr 1fr;gap:16px;margin-top:95px}.object-stills figure{position:relative;overflow:hidden;border:1px solid rgba(235,231,220,.25)}.object-stills figure:nth-child(2){margin-top:9vw}.object-stills img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .45s,transform .6s}.object-stills figure:hover img{filter:grayscale(0);transform:scale(1.02)}.object-stills figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;grid-template-columns:32px 1fr;padding:13px;background:linear-gradient(transparent,rgba(9,9,8,.92));font-size:8px}.object-stills figcaption b{font-weight:500}.object-stills figcaption small{grid-column:2;margin-top:5px;color:var(--soft)}

.chapter--spaces{overflow:hidden}.space-strip{display:grid;grid-template-columns:1.15fr .85fr 1fr;gap:clamp(14px,3vw,45px);align-items:start}.space-card:nth-child(2){margin-top:12vw}.space-card:nth-child(3){margin-top:4vw}.media-placeholder{position:relative;aspect-ratio:3/4;overflow:hidden;background:#181816;color:var(--paper);filter:grayscale(1);transition:filter .5s,transform .5s;background-size:cover;background-position:center}.media-placeholder::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(235,231,220,.14) 9% 9.4%);mix-blend-mode:screen}.media-placeholder span{position:absolute;left:12px;bottom:12px;font-size:7px;letter-spacing:.12em}.media-placeholder--yms{background-image:linear-gradient(145deg,#191916,#77746a 50%,#20201e)}.media-placeholder--wen{background-image:linear-gradient(35deg,#e0dbce,#77736b 45%,#252522 46%,#aaa597)}.media-placeholder--trace{background-image:radial-gradient(circle at 70% 30%,#b1a899 0 12%,transparent 13%),linear-gradient(110deg,#171716,#80796c)}.space-card:hover .media-placeholder{filter:grayscale(0);transform:scale(.985)}.space-card>div+div{display:grid;grid-template-columns:auto 1fr;gap:12px;margin-top:12px}.space-card span{font-size:8px;color:var(--dim)}.space-card h3{font-size:10px;letter-spacing:.08em}.space-card p{grid-column:2;font-family:var(--serif);font-size:13px;color:var(--dim);line-height:1.5}

.ritual-section{background:#122118;color:var(--paper);overflow:hidden}.ritual-section .section-code{border-color:rgba(235,231,220,.3);color:#a9ae9e}.ritual-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:center;padding:clamp(70px,10vw,145px) 4vw 8vw}.ritual-copy h2{font-size:clamp(58px,8.5vw,126px)}.ritual-copy>p:not(.eyebrow){max-width:480px;margin-top:30px;font-family:var(--serif);font-size:16px;line-height:1.8;color:#bcc5b8}.ritual-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:44px;border-top:1px solid rgba(235,231,220,.28);border-left:1px solid rgba(235,231,220,.28)}.ritual-steps button{min-height:94px;background:transparent;color:var(--paper);border-right:1px solid rgba(235,231,220,.28);border-bottom:1px solid rgba(235,231,220,.28);cursor:pointer;transition:background .25s,color .25s}.ritual-steps button b{display:block;font-family:var(--serif);font-size:28px;font-weight:400}.ritual-steps button span{font-size:7px;letter-spacing:.06em;color:#a9ae9e}.ritual-steps button:hover,.ritual-steps button:focus-visible,.ritual-steps button.is-active{background:var(--paper);color:var(--green);outline:0}.ritual-steps button.is-active span{color:var(--green)}
.tea-stage{position:relative;min-height:620px;border:1px solid rgba(235,231,220,.3);overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 35%,rgba(235,231,220,.08),transparent 38%)}.tea-stage::before,.tea-stage::after{content:"";position:absolute;background:rgba(235,231,220,.18)}.tea-stage::before{left:50%;top:0;width:1px;height:100%}.tea-stage::after{top:50%;left:0;width:100%;height:1px}.tea-sun{position:absolute;left:50%;top:18%;width:clamp(100px,13vw,190px);height:clamp(100px,13vw,190px);border:1px solid rgba(235,231,220,.5);border-radius:50%;transform:translateX(-50%) scale(.78);transition:transform .7s,background .7s}.tea-bowl{position:absolute;z-index:3;left:50%;bottom:18%;width:clamp(180px,24vw,340px);height:clamp(82px,11vw,155px);border:2px solid var(--paper);border-top:0;border-radius:0 0 50% 50% / 0 0 80% 80%;transform:translateX(-50%);transition:transform .65s}.tea-bowl::before{content:"";position:absolute;left:-1%;top:-8px;width:102%;height:16px;border:2px solid var(--paper);border-radius:50%}.tea-bowl span{position:absolute;left:5%;right:5%;top:-4px;height:9px;border-radius:50%;background:var(--green);transition:background .5s,transform .5s}.tea-steam{position:absolute;z-index:2;left:50%;bottom:40%;width:180px;height:190px;transform:translateX(-50%);opacity:.15;transition:opacity .5s}.tea-steam i{position:absolute;bottom:0;width:1px;height:100%;background:linear-gradient(transparent,var(--paper));animation:steam 3.2s ease-in-out infinite}.tea-steam i:nth-child(1){left:30%;transform:rotate(-8deg)}.tea-steam i:nth-child(2){left:50%;height:85%;animation-delay:-1.1s}.tea-steam i:nth-child(3){left:70%;height:93%;transform:rotate(9deg);animation-delay:-2s}@keyframes steam{50%{transform:translateX(18px) rotate(8deg);opacity:.35}}
.tea-whisk{position:absolute;z-index:5;left:57%;bottom:30%;width:70px;height:160px;transform:rotate(18deg) translateY(-100px);opacity:0;transition:transform .65s,opacity .4s}.tea-whisk i{position:absolute;bottom:0;left:35px;width:1px;height:95px;background:var(--paper);transform-origin:bottom}.tea-whisk i:nth-child(1){transform:rotate(-14deg)}.tea-whisk i:nth-child(2){transform:rotate(-7deg)}.tea-whisk i:nth-child(4){transform:rotate(7deg)}.tea-whisk i:nth-child(5){transform:rotate(14deg)}
.tea-kanji{position:absolute;z-index:-1;left:5%;top:3%;font-family:var(--serif);font-size:clamp(180px,33vw,520px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(235,231,220,.16);transition:opacity .35s,transform .5s}.tea-caption{position:absolute;left:18px;right:18px;bottom:15px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.12em}.tea-stage[data-step="1"] .tea-sun{background:var(--red);transform:translateX(-50%) scale(.9)}.tea-stage[data-step="2"] .tea-steam{opacity:.8}.tea-stage[data-step="2"] .tea-bowl span,.tea-stage[data-step="3"] .tea-bowl span,.tea-stage[data-step="4"] .tea-bowl span{background:#8c9871;transform:scaleY(1.7)}.tea-stage[data-step="3"] .tea-whisk{opacity:1;transform:rotate(18deg) translateY(0)}.tea-stage[data-step="4"] .tea-bowl{transform:translateX(-50%) translateY(-34px) scale(1.05)}.tea-stage[data-step="4"] .tea-sun{transform:translateX(-50%) scale(.55)}
.ritual-marquee{margin-inline:calc(var(--pad) * -1);border-top:1px solid rgba(235,231,220,.25);border-bottom:1px solid rgba(235,231,220,.25);overflow:hidden;white-space:nowrap}.ritual-marquee span{display:inline-block;padding:13px 0;font-family:var(--serif);font-size:18px;letter-spacing:.45em;animation:marquee 25s linear infinite}@keyframes marquee{to{transform:translateX(-40%)}}

.drawing-wall{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:2vw;align-items:start}.drawing-card{min-height:420px;border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;padding:16px;background:rgba(235,231,220,.55);transition:transform .4s,background .4s}.drawing-card:nth-child(1){transform:rotate(-1.5deg)}.drawing-card:nth-child(2){margin-top:8vw;transform:rotate(1deg)}.drawing-card:nth-child(3){transform:rotate(2deg)}.drawing-card:hover{transform:rotate(0) translateY(-10px);background:var(--paper)}.drawing-mark{align-self:center;margin:auto;font-family:var(--serif);font-size:clamp(120px,18vw,270px);color:var(--green);opacity:.8}.drawing-card figcaption{font-size:9px;line-height:1.6}.drawing-card small{color:var(--dim);font-family:var(--serif);font-size:12px}
.drawing-wall{grid-template-columns:repeat(12,1fr)}.drawing-card:nth-child(1){grid-column:1/5}.drawing-card:nth-child(2){grid-column:5/13}.drawing-card:nth-child(3){grid-column:1/7;margin-top:-3vw}.drawing-card:nth-child(4){grid-column:7/13;margin-top:5vw;transform:rotate(-1deg)}.drawing-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:18px;filter:saturate(.78);transition:filter .45s,transform .55s}.drawing-card--wide img{aspect-ratio:16/9}.drawing-card:hover img{filter:saturate(1);transform:scale(.985)}

.photo-archive{padding:clamp(72px,9vw,140px) var(--pad);overflow:hidden;background:#090908;color:var(--paper)}.photo-archive__head{display:grid;grid-template-columns:1fr minmax(320px,1.45fr) auto;align-items:end;gap:28px;margin-bottom:clamp(30px,5vw,70px);border-bottom:1px solid rgba(235,231,220,.28)}.photo-archive__head p{align-self:start;display:flex;justify-content:space-between;gap:30px;font-size:7px;letter-spacing:.16em;color:var(--soft)}.photo-archive__head h2{font-family:var(--serif);font-size:clamp(72px,12vw,180px);font-weight:400;line-height:.7;letter-spacing:-.075em}.photo-archive__head>b{padding-bottom:12px;font-size:8px;font-weight:400;letter-spacing:.18em}.photo-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(92px,8vw);gap:clamp(7px,1vw,15px)}.photo-tile{position:relative;grid-column:span 3;grid-row:span 3;overflow:hidden;padding:0;border:0;background:#171715;color:var(--paper);cursor:zoom-in;text-align:left}.photo-tile--wide{grid-column:span 6}.photo-tile--tall{grid-row:span 5}.photo-tile img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .4s}.photo-tile span{position:absolute;z-index:2;left:10px;bottom:9px;padding:4px 6px;background:rgba(9,9,8,.76);font-size:7px;letter-spacing:.13em;opacity:.72;transition:opacity .3s}.photo-tile::after{content:"OPEN ↗";position:absolute;right:10px;top:9px;font-size:7px;letter-spacing:.13em;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}.photo-tile:hover img,.photo-tile:focus-visible img{transform:scale(1.035);filter:saturate(1) contrast(1.02)}.photo-tile:hover span,.photo-tile:focus-visible span,.photo-tile:hover::after,.photo-tile:focus-visible::after{opacity:1}.photo-tile:hover::after,.photo-tile:focus-visible::after{transform:none}.photo-tile:focus-visible{outline:1px solid var(--paper);outline-offset:3px}.archive-hint{margin-top:18px;text-align:right;font-size:7px;letter-spacing:.17em;color:var(--soft)}

.illustration-index{margin:clamp(90px,11vw,160px) calc(var(--pad) * -1) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}.illustration-index>header{display:flex;justify-content:space-between;padding:14px var(--pad);font-size:7px;letter-spacing:.15em}.illustration-index>header b{font-weight:400;color:var(--dim)}.illustration-rail{display:flex;gap:clamp(10px,1.4vw,22px);overflow-x:auto;padding:24px var(--pad) 32px;scroll-snap-type:x proximity;overscroll-behavior-inline:contain;cursor:grab;scrollbar-width:thin}.illustration-rail.is-dragging{cursor:grabbing;scroll-snap-type:none}.illustration-rail button{flex:0 0 clamp(230px,27vw,420px);scroll-snap-align:start;padding:0;border:0;background:transparent;color:var(--ink);cursor:zoom-in;text-align:left}.illustration-rail button:nth-child(3n+2){flex-basis:clamp(330px,39vw,600px)}.illustration-rail img{display:block;width:100%;height:clamp(320px,42vw,620px);object-fit:contain;object-position:center;background:#e8e3d8;filter:saturate(.76);transition:filter .4s,transform .55s}.illustration-rail button:hover img,.illustration-rail button:focus-visible img{filter:saturate(1);transform:translateY(-7px)}.illustration-rail button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}.illustration-rail button>span{display:grid;grid-template-columns:36px 1fr;padding-top:10px;font-family:var(--serif);font-size:13px}.illustration-rail button i{font-family:var(--sans);font-size:7px;font-style:normal;color:var(--dim)}

.image-viewer{position:fixed;z-index:130;inset:0;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;place-items:center;padding:54px 18px 22px;background:rgba(5,5,5,.96);color:var(--paper);opacity:0;transition:opacity .3s}.image-viewer.is-open{opacity:1}.image-viewer figure{display:grid;place-items:center;gap:12px;width:100%;height:100%;min-height:0}.image-viewer img{display:block;max-width:100%;max-height:calc(100vh - 110px);object-fit:contain}.image-viewer figcaption{font-size:8px;letter-spacing:.15em}.image-viewer__close{position:absolute;right:18px;top:14px;padding:9px 12px;border:1px solid rgba(235,231,220,.35);background:transparent;color:var(--paper);font-size:8px;letter-spacing:.12em;cursor:pointer}.image-viewer__arrow{width:44px;aspect-ratio:1;border:1px solid rgba(235,231,220,.3);border-radius:50%;background:transparent;color:var(--paper);font-size:20px;cursor:pointer}.image-viewer__count{position:absolute;left:18px;top:20px;font-size:8px;letter-spacing:.16em;color:var(--soft)}body.image-viewer-open{overflow:hidden}

.motion-links{border-top:1px solid rgba(235,231,220,.3)}.motion-link{display:grid;grid-template-columns:70px 1fr auto;align-items:center;min-height:110px;border-bottom:1px solid rgba(235,231,220,.3);transition:padding .3s,background .3s,color .3s}.motion-link span{font-size:8px;color:var(--soft)}.motion-link b{font-family:var(--serif);font-size:clamp(22px,3vw,46px);font-weight:400}.motion-link i{font-style:normal}.motion-link:hover,.motion-link:focus-visible{padding-inline:18px;background:var(--paper);color:var(--ink);outline:0}
.motion-feature{--jx:0px;--jy:0px;position:relative;display:grid;grid-template-columns:.72fr 1.28fr;min-height:clamp(500px,48vw,680px);margin-bottom:90px;border:1px solid rgba(235,231,220,.32);overflow:hidden;background:#050505;color:var(--paper);cursor:crosshair;isolation:isolate}.motion-feature::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,transparent 49.9%,rgba(235,231,220,.17) 50%,transparent 50.1%),linear-gradient(transparent 49.9%,rgba(235,231,220,.17) 50%,transparent 50.1%);background-size:25% 25%;opacity:.7}.motion-feature__copy{z-index:3;align-self:end;padding:clamp(24px,4vw,58px)}.motion-feature__copy>span,.motion-feature__copy p,.motion-feature figcaption{font-size:7px;line-height:1.8;letter-spacing:.17em;color:var(--soft)}.motion-feature__copy h3{margin:18px 0;font-size:clamp(70px,11vw,150px);line-height:.74;letter-spacing:-.07em}.motion-feature__axis{position:absolute;z-index:4;inset:20px;display:flex;justify-content:space-between;align-items:flex-start;font-size:7px;letter-spacing:.16em;pointer-events:none}.motion-feature__axis span:first-child{font-family:var(--serif);font-size:40px;color:transparent;-webkit-text-stroke:1px rgba(235,231,220,.55)}.motion-feature__signal{position:absolute;z-index:4;right:9%;top:18%;width:clamp(52px,7vw,100px);aspect-ratio:1;border-radius:50%;background:#ff7a1a;mix-blend-mode:screen;transform:translate(var(--jx),var(--jy));transition:transform .4s}.motion-feature figcaption{position:absolute;z-index:4;right:18px;bottom:14px}.motion-feature:focus-visible{outline:1px solid var(--paper);outline-offset:4px}.motion-feature.is-scattered .motion-feature__signal{transform:translate(-42vw,24vw) scale(.55)}
.motion-feature__media{position:absolute;z-index:-1;top:50%;right:12%;height:min(336px,58%);aspect-ratio:94/168;overflow:hidden;background:#020207;border:1px solid rgba(235,231,220,.28);transform:translate(var(--jx),calc(-50% + var(--jy)));transition:transform .7s cubic-bezier(.2,.75,.2,1),filter .5s}.motion-feature__media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 32px rgba(0,0,0,.16);pointer-events:none}.motion-feature__media picture,.motion-feature__media img{display:block;width:100%;height:100%}.motion-feature__media img{object-fit:contain;image-rendering:auto}.motion-feature:hover .motion-feature__media,.motion-feature:focus-visible .motion-feature__media{filter:saturate(1.18) brightness(1.05)}.motion-feature.is-scattered .motion-feature__media{transform:translate(calc(var(--jx) - 4vw),calc(-50% + var(--jy)))}
/* FILMS — motion studies inside the playground. */
.film-strip{position:relative;z-index:3;padding:clamp(44px,7vh,96px) clamp(18px,4vw,64px) clamp(52px,8vh,110px);background:rgba(6,7,6,.72);box-shadow:0 -28px 90px rgba(0,0,0,.34);color:var(--paper);isolation:isolate}
.film-strip::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,25,21,.42),rgba(4,5,4,.86));backdrop-filter:blur(22px) saturate(1.18);-webkit-backdrop-filter:blur(22px) saturate(1.18);pointer-events:none}
.film-strip__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px 24px;margin-bottom:clamp(22px,3vw,44px)}
.film-strip__head p,.film-strip__head span{font-size:7px;letter-spacing:.16em;color:var(--soft)}
.film-strip__head h2{grid-column:1;font-family:var(--serif);font-size:clamp(34px,5.2vw,86px);font-weight:400;line-height:.94;letter-spacing:-.04em}
.film-strip__head p{grid-column:1;margin-bottom:6px}
.film-strip__head span{grid-column:2;grid-row:2;text-align:right}
.film-strip--playground{margin-top:clamp(64px,8vw,112px);box-shadow:none}
.film-strip__head--compact{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:24px}
.film-strip__head--compact p{grid-column:1;margin:0}
.film-strip__head--compact span{grid-column:2;grid-row:1}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.film-strip__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,30px)}
.film-card{position:relative;margin:0;cursor:crosshair}.film-card:focus-visible{outline:1px solid var(--paper);outline-offset:6px}.film-card__frame{position:relative;overflow:hidden;aspect-ratio:16/9;border:1px solid rgba(235,231,220,.32);background:#050505}.film-card__frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 46px rgba(0,0,0,.45);pointer-events:none}.film-card video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.94);transition:transform .8s cubic-bezier(.2,.75,.2,1),filter .5s}.film-card:hover video,.film-card:focus-visible video{transform:scale(1.028);filter:saturate(1.1) brightness(1.05)}.film-card__tc{position:absolute;z-index:1;left:12px;bottom:10px;font-size:7px;letter-spacing:.16em;color:rgba(235,231,220,.72);text-shadow:0 1px 6px rgba(0,0,0,.7)}.film-card figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:6px 14px;padding:13px 2px 0}.film-card figcaption b{font-family:var(--serif);font-size:clamp(20px,2.5vw,36px);font-weight:400;line-height:1;letter-spacing:-.03em}.film-card figcaption i{font-style:normal;font-size:7px;letter-spacing:.16em;color:var(--soft);transition:color .3s}.film-card figcaption span{grid-column:1/-1;font-size:7px;letter-spacing:.16em;color:var(--soft)}.film-card:hover figcaption i,.film-card:focus-visible figcaption i{color:var(--paper)}
.projects-run{margin:0 calc(var(--pad) * -1);overflow:hidden;border-top:1px solid rgba(235,231,220,.28);border-bottom:1px solid rgba(235,231,220,.28);white-space:nowrap}.projects-run span{display:inline-block;padding:.07em 0 .13em;font-family:var(--serif);font-size:clamp(82px,14vw,210px);line-height:.82;letter-spacing:-.07em;animation:projects-run 28s linear infinite}@keyframes projects-run{to{transform:translateX(-35%)}}.motion-catalog-head{display:flex;justify-content:space-between;padding:18px 0;font-size:7px;letter-spacing:.16em;color:var(--soft)}.motion-links{position:relative;border-top:1px solid rgba(235,231,220,.3)}.motion-link{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) 170px auto;gap:18px;align-items:center;min-height:132px;padding-inline:0;overflow:hidden;isolation:isolate}.motion-link::after{content:attr(data-glyph);position:absolute;z-index:-1;right:9%;top:50%;font-family:var(--serif);font-size:190px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(235,231,220,.22);opacity:0;transform:translate(35%,-45%) rotate(8deg);transition:opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1)}.motion-link small{position:relative;z-index:1;font-size:7px;letter-spacing:.13em;color:var(--soft)}.motion-link:hover::after,.motion-link:focus-visible::after{opacity:1;transform:translate(0,-50%) rotate(-3deg)}.motion-link:hover small,.motion-link:focus-visible small{color:var(--dim)}

#about{color:var(--ink);padding:clamp(26px,3vw,46px)}
.about-section{min-height:85vh}
.about-browser{width:min(1120px,100%);margin:0 auto}
.about-browser__tabs{
  position:relative;
  z-index:20;
  display:flex;
  align-items:end;
  gap:5px;
  padding:0 18px;
}
.about-browser__tabs button{
  min-width:clamp(82px,11vw,140px);
  padding:12px 18px 11px;
  border:1px solid rgba(10,10,9,.22);
  border-bottom:0;
  border-radius:10px 10px 0 0;
  background:#c9c5bc;
  color:rgba(10,10,9,.62);
  cursor:pointer;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  transition:padding .35s cubic-bezier(.2,.75,.2,1),background .25s,color .25s;
}
.about-browser__tabs button[aria-selected="true"]{padding-top:16px;background:#f1efe8;color:var(--ink)}
.about-browser__tabs button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.about-browser__stage{
  position:relative;
  height:clamp(600px,72vh,760px);
  padding:42px 42px 0 0;
  perspective:1600px;
  isolation:isolate;
}
.about-window{
  position:absolute;
  inset:42px 42px 0 0;
  z-index:var(--stack-z,1);
  overflow:hidden;
  border:1px solid rgba(10,10,9,.28);
  border-radius:13px 13px 4px 4px;
  background:#efede6;
  box-shadow:0 18px 44px rgba(35,30,23,.18);
  transform:
    translate3d(calc(var(--depth,1) * 13px),calc(var(--depth,1) * -13px),calc(var(--depth,1) * -45px))
    scale(calc(1 - var(--depth,1) * .012));
  transform-origin:100% 0;
  transition:transform .72s cubic-bezier(.18,.78,.2,1),box-shadow .55s,filter .55s;
}
.about-window[data-depth="0"]{--depth:0;--stack-z:10}
.about-window[data-depth="1"]{--depth:1;--stack-z:7;filter:saturate(.88) brightness(.96)}
.about-window[data-depth="2"]{--depth:2;--stack-z:4;filter:saturate(.72) brightness(.91)}
.about-window[data-depth="3"]{--depth:3;--stack-z:1;filter:saturate(.55) brightness(.86)}
.about-window.is-active{box-shadow:0 28px 80px rgba(35,30,23,.26)}
.about-window:not(.is-active){pointer-events:none}
.about-window:not(.is-active) .about-window__chrome{pointer-events:auto}
.about-window__chrome{
  position:relative;
  z-index:4;
  display:grid;
  grid-template-columns:70px 1fr 70px;
  align-items:center;
  width:100%;
  height:42px;
  padding:0 15px;
  border:0;
  border-bottom:1px solid rgba(10,10,9,.16);
  background:linear-gradient(#f8f7f2,#dcd9d1);
  color:#5e5b55;
  cursor:pointer;
  font-size:8px;
  letter-spacing:.08em;
  text-align:center;
}
.about-window__chrome>span:nth-child(2){
  justify-self:center;
  width:min(390px,70%);
  padding:7px 18px;
  overflow:hidden;
  border:1px solid rgba(10,10,9,.12);
  border-radius:7px;
  background:rgba(255,255,255,.56);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.about-window__chrome small{justify-self:end;font-size:7px;letter-spacing:.15em}
.about-window__lights{display:flex;gap:7px}
.about-window__lights i{width:9px;height:9px;border-radius:50%;background:#c5655d}
.about-window__lights i:nth-child(2){background:#d0aa52}
.about-window__lights i:nth-child(3){background:#6da366}
.about-window__body{height:calc(100% - 42px);overflow:auto;background-color:#efede6;background-image:radial-gradient(rgba(10,10,9,.065) .55px,transparent .7px);background-size:5px 5px}
.about-window__body--about{display:grid;grid-template-columns:minmax(0,.88fr) minmax(340px,1.12fr);gap:clamp(28px,4vw,66px);align-items:center;padding:clamp(28px,4vw,56px)}
.about-window__intro h2,.about-window__body header h2,.about-window__body--contact h2{font-family:var(--serif);font-size:clamp(44px,6vw,88px);font-weight:400;line-height:.84;letter-spacing:-.055em}
.about-window__lead{max-width:430px;margin-top:clamp(24px,4vh,48px);font-family:var(--serif);font-size:clamp(14px,1.35vw,19px);line-height:1.72}
.about-window__index{margin-top:26px;color:var(--dim);font-size:7px;line-height:1.7;letter-spacing:.15em}
.about-window__portrait{align-self:center;width:min(100%,410px);margin:auto}
.about-window__portrait img{display:block;width:100%;max-height:570px;object-fit:contain}
.about-window__portrait figcaption{display:flex;justify-content:space-between;gap:14px;padding-top:9px;border-top:1px solid var(--line);font-size:7px;letter-spacing:.13em}
.about-window__portrait small{color:var(--dim);font-size:inherit}
.about-window__body--catalog,.about-window__body--photo{padding:clamp(30px,4vw,58px)}
.about-window__body header{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:clamp(28px,5vh,55px)}
.about-window__body header h2{font-size:clamp(42px,5vw,74px)}
.about-work-list{border-top:1px solid var(--line)}
.about-work-list a{display:grid;grid-template-columns:34px minmax(180px,1.2fr) minmax(150px,1fr) auto;gap:14px;align-items:center;padding:19px 7px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s,color .3s}
.about-work-list a:hover,.about-work-list a:focus-visible{padding-left:17px;background:var(--green);color:var(--paper);outline:0}
.about-work-list span,.about-work-list small{font-size:7px;letter-spacing:.12em}
.about-work-list b{font-family:var(--sans);font-size:clamp(13px,1.4vw,18px)}
.about-work-list i{font-size:8px;font-style:normal;letter-spacing:.1em}
.about-photo-strip{display:grid;grid-template-columns:1.25fr .82fr 1fr;gap:12px;height:min(360px,44vh)}
.about-photo-strip button{position:relative;overflow:hidden;background:#111;cursor:zoom-in}
.about-photo-strip button:nth-child(2){margin-top:44px}
.about-photo-strip button:nth-child(3){margin-bottom:34px}
.about-photo-strip img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72);transition:transform .65s,filter .45s}
.about-photo-strip button:hover img,.about-photo-strip button:focus-visible img{transform:scale(1.025);filter:saturate(1)}
.about-photo-strip span{position:absolute;left:0;right:0;bottom:0;padding:28px 11px 10px;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:7px;letter-spacing:.12em;text-align:left}
.about-window__body--contact{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(36px,7vw,90px)}
.about-window__body--contact h2{font-size:clamp(62px,9vw,128px)}
.about-window__body--contact>p:not(.eyebrow){max-width:480px;margin-top:30px;font-family:var(--serif);font-size:clamp(15px,1.6vw,21px);line-height:1.7}
.about-window__body--contact>a{display:flex;justify-content:space-between;width:min(520px,100%);margin-top:42px;padding:18px 0;border-top:1px solid;border-bottom:1px solid;font-family:var(--sans);font-size:clamp(15px,2vw,24px)}
.about-window__body--contact>a:hover,.about-window__body--contact>a:focus-visible{color:var(--violet);outline:0}
.about-window__body--contact>small{margin-top:14px;color:var(--dim);font-size:7px;letter-spacing:.14em}
footer{display:flex;justify-content:space-between;padding-top:40px;font-size:8px;letter-spacing:.11em}
@media (max-width:700px){
  #about{padding:18px 12px 26px}
  .about-browser__tabs{gap:3px;padding:0 4px;overflow-x:auto}
  .about-browser__tabs button{min-width:78px;padding:10px 12px 9px;font-size:8px}
  .about-browser__tabs button[aria-selected="true"]{padding-top:14px}
  .about-browser__stage{height:690px;padding:30px 14px 0 0}
  .about-window{inset:30px 14px 0 0;border-radius:10px 10px 3px 3px;transform:translate3d(calc(var(--depth,1) * 4px),calc(var(--depth,1) * -9px),calc(var(--depth,1) * -30px)) scale(calc(1 - var(--depth,1) * .006))}
  .about-window__chrome{grid-template-columns:54px 1fr 34px;height:38px;padding:0 10px}
  .about-window__chrome>span:nth-child(2){width:90%;padding:6px 9px}
  .about-window__body{height:calc(100% - 38px)}
  .about-window__body--about{display:flex;flex-direction:column;align-items:stretch;gap:22px;padding:24px 20px}
  .about-window__intro h2{font-size:clamp(42px,13vw,59px)}
  .about-window__lead{margin-top:21px;font-size:14px;line-height:1.6}
  .about-window__index{margin-top:16px}
  .about-window__portrait{width:min(100%,260px)}
  .about-window__portrait img{max-height:none}
  .about-window__portrait figcaption{display:grid;gap:4px}
  .about-window__body--catalog,.about-window__body--photo{padding:26px 18px}
  .about-window__body header{display:block;margin-bottom:25px}
  .about-window__body header h2{font-size:44px}
  .about-work-list a{grid-template-columns:24px 1fr auto;padding:16px 4px}
  .about-work-list small{display:none}
  .about-photo-strip{grid-template-columns:1fr 1fr;height:auto}
  .about-photo-strip button{min-height:190px}
  .about-photo-strip button:first-child{grid-column:1/-1;height:220px}
  .about-photo-strip button:nth-child(2){margin-top:0}
  .about-photo-strip button:nth-child(3){margin-bottom:0}
  .about-window__body--contact{padding:34px 22px}
  .about-window__body--contact h2{font-size:60px}
}
@media (prefers-reduced-motion:reduce){.about-window,.about-browser__tabs button{transition:none}}

.index-mode-bar{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end}
.index-mode-bar .section-code{width:100%}
.index-contact-link{
  display:flex;
  align-items:center;
  min-height:38px;
  padding:10px 13px;
  border:1px solid rgba(235,231,220,.34);
  color:var(--paper);
  font-size:8px;
  letter-spacing:.13em;
  transition:background .25s,color .25s,transform .25s;
}
.index-contact-link:hover,.index-contact-link:focus-visible{background:var(--paper);color:var(--ink);transform:translateY(-2px);outline:0}
.index-view-toggle{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:145px;
  padding:10px 12px;
  border:1px solid rgba(235,231,220,.34);
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  font-size:8px;
  letter-spacing:.13em;
  transition:background .25s,color .25s,transform .25s;
}
.index-view-toggle:hover,.index-view-toggle:focus-visible{background:var(--paper);color:var(--ink);transform:translateY(-2px);outline:0}
.index-view-toggle__icon{position:relative;width:22px;height:16px}
.index-view-toggle__icon i{position:absolute;left:0;width:18px;height:9px;border:1px solid currentColor;background:#080807;transition:transform .45s cubic-bezier(.2,.75,.2,1),background .25s}
.index-view-toggle__icon i:nth-child(1){top:0}
.index-view-toggle__icon i:nth-child(2){top:3px;left:2px}
.index-view-toggle__icon i:nth-child(3){top:6px;left:4px;background:var(--green)}
.index-view-toggle[aria-expanded="true"] .index-view-toggle__icon i:nth-child(1){transform:translateY(5px) rotate(-5deg)}
.index-view-toggle[aria-expanded="true"] .index-view-toggle__icon i:nth-child(2){transform:translateY(2px)}
.index-view-toggle[aria-expanded="true"] .index-view-toggle__icon i:nth-child(3){transform:translateY(-2px) rotate(5deg)}
.index-about-home{
  display:grid;
  grid-template-columns:minmax(280px,.82fr) minmax(380px,1.18fr);
  gap:clamp(36px,7vw,110px);
  align-items:center;
  min-height:calc(100vh - 150px);
  padding:clamp(34px,5vh,70px) 7vw 28px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity .48s ease,transform .62s cubic-bezier(.2,.75,.2,1);
}
.index-about-home.is-active{opacity:1;transform:none}
.index-about-home__copy h2{font-family:var(--serif);font-size:clamp(58px,7.7vw,118px);font-weight:400;line-height:.82;letter-spacing:-.06em;color:var(--paper)}
.about-signature{display:block;height:clamp(240px,28vw,360px);width:auto;max-width:100%;object-fit:contain;object-position:left center}
.index-about-home__copy>p:not(.eyebrow):not(.index-about-home__focus){max-width:520px;margin-top:clamp(28px,4vh,48px);font-family:var(--serif);font-size:clamp(15px,1.45vw,20px);line-height:1.72;text-align:left;color:rgba(235,231,220,.76)}
.index-about-home__copy .about-cube{margin-top:clamp(12px,1.6vw,22px)}
.index-about-home__focus{margin-top:24px;color:rgba(235,231,220,.45);font-size:7px;line-height:1.7;letter-spacing:.15em}
.index-about-home__copy>a{display:inline-block;margin-top:25px;padding-bottom:5px;border-bottom:1px solid rgba(235,231,220,.62);color:var(--paper);font-size:8px;letter-spacing:.14em;transition:color .2s,transform .2s}
.index-about-home__copy>a:hover,.index-about-home__copy>a:focus-visible{color:#b9a3e0;transform:translateX(5px);outline:0}
.index-about-home__portrait{width:min(100%,460px);justify-self:center}
.index-about-home__portrait-media{width:min(100%,45.3vh);margin-inline:auto;aspect-ratio:1066/1600;filter:drop-shadow(0 25px 38px rgba(0,0,0,.32))}
.index-about-home__portrait-media img{display:block;width:100%;height:100%;object-fit:cover;will-change:opacity}
.index-about-home__portrait figcaption{display:flex;justify-content:space-between;gap:14px;padding-top:10px;border-top:1px solid rgba(235,231,220,.3);color:var(--paper);font-size:7px;letter-spacing:.12em}
.index-about-home__portrait small{color:rgba(235,231,220,.46);font-size:inherit}
@media (min-width:701px){
  #about.index-about-home{min-height:210vh;align-items:start}
  .index-about-home__copy,.index-about-home__portrait{position:sticky;top:clamp(88px,12vh,128px);align-self:start}
}
.index-card-view{opacity:0;transform:translateY(34px);transition:opacity .46s ease,transform .62s cubic-bezier(.2,.75,.2,1)}
.index-card-view.is-active{opacity:1;transform:none}
.index-card-view .index-heading{padding-top:clamp(42px,6vw,76px)}
#about,#work,#playground,#socials{scroll-margin-top:76px}
@media (min-width:701px){
  .index-about-home__copy{display:grid;grid-template-columns:minmax(120px,.48fr) minmax(220px,1fr);column-gap:clamp(24px,3vw,46px);align-items:start}
  .index-about-home__copy>.eyebrow{grid-column:1/-1}
  .index-about-home__copy>h2{grid-column:1;grid-row:2}
  .index-about-home__copy>p:not(.eyebrow):not(.index-about-home__focus){grid-column:2;grid-row:2;align-self:center;width:min(560px,calc(100% + 260px));max-width:none;margin-top:0;font-size:clamp(15px,1.2vw,17px);line-height:1.55}
  .index-about-home__copy .about-cube{grid-column:1/-1;grid-row:3;width:100%;grid-template-columns:1fr;justify-self:stretch;justify-items:center;margin-top:clamp(28px,3.2vw,44px)}
  .index-about-home__copy .about-cube figcaption{text-align:center;align-items:center}
  .index-about-home__portrait{transform:translateX(clamp(0px,4vw,58px))}
}
.playground-section{margin-top:clamp(110px,14vw,200px);padding-top:clamp(58px,7vw,96px);border-top:1px solid rgba(242,240,233,.2)}
.playground-section__intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(250px,.65fr);gap:6vw;align-items:end;margin:0 8vw}
.playground-section__intro>p:first-child{grid-column:1/-1;color:rgba(242,240,233,.42);font-size:8px;letter-spacing:.18em}
.playground-section__intro h2{font-family:var(--serif);font-size:clamp(52px,7.2vw,108px);font-weight:400;line-height:.86;letter-spacing:-.055em;color:var(--paper)}
.playground-section__intro>p:last-child{max-width:430px;font-family:var(--serif);font-size:clamp(14px,1.4vw,19px);line-height:1.65;color:rgba(242,240,233,.64)}
.playground-section .interaction-system{margin-top:clamp(76px,9vw,128px)}
.playground-section .photo-grid-section--playground{height:min(78vh,760px);min-height:560px;box-shadow:none}
@media (max-width:700px){
  .index-mode-bar{grid-template-columns:1fr;gap:12px}
  .index-contact-link{justify-self:end;min-height:42px}
  .index-view-toggle{justify-self:end;min-width:132px;padding:9px 10px}
  .index-about-home{display:flex;flex-direction:column;align-items:stretch;gap:28px;min-height:0;padding:34px 0 62px}
  .index-about-home__copy h2{font-size:clamp(54px,17vw,76px)}
  .about-signature{height:clamp(210px,48vw,285px)}
  .index-about-home__copy>p:not(.eyebrow):not(.index-about-home__focus){margin-top:25px;font-size:15px;line-height:1.65}
  .index-about-home__portrait{width:min(100%,310px)}
  .index-about-home__portrait-media{width:100%}
  .index-about-home__portrait figcaption{display:grid;gap:4px}
  .index-card-view .index-heading{padding-top:48px}
  .playground-section{margin-top:100px;padding-top:54px}
  .playground-section__intro{grid-template-columns:1fr;gap:24px;margin:0}
  .playground-section__intro>p:first-child{font-size:9px;line-height:1.6}
  .playground-section__intro h2{font-size:clamp(46px,14vw,58px);line-height:.9}
  .playground-section__intro>p:last-child{font-size:15px;line-height:1.55}
  .playground-section .interaction-system{margin-top:74px}
}
@media (prefers-reduced-motion:reduce){.index-about-home,.index-card-view,.index-view-toggle__icon i{transition:none}}

.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:none}

/* Japanese intercuts: ma, hanging scroll, water trace and fusuma viewer. */
.ma-interlude{position:relative;display:grid;place-items:center;min-height:58vh;padding:60px var(--pad);overflow:hidden;background:#090908;color:var(--paper)}
.ma-interlude__index{position:absolute;left:var(--pad);top:28px;font-size:7px;letter-spacing:.5em;color:var(--soft)}
.ma-interlude p{display:flex;align-items:center;gap:30px}.ma-interlude p b{font-family:var(--serif);font-size:clamp(160px,31vw,470px);font-weight:400;line-height:.7;color:transparent;-webkit-text-stroke:1px rgba(235,231,220,.68)}.ma-interlude p i{writing-mode:vertical-rl;font-style:normal;font-size:8px;letter-spacing:.25em;color:var(--soft)}
.ma-interlude__line{position:absolute;left:50%;bottom:0;width:1px;height:28%;background:linear-gradient(transparent,var(--paper));transform-origin:bottom;animation:ma-line 2.8s ease-in-out infinite}@keyframes ma-line{50%{transform:scaleY(.3);opacity:.35}}

.kakejiku{display:grid;grid-template-columns:minmax(260px,620px) minmax(180px,1fr);gap:clamp(24px,6vw,90px);align-items:end;max-width:1050px;margin:40px auto 110px;padding:36px;border-top:1px solid rgba(235,231,220,.3);border-bottom:1px solid rgba(235,231,220,.3)}
.kakejiku__media{position:relative;aspect-ratio:9/16;max-height:78vh;overflow:hidden;background:#090908;clip-path:inset(0 0 100% 0);transition:clip-path 1.15s cubic-bezier(.2,.75,.15,1)}.kakejiku.is-visible .kakejiku__media{clip-path:inset(0)}.kakejiku__media::before,.kakejiku__media::after{content:"";position:absolute;z-index:2;left:0;right:0;height:12px;background:linear-gradient(90deg,#362d22,#b5a78a,#2a241d)}.kakejiku__media::before{top:0}.kakejiku__media::after{bottom:0}.kakejiku video{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.08)}
.kakejiku__seal{position:absolute;z-index:3;right:16px;bottom:20px;display:grid;place-items:center;width:48px;aspect-ratio:1;background:var(--red);color:var(--paper);font-family:var(--serif);font-size:26px;mix-blend-mode:multiply;transform:rotate(-5deg)}
.kakejiku figcaption{display:grid;gap:15px;padding-bottom:30px}.kakejiku figcaption span{font-size:7px;letter-spacing:.18em;color:#a9ae9e}.kakejiku figcaption b{max-width:350px;font-family:var(--serif);font-size:clamp(24px,3.4vw,50px);font-weight:400;line-height:1.05}.kakejiku figcaption small{max-width:310px;font-family:var(--serif);font-size:14px;line-height:1.8;color:#bcc5b8}
.quiet-pair{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,4vw,60px);align-items:end;margin:0 auto 100px;max-width:1100px}.quiet-pair figure{position:relative;overflow:hidden;background:#090908}.quiet-pair figure:nth-child(2){margin-bottom:8vw}.quiet-pair img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;filter:saturate(.72) contrast(1.04);transition:filter .5s,transform .65s}.quiet-pair figure:first-child img{aspect-ratio:3/4}.quiet-pair figure:hover img{filter:saturate(1);transform:scale(1.02)}.quiet-pair figcaption{position:absolute;left:0;right:0;bottom:0;display:grid;gap:5px;padding:36px 14px 14px;background:linear-gradient(transparent,rgba(9,9,8,.88));color:var(--paper)}.quiet-pair figcaption span{font-size:7px;letter-spacing:.16em}.quiet-pair figcaption b{font-family:var(--serif);font-size:14px;font-weight:400}
.scan-values{position:absolute;z-index:2;inset:0;pointer-events:none}.scan-values i{position:absolute;left:var(--x);top:var(--y);padding:2px 4px;background:rgba(9,9,8,.78);color:var(--paper);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-size:7px;font-style:normal;letter-spacing:.06em;opacity:.38;transform:translateY(8px);transition:opacity .35s,transform .45s}.quiet-pair figure:hover .scan-values i{opacity:1;transform:none}.scan-values i:nth-child(2){transition-delay:.05s}.scan-values i:nth-child(3){transition-delay:.1s}.scan-values i:nth-child(4){transition-delay:.15s}

[hidden]{display:none!important}.study-viewer{position:fixed;z-index:100;inset:0;display:grid;grid-template-rows:52px 1fr;background:#090908;color:var(--paper)}.study-viewer__bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(235,231,220,.3);background:#090908;font-size:8px;letter-spacing:.12em}.study-viewer__bar p span{color:var(--soft)}.study-viewer__bar button{padding:9px 12px;background:transparent;color:var(--paper);border:1px solid rgba(235,231,220,.35);cursor:pointer;font-size:8px;letter-spacing:.12em}.study-viewer iframe{width:100%;height:100%;border:0;background:#090908}.fusuma{position:absolute;z-index:3;top:52px;bottom:0;width:50%;display:grid;place-items:center;background-color:var(--paper);background-image:radial-gradient(rgba(10,10,9,.11) .6px,transparent .8px);background-size:5px 5px;transition:transform .8s cubic-bezier(.77,0,.18,1)}.fusuma span{font-family:var(--serif);font-size:clamp(130px,25vw,380px);color:transparent;-webkit-text-stroke:1px rgba(10,10,9,.28)}.fusuma--left{left:0;border-right:1px solid var(--line)}.fusuma--right{right:0}.study-viewer.is-open .fusuma--left{transform:translateX(-101%)}.study-viewer.is-open .fusuma--right{transform:translateX(101%)}body.study-open{overflow:hidden}

.symbol-trail{position:fixed;z-index:40;inset:0;pointer-events:none;overflow:hidden}.symbol-trail span{position:absolute;font-family:var(--serif);font-size:18px;color:var(--red);animation:trail-fade .9s ease-out forwards}@keyframes trail-fade{to{opacity:0;transform:translateY(-26px) rotate(18deg) scale(.65)}}
.suimon{position:absolute;z-index:5;width:18px;height:18px;border:1px solid currentColor;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.2);opacity:.65;animation:suimon .85s ease-out forwards}@keyframes suimon{to{transform:translate(-50%,-50%) scale(7);opacity:0}}

/* Curated, locally materialized portfolio images. */
.media-placeholder--yms{background-image:url("assets/portfolio/spaces/yms-01.jpg")}
.media-placeholder--yms-detail{background-image:url("assets/portfolio/spaces/yms-02.jpg")}

@media (max-width:900px){
  .index-heading{grid-template-columns:1fr;padding-right:0}.index-heading>p:not(.vertical-note){margin-left:22vw}.category-stack{padding:0 6vw;--card-w:min(760px,80%)}.specimen-grid{grid-template-columns:repeat(2,1fr)}.ritual-layout{grid-template-columns:1fr}.tea-stage{min-height:560px}.space-strip{grid-template-columns:1fr 1fr}.space-card:nth-child(2){margin-top:10vw}.space-card:nth-child(3){margin-top:0;grid-column:2}.drawing-wall{grid-template-columns:1fr 1fr}.drawing-card:nth-child(1),.drawing-card:nth-child(2),.drawing-card:nth-child(3),.drawing-card:nth-child(4){grid-column:auto;margin-top:0}.about-grid{grid-template-columns:1fr}.about-grid p{max-width:600px;margin-left:auto}
}
@media (max-width:760px){
  :root{--pad:18px}
  .archive-nav{grid-template-columns:1fr auto;height:52px}.archive-nav nav{position:fixed;left:0;right:0;bottom:0;z-index:50;justify-content:center;gap:clamp(18px,6vw,30px);min-height:52px;overflow:hidden;padding:0 12px;background:color-mix(in srgb,var(--paper) 93%,transparent);border-top:1px solid var(--line);backdrop-filter:blur(12px);color:var(--ink);font-size:13px}.archive-nav nav a,.archive-nav nav button{display:flex;flex:0 0 auto;align-items:center;min-height:48px}.archive-nav .archive-return{position:fixed;z-index:51;right:12px;bottom:57px;display:block;padding:7px 9px;background:var(--paper);font-size:7px}.chapter,.index-section,.about-section{padding-top:80px;padding-bottom:104px}.index-heading h2,.chapter-title h2,.ritual-copy h2,.about-grid h2{line-height:.88}.chapter-title{grid-template-columns:1fr}.chapter-glyph{position:absolute;right:4vw;top:100px;font-size:160px}.specimen{min-height:250px}.space-strip{display:block}.space-card{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 35px!important}.space-card .media-placeholder{aspect-ratio:4/5}.space-card>div+div{display:block;margin:0}.space-card p{margin-top:10px}.ritual-layout{padding-inline:0}.ritual-steps button{min-height:80px}.tea-stage{min-height:500px}.drawing-wall{display:block}.drawing-card{min-height:330px;margin:0 0 20px!important;transform:none!important}.about-symbols{grid-template-columns:repeat(3,1fr)}footer{padding-bottom:48px}.kakejiku{grid-template-columns:1fr;margin-bottom:80px;padding:20px 0}.kakejiku__media{max-height:none}.ma-interlude{min-height:48vh}.symbol-trail{display:none}
}
@media (max-width:520px){
  .index-heading{padding:55px 0 34px}.index-heading>p:not(.vertical-note){display:none}.vertical-note{left:auto;right:0}.category-stack{margin-top:70px;padding:0 20px;perspective:620px;--card-w:100%;--card-h:128px;--card-stride:82px;--label-h:40px;--slab:9px}.category-card__slab{pointer-events:none}.category-card__glyph{font-size:44px;right:16px;bottom:12px}.category-card__label{gap:7px;padding:0 12px}.category-card__label b{font-size:13px}.category-card__label span{display:none}.specimen-grid{grid-template-columns:1fr}.specimen{min-height:210px}.specimen>b{font-size:105px}.space-card{grid-template-columns:1fr}.space-card .media-placeholder{aspect-ratio:4/3}.ritual-steps{grid-template-columns:repeat(5,minmax(0,1fr))}.ritual-steps button b{font-size:23px}.ritual-steps button span{display:none}.tea-stage{min-height:420px}.tea-whisk{height:110px}.about-symbols span{font-size:45px}
  .card-panel>.section-code:first-child span:last-child{display:none}
}
@media (max-width:760px){
  .object-stills{grid-template-columns:1fr;margin-top:60px}.object-stills figure:nth-child(2){margin-top:0}.object-stills img{aspect-ratio:4/3}.quiet-pair{grid-template-columns:1fr;margin-bottom:80px}.quiet-pair figure:nth-child(2){margin-bottom:0}.quiet-pair img,.quiet-pair figure:first-child img{aspect-ratio:4/3}.photo-archive{padding-inline:18px}.photo-archive__head{grid-template-columns:1fr auto}.photo-archive__head p{grid-column:1/-1}.photo-archive__head h2{font-size:78px}.photo-grid{display:flex;gap:10px;overflow-x:auto;margin-inline:-18px;padding:0 18px 18px;scroll-snap-type:x mandatory;scrollbar-width:none}.photo-tile,.photo-tile--wide,.photo-tile--tall{flex:0 0 78vw;height:58vh;min-height:390px;scroll-snap-align:center}.archive-hint{text-align:left}.illustration-rail button,.illustration-rail button:nth-child(3n+2){flex-basis:82vw}.illustration-rail img{height:62vh;max-height:540px}.image-viewer{grid-template-columns:42px minmax(0,1fr) 42px;padding-inline:4px}.image-viewer__arrow{width:34px}.motion-feature{grid-template-columns:1fr;min-height:680px}.motion-feature__copy{align-self:end}.motion-feature__copy h3{font-size:76px}.motion-feature__media{top:34%;right:8%;height:min(300px,48%)}.motion-link{grid-template-columns:44px minmax(0,1fr) auto;min-height:112px;gap:10px}.motion-link small{display:none}.motion-link::after{right:4%;font-size:120px}.projects-run span{font-size:82px}.glyph-legend{display:none}
  .archive-nav .archive-return{display:none}
  .film-strip__pair{grid-template-columns:1fr}.film-strip__head{grid-template-columns:1fr}.film-strip__head span{grid-column:1;grid-row:auto;text-align:left}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}.ritual-marquee span,.tea-steam i,.ma-interlude__line,.symbol-trail span,.suimon,.projects-run span{animation:none}.timeline i,.reveal,.media-placeholder,.drawing-card,.kakejiku__media,.fusuma,.motion-feature__media,.motion-link::after,.scan-values i,.image-viewer,.film-card video{transition:none}.reveal{opacity:1;transform:none}.kakejiku__media{clip-path:inset(0)}
}

/* Glass system — restrained details for the horse, dark optical glass for the
   third-screen archive tabs. Large headings deliberately remain unframed. */
.photo-grid-section__hint{
  padding:9px 13px;
  border:1px solid rgba(245,248,240,.14);
  border-radius:999px;
  background:rgba(10,13,11,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.horse-reveal__media{border:0;border-radius:0;box-shadow:none}
.horse-reveal.is-on .horse-reveal__media{box-shadow:none}

.category-card--objects{--glass-glow:79,151,103}
.category-card--spaces{--glass-glow:103,142,211}
.category-card--rituals{--glass-glow:220,76,61}
.category-card--drawn{--glass-glow:142,102,218}
.category-card--motion{--glass-glow:119,174,203}
.category-card--about{--glass-glow:201,145,91}
.category-card__face{
  overflow:hidden;
  border:1px solid rgba(239,246,255,.22);
  border-radius:18px;
  background-position:center;
  filter:saturate(.58) brightness(.69);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -36px 70px rgba(0,0,0,.5),
    0 20px 54px rgba(var(--glass-glow),.12);
}
.category-card__face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(70% 120% at 50% 110%,rgba(var(--glass-glow),.34),transparent 58%),
    linear-gradient(140deg,rgba(255,255,255,.13),transparent 36%,rgba(2,5,9,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 1px 0 0 rgba(255,255,255,.07);
  pointer-events:none;
}
.category-card__edge{
  border:1px solid rgba(239,246,255,.22);
  background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(var(--glass-glow),.42),rgba(255,255,255,.12));
  box-shadow:0 0 24px rgba(var(--glass-glow),.2);
}
.category-card__label{
  border:1px solid rgba(239,246,255,.2);
  border-radius:14px;
  background:
    radial-gradient(80% 170% at 12% 130%,rgba(var(--glass-glow),.24),transparent 62%),
    linear-gradient(135deg,rgba(255,255,255,.105),rgba(7,10,15,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.23),inset 0 -16px 30px rgba(0,0,0,.22),0 12px 34px rgba(0,0,0,.28);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
}
.category-stack{counter-reset:archive-tab}
.category-card{counter-increment:archive-tab}
.category-card__label::before{
  content:"0" counter(archive-tab);
  flex:none;
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  color:rgba(245,248,255,.72);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.04em;
  background:rgba(255,255,255,.04);
}
.category-card__label::after{
  flex:none;
  min-width:64px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  text-align:center;
  opacity:.78;
}
.category-card__label b{font-size:clamp(14px,1.38vw,18px)}
.category-card__label span{opacity:.78}
@media (hover:hover) and (pointer:fine){
  .category-stack .category-card:hover,
  .category-stack .category-card:focus-visible{
    transform:translateX(10px) translateZ(24px);
    filter:none;
  }
  .category-stack .category-card:hover .category-card__face,
  .category-stack .category-card:focus-visible .category-card__face{
    filter:saturate(.72) brightness(.82);
  }
  .category-stack .category-card:hover .category-card__label,
  .category-stack .category-card:focus-visible .category-card__label{
    border-color:rgba(255,255,255,.42);
    background:
      radial-gradient(90% 190% at 12% 130%,rgba(var(--glass-glow),.34),transparent 62%),
      linear-gradient(135deg,rgba(255,255,255,.14),rgba(7,10,15,.72));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.36),0 18px 46px rgba(var(--glass-glow),.24);
  }
  .category-stack .category-card:hover .category-card__label::after,
  .category-stack .category-card:focus-visible .category-card__label::after{
    border-color:rgba(255,255,255,.4);
    background:rgba(255,255,255,.13);
    opacity:1;
  }
}

@media (max-width:700px){
  .category-card__face{border-radius:18px}
  .category-card__label{border-radius:12px}
  .category-card__label::before{width:23px;height:23px;font-size:7px}
  .category-card__label::after{content:"↗";min-width:0;padding:6px 7px;font-size:10px}
}

/* --------------------------------------------------------------------------
   SELECTED WORLDS / flat photographic index

   The opening animation still clones the same card chrome, but these rules are
   deliberately scoped to cards while they live in the index stack. The dialog
   portal therefore keeps its existing geometry and panel behaviour.
---------------------------------------------------------------------------- */
.index-card-view{cursor:default}
.index-section{padding-top:clamp(76px,6vw,90px);padding-bottom:64px}
.index-card-view .index-heading{
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  align-items:end;
  gap:clamp(36px,4vw,60px);
  margin:0 8vw;
  padding:clamp(50px,5vw,70px) 0 clamp(36px,4vw,56px);
}
.index-card-view .index-heading h2{
  max-width:820px;
  color:#f1eee5;
  font-size:clamp(56px,5.65vw,84px);
  line-height:.88;
  letter-spacing:-.055em;
  text-wrap:balance;
  white-space:nowrap;
  user-select:none;
}
.index-card-view .index-heading>p:not(.vertical-note){
  align-self:end;
  max-width:360px;
  padding-bottom:4px;
  color:rgba(235,231,220,.72);
  font-size:clamp(14px,1.25vw,18px);
  line-height:1.65;
}
.index-card-view .vertical-note{
  left:0;
  top:22px;
  writing-mode:horizontal-tb;
  color:rgba(235,231,220,.42);
  letter-spacing:.22em;
}

.work-view-switcher{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 8vw 18px;
  color:rgba(242,240,233,.7);
  font-size:8px;
  letter-spacing:.16em;
}
.work-view-switcher>span{margin-right:4px;color:rgba(242,240,233,.4)}
.work-view-switcher button{
  min-width:66px;
  padding:9px 13px;
  border:1px solid rgba(242,240,233,.24);
  border-radius:999px;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  transition:background .25s,color .25s,border-color .25s,transform .25s;
}
.work-view-switcher button[aria-pressed="true"]{border-color:#f1eee5;background:#f1eee5;color:#0a0a09}
.work-view-switcher button:hover,.work-view-switcher button:focus-visible{border-color:#f1eee5;outline:0;transform:translateY(-1px)}
.work-view-switcher small{margin-left:auto;color:rgba(242,240,233,.38);font-size:7px;letter-spacing:.14em}

.index-card-view .category-stack{
  display:grid;
  gap:16px;
  height:auto;
  margin:0 8vw;
  padding:0;
  perspective:none;
}
.index-card-view .category-stack::after{display:none}
.index-card-view .category-stack .category-card{
  position:relative;
  top:auto!important;
  left:auto;
  z-index:1!important;
  display:block;
  width:100%;
  height:clamp(138px,11vw,172px);
  overflow:hidden;
  border:1px solid rgba(235,231,220,.18);
  background:#11110f;
  transform:none!important;
  transform-style:flat;
  transition:border-color .28s ease,transform .35s cubic-bezier(.2,.75,.2,1),box-shadow .35s ease;
}
.index-card-view .category-stack .category-card__slab,
.index-card-view .category-stack .category-card.is-below .category-card__slab{
  inset:0;
  top:0;
  bottom:auto;
  height:100%;
  transform:none!important;
  transform-style:flat;
}
.index-card-view .category-stack .category-card__face{
  inset:0;
  border:0;
  border-radius:0!important;
  background-position:center;
  filter:saturate(.82) brightness(.9) contrast(1.04);
  box-shadow:none;
  transform:scale(1.002);
  transition:filter .35s ease,transform .7s cubic-bezier(.2,.75,.2,1);
}
.index-card-view .category-stack .category-card__face::after{
  border-radius:0!important;
  background:linear-gradient(90deg,rgba(5,5,4,.08),rgba(5,5,4,.2) 55%,rgba(5,5,4,.58));
  box-shadow:none;
}
.index-card-view .category-stack .category-card--objects .category-card__face{background-image:url("assets/portfolio/launch/new-wave/column-01.jpg")}
.index-card-view .category-stack .category-card--spaces .category-card__face{background-image:url("assets/portfolio/launch/new-wave/column-02.jpg")}
.index-card-view .category-stack .category-card--rituals .category-card__face{background-image:url("assets/portfolio/launch/new-wave/column-03.jpg")}
.index-card-view .category-stack .category-card--drawn .category-card__face{background-image:url("assets/portfolio/launch/new-wave/column-04.jpg")}
.index-card-view .category-stack .category-card--motion .category-card__face{background-image:url("assets/portfolio/launch/new-wave/column-05.jpg")}
.index-card-view .category-stack .category-card--about .category-card__face{background-image:url("assets/about/alice-portrait-about.jpg")}
.index-card-view .category-stack .category-card__edge{display:none}
.index-card-view .category-stack .category-card__glyph{
  right:24px;
  bottom:6px;
  color:rgba(242,240,233,.22);
  font-size:clamp(72px,8vw,118px);
  opacity:1;
}
.index-card-view .category-stack .category-card__label{
  inset:0;
  z-index:2;
  height:100%;
  justify-content:flex-start;
  align-items:flex-end;
  gap:14px;
  padding:24px;
  border:0;
  border-radius:0!important;
  background:linear-gradient(180deg,transparent 18%,rgba(7,7,6,.12) 42%,rgba(7,7,6,.86) 100%);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.index-card-view .category-stack .category-card__label::before{
  width:auto;
  height:auto;
  padding:0 0 2px;
  border:0;
  border-radius:0!important;
  background:none;
  color:rgba(242,240,233,.62);
  font-size:8px;
  transform:none;
}
.index-card-view .category-stack .category-card__label b{
  font-family:var(--sans);
  font-size:clamp(17px,1.7vw,24px);
  font-weight:600;
  letter-spacing:-.015em;
}
.index-card-view .category-stack .category-card__label span{
  padding-bottom:2px;
  color:rgba(242,240,233,.68);
  font-size:9px;
  letter-spacing:.11em;
  opacity:1;
}
.index-card-view .category-stack .category-card__label::after{
  min-width:0;
  margin-left:auto;
  padding:0 0 2px;
  border:0;
  border-radius:0!important;
  background:none;
  clip-path:none;
  color:rgba(242,240,233,.72);
  opacity:1;
}

/* Reference 01: the same six work covers orbit a quiet central field. */
.index-card-view .category-stack[data-work-layout="ring"]{
  position:relative;
  display:block;
  width:min(860px,84vw);
  height:min(760px,72vw);
  min-height:620px;
  margin-inline:auto;
  border:1px solid rgba(242,240,233,.12);
  border-radius:50%;
  background:radial-gradient(circle,rgba(242,240,233,.055),transparent 58%);
}
.index-card-view .category-stack[data-work-layout="ring"] .category-card{
  --ring-angle:0deg;
  position:absolute;
  left:50%;
  top:50%!important;
  width:clamp(150px,15vw,205px);
  height:clamp(205px,20vw,282px);
  transform:translate(-50%,-50%) rotate(var(--ring-angle)) translateY(clamp(-310px,-28vw,-225px)) rotate(calc(var(--ring-angle) * -1))!important;
}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(1){--ring-angle:-150deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(2){--ring-angle:-90deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(3){--ring-angle:-30deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(4){--ring-angle:30deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(5){--ring-angle:90deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card:nth-child(6){--ring-angle:150deg}
.index-card-view .category-stack[data-work-layout="ring"] .category-card__label,
.index-card-view .category-stack[data-work-layout="shelf"] .category-card__label{align-items:flex-start;flex-direction:column;justify-content:flex-end;gap:5px}
.index-card-view .category-stack[data-work-layout="ring"] .category-card__label span,
.index-card-view .category-stack[data-work-layout="shelf"] .category-card__label span{display:none}
.index-card-view .category-stack[data-work-layout="ring"] .category-card__label b,
.index-card-view .category-stack[data-work-layout="shelf"] .category-card__label b{
  max-width:calc(100% - 20px);
  font-size:clamp(12px,1.25vw,16px);
  line-height:1.08;
  white-space:normal;
  text-align:left;
}
.index-card-view .category-stack[data-work-layout="ring"] .category-card__label::after,
.index-card-view .category-stack[data-work-layout="shelf"] .category-card__label::after{position:absolute;right:16px;bottom:18px}

/* Reference 02: covers sit like a browsable row of sleeves in perspective. */
.index-card-view .category-stack[data-work-layout="shelf"]{
  position:relative;
  display:block;
  height:620px;
  overflow:hidden;
  perspective:1300px;
  background:linear-gradient(180deg,rgba(242,240,233,.035),transparent 72%);
}
.index-card-view .category-stack[data-work-layout="shelf"]::before{
  content:"";
  position:absolute;
  left:8%;right:8%;bottom:12%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(242,240,233,.34),transparent);
}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card{
  --shelf-x:0px;
  --shelf-z:0px;
  position:absolute;
  left:50%;
  top:48%!important;
  width:clamp(175px,18vw,245px);
  height:clamp(255px,27vw,360px);
  transform:translate(calc(-50% + var(--shelf-x)),-50%) translateZ(var(--shelf-z)) rotateY(-24deg)!important;
  transform-origin:center right;
  box-shadow:22px 18px 42px rgba(0,0,0,.42);
}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(1){--shelf-x:-300px;--shelf-z:-180px}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(2){--shelf-x:-180px;--shelf-z:-120px}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(3){--shelf-x:-60px;--shelf-z:-60px}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(4){--shelf-x:60px;--shelf-z:0px}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(5){--shelf-x:180px;--shelf-z:60px}
.index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(6){--shelf-x:300px;--shelf-z:120px}

.portfolio-socials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:72px 8vw 0;border-top:1px solid rgba(242,240,233,.2)}
.portfolio-socials>p{grid-column:1/-1;display:flex;justify-content:space-between;padding:14px 0;color:rgba(242,240,233,.42);font-size:7px;letter-spacing:.16em}
.portfolio-socials>a{position:relative;display:flex;min-height:118px;flex-direction:column;justify-content:flex-end;gap:10px;padding:18px;border:1px solid rgba(242,240,233,.16);border-right:0;color:#f1eee5;transition:background .25s,color .25s}
.portfolio-socials>a:last-child{border-right:1px solid rgba(242,240,233,.16)}
.portfolio-socials small{color:rgba(242,240,233,.5);font-size:7px;letter-spacing:.13em}
.portfolio-socials b{overflow-wrap:anywhere;font-family:var(--serif);font-size:clamp(20px,2vw,30px);font-weight:400}
.portfolio-socials i{position:absolute;right:16px;top:16px;font-style:normal}
.portfolio-socials>a:hover,.portfolio-socials>a:focus-visible{background:#f1eee5;color:#0a0a09;outline:0}
.portfolio-socials>a:hover small,.portfolio-socials>a:focus-visible small{color:rgba(10,10,9,.58)}
@media (hover:hover) and (pointer:fine){
  .index-card-view .category-stack[data-work-layout="flat"] .category-card:hover,
  .index-card-view .category-stack[data-work-layout="flat"] .category-card:focus-visible{
    z-index:2!important;
    border-color:rgba(242,240,233,.55);
    box-shadow:0 22px 54px rgba(0,0,0,.34);
    filter:none;
    transform:translateY(-3px)!important;
  }
  .index-card-view .category-stack .category-card:hover .category-card__face,
  .index-card-view .category-stack .category-card:focus-visible .category-card__face{
    filter:saturate(1) brightness(1) contrast(1.02);
    transform:scale(1.025);
  }
  .index-card-view .category-stack .category-card:hover .category-card__label,
  .index-card-view .category-stack .category-card:focus-visible .category-card__label{
    border:0;
    background:linear-gradient(180deg,transparent 14%,rgba(7,7,6,.08) 38%,rgba(7,7,6,.78) 100%);
    box-shadow:none;
  }
}
.index-card-view .archive-foot{padding:48px 8vw 0}

@media (max-width:1000px){
  .index-card-view .index-heading{
    grid-template-columns:1fr;
    gap:24px;
    margin-inline:4vw;
  }
  .index-card-view .index-heading>p:not(.vertical-note){margin-left:0;max-width:560px}
  .index-card-view .category-stack{margin-inline:4vw}
  .work-view-switcher,.portfolio-socials{margin-inline:4vw}
  .portfolio-socials{grid-template-columns:repeat(2,minmax(0,1fr))}.portfolio-socials>a:nth-of-type(2n){border-right:1px solid rgba(242,240,233,.16)}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(1){--shelf-x:-235px}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(2){--shelf-x:-141px}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(3){--shelf-x:-47px}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(4){--shelf-x:47px}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(5){--shelf-x:141px}
  .index-card-view .category-stack[data-work-layout="shelf"] .category-card:nth-child(6){--shelf-x:235px}
}
@media (max-width:700px){
  .index-card-view .index-heading{margin-inline:0;padding:52px 0 30px}
  .index-card-view .index-heading h2{font-size:clamp(44px,13vw,52px);line-height:.92;white-space:normal}
  .index-card-view .index-heading>p:not(.vertical-note){display:block;font-size:14px;line-height:1.55}
  .index-card-view .vertical-note{top:18px;right:auto}
  .index-card-view .category-stack{gap:12px;margin-inline:0}
  .index-card-view .category-stack .category-card{height:128px}
  .index-card-view .category-stack .category-card__label{gap:9px;padding:16px}
  .index-card-view .category-stack .category-card__label b{font-size:15px}
  .index-card-view .category-stack .category-card__label span{display:none}
  .index-card-view .category-stack .category-card__label::after{content:"OPEN ↗";padding-bottom:1px;font-size:7px}
  .index-card-view .category-stack .category-card__glyph{right:14px;font-size:76px}
  .index-card-view .archive-foot{padding:36px 0 0}
  .work-view-switcher{margin:0 0 16px}.work-view-switcher button:not([data-work-view="flat"]),.work-view-switcher small{display:none}
  .index-card-view .category-stack[data-work-layout]{display:grid;width:auto;height:auto;min-height:0;margin-inline:0;border:0;border-radius:0;background:none;perspective:none}
  .index-card-view .category-stack[data-work-layout] .category-card{position:relative;left:auto;top:auto!important;width:100%;height:128px;transform:none!important;box-shadow:none}
  .index-card-view .category-stack[data-work-layout] .category-card__label{align-items:flex-end;flex-direction:row;justify-content:flex-start;gap:9px}
  .portfolio-socials{grid-template-columns:1fr;margin:54px 0 0}.portfolio-socials>a{min-height:98px;border-right:1px solid rgba(242,240,233,.16);border-bottom:0}.portfolio-socials>a:last-child{border-bottom:1px solid rgba(242,240,233,.16)}
}

/* Keep the compact Safari window authoritative after the legacy mobile card
   fallback above. */
@media (max-width:700px){
  .index-card-view .category-stack[data-work-layout="safari"]{
    position:relative;
    display:block;
    width:100%;
    height:290px;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    border:1px solid rgba(242,240,233,.18);
    border-radius:8px;
    background:#171816;
    box-shadow:none;
    perspective:none;
  }
  .index-card-view .category-stack[data-work-layout="safari"] .category-card{
    position:absolute;
    inset:0;
    left:0;
    top:0!important;
    display:block;
    width:100%;
    height:100%;
    transform:none!important;
    box-shadow:none;
  }
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__slab{
    inset:52px 0 0;
    top:52px;
    height:238px;
    transform:none!important;
  }
  .index-card-view .category-stack[data-work-layout="safari"] .category-card__label{
    left:calc(var(--tab-index) * 20%);
    top:26px;
    width:20%;
    height:22px;
    padding:0 3px;
    align-items:center;
    justify-content:center;
  }
}

/* ===========================================================================
   Editorial pass — 260805
   Alice's brief: the page read as an interaction demo, not a designer's job
   portfolio. Everything below trades card chrome (glass, borders, drop
   shadows, stacked panels) for the two things an editorial layout actually
   uses: whitespace and type scale. Nothing here removes an interaction; it
   only lowers how loudly each one announces itself.
   =========================================================================== */

/* ---- Professional work: flat, first-layer, no card at all ---------------- */
.work-history{
  margin:clamp(90px,11vw,150px) 8vw 0;
  padding-top:clamp(40px,5vw,68px);
  border-top:1px solid rgba(242,240,233,.18);
  color:var(--paper);
}
.work-history__label{
  margin:0 0 clamp(18px,2.4vw,30px);
  color:rgba(242,240,233,.42);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.18em;
}
.work-history h2{
  margin:0 0 clamp(34px,4.5vw,62px);
  font-family:var(--serif);
  font-size:clamp(40px,5.4vw,82px);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.05em;
}
.work-history__list{margin:0;padding:0;list-style:none}
.work-history__item{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:8px clamp(30px,6vw,90px);
  padding:clamp(26px,3.2vw,42px) 0;
  border-top:1px solid rgba(242,240,233,.13);
}
.work-history__item:last-child{border-bottom:1px solid rgba(242,240,233,.13)}
.work-history__item h3{
  grid-column:1;
  grid-row:1;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(24px,2.6vw,38px);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.03em;
}
.work-history__tag{
  margin-left:10px;
  padding:3px 7px;
  border:1px solid rgba(242,240,233,.3);
  color:rgba(242,240,233,.6);
  font-family:var(--mono);
  font-size:7px;
  letter-spacing:.14em;
  vertical-align:middle;
}
.work-history__meta{
  grid-column:1;
  grid-row:2;
  margin:12px 0 0;
  color:rgba(242,240,233,.44);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.14em;
}
.work-history__line{
  grid-column:2;
  grid-row:1;
  margin:0;
  max-width:42ch;
  font-family:var(--serif);
  font-size:clamp(15px,1.35vw,19px);
  line-height:1.6;
  color:rgba(235,231,220,.8);
}
.work-history__outcome{
  grid-column:2;
  grid-row:2;
  margin:12px 0 0;
  max-width:46ch;
  color:rgba(235,231,220,.52);
  font-size:12px;
  line-height:1.7;
}
.work-history__links{
  grid-column:2;
  grid-row:3;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:14px 0 0;
}
.work-history__links a{
  padding-bottom:3px;
  border-bottom:1px solid rgba(242,240,233,.28);
  color:rgba(242,240,233,.72);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.12em;
  transition:color .2s,border-color .2s;
}
.work-history__links a:hover,.work-history__links a:focus-visible{color:var(--paper);border-bottom-color:var(--paper);outline:0}

/* ---- Photo Gallop lead-in: names the piece and buys a beat of silence ---- */
.experiment-lead{
  margin:clamp(84px,10vw,150px) 8vw clamp(46px,6vw,88px);
  color:var(--paper);
}
.experiment-lead>p:first-child{
  margin:0 0 16px;
  color:rgba(242,240,233,.42);
  font-family:var(--mono);
  font-size:8px;
  letter-spacing:.18em;
}
.experiment-lead h3{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(38px,4.6vw,70px);
  font-weight:400;
  line-height:.94;
  letter-spacing:-.045em;
}
.experiment-lead__note{
  margin:16px 0 0;
  max-width:40ch;
  font-family:var(--serif);
  font-size:clamp(14px,1.3vw,18px);
  line-height:1.6;
  color:rgba(235,231,220,.62);
}

/* ---- Fewer layers -------------------------------------------------------
   The film strip and the horse canvas were each their own frosted slab
   floating over the page. They are sections, not cards: drop the blur, the
   lift shadow and most of the tint so the page reads as one surface. */
.film-strip--playground{background:transparent;box-shadow:none}
.playground-section .photo-grid-section--horse{
  background:rgba(6,7,6,.34);
  box-shadow:none;
}
.playground-section .photo-grid-section--horse::before{
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  background:linear-gradient(180deg,rgba(9,11,9,.24),rgba(4,5,4,.62));
}

/* ---- Contact: a list, not a grid of six tiles --------------------------- */
.portfolio-socials{grid-template-columns:1fr;margin-top:clamp(90px,11vw,150px)}
.portfolio-socials>a,
.portfolio-socials__soon{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,150px) minmax(0,1fr);
  align-items:baseline;
  gap:10px 30px;
  min-height:0;
  padding:22px 0;
  border:0;
  border-bottom:1px solid rgba(242,240,233,.13);
  color:#f1eee5;
}
.portfolio-socials>a:last-child,
.portfolio-socials>a:last-of-type{border-right:0}
.portfolio-socials b{font-size:clamp(19px,1.9vw,27px)}
.portfolio-socials i{right:2px;top:26px}
.portfolio-socials>a:hover,
.portfolio-socials>a:focus-visible{background:transparent;color:#b9a3e0;outline:0}
.portfolio-socials__soon{color:rgba(242,240,233,.42)}
.portfolio-socials__soon b{font-family:var(--serif);font-weight:400}

/* ---- Slower, sparser entrances -----------------------------------------
   Copy, cards and images all arrived on the same 0.8s curve at the same
   moment. Longer, gentler, shorter travel: the eye gets one thing at a time. */
.reveal{
  transform:translateY(18px);
  transition:opacity 1.05s ease,transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.work-history__item:nth-child(2){transition-delay:.1s}
.work-history__item:nth-child(3){transition-delay:.2s}

@media (max-width:900px){
  .work-history__item{grid-template-columns:1fr;gap:0}
  .work-history__item h3,
  .work-history__line,
  .work-history__meta,
  .work-history__outcome,
  .work-history__links{grid-column:1;grid-row:auto}
  .work-history__line{margin-top:12px}
}
@media (max-width:700px){
  .work-history{margin-inline:0;padding-top:34px}
  .work-history h2{font-size:clamp(36px,11vw,52px)}
  .experiment-lead{margin-inline:0}
  .experiment-lead h3{font-size:clamp(34px,10vw,48px)}
  .portfolio-socials{margin-inline:0}
  .portfolio-socials>a,
  .portfolio-socials__soon{grid-template-columns:1fr;gap:6px;padding:18px 0;min-height:0;border-right:0}
  .portfolio-socials>a:last-child{border-bottom:1px solid rgba(242,240,233,.13)}
  .portfolio-socials i{top:20px}
}
@media (prefers-reduced-motion:reduce){
  .work-history__item{transition-delay:0s!important}
}

/* Mobile bottom nav gained a fifth item (Experience). At 390px the row was
   1–2px past the fixed bar's overflow:hidden edge, clipping "Contact": tighten
   the gap, and let it scroll rather than clip if a longer label ever lands. */
@media (max-width:700px){
  .archive-nav nav{
    gap:clamp(10px,3.4vw,22px);
    padding:0 10px;
    font-size:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .archive-nav nav::-webkit-scrollbar{display:none}
}

/* One left measure for the whole archive column. About sat ~60px inboard of
   every other block (Experience, Selected Work, Playground, Contact all start
   at 8vw); on a page this typographic, two competing margins read as an error.
   The id is needed because a legacy `#about{padding:clamp(26px,3vw,46px)}` from
   the old about-window still outranks any class rule on this element. */
#about.index-about-home{padding:clamp(34px,5vh,70px) 8vw 28px}
#experience{scroll-margin-top:76px}
@media (max-width:700px){
  #about.index-about-home{padding:34px 0 62px}
}

/* Three films across (260805). A third row-mate makes each frame narrower, so
   the row itself gets the width back: near-flush side padding and a tighter
   gutter, and the captions stay at the two-up size rather than shrinking with
   the column. Falls back to 2-up then 1-up as the columns get too narrow. */
.film-strip--playground{padding-inline:clamp(10px,1.4vw,22px)}
.film-strip__pair--three{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,20px)}
.film-strip__pair--three .film-card figcaption b{font-size:clamp(18px,1.9vw,28px)}
@media (max-width:1100px){
  .film-strip__pair--three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .film-strip__pair--three{grid-template-columns:1fr}
}

/* Photo Gallop on a phone: the horse is 1.6:1, so on a narrow screen its width
   is the binding constraint and it can only ever be ~215px tall. In a 78vh
   canvas that left it stranded in the middle of a mostly-empty black field.
   Shorten the canvas to match the subject instead of scaling the subject up
   (which would crop it at the sides). Verified: figure sits 46px from the top
   with 79px below, no clipping at any cursor angle. */
@media (max-width:700px){
  .playground-section .photo-grid-section--playground{height:min(48vh,380px);min-height:330px}
  .photo-grid-section__intro{top:22px}
  .photo-grid-section__hint{bottom:14px}
}

/* =========================================================================
   SIGNAL LANGUAGE — 260805
   The hero's instrumentation vocabulary, carried through the rest of the page.
   Behaviour lives in signal-language.js; every block here degrades to readable
   static HTML if that script never runs.

   The old .portfolio-socials rules above are now dead — the contact markup was
   replaced by .contact-panel. Left in place rather than deleted so this change
   stays easy to revert.
   ========================================================================= */

:root{
  --sig:#d8ff52;
  --sig-rgb:216,255,82;
  --sig-dur:1.05s;
  --sig-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Shared corner brackets --------------------------------------------
   Copied in behaviour from .corner in tea-vision.css, but without the
   flicker animation: down here they are punctuation, not instrumentation
   under load. */
.contact-channel > .corner,
.case-toggle > .corner{
  position:absolute;
  width:9px;height:9px;
  border-color:var(--sig);
  border-style:solid;
  /* tea-vision.css styles .corner globally and runs corner-flicker on it. A
     running animation beats a plain declaration, so without this the keyframes
     drive opacity and every bracket sits lit instead of appearing on hover.
     Up in the hero the flicker is the point; down here it is noise. */
  animation:none;
  opacity:0;
  transition:opacity .3s var(--sig-ease);
  pointer-events:none;
}
.contact-channel > .corner-a,.case-toggle > .corner-a{left:-1px;top:-1px;border-width:1px 0 0 1px}
.contact-channel > .corner-b,.case-toggle > .corner-b{right:-1px;top:-1px;border-width:1px 1px 0 0}
.contact-channel > .corner-c,.case-toggle > .corner-c{left:-1px;bottom:-1px;border-width:0 0 1px 1px}
.contact-channel > .corner-d,.case-toggle > .corner-d{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.contact-channel:hover > .corner,
.contact-channel:focus-within > .corner,
.case-toggle:hover > .corner,
.case-toggle:focus-visible > .corner{opacity:1}

/* ---- Contact panel ------------------------------------------------------ */
.contact-panel{
  position:relative;
  margin:clamp(90px,11vw,150px) 0 0;
  padding-top:26px;
  border-top:1px solid rgba(242,240,233,.2);
}
.contact-panel__signals{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.contact-panel > *:not(.contact-panel__signals){position:relative;z-index:1}

.contact-panel__code{
  display:flex;justify-content:space-between;gap:16px;
  color:rgba(242,240,233,.42);
  font-size:7px;letter-spacing:.16em;
}
.contact-panel__head h2{
  margin:22px 0 0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,6.4vw,92px);line-height:.86;letter-spacing:-.05em;
  color:var(--paper);
}
.contact-panel__head h2 em{font-style:italic;color:rgba(242,240,233,.62)}
.contact-panel__say{
  max-width:52ch;margin:20px 0 0;
  font-size:13px;line-height:1.75;
  color:rgba(242,240,233,.74);
}
.contact-panel__say span[lang="en"]{
  display:inline-block;margin-top:6px;
  font-size:11px;letter-spacing:.02em;
  color:rgba(242,240,233,.44);
}

/* Live readouts — the hero's BREWING CLIMATE aside, restated. */
.contact-status{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:38px 0 0;
  border:1px solid rgba(242,240,233,.14);
}
.contact-status > div{
  padding:13px 14px;
  border-right:1px solid rgba(242,240,233,.14);
}
.contact-status > div:last-child{border-right:0}
.contact-status dt{
  color:rgba(242,240,233,.42);
  font-size:7px;letter-spacing:.14em;
}
.contact-status dd{
  margin:7px 0 0;
  color:rgba(242,240,233,.9);
  font-size:11px;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.contact-status dd.is-open{display:flex;align-items:center;gap:7px;color:var(--sig)}
.contact-status dd.is-open i{
  width:5px;height:5px;border-radius:50%;
  background:var(--sig);
  box-shadow:0 0 8px rgba(var(--sig-rgb),.8);
  animation:sig-pulse 2.4s var(--sig-ease) infinite;
}
@keyframes sig-pulse{0%,100%{opacity:1}50%{opacity:.28}}

/* Channels */
.contact-channels{list-style:none;margin:0;padding:0}
.contact-channel{
  position:relative;
  padding:24px 0 24px 14px;
  border-bottom:1px solid rgba(242,240,233,.13);
  transition:padding-left .3s var(--sig-ease);
}
.contact-channel:hover,.contact-channel:focus-within{padding-left:22px}
.contact-channel small{
  display:block;
  color:rgba(242,240,233,.5);
  font-size:7px;letter-spacing:.14em;
}
.contact-channel b{
  display:block;margin-top:9px;
  overflow-wrap:anywhere;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.1vw,30px);
  color:#f1eee5;
}
.contact-channel b a{color:inherit;transition:color .25s}
.contact-channel b a:hover,.contact-channel b a:focus-visible{color:var(--sig);outline:0}
.contact-channel b i{font-style:normal;font-size:.62em;vertical-align:middle;opacity:.6}
.contact-channel--primary b{font-size:clamp(22px,2.5vw,36px)}

.contact-channel__actions{display:flex;align-items:center;gap:10px;margin-top:14px}
.contact-copy,
.contact-channel__actions a{
  padding:7px 13px;
  border:1px solid rgba(242,240,233,.26);
  background:none;
  color:rgba(242,240,233,.86);
  font-family:var(--mono);font-size:8px;letter-spacing:.14em;
  cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.contact-copy:hover,.contact-copy:focus-visible,
.contact-channel__actions a:hover,.contact-channel__actions a:focus-visible{
  border-color:var(--sig);color:var(--sig);outline:0;
}
.contact-copy.is-copied{background:var(--sig);border-color:var(--sig);color:#11150d}
.contact-copy.is-failed{border-color:rgba(242,240,233,.6);color:rgba(242,240,233,.6)}

/* The three secondary accounts: present, but clearly not the front door. */
.contact-channel__also{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:13px 0 0;
  color:rgba(242,240,233,.36);
  font-size:8px;letter-spacing:.12em;
}
.contact-channel__also a{color:rgba(242,240,233,.56);transition:color .25s}
.contact-channel__also a:hover,.contact-channel__also a:focus-visible{color:var(--sig);outline:0}
.contact-channel__also span{opacity:.4}

@media (max-width:860px){
  .contact-status{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-status > div:nth-child(2n){border-right:0}
  .contact-status > div:nth-child(-n+2){border-bottom:1px solid rgba(242,240,233,.14)}
}
@media (max-width:640px){
  .contact-panel{margin-top:64px}
  .contact-channel{padding-left:0}
  .contact-channel:hover,.contact-channel:focus-within{padding-left:6px}
}

/* ---- Work card readouts (B9) -------------------------------------------
   The same "this object is being measured" tag the hero puts on its scans,
   applied to the five work cards. */
.category-card{position:relative}
.category-card__readout{
  position:absolute;right:12px;bottom:10px;
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:7px;letter-spacing:.13em;
  color:var(--sig);
  opacity:0;transform:translateY(4px);
  transition:opacity .3s var(--sig-ease),transform .3s var(--sig-ease);
  pointer-events:none;
}
.category-card__readout i{
  width:4px;height:4px;
  background:var(--sig);
  box-shadow:0 0 7px rgba(var(--sig-rgb),.75);
}
.category-card:hover .category-card__readout,
.category-card:focus-visible .category-card__readout,
.category-card.is-preview .category-card__readout{opacity:1;transform:none}

/* ---- Cursor readout (B10) ---------------------------------------------- */
.cursor-readout{
  position:fixed;top:0;left:0;z-index:60;
  display:flex;align-items:center;gap:9px;
  margin:16px 0 0 18px;
  padding:5px 9px;
  border:1px solid rgba(var(--sig-rgb),.3);
  background:rgba(8,10,7,.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  font-family:var(--mono);font-size:7px;letter-spacing:.13em;
  color:rgba(var(--sig-rgb),.9);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--sig-ease);
}
.cursor-readout.is-visible{opacity:1}
.cursor-readout b{font-weight:400;color:var(--sig)}
.cursor-readout span{color:rgba(242,240,233,.5);font-variant-numeric:tabular-nums}
@media (max-width:900px){.cursor-readout{display:none}}

/* ---- Section leader lines (B11) ---------------------------------------- */
[data-signal-section]{position:relative}
.signal-leader{
  position:absolute;top:0;left:0;
  display:flex;align-items:center;gap:5px;
  pointer-events:none;
}
.signal-leader i{
  display:block;height:1px;width:0;
  background:repeating-linear-gradient(90deg,rgba(var(--sig-rgb),.55) 0 2px,transparent 2px 6px);
  transition:width 1.15s var(--sig-ease);
}
.signal-leader em{
  width:4px;height:4px;
  border:1px solid rgba(var(--sig-rgb),.6);
  opacity:0;
  transition:opacity .4s var(--sig-ease) .9s;
}
[data-signal-section].is-drawn .signal-leader i{width:clamp(46px,7vw,110px)}
[data-signal-section].is-drawn .signal-leader em{opacity:1}

/* ---- Case study (13) ---------------------------------------------------- */
/* .work-history__item is a two-column grid with every child explicitly placed.
   Left to auto-placement these two land side by side — the button in column
   one and the whole case study crushed into column two. Both span the full
   row instead, and justify-self keeps the button at its natural width. */
.case-toggle,
.case-study{grid-column:1/-1}
.case-toggle{justify-self:start}

.case-toggle{
  position:relative;
  display:inline-flex;align-items:center;gap:9px;
  margin-top:18px;
  padding:9px 15px;
  border:1px solid rgba(242,240,233,.24);
  background:none;
  color:rgba(242,240,233,.88);
  font-family:var(--mono);font-size:8px;letter-spacing:.15em;
  cursor:pointer;
  transition:border-color .25s,color .25s;
}
.case-toggle:hover,.case-toggle:focus-visible{border-color:var(--sig);color:var(--sig);outline:0}
.case-toggle i{font-style:normal;transition:transform .3s var(--sig-ease)}
.case-toggle[aria-expanded="true"] i{transform:rotate(180deg)}

.case-study{margin-top:26px;border-top:1px solid rgba(242,240,233,.14)}
.case-study__inner{padding-top:26px;max-width:74ch}
.case-study__facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;margin-bottom:38px;
  border:1px solid rgba(242,240,233,.14);
}
.case-study__facts > div{padding:13px 14px;border-right:1px solid rgba(242,240,233,.14)}
.case-study__facts > div:last-child{border-right:0}
.case-study__facts small{display:block;color:rgba(242,240,233,.42);font-size:7px;letter-spacing:.14em}
.case-study__facts b{display:block;margin-top:7px;font-weight:400;font-size:11px;line-height:1.6;color:rgba(242,240,233,.86)}

.case-study__block{margin-bottom:40px}
.case-study__step{
  display:flex;align-items:center;gap:9px;
  color:var(--sig);
  font-size:7px;letter-spacing:.16em;
}
.case-study__step span{
  display:inline-grid;place-items:center;
  width:17px;height:17px;
  border:1px solid rgba(var(--sig-rgb),.4);
}
.case-study__block h4{
  margin:14px 0 0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(20px,2.4vw,30px);line-height:1.2;letter-spacing:-.02em;
  color:var(--paper);
}
.case-study__block p{
  margin:13px 0 0;
  font-size:13px;line-height:1.8;
  color:rgba(242,240,233,.72);
}
.case-study__learned{
  margin-top:20px !important;padding:14px 16px;
  border-left:1px solid rgba(var(--sig-rgb),.45);
  background:rgba(var(--sig-rgb),.04);
}
.case-study__learned b{
  display:block;margin-bottom:7px;
  color:var(--sig);font-weight:400;
  font-size:7px;letter-spacing:.15em;
}

.case-study__shots{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px;margin:26px 0 0;
}
.case-study__shot img{
  display:block;width:100%;height:auto;
  border:1px solid rgba(242,240,233,.14);
  background:rgba(242,240,233,.03);
}
.case-study__shot figcaption{
  display:flex;gap:8px;margin-top:9px;
  color:rgba(242,240,233,.44);
  font-size:7px;letter-spacing:.12em;line-height:1.7;
}
.case-study__shot figcaption span{color:var(--sig);flex:none}

@media (max-width:640px){
  .case-study__facts{grid-template-columns:1fr}
  .case-study__facts > div{border-right:0;border-bottom:1px solid rgba(242,240,233,.14)}
  .case-study__facts > div:last-child{border-bottom:0}
}

@media (prefers-reduced-motion:reduce){
  .contact-status dd.is-open i{animation:none}
  .signal-leader i,.signal-leader em,
  .contact-channel,.category-card__readout,.case-toggle i{transition:none}
}

/* --------------------------------------------------------------------------
   SELECTED WORK / five columns

   Replaces the fake Safari window. The browser metaphor was borrowed furniture:
   it framed the work inside someone else's interface and only ever showed one
   photograph at a fixed 820px. Five full-height columns run edge to edge
   instead — every archive is on screen at once, the one under the pointer
   opens to roughly three times its resting width and the rest stay legible
   rather than disappearing.

   Driven by .is-preview, not :hover, so the pointer, the Tab key, the arrow
   keys and a tap all move the same one selector — portfolio.js already
   maintains exactly one .is-preview across the five. The old Safari rules are
   left in the file above, unused, in case this needs to go back.

   The old rules used a great many !important overrides to flatten the 3D slab
   geometry those cards carry by default; the same is needed here, and this
   block sits last in the file so it wins on order as well.
---------------------------------------------------------------------------- */
.index-card-view .category-stack[data-work-layout="columns"]{
  position:relative;
  left:50%;
  display:flex;
  width:100vw;                /* body is overflow-x:hidden, so full bleed is safe */
  height:clamp(380px,58vh,600px);
  margin:clamp(30px,4vw,54px) 0 0;
  padding:0;
  overflow:hidden;
  border:0;
  border-top:1px solid rgba(242,240,233,.14);
  border-bottom:1px solid rgba(242,240,233,.14);
  border-radius:0;
  background:#080807;
  box-shadow:none;
  perspective:none;
  transform:translateX(-50%);
  counter-reset:workcol;
  isolation:isolate;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card{
  position:relative;
  inset:auto;
  top:auto!important;
  left:auto;
  z-index:auto!important;
  display:block;
  flex:1 1 0;
  min-width:0;
  height:100%;
  padding:0;
  overflow:hidden;
  border:0;
  border-left:1px solid rgba(242,240,233,.13);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  filter:none;
  transform:none!important;
  transform-style:flat;
  counter-increment:workcol;
  cursor:pointer;
  pointer-events:auto;
  transition:flex-grow .78s cubic-bezier(.2,.8,.2,1);
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card:first-child{border-left:0}
.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview{flex-grow:2.7}

.index-card-view .category-stack[data-work-layout="columns"] .category-card__slab{
  position:absolute;
  inset:0;
  top:0;
  width:100%;
  height:100%;
  opacity:1;
  transform:none!important;
  transform-style:flat;
  transition:none;
  pointer-events:none;
}
/* Resting columns are held down in tone rather than greyed out, and sit very
   slightly over-scaled so that opening one settles the photograph instead of
   just widening a crop. */
.index-card-view .category-stack[data-work-layout="columns"] .category-card__face{
  inset:0;
  border:0;
  border-radius:0!important;
  background-size:cover;
  background-position:center;
  filter:saturate(.4) brightness(.44) contrast(1.05);
  box-shadow:none;
  transform:scale(1.07)!important;
  transition:filter .7s ease,transform 1.05s cubic-bezier(.2,.8,.2,1);
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview .category-card__face{
  filter:saturate(1) brightness(.93) contrast(1);
  transform:scale(1)!important;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card__face::after{
  background:linear-gradient(180deg,rgba(6,7,6,.5) 0%,rgba(6,7,6,0) 32%,rgba(6,7,6,.18) 58%,rgba(6,7,6,.88) 100%);
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card__edge,
.index-card-view .category-stack[data-work-layout="columns"] .category-card__glyph,
.index-card-view .category-stack[data-work-layout="columns"] .category-card__readout{display:none}

.index-card-view .category-stack[data-work-layout="columns"] .category-card::before{
  content:"0" counter(workcol);
  position:absolute;
  z-index:6;
  left:clamp(12px,1.3vw,20px);
  top:clamp(14px,1.6vw,22px);
  color:rgba(242,240,233,.4);
  font:7px/1 var(--mono);
  letter-spacing:.16em;
  transition:color .5s ease;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview::before{color:rgba(242,240,233,.9)}

/* The title sits on the photograph, bottom left, and stays horizontal at every
   width — five columns on a 1440 screen leave the narrow ones ~210px, which is
   wide enough that nothing has to be turned on its side. */
.index-card-view .category-stack[data-work-layout="columns"] .category-card__label{
  position:absolute;
  z-index:6;
  left:0;
  right:auto;
  top:auto;
  bottom:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:7px;
  width:100%;
  height:auto;
  padding:0 clamp(12px,1.3vw,20px) clamp(16px,1.8vw,26px);
  overflow:hidden;
  border:0;
  border-radius:0!important;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  color:rgba(242,240,233,.6);
  pointer-events:none;
  transition:color .5s ease;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview .category-card__label{color:#f2f0e9}
.index-card-view .category-stack[data-work-layout="columns"] .category-card__label b{
  display:block;
  font-family:var(--sans);
  font-size:clamp(11px,1.02vw,15px);
  font-weight:500;
  letter-spacing:.16em;
  white-space:nowrap;
}
/* The strapline is the reward for opening a column: there is no room for it at
   resting width, and fading it in is what tells you the column changed. */
.index-card-view .category-stack[data-work-layout="columns"] .category-card__label span{
  display:block;
  /* The base card rule caps this at 36ch, which at 7px mono is 152px — it cut
     "…VISUAL STUDIES" off mid-word even in a 565px column. Widened to the
     column, stopping short of the OPEN CASE pill.
     It stays on one nowrap line on purpose. Wrapping looks harmless because
     the strapline is invisible in a resting column, but it still takes up
     layout there: at 210px wide it broke onto four lines and pushed that
     column's title 56px higher than the open one's. One line always, clipped
     where it must be, keeps all five titles on the same baseline. */
  max-width:calc(100% - 140px);
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
  color:rgba(242,240,233,.56);
  font:7px/1.7 var(--mono);
  letter-spacing:.15em;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease .1s,transform .6s cubic-bezier(.2,.8,.2,1) .1s;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview .category-card__label span{opacity:1;transform:none}
.index-card-view .category-stack[data-work-layout="columns"] .category-card__label::before,
.index-card-view .category-stack[data-work-layout="columns"] .category-card__label::after{display:none}

.index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview::after{
  content:"OPEN CASE ↗";
  position:absolute;
  z-index:7;
  right:clamp(12px,1.3vw,20px);
  bottom:clamp(16px,1.8vw,26px);
  padding:8px 12px;
  border:1px solid rgba(242,240,233,.3);
  border-radius:999px;
  background:rgba(8,9,8,.42);
  color:#f2f0e9;
  font:7px/1 var(--mono);
  letter-spacing:.14em;
  animation:none;
  pointer-events:none;
}
.index-card-view .category-stack[data-work-layout="columns"] .category-card:focus-visible{
  outline:1px solid rgba(242,240,233,.6);
  outline-offset:-5px;
}
@media (hover:hover) and (pointer:fine){
  .index-card-view .category-stack[data-work-layout="columns"] .category-card:hover,
  .index-card-view .category-stack[data-work-layout="columns"] .category-card:focus-visible{
    transform:none!important;
    box-shadow:none;
    filter:none;
  }
  .index-card-view .category-stack[data-work-layout="columns"] .category-card:hover .category-card__face{filter:saturate(.66) brightness(.62) contrast(1.03)}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview:hover .category-card__face{filter:saturate(1) brightness(1) contrast(1)}
}

.work-columns-hint{
  display:flex;
  justify-content:space-between;
  width:100%;
  margin:14px 0 0;
  color:rgba(242,240,233,.42);
  font:7px/1.6 var(--mono);
  letter-spacing:.14em;
}
.work-columns-hint span:last-child{display:none}

/* Phone: the same accordion turned through ninety degrees. Five columns at
   375px would be 60px each, which is a row of slivers — the exact failure the
   photo band ran into. */
@media (max-width:700px){
  .index-card-view .category-stack[data-work-layout="columns"]{
    flex-direction:column;
    height:auto;
    border-radius:0;
  }
  .index-card-view .category-stack[data-work-layout="columns"] .category-card{
    flex:0 0 74px;
    height:74px;
    border-left:0;
    border-top:1px solid rgba(242,240,233,.13);
    transition:flex-basis .62s cubic-bezier(.2,.8,.2,1),height .62s cubic-bezier(.2,.8,.2,1);
  }
  .index-card-view .category-stack[data-work-layout="columns"] .category-card:first-child{border-top:0}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview{flex:0 0 300px;height:300px}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card__label{padding:0 18px 14px}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card__label b{font-size:12px}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card::before{top:12px;left:18px}
  .index-card-view .category-stack[data-work-layout="columns"] .category-card.is-preview::after{right:18px;bottom:14px}
  .work-columns-hint span:first-child{display:none}
  .work-columns-hint span:last-child{display:block}
}

/* The opened case: no browser chrome to keep, so it is simply a dark frame.

   position:fixed has to be forced. .category-card-portal sets it, but a plain
   .category-card{position:absolute} rule further down the file matches the
   portal too (it carries the card's whole class list) at equal specificity and
   wins on order — the portal then lays out in the document and the centred
   frame lands thousands of pixels down the page. */
.category-card-portal--columns{
  position:fixed!important;
  overflow:hidden;
  border:1px solid rgba(242,240,233,.2);
  border-radius:10px;
  transform:none!important;
  transform-style:flat;
  --open-ms:1s;
}
.category-card-portal--columns .category-card__slab{
  position:absolute;
  inset:0;
  top:0;
  height:100%;
  opacity:1;
  transform:none!important;
}
.category-card-portal--columns .category-card__face{
  inset:0;
  border-radius:0!important;
  background-size:cover;
  background-position:center;
  filter:saturate(1) brightness(.86);
  transform:none!important;
}
.category-card-portal--columns .category-card__edge,
.category-card-portal--columns .category-card__glyph,
.category-card-portal--columns .category-card__readout{display:none}
.category-card-portal--columns .category-card__label{
  position:absolute;
  z-index:24;
  left:0;
  right:auto;
  top:auto;
  bottom:0;
  width:100%;
  height:auto;
  padding:0 34px 30px;
  border:0;
  border-radius:0!important;
  background:transparent;
  box-shadow:none;
}
.category-card-portal--columns.is-mounted .card-panel{inset:0}
.category-card-portal--columns .card-close{z-index:30;top:10px;right:12px}

@media (prefers-reduced-motion:reduce){
  .index-card-view .category-stack[data-work-layout="columns"] .category-card,
  .index-card-view .category-stack[data-work-layout="columns"] .category-card__face,
  .index-card-view .category-stack[data-work-layout="columns"] .category-card__label,
  .index-card-view .category-stack[data-work-layout="columns"] .category-card__label span{transition:none!important}
}

/* A whole shoot inside an opened card. .illustration-index was drawn for a
   full-height page; the portal it now sits in is about 700px tall, so the
   frames come down to roughly a third and the block loses the page-sized
   margin above it. */
.shoot-index{margin-top:clamp(38px,4vw,64px)}
.shoot-index .illustration-rail img{height:clamp(160px,20vw,260px)}
/* .illustration-index was written for the paper panels, so its type is ink on
   cream. OBJECTS and MOTION are the dark ones — there the captions came out
   near-black on near-black. */
.chapter--ink .shoot-index{border-color:rgba(242,240,233,.16)}
.chapter--ink .shoot-index>header{color:rgba(242,240,233,.6)}
.chapter--ink .shoot-index>header b{color:rgba(242,240,233,.42)}
.chapter--ink .shoot-index .illustration-rail button>span{color:rgba(242,240,233,.82)}
.chapter--ink .shoot-index .illustration-rail button i{color:rgba(242,240,233,.45)}
.chapter--ink .shoot-index .illustration-rail img{background:rgba(242,240,233,.06)}
.chapter--ink .shoot-index .illustration-rail button:focus-visible{outline-color:rgba(242,240,233,.7)}
.shoot-index .illustration-rail button,
.shoot-index .illustration-rail button:nth-child(3n+2){flex-basis:clamp(150px,15vw,240px)}
.shoot-index .illustration-rail button>span{font-size:11px}
.space-card__image{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:700px){
  .shoot-index .illustration-rail button,
  .shoot-index .illustration-rail button:nth-child(3n+2){flex-basis:62vw}
  .shoot-index .illustration-rail img{height:40vh;max-height:320px}
}