/* formats/story/format.css - Vellis Indigo, the long story with pinned chapters. Brand truth: BRAND.md.
   Every selector is prefixed .fmt-story. Layout, tiles, band, rows, chips and the assistant come from
   shared.css; this file sets the brand hooks, the italic display face, the indigo grounds and the story parts.

   THE IDEA, so nobody flattens it back out. Indigo is a transformation: cloth leaves the vat green and the
   air turns it blue. The page is built on that one fact.
     1. The ground of the method section travels with the chapters. It starts cold leaf green, goes copper in
        the vat, olive in the dip, and the brand indigo #131A33 ARRIVES at oxidise, then washes out lighter.
        The house colour is the result of the method, not the backdrop to it. --st-air carries it, format.js
        interpolates it against the pin's scrub, and every ground stop clears 4.5:1 under paper text.
     2. The hero is the dip: the dipped square of the mark as a window on the dye house, which the scroll opens
        into the whole room before the chapters start (22 Sep, replaces the drying line and the hung cloth).
     3. The figure is cloth being dipped. Each chapter photograph is revealed by a waterline rising up the
        frame, the section's own ground laps at the hem as a wave, and the oxidise frame resolves out of a
        green cast while you watch.
   Grounds, top to bottom: hero on the brand ground (headline, the window that opens into the dye house) / method on the travelling ground with the
   chapter halo and the figure / yard band (image) / studio on ground2 / questions on ground / contact panel
   on ground2 / footer on the ground above a hairline.

   CLASS INVENTORY (page order; shared recipes in brackets, ids format.js reads)
   body.fmt-story[data-format="story"]
   header.f-nav > .container.f-nav-in > a.f-brand (i.f-mark holds mark.svg: path = accent, rect = paper)
       + nav.f-tabs#f-tabs + .f-nav-acts > a.pill.pill-ink.sm Start
   main#top
   section.hero-f.sd-hero#hero(.is-cine) > .sd-stage#sd-stage > .container.sd-grid >
       .sd-copy#sd-copy (span.k | h1.h1#hero-h with span.w-blue | p.lead | .row Open, Start | p.micro)
       + .sd-slot#sd-slot > i.sd-edge + figure.sd-film#sd-film > .sd-media#sd-media (picture + video.sd-video) + i.sd-scrim
       + i.sd-veil + figcaption.sd-line#sd-line
   section#method.st-sec[style --st-air --st-p --st-all] > .container.st-in#st-in
       .st-copy (.shader#st-grain grain, fixed palette, masked halo) > span.k | h2.h2 | ol.st-steps#st-steps >
         li.st-step[data-step][data-word] > i.st-bar + h3.st-t > button.st-btn[data-go] > i.st-n.mono + span
         then p.st-p | p.st-note
       .tile.st-fig#st-fig[data-tile] > figure.st-shot[data-word] x5 > picture > img (+ figcaption.st-cap)
           + i.st-water + svg.st-hem + p.st-word#st-word + .st-card#st-card (picture.st-thumb + .st-ticket > span.tile-k + p.st-line x5)
       nav.st-dots#st-dots > span.st-rail > span.st-rail-fill, then button.st-dot[data-go] x5
     p.visually-hidden#st-live ; .is-flat on the section is the resting state
   section#yard.yard > figure.band > picture + figcaption.figcap, then .container > ul.yard-strip > li.tile.yard-cell[data-reveal] x3
       (picture + i.dip-line: the frame is lifted out of the ground bottom to top behind a waterline)
   section#studio.sec-tint > .container > .studio-grid (tile + .chat, .studio-copy with .tile.studio-hands)
   section#questions .qa-head carries .tile.qa-tile under the h2
   section#questions.sec-sm.qa-sec > .container > .qa-grid
   section#contact.cta > .container > .cta-panel (.shader.shader-still + .cta-copy + .tile.cta-tile)
   footer.f-foot */

/* ---------- face: Newsreader italic only. The roman is not set on this page and is not declared. ---------- */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url('/assets/fonts/newsreader-display-italic.woff2') format('woff2')}
@font-face{font-family:'Newsreader Fallback';font-style:italic;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:90.3%;ascent-override:81.4%;descent-override:29.3%;line-gap-override:0%}

/* ---------- animatable custom properties ---------- */
/* --st-air is the colour of the air in the method section, written by format.js from the pin's progress.
   Registering it as a colour lets the paint interpolate instead of snapping. The initial value is the brand
   ground, so every fallback path (no gsap, reduced motion, flat) renders the house colour and nothing moves. */
