/* The WORK page on tokens. Every number and colour lives once, in tokens.json, under a name in
   one of three tiers; tokens.css is generated from it and imported here. This file only says
   where each named value stands. Desktop values are in the frame unit (100vw / 1568, the hero's
   frame); the phone (max-width 767) is the same tokens at their phone step. Two faces, one paper,
   one ink, one dark, one fire. */
@import url(tokens.css);
@font-face{font-family:Aspekta;src:url(../../fonts/AspektaVF.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"Cormorant Garamond";src:url(../../fonts/CormorantGaramond-latin.woff2) format("woff2");font-weight:300 700;font-display:block}
@font-face{font-family:"Cormorant Garamond";src:url(../../fonts/CormorantGaramond-Italic-latin.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:block}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html.lenis,html.lenis body{height:auto}
body{background:var(--ground-dark);color:var(--text-on-dark);font-family:var(--font-body);font-weight:var(--body-default-weight);-webkit-font-smoothing:antialiased;font-synthesis:none}
a{color:inherit;text-decoration:none}

/* ============ 1  the hero: round 2, develop-2 (stills/2026-09-06-hero-round-2-motion) ============ */
.hero{position:relative;height:var(--screen);overflow:hidden}
.hero>img{position:absolute;display:block;left:var(--hero-photo-left);top:var(--hero-photo-top);width:var(--hero-photo-width);height:100%;object-fit:cover;object-position:50% 50%}
.scrim{position:absolute;inset:0;opacity:var(--scrim-alpha);
  background:radial-gradient(var(--scrim-width) var(--scrim-height) at var(--scrim-x) calc(50% + var(--scrim-y)),rgb(from var(--ground-dark) r g b / var(--scrim-core-alpha)),rgb(from var(--ground-dark) r g b / var(--alpha-0)))}
.mark{position:absolute;left:var(--page-margin);top:var(--hero-mark-top);font-family:var(--wordmark-font);font-weight:var(--wordmark-weight);font-size:var(--wordmark-size);line-height:var(--wordmark-line-height);white-space:nowrap}
.rule{position:absolute;left:var(--page-margin);top:var(--hero-rule-top);width:calc(var(--wordmark-rule-ratio) * var(--wordmark-size));height:var(--hairline);background:var(--hairline-on-dark)}
/* --- the menu control -----------------------------------------------------------
   The mechanic is dogstudio's, rebuilt 1:1 in scenes/dogstudio-hamburger and carried
   here unchanged: the three lines are NOT laid apart, they are stacked on one line and
   only displaced by transform, so the hamburger is made of the displacement. Pressed,
   the box turns -180deg counter-clockwise while the outer two slide home and rotate
   into the X — one curve, one transition, no keyframes — and the middle one only fades,
   in half the time. The X is symmetric under a half turn, so the spin exists only while
   it moves. The six numbers are the burger-* tokens (his choice of 2026-09-07, once
   variant 3); the local --w --s --off --mid --right --mid-y are the construction. */
.burger{
  --w:var(--burger-length);--s:var(--burger-weight);--off:var(--burger-offset);
  --mid:var(--burger-middle);--right:var(--burger-right);--mid-y:var(--burger-anchor);
  position:absolute;right:var(--right);top:calc(var(--mid-y) - var(--off) - var(--s)/2);
  width:var(--w);height:calc(2*var(--off) + var(--s));
  display:block;padding:0;border:0;background:none;cursor:pointer;z-index:var(--layer-header);
  -webkit-tap-highlight-color:transparent}
.burger .bars{position:absolute;inset:0;display:block;
  transition:transform var(--menu-turn-duration) var(--menu-turn-easing)}
.burger i{position:absolute;top:50%;left:0;right:0;height:var(--s);margin-top:calc(var(--s)/-2);
  background:var(--hairline-on-dark);border-radius:var(--burger-end);   /* rounded ends, his word of 2026-09-07 */
  transition:transform var(--menu-turn-duration) var(--menu-turn-easing),opacity calc(var(--menu-turn-duration)/2) var(--menu-turn-easing)}
/* Rest and end are DIFFERENT transform functions on purpose — translateY on one side,
   rotate on the other. CSS cannot interpolate function to function, so it decomposes
   both to matrices: the translation runs to zero while the angle runs up, on the one
   shared curve. That is the fold: each line slides to the middle as it turns. The
   angles are the X's geometry, not values: a half turn, and the two diagonals. */
.burger .b1{transform:translateY(calc(var(--off) * -1))}
.burger .b3{transform:translateY(var(--off))}
.burger .b2{transform-origin:100% 50%;transform:scaleX(var(--mid))}
.burger.is-active .bars{transform:rotate(-180deg)}
.burger.is-active .b1{transform:rotate(45deg)}
.burger.is-active .b3{transform:rotate(-45deg)}
.burger.is-active .b2{opacity:0}   /* it keeps its length the whole way out */
/* dogstudio's own hover, his word of 2026-09-07: the short middle line grows to the full length under the pointer */
.burger:hover .b2{transform:scaleX(1)}

/* The language switch (#17): the other language's two letters, dressed as All work (the small
   size, the dim colour, brighter under the pointer), standing left of the burger, its letters on the wordmark's
   baseline as the burger's lowest line is. It is a link to the other page, never a script. It is
   placed by top alone: the entrance writes its own transform on it, and a centring transform
   here made it jump when the entrance let go (his phone, 2026-09-18). */
.lang-switch{position:absolute;right:calc(var(--burger-right) + var(--burger-length) + var(--lang-switch-gap) - var(--tap-pad));padding:var(--tap-pad);top:calc(var(--lang-switch-anchor) - var(--eyebrow-size) * var(--eyebrow-line-height) / 2 - var(--tap-pad));
  z-index:var(--layer-header);font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);line-height:var(--eyebrow-line-height);letter-spacing:var(--eyebrow-tracking);   /* the eyebrow's own style, his word of 2026-09-18: identical with ARBEIT */
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha));text-decoration:none;transition:color var(--hover-line-duration) var(--hover-line-easing);-webkit-tap-highlight-color:transparent}
.lang-switch:hover,.lang-switch:focus-visible{color:var(--text-on-dark)}
/* Reduced motion: the control switches states, it does not turn. */
@media (prefers-reduced-motion:reduce){
  .burger .bars,.burger i{transition:none}
}
.words{position:absolute;left:var(--page-margin);bottom:calc(50vh - var(--hero-words-mid));width:var(--hero-words-width)}
.eyebrow{font-size:var(--eyebrow-size);font-weight:var(--eyebrow-weight);letter-spacing:var(--eyebrow-tracking);line-height:var(--eyebrow-line-height);margin-bottom:var(--hero-eyebrow-gap)}
.disp{font-family:var(--hero-display-font);font-weight:var(--hero-display-weight);font-size:var(--hero-display-size);line-height:var(--hero-display-line-height);letter-spacing:var(--hero-display-tracking);margin-bottom:var(--hero-headline-gap)}
.body{font-size:var(--body-default-size);font-weight:var(--body-default-weight);line-height:var(--body-default-line-height)}
br.p{display:none}
@media (max-width:767px){
  .hero>img{height:auto;object-fit:unset}
  .scrim{background:linear-gradient(to bottom,rgb(from var(--ground-dark) r g b / var(--alpha-0)) var(--scrim-phone-stop-1),rgb(from var(--ground-dark) r g b / var(--scrim-phone-alpha-1)) var(--scrim-phone-stop-2),rgb(from var(--ground-dark) r g b / var(--scrim-phone-alpha-2)) 100%),radial-gradient(var(--scrim-phone-pool),rgb(from var(--ground-dark) r g b / var(--scrim-core-alpha)),rgb(from var(--ground-dark) r g b / var(--alpha-0)))}
  .words{right:var(--page-margin);bottom:var(--hero-words-floor);width:auto}
  .body{max-width:var(--phone-text-width)}
  br.d{display:none}
  br.p{display:inline}
}
/* the headline's segments and the line each sits on; the engine thaws a line at a time */
.disp .s{--line:0}
.disp .s3,.disp .s4{--line:1}
@media (max-width:767px){
  .disp .s2,.disp .s3{--line:1}
  .disp .s4{--line:2}
}
html.pending .hero{visibility:hidden}

