@font-face{font-family:"Bespoke Stencil";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/BespokeStencil-700.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/GeneralSans-Regular.woff2) format("woff2")}
@font-face{font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/GeneralSans-Medium.woff2) format("woff2")}

:root{
  --paper:#F3ECDF;        /* 60: the sheet */
  --paper-deep:#E8DFCD;   /* the sheet's shadowed edge */
  --ink:#1B1915;          /* 30 with the dark film */
  --ink-soft:#4E4840;     /* captions on paper, measured 7.9:1 */
  --film:#0E0D0C;
  --orange:#E27F22;       /* 10: the stamp, one thread */
  --sans:"General Sans",system-ui,sans-serif;
  --stencil:"Bespoke Stencil",Impact,sans-serif;
  --k:#131110;            /* the card's black cloth */
  --c:#F4EFE6;            /* the card's cream cloth */
  --ease-settle:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#0E0D0C;color:#1B1915;color-scheme:light}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-weight:400;line-height:1.35;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain: the glue between the film and the paper */
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px}

/* the film control, always visible */
.filmctl{position:absolute;z-index:6;right:28px;bottom:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(243,236,223,.14);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;color:var(--paper);border:1px solid rgba(243,236,223,.35);
  transition:background .35s var(--ease-settle),transform .35s var(--ease-settle)}
.filmctl:hover{background:rgba(243,236,223,.26)}
.filmctl:active{transform:scale(.96)}
.filmctl svg{width:16px;height:16px;fill:currentColor}
.filmctl .ic-play{display:none}
.filmctl[data-state="paused"] .ic-pause{display:none}
.filmctl[data-state="paused"] .ic-play{display:block}

/* the stamp: pressed in orange, slightly off square, the one orange thing */
.stamp{display:inline-block;font-weight:500;font-size:20px;line-height:1;padding:19px 30px 20px;color:var(--ink);
  background:var(--orange);text-decoration:none;transform:rotate(-1.2deg);position:relative;
  box-shadow:0 2px 0 rgba(0,0,0,.18),0 10px 18px -10px rgba(226,127,34,.8);
  transition:transform .4s var(--ease-settle),box-shadow .4s var(--ease-settle)}
.stamp::before{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .25 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>")}
.stamp:hover{transform:rotate(-1.2deg) translateY(1px);box-shadow:0 1px 0 rgba(0,0,0,.18),0 4px 10px -8px rgba(226,127,34,.8)}
.stamp:focus-visible,.quiet:focus-visible,.filmctl:focus-visible,.menu a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.quiet{font-weight:500;font-size:19px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:2px;
  transition:border-color .35s var(--ease-settle),color .35s}
.quiet:hover{color:var(--ink-soft);border-color:var(--ink-soft)}

/* ---------- the first screen: the business card opened flat over the film (round 4) ----------
   One unit, --u, is one pixel of the drawing: 1440 wide on desk, 390 wide on phone. */
.first{--u:calc(min(100vw / 1440,100svh / 776));--cw:calc(582 * var(--u));--bw:calc(340 * var(--u));--g:min(calc(19.4 * var(--u)),calc((100svh - calc(751 * var(--u))) / 5));
  position:relative;height:100svh;overflow:hidden;background:var(--k);color:var(--c);isolation:isolate}
html[data-words="a"] .wb,html:not([data-words="a"]) .wa{display:none}

/* 1 the film, far plane, moving */
.film{position:absolute;inset:0;z-index:0;transform-origin:60% 40%;will-change:transform}
.film video{position:absolute;top:0;left:calc(-414 * var(--u));height:max(calc(1080 * var(--u)),120%);width:auto;max-width:none;aspect-ratio:1920/804;object-fit:cover}
/* 2 the veil: 48 percent of the cloth black, deeper under the menu. It stops where the cream band starts: the band carries its own */
.veil{position:absolute;z-index:1;top:0;bottom:0;left:-60vw;right:var(--bw);pointer-events:none;
  background:linear-gradient(180deg,rgba(19,17,16,.6) 0,rgba(19,17,16,0) calc(150 * var(--u))),rgba(19,17,16,.48)}

/* the two prints lying on the film: Chhaya under, Heritage in Motion clipped on top. The stack sits right of the headline's last letter,
   and the name tag rides the top edge of the Heritage print, held by the same clip, so it clears the S of SYSTEMS (28 px at 1440 x 900) */
.prints{position:absolute;z-index:2;left:calc(930 * var(--u));bottom:calc(16 * var(--u));width:calc(150 * var(--u));height:calc(211 * var(--u));pointer-events:none}
.print{position:absolute;background:#fff;padding:calc(4 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));box-shadow:0 18px 30px -14px rgba(0,0,0,.8),0 3px 6px -2px rgba(0,0,0,.4)}
.print img{width:100%;height:auto}
.print.poster{left:0;top:0;width:calc(150 * var(--u));transform:rotate(2.5deg)}
.print.box{left:calc(32 * var(--u));top:calc(-78 * var(--u));width:calc(118 * var(--u));transform:rotate(-4deg)}
.clip{position:absolute;z-index:1;left:calc(108 * var(--u));top:calc(-106 * var(--u));width:calc(34 * var(--u));height:auto;transform:rotate(12deg);filter:drop-shadow(0 4px 4px rgba(0,0,0,.5))}
.labels{position:absolute;right:calc(2 * var(--u));top:calc(-78 * var(--u));font-weight:500;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);
  background:var(--c);padding:8px calc(46 * var(--u)) 7px 11px;transform:rotate(-2deg);transform-origin:100% 50%;white-space:nowrap;box-shadow:0 6px 12px -6px rgba(0,0,0,.7)}

/* the other set of words ends its fourth line where the long tag would land, so there the tag keeps its lower, shorter seat */
html[data-words="a"] .clip{left:calc(78 * var(--u))}
html[data-words="a"] .labels{top:calc(-46 * var(--u));padding-right:11px}

/* 3 the black cloth, the card's front. It rests showing its right 582; at load it covers the whole screen */
.clothwrap{position:absolute;inset:0;z-index:3;pointer-events:none;will-change:transform}
.cloth{position:absolute;inset:0;background:var(--k) url(media/cloth-black.jpg) right top/calc(1440 * var(--u)) auto;transform:translateX(calc(var(--cw) - 100%));will-change:transform}
/* the flame, gloss on matt. It is cut at the cloth's own right edge: gloss belongs to the cloth, never to the film beside it */
.cloth::before{content:"";position:absolute;left:calc(100% - var(--cw) - calc(300 * var(--u)));top:calc(-80 * var(--u));width:calc(1500 * var(--u));height:calc(808 * var(--u));background:#fff;mix-blend-mode:normal;opacity:.12;
  clip-path:inset(0 calc(calc(1200 * var(--u)) - var(--cw)) 0 0);
  -webkit-mask:url(media/fsi-flame.svg) center/contain no-repeat;mask:url(media/fsi-flame.svg) center/contain no-repeat}
/* 4 its shadow on the film: light from high left */
.cloth::after{content:"";position:absolute;left:100%;top:0;bottom:0;width:calc(70 * var(--u));background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
.cloth-head{display:none}

/* 5 the headline: starts on the cloth, crosses the film, runs under the band. Cloth inside the letters on the cloth, flat cream over film.
   The first background layer is the shine: one band of light with a soft shade trailing it, so the light shows on cream as well as on orange.
   At rest (--sa .16) the shade is under 4 percent and the band is a faint highlight */
.heads{position:absolute;z-index:4;left:0;top:0;bottom:0;right:calc(var(--bw) + calc(12 * var(--u)));overflow:hidden;pointer-events:none}
.heads canvas{position:absolute;inset:0;width:100%;height:100%}
.head{--sx:calc(330 * var(--u));--sa:.16;position:absolute;left:calc(56 * var(--u));margin:0;font-family:var(--stencil);font-weight:700;text-transform:uppercase;white-space:nowrap;letter-spacing:0}
.head.wa{font-size:calc(138 * var(--u));line-height:calc(112 * var(--u));bottom:calc(93 * var(--u))}
.head.wb{font-size:calc(190 * var(--u));line-height:calc(156 * var(--u));bottom:calc(89.5 * var(--u))}
.head .ln{display:block;width:max-content;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(104deg,rgba(19,17,16,0) calc(var(--sx) - calc(170 * var(--u))),rgba(19,17,16,calc(var(--sa) * .22)) calc(var(--sx) - calc(64 * var(--u))),rgba(255,255,255,var(--sa)) var(--sx),rgba(255,255,255,0) calc(var(--sx) + calc(90 * var(--u)))),
    linear-gradient(90deg,rgba(244,239,230,0) calc(var(--cw) - calc(56 * var(--u))),#F4EFE6 calc(var(--cw) - calc(56 * var(--u)))),url(media/cloth-cream.jpg);
  background-size:auto,auto,calc(800 * var(--u)) auto}
.head .ln.hot{background-image:linear-gradient(104deg,rgba(19,17,16,0) calc(var(--sx) - calc(170 * var(--u))),rgba(19,17,16,calc(var(--sa) * .22)) calc(var(--sx) - calc(64 * var(--u))),rgba(255,255,255,var(--sa)) var(--sx),rgba(255,255,255,0) calc(var(--sx) + calc(90 * var(--u)))),
    linear-gradient(90deg,rgba(226,127,34,0) calc(var(--cw) - calc(56 * var(--u))),#E27F22 calc(var(--cw) - calc(56 * var(--u)))),linear-gradient(#E27F22,#E27F22),url(media/cloth-cream.jpg);
  background-size:auto,auto,auto,calc(800 * var(--u)) auto;background-blend-mode:normal,normal,multiply,normal}
.read{position:absolute;z-index:8;left:calc(56 * var(--u));bottom:calc(43.7 * var(--u));margin:0;font-weight:500;font-size:max(16px,calc(20 * var(--u)));line-height:1.2;color:var(--c)}
.read br{display:none}

/* 7 the cream band, the card's back. Three sheets on the same boxes: veil rows under, the band with the words cut through it
   (black words under a lighten blend are holes: the film shows inside the letters), and the plain lines on top.
   The veil rows are 70 percent cloth black: pure white film behind a word still leaves it 5 to 1 or better on the cream, so the film reads as movement, never as lost ink */
.band-under,.band,.band-top{position:absolute;top:0;bottom:0;right:0;width:var(--bw)}
.band-under{z-index:2}
.band{z-index:5;background:var(--c) url(media/cloth-cream.jpg) 0 0/calc(800 * var(--u)) auto;mix-blend-mode:lighten}
.band-top{z-index:6;box-shadow:inset 1.5px 0 0 rgba(255,255,255,.75)}
.band-edge{position:absolute;z-index:5;top:0;bottom:0;right:var(--bw);width:calc(12 * var(--u));background:linear-gradient(90deg,#0c0b0a,#2b2723)}
.band-edge::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:calc(22 * var(--u));background:linear-gradient(270deg,rgba(0,0,0,.42),rgba(0,0,0,0))}
.six{list-style:none;position:absolute;left:0;right:0;top:calc(109.8 * var(--u));margin:0;padding:0}
.six li{position:relative;padding:0 calc(28 * var(--u)) var(--g)}
.six li:last-child{padding-bottom:0}
.six .w{display:block;font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:1;white-space:nowrap;margin-bottom:calc(calc(11.07 * var(--u)) - .145em)}
.six li:nth-child(1) .w{font-size:calc(53 * var(--u))}.six li:nth-child(2) .w{font-size:calc(74 * var(--u))}.six li:nth-child(3) .w{font-size:calc(66 * var(--u))}
.six li:nth-child(4) .w{font-size:calc(77 * var(--u))}.six li:nth-child(5) .w{font-size:calc(38 * var(--u))}.six li:nth-child(6) .w{font-size:calc(55 * var(--u))}
.six .line{display:block;font-size:max(16px,calc(18 * var(--u)));line-height:max(20px,calc(24 * var(--u)))}
.six small{display:block;font-size:max(16px,calc(16 * var(--u)));line-height:max(18px,calc(20 * var(--u)))}
.six li.akij .w{margin-bottom:calc(calc(7.84 * var(--u)) - .145em)}
.six li.akij .line{margin-top:calc(3.2 * var(--u))}
.band-under *{color:transparent}
.band-under li{background:rgba(19,17,16,.7);transition:opacity .2s var(--ease-settle)}
.band-under li.open{opacity:0}
.band-under li:first-child::before,.band-under li:last-child::after{content:"";position:absolute;left:0;right:0;height:120vh;background:rgba(19,17,16,.7)}
.band-under li:first-child::before{bottom:100%}
.band-under li:last-child::after{top:100%}
.band .w{color:#000}
.band .line,.band small{color:transparent}
.band-top .w{color:transparent}
.band-top .line{color:var(--ink)}
.band-top small{color:rgba(27,25,21,.72)}
.band-top .line,.band-top small{transition:opacity .2s var(--ease-settle)}
.band-top .six.has li:not(.on) .line,.band-top .six.has li:not(.on) small{opacity:.55}
.work{position:absolute;left:calc(28 * var(--u));bottom:calc(40 * var(--u));font-weight:500;font-size:max(16px,calc(18 * var(--u)));line-height:1.2;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:2px}
.work:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* the opening frame, held until the script takes over: the cloth shut over everything */
.strike .cloth{transform:none}
.strike .head .ln,.strike .band,.strike .band-under,.strike .band-top,.strike .band-edge,.strike .read{visibility:hidden}

/* the menu: the orange mark and the wordmark, top left, on every page */
.menu{position:absolute;z-index:9;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;padding:22px 40px 22px 56px;color:var(--paper)}
.menu .logo{display:flex;align-items:center;gap:14px;margin-left:-3px;text-decoration:none}
.menu .logo .mk{display:block;height:48px;width:auto}
.menu .logo .mark{display:block;width:103px;height:auto}
.menu nav{display:flex;align-items:center;gap:30px;font-weight:500;font-size:17px;letter-spacing:.005em}
.menu nav .stamp{font-size:17px;padding:13px 20px 14px;margin-left:8px}
.menu .right{display:flex;align-items:center;gap:16px}
.menu .mstamp{display:none}
.menu nav a{text-decoration:none;opacity:.92;padding:6px 0;border-bottom:1px solid transparent;transition:border-color .35s var(--ease-settle),opacity .35s}
.menu nav a:hover{opacity:1;border-bottom-color:var(--paper)}
.menu .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;gap:0}
.menu .burger span{display:block;width:24px;height:2px;background:var(--paper);box-shadow:0 8px 0 var(--paper),0 -8px 0 var(--paper)}
/* on the first screen the links stop before the band and the one orange button sits on it, square and straight */
.first .menu nav{gap:calc(37 * var(--u));margin-right:calc(var(--bw) + calc(32 * var(--u)) - 40px)}
.first .menu .stamp{position:absolute;right:calc(28 * var(--u));top:calc(24 * var(--u));width:calc(284 * var(--u));height:calc(48 * var(--u));display:grid;place-items:center;padding:0;margin:0;transform:none;font-size:max(16px,calc(17 * var(--u)));box-shadow:none;opacity:1}
.first .menu .stamp::before{display:none}
.first .menu nav a.stamp:hover{border-bottom-color:transparent;background:#EB8B30}
.first .menu .mstamp{display:none}
.first .filmctl{left:calc(606 * var(--u));right:auto;bottom:calc(26 * var(--u));width:40px;height:40px;z-index:9}
.first .grain{z-index:10}

/* ---------- phone ---------- */
@media (max-width:760px){
  .first{--u:calc(100vw / 390);--cw:calc(104 * var(--u));--bw:calc(286 * var(--u));--g:calc(calc(6.8 * var(--u)) + clamp(0px,calc((100svh - calc(844 * var(--u))) / 5),calc(9 * var(--u))));height:max(100svh,calc(844 * var(--u)))}
  .film video{left:calc(10 * var(--u));top:calc(70 * var(--u));width:calc(475 * var(--u));height:auto;aspect-ratio:720/1280}
  .veil{left:0;right:0;bottom:auto;height:calc(414 * var(--u));background:rgba(19,17,16,.48)}
  .prints{display:none}
  .cloth{background-size:calc(700 * var(--u)) auto}
  .cloth::before{left:calc(100% - var(--cw) - calc(150 * var(--u)));top:calc(330 * var(--u));width:calc(700 * var(--u));height:calc(377 * var(--u));clip-path:inset(0 calc(calc(550 * var(--u)) - var(--cw)) 0 0)}
  .cloth::after{width:calc(44 * var(--u))}
  .cloth-head{display:block;position:absolute;z-index:3;left:0;right:0;top:0;height:calc(72 * var(--u));background:var(--k) url(media/cloth-black.jpg) 0 0/calc(700 * var(--u)) auto}
  .cloth-head::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(44 * var(--u));background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0))}
  .heads{right:0}
  .head{left:calc(16 * var(--u));bottom:auto;--sx:calc(70 * var(--u))}
  .head.wa{font-size:calc(46 * var(--u));line-height:calc(39 * var(--u));top:calc(207.4 * var(--u));bottom:auto}
  .head.wb{font-size:calc(71 * var(--u));line-height:calc(59 * var(--u));top:calc(163 * var(--u));bottom:auto}
  .head .ln,.head .ln.hot{background-size:auto,auto,calc(400 * var(--u)) auto}
  .head .ln.hot{background-size:auto,auto,auto,calc(400 * var(--u)) auto}
  .read{left:calc(122 * var(--u));top:calc(426 * var(--u));bottom:auto;font-size:max(16px,calc(16 * var(--u)));line-height:calc(21 * var(--u));color:var(--ink)}
  .read br{display:inline}
  .band-under,.band,.band-top{top:calc(414 * var(--u))}
  .band{background-size:calc(520 * var(--u)) auto}
  .band-top{box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.75)}
  .band-edge{display:none}
  .band-under::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:100vw;background:rgba(19,17,16,.48)}
  /* six pairs, not a list: the word sits tight on its line, the air goes between the pairs (and a taller phone gives its spare height to that air), the line is one step quieter than the word */
  .six{top:calc(64 * var(--u))}
  .six li{padding:0 calc(16 * var(--u)) var(--g) calc(18 * var(--u))}
  .six li:nth-child(n) .w{font-size:calc(26 * var(--u));margin-bottom:calc(calc(3.8 * var(--u)) - .145em)}
  .six li.akij .w{margin-bottom:calc(calc(3.84 * var(--u)) - .145em)}
  .six li.akij .line{margin-top:0}
  .six .line,.six small{font-size:max(16px,calc(16 * var(--u)));line-height:calc(19 * var(--u))}
  .band-top .line{color:var(--ink-soft)}
  .work{left:auto;right:calc(16 * var(--u));bottom:calc(8 * var(--u));font-size:max(16px,calc(16 * var(--u)))}
  .menu{padding:16px 12px 16px 16px}
  .menu .logo{gap:9px;margin-left:-2px}
  .menu .logo .mk{height:40px}
  .menu .logo .mark{width:82px}
  .menu nav{display:none}
  .menu .burger{display:flex}
  .menu .mstamp{display:inline-block;font-size:16px;padding:12px 12px 13px;transform:rotate(-1deg)}
  .menu .right{gap:4px}
  .first .menu .mstamp{position:absolute;left:calc(176 * var(--u));top:calc(16 * var(--u));width:calc(150 * var(--u));height:calc(40 * var(--u));display:grid;place-items:center;padding:0;transform:none;box-shadow:none}
  .first .menu .mstamp::before{display:none}
  .first .filmctl{left:auto;right:calc(12 * var(--u));top:calc(84 * var(--u));bottom:auto}
}
@media (max-width:380px){ .menu .logo .mark{width:68px} .menu .logo .mk{height:34px} .menu .mstamp{padding:12px 8px 13px} }

/* reduced motion: everything in place at load, the film on its poster, the shine a still faint highlight, hover changes the veil only */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
  .band-top .six.has li:not(.on) .line,.band-top .six.has li:not(.on) small{opacity:1}
}

