/* Case pages in the model look (13 October 2026).

   A case page is one room of the building seen at close quarters, with the long text beside it.
   Type, colour and the small parts (.eng, .title, .lead, .go, .mark, .grain) come from brand.css;
   this file adds only the page's layout and the parts a case needs: the opening, the screens that
   hold a film, a recording or a capture, the chapters, the diagrams and the way out.

   Wide screens (1200 and up): a slim chapter list on the left that stays while you read, then two
   equal columns. Every chapter is set the same way: its number and title in the first column, with
   its pulled line or its diagram under the title when it has one, and its text in the second.
   Below 1200 the list becomes a row of marks along the bottom, and everything runs in one column. */
.case{
  --read:clamp(17px,1.08vw,27.5px);        /* running text */
  --rail:11vw;
  --gut:5vw;
  --ring:clamp(12px,.74vw,19px);           /* a node in a diagram */
  --rowgap:clamp(72px,6.4vw,164px);        /* between chapters */
  --bezel:clamp(5px,.42vw,11px);           /* the card edge round a screen */
}
html{scroll-behavior:smooth;scroll-padding-top:5vh}
.skip{position:absolute;left:var(--pad);top:10px;z-index:40;padding:10px 14px;background:var(--card);border:1px solid var(--gold);transform:translateY(-300%)}
.skip:focus{transform:none}
.case em{font-style:normal}

/* top: the name, and the three cases */
.top{position:absolute;left:0;right:0;top:0;height:3.6vw;min-height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);z-index:6}
.top nav{display:flex;gap:2.4vw}
.top nav a{color:var(--soft);transition:color .3s}
.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.top .menu,.top nav a.home{display:none}

/* THE OPENING: the room on the right, the title on the left, the facts on a plate along the bottom */
.open{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto}
.open-stage{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:0}
.open-room{position:absolute;inset:0 0 0 28vw;margin:0;overflow:hidden}
.open-room img{width:100%;height:100%;object-fit:cover;object-position:var(--room-at,50% 46%);animation:lamp 1.8s ease both}
.open-room::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(3,3,4,.82) 8%,rgba(3,3,4,0) 30%),
  linear-gradient(0deg,var(--bg) 0%,var(--bg) 6%,rgba(3,3,4,.5) 13%,rgba(3,3,4,0) 25%),
  linear-gradient(180deg,rgba(3,3,4,.86) 0%,rgba(3,3,4,.5) 7%,rgba(3,3,4,0) 15%)}