@property --st-air{syntax:'<color>';inherits:true;initial-value:#131A33}

/* ---------- brand hooks (BRAND.md palette) ---------- */
.fmt-story{--b-ground:#131A33;--b-ground2:#1B2447;--b-ground3:#253161;--b-ink:#EFEAE1;--b-text2:#A6AEC6;--b-text3:#8890B0;
  --b-accent:#3C56A8;--b-accent-tint:#8FA6E6;--b-on-accent:#EFEAE1;
  --b-line:rgba(239,234,225,.14);--b-line-control:rgba(239,234,225,.34);
  --b-surface:#1B2447;--b-cta:#3C56A8;--b-on-cta:#EFEAE1;--b-focus:#8FA6E6;--b-tab-rule:#8FA6E6;
  --b-glass:rgba(19,26,51,.82);--b-glass-line:rgba(239,234,225,.2);--b-scrim:rgba(19,26,51,.78);
  --b-scrim-grad:linear-gradient(180deg,rgba(19,26,51,.28),rgba(19,26,51,.84));
  --b-dot-ring:rgba(29,191,115,.22);--b-display:'Newsreader','Newsreader Fallback',Georgia,serif;--b-display-weight:400;
  --weave:repeating-linear-gradient(90deg,rgba(239,234,225,.035) 0 1px,transparent 1px 4px)}
.fmt-story .f-nav,.fmt-story main,.fmt-story .f-foot{--text-2:var(--b-text2);--text-3:var(--b-text3);--bg-3:var(--b-ground3);--line-control:var(--b-line-control)}
.fmt-story main{background:var(--bg);color:var(--ink)}
.fmt-story main ::selection,.fmt-story .f-nav ::selection{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-story main p a,.fmt-story .f-foot a{color:var(--b-accent-tint)}
.fmt-story .ex,.fmt-story .on-dark .ex{background:transparent;border-color:currentColor;color:inherit;opacity:.8}

/* ---------- display type: italic 400 everywhere it speaks, the browser drives opsz ---------- */
.fmt-story .f-brand,.fmt-story main .h1,.fmt-story main .h2,.fmt-story .st-word,.fmt-story .st-cap,.fmt-story .figcap b{
  font-family:var(--b-display);font-style:italic;font-weight:400;font-optical-sizing:auto}
.fmt-story .f-brand{font-size:19px;letter-spacing:-.01em;gap:10px}
.fmt-story .f-brand .f-mark{width:20px;height:20px}
.fmt-story .f-mark svg path{fill:var(--b-accent)}
.fmt-story .f-mark svg rect{fill:none;stroke:var(--b-ink)}
.fmt-story main .h1{font-size:clamp(56px,8.5vw,128px);letter-spacing:-.02em;line-height:.98;max-width:none;padding-right:.06em}
.fmt-story main .h1 .line{overflow:hidden;padding:0 .08em .12em 0;margin-bottom:-.12em}
.fmt-story main .h2{font-size:clamp(34px,3.8vw,56px);letter-spacing:-.015em;line-height:1.05;max-width:18ch}
/* the last word of the headline arrives in the readable blue (7.16:1 on the ground); format.js tweens it
   there from paper on first paint, so the colour arrives rather than being stated. */
.fmt-story .w-blue{color:var(--b-accent-tint);transition:color 1.6s var(--ease)}
.fmt-story .hero-f.is-raw .w-blue{color:var(--b-ink)}

/* ---------- controls on the dark ground ---------- */
.fmt-story main .pill-ghost,.fmt-story .f-nav .pill-ghost{background:transparent;border-color:var(--line-control);color:var(--ink)}
.fmt-story main .pill-ghost:hover,.fmt-story .f-nav .pill-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.fmt-story .pill-ink:hover{background:#4A66BE}
.fmt-story .f-tabs a{opacity:.72}
.fmt-story .f-tabs a:hover,.fmt-story .f-tabs a.is-on,.fmt-story .f-tabs a[aria-current]{opacity:1}
/* the tab rule wipes in from the left when the spy moves it, rather than appearing */
.fmt-story .f-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--b-accent-tint);
  transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
.fmt-story .f-tabs a.is-on::after,.fmt-story .f-tabs a[aria-current]::after{transform:scaleX(1)}
/* touch: a button lifts a pixel under the pointer and settles under the press; a frame leans in a little;
   a row's question steps a pixel toward the reader */
.fmt-story main .pill,.fmt-story .f-nav .pill{transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.fmt-story main .pill:hover,.fmt-story .f-nav .pill:hover{transform:translateY(-1px)}
.fmt-story main .pill:active,.fmt-story .f-nav .pill:active{transform:scale(.98)}
.fmt-story .st-btn:active{transform:scale(.98)}
.fmt-story .st-dot:active i{transform:scale(1.2)}
.fmt-story .yard-cell img,.fmt-story .studio-hands img,.fmt-story .qa-tile img,.fmt-story .cta-tile img{transition:transform .9s var(--ease)}
.fmt-story .yard-cell:hover img,.fmt-story .studio-hands:hover img,.fmt-story .qa-tile:hover img,.fmt-story .cta-tile:hover img{transform:scale(1.03)}
.fmt-story .yard-cell:active img,.fmt-story .studio-hands:active img,.fmt-story .qa-tile:active img,.fmt-story .cta-tile:active img{transform:scale(.98)}
.fmt-story .rows.qa li b{transition:transform .3s var(--ease)}
.fmt-story .rows.qa li:hover b{transform:translateX(1px)}
.fmt-story .people li{transition:border-color .3s var(--ease)}
.fmt-story .people li:hover{border-top-color:var(--b-accent-tint)}

/* ---------- hero: the dip ---------- */
/* One dark stage. The sentence on the left and a window on the right: the dipped square of the mark, an outline
   standing a little off a frame of the dye house (vellis-drip). The window is a bounded tile at first paint and
   the h1 stays the largest paint at 1440 and 390 (perf gate D, D2).
   .is-cine (format.js, wide + motion + vendors): the section grows by a scroll run, the stage sticks under the nav,
   and the figure leaves the slot for the whole stage, clipped back to the slot by --ct --cr --cb --cl. The scrub
   opens that clip to the room, lifts the words away and reads one line of the method over a scrim of the ground.
   README 2 exception, noted here on purpose: the one full bleed element is a film, it is never the first paint,
   and text over it always sits on the scrim (ground at .86 behind the line, sampled 11:1 and over). */
.fmt-story .sd-hero{position:relative;padding:0;--sd-stage-h:calc(100svh - var(--demo-bar-h) - var(--fnav-h));--sd-run:120svh}
.fmt-story .sd-stage{position:relative;overflow:hidden}
.fmt-story .sd-grid{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);gap:clamp(40px,5.5vw,104px);align-items:center;
  padding-top:clamp(28px,4vw,64px);padding-bottom:clamp(28px,4vw,64px)}
.fmt-story .sd-copy{position:relative;z-index:2}
.fmt-story .sd-copy>.k{display:block;margin-bottom:clamp(14px,1.6vw,24px)}
.fmt-story .sd-copy .h1{font-size:clamp(54px,8.2vw,120px);line-height:1;max-width:11ch}
.fmt-story .sd-copy .lead{margin:clamp(22px,2.4vw,34px) 0 0;max-width:34ch;color:var(--text-2)}
.fmt-story .sd-copy .row{margin-top:clamp(22px,2.4vw,32px)}
.fmt-story .sd-copy .micro{margin-top:16px}

/* the window: a 4:5 frame with the outline of the mark standing off it by a few pixels */
.fmt-story .sd-slot{position:relative;aspect-ratio:5/6;width:min(100%,400px);justify-self:end}
.fmt-story .sd-edge{position:absolute;inset:-14px;border:1px solid rgba(239,234,225,.34);pointer-events:none;z-index:3}
/* the lower third of the outline has taken the dye: the mark, drawn around the window */
.fmt-story .sd-dye{position:absolute;left:-1px;right:-1px;bottom:-1px;height:34%;border:1px solid var(--b-accent-tint);border-top:0;transform-origin:50% 100%}
.fmt-story .sd-film{position:absolute;inset:0;margin:0;background:#0E1428;z-index:1}
.fmt-story .sd-media{position:absolute;inset:0;transform-origin:0 0}
.fmt-story .sd-media picture,.fmt-story .sd-media img,.fmt-story .sd-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fmt-story .sd-media img{object-position:46% 50%}
.fmt-story .sd-video{opacity:0;transition:opacity .9s var(--ease)}
.fmt-story .sd-video.is-on{opacity:1}
.fmt-story .sd-scrim{position:absolute;inset:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,26,51,.1) 30%,rgba(19,26,51,.62) 64%,rgba(19,26,51,.9) 100%)}
/* the veil the frame is lifted out of on arrival: a ground coloured block that drains downward */
.fmt-story .sd-veil{position:absolute;inset:0;background:var(--b-ground);transform-origin:50% 100%;transform:scaleY(0);pointer-events:none}
@media (prefers-reduced-motion:no-preference){.js .fmt-story .sd-veil{transform:scaleY(1)}}
/* flat: the line of the method is a caption under the frame */
.fmt-story .sd-line{position:absolute;left:0;right:0;top:calc(100% + 26px);margin:0;font-family:var(--b-display);font-style:italic;font-weight:400;
  font-size:clamp(17px,1.35vw,20px);line-height:1.35;color:var(--text-2);max-width:32ch}

@media (min-width:901px){
  .fmt-story .sd-stage{min-height:var(--sd-stage-h);display:flex;align-items:center}
  .fmt-story .sd-grid{width:100%}
  .fmt-story .sd-slot{margin-bottom:clamp(40px,5vh,64px)}
}

/* cinema: the stage sticks, the figure leaves the slot for the stage and is clipped back to it */
.fmt-story .sd-hero.is-cine{height:calc(var(--sd-stage-h) + var(--sd-run))}
.fmt-story .sd-hero.is-cine .sd-stage{position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h));height:var(--sd-stage-h);min-height:0}
.fmt-story .sd-hero.is-cine .sd-slot{position:static;margin-bottom:0}
.fmt-story .sd-hero.is-cine .sd-edge{inset:auto;top:calc(var(--ct,0px) - 14px);right:calc(var(--cr,0px) - 14px);bottom:calc(var(--cb,0px) - 14px);left:calc(var(--cl,0px) - 14px)}
.fmt-story .sd-hero.is-cine .sd-film{overflow:hidden;clip-path:inset(var(--ct,0px) var(--cr,0px) var(--cb,0px) var(--cl,0px));will-change:clip-path}
.fmt-story .sd-hero.is-cine .sd-media{will-change:transform}
.fmt-story .sd-hero.is-cine .sd-line{top:auto;left:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));right:auto;bottom:clamp(40px,8vh,88px);
  max-width:20ch;font-size:clamp(34px,3.6vw,58px);line-height:1.08;letter-spacing:-.015em;color:var(--b-ink);opacity:0;padding-bottom:.08em}