/* ============ 1b  the menu overlay: hellomonday's reveal, in this skin ============ */
/* The mechanic is hellomonday.com's, decoded 1:1 in scenes/hellomonday-menu and carried
   here: a curtain of sixteen points on a canvas grows out of a 10px sliver at the right
   edge, each point on its own beat, smoothed catmull-rom, and the words ride in from
   half a viewport away. What is this site's, not theirs: the dark is the hero's and
   not black; the four words are Cormorant Garamond Light; the small row is Aspekta 250;
   and the wordmark with its hairline is the anchor that already stands — it never enters,
   which is why their sliding logo has no counterpart here. Their right-edge bulge and the
   x that rides on it are their furniture, not ours: the control is the one from round 3
   and it keeps turning. */
.menu{position:fixed;inset:0;z-index:var(--layer-menu);background:transparent}
.menu[hidden]{display:none}
/* the curtain lands, and the ground under it goes solid so no seam is left at the edge */
.menu.is-solid{background:var(--ground-dark)}
.menu-curtain{position:absolute;inset:0;z-index:var(--layer-menu-curtain);display:block;pointer-events:none}
/* the header stays lit while the menu passes under it — dogstudio's own picture, and
   the reason the control keeps its alignment to the wordmark in the open state */
.mark,.rule{z-index:var(--layer-header)}
.menu-inner{position:absolute;left:var(--page-margin);top:50%;transform:translateY(-50%);z-index:var(--layer-menu-words)}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{font-family:var(--menu-word-font);font-weight:var(--menu-word-weight);font-size:var(--menu-word-size);
  line-height:var(--menu-word-line-height);letter-spacing:var(--menu-word-tracking);color:var(--text-on-dark);align-self:flex-start;
  will-change:transform,opacity}
