:root{
  --ink:#08080A;
  --bone:#F4F1EA;
  --dim:#B3AEA4;
  --faint:#8F8A81;
  --rule:#26241F;
  --gut:clamp(20px,4vw,64px);
  /* the one accent: gold, the colour of a glint. Used rarely and only where
     it means something: the dust in the lights (scene.js), the in-production
     light, one key phrase, section numbers, and interaction. Never on the
     logo, the wordmark, the splice lines, the light or a background.
     --accent-on-light is the same gold deep enough to read on bone.        */
  --accent:#E2BC62;
  --accent-on-light:#8A6208;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Jost',system-ui,sans-serif;
  font-weight:300;
  overflow-x:hidden;
}
svg{display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--bone);color:var(--ink);padding:10px 16px;z-index:10}
.skip:focus{left:0}

/* ---------------------------------------------------------------- header */
.bar{
  display:flex;align-items:center;gap:clamp(12px,2vw,26px);
  padding:clamp(22px,3vw,40px) var(--gut);
}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none}
.mark{width:30px;height:24px;fill:var(--bone);flex:none}
.brandname{font-size:clamp(11px,1.1vw,14px);letter-spacing:.28em;white-space:nowrap}
.splice{flex:1 1 auto;min-width:40px;height:14px}
.splice path{stroke:#4A4740;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.menu{flex:none;font-size:clamp(10px,1vw,12px);letter-spacing:.24em;text-decoration:none;white-space:nowrap}
.menu:hover{color:var(--dim)}

/* ------------------------------------------------------------------ hero */
.hero{padding:clamp(36px,6vw,96px) var(--gut) clamp(24px,4vw,48px)}
.hero h1{
  margin:0;
  font-family:'Bodoni Moda',Georgia,serif;
  font-weight:500;
  font-optical-sizing:none;
  font-variation-settings:'opsz' 14;
  font-size:clamp(46px,11.5vw,168px);
  line-height:.94;
  letter-spacing:.005em;
}
.hero h1 .line{display:block}
.cut{
  display:block;height:14px;
  width:calc(100% + var(--gut) * 2);
  margin:clamp(14px,1.8vw,30px) 0 clamp(14px,1.8vw,30px) calc(var(--gut) * -1);
}
.cut path{stroke:var(--bone);stroke-width:1.5;fill:none;vector-effect:non-scaling-stroke}

.herofoot{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-top:clamp(26px,5vw,72px);flex-wrap:wrap;
}
.tags{margin:0;font-size:clamp(10px,.9vw,12px);letter-spacing:.24em;color:#CBC6BB;line-height:2.2}
.facts{margin:0;font-size:clamp(10px,.9vw,12px);letter-spacing:.2em;line-height:2.2;color:#CBC6BB;text-align:right}

.herobottom{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-top:clamp(26px,4vw,56px);
}
.enter{margin:0;font-size:10px;letter-spacing:.34em;color:var(--faint)}
.tick{display:block;width:1px;height:36px;background:#3A3832;margin:14px 0 0}
.doormark{width:clamp(72px,11vw,170px);height:auto;aspect-ratio:1177/933;fill:var(--bone);flex:none}

/* ----------------------------------------------------------------- light */
.light{
  margin-top:clamp(32px,5vw,64px);
  background:
    linear-gradient(to left,
      var(--bone) 0%, var(--bone) 64%,
      rgba(244,241,234,.55) 86%, rgba(244,241,234,0) 100%);
  clip-path:polygon(100% 0%,100% 100%,0% 92%,0% 22%);
}
.lightbody{
  width:min(760px,58%);margin-left:auto;padding:clamp(56px,6vw,96px) var(--gut) clamp(64px,7vw,110px) 0;
  color:var(--ink);
}
.lightbody h2{
  margin:0;font-family:'Bodoni Moda',Georgia,serif;font-weight:500;
  font-optical-sizing:none;font-variation-settings:'opsz' 20;
  font-size:clamp(26px,3.6vw,52px);line-height:1.15;
}
.lightbody p{
  margin:22px 0 0;font-size:clamp(10px,1vw,14px);letter-spacing:.1em;line-height:2;
  color:rgba(8,8,10,.9);
}

/* ----------------------------------------------------------------- index */
.index{
  display:flex;justify-content:space-between;gap:20px;
  margin:clamp(40px,6vw,80px) var(--gut) 0;
  padding:clamp(18px,2.6vw,36px) 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.index a{display:flex;align-items:flex-end;gap:18px;text-decoration:none}
.num{font-size:12px;letter-spacing:.18em;color:var(--faint)}
.word{font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-optical-sizing:none;font-variation-settings:'opsz' 18;font-size:clamp(20px,2.6vw,34px);line-height:1}

/* ------------------------------------------------------------------ work */
.work{
  padding:clamp(48px,6vw,88px) var(--gut) 0;
  display:flex;align-items:center;gap:clamp(24px,4vw,64px);
}
.workbody{max-width:560px;flex:1 1 auto}
.wedge{
  flex:0 0 min(560px,40%);align-self:stretch;min-height:clamp(120px,14vw,210px);
  margin-right:calc(var(--gut) * -1);
  clip-path:polygon(100% 0%,100% 100%,0% 88%,0% 30%);
  background:linear-gradient(to left,rgba(244,241,234,.55) 0%,rgba(244,241,234,.18) 52%,rgba(244,241,234,0) 100%);
}
.label{margin:0;font-size:clamp(9px,.9vw,11px);letter-spacing:.3em;color:var(--faint)}
.lede{margin:24px 0 0;font-size:clamp(14px,1.3vw,17px);line-height:1.8;color:#DAD5CA}
.ghost{
  display:inline-block;margin-top:28px;font-size:12px;letter-spacing:.24em;
  text-decoration:none;border-bottom:1px solid #4A4740;padding-bottom:6px;
}
.ghost:hover{border-color:var(--bone)}

/* ----------------------------------------------------------- text bands */
.band{padding:clamp(48px,6vw,88px) var(--gut) 0}
.cols{
  display:flex;gap:clamp(24px,5vw,80px);margin-top:clamp(24px,3vw,44px);
  align-items:flex-start;
}
.cols > div:first-child{flex:0 0 40%}
.cols > div:last-child{flex:1 1 auto;max-width:640px}
.head{
  margin:0;font-family:'Bodoni Moda',Georgia,serif;font-weight:500;
  font-optical-sizing:none;font-variation-settings:'opsz' 20;
  font-size:clamp(24px,2.8vw,40px);line-height:1.2;
}
.cols .lede + .lede{margin-top:18px}

.rows{list-style:none;margin:clamp(24px,3vw,44px) 0 0;padding:0}
.rows li{
  display:flex;gap:clamp(20px,4vw,64px);align-items:flex-start;
  padding:clamp(18px,2.4vw,30px) 0;border-top:1px solid var(--rule);
}
.rows li:last-child{border-bottom:1px solid var(--rule)}
.rowlabel{
  flex:0 0 clamp(90px,16%,190px);
  font-size:clamp(9px,.9vw,11px);letter-spacing:.28em;color:var(--faint);padding-top:5px;
}
.rows p{
  margin:0;max-width:640px;font-size:clamp(14px,1.25vw,16px);line-height:1.85;color:#DAD5CA;
}

/* ---------------------------------------------------------------- studio */
.studio{padding:clamp(48px,6vw,88px) var(--gut) 0;max-width:760px}
.who{margin:26px 0 0;font-size:clamp(9px,.9vw,11px);letter-spacing:.28em;color:var(--faint)}

/* ---------------------------------------------------------------- footer */
footer{
  margin-top:clamp(56px,7vw,110px);
  padding:clamp(30px,4vw,50px) var(--gut) clamp(34px,4vw,64px);
  border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;
}
.talk{margin:0;font-family:'Bodoni Moda',Georgia,serif;font-weight:500;font-optical-sizing:none;font-variation-settings:'opsz' 16;font-size:clamp(34px,4.6vw,62px);line-height:1}
.mail{
  display:inline-block;margin-top:16px;font-size:clamp(12px,1.2vw,15px);letter-spacing:.08em;
  text-decoration:none;border-bottom:1px solid #4A4740;padding-bottom:5px;word-break:break-word;
}
.mail:hover{border-color:var(--bone)}
.legal{text-align:right}
.legal .brand{justify-content:flex-end}
.legal .mark{width:26px;height:21px;fill:var(--faint)}
.legal .brandname{font-size:12px;color:var(--dim)}
.legal p{margin:16px 0 0;font-size:11px;letter-spacing:.16em;line-height:2.1;color:var(--faint)}

/* ----------------------------------------------------------------- phone */
@media (max-width:900px){
  .herofoot{flex-direction:column;gap:14px}
  .facts{text-align:left}
  .herobottom{align-items:center}

  .light{clip-path:polygon(100% 0%,100% 100%,0% 96%,0% 10%)}
  .lightbody{width:auto;margin:0;padding:clamp(64px,14vw,96px) var(--gut) clamp(72px,16vw,110px)}

  .index{flex-direction:column;gap:0;padding:0}
  .index a{padding:16px 0;border-bottom:1px solid var(--rule)}
  .index a:last-child{border-bottom:0}

  .cols{flex-direction:column;gap:22px}
  .cols > div:first-child,.cols > div:last-child{flex:none;max-width:none}
  .rows li{flex-direction:column;gap:12px}
  .rowlabel{flex:none;padding-top:0}
  .index{flex-wrap:wrap}

  .work{flex-direction:column-reverse;align-items:stretch;gap:28px}
  .wedge{flex:none;width:calc(100% + var(--gut));margin-left:auto;min-height:120px}
  .workbody{max-width:none}

  footer{flex-direction:column;align-items:flex-start}
  .legal{text-align:left}
  .legal .brand{justify-content:flex-start}
}

@media (max-width:480px){
  .doormark{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* --------------------------------------------------------------- contact */
.addr{
  margin:26px 0 0;font-family:'Bodoni Moda',Georgia,serif;font-weight:500;
  font-optical-sizing:none;font-variation-settings:'opsz' 18;
  font-size:clamp(20px,2.6vw,38px);line-height:1.2;color:var(--ink);
  letter-spacing:0;word-break:break-word;
}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.act{
  display:inline-block;padding:13px 22px;border:1px solid rgba(8,8,10,.45);border-radius:999px;
  background:none;color:var(--ink);font-family:'Jost',sans-serif;font-weight:400;
  font-size:12px;letter-spacing:.18em;text-decoration:none;cursor:pointer;
}
.act:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
@media (max-width:900px){
  .actions{gap:10px}
  .act{padding:12px 18px;font-size:11px}
}

/* ----------------------------------------------------------------- scene */
/* The home page opens on a scene drawn by scene.js: the door, its light and
   the dust in the beam. The section is tall so the camera has room to travel
   while the frame stays pinned; without motion it is one screen high.      */
.home .bar{position:absolute;top:0;left:0;right:0;z-index:1}
.scene{position:relative;height:100vh;height:100svh}
.motion .scene{height:220vh;height:220svh}
.scene-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene-fallback{
  position:absolute;right:7vw;bottom:14svh;width:min(78svh,86vw);height:auto;
  aspect-ratio:1177/933;fill:var(--bone);
}
.js .scene-fallback{display:none}
.scene .hero{
  position:absolute;inset:0;display:flex;flex-direction:column;
  padding-top:clamp(110px,13vw,200px);padding-bottom:clamp(28px,4vw,48px);
}
.scene .herofoot{flex-direction:column;gap:14px}
.scene .facts{text-align:left}
.scene .enter{margin-top:auto;animation:lift 1600ms cubic-bezier(.16,.84,.44,1) 900ms both}
/* with motion the opening line is driven by scene.js: drawn when the page
   opens, withdrawn as you scroll in, drawn again when you come back up     */
.motion .scene .cut path{animation:none;stroke-dashoffset:1600;transition:stroke-dashoffset 2400ms cubic-bezier(.16,.84,.44,1)}
.motion .scene .hero.lined .cut path{stroke-dashoffset:0}
/* with motion, scene.js moves the statement into the pinned frame: the canvas
   paints its light, and the words rise on their own once the camera is
   through the door, instead of waiting to be scrolled up                    */
.scene-pin > .light{
  position:absolute;inset:0;margin:0;background:none;clip-path:none;animation:none;
  display:flex;align-items:center;
  padding-top:calc(var(--wm-top) + var(--wm-size) + clamp(28px,3vw,56px));
}

/* the wordmark, written across the top of the light once we are through the
   door: the letters come into focus one after another while the spacing
   closes to the brand's .32em, then the splice line draws beneath. Sized to
   the screen, from a phone to a wide monitor. Jost Light, ink on bone, as
   the identity sets it.                                                    */
.scene-pin{--wm-top:clamp(48px,10svh,120px);--wm-size:clamp(34px,8vw,150px)}
.wm{display:none}
.motion .wm{display:block;position:absolute;left:0;right:0;top:var(--wm-top);pointer-events:none}
/* Coming in, everything is slow and staggered; going back out through the
   door it is gone at once (250ms, no stagger), so nothing is left behind in
   the doorway's light. A transition takes the timing of the state it moves
   TO, which is why the slow timings sit on .inside.                        */
.wordmark{
  margin:0;text-align:center;font-family:'Jost',system-ui,sans-serif;font-weight:300;
  font-size:var(--wm-size);line-height:1;color:var(--ink);
  letter-spacing:.62em;padding-left:.62em;   /* the padding balances the trailing space */
  transition:letter-spacing 250ms ease,padding-left 250ms ease;
}
.wordmark span{
  display:inline-block;opacity:0;transform:translateY(.35em);filter:blur(8px);
  transition:opacity 250ms ease,transform 250ms ease,filter 250ms ease;
}
.wm-cut{display:block;width:100%;height:14px;margin-top:clamp(14px,1.6vw,28px)}
.wm-cut path{
  /* NOT non-scaling-stroke: with it the browser measures dashes in screen
     pixels and ignores pathLength, so "1" became a 1px dotted line that was
     always visible. Scaled with the viewBox instead; the width compensates
     the 16 to 14 vertical squeeze.                                          */
  stroke:var(--ink);stroke-width:1.4;fill:none;
  stroke-dasharray:1;stroke-dashoffset:1;   /* pathLength="1": the draw runs the full duration at any width */
  transition:stroke-dashoffset 250ms ease;
}
.scene-pin.inside .wordmark{
  letter-spacing:.32em;padding-left:.32em;
  transition:letter-spacing 1800ms cubic-bezier(.16,.84,.44,1),padding-left 1800ms cubic-bezier(.16,.84,.44,1);
}
.scene-pin.inside .wordmark span{
  opacity:1;transform:none;filter:none;
  transition:opacity 900ms cubic-bezier(.16,.84,.44,1),transform 1200ms cubic-bezier(.16,.84,.44,1),filter 1200ms cubic-bezier(.16,.84,.44,1);
  transition-delay:calc(var(--i) * 70ms);
}
.scene-pin.inside .wm-cut path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1600ms cubic-bezier(.16,.84,.44,1) 500ms;
}

/* -------------------------------------------------------------- foot cut */
/* The opening's splice line, again just above "Talk to us": it takes the
   place of the footer's top rule, bleeds to both edges like the opening one,
   and with motion draws itself slowly the first time it scrolls into view.  */
footer{border-top:0;padding-top:0}   /* the splice line above the footer takes the rule's place, on every page */
.foot-cut{
  display:block;flex:none;width:calc(100% + var(--gut) * 2);height:14px;
  margin:0 calc(var(--gut) * -1) clamp(10px,2vw,30px);
}
.foot-cut path{stroke:var(--bone);stroke-width:1.7;fill:none}   /* scaled, not non-scaling: see .wm-cut */
.motion .foot-cut path{
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 2400ms cubic-bezier(.16,.84,.44,1);
}
.motion .foot-cut.drawn path{stroke-dashoffset:0}

/* Any other opening line (the contact page's): drawn while it is in view,
   withdrawn when it scrolls away, drawn again on return — scene.js toggles
   .drawn on it. The home page's own line is driven by the scene instead.   */
.motion .cut.line-live path{animation:none;stroke-dashoffset:1600;transition:stroke-dashoffset 2400ms cubic-bezier(.16,.84,.44,1)}
.motion .cut.line-live.drawn path{stroke-dashoffset:0}

/* The contact page's light, with motion, is drawn by scene.js on a canvas
   behind the words: same shape and gradient, soft edges, opening slowly on
   load, gold dust in it. The canvas overhangs the section by 80px above and
   below so the soft edge is not cut off. Without motion the CSS light stays. */
.dust{display:none}
.motion .light.lit{position:relative;background:none;clip-path:none;animation:none;overflow:visible}
.motion .light.lit > .dust{
  display:block;position:absolute;left:0;top:-80px;width:100%;height:calc(100% + 160px);pointer-events:none;
}
.motion .light.lit > .lightbody{position:relative;z-index:1}

/* ---------------------------------------------------------------- accent */
/* the in-production light: a camera's recording lamp, slowly breathing */
.rec{
  display:inline-block;width:.62em;height:.62em;border-radius:50%;
  background:var(--accent);box-shadow:0 0 .7em var(--accent);
  margin-right:.9em;vertical-align:.02em;
  animation:rec 2600ms ease-in-out infinite;
}
@keyframes rec{0%,100%{opacity:1}50%{opacity:.3}}

/* one key phrase per section; deeper on the light so it still reads */
.key{color:var(--accent)}
.lightbody .key{color:var(--accent-on-light)}

/* section numbers, for finding your way */
.label .n,.num{color:var(--accent)}
.index a:hover .num,.index a:focus-visible .num{color:var(--bone);transition:color 320ms ease}   /* turns black in the hover light, like the words */

/* interaction: what can be clicked shows it in the accent */
.ghost:hover,.mail:hover{border-color:var(--accent)}
.menu:hover{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:1px solid var(--accent);outline-offset:5px}
.light a:focus-visible,.light button:focus-visible{outline-color:var(--accent-on-light)}

/* ------------------------------------------------------------------ beam */
/* With motion, the published-work wedge is drawn by scene.js in the same
   shape and gradient: it grows in slowly from the right when the section
   arrives, breathes, and carries dust like the door's beam. Without motion
   the plain CSS wedge stays as it was.                                     */
.beam{display:none}
.motion .wedge{position:relative;background:none;clip-path:none;animation:none}
.motion .beam{display:block;position:absolute;inset:0;width:100%;height:100%}
.scene-pin > .light .lightbody{
  animation:none;opacity:0;transform:translateY(34px);visibility:hidden;
  transition:opacity 300ms ease,transform 300ms ease,visibility 0s 300ms;   /* gone quickly on the way back out */
}
.scene-pin > .light.arrived .lightbody{
  opacity:1;transform:none;visibility:visible;
  transition:opacity 1100ms cubic-bezier(.16,.84,.44,1) 120ms,transform 1400ms cubic-bezier(.16,.84,.44,1) 120ms,visibility 0s;
}

/* ================================================================ motion */
/* Decoration only. Reduced motion, or a browser without scroll-driven
   animation, gets the same page, complete and still.                      */

/* the grain, from the key visual — quiet, and alive like film stock.
   Grey, full-contrast noise MULTIPLIED over the page: it darkens the bone
   surfaces and the text by up to a tenth and leaves the black untouched, so
   the brand black stays black. (The earlier overlay blend did almost nothing
   at either end of the scale, and this page is nearly all black and bone, so
   that grain was never visible.) The tile is stitched so it repeats without
   seams. The layer overhangs the screen by 120px on every side, so jumping it
   to a new offset about twelve times a second never shows an edge; only
   transform changes, which the browser moves without repainting the page.  */
body::after{
  content:"";position:fixed;inset:-120px;pointer-events:none;z-index:2;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n' color-interpolation-filters='sRGB'>\
<feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/>\
<feComponentTransfer>\
<feFuncR type='linear' slope='3' intercept='-1'/>\
<feFuncG type='linear' slope='3' intercept='-1'/>\
<feFuncB type='linear' slope='3' intercept='-1'/>\
<feFuncA type='linear' slope='0' intercept='1'/>\
</feComponentTransfer></filter>\
<rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size:160px 160px;mix-blend-mode:multiply;
}
/* the same grain on the black, through SCREEN — it lifts the black by up to a
   tenth and barely touches the bone, so the whole page carries film grain.
   It greys the black slightly on average; approved by the director 2026-10-15. */
body::before{
  content:"";position:fixed;inset:-120px;pointer-events:none;z-index:2;opacity:.1;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n' color-interpolation-filters='sRGB'>\
<feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/>\
<feComponentTransfer>\
<feFuncR type='linear' slope='3' intercept='-1'/>\
<feFuncG type='linear' slope='3' intercept='-1'/>\
<feFuncB type='linear' slope='3' intercept='-1'/>\
<feFuncA type='linear' slope='0' intercept='1'/>\
</feComponentTransfer></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size:180px 180px;mix-blend-mode:screen;
}
@keyframes grain{
  0%  { transform:translate(0,0) }
  10% { transform:translate(-53px,31px) }
  20% { transform:translate(41px,-67px) }
  30% { transform:translate(-88px,-19px) }
  40% { transform:translate(17px,74px) }
  50% { transform:translate(-29px,-93px) }
  60% { transform:translate(96px,12px) }
  70% { transform:translate(-71px,58px) }
  80% { transform:translate(63px,47px) }
  90% { transform:translate(-11px,-41px) }
}
@media (prefers-reduced-motion:no-preference){
  body::after{ animation:grain 830ms steps(1) infinite }
  body::before{ animation:grain 830ms steps(1) infinite reverse }
}

/* --- on load: the hero only, slowly ------------------------------------ */
@keyframes lift{
  from{ transform:translateY(.18em); opacity:0 }
  to  { transform:translateY(0); opacity:1 }
}
@keyframes draw{ from{ stroke-dashoffset:1600 } to{ stroke-dashoffset:0 } }

.hero h1 .line{ animation:lift 1600ms cubic-bezier(.16,.84,.44,1) both }
.hero h1 .line:last-of-type{ animation-delay:260ms }
.herofoot{ animation:lift 1600ms cubic-bezier(.16,.84,.44,1) 700ms both }
.herobottom{ animation:lift 1600ms cubic-bezier(.16,.84,.44,1) 900ms both }
.cut path{ stroke-dasharray:1600; animation:draw 2400ms cubic-bezier(.16,.84,.44,1) 300ms both }
/* The header has no entrance of its own: it is the one thing that stays in
   place while the page changes (see "between pages" below).                */

/* --- the mark: the door swings open -------------------------------------
   The clip is the mark itself at each moment of the swing, in the mark's own
   corners: the door's edge (2nd, 3rd) travels from the jamb to its place, and
   the far edge of the light on the floor (4th) sweeps out from the 5th corner
   to the tip. A crack of light first, a held breath, then the door opens.
   Every stage lies inside the polygon, and the clip is gone once it ends
   (fill: backwards), so the finished mark is the untouched polygon.        */
@keyframes doorSwing{
  0%  { clip-path:polygon(99.941% 0.054%, 99.941% 0.054%, 99.805% 85.831%, 36.788% 99.882%, 36.788% 99.882%, 99.805% 85.831%);
        animation-timing-function:cubic-bezier(.55,0,.3,1) }
  26% { clip-path:polygon(99.941% 0.054%, 98.697% 0.789%, 98.585% 85.590%, 33.845% 99.844%, 36.788% 99.882%, 99.805% 85.831%) }
  38% { clip-path:polygon(99.941% 0.054%, 98.697% 0.789%, 98.585% 85.590%, 33.845% 99.844%, 36.788% 99.882%, 99.805% 85.831%);
        animation-timing-function:cubic-bezier(.7,0,.15,1) }
  100%{ clip-path:polygon(99.941% 0.054%, 84.401% 9.250%, 84.554% 82.819%, 0.000% 99.400%, 36.788% 99.882%, 99.805% 85.831%) }
}
@media (prefers-reduced-motion:no-preference){
  .doormark{ animation:doorSwing 4200ms 2000ms backwards }
}

/* --- between pages: a fade through black, the header held ---------------
   Both pages load this file, so both opt in. The header is lifted out of the
   page and stays where it is; everything else fades to black and the next
   page rises out of it, like a cut in a long take. A browser without
   cross-document transitions simply changes page, as before.               */
@media (prefers-reduced-motion:no-preference){
  @view-transition{ navigation:auto }
}
.bar{ view-transition-name:bar }
@keyframes pageOut{ to{ opacity:0 } }
@keyframes pageIn { from{ opacity:0; transform:translateY(14px) } }
::view-transition-old(root){ animation:pageOut 420ms cubic-bezier(.4,0,1,1) both }
::view-transition-new(root){ animation:pageIn 900ms cubic-bezier(.16,.84,.44,1) 320ms both }
::view-transition-group(bar){ animation-duration:600ms }

/* --- on scroll: everything below the fold ------------------------------ */
@supports (animation-timeline: view()){
  @keyframes arrive{
    from{ opacity:0; transform:translateY(26px) }
    to  { opacity:1; transform:translateY(0) }
  }
  @keyframes doorOpen{
    from{ clip-path:polygon(100% 0%,100% 100%,88% 92%,88% 22%); opacity:.25 }
    to  { clip-path:polygon(100% 0%,100% 100%,0% 92%,0% 22%); opacity:1 }
  }
  @keyframes wedgeOpen{
    from{ clip-path:polygon(100% 0%,100% 100%,94% 88%,94% 30%); opacity:.2 }
    to  { clip-path:polygon(100% 0%,100% 100%,0% 88%,0% 30%); opacity:1 }
  }

  .light{
    animation:doorOpen linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 35%;
  }  .lightbody,.band,.work .workbody,.index,footer{
    animation:arrive linear both;
    animation-timeline:view();
    animation-range:entry 5% cover 25%;
  }
  .wedge{
    animation:wedgeOpen linear both;
    animation-timeline:view();
    animation-range:entry 0% cover 40%;
  }
}

/* --- hover ------------------------------------------------------------- */
/* The light comes in from the right with a slanted front edge, longer at the
   floor than at the top, the way the mark's light lies, and draws back to the
   right when the pointer leaves. It is full bone light, and whatever it falls
   on turns to ink: the overlay subtracts itself from what is beneath
   (difference), so the black around the words becomes light and the light
   words become black, exactly where the edge has reached. Each link is its
   own group (isolation), so nothing else on the page is affected.          */
.index a{position:relative;overflow:hidden;isolation:isolate}
@media (min-width:901px){
  .index a{padding:12px 18px;margin:-12px -18px}   /* room for the light around the words */
}
.index a::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--bone);mix-blend-mode:difference;
  clip-path:polygon(100% 0%,100% 100%,100% 100%,100% 0%);
  transition:clip-path 800ms cubic-bezier(.16,.84,.44,1);
}
.index a:hover::after,.index a:focus-visible::after{
  clip-path:polygon(100% 0%,100% 100%,-12% 100%,0% 0%);
}
.index .word,.menu,.ghost,.mail,.act{transition:color 320ms ease,border-color 320ms ease,background 320ms ease}

@media (prefers-reduced-motion:reduce){
  .hero h1 .line,.herofoot,.herobottom,.cut path,
  .light,.lightbody,.wedge,.band,.work .workbody,.index,footer{ animation:none!important }
  .cut path{ stroke-dasharray:none!important;stroke-dashoffset:0!important }
  body::before,body::after{ display:none }
  .index a::after{ transition:none }
}