@media (max-width:900px){
  .fmt-story .sd-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:88px}
  .fmt-story .sd-copy .h1{font-size:clamp(50px,14.6vw,76px);max-width:none}
  .fmt-story .sd-slot{justify-self:stretch;width:auto;aspect-ratio:11/5;margin:0 14px}
  .fmt-story .sd-media img{object-position:50% 40%}
}
/* ---------- the method: five pinned chapters on a ground that travels with them ---------- */
.fmt-story .st-sec{position:relative;isolation:isolate;padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(48px,6vw,88px);
  border-top:1px solid var(--line);
  /* the air of the room. --st-air is the chapter colour; the edges always fall back to the house ground so
     the section joins the hero and the yard without a seam. */
  background:radial-gradient(132% 96% at 64% 44%,var(--st-air) 0%,var(--b-ground) 76%);
  --st-h:min(calc(100vh - var(--demo-bar-h) - var(--fnav-h) - 88px),760px)}
.fmt-story .st-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,88px);align-items:center}

/* the chapter panel: no card, a masked grain halo behind the list and nothing else */
.fmt-story .st-copy{position:relative;isolation:isolate;width:100%;max-width:620px;padding:clamp(20px,2.4vw,36px) clamp(20px,2.6vw,40px)}
/* the grain is air, not a stain: dark stops a shade off the ground (format.js STOPS), an even low opacity across
   the panel instead of a coloured blot behind the numerals, fading out at the edges so it has no shape of its own */