/* the small row: the mail and the three legal doors, the ones the footer already carries.
   It arrives at the menu-small-alpha — hellomonday's own value for the quiet row. */
.menu-small{display:flex;gap:var(--menu-small-gap);margin-top:var(--menu-small-air)}
.menu-small a{position:relative;font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);
  color:var(--text-on-dark);padding-bottom:var(--menu-small-line-gap);will-change:transform,opacity}
.menu-small a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hairline);
  background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--hover-line-duration) var(--hover-line-easing)}
.menu-small a:hover::after{transform:scaleX(1)}
@media (max-width:767px){
  .menu-inner{right:var(--page-margin)}
  .menu-small{display:block}
  /* each link carries half the stack's gap above and below itself, so the whole row of air is the thumb's */
  .menu-small{margin-bottom:calc(var(--menu-small-stack-gap) / -2)}
  .menu-small a{display:block;width:max-content;padding:calc(var(--menu-small-stack-gap) / 2) var(--tap-pad) calc(var(--menu-small-stack-gap) / 2) 0;margin-top:0}
  .menu-small a:first-child{margin-top:calc(var(--menu-small-stack-gap) / -2)}
  .menu-small a::after{right:var(--tap-pad);bottom:calc(var(--menu-small-stack-gap) / 2 - var(--menu-small-line-gap))}
}
/* the scroll stands still while the menu is over the page */
html.menu-open,html.menu-open body{overflow:hidden}
/* Reduced motion: the overlay appears at once. Nothing is drawn on the canvas, the
   ground is solid from the first frame, and the words stand where they land. */
@media (prefers-reduced-motion:reduce){
  .menu-curtain{display:none}
  .menu-small a::after{transition:none}
}

