:root{
  --paper:#FBFAF8;
  --ink:#16181C;
  --ink-soft:#4A5058;
  --slate:#3A4A5C;
  --ochre:#92662D;
  --rule:#DCD8D1;
  --rule-soft:#EAE7E1;
  --wash:#F4F1EB;

  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --measure:34rem;
  --gutter:clamp(1.5rem,5vw,4.5rem);
  --band-pad:clamp(3.5rem,8vw,6rem);
  --datum:1.9rem;          /* how far the datum sits outside the text column */
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit}
::selection{background:#E8DFCE;color:var(--ink)}
:focus-visible{
  outline:2px solid var(--slate);
  outline-offset:3px;
  border-radius:1px;
}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:.75rem 1rem;z-index:200;
  font-size:.875rem;text-decoration:none;
}
.skip:focus{left:0}
.shell{
  max-width:78rem;
  margin:0 auto;
  padding-inline:var(--gutter);
}
/* full-bleed blocks break out of the shell; clip rather than hide so the
   sticky railbar keeps working */
body{overflow-x:clip}
.band-head.visually-hidden + *{margin-top:0}
/* ---------- attestation ---------- */

.attest{
  margin-top:2.25rem;
  padding:1.4rem 1.6rem 1.5rem;
  background:var(--wash);
  max-width:38rem;
}
.attest p{font-size:.9375rem;line-height:1.6}
.attest cite{
  display:block;
  margin-top:1.1rem;
  padding-top:.9rem;
  border-top:1px solid var(--rule);
  font-style:normal;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.04em;
}
.attest cite span{
  display:block;
  margin-top:.2rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.spec{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--rule);
  background:#fff;
  cursor:pointer;
  transition:border-color .3s ease,opacity .45s ease;
}
.spec:hover{border-color:var(--ink-soft)}
.spec .spec-metrics,.spec .spec-why{cursor:auto}
.grid.is-filtered .spec.is-dim{opacity:.55}
.grid.is-filtered .spec.is-dim:hover{opacity:.9}
.spec.is-lit{border-color:var(--ink)}
.spec.is-lit .spec-bar .case{color:var(--ink)}
.spec-stage{
  display:block;
  position:relative;
  aspect-ratio:3/2;
  background:#fff;
}
.spec-stage canvas{
  display:block;
  width:100%;height:100%;
}
.spec:hover .spec-title a,.spec.is-lit .spec-title a{text-decoration-color:var(--ink)}
.spec.is-lit .spec-why{display:block}
/* on a case study the frame leads the room: even air on all four sides,nothing labeled,the case title below does the naming */
.spec--lead{
  max-width:none;
  padding:clamp(1.25rem,3.2vw,2.5rem);
  margin-bottom:clamp(2.25rem,5vw,3.5rem);
}
.spec--lead .spec-stage{aspect-ratio:16/6}
.spec--lead .spec-body{display:none}

@media (max-width:44rem){
}
.volume{
  padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
}
.volume:first-child{padding-top:.25rem}
.volume:last-child{padding-bottom:.25rem}

@media (max-width:44rem){.promenade{grid-template-columns:1.75rem minmax(0,1fr)}
.volume{padding-left:1.1rem}
}

@media (prefers-reduced-motion:reduce){.spec{transition:none}
}
.close .shell{padding-block:clamp(3.5rem,7vw,5.5rem) 3rem}
.contacts{
  margin-top:2.5rem;
  display:flex;
  gap:2.25rem;
  flex-wrap:wrap;
  font-size:.9375rem;
}
.contacts a{
  text-decoration:none;
  border-bottom:1px solid var(--rule);
  padding-bottom:2px;
  transition:border-color .18s ease;
}
.contacts a:hover{border-bottom-color:var(--ink)}
/* ================= CASE STUDY ================= */

/* sticky orientation bar */
.railbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(251,250,248,.94);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.railbar-inner{
  display:flex;
  align-items:center;
  gap:1.25rem;
  padding-block:.7rem;
  font-size:.8125rem;
}
.railbar-back{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  text-decoration:none;
  white-space:nowrap;
  transition:color .18s ease;
}
.railbar-back:hover{color:var(--ink)}
.railbar-sep{
  width:1px;
  align-self:stretch;
  background:var(--rule);
  flex:0 0 1px;
}
.railbar-title{
  font-family:var(--serif);
  font-size:1.0625rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.railbar-where{
  margin-left:auto;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:45%;
  text-align:right;
}

@media (max-width:34rem){.railbar-title{display:none}
.railbar-where{max-width:60%}
}
/* case opening -- the threshold you pass through to get inside.
   Full-bleed wash,then the long read returns to paper. */
.case-open{
  position:relative;
  z-index:0;
  background:var(--wash);
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50% + var(--gutter));
  padding-block:clamp(3.5rem,9vw,6.5rem) clamp(2.5rem,5vw,4rem);
  margin-bottom:clamp(2.5rem,5vw,4rem);
}
.case-open h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(2.3rem,6vw,4rem);
  line-height:1.1;
  letter-spacing:-.02em;
  max-width:16ch;
  text-wrap:balance;
}
.case-standfirst{
  margin-top:2rem;
  max-width:var(--measure);
  font-size:1.125rem;
  line-height:1.6;
  color:var(--ink-soft);
}
/* what was wagered,what it was read from,and what being wrong cost */
.stake{
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  display:grid;
  gap:.8rem;
  max-width:44rem;
}
.stake > div{
  display:grid;
  grid-template-columns:6.5rem minmax(0,1fr);
  gap:1.25rem;
  align-items:baseline;
}
.stake dt{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.stake dd{
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:.01em;
  color:var(--ink);
}

@media (max-width:40rem){.stake > div{grid-template-columns:1fr;gap:.2rem}
.stake{gap:1.1rem}
}
.case-facts{
  margin-top:1.75rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
/* case body: two columns,notes in margin */
.case-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,15rem);
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
  padding-bottom:clamp(3rem,7vw,5rem);
}
.case-main{max-width:38rem}
.case-main > section{
  padding-top:clamp(2.75rem,6vw,4.5rem);
  scroll-margin-top:5rem;
}
.case-main > section + section{border-top:1px solid var(--rule-soft)}
.case-main h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(1.6rem,3.2vw,2.15rem);
  line-height:1.18;
  letter-spacing:-.014em;
  margin-bottom:1.4rem;
  max-width:20ch;
}
.case-main h3{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  letter-spacing:.005em;
  margin-top:2.5rem;
  margin-bottom:.8rem;
}
.case-main p{margin-bottom:1.15rem}
.case-main p:last-child{margin-bottom:0}
.case-main ul{margin:0 0 1.15rem 1.1rem}
.case-main li{margin-bottom:.4rem}
/* pull statement */
.claim{
  margin:2rem 0;
  padding-left:1.25rem;
  border-left:2px solid var(--ink);
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.3;
}
/* ---------- the opening: shipped work, then the facts ----------
   The animated scene carries the premise; this carries the evidence.
   A reader who never scrolls past the fold has still seen the product. */
.case-hero{margin:2rem 0 0}
.case-hero img{
  width:100%;height:auto;display:block;
  border:1px solid var(--rule);
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 8px 28px rgba(22,24,28,.07);
}
.case-hero figcaption{
  margin-top:.7rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft);
}
/* role, team, timeline, outcome -- the questions an interviewer opens with */
.case-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1.1rem 1.75rem;
  margin:2.25rem 0 0;padding-top:1.5rem;
  border-top:1px solid var(--rule);
}
.case-meta dt{
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.35rem;
}
.case-meta dd{font-size:.9375rem;line-height:1.5}
.case-open[data-kb] .case-meta{border-top-color:currentColor;opacity:1}
.case-open[data-kb] .case-meta dt{color:inherit;opacity:.6}
.case-open[data-kb] .case-meta dd{color:inherit;opacity:.92}
@media (max-width:44rem){
  .case-meta{grid-template-columns:1fr;gap:.9rem}
}

/* inline figure inside case body */
.case-fig{margin:2.25rem 0}
.case-fig img{
  width:100%;height:auto;display:block;
  border:1px solid var(--rule);
  background:#fff;
}
.case-fig figcaption{
  margin-top:.7rem;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--ink-soft);
}
.case-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:2.25rem 0;
}
.case-pair figure{margin:0}
.case-pair img{width:100%;height:auto;display:block;border:1px solid var(--rule);background:#fff}
.case-pair figcaption{
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.03em;
  color:var(--ink-soft);
  line-height:1.45;
}

@media (max-width:34rem){.case-pair{grid-template-columns:1fr}}
/* numbered sequence */
.seq{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1.5rem}
.seq li{
  display:grid;
  grid-template-columns:2.25rem 1fr;
  gap:1rem;
  margin:0;
}
.seq b{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--ink-soft);
  padding-top:.25rem;
  font-weight:400;
}
.seq strong{display:block;font-weight:600;margin-bottom:.2rem}
.seq span{color:var(--ink-soft);font-size:.9375rem;line-height:1.55}
/* margin rail (desktop TOC) */
.case-rail{
  position:sticky;
  top:4.5rem;
  border-left:1px solid var(--rule);
  padding-left:1.5rem;
  font-size:.8125rem;
}
.case-rail h2{
  font-family:var(--mono);
  font-size:.625rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  font-weight:400;
  margin-bottom:1rem;
}
.case-rail ol{list-style:none;counter-reset:r;display:grid;gap:.55rem}
.case-rail a{
  color:var(--ink-soft);
  text-decoration:none;
  display:block;
  line-height:1.35;
  transition:color .18s ease;
  border-left:2px solid transparent;
  padding-left:.7rem;
  margin-left:-.7rem;
}
.case-rail a:hover{color:var(--ink)}
.case-rail a.is-current{
  color:var(--ink);
  border-left-color:var(--ink);
}
.rail-metrics{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  display:grid;
  gap:1.1rem;
}
.rail-metrics dt{
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1;
  color:var(--ochre);
  font-variant-numeric:tabular-nums;
}
.rail-metrics dd{
  margin-top:.25rem;
  font-size:.75rem;
  line-height:1.4;
  color:var(--ink-soft);
}
/* case footer nav */
.case-next{
  border-top:1px solid var(--ink);
  padding-block:clamp(3rem,6vw,4.5rem) 3rem;
}
.case-next a.next-title{
  font-family:var(--serif);
  font-size:clamp(1.6rem,3.5vw,2.4rem);
  line-height:1.15;
  text-decoration:none;
  display:inline-block;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease;
}
.case-next a.next-title:hover{border-bottom-color:var(--ink)}
.case-next a.next-title::after{content:" \2192"}
/* ---------- responsive ---------- */

@media (max-width:60rem){
  .case-body{grid-template-columns:1fr}
  .case-rail{
    position:static;
    border-left:0;
    border-top:1px solid var(--rule);
    padding-left:0;
    padding-top:1.5rem;
    order:-1;
  }
  .case-rail ol{
    grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  }
  .rail-metrics{grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
}

@media (max-width:56rem){.entry,.practice{grid-template-columns:1fr;gap:2rem}
.evidence{
    border-left:0;
    border-top:1px solid var(--rule);
    padding-left:0;
    padding-top:1.5rem;
  }
.evidence dl{grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1.5rem}
.masthead nav{gap:1.25rem}
}

@media (max-width:40rem){
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition-duration:.01ms !important;animation-duration:.01ms !important}
}
/* ---------- lightbox ---------- */