@keyframes lamp{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* the lights come up, then the words arrive one after another */
.open-text>*{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.open-text>:nth-child(1){animation-delay:.25s}
.open-text>:nth-child(2){animation-delay:.38s}
.open-text>:nth-child(3){animation-delay:.56s}
.open-text>:nth-child(4){animation-delay:.72s}
.open-facts{animation:lamp 1.2s .9s ease both}
/* The words sit at the foot of the stage. The space above them is only what keeps the label clear of the
   name at the top (3.6vw): with more, the voice page's opening ran 63px past a 2560 x 1271 screen. */
.open-text{position:relative;z-index:1;padding:5.2vw var(--pad) 3.2vw;max-width:calc(37vw + var(--pad))}
.open-text h1{font-size:clamp(40px,4.1vw,106px);margin-top:1.1vw;text-wrap:balance}
.open-text h1.short{font-size:clamp(46px,6.2vw,159px)}
/* a heading set in three chosen lines (the longest is 8.9em, the column 9.2em at this size) */
@media(min-width:801px){.open-text h1.three{font-size:clamp(36px,3.6vw,93px)}}
.keep{white-space:nowrap}
.open-text .lead{margin-top:1.5vw;text-wrap:pretty}
.go-row{display:flex;flex-wrap:wrap;gap:1.1vw;margin-top:2.1vw}
.open-facts{position:relative;z-index:1;display:grid;grid-template-columns:var(--cols);column-gap:3.4vw;margin:0 var(--pad);padding:1.4vw 0 2.8vw;border-top:1px solid var(--line)}
.open-facts dt{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--gold)}
.open-facts dd{margin-top:.7vw;color:var(--ink);font-size:clamp(15px,.96vw,25px);line-height:1.44;text-wrap:pretty;max-width:34em}

/* THE BODY: chapter list, then the page */
.body{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:4vw;padding:var(--rowgap) var(--pad) 0}
.flow{min-width:0}
.rail{position:sticky;top:10vh;align-self:start}
.rail ol{list-style:none;padding:0;display:grid;gap:.66vw}
.rail li{position:relative}
.rail ol a{display:grid;grid-template-columns:2.3em minmax(0,1fr);font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:var(--small);line-height:1.32;color:var(--dim);transition:color .3s}
.rail ol a b{font-weight:400}
.rail ol a:hover{color:var(--ink)}
.rail ol a[aria-current]{color:var(--ink)}
.rail ol a[aria-current] b{color:var(--gold)}
.rail ol a[aria-current]::before{content:"";position:absolute;left:-1.7vw;top:.56em;width:1.1vw;height:2px;background:var(--gold)}
.rail-foot{display:grid;gap:.66vw;margin-top:1.7vw;padding-top:1.2vw;border-top:1px solid var(--line)}
.rail-foot a{transition:color .3s}
.rail-foot a:hover{color:var(--ink)}
.rail-foot i{font-style:normal;color:var(--gold);margin-left:.5em}

/* A PLATE: something to look at or listen to, with its caption beside it */
.plate{display:grid;grid-template-columns:minmax(0,var(--words,19vw)) minmax(0,1fr);column-gap:3vw;align-items:start}
.plate+.plate{margin-top:clamp(56px,4.6vw,118px)}
.plate-cap{margin-top:.9vw;font-size:clamp(18px,1.2vw,31px);line-height:1.32;font-weight:300;color:var(--ink);text-wrap:pretty}
.plate-words .title{margin-top:1vw;text-wrap:balance}
.plate-note{margin-top:1.3vw;color:var(--soft);font-size:var(--read);line-height:1.56;text-wrap:pretty}
.plate-small{margin-top:1.6vw;color:var(--dim);font-size:clamp(13px,.8vw,20px);line-height:1.5;max-width:30em}
.more{display:inline-block;margin-top:1.5vw;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--soft);padding-bottom:.45vw;border-bottom:1px solid var(--line2);transition:color .3s,border-color .3s}
.more:hover,.more:focus-visible{color:var(--ink);border-color:var(--gold)}
.more i{font-style:normal;color:var(--gold);margin-left:.6em}
/* a screen in the model: black card, a hairline, the picture inside */
.screen{display:block;position:relative;margin:0;background:var(--card);border:1px solid var(--line);padding:var(--bezel)}
.screen video,.screen>img,.screen>a>img{width:100%;height:auto;background:#000}
/* the film's own controls, on screens with a mouse (a phone keeps its own player): a ring to start it,
   and under the picture a brass line that turns gold as it plays */
.film-pic{position:relative}
.film-start{position:absolute;left:50%;top:50%;width:clamp(64px,5.4vw,138px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--gold);background:rgba(3,3,4,.62);color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:opacity .4s,background .3s}
.film-start:hover,.film-start:focus-visible{background:rgba(3,3,4,.82)}
.film-start svg{width:30%;height:30%;fill:currentColor;margin-left:6%}
.film.playing .film-start{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility 0s .4s}   /* hidden: no keyboard stop while the film plays */
.film-on video{cursor:pointer}
.film-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;column-gap:clamp(14px,1.5vw,38px);padding:calc(var(--bezel) + .35vw) .5vw .3vw}
.film-bar button{border:0;background:none;padding:.5em 0;cursor:pointer;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);line-height:1.4;color:var(--soft);transition:color .3s}
.film-bar button:hover,.film-bar button:focus-visible{color:var(--ink)}
.film-play{min-width:4.4em;text-align:left}
/* sound: the word, then both states, the live one in gold */
.film-sound b{font-weight:400;margin-left:.75em;color:var(--dim);opacity:.6;transition:color .3s,opacity .3s}
.film-sound[aria-pressed="true"] .on,.film-sound[aria-pressed="false"] .off{color:var(--gold);opacity:1}
.film-track{position:relative;height:clamp(22px,1.6vw,40px);cursor:pointer}
.film-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--brass);opacity:.6}
.film-track i{position:absolute;left:0;top:calc(50% - 1px);height:2px;width:calc(var(--at,0)*100%);background:var(--gold)}
.film-track b{position:absolute;top:50%;left:calc(var(--at,0)*100%);width:var(--ring);height:var(--ring);margin:calc(var(--ring)/-2) 0 0 calc(var(--ring)/-2);border:1.5px solid var(--gold);border-radius:50%;background:var(--card)}
.film-time{font-variant-numeric:tabular-nums;white-space:nowrap}
.screen video{aspect-ratio:16/9}
.screen figcaption,.screen-plate{display:flex;justify-content:space-between;gap:2em;padding:calc(var(--bezel) + .35vw) .3vw .25vw}
.screen figcaption.cap{color:var(--dim);font-size:clamp(14px,.86vw,22px);line-height:1.5}
a.screen{transition:border-color .3s}
a.screen:hover,a.screen:focus-visible{border-color:var(--gold)}
.plate-square{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut)}
.plate-square .screen-square{max-width:none}
.plate-square .plate-words{max-width:42em}
/* the product running: one screen large, the rest side by side; each opens at full size */
.plate+.shots,.shots+.plate{margin-top:clamp(64px,5.4vw,138px)}
.shots-head{margin-bottom:1.6vw}
.shots-line{margin-top:.7vw;color:var(--soft);font-size:var(--read);line-height:1.5}
.shot{margin:0;min-width:0}
.shot figcaption{display:block;margin-top:1.1vw}
.shot-top{display:flex;align-items:baseline;justify-content:space-between;gap:2em}
.shot-top .more{margin-top:0;padding-bottom:.3vw;white-space:nowrap}
.shot-cap{display:block;margin-top:.7vw;font-size:clamp(16px,1.04vw,26.5px);line-height:1.4;color:var(--soft);text-wrap:pretty;max-width:34em}
.shot-lead .shot-cap{font-size:clamp(18px,1.2vw,31px);line-height:1.32;font-weight:300;color:var(--ink);max-width:40em}
.shots-rest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gut);margin-top:3.4vw}   /* the chapters' two columns */
/* The screens of the cases added on 24 Oct: side by side at one height (each cell grows by its picture's width over
   its height), none taller than most of the screen, so a phone's screen sits at a phone's size */
