/* GriffLynn: paper and pen, variation 3 (side panel, contour dividers)
   ------------------------------------------------------------------
   Motion principles (from the approved motion reel)
   - One thing moves at a time; the rest waits its turn.
   - Motion follows the hand: pen lines draw, paper lifts and lands, wash soaks in. Nothing bounces or springs.
   - Text never moves with parallax and never waits on an animation to be read for long.
   - Scrolling stays native; only artwork steps, at 11 frames a second.
   - Interface motion stays between 180 and 600 ms on shared easing tokens; only the opening runs longer.
   - Transforms and opacity on textures drawn once; nothing animates a filter.
   - With reduced motion every state is final and instant, and focus is always visible. */

:root{
  --ease-out:cubic-bezier(.22,.61,.36,1);   /* arriving and settling */
  --ease-in-out:cubic-bezier(.65,0,.35,1);  /* moving from one place to another */
  --ease-pen:cubic-bezier(.45,.05,.25,1);   /* a hand starting slowly, then committing */
  --d-tap:180ms;--d-ui:260ms;--d-sheet:420ms;--d-draw:600ms;--d-hero:1400ms;

  --paper:#F0EBDA;--paper-hi:#FBF6E6;--table:#E4DDC8;
  --ink:#2B2118;--ink-2:#5E5146;--link:#2A4B33;--spruce:#2F4D3A;
  --haze:#CDD1C6;--ridge:#7E8F7E;--charge:#B9B65C;--sun:#EFC86A;--laurel:#E9A79B;--dot:#B5473A;

  --body:"Alegreya Sans","Gill Sans","Trebuchet MS",sans-serif;
  --disp:Fraunces,Georgia,"Times New Roman",serif;
  --lab:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;

  --gut:clamp(20px,4.4vw,56px);
  --max:1380px;
  --hh:clamp(640px,76svh,820px);           /* home hero height: the copy and the painting end together */
  --ch:clamp(470px,66svh,700px);           /* case hero height */
  --tear:polygon(1% 6%,34% 0,99% 4%,100% 93%,62% 100%,0 96%);
  --tear2:polygon(0 3%,58% 0,100% 8%,98% 100%,41% 95%,2% 100%);
  --tear-card:polygon(0 2%,22% 0,61% 3%,100% 0,99% 46%,100% 97%,70% 100%,31% 97%,1% 100%,2% 52%);
  --tear-chip:polygon(0 8%,96% 0,100% 90%,48% 100%,3% 92%);
  --pen-r:255px 18px 225px 16px/16px 225px 18px 255px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper);scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper) url(../art/grain.webp);color:var(--ink);font:400 18px/1.55 var(--body);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