.case-fig img,.case-pair img{ cursor:zoom-in }
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(251,250,248,.97);
  backdrop-filter:saturate(180%) blur(6px);
  cursor:zoom-out;
}
.lightbox.is-open{display:flex}
/* it comes up out of the plate and settles; closing reverses it */
@media (prefers-reduced-motion:no-preference){
  .lightbox.is-open{animation:lb-in .22s ease-out both}
  /* the content rises; the close control is chrome and stays put. A live
     frame grows out of its plate instead, so it opts out of the rise. */
  .lightbox.is-open > :not(.lightbox-close){animation:lb-rise .26s cubic-bezier(.2,.8,.3,1.06) both}
  .lightbox.is-open.is-live > .lightbox-live{animation:lb-fade .18s ease-out both}
  .lightbox.is-closing{animation:lb-out .19s ease-in both}
  .lightbox.is-closing > :not(.lightbox-close){animation:lb-sink .19s ease-in both}
}
@keyframes lb-in{from{opacity:0}to{opacity:1}}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
@keyframes lb-out{from{opacity:1}to{opacity:0}}
@keyframes lb-rise{from{opacity:0;transform:translateY(1.1rem) scale(.975)}
                   to{opacity:1;transform:none}}
@keyframes lb-sink{from{opacity:1;transform:none}
                   to{opacity:0;transform:translateY(.7rem) scale(.985)}}
.lightbox img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  border:1px solid var(--rule);
  background:#fff;
  box-shadow:0 2px 40px rgba(22,24,28,.10);
}
/* a browser window carries its own X, so the corner word is redundant
   there; the photographs and charts keep it */
.lightbox.is-live:has(.frame--browser) .lightbox-close{display:none}
.lightbox-close{
  position:absolute;
  top:clamp(.75rem,2vw,1.5rem);
  right:clamp(.75rem,2vw,1.5rem);
  background:none;
  border:0;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  cursor:pointer;
  padding:.4rem;
}
.lightbox-close:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.lightbox{backdrop-filter:none}
}
.frames .shell{padding-block:clamp(3rem,6vw,4.5rem)}

@media (prefers-reduced-motion:reduce){.frame-grid img{transition:none}
}

@media (prefers-reduced-motion:reduce){#opening-h1 .cf{transition:none}
}
.coin-top{transform:translateZ(calc(var(--thick) / 2))}
.coin-bottom{transform:translateZ(calc(var(--thick) / -2)) rotateY(180deg)}
/* --- narrow: stack,headline first,coin below as centered support --- */
@media (max-width:46rem){
  .opening{
    grid-template-columns:1fr;
    align-items:start;
    gap:2.5rem;
    /* leave room at the bottom for the fixed coin so text never hides under it */
    padding-bottom:9rem;
  }
  .opening-text{max-width:none}
  /* coin sits below the text, low on first view, and scrolls away
     naturally with the content (normal flow, not fixed) */
  .opening{
    min-height:70vh;
    grid-template-rows:auto 1fr;
    padding-bottom:1.5rem;
  }
  .opening-text{align-self:start;padding-top:0.5rem}
  .coin-stage{
    flex-direction:column;
    align-self:end;                /* pushed to the bottom of the tall opener */
    justify-content:flex-end;
    align-items:center;            /* cue + coin share the same center */
    padding:0;
    min-height:0;
  }
  .coin-hit{
    --size:8.5rem;                 /* larger share on mobile */
    --thick:0.7rem;                /* thicker on mobile */
    margin-bottom:0;
  }
}

@media (prefers-reduced-motion:reduce){.coin-lift,.coin-spin,.coin-sliver{transition:none}
}

@keyframes mark-land{
  from{transform:rotateX(90deg)}
  to{transform:rotateX(1080deg)}
}
/* no datum below this width,so the mark tucks in closer */
@media (max-width:62rem){
  .entry-mark{left:-1.15rem}
}

@media (prefers-reduced-motion:reduce){.entry:hover .mark-face{
    animation:none;
    transform:rotateX(0deg);
  }
}

@media (prefers-reduced-motion:reduce){.reel > span{transition:none !important}
}
/* ============================================================
   ============================================================
   THE NEW HOME PAGE
   Everything below supersedes the home-page rules above. Case
   study styles are untouched.
   ============================================================
   ============================================================ */

/* ============================================================
   HOME PAGE
   Room one is the opener: a colored ground,a display coordinate,and the coin. Flipping it re-keys that section and nothing else.
   ============================================================ */
:root{
  --paper:#FBFAF8; --ink:#16181C; --ink-soft:#4A5058; --slate:#3A4A5C;
  --ochre:#92662D; --rule:#DCD8D1; --rule-soft:#EAE7E1; --wash:#F4F1EB;
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --head-wd:94%; --head-wt:500;
  --ochre-deep:#845A24;   /* the ochre, dark enough to sit on wash */
  --mark-wd:92%; --mark-wt:600;
  --room-h:76vh;
  --measure:34rem;
}
/* ---------- the six keyboards ----------
   each is a PAIR: a ground and a type color,both from the citation.
   three light grounds,two dark,one color on color. every pair
   clears 7:1. the coin is always struck in the type color. */
.room{
  --ground:#C9C9C5; --type:#141414;
  --display-wd:100%; --display-wt:700; --display-ls:-.018em;
}
/* the pairings are generic: any room can wear one */
[data-kb="purist"]{--ground:#F2EDE3;--type:#5A3A16;--mark:#5A3A16}
[data-kb="outremer"]{--ground:#1B3E86;--type:#F1F0EA;--mark:#1B3E86}
[data-kb="pampulha"]{--ground:#E4EDEA;--type:#0C4A50;--mark:#0C4A50}
[data-kb="ulm"]{--ground:#C9C9C5;--type:#141414;--mark:#141414}
[data-kb="eames"]{--ground:#992817;--type:#FAF3E6;--mark:#992817}
[data-kb="neutra"]{--ground:#A2AE97;--type:#2E1A10;--mark:#2E1A10}
/* only room one carries a display coordinate as well */
.room[data-kb="purist"]{--display-wd:70%;--display-wt:800;--display-ls:-.024em}
.room[data-kb="outremer"]{--display-wd:62%;--display-wt:900;--display-ls:-.028em}
.room[data-kb="pampulha"]{--display-wd:112%;--display-wt:300;--display-ls:-.006em}
.room[data-kb="ulm"]{--display-wd:100%;--display-wt:700;--display-ls:-.018em}
.room[data-kb="eames"]{--display-wd:125%;--display-wt:800;--display-ls:-.014em}
.room[data-kb="neutra"]{--display-wd:118%;--display-wt:200;--display-ls:.004em}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.shell{max-width:72rem;margin:0 auto;padding-inline:clamp(1.25rem,5vw,4rem)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ============================================================
   ROOM ONE — the only place chance is allowed
   ============================================================ */
.room{
  background-color:var(--ground);
  color:var(--type);
  min-height:var(--room-h);
  display:flex;flex-direction:column;
  transition:background-color .55s cubic-bezier(.4,0,.2,1),
             color .55s cubic-bezier(.4,0,.2,1);
}
.room .shell{width:100%}
.room-top{padding-block:1.75rem 0}
.room-top-in{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:2rem;flex-wrap:wrap;padding-bottom:1.05rem;
  border-bottom:1px solid currentColor;
}
.wordmark{font-stretch:var(--mark-wd);font-weight:var(--mark-wt);
  font-size:1.25rem;letter-spacing:-.012em;text-decoration:none}
.room-top nav{display:flex;gap:1.6rem;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase}
.room-top nav a{text-decoration:none;opacity:.78}
.room-top nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:.35em}
.room-body{
  flex:1;display:grid;grid-template-columns:1fr auto;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:end;
  padding-block:clamp(3rem,8vw,5.5rem) clamp(2.5rem,6vw,4rem);
}
.room h1{
  cursor:pointer;
  font-stretch:var(--display-wd);font-weight:var(--display-wt);
  letter-spacing:var(--display-ls);
  font-size:clamp(2.5rem,7.2vw,5.4rem);
  line-height:1.02;max-width:15ch;text-wrap:balance;
}
/* on the coin page the sentence is the flip trigger. on the eye page
   nothing listens to it, so it must not offer a click it will not honor. */
.room-body--eye h1{cursor:default}
/* the words the coin belongs to. the wipe is cloned per line fragment so it
   survives a wrap instead of landing under the last line only. */
#opening-h1 .cf{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% .055em;
  padding-bottom:.09em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  transition:background-size .42s cubic-bezier(.2,.7,.2,1);
}
#opening-h1:hover .cf{background-size:100% .055em}
/* ---------- the coin,struck in the type color ----------
   the color lives in background-color so it can transition;
   the modeling is alpha-only and rides on top unchanged. */
.coin-stage{
  --coin:clamp(7rem,8.5vw,8.75rem);
  display:flex;align-items:flex-end;justify-content:center;
  /* the original was an 88px coin on a 900px perspective. hold that ratio
     at any size or the foreshortening changes with the diameter. */
  perspective:calc(var(--coin)*10.227);perspective-origin:50% 46%;align-self:end}
.coin-hit{
  --size:var(--coin);--thick:calc(var(--coin)*.0836);
  color:inherit;
  position:relative;
  width:calc(var(--size)*1.2);height:calc(var(--size)*1.2);
  border:0;background:none;padding:0;cursor:pointer;
  transform-style:preserve-3d;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:calc(var(--size)*-.6);
}
.coin-hit:focus-visible{outline:3px solid currentColor;outline-offset:.75rem;border-radius:50%}
.coin-sliver,.coin-face,.coin-wall{
  background-color:var(--type);
  transition:background-color .55s cubic-bezier(.4,0,.2,1);
}
.coin-sliver{
  position:absolute;left:50%;top:50%;
  width:var(--size);height:var(--thick);
  margin:calc(var(--thick)/-2) 0 0 calc(var(--size)/-2);
  transform-origin:0% 50%;border-radius:calc(var(--thick)/2);
  background-image:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.06) 34%,rgba(0,0,0,.20) 70%,rgba(0,0,0,.36) 100%);
  will-change:transform;
}
.coin-lift{
  position:absolute;left:50%;top:50%;
  width:var(--size);height:var(--size);
  margin:calc(var(--size)/-2) 0 0 calc(var(--size)/-2);
  transform-style:preserve-3d;transform-origin:50% 50%;
  opacity:0;will-change:transform,opacity;
}
.coin-spin{position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(90deg);will-change:transform}
.coin-face{
  position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;
  background-image:radial-gradient(circle at 40% 34%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 48%,rgba(0,0,0,.16) 78%,rgba(0,0,0,.32) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.coin-wall{
  position:absolute;left:50%;top:50%;
  width:var(--size);height:var(--thick);
  margin:calc(var(--thick)/-2) 0 0 calc(var(--size)/-2);
  border-radius:calc(var(--thick)/2);transform:rotateX(90deg);
  background-image:linear-gradient(180deg,rgba(255,255,255,.38),rgba(0,0,0,.14) 50%,rgba(0,0,0,.34));
}
.coin-shadow{
  position:absolute;left:50%;top:50%;
  width:calc(var(--size)*1.02);height:calc(var(--size)*.16);
  margin-top:calc(var(--size)*.02);transform:translate(-50%,-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.34) 0%,rgba(0,0,0,0) 70%);
  opacity:0;will-change:transform,opacity;
}
/* ============================================================
   past the seam — nothing here ever changes
   ============================================================ */
.lead{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.15rem,2.1vw,1.5rem);
  line-height:1.3;letter-spacing:-.014em;max-width:30ch;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.lead--first{max-width:22ch}
section.band{padding-block:clamp(3rem,7vw,5.5rem)}
section.band:first-of-type{padding-top:clamp(3.5rem,9vw,7rem)}
/* case studies */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.75rem)}
.spec{border:1px solid var(--rule);background:var(--paper);
  display:flex;flex-direction:column;text-decoration:none;transition:border-color .2s ease}
.spec:hover{border-color:var(--ink)}
.spec-fig{aspect-ratio:4/3;background:var(--wash);border-bottom:1px solid var(--rule-soft);
  position:relative;overflow:hidden}
.spec-fig canvas{display:block;width:100%;height:100%}
.spec-in{padding:1.1rem 1.15rem 1.35rem}
.spec-in h3{font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:1.0625rem;line-height:1.28;letter-spacing:-.012em}
.spec-in p{margin-top:.5rem;font-size:.875rem;line-height:1.55;color:var(--ink-soft)}
/* work history — the promenade */
.promenade{position:relative;padding-left:clamp(1.75rem,4vw,3rem)}
.ramp{position:absolute;left:0;top:.5rem;bottom:.5rem;width:1px;background:var(--rule)}
.ramp-pos{position:absolute;left:0;top:0;width:1px;transition:transform .18s linear}
.ramp-coin{position:absolute;left:50%;top:0;width:.72rem;height:.72rem;
  margin-left:-.36rem;border-radius:50%;background:var(--ochre);
  box-shadow:0 0 0 5px var(--paper)}
.volumes{list-style:none;display:grid;gap:clamp(2rem,4.5vw,3.25rem)}
.volume-when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.volume-h{font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.05rem,1.9vw,1.25rem);line-height:1.28;letter-spacing:-.014em}
.volume-where{color:var(--ink-soft);font-size:.9375rem;margin-top:.15rem}
.volume-p{margin-top:.85rem;max-width:var(--measure)}
.volume-f{margin-top:.7rem;max-width:var(--measure);color:var(--ink-soft);font-size:.9375rem}
/* beliefs */
.laws{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3.5vw,3rem)}
.law{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.law-n{font-family:var(--mono);font-size:.6875rem;color:var(--ochre);padding-top:.3rem}
.law-t{font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:1rem;line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
.law-b{margin-top:.45rem;font-size:.9375rem;line-height:1.58;color:var(--ink-soft)}
/* what I took from it: the beliefs grid's own language,because the
   beliefs came out of these */
.laws--took{margin-top:1.75rem}
.case-main .laws--took{grid-template-columns:repeat(2,1fr);gap:clamp(1.5rem,3vw,2.5rem)}
.case-main .law{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.case-main .law-n{font-family:var(--mono);font-size:.6875rem;color:var(--ochre);padding-top:.3rem}
.case-main .law-t{
  font-family:var(--sans);font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:1rem;line-height:1.3;letter-spacing:-.012em;margin:0;
}
.case-main .law-b{
  margin:.45rem 0 0;font-size:.9375rem;line-height:1.58;color:var(--ink-soft);
}
@media (max-width:44rem){.case-main .laws--took{grid-template-columns:1fr}}
/* deliverables + photographs */
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,1.75rem)}
.plate{border:1px solid var(--rule);background:var(--wash);display:flex;flex-direction:column}
/* a live plate is the window itself, so it wears no plate of its own */
.plate.plate--live{border:0;background:transparent}
.plate .holder{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:cover;object-position:top left}
.plate figcaption{padding:.7rem .85rem .85rem;font-size:.8125rem;line-height:1.45;
  color:var(--ink-soft);border-top:1px solid var(--rule-soft);background:var(--paper)}
/* the photographs are printed photos: a white border on all four sides,
   and the same lift the deliverables have */
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,2.2vw,1.4rem)}
.photos .holder{
  aspect-ratio:1;overflow:hidden;
  background:#fff;border:0;
  padding:clamp(.4rem,1vw,.6rem);
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 2px 8px rgba(22,24,28,.05);
  transition:transform .34s cubic-bezier(.2,.8,.3,1.2),
             box-shadow .28s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}