/* ============ 2  the four windows: 08, the margin, the air, the door hover ============ */
/* the paper ends here: the run-in below carries the helix's dark */
.windows{background:var(--ground-paper);color:var(--text-on-paper);position:relative;
  padding:var(--section-air) var(--page-margin)}
/* the name's leading is the text column's, so its first line sits on the text's first
   line: an alignment, carried by the window-name text style */
.windows h2{font-family:var(--window-name-font);font-weight:var(--window-name-weight);line-height:var(--window-name-line-height);letter-spacing:var(--window-name-tracking)}
.windows p{font-weight:var(--body-default-weight)}
.w{position:relative;display:grid;grid-template-columns:var(--window-name-column) var(--window-text-column);padding:var(--window-air-top) 0 var(--window-air-bottom);border-top:var(--hairline) solid var(--hairline-on-paper)}
.w:first-child{border-top:0;padding-top:var(--window-first-air-top)}
.w h2{font-size:var(--window-name-size);padding-top:var(--window-name-lift);margin-bottom:var(--window-name-gap);justify-self:start;align-self:start;position:relative;
  transition:transform var(--hover-line-duration) var(--hover-line-easing)}
.w p{font-size:var(--body-default-size);line-height:var(--body-default-line-height)}
/* the transplant, round 2: the name steps right, a fire line draws under it. No flood. */
.w h2::after{content:"";position:absolute;left:0;right:0;bottom:calc(-1 * var(--window-line-drop));height:var(--fire-line);background:var(--accent-fire);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--hover-line-duration) var(--hover-line-easing)}
.w:hover h2,.w:focus-within h2{transform:translateX(var(--pointer-step))}
.w:hover h2::after,.w:focus-within h2::after{transform:scaleX(1)}
@media (max-width:767px){
  .w{display:block}
  .w h2{display:inline-block}
  .w p{max-width:var(--phone-text-width)}
}

/* ============ 3  the client stories: listening until the gold shows ============ */
/* 3.2 transplanted whole: the stage pins for one screen while the track runs; the column
   holds the sentence being written at the reading line and slides up as the next one
   starts. The dark is the helix's, so the scene's pin lands on a colour already there. */
.stories{background:var(--ground-dark);color:var(--text-on-dark);position:relative}
.stories-track{position:relative;height:var(--stories-track)}
.stories-stage{position:sticky;top:0;height:var(--screen);overflow:hidden}
.stories-lines{position:relative;width:100%;height:100%}
.stories-col{position:absolute;left:var(--page-margin);right:var(--page-margin);top:0;will-change:transform}
.story{margin-bottom:var(--story-gap)}
.story:last-child{margin-bottom:0}
.story:nth-child(2){padding-left:var(--story-indent-step)}              /* a test, his word: the second story one step in */
.story:nth-child(3){padding-left:calc(2 * var(--story-indent-step))}    /* and the third two */
.story-line{font-weight:var(--story-line-weight);font-size:var(--story-line-size);line-height:var(--story-line-line-height);letter-spacing:var(--story-line-tracking);
  max-width:var(--story-width);opacity:0;will-change:opacity}
.story-line .wd{opacity:0;will-change:opacity,filter}
/* the gold word, his combination of 2026-09-08: when the sentence is whole nothing is
   added to it - the rest of the sentence falls to grey and a hair out of focus, and the
   word keeps the white and gains weight by a hairline stroke on the glyph, so no metric
   moves. The body face, his word of 2026-09-08: two faces in one line did not hold. */
.story-line .gd{color:var(--text-on-dark);-webkit-text-stroke:calc(var(--g,0) * var(--gold-stroke)) var(--text-on-dark);paint-order:stroke fill}
.story-name{margin-top:var(--client-name-gap);font-size:var(--small-size);font-weight:var(--small-weight);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);
  color:rgb(from var(--text-on-dark) r g b / var(--client-name-alpha));opacity:0}