.shots-row{display:flex;align-items:flex-start;gap:var(--gut)}
.plate-capture .screen[style*="--ar"]{max-width:calc(var(--ar) * 78vh)}   /* a page of a report stands at a screen's height */
.shots-cell{flex:var(--ar) 1 0;min-width:0;max-width:calc(var(--ar) * 74vh)}
/* the page's older capture: last, smaller, under its own rule; its date and its words directly beside it */
.shot-dated{display:grid;grid-template-columns:minmax(0,27vw) minmax(0,1fr);column-gap:3vw;align-items:center;margin-top:3.6vw;padding-top:1.5vw;border-top:1px solid var(--line)}
.shot-dated figcaption{margin-top:0;max-width:30em}
.shot-dated .shot-top{justify-content:flex-start;flex-direction:column;gap:0}
.shot-dated .shot-cap{margin-top:.8vw}
.shot-dated .more{order:3;margin-top:1.4vw;align-self:flex-start}
.shot-dated figcaption{display:flex;flex-direction:column}
.shot-dated .shot-top{display:contents}
/* the stills under a film: each jumps to its moment */
.stills{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:var(--bezel);margin-top:var(--bezel)}
.stills button,.stills a{position:relative;display:block;padding:calc(var(--bezel)*.5);border:1px solid var(--line);background:var(--card);cursor:pointer;transition:border-color .3s}
.stills img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.74;transition:opacity .3s}
.stills button:hover,.stills button:focus-visible,.stills a:hover,.stills a:focus-visible{border-color:var(--gold)}
.stills button:hover img,.stills button:focus-visible img,.stills a:hover img,.stills a:focus-visible img{opacity:1}
.stills span{position:absolute;right:calc(var(--bezel)*.5);bottom:calc(var(--bezel)*.5);padding:.3em .55em .22em .7em;background:rgba(3,3,4,.84);font-family:Sofia,sans-serif;letter-spacing:.16em;font-size:var(--small);line-height:1;color:var(--ink)}
/* a recording: the call drawn as it sounds; the played part turns gold */
.tape{background:var(--card);border:1px solid var(--line);padding:clamp(14px,1.3vw,34px) clamp(16px,1.6vw,40px)}
.tape audio{display:block;width:100%;color-scheme:dark}
.tape-ui{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:clamp(14px,1.6vw,40px)}
.tape-ui[hidden]{display:none}
.tape-play{width:clamp(46px,3.3vw,84px);aspect-ratio:1;border-radius:50%;border:1px solid var(--brass);background:none;color:var(--gold);cursor:pointer;display:grid;place-items:center;transition:border-color .3s,background .3s}
.tape-play:hover,.tape-play:focus-visible{border-color:var(--gold);background:rgba(230,207,154,.08)}
.tape-play svg{width:34%;height:34%;fill:currentColor}
.tape-play .pause,.tape.playing .tape-play .play{display:none}
.tape.playing .tape-play .pause{display:block}
.tape-wave{position:relative;height:clamp(54px,4.6vw,118px);cursor:pointer}
.tape-wave canvas{position:absolute;inset:0;width:100%;height:100%}
.tape-time{min-width:6.2em;text-align:right;font-variant-numeric:tabular-nums}

/* a second look into the model, between the film and the text: no frame, its edges lost in the dark */
.view{position:relative;margin:clamp(56px,4.6vw,118px) 0 0}
.view img{width:100%;height:auto;aspect-ratio:3;object-fit:cover;object-position:var(--room-at,50% 46%)}
.view::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(3,3,4,0) 13%,rgba(3,3,4,0) 87%,var(--bg) 100%),
  linear-gradient(0deg,var(--bg) 0%,rgba(3,3,4,0) 24%),
  linear-gradient(180deg,var(--bg) 0%,rgba(3,3,4,0) 18%)}
.view figcaption{position:absolute;left:0;bottom:.4vw;z-index:1}
.view+.row{margin-top:calc(var(--rowgap)*.8)}

/* THE CHAPTERS */
.plate+.row,.plate+.band,.plate+.solo,.shots+.row{margin-top:calc(var(--rowgap)*1.1)}
.row+.plate,.solo+.plate,.band+.plate{margin-top:var(--rowgap)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);align-items:start;margin-top:var(--rowgap)}
.row-one{border-top:1px solid var(--line);padding-top:1.5vw}
.ch-side{position:sticky;top:calc(5vh + 1.5vw);min-width:0}
.ch-no{display:block;font-size:clamp(12.5px,.86vw,22px)}
.ch-title{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.075em;font-size:clamp(25px,2.1vw,54px);line-height:1.08;color:var(--ink);margin-top:.7vw;text-wrap:balance;max-width:16em}
/* On the wide layout the title has a column to itself, so it is set large enough to carry it: about the
   size of a pulled line. The longest title on the three pages runs to two lines at this size (11em column). */
@media(min-width:1200px){
  .ch-side .ch-title{font-size:clamp(38px,3.2vw,82px);letter-spacing:.05em;line-height:1;margin-top:.9vw;max-width:none}
  .ch-head .ch-no{font-size:clamp(14px,1.2vw,31px)}
  /* a short pulled line under such a title is set at the title's size, not above it */
  .ch-side .pull:not(.pull-long){font-size:clamp(38px,3.2vw,82px)}
}
.ch-text{min-width:0}
.ch-text p{font-size:var(--read);line-height:1.64;color:var(--soft);max-width:33em;text-wrap:pretty}
.ch-text p+p{margin-top:1.1em}
/* A chapter's list (the cases added on 24 Oct): set as the running text is, each item's label in the ink and a short
   brass rule where a bullet would be */