.photos img{width:100%;height:100%;object-fit:cover;display:block;background:var(--wash)}
.photos .holder:hover,.photos .holder:focus-visible{
  transform:translateY(-.5rem) scale(1.028);
  box-shadow:0 2px 4px rgba(22,24,28,.06),
             0 14px 34px rgba(22,24,28,.16),
             0 30px 60px rgba(22,24,28,.09);
  z-index:2;position:relative;
}
.photos .holder:active{transform:translateY(-.12rem) scale(1.004);transition-duration:.09s}
/* it stays down after closing, until the pointer genuinely approaches */
.photos .holder.is-cooling,
.photos .holder.is-cooling:hover{
  transform:none;
  box-shadow:0 1px 2px rgba(22,24,28,.05), 0 2px 8px rgba(22,24,28,.05);
}
@media (prefers-reduced-motion:reduce){
  .photos .holder,.photos .holder:hover,.photos .holder:active{transform:none;transition:none}
}
/* the bare <footer> is only a wrapper -- on the case pages and the record
   it holds a full-bleed room,and any padding here paints paper under it */
footer{border-top:0;padding:0}
.contacts{display:flex;gap:1.75rem;flex-wrap:wrap}
.contacts a{text-underline-offset:.3em}
.colophon{margin-top:2.25rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft)}
.colophon .trace{color:var(--ochre)}
@media (max-width:900px){.grid,.laws,.plates{grid-template-columns:1fr}
.photos{grid-template-columns:repeat(2,1fr)}
.room-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;
    gap:2.5rem;padding-block:clamp(2.5rem,7vw,4rem) 2rem}
.room h1{max-width:none}
.coin-stage{align-self:end;justify-content:flex-start}
.coin-stage{--coin:7rem}
.coin-hit{margin-bottom:calc(var(--size)*-.26)}
}
@media (min-width:901px) and (max-width:1100px){.laws{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){.room,.coin-sliver,.coin-face,.coin-wall,#opening-h1 .cf{transition:none}
.ramp-pos{transition:none}
}
/* ---------- case studies inherit the same type system ----------
   the serif is retired. --serif is kept only so that any rule still
   asking for it lands on Archivo rather than on Georgia. */
:root{--serif:var(--sans)}
.case-open h1{
  font-family:var(--sans);
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.85rem,4.1vw,2.9rem);
  line-height:1.1;letter-spacing:-.022em;max-width:21ch;
}
.case-main h2,.case-main h3,.case-standfirst,.case-rail h2,.case-next a.next-title,.railbar-title{
  font-family:var(--sans);
}
.case-main h2,.case-main h3,.case-next a.next-title{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
}
.case-next a.next-title{
  font-size:clamp(1.15rem,2.3vw,1.55rem);line-height:1.2;letter-spacing:-.016em;
}
.railbar-title{font-stretch:var(--mark-wd);font-weight:var(--mark-wt)}
/* ============================================================
   SHIP FIXES
   ============================================================ */

/* ---------- the section lines had a measure meant for a headline ---------- */
.lead{max-width:48ch}
.lead--first{max-width:36ch}
/* ---------- the case study figure is a picture,not a control ----------
   it was inheriting the home-page card's pointer and inset padding */
.spec--lead{padding:0;cursor:default;border-color:var(--rule)}
.spec--lead:hover{border-color:var(--rule)}
/* the premise gets a band, not a screen -- the product below it is what
   a reader came to see */
.spec--lead .spec-stage{aspect-ratio:16/4.5;background:var(--wash)}
@media (max-width:44rem){.spec--lead .spec-stage{aspect-ratio:16/6}}
.spec--lead .spec-stage canvas{display:block;width:100%;height:100%}
/* ---------- no dividers on the case studies ----------
   space does the separating instead. a section that needs a line to be
   told apart from the one above it is too close to it. */
.case-main > section + section{border-top:0}
.case-main > section{padding-top:clamp(4rem,9vw,7rem)}
.case-main > section:first-child{padding-top:0}
.case-main h2{margin-bottom:1.9rem}
.stake{border-top:0;padding-top:0;margin-top:clamp(2.25rem,5vw,3.5rem)}
.rail-metrics{border-top:0;padding-top:0;margin-top:2.5rem}
.case-next{border-top:0;padding-top:clamp(4rem,9vw,7rem)}
@media (max-width:1080px){.case-rail{border-top:0;padding-top:0;margin-top:3rem}
.evidence{border-top:0;padding-top:0;margin-top:2.5rem}
}
/* ---------- the contents list is numbered ---------- */
.case-rail ol{counter-reset:r}
.case-rail li{counter-increment:r}
.case-rail a{padding-left:2.4rem;margin-left:0;position:relative}
.case-rail a::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;left:.75rem;top:.1em;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.05em;
  color:var(--rule);transition:color .18s ease;
}
.case-rail a:hover::before{color:var(--ink-soft)}
.case-rail a.is-current::before{color:var(--ochre)}
/* the figures live in the markup now,not in a removed animation */
.rail-metrics dt{font-stretch:var(--mark-wd);font-weight:var(--mark-wt);
  font-size:1.5rem;letter-spacing:-.014em}
/* ============================================================
   ROOMS,MEASURE AND POLISH
   ============================================================ */

/* room one is a fixed height. the display coordinate changes how the
   headline wraps,and the room must not move when it does. */
.room{min-height:var(--room-h)}
/* the room must not move when the pairing changes the way the headline
   wraps,so the headline reserves three lines. it is a floor,not a
   ceiling,so text zoom can still grow it -- WCAG 1.4.4. */
.room h1{align-self:end;min-height:3.06em}
/* the colophon records which room the coin landed in,in that room's color */
/* the footer names the room the coin landed in,in that room's color --
   whichever of its two tones can actually be read on paper */
.colophon .trace{color:var(--mark,var(--ochre))}
/* anything that opens in the lightbox says so with the cursor */
.plate img,.photos img{cursor:zoom-in}
/* the photograph credit */
.frames-note{margin-top:1.25rem;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
/* ---------- case studies wear a fixed pairing ----------
   room one is the only place the choice is random. these are chosen. */
.case-open[data-kb],.case-next[data-kb]{
  background-color:var(--ground);color:var(--type);
  box-shadow:0 0 0 100vmax var(--ground);
  clip-path:inset(0 -100vmax);
}
.case-open[data-kb]{
  padding-block:clamp(2rem,5vw,3.25rem) clamp(2.75rem,6vw,4.25rem);
  margin-bottom:clamp(3rem,7vw,5rem);
}
.case-open[data-kb] .case-standfirst,.case-open[data-kb] .stake dd,.case-open[data-kb] .case-facts{color:inherit;opacity:.82}
.case-open[data-kb] .stake dt{color:inherit;opacity:.6}
/* the next case is a room you can walk into,painted the color of
   the room you are about to enter */
a.case-next{
  display:block;text-decoration:none;
  padding-block:clamp(3.5rem,8vw,6rem);
  margin-top:clamp(3.5rem,8vw,6rem);
  transition:background-color .25s ease;
}
a.case-next .next-title{
  display:block;
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.12;letter-spacing:-.02em;max-width:24ch;
  border:0;
}
a.case-next .shell::after{
  content:"";display:block;width:2.25rem;height:1px;
  background:currentColor;opacity:.55;
  margin-top:clamp(1.25rem,2.5vw,1.75rem);
  transition:width .25s cubic-bezier(.2,.7,.2,1),opacity .25s ease;
}
a.case-next:hover .shell::after,a.case-next:focus-visible .shell::after{width:4.5rem;opacity:1}
a.case-next:hover{filter:brightness(.96)}
/* on the record the yard runs straight into the tail room,so the room
   reads as its own plane by tone rather than by a gap of paper */
.page-record a.case-next{margin-top:0}
a.case-next:focus-visible{outline:2px solid currentColor;outline-offset:-6px}
/* ---------- measure ----------
   60 to 80 characters is the published range for reading text. the
   standfirst was sitting near 58 and breaking early; headlines take a
   shorter measure but 21 characters was forcing four lines. */
.case-open h1{max-width:26ch}
.case-standfirst{max-width:64ch;font-size:1.1875rem}
.case-main{max-width:40rem}
/* ---------- the contents list is a list,not an inventory ---------- */
.case-rail a{padding-left:.7rem;margin-left:-.7rem}
.case-rail a::before{content:none}
/* the coin carries the date it has walked to */
.ramp-when{
  position:absolute;right:100%;margin-right:.85rem;top:50%;transform:translateY(-50%);
  text-align:right;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ochre);white-space:nowrap;
  pointer-events:none;
}
@media (max-width:900px){.ramp-when{display:none}}
/* a coin at the edge of the field was drawing over the frame */
.spec-stage,.spec-fig{overflow:hidden}
/* the ramp gets a gutter wide enough for the date to sit in */
.promenade{padding-left:clamp(5rem,8.5vw,7.75rem)}
.ramp{left:clamp(3.4rem,6.2vw,5.75rem)}
@media (max-width:900px){.promenade{padding-left:1.75rem}
.ramp{left:0}
}
/* ---------- the footer is a room ----------
   it names the pairing the coin landed on,so it wears it */