.fmt-story .st-copy>.shader{z-index:0;opacity:.28;border-radius:var(--r-tile);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-composite:intersect}
.fmt-story .st-copy>*:not(.shader){position:relative;z-index:2}
.fmt-story .st-copy .k{margin-bottom:12px}
.fmt-story .st-copy .h2{margin-bottom:20px;font-size:clamp(30px,3vw,44px)}
.fmt-story .st-steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
.fmt-story .st-step{position:relative;border-top:1px solid var(--line)}
/* the hairline over the open chapter fills across it as the scrub crosses that chapter: the scroll has a
   readable position inside the chapter, not only between chapters */
.fmt-story .st-bar{position:absolute;left:0;bottom:-1px;height:1px;width:var(--st-p,0%);background:var(--b-accent-tint);
  opacity:0;transition:opacity .35s var(--ease)}
.fmt-story .st-step.is-on .st-bar{opacity:1}
.fmt-story .st-t{margin:0;font-weight:500;font-size:inherit}
.fmt-story .st-btn{display:grid;grid-template-columns:44px 1fr;align-items:baseline;gap:0 10px;width:100%;padding:13px 0;
  background:none;border:0;text-align:left;cursor:pointer;font:inherit;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em;line-height:1.2;
  color:var(--text-3);transition:color .3s var(--ease),padding-left .45s var(--ease)}
