/* shell2.css — the inner pages (Projects, Craft, About, Contact) in the home page's dark shell.
   The site's own tokens are flipped, so every component follows. 13 Oct: the pages were rebuilt to the structure Tony agreed to
   (one line and one fact per screen, the rest behind a closed Read more), so the rules of the older page parts are gone from here;
   the file before that night is antoniz-tools/shell2.before-overnight.css. 13 Oct, morning: the Craft page is back (its part is below,
   after Projects), and About has its studio screen again; the file before that is antoniz-tools/shell2.before-restore.css.
   Type follows the type system (assets/type.css) whether that sheet is switched on or not: Jost Light 300 for the quiet part of a big
   title, Jost Semibold 600 for the point of a title, names, numbers and calls to action, Jost Medium 500 for list titles,
   Inter Regular 400 for reading, Inter Semibold 600 for small labels. */
body.shell2{--paper:#0B0C10;--ink:#F7F5F1;--sub:rgba(247,245,241,.72);--line:rgba(247,245,241,.18);--mute:rgba(247,245,241,.66);background:#0B0C10;color:#F7F5F1}
/* built-dark sections: restore their tokens so they stay dark with light text */
.shell2 .end,.shell2 .foot,.shell2 .intro,.shell2 .films,.shell2 .reel,.shell2 .chero,.shell2 .chap,.shell2 .fplayer,.shell2 .player{--paper:#F4F1EA;--ink:#0B0C10;--sub:rgba(244,241,234,.7);--line:rgba(244,241,234,.18)}
/* header: always the dark shell's header. On Projects and on Craft one band is paper (the identities), so there the header may follow the
   band under it (site.js reads data-hdr); everywhere else it is fixed. */
.shell2 .hdr{--hdr-bg:#0B0C10;--hdr-fg:#F7F5F1;--hdr-mk:#F7F5F1}
.shell2:not(.projects-page):not(.work-page) .hdr{--hdr-bg:#0B0C10!important;--hdr-fg:#F7F5F1!important;--hdr-mk:#F7F5F1!important}
.shell2 .mk{color:#F7F5F1}
.shell2 .where{box-shadow:0 0 0 1px rgba(247,245,241,.22)}
.shell2 .route{color:#F7F5F1}
.shell2 .intro .cue .play.down svg{width:12px;height:12px}
/* the firm's logo: its black script cannot sit on the dark ground, so it is shown reversed to white (one colour, shape untouched) */
.shell2 img[src*="antbrush-logo"]{filter:brightness(0) invert(1)}

/* ---------- shared pieces ---------- */
.shell2 b.tw{font-weight:600;letter-spacing:-.024em}                      /* the point of a title */
.shell2 :is(.pj-head,.pg-top,.ab2,.ct) .label{display:flex;gap:12px;align-items:center;margin:0;color:rgba(247,245,241,.72);font-weight:600;letter-spacing:.16em}
.shell2 :is(.pj-head,.ct) .label .mk{width:20px;height:20px}
/* the mark's single signal, as a sign: its own shape, only paper or ink */
.sg1{display:inline-block;flex:none;height:1em;aspect-ratio:25.68/51.46;background:currentColor;-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.ply{display:inline-block;flex:none;width:0;height:0;border-left:.74em solid currentColor;border-top:.46em solid transparent;border-bottom:.46em solid transparent}
/* Read more: a quiet line with the single signal as its sign. Closed by default; never a box. */
.rm>summary,.mv>summary{list-style:none;cursor:pointer}
.rm>summary::-webkit-details-marker,.mv>summary::-webkit-details-marker{display:none}
.rm>summary,.mv-rm{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:600 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72);white-space:nowrap}
.rm>summary .sg1,.mv-rm .sg1{font-size:15px;color:#F7F5F1}
.rm>summary::after,.mv-rm::after{content:"";width:clamp(28px,3.4vw,52px);height:1px;background:currentColor;opacity:.5;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.rm>summary:hover,.mv>summary:hover .mv-rm{color:#F7F5F1}
.rm>summary:hover::after,.mv>summary:hover .mv-rm::after,.rm[open]>summary::after,.mv[open] .mv-rm::after{width:clamp(48px,6vw,96px)}
.rm-c,.rm[open]>summary .rm-o,.mv[open]>summary .rm-o{display:none}
.rm[open]>summary .rm-c,.mv[open]>summary .rm-c{display:inline}
.rm>summary:focus-visible,.mv>summary:focus-visible{outline:2px solid #F7F5F1;outline-offset:4px}
.shell2 :is(.ab-names,.ab-years,.ct-more,.awall) li{font-family:inherit}
.rm-b{padding:6px 0 12px;max-width:62ch}
.rm-b p{margin:0 0 14px;font:400 clamp(16px,1.15vw,17.5px)/1.62 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.86)}
@media (prefers-reduced-motion:reduce){.rm>summary::after,.mv-rm::after{transition:none}}

/* ======================================================= Projects ======================================================= */
.pj-main{overflow-x:clip}                                                   /* what comes out of a slash may pass the page margin, never start a sideways scroll */
.shell2 .pj-head{padding-top:clamp(108px,10.5vw,164px);padding-bottom:clamp(30px,3.6vw,56px)}
.pj-head h1{margin:20px 0 0;font:300 clamp(40px,4.7vw,76px)/1.02 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.pj-bar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 40px;margin-top:clamp(20px,2.4vw,34px)}
.pj-ledew{min-width:0}
.pj-ledew .rm{margin-top:2px}                                              /* the second sentence of the page's introduction (12 Oct), behind Read more */
.rm-b p.pj-was{font:600 clamp(18px,1.4vw,21px)/1.3 "Jost",system-ui,sans-serif;letter-spacing:-.006em;color:#F7F5F1}   /* the line a card carried on 12 October (DHA: "A shape with something to say.") opens its Read more */
.pj-lede{margin:0;font:400 clamp(17px,1.35vw,20px)/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
/* choose by kind: radio buttons, so it works without script. A choice shows the cards of that kind and nothing else (13 Oct, the fixing pass) */
.pj-pick{border:0;margin:0 -12px 0 0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:0 2px}
.pj-pick legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pj-pick label{position:relative;display:inline-flex;align-items:baseline;gap:7px;padding:14px 12px;cursor:pointer;font:500 17px/1 "Jost",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.pj-pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pj-pick span{display:inline-flex;align-items:baseline;gap:7px}
.pj-pick span::before{content:"";align-self:center;height:.82em;aspect-ratio:25.68/51.46;background:currentColor;opacity:0;-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.pj-pick small{font:400 12px/1 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72);font-variant-numeric:tabular-nums}
.pj-pick label:hover{color:#F7F5F1}
.pj-pick input:checked+span{color:#F7F5F1;font-weight:600}
.pj-pick input:checked+span::before{opacity:1}
.pj-pick input:focus-visible+span{outline:2px solid #F7F5F1;outline-offset:6px}

.shell2 .plist{display:block;padding-bottom:0}
.shell2 .pj{display:block;position:relative;padding:clamp(16px,1.5vw,22px) 0 clamp(80px,10vw,150px);border-top:1px solid rgba(247,245,241,.18);scroll-margin-top:84px}
.pj-k{display:flex;align-items:baseline;gap:14px;margin:0;font:600 12px/1.4 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.pj-k b{font:600 15px/1 "Jost",system-ui,sans-serif;letter-spacing:.04em;color:#F7F5F1;font-variant-numeric:lining-nums tabular-nums}
.pj-k .pj-where{margin-left:auto;text-align:right}
/* the big name leads */
.shell2 .pj-name{margin:clamp(22px,2.8vw,44px) 0 0;font:600 clamp(36px,5.6vw,92px)/.98 "Jost",system-ui,sans-serif!important;letter-spacing:-.03em;text-transform:none;color:#F7F5F1;text-wrap:balance}
.pj-name a{color:inherit;text-decoration:none}
.pj-name a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.ab-mcx:focus-visible,.pj-name a:focus-visible,.pj-open:focus-visible,.pj-pic:focus-visible,.pg-wall a:focus-visible,.ab2 a:focus-visible,.ct a:focus-visible{outline:2px solid #F7F5F1;outline-offset:5px}
.pj-row{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:clamp(28px,4.4vw,72px);align-items:stretch;margin-top:clamp(26px,3.2vw,48px)}
.pj-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pj-line{margin:0;font:300 clamp(40px,2.8vw,46px)/1.1 "Jost",system-ui,sans-serif;letter-spacing:-.012em;color:#F7F5F1;text-wrap:balance}
.pj-fact{margin:clamp(14px,1.5vw,22px) 0 0;font:600 clamp(16px,1.3vw,19px)/1.35 "Jost",system-ui,sans-serif;letter-spacing:.005em;color:#F7F5F1}
.pj-go{margin:auto 0 0;padding-top:calc(clamp(22px,2.6vw,40px) - 12px)}
/* an underlined call: the line is drawn as a background, so the link itself can be 44 px tall for a finger while the line stays 5 px under the words */
.pj-open,.ab-cv,.ct-more a{--ul:rgba(247,245,241,.5);background:linear-gradient(var(--ul),var(--ul)) 0 calc(100% - var(--ul-y,6px))/100% 1px no-repeat}
.pj-open:hover,.ab-cv:hover{--ul:#F7F5F1}
.pj-open{display:inline-flex;gap:10px;font:600 17px/1.2 "Jost",system-ui,sans-serif;color:#F7F5F1;text-decoration:none;padding:12px 0}
.pj-open i,.pg-cap i{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pj-open:hover i,.pg-link:hover .pg-cap i{transform:translateX(6px)}
.pj-txt .rm{margin-top:2px}
/* the plate: the lead picture whole, at its own ratio. Only its width is set; its height follows. */
.pj-stage{position:relative;min-width:0;display:flex;justify-content:flex-end;align-items:flex-start}
.pj-pic{display:block;color:inherit;text-decoration:none;width:min(100%,calc(max(280px,100svh - 330px)*var(--ar,1.6)))}        /* 330 px: the header, the label, the name and "Play the film" (13 Oct: on a 1366 x 657 laptop nine cards ran past the screen) */
.pj-pic img{display:block;width:100%;height:auto}
.pj-tall .pj-pic{width:min(100%,calc(64svh*var(--ar,1)))}
/* a card whose picture is an upright poster and has no window: the poster stands beside the NAME and takes the card's whole height, so it carries
   the screen and the words sit against it (13 Oct: it was a small sheet at the far right, under the name, with open ground on both sides) */
@media (min-width:861px){
  .shell2 .pj.pj-tall:not(.pj-win){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;gap:0 clamp(28px,4.4vw,72px);align-items:stretch}
  .pj-tall:not(.pj-win)>.pj-k{grid-column:1/-1}
  .pj-tall:not(.pj-win)>.pj-name{grid-column:1;grid-row:2}
  .pj-tall:not(.pj-win)>.pj-row{display:contents}
  .pj-tall:not(.pj-win) .pj-txt{grid-column:1;grid-row:3;margin-top:clamp(26px,3.2vw,48px)}
  .pj-tall:not(.pj-win) .pj-stage{grid-column:2;grid-row:2/4;margin-top:clamp(22px,2.8vw,44px);align-self:start}
  .pj-tall:not(.pj-win) .pj-pic{width:calc(max(320px,min(78svh,100svh - 200px))*var(--ar,1))}
}
.pj-play{display:flex;align-items:center;gap:10px;margin-top:14px;font:600 17px/1 "Jost",system-ui,sans-serif;color:#F7F5F1;transition:color .3s}
.pj-play small{font:400 13px/1 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72);font-variant-numeric:tabular-nums}
.pj-film:hover .pj-play,.pg-film:hover .pg-cap{color:#00C8D7}
/* a card with a window: the slash stands on its floor at the edge of the stage, the work comes out of it, and the plate sits with the words */
.pj-win .pj-txt .pj-pic{width:min(100%,calc(clamp(130px,100svh - 600px,30svh)*var(--ar,1.6)));margin-top:clamp(22px,2.4vw,36px)}
.pj-win.pj-tall .pj-txt .pj-pic{width:min(62%,calc(38svh*var(--ar,1)))}
.pj-win{--sgw-h:clamp(300px,min(62svh,40vw),660px)}
.pj-win .pj-stage{align-items:flex-end;min-height:var(--sgw-h)}
.pj-win .pj-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(247,245,241,.18)}   /* the floor */
.pj-out-right .pj-stage{justify-content:flex-start;padding-left:16%}
/* a window whose card has a film: the whole window, and what comes out of it, plays the film (the pointer's second way in; the keyboard meets the film once, at its cover) */
.pj-winplay{display:block;flex:none;color:inherit;text-decoration:none;cursor:pointer}
.pj-winplay .sgw-out img{pointer-events:auto}
.pj-winplay:focus-visible{outline:2px solid #F7F5F1;outline-offset:6px}
/* tonight's movement: what comes out of a slash moves a little further out as the card scrolls through the screen. CSS only; still without support, still under reduced motion. */
@media (prefers-reduced-motion:no-preference){@supports (animation-timeline:view()){
  .pj-sgw .sgw-out img,.pj-sgw.pj-reg .sgw-in img{animation:pj-out-l linear both;animation-timeline:view();animation-range:cover 5% cover 95%}
  .pj-sgw[data-out="right"] .sgw-out img{animation-name:pj-out-r}
  @keyframes pj-out-l{from{transform:translateX(7%)}to{transform:translateX(-8%)}}
  @keyframes pj-out-r{from{transform:translateX(-7%)}to{transform:translateX(8%)}}
}}
/* chosen by kind: only the cards of that kind stay, so the first screen after a choice is what was chosen (13 Oct: the others used to fold to
   a grey row each and filled that screen). "All" brings every card back. The guide at the foot counts all twelve, so it rests while a kind is chosen. */
:is(.pj-main:has(#k-identity:checked) .pj:not([data-k~="identity"]),.pj-main:has(#k-campaign:checked) .pj:not([data-k~="campaign"]),.pj-main:has(#k-exhibition:checked) .pj:not([data-k~="exhibition"]),.pj-main:has(#k-live:checked) .pj:not([data-k~="live"]),.pj-main:has(#k-film:checked) .pj:not([data-k~="film"])){display:none}
body:has(.pj-pick input:not(#k-all):checked) .where{display:none}
:is(.pj-main:has(#k-identity:checked) .pg:not([data-k~="identity"]),.pj-main:has(#k-campaign:checked) .pg:not([data-k~="campaign"]),.pj-main:has(#k-exhibition:checked) .pg:not([data-k~="exhibition"]),.pj-main:has(#k-live:checked) .pg:not([data-k~="live"]),.pj-main:has(#k-film:checked) .pg:not([data-k~="film"])){display:none}

/* ---- beyond the twelve: the rest of the Craft page, lighter. Compact groups by kind; every picture whole. ---- */
.pg-top{padding-top:0;padding-bottom:clamp(6px,1vw,16px)}
.pg-top::before{content:"";display:block;height:1px;background:rgba(247,245,241,.18);margin-bottom:clamp(64px,8vw,128px)}
.pg-top h2{margin:20px 0 0;font:300 clamp(40px,4.7vw,76px)/1.02 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.pg-all{margin:clamp(14px,1.6vw,24px) 0 0}
.pg{padding:clamp(44px,5.6vw,88px) 0}
.pg-h{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:6px clamp(28px,4.4vw,72px);align-items:baseline;margin-bottom:clamp(26px,3vw,44px)}
.pg-h h3{grid-row:1/span 3;margin:0;font:600 clamp(34px,3.6vw,58px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.024em}
.pg-h>:not(h3){grid-column:2}
.pg-line{margin:0;font:500 clamp(20px,1.7vw,26px)/1.25 "Jost",system-ui,sans-serif;color:#F7F5F1}
.pg-fact{margin:0;font:400 17px/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
/* a wall of whole pictures: each row shares one height, each picture keeps its own ratio (width and grow follow the ratio) */
.pg-wall{--h:clamp(120px,14.5vw,224px);list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(22px,2.4vw,34px) clamp(10px,1.2vw,18px)}
.pg-wall li{flex:var(--ar,1.5) 1 calc(var(--h)*var(--ar,1.5));min-width:0;max-width:calc(var(--h)*var(--ar,1.5)*1.45)}
.pg-wall::after{content:"";flex:1000 1 0}
.pg-wall li.brk{flex:0 0 100%;max-width:none;height:0;margin-top:calc(-1*clamp(22px,2.4vw,34px))}
.pg-wall li.fil{flex:1000 1 0;max-width:none;height:0}
#g-campaign .pg-wall{--h:clamp(130px,16.5vw,256px)}
.pg-wall img{display:block;width:100%;height:auto}
.pg-wall a{display:block;color:inherit;text-decoration:none}
.pg-cap{display:block;margin-top:9px;font:400 13px/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72);transition:color .3s}
.pg-cap .ply{font-size:11px;margin-right:8px;color:#F7F5F1}
.pg-link:hover .pg-cap{color:#F7F5F1}
/* the identities stand on paper: a mark needs its own ground, and nothing is put behind it (the white of each file melts into the paper) */
.pg-paper{background:#F7F5F1;color:#0B0C10;margin:clamp(20px,2.4vw,40px) 0}
.pg-paper .pg-line{color:#0B0C10}
.pg-paper .pg-cap{color:rgba(11,12,16,.7)}
.pg-paper .pg-wall{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,56px) clamp(20px,3vw,48px)}        /* three to a row, each mark about 380 px (they were six small ones) */
.pg-paper .pg-wall li{display:flex;flex-direction:column}
.pg-paper .pg-wall img{width:min(100%,400px);margin:0 auto}
.pg-paper .pg-cap{text-align:center;font-size:15px}
.pg-paper .pg-wall::after{display:none}
.pg-paper .pg-wall li{max-width:none}
.pg-paper .pg-wall img{mix-blend-mode:multiply}
/* the artists: names only */
.pg-names{margin-top:clamp(44px,5.6vw,88px)}
.shell2 .pg-names .awall{margin-top:16px;font-weight:600;font-size:clamp(26px,3.5vw,56px);letter-spacing:-.024em}
.pg-note{margin:18px 0 0;font:400 15px/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.shell2 .awall li i{font-size:max(12px,.28em)}                              /* the note after a name was 7 px on a phone */
/* Projects on a desktop: the guide stands at the right, clear of the column where every card keeps "Open the project" and "Read more" */
@media (min-width:761px){.projects-page .where{left:auto;right:max(16px,env(safe-area-inset-right))}}
.pj-main>.pg:last-child{padding-bottom:clamp(80px,10vw,150px)}

/* ======================================================= Craft =======================================================
   13 Oct, morning: the Craft page is back, whole (Tony: "All"). Its page is work/index.html with assets/creative.css and creative.js, as on
   12 October; nothing in those two files is changed. This part sets it in the new look:
     type      titles light with the last phrase bold (b.tw), a one-word chapter title bold whole; names and numbers Semibold; row titles
               Medium; reading text Inter Regular; labels Inter Semibold. Nothing thin.
     pictures  every picture of his work WHOLE, at its own ratio. Rows share one height and each picture keeps its own width (the pinned
               reels, the rows, the pairs, the further stands); no box is given a ratio that is not the picture's own, and no object-fit.
     words     one line under each chapter title, a second quiet line where the page had one; the long text behind Read more.
     grounds   dark throughout; the identities stand on paper (a mark needs its own ground, and nothing is put behind it). No bordered chips. */
.work-page #main{overflow-x:clip}
/* the opening */
.shell2 .chero{padding:110px 0 clamp(120px,19vh,210px)}
.shell2 .chero .label{font:600 13px/1.4 "Inter",system-ui,sans-serif;letter-spacing:.16em;gap:12px;margin-bottom:22px}
.shell2 .chero .label .mk{width:20px;height:20px}
.shell2 .ch1{font-size:clamp(46px,8.4vw,140px);line-height:.94;letter-spacing:-.018em}
.shell2 .ch1 .ln+.ln>span{font-weight:inherit}                               /* the bold is the mark b.tw, not a rule on the second line */
.shell2 .ch1 b.tw{letter-spacing:-.03em}
.shell2 .cline{pointer-events:none;bottom:2.5vh}                             /* the energy line (img.cline) never sits on the chapter links */
/* one line, then a quiet line: the same two styles as a group on Projects (.pg-line, .pg-fact) */
.work-page .cln,.work-page .films .fh p.cln{max-width:34em;margin:clamp(16px,1.7vw,24px) 0 0;font:500 clamp(20px,1.7vw,26px)/1.25 "Jost",system-ui,sans-serif;letter-spacing:-.006em;color:#F7F5F1;text-wrap:balance}
.work-page .cfact,.work-page .films .fh p.cfact{max-width:46em;margin:10px 0 0;font:400 17px/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.work-page .chero .cln{margin-top:clamp(22px,2.4vw,34px);font-size:clamp(20px,1.9vw,29px);max-width:30em}
.shell2 .cnav{position:relative;z-index:2;margin-top:clamp(26px,2.8vw,40px);gap:6px 30px}
.shell2 .cnav a{font:500 17px/1.2 "Jost",system-ui,sans-serif;padding:14px 0 9px;   /* 14 and 9 (was 12 and 8): a chapter link is 44 px tall, a finger's height (it was 41) */border-bottom-color:rgba(247,245,241,.34)}
.shell2 .cnav a i{font:600 13px/1 "Jost",system-ui,sans-serif;letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums}
.shell2 .cnav a:hover{border-bottom-color:#00C8D7}
.shell2 .cnav a:focus-visible,.work-page .rlink:focus-visible,.work-page .more13 summary:focus-visible,.work-page .istep a:focus-visible,.work-page button.ccard:focus-visible,.work-page .film:focus-visible{outline:2px solid currentColor;outline-offset:4px}
/* chapter heads */
.shell2 .chap{padding:clamp(96px,12vw,176px) 0 clamp(20px,2.6vw,40px);scroll-margin-top:0}
.shell2 :is(.chap,.ident,.cend,.films) h2{font:300 clamp(44px,5.6vw,92px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.014em;margin:0}
.shell2 :is(.chap,.ident,.films) h2 b.tw{letter-spacing:-.03em}
.work-page .films h2::before{content:none}
.shell2 .cnum,.work-page .films .fh p.cnum{margin:0 0 14px;font:600 15px/1 "Jost",system-ui,sans-serif;letter-spacing:.14em;font-variant-numeric:lining-nums tabular-nums;color:#00C8D7}
.work-page .chap .rm{margin-top:6px}
.work-page .chap .rm-b .cshows{margin:0;max-width:none;font-size:15px;line-height:1.7;color:rgba(247,245,241,.72)}
/* the head of a piece: its number, whose it is, its title, one line, what it is */
/* three columns: the number; whose it is and the title; one line with, under it, what it is (the tags stood in a fourth column and squeezed the title) */
.shell2 .rhead{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr);gap:8px clamp(18px,2.4vw,36px);align-items:start}
.shell2 .rhead>.rnum{padding-top:2px}
.shell2 .rhead>.ridea{padding-top:1px}
.shell2 .rhead>.rnum,.shell2 .rhead>div{grid-row:1/span 3}
.shell2 .rhead>.ridea{grid-column:3;grid-row:1}
.shell2 .rhead>.rchips{grid-column:3;grid-row:2;justify-content:flex-start}
.shell2 .rhead>.ridea:last-child{grid-row:1/span 3}
/* one line under each piece's title (13 Oct, the second fixing pass): the first sentence stands, the others are behind Read more, between the line and the tags */
.shell2 .rhead>.rd{grid-column:3;grid-row:2;margin:-6px 0 -4px}
.shell2 .rhead>.rd~.rchips{grid-row:3}
.shell2 .rhead .rd .rm-b{padding:0 0 10px;max-width:none}
.shell2 .rhead .rd .rm-b p{margin:0;font:400 clamp(15px,1.1vw,17px)/1.55 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.78)}
.shell2 .cc:empty{display:none}
.shell2 .rnum{font:600 14px/1 "Jost",system-ui,sans-serif;letter-spacing:.1em;font-variant-numeric:lining-nums tabular-nums;color:#00C8D7}
.shell2 .rclient{margin:0 0 8px;font:600 12px/1.45 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.shell2 :is(.rhead,.artists) h3{font:500 clamp(24px,2.6vw,42px)/1.08 "Jost",system-ui,sans-serif;letter-spacing:-.016em;margin:0}
.shell2 .ridea{font:400 clamp(15px,1.1vw,17px)/1.55 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.78)}
.shell2 .rchips{gap:4px 0}
.shell2 .chip{border:0;padding:0;font:600 11.5px/1.5 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.shell2 .chip+.chip::before{content:"·";margin:0 .7em;color:rgba(247,245,241,.5)}
.work-page .rlink{font-weight:600;color:#F7F5F1;text-decoration:underline;text-decoration-color:rgba(247,245,241,.5);text-decoration-thickness:1px;text-underline-offset:4px}
.work-page .rlink:hover{color:#00C8D7;text-decoration-color:currentColor}
/* captions: the name in Jost Semibold, the rest read in Inter */
.shell2 .cc{font:400 14px/1.45 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.shell2 .cc b{font:600 16px/1.3 "Jost",system-ui,sans-serif;letter-spacing:-.004em;color:#F7F5F1;margin-bottom:3px}
/* ---- pictures whole ---- */
/* a card's picture is never clipped and never enlarged inside its own frame (creative.css scaled it 4 % inside a clipping box until it was seen) */
.shell2 .cm{overflow:visible}
.shell2 .cm img{transform:none!important}
/* the pinned reels (desktop): one height for the row, each picture as wide as its own ratio asks. The card takes the picture's width, so
   nothing is cut at a card's edge (12 Oct: a card was held to 50vh x ratio while its picture stood 60vh tall). */
@media (min-width:861px){
  .shell2 .rpin{padding-bottom:84px;box-sizing:border-box}                  /* the captions stay clear of the "where you are" chip */
  .shell2 .reel{--rh:clamp(220px,calc(100svh - 450px),56vh)}
  .shell2 .reel:has(.rd[open]){--rh:clamp(200px,calc(100svh - 540px),48vh)}  /* an opened Read more takes its room from the pictures, so the captions stay inside the pinned screen */
  /* as wide as its ratio asks at the row's height, and never wider than the page: the five steps (4:1) and the gate (3:1) are seen whole at once */
  .shell2 .reel .cm{height:auto;aspect-ratio:var(--ar,1.5);width:min(calc(var(--rh)*var(--ar,1.5)),calc(100vw - 2*var(--g,24px)))}
  .shell2 .reel .cm img{width:100%;height:100%}
  .shell2 .reel .ccard{max-width:none}
  .shell2 .reel .cc{max-width:min(48ch,100%)}
  .shell2 .reel .ccard{display:flex;flex-direction:column}
  .shell2 .reel .ccard .cc{width:0;min-width:100%}                          /* a caption never widens its card: the card is as wide as the picture */
}
/* a row of one to four pieces: the pictures share the row's height, each at its own ratio, never taller than 58 % of the screen */
.shell2 .track.static .ccard{max-width:calc(62svh*var(--ar,1.5))}
/* a row of one or two upright pictures (.rside, set by the generator; 4.7 to 4.9): a spread. The words at the left, the pictures at the right, large and whole,
   as a card on Projects is. They stood at the left of an empty screen (13 Oct, the second fixing pass). */
@media (min-width:1100px){
  .shell2 .rside .rwrap{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);gap:0 clamp(28px,4.4vw,72px);align-items:start;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--g);box-sizing:border-box}
  .shell2 .rside .rhead.wrap{max-width:none;margin:0;padding:0;grid-template-columns:auto minmax(0,1fr);gap:8px clamp(14px,1.6vw,24px)}
  .shell2 .rside .rhead>.rnum{grid-column:1;grid-row:1}
  .shell2 .rside .rhead>div{grid-column:2;grid-row:1}
  .shell2 .rside .rhead>.ridea,.shell2 .rside .rhead>.rd,.shell2 .rside .rhead>.rchips,.shell2 .rside .rhead>.rd~.rchips{grid-column:2;grid-row:auto}
  .shell2 .rside .rhead>.ridea{margin-top:clamp(12px,1.4vw,20px);font-size:clamp(16px,1.2vw,18px)}
  .shell2 .rside .rhead h3{font-size:clamp(28px,3vw,48px)}
  .shell2 .rside .track.static{padding:0;justify-content:flex-end}
  .shell2 .rside .track.static .ccard{max-width:calc(min(70svh,100svh - 230px)*var(--ar,1.5))}
}
.shell2 .track.static{flex-wrap:wrap;row-gap:clamp(22px,2.4vw,34px)}        /* a row breaks only where the page says so (i.rbrk): Liwa's four, two and two */
.rbrk{flex:0 0 100%;height:0;margin-top:calc(-1*clamp(22px,2.4vw,34px))}
/* the first sheets: each card opens its project. One link per card; its target covers the whole card. */
.shell2 #ideas-reel .ccard{position:relative}
.shell2 .clink{color:inherit;text-decoration:none}
.shell2 .clink::after{content:"";position:absolute;inset:0}
.shell2 .clink .cgo{font-style:normal;display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shell2 .ccard:hover .clink b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.shell2 .ccard:hover .clink .cgo{transform:translateX(5px)}
.shell2 .clink:focus-visible{outline:0}
.shell2 .clink:focus-visible::after{outline:2px solid #F7F5F1;outline-offset:-2px}
/* designed, then built: the design and what was built from it side by side, both whole, at one height (they lay one over the other in a
   4:3 box with a wipe between them, so each was cut twice). A hairline joins the two; the words under each say which is which. */
.prs{margin-top:clamp(20px,2.4vw,34px);display:grid;gap:clamp(44px,5.4vw,84px)}
.pr2{margin:0}
.pr2-row{display:flex;align-items:flex-start;gap:clamp(10px,1.2vw,18px);max-width:calc(60svh*var(--sum,3) + (var(--n,2) - 1)*clamp(10px,1.2vw,18px))}
.pr2-i{flex:var(--ar,1.5) 1 0;min-width:0;display:block}
.pr2-i img{display:block;width:100%;height:auto}
.pr2-i em{display:flex;align-items:center;gap:10px;margin-top:11px;font:600 12px/1 "Inter",system-ui,sans-serif;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.pr2-i em::before{content:"";flex:none;height:1em;aspect-ratio:25.68/51.46;background:currentColor;-webkit-mask:var(--sig) center/contain no-repeat;mask:var(--sig) center/contain no-repeat}
.pr2-b em{color:#F7F5F1}
.pr2 figcaption{margin-top:clamp(14px,1.6vw,22px);max-width:62ch;font:400 clamp(15px,1.1vw,17px)/1.55 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.78)}
.pr2 figcaption b{display:block;margin-bottom:4px;font:600 clamp(20px,1.7vw,26px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.012em;color:#F7F5F1}
/* twelve more stands: a wall of whole pictures, each row at one height (it was a grid of four equal columns) */
.shell2 .more13{margin-top:clamp(28px,3.4vw,52px)}
.shell2 .more13 summary{display:inline-flex;align-items:center;min-height:44px;font:600 17px/1.2 "Jost",system-ui,sans-serif;color:#F7F5F1;border-bottom:0;padding:0;text-decoration:underline;text-decoration-color:rgba(247,245,241,.5);text-decoration-thickness:1px;text-underline-offset:6px}
.shell2 .more13 summary:hover{color:#00C8D7}
.shell2 .moregrid{--h:clamp(120px,14.5vw,224px);display:flex;flex-wrap:wrap;gap:clamp(22px,2.4vw,34px) clamp(10px,1.2vw,18px);margin-top:clamp(18px,2vw,28px)}
.shell2 .moregrid .ccard{flex:var(--ar,1.5) 1 calc(var(--h)*var(--ar,1.5));min-width:0;max-width:calc(var(--h)*var(--ar,1.5)*1.45)}
.shell2 .moregrid::after{content:"";flex:1000 1 0}
.shell2 .moregrid .cc{padding-top:9px;font-size:13px}
.shell2 .moregrid .cc b{font-size:15px}
/* identities: on paper. Each mark stands on the ground itself; the white of its file melts into the paper, so there is no sheet behind it. */
.shell2 :is(.ident,.idrecent){--paper:#F7F5F1;--ink:#0B0C10;--sub:rgba(11,12,16,.7);--line:rgba(11,12,16,.16);background:#F7F5F1;color:#0B0C10}
.shell2 .ident .cnum{color:rgba(11,12,16,.72)}
.work-page .ident .cln{color:#0B0C10}
.work-page .ident .cfact{color:rgba(11,12,16,.72)}
.shell2 :is(.ibox,.idsmall img,.igcell img){background:transparent}
.shell2 :is(.idsmall,.igcell) img{mix-blend-mode:multiply}
/* the pinned stage is its own layer (position:sticky), so it carries the paper itself, and each step is laid on it as a whole: the white of
   the file takes the paper's tone while a step fades in and out too */
.shell2 .ipin{background:#F7F5F1}
.shell2 .istep{mix-blend-mode:multiply}
/* the stage is as tall as the screen allows, so the name under a mark is never pushed out of the pinned screen (on a 1366 x 657 laptop
   the stage was 658 px tall, and the caption fell below the fold of its own pin) */
.shell2 .istage{aspect-ratio:auto;height:clamp(300px,calc(100svh - 170px),720px)}
.shell2 .istep figcaption{font:400 15px/1.4 "Inter",system-ui,sans-serif}
.shell2 .istep figcaption b{font:600 clamp(20px,1.8vw,27px)/1.15 "Jost",system-ui,sans-serif;letter-spacing:-.014em}
.shell2 .istep figcaption a{font:600 16px/1.2 "Jost",system-ui,sans-serif;text-decoration-color:rgba(11,12,16,.5);text-decoration-thickness:1px;text-underline-offset:5px;padding:12px 0;margin-block:-12px}
.shell2 .idrecent{padding-top:clamp(34px,4vw,60px)}
.shell2 .idrecent .rclient{color:rgba(11,12,16,.7);margin-bottom:clamp(14px,1.6vw,22px)}
.shell2 .idsmall figcaption{font:400 13px/1.45 "Inter",system-ui,sans-serif;color:rgba(11,12,16,.72);padding-top:4px;text-align:center}
.shell2 .idsmall figcaption b{font:600 16px/1.3 "Jost",system-ui,sans-serif;color:#0B0C10}
.shell2 .igcell figcaption{font:600 14px/1.3 "Jost",system-ui,sans-serif;color:#0B0C10;text-align:center;padding-top:2px}
/* where the stage does not pin (phones, reduced motion) the four marks stand as a grid; the four recent ones that the page listed there a
   second time are shown once, in the row under it (More identities), so no mark is on the screen twice */
.shell2 .igrid .igcell:nth-child(n+5){display:none}
/* a phone: the four lead marks stand one to a row at the full width (they were 172 px tiles in two columns, the DHA mark 110 px wide). Big names lead;
   the two-column grid is for "More identities" only. */
@media (max-width:700px){.shell2 .igrid{grid-template-columns:1fr;gap:30px}.shell2 .igcell figcaption{font-size:16px;padding-top:6px}}
/* the artists: names only, Semibold */
.shell2 .artists .rnum{margin-bottom:10px}
.shell2 .artists .awall{font-weight:600;font-size:clamp(26px,3.9vw,62px);letter-spacing:-.024em}
/* film: every cover at its own ratio (site.css sets each .fpic to the film's own picture), the name in Semibold */
.shell2 .films .fh{margin-bottom:clamp(26px,3vw,44px)}
.shell2 .films .fpic img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}   /* The Big Grill: the film's own cover, whole (its clip was cut by a quarter) */
.shell2 .film b{font:600 clamp(18px,1.5vw,23px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.01em;color:#F7F5F1}
@media (max-width:760px){.shell2 .films .rbrk{display:none}}
.shell2 .film .fcap span span{font:400 13px/1.4 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
/* the sign-off */
.shell2 .cend .csub{font:400 clamp(16px,1.25vw,20px)/1.6 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72);margin-top:22px}
.shell2 .cend .btn2{font-weight:600}
/* phones: the strips are swiped. A card is never wider than the screen, so every picture is seen whole, with the next one showing at the
   edge; its box takes the picture's own ratio (the very wide ones, the gate and the five steps, stood 1,400 px wide behind a 390 px window). */
@media (max-width:860px){
  .shell2 .chero{padding:104px 0 clamp(96px,16vh,150px)}
  .shell2 .rhead{grid-template-columns:1fr}
  .shell2 .rhead>*{grid-column:1!important;grid-row:auto!important}
  .shell2 .track.static{flex-wrap:nowrap}
  .rbrk{display:none}
  .shell2 .track{scroll-padding-left:var(--g,24px)}                          /* a snapped card keeps the page's left margin */
  .shell2 .track .ccard,.shell2 .track.static .ccard{flex:none;max-width:none}
  .shell2 .track .cm,.shell2 .track.static .cm{height:auto;aspect-ratio:var(--ar,1.5);width:min(calc(52svh*var(--ar,1.5)),calc(100vw - 2*var(--g,24px) - 30px))}
  .shell2 .track .cm img,.shell2 .track.static .cm img{width:100%;height:100%}
  .shell2 .track .cc{width:0;min-width:100%}
  .pr2-row{display:block;max-width:none}
  .pr2-i{max-width:calc(56svh*var(--ar,1.5))}
  .pr2-i+.pr2-i{margin-top:18px}
  .shell2 .moregrid{--h:clamp(96px,30vw,150px)}
  .shell2 .igrid{gap:22px 14px}
  .shell2 .idrow{grid-template-columns:1fr 1fr;gap:22px 14px}
}

/* ======================================================= About ======================================================= */
.shell2 .route{max-width:none;margin:clamp(26px,3.2vw,48px) 0 clamp(4px,1vw,14px)}
.route .rl{font:400 14px "Inter",system-ui,sans-serif;opacity:.78}
.ab2{position:relative;padding:clamp(80px,10vw,150px) 0;border-top:1px solid rgba(247,245,241,.18);scroll-margin-top:0}
.ab2 h2{margin:18px 0 0;font:300 clamp(40px,4.7vw,76px)/1.02 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
/* screen 2: three lines */
.ab-me{border-top:0}
/* the three lines take the whole width (13 Oct: the portrait that stood beside them is inside the Read more, with the story) */
.ab-l{margin:0 0 clamp(22px,2.6vw,42px);max-width:22em;font:300 clamp(30px,4.3vw,70px)/1.06 "Jost",system-ui,sans-serif;letter-spacing:-.014em;color:#F7F5F1;text-wrap:balance}
.ab-say .rm{margin-top:clamp(8px,1.2vw,18px)}
.ab-bio{display:grid;grid-template-columns:minmax(0,26fr) minmax(0,74fr);gap:clamp(28px,3.4vw,56px);align-items:start}
.ab-por{margin:0}
.ab-por img{display:block;width:100%;height:auto}
.ab-story{columns:2;column-gap:clamp(28px,3.4vw,56px)}
.ab-story p{break-inside:avoid}
.rm-wide .rm-b{max-width:none}
.ab-for .rm-b p{max-width:72ch}
.ab-say .rm-b{padding-top:18px}
.ab-facts{margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(28px,3.4vw,56px)}
.ab-facts div{display:grid;grid-template-columns:minmax(96px,30%) 1fr;gap:14px;padding:13px 0;border-top:1px solid rgba(247,245,241,.18)}
.ab-facts dt{font:600 12px/1.5 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.ab-facts dd{margin:0;font:400 15px/1.55 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.86)}
/* screen 3: how I work. Three moves, one line each; a whole row opens its longer text and its proof. */
.ab-how{scroll-margin-top:0}
.ab-moves{list-style:none;margin:clamp(34px,4.2vw,68px) 0 0;padding:0}
.ab-moves>li{border-top:1px solid rgba(247,245,241,.18);scroll-margin-top:84px}
.ab-moves>li:last-child{border-bottom:1px solid rgba(247,245,241,.18)}
.mv>summary{display:grid;grid-template-columns:clamp(44px,5vw,72px) minmax(0,1.45fr) minmax(0,1fr) auto;gap:8px clamp(18px,2.6vw,44px);align-items:center;padding:clamp(22px,2.7vw,42px) 0}
.mv .mvt{font-size:clamp(24px,2.2vw,32px)}
.shell2 .mv h3{margin:0;font:300 clamp(32px,3.9vw,62px)/1.04 "Jost",system-ui,sans-serif!important;letter-spacing:-.012em}
.mv h3 b{white-space:nowrap}
.mv-line{font:500 clamp(18px,1.55vw,24px)/1.3 "Jost",system-ui,sans-serif;color:#F7F5F1}
.mv .rm-b{max-width:none;padding:0 0 clamp(30px,3.4vw,52px) calc(clamp(44px,5vw,72px) + clamp(18px,2.6vw,44px))}
.mv-more{max-width:56ch}
.mv-proof{margin:clamp(22px,2.6vw,40px) 0 0}
.mv-proof .pg-wall{--h:clamp(120px,16vw,250px)}
.mv-proof .pg-wall.one li{flex:none;width:min(100%,920px);max-width:none}
.mv-proof .pg-wall.one::after{display:none}
/* the fourth beat (12 Oct), the closing line inside the third move's Read more */
.rm-b p.mv-4th{display:flex;max-width:none;flex-wrap:wrap;align-items:baseline;gap:.2em .7em;margin:clamp(28px,3.2vw,48px) 0 0;font:400 clamp(16px,1.15vw,17.5px)/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.86)}
.rm-b p.mv-4th b{font:600 clamp(22px,2vw,30px)/1.1 "Jost",system-ui,sans-serif;letter-spacing:-.016em;color:#F7F5F1}
.mv-4th .mvt{align-self:center;font-size:clamp(20px,1.8vw,26px)}
.mv-proof figcaption{margin-top:14px;max-width:72ch;font:400 15px/1.55 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
/* screen 4: the studio, AntBrush and Mission Control X (13 Oct, morning: its own screen again). Left: the AntBrush logo whole, the title with
   its years, one line. Right: the Mission Control X film, its cover whole at its own ratio; the whole cover plays the film. Under both, Read more. */
.ab-st{display:grid;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:clamp(18px,2vw,30px) clamp(28px,4.4vw,72px);align-items:start;margin-top:clamp(26px,3vw,44px)}
.ab-st-a{min-width:0}
.ab-logo{display:block;width:clamp(220px,27vw,400px);height:auto;margin:0 0 clamp(18px,2.2vw,34px) -1.2%}
.ab-studio h2{margin:0}
.ab-studio h2 b{white-space:nowrap}
.ab-st-l{margin:clamp(14px,1.5vw,22px) 0 0;max-width:22em;font:500 clamp(20px,1.7vw,26px)/1.25 "Jost",system-ui,sans-serif;letter-spacing:-.006em;color:#F7F5F1;text-wrap:balance}
.ab-st-b{min-width:0}
.ab-mcx{display:block;color:#F7F5F1;text-decoration:none;max-width:calc(62svh*var(--ar,2.37))}
.ab-mcx img{display:block;width:100%;height:auto}
.ab-mcx-c{display:flex;align-items:center;gap:10px;margin-top:14px;min-height:30px;font:600 17px/1 "Jost",system-ui,sans-serif;transition:color .3s}
.ab-mcx-c b{font-weight:600}
.ab-mcx-c small{font:400 13px/1 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72);font-variant-numeric:lining-nums tabular-nums}
.ab-mcx:hover .ab-mcx-c{color:#00C8D7}
.ab-mcx-l{margin:8px 0 0;font:400 15px/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.ab-mcx-l b{font:600 17px/1.4 "Jost",system-ui,sans-serif;letter-spacing:-.004em;color:#F7F5F1}   /* his title at Mission Control X: on the screen, as on 12 October */
.ab-st>.rm{grid-column:1/-1;margin-top:clamp(4px,.8vw,12px)}
.ab-st>.rm .rm-b>p{max-width:72ch}
/* screen 5: where and for whom */
.shell2 .ab-where{padding:clamp(80px,10vw,150px) 0}
.shell2 .ab-where ul{display:flex;flex-wrap:wrap;gap:0;margin:0;padding:0;list-style:none}
.shell2 .ab-where li{display:block;border:0;padding:0;font-size:inherit}
.shell2 .ab-where li span{color:inherit;text-align:left}
.ab-years{list-style:none;margin:clamp(30px,3.6vw,56px) 0 6px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px clamp(14px,2vw,32px)}
.shell2 .ab-where .ab-years li{border-top:1px solid rgba(247,245,241,.18);padding-top:14px}
.ab-years b{display:block;font:300 clamp(30px,3vw,44px)/1 "Jost",system-ui,sans-serif;font-variant-numeric:lining-nums tabular-nums}
.ab-years span{display:block;margin-top:10px;font:600 clamp(17px,1.4vw,21px)/1.2 "Jost",system-ui,sans-serif}
.ab-years small{display:block;margin-top:5px;font:400 13px/1.45 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.ab-where:has(.route) .ab-years{display:none}                               /* with script the route is drawn in its place */
.shell2 .ab-where .ab-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);padding-top:8px}
.shell2 .ab-where .ab-places li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid rgba(247,245,241,.18);font:400 15px/1.5 "Inter",system-ui,sans-serif}
.shell2 .ab-where .ab-places b{font-weight:600;white-space:nowrap}
.shell2 .ab-where .ab-places span{color:rgba(247,245,241,.72);text-align:right}
.ab-where>.rm .rm-b{max-width:none}
.ab-for{margin:clamp(30px,3.6vw,56px) 0 0}
.ab-for>div{display:grid;grid-template-columns:minmax(96px,13%) minmax(0,1fr);gap:8px clamp(20px,2.6vw,44px);align-items:baseline;padding:clamp(16px,1.8vw,26px) 0;border-top:1px solid rgba(247,245,241,.18)}
.ab-for dt{font:600 12px/1.5 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,.72)}
.ab-for dd{margin:0;min-width:0}
.shell2 .ab-where .ab-names{font:600 clamp(20px,1.95vw,30px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.016em;gap:.3em 1.5em}
.shell2 .ab-where .ab-for>div:nth-child(2) .ab-names{font-weight:500;letter-spacing:-.01em;color:rgba(247,245,241,.9)}
.ab-cv{--ul-y:3px;display:inline-flex;gap:12px;font:600 clamp(20px,1.95vw,30px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.018em;color:#F7F5F1;text-decoration:none;padding:10px 0;margin:-10px 0 -3px}
.ab-cv i,.ct-more i{font-style:normal}

/* ======================================================= Contact: one screen ======================================================= */
.ct-main{overflow-x:clip}
.ct{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(40px,8vh,96px);padding-top:clamp(108px,10.5vw,164px);padding-bottom:clamp(40px,6.5vh,80px)}
.ct h1{margin:20px 0 0;font:300 clamp(48px,6.1vw,104px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.012em}
.ct-for{margin:clamp(14px,1.6vw,22px) 0 0;font:500 clamp(20px,1.7vw,26px)/1.25 "Jost",system-ui,sans-serif;letter-spacing:-.006em;color:#F7F5F1}   /* the line of 12 October, under the title */
.ct-top .rm{margin-top:2px}
.ct-line{margin:8px 0 0;font:400 clamp(16px,1.25vw,20px)/1.6 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.ct-stage{position:relative}
.ct-mail{position:relative;z-index:2;display:block;width:max-content;max-width:100%;font:600 min(calc((100vw - 2*var(--g,64px))*.1092),170px)/1.04 "Jost",system-ui,sans-serif;letter-spacing:-.034em;margin-left:-.03em;color:#F7F5F1;text-decoration:none;white-space:nowrap}
.ct-sweep{position:relative;z-index:1;display:block;width:100vw;margin-left:calc(50% - 50vw);height:clamp(44px,6vw,96px);margin-top:clamp(-18px,-1.2vw,-8px);pointer-events:none;overflow:hidden}
.ct-sweep img{position:absolute;top:0;left:-100%;width:220%;height:100%;max-width:none;display:block;opacity:.9}        /* -100 %: the part on screen is 45 to 91 % of the path, its smooth run; at -60 % the path's one corner (x 672 of 1600) stood a third of the way across */
.ct-more{list-style:none;margin:clamp(14px,1.6vw,24px) 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px clamp(28px,3.6vw,60px);font:600 clamp(18px,1.5vw,23px)/1.2 "Jost",system-ui,sans-serif}
.ct-more li{padding:0}
.ct-more a{--ul-y:7px;display:inline-flex;gap:8px;align-items:baseline;color:#F7F5F1;text-decoration:none;padding:12px 0}
.ct-more a:hover,.ct-mail:hover{color:#00C8D7}
.ct-more a:hover{--ul:currentColor}
.ct-more .ct-place{margin-left:auto;padding:12px 0;font:400 clamp(16px,1.25vw,20px)/1.2 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}

/* ======================================================= narrower screens ======================================================= */
/* Jost Light only from 40 px up: where the column is too narrow for that size the line is set in Medium, smaller */
@media (max-width:1340px){
  .pj-line{font:400 clamp(22px,2.2vw,29px)/1.2 "Jost",system-ui,sans-serif;letter-spacing:-.008em}        /* Regular with its point in Semibold: one weight skipped, as in the titles under 40 px (type.css, part 1) */
}
@media (max-width:860px){
  .shell2 .pj-head{padding-top:104px}
  .pj-bar{display:block}
  .pj-pick{margin:14px 0 0 -12px}
  .pj-pick label{padding:14px 10px}
  .pj{padding-bottom:72px}
  .pj-k{flex-wrap:wrap;gap:4px 12px}
  .shell2 .pj-name{font-size:clamp(34px,9.6vw,56px)!important;margin-top:18px}
  .pj-row{display:flex;flex-direction:column;gap:0;margin-top:22px}
  .pj-stage{order:-1;margin-bottom:24px;justify-content:flex-start}
  .pj-pic,.pj-tall .pj-pic{width:100%}
  .pj-tall .pj-stage .pj-pic{width:min(100%,calc(64svh*var(--ar,1)))}
  .pj-win .pj-txt .pj-pic,.pj-win.pj-tall .pj-txt .pj-pic{width:100%;margin-top:22px}
  .pj-win.pj-tall .pj-txt .pj-pic{width:min(74%,calc(52svh*var(--ar,1)))}
  .pj-win{--sgw-h:min(66vw,420px)}
  .pj-out-left .pj-stage{justify-content:flex-end}
  .pj-out-right .pj-stage{padding-left:0}
  .pj-go{padding-top:10px}
  .pg-all .pj-open{display:inline;background:none;text-decoration:underline;text-decoration-color:rgba(247,245,241,.5);text-decoration-thickness:1px;text-underline-offset:5px;line-height:1.5}
  .pg-h{display:block}
  .pg-h h3{margin-bottom:12px}
  .pg-wall{--h:clamp(118px,36vw,170px)}
  .pg-paper .pg-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-paper .pg-cap{text-align:left;font-size:13px}
  .ab-bio{display:block}
  .ab-por{width:min(62%,260px);margin-bottom:26px}
  .ab-story{columns:1}
  .ab-facts{grid-template-columns:1fr}
  .ab-st{display:block}
  .ab-st-b{margin-top:30px}
  .ab-logo{width:min(78%,300px)}
  .ab-st>.rm{margin-top:14px}
  .mv>summary{grid-template-columns:auto 1fr;gap:10px 14px;padding:22px 0}
  .mv h3{grid-column:1/-1;grid-row:2}
  .mv .mvt{grid-row:1}
  .mv-rm{grid-row:1;justify-self:end;min-height:32px}
  .mv-line{grid-column:1/-1}
  .mv .rm-b{padding-left:0}
  .ab-years{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shell2 .ab-where .ab-places{grid-template-columns:1fr}
  .ab-for>div{display:block}
  .ab-for dt{margin-bottom:10px}
  .ct{padding-top:104px}
  .ct-more{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;justify-items:start;font-size:17px}        /* six ways in three rows of two (WhatsApp and Instagram came back), still one screen */
  .ct-more .ct-place{margin:0;align-self:center}
  .ct-mail{padding:3px 0;margin-top:-3px;margin-bottom:-3px}                /* 44 px for a finger; nothing moves */
  /* the sign-off: the name and the title on their own lines, the email under them (they broke into three short lines with a dot left hanging) */
  .shell2 .foot .row{display:block}
  .shell2 .foot .sign{display:block}
  .shell2 .foot .sign svg{display:inline-block;vertical-align:-5px;margin-right:8px}
  .shell2 .foot .row p a{display:block;padding:11px 0;margin-top:2px}
  .shell2 .foot .ft-d{display:none}
  .shell2 .foot .row nav{margin-top:2px}
}
.shell2 .foot .row{align-items:center}
.shell2 .foot nav a{padding:10px 0}                                         /* a taller target for a finger */
/* About on phones: the route is drawn at phone size (brand.js), so its type is set in real pixels and the roles sit on two lines */
@media (max-width:760px){.route text{font-size:19px}.route .yr{font-size:13.5px}.route .rl{font-size:13.5px;opacity:.82}}


/* ---------- About's opening: Tony comes out of the slash (the Signal window, assets/signal.css; 12 Oct) ----------
   Full width inside the page's .wrap. The slash stands on the section's floor; its height is the smaller of 91 % of the screen
   and 57 % of the width, so the bull never reaches the words. Photo and cut-out are placed in per cent of the slash's own box. */
.shell2 .abh{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(560px,100svh,80vw);overflow:hidden;background:#0B0C10;color:#F7F5F1;border-bottom:1px solid rgba(247,245,241,.18)}   /* the hairline is the floor he stands on */
.shell2 .abh-say{position:absolute;left:8.33vw;top:21.8%;z-index:4;max-width:36vw}
.shell2 .abh .label{display:flex;gap:12px;align-items:center;margin:0;color:rgba(247,245,241,.72)}
.shell2 .abh .label .mk{width:20px;height:20px}
.shell2 .abh h1{margin:14px 0 0;font:300 clamp(48px,6.1vw,104px)/1 "Jost",system-ui,sans-serif;letter-spacing:-.01em}
.shell2 .abh-sub{margin:26px 0 0;font:400 clamp(16px,1.25vw,20px)/1.6 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.shell2 .abh-fig{--sgw-h:min(91svh,57vw);position:absolute;right:7.08vw;bottom:0;z-index:3}
.shell2 .abh-fig img{left:-80.36%;top:-28.05%;width:341.96%;height:auto}
.shell2 .abh-fig .sgw-out img{clip-path:polygon(0 0,100% 0,100% 100%,-1.6% 100%,5.06% 68.67%,0 68.67%)}   /* the bull's end, cut at the signal's slant */
.shell2 .abh-sweep{position:absolute;left:0;right:0;top:52.2%;height:22.2%;overflow:hidden;z-index:1;pointer-events:none}
.shell2 .abh-sweep img{position:absolute;top:0;left:-133.3%;width:296.3%;height:100%;max-width:none;opacity:.9;display:block}
/* The line never crosses the words (the design system: "never behind body text"). The words hang from the top of the screen and grow with its WIDTH;
   the line was placed by the screen's HEIGHT alone, so in a browser window under about 830 px tall (every laptop) the cyan strand ran through
   "From Cairo to Dubai and Abu Dhabi, now in Tampa." Now it is the lower of its own place and the foot of the words: 16 % + 86 px + the two title
   lines + the sub-lines (two; three under 1080 px wide, where the sentence folds). At 1440 x 900, the approved picture, nothing moves. (13 Oct) */
@media (min-width:761px){.shell2 .abh-sweep{top:max(52.2%,calc(16% + 86px + 2*clamp(48px,6.1vw,104px) + 3.2*clamp(16px,1.25vw,20px)))}}
@media (min-width:761px) and (max-width:1079px){.shell2 .abh-sweep{top:max(52.2%,calc(16% + 86px + 2*clamp(48px,6.1vw,104px) + 4.8*clamp(16px,1.25vw,20px)))}}
@media (max-width:760px){
  .shell2 .abh{height:auto;padding:98px 0 0}
  .shell2 .abh-say{position:relative;left:auto;top:auto;max-width:none;padding:0 16px}
  .shell2 .abh h1{margin-top:12px;font-size:52px}
  .shell2 .abh-sub{margin-top:16px;font-size:16px}
  .shell2 .abh-fig{--sgw-h:117.7vw;position:relative;right:auto;bottom:auto;margin:40px 16px 0 auto}
  .shell2 .abh-sweep{top:auto;bottom:calc(117.7vw - 44px);height:88px}
  .shell2 .abh-sweep img{left:-152%}
}

/* ---------- Work (14 Oct): the twelve chosen by sector, then the archive ---------- */
:is(.pj-main:has(#s-brands:checked) .pj:not([data-s="brands"]),.pj-main:has(#s-sport:checked) .pj:not([data-s="sport"]),.pj-main:has(#s-education:checked) .pj:not([data-s="education"]),.pj-main:has(#s-culture:checked) .pj:not([data-s="culture"]),.pj-main:has(#s-health:checked) .pj:not([data-s="health"]),.pj-main:has(#s-government:checked) .pj:not([data-s="government"])){display:none}
.shell2 .chero.arch{min-height:0;padding:clamp(110px,13vw,190px) 0 clamp(140px,13vw,200px);border-top:1px solid rgba(247,245,241,.18)}
.shell2 .chero.arch .ch1{font-size:clamp(44px,7vw,112px)}
.pj-sel .plist{padding-bottom:clamp(40px,5vw,80px)}

/* ---------- Work (14 Oct, evening): seven doors, long names given room; each door also lists its archive pieces ---------- */
.pj-sel .pj-bar{display:block}
.pj-sel .pj-pick{margin:22px 0 0 -12px;row-gap:2px}
.pj-sel .pj-pick label{padding:12px 12px}
:is(.pj-main:has(#s-gov:checked) .pj:not([data-s~="gov"]),.pj-main:has(#s-edu:checked) .pj:not([data-s~="edu"]),.pj-main:has(#s-health:checked) .pj:not([data-s~="health"]),.pj-main:has(#s-sports:checked) .pj:not([data-s~="sports"]),.pj-main:has(#s-concerts:checked) .pj:not([data-s~="concerts"]),.pj-main:has(#s-festivals:checked) .pj:not([data-s~="festivals"]),.pj-main:has(#s-corporate:checked) .pj:not([data-s~="corporate"])){display:none}
.sec-more{display:none;margin:0 0 clamp(40px,5vw,80px);font:400 16px/1.5 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}
.sec-more span{display:block;margin-bottom:10px;font:600 13px/1 "Inter",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.sec-more a{display:inline-flex;align-items:center;gap:8px;margin:0 28px 10px 0;font:600 18px/1.3 "Jost",system-ui,sans-serif;color:#F7F5F1;text-decoration:none}
.sec-more a i{font-style:normal}
.pj-main:has(#s-gov:checked) .sec-more[data-for="gov"],.pj-main:has(#s-edu:checked) .sec-more[data-for="edu"],.pj-main:has(#s-health:checked) .sec-more[data-for="health"],.pj-main:has(#s-sports:checked) .sec-more[data-for="sports"],.pj-main:has(#s-concerts:checked) .sec-more[data-for="concerts"],.pj-main:has(#s-festivals:checked) .sec-more[data-for="festivals"],.pj-main:has(#s-corporate:checked) .sec-more[data-for="corporate"]{display:block}
.cpromo{margin-top:22px}
.cpromo a{display:inline-flex;align-items:center;gap:10px;font:600 var(--t,18px)/1.3 "Jost",system-ui,sans-serif;color:#F7F5F1;text-decoration:none}
.cpromo small{font:400 12px/1 "Inter",system-ui,sans-serif;color:rgba(247,245,241,.72)}