.site-footer{
  border-top:0;
  background-color:var(--ground);
  color:var(--type);
  padding-block:clamp(3.5rem,8vw,5.5rem) clamp(3rem,6vw,4rem);
  transition:background-color .55s cubic-bezier(.4,0,.2,1),
             color .55s cubic-bezier(.4,0,.2,1);
}
.site-footer > .shell > p{color:inherit}
.contacts a{border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}
.contacts a:hover{border-bottom-color:currentColor}
.colophon{color:color-mix(in srgb,currentColor 80%,var(--ground))}
.colophon .trace{color:inherit;opacity:1}
/* ---------- the case study figures wear the room ----------
   the drawing sits on the room's ground in the room's own ink. the
   accent is period-correct and picked to clear 3:1 on that ground,because ochre only reads on one of the three. */
.case-open[data-kb] .spec--lead{border:0;background:transparent}
.case-open[data-kb] .spec-stage{background:transparent}
.case-open[data-kb]{
  --fig-ink:var(--type);
  --fig-mute:color-mix(in srgb,var(--type) 58%,var(--ground));
  --fig-rule:color-mix(in srgb,var(--type) 24%,var(--ground));
  --fig-paper:color-mix(in srgb,var(--ground) 78%,#fff);
  --fig-ground:var(--ground);
}
.case-open[data-kb="pampulha"]{--fig-accent:#8A5A1F}
.case-open[data-kb="ulm"]{--fig-accent:#B03A1E}
/* Braun red */
.case-open[data-kb="eames"]{--fig-accent:#E8B04B}
/* ---------- 508 pass ---------- */
/* the ochre was 4.46:1 on paper at 11px,four hundredths short of AA.
   #92662D clears it at 4.84 and still clears 3:1 on wash for the dishes. */

/* the photographs and plates open in the lightbox,so they are controls */
.photos .holder,.plate .holder{
  display:block;width:100%;border:0;
  cursor:pointer;font:inherit;color:inherit;
}
.plate .holder{padding:0;background:none}
.photos .holder:focus-visible,.plate .holder:focus-visible,.case-fig img:focus-visible,.case-pair img:focus-visible{
  outline:3px solid var(--ochre);outline-offset:3px;
}
.skip:focus{position:static;width:auto;height:auto;clip:auto;
  display:inline-block;margin:1rem;padding:.6rem .9rem;
  background:var(--ink);color:var(--paper);z-index:100}
/* the figure zoom control wraps the image and carries the focus ring */
.zoom{display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;cursor:zoom-in}
.zoom:focus-visible{outline:3px solid var(--ochre);outline-offset:3px}
/* ---------- WCAG 2.5.8 target size ----------
   these all sat at 18px tall. the padding grows the target and the
   matching negative margin keeps the layout exactly where it was. */
.room-top nav a,.railbar-back{
  padding-block:.42rem;margin-block:-.42rem;
}
.case-rail ol{gap:0}
.case-rail a{padding-block:.36rem}
.contacts a{padding-block:.3rem;margin-block:-.3rem}
/* ---------- the graveyard ----------
   the stones stand in a room of their own, the way the coin does on the
   home page. what they mark sits on the page below, on paper, and comes
   up out of the room as the title goes down. */
.yard{
  background-color:var(--ground);
  color:var(--type);
  --fig-ink:var(--type);
  --fig-mute:color-mix(in srgb,var(--type) 84%,var(--ground));
  --fig-accent:color-mix(in srgb,var(--type) 84%,var(--ground));
  --fig-rule:color-mix(in srgb,var(--type) 44%,var(--ground));
  --fig-paper:color-mix(in srgb,var(--type) 12%,var(--ground));
  --fig-ground:color-mix(in srgb,var(--type) 7%,var(--ground));
  transition:background-color .55s cubic-bezier(.4,0,.2,1),
             color .55s cubic-bezier(.4,0,.2,1);
}
.yard-in{
  display:flex;flex-direction:column;
  min-height:min(46rem,calc(100svh - 6rem));
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.25rem);
  transition:min-height .62s cubic-bezier(.4,0,.2,1),
             padding-top .62s cubic-bezier(.4,0,.2,1),
             padding-bottom .62s cubic-bezier(.4,0,.2,1);
}
.yard.is-open .yard-in{
  min-height:0;
  padding-block:clamp(1.25rem,3vw,2rem) clamp(1.25rem,3vw,2rem);
}

/* the title. its box collapses so the stones take its place, while the
   words themselves stay put and are covered over. */
.yard-head{
  height:var(--head-h,auto);
  transition:height .62s cubic-bezier(.4,0,.2,1);
}
.yard h1{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.85rem,4.1vw,2.9rem);
  line-height:1.1;letter-spacing:-.022em;
  transition:opacity .62s cubic-bezier(.4,0,.2,1);
}
.yard.is-open .yard-head{height:0}
.yard.is-open h1{opacity:0}

/* five to a row, and each row stands a little in front of the one behind
   it, the way rows of stones do */
.yard-stones{
  /* z-index 0 keeps the stones' own stacking inside the yard */
  position:relative;z-index:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  column-gap:clamp(.4rem,1.1vw,.85rem);
  align-items:end;
  margin-top:auto;padding-top:clamp(1.25rem,3vw,2rem);
}
.stone{
  position:relative;z-index:calc(var(--i) + 1);
  display:flex;flex-direction:column;align-items:center;
  min-height:12rem;padding:3.1rem 1.35rem 2.6rem;
  font:inherit;text-align:center;cursor:pointer;
  /* the rows nearest you are cut a shade deeper, the way distance pales stone */
  background:color-mix(in srgb,var(--type) var(--tint,8%),var(--ground));
  color:inherit;
  /* the hairline is the silhouette of the stone in front of the one behind */
  border:1px solid color-mix(in srgb,var(--type) 20%,var(--ground));
  border-radius:44% 44% 3px 3px / 26% 26% 3px 3px;
  transform:rotate(var(--lean,0deg));
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .3s ease,box-shadow .3s ease;
}
.stone:nth-child(n+6){margin-top:-1.6rem;--tint:13%}
.stone:nth-child(n+11){--tint:18%}
.stone-t{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:.875rem;line-height:1.24;letter-spacing:-.008em;
}
.stone-e{
  margin-top:.8rem;
  font-family:var(--mono);font-size:.625rem;line-height:1.45;letter-spacing:.03em;
}
/* it is a eulogy, so it is quoted */
.stone-e::before{content:"\201C"}
.stone-e::after{content:"\201D"}
/* a stone never comes forward of the row in front of it -- only the focus
   ring does, because a clipped focus ring is no focus ring */
.stone:hover{transform:rotate(calc(var(--lean,0deg) * 1.9)) translateY(-.3rem)}
.stone:focus-visible{outline:2px solid currentColor;outline-offset:3px;z-index:20}
.stone.is-picked{
  background:color-mix(in srgb,var(--type) 20%,var(--ground));
  box-shadow:inset 0 0 0 1.5px currentColor;
  transform:rotate(0deg) translateY(-.6rem);
}

/* the page below. at rest it is closed; a plot opens it to exactly the
   height it needs and rises into it. */
.earth{
  /* the same two colors as the room above, played the other way round --
     a keyboard reversed, which is how the Polychromie works. contrast is
     identical, because it is the same pair. */
  background-color:var(--type);
  color:var(--ground);
  --fig-ink:var(--ground);
  --fig-mute:color-mix(in srgb,var(--ground) 84%,var(--type));
  --fig-accent:color-mix(in srgb,var(--ground) 84%,var(--type));
  --fig-rule:color-mix(in srgb,var(--ground) 44%,var(--type));
  --fig-paper:color-mix(in srgb,var(--ground) 12%,var(--type));
  --fig-ground:color-mix(in srgb,var(--ground) 7%,var(--type));
  overflow:hidden;
  height:0;
  transition:height .62s cubic-bezier(.4,0,.2,1),
             background-color .55s cubic-bezier(.4,0,.2,1),
             color .55s cubic-bezier(.4,0,.2,1);
}
.earth-in{padding-block:clamp(2.75rem,6vw,4.25rem) clamp(3rem,7vw,4.75rem)}
.grave{
  transform:translateY(110%);opacity:0;
  transition:transform .62s cubic-bezier(.4,0,.2,1),opacity .62s cubic-bezier(.4,0,.2,1);
}
.grave.is-in{transform:none;opacity:1}
/* moving from one plot to another is a swap, not another rising */
.grave.is-swap{transform:none;transition:opacity .3s ease}
.grave h2{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:clamp(1.25rem,2.6vw,1.65rem);
  line-height:1.2;letter-spacing:-.018em;max-width:28ch;
}
.grave p{margin-top:.85rem;font-size:1rem;line-height:1.62;max-width:36rem}

/* ---------- the specimens ----------
   each buried thing rebuilt small enough to argue with. the frame is a
   frame: a hairline round a wash,nothing else. */
.relic{
  min-width:0;
  margin-top:clamp(1.25rem,2.6vw,1.75rem);
  max-width:38rem;
  border:1px solid var(--fig-rule);
  background:var(--fig-ground);
  padding:clamp(1rem,2.4vw,1.5rem);
}
.relic p{max-width:none}
/* the specimen for the orb's plot */
.rorb{display:block;width:100%;max-width:17rem;margin:0 auto;height:auto}
.rorb-ball{fill:color-mix(in srgb,var(--type) 15%,var(--ground))}
.rorb-white{fill:var(--ground)}
.rorb-rim{fill:none;stroke:var(--type);stroke-width:2.2}
.rorb-x{stroke:var(--type);stroke-width:5;stroke-linecap:round;fill:none}
.relic--flip,.relic--faces{max-width:42rem}
/* a drawing fills its frame to the edges */
.rcanvas{position:relative;aspect-ratio:16/7}
.rcanvas--tall{aspect-ratio:3/2}
.rcanvas canvas{display:block;width:100%;height:100%}
/* the flip that re-keys the page. the coin needs a room to be thrown in,so the stage is a fixed height and the toss is measured against it. */
.rflip{display:grid;justify-items:center}
.rflip .coin-stage{
  --coin:5.5rem;width:100%;height:10.5rem;
  align-self:stretch;align-items:flex-end;
}
.rflip .coin-hit{margin-bottom:calc(var(--size)*-.6)}
.rflip .coin-sliver,.rflip .coin-face,.rflip .coin-wall{background-color:currentColor}
.rflip-trace{
  margin-top:3.5rem;
  font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fig-accent);
}
/* the question block */
.rq{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:1rem;line-height:1.3;letter-spacing:-.012em;
  color:var(--fig-ink);margin-bottom:.85rem;
}
.ra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.rb{
  font:inherit;font-size:.8125rem;line-height:1.35;text-align:left;
  padding:.6rem .7rem;cursor:pointer;
  background:transparent;color:var(--fig-mute);
  border:1px solid var(--fig-rule);
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.rb:hover{border-color:var(--fig-mute);color:var(--fig-ink)}
.rb[aria-pressed="true"]{background:var(--fig-ink);color:var(--fig-paper);border-color:var(--fig-ink)}
.rw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:1.9rem}
.rw span{
  display:block;padding:.65rem .7rem;min-height:5.25rem;
  background:transparent;border:1px solid var(--fig-rule);
  font-size:.75rem;line-height:1.35;color:var(--fig-ink);
  transition:background-color .3s ease,box-shadow .3s ease;
}
/* the lit card has to read on six grounds,so it takes a fill and a second
   line rather than a border color that some pairings swallow */
.rw span.is-lit{
  background:color-mix(in srgb,var(--fig-ink) 13%,var(--fig-ground));
  box-shadow:inset 0 0 0 2px var(--fig-ink);
}
/* the coordinate specimen: the three faces this site actually uses */
.rt{display:grid;gap:.8rem}
.rt > div{display:grid;grid-template-columns:4.25rem minmax(0,1fr);gap:.9rem;align-items:baseline}
.rt-k{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;color:var(--fig-accent)}
.rt-v{font-size:clamp(1.05rem,2.8vw,1.5rem);line-height:1.1;letter-spacing:-.014em;color:var(--fig-ink)}
/* six citations,three answers */
.rfaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem .4rem;align-items:stretch}
.rf-k{
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--fig-mute);padding-bottom:.15rem;
}
.rface{
  background:var(--ground);color:var(--type);
  border:1px solid color-mix(in srgb,var(--type) 22%,var(--ground));
  padding:.5rem .55rem;font-size:.9375rem;line-height:1.15;
  display:flex;align-items:center;overflow:hidden;
}
.rface span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-bs{font-family:'Big Shoulders','Big Shoulders Display',var(--sans);font-weight:600;font-size:1.0625rem}
.f-jost{font-family:'Jost',var(--sans);font-weight:500}
.f-bit{font-family:'Bitter',Georgia,serif;font-weight:600;font-size:.875rem}
.f-arch{font-family:var(--sans);font-stretch:94%;font-weight:600}
/* the work history with the case studies hung off it */
.rrail{position:relative;padding-left:5.75rem}
.rrail::before{
  content:"";position:absolute;left:4.6rem;top:.5rem;bottom:.5rem;
  width:1px;background:var(--fig-rule);
}
.rrail-stop{position:relative;display:block;padding-block:.5rem}
.rrail-when{
  position:absolute;right:calc(100% + 1.5rem);top:.55rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.08em;
  color:var(--fig-accent);white-space:nowrap;
}
.rrail-stop::before{
  content:"";position:absolute;left:-1.19rem;top:.95rem;
  width:.375rem;height:.375rem;border-radius:50%;background:var(--fig-accent);
}
.rrail-what{min-width:0}
.rrail-what b{display:block;font-weight:inherit;
  font-stretch:var(--head-wd);font-size:.8125rem;line-height:1.25;color:var(--fig-ink)}