.story-caret{position:absolute;width:var(--hairline);background:var(--hairline-on-dark);opacity:0}
/* the phone, his word of 2026-09-18: no pin. The sentences stand in the page's flow and write
   themselves with the scroll as they come up the screen, and unwrite on the way back (the engine's phone path). The air above the first is
   the air under section 2's last paragraph: the section's own and the window's. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .stories-track{height:auto}
  /* the foot is short, so the last name has only just left the screen when the helix pins and the
     eye is led straight on (his word of 2026-09-18: "zu wenig geführt") */
  .stories-stage{position:static;height:auto;overflow:visible;padding:calc(var(--section-air) + var(--window-air-bottom)) var(--page-margin) var(--window-air-bottom)}
  .stories-lines{height:auto}
  .stories-col{position:static;transform:none}
  .story{margin-bottom:var(--story-gap-still)}
}
/* reduced motion: the three transcripts stand whole, the gold already shown */
@media (prefers-reduced-motion: reduce){
  .stories-track{height:auto}
  /* the column is static here, so the page margin it had as an absolute box is given back as padding */
  .stories-stage{position:static;height:auto;overflow:visible;padding:var(--section-air) var(--page-margin)}
  .stories-lines{height:auto}
  .stories-col{position:static;transform:none}
  .story{margin-bottom:var(--story-gap-still)}
  .story-line{opacity:1}
  .story-line .wd{opacity:1 !important;filter:none !important}
  .story-line .gd{-webkit-text-stroke:var(--gold-stroke) var(--text-on-dark)}
  .story-line .wd:not(.gd){opacity:var(--story-rest-alpha) !important}
  .story-name{opacity:1}
  .story-caret{display:none}
}

/* ============ 4  selected work: the helix in this site's skin ============ */
/* The stage is the dark of the hero; the stripes close it in paper, and the about stands on paper. */
/* the stage of section 3 keeps its lower third empty; the helix rides up over it, so the
   stories are off the screen the moment the scene begins, his word of 2026-09-07 evening */
html.helix-live .scene{margin-top:calc(-1 * var(--helix-pull-up))}
/* the phone's stories are not pinned and keep no empty third, so there is nothing to ride up over */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){html.helix-live .scene{margin-top:0}}
.scene{position:relative;z-index:var(--layer-scene);height:var(--screen);background:var(--ground-dark);color:var(--text-on-dark);overflow:hidden}
.scene-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:var(--layer-scene-canvas)}
.scene-inner{position:relative;height:100%;padding-inline:var(--page-margin)}
.titles{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;overflow:visible;white-space:nowrap;
  pointer-events:none;user-select:none;display:flex;flex-direction:column}
.marquee{font-family:var(--marquee-font);font-weight:var(--marquee-weight);font-size:var(--marquee-size);line-height:var(--marquee-line-height);letter-spacing:var(--marquee-tracking);will-change:transform}
.top-word{align-self:flex-start;translate:-100% 0}
.bottom-word{align-self:flex-end;translate:100% 0}
.subtitle{font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);text-align:center;margin:var(--subtitle-air) auto;white-space:normal}
.subtitle br{display:none}
@media (max-width:767px){
  .subtitle br{display:inline}
}
.stripes{position:absolute;inset:0;z-index:var(--layer-stripes);pointer-events:none;display:flex;flex-direction:column;width:100%;height:100%}
.stripe{flex:1;width:100%;background:var(--ground-paper);transform:scaleY(0);transform-origin:bottom;will-change:transform}
.stripe + .stripe{margin-top:calc(-1 * var(--stripe-overlap))}
.word,.char{display:inline-block;will-change:filter,opacity}