.fmt-story .st-btn:hover{color:var(--ink)}
.fmt-story .st-step.is-on .st-btn{color:var(--ink);padding-left:8px}
.fmt-story .st-n{font-family:var(--font-mono);font-style:normal;font-weight:400;font-size:12px;letter-spacing:.06em;color:var(--text-2)}
.fmt-story .st-step.is-on .st-n{color:var(--b-accent-tint)}
.fmt-story .st-p{margin:0 0 0 54px;max-width:40ch;color:var(--text-2);font-size:15px;line-height:1.5;max-height:0;overflow:hidden;opacity:0}
.fmt-story .st-step.is-on .st-p{max-height:none;opacity:1;padding-bottom:16px}
.fmt-story .st-step.is-on .st-p{padding-left:8px}
.fmt-story .st-note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--text-2);font-size:15px;line-height:1.5}

/* the figure: the cloth. One photograph at a time, dipped in from below, the air of the room lapping at the hem */
.fmt-story .st-fig{height:var(--st-h);width:min(100%,calc(var(--st-h) * .8));min-height:460px;aspect-ratio:4/5;margin-left:auto;
  background:var(--bg-2);border:1px solid var(--line);box-shadow:0 50px 90px -60px rgba(0,0,0,.9)}
.fmt-story .st-shot{position:absolute;inset:0;margin:0;z-index:0}
.fmt-story .st-shot picture,.fmt-story .st-shot img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fmt-story .st-shot img{opacity:0;transition:opacity .7s var(--ease)}
.fmt-story .st-shot.is-on img,.fmt-story .st-shot picture.is-on img,.fmt-story .st-shot img.is-on{opacity:1}
.fmt-story .st-cap{display:none}
/* the scrim travels with the ground, so the frame is always lit by the same air as the room */
.fmt-story .st-fig::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--st-air) 74%,transparent),transparent 32%,transparent 48%,color-mix(in srgb,var(--st-air) 86%,transparent))}
/* the waterline that rides up the frame on every dip */
.fmt-story .st-water{position:absolute;left:0;right:0;bottom:0;height:2px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--b-accent-tint) 22%,#EFEAE1 50%,var(--b-accent-tint) 78%,transparent);
  box-shadow:0 0 26px 7px rgba(143,166,230,.34)}
/* the vat: the section's own air, lapping over the hem of the cloth */
.fmt-story .st-hem{position:absolute;left:-8%;bottom:-1px;width:116%;height:clamp(44px,6.4vw,74px);z-index:2;pointer-events:none;
  fill:var(--st-air);animation:st-lap 24s var(--ease-io) infinite alternate}
@keyframes st-lap{from{transform:translate3d(-3.2%,2px,0)}to{transform:translate3d(3.2%,-2px,0)}}
.fmt-story .st-word{position:absolute;left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);top:clamp(16px,2.6vw,34px);z-index:4;margin:0;
  font-size:clamp(40px,4.6vw,72px);letter-spacing:-.02em;line-height:.98;color:var(--ink)}