.rrail-what i{display:block;font-style:normal;font-size:.75rem;color:var(--fig-mute);margin-top:.1rem}
.rrail-kids{display:grid;gap:.3rem;margin-top:.6rem;padding-left:1rem}
.rrail-kids span{
  position:relative;display:block;font-size:.75rem;line-height:1.3;color:var(--fig-ink);
}
.rrail-kids span::before{
  content:"";position:absolute;left:-1rem;top:.5rem;width:.55rem;height:1px;background:var(--fig-rule);
}
/* the impact number arriving like a reel */
.rreel{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.rreel-win{height:3.25rem;overflow:hidden;flex:0 0 auto}
.rreel-strip span{
  display:block;height:3.25rem;line-height:3.25rem;
  font-stretch:78%;font-weight:700;font-size:2.5rem;letter-spacing:-.02em;
  color:var(--fig-ink);font-variant-numeric:tabular-nums;
}
.rreel-l{font-size:.8125rem;color:var(--fig-mute)}
/* the nine cards,three ways */
.rcard{
  background:var(--fig-paper);border:1px solid var(--fig-rule);
  padding:.6rem .7rem;overflow:hidden;min-width:0;
}
.rc-n{font-family:var(--mono);font-size:.5625rem;letter-spacing:.08em;color:var(--fig-accent);display:block}
.rcard h3{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:.8125rem;line-height:1.24;letter-spacing:-.008em;margin-top:.3rem;color:var(--fig-ink);
}
.rcard p{font-size:.75rem;line-height:1.42;color:var(--fig-mute);margin-top:.35rem}
/* the fan: playing-card proportion,and the bodies run off the bottom */
.rfan{position:relative;height:13.75rem;overflow:hidden}
.rfan .rcard{
  position:absolute;left:50%;bottom:-3.25rem;
  width:10rem;height:14rem;z-index:var(--i);
  transform-origin:50% 128%;
  transform:translateX(-50%) rotate(calc((var(--i) - 4) * 7deg));
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}
.rfan .rcard:hover{
  transform:translateX(-50%) rotate(calc((var(--i) - 4) * 7deg)) translateY(-1.75rem);
  z-index:20;
}
/* the stack: the same hand turned on its side,every title clear */
.rstack{position:relative;height:21.6rem}
.rstack{min-width:0}
.rstack .rcard{
  position:absolute;left:0;right:0;top:calc(var(--i) * 2rem);
  height:5.6rem;z-index:var(--i);
  display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:baseline;
  transition:transform .26s cubic-bezier(.4,0,.2,1);
}
.rstack .rcard h3{margin-top:0}
/* the pulled card slides toward the margin,so what it uncovers behind it
   is the blank right edge of the cards below rather than their numbers */
.rstack .rcard:hover{transform:translateX(-1.1rem);z-index:20}
/* the deal. the card arrives whole and settles out of its tilt -- it does
   not fade,so it is never sitting at a half-legible alpha. */
.rdeal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.rdeal .rcard{
  visibility:hidden;transform:translateY(1.3rem) rotate(var(--tilt));
  transition:transform .44s cubic-bezier(.2,.7,.3,1),visibility 0s;
  transition-delay:var(--d),var(--d);
}
.rdeal.is-dealt .rcard{visibility:visible;transform:none}
/* the heading with a line under it,and the heading with the work under it */
.rsupport{display:grid;gap:clamp(1.5rem,3.5vw,2.25rem)}
.rs-h{
  font-stretch:70%;font-weight:800;letter-spacing:-.022em;
  font-size:clamp(1.15rem,3vw,1.6rem);line-height:1.12;color:var(--fig-ink);
}
.rs-sub{margin-top:.6rem;font-size:.8125rem;color:var(--fig-mute)}
.rs-work{list-style:none;margin-top:.75rem;display:grid;gap:.35rem}
.rs-work li{
  font-stretch:var(--head-wd);font-weight:var(--head-wt);
  font-size:.8125rem;line-height:1.25;color:var(--fig-ink);
}
/* the bet,the odds,if wrong */
.rstake{display:grid;gap:.75rem}
.rstake > div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:1.1rem;align-items:baseline}
.rstake dt{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--fig-mute);
}
.rstake dd{font-family:var(--mono);font-size:.75rem;line-height:1.5;color:var(--fig-ink)}
@media (max-width:600px){.yard-stones{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.6rem}
.stone{min-height:11rem;padding:2.6rem 1rem 2.3rem}
.stone:nth-child(n+6){margin-top:0}
.stone:nth-child(n+3){margin-top:-1.4rem}
.yard-in{min-height:auto}
.ra{grid-template-columns:1fr}
.rw{grid-template-columns:1fr}
.rw span{min-height:0}
.rt > div{grid-template-columns:1fr;gap:.1rem}
.rdeal{grid-template-columns:repeat(2,1fr)}
.rfan{height:9.25rem}
.rfan .rcard{width:7.5rem;height:10.5rem}
.rstack{height:19.9rem}
.rstack .rcard{top:calc(var(--i) * 1.8rem);height:5.5rem}
.rfaces{grid-template-columns:1fr 1fr}
.rf-k:last-of-type{display:none}
.rfaces > .rface:nth-of-type(3n){display:none}
.rrail{padding-left:1.25rem}
.rrail::before{left:.19rem}
.rrail-when{position:static;display:block;margin-bottom:.15rem}
.rrail-stop::before{left:-1.19rem;top:.75rem}
.rstake > div{grid-template-columns:1fr;gap:.15rem}
}
@media (prefers-reduced-motion:reduce){.rdeal .rcard{transform:none;visibility:visible;transition:none}
.rfan .rcard,.rstack .rcard,.rreel-strip,.stone{transition:none}
}
/* ---------- the bar under the footer ----------
   html has no background of its own,so body's paper propagates to the
   canvas and shows below the last room when the page overscrolls or is
   shorter than the window. the canvas wears the tail room instead. */
html{background-color:var(--ground,var(--paper))}
/* the graveyard sits at the far end of the contact row,on the same line,with a headstone in front of it so it reads as its own kind of thing */
.contacts .record{
  margin-left:auto;display:inline-flex;align-items:center;gap:.55rem;
}
.contacts .record::before{
  content:"";width:.5rem;height:.68rem;flex:0 0 auto;
  background:currentColor;opacity:.72;
  border-radius:46% 46% 1px 1px / 34% 34% 1px 1px;
  transform:rotate(-3deg);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.contacts .record:hover::before{transform:rotate(-8deg) translateY(-1px)}
@media (max-width:44rem){.contacts .record{margin-left:0;width:100%}}

/* ============================================================
   THE EYE — an alternate opening motif
   The coin argued that a choice without evidence is chance.
   The eye argues the other half: that the work is having a
   view and being willing to be looked back at.
   ============================================================ */
.room-body--eye{align-items:center}
/* Each kit sets its own width axis, so the same sentence wraps to four
   lines in one and six in another. Reserving the tallest and centring
   inside it keeps the room, and the eye, exactly where they were.
   The selector carries both classes so it outranks the coin's own
   reservation in frames.css, which loads after this file. */
.room-body.room-body--eye h1{max-width:18ch;min-height:6.12em;align-content:center}

/* The kit changes the colour and nothing else here. The display axes are
   pinned rather than left to cycle with data-kb, which is also what makes
   the h1 wrap identically in every palette. */
.room.room--eye[data-kb]{--display-wd:100%;--display-wt:700;--display-ls:-.018em}

.eye-stage{
  --eye:clamp(9rem,15vw,15rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  align-self:center;perspective:900px;position:relative;
}
/* The second line, under him. It is absolutely placed so that it can appear
   and disappear without ever moving the eye, and it answers the hover: it
   shows exactly when the cursor becomes a pointer over him. */
.eye-aside{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,.6rem);
  margin:0;width:max-content;max-width:min(34ch,84vw);text-align:center;
  font-family:var(--mono);font-size:clamp(.68rem,.92vw,.8rem);
  line-height:1.5;letter-spacing:.015em;color:var(--type);
  opacity:0;pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.2,1);
}
.eye-aside.is-on{opacity:.62;transform:translate(-50%,0)}
/* While he is at something (idle.js) the line can come up over whatever
   is under him: a floor, the boards of a porch, the backs of a crowd. It
   is let down below the floor where there is room for that (--idle-drop),
   above the scene, and on a scrap of the room's own ground, feathered at
   the edges, so it reads over anything. The words are mixed down to the
   weight they always have rather than faded, or the ground under them
   would be faded with them. */
.eye-hit[data-idle] ~ .eye-aside{z-index:2;margin-top:var(--idle-drop,0px);
  padding:.05rem .5rem;border-radius:.4rem;
  color:color-mix(in srgb,var(--type) 62%,var(--ground));
  background:var(--ground);box-shadow:0 0 .45rem .3rem var(--ground)}
.eye-hit[data-idle] ~ .eye-aside.is-on{opacity:1}