.ch-list{list-style:none;margin:0;padding:0;max-width:33em}
.ch-text p+.ch-list,.ch-list+p,.ch-list+.ch-list{margin-top:1.1em}
.ch-list li{position:relative;padding-left:1.6em;font-size:var(--read);line-height:1.64;color:var(--soft);text-wrap:pretty}
.ch-list li+li{margin-top:.75em}
.ch-list li::before{content:"";position:absolute;left:0;top:.82em;width:.85em;height:1px;background:var(--gold)}
.ch-list b{font-weight:500;color:var(--ink)}
/* a line pulled out of a chapter: large, in the heading face, under a short brass rod */
.pull{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:.96;color:var(--ink);font-size:clamp(34px,3.5vw,90px);margin-top:2.6vw;text-wrap:balance;max-width:11em}
.pull::before{content:"";display:block;width:3.4vw;min-width:40px;height:1px;background:var(--brass);margin-bottom:1.5vw}
.pull-long{font-size:clamp(25px,2.25vw,58px);line-height:1.02;max-width:15em}
.ch-text article+article{margin-top:3.2vw;padding-top:1.5vw;border-top:1px solid var(--line)}
.ch-text article .ch-title{margin:.55vw 0 1.5vw}
.side-note{margin-top:1.4vw;color:var(--soft);font-size:var(--read);line-height:1.6;max-width:33em;text-wrap:pretty}
.side-title{margin-top:1vw;text-wrap:balance}
.solo{margin-top:var(--rowgap);border-top:1px solid var(--line);padding-top:1.5vw}
.solo .dia{margin-top:4vw}
.row-choices{margin-top:clamp(56px,4.6vw,118px)}

/* DIAGRAMS: brass lines, small brass rings, the node that matters in white gold */
.dia{margin:2.8vw 0 0}
.dia-cap{margin-top:1.6vw;color:var(--dim);font-size:clamp(14px,.86vw,22px);line-height:1.5;max-width:36em;text-wrap:pretty}
.dia-head{margin-bottom:1.7vw}
.node{display:block;flex:none;width:var(--ring);height:var(--ring);border:1.5px solid var(--brass);border-radius:50%;background:var(--bg)}
.focal>.node,.focal .node{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 30%,var(--bg) 34%);box-shadow:0 0 0 calc(var(--ring)*.3) var(--bg),0 0 0 calc(var(--ring)*.3 + 1px) var(--gold)}
.dia-name{font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.17em;font-size:var(--small);line-height:1.3;color:var(--soft)}
.focal .dia-name{color:var(--gold)}
/* nodes on a line */
.line{--air:calc(var(--ring)*.9);list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.line li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:1vw;padding:0 .5vw}
.line li:not(:last-child)::before{content:"";position:absolute;top:calc(var(--ring)/2);left:calc(50% + var(--ring)/2 + var(--air));width:calc(100% - var(--ring) - 2*var(--air));height:1px;background:var(--brass)}
.line li:not(:last-child)::after,.line.two-way li:not(:last-child) .node::after{content:"";position:absolute;width:7px;height:7px;border-top:1px solid var(--brass);border-right:1px solid var(--brass)}
.line li:not(:last-child)::after{top:calc(var(--ring)/2 - 3.5px);left:calc(150% - var(--ring)/2 - var(--air) - 8px);transform:rotate(45deg)}
.line .node{position:relative}
.line.two-way li:not(:last-child) .node::after{left:calc(100% + var(--air));top:calc(50% - 4px);transform:rotate(-135deg)}
.dia-words{display:flex;flex-direction:column;align-items:center;gap:.4vw}
/* inside a chapter's column the line hangs from the left edge: each ring at the left of its cell, its
   name under it, the line running to the next ring */
@media(min-width:801px){
  .ch-side .line li{align-items:flex-start;text-align:left;padding:0 1vw 0 0}
  .ch-side .line li:not(:last-child)::before{left:calc(var(--ring) + var(--air));width:calc(100% - var(--ring) - 2*var(--air))}
  .ch-side .line li:not(:last-child)::after{left:calc(100% - var(--air) - 8px)}
  .ch-side .line .dia-words{align-items:flex-start}
}
.dia-step{display:block;color:var(--dim)}
.dia-big{font-weight:400;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(17px,1.25vw,32px);line-height:1.16;color:var(--ink)}
.focal .dia-big{color:var(--gold)}
.dia-detail{color:var(--soft);font-size:clamp(13.5px,.86vw,22px);line-height:1.4}
.dia-tag{color:var(--gold)}
/* nodes round a ring */
/* The box is the drawing's own shape (labels are placed by it) and hangs from the left edge. Its width
   keeps step with the labels' size (--small), so the left-hand labels start at the edge at every width. */