/* the plain list: the six as links on the paper; the reduced-motion path, hidden while the helix lives */
.plain{position:relative;z-index:var(--layer-plain);background:var(--ground-paper);color:var(--text-on-paper);min-height:100%;padding:var(--section-air) var(--page-margin)}
html.helix-live .plain{display:none}
html.helix-live .scene{height:var(--screen)}
html:not(.helix-live) .scene{height:auto}
html:not(.helix-live) .scene-canvas,html:not(.helix-live) .titles,html:not(.helix-live) .stripes{display:none}
.plain-h{font-family:var(--plain-heading-font);font-weight:var(--plain-heading-weight);font-size:var(--plain-heading-size);line-height:var(--plain-heading-line-height)}
.plain-p{font-size:var(--body-default-size);line-height:var(--body-default-line-height);margin-top:var(--plain-line-gap)}
.plain-grid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--plain-grid-row-gap) var(--plain-grid-column-gap);margin-top:var(--plain-grid-air)}
.plain-grid img{display:block;width:100%;aspect-ratio:1 / var(--helix-card-aspect);object-fit:cover;border-radius:var(--card-corner)}
.plain-grid span{display:block;margin-top:var(--card-name-gap);font-size:var(--small-size);font-weight:var(--small-weight);letter-spacing:var(--small-tracking)}
@media (max-width:767px){
  .plain-grid{grid-template-columns:repeat(2,1fr)}
}

/* ============ 5  about: I burn for people with a vision ============ */
/* His old site's fire section as the blueprint, translated: the headline in the display
   face at the heavier weight, "vision" italic and in the fire, the one accent on the paper;
   the paragraphs in the body face; much air. This block carries the pull-up of round 2,
   so the stripes lay the paper it stands on. */
.about{background:var(--ground-paper);color:var(--text-on-paper);position:relative;z-index:var(--layer-paper-after-helix);overflow:hidden;
  padding:var(--about-air-top) var(--about-indent) var(--about-air-bottom)}
html.helix-live .about{margin-top:calc(-1 * var(--about-pull-up))}
/* the cloud, 2026-09-08 afternoon: the aurora of explore round 2, answer 6, in the page's fire
   instead of dogstudio's blue - broad soft bands of warm light through the upper right, none
   with an edge of its own, a fifth of the screen down so the stripes above cut nothing. */