/* ---------- the wall of shame ----------
   It hangs behind him, so he covers the middle of his own list. Absolutely
   placed and centred on the eye, so it can appear without moving anything. */
.shame{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:-1;width:13.5rem;pointer-events:none;
  font-family:var(--mono);color:var(--type);
  padding:1.15rem 1.35rem 1.5rem;
  background:color-mix(in srgb, var(--type) 7%, var(--ground));
  border:1px solid color-mix(in srgb, var(--type) 26%, var(--ground));
  box-shadow:0 .9rem 2.4rem -1rem rgba(0,0,0,.35),
             inset 0 1px 0 color-mix(in srgb, var(--ground) 70%, transparent);
  opacity:0;
}
/* the two nails it hangs from */
.shame::before,.shame::after{
  content:"";position:absolute;top:.5rem;width:.3rem;height:.3rem;
  border-radius:50%;background:color-mix(in srgb, var(--type) 42%, var(--ground));
}
.shame::before{left:.75rem}
.shame::after{right:.75rem}
.shame.is-on{opacity:1}
/* He moves aside so the names can be read, and ends up overlapping only the
   right edge of the list rather than sitting on top of it. The wall slides
   the other way by a smaller amount, so neither has to travel far. */
.eye-stage.has-wall .eye-hit{transform:translateX(calc(var(--eye) * .40))}
.eye-stage.has-wall .shame{
  transform:translate(calc(-50% - var(--eye) * .34), -50%);
}
/* One transition declaration per element. These used to share a rule that
   set only transform, and because it came after the board's own rule at the
   same specificity it silently erased the board's opacity transition -- so
   the board popped in instead of fading, and could not have faded out. */
.eye-hit{transition:transform .95s cubic-bezier(.22,.8,.3,1)}
.shame{transition:opacity .6s ease .15s, transform .95s cubic-bezier(.22,.8,.3,1)}
/* when he dies, the board is taken down while he falls */
.shame.is-gone{opacity:0;transition:opacity .9s ease, transform .95s cubic-bezier(.22,.8,.3,1)}
@media (prefers-reduced-motion:reduce){ .eye-hit,.shame,.shame.is-gone{transition:none} }

/* Once you are on the wall, the introduction has served its purpose and its
   line sits exactly where your own name lands. So it stands down. */
/* Coming back to the page: the wall, the stone and the eye's place are put
   back without moving -- the page sets this before the room is first drawn
   and lifts it two frames later. */
.eye-stage.is-instant,.eye-stage.is-instant *{transition:none !important}
/* and if he died, there is no eye left in the room to show */
.room--eye.is-over .eye-well{opacity:0}
.eye-stage.has-wall .eye-note{
  /* animation:none matters -- the note's entrance is a `forwards` animation,
     and an animation's value outranks a plain declaration in the cascade, so
     without cancelling it this rule is simply ignored. */
  animation:none;opacity:0;transition:opacity .45s ease,filter .6s ease;
}

/* The rows are spaced far wider than a list needs to be, on purpose: at
   normal leading the whole thing hides behind him and the joke never lands.
   This way his own name clears the top of the ball, the ball covers the
   middle of the list, and the rest emerges underneath. */
.shame-h{
  margin:0 0 .5rem;padding-bottom:.55rem;
  font-size:clamp(.56rem,.72vw,.64rem);
  letter-spacing:.2em;text-transform:uppercase;opacity:.5;
  border-bottom:1px solid color-mix(in srgb, var(--type) 20%, var(--ground));
}
.shame-list{list-style:none;margin:0;padding:0;
  font-size:clamp(.72rem,.96vw,.84rem);line-height:3.9}
.shame-list li{opacity:.46;border-bottom:1px dotted
  color-mix(in srgb, var(--type) 14%, var(--ground))}
.shame-list li:last-child{border-bottom:0}
.shame-list li.is-you{opacity:1;font-weight:500}
.shame-list li.is-you::after{content:" \2190 you";opacity:.55;font-weight:400}

/* ---------- the paperwork ---------- */
.vow{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:1.5rem}
.vow[hidden]{display:none}
/* While the paperwork is away, between being ignored and coming back,
   the page is still not yours: this lies over it and takes the clicks. */
.vow-hold{position:fixed;inset:0;z-index:399}
.vow-hold[hidden]{display:none}
.vow-scrim{position:absolute;inset:0;background:rgba(9,10,12,.62)}
.vow-box{
  position:relative;width:min(30rem,100%);
  background:var(--ground);color:var(--type);
  border:1px solid color-mix(in srgb, var(--type) 24%, transparent);
  padding:clamp(1.4rem,3vw,2rem);
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.34);
  font-family:var(--mono);
}
.vow-lead{margin:0 0 1.25rem;font-size:clamp(.92rem,1.3vw,1.05rem);line-height:1.5}
.vow-check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;
  font-size:clamp(.72rem,.95vw,.82rem);line-height:1.55;opacity:.8}
.vow-check input{margin:.2em 0 0;width:1rem;height:1rem;flex:none;accent-color:var(--type)}
.vow-field{display:block;font-size:clamp(.68rem,.9vw,.76rem);
  letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.vow-field input{
  display:block;width:100%;margin-top:.5rem;padding:.6rem .7rem;
  font:inherit;font-size:1rem;letter-spacing:0;text-transform:none;
  color:var(--type);background:transparent;
  border:1px solid color-mix(in srgb, var(--type) 34%, transparent);
}
.vow-field input:focus-visible{outline:2px solid var(--type);outline-offset:1px}
.vow-acts{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.5rem}
.vow-btn{
  font:inherit;font-size:clamp(.74rem,.95vw,.82rem);
  padding:.6rem 1.1rem;cursor:pointer;
  color:var(--type);background:transparent;
  border:1px solid color-mix(in srgb, var(--type) 34%, transparent);
}
.vow-btn:hover{border-color:var(--type)}
.vow-btn:focus-visible{outline:2px solid var(--type);outline-offset:2px}
.vow-btn--go{background:var(--type);color:var(--ground);border-color:var(--type)}
.vow-btn--go:disabled{opacity:.35;cursor:not-allowed}
.vow-btn--go:not(:disabled):hover{opacity:.86}
@media (prefers-reduced-motion:reduce){ .shame{transition:none} }
/* The annotation. The sentence above claims a point of view; this points at
   it, as though the view were a small animal kept on the premises. It is
   marginalia, so it wears the mono face and does not follow the kit -- and
   it stays put when the eye bolts, which is most of the joke. */
.eye-note{
  margin:0 0 .35rem;align-self:center;
  transform:translateX(-1.15rem);
  display:flex;align-items:flex-end;gap:.4rem;white-space:nowrap;
  font-family:var(--mono);font-size:clamp(.72rem,1vw,.875rem);
  letter-spacing:.02em;color:var(--type);opacity:0;
  animation:eye-note-in .8s cubic-bezier(.2,.7,.2,1) 1.5s forwards;
}
@keyframes eye-note-in{from{opacity:0;transform:translateX(-1.15rem) translateY(-.4rem)}
  to{opacity:.62;transform:translateX(-1.15rem) translateY(0)}}
.eye-arrow{
  width:clamp(2.4rem,3.8vw,3.25rem);height:auto;flex:none;
  margin-bottom:-.9rem;overflow:visible;
}
.eye-arrow path{stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* the well: the eye sits INTO the page, so the rim carries an inner
   shadow the way a thumbprint in clay does */
.eye-hit{
  width:calc(var(--eye)*1.1);height:calc(var(--eye)*1.1);
  border:0;background:none;padding:0;cursor:pointer;color:inherit;
  display:grid;place-items:center;position:relative;
  transition:transform .45s cubic-bezier(.22,.8,.3,1);
}
.eye-hit:focus-visible{outline:3px solid currentColor;outline-offset:1rem;border-radius:50%}
/* No transition on transform here, deliberately. The script writes this
   transform every frame -- the lean is already eased by the loop's own
   lerp, and the poke is authored frame by frame. A CSS transition on top
   is a second, much slower filter over the top of that: at .45s it low
   passes anything above about 2Hz, which silently swallowed the tremor
   whole and put a lag on the recede. Easing belongs in one place, and
   that place is the loop. */
.eye-well{
  width:100%;height:100%;display:block;position:relative;
  transition:filter .45s cubic-bezier(.22,.8,.3,1);
  will-change:transform;
}
.eye-svg{width:100%;height:100%;display:block;overflow:visible;color:inherit}
/* the eye is set into a disc of color, so it reads as inset rather than
   floating on the page */
.eye-disc{fill:color-mix(in srgb, var(--type) 15%, var(--ground));
  transition:fill .55s cubic-bezier(.4,0,.2,1)}
.eye-sclera{fill:var(--ground);transition:fill .55s cubic-bezier(.4,0,.2,1)}
.eye-iris{transition:opacity .3s ease}
.eye-pupil{fill:var(--type);transition:fill .55s cubic-bezier(.4,0,.2,1)}
/* sweat. The disc is only a shade off the ground, so a filled bead would
   barely register -- the outline is what reads, and the fill keeps the
   disc from showing through. */
.eye-bead{fill:var(--ground);stroke:var(--type);stroke-width:1.8;
  stroke-opacity:.72;vector-effect:non-scaling-stroke;
  transition:fill .55s cubic-bezier(.4,0,.2,1),stroke .55s cubic-bezier(.4,0,.2,1)}
/* the X. Two strokes projected onto the sphere like everything else, so it
   sits on the surface rather than floating in front of it */
.eye-x{stroke:var(--type);stroke-width:5;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:0}
.eye-x.is-on{opacity:1}
.eye-dead .eye-iris,.eye-dead .eye-pupil{opacity:0}
.eye-hit.eye-dead{cursor:default}

/* the weather, once he is down */
/* width and height, not inset:0. An absolutely placed <canvas> is a
   replaced element: inset:0 does not stretch it, it keeps its intrinsic size
   -- and its intrinsic size is its pixel buffer, which on a Retina screen is
   twice the room. That is how the rain came to fall straight through the
   next section and land just short of "Where I've worked". */
.rain{position:absolute;left:0;top:0;width:100%;height:100%;
  z-index:3;pointer-events:none;display:block}

/* what is left. Cut to the same silhouette as the stones in the graveyard,
   because that is where it is going. */
/* The hole it stands in: a point on the floor of the room, placed by the
   script. Everything it holds is cut off at the floor line, so the stone can
   be pushed up out of the ground, and can lean without a corner of its base
   dipping into the section below. The cut is horizontal because the hole
   itself never turns -- only the stone inside it does. */
.tomb-hole{position:absolute;left:0;top:0;width:0;height:0;z-index:2;
  clip-path:inset(-100vh -100vw 0 -100vw)}
.tomb-hole[hidden]{display:none}
.tomb{
  position:absolute;left:0;bottom:0;
  transform:translate(-50%,0);
  transform-origin:50% 100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:11.5rem;min-height:13.5rem;padding:3.4rem 1.1rem 2rem;
  text-align:center;text-decoration:none;color:var(--type);
  background:color-mix(in srgb,var(--type) 13%,var(--ground));
  border:1px solid color-mix(in srgb,var(--type) 22%,var(--ground));
  border-radius:44% 44% 3px 3px / 26% 26% 3px 3px;
}
.tomb-t{font-family:var(--sans);font-weight:600;font-size:.82rem;line-height:1.24}
.tomb-e{margin-top:.7rem;font-family:var(--mono);font-size:.6rem;
  line-height:1.45;letter-spacing:.03em;opacity:.72}
.tomb-e::before{content:"\201C"}
.tomb-e::after{content:"\201D"}
.tomb:hover{background:color-mix(in srgb,var(--type) 19%,var(--ground))}
/* inside the stone: an outside ring would lose its bottom edge to the floor */
.tomb:focus-visible{outline:2px solid currentColor;outline-offset:-7px}

/* ---------- the headline, afterwards ----------
   One stroke per line the phrase occupies, measured from the text itself, so
   it follows the wrap wherever the wrap happens to fall. */
.room-body--eye h1{position:relative}
.pov-strike{
  position:absolute;left:0;top:0;height:.075em;border-radius:.04em;
  background:currentColor;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .5s cubic-bezier(.62,.04,.3,1);
}
.pov-strike.is-on{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){ .pov-strike{transition:none} }

.eye-rim{
  stroke:var(--type);stroke-width:2.5;
  transition:stroke .55s cubic-bezier(.4,0,.2,1);
  vector-effect:non-scaling-stroke;
}
/* The dent is carried by the recede and the lean; a drop-shadow on the
   whole well paints the SVG's own bounding circle, which reads as a
   second, wrong eyeball. */

/* the vignette, painted on the room itself so the eye is what is lit */
.room::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse at var(--vx,50%) var(--vy,50%),
    transparent 0%, transparent 18%, rgba(0,0,0,1) 104%);
  opacity:var(--vig,0);
}
.room-body{position:relative;z-index:2}
.room-top{position:relative;z-index:2}
/* The masthead sits above the vignette, but sitting above it does not help
   when the backdrop behind the glyphs has gone to black. Measured, the
   wordmark fell to 1.55:1 and the nav to 2.46:1 at full strength.

   So the masthead crosses over as the room dims. Toward a light neutral,
   NOT toward --ground: at full vignette the backdrop is black whatever the
   kit, and on the dark kits --ground is the dark colour, so mixing toward
   it drove outremer and eames to 2.2:1 -- worse than doing nothing. A warm
   white is the right target on all six. The headline needs no help; it
   measures 7:1 to 15:1 at full dark in every kit. */