a{color:var(--link)}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;letter-spacing:-.022em;line-height:1.04;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;color:var(--link)}
:focus-visible{outline:2.5px dashed var(--ink);outline-offset:4px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:60;padding:10px 16px;background:var(--paper-hi);color:var(--ink);font-weight:700;text-decoration:none;box-shadow:0 4px 14px -6px #2a160866}
.skip:focus{top:12px}
.wrap{width:100%;max-width:calc(var(--max) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.page{background:inherit}

/* ---------- type pieces ---------- */
.wm{font-family:var(--disp);font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.01em;font-size:24px;line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap}
.wm i{font-style:normal;color:var(--dot)}
.kick{display:block;margin:0 0 14px;font:700 13.5px/1.2 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--link)}
.lede{font-size:clamp(18px,1.45vw,20.5px);line-height:1.55;max-width:34em}
.quiet{color:var(--ink-2);font-style:italic}
.h2{font-size:clamp(34px,4vw,56px);margin-bottom:22px;max-width:16em}
.h3{font-size:clamp(25px,2.2vw,31px);font-weight:560;line-height:1.08}

/* ---------- links that underline with a pen stroke ---------- */
.plink{font-weight:700;color:var(--link);text-decoration:none;padding-bottom:5px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C40 2 70 7 110 4 S170 3 199 5' fill='none' stroke='%232A4B33' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/0% 7px no-repeat;
  transition:background-size var(--d-ui) var(--ease-pen)}
.plink:hover,.plink:focus-visible{background-size:100% 7px}
.plink .ar{display:inline-block;transition:transform var(--d-ui) var(--ease-out)}
.plink:hover .ar{transform:translateX(3px)}
.prose a:not(.plink):not(.btn){color:var(--link);text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---------- paper buttons: lift with their shadow, press flat ---------- */
.btns{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center}
.btn{position:relative;display:inline-block;z-index:0;padding:0;border:0;background:none;cursor:pointer;text-decoration:none;color:var(--ink);font:700 16px/1 var(--lab);font-stretch:92%;letter-spacing:.005em;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.btn>span{position:relative;display:block;padding:15px 22px 14px;transition:transform var(--d-tap) var(--ease-out)}
.btn>span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-hi);clip-path:var(--tear)}
.btn>span::after{content:"";position:absolute;inset:-2px 2px 2px -3px;border:1.5px solid var(--ink);border-radius:var(--pen-r);transform:rotate(-1.1deg);filter:url(#t-ink);pointer-events:none}
.btn::before{content:"";position:absolute;inset:5px -2px -5px 3px;z-index:-2;background:#1a1008;opacity:.17;clip-path:var(--tear);transition:opacity var(--d-tap) var(--ease-out),transform var(--d-tap) var(--ease-out)}
.btn.pri{color:var(--paper-hi)}
.btn.pri>span::before{background:var(--spruce);clip-path:var(--tear2)}
.btn.pri>span::after{display:none}
.btn.pri::before{clip-path:var(--tear2)}
.btn:hover>span{transform:translateY(-2px)}
.btn:hover::before{opacity:.26;transform:translate(1px,3px)}
.btn:active>span{transform:translateY(1px)}
.btn:active::before{opacity:.08;transform:translate(0,-3px)}
.btn.sm{font-size:14.5px}.btn.sm>span{padding:11px 16px 10px}

/* ---------- chips: torn scraps of coloured paper ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px 10px;margin:0;padding:0;list-style:none}
.chip{position:relative;z-index:0;display:inline-block;padding:7px 12px 6px;font:700 13px/1.1 var(--lab);font-stretch:92%;color:var(--ink);white-space:nowrap;filter:drop-shadow(1px 2px 1.4px #1a100845)}
.chip::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-hi);clip-path:var(--tear-chip)}
.chip.laurel::before{background:var(--laurel)}
.chip.sun::before{background:var(--sun)}
.chip.charge::before{background:var(--charge)}
.chip.plain::before{background:var(--paper-hi)}

/* ---------- paper cards ---------- */
.card{position:relative;z-index:0;isolation:isolate;color:var(--ink);padding:26px 26px 24px;filter:drop-shadow(2px 4px 3px #2a160840)}
.card::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--paper-hi);clip-path:var(--tear-card)}
.card::after{content:"";position:absolute;inset:7px 9px 8px 7px;z-index:-1;border:1.4px solid var(--ink);border-radius:6px 90px 8px 70px/70px 7px 90px 6px;transform:rotate(-.6deg);filter:url(#t-ink);pointer-events:none;opacity:.9}
.tilt{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform var(--d-tap) var(--ease-out)}

/* ---------- header: wordmark, five places, one action; it condenses into a thin paper tab ----------
   At the top of the page it is plain type on the ground. Once the page scrolls it sits on a slim torn paper tab,
   a little in from the top edge, with a soft shadow. The pen underline marks the section you are in. */
.hdr{position:fixed;top:0;left:0;right:0;z-index:30;pointer-events:none}
.hdr-in{position:relative;display:flex;align-items:center;gap:clamp(22px,2.8vw,38px);width:max-content;max-width:calc(100% - 2*var(--gut) + 36px);margin:14px 0 0 calc(max(var(--gut),(100% - var(--max))/2) - 18px);padding:10px 12px 10px 18px;pointer-events:auto;transform-origin:0 0;transition:transform var(--d-ui) var(--ease-out);view-transition-name:hdr}
.tabpaper{position:absolute;inset:0;z-index:-1;filter:drop-shadow(0 2px 2.5px #1a100824) drop-shadow(0 .5px .5px #1a10081f);opacity:0;transform:translateY(-10px) rotate(-.5deg);transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out)}
.tabpaper::before{content:"";position:absolute;inset:0;background:var(--paper-hi);clip-path:polygon(0 5%,18% 1%,41% 4%,63% 0,84% 3%,100% 1%,99.6% 94%,78% 99%,52% 96%,27% 100%,.4% 97%)}
.scrolled .hdr-in{transform:translateY(-4px) scale(.92)}
.scrolled .tabpaper{opacity:1;transform:rotate(-.5deg)}
.nav{display:flex;gap:clamp(16px,2vw,26px)}
.nav a{position:relative;padding:8px 0;color:var(--ink);text-decoration:none;font-weight:700;font-size:16.5px;transition:color var(--d-tap) var(--ease-out)}
.nav a:hover{color:var(--link)}
.nav a svg{position:absolute;left:-2px;right:-2px;bottom:-1px;width:calc(100% + 4px);height:8px;overflow:visible;pointer-events:none}
.nav a path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120;stroke-dashoffset:120;shape-rendering:geometricPrecision}
.nav a.on path,.nav a[aria-current] path{stroke-dashoffset:0;transition:stroke-dashoffset var(--d-draw) var(--ease-pen)}
.nav a:hover path{stroke:var(--link);stroke-dashoffset:84;transition:stroke-dashoffset var(--d-ui) var(--ease-pen)}
.nav a.on:hover path,.nav a[aria-current]:hover path{stroke-dashoffset:0}
.hcta{margin-left:clamp(0px,.6vw,10px)}
.hcta>span{padding:10px 15px 9px}
.menu-btn{display:none;min-height:44px;font:700 16px var(--body);color:var(--ink);background:none;border:0;padding:10px 12px;margin-right:-8px;cursor:pointer}
@media (max-width:959px){.hcta{display:none}}
@media (max-width:759px){.nav{display:none}.menu-btn{display:block}.hdr-in{width:calc(100% - 2*var(--gut) + 36px);justify-content:space-between;padding:6px 10px 6px 18px}.scrolled .hdr-in{transform:translateY(-4px)}}

/* ---------- the menu: a sheet of paper that slides in a few frames at a time ---------- */
.sheet{position:fixed;inset:0 0 0 auto;margin:0;width:min(360px,88vw);height:100dvh;max-height:none;max-width:none;border:0;padding:86px 34px 34px;background:transparent;color:var(--ink);overflow:visible;transform:translateX(106%);transition:transform var(--d-sheet) steps(6,end)}
.sheet.open{transform:translateX(0)}
.sheet::backdrop{background:#2b211826}
.sheet .sp{position:absolute;inset:0;z-index:-1;filter:drop-shadow(-4px 6px 6px #1a100840)}
.sheet .sp::before{content:"";position:absolute;inset:0;background:var(--paper-hi) url(../art/grain.webp);clip-path:polygon(4% 0,100% 0,100% 100%,0 100%,2% 72%,0 44%,3% 18%)}
.sheet nav a{display:block;padding:8px 0;min-height:44px;font-family:var(--disp);font-size:30px;font-weight:500;font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--ink);text-decoration:none}
.sheet nav .sub{margin:22px 0 4px;font:700 12.5px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.sheet nav .sub+a{padding-top:2px}
.sheet nav .small{font-size:23px}
.sheet .close{position:absolute;right:20px;top:18px;min-height:44px;font:700 16px var(--body);background:none;border:0;padding:10px 10px;cursor:pointer;color:var(--ink)}
.sheet nav{display:flex;flex-direction:column}
.sheet .sheet-cta{margin-top:26px}

/* ---------- hero, with the tall watercolour panel down the right ---------- */
.hero{position:relative;display:flex;flex-direction:column}
.panel-col{position:relative;overflow:hidden;view-transition-name:panel;-webkit-mask:linear-gradient(#000 80%,#0000);mask:linear-gradient(#000 80%,#0000)}
.panel{position:absolute;top:0;left:0;aspect-ratio:5/6}
.panel img.flat{position:absolute;inset:0;width:100%;height:100%}
.layers{position:absolute;inset:0;display:none}
.live .layers{display:block}
.live img.flat{visibility:hidden}
.layers>div{position:absolute;transform-origin:50% 90%}
.vis .layers>div{will-change:transform}
.layers img{position:absolute;display:block;max-width:none}
.layers img.off,.mainline .off{opacity:0}
.mainline{position:absolute;overflow:visible}
.mainline path{fill:var(--ink)}
.hero-copy{position:relative;z-index:1}
/* surveyor's marks over the painting: grid ticks, a dotted route, a measured line and a small wireframe, in faint walnut
   ink. They tie the software to the land without covering it, and the pen draws them after the ridges. Desktop only. */
.survey{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#3d2b1d}
.survey .sv{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.5}
.survey .dots{stroke-width:2.4;stroke-dasharray:.1 7}
.survey .fill{fill:currentColor}
.survey text{font:italic 400 22px var(--body);fill:currentColor;opacity:.6;letter-spacing:.01em}
@media (max-width:899px){.survey{display:none}}
.hero h1{font-size:clamp(42px,4.9vw,80px);line-height:1.02;margin:0 0 24px}
.hero .lede{margin:0 0 30px}
/* the hero showcase: "now showing". A paper label pinned to the foot of the watercolour with a strip of tape, and
   below it a row of torn paper tags hung along a pen line, one per project. Every few seconds the next tag lifts and its
   label is laid on top of the last in four stepped frames (site.js); pointing at or focusing a tag shows it at once.
   Tags and label jump to that project on this page. On desktop it sits on the faded foot of the ridge panel; on phones
   it follows the hero copy. Without script the first label stays and the tags are plain jump links. */
.hshow{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.hs-deck{display:grid;width:min(384px,100%);margin-left:6px;rotate:-.8deg}
.hs-card{grid-area:1/1;position:relative;z-index:0;display:flex;gap:15px;align-items:center;padding:16px 20px 15px 15px;color:var(--ink);text-decoration:none;visibility:hidden;rotate:var(--r,0deg);filter:drop-shadow(2px 4px 3px #2a160838)}
.hs-card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-hi);clip-path:var(--tear-card)}
/* the tape that pins the label to the painting */
.hs-card::after{content:"";position:absolute;left:22px;top:-9px;width:58px;height:19px;background:#e3d3a6d9;clip-path:polygon(3% 12%,96% 0,100% 84%,4% 100%,0 55%);transform:rotate(-4deg)}
.hs-card.on{visibility:visible}
.hs-th{flex:none;width:94px;height:60px;position:relative;rotate:-1.4deg}
.hs-th::before{content:"";position:absolute;inset:-4px;background:var(--spruce);clip-path:polygon(0 3%,30% 0,100% 2%,98% 50%,100% 100%,55% 97%,2% 100%,1% 40%)}
.hs-th img{position:relative;width:100%;height:100%;object-fit:cover;background:#1d1712}
.hs-tx{display:block;min-width:0}
.hs-k{display:block;margin:0 0 3px;font:700 11px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.hs-card b{display:block;font:600 21px/1.05 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;margin:0 0 3px}
.hs-l{display:block;font-size:14.5px;line-height:1.36;min-height:2.72em}
.hs-card small{display:block;margin-top:4px;font:700 12px var(--lab);font-stretch:92%;letter-spacing:.02em;color:var(--link)}
.hs-card:hover b{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
/* the tags: hung from a pen line by a pin; the one showing is lifted and inked */
.hs-row{position:relative;width:100%;margin-top:20px;padding-top:2px;container-type:inline-size}
.hs-line{position:absolute;left:-6px;right:-6px;top:0;width:calc(100% + 12px);height:9px;overflow:visible;pointer-events:none}
.hs-line path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;opacity:.62;vector-effect:non-scaling-stroke}
.hs-tags{position:relative;display:flex;flex-wrap:wrap;gap:12px 6px;margin:0;padding:0;list-style:none}
.hs-tags li{display:block;rotate:var(--tr,0deg);transform-origin:50% 0}
.hs-tags li:nth-child(odd){--tr:-1.6deg}.hs-tags li:nth-child(even){--tr:1.3deg}.hs-tags li:nth-child(3n){--tr:-.5deg}
.hs-tag{position:relative;z-index:0;display:block;padding:9px 11px 7px;padding-inline:clamp(6px,1.5cqw,11px);font:700 13px/1.1 var(--lab);font-size:clamp(11.5px,2.4cqw,13px);font-stretch:92%;color:var(--ink);text-decoration:none;white-space:nowrap;filter:drop-shadow(1px 2px 1.3px #1a100840);transition:transform var(--d-ui) var(--ease-out),color var(--d-tap) var(--ease-out);-webkit-tap-highlight-color:transparent}
.hs-tag::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-hi);clip-path:polygon(0 6%,94% 0,100% 88%,52% 100%,4% 93%);transition:background-color var(--d-tap) var(--ease-out)}
.hs-tag::after{content:"";position:absolute;left:50%;top:-1px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);opacity:.75}
.hs-tag:hover{transform:translateY(2px)}
.hs-tag.on{color:var(--paper-hi);transform:translateY(5px) rotate(-1deg)}
.hs-tag.on::before{background:var(--spruce)}
.hs-tag.on::after{background:var(--paper-hi);opacity:.9}
/* laid on: four frames at 12 a second, from up and to one side, landing at its own slight angle */
@keyframes hlay{
  0%{opacity:0;transform:translate(calc(var(--s,1)*24px),-22px) rotate(calc(var(--s,1)*3.2deg))}
  25%{opacity:1;transform:translate(calc(var(--s,1)*13px),-12px) rotate(calc(var(--s,1)*1.8deg))}
  50%{opacity:1;transform:translate(calc(var(--s,1)*5px),-4px) rotate(calc(var(--s,1)*.7deg))}
  75%{opacity:1;transform:translate(0,1px) rotate(0deg)}
  100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.hs-card.lay{animation:hlay 336ms step-end both}}
/* narrow desktops: a smaller label, reaching a little past the painting (the tags size to the row, so all seven hang on one line) */
@media (min-width:900px) and (max-width:1199px){
  html .hero>.hshow{width:calc(var(--pw) + 44px);padding:0 12px 0 16px}
  .hs-deck{width:min(340px,100%)}
  .hs-card{gap:12px;padding:14px 16px 13px 13px}
  .hs-th{width:76px;height:50px}
  .hs-card b{font-size:19px}
  .hs-l{font-size:13.5px}
}
/* a jump from the showcase: the pen underlines the project's name once it has arrived, then lifts */
.jhost{position:relative}
.jmark{position:absolute;left:-4px;bottom:-.16em;width:calc(100% + 8px);height:.28em;min-height:7px;overflow:visible;pointer-events:none;opacity:0;transition:opacity var(--d-draw) var(--ease-out)}
.jmark path{fill:none;stroke:var(--link);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:101;stroke-dashoffset:101}
.jm-on>.jmark{opacity:1;transition:none}
.jm-on>.jmark path{stroke-dashoffset:0;transition:stroke-dashoffset var(--d-draw) var(--ease-pen)}

@media (min-width:900px){
  /* the home painting is a little taller than the hero: its lowest ridges run on under the fade at the foot */
  .hero{display:block;height:var(--hh);--pw:min(50vw,calc(var(--hh)*.95))}
  .panel-col{position:absolute;top:0;right:0;bottom:0;width:var(--pw)}
  .panel{height:100%}
  .hero:not(.case) .panel{height:auto;width:max(100%,calc(var(--hh)*.8333))}
  .hero-copy{display:flex;flex-direction:column;justify-content:center;height:100%;width:calc(100% - var(--pw));padding:96px clamp(28px,4vw,64px) 64px max(var(--gut),(100% - var(--max))/2)}
  .hero-copy>*{max-width:640px}
  /* the copy sits low in the hero; the showcase's tag row shares the buttons' bottom line and its label sits level with the lede */
  .hero:not(.case){--hb:clamp(44px,7.5svh,76px)}
  .hero:not(.case) .hero-copy{justify-content:flex-end;padding-bottom:var(--hb)}
  .hero .hshow{position:absolute;right:0;bottom:var(--hb);width:var(--pw);padding:0 clamp(16px,2.4vw,40px) 0 calc(var(--pw)*.1)}
  .hero.case{height:var(--ch);--pw:min(44vw,calc(var(--ch)*.8333))}
}
@media (max-width:899px){
  .panel-col{order:-1;height:clamp(290px,84vw,560px);-webkit-mask:linear-gradient(#000 72%,#0000);mask:linear-gradient(#000 72%,#0000)}
  .panel{width:100%;top:0}
  .hero-copy{padding:14px var(--gut) 34px}
  .hero.case .panel-col{height:clamp(190px,46vw,340px)}
  .hero-copy{padding-bottom:26px}
  .hero .hshow{padding:0 var(--gut) 40px}
  .hs-line{display:none}
}

/* ---------- the opening: paper lays down, wash blooms, the pen draws, the headline settles ----------
   html.opening: the first page of a visit (paper, wash, pen, then the headline settles).
   html.paint:   every other load, reload and back/forward (wash and pen only; the copy is already there).
   html.vt:      arriving through a page-to-page transition (a shorter wash and pen, about 0.9 s).
   After the first play the hero panel joins the replay system below like every other drawing. */
@media (prefers-reduced-motion:no-preference){
  html.opening body{background:var(--table)}
  html.opening .page{animation:lay var(--d-ui) var(--ease-out) both;transform-origin:50% 0}
  html.opening .hero .panel,html.paint .hero .panel{-webkit-mask:url(../art/bloom.png) 72% 35%/0% no-repeat;mask:url(../art/bloom.png) 72% 35%/0% no-repeat;animation:bloom 1000ms var(--ease-out) 120ms both}
  html.opening .hero .mainline,html.paint .hero .mainline{-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;animation:pen 760ms linear 520ms both}
  html.vt .hero .panel{animation:bloom 560ms var(--ease-out) both}
  html.vt .hero .mainline{animation:pen 500ms linear 380ms both}
  html.opening .hero .survey,html.paint .hero .survey{-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;animation:penx 900ms var(--ease-pen) 1300ms both}
  html.vt .hero .survey{animation:penx 520ms var(--ease-pen) 860ms both}
  html.opening .hero h1{animation:settle 380ms var(--ease-out) 1060ms both}
  html.opening .hero .kick,html.opening .hero .lede,html.opening .hero .btns,html.opening .hero .chips,html.opening .hero .tagline{animation:settle 320ms var(--ease-out) 1200ms both}
  html.opening .hero .hshow{animation:settle 320ms var(--ease-out) 1260ms both}
}
@keyframes lay{from{opacity:0;transform:translateY(10px) rotate(.3deg)}to{opacity:1;transform:none}}
@keyframes bloom{from{-webkit-mask-size:0%;mask-size:0%}to{-webkit-mask-size:330%;mask-size:330%}}
/* the pen: a mask slides off the line left to right, a hand starting slowly, committing, a short hesitation, then done */
@keyframes pen{0%{-webkit-mask-position:100% 0;mask-position:100% 0}18%{-webkit-mask-position:93% 0;mask-position:93% 0}62%{-webkit-mask-position:25% 0;mask-position:25% 0}70%{-webkit-mask-position:23% 0;mask-position:23% 0}100%{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes penx{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes peny{from{-webkit-mask-position:0 100%;mask-position:0 100%}to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes settle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- sections, contour dividers that draw themselves, content in a short stagger ---------- */
.sec{position:relative;padding:clamp(14px,1.8vw,24px) 0 clamp(36px,3.4vw,56px)}
.cdiv{display:block;width:100%;height:clamp(22px,2.4vw,34px);margin:0 0 clamp(18px,2.2vw,30px);overflow:visible}
.cdiv path{fill:var(--ink)}
.cdiv .v1{opacity:0}
.cdiv.boil-b .v0{opacity:0}.cdiv.boil-b .v1{opacity:1}
html.js .rv .st{opacity:0;transform:translateY(10px)}
html.js .rv.in .st{opacity:1;transform:none;transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);transition-delay:calc(var(--i,0)*90ms + 240ms)}

/* ---------- the friction we remove: scraps struck through by the pen ---------- */
.week{display:grid;gap:40px 64px;align-items:start}
.week .prose p{font-size:19px;max-width:33em}
.week .acts{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;margin-top:28px}
.fr{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:16px}
.fr li{position:relative;padding:16px 22px 15px;font:600 19px/1.3 var(--body)}
.fr li:nth-child(2){margin-left:7%}.fr li:nth-child(3){margin-left:2%}
.fr .card{filter:drop-shadow(1.5px 3px 2px #2a160838)}
.fr .card::after{display:none}
.fr .t{position:relative;display:inline-block}
.fr .strike{position:absolute;left:-6px;top:50%;height:14px;margin-top:-6px;width:calc(100% + 12px);overflow:visible;pointer-events:none}
.fr .strike path{fill:var(--ink);opacity:.82}
.fr .why{display:block;font:400 15px/1.35 var(--body);color:var(--ink-2);margin-top:3px}
.fr .done{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 12.5px var(--lab);font-stretch:92%;color:var(--link);opacity:0}
@media (min-width:900px){.week{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.fr{margin-top:60px}}
/* the friction section: heading left, the struck scraps and one plain line right */
/* one composition: the heading and its closing line on the left, three scraps laid on the desk at the right */
.fric{gap:26px clamp(40px,5vw,96px);align-items:center}
.fric .h2{margin-bottom:0;font-size:clamp(40px,4.6vw,78px);max-width:9em}
.frline{margin:22px 0 0;font-size:clamp(19px,1.4vw,22px);line-height:1.5;max-width:24em;color:var(--ink-2)}
.fric .fr{gap:0;margin:0;padding:6px 0}
.fric .fr li{justify-self:start;max-width:100%;padding:clamp(17px,1.6vw,26px) clamp(24px,2.4vw,40px) clamp(16px,1.5vw,24px);font:600 clamp(20px,1.75vw,29px)/1.25 var(--body);filter:drop-shadow(2px 5px 4px #2a160845)}
.fric .fr li:nth-child(1){margin-left:0;rotate:-1.4deg;z-index:3}
.fric .fr li:nth-child(2){margin:-8px 0 0 15%;rotate:1.1deg;z-index:2}
.fric .fr li:nth-child(3){margin:-6px 0 0 5%;rotate:-.5deg;z-index:1}
.fric .fr .card::after{display:block;inset:6px 8px 7px 6px;opacity:.55}
@media (min-width:900px){.fric{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.fric .fr li:nth-child(2){margin-left:22%}.fric .fr li:nth-child(3){margin-left:9%}}
@media (max-width:899px){.fric .fr li{font-size:19px}.fric .fr li:nth-child(2){margin-left:8%}.fric .fr li:nth-child(3){margin-left:3%}}
.frline+.frline{margin-top:14px}
/* the pile: paper scraps drop onto a growing heap and the pen strikes each one through soon after it lands.
   Once the heap is full it runs like a conveyor: the oldest scrap at the bottom slides out, the heap settles
   down a step, and the next scrap lands on top. There is never a moment where everything is cleared.
   site.js drives it in stop-motion steps (12 frames a second) with transform and opacity only, recycling at most 16 scraps.
   Without motion (reduced motion, or no script) a still, tidy composition of six scraps shows instead. */
.fric{--pile-h:clamp(400px,62svh,540px)}
.pile{position:relative}
.pk{position:relative;z-index:0;width:max-content;max-width:94%;font:600 clamp(17px,1.12vw,19.5px)/1.25 var(--body);color:var(--ink)}
.pk-sh{position:absolute;inset:0;z-index:0;background:#1a1008;opacity:.16;clip-path:var(--tear-card);transform:translate(3px,5px)}
.pk-p{position:relative;z-index:1;display:block;padding:15px 24px 13px}
.pk-p::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-hi);clip-path:var(--tear-card)}
.pk-p::after{content:"";position:absolute;inset:5px 7px 6px 5px;border:1.3px solid var(--ink);border-radius:6px 90px 8px 70px/70px 7px 90px 6px;transform:rotate(-.6deg);opacity:.42;pointer-events:none}
.pk .t{position:relative;display:inline-block;text-wrap:balance}
.pk .sw{position:absolute;left:-6px;top:50%;height:14px;margin-top:-6px;width:calc(100% + 12px);overflow:hidden;pointer-events:none}
.pk .strike{width:100%;height:100%}
.pk .strike path{fill:var(--ink);opacity:.82}
.pile-static{display:flex;flex-direction:column;align-items:flex-start;padding:4px 0 10px}
.pile-static .pk+.pk{margin-top:-10px}
.pile-static .pk:nth-child(1){rotate:-1.3deg;margin-left:2%}
.pile-static .pk:nth-child(2){rotate:1deg;margin-left:24%}
.pile-static .pk:nth-child(3){rotate:-.6deg;margin-left:8%}
.pile-static .pk:nth-child(4){rotate:1.4deg;margin-left:30%}
.pile-static .pk:nth-child(5){rotate:-1deg;margin-left:4%}
.pile-static .pk:nth-child(6){rotate:.7deg;margin-left:18%}
.pile-live{display:none}
html.anim .pile:not(.still),.pile.live:not(.still){height:var(--pile-h)}
html.anim .pile:not(.still) .pile-static,.pile.live:not(.still) .pile-static{display:none}
.pile.live:not(.still) .pile-live{display:block;position:absolute;inset:0}
.pile-live .pk{position:absolute;left:0;top:0;opacity:0;transform-origin:50% 60%}
/* in the live pile site.js sets each strike's place per line of text, so a scrap that wraps is struck on both lines */
.pile-live .sw{margin-top:0}
@media (max-width:599px){.pile-static .pk:nth-child(2){margin-left:10%}.pile-static .pk:nth-child(4){margin-left:12%}.pile-static .pk:nth-child(6){margin-left:6%}}
@media (max-width:899px){.fric{--pile-h:280px}.pk{font-size:16.5px}.pk-p{padding:13px 20px 11px}}

/* ---------- what we've built ---------- */
.feature{display:grid;gap:30px 52px;align-items:start;margin:12px 0 0}
@media (min-width:980px){.feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.feature h3{font-size:clamp(40px,4vw,58px);margin:12px 0 14px}
.feature .stage{margin:0 0 18px;font-weight:700;color:var(--link)}
.window{position:relative;margin:0}
/* film windows: the film itself is torn to shape (no frame). Each window gets its own tear (t1-t3, set by site.js).
   The edges stay shallow at the bottom so the native controls are never cut. The shadow is a second copy of the
   torn shape, offset and darkened, so no filter ever runs over a playing film. */
.window .fr-paper{position:relative}
.window .fr-paper::before{content:"";position:absolute;inset:0;z-index:0;background:#1a1008;opacity:.2;-webkit-clip-path:var(--ftear);clip-path:var(--ftear);transform:translate(3px,5px)}
.window video,.window img.poster{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:16/9;background:#1d1712;object-fit:cover;-webkit-clip-path:var(--ftear);clip-path:var(--ftear)}
.window.tall .fr-paper{width:fit-content;max-width:100%;margin:0 auto}
.window.tall video{aspect-ratio:9/16;max-height:78svh;width:auto;margin:0;object-fit:contain}
.window{--ftear:polygon(0.00% 1.18%,1.65% 1.19%,4.21% 2.22%,6.18% 1.70%,7.98% 3.05%,11.28% 2.03%,13.54% 1.44%,15.67% 1.11%,17.81% 0.99%,19.75% 0.71%,22.48% 1.14%,23.75% 1.30%,26.16% 1.09%,27.91% 1.30%,29.95% 1.48%,31.94% 1.20%,34.42% 1.06%,36.84% 1.30%,39.50% 0.86%,41.33% 1.16%,43.24% 2.93%,44.92% 1.85%,47.18% 1.25%,50.16% 2.69%,52.27% 1.66%,54.30% 1.11%,56.34% 0.87%,58.33% 1.05%,61.29% 1.40%,62.53% 0.96%,65.25% 1.19%,67.93% 1.14%,69.94% 1.00%,72.19% 0.71%,74.04% 0.79%,76.83% 0.59%,77.63% 1.71%,81.17% 2.35%,82.39% 1.48%,84.07% 0.95%,86.44% 0.79%,89.01% 0.19%,90.74% 0.13%,93.70% 0.70%,96.34% 0.62%,97.35% 0.32%,99.47% 0.00%,98.37% 4.19%,98.70% 8.92%,99.13% 14.73%,99.14% 19.68%,99.44% 23.66%,99.66% 28.15%,99.61% 31.17%,99.49% 36.00%,99.76% 40.06%,99.76% 46.41%,99.54% 49.95%,99.03% 55.17%,99.21% 58.29%,99.32% 64.33%,99.43% 68.21%,99.13% 73.52%,98.87% 78.86%,98.99% 81.58%,98.88% 86.53%,99.10% 90.65%,99.21% 95.69%,100.00% 99.28%,98.52% 99.46%,95.71% 99.52%,93.08% 99.43%,90.91% 99.48%,89.55% 99.45%,87.12% 99.58%,85.14% 99.40%,83.20% 99.57%,80.61% 99.74%,77.75% 99.70%,76.11% 99.55%,73.43% 99.54%,71.70% 99.56%,69.72% 99.49%,66.81% 99.51%,65.33% 99.57%,63.07% 99.45%,61.19% 99.50%,58.25% 99.60%,56.55% 99.73%,54.81% 99.68%,52.53% 99.61%,49.58% 99.66%,47.58% 99.57%,46.22% 99.66%,43.72% 99.51%,40.75% 99.59%,38.58% 99.57%,37.10% 99.74%,34.77% 99.84%,31.91% 99.88%,30.83% 99.98%,28.26% 100.00%,26.36% 99.98%,23.34% 99.80%,21.16% 99.83%,20.14% 99.75%,16.94% 99.67%,15.12% 99.72%,13.35% 99.69%,11.48% 99.48%,9.03% 99.20%,6.83% 98.80%,3.88% 99.14%,1.66% 99.42%,1.45% 100.00%,0.98% 95.92%,0.91% 91.37%,0.88% 87.39%,0.91% 82.17%,1.05% 78.64%,0.82% 74.04%,0.72% 67.27%,0.48% 63.76%,0.18% 59.52%,0.00% 54.00%,0.10% 51.41%,0.01% 44.96%,0.25% 40.30%,0.39% 35.73%,0.14% 32.68%,0.28% 28.16%,0.94% 24.29%,0.93% 18.49%,0.89% 12.24%,1.82% 7.76%,1.50% 5.96%)}
.window.t1{--ftear:polygon(0.00% 1.40%,2.14% 1.15%,4.55% 3.08%,6.02% 2.17%,8.21% 1.29%,10.92% 0.76%,12.59% 0.72%,14.57% 1.27%,17.76% 1.14%,18.93% 1.46%,21.66% 1.71%,24.58% 1.69%,26.47% 1.70%,28.22% 1.92%,31.12% 2.79%,33.35% 2.05%,35.07% 1.13%,36.34% 0.38%,39.76% 0.76%,40.64% 0.96%,42.76% 0.37%,45.06% 0.33%,47.27% 0.44%,49.49% 0.44%,52.18% 0.50%,54.50% 0.17%,55.92% 0.17%,58.63% 1.15%,60.32% 0.78%,63.32% 0.39%,65.04% 0.44%,67.80% 0.57%,69.19% 0.93%,71.47% 1.30%,74.30% 1.53%,76.51% 1.60%,78.82% 1.65%,80.75% 1.10%,82.07% 3.08%,84.92% 3.06%,87.29% 2.17%,88.78% 3.08%,91.49% 1.95%,92.84% 1.63%,94.96% 1.28%,98.56% 2.13%,99.10% 0.00%,99.10% 5.93%,99.36% 9.63%,99.53% 13.28%,99.48% 18.31%,99.19% 21.74%,99.34% 27.78%,99.08% 30.90%,99.16% 36.90%,99.28% 40.91%,99.30% 44.58%,99.47% 50.09%,99.40% 55.95%,99.67% 58.05%,99.58% 63.70%,99.41% 69.14%,99.14% 72.64%,98.21% 78.44%,98.63% 83.24%,99.20% 84.84%,99.22% 91.41%,99.22% 94.33%,100.00% 99.77%,98.20% 99.77%,96.38% 99.66%,93.93% 99.71%,91.33% 99.23%,88.79% 99.43%,86.39% 99.47%,84.21% 99.56%,82.28% 99.62%,80.77% 99.74%,78.89% 99.70%,76.12% 99.75%,74.09% 99.80%,72.31% 99.85%,68.87% 99.79%,67.03% 98.89%,65.13% 99.21%,63.16% 99.58%,60.13% 99.72%,58.99% 99.75%,56.78% 99.79%,54.37% 99.89%,52.86% 99.97%,50.37% 100.00%,47.16% 99.99%,45.70% 99.95%,43.96% 99.69%,40.92% 99.68%,38.43% 99.71%,37.04% 99.57%,35.53% 99.39%,32.33% 99.36%,31.15% 99.37%,27.80% 99.36%,25.58% 99.45%,23.30% 99.38%,21.48% 99.02%,20.16% 99.48%,17.35% 99.45%,15.06% 99.45%,13.23% 99.67%,10.68% 99.69%,9.22% 99.51%,5.89% 99.43%,3.65% 99.18%,2.93% 99.22%,0.65% 100.00%,0.58% 95.74%,0.83% 90.26%,0.87% 86.97%,0.74% 80.80%,0.27% 77.49%,0.01% 71.52%,0.00% 68.88%,0.00% 62.36%,0.13% 59.59%,0.31% 53.31%,0.38% 50.84%,1.69% 46.35%,1.07% 39.48%,0.67% 37.82%,0.16% 31.79%,0.31% 27.40%,1.63% 23.04%,1.82% 17.59%,1.45% 15.05%,0.88% 9.61%,0.53% 5.08%)}
.window.t2{--ftear:polygon(0.00% 0.82%,1.90% 0.61%,4.71% 0.66%,6.16% 0.93%,8.85% 2.69%,10.34% 1.70%,12.30% 0.92%,14.63% 0.60%,17.34% 0.30%,19.91% 0.24%,21.18% 0.28%,23.55% 0.12%,26.78% 0.42%,28.90% 0.47%,29.69% 1.06%,32.82% 1.06%,34.62% 1.01%,36.73% 0.61%,39.29% 1.09%,40.65% 1.71%,43.29% 1.88%,45.29% 1.59%,48.38% 1.35%,49.93% 1.89%,52.67% 1.34%,53.86% 1.77%,56.28% 1.08%,59.26% 0.74%,60.65% 0.72%,62.71% 0.63%,65.49% 0.86%,67.81% 1.13%,70.27% 1.37%,72.18% 1.34%,73.52% 1.25%,75.51% 1.29%,78.56% 1.76%,80.40% 3.08%,83.00% 2.75%,85.49% 1.75%,86.98% 2.84%,88.73% 2.16%,91.08% 1.47%,92.85% 1.65%,95.37% 1.96%,98.33% 1.76%,99.28% 0.00%,99.31% 5.32%,99.31% 7.61%,99.27% 12.54%,99.39% 18.31%,99.55% 22.41%,99.56% 27.61%,99.55% 31.03%,99.28% 37.24%,99.02% 42.22%,98.81% 46.52%,99.03% 49.95%,99.24% 54.00%,99.03% 59.05%,99.08% 64.79%,99.47% 68.40%,98.71% 73.92%,99.42% 77.44%,99.53% 80.51%,99.48% 86.51%,99.42% 91.13%,99.57% 96.06%,100.00% 99.91%,98.42% 99.86%,95.75% 99.74%,93.80% 99.61%,91.66% 99.77%,88.73% 99.57%,87.05% 99.36%,84.24% 99.37%,81.86% 99.30%,80.12% 99.37%,78.11% 99.40%,76.84% 99.32%,74.12% 99.36%,72.19% 99.23%,68.82% 99.19%,66.72% 99.18%,65.64% 99.25%,63.28% 99.35%,60.85% 99.52%,58.30% 99.49%,55.96% 99.69%,53.80% 99.76%,52.38% 99.85%,50.04% 99.94%,48.08% 99.95%,46.13% 99.77%,42.75% 99.89%,41.34% 99.98%,39.15% 99.89%,36.81% 100.00%,34.61% 100.00%,32.02% 99.69%,30.60% 99.68%,28.05% 99.59%,25.52% 99.48%,24.56% 99.54%,21.56% 99.51%,19.07% 99.51%,16.81% 99.45%,14.70% 99.64%,12.37% 99.64%,11.24% 99.77%,8.91% 99.65%,6.99% 99.65%,3.86% 99.63%,2.92% 99.52%,1.32% 100.00%,1.34% 94.01%,1.00% 89.60%,0.90% 86.54%,0.50% 83.12%,0.32% 77.00%,0.20% 73.96%,0.46% 66.83%,0.52% 64.36%,0.64% 57.94%,0.83% 55.86%,0.65% 48.75%,0.78% 44.06%,0.75% 40.16%,0.61% 37.81%,0.89% 32.29%,0.74% 27.11%,1.82% 24.09%,1.04% 18.56%,0.92% 14.43%,1.14% 8.93%,0.93% 3.26%)}
.window.t3{--ftear:polygon(0.00% 0.39%,2.70% 0.82%,3.96% 1.00%,7.23% 1.15%,8.07% 1.29%,10.57% 1.69%,13.40% 1.93%,15.11% 1.57%,17.98% 1.43%,18.87% 1.42%,21.26% 1.73%,24.12% 1.75%,26.50% 1.76%,28.53% 1.84%,31.12% 1.63%,32.80% 1.48%,35.36% 1.15%,37.11% 0.59%,39.75% 0.75%,40.56% 0.56%,42.88% 0.91%,45.76% 1.26%,48.11% 1.54%,50.56% 0.98%,52.78% 0.68%,54.21% 1.05%,56.56% 0.79%,59.05% 0.63%,61.57% 0.39%,63.07% 0.97%,65.96% 0.77%,67.78% 0.56%,69.89% 0.22%,72.26% 0.48%,73.67% 0.46%,76.26% 0.80%,77.56% 0.31%,80.52% 0.54%,82.15% 0.63%,84.63% 0.74%,86.87% 1.08%,88.87% 1.26%,92.00% 1.30%,93.12% 1.30%,95.31% 1.24%,98.16% 1.53%,98.34% 0.00%,98.99% 5.80%,99.17% 10.14%,99.62% 15.18%,99.90% 17.85%,100.00% 23.85%,99.93% 26.08%,99.84% 30.47%,99.71% 35.91%,99.51% 40.96%,99.37% 46.62%,99.62% 50.38%,99.47% 55.74%,99.42% 58.98%,99.46% 62.48%,99.43% 68.89%,99.42% 73.95%,99.32% 77.60%,99.27% 81.57%,99.21% 85.50%,99.07% 92.41%,99.11% 95.49%,100.00% 99.68%,97.79% 99.65%,95.73% 99.52%,92.98% 99.36%,90.64% 99.36%,89.10% 99.47%,86.58% 99.57%,85.17% 99.45%,82.52% 99.42%,80.37% 98.77%,77.78% 99.05%,76.25% 99.09%,73.23% 99.04%,72.40% 98.99%,69.69% 99.08%,67.47% 99.25%,65.89% 98.74%,63.57% 98.84%,60.71% 98.90%,58.51% 99.17%,57.25% 98.77%,54.69% 99.03%,52.69% 99.39%,50.74% 99.07%,47.47% 99.24%,44.95% 99.63%,43.51% 99.86%,41.34% 99.35%,39.36% 99.49%,36.36% 99.47%,34.03% 99.29%,32.70% 99.50%,29.92% 99.51%,28.14% 99.55%,25.83% 99.57%,24.19% 99.49%,22.42% 99.61%,19.80% 99.65%,17.82% 99.61%,14.74% 99.46%,13.22% 99.27%,10.97% 99.24%,9.11% 99.35%,6.53% 99.43%,4.69% 99.60%,1.97% 99.44%,0.66% 100.00%,0.61% 95.70%,0.64% 92.08%,1.52% 85.61%,1.16% 82.01%,0.93% 78.49%,0.77% 72.49%,0.90% 68.58%,0.60% 62.54%,0.55% 59.45%,1.32% 53.33%,1.82% 48.92%,1.43% 46.89%,0.87% 40.73%,0.63% 36.08%,0.53% 33.36%,0.60% 27.95%,0.53% 21.44%,0.67% 18.68%,0.65% 14.58%,0.47% 8.47%,0.57% 4.87%)}
/* film windows unroll (site.js): .ur-in holds the film and takes the reveal's clip-path inset, layered over the torn clip
   on the film itself; .ur-roll is the paper roll at the leading edge: a cylinder shaded light to dark, a pen edge,
   the lip of paper coming off it and a soft shadow. It is only ever visible while a window is unrolling. */
.ur-in{position:relative;z-index:1}
.ur-roll{position:absolute;z-index:2;left:0;top:-4px;width:20px;height:calc(100% + 8px);opacity:0;pointer-events:none;
  background:linear-gradient(90deg,#b3a586 0,#dccfb2 14%,#F5EDD8 32%,#FBF6E6 44%,#EDE3CA 64%,#c9bb9b 84%,#9d8e70 100%);
  border:1.4px solid #2b2118d0;border-radius:46%/9px;box-shadow:5px 2px 7px -2px #1a100870}
.ur-roll::after{content:"";position:absolute;top:7%;bottom:6%;left:58%;border-left:1.2px solid #2b2118a0;border-radius:2px}
.ur-r .ur-roll{background:linear-gradient(270deg,#b3a586 0,#dccfb2 14%,#F5EDD8 32%,#FBF6E6 44%,#EDE3CA 64%,#c9bb9b 84%,#9d8e70 100%);box-shadow:-5px 2px 7px -2px #1a100870}
.ur-r .ur-roll::after{left:auto;right:58%;border-left:0;border-right:1.2px solid #2b2118a0}
.ur-v .ur-roll{left:-4px;top:0;width:calc(100% + 8px);height:20px;border-radius:9px/46%;box-shadow:2px 5px 7px -2px #1a100870;
  background:linear-gradient(180deg,#b3a586 0,#dccfb2 14%,#F5EDD8 32%,#FBF6E6 44%,#EDE3CA 64%,#c9bb9b 84%,#9d8e70 100%)}
.ur-v .ur-roll::after{top:58%;bottom:auto;left:6%;right:7%;border-left:0;border-top:1.2px solid #2b2118a0}
.window figcaption{margin-top:14px;font-size:15px;color:var(--ink-2)}
.window figcaption b{color:var(--ink);font-weight:700}
.cases{display:grid;gap:36px;margin-top:clamp(56px,7vw,88px)}
@media (min-width:760px){.cases{grid-template-columns:1fr 1fr;gap:40px}}
.case-card{display:flex;flex-direction:column;padding:22px 22px 24px}
.case-card .shot{position:relative;margin:0 0 18px;padding:9px}
.case-card .shot::before{content:"";position:absolute;inset:0;background:var(--spruce);clip-path:polygon(0 3%,30% 0,100% 2%,98% 50%,100% 100%,55% 97%,2% 100%,1% 40%);transform:rotate(-.8deg)}
.case-card .shot img{position:relative;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#1d1712}
.case-card h3{font-size:32px;font-weight:580;margin:12px 0 8px}
.case-card h3 a{color:inherit;text-decoration:none}
.case-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.case-card p{font-size:16.5px;line-height:1.48;margin:0 0 14px}
.case-card .plink{margin-top:auto;align-self:flex-start;position:relative;z-index:3}
.case-card:hover .plink{background-size:100% 7px}
.own{margin-top:clamp(44px,5vw,76px)}
.own>h3,.own>h2{font-size:clamp(28px,2.6vw,36px);margin:0 0 18px}
#building .own{margin-top:0}
.feature .fbody{font-size:18.5px;margin:18px 0 12px}
.vtname{display:inline-block}
.where{margin:0;font:400 clamp(21px,1.75vw,27px)/1.38 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;max-width:27em}
.place{display:grid;gap:26px clamp(40px,5vw,96px);align-items:center}
.place .h2{max-width:12em}
.wv{position:relative;width:min(100%,560px);aspect-ratio:1000/908;margin:0 auto}
.wv img{position:absolute;inset:0;width:100%;height:100%}
.wvpen{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wvpen path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;opacity:.9}
.wvpen .v1{opacity:0}
.wvpen.boil-b .v0{opacity:0}.wvpen.boil-b .v1{opacity:.9}
@media (min-width:900px){.place{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.wv{width:min(100%,520px);margin:0 auto}}
@media (max-width:899px){.wv{width:min(88%,440px)}}
.own>p{color:var(--ink-2);margin:0 0 18px}
.apps{list-style:none;margin:0;padding:0}
.apps>li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px 28px;padding:20px 0 18px;border-top:1.5px dotted #2b211855}
.apps>li:last-child{border-bottom:1.5px dotted #2b211855}
@media (min-width:760px){.apps>li{grid-template-columns:150px minmax(0,1fr) 210px;align-items:baseline}}
.apps h4{margin:0;font:600 25px/1.1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.apps p{margin:0;font-size:17px;line-height:1.45}
.apps .st8{font:700 13px/1.3 var(--lab);font-stretch:92%;color:var(--link)}
.apps .more{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 28px;align-items:baseline;margin-top:8px}
.apps .more details[open]{flex-basis:100%}
@media (min-width:760px){.apps .more{grid-column:2/-1}}
details.film>summary{display:inline-block;cursor:pointer;list-style:none;font-weight:700;color:var(--link);padding:2px 0 5px}
details.film>summary::-webkit-details-marker{display:none}
details.film>summary::before{content:"";display:inline-block;width:0;height:0;margin-right:9px;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent;transition:transform var(--d-ui) var(--ease-out);vertical-align:1px}
details.film[open]>summary::before{transform:rotate(90deg)}
details.film .window{margin:14px 0 6px;max-width:760px}
details.film[open] .window{animation:settle var(--d-ui) var(--ease-out)}

/* ---------- the Rally demo: the bar fills like wash, a pen tick marks each goal ---------- */
.demo{margin:22px 0 22px;padding:22px 24px 20px}
.demo .meter{position:relative;height:34px;margin:46px 34px 8px 0}
.demo .track{position:absolute;inset:7px 0;border:1.6px solid var(--ink);border-radius:255px 14px 225px 12px/12px 225px 14px 255px}
.demo .wash{position:absolute;left:3px;top:10px;bottom:10px;width:calc(100% - 6px);transform-origin:0 50%;transform:scaleX(var(--g,0));background:linear-gradient(90deg,#8FAE66,#4E7A48 88%,#4E7A4800);border-radius:8px 40px 10px 30px;opacity:.86;transition:transform 900ms var(--ease-out)}
.demo .goal{position:absolute;top:-24px;bottom:-4px;width:0;border-left:1.6px dashed #2b2118aa}
.demo .goal span{position:absolute;bottom:100%;left:0;transform:translateX(-50%);font:700 12.5px var(--lab);font-stretch:92%;white-space:nowrap;color:var(--ink-2)}
.demo .goal svg{position:absolute;left:6px;top:-6px;width:24px;height:26px;overflow:visible}
.demo .goal path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60}
.demo .goal.met path{stroke-dashoffset:0;transition:stroke-dashoffset 380ms var(--ease-pen) 760ms}
.demo .goal.met span{color:var(--link)}
.demo .read{margin:8px 0 4px;font-size:17px}
.demo .hint{min-height:2.9em;margin:0 0 14px;font-size:16.5px;color:var(--ink-2)}
.demo .read b{font-family:var(--disp);font-weight:600;font-size:1.12em;font-variant-numeric:tabular-nums}
.demo .row{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center}
.demo .note{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.demo .figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 22px;margin:18px 0 18px}
.demo .figs div{border-top:1.5px dotted #2b211866;padding-top:10px}
.demo .figs dt{font:700 12.5px var(--lab);font-stretch:92%;letter-spacing:.02em;color:var(--ink-2);text-transform:uppercase}
.demo .figs dd{margin:4px 0 0;font:500 30px/1.1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;font-variant-numeric:tabular-nums}
.demo .figs dd small{display:block;font:400 14px/1.35 var(--body);color:var(--ink-2);margin-top:3px}
.demo label{font-weight:700;font-size:15.5px}
.demo input[type=range]{width:min(420px,100%);accent-color:var(--spruce)}

/* ---------- how we work ---------- */
.how{display:grid;gap:36px clamp(48px,6vw,110px);align-items:center}
@media (min-width:980px){.how{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.how .splitwrap{position:sticky;top:120px}}
.csteps{list-style:none;margin:0;padding:0;counter-reset:s}
.csteps li{counter-increment:s;position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:32px 0 12px;font-size:clamp(18px,1.5vw,21px);line-height:1.45}
.csteps li::before{content:counter(s);font:500 42px/1 var(--disp);color:var(--link);font-variation-settings:"SOFT" 100,"WONK" 0}
@media (max-width:599px){.csteps li{grid-template-columns:40px minmax(0,1fr)}}
.csteps .boil{position:absolute;left:0;top:6px;width:100%;height:22px;overflow:visible}
.csteps .boil path{fill:var(--ink)}.csteps .boil .v1{opacity:0}
.csteps .boil.boil-b .v0{opacity:0}.csteps .boil.boil-b .v1{opacity:1}
.after{margin:30px 0 0;font-size:18px}
/* the one signature moment: one small landscape, painted whole, comes apart into the parts it is made of.
   Sky and sun, the far ridges, the forest band, the river and the meadow are cut along their own contours (shared edges,
   no grid). Each part is its own piece of paper: a narrow paper rim shows round its cut edge, a pen line runs along its top.
   The ridges, forest and meadow are cut from the hero's baked panel.webp (already decoded, no new image) under a palette
   wash; the sky, sun and river are CSS washes on the page grain. The resting state is the parted one: the parts stacked
   apart as cards, each named for a product. The replay shows the whole, then the parts lift and drift apart in stop-motion
   steps and take their names. DOM and clip-path only; transform and opacity are all that animate. */
.split{position:relative;height:clamp(250px,27vw,390px);margin:14px 18px 14px;filter:drop-shadow(1.5px 3px 2px #2a160838)}
.split .pc{position:absolute;inset:0;background:var(--paper-hi)}
.split i{position:absolute;inset:0;background:url(../art/panel-660.webp) var(--bp,50% 50%)/var(--bs,150%) auto no-repeat}
/* the parting landscape fetches its painting only when it comes near (site.js adds .near) */
html.js .split:not(.near) i{background-image:none}
.split i::after{content:"";position:absolute;inset:0;background:var(--tn,transparent);mix-blend-mode:multiply;opacity:var(--to,.4)}
.split .sky i{background:radial-gradient(ellipse at 76% 30%,#F6E7B8 0,#F3EEDB00 46%),linear-gradient(#F5EEDA,#E7E7D6 92%),url(../art/grain.webp)}
.split .sky i::after{display:none}
.eco-sun{position:absolute;left:73%;top:9%;width:8.5%;aspect-ratio:1;border-radius:52% 48% 50% 50%/48% 52% 48% 52%;background:radial-gradient(circle at 46% 44%,#EFC86A 0 34%,#EFC86Ad0 50%,#EFC86A55 64%,#EFC86A00 72%);transform:scale(1.9)}
.split .ridges{--bp:80% 12%;--bs:150%;--tn:var(--haze);--to:.35}
.split .forest{--bp:72% 86%;--bs:150%;--tn:#5F7A5E;--to:.42}
.split .river i{background:linear-gradient(97deg,#A9BEC0 0,#C8D6D2 22%,#B2C5C5 46%,#D3DDD6 63%,#A7BBBD 84%,#BFCFCB),url(../art/grain.webp);background-blend-mode:multiply}
.split .river i::after{display:none}
.split .meadow{--bp:30% 99%;--bs:150%;--tn:var(--charge);--to:.55}
.eco-pen{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.eco-pen path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.72}
.split .river .eco-pen path{stroke:#3d5560}
/* each part's product name, laid beside the card where it settles */
.split .nm{position:absolute;z-index:2;white-space:nowrap;transform:translateY(-50%);padding:4px 10px 3px;font:560 clamp(13px,1.15vw,17px)/1.1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--paper-hi);background:var(--spruce);clip-path:var(--tear-chip)}
.split .nm.l{left:2%}.split .nm.r{right:2%}
@media (max-width:599px){.split .nm{font-size:12px;padding:3px 7px 2px}}
.split .pc.sky{--k:0;transform-origin:50% 15.8%;--d:translate(-0.6%,-2.6%) rotate(-1.6deg) scale(1.01);--t:translate(-1.60%,-4.52%) scale(0.84) rotate(-0.9deg);clip-path:polygon(0.00% 0.00%,2.50% 0.00%,5.00% 0.00%,7.50% 0.00%,10.00% 0.00%,12.50% 0.00%,15.00% 0.00%,17.50% 0.00%,20.00% 0.00%,22.50% 0.00%,25.00% 0.00%,27.50% 0.00%,30.00% 0.00%,32.50% 0.00%,35.00% 0.00%,37.50% 0.00%,40.00% 0.00%,42.50% 0.00%,45.00% 0.00%,47.50% 0.00%,50.00% 0.00%,52.50% 0.00%,55.00% 0.00%,57.50% 0.00%,60.00% 0.00%,62.50% 0.00%,65.00% 0.00%,67.50% 0.00%,70.00% 0.00%,72.50% 0.00%,75.00% 0.00%,77.50% 0.00%,80.00% 0.00%,82.50% 0.00%,85.00% 0.00%,87.50% 0.00%,90.00% 0.00%,92.50% 0.00%,95.00% 0.00%,97.50% 0.00%,100.00% 0.00%,100.00% 36.77%,97.50% 37.05%,95.00% 37.22%,92.50% 37.54%,90.00% 37.81%,87.50% 37.42%,85.00% 37.93%,82.50% 38.42%,80.00% 38.43%,77.50% 38.58%,75.00% 38.27%,72.50% 38.17%,70.00% 37.09%,67.50% 36.20%,65.00% 34.63%,62.50% 33.53%,60.00% 32.03%,57.50% 30.39%,55.00% 29.35%,52.50% 27.40%,50.00% 26.25%,47.50% 25.62%,45.00% 24.82%,42.50% 24.58%,40.00% 24.33%,37.50% 23.42%,35.00% 24.38%,32.50% 25.03%,30.00% 25.02%,27.50% 26.08%,25.00% 26.76%,22.50% 28.36%,20.00% 29.02%,17.50% 29.63%,15.00% 29.88%,12.50% 30.69%,10.00% 30.86%,7.50% 30.91%,5.00% 31.34%,2.50% 30.87%,0.00% 30.62%)}
.split .pc.sky i{clip-path:polygon(0.60% 0.75%,2.50% 0.75%,5.00% 0.75%,7.50% 0.75%,10.00% 0.75%,12.50% 0.75%,15.00% 0.75%,17.50% 0.75%,20.00% 0.75%,22.50% 0.75%,25.00% 0.75%,27.50% 0.75%,30.00% 0.75%,32.50% 0.75%,35.00% 0.75%,37.50% 0.75%,40.00% 0.75%,42.50% 0.75%,45.00% 0.75%,47.50% 0.75%,50.00% 0.75%,52.50% 0.75%,55.00% 0.75%,57.50% 0.75%,60.00% 0.75%,62.50% 0.75%,65.00% 0.75%,67.50% 0.75%,70.00% 0.75%,72.50% 0.75%,75.00% 0.75%,77.50% 0.75%,80.00% 0.75%,82.50% 0.75%,85.00% 0.75%,87.50% 0.75%,90.00% 0.75%,92.50% 0.75%,95.00% 0.75%,97.50% 0.75%,99.40% 0.75%,99.40% 36.02%,97.50% 36.30%,95.00% 36.47%,92.50% 36.79%,90.00% 37.06%,87.50% 36.67%,85.00% 37.18%,82.50% 37.67%,80.00% 37.68%,77.50% 37.83%,75.00% 37.52%,72.50% 37.42%,70.00% 36.34%,67.50% 35.45%,65.00% 33.88%,62.50% 32.78%,60.00% 31.28%,57.50% 29.64%,55.00% 28.60%,52.50% 26.65%,50.00% 25.50%,47.50% 24.87%,45.00% 24.07%,42.50% 23.83%,40.00% 23.58%,37.50% 22.67%,35.00% 23.63%,32.50% 24.28%,30.00% 24.27%,27.50% 25.33%,25.00% 26.01%,22.50% 27.61%,20.00% 28.27%,17.50% 28.88%,15.00% 29.13%,12.50% 29.94%,10.00% 30.11%,7.50% 30.16%,5.00% 30.59%,2.50% 30.12%,0.60% 29.87%)}
.split .pc.ridges{--k:1;transform-origin:50% 40.0%;--d:translate(0.6%,-1.4%) rotate(1.2deg) scale(1.01);--t:translate(1.40%,-3.41%) scale(0.84) rotate(0.7deg);clip-path:polygon(0.00% 30.62%,2.50% 30.87%,5.00% 31.34%,7.50% 30.91%,10.00% 30.86%,12.50% 30.69%,15.00% 29.88%,17.50% 29.63%,20.00% 29.02%,22.50% 28.36%,25.00% 26.76%,27.50% 26.08%,30.00% 25.02%,32.50% 25.03%,35.00% 24.38%,37.50% 23.42%,40.00% 24.33%,42.50% 24.58%,45.00% 24.82%,47.50% 25.62%,50.00% 26.25%,52.50% 27.40%,55.00% 29.35%,57.50% 30.39%,60.00% 32.03%,62.50% 33.53%,65.00% 34.63%,67.50% 36.20%,70.00% 37.09%,72.50% 38.17%,75.00% 38.27%,77.50% 38.58%,80.00% 38.43%,82.50% 38.42%,85.00% 37.93%,87.50% 37.42%,90.00% 37.81%,92.50% 37.54%,95.00% 37.22%,97.50% 37.05%,100.00% 36.77%,100.00% 52.62%,97.50% 50.62%,95.00% 52.61%,92.50% 50.73%,90.00% 52.06%,87.50% 50.34%,85.00% 51.42%,82.50% 49.83%,80.00% 50.86%,77.50% 49.28%,75.00% 50.54%,72.50% 48.50%,70.00% 50.21%,67.50% 47.83%,65.00% 49.80%,62.50% 47.84%,60.00% 49.21%,57.50% 47.39%,55.00% 48.44%,52.50% 46.42%,50.00% 48.39%,47.50% 46.71%,45.00% 48.16%,42.50% 45.99%,40.00% 47.70%,37.50% 46.32%,35.00% 47.75%,32.50% 45.62%,30.00% 47.67%,27.50% 45.68%,25.00% 47.92%,22.50% 46.43%,20.00% 47.62%,17.50% 45.95%,15.00% 48.18%,12.50% 46.30%,10.00% 48.47%,7.50% 46.70%,5.00% 49.08%,2.50% 47.44%,0.00% 49.40%)}
.split .pc.ridges i{clip-path:polygon(0.60% 31.37%,2.50% 31.62%,5.00% 32.09%,7.50% 31.66%,10.00% 31.61%,12.50% 31.44%,15.00% 30.63%,17.50% 30.38%,20.00% 29.77%,22.50% 29.11%,25.00% 27.51%,27.50% 26.83%,30.00% 25.77%,32.50% 25.78%,35.00% 25.13%,37.50% 24.17%,40.00% 25.08%,42.50% 25.33%,45.00% 25.57%,47.50% 26.37%,50.00% 27.00%,52.50% 28.15%,55.00% 30.10%,57.50% 31.14%,60.00% 32.78%,62.50% 34.28%,65.00% 35.38%,67.50% 36.95%,70.00% 37.84%,72.50% 38.92%,75.00% 39.02%,77.50% 39.33%,80.00% 39.18%,82.50% 39.17%,85.00% 38.68%,87.50% 38.17%,90.00% 38.56%,92.50% 38.29%,95.00% 37.97%,97.50% 37.80%,99.40% 37.52%,99.40% 51.87%,97.50% 49.87%,95.00% 51.86%,92.50% 49.98%,90.00% 51.31%,87.50% 49.59%,85.00% 50.67%,82.50% 49.08%,80.00% 50.11%,77.50% 48.53%,75.00% 49.79%,72.50% 47.75%,70.00% 49.46%,67.50% 47.08%,65.00% 49.05%,62.50% 47.09%,60.00% 48.46%,57.50% 46.64%,55.00% 47.69%,52.50% 45.67%,50.00% 47.64%,47.50% 45.96%,45.00% 47.41%,42.50% 45.24%,40.00% 46.95%,37.50% 45.57%,35.00% 47.00%,32.50% 44.87%,30.00% 46.92%,27.50% 44.93%,25.00% 47.17%,22.50% 45.68%,20.00% 46.87%,17.50% 45.20%,15.00% 47.43%,12.50% 45.55%,10.00% 47.72%,7.50% 45.95%,5.00% 48.33%,2.50% 46.69%,0.60% 48.65%)}
.split .pc.forest{--k:2;transform-origin:50% 57.5%;--d:translate(-0.4%,0%) rotate(-0.8deg) scale(1.01);--t:translate(-1.00%,-1.21%) scale(0.84) rotate(-0.5deg);clip-path:polygon(0.00% 49.40%,2.50% 47.44%,5.00% 49.08%,7.50% 46.70%,10.00% 48.47%,12.50% 46.30%,15.00% 48.18%,17.50% 45.95%,20.00% 47.62%,22.50% 46.43%,25.00% 47.92%,27.50% 45.68%,30.00% 47.67%,32.50% 45.62%,35.00% 47.75%,37.50% 46.32%,40.00% 47.70%,42.50% 45.99%,45.00% 48.16%,47.50% 46.71%,50.00% 48.39%,52.50% 46.42%,55.00% 48.44%,57.50% 47.39%,60.00% 49.21%,62.50% 47.84%,65.00% 49.80%,67.50% 47.83%,70.00% 50.21%,72.50% 48.50%,75.00% 50.54%,77.50% 49.28%,80.00% 50.86%,82.50% 49.83%,85.00% 51.42%,87.50% 50.34%,90.00% 52.06%,92.50% 50.73%,95.00% 52.61%,97.50% 50.62%,100.00% 52.62%,100.00% 68.13%,97.50% 68.88%,95.00% 68.71%,92.50% 68.92%,90.00% 69.16%,87.50% 69.21%,85.00% 69.20%,82.50% 68.98%,80.00% 68.25%,77.50% 68.18%,75.00% 67.57%,72.50% 66.74%,70.00% 66.18%,67.50% 65.86%,65.00% 65.31%,62.50% 64.38%,60.00% 63.88%,57.50% 63.78%,55.00% 63.28%,52.50% 62.98%,50.00% 63.07%,47.50% 62.78%,45.00% 62.81%,42.50% 63.11%,40.00% 63.22%,37.50% 63.78%,35.00% 64.00%,32.50% 64.51%,30.00% 65.20%,27.50% 65.81%,25.00% 66.64%,22.50% 66.96%,20.00% 67.48%,17.50% 68.36%,15.00% 68.33%,12.50% 68.92%,10.00% 69.25%,7.50% 69.13%,5.00% 69.04%,2.50% 69.27%,0.00% 68.75%)}
.split .pc.forest i{clip-path:polygon(0.60% 50.15%,2.50% 48.19%,5.00% 49.83%,7.50% 47.45%,10.00% 49.22%,12.50% 47.05%,15.00% 48.93%,17.50% 46.70%,20.00% 48.37%,22.50% 47.18%,25.00% 48.67%,27.50% 46.43%,30.00% 48.42%,32.50% 46.37%,35.00% 48.50%,37.50% 47.07%,40.00% 48.45%,42.50% 46.74%,45.00% 48.91%,47.50% 47.46%,50.00% 49.14%,52.50% 47.17%,55.00% 49.19%,57.50% 48.14%,60.00% 49.96%,62.50% 48.59%,65.00% 50.55%,67.50% 48.58%,70.00% 50.96%,72.50% 49.25%,75.00% 51.29%,77.50% 50.03%,80.00% 51.61%,82.50% 50.58%,85.00% 52.17%,87.50% 51.09%,90.00% 52.81%,92.50% 51.48%,95.00% 53.36%,97.50% 51.37%,99.40% 53.37%,99.40% 67.38%,97.50% 68.13%,95.00% 67.96%,92.50% 68.17%,90.00% 68.41%,87.50% 68.46%,85.00% 68.45%,82.50% 68.23%,80.00% 67.50%,77.50% 67.43%,75.00% 66.82%,72.50% 65.99%,70.00% 65.43%,67.50% 65.11%,65.00% 64.56%,62.50% 63.63%,60.00% 63.13%,57.50% 63.03%,55.00% 62.53%,52.50% 62.23%,50.00% 62.32%,47.50% 62.03%,45.00% 62.06%,42.50% 62.36%,40.00% 62.47%,37.50% 63.03%,35.00% 63.25%,32.50% 63.76%,30.00% 64.45%,27.50% 65.06%,25.00% 65.89%,22.50% 66.21%,20.00% 66.73%,17.50% 67.61%,15.00% 67.58%,12.50% 68.17%,10.00% 68.50%,7.50% 68.38%,5.00% 68.29%,2.50% 68.52%,0.60% 68.00%)}
.split .pc.river{--k:3;transform-origin:50% 70.9%;--d:translate(0.6%,1.4%) rotate(1.1deg) scale(1.01);--t:translate(1.60%,1.65%) scale(0.84) rotate(0.8deg);clip-path:polygon(0.00% 68.75%,2.50% 69.27%,5.00% 69.04%,7.50% 69.13%,10.00% 69.25%,12.50% 68.92%,15.00% 68.33%,17.50% 68.36%,20.00% 67.48%,22.50% 66.96%,25.00% 66.64%,27.50% 65.81%,30.00% 65.20%,32.50% 64.51%,35.00% 64.00%,37.50% 63.78%,40.00% 63.22%,42.50% 63.11%,45.00% 62.81%,47.50% 62.78%,50.00% 63.07%,52.50% 62.98%,55.00% 63.28%,57.50% 63.78%,60.00% 63.88%,62.50% 64.38%,65.00% 65.31%,67.50% 65.86%,70.00% 66.18%,72.50% 66.74%,75.00% 67.57%,77.50% 68.18%,80.00% 68.25%,82.50% 68.98%,85.00% 69.20%,87.50% 69.21%,90.00% 69.16%,92.50% 68.92%,95.00% 68.71%,97.50% 68.88%,100.00% 68.13%,100.00% 80.13%,97.50% 80.85%,95.00% 80.59%,92.50% 80.66%,90.00% 80.69%,87.50% 80.50%,85.00% 80.19%,82.50% 79.63%,80.00% 78.53%,77.50% 78.07%,75.00% 77.05%,72.50% 75.79%,70.00% 74.80%,67.50% 74.07%,65.00% 73.12%,62.50% 71.81%,60.00% 70.97%,57.50% 70.57%,55.00% 69.80%,52.50% 69.29%,50.00% 69.22%,47.50% 68.82%,45.00% 68.81%,42.50% 69.13%,40.00% 69.32%,37.50% 70.00%,35.00% 70.41%,32.50% 71.17%,30.00% 72.14%,27.50% 73.09%,25.00% 74.27%,22.50% 74.99%,20.00% 75.92%,17.50% 77.22%,15.00% 77.61%,12.50% 78.62%,10.00% 79.35%,7.50% 79.62%,5.00% 79.88%,2.50% 80.42%,0.00% 80.18%)}
.split .pc.river i{clip-path:polygon(0.60% 69.50%,2.50% 70.02%,5.00% 69.79%,7.50% 69.88%,10.00% 70.00%,12.50% 69.67%,15.00% 69.08%,17.50% 69.11%,20.00% 68.23%,22.50% 67.71%,25.00% 67.39%,27.50% 66.56%,30.00% 65.95%,32.50% 65.26%,35.00% 64.75%,37.50% 64.53%,40.00% 63.97%,42.50% 63.86%,45.00% 63.56%,47.50% 63.53%,50.00% 63.82%,52.50% 63.73%,55.00% 64.03%,57.50% 64.53%,60.00% 64.63%,62.50% 65.13%,65.00% 66.06%,67.50% 66.61%,70.00% 66.93%,72.50% 67.49%,75.00% 68.32%,77.50% 68.93%,80.00% 69.00%,82.50% 69.73%,85.00% 69.95%,87.50% 69.96%,90.00% 69.91%,92.50% 69.67%,95.00% 69.46%,97.50% 69.63%,99.40% 68.88%,99.40% 79.38%,97.50% 80.10%,95.00% 79.84%,92.50% 79.91%,90.00% 79.94%,87.50% 79.75%,85.00% 79.44%,82.50% 78.88%,80.00% 77.78%,77.50% 77.32%,75.00% 76.30%,72.50% 75.04%,70.00% 74.05%,67.50% 73.32%,65.00% 72.37%,62.50% 71.06%,60.00% 70.22%,57.50% 69.82%,55.00% 69.05%,52.50% 68.54%,50.00% 68.47%,47.50% 68.07%,45.00% 68.06%,42.50% 68.38%,40.00% 68.57%,37.50% 69.25%,35.00% 69.66%,32.50% 70.42%,30.00% 71.39%,27.50% 72.34%,25.00% 73.52%,22.50% 74.24%,20.00% 75.17%,17.50% 76.47%,15.00% 76.86%,12.50% 77.87%,10.00% 78.60%,7.50% 78.87%,5.00% 79.13%,2.50% 79.67%,0.60% 79.43%)}
.split .pc.meadow{--k:4;transform-origin:50% 87.6%;--d:translate(-0.5%,2.6%) rotate(-1.2deg) scale(1.01);--t:translate(-1.20%,3.98%) scale(0.84) rotate(-0.6deg);clip-path:polygon(0.00% 80.18%,2.50% 80.42%,5.00% 79.88%,7.50% 79.62%,10.00% 79.35%,12.50% 78.62%,15.00% 77.61%,17.50% 77.22%,20.00% 75.92%,22.50% 74.99%,25.00% 74.27%,27.50% 73.09%,30.00% 72.14%,32.50% 71.17%,35.00% 70.41%,37.50% 70.00%,40.00% 69.32%,42.50% 69.13%,45.00% 68.81%,47.50% 68.82%,50.00% 69.22%,52.50% 69.29%,55.00% 69.80%,57.50% 70.57%,60.00% 70.97%,62.50% 71.81%,65.00% 73.12%,67.50% 74.07%,70.00% 74.80%,72.50% 75.79%,75.00% 77.05%,77.50% 78.07%,80.00% 78.53%,82.50% 79.63%,85.00% 80.19%,87.50% 80.50%,90.00% 80.69%,92.50% 80.66%,95.00% 80.59%,97.50% 80.85%,100.00% 80.13%,100.00% 100.00%,97.50% 100.00%,95.00% 100.00%,92.50% 100.00%,90.00% 100.00%,87.50% 100.00%,85.00% 100.00%,82.50% 100.00%,80.00% 100.00%,77.50% 100.00%,75.00% 100.00%,72.50% 100.00%,70.00% 100.00%,67.50% 100.00%,65.00% 100.00%,62.50% 100.00%,60.00% 100.00%,57.50% 100.00%,55.00% 100.00%,52.50% 100.00%,50.00% 100.00%,47.50% 100.00%,45.00% 100.00%,42.50% 100.00%,40.00% 100.00%,37.50% 100.00%,35.00% 100.00%,32.50% 100.00%,30.00% 100.00%,27.50% 100.00%,25.00% 100.00%,22.50% 100.00%,20.00% 100.00%,17.50% 100.00%,15.00% 100.00%,12.50% 100.00%,10.00% 100.00%,7.50% 100.00%,5.00% 100.00%,2.50% 100.00%,0.00% 100.00%)}
.split .pc.meadow i{clip-path:polygon(0.60% 80.93%,2.50% 81.17%,5.00% 80.63%,7.50% 80.37%,10.00% 80.10%,12.50% 79.37%,15.00% 78.36%,17.50% 77.97%,20.00% 76.67%,22.50% 75.74%,25.00% 75.02%,27.50% 73.84%,30.00% 72.89%,32.50% 71.92%,35.00% 71.16%,37.50% 70.75%,40.00% 70.07%,42.50% 69.88%,45.00% 69.56%,47.50% 69.57%,50.00% 69.97%,52.50% 70.04%,55.00% 70.55%,57.50% 71.32%,60.00% 71.72%,62.50% 72.56%,65.00% 73.87%,67.50% 74.82%,70.00% 75.55%,72.50% 76.54%,75.00% 77.80%,77.50% 78.82%,80.00% 79.28%,82.50% 80.38%,85.00% 80.94%,87.50% 81.25%,90.00% 81.44%,92.50% 81.41%,95.00% 81.34%,97.50% 81.60%,99.40% 80.88%,99.40% 99.25%,97.50% 99.25%,95.00% 99.25%,92.50% 99.25%,90.00% 99.25%,87.50% 99.25%,85.00% 99.25%,82.50% 99.25%,80.00% 99.25%,77.50% 99.25%,75.00% 99.25%,72.50% 99.25%,70.00% 99.25%,67.50% 99.25%,65.00% 99.25%,62.50% 99.25%,60.00% 99.25%,57.50% 99.25%,55.00% 99.25%,52.50% 99.25%,50.00% 99.25%,47.50% 99.25%,45.00% 99.25%,42.50% 99.25%,40.00% 99.25%,37.50% 99.25%,35.00% 99.25%,32.50% 99.25%,30.00% 99.25%,27.50% 99.25%,25.00% 99.25%,22.50% 99.25%,20.00% 99.25%,17.50% 99.25%,15.00% 99.25%,12.50% 99.25%,10.00% 99.25%,7.50% 99.25%,5.00% 99.25%,2.50% 99.25%,0.60% 99.25%)}
.split .pc{transform:var(--t)}
.split-lbl{display:flex;align-items:baseline;justify-content:center;gap:.5em;margin:20px 18px 0;font:500 clamp(24px,2.4vw,34px)/1.1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.split-lbl .ar{color:var(--link)}
.split-lbl>span{white-space:nowrap}
@media (max-width:599px){.split-lbl{font-size:clamp(18px,5.2vw,24px);gap:.4em}}
.splitwrap figcaption{margin:12px 18px 0;font-size:16px;color:var(--ink-2);text-align:center}
@keyframes tear{0%{transform:none;animation-timing-function:steps(4,end)}32%{transform:var(--d);animation-timing-function:steps(8,end)}100%{transform:var(--t)}}
@keyframes nmin{from{opacity:0}to{opacity:1}}

/* ---------- contact ---------- */
.contact{display:grid;gap:30px 64px}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
/* contact as the closing moment: a band of the hero ridges behind two paper cards and the address */
#contact{padding-bottom:0;overflow:hidden}
#contact .h2{font-size:clamp(46px,5.6vw,92px);margin-bottom:clamp(20px,2.4vw,34px)}
.close-in{position:relative;z-index:1;padding-bottom:clamp(40px,5vw,84px)}
.duo{display:grid;gap:22px 30px;max-width:980px}
@media (min-width:760px){.duo{grid-template-columns:1fr 1fr}.duo .who:nth-child(1){rotate:-.8deg}.duo .who:nth-child(2){rotate:.7deg;margin-top:18px}}
.duo .who{padding:30px 32px 28px}
.duo .who h3{font-size:clamp(26px,2.2vw,32px);margin:0 0 10px}
.duo .who p{font-size:clamp(17px,1.3vw,19px);line-height:1.5}
/* contact: the two paper cards pick what you'd like to talk about; one paper form card holds the form for it */
.talk{display:grid;gap:22px clamp(28px,3.4vw,56px);align-items:start;max-width:1180px}
@media (min-width:900px){.talk{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr)}}
.tabs{display:grid;gap:16px 18px}
@media (max-width:899px){.tabs{grid-template-columns:1fr 1fr}}
.tab{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform var(--d-tap) var(--ease-out),opacity var(--d-tap) var(--ease-out)}
.tabs .tab h3{font-size:clamp(22px,2vw,30px);margin:0 0 6px}
.tab .tp{position:relative;display:inline-block;padding-bottom:6px;font:700 clamp(14.5px,1.1vw,16px)/1.2 var(--lab);font-stretch:92%;color:var(--link)}
.tab .tp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 C40 2 70 7 110 4 S170 3 199 5' fill='none' stroke='%232A4B33' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/0% 100% no-repeat;transition:background-size var(--d-ui) var(--ease-pen)}
.tab[aria-selected=true] .tp::after{background-size:100% 100%}
.tab[aria-selected=false]{opacity:1;cursor:pointer}
.tab[aria-selected=false] .tp{color:var(--spruce,#2F4D3A);font-weight:600}
.tab[aria-selected=false] .tp::before{content:"→ "}
.tab[aria-selected=false]:hover{transform:translateY(-2px) rotate(-.4deg)}
.tabs .tab:nth-child(1){rotate:-.8deg}.tabs .tab:nth-child(2){rotate:.7deg}
@media (min-width:900px){.tab[aria-selected=true]{transform:translateX(6px)}}
.formcard{padding:clamp(24px,2.6vw,38px) clamp(22px,2.8vw,42px) clamp(24px,2.6vw,36px);rotate:-.25deg}
.formcard::after{opacity:.5}
.tpanel[hidden]{display:none}
.fh{font-size:clamp(28px,2.6vw,38px);margin:0 0 10px}
.formcard .fbody{font-size:clamp(17px,1.3vw,19px);line-height:1.5;max-width:38em;margin:0 0 16px}
.twonote{display:grid;gap:10px 28px;margin:0 0 22px;padding:12px 0 0;border-top:1.5px dotted #2b211866;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
@media (min-width:640px){.twonote{grid-template-columns:1fr 1fr}}
.twonote dt{font:700 12.5px/1.3 var(--lab);font-stretch:92%;letter-spacing:.04em;text-transform:uppercase;color:var(--link);margin:0 0 3px}
.twonote dd{margin:0}
.cform{display:grid;gap:14px}
.cform[hidden]{display:none}
.frow{display:grid;gap:14px 22px}
@media (min-width:640px){.frow{grid-template-columns:1fr 1fr}}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld label{font-weight:700;font-size:15.5px}
.fld .opt{font-weight:400;color:var(--ink-2)}
/* fields: a paper a touch deeper than the card, the grain barely there, drawn edges */
.fld input,.fld select,.fld textarea{width:100%;font:400 17px/1.4 var(--body);color:var(--ink);background:linear-gradient(#F8F2E1eb,#F8F2E1eb),url(../art/grain.webp);border:1.5px solid #6E6155;border-radius:4px 10px 5px 9px/9px 5px 10px 4px;padding:10px 12px;transition:border-color var(--d-tap) var(--ease-out),box-shadow var(--d-tap) var(--ease-out)}
.fld select{appearance:none;-webkit-appearance:none;padding-right:34px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%232B2118' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/12px 8px no-repeat,linear-gradient(#F8F2E1eb,#F8F2E1eb),url(../art/grain.webp)}
.fld textarea{resize:vertical;min-height:96px}
.fld input::placeholder{color:#6E6155}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--ink-2)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2.5px dashed var(--ink);outline-offset:3px;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;background:var(--paper-hi)}
.fld select:focus{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%232B2118' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/12px 8px no-repeat,var(--paper-hi)}
.fld [aria-invalid=true]{border-color:var(--dot);box-shadow:0 0 0 1px var(--dot) inset}
.ferr{margin:0;font-size:14.5px;font-weight:700;color:#9a3a2f}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.fsend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:6px}
.fsend .btn[disabled]{opacity:.6;cursor:progress}
.fstatus{margin:0;font-size:15.5px;color:var(--ink-2)}
.fstatus.bad{color:#9a3a2f;font-weight:700}
.fstatus .addrx{font-weight:700;color:var(--ink);word-break:break-word}
.fdone{display:flex;align-items:center;gap:16px;padding:18px 0 6px;font:500 clamp(21px,1.8vw,26px)/1.3 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.fdone[hidden]{display:none}
.fdone:focus{outline:none}
.fdone p{margin:0}
.tick{flex:none;width:44px;height:36px;overflow:visible}
.tick path{fill:none;stroke:var(--link);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){.fdone:not([hidden]) .tick path{animation:tick 460ms steps(5,end) both}}
@keyframes tick{from{stroke-dashoffset:48}to{stroke-dashoffset:0}}
.addr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(26px,3vw,40px);padding:16px 0 0;border-top:1.5px dotted #2b211866;max-width:1180px}
.addr-k{font:700 13px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--link)}
.addr .mail{margin:0}
.btn.copy[hidden]{display:none}
.contact .prose p{font-size:19px;max-width:32em}
.mail{display:inline-block;margin:6px 0 0;font:500 clamp(24px,2.6vw,34px)/1.2 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;color:var(--ink);word-break:break-word}
.mail.empty{color:var(--ink-2);font-size:clamp(19px,1.8vw,24px)}
.who{padding:26px 26px 22px}
.who h3{font-size:24px;font-weight:580;margin:0 0 8px}
.who p{font-size:16.5px;line-height:1.5;margin:0 0 18px}
.who p:last-child{margin:0}

/* ---------- case pages ---------- */
.hero.case h1{font-size:clamp(52px,6.2vw,96px);margin:0 0 10px}
.tagline{font:400 clamp(22px,2.1vw,30px)/1.22 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;margin:0 0 20px;max-width:20em}
.hero.case .lede{margin-bottom:22px}
.back{display:inline-block;margin:0 0 18px;font-weight:700;font-size:15.5px}
.cols{display:grid;gap:26px clamp(40px,5vw,96px)}
.cols .h2{max-width:13em}
.cb{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cb li{position:relative;padding-left:18px}
.cb li::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1.7px;background:var(--ink);transform:rotate(-8deg)}
@media (min-width:900px){.cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.built{list-style:none;margin:0;padding:0;display:grid;gap:30px 52px}
@media (min-width:760px){.built{grid-template-columns:1fr 1fr}}
.built h3{font-size:25px;font-weight:580;margin:0 0 8px}
.built p{margin:0;font-size:17.5px;line-height:1.5}
.built li{position:relative;padding-top:16px}
.built li::before{content:"";position:absolute;left:0;top:0;width:46px;height:3px;background:var(--ink);border-radius:2px 6px 3px 5px;transform:rotate(-1.5deg);opacity:.85}
.stands{display:grid;gap:0;margin:0}
.stands>div{display:grid;gap:4px 28px;padding:18px 0;border-top:1.5px dotted #2b211855}
.stands>div:last-child{border-bottom:1.5px dotted #2b211855}
@media (min-width:760px){.stands>div{grid-template-columns:170px minmax(0,1fr)}}
.stands dt{font:700 13px/1.6 var(--lab);font-stretch:92%;letter-spacing:.04em;text-transform:uppercase;color:var(--link)}
.stands dd{margin:0;font-size:18.5px}
.nextcase{display:grid;gap:8px 30px;align-items:center;padding:30px 30px 28px;text-decoration:none}
@media (min-width:760px){.nextcase{grid-template-columns:minmax(0,1fr) 240px}}
.nextcase .k{display:block;font:700 13px var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--link);margin-bottom:8px}
.nextcase .t{display:block;font:500 clamp(36px,4vw,54px)/1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0,"opsz" 144;letter-spacing:-.02em;color:var(--ink);width:max-content}
.nextcase .s{display:block;margin-top:8px;font-size:18px;color:var(--ink)}
.nextcase img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;clip-path:polygon(0 3%,30% 0,100% 2%,98% 50%,100% 100%,55% 97%,2% 100%,1% 40%)}
.nextcase .plink{justify-self:start;margin-top:12px}
.nextcase:hover .plink{background-size:100% 7px}
.ask{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between}
.ask h2{font-size:clamp(28px,3vw,40px)}

/* ---------- the showcase: every product leads with its film ---------- */
.show{display:grid;gap:clamp(40px,4vw,60px) clamp(28px,3.4vw,56px);align-items:start}
@media (min-width:760px){.show-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tile{display:flex;flex-direction:column;min-width:0}
.tile>.window{margin:0 0 18px}
.tile>.window figcaption{margin-top:10px;font-size:14px}
.tile-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 8px}
.tile h3,.tile h4{margin:0;font:560 clamp(30px,2.5vw,40px)/1.05 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.018em}
.tile h3 a{color:inherit;text-decoration:none}
.tile h3 a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.tile p{font-size:clamp(17px,1.25vw,18.5px);line-height:1.5;margin:0 0 14px;max-width:38em}
.tile>.plink,.tile-txt>.plink{align-self:flex-start}
.could{margin:2px 0 16px;padding:12px 0 2px;border-top:1.5px dotted #2b211866;max-width:38em}
.could-k{margin:0 0 6px!important;font:700 12.5px/1.2 var(--body)!important;letter-spacing:.09em;text-transform:uppercase;color:var(--link)}
.could ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.could li{position:relative;padding-left:18px;font-size:16px;line-height:1.42}
.could li::before{content:"";position:absolute;left:0;top:.7em;width:9px;height:1.7px;background:var(--ink);transform:rotate(-8deg)}
.could li.later{color:var(--ink-2)}
.window.wide video{aspect-ratio:7/3}
.tile .chip{white-space:normal}
.tile-tall .window.tall video{max-height:min(470px,64svh)}
@media (min-width:760px){
  .show-app{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .tile-tall{flex-direction:row;gap:26px;align-items:flex-start}
  .tile-tall>.window{flex:none;margin:0}
  .tile-tall .window.tall video{max-height:min(470px,62svh);margin:0}
  .tile-tall .tile-txt{min-width:0;padding-top:4px}
}
.own>h3{margin-bottom:clamp(18px,2vw,26px)!important}
/* section header: the heading on the left, the section's one plain statement beside it in display type,
   so the line under a heading never sits alone over empty width */
.sechd{display:grid;gap:14px clamp(40px,5vw,96px);margin:0 0 clamp(30px,3.4vw,52px)}
.sechd .h2{margin:0}
.sechd-line{position:relative;margin:0;padding-top:18px;max-width:26em;font:500 clamp(22px,2.05vw,31px)/1.28 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.008em;color:var(--ink)}
.sechd-line::before{content:"";position:absolute;left:0;top:0;width:54px;height:3px;background:var(--link);border-radius:2px 6px 3px 5px;transform:rotate(-1.5deg);opacity:.9}
@media (min-width:900px){.sechd{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}.sechd-line{margin-bottom:.35em}}
/* work rows: each business is one row, film on one side and its words on the other, alternating */
.wrows{display:grid;gap:clamp(44px,5vw,84px)}
.wrow .tile-txt{min-width:0}
@media (min-width:900px){
  .wrow{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,3.6vw,60px);align-items:center}
  .wrow>.window{margin:0}
  .wrow.flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .wrow.flip>.window{order:2}
}
/* passion projects, second row: Soft Peal with Cork under it on the left, In Hand standing tall on the right */
.pp{margin-top:clamp(48px,5vw,84px)}
.pp-col{display:flex;flex-direction:column;min-width:0}
.pp-col .slip{margin-top:clamp(26px,2.6vw,40px);max-width:none}
@media (min-width:760px){.pp .tile-tall .window.tall video{max-height:min(560px,70svh)}}
/* passion projects, third row: two games without films. Their pictures are drawn here, in the site's own paper and pen,
   inside the same torn window a film gets: no images, no canvas. Like Rabbits is a fan of plain paper cards (its card art
   is still to be commissioned, so no rabbits appear); Solitairy is an amber terminal screen on a torn paper window.
   Both join the replay system: the cards fan out, and the start-up text comes up line by line, in stepped frames. */
.window .art{position:relative;z-index:1;width:100%;aspect-ratio:16/9;overflow:hidden;-webkit-clip-path:var(--ftear);clip-path:var(--ftear);container-type:inline-size}
.fan{background:radial-gradient(ellipse 70% 80% at 50% 60%,#3b5e48,var(--spruce) 70%,#253f2f)}
.fan svg{width:100%;height:100%}
.fan .fc{transform-box:view-box;transform-origin:320px 440px;transform:rotate(var(--r,0deg))}
.fan .fsh{fill:#0d1a12;opacity:.32}
.fan .fp{fill:var(--paper-hi)}
.fan .fp.litter{fill:var(--laurel)}
.fan .pen *{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fan text{fill:var(--ink)}
.fan .lab{font:700 10.5px var(--lab);font-stretch:92%;letter-spacing:.02em}
.fan .num{font:560 28px var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.fan .ttl{font:560 31px var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;letter-spacing:-.01em}
.fan .tag{font:italic 400 13px var(--body);fill:var(--ink-2)}
.crtwin{background:var(--paper-hi) url(../art/grain.webp);padding:4.6% 6.2% 5%}
.crtwin::after{content:"";position:absolute;inset:4% 2.6% 4.6% 2.2%;border:1.4px solid var(--ink);border-radius:6px 90px 8px 70px/70px 7px 90px 6px;transform:rotate(-.5deg);filter:url(#t-ink);opacity:.75;pointer-events:none}
.crt{position:relative;height:100%;overflow:hidden;border-radius:4.2cqw/5.2cqw;background:radial-gradient(ellipse 75% 70% at 50% 46%,#24170a,#120c04 62%,#050302);box-shadow:inset 0 0 3.4cqw #000,0 0 0 .9cqw #3a3127,0 0 0 1.25cqw #1d1712}
.crt::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(#0000 0 2px,#00000059 2px 3px);pointer-events:none}
.crt-tx{position:absolute;inset:7% 8%;display:flex;flex-direction:column;justify-content:center;font:400 2.9cqw/1.32 ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;color:#ffb642;text-shadow:0 0 .5cqw #ffb64280}
.crt-tx .ln{display:block;white-space:pre}
.crt .cur{display:inline-block;width:.6em;height:.95em;margin-left:.15em;vertical-align:-.12em;background:#ffb642}
@media (max-width:759px){.crt-tx{font-size:3.3cqw;inset:6% 7%}}
@media (prefers-reduced-motion:no-preference){
  html.anim .fan:not(.a-done) .fc{transform:rotate(0deg)}
  html.anim .fan.a-play .fc{animation:fanout 336ms step-end calc(var(--k)*84ms + 120ms) both}
  html.anim .crtwin:not(.a-done) .ln{opacity:0}
  html.anim .crtwin.a-play .ln{animation:lnon 84ms step-end calc(var(--k)*84ms + 160ms) both}
  html:not(.anim) .crt .cur,html.anim .crtwin.a-done .cur{animation:blink 1060ms step-end infinite}
}
@keyframes fanout{0%{transform:rotate(0deg)}25%{transform:rotate(calc(var(--r,0deg)*.4))}50%{transform:rotate(calc(var(--r,0deg)*.78))}75%{transform:rotate(calc(var(--r,0deg)*1.04))}100%{transform:rotate(var(--r,0deg))}}
@keyframes lnon{0%{opacity:0}100%{opacity:1}}
@keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
.slip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-top:clamp(34px,3.4vw,52px);padding:22px 30px 20px;max-width:760px}
.slip h3{margin:0;font:560 30px/1.05 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
.slip p{margin:0;font-size:17.5px}
/* Rally's origin: three short steps, left to right */
.origin{list-style:none;margin:clamp(30px,3.4vw,48px) 0 0;padding:0;display:grid;gap:18px 0;counter-reset:o}
.origin li{position:relative;padding:16px 26px 4px 0;border-top:1.5px solid var(--ink)}
.origin li b{display:block;font:560 clamp(22px,1.8vw,27px)/1.1 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0;margin:0 0 6px}
.origin li span{display:block;font-size:17px;line-height:1.48;max-width:30em}
@media (min-width:900px){
  #rally .origin{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
  #rally .origin li:not(:last-child)::after{content:"\2192";position:absolute;right:-30px;top:14px;font:500 24px/1 var(--disp);color:var(--link)}
}

/* ---------- end card and footer ---------- */
.foot{padding:0 0 46px}
/* the end card: no painting, just the site's signature ridge line on its own, the wordmark sitting on it, one low sun */
/* the end card: no card at all. The signature ridge line runs edge to edge across the page ground, rolling low on the right;
   the wordmark and one line of type sit on it, one low sun behind the hills */
.endcard{position:relative;width:100vw;margin-left:calc(50% - 50vw);aspect-ratio:6/1;min-height:200px;max-height:380px;overflow:hidden;container-type:inline-size}
.endcard .ecline{position:absolute;inset:0;width:100%;height:100%}
.endcard .ecline path{fill:var(--ink)}
.endcard .ecline .v1{opacity:0}
.endcard .ecline.boil-b .v0{opacity:0}.endcard .ecline.boil-b .v1{opacity:1}
.endcard .sun{position:absolute;left:84%;top:22%;width:clamp(30px,4.2cqw,66px);aspect-ratio:1;border-radius:52% 48% 50% 50%/48% 52% 48% 52%;background:radial-gradient(circle at 46% 44%,#EFC86A 0 34%,#EFC86Ad0 50%,#EFC86A55 64%,#EFC86A00 72%)}
.endcard .ec{position:absolute;left:max(var(--gut),calc((100% - var(--max))/2));bottom:calc(max(20%,3.33cqw) + 10px);max-width:50%}
.endcard .wm{display:block;font-size:clamp(34px,5.4cqw,88px);margin:0 0 .14em}
.endcard .line{margin:0;font:500 clamp(17px,1.9cqw,30px)/1.2 var(--disp);font-variation-settings:"SOFT" 100,"WONK" 0}
@media (max-width:599px){.endcard{aspect-ratio:auto;height:230px;min-height:0}.endcard .ec{max-width:70%;bottom:calc(20% + 58px)}.endcard .sun{left:74%;top:30%}}
@keyframes soak{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.fline{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:baseline;margin-top:22px;font-size:15.5px;color:var(--ink-2)}
.fline nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.fline a{color:var(--ink);font-weight:700;text-decoration:none}
.fline a:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* ---------- drawings replay each time they come back into view ----------
   site.js watches each drawing. Fully out of view, it goes back to its unpainted state (no classes);
   at least a quarter in view, it gets .a-play, and .a-done once it has finished. Only art and pen lines take part:
   copy never hides. Everything here is mask, stroke-dashoffset, transform or opacity. html.anim is set only
   without reduced motion; without it (or without JS) every drawing simply shows finished. */
@media (prefers-reduced-motion:no-preference){
  /* unpainted: washes not yet bloomed */
  html.anim .panel-col:not(.a-done) .panel{-webkit-mask:url(../art/bloom.png) 72% 35%/0% no-repeat;mask:url(../art/bloom.png) 72% 35%/0% no-repeat}
  html.anim .wv:not(.a-done) img{-webkit-mask:url(../art/bloom.png) 14% 62%/0% no-repeat;mask:url(../art/bloom.png) 14% 62%/0% no-repeat}
  /* unpainted: pen lines not yet drawn (a hard-edged mask that slides off left to right) */
  html.anim .panel-col:not(.a-done) .mainline,html.anim .cdiv:not(.a-done),html.anim .fr:not(.a-done) .strike,
  html.anim .csteps:not(.a-done) .boil,html.anim .endcard:not(.a-done) .ecline{-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat}
  html.anim .wv:not(.a-done) .wvpen path{stroke-dasharray:1000;stroke-dashoffset:1000}
  html.anim .split:not(.a-done) .pc{transform:none}
  html.anim .split:not(.a-done) .nm{opacity:0}
  html.anim .endcard:not(.a-done) .sun{opacity:0}

  /* playing */
  html.anim .panel-col.a-play .panel{animation:bloom 1000ms var(--ease-out) 120ms both}
  html.anim .panel-col.a-play .mainline{animation:pen 760ms linear 520ms both}
  html.anim .panel-col:not(.a-done) .survey{-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat}
  html.anim .panel-col.a-play .survey{-webkit-mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;mask:linear-gradient(90deg,#000 50%,#0000 50%) 100% 0/200% 100% no-repeat;animation:penx 900ms var(--ease-pen) 1300ms both}
  html.anim .cdiv.a-play{animation:penx 900ms var(--ease-pen) both}
  html.anim .fr.a-play .strike{animation:penx 420ms var(--ease-pen) calc(var(--i,0)*460ms) both}
  html.anim .csteps.a-play .boil{animation:penx var(--d-draw) var(--ease-pen) calc(var(--i,0)*260ms) both}
  /* the fitted panel rests a moment, then parts along its seams, the modules drift apart lifting a little and square up
     into a grid; once they have settled, each one's product name is laid on in two frames */
  html.anim .split.a-play .pc{animation:tear 1240ms both 620ms}
  html.anim .split.a-play .nm{animation:nmin 170ms steps(2,end) calc(1800ms + var(--k)*90ms) both}
  /* West Virginia: the wash runs in from the wet western edge, then the pen goes round the border by hand:
     a slow start down the northern panhandle, quick along the long borders, a pause at the eastern panhandle,
     quick again, and a slow last stretch back up into the northern panhandle */
  html.anim .wv.a-play img{animation:wvbloom 900ms var(--ease-out) both}
  html.anim .wv.a-play .wvpen path{animation:wvpen 1300ms linear 520ms both}
  html.anim .endcard.a-play .ecline{animation:pen 1400ms linear both}
  html.anim .endcard.a-play .sun{animation:soak var(--d-draw) var(--ease-out) 1100ms both}

  /* film windows: rolled up until their turn (site.js steps the unroll), then the torn edge and its shadow settle */
  html.anim .window.ur:not(.a-done) .ur-in{-webkit-clip-path:inset(-2px 100% -2px -2px);clip-path:inset(-2px 100% -2px -2px)}
  html.anim .window.ur-r:not(.a-done) .ur-in{-webkit-clip-path:inset(-2px -2px -2px 100%);clip-path:inset(-2px -2px -2px 100%)}
  html.anim .window.ur-v:not(.a-done) .ur-in{-webkit-clip-path:inset(-2px -2px 100% -2px);clip-path:inset(-2px -2px 100% -2px)}
  html.anim .window.ur:not(.a-done) .fr-paper::before{opacity:0}
  html.anim .window.ur.a-done .fr-paper::before{animation:urshade 250ms step-end both}
  html.anim .window.ur.a-done .fr-paper{animation:ursettle 170ms step-end both}
  html.anim details.film[open] .window.ur{animation:none}
  /* the copy beside a film settles in as before; the film's own window doesn't fade */
  html.anim .rv .st.st-w{opacity:1;transform:none;transition:none}
  html.anim .rv .st.st-w>:not(.window){opacity:0;transform:translateY(10px)}
  html.anim .rv.in .st.st-w>:not(.window){opacity:1;transform:none;transition:opacity var(--d-ui) var(--ease-out),transform var(--d-ui) var(--ease-out);transition-delay:calc(var(--i,0)*90ms + 240ms)}
}
@keyframes urshade{0%{opacity:.07;transform:translate(1px,2px)}50%{opacity:.14;transform:translate(2px,4px)}100%{opacity:.2;transform:translate(3px,5px)}}
@keyframes ursettle{0%{transform:translateY(-2px)}50%{transform:translateY(1px)}100%{transform:none}}
@keyframes wvbloom{from{-webkit-mask-size:0%;mask-size:0%}to{-webkit-mask-size:420%;mask-size:420%}}
@keyframes wvpen{
  0%{stroke-dashoffset:1000;animation-timing-function:cubic-bezier(.5,0,.8,.6)}
  16%{stroke-dashoffset:950;animation-timing-function:linear}
  36%{stroke-dashoffset:740;animation-timing-function:cubic-bezier(.2,.6,.4,1)}
  50%{stroke-dashoffset:690;animation-timing-function:cubic-bezier(.6,0,.4,1)}
  82%{stroke-dashoffset:110;animation-timing-function:cubic-bezier(.2,.5,.5,1)}
  100%{stroke-dashoffset:0}}

/* ---------- page-to-page: the panel and the wordmark stay put while the page changes ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-group(panel){animation-duration:520ms;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-group(hdr){animation-duration:260ms;animation-timing-function:cubic-bezier(.22,.61,.36,1)}
::view-transition-old(root){animation:vt-out 180ms cubic-bezier(.22,.61,.36,1) both}
::view-transition-new(root){animation:vt-in 340ms cubic-bezier(.22,.61,.36,1) 90ms both}
::view-transition-group(ttl){animation-duration:480ms;animation-timing-function:cubic-bezier(.65,0,.35,1)}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- reduced motion: every state final and instant ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  html.js .rv .st{opacity:1;transform:none}
  .tilt{transform:none}
}
@media print{.hdr,.sheet,.panel-col{display:none}html.js .rv .st{opacity:1;transform:none}}
.nw{white-space:nowrap}

/* Reserve the tall In Hand film's space before its poster loads (no layout shift). */
video[width="540"][height="960"]{aspect-ratio:540/960;width:100%;height:auto}

/* the showreel, set over the watercolour as a screen. Until it plays the screen shows the painting behind it through a
   faint glass with an inked bezel and a glare; pressing play fills it with the film. */
.hreel{position:absolute;z-index:2;margin:0}
.hr-screen{position:relative;aspect-ratio:16/9}
.hr-screen::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(118deg,#fffbe600 30%,#fffbe638 41%,#fffbe600 52%,#fffbe600 64%,#fffbe61f 70%,#fffbe600 76%),#efe6cc29;-webkit-backdrop-filter:blur(1.2px) saturate(1.15) contrast(1.04);backdrop-filter:blur(1.2px) saturate(1.15) contrast(1.04);box-shadow:inset 0 0 0 1px #2b211826,inset 0 10px 28px -14px #2b211838}
.hr-screen::after{content:"";position:absolute;inset:-5px -4px -4px -5px;z-index:3;border:2px solid var(--ink);border-radius:var(--pen-r,3px);transform:rotate(-.5deg);filter:url(#t-ink);pointer-events:none}
.hr-screen video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;background:transparent;opacity:0;transition:opacity 1400ms var(--ease-out,ease-out)}
.hr-screen::before{transition:opacity 1400ms var(--ease-out,ease-out)}
/* the painting behind fades into the film: playing silently (.live), or with sound once asked (.on) */
.hreel.live .hr-screen video,.hreel.on .hr-screen video{opacity:1}
.hreel.live .hr-screen::before,.hreel.on .hr-screen::before{opacity:0}
.hreel.on .hr-play{display:none}
.hreel.live .hr-play{top:auto;bottom:10px;left:auto;right:10px;transform:rotate(-1.2deg);font-size:13px}
@media (max-width:599px){.hreel.live .hr-l{display:none}}
@media (prefers-reduced-motion:reduce){.hr-screen video,.hr-screen::before{transition:none}}
.hr-play:hover>span{transform:translateY(-1px)}
@media (min-width:900px){
  .hero .hreel{top:clamp(104px,19%,190px);right:calc(var(--pw)*.08);width:calc(var(--pw)*.8)}
  /* the showcase label and tags now sit under the buttons, on the left */
  .hero .hero-copy .hshow{position:relative;right:auto;bottom:auto;width:auto;padding:0;margin-top:34px}
  .hero:not(.case) .hero-copy{justify-content:center;padding-bottom:var(--hb)}
}
@media (max-width:899px){
  .hero .hreel{top:max(86px,calc(clamp(290px,84vw,560px)*.24));left:calc(var(--gut) + 6px);right:calc(var(--gut) + 6px)}
  .hero .hero-copy .hshow{padding:26px 0 6px}
}
/* with the showcase under the buttons the home copy is taller, so the home hero is given a little more height */
@media (min-width:900px){.hero:not(.case){--hh:clamp(720px,86svh,900px)}}
@media (min-width:900px){.hero:not(.case){height:auto;min-height:var(--hh)}.hero:not(.case) .hero-copy{height:auto;min-height:var(--hh);padding-top:112px}}

/* the opening waits for the painting: until its image has arrived (html.wait, cleared in index.html) the painting's
   part of the opening holds its first frame, so the hills paint in instead of blooming over an empty frame. The words
   do not wait. */
html.wait .hero .panel-col,html.wait .hero .panel-col *{animation-play-state:paused!important}

/* the reel's screen: everything inside sits square to the inked bezel (same slight tilt) and is clipped by it; a faint
   frame of the film shows through the glass until play, then fades out as the film fades in */
.hr-screen>video,.hr-screen>.hr-thumb,.hr-screen::before{transform:rotate(-.5deg);border-radius:6px;overflow:hidden;clip-path:inset(0 round 6px)}
.hr-thumb{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:.38;mix-blend-mode:multiply;pointer-events:none;transition:opacity 900ms var(--ease-out,ease-out)}
.hreel.on .hr-thumb{opacity:0}
.hr-screen video{z-index:2}
.hr-play{z-index:3}
@media (prefers-reduced-motion:reduce){.hr-thumb{transition:none}}

/* investing has its own place: a paper button beside the consultation button, and its own section with the pitch film */
.hinv+.hcta{margin-left:calc(12px - clamp(22px,2.8vw,38px))}
.inv-wrap{display:grid;gap:clamp(22px,3vw,44px);margin-top:clamp(18px,3vw,30px);align-items:start}
@media (min-width:1000px){.inv-wrap{grid-template-columns:minmax(0,1.7fr) minmax(320px,1fr)}}
.inv-form{rotate:.35deg}
.inv-film.big{margin:0}
.inv-act{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* the booking and investor buttons land on the form itself, a little below the header */
#forms{scroll-margin-top:104px}

/* the films' play button: centred on the poster, gone once the film starts */
.fplaying>.fplay,.fplaying .fplay{display:none}
/* the pitch film: a comfortable size, never wider than the screen is tall allows */
.inv-film.big{width:100%}

/* the investor form sits beside the film: kept compact so the two read as a pair */
.inv-form{padding:clamp(20px,2vw,30px) clamp(20px,2.2vw,34px) clamp(20px,2vw,28px)}
.inv-form .fh{margin-bottom:10px}
.inv-form .fld{margin-bottom:0}
.inv-form form{row-gap:9px}
.inv-form .frow{row-gap:9px}
.inv-form textarea{min-height:0}

/* hero balance: the reel screen sits level with the middle of the copy, centred across the painting, below the sun and
   over the first ridges; its glass carries a little paper so it reads as one quiet object, and the thumbnail shows clearer */
@media (min-width:900px){
  .hero .hreel{top:50%;right:auto;left:calc(100% - var(--pw)*.55);width:calc(var(--pw)*.9);transform:translate(-50%,-46%)}
}
.hr-screen::before{background:linear-gradient(118deg,#fffbe600 30%,#fffbe633 41%,#fffbe600 52%),color-mix(in srgb,var(--paper-hi) 58%,transparent);-webkit-backdrop-filter:blur(2.5px) saturate(1.05);backdrop-filter:blur(2.5px) saturate(1.05)}
.hr-thumb{opacity:.55}

/* ---------- the films' own player (site.js): a torn paper strip over the foot of the picture ---------- */
.fbox{position:relative}
.fstarted .fplay{display:none}
.fbar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;gap:clamp(4px,1vw,10px);padding:26px clamp(12px,2vw,22px) 10px clamp(8px,1.6vw,16px);
  background:linear-gradient(to top,color-mix(in srgb,var(--paper-hi) 82%,transparent) 0%,color-mix(in srgb,var(--paper-hi) 55%,transparent) 45%,transparent 100%);color:var(--ink);opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--d-ui,220ms) var(--ease-out,ease-out),transform var(--d-ui,220ms) var(--ease-out,ease-out)}
.fstarted.fawake .fbar,.fstarted.fpaused .fbar,.fstarted .fbar:has(:focus-visible){opacity:1;transform:none;pointer-events:auto}
.fstarted:not(.fawake):not(.fpaused) video{cursor:none}
.fbar button{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:6px;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fbar button:hover{color:var(--link)}
.fbar button:focus-visible{outline:2px dashed var(--ink);outline-offset:1px}
.fbar svg{width:18px;height:18px;fill:currentColor;filter:url(#t-ink)}
.fbar svg .ln{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fb-t{flex:none;font:600 13px/1 var(--lab);font-stretch:92%;font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap}
.fb-t b{font-weight:700;color:var(--ink)}
.fb-track{position:relative;flex:1;min-width:40px;height:26px;display:flex;align-items:center}
.fb-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.6px;margin-top:-.8px;background:var(--ink);opacity:.45;border-radius:2px;filter:url(#t-ink)}
.fb-buf{position:absolute;left:0;top:50%;height:1.6px;margin-top:-.8px;background:var(--ink);opacity:.3;width:0}
.fb-fill{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;background:var(--spruce);border-radius:3px;width:0}
.fb-fill::after{content:"";position:absolute;right:-6px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50% 46% 52% 48%;background:var(--spruce);box-shadow:0 0 0 2px var(--paper-hi)}
.fb-track input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.fb-track:focus-within::before{opacity:.8}
.fb-track:focus-within{outline:2px dashed var(--ink);outline-offset:2px;border-radius:4px}
@media (max-width:560px){.fbar{padding:20px 8px 6px 4px}.fb-t{font-size:12px}.fbar button{width:28px;height:28px}}
@media (prefers-reduced-motion:reduce){.fbar{transition:none}}
/* full screen: the film fills a dark frame, untorn, with the strip along its foot */
.fbox:fullscreen{background:#0d0a07;display:grid;place-items:center}
.fbox:fullscreen video,.fbox:fullscreen>video{width:100%;height:100%;object-fit:contain;-webkit-clip-path:none;clip-path:none;transform:none;border-radius:0;opacity:1}
.hr-screen.fbox:fullscreen::before,.hr-screen.fbox:fullscreen::after,.hr-screen.fbox:fullscreen .hr-thumb{display:none}

/* ---------- night: the same paper and pen at night (the design system's "Night desk"). Set on <html data-theme="night">
   by the head script from the visitor's local time (7 pm to 7 am), or by the sun/moon toggle in the header. ---------- */
html[data-theme="night"]{color-scheme:dark;
  --paper:#1E1913;--paper-hi:#2B241D;--table:#15110D;--ink:#EFE8D6;--ink-2:#C2B6A3;--link:#9EC29F;--spruce:#3D6A4E;
  --haze:#3A3F37;--ridge:#8FA08F;--sun:#E4BE62;--laurel:#E09E92;--dot:#E06A5A}
html[data-theme="night"] body{background-blend-mode:soft-light}
/* pen lines drawn in fixed walnut become cream */
html[data-theme="night"] .apps>li,html[data-theme="night"] .stands>div{border-top-color:#efe8d64d}
html[data-theme="night"] .apps>li:last-child,html[data-theme="night"] .stands>div:last-child{border-bottom-color:#efe8d64d}
html[data-theme="night"] .demo .figs div,html[data-theme="night"] .twonote,html[data-theme="night"] .addr,html[data-theme="night"] .could{border-top-color:#efe8d64d}
html[data-theme="night"] .demo .goal{border-left-color:#efe8d6aa}
html[data-theme="night"] .survey{color:#d8cbb3}
html[data-theme="night"] .split .river .eco-pen path{stroke:#9fb6bf}
html[data-theme="night"] .sheet::backdrop{background:#0008}
/* fields */
html[data-theme="night"] .fld input,html[data-theme="night"] .fld textarea{background:linear-gradient(#241E18eb,#241E18eb),url(../art/grain.webp);border-color:#9C8F7E}
html[data-theme="night"] .fld select{background-color:#241E18;border-color:#9C8F7E;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23EFE8D6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html[data-theme="night"] .fld input::placeholder{color:#9C8F7E}
html[data-theme="night"] .ferr,html[data-theme="night"] .fstatus.bad{color:#EE8A7C}
/* the paper roll that unrolls films, and its lines */
html[data-theme="night"] .ur-roll{background:linear-gradient(90deg,#16120d 0,#2a231b 14%,#3a3126 32%,#463c2f 44%,#352d23 64%,#231d16 84%,#120f0b 100%);border-color:#efe8d6a0}
html[data-theme="night"] .ur-r .ur-roll{background:linear-gradient(270deg,#16120d 0,#2a231b 14%,#3a3126 32%,#463c2f 44%,#352d23 64%,#231d16 84%,#120f0b 100%)}
html[data-theme="night"] .ur-v .ur-roll{background:linear-gradient(180deg,#16120d 0,#2a231b 14%,#3a3126 32%,#463c2f 44%,#352d23 64%,#231d16 84%,#120f0b 100%)}
html[data-theme="night"] .ur-roll::after{border-color:#efe8d680}
/* the reel's glass at night: a little night paper, not cream */
html[data-theme="night"] .hr-screen::before{background:linear-gradient(118deg,#fffbe600 30%,#fffbe614 41%,#fffbe600 52%),color-mix(in srgb,var(--paper-hi) 50%,transparent)}
html[data-theme="night"] .hr-thumb{mix-blend-mode:screen;opacity:.42}
/* shadows read stronger on dark paper */
html[data-theme="night"] .btn::before{opacity:.5}
/* the switch between the two themes is a held cross-fade of the ground, not a flash */
@media (prefers-reduced-motion:no-preference){html.theme-anim body,html.theme-anim .hdr-in,html.theme-anim .card,html.theme-anim .btn>span::before{transition:background-color .5s ease,color .5s ease}}

/* the sun/moon switch in the header: a pen-drawn glyph on paper */
.theme-btn{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.theme-btn:hover{color:var(--link)}
.theme-btn:focus-visible{outline:2.5px dashed var(--ink);outline-offset:3px}
.theme-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;filter:url(#t-ink)}
.theme-btn .moon{display:none}
html[data-theme="night"] .theme-btn .sun{display:none}
html[data-theme="night"] .theme-btn .moon{display:block}
.hinv{margin-left:4px}

/* keep the controls inside the picture: on the reel they share the screen's tilt and rounded corners; on the torn film
   windows they sit a little inside the torn edge */
.hr-screen>.fbar{transform:rotate(-.5deg) translateY(8px);transform-origin:50% 0;border-radius:0 0 6px 6px;clip-path:inset(0 round 0 0 6px 6px);left:1px;right:1px;bottom:1px}
.hr-screen.fstarted.fawake>.fbar,.hr-screen.fstarted.fpaused>.fbar,.hr-screen.fstarted>.fbar:has(:focus-visible){transform:rotate(-.5deg)}
.window .fbox>.fbar{left:1.6%;right:1.6%;bottom:3%;border-radius:0 0 4px 4px}

/* the films' play button: a paper disc ringed by the pen, a spruce play mark, and a small paper label under it */
.pbtn{position:absolute;left:50%;top:50%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transform:translate(-50%,-50%);-webkit-tap-highlight-color:transparent}
.pbtn .pb-disc{position:relative;display:grid;place-items:center;width:clamp(58px,6.4vw,84px);aspect-ratio:1;border-radius:50%;background:var(--paper-hi);box-shadow:0 8px 18px -8px #1a100870,0 2px 3px -1px #1a100833;transition:transform var(--d-ui,260ms) var(--ease-out,ease-out)}
.pbtn .pb-ring{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;filter:url(#t-ink);transition:transform var(--d-ui,260ms) steps(3,end)}
.pbtn .pb-tri{width:34%;height:auto;margin-left:9%;fill:var(--spruce);filter:url(#t-ink)}
.pbtn .pb-l{padding:6px 11px 5px;background:var(--paper-hi);clip-path:var(--tear-chip);font:700 13.5px/1 var(--lab);font-stretch:92%;letter-spacing:.01em;color:var(--ink);white-space:nowrap;filter:drop-shadow(0 2px 2px #1a100822)}
.pbtn .pb-l i{font-style:normal;font-weight:600;color:var(--ink-2);margin-left:4px}
.pbtn:hover .pb-disc{transform:scale(1.06)}
.pbtn:hover .pb-ring{transform:rotate(24deg)}
.pbtn:focus-visible{outline:none}
.pbtn:focus-visible .pb-disc{outline:2.5px dashed var(--ink);outline-offset:9px}
@media (max-width:560px){.pbtn{gap:7px}.pbtn .pb-l{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.pbtn .pb-disc,.pbtn .pb-ring{transition:none}}
.hr-play.pbtn{transform:translate(-50%,-50%)}
.hreel.on .hr-play{display:none}

/* the controls' layer covers the whole picture and is cut to the picture's own shape (the torn edge, or the reel's tilted
   screen), so its fade can never show outside the film; the controls sit along the foot and only they take clicks */
.fbar{top:0;left:0;right:0;bottom:0;align-items:flex-end;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--paper-hi) 84%,transparent) 0,color-mix(in srgb,var(--paper-hi) 52%,transparent) 11%,transparent 24%)}
.fbar>*{pointer-events:none;margin-bottom:0}
.fstarted.fawake .fbar>*,.fstarted.fpaused .fbar>*,.fstarted .fbar:has(:focus-visible)>*{pointer-events:auto}
.fstarted.fawake .fbar,.fstarted.fpaused .fbar,.fstarted .fbar:has(:focus-visible){pointer-events:none}
.window .fbox>.fbar{left:0;right:0;bottom:0;top:0;border-radius:0;-webkit-clip-path:var(--ftear);clip-path:var(--ftear);padding-bottom:max(12px,3.2%)}
.hr-screen>.fbar{left:0;right:0;bottom:0;top:0;border-radius:6px;clip-path:inset(0 round 6px);transform-origin:50% 50%;padding-bottom:10px}
.fbox:fullscreen>.fbar{top:auto;left:0;right:0;bottom:0;width:auto;transform:none;clip-path:none;height:auto;padding:40px 24px 18px}
.fstarted.fbox:fullscreen>.fbar{transform:none}

/* the painted sun is the day/night switch: a button over the sun (it rides inside the sun's own layer once the painting
   goes live, so it drifts with it). At night the sun is hushed into the dark paper and a pen-and-wash moon takes its place.
   A pencilled note with an arrow points at it on large screens. Box from panel-layout.js: sun at x 867-992, y 0-125 of 600x720. */
.sun-btn{position:absolute;z-index:3;left:44.6%;top:0;width:20.8%;height:17.3%;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sun-btn.in-layer{left:0;top:0;width:100%;height:100%}
.sun-btn::before{content:"";position:absolute;inset:22%;border-radius:50%;box-shadow:0 0 0 0 #EFC86A00;transition:box-shadow var(--d-ui) var(--ease-out)}
.sun-btn:hover::before{box-shadow:0 0 0 6px #EFC86A33,0 0 26px 10px #EFC86A40}
.sun-btn:focus-visible{outline:2.5px dashed var(--ink);outline-offset:-10%}
.moon-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;transition:opacity .6s var(--ease-out)}
.moon-hush{fill:var(--paper);filter:blur(6px)}
.moon-glow{fill:#EFE8D61f;filter:blur(7px)}
.moon-face{fill:#E9E1CB;stroke:#EFE8D6;stroke-width:1.2;filter:url(#t-ink)}
html[data-theme="night"] .moon-art{opacity:1}
html[data-theme="night"] .panel.live .layers>div:first-child img{opacity:0}
html[data-theme="night"] .panel.live .moon-hush{display:none}
html[data-theme="night"] .sun-btn:hover::before{box-shadow:0 0 0 6px #EFE8D61f,0 0 26px 10px #EFE8D626}
.sun-note{position:absolute;z-index:3;right:88%;top:6%;width:150%;display:none;pointer-events:none;color:var(--ink-2);text-align:left}
.sun-note>span{display:block;font:italic 400 clamp(15px,1.25vw,19px)/1 var(--body);letter-spacing:.01em;transform:rotate(-4deg);white-space:nowrap}
.sun-note svg{display:block;width:62%;margin:2px 0 0 38%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:url(#t-ink)}
.sun-note .sn-night{display:none}
html[data-theme="night"] .sun-note .sn-day{display:none}
html[data-theme="night"] .sun-note .sn-night{display:block}
@media (min-width:900px){.sun-note{display:block}}

/* the painting's layers never take clicks, except the sun switch riding in the sun's layer */
.layers,.layers>div,.layers img,.mainline,.panel img.flat{pointer-events:none}
.sun-btn{pointer-events:auto}

/* the header lets taps through to the painting (the sun switch) except on its own controls */
.hdr-in{pointer-events:none}
.hdr-in>*:not(.tabpaper){pointer-events:auto}
/* night: the patch that hushes the painted sun fades out at its edge, so no dark disc shows */
.moon-hush{filter:none}
html[data-theme="night"] .moon-hush{fill:url(#moonhush)}
/* night: the paper grain is much quieter */
html[data-theme="night"] body{background:linear-gradient(#1E1913de,#1E1913de),url(../art/grain.webp);background-color:var(--paper);background-blend-mode:normal}
/* night: text on spruce stays the light "on-spruce" cream (paper-hi turns dark at night) and spruce lifts a little */
html[data-theme="night"]{--spruce:#3F7052}
html[data-theme="night"] .btn.pri,html[data-theme="night"] .hs-tag.on,html[data-theme="night"] .split .nm{color:#F4EEDC}
html[data-theme="night"] .hs-tag.on::after{background:#F4EEDC}

/* ---------- night legibility pass ----------
   accents at night are warm lamplight (the estimator's old night orange) instead of green, which reads poorly on walnut;
   spruce stays only as a fill (buttons, the active tag) with cream text; the colored chip papers keep dark ink */
html[data-theme="night"]{--link:#E5A877}
html[data-theme="night"] .chip.sun,html[data-theme="night"] .chip.laurel,html[data-theme="night"] .chip.charge{color:#2B2118}
html[data-theme="night"] .tab[aria-selected=false] .tp{color:var(--link)}
html[data-theme="night"] .fb-fill,html[data-theme="night"] .fb-fill::after{background:var(--link)}
html[data-theme="night"] .pbtn .pb-tri{fill:var(--link)}
html[data-theme="night"] .demo input[type=range]{accent-color:var(--link)}
/* night, no green at all: the fill colour is a burnt orange with walnut ink on it (the card table keeps its green felt) */
html[data-theme="night"]{--spruce:#D4894F}
html[data-theme="night"] .btn.pri,html[data-theme="night"] .hs-tag.on,html[data-theme="night"] .split .nm{color:#1E1913}
html[data-theme="night"] .hs-tag.on::after{background:#1E1913}
html[data-theme="night"] .fan{background:radial-gradient(ellipse 70% 80% at 50% 60%,#3b5e48,#2F4D3A 70%,#253f2f)}
/* night: the watercolours are washed warm, dusky amber and walnut instead of green, under the moon (the moon itself is
   drawn separately and stays cream) */
html[data-theme="night"]{--night-wash:sepia(.62) saturate(1.25) hue-rotate(-12deg) brightness(.82) contrast(1.05)}
html[data-theme="night"] .panel img.flat,html[data-theme="night"] .layers img,html[data-theme="night"] .wv img,html[data-theme="night"] .split i{filter:var(--night-wash)}
@media (prefers-reduced-motion:no-preference){html.theme-anim .panel img.flat,html.theme-anim .layers img,html.theme-anim .wv img{transition:filter .6s ease}}
html[data-theme="night"] .hr-thumb{filter:var(--night-wash)}