/* the running note: one quiet ticket pinned to the cloth, a line added per chapter, the newest in paper */
.fmt-story .st-card{position:absolute;left:clamp(16px,3vw,32px);right:auto;width:min(calc(100% - clamp(32px,6vw,64px)),400px);
  bottom:clamp(52px,6.6vw,86px);z-index:4;
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;align-items:start;padding:11px 15px 12px;border-radius:14px;
  background:var(--b-glass);border:1px solid var(--b-glass-line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* the job's own photograph, a small square beside the ticket */
.fmt-story .st-thumb{display:block;width:56px;aspect-ratio:1;margin-top:1px;border-radius:8px;overflow:hidden;background:var(--bg-2);border:1px solid var(--b-glass-line)}
.fmt-story .st-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.fmt-story .st-ticket{display:grid;gap:0;min-width:0}
.fmt-story .st-ticket>.tile-k{margin:0 0 6px;justify-content:flex-start;gap:10px;color:var(--ink)}
.fmt-story .st-line{display:none;margin:0;padding:6px 0 6px 13px;border-left:1px solid var(--b-glass-line);
  color:var(--b-text2);font-size:13.5px;line-height:1.4}
.fmt-story .st-line.is-on{display:block}
.fmt-story .st-line.is-now{color:var(--ink);border-left-color:var(--b-accent-tint)}

/* the dots: a rail whose fill is the whole method read so far */
.fmt-story .st-dots{position:absolute;right:max(0px,calc((var(--gutter) - 22px) / 2));top:50%;transform:translateY(-50%);z-index:5;
  display:grid;gap:14px;justify-items:center}
.fmt-story .st-rail{position:absolute;left:50%;top:-16px;bottom:-16px;width:1px;margin-left:-.5px;background:var(--line)}
.fmt-story .st-rail-fill{position:absolute;left:0;top:0;width:1px;height:var(--st-all,0%);background:var(--b-accent-tint)}
.fmt-story .st-dot{position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;background:none;border:0;cursor:pointer;border-radius:50%}
.fmt-story .st-dot i{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.4;
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease)}
.fmt-story .st-dot:hover i{opacity:.85}
.fmt-story .st-dot.is-on i{background:var(--b-accent);box-shadow:0 0 0 1.5px var(--ink);opacity:1;transform:scale(1.45)}

/* flat: the resting state. No pin, every chapter open, photographs stacked in order with their names,
   the ground back to the house indigo, the cloth already blue, nothing moving. */
.fmt-story .st-sec.is-flat{background:var(--b-ground)}
.fmt-story .st-sec.is-flat .st-in{align-items:start}
.fmt-story .st-sec.is-flat .st-copy{position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h) + 24px)}
.fmt-story .st-sec.is-flat .st-bar{display:none}
.fmt-story .st-sec.is-flat .st-btn{color:var(--ink);cursor:default;padding-left:0}
.fmt-story .st-sec.is-flat .st-n{color:var(--text-2)}
.fmt-story .st-sec.is-flat .st-p{max-height:none;opacity:1;padding:0 0 16px 0;margin-left:54px}
.fmt-story .st-sec.is-flat .st-fig{display:grid;gap:14px;height:auto;min-height:0;aspect-ratio:auto;width:min(100%,560px);
  background:none;border:0;border-radius:0;overflow:visible;transform:none;box-shadow:none}
.fmt-story .st-sec.is-flat .st-fig::after,.fmt-story .st-sec.is-flat .st-hem,.fmt-story .st-sec.is-flat .st-water{display:none}
.fmt-story .st-sec.is-flat .st-shot{position:relative;inset:auto;aspect-ratio:4/5;border-radius:var(--r-tile);overflow:hidden;
  background:var(--bg-2);border:1px solid var(--line);isolation:isolate}
.fmt-story .st-sec.is-flat .st-shot img{opacity:1;transition:none;clip-path:none}
.fmt-story .st-sec.is-flat .st-shot::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,26,51,0),rgba(19,26,51,.84))}
.fmt-story .st-sec.is-flat .st-cap{display:block;position:absolute;left:clamp(16px,3vw,28px);bottom:clamp(14px,2.4vw,24px);z-index:2;
  font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;line-height:1;color:var(--ink)}
.fmt-story .st-sec.is-flat .st-word,.fmt-story .st-sec.is-flat .st-dots{display:none}
.fmt-story .st-sec.is-flat .st-card{position:relative;inset:auto;width:auto;margin-top:2px}
/* flat is the finished job: every line of the running note is there, in order, the last one in paper */
.fmt-story .st-sec.is-flat .st-line{display:block;color:var(--b-text2);border-left-color:var(--b-glass-line)}
.fmt-story .st-sec.is-flat .st-line:last-of-type{color:var(--ink);border-left-color:var(--b-accent-tint)}
/* woven (flat under 900 px): format.js moves each photograph into its chapter, under the chapter text, and the
   running job under the list. The figure column is then empty and goes; the name is on the h3, so no caption. */
.fmt-story .st-sec.is-woven .st-fig{display:none}
/* the grain would stretch behind five photographs, a canvas thousands of px tall for nothing; it goes */
.fmt-story .st-sec.is-woven .st-copy>.shader{display:none}
.fmt-story .st-sec.is-woven .st-step .st-shot{width:100%;max-width:520px;margin:0 0 20px}
.fmt-story .st-sec.is-woven .st-step .st-shot::after,.fmt-story .st-sec.is-woven .st-step .st-cap{display:none}
.fmt-story .st-sec.is-woven .st-card{margin:18px 0 0}
.fmt-story .st-sec.is-woven .st-p{margin-left:46px;padding-bottom:14px}
.fmt-story .st-sec.is-woven .st-btn{grid-template-columns:36px 1fr}
@media (max-width:900px){
  .fmt-story .st-in{grid-template-columns:1fr;gap:28px}
  .fmt-story .st-copy{max-width:none;padding-left:0;padding-right:0}
  .fmt-story .st-fig{order:-1;height:auto;width:100%;min-height:0;margin-left:0}
  .fmt-story .st-sec.is-flat .st-copy{position:static}
  .fmt-story .st-dots{display:none}
  .fmt-story .st-word{font-size:clamp(34px,9vw,52px)}
}