.room--eye .room-top a{
  color:color-mix(in srgb, #F2F0EB calc(var(--vig,0) * 94%), var(--type));
}
/* the nav sits at .78 by design; against a black backdrop that last 22% is
   the difference between reading it and not, so it is given back as the
   room goes dark */
.room--eye .room-top nav a{opacity:calc(.78 + var(--vig,0) * .22)}
/* The vignette is radial from the eye, so it does not darken the masthead
   evenly: the wordmark is far from the eye and goes black, while the nav
   is much nearer and stays light. Whitened type then reads beautifully at
   one end of the masthead and washes out at the other -- the nav sat at
   3.7:1 on the light kits for exactly this reason. This lays an even
   scrim behind the masthead, so wherever the vignette happens to fall,
   the backdrop under that type is known and the crossover can be trusted.
   It rides the vignette, so at rest it does not exist. The scrim runs past
   the content column on both sides to reach the page edge, and the room
   clips that overhang -- without the clip those overhangs are real page
   width and the whole document gets a horizontal scrollbar. */
/* positioned, so the rain is contained by the room on purpose. z-index
   stays auto, so this does not create a stacking context. Hidden rather
   than clipped, and both ways: Safari does not cut off in the right place
   what moves about on a layer of its own inside a box that clips, and the
   eye does -- with whatever he has on his head, which went missing. There
   is nothing sticky in here for hiding to break, and nothing meant to be
   seen past the bottom of the room. */
.room--eye{overflow:hidden;position:relative}
.room--eye .room-top::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-50vw;right:-50vw;top:-3.5rem;bottom:-2rem;
  background:linear-gradient(to bottom,
    rgba(10,11,13,.86), rgba(10,11,13,.66) 58%, rgba(10,11,13,0));
  opacity:var(--vig,0);
}


@media (max-width:900px){
  .room-body--eye{grid-template-columns:1fr;grid-template-rows:auto auto;align-items:start}
  .eye-stage{--eye:clamp(8rem,34vw,12rem);align-self:start;
    justify-content:flex-start;align-items:flex-start}
  /* the eye is left-aligned here, so the annotation flips: the arrow leads
     and the text trails off to the right, where there is room for it */
  .eye-aside{left:0;transform:translate(0,.6rem);text-align:left;
    max-width:min(34ch,calc(100vw - 2.6rem))}
  .eye-aside.is-on{transform:translate(0,0)}
  .eye-note{align-self:flex-start;flex-direction:row-reverse;
    transform:translateX(2.1rem)}
  .eye-arrow{transform:scaleX(-1)}
  @keyframes eye-note-in{from{opacity:0;transform:translateX(2.1rem) translateY(-.4rem)}
    to{opacity:.62;transform:translateX(2.1rem) translateY(0)}}
}
@media (prefers-reduced-motion:reduce){
  .eye-hit,.eye-well,.room::after{transition:none}
  .eye-note{animation:none;opacity:.62}
  .eye-aside{transition:none}
}

/* ============================================================
   the companion (orb.js)
   The point of view once he has left the opener. He is drawn with the
   same classes as the opener's eye, so he wears whichever pairing the
   room was in; the rim is the one thing that has to be told his size,
   because a stroke that does not scale would be five times too heavy
   on something a fifth of the size.
   ============================================================ */
/* Beside the pointer he is fixed to the glass. Anywhere else the script
   makes him absolute and places him in the page's own coordinates, so he
   scrolls with it like anything else on it. */
.orb-mate{
  position:fixed;left:0;top:0;z-index:150;width:52px;height:52px;
  pointer-events:none;color:var(--type);
  opacity:0;visibility:hidden;
  transition:opacity .22s ease,visibility 0s linear .22s;
  will-change:transform;contain:layout style;
}
/* Whatever of his is placed in the page is in this layer, which is the
   size of the page and cuts off at its edges, so that nothing of his can
   make the page wider than the screen. The script keeps its height. */