.ringbox{position:relative;width:min(100%,clamp(415px,26.7vw,686px));aspect-ratio:102/82}
.ringbox svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ringbox circle,.ringbox path{fill:none;stroke:var(--brass);stroke-width:1.25;vector-effect:non-scaling-stroke}
.ringbox .dot{fill:var(--bg);stroke-width:1.5}
.ringbox .dia-name{position:absolute;width:max-content;max-width:27%}
.ringbox .at-top{transform:translate(-50%,-100%);text-align:center;max-width:44%}
.ringbox .at-right{transform:translate(0,-50%);text-align:left}
.ringbox .at-left{transform:translate(-100%,-50%);text-align:right}
.ringbox .at-centre{left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--gold);max-width:30%}
/* one workspace, three layers */
.space{border:1px solid var(--brass)}
.space-plate{display:flex;justify-content:space-between;gap:2em;padding:.8vw 1.2vw;border-bottom:1px solid var(--brass)}
.tier{position:relative;padding:1.3vw 1.2vw 1.5vw}
.tier+.tier{border-top:1px solid var(--line)}
.tier+.tier::before{content:"";position:absolute;left:calc(1.2vw + var(--ring)/2 - .5px);top:-.9vw;height:1.8vw;width:1px;background:var(--brass)}
.tier+.tier::after{content:"";position:absolute;left:calc(1.2vw + var(--ring)/2 - 4px);top:calc(.9vw - 8px);width:7px;height:7px;border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);transform:rotate(45deg)}
.tier-label{color:var(--ink);font-size:clamp(15px,.96vw,25px);line-height:1.35;padding-left:calc(var(--ring) + .9vw)}
.tier ul{list-style:none;padding:0;margin-top:1.1vw;display:grid;grid-template-columns:repeat(var(--want,4),minmax(0,1fr));gap:.9vw 1.2vw}
.tier li{display:grid;grid-template-columns:var(--ring) minmax(0,1fr);column-gap:.9vw;align-items:start}
.tier li .node{margin-top:.12em}
.tier.focal .dia-name{color:var(--ink)}
.tier.focal .tier-label{color:var(--gold)}
.tier.focal .node{box-shadow:none}
/* a timeline: dated steps on a brass line */
.dated{list-style:none;padding:0;margin-top:2vw;display:grid}
.dated li{position:relative;display:grid;grid-template-columns:var(--ring) minmax(0,1fr);column-gap:1vw;padding-bottom:1.3vw}
.dated li:not(:last-child)::before{content:"";position:absolute;left:calc(var(--ring)/2 - .5px);top:calc(var(--ring) + 5px);bottom:-1px;width:1px;background:var(--brass)}
.dated .node{margin-top:.1em}
.dated li:last-child .node{border-color:var(--gold);background:radial-gradient(circle,var(--gold) 0 30%,var(--bg) 34%)}
.dated p{color:var(--ink);font-size:clamp(15px,.96vw,25px);line-height:1.4;margin-top:.25vw}

/* evidence: the instruction beside the frame it produced */
.band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gut);align-items:start;margin-top:calc(var(--rowgap)*.6)}
.band-cap{color:var(--soft);font-size:var(--read);line-height:1.56;max-width:30em;text-wrap:pretty}
.band blockquote{margin-top:2vw;padding-left:1.7vw;border-left:1px solid var(--brass);font-size:clamp(20px,1.5vw,39px);line-height:1.34;font-weight:300;color:var(--ink);text-wrap:pretty;max-width:30em}

/* the Briefing page's explorer: three choices, one shown at a time */
.tabs{display:grid;margin-top:1.9vw;border-top:1px solid var(--line)}
.tabs button{display:flex;align-items:center;gap:1em;text-align:left;padding:.95vw 0;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:clamp(13px,.86vw,22px);color:var(--dim);transition:color .3s}
.tabs button::before{content:"";width:1.1vw;min-width:12px;height:2px;background:var(--line2);transition:background .3s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::before{background:var(--gold)}
.choice{background:var(--card);border:1px solid var(--line);padding:2.2vw 2.4vw 2.4vw;min-height:23vw}
.choice-kicker{display:block}
.choice h4{font-family:Sofia,sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.03em;line-height:.94;font-size:clamp(32px,3.3vw,84px);margin-top:1.4vw}
.choice h4 em{color:var(--gold)}
.choice p{margin-top:1.5vw;color:var(--soft);font-size:var(--read);line-height:1.56;max-width:30em;min-height:4.8em}
.choice-trace{display:flex;flex-wrap:wrap;align-items:center;gap:.6em 1em;margin-top:1.8vw;padding-top:1.3vw;border-top:1px solid var(--line);font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:var(--small);color:var(--dim)}
.choice-trace strong{font-weight:400;color:var(--gold)}
.choice-trace i{font-style:normal;color:var(--brass)}

/* the closing, and the sources under the Briefing page's result */
.closing{margin-top:var(--rowgap);padding-top:1.5vw;border-top:1px solid var(--line)}
.closing p{font-size:clamp(22px,1.95vw,50px);line-height:1.26;font-weight:300;color:var(--ink);max-width:31em;text-wrap:pretty}
.closing p+p{margin-top:.7em}
.closing .ch-head+p{margin-top:1.6vw}
.sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3.4vw;margin-top:4vw}
.sources div{border-top:1px solid var(--line);padding-top:1.2vw}
.sources p{margin-top:.7vw;color:var(--soft);font-size:clamp(15px,.96vw,25px);line-height:1.44}
.sources h3{font-weight:400;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--gold);line-height:1.4}
.ends{display:flex;flex-wrap:wrap;gap:1.1vw;margin-top:3.4vw}