/* ---------- the drying yard: a full bleed band with a caption, the breath before the studio ---------- */
.fmt-story .yard{padding:clamp(32px,4vw,56px) 0 var(--sec-sm)}
.fmt-story .yard .band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fmt-story .yard .band>picture{max-height:min(64vh,720px)}
.fmt-story .yard .figcap{gap:4px;margin-top:clamp(16px,2vw,24px)}
.fmt-story .yard .figcap .k{margin:0 0 6px}
.fmt-story .yard .figcap b{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.015em;line-height:1.1;color:var(--ink)}
.fmt-story .yard .figcap span{color:var(--text-2);font-size:15px}
/* the yard, close: three square frames under the band */
.fmt-story .yard-strip{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,22px)}
.fmt-story .yard-cell{margin:0;border:1px solid var(--line);background:var(--bg-2)}
/* the dip, this page's signature reveal: the frame is cut off at the bottom and the cut travels up on the dip ease,
   a waterline riding on it, once, when shared.js's observer sets .is-in. Only under .fmt-reveal, so reduced motion
   and no js see the frames at rest. The shared fade and lift are stepped aside for these three. */
.fmt-story .dip-line{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--b-accent-tint) 22%,#EFEAE1 50%,var(--b-accent-tint) 78%,transparent) left bottom/100% 2px no-repeat,
  linear-gradient(0deg,rgba(143,166,230,.3),transparent) left bottom/100% 26px no-repeat}
.fmt-reveal .fmt-story .yard-cell[data-reveal]{filter:none;transform:none}
/* the cut sits on the picture, not on the observed li: Chromium's observer reads a target clipped to nothing by its
   own clip-path as never intersecting, so the frame stays whole and the photograph rises into it */
/* .is-loaded is format.js saying the photograph has arrived: the cut waits for it, so it never rises on an empty frame */
.fmt-reveal .fmt-story .yard-cell[data-reveal]>picture{clip-path:inset(100% 0 0 0);transition:clip-path 1.15s cubic-bezier(.32,0,.12,1)}
.fmt-reveal .fmt-story .yard-cell[data-reveal].is-in.is-loaded>picture{clip-path:inset(0 0 0 0)}
.fmt-reveal .fmt-story .yard-cell .dip-line{opacity:.95;transform:translateY(0);transition:transform 1.15s cubic-bezier(.32,0,.12,1),opacity .45s var(--ease) 1.05s}
.fmt-reveal .fmt-story .yard-cell.is-in.is-loaded .dip-line{transform:translateY(-100%);opacity:0}
.fmt-reveal .fmt-story .yard-cell:nth-child(2)>picture{transition-delay:.16s}
.fmt-reveal .fmt-story .yard-cell:nth-child(2) .dip-line{transition-delay:.16s,1.21s}
.fmt-reveal .fmt-story .yard-cell:nth-child(3)>picture{transition-delay:.32s}
.fmt-reveal .fmt-story .yard-cell:nth-child(3) .dip-line{transition-delay:.32s,1.37s}

/* ---------- studio: the vats under a scrim, the assistant on them, the people beside ---------- */
.fmt-story #studio{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fmt-story #studio::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--weave)}
.fmt-story .studio-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center}
.fmt-story .studio-tile{width:100%;border:1px solid var(--line)}
.fmt-story .studio-tile .tile-scrim{background:var(--b-scrim-grad)}
.fmt-story .studio-copy .k{margin-bottom:12px}
.fmt-story .studio-copy .h2{margin-bottom:16px}
.fmt-story .studio-copy>p{color:var(--text-2);max-width:44ch;margin:0 0 clamp(20px,2.4vw,28px);font-size:clamp(16px,1.2vw,18px);line-height:1.5}
/* the hands, between what the founder says and who is here */
.fmt-story .studio-hands{aspect-ratio:3/2;width:100%;max-width:440px;margin:0 0 clamp(20px,2.4vw,28px);border:1px solid var(--line)}
.fmt-story .people li{padding:13px 0;gap:20px}
.fmt-story .people b{font-weight:500;color:var(--ink)}
.fmt-story .people span{text-align:right}
.fmt-story .studio-copy .micro{margin-top:18px;max-width:44ch}
@media (max-width:900px){.fmt-story .studio-grid{grid-template-columns:1fr}}