.orb-layer{position:absolute;left:0;top:0;width:100%;height:0;overflow:hidden;pointer-events:none}
/* coming and going is done by the script, frame by frame */
.orb-mate.is-scripted{transition:none}
.orb-mate.is-on{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.orb-mate.is-snap{transition:none}
/* his drawing reaches 200 of his 160 units past him on every side, for
   what he has on (orb.js, PAD), so that none of it has to spill out */
.orb-mate-ball{position:absolute;inset:-125%;display:block}
.orb-mate .eye-rim{stroke-width:var(--rim,1.2px)}
/* ---------- his soul ----------
   Dead, it is his soul that turns up: the same ball, gone pale and
   see-through, with the old cartoon kit -- wings, a halo, a harp. It is
   drawn in the darker of the room's two colours, so it holds on the white
   of the page; on its way up through the room itself it switches to the
   room's own ink, which is what reads on that ground. */
.orb-mate .soul-part{display:none}
.orb-mate.is-soul .soul-part{display:inline}
.orb-mate.is-soul .eye-shade{display:none}
.orb-mate.is-soul,.orb-poof,.orb-note{
  --soul-line:var(--mark,var(--type));
  --soul-fill:color-mix(in srgb,var(--ground) 38%,#fff);
  --gold:#E2B13C;--gold-line:#7A5418;
}
.orb-mate.is-soul{color:var(--mark,var(--type))}
.orb-mate.is-soul.is-rising{--soul-line:var(--type);--soul-fill:#fff}
.orb-mate.is-soul .eye-disc,.orb-mate.is-soul .eye-sclera,.orb-mate.is-soul .eye-pupil{transition:none}
.orb-mate.is-soul .eye-disc{fill:var(--soul-fill);fill-opacity:.36}
.orb-mate.is-soul .eye-sclera{fill:#fff;fill-opacity:.72}
.orb-mate.is-soul .eye-iris{opacity:.5}
.orb-mate.is-soul .eye-pupil{fill:var(--mark,var(--type));fill-opacity:.78}
.orb-mate.is-soul .eye-rim{stroke:var(--soul-line);stroke-opacity:.62;stroke-width:var(--sw,1.2px)}
.orb-mate.is-soul .eye-socket{opacity:.3}
.soul-edge{fill:none;stroke:var(--soul-line);stroke-opacity:.62;stroke-width:var(--sw,1.2px);vector-effect:non-scaling-stroke}
.soul-wing{fill:var(--soul-fill);fill-opacity:.6;stroke:var(--soul-line);stroke-opacity:.62;
  stroke-width:var(--sw,1.2px);stroke-linejoin:round;vector-effect:non-scaling-stroke}
.soul-quill{fill:none;stroke:var(--soul-line);stroke-opacity:.36;stroke-width:var(--sw,1.2px);
  stroke-linecap:round;vector-effect:non-scaling-stroke}
.soul-halo ellipse{fill:none;stroke:var(--gold);stroke-width:5}
.soul-harp-frame{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round}
.soul-harp-box{fill:var(--gold);stroke:var(--gold-line);stroke-width:1.5;stroke-linejoin:round}
.soul-harp-str{fill:none;stroke:var(--gold-line);stroke-width:1.3;opacity:.85}
.soul-harp-scroll{fill:none;stroke:var(--gold);stroke-width:3}

/* The puff he comes and goes in. One outline round all of the puffs
   together: the ink layer is drawn a little larger, underneath, and its
   opacity is the group's, so where puffs overlap the line does not darken.
   It sits in front of him. */
.orb-poof{position:absolute;left:0;top:0;z-index:151;pointer-events:none;visibility:hidden;will-change:transform}
.orb-poof svg{display:block;width:100%;height:100%;overflow:visible}
.orb-poof-ink{fill:var(--soul-line);opacity:.62}
.orb-poof-white{fill:color-mix(in srgb,var(--ground) 14%,#fff)}
/* the soul's coming and going is all done by the script, frame by frame */
.orb-mate.is-soul{transition:none}

/* the tune, left hanging in the air behind him as he goes up */
.orb-note{
  position:fixed;left:0;top:0;z-index:150;pointer-events:none;
  width:var(--nw,16px);height:calc(var(--nw,16px) * 1.3);color:var(--type);opacity:0;
  animation:orb-note 1.6s cubic-bezier(.2,.6,.3,1) forwards;
}
.orb-note svg{display:block;width:100%;height:100%;overflow:visible}
.orb-note ellipse{fill:currentColor}
.orb-note path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
@keyframes orb-note{
  0%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(-12deg) scale(.5)}
  18%{opacity:.8}
  100%{opacity:0;transform:translate(var(--x1),var(--y1)) rotate(12deg) scale(1)}
}

/* The hole he comes up out of. It sits just behind him, and he is cut off
   at its lip, so whatever of him is below the lip is underground. It is
   in the page, where the thing he comes up beside is. */
.orb-hole{
  position:absolute;left:0;top:0;z-index:149;pointer-events:none;
  width:var(--hs,52px);height:calc(var(--hs,52px) * .26);
  border-radius:50%;background:#0B0C0E;
  transform:translate(calc(var(--hx,0px) - 50%),calc(var(--hy,0px) - 50%)) scale(var(--open,0));
  visibility:hidden;
}
.orb-hole.is-open{visibility:visible}

/* the work history: no line and no coin any more -- he is the marker --
   so the dates are back in the entries they belong to */
.promenade--orb .volume-when{
  display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ochre);margin-bottom:.4rem;
}

/* what I hold to: the learnings curve round him while he is in the
   middle of them. Only transforms, so nothing around them moves. */
#beliefs .laws{position:relative;transition:opacity .15s ease;
  /* each learning keeps its own height, so the ring is worked out from what
     is in a cell and not from the tallest cell in its row */
  align-items:start}
#beliefs .law{transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.2,.75,.2,1)}
#beliefs .laws.is-instant .law{transition:none}
#beliefs .laws.is-swapping{opacity:0}
@media (prefers-reduced-motion:reduce){#beliefs .law{transition:none}}

/* ---------- a point of view ----------
   The passages in a case study where I made a call. A panel in the
   colours of the case study's room, with a seat on its left: the eye
   leaves the contents when you reach one, takes the seat, and reads it.
   The seat is marked, faintly, so the panel still reads as his when he
   is somewhere else. */
.case-pov{
  position:relative;margin:2.25rem 0;
  padding:1.5rem 1.75rem 1.6rem 5rem;
  background:var(--pov-bg,var(--wash));
}
.case-pov > :first-child{margin-top:0}
.case-pov > :last-child{margin-bottom:0}
.case-pov::before{
  content:"";position:absolute;left:1rem;top:1.5rem;width:3rem;height:3rem;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--type,var(--ink)) 16%,transparent);
}
.case-pov[data-kb="purist"]{--pov-bg:color-mix(in srgb,var(--ground) 62%,var(--paper))}
.case-pov[data-kb="outremer"]{--pov-bg:color-mix(in srgb,var(--ground) 7%,var(--paper))}
.case-pov[data-kb="pampulha"]{--pov-bg:color-mix(in srgb,var(--ground) 62%,var(--paper))}
.case-pov[data-kb="ulm"]{--pov-bg:color-mix(in srgb,var(--ground) 34%,var(--paper))}
.case-pov[data-kb="eames"]{--pov-bg:color-mix(in srgb,var(--ground) 8%,var(--paper))}
.case-pov[data-kb="neutra"]{--pov-bg:color-mix(in srgb,var(--ground) 26%,var(--paper))}
/* the panel's own text stays in the page's colours, not the room's */
.case-pov{color:var(--ink)}
@media (max-width:40rem){
  .case-pov{padding:1.25rem 1.1rem 1.35rem 3.25rem;margin-inline:-.25rem}
  .case-pov::before{left:.75rem;top:1.25rem;width:1.75rem;height:1.75rem}
}

/* ---------- the dark, when he is poked ----------
   The room goes black around him -- its ground, and every word in it --
   and he is left floating on it. Quick to fall, slower to lift. */
.room.room--eye.is-dark{background-color:#000;
  transition:background-color .18s ease-in,color .55s cubic-bezier(.4,0,.2,1)}
.room--eye .room-top,.room--eye #opening-h1,.room--eye .eye-note{transition:filter .6s ease}
.room--eye.is-dark .room-top,.room--eye.is-dark #opening-h1,
.room--eye.is-dark .eye-note,.room--eye.is-dark .eye-aside{
  filter:brightness(0);transition:filter .18s ease-in}
.room--eye .eye-aside{transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.2,1),filter .6s ease}



/* ============================================================
   THE PICTURES ARE REELS
   The figure at the head of a case study, the three case study
   cards and the deliverables all carry a reel (reels.js) now: a
   product animation with a caption and one control.
   ============================================================ */

/* ---------- the head of a case study ----------
   One picture: the animation that says most about the project. It
   stands where the screenshot stood, at the width of the room. */
.case-open .case-hero{margin:clamp(1.75rem,4vw,2.5rem) 0 0}
.case-open .case-hero .reel{box-shadow:0 1px 2px rgba(22,24,28,.06), 0 10px 32px rgba(22,24,28,.1)}
/* its caption and its control are in the room's ink, not the page's */
.case-open[data-kb] .case-hero figcaption{color:inherit;opacity:.82}
.case-open[data-kb] .case-hero .reel-ctl{color:inherit;border-color:color-mix(in srgb,currentColor 62%,transparent)}
.case-open[data-kb] .case-hero .reel-ctl:hover{border-color:currentColor}
.case-open[data-kb] .case-hero .reel-ctl:active{background:color-mix(in srgb,currentColor 12%,transparent)}
/* a figure that is linked to from the home page stops clear of the bar */
.case-fig[id]{scroll-margin-top:5.5rem}

/* ---------- the contents ----------
   A list of the sections and nothing else: the figures that used to
   stand under it are in the opening of the case study already. He
   marks the section being read (orb.js), in the room the links keep
   for him on their left. Under 60rem the list is no longer beside
   the text, so it is not shown at all; the bar at the top still says
   which section is being read. */
@media (max-width:60rem){
  .case-rail{display:none}
}

/* ---------- the case study cards ----------
   The card is an article now, because a control cannot live inside
   a link: the title is the link, and it is stretched over the whole
   card, with the reel's control lifted clear of it. */
.spec{position:relative;cursor:pointer}
.spec-fig{aspect-ratio:auto;background:none;border-bottom:0;overflow:visible;margin:0}
.spec-fig .reel{border-radius:0;border-bottom:1px solid var(--rule-soft)}
.spec-fig .reel::after{display:none}
.spec-fig figcaption{padding:.6rem 0 0 1.15rem;font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}
.spec-fig .reel-ctl{position:relative;z-index:2;margin:.5rem 1.15rem 0 0}
.spec-in{padding-top:.8rem}
.spec-in h3 a{color:inherit;text-decoration:none}
.spec-in h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.spec-in h3 a:focus-visible{outline:none}
.spec-in h3 a:focus-visible::after{outline:3px solid var(--ochre);outline-offset:3px}

/* ---------- the deliverables ----------
   Each is a reel from a case study and a link to the place in the
   case study it comes from. */
.plate.plate--reel{border:0;background:none;display:grid}
.plate--reel .plate-link{display:block;grid-column:1 / -1;grid-row:1;border-radius:10px;text-decoration:none;color:inherit}
.plate--reel .plate-link:focus-visible{outline:3px solid var(--ochre);outline-offset:4px}
.plate--reel figcaption{padding:0;margin-top:.7rem;border-top:0;background:none;font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}


/* ---------- the wall of shame, where the room is one column ----------
   There is no space beside him here. Centred on him, the wall ran up
   over the headline and out through the floor of the room. So it hangs
   from the top of his own space, under the headline, and he goes across
   to its right edge and down to its middle, where he covers the ends of
   a few lines and none of the names. The room grows by what the wall
   needs, so the wall stays inside it. */
@media (max-width:900px){
  .eye-stage{--wall-w:min(13.5rem,58vw);--wall-h:17.5rem;
    transition:margin-bottom .95s cubic-bezier(.22,.8,.3,1)}
  .eye-stage.has-wall{margin-bottom:max(0px,calc(var(--wall-h) - var(--eye) * 1.1 - 2.3rem))}
  .shame{left:0;top:0;width:var(--wall-w);height:var(--wall-h);transform:translateX(-.6rem)}
  .eye-stage.has-wall .shame{transform:none}
  .shame-list{line-height:calc((var(--wall-h) - 4.5rem) / 6)}
  .eye-stage.has-wall .eye-hit{
    transform:translate(calc(var(--wall-w) + .5rem - var(--eye) * .55),
                        calc(var(--wall-h) / 2 - 1.56rem - var(--eye) * .55))}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){ .eye-stage{transition:none} }

/* ---------- the wall of shame, where the two columns are tight ----------
   Between the one-column room and a wide one, his column is the width
   of him and no more. Moved the full distance apart, the wall ran in
   over the end of the headline and he ran off the side of the screen.
   Here each goes only as far as there is room for: he as far as the
   margin of the page, and the wall as far as the space between the
   columns, which is never under the headline. */
@media (min-width:901px) and (max-width:1219px){
  .eye-stage.has-wall .eye-hit{transform:translateX(calc(clamp(1.25rem,5vw,4rem) - .9rem))}
  .eye-stage.has-wall .shame{
    transform:translate(calc(-50% - max(0px, var(--eye) * .55 + clamp(1.5rem,4vw,3.5rem) - 7.6rem)), -50%)}
}


/* ============================================================
   what he gets up to (idle.js)
   Before he has been poked he is in the middle of something when the
   page opens. His things are drawn the way he is: the room's two
   colours, mixed, with a line round them -- and gold, as on his soul,
   for the few things that ought to shine.
   ============================================================ */
/* Two drawings the size of him, behind him and in front, for whatever
   stands in the room or hangs in the air beside him. They are inside his
   button so that they are always where he is, and they take no clicks:
   poking the furniture is not poking him. What he has on is drawn with
   him, and that is him. */
.idle-scene{position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  overflow:visible;pointer-events:none;transition:opacity .22s ease}
.idle-scene--back{z-index:-1}
.idle-scene--front{z-index:1}
/* scrolled past, he has left the room and his things wait for him; when
   he comes home they are there again a moment after he is */
.idle-scene.is-away{opacity:0}
.idle-over,.idle-under,.idle-skin,.idle-oneye{transition:opacity .22s ease}
.idle-over.is-away,.idle-under.is-away,.idle-skin.is-away,.idle-oneye.is-away{opacity:0}
.idle-scene,.eye-svg{
  --i-ink:var(--type);
  --i-lit:color-mix(in srgb,var(--ground) 30%,#fff);
  --i-mid:color-mix(in srgb,var(--type) 15%,var(--ground));
  --i-dim:color-mix(in srgb,var(--type) 36%,var(--ground));
  --i-dark:color-mix(in srgb,var(--type) 68%,var(--ground));
  --gold:#E2B13C;
}
/* the weight of the line is in his own units, so it is as heavy on him as
   his own outline whatever size he is; a thing drawn larger or smaller
   than it was made says by how much (--i-k), and its lines are kept the
   same weight. Away from the opener he is much smaller, and orb.js makes
   the line heavier (--i-w) so that what he has on still reads. */
.i-l{fill:none;stroke:var(--i-ink);stroke-width:calc(var(--i-w,1.6) * 1px / var(--i-k,1));stroke-linecap:round;stroke-linejoin:round}
.i-s{stroke:var(--i-ink);stroke-width:calc(var(--i-w,1.6) * 1px / var(--i-k,1));stroke-linecap:round;stroke-linejoin:round}
.i-t{stroke-width:calc(var(--i-wt,1.05) * 1px / var(--i-k,1))}
.i-n{fill:none}
.i-lit{fill:var(--i-lit)}
.i-mid{fill:var(--i-mid)}
.i-dim{fill:var(--i-dim)}
.i-dark{fill:var(--i-dark)}
.i-ink{fill:var(--i-ink)}
.i-ground{fill:var(--ground)}
.i-gold{fill:var(--gold)}
.i-sg{stroke:var(--gold)}
.i-sl{stroke:var(--i-lit)}
.i-sd{stroke:var(--i-dim)}
.i-sdk{stroke:var(--i-dark)}
.i-sm{stroke:var(--i-mid)}
.i-o5{opacity:.5}
.i-o3{opacity:.3}
/* the few words there are on his things -- the mug, the slides -- in the
   site's own type, set from the middle; each says how big it is (idle.js,
   words). They are on light things, so they are in the darker of the
   room's two colours (--mark), whichever that is: on the dark pairings
   the ink is the light one, and would not read. So is any lettering that
   is drawn rather than set (i-sk). */
/* the dark of a room in front of a lit stage: the ground, darkened, the
   same way whatever the pairing -- from the stage at the back (1) to the
   seats nearest you (4) */
.i-sh1{fill:color-mix(in srgb,var(--ground) 66%,#000)}
.i-sh2{fill:color-mix(in srgb,var(--ground) 50%,#000)}
.i-sh3{fill:color-mix(in srgb,var(--ground) 38%,#000)}
.i-sh4{fill:color-mix(in srgb,var(--ground) 25%,#000)}
.i-word{font-family:var(--sans);font-weight:800;font-stretch:84%;fill:var(--mark,var(--i-ink));text-anchor:middle;
  font-kerning:normal;pointer-events:none}
.i-sk{stroke:var(--mark,var(--i-ink))}
/* The first poke puts the room in the dark, and what belongs to the room
   goes with it: by the time the light comes back it has been cleared
   away. What is his stays lit, as he does, and is seen to go. */
.idle-set{transition:opacity .2s ease-in .06s}
.idle-set.is-going{opacity:0}
@media (prefers-reduced-motion:reduce){ .idle-scene,.idle-set,.idle-over,.idle-under,.idle-skin,.idle-oneye{transition:none} }