/* ---------- below the sheet: the page on paper and on the dark table ---------- */
.l,.d{display:block}.p{display:none}
.thread{position:absolute;left:-26px;top:0;bottom:0;width:4px;background:var(--orange)}
.sec{position:relative;padding:96px 0}
.wrap{position:relative;width:min(1180px,calc(100% - 96px));margin:0 auto}
.paper{background:var(--paper);color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .25 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");background-size:260px 260px}
.dark{background:var(--film);color:var(--paper)}
.h2{font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:.92;font-size:clamp(40px,5.2vw,74px);margin:0 0 26px -2px}
.slot{font-size:clamp(19px,1.5vw,23px);line-height:1.35;max-width:34ch}
.slot + .slot{margin-top:10px}
.slot:empty,.under:empty{display:none}
.go{display:inline-block;margin-top:28px}
.dark .quiet,.pagehead .quiet{color:var(--paper);border-bottom-color:var(--paper)}
.dark .quiet:hover,.pagehead .quiet:hover{color:#fff;border-bottom-color:#fff}
.note{font-size:clamp(18px,1.35vw,20px);line-height:1.35;margin-top:30px;color:rgba(243,236,223,.84)}
.sec .stamp{font-size:20px;padding:19px 30px 20px}
.inset{padding-left:34%}

/* strips: torn tape with a name on it, the one label logic of the site */
.strip{display:inline-block;background:var(--paper);color:var(--ink);padding:9px 12px 8px;font-weight:500;font-size:16px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 10px -6px rgba(0,0,0,.8);transform:rotate(-1.5deg)}

/* the lit table: light from beneath. Four of the six are prints; the two that arrive as writing are taped to the written sheet */
.table{position:relative;overflow:hidden}
.table::before{content:"";position:absolute;inset:0;
  background:radial-gradient(60% 50% at 56% 58%,rgba(243,236,223,.26) 0%,rgba(243,236,223,.08) 45%,rgba(14,13,12,0) 72%)}
.lit{position:relative;display:grid;grid-template-columns:minmax(300px,380px) 1fr;grid-template-areas:"written tapes" "act tapes";gap:44px 48px;align-items:start;margin-top:36px}
.written{grid-area:written;position:relative;padding:30px 30px 46px;transform:rotate(-1.1deg);
  box-shadow:0 26px 40px -18px rgba(0,0,0,.9),0 -2px 26px rgba(243,236,223,.14)}
.written p{font-size:clamp(19px,1.45vw,21px);line-height:1.36}
.written .strips{position:absolute;left:24px;bottom:-19px;display:flex;gap:12px}
.written .strip{background:var(--paper-deep);box-shadow:0 8px 12px -6px rgba(0,0,0,.75)}
.written .strip + .strip{transform:rotate(1.3deg) translateY(3px)}
.lit > .stamp{grid-area:act;justify-self:start}
.tapes{grid-area:tapes;position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:start}
.tape{position:relative;display:flex;flex-direction:column;gap:12px;transform:rotate(var(--r,0deg))}
.tape .pic{background:#fff;padding:5px 5px 7px;box-shadow:0 24px 34px -16px rgba(0,0,0,.85),0 -2px 18px rgba(243,236,223,.08)}
.tape .pic img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.tape .strip{align-self:flex-start}
.tape:nth-child(1){--r:-1deg}
.tape:nth-child(2){--r:1.4deg;margin-top:38px}
.tape:nth-child(3){--r:-.8deg;margin-top:8px}
.tape:nth-child(4){--r:1deg;margin-top:54px}

/* the work: a film still with two boxes lying on it */
.workbed{position:relative;margin-top:40px;aspect-ratio:16/9;overflow:hidden;background:#000}
.workbed img.bed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.78)}
.workbed .pr{position:absolute;display:block;background:#fff;padding:7px 7px 14px;box-shadow:0 30px 40px -18px rgba(0,0,0,.9);text-decoration:none;color:var(--ink);
  transition:transform .5s var(--ease-settle)}
.workbed .pr .ph{width:100%;height:auto;display:block}
.workbed .pr.a .ph{aspect-ratio:1/1;object-fit:cover}
.workbed .pr .tag{display:block;margin:12px 4px 0;font-weight:500;font-size:16px;line-height:1.15;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.workbed .pr .ln{display:block;margin:4px 4px 0;font-size:18px;line-height:1.28;color:var(--ink)}
.workbed .pr.a{left:6%;bottom:7%;width:30%;transform:rotate(-2.4deg)}
.workbed .pr.b{right:7%;top:9%;width:31%;transform:rotate(1.8deg)}
.workbed .pr:hover{transform:translateY(-2px) rotate(0)}

/* a screen with one picture: words one side, a print the other */
.duo{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.duo.flip .txt{order:2}
.duo .h2,.two .h2{font-size:clamp(34px,4.2vw,60px)}
.shot{position:relative;justify-self:center;width:100%;max-width:440px;background:#fff;padding:7px 7px 9px;transform:rotate(var(--r,1.4deg));
  box-shadow:0 26px 40px -18px rgba(27,25,21,.6),0 4px 10px -4px rgba(27,25,21,.25)}
.dark .shot{box-shadow:0 30px 40px -18px rgba(0,0,0,.95),0 -2px 18px rgba(243,236,223,.08)}
.shot img,.shot video{display:block;width:100%;height:auto}
.shot.tall{max-width:370px}
.shot.tall img{aspect-ratio:4/5;object-fit:cover}
.shot.wide{max-width:none}
.shot .strip{position:absolute;left:-12px;bottom:-17px}
.rows{position:relative;display:grid;gap:96px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.two > div + div{margin-top:64px}
.two .strip{background:var(--paper-deep);box-shadow:0 6px 10px -6px rgba(27,25,21,.45);margin:0 0 24px -4px}

/* the ask */
.askbig{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.askbig .h2{margin-bottom:6px}
.askbig .stamp{font-size:clamp(24px,2.6vw,34px);padding:24px 38px 26px;transform:rotate(-1.6deg)}
.askbig .under{font-size:17px;color:var(--ink-soft)}

/* footer */
.foot{padding:52px 0 44px}
.foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px 32px;flex-wrap:wrap}
.foot .next{flex:0 0 100%;margin-bottom:10px}
.foot .next a{font-weight:500;font-size:clamp(20px,1.8vw,26px);text-decoration:none;border-bottom:1.5px solid var(--paper);padding-bottom:3px}
.foot .mark{width:136px;height:auto;opacity:.95}   /* height:auto keeps the wordmark at its drawn proportions, 1135 by 442 */
.foot nav{display:flex;gap:24px;font-weight:500;font-size:16px;flex-wrap:wrap}
.foot nav a{text-decoration:none;opacity:.9;padding:4px 0}
.foot .firm{font-size:16px;opacity:.88}

/* pages: the menu on a dark top band, then the first screen of the page */
.pagehead{position:relative;background:var(--film);color:var(--paper);padding-top:96px;isolation:isolate;overflow:hidden}
.pagehead .menu{position:absolute}
.pagehead .hero{position:relative;display:flex;align-items:flex-end}
.pagehead .hero.pic{min-height:64vh}
.pagehead .hero .bed{position:absolute;left:0;top:-96px;width:100%;height:calc(100% + 96px);object-fit:cover;filter:brightness(.62);z-index:-2;transition:filter .9s var(--ease-settle)}
.pagehead .hero.pic::after{content:"";position:absolute;left:0;right:0;bottom:0;top:-96px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,13,12,.62) 0%,rgba(14,13,12,.12) 30%,rgba(14,13,12,.7) 72%,rgba(14,13,12,.88) 100%);transition:opacity .9s var(--ease-settle)}
.pagehead .hero.playing .bed{filter:brightness(.92)}
.pagehead .hero.playing::after{opacity:.55}
.pagehead .hero .wrap{padding:36px 0 64px}
.pagehead .hero.pic .wrap{padding:72px 0 52px}
.pagehead .h1{font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:.9;font-size:clamp(48px,6.6vw,96px);margin:0 0 20px -3px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.pagehead .slot{max-width:40ch}
.playrow{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.playrow .h1{margin-bottom:0}
.hero .filmctl{position:static;flex:none;width:72px;height:72px;background:rgba(243,236,223,.16)}
.hero .filmctl svg{width:24px;height:24px}
.menu.open nav{display:flex}

@media (max-width:760px){
  .d{display:none}.p{display:block}
  .sec{padding:64px 0}
  .wrap{width:calc(100% - 40px)}
  .thread{left:-12px;width:3px}
  .h2,.duo .h2,.two .h2{font-size:clamp(34px,10vw,44px)}
  .inset{padding-left:0}
  .lit{grid-template-columns:1fr;grid-template-areas:"written" "act" "tapes";gap:38px;margin-top:28px}
  .written{padding:24px 22px 42px}
  .tapes{grid-template-columns:1fr 1fr;gap:26px 16px}
  .tape:nth-child(n){margin-top:0}
  .tape:nth-child(even){margin-top:22px}
  .workbed{aspect-ratio:auto;padding:24px 14px 28px;margin-top:30px}
  .workbed .pr.a,.workbed .pr.b{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:84%}
  .workbed .pr.b{margin:-16px 0 0 16%}
  .workbed .pr .ln{font-size:17px}
  .duo,.two{grid-template-columns:1fr;gap:36px}
  .duo.flip .txt{order:0}
  .duo.flip .shot{justify-self:end}
  .shot{justify-self:start;max-width:88%}
  .shot.tall{max-width:74%}
  .shot.wide{max-width:96%}
  .rows{gap:72px}
  .two > div + div{margin-top:8px}
  .askbig .stamp{font-size:22px;padding:18px 24px 19px}
  .foot nav{gap:8px 20px}
  .pagehead{padding-top:80px}
  .pagehead .hero .bed{top:-80px;height:calc(100% + 80px)}
  .pagehead .hero.pic::after{top:-80px}
  .pagehead .hero.pic{min-height:58vh}
  .pagehead .hero .wrap{padding:28px 0 48px}
  .pagehead .hero.pic .wrap{padding:56px 0 40px}
  .pagehead .h1{font-size:clamp(40px,12vw,56px)}
  .playrow{gap:18px}
  .hero .filmctl{width:60px;height:60px}
  .menu.open nav{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 20px 24px;background:rgba(14,13,12,.96);font-size:20px}
  .menu.open nav .stamp{display:none}
}
@media (prefers-reduced-motion:reduce){ .pagehead .hero .bed,.pagehead .hero.pic::after{transition:none} }

/* ---------- round 6: the first screen's cloth carried down the site. Source: lower-r6.css, joined on by build.py ----------
   Grounds are the two cloths in hard splits. Headings are set to the width of their column by site.js, capped.
   Orange: one word in a heading on black cloth, the button, the logo. Never on cream: orange on cream measures 2.4 to 1. */
.dark,.pagehead{background:var(--k) url(media/cloth-black.jpg) center top/1400px auto;color:var(--c)}
.paper{background:var(--c) url(media/cloth-cream.jpg) left top/800px auto;color:var(--k)}
.sec,.foot{position:relative;overflow:hidden}
.wrap{width:auto;margin:0 clamp(20px,3.9vw,56px)}
.thread{display:none}
.table::before{background:none}
/* the flame: gloss on matt, under everything that lies on the cloth, never on a section that carries a film still */
.sec.dark:not(:has(.workbed))::before,.foot::before,.pagehead:not(:has(.pic))::before{content:"";position:absolute;inset:auto;right:-16vw;top:50%;width:min(110vw,1700px);aspect-ratio:1500/808;height:auto;transform:translateY(-50%);
  background:#fff;mix-blend-mode:normal;opacity:.12;pointer-events:none;-webkit-mask:url(media/fsi-flame.svg) center/contain no-repeat;mask:url(media/fsi-flame.svg) center/contain no-repeat}
.sec.dark:has(.rows)::before{top:-60px;transform:none}
.foot::before{right:auto;left:-30vw}
.pagehead:not(:has(.pic))::before{z-index:-1;right:-22vw}
/* headings: the stencil as the picture. Cloth inside the letters, cream on black and black on cream */
.h2,.duo .h2,.two .h2,.pagehead .h1{font-size:clamp(44px,7vw,104px);line-height:.84;margin:0 0 .26em -.02em;text-shadow:none}
.h1 > span,.h2 > span{width:max-content;max-width:none;padding:.03em 0}
.dark .h2 > span,.pagehead:not(:has(.pic)) .h1 > span{color:transparent;background:url(media/cloth-cream.jpg) 0 0/800px auto;-webkit-background-clip:text;background-clip:text}
.paper .h2 > span{color:transparent;background:url(media/cloth-black.jpg) 0 0/1400px auto;-webkit-background-clip:text;background-clip:text}
.dark .hot,.pagehead .hot{color:transparent;background:linear-gradient(#E27F22,#E27F22),url(media/cloth-cream.jpg) 0 0/800px auto;background-blend-mode:multiply;-webkit-background-clip:text;background-clip:text}
.pagehead:has(.pic) .hot{color:var(--orange);background:none}
.slot{font-size:clamp(19px,1.6vw,24px);max-width:36ch}
.sec .stamp,.pagehead .stamp{transform:none;box-shadow:none}
.sec .stamp::before,.pagehead .stamp::before{display:none}
.sec .stamp:hover,.pagehead .stamp:hover{transform:none;background:#EB8B30}
.askbig .h2{align-self:stretch}
.askbig .stamp{transform:none;font-size:clamp(22px,2.2vw,30px);padding:22px 40px 24px}
/* labels: cloth cut the other way. Black on cream, cream on black */
.strip{background:var(--c) url(media/cloth-cream.jpg) 0 0/800px auto;color:var(--k);box-shadow:none}
.paper .strip,.written .strip,.two .strip{background:var(--k) url(media/cloth-black.jpg) 0 0/1400px auto;color:var(--c);box-shadow:none}
.written{box-shadow:none}
.shot,.tape .pic,.workbed .pr{background:var(--c)}
.foot{padding:76px 0 56px}
.foot .next a{font-size:clamp(22px,2.2vw,32px)}

@media (min-width:761px){
  .sec{padding:112px 0}
  /* home, the audit: the first screen's cream band runs on down the right edge and carries the written answer */
  #audit{--bw:max(300px,23.6vw);min-height:640px}
  #audit::after{content:"";position:absolute;right:0;top:0;bottom:0;width:var(--bw);background:var(--c) url(media/cloth-cream.jpg) left top/800px auto}
  #audit .wrap{position:static;margin-right:calc(var(--bw) + 44px)}
  #audit .lit{position:static;display:block;margin-top:0}
  #audit .written{position:absolute;z-index:2;right:28px;top:112px;width:calc(var(--bw) - 56px);padding:0;transform:none;background:none}
  #audit .written p{font-size:clamp(20px,1.6vw,25px);line-height:1.3;font-weight:500}
  #audit .written .strips{position:static;margin-top:26px;flex-wrap:wrap;gap:10px}
  #audit .written .strip{transform:none}
  #audit .lit > .act{display:contents}
  #audit .lit .stamp{position:absolute;z-index:2;right:28px;bottom:96px;width:calc(var(--bw) - 56px);text-align:center;padding-left:0;padding-right:0}
  #audit .tapes{margin-top:8px;gap:22px}
  #audit::before{right:auto;left:-20vw}
}
@media (max-width:760px){
  .h2,.duo .h2,.two .h2,.pagehead .h1{font-size:clamp(40px,12.5vw,60px)}
  .written{transform:none;margin:0 -20px;padding:30px 20px 34px}
  .written .strips{position:static;margin-top:20px}
  .foot{padding:56px 0 44px}
}
@media (max-width:379px){ .pagehead .menu{padding-left:14px;padding-right:10px} .pagehead .menu .right{gap:6px} }
/* a heading is measured against its column, so no column may grow to fit its heading */
.pagehead .hero .wrap{flex:1 1 auto;min-width:0}
.duo > *,.two > *,.rows > *{min-width:0}

/* ---------- round 7, the fix run ---------- */
/* the free-audit small print, under every main button, never the menu button */
.fine{font-weight:500;font-size:18px;line-height:1.2;margin:0}
.fine span{display:block;font-weight:400;font-size:16px;margin-top:5px;opacity:.82}
.askbig .fine{margin-top:-12px}
/* Chhaya top: the picture is the Chhaya site itself, with its own menu and Bangla headline. Only the window blinds between
   them are shown (13 to 45 percent of its height), cut hard; the heading stands on the black cloth below, nothing behind it */
.pagehead .hero:has(> img.bed) .bed{width:100%;height:auto;aspect-ratio:1.6;object-fit:fill;top:calc(-96px - 8.125vw);clip-path:inset(13% 0 56.5% 0);filter:brightness(.78)}
.pagehead .hero:has(> img.bed)::after{bottom:auto;height:20vw;background:linear-gradient(180deg,rgba(14,13,12,.6) 0%,rgba(14,13,12,0) 62%)}
.pagehead .hero:has(> img.bed){padding-top:calc(20vw - 96px)}
.pagehead .hero:has(> img.bed) .wrap{padding-top:52px}
.pagehead .hero:has(> img.bed) .h1 > span{color:transparent;background:url(media/cloth-cream.jpg) 0 0/800px auto;-webkit-background-clip:text;background-clip:text}
@media (min-width:761px){
  #audit .lit .act > .fine{position:absolute;z-index:2;right:28px;bottom:36px;width:calc(var(--bw) - 56px);text-align:right;color:var(--k)}
  /* the seven pages: the menu's phone slot is empty on desk, so the links and the button run to the right edge */
  .pagehead .menu{padding-right:clamp(20px,3.9vw,56px)}
  .pagehead .menu .right{display:none}
}
@media (max-width:760px){
  /* home, the work: the Heritage print lies on top, so its caption is whole and the Chhaya print slides under it */
  .workbed .pr.a{z-index:2}
  .pagehead .hero:has(> img.bed) .bed{width:310vw;max-width:none;left:-129vw;top:calc(-80px - 25.2vw)}
  .pagehead .hero:has(> img.bed)::after{height:62vw}
  .pagehead .hero:has(> img.bed){padding-top:calc(62vw - 80px)}
  .pagehead .hero:has(> img.bed) .wrap{padding-top:40px}
}

/* ---------- round 8: three changes from the owner ---------- */
/* every main button and its small print travel as one block: the block is as wide as the button,
   so the two small lines set flush right end exactly on the button's right edge */
.act{display:inline-flex;flex-direction:column;align-items:stretch;gap:14px}
.act > .stamp{text-align:center}
.act > .fine{text-align:right;margin-top:0}
.lit > .act{grid-area:act;justify-self:start}
/* What we do, top: "The audit" as a second button. The main button's box to the pixel (2px line inside the same padding),
   cream line and cream words on the black cloth; orange stays the main button's alone */
.go.outline{display:inline-block;margin-top:34px;font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1;padding:20px 38px 22px;
  color:var(--paper);background:transparent;border:2px solid var(--paper);border-radius:0;box-shadow:none;text-decoration:none;
  transition:background-color .32s cubic-bezier(.22,.61,.36,1),color .32s cubic-bezier(.22,.61,.36,1)}
.go.outline:hover{background:var(--paper);color:var(--ink)}
.go.outline:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.go.outline{transition:none}}

/* ============ ROUND 9, 13 Oct 2026: ONE FAMILY OF BORDERED LINK ============
   Every small text link (menu, footer menu, "Next: ...", every `quiet go`, the home "The work") is the little
   sibling of the round-8 outline button: the same 2px line, square, General Sans 500, clear ground, and it fills on hover and focus.
   One height, 48px: the height of the menu's orange button. Links in a row are joined into one strip (they share a line),
   so a row has one top, one bottom and one baseline by construction. Cream line on black cloth, black line on cream cloth. */
.menu nav a:not(.stamp),.quiet.go,.foot .next a,.foot nav a,.first a.work{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;
  font-weight:500;font-size:clamp(20px,1.5vw,22px);line-height:1;letter-spacing:0;white-space:nowrap;
  padding:0 .85em 2px;border:2px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);
  text-decoration:none;opacity:1;box-shadow:none;
  transition:background-color .45s var(--ease-settle),color .45s var(--ease-settle),border-color .45s var(--ease-settle)}
.menu nav a:not(.stamp),.dark .quiet.go,.pagehead .quiet.go,.foot .next a,.foot nav a{color:var(--paper);border-color:var(--paper)}
/* the fill: black on cream cloth, cream on black cloth; the keyboard gets the same fill plus the orange ring */
.quiet.go:hover,.quiet.go:focus-visible,.first a.work:hover,.first a.work:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu nav a:not(.stamp):hover,.menu nav a:not(.stamp):focus-visible,.dark .quiet.go:hover,.dark .quiet.go:focus-visible,
.pagehead .quiet.go:hover,.pagehead .quiet.go:focus-visible,.foot .next a:hover,.foot .next a:focus-visible,
.foot nav a:hover,.foot nav a:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.foot a:focus-visible,.first a.work:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.menu nav a:not(.stamp),.foot nav a{position:relative}
.menu nav a:not(.stamp):focus-visible,.foot nav a:focus-visible{z-index:2}
/* the strips: the top menu and the footer menu */
.menu nav,.foot nav{gap:0;align-items:stretch}
.menu nav a:not(.stamp){padding-inline:clamp(12px,1.25vw,20px)}
.menu nav a:not(.stamp) + a:not(.stamp),.foot nav a + a{margin-left:-2px}
.menu nav .stamp{margin-left:clamp(14px,2vw,30px)}
.foot nav{flex-wrap:nowrap}
/* the onward link at the foot keeps its size; it is the one big member */
.foot .next a{font-size:clamp(22px,2.2vw,32px);padding:.4em .7em .48em}
.first a.work{border-bottom:2px solid var(--ink);font-size:max(20px,calc(18 * var(--u)))}
@media (min-width:761px){
  /* home: the strip takes the top and the height of the orange button in the cream band */
  .first .menu nav{gap:0;align-self:flex-start;margin-top:calc(24 * var(--u) - 22px)}
  .first .menu nav a:not(.stamp){min-height:0;height:calc(48 * var(--u))}
  .first a.work{bottom:calc(28 * var(--u))}   /* the same inset under it as beside it */
}
@media (max-width:760px){
  /* phone: the open menu and the footer menu are the same ledger, one cell a line, one left edge */
  .menu.open nav,.first .menu.open nav{align-items:stretch;gap:0;padding:14px 12px 22px 14px;margin-right:0}
  .menu.open nav a:not(.stamp),.foot nav a{justify-content:flex-start;min-height:52px;font-size:20px;padding-inline:16px}
  .menu.open nav a:not(.stamp) + a:not(.stamp),.foot nav a + a{margin-left:0;margin-top:-2px}
  .foot nav{flex:0 0 100%;flex-direction:column}
  /* home, phone: 43px is all the first screen leaves under the list, so this one member is slim */
  .first a.work{font-size:18px;min-height:0;height:33px;padding:0 12px 1px;bottom:4px}
  .first:has(.menu.open) .filmctl{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.menu nav a:not(.stamp),.quiet.go,.foot .next a,.foot nav a,.first a.work{transition:none}}

/* ============ ROUND 10, 13 Oct 2026: six corrections from the owner ============ */
/* 1. the two prints swap sizes. Each keeps its centre and its turn; the tag and the clip ride the Heritage print's new top edge (19.65 higher) */
.print.box{left:calc(16 * var(--u));top:calc(-97.65 * var(--u));width:calc(150 * var(--u))}
.print.poster{left:calc(16 * var(--u));top:calc(22.6 * var(--u));width:calc(118 * var(--u))}
.clip{top:calc(-125.65 * var(--u))}
.labels{top:calc(-97.65 * var(--u))}
html[data-words="a"] .labels{top:calc(-65.65 * var(--u))}

/* 2 and 3. the white links of the top bar and the foot are plain words again: no line, no box. They answer the pointer and the keyboard
   with a thin underline that settles in. One rule for both rows */
.menu nav a:not(.stamp),.foot .next a,.foot nav a{display:inline-flex;align-items:center;min-height:44px;height:auto;padding:0;border:0;border-radius:0;background:none;
  color:var(--paper);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.32em;text-decoration-color:transparent;
  transition:text-decoration-color .45s var(--ease-settle),opacity .45s var(--ease-settle)}
.menu nav a:not(.stamp):hover,.menu nav a:not(.stamp):focus-visible,.foot .next a:hover,.foot .next a:focus-visible,.foot nav a:hover,.foot nav a:focus-visible{
  background:none;color:var(--paper);border:0;text-decoration-color:var(--paper)}
.menu nav a:not(.stamp) + a:not(.stamp),.foot nav a + a{margin:0}
/* 2. the top bar: logo left; the five words and the orange button together on the right, one baseline */
.menu nav{gap:clamp(22px,2.3vw,34px);align-items:center}
.menu nav a:not(.stamp){font-size:clamp(20px,1.5vw,22px);padding-inline:0}
.menu nav .stamp{margin-left:0}   /* the button keeps the words' own rhythm: one gap, one group */
@media (min-width:761px){
  /* home: the button stands in the cream column, so the words end 28 short of the column's edge, the button's own inset mirrored, at its height */
  .first .menu nav{margin-right:calc(var(--bw) + calc(28 * var(--u)) - 40px);margin-top:calc(24 * var(--u) - 22px);height:calc(48 * var(--u));align-self:flex-start;gap:clamp(22px,2.3vw,34px)}
  .first .menu nav a:not(.stamp){height:auto;min-height:0}
  .first .menu .right{display:none}   /* its two phone pieces are hidden on desk; empty, it held the words in the middle of the bar */
}
/* 3. the foot: the orange button and the big heading lead; the white words come last, quiet, their right edge on the heading's last letter.
   site.js measures that letter and sets --fx, the distance from the column's right edge back to it */
.foot .wrap{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"next next next" "mark . nav" "firm . nav";align-items:center;gap:0 32px;padding-right:var(--fx,0px)}
.foot .next{grid-area:next;justify-self:end;margin:0 0 26px;flex:none}
.foot .next a{font-size:clamp(26px,2.6vw,38px);font-weight:500;line-height:1.1;padding:0}
.foot .mark{grid-area:mark;align-self:end}
.foot .firm{grid-area:firm;align-self:start;margin-top:10px}
.foot nav{grid-area:nav;justify-self:end;display:flex;flex-wrap:nowrap;gap:clamp(22px,2.3vw,34px);font-size:clamp(20px,1.7vw,24px)}
.foot nav a{font-size:inherit;font-weight:500;padding:0;justify-content:flex-end}
.foot{padding-bottom:96px}   /* the corner arrow has its own clear square under the last line */
@media (max-width:760px){
  .foot .wrap{grid-template-columns:1fr auto;grid-template-areas:"next next" "mark nav" "firm nav";align-items:start;gap:0 20px}
  .foot .next{margin-bottom:30px}
  .foot .next a{font-size:26px}
  .foot nav{flex-direction:column;align-items:flex-end;gap:0;font-size:22px;flex:none}
  .foot nav a{min-height:44px;font-size:22px}
  .foot .mark{align-self:start;margin-top:8px}
  .foot .firm{align-self:start}
  .foot{padding-bottom:84px}
  /* the open phone menu: the same plain words, set right under the menu button, on a solid cloth so nothing shows through */
  .menu.open{z-index:60}
  .menu.open nav,.first .menu.open nav{background:var(--k) url(media/cloth-black.jpg) 0 0/700px auto;align-items:flex-end;gap:0;padding:6px 16px 22px 14px;margin-right:0;box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
  .menu.open nav a:not(.stamp){justify-content:flex-end;min-height:50px;font-size:22px;padding:0}
}

/* 4. the cream column: "The work" is gone; its foot carries the outline button, the top button's box mirrored (24 in from the edge, its width, its height, its type).
   Black line on the cream cloth, so the column keeps one orange button */
.band-top .colgo{position:absolute;margin:0;padding:0;display:grid;place-items:center;left:calc(28 * var(--u));right:calc(28 * var(--u));bottom:calc(24 * var(--u));height:calc(48 * var(--u));
  font-size:max(16px,calc(17 * var(--u)));line-height:1;color:var(--ink);border-color:var(--ink);background:transparent}
.band-top .colgo:hover,.band-top .colgo:focus-visible{background:var(--ink);color:var(--paper)}
@media (max-width:760px){
  /* phone: the screen grows by the button and its air; the spare height of a tall phone still goes between the six pairs */
  .first{height:max(100svh,calc(888 * var(--u)));--g:calc(calc(6.8 * var(--u)) + clamp(0px,calc((100svh - calc(888 * var(--u))) / 5),calc(9 * var(--u))))}
  .band-top .colgo{left:calc(18 * var(--u));right:calc(16 * var(--u));bottom:calc(20 * var(--u));height:calc(46 * var(--u));font-size:16px}
}

/* 5. the scroll cue: a hairline with a light running down it into a stencil chevron (the bridge cut at its point, like the letters).
   It breathes, it never shouts, and it is gone once the page moves. Desk: on the bottom row beside the film's pause button. Phone: on the black cloth strip */
.cue{position:absolute;z-index:9;left:calc(760 * var(--u));bottom:calc(26 * var(--u));width:20px;height:40px;pointer-events:none;color:var(--c);opacity:.8;transition:opacity .7s var(--ease-settle)}
html.moved .cue{opacity:0}
.cue svg{display:block;width:20px;height:40px;overflow:visible}
.cue .run{animation:cue-run 3.2s cubic-bezier(.45,0,.2,1) infinite}
.cue .chev{animation:cue-nudge 3.2s cubic-bezier(.22,.8,.2,1) infinite}
@keyframes cue-run{0%{transform:translateY(-12px);opacity:0}25%{opacity:1}65%,100%{transform:translateY(24px);opacity:0}}
@keyframes cue-nudge{0%,48%{transform:translateY(0)}64%{transform:translateY(4px)}100%{transform:translateY(0)}}
@media (max-width:760px){ .cue{left:calc(52 * var(--u) - 10px);top:calc(100svh - 66px);bottom:auto} }

/* 6. the way back up: bottom left, line only, the cue's chevron turned over. It arrives once the page has moved and leaves at the top.
   Difference blend, so the one cream line reads dark on cream cloth and cream on black */
.totop{position:fixed;z-index:50;left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));width:44px;height:44px;display:grid;place-items:center;
  color:#F4EFE6;mix-blend-mode:difference;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .55s var(--ease-settle),transform .55s var(--ease-settle),visibility 0s linear .55s}
.totop.on{opacity:.88;visibility:visible;transform:none;transition:opacity .55s var(--ease-settle),transform .55s var(--ease-settle),visibility 0s}
.totop svg{width:22px;height:24px;transition:transform .45s var(--ease-settle)}
.totop:hover{opacity:1}.totop:hover svg{transform:translateY(-3px)}
.totop:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}
@media (max-width:760px){ .totop{left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom))} }
/* round 19: the arrow yields to the words (site.js yieldMap). It stands down quickly as a line or a button comes within reach and returns
   at its own slow settle. An arrow under the pointer or holding keyboard focus never leaves. Seat and drawing unchanged */
.totop.on.by:not(:hover):not(:focus-visible){opacity:0;visibility:hidden;transition:opacity .2s var(--ease-settle),visibility 0s linear .2s}
@media (prefers-reduced-motion:reduce){ .totop.on.by:not(:hover):not(:focus-visible){transition:none} }
@media (prefers-reduced-motion:reduce){
  .cue .run,.cue .chev{animation:none}.cue .run{opacity:0}
  .menu nav a:not(.stamp),.foot .next a,.foot nav a,.totop,.totop svg{transition:none}
}

/* ============ ROUND 11, 13 Oct 2026: the owner's corrections on the run-10 pictures ============ */
@media (min-width:761px){
  /* A. home: the menu is plain words, no line anywhere, and it ends on the right edge of the Y in STRATEGY.
     The Y is drawn in --u, so its right edge is 1001.6u at every width (measured on the ink, 1440, 1280, 1100); the menu rides the same unit */
  .first .menu nav{position:absolute;top:calc(24 * var(--u));right:calc(100% - calc(1001.6 * var(--u)) - var(--tb,0px));height:calc(48 * var(--u));margin:0}
  .first .menu nav a{border:0}
  .first .menu{--tb:.55px}   /* the last word's ink stops .55 px inside its own box; this lands ink on ink */
  /* D1. while the first screen is on view the orange button lives at the foot of the cream column; the bar's own copy stays out */
  html.dk .first .menu nav a.stamp{visibility:hidden;pointer-events:none}
  /* D2. the column's foot: the orange button, the top one's twin, its small print flush to its right edge.
     The six offers start where the old top button started (their cap line on 24u) and their rhythm gives way first on a short screen */
  .first{--g:min(calc(24 * var(--u)),max(calc(6 * var(--u)),calc((100svh - calc(670 * var(--u)) - 62px) / 5)))}
  .six{top:calc(16 * var(--u))}
}
.band-top .colact{position:absolute;z-index:1;left:calc(28 * var(--u));right:calc(28 * var(--u));bottom:calc(24 * var(--u));display:flex;flex-direction:column;align-items:stretch;gap:14px}
.band-top .colact .colgo{position:relative;left:auto;right:auto;bottom:auto;display:grid;place-items:center;width:100%;height:calc(48 * var(--u));margin:0;padding:0;
  font-size:max(16px,calc(17 * var(--u)));line-height:1;color:var(--ink);background:var(--orange);border:0;transform:none;box-shadow:none;transition:background-color .3s var(--ease-settle)}
.band-top .colact .colgo::before{display:none}
.band-top .colact .colgo:hover{background:#EB8B30;color:var(--ink);transform:none;box-shadow:none}
.band-top .colact .colgo:focus-visible{background:#EB8B30;color:var(--ink);outline:2px solid var(--ink);outline-offset:3px}
.band-top .colact .fine{color:var(--ink);text-align:right}

@media (max-width:760px){
  /* phone: the six offers and the twin cannot share 844 px, so the bar keeps its orange button from the start (the only one in view),
     the offers take the screen to the fold, and the twin with its small print stands whole just under it */
  .first{height:max(100svh,calc(1004 * var(--u)));--g:calc(calc(12 * var(--u)) + clamp(0px,calc((100svh - calc(1004 * var(--u))) / 5),calc(9 * var(--u))))}
  .band-top .colact{left:calc(18 * var(--u));right:calc(16 * var(--u));bottom:calc(20 * var(--u))}
  .band-top .colact .colgo{height:calc(46 * var(--u));font-size:16px}
}

/* E1. the scroll cue, clearer and still quiet: a longer rail, a touch more light, and the whole mark nudges down once every 2.8 s */
.cue{height:54px;opacity:.95}
.cue svg{height:54px}
.cue .rail{opacity:.55}
.cue{animation:cue-drift 2.8s cubic-bezier(.45,0,.2,1) infinite}
.cue .run{animation:cue-run11 2.8s cubic-bezier(.45,0,.2,1) infinite}
.cue .chev{animation:none}
/* one breath: the light runs down the rail (0 to 55 percent), and as it reaches the chevron the whole mark gives once */
@keyframes cue-run11{0%{transform:translateY(-14px);opacity:0}18%{opacity:1}55%,100%{transform:translateY(38px);opacity:0}}
@keyframes cue-drift{0%,50%,100%{transform:translateY(0)}66%{transform:translateY(6px)}}
html.moved .cue{opacity:0;animation-play-state:paused}
@media (min-width:761px){ .cue{bottom:calc(26 * var(--u) - 7px)} }
@media (max-width:760px){ .cue{top:calc(100svh - 80px)} }
@media (prefers-reduced-motion:reduce){ .cue{animation:none} }

/* ============ ROUND 12, 13 Oct 2026: the owner's six pictures, re-read in his order ============ */
/* 3. the two prints, whole again. The pair moves left as one, so the Heritage corner stands clear of the column's dark cut edge
   instead of sliding under it; each print keeps its round-10 size and its place against the other */
.prints{left:calc(908 * var(--u))}

/* 4. the rotating words. Every line sits in one grid cell, so the button is as wide as its widest line and never moves.
   The old line lifts out, the new one rises in a beat later: opacity and transform only */
.rot{display:inline-grid;vertical-align:top}
.rot .rl{grid-area:1/1;white-space:nowrap;text-align:center;opacity:0;transform:translateY(.34em);transition:opacity .26s var(--ease-settle),transform .44s var(--ease-settle)}
.rot .rl.on{opacity:1;transform:none;transition-delay:.1s}
.rot .rl.was{transform:translateY(-.34em)}

/* 5. the top button: back on its old box at the head of the cream column (24u down, 28u in, 284u by 48u), fixed, so it is the same button all the way down.
   .dockline is the outline it wears while the first screen is on view; .dock is the link, and its orange eases in (400 ms) once the first screen has gone */
.dock,.dockline{--u:calc(min(100vw / 1440,100svh / 776));position:fixed;top:calc(24 * var(--u));right:calc(28 * var(--u));width:calc(284 * var(--u));height:calc(48 * var(--u));
  box-sizing:border-box;display:grid;place-items:center;margin:0;padding:0;font-weight:500;font-size:max(16px,calc(17 * var(--u)));line-height:1;transform:none}
.dockline{z-index:54;pointer-events:none;border:2px solid #F4EFE6;color:#F4EFE6;mix-blend-mode:difference;
  transition:opacity .4s var(--ease-settle),background-color .25s var(--ease-settle),color .25s var(--ease-settle)}
.dock{z-index:55;border:0;background:rgba(226,127,34,0);color:rgba(27,25,21,0);box-shadow:0 10px 22px -14px rgba(0,0,0,0);
  transition:background-color .4s var(--ease-settle),color .2s var(--ease-settle),box-shadow .4s var(--ease-settle)}
.dock::before{display:none}
.dock:hover{transform:none;box-shadow:0 10px 22px -14px rgba(0,0,0,0)}
html.past .dock{background:#E27F22;color:rgb(27,25,21);box-shadow:0 10px 22px -14px rgba(0,0,0,.55);
  transition:background-color .4s var(--ease-settle),color .3s var(--ease-settle) .1s,box-shadow .4s var(--ease-settle)}
html.past .dock:hover{background:#EB8B30;box-shadow:0 10px 22px -14px rgba(0,0,0,.55)}
html.past .dockline{opacity:0}
/* the outline answers the pointer the way the column's old outline button did: it fills, and the words turn */
html:not(.past) .dock:hover + .dockline,html:not(.past) .dock:focus-visible + .dockline{background:#F4EFE6;color:#000}
.dock:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
html.dk .first .menu .mstamp{visibility:hidden;pointer-events:none}
@media (min-width:761px){
  /* the six offers step down to make room: 22 px under the button to the cap line of the first word */
  .first{--k:1;--g:min(calc(24 * var(--u)),max(calc(3 * var(--u)),calc((100svh - calc(718 * var(--u)) - 84px) / 5)))}
  .six{top:calc(64 * var(--u) + 22px)}
  .six li:nth-child(1) .w{font-size:calc(53 * var(--u) * var(--k))}.six li:nth-child(2) .w{font-size:calc(74 * var(--u) * var(--k))}.six li:nth-child(3) .w{font-size:calc(66 * var(--u) * var(--k))}
  .six li:nth-child(4) .w{font-size:calc(77 * var(--u) * var(--k))}.six li:nth-child(5) .w{font-size:calc(38 * var(--u) * var(--k))}.six li:nth-child(6) .w{font-size:calc(55 * var(--u) * var(--k))}
}
@media (max-width:760px){
  .dock,.dockline{--u:calc(100vw / 390);top:calc(16 * var(--u));right:auto;left:calc(176 * var(--u));width:calc(150 * var(--u));height:calc(40 * var(--u));font-size:16px}
}
@media (prefers-reduced-motion:reduce){ .dock,html.past .dock,.dockline,.rot .rl{transition:none} }
/* round 15, phone: the whole first screen inside one screen. The heading and the cream column rise 34 as one piece, the six words step down to 22,
   and the button with its small print stands 10 off the floor, so the orange button and its two lines end above the fold at 390 by 844 and 360 by 800 */
@media (max-width:760px){
  .first{height:max(100svh,calc(844 * var(--u)));--g:calc(calc(6.5 * var(--u)) + clamp(0px,calc((100svh - calc(844 * var(--u)) - 7 * (max(18px,calc(18 * var(--u))) - calc(18 * var(--u))) - (44px - calc(44 * var(--u)))) / 5),calc(9 * var(--u))))}
  .head.wb{top:calc(129 * var(--u))}
  .head.wa{top:calc(173.4 * var(--u))}
  .veil{height:calc(380 * var(--u))}
  .band-under,.band,.band-top{top:calc(380 * var(--u))}
  .read{top:calc(390 * var(--u));line-height:calc(20 * var(--u))}
  .six{top:calc(56 * var(--u))}
  .six li:nth-child(n) .w{font-size:calc(22 * var(--u))}
  .six .line,.six small{line-height:max(18px,calc(18 * var(--u)))}
  .band-top .colact{bottom:calc(10 * var(--u));gap:8px}
  .band-top .colact .colgo{height:calc(44 * var(--u))}
  .band-top .colact .fine{font-size:16px}
  .band-top .colact .fine span{margin-top:3px}
}
/* round 15, the bar button on a phone. The widest of the six lines is 180 px at 16 px and the bar has 181 px between the logo and the menu button,
   so the box takes all the room there is (8 off the logo, 6 off the menu button) and site.js passes over any line that box cannot hold.
   The logo and the menu button keep their sizes: nothing in the bar is squeezed */
@media (max-width:760px){
  .dock,.dockline,.first .menu .mstamp{left:161px;right:62px;width:auto}
  .menu .logo,.menu .burger{flex:none}
  .menu .right{flex:0 1 auto;min-width:0;margin-left:8px}
  .menu .mstamp{flex:0 1 auto;width:204px;min-width:0;display:grid;place-items:center;padding-left:0;padding-right:0;white-space:nowrap}
}
@media (max-width:380px){ .dock,.dockline,.first .menu .mstamp{left:140px} .menu .mstamp{padding-left:0;padding-right:0} }
/* round 15, the foot: the wordmark holds its drawn width and proportions whatever the words beside it are told to do */
.foot .mark{min-width:136px;flex:none;height:auto;aspect-ratio:1135/442}
/* round 16, the foot on desk when the heading above ends far to the left (heritage, 775): site.js sets .two, the empty middle column goes,
   one gap of 24 stands between the wordmark and the white words, and the words end on the heading's last letter */
@media (min-width:761px){ .foot.two .wrap{grid-template-columns:auto 1fr;grid-template-areas:"next next" "mark nav" "firm nav";column-gap:24px} }

/* round 16, the column's orange button, bigger and bolder. The label is cut in the headline stencil, in capitals, and the box is the top button at one and a half:
   48 to 72 tall, 17 to 25 type, the same 284 wide and the same edges. A line too long for one row stands as a two-row stack at the same size (lines two and three),
   so the type never steps down and the box never moves. Where the screen has height the six offers give up 12 of their rhythm. On a short wide screen the column
   was already full, so --nd counts what is missing for 6 clear above the button: the box gives up to 12 of its height first (72 to 60), then each of the five words that carry the gap sits up to 7
   closer to its own line. No type shrinks. On a phone the room comes from under the button */
.band-top .colact .colgo{box-sizing:border-box;height:max(calc(72 * var(--u)),44px);padding:0 8px;font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:max(16px,calc(25 * var(--u)));line-height:.95;text-align:center;text-wrap:balance}
.band-top .colact .colgo .rot{display:grid;width:100%;justify-self:stretch}
.band-top .colact .colgo .rl{white-space:normal;text-wrap:balance;align-self:center}
@media (min-width:761px){
  .first{--g:min(calc(24 * var(--u)),max(calc(3 * var(--u)),calc((100svh - calc(730 * var(--u)) - 84px) / 5)));
    --nd:calc(calc(720.3 * var(--u)) + 83.2px - 100svh);--dw:clamp(0px,calc(var(--nd) - calc(12 * var(--u))),calc(36 * var(--u)))}
  .band-top .colact .colgo{height:max(44px,clamp(calc(60 * var(--u)),calc(calc(72 * var(--u)) - var(--nd)),calc(72 * var(--u))))}
  .six .w{margin-bottom:calc(calc(11.07 * var(--u)) - .145em - var(--dw) / 5)}
}
@media (max-width:760px){
  .band-top .colact{bottom:calc(6 * var(--u));gap:6px}
  .band-top .colact .colgo{height:calc(56 * var(--u));font-size:max(16px,calc(22 * var(--u)))}
  .band-top .colact .fine{line-height:1.1}
  .band-top .colact .fine span{margin-top:2px}
}

/* ---------- round 17 ---------- */
/* a. the audit, after you tap: three counted steps. The numeral is the heading's own stencil, cut from the same cream cloth, so the count
   reads as part of the heading and never as a label. One column for the numerals, one for the lines: a reading surface, set square */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:clamp(12px,1.5vw,22px)}
.steps li{counter-increment:step;display:grid;grid-template-columns:clamp(46px,5vw,72px) 1fr;align-items:baseline;max-width:none;margin:0}
.steps li::before{content:counter(step);font-family:var(--stencil);font-weight:700;font-size:clamp(44px,4.4vw,64px);line-height:.84;padding:.05em 0;
  color:transparent;background:url(media/cloth-cream.jpg) 0 0/800px auto;-webkit-background-clip:text;background-clip:text}
/* the lines under a heading that stands alone in its column: each line keeps to one row where the column has the room, and breaks even where it has not */
.inset .slot{text-wrap:balance}
@media (min-width:761px){ .inset .slot{max-width:none} }

/* b1. what we do, the four rows. The headings were already set to their column; two of them stood in the narrow column, because a flipped row
   swapped the order and kept the picture's share. Now the words always take the wide share: a tall print needs 400 and no more, and a flipped
   wide print gives the words 1.1 of 2. Phones are one column and were already full */
@media (min-width:761px){
  .rows .duo:has(.shot.tall){grid-template-columns:minmax(0,1fr) clamp(300px,27.8vw,400px)}
  .rows .duo.flip:has(.shot.tall){grid-template-columns:clamp(300px,27.8vw,400px) minmax(0,1fr)}
  .rows .duo.flip:has(.shot.wide){grid-template-columns:.9fr 1.1fr}
}
/* b2. what we do, consultancy and the AI system: no longer a pair. The cream is a sheet lying on the black table, and it is cut short on the right,
   so the table the rows above and the ask below stand on shows through as one band. Consultancy keeps the sheet and the big heading;
   the AI system stands on the table, lower and smaller. Light from the upper left: the sheet's cut edge and both tapes throw their shadow down and right.
   The AI system's tape lies across the cut, holding the sheet to the table */
.two .strip{box-shadow:3px 8px 11px -5px rgba(19,17,16,.6)}
.two > .dark{color:var(--c)}
.two > .dark .h2 > span{color:transparent;background:url(media/cloth-cream.jpg) 0 0/800px auto;-webkit-background-clip:text;background-clip:text}
.two > .dark .strip{background:var(--c) url(media/cloth-cream.jpg) 0 0/800px auto;color:var(--k);transform:rotate(1.8deg);box-shadow:3px 8px 12px -4px rgba(0,0,0,.7)}
@media (min-width:761px){
  .sec.paper:has(> .two){--bw:max(340px,37vw)}
  .sec.paper:has(> .two)::after{content:"";position:absolute;z-index:0;right:0;top:0;bottom:0;width:var(--bw);
    background:linear-gradient(90deg,rgba(0,0,0,.9),rgba(0,0,0,0) 54px),var(--k) url(media/cloth-black.jpg) center top/1400px auto}
  .two{z-index:1;grid-template-columns:minmax(0,1fr) calc(var(--bw) - clamp(20px,3.9vw,56px) - 44px);gap:108px;align-items:start}
  .two > .thread + div{padding-bottom:clamp(70px,9.5vw,140px)}
  .two > .dark{background:none;align-self:end;margin-top:0}
  .two > .dark .strip{margin-left:-106px}
}
@media (max-width:760px){
  .sec.paper:has(> .two){padding-bottom:0}
  .two{gap:0}
  .two > .thread + div{padding-bottom:64px}
  .two > .dark{margin:0 -20px;padding:0 20px 64px;background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,0) 44px),var(--k) url(media/cloth-black.jpg) center top/1400px auto}
  .two > .dark .strip{margin:-17px 0 30px 14px}
}

/* ---------- round 18 ---------- */
/* b. heritage s3 and chhaya s3, the two flipped screens. Same finding as round 17 b1: the flip swapped the order and left the words in the
   picture's .85 share, with dead cloth either side of the print. Now the print's column is the print and no more (a tall print needs 400,
   a plain print 470), it stands on the page's left margin, and the words take everything else. site.js then sets the heading to that column */
@media (min-width:761px){
  .sec > .wrap.duo.flip:has(.shot.tall){grid-template-columns:clamp(300px,27.8vw,400px) minmax(0,1fr)}
  .sec > .wrap.duo.flip:has(.shot:not(.tall):not(.wide)){grid-template-columns:clamp(340px,32.6vw,470px) minmax(0,1fr)}
}
/* phone: one column, the heading already full. The four given rows made heritage s3 11 taller than the screen; the print steps 16 closer to its words */
@media (max-width:760px){ .sec > .wrap.duo.flip{gap:20px} }

/* sticky bar (13 Oct): the menu stays at the top of the window on every page. It was absolute, so nothing in the flow moves.
   The header is lifted to 53 so its pinned bar clears the sections below and stays under the docked button (54, 55).
   html.stuck is set by site.js once the page has moved: the bar then wears the same dark cloth as the open phone menu */
.first,.pagehead{z-index:53}
.menu,.pagehead .menu{position:fixed}
html.stuck .menu{background:#131110 url(media/cloth-black.jpg) 0 0/700px auto;box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
[id]{scroll-margin-top:96px}

/* 13 Oct 2026: the menu words lift 1.5px so they sit on the logo line, by eye; the logo and the button do not move */
@media (min-width:761px){.menu nav a:not(.stamp){top:-1.5px}}

/* round 20, 13 Oct 2026: the three shelves. Prints on the lit table, each its own size and lean; the fields are the worlds' own two colours */
.trio{display:flex;flex-wrap:wrap;gap:0 30px;margin:0}
.worlds,.shelf,.films{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:72px 40px;align-items:start;margin-bottom:40px}
.world{grid-column:span var(--s);margin-top:var(--y);display:block;text-decoration:none;color:var(--paper);transform:rotate(var(--r));transition:transform .5s var(--ease-settle)}
.world .pic{display:block;background:var(--c);padding:7px 7px 9px;box-shadow:0 30px 40px -18px rgba(0,0,0,.95),0 -2px 18px rgba(243,236,223,.08)}
.world img,.world .field{display:block;width:100%;height:auto;aspect-ratio:var(--ar);object-fit:cover}
.world .field{display:flex;flex-direction:column;justify-content:flex-end;padding:7% 7% 8%;box-sizing:border-box}
.world .field b{font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:.86;font-size:calc(var(--s) * .62vw + 14px)}
.world .field i{font-style:normal;font-size:clamp(16px,1.2vw,19px);line-height:1.3;margin-top:12px;max-width:26ch}
.world .strip{margin:-17px 0 0 -10px;position:relative}
.world .kind{display:block;margin-top:12px;font-weight:500;font-size:16px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.world .ln{display:block;margin-top:4px;font-size:clamp(17px,1.3vw,20px);line-height:1.3;max-width:34ch}
.world:hover,.world:focus-visible{transform:translateY(-6px) rotate(0)}
.world:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
.setname{margin-bottom:46px}
.shelf{grid-auto-flow:dense}
.shelf .shot{grid-column:span var(--s);margin-top:var(--y);max-width:none;justify-self:stretch}
.shelf.flip .shot.lead{grid-column:8 / span var(--s)}
.fbox{grid-column:span var(--s);transform:rotate(var(--r));box-shadow:0 30px 40px -18px rgba(0,0,0,.95)}
.fbox:nth-child(3n+2){margin-top:44px}
.reel,.fbox iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.reel{position:relative;cursor:pointer;text-align:left;padding:clamp(16px,2vw,28px);box-sizing:border-box;font:inherit;
  background:var(--k) url(media/cloth-black.jpg) center/1400px auto;color:var(--c);display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.fbox.cream .reel{background:var(--c) url(media/cloth-cream.jpg) center/800px auto;color:var(--k)}
.fbox.cream .strip{background:var(--k) url(media/cloth-black.jpg) 0 0/1400px auto;color:var(--c)}
.reel .ttl{font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:.88;font-size:clamp(24px,calc(var(--s) * .5vw),92px);max-width:92%}
.reel .pl{position:absolute;right:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);width:56px;height:56px;border-radius:50%;background:var(--orange);display:grid;place-items:center;transition:transform .45s var(--ease-settle)}
.reel .pl svg{width:20px;height:20px;fill:var(--k);margin-left:3px}
.reel:hover .pl,.reel:focus-visible .pl{transform:scale(1.12)}
.reel:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
@media (max-width:760px){
  .worlds,.films{grid-template-columns:1fr;gap:56px}
  .world,.fbox{grid-column:auto;margin-top:0}
  .world:nth-child(odd){width:94%;justify-self:start} .world:nth-child(even){width:84%;justify-self:end}
  .world .field b{font-size:clamp(36px,11vw,54px)}
  .shelf{grid-template-columns:repeat(6,1fr);gap:40px 18px}
  .shelf .shot{grid-column:span 3;margin-top:calc(var(--y) / 3)} .shelf .shot.lead,.shelf.flip .shot.lead{grid-column:1 / -1}
  .fbox:nth-child(even){width:90%;justify-self:end} .fbox:nth-child(3n+2){margin-top:0}
  .reel .ttl{font-size:clamp(28px,9vw,40px)}
}
@media (prefers-reduced-motion:reduce){.world,.reel .pl{transition:none}}
/* round 20 fix: a black reel on the black table lost its edge; each reel is now a print, framed in cream like every other picture */
.fbox{background:var(--c);padding:7px 7px 9px;box-shadow:0 30px 40px -18px rgba(0,0,0,.95),0 -2px 18px rgba(243,236,223,.1)}
.fbox.cream{background:var(--k);padding:6px}
/* round 21 fix: the widest reel opened taller than the screen; the tile and its player now stop at the screen height under the header */
.reel,.fbox iframe{max-height:calc(100vh - 150px);max-height:calc(100svh - 150px)}
.fbox iframe{background:#000}


/* 16 Oct 2026, his ask: every button in the face of "Where would we start" (Bespoke Stencil caps); a thin black border on every orange button; the back-to-top arrow bigger, in a white ring */
.stamp,.quiet.go,.go.outline,.dock,.dockline,.colgo{font-family:var(--stencil);font-weight:700;text-transform:uppercase;letter-spacing:0}
.stamp,.band-top .colact .colgo,.reel .pl{border:1px solid #000;box-sizing:border-box}
.dock{border:1px solid transparent;box-sizing:border-box}
html.past .dock{border-color:#000}
.totop{width:56px;height:56px;border:1.5px solid #fff;border-radius:50%;box-sizing:border-box}
.totop svg{width:28px;height:30px}
@media (max-width:760px){.totop{width:50px;height:50px}.totop svg{width:24px;height:26px}}
/* 17 Oct 2026: the back-to-top ring reads on every ground: no difference blend, a smoked disc behind the white ring */
.totop{mix-blend-mode:normal;color:#fff;background:rgba(19,17,16,.55);border-radius:50%}
/* 17 Oct 2026: softer, slower word swaps; the header button wears a solid ground on the film; it fits its box on phones */
.rot .rl{transition:opacity .6s var(--ease-settle),transform .65s var(--ease-settle)}
.rot .rl.on{transition-delay:.15s}
.dockline{mix-blend-mode:normal;background:#F4EFE6;color:#131110;border-color:#131110;border-width:1px}
@media (max-width:760px){ .dock,.dockline{font-size:13px} }
/* 17 Oct 2026: the footer. Three columns on the black cloth: who we are, where to find us (the office and its map), and the ways in */
.foot .fwrap{position:relative;z-index:1;margin:0 clamp(20px,3.9vw,56px);padding:clamp(56px,7vw,110px) 0 clamp(40px,4vw,64px);color:#F4EFE6}
.foot .fwrap .next{margin:0 0 clamp(40px,5vw,72px)}
.foot .fcols{display:grid;grid-template-columns:1.1fr 1.4fr 1fr;gap:clamp(28px,4vw,64px);align-items:start;border-top:1px solid rgba(244,239,230,.28);padding-top:clamp(28px,3vw,44px)}
.foot .fmark{display:block;width:min(100%,340px);height:auto}
.foot .firm{margin:18px 0 0;font-size:16px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.foot .flab{margin:0 0 10px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;opacity:.72}
.foot address{font-style:normal;font-size:clamp(17px,1.25vw,20px);line-height:1.4;margin:0 0 18px}
.foot .fmap{display:block;width:100%;aspect-ratio:16/10;border:1px solid rgba(244,239,230,.35);filter:grayscale(1) contrast(1.05) brightness(.9);transition:filter .5s var(--ease-settle)}
.foot .fmap:hover{filter:none}
.foot .fgo{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.foot .fgo nav{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.foot .fgo nav a{color:#F4EFE6;text-decoration:none;font-size:clamp(18px,1.4vw,22px)}
.foot .fgo nav a:hover{color:var(--orange,#E27F22)}
.foot .fbook{display:inline-grid;place-items:center;min-height:48px;padding:0 24px;background:#E27F22;color:#131110;border:1px solid #131110;text-decoration:none;font-size:17px}
.foot .fbook:hover{background:#EB8B30}
.foot .flink{color:#F4EFE6;font-size:16px;text-underline-offset:4px}
@media (max-width:900px){ .foot .fcols{grid-template-columns:1fr} .foot .fmark{width:min(70%,280px)} }
.foot .fgo nav{align-items:flex-start;text-align:left;position:static;transform:none}.foot .fgo nav a{margin:0;padding:0;text-align:left}
/* 17 Oct 2026: Work is the hub. Three doors under the two case studies, each a picture with its name set across it */
.doors{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:clamp(16px,2vw,28px);margin:clamp(40px,5vw,72px) 0 0}
.door{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:#131110;box-shadow:0 30px 40px -18px rgba(0,0,0,.95)}
.door:nth-child(1){aspect-ratio:5/5.2}.door:nth-child(2){margin-top:48px}.door:nth-child(3){margin-top:16px}
.door img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform .8s var(--ease-settle),opacity .5s var(--ease-settle)}
.door .dn{position:absolute;left:clamp(14px,1.6vw,24px);bottom:clamp(12px,1.4vw,20px);font-family:var(--stencil);font-weight:700;text-transform:uppercase;line-height:.86;color:#F4EFE6;font-size:clamp(30px,3.4vw,58px)}
.door::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:#E27F22;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-settle)}
.door:hover img,.door:focus-visible img{transform:scale(1.04);opacity:.95}.door:hover::after,.door:focus-visible::after{transform:none}
.door:focus-visible{outline:2px solid #E27F22;outline-offset:4px}
@media (max-width:760px){ .doors{grid-template-columns:1fr 1fr} .door:nth-child(1){grid-column:1/-1;aspect-ratio:16/11} .door:nth-child(2),.door:nth-child(3){margin-top:0} }
.backwork{display:inline-block;margin:0 0 18px;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:inherit;text-decoration:none;opacity:.8}
.backwork:hover{opacity:1;color:#E27F22}
/* 17 Oct 2026: phones. The stencil caps are wider than the old face, so the buttons and the door names are sized to fit the screen */
@media (max-width:760px){
  .door .dn{font-size:clamp(20px,6.4vw,30px)}
  .menu .stamp{font-size:13px;padding-left:10px;padding-right:10px;white-space:nowrap}
  .act .stamp,.askbig .stamp{max-width:100%;box-sizing:border-box;font-size:clamp(15px,4.6vw,20px);white-space:normal;text-align:center}
  .act,.askbig .act{max-width:100%;box-sizing:border-box}
}
@media (max-width:760px){ .door .dn{font-size:clamp(17px,5vw,30px);left:12px;right:8px} }

/* ---------- textures, one per section (20 Oct 2026). Each surface is a cloth or paper from the making of a garment or a jamdani, so the site reads as one workshop.
   hero: horsehair canvas, the hidden structure that holds a coat's shape · audit: the pattern card, measured before the cut · system: point paper, the weave drawn square by square
   work: jamdani, the finished cloth · ask: handmade paper, a clean sheet · footer: the selvedge, the cloth's finished edge · pagehead: warp on the loom, where the cloth starts · strip: ribbed tape.
   The system paper covers its section at every width: its squares are drawn by hand, 53 to 59 px apart, so no code grid can meet them without a seam. */
.cloth{background-image:url(media/textures/final/hero.jpg)}
.cloth-head,.menu.open nav,.first .menu.open nav,html.stuck .menu{background-image:url(media/textures/final/hero.jpg)}
.dark{background:#161413 url(media/textures/final/hero.jpg) center/cover}
.paper{background:#F4EBDC url(media/textures/final/ask.jpg) center/cover}
.pagehead{background:#191715 url(media/textures/final/pagehead.jpg) center top/cover}
#audit{background:#100D0A url(media/textures/final/audit.jpg) left center/cover}
#system{background:#F3ECDF url(media/textures/final/system-fragment.jpg) right center/cover}
#work{background:#161414 url(media/textures/final/work.jpg) center/cover}
#ask{background:#F4EBDC url(media/textures/final/ask.jpg) center/cover}
/* footer: the twill rises to 120px under the top edge, so no third of it is flat black. The picture's height follows the footer's, never below its natural 40.5vw
   and never above 60vw or 864px (its size at 1440), so on wide screens it stays near full width and the orange yarn does not swell. The fade starts at the picture's top and runs 13.5vw down. */
.foot{--twill:clamp(40.5vw,100% - 120px,max(40.5vw,min(60vw,864px)));background:linear-gradient(180deg,#171513 calc(100% - var(--twill)),rgba(23,21,19,0) calc(100% - var(--twill) + 13.5vw)),#171513 url(media/textures/final/footer.jpg) center bottom/auto var(--twill) no-repeat}
/* the selvedge band, white fringe included, is the bottom 24.1 percent of the picture: at most 14.5vw or 208px tall, or 9.8vw where the picture is at its natural size. The footer's last line keeps 40px of plain twill above it. */
.foot{padding-bottom:max(96px,calc(max(9.8vw,min(14.5vw,208px)) + 40px - clamp(40px,4vw,64px)))}
/* the painted motif: one whole buti, clear of the heading, its foot 52px above the section's bottom edge.
   In the picture the left buti spans 52.6 to 72.3 percent across and its foot sits 21.3 percent of the picture's width above the bottom; the right buti starts at 76.7 percent.
   1101 to 1440: the heading scales with the screen, so the paper is 137.5 percent wide; the left buti lands just right of "you keep." and the right one falls off the edge.
   1441 up: the heading stops growing; the paper is at least 2000px wide, so the left buti starts at 1052px, past "you keep." (1005px). From 2000px both buti show whole. */
@media (min-width:761px) and (max-width:1440px){ #system{background-size:137.5% auto;background-position:left 0 bottom calc(52px - 29.33vw)} }
/* the audit's orange pencil line runs in the dark gap between "Read first." and the photos, about 30px under the letters, never under the orange word.
   In the picture the line's flat part runs from 55 to 68 percent across at 26.5 to 28 percent down; 68 percent is pinned to the cream panel's left edge,
   so the line's upward tick ends behind the panel and its curved left half dives behind the photo row. The picture grows with the screen (1014px + 64.9vw at least), because
   any smaller and the flat part would sit higher than the gap, or the top of the section would show bare colour */
@media (min-width:761px){ #audit{background-size:max(112.35vw,1014px + 64.9vw) auto;background-position:left calc(100vw - max(300px,23.6vw) - .68 * max(112.35vw,1014px + 64.9vw)) top calc(min(306px, 150px + 9.6vw) - .148 * max(112.35vw,1014px + 64.9vw))} }
@media (min-width:1441px){ #system{background-size:max(100%,2000px) auto;background-position:left 0 bottom calc(52px - .2133 * max(100vw,2000px))} }
.strip{background:var(--c) url(media/textures/final/strip-tile.jpg) 0 50%/600px auto}
/* sub pages: the first dark section takes the cloth of its subject, so a sub page is no longer loom, paper, canvas, paper, canvas.
   Work, About and the two film pages: jamdani · Audit: the pattern card · AI system: its paper sections are point paper · Photography: jamdani on its second dark.
   Canvas stays the fallback, and no two dark sections in a row share a picture. */
.pg-work main>section.dark,.pg-about #s3,.pg-heritage #s3,.pg-chhaya #s3,.pg-photo main>section:nth-of-type(3){background:#161414 url(media/textures/final/work.jpg) center/cover}
/* Work and Photography: these sections run 1300 to 2900px tall, so cover blew the cloth past its 2400px width and the motifs blurred into rope knots.
   Here the cloth shows at the screen's width, the same size About shows it at every width, top aligned, and fades into the ground over its last 16vw (96px at least on phones).
   Past 2400px wide it is enlarged slightly, about 7 percent at 2560. */
.pg-work main>section.dark,.pg-photo main>section:nth-of-type(3){
  background:linear-gradient(180deg,rgba(22,20,20,0) calc(100% - max(16vw,96px)),#161414 100%) center top/100vw calc(100vw * .8329) no-repeat,
    #161414 url(media/textures/final/work.jpg) center top/100vw auto no-repeat}
/* Audit page: the pattern card sits whole in the top left corner, its curved cut and orange line rising toward the headline and stopping short of it.
   In the picture the line ends 76.9 percent across and 14.1 percent of the width down. At 42vw the end lands 3.6vw left of the headline column (at least 49px from 1101 up);
   the picture lifts by up to 5.92vw - 96px so the end stays 24px above the capitals on wide screens. The picture's edges are near black (#040303) on the #100D0A ground,
   so its right and bottom thirds fade into the ground instead of stepping. */
.pg-audit #s3{--aw:42vw;--at:max(-56px,min(0px,96px - 5.92vw));
  background:linear-gradient(90deg,rgba(16,13,10,0) 62%,#100D0A 99%) left 0 top var(--at)/var(--aw) calc(var(--aw) * .5582) no-repeat,
    linear-gradient(180deg,rgba(16,13,10,0) 55%,#100D0A 99%) left 0 top var(--at)/var(--aw) calc(var(--aw) * .5582) no-repeat,
    #100D0A url(media/textures/final/audit.jpg) left 0 top var(--at)/var(--aw) auto no-repeat}
/* Audit page on phones: the section grows 40vw at the bottom and the card sits whole along it, full width, so its curve and line run below "Where to start, in writing."
   The line's highest point is 18 percent down the picture: about 42px under that last line at 390. The picture's top edge fades in from the ground. */
@media (max-width:760px){ .pg-audit #s3{padding-bottom:calc(64px + 40vw);
  background:linear-gradient(180deg,#100D0A 0%,rgba(16,13,10,0) 14%) left bottom/100vw 55.82vw no-repeat,#100D0A url(media/textures/final/audit.jpg) left bottom/100vw auto no-repeat} }
/* AI system page: one motif per page (Anwar, P18). #s2 gets Ava's sheet with its open diamond of nine inked cells low on the right, anchored right bottom at cover,
   so it lands right of the button and below the headline. #close keeps the bare point paper: the sheet doubled so only its plain left half shows.
   Phones: the sheet at 223 percent of the width, so the diamond is about 28 percent of the screen wide, under the button, its right edge on the text column's right margin
   (the sheet shifts right by the 24.16vw between the diamond and the sheet's own right edge, less the column margin); the sheet's top edge fades into the ground. */
.pg-ai #s2{background:#F3ECDF url(media/textures/final/system-page.jpg) right bottom/cover no-repeat}
.pg-ai #close{background:#F3ECDF url(media/textures/final/system-fragment.jpg) left top/200% auto no-repeat}
/* 1320 to 1660 wide the diamond's corner box would come within 23px of "then built."; the sheet is cropped at its top there, so it drops 16px without an edge showing.
   Not 32 (Anwar, P20): the bottom cell needs a full grid cell above the dark section below, and at 16 the diamond's middle row sits on the button's middle line. */
@media (min-width:1320px) and (max-width:1660px){ .pg-ai #s2{background-position:right 0 bottom -16px} }
@media (max-width:760px){
  .pg-ai #s2{padding-bottom:calc(64px + 40vw);
    background:linear-gradient(180deg,#F3ECDF 0,rgba(243,236,223,0) 30%) right bottom/100% 125.25vw no-repeat,#F3ECDF url(media/textures/final/system-page.jpg) right calc(clamp(20px,3.9vw,56px) - 24.16vw) bottom 0/223vw auto no-repeat}
  .pg-ai #close{background-size:240% auto} }
@media (max-width:760px){
  /* phones: the curved edge and its line rise through the gaps of the photo grid, from its lower left to the right edge */
  #audit{background-size:auto 160%;background-position:28% top}
  /* phones: the buti sits below "See inside", its left two thirds showing, cut only by the right edge. In the picture the buti starts 17 percent of the
     picture's width down, so to land below the button the paper is about 1660px wide and the section grows underneath to hold it */
  #system{padding-bottom:calc(38.46vw + 50px);background-size:calc(159.2% + 607px) auto;background-position:left calc(-83.7vw - 132px) top 0}
  /* phones: Ava's tall phone file (P17), the centre 960 columns of footer.jpg with the twill extended upward; shown at 154vw wide, the same scale as
     footer.jpg at 385 percent, so band and yarn land where they did. 2400 rows show 385vw tall, taller than the footer, so the twill reaches the top. */
  .foot{background:linear-gradient(180deg,#171513 0,rgba(23,21,19,0) 40px),#171513 url(media/textures/final/footer-phone.jpg) center bottom/154vw auto no-repeat}
  .foot{padding-bottom:37.6vw}   /* band 37.6vw tall at this size, plus the 40px the inner wrap already keeps */
}

/* 20 Oct 2026, pass two wave one: buttons */
/* A. every box re-centred for the stencil caps (ink sat 1.5 to 3 px high everywhere since the 16 Oct face change) */
/* Measured after the first cut and corrected: a fixed-height centred box moves its ink by HALF the padding difference, a padded inline box by the whole of it. */
.quiet.go{padding-block:1px 0}
.go.outline{padding:21.25px 38px 20.75px}
.sec .stamp{padding:20px 30px 19px}
.askbig .stamp{padding:23.5px 40px 22.5px}
.menu nav .stamp{padding-top:14px;padding-bottom:13px}
.menu .mstamp{padding-top:13px;padding-bottom:12px}
.dock,.dockline{padding-top:.06em}
.foot .fbook{transform:none;box-shadow:none;height:48px;min-height:0;font-size:20px;padding:1px 24px 0}
@media (min-width:761px){.band-top .colact .colgo{padding-top:calc(.9 * var(--u))}}
@media (max-width:760px){.band-top .colact .colgo{height:auto;min-height:calc(56 * var(--u));padding:6px 8px}}
/* the rotating lines: the grid is never wider than the box, so the shown line sits centred and a hidden longer line is clipped sideways only
   (that hidden line used to push the whole stack right and out of the phone dock) */
.rot{max-width:100%;min-width:0;grid-template-columns:minmax(0,1fr)}
.rot .rl{min-width:0;overflow:clip visible}
/* B. the swap family: each button a switch with its own temperament; letters never all at once.
   Letters stay inline (kerning and the fits() width stay true), so they move on top and opacity, never transform. */
[data-swap] .rot .rl{opacity:1;transform:none;transition:none;transition-delay:0s}
[data-swap] .rot .rl i{display:inline;position:relative;top:.3em;opacity:0;font-style:normal;
  transition:opacity .5s var(--ease-settle),top .55s var(--ease-settle);transition-delay:calc(var(--i) * 14ms)}
[data-swap] .rot .rl.on i{top:0;opacity:1;transition-delay:calc(260ms + var(--i) * 14ms)}
[data-swap] .rot .rl.was i{top:-.3em;transition-duration:.18s,.22s}
/* brush: the dock and the top bar, letters sweep up left to right */
[data-swap=brush] .rot .rl i{transition-delay:calc(var(--i) * 14ms)}
[data-swap=brush] .rot .rl.on i{transition-delay:calc(260ms + var(--i) * 14ms)}
/* press: the column button, nothing in the line moves; the whole line is pressed .985 to 1 with its opacity */
[data-swap=press] .rot .rl{opacity:0;transform:scale(.985);transition:opacity .5s var(--ease-settle),transform .5s var(--ease-settle)}
[data-swap=press] .rot .rl.on{opacity:1;transform:none;transition-delay:.22s}
[data-swap=press] .rot .rl.was{transform:scale(.985);transition-duration:.18s,.18s}
[data-swap=press] .rot .rl i{top:0;opacity:1;transition:none}
/* shuffle: the audit stamp, letters leave and arrive from the centre outward */
[data-swap=shuffle] .rot .rl i{top:.22em;transition-delay:calc(var(--c) * 22ms)}
[data-swap=shuffle] .rot .rl.on i{top:0;transition-delay:calc(230ms + var(--c) * 22ms)}
[data-swap=shuffle] .rot .rl.was i{top:-.22em;transition-duration:.18s,.22s}
/* settle: the ask stamp, letters drop into place from the right end first */
[data-swap=settle] .rot .rl i{top:-.25em;transition:opacity .5s var(--ease-settle),top .6s var(--ease-settle);transition-delay:calc(var(--j) * 18ms)}
[data-swap=settle] .rot .rl.on i{top:0;transition-delay:calc(280ms + var(--j) * 18ms)}
[data-swap=settle] .rot .rl.was i{top:.25em;transition-duration:.18s,.22s}
@media (prefers-reduced-motion:reduce){ .rl i{transition:none} }