/* the assistant card on indigo: dark glass, paper hairline, paper text; the reply is a paper bubble */
.fmt-story .chat,.fmt-story .chat.on-dark{--text-2:var(--b-text2);--text-3:var(--b-text2);--line:var(--b-glass-line);--b-surface:rgba(239,234,225,.06);
  background:var(--b-glass);border-color:var(--b-glass-line);color:var(--ink);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.fmt-story .chat .bub.in{background:rgba(239,234,225,.06);border-color:var(--b-glass-line);color:var(--ink)}
.fmt-story .chat .bub.out,.fmt-story .chat.on-dark .bub.out{background:var(--ink);color:var(--b-ground)}
.fmt-story .chat .typing i{background:var(--b-text2)}

/* ---------- questions: a hairline table, the heading sticks on the left, the pairs read on the right ---------- */
.fmt-story .qa-sec{border-top:0}
.fmt-story .qa-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start}
.fmt-story .qa-head{position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h) + 24px)}
.fmt-story .qa-head .h2{margin-bottom:0;max-width:14ch}
/* the swatch, under the heading: the question people bring in their hand */
.fmt-story .qa-tile{width:100%;max-width:380px;margin-top:clamp(20px,2.4vw,32px);border:1px solid var(--line)}
.fmt-story .rows.qa li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 32px;align-items:start;padding:20px 0;
  transition:border-color .3s var(--ease)}
.fmt-story .rows.qa li:hover{border-top-color:var(--b-accent-tint)}
.fmt-story .rows.qa li b{font-weight:500;color:var(--ink);font-size:17px;line-height:1.4}
.fmt-story .rows.qa li span{color:var(--text-2);font-size:15px;line-height:1.5;max-width:52ch}
@media (max-width:900px){
  .fmt-story .qa-grid{grid-template-columns:1fr;gap:24px}
  .fmt-story .qa-head{position:static}
}
@media (max-width:620px){.fmt-story .rows.qa li{grid-template-columns:1fr}}

/* ---------- contact: a panel on the lifted indigo with a bounded photograph beside the copy ---------- */
.fmt-story .cta{padding-top:var(--sec-sm)}
.fmt-story .cta-panel{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px);background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-tile)}
.fmt-story .cta-panel>.shader{z-index:0;opacity:.32}
.fmt-story .cta-panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--b-ground2) 88%,transparent),color-mix(in srgb,var(--b-ground) 82%,transparent)),var(--weave)}
.fmt-story .cta-panel>*:not(.shader){position:relative;z-index:2}
.fmt-story .cta-copy{display:grid;justify-items:start;max-width:52ch}
.fmt-story .cta-copy .k{margin-bottom:12px;color:var(--b-text2)}
.fmt-story .cta-copy .h2{margin-bottom:16px;max-width:16ch}
.fmt-story .cta-copy>p{color:var(--text-2);margin:0 0 clamp(22px,2.6vw,32px);max-width:46ch;font-size:clamp(16px,1.2vw,18px);line-height:1.5}
.fmt-story .cta-copy .micro{margin-top:16px}
.fmt-story .cta-tile{width:100%;border:1px solid var(--line)}
@media (max-width:900px){
  .fmt-story .cta-panel{grid-template-columns:1fr;padding:clamp(20px,4vw,32px)}
  .fmt-story .cta-tile{order:-1}
}

/* ---------- footer: on the ground above a hairline ---------- */
.fmt-story .f-foot{padding:56px 0 80px}
.fmt-story .f-foot .f-brand{font-size:17px}
.fmt-story .f-foot p{color:var(--text-3)}

/* ---------- reduced motion: the same page, standing still. The hero window stays a still frame, the air is the house ground, nothing sways and nothing dips. ---------- */
@media (prefers-reduced-motion:reduce){
  .fmt-story .st-step,.fmt-story .st-btn,.fmt-story .st-dot i,.fmt-story .st-shot img,
  .fmt-story .rows.qa li,.fmt-story .rows.qa li b,.fmt-story .people li,.fmt-story .f-tabs a::after,
  .fmt-story main .pill,.fmt-story .f-nav .pill,
  .fmt-story .yard-cell img,.fmt-story .studio-hands img,.fmt-story .qa-tile img,.fmt-story .cta-tile img,
  .fmt-story .yard-cell,.fmt-story .dip-line{transition:none}
  .fmt-story .st-hem{animation:none}
  .fmt-story .sd-video{display:none}
  .fmt-story .w-blue{transition:none}
  .fmt-story main .pill:hover,.fmt-story .f-nav .pill:hover,.fmt-story .rows.qa li:hover b,
  .fmt-story .yard-cell:hover img,.fmt-story .studio-hands:hover img,.fmt-story .qa-tile:hover img,.fmt-story .cta-tile:hover img{transform:none}
  .fmt-story .yard-cell>picture{clip-path:none;transition:none}
  .fmt-story .dip-line{display:none}
}