.about::before{content:"";position:absolute;pointer-events:none;z-index:var(--layer-about-cloud);
  right:var(--aurora-right);top:var(--aurora-top);width:var(--aurora-width);height:var(--aurora-height);
  background:
    repeating-linear-gradient(var(--aurora-band-1-angle),oklch(from var(--aurora-band-1-color) l c h / var(--aurora-band-1-alpha)) var(--aurora-band-1-lit),oklch(from var(--aurora-band-1-color) l c h / var(--alpha-0)) var(--aurora-band-1-dark)),
    repeating-linear-gradient(var(--aurora-band-2-angle),oklch(from var(--aurora-band-2-color) l c h / var(--aurora-band-2-alpha)) var(--aurora-band-2-lit),oklch(from var(--aurora-band-2-color) l c h / var(--alpha-0)) var(--aurora-band-2-dark)),
    repeating-linear-gradient(var(--aurora-band-3-angle),oklch(from var(--aurora-band-3-color) l c h / var(--aurora-band-3-alpha)) var(--aurora-band-3-lit),oklch(from var(--aurora-band-3-color) l c h / var(--alpha-0)) var(--aurora-band-3-dark)),
    radial-gradient(var(--aurora-pool),oklch(from var(--accent-fire) l c h / var(--aurora-pool-alpha)) 0%,oklch(from var(--accent-fire) l c h / var(--alpha-0)) var(--aurora-pool-end));
  filter:blur(var(--aurora-blur));
  -webkit-mask-image:radial-gradient(var(--aurora-mask),var(--mask-show) 0%,rgb(from var(--mask-show) r g b / var(--aurora-mask-mid-alpha)) var(--aurora-mask-mid),transparent 100%),linear-gradient(to bottom,transparent 0,var(--mask-show) var(--aurora-mask-top));
  mask-image:radial-gradient(var(--aurora-mask),var(--mask-show) 0%,rgb(from var(--mask-show) r g b / var(--aurora-mask-mid-alpha)) var(--aurora-mask-mid),transparent 100%),linear-gradient(to bottom,transparent 0,var(--mask-show) var(--aurora-mask-top));
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* the words stand alone, left-aligned, the headline in two balanced lines (his word of
   2026-09-18). The laughing portrait beside them is a variant for judging (?photo=1): the shape of
   the Brand Alchemy page he held against this one, built without his word and so not the state. */
.about .say{position:relative;z-index:var(--layer-about-words);max-width:var(--about-width)}
.about h2{text-wrap:balance}
.about-photo{display:none;margin:0}
.about-photo img{display:block;width:100%;aspect-ratio:var(--about-photo-aspect);object-fit:cover;border-radius:var(--card-corner)}
html[data-photo="1"] .about .say{display:grid;grid-template-columns:minmax(0,1fr) var(--about-photo-width);column-gap:var(--about-photo-gap);
  grid-template-rows:auto 1fr;grid-template-areas:"head photo" "text photo"}
html[data-photo="1"] .about h2{grid-area:head}
html[data-photo="1"] .about .say-v{grid-area:text}
html[data-photo="1"] .about-photo{display:block;grid-area:photo;align-self:center}
@media (max-width:767px){
  /* one column: the headline, the portrait, the words */
  html[data-photo="1"] .about .say{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "photo" "text";row-gap:var(--about-photo-gap)}
}
.about h2{font-family:var(--about-headline-font);font-weight:var(--about-headline-weight);font-size:var(--about-headline-size);line-height:var(--about-headline-line-height);letter-spacing:var(--about-headline-tracking);
  max-width:var(--about-headline-width);margin-bottom:var(--about-headline-gap)}
@media (max-width:767px){html[data-photo="1"] .about h2{margin-bottom:0}}
.about h2 em{font-style:var(--about-accent-style);font-weight:var(--about-accent-weight);color:var(--accent-fire)}
.about p{font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);max-width:var(--about-text-width)}
.about p + p{margin-top:var(--about-paragraph-gap)}
/* the variants for judging: one stands, by ?about= (1 without it) */
.about .say-v{display:none}
.about .say-v[data-v="1"]{display:block}
html[data-about="2"] .about .say-v{display:none}html[data-about="2"] .about .say-v[data-v="2"]{display:block}
html[data-about="3"] .about .say-v{display:none}html[data-about="3"] .about .say-v[data-v="3"]{display:block}
html[data-about="4"] .about .say-v{display:none}html[data-about="4"] .about .say-v[data-v="4"]{display:block}
.about .say > *,.about .say-v > *{will-change:filter,opacity,transform}
@media (prefers-reduced-motion: reduce){.about .say > *{will-change:auto}}

/* ============ 6  the closing: the last screen is the photograph ============ */
/* Still 04 of closing round 3. The photograph pins for one screen; the words, the three
   doors and the footer stand on its dark half. No paper after the about, no floor. */
.closing{height:var(--closing-track);background:var(--ground-dark);position:relative;z-index:var(--layer-paper-after-helix)}
.closing-stage{position:sticky;top:0;height:var(--screen);overflow:hidden;background:var(--ground-dark)}
/* the picture as frame 13 crops it: wider than the screen, so his head stands past the middle */
.closing-stage>img{position:absolute;left:var(--closing-photo-left);top:0;width:var(--closing-photo-width);height:var(--closing-photo-height);object-fit:cover;object-position:var(--closing-photo-focus)}
/* no gradient over the picture: as in his frame, a radial pool of the dark whose centre lies
   off the screen to the left, darkening the left a little without being seen */
.closing .veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(var(--veil-pool),rgb(from var(--ground-dark) r g b / var(--veil-core-alpha)) 0%,rgb(from var(--ground-dark) r g b / var(--veil-mid-alpha)) var(--veil-stop-mid),rgb(from var(--ground-dark) r g b / var(--alpha-0)) var(--veil-stop-end))}
/* the words where frame 13 puts them: lower left, the heading in the display face, the text under it */
.on{position:absolute;left:var(--page-margin);right:var(--page-margin);top:0;bottom:0;color:var(--text-on-dark);
  display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:var(--closing-words-floor)}