/* THE WAY OUT: the next room, and the whole building */
.exits{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:var(--bezel);margin:var(--rowgap) var(--pad) 0}
.exit{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(300px,27vw,700px);overflow:hidden;background:var(--card);border:1px solid var(--line);transition:border-color .4s}
.exit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--room-at,50% 46%);opacity:.72;transition:opacity .5s,transform 1.4s ease}
.exit::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,3,4,.94) 0%,rgba(3,3,4,.55) 34%,rgba(3,3,4,0) 66%)}
.exit:hover,.exit:focus-visible{border-color:var(--gold)}
.exit:hover img,.exit:focus-visible img{opacity:1;transform:scale(1.025)}
.exit-words{position:relative;z-index:1;padding:2vw 2.2vw}
.exit-words .title{display:block;margin-top:.7vw}
.exit-words .title i{font-style:normal;color:var(--gold);margin-left:.3em}
.foot{display:flex;align-items:center;justify-content:space-between;gap:2em;padding:3vw var(--pad) 3.4vw}
.foot a.eng{transition:color .3s}
.foot a.eng:hover{color:var(--ink)}

/* Each part of the page rises into place as it is scrolled to. Only where the browser can tie the
   movement to the scroll itself (so nothing is ever left hidden); elsewhere the page stands still. */
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .plate,.shots-head,.shot,.view,.row,.solo,.band,.closing,.exits{animation:arrive linear both;animation-timeline:view();animation-range:entry 0px entry 240px}
  }
}
@keyframes arrive{from{opacity:.12;transform:translateY(22px)}to{opacity:1;transform:none}}

/* a product screen opened at full size, in the page */
.full{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:3.2vh 2vw 2.4vh;border:0;background:rgba(3,3,4,.96);color:var(--ink);overflow:auto}
.full::backdrop{background:rgba(3,3,4,.9)}
.full[open]{display:grid;grid-template-rows:auto minmax(0,1fr);row-gap:1.4vh;animation:lamp .35s ease both}
.full-bar{display:flex;align-items:baseline;justify-content:space-between;gap:2em}
.full-close{border:0;background:none;cursor:pointer;font-family:Sofia,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:var(--small);color:var(--soft);padding:.4em 0 .4em 1em}
.full-close:hover,.full-close:focus-visible{color:var(--ink)}
.full-close i{font-style:normal;font-family:Hanken,system-ui,sans-serif;letter-spacing:0;font-size:1.5em;line-height:0;color:var(--gold);margin-left:.5em;position:relative;top:.12em}
.full-view{position:relative;min-height:0}
.full-view img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto;border:1px solid var(--line)}

/* Six cases, the films, the field reports and Work with me don't fit beside the name below 1700 (at 1440 the menu ran
   into it, 24 Oct), so there the menu folds into its Menu button as it does below 1200, and the top behaves as it does
   there; the page itself keeps its wide layout */