.on .lead{font-family:var(--closing-headline-font);font-weight:var(--closing-headline-weight);font-size:var(--closing-headline-size);line-height:var(--closing-headline-line-height);
  margin-bottom:var(--closing-headline-gap)}   /* no measure: the heading stands on one line, his word of 2026-09-08 */
.on .lead-text{font-size:var(--body-default-size);line-height:var(--body-default-line-height);font-weight:var(--body-default-weight);max-width:var(--closing-text-width);
  margin-bottom:var(--closing-text-gap)}
/* the doors: three lines of text, each with a hairline that leaves under the pointer */
.doors{display:grid;gap:var(--doors-gap);justify-items:start}
.door{position:relative;display:inline-block;color:var(--text-on-dark);font-weight:var(--body-default-weight);white-space:nowrap}
.door{font-size:var(--body-default-size);line-height:var(--body-default-line-height)}
/* the line stands under the words; the hover is explore round 1, 3-3: the GROUP answers -
   the two you are not pointing at fall back and a breath out of focus, the one under the
   pointer keeps the white and steps right with its line. The opacity lives on the words,
   because the closing's engine owns the link's own opacity while the picture is pinned. */
.door .t{position:relative;display:inline-block;padding-bottom:var(--door-line-gap);
  transition:opacity var(--hover-line-duration) var(--hover-line-easing),filter var(--hover-line-duration) var(--hover-line-easing),transform var(--hover-line-duration) var(--hover-line-easing)}
.door .t::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--hairline);background:rgb(from var(--hairline-on-dark) r g b / var(--door-line-alpha))}
.doors:has(.door:hover) .door .t{opacity:var(--doors-dim-alpha);filter:blur(var(--doors-dim-blur))}   /* the group answers only when a door is pointed at, not its gaps */
.doors:has(.door:hover) .door:hover .t,.doors .door:focus-visible .t{opacity:1;filter:none;transform:translateX(var(--pointer-step))}   /* weighs more than the dimming rule above */
/* the footer on the picture: left under the doors, where the room is dark, his word of
   2026-09-08: no pool, nothing laid over the picture; the three legal doors and the copyright
   under them, muted */
.on-foot{position:absolute;left:var(--page-margin);bottom:var(--footnote-floor);text-align:left}
.on-foot p,.on-foot a{font-size:var(--small-size);line-height:var(--small-line-height);letter-spacing:var(--small-tracking);color:rgb(from var(--text-on-dark) r g b / var(--footnote-alpha))}
.on-foot nav{display:flex;gap:var(--footnote-gap);justify-content:flex-start}
.on-foot p{margin-top:var(--copyright-gap)}
.on-foot a{transition:color var(--hover-line-duration) var(--hover-line-easing)}
.on-foot a:hover{color:rgb(from var(--text-on-dark) r g b / var(--footnote-hover-alpha))}
html.coupled .closing .anim{opacity:0}
@media (max-width:767px){
  /* the phone: the picture fills the screen as on the desktop (his word of 2026-09-18), and the
     same radial pool, here rising from the lower left, carries the words. The footer stands one
     text gap under the doors: the words' floor is the footer's height and that gap above its own. */
  .on{padding-bottom:calc(var(--footnote-floor) + 2 * var(--small-size) * var(--small-line-height) + var(--copyright-gap) + var(--closing-text-gap))}
  .door{white-space:normal}
  .on-foot{right:var(--page-margin)}
}
@media (prefers-reduced-motion: reduce){
  .closing{height:auto}
  .closing-stage{position:relative;height:var(--screen)}
}

/* ============ reduced motion: a full path, nothing moves ============ */
@media (prefers-reduced-motion: reduce){
  .w h2,.w h2::after,.on-foot a,.door .t{transition:none}
  .doors:has(.door:hover) .door .t{filter:none}
}