@media(min-width:1200px) and (max-width:1699px){
  html{scroll-padding-top:72px}
  .top{position:fixed;height:58px;min-height:0;border-bottom:1px solid transparent;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s}
  .top.bar{background:rgba(3,3,4,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .top.away{transform:translateY(-101%)}
  .top:focus-within{transform:none}
  .top nav{display:none}
  .top .menu{display:block;margin-right:-12px;padding:14px 12px;background:none;border:0;color:var(--ink);cursor:pointer}
  .top.menu-on{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}
  .top.menu-on nav{display:grid;position:fixed;left:0;right:0;top:58px;padding:4px var(--pad) 20px;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .top.menu-on nav a{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--soft)}
  .top.menu-on nav a:first-child{border-top:0}
  .top.menu-on nav a.home{display:block}
  .top.menu-on nav a[aria-current]{color:var(--ink)}
  .top.menu-on nav a em{color:var(--gold);margin-right:.5em}
  .top.menu-on::after{content:"";position:fixed;inset:58px 0 0;z-index:-1;background:rgba(3,3,4,.62)}
}

/* the row of marks along the bottom (below 1200): one for each chapter, the current one in gold */
.key{display:none}

@media(max-width:1199px){
  .case{--rowgap:clamp(64px,8vw,96px)}
  /* The top stays within reach on a long page (the voice case is 21 phone screens): it slips away while
     the page is read downwards and comes back as soon as it is scrolled up, as Safari's own bar does, and
     its Menu opens the cases and the films (14 Oct, the phone pass) */
  html{scroll-padding-top:72px}
  .top{position:fixed;height:58px;min-height:0;border-bottom:1px solid transparent;transition:transform .45s cubic-bezier(.2,.7,.2,1),background-color .3s,border-color .3s}
  .top.bar{background:rgba(3,3,4,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .top.away{transform:translateY(-101%)}
  .top:focus-within{transform:none}
  .top nav{display:none}
  .top .menu{display:block;margin-right:-12px;padding:14px 12px;background:none;border:0;color:var(--ink);cursor:pointer}
  .top.menu-on{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:var(--line)}   /* a blurred top would hold the panel and shade below inside its own 58px */
  .top.menu-on nav{display:grid;position:fixed;left:0;right:0;top:58px;padding:4px var(--pad) 20px;gap:0;background:var(--bg);border-bottom:1px solid var(--line)}
  .top.menu-on nav a{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--soft)}
  .top.menu-on nav a:first-child{border-top:0}
  .top.menu-on nav a[aria-current]{color:var(--ink)}
  .top.menu-on nav a em{color:var(--gold);margin-right:.5em}
  .top.menu-on::after{content:"";position:fixed;inset:58px 0 0;z-index:-1;background:rgba(3,3,4,.62)}
  .row+.shots{margin-top:var(--rowgap)}   /* below 1200 a chapter's diagram comes after its words, just above the product's label */
  .body{display:block}
  .rail{display:none}
  .key{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:center;gap:14px;padding:37px var(--pad) 11px;background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 52%,rgba(3,3,4,.86) 70%,rgba(3,3,4,0) 100%);pointer-events:none}
  /* each mark's link is 28px tall and as wide as its share of the row (26px with 13 marks at 390), so a
     thumb has at least 24 x 24 to land on; the mark drawn inside it is the size it was */
  .key ol{list-style:none;display:flex;gap:0;padding:0;margin-inline:-2px;flex:1;max-width:520px;pointer-events:auto}
  .key li{flex:1}
  .key a{display:block;height:28px;position:relative}
  .key a::after{content:"";position:absolute;left:2px;right:2px;top:13px;height:2px;background:var(--line2);transition:background .3s}
  .key a[aria-current]::after{background:var(--gold);height:4px;top:12px}
  .key .where{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
  .foot{padding-bottom:74px}
  .open-room{left:22vw}
  .open-text{max-width:calc(52vw + var(--pad))}
  .open-facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .plate{grid-template-columns:minmax(0,1fr)}
  .plate-words{max-width:36em;margin-bottom:22px}
  .shots-head{margin-bottom:20px}.shot figcaption{margin-top:14px}
  .shot-dated{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:28px;margin-top:44px;padding-top:16px}
  .plate-square{grid-template-columns:minmax(0,1fr)}
  .plate-square .screen-square{max-width:min(100%,560px)}
  .row,.band{grid-template-columns:minmax(0,1fr)}
  .row-one{display:flex;flex-direction:column;align-items:stretch}
  .ch-side{display:contents}
  .ch-head{order:1}.side-title{order:1}.side-note{order:2}.pull{order:2}.tabs{order:3}.ch-text{order:3;margin-top:22px}.dated{order:3}.dia{order:4}
  .pull{margin:22px 0 0}
  .band>*+*{margin-top:28px}
  .ringbox{width:min(100%,415px)}
  .sources{grid-template-columns:minmax(0,1fr);row-gap:22px}
  .choice{min-height:0}
}
/* Tablets and small windows (801 to 1199): the room above, the words under it, as on a phone. Side by
   side at these widths the words lay over the lit part of the picture (the film stage's white backdrop). */
@media(min-width:801px) and (max-width:1199px){
  .open{display:block;min-height:0}
  .open-stage{display:block;min-height:0}
  .open-room{position:relative;inset:auto;height:min(56vw,58svh)}
  .open-room::after{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 9%,rgba(3,3,4,.7) 18%,rgba(3,3,4,0) 40%),linear-gradient(180deg,rgba(3,3,4,.8) 0%,rgba(3,3,4,0) 22%)}
  .open-text{max-width:none;padding:0 var(--pad) 3.4vw;margin-top:-2.4vw}
  .open-text h1,.open-text h1.three{font-size:clamp(48px,6.2vw,74px)}
  .open-text h1.short{font-size:clamp(64px,9vw,108px)}
  .open-text .lead{max-width:30em}
}
/* a tablet held sideways (1024 x 768): a shorter room and a heading sized by the height too, so the
   opening's two buttons sit inside the first screen and not under the row of marks */
@media(min-width:801px) and (max-width:1199px) and (min-aspect-ratio:1/1){
  .open-room{height:min(56vw,42svh)}
  .open-text h1,.open-text h1.three{font-size:clamp(44px,min(6.2vw,8.2svh),74px)}
  .open-text h1.short{font-size:clamp(56px,min(9vw,11svh),108px)}
}
@media(max-width:800px){
  .case{--read:16.5px;--ring:12px;--bezel:5px;--rowgap:68px}
  .open{display:block;min-height:0}
  .open-stage{display:block;min-height:0}
  .open-room{position:relative;inset:auto;height:86vw;max-height:60svh}
  /* the label under the picture overlaps its last 26px: the picture is fully dark there before the label starts */
  .open-room::after{background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 11%,rgba(3,3,4,.7) 20%,rgba(3,3,4,0) 42%),linear-gradient(180deg,rgba(3,3,4,.8) 0%,rgba(3,3,4,0) 22%)}
  br.wide{display:none}
  .open-text{max-width:none;padding:0 var(--pad) 30px;margin-top:-26px}
  .open-text h1{font-size:10.6vw;margin-top:10px}
  .open-text h1.short{font-size:15vw}
  .solo{padding-top:14px}.solo .dia{margin-top:34px}
  .open-text .lead{margin-top:14px}
  .go-row{gap:8px;margin-top:20px}
  .open-facts{grid-template-columns:minmax(0,1fr);padding:0 0 8px;row-gap:0;border-top:0}
  .open-facts>div{display:grid;grid-template-columns:5.6em minmax(0,1fr);column-gap:14px;padding:13px 0;border-top:1px solid var(--line)}
  .open-facts dt{padding-top:.22em}
  .open-facts dd{margin-top:0;font-size:14.5px}
  .plate+.plate,.plate+.shots,.shots+.plate{margin-top:56px}
  /* the room cut close to its lit part, so its label sits under the screen and seats, not in the dark floor */
  .view{margin:44px calc(-1*var(--pad)) 0}.view img{aspect-ratio:2;object-position:50% 30%}.view figcaption{left:var(--pad);bottom:4px}
  .view+.row{margin-top:36px}
  .shots-line{margin-top:8px}
  .shot-cap{font-size:16.5px;margin-top:8px}
  .shot-lead .shot-cap{font-size:19px}
  .shots-rest{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:40px}
  .shots-row{flex-direction:column;gap:40px}.shots-cell{flex:none;width:100%;max-width:calc(var(--ar) * 72svh)}
  .shot-top .more{padding-bottom:5px}
  .shot-dated{grid-template-columns:minmax(0,1fr);margin-top:40px;padding-top:14px}
  .shot-dated .screen{width:100%}   /* at 62% a phone showed the June 2025 screen too small to read */
  .shot-dated figcaption{margin-top:14px}
  .shot-dated .more{margin-top:14px}
  .plate-cap{font-size:19px;margin-top:8px}
  .plate-note{margin-top:14px}.plate-small{margin-top:16px;font-size:13px}
  .plate-words .title{margin-top:10px}
  .more{margin-top:16px;padding-bottom:6px}
  .wide-screen{margin-inline:calc(-1*var(--pad))}
  .wide-screen .screen{border-inline:0;padding-inline:0}
  .wide-screen .stills{padding-inline:var(--bezel)}
  .wide-screen figcaption{padding-inline:var(--pad)}
  .stills{grid-template-columns:repeat(3,minmax(0,1fr))}
  .stills button,.stills a{padding:0;border:0;background:none}
  .stills img{opacity:.86}
  .stills span{position:static;display:block;background:none;padding:6px 1px 8px;text-align:left;color:var(--dim);font-size:11.5px}
  .tape{padding:14px}
  .tape-ui{grid-template-columns:auto minmax(0,1fr);row-gap:8px}
  .tape-time{grid-column:2;text-align:left;min-width:0}
  .row-one,.closing{padding-top:14px}
  .ch-no{font-size:12px}.ch-title{font-size:27px;margin-top:6px}
  .ch-text article+article{margin-top:34px;padding-top:14px}
  .ch-text article .ch-title{margin:6px 0 16px}
  .pull{font-size:11.2vw}
  .pull-long{font-size:8vw}
  .pull::before{margin-bottom:14px}
  .side-note{margin-top:14px}.side-title{margin-top:10px}
  .dia{margin-top:30px}
  .dia-cap{font-size:14px;margin-top:16px}
  .dia-head{margin-bottom:18px}
  .line{grid-template-columns:minmax(0,1fr)}
  .line li{flex-direction:row;align-items:flex-start;text-align:left;gap:14px;padding:0 0 26px}
  .line li:last-child{padding-bottom:0}
  .line li:not(:last-child)::before{left:calc(var(--ring)/2 - .5px);top:calc(var(--ring) + 6px);bottom:6px;width:1px;height:auto}
  .line li:not(:last-child)::after{left:calc(var(--ring)/2 - 4px);top:auto;bottom:7px;transform:rotate(135deg)}
  .line.two-way li:not(:last-child) .node::after{left:calc(50% - 4px);top:calc(100% + 8px);transform:rotate(-45deg)}
  .line .dia-words{margin-top:-.2em;align-items:flex-start;gap:4px}
  .dia-big{font-size:18px}.dia-detail{font-size:14px}
  .ringbox .dia-name{font-size:10.5px;letter-spacing:.12em}
  .ringbox .at-top{max-width:50%}
  .space-plate{padding:10px 12px}
  .tier{padding:16px 12px 18px}
  .tier+.tier::before{left:calc(12px + var(--ring)/2 - .5px);top:-10px;height:20px}
  .tier+.tier::after{left:calc(12px + var(--ring)/2 - 4px);top:2px}
  .tier-label{padding-left:calc(var(--ring) + 10px);font-size:15px}
  .tier ul{gap:11px 12px;margin-top:14px}
  .tier ul.wide{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier li{column-gap:10px}
  .tier .dia-name{font-size:11px;letter-spacing:.13em}
  .dated{margin-top:20px}.dated li{column-gap:12px;padding-bottom:16px}.dated p{font-size:15px;margin-top:3px}
  .band blockquote{margin-top:20px;padding-left:16px;font-size:19px}
  .tabs{margin-top:20px}.tabs button{padding:13px 0;font-size:12.5px}
  .choice{padding:20px 18px 22px}
  .choice h4{font-size:10.4vw;margin-top:14px}
  .choice p{margin-top:14px;min-height:7.6em}
  .choice-trace{margin-top:16px;padding-top:14px;font-size:11px;gap:.4em .7em}
  .closing p{font-size:21px;line-height:1.32}
  .closing .ch-head+p{margin-top:16px}
  .sources{margin-top:36px}.sources div{padding-top:12px}.sources p{font-size:14.5px;margin-top:6px}
  .ends{gap:8px;margin-top:30px}
  .exits{grid-template-columns:minmax(0,1fr)}
  .exit{min-height:80vw}
  .exit-home{min-height:62vw}
  /* the card is tall enough for the room to show above the words; under the words the shade is deep */
  .exit::after{background:linear-gradient(0deg,rgba(3,3,4,.96) 0%,rgba(3,3,4,.9) 34%,rgba(3,3,4,.5) 50%,rgba(3,3,4,0) 72%)}
  .exit-words{padding:16px}
  .exit-words .eng{color:var(--soft)}
  .exit-words .title{margin-top:6px}
  .exit-next .title{font-size:9vw}
  .foot{flex-direction:column;align-items:flex-start;gap:10px;padding:34px var(--pad) 78px}
  .key .where{display:none}
  .key ol{max-width:none}
}
/* the narrowest phones: thirteen marks need the whole width to give each a 24px touch area */
@media(max-width:359px){
  .key{padding-inline:4px}
  .key ol{margin-inline:0}
}