/* =====================================================================
   quiet.css — the inner pages: work, case studies, about, notes.
   Load after majd.css and home.css:
     <link rel="stylesheet" href="assets/majd.css">
     <link rel="stylesheet" href="assets/home.css">
     <link rel="stylesheet" href="assets/quiet.css">
   home.css carries the language these pages share with the home page: the pill nav, chips,
   the ink stage and its cards, whole 16:9 covers, the ink footer. This file adds what only
   the inner pages need. Behaviour comes from majd.js and quiet.js.

   Sections
     1  tokens + base
     2  shared bits       nav state, page head, tiles, rows, links
     3  work              case-study cards on the stage, second tier as tiles
     4  case study        head, meta tiles, media, numbers, chapters, points, next
     5  about             portrait, experience, skills
     6  notes             index rows, article
     7  older templates   client sites, mentoring, 404
     8  behaviour         reading progress, chapter rail, numbers intro
     9  page transitions  the clicked cover grows into the case-study cover
   ===================================================================== */

/* ============================== 1 tokens ============================== */
:root{
  --measure:640px;
  --r:18px;
  --card:#1d1d1d;                               /* a card on the ink stage */
  --tr:clamp(18px,2vw,26px);                    /* tile radius */
  --mr:clamp(14px,1.8vw,24px);                  /* media radius */
  --tg:clamp(10px,1.1vw,16px);                  /* gap between tiles */
  --fs-disp:clamp(64px,13.6vw,196px);           /* page titles: Work, About, Notes */
  --fs-case:clamp(42px,9vw,130px);              /* case-study titles */
  --fs-chap:clamp(32px,5vw,72px);               /* chapter headings */
  --fs-lead:clamp(21px,1.95vw,28px);
  --fs-h1:var(--fs-case);
  --fs-h2:clamp(20px,1.6vw,22px);
  --fs-h2s:clamp(20px,1.6vw,22px);
  --fs-h3:clamp(18px,1.4vw,20px);
  --fs-stmt:clamp(26px,3vw,44px);
  --fs-lg:clamp(18px,1.45vw,21px);
  --fs-md:clamp(16px,1.18vw,17px);
  --fs-sm:clamp(14px,1.04vw,15px);
  --sect:clamp(96px,11vw,160px);                /* space above a section */
}
h1{font-weight:700;line-height:.9;letter-spacing:-.055em}
h2{font-weight:500;line-height:1.25;letter-spacing:-.015em}
h3{font-weight:500;line-height:1.3;letter-spacing:-.012em}
#e404-h{font-weight:800;letter-spacing:-.02em}
.mute{color:var(--mute)}

/* ============================== 2 shared bits ============================== */
/* nav: where you are */
.n1 a[aria-current="page"]{color:var(--cream);background:rgba(250,247,243,.14)}

/* page head: the dotted canvas, one very large word, chips */
.ph,.cshead{position:relative}
.ph > .wrap,.cshead > .wrap{position:relative}
.ph .dots,.cshead .dots{height:min(74svh,640px)}
.ph{padding-top:clamp(128px,14.5vw,204px)}
.phrow{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(16px,3vw,48px)}
.ph h1{font-size:var(--fs-disp);line-height:.86;margin-left:-.05em}
.ph h1 sup,.bighead h2 sup{font-size:max(.14em,11px);font-weight:500;letter-spacing:0;vertical-align:top;position:relative;top:.9em;
  margin-left:.55em;color:var(--mute)}
.phfoot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gap);row-gap:24px;align-items:end;
  margin-top:clamp(28px,3.6vw,52px)}
.phlead{max-width:19em;font-size:clamp(21px,2.2vw,32px);font-weight:500;line-height:1.2;letter-spacing:-.03em;text-wrap:pretty}
.phmore{margin-top:clamp(14px,1.5vw,20px);max-width:33em;font-size:clamp(16.5px,1.42vw,20.5px);line-height:1.42;
  letter-spacing:-.016em;color:rgba(17,17,17,.74);text-wrap:pretty}
.phchips{justify-content:flex-end;padding-bottom:4px}
@media (max-width:900px){.phfoot{grid-template-columns:1fr}.phchips{justify-content:flex-start}}
@media (max-width:380px){.phchips .chip{white-space:normal}}

/* a large heading on cream, with a line or chips opposite */
.bighead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;
  margin-bottom:clamp(26px,3.4vw,48px)}
.bighead h2{font-size:clamp(40px,7vw,100px);font-weight:700;line-height:.92;letter-spacing:-.055em;margin-left:-.04em}
.bighead p{max-width:21em;padding-bottom:.5em;font-size:var(--fs-lg);line-height:1.35;letter-spacing:-.015em;color:var(--mute);
  text-wrap:balance}
.sect{padding-top:var(--sect)}
.xhead{margin-top:var(--sect)}
main > .stage{margin-top:var(--sect)}
.ph + .wrap > .tiles{margin-top:clamp(44px,5.6vw,84px)}

/* tiles: white, rounded, a hairline ring. The home page's experience tiles, in any grid. */
.tiles{display:grid;gap:var(--tg)}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.xhead + .tiles{margin-top:clamp(14px,1.6vw,22px)}
.tile,.csmeta > div,.cspoints > div,.csdefs > div{display:flex;flex-direction:column;min-width:0;
  padding:clamp(14px,1.5vw,20px);border-radius:var(--tr);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.07)}
a.tile{transition:translate .5s var(--e),box-shadow .5s var(--e)}
@media (hover:hover){a.tile:hover{translate:0 -4px;box-shadow:0 0 0 1px rgba(17,17,17,.14),0 26px 44px -30px rgba(17,17,17,.45)}}
.tile .chip,.csmeta > div > .k,.csdefs > div > .k{padding:6px 11px;font-size:12.5px;background:var(--bg)}
@media (max-width:900px){.tiles--3{grid-template-columns:repeat(2,minmax(0,1fr))}.tiles--3 > :last-child:nth-child(odd){grid-column:1 / -1}}
@media (max-width:620px){.tiles--2,.tiles--3{grid-template-columns:1fr}}

/* chips beyond the home page's set */
.chip.go{padding:5px 5px 5px 15px;gap:11px;background:var(--ink);color:var(--cream);box-shadow:none;font-weight:600;--as:28px}
.chip.go .rarrow{background:var(--cream);color:var(--ink);box-shadow:none;transition:transform .45s var(--e)}
.stage .chip.go .rarrow{background:var(--ink);color:var(--cream)}
@media (hover:hover){
  a:hover > .chip.go .rarrow,a.chip.go:hover .rarrow{transform:rotate(45deg)}
  .stage a.chip:hover,.foot a.chip:hover{background:var(--cream);color:var(--ink)}
}
/* a label that is also a heading takes the chip's shape */
.row > h2,.row > h3,.rowlabel,.csmeta .k,.csdefs .k,.cschap .cn{display:inline-flex;align-items:center;gap:8px;justify-self:start;
  align-self:start;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--hair);font-size:13.5px;
  font-weight:500;line-height:1.25;letter-spacing:-.004em;white-space:nowrap;color:var(--ink)}
.row > h2::before,.row > h3::before,.rowlabel::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;
  background:var(--c,var(--ink))}

/* label on the left (3 of 12), content on the right (9 of 12) */
.row{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gap);row-gap:18px;align-items:start}
@media (max-width:820px){.row{grid-template-columns:1fr}}
.lead{font-size:var(--fs-lead);font-weight:500;line-height:1.26;letter-spacing:-.026em;max-width:25em;text-wrap:pretty}

/* text link with a hairline underline */
.tl{border-bottom:1px solid rgba(17,17,17,.3);transition:border-color .25s ease}
@media (hover:hover){.tl:hover{border-bottom-color:var(--ink)}}
.ext{font-size:.82em;color:var(--mute);margin-left:.25em}

/* the one large sentence a page is allowed: centred, filled as it is read (majd.js [data-fill]) */
.csclose,.pullwrap{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,2vw,28px);text-align:center}
.csclose .stmt,.pullwrap .stmt,.psec > .stmt{max-width:18em;margin-inline:auto;text-align:center;font-size:clamp(28px,4.1vw,60px);
  font-weight:700;line-height:1;letter-spacing:-.05em;text-wrap:balance}

/* ============================== 3 work ============================== */
/* The case studies sit on the stage: the first across both columns, the rest two by two. Cover whole at 16:9, then name and year,
   then what it is. The second tier uses the same order on white tiles. */
.ph + .stage{margin-top:clamp(44px,5.6vw,84px)}
.wk2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.wk{display:flex;flex-direction:column;min-width:0;padding:clamp(12px,1.5vw,20px);border-radius:clamp(20px,2.4vw,34px);
  background:var(--card);box-shadow:inset 0 0 0 1px rgba(250,247,243,.1)}
.wk .cover{--cr:clamp(12px,1.5vw,20px)}
.wkinfo{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(22px,2.6vw,36px);
  padding:clamp(16px,1.8vw,24px) clamp(6px,1vw,14px) clamp(4px,.6vw,8px)}
.wktop,.wkbot{display:flex;justify-content:space-between;gap:14px}
.wktop{align-items:flex-start}
.wkbot{align-items:flex-end}
.wk h3{font-size:clamp(30px,3.5vw,50px);font-weight:700;line-height:.96;letter-spacing:-.055em}
.wk .chip--tilt{flex:none;margin-top:4px}
.wk .rarrow{--as:clamp(38px,3.4vw,46px)}
@media (hover:hover){.wk:hover .rarrow{background:var(--cream);color:var(--ink)}.wk:hover .chip--tilt{rotate:0deg}}
/* the first card runs the width of the stage: cover beside the name, as on the home page */
.wk--wide{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.wk--wide .cover{flex:0 0 58%;align-self:flex-start}
.wk--wide .wkinfo{padding:clamp(8px,1vw,14px) clamp(8px,1vw,14px) clamp(4px,.6vw,8px) clamp(20px,2.6vw,40px)}
.wk--wide h3{font-size:clamp(44px,6vw,88px)}
@media (max-width:820px){.wk2{grid-template-columns:1fr}
  .wk--wide{flex-direction:column}.wk--wide .cover{flex:none;align-self:auto}
  .wk--wide .wkinfo{padding:clamp(16px,1.8vw,24px) clamp(6px,1vw,14px) clamp(4px,.6vw,8px)}
  .wk--wide h3{font-size:clamp(30px,3.5vw,50px)}}
@media (max-width:420px){.wktop{flex-wrap:wrap}}

.wt{padding:clamp(10px,1vw,14px)}
.wt .cover{aspect-ratio:16/10;--cr:clamp(10px,1.1vw,14px);background:#ece8e1}
.wt .cover img.top{object-position:top}
.wtb{flex:1;display:flex;flex-direction:column;gap:12px;padding:clamp(14px,1.5vw,18px) clamp(6px,.8vw,10px) clamp(4px,.6vw,8px)}
.wt h3{font-size:clamp(20px,1.75vw,24px);font-weight:700;line-height:1.08;letter-spacing:-.04em;text-wrap:balance}
.wt h3 .ext{font-weight:500}

/* ============================== 4 case study ============================== */
/* Each case page sets its colour on <main>: --c (the year chip on its home card) and --t (text on it). */
.cshead{padding-top:clamp(112px,12vw,164px)}
.cstitle{display:flex;align-items:flex-start;flex-wrap:wrap;gap:6px clamp(10px,1.6vw,22px);margin-top:clamp(22px,2.8vw,40px)}
.cstitle h1{font-size:var(--fs-case);margin-left:-.045em;text-wrap:balance}
.cstitle .chip--tilt{margin-top:clamp(4px,1.1vw,16px)}
.cssub{margin-top:clamp(18px,2.2vw,30px);max-width:21em;font-size:clamp(21px,2.2vw,32px);font-weight:500;line-height:1.2;
  letter-spacing:-.03em;text-wrap:pretty}
/* facts as a row of tiles */
.csmeta{display:flex;flex-wrap:wrap;gap:var(--tg);margin-top:clamp(36px,4.6vw,64px)}
.csmeta > div{flex:1 1 168px;justify-content:space-between;gap:clamp(22px,2.6vw,36px)}
.csmeta .v{font-size:var(--fs-md);font-weight:600;line-height:1.3;letter-spacing:-.022em}
@media (max-width:520px){.csmeta > div{flex-basis:132px}}

/* media: one treatment everywhere */
.cscover{margin-top:var(--tg)}
.csfig{margin-top:clamp(40px,4.6vw,64px)}
.cscover img,.cscover video,.csfig img,.csfig video{display:block;width:100%;height:auto;
  border-radius:var(--mr);outline:1px solid rgba(17,17,17,.08);outline-offset:-1px;background:#ece8e1}
.cscover figcaption,.csfig figcaption{margin-top:12px;max-width:var(--measure);font-size:13px;line-height:1.5;color:var(--mute)}
.csfigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:clamp(40px,4.6vw,64px)}
.csfigs .csfig{margin-top:0}
/* a mat for transparent or small artwork */
.csmat{border-radius:var(--mr);padding:clamp(20px,5vw,80px);background:#ece8e1}
.csmat img,.csmat video{outline:0;background:none;border-radius:8px}
.csmat--zixel{background:linear-gradient(120deg,#9fbdf1,#c6b7ef 38%,#eac6dc 72%,#f4dcc3)}
.csmat--dark{background:#0b0c12}
.csnarrow{max-width:760px}

/* label | body rows */
.cssec{margin-top:clamp(72px,8.4vw,120px)}
.csbody > * + *{margin-top:1em}
.csbody p,.csbody li{max-width:var(--measure);text-wrap:pretty}
.csbody .lead{max-width:24em}
/* the heading a section opens with */
.csbody > h4{max-width:16em;font-size:clamp(24px,2.6vw,38px);font-weight:700;line-height:1.02;letter-spacing:-.048em;text-wrap:balance}
.csbody > h4 + *{margin-top:clamp(12px,1.3vw,18px)}
.csbody a:not(.chip){border-bottom:1px solid rgba(17,17,17,.3)}
.csbody .csfig,.csbody .csfigs{margin-top:clamp(28px,3vw,40px)}

/* numbers: the page's ink surface, one card per figure, figures in the page colour */
.cs .stage{margin-top:clamp(72px,8.4vw,120px)}
.stage--sm .sthead{margin-bottom:clamp(24px,3vw,42px)}
.stage--sm .sthead h2{font-size:clamp(34px,5vw,72px)}
.stage--sm .sthead .star{width:clamp(34px,4.4vw,62px)}
.csnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:var(--tg)}
.csnum{display:flex;flex-direction:column;gap:5px;min-width:0;padding:clamp(16px,1.8vw,24px);
  border-radius:clamp(18px,2vw,28px);background:var(--card);box-shadow:inset 0 0 0 1px rgba(250,247,243,.1)}
.csnum b{margin-bottom:clamp(30px,4.4vw,64px);font-size:clamp(38px,4.7vw,68px);font-weight:700;line-height:.95;
  letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--c,var(--cream))}
.csnum .lab{font-size:var(--fs-md);font-weight:600;line-height:1.3;letter-spacing:-.02em}
.csnum .prov{font-size:var(--fs-sm);line-height:1.42;color:rgba(250,247,243,.6)}
@media (max-width:1000px){.csnums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.csnum b{margin-bottom:22px}}

/* points: short tiles, numbered */
.cspoints{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--tg);counter-reset:pt}
.csbody > .cspoints:not(:first-child){margin-top:clamp(20px,2.2vw,30px)}
.cspoints > div{counter-increment:pt}
.cspoints > div::before{content:counter(pt,decimal-leading-zero);align-self:flex-start;margin-bottom:clamp(22px,2.6vw,36px);
  padding:5px 10px;border-radius:999px;background:var(--bg);font-size:12.5px;font-weight:500;line-height:1.25;
  font-variant-numeric:tabular-nums}
.cspoints h4{font-size:clamp(17.5px,1.45vw,20px);font-weight:700;line-height:1.14;letter-spacing:-.032em;text-wrap:balance}
.cspoints p{margin-top:8px;font-size:var(--fs-sm);line-height:1.46;color:rgba(17,17,17,.7)}
/* definitions (module map): a chip, the thing, one muted line */
.csdefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tg)}
.csdefs > div{align-items:flex-start;gap:clamp(18px,2vw,28px);justify-content:space-between}
.csdefs .v{font-size:var(--fs-md);font-weight:600;line-height:1.3;letter-spacing:-.022em}
.csdefs .d{display:block;margin-top:6px;font-size:var(--fs-sm);font-weight:400;line-height:1.46;letter-spacing:-.011em;
  color:rgba(17,17,17,.7)}
/* the same, for values that are sentences: one column, chip beside the text */
.csdefs--long{grid-template-columns:1fr}
.csdefs--long > div{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);column-gap:var(--gap);row-gap:12px}
.csdefs--long .v{max-width:var(--measure);font-weight:400;line-height:1.5;letter-spacing:-.011em}
.csdefs--long .v.mute{font-size:var(--fs-sm)}
@media (max-width:820px){.csfigs{grid-template-columns:1fr}.csdefs--long > div{grid-template-columns:1fr}}
@media (max-width:620px){.csdefs{grid-template-columns:1fr}}

/* chapters: a tilted chip in the page colour, then the one heading the chapter gets */
.cschap{margin-top:clamp(120px,14vw,200px)}
.cschap .cn{background:var(--c,var(--ink));color:var(--t,var(--cream));box-shadow:none;font-weight:600;rotate:-4deg;
  font-variant-numeric:tabular-nums}
.cschap > h2{margin-top:clamp(18px,2.2vw,30px);margin-left:-.035em;max-width:13em;font-size:var(--fs-chap);font-weight:700;
  line-height:.98;letter-spacing:-.055em;text-wrap:balance}
.chapintro{margin-top:clamp(20px,2.4vw,34px);font-size:var(--fs-lg);line-height:1.42;letter-spacing:-.015em;
  max-width:33em;text-wrap:pretty}
.chapintro a{border-bottom:1px solid rgba(17,17,17,.3)}
.csclose{margin-top:clamp(110px,13vw,190px)}
.csclose .rowlabel{justify-self:auto;align-self:center}

/* horizontal stills rail */
.csrail{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,560px);gap:20px;
  margin-top:clamp(40px,4.6vw,64px);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
  padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2));
  scroll-padding-inline:max(var(--gut),calc((100vw - var(--maxw))/2));cursor:grab}
.csrail::-webkit-scrollbar{display:none}
.csrail .csfig{margin-top:0;scroll-snap-align:start}
.csrail img{-webkit-user-drag:none;user-select:none}

/* the same rail for portrait artwork (App Store screenshots) */
.csrail--tall{grid-auto-columns:min(58vw,264px);gap:var(--gap)}
/* an image that should not be enlarged past its own size, centred on its mat */
.csmat--fit img{max-width:min(100%,720px);margin-inline:auto}

/* a wide comparison image: under 700px it keeps a readable size and pans sideways */
@media (max-width:700px){
  .cspan{overflow-x:auto;border-radius:var(--mr);scrollbar-width:none}
  .cspan::-webkit-scrollbar{display:none}
  .cspan img{width:940px;max-width:none}
}

/* phone screens: native captures, whole, in a drawn bezel on a mat. --mat is the ground, --n the count.
   The island is drawn at the position the captures use, so screens with and without one look the same.
   Under 700px the row scrolls sideways so each screen stays readable. */
.csphones{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));justify-items:center;
  gap:clamp(16px,3.6vw,56px);padding:clamp(28px,5vw,72px) clamp(20px,6.5vw,104px);border-radius:var(--mr);
  background:var(--mat,#ece8e1)}
.csphone{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.7vw,24px);width:100%;max-width:292px;min-width:0}
.csphone .scr{position:relative;display:block;width:100%;aspect-ratio:1206/2622;padding:2.4%;border-radius:15.6%/7.2%;
  background:#0d0f10;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),0 34px 54px -30px rgba(17,17,17,.6)}
.csphone .scr::after{content:"";position:absolute;left:35.1%;top:2.67%;width:29.7%;height:4.07%;border-radius:999px;background:#000}
.csphone .scr img{width:100%;height:100%;border-radius:13.9%/6.4%;outline:0;background:none;object-fit:cover}
.csphone .chip{padding:6px 12px;font-size:12.5px;white-space:nowrap}
.csphones--ink .chip{background:rgba(250,247,243,.12);color:var(--cream);box-shadow:inset 0 0 0 1px rgba(250,247,243,.16)}
.csphones--pair{grid-template-columns:repeat(2,minmax(0,292px));justify-content:center;column-gap:clamp(20px,7vw,112px)}
@media (max-width:700px){
  .csphones{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(60vw,236px);justify-content:start;
    overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:28px 24px}
  .csphones::-webkit-scrollbar{display:none}
  .csphone{scroll-snap-align:center}
  .csphones--pair{grid-template-columns:none;column-gap:16px}
}

/* the assistant character, live: the app's Rive file on an ink card, its states and motions as chips.
   .is-live once the runtime draws; .is-static where it cannot (the still stays, the chips go). */
.cschar{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(20px,3.4vw,52px);
  padding:clamp(14px,1.8vw,24px);padding-right:clamp(18px,3.4vw,52px);border-radius:var(--mr);background:#101314;color:var(--cream)}
.cschar-stage{position:relative;aspect-ratio:1;border-radius:clamp(12px,1.4vw,18px);overflow:hidden;
  background:radial-gradient(56% 56% at 50% 47%,rgba(255,194,118,.36) 0,rgba(255,194,118,0) 72%),#08090a}
.cschar .still,.cschar canvas.full{position:absolute;left:9%;top:9%;width:82%;height:82%;transition:opacity .5s ease}
.cschar .still{object-fit:contain;outline:0;background:none;border-radius:0;scale:.86}
.cschar canvas.full{opacity:0}
.cschar.is-live canvas.full{opacity:1}
.cschar.is-live .still{opacity:0}
.cschar-now,.cschar-av{position:absolute;background:rgba(250,247,243,.1);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(250,247,243,.16)}
.cschar-now{left:clamp(10px,1.2vw,16px);top:clamp(10px,1.2vw,16px);padding:6px 12px;font-size:12.5px}
.cschar-now i{background:var(--c);box-shadow:0 0 0 4px rgba(255,194,118,.24)}
.cschar-av{right:clamp(10px,1.2vw,16px);bottom:clamp(10px,1.2vw,16px);display:none;align-items:center;gap:6px;
  padding:4px 12px 4px 4px;border-radius:999px;font-size:12.5px}
.cschar.is-live .cschar-av{display:inline-flex}
.cschar canvas.mini{width:66px;height:36px}
.cschar-grp + .cschar-grp{margin-top:clamp(18px,2.2vw,30px)}
.cschar-lab{display:block;margin-bottom:10px;font-size:12.5px;line-height:1.3;color:rgba(250,247,243,.6)}
.cschar button.chip{border:0;font-family:inherit;cursor:pointer;background:rgba(250,247,243,.1);color:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(250,247,243,.16);transition:background .25s ease,color .25s ease,scale .2s ease}
.cschar button.chip[aria-pressed="true"]{background:var(--c);color:var(--t,#111);box-shadow:none;font-weight:600}
.cschar button.chip:active{scale:.95}
.cschar button.chip:disabled{opacity:.5;cursor:default}
.cschar button.chip:focus-visible{outline:2px solid var(--c);outline-offset:2px}
@media (hover:hover){.cschar button.chip:not(:disabled):not([aria-pressed="true"]):hover{background:rgba(250,247,243,.22)}}
.cschar.is-static{grid-template-columns:1fr;padding-right:clamp(14px,1.8vw,24px)}
.cschar.is-static .cschar-panel,.cschar.is-static .cschar-now{display:none}
.cschar.is-static .cschar-stage{aspect-ratio:16/9}
@media (max-width:820px){
  .cschar{grid-template-columns:1fr;padding-right:clamp(14px,1.8vw,24px)}
  .cschar-panel{padding:0 4px 8px}
  .cschar-av{bottom:auto;top:clamp(10px,1.2vw,16px)}
}

/* next project: the next card, on its own stage */
.cs .csnext{margin-top:clamp(110px,13vw,190px)}
.csnext .sc{position:relative;top:auto;margin-bottom:0}

/* ============================== 5 about ============================== */
/* the portrait, whole, tilted beside the title; the star pins its corner as on the home page */
.ph--about{padding-top:clamp(104px,8.6vw,124px)}
.aface{position:relative;flex:none;width:clamp(104px,17vw,236px);margin:0 clamp(4px,3.4vw,56px) clamp(6px,1vw,14px) 0}
.aface .pic{display:block;border-radius:clamp(12px,1.6vw,22px);overflow:hidden;rotate:5deg;background:#2a2118;
  box-shadow:0 18px 36px -18px rgba(17,17,17,.5);transition:rotate .5s var(--e)}
.aface img{width:100%;height:auto}
.aface .astar{position:absolute;z-index:1;left:-17%;top:-11%;width:36%;aspect-ratio:1}
.aface .astar svg{display:block;width:100%;height:100%}
@media (hover:hover){.aface:hover .pic{rotate:0deg}}
/* three short tiles under the head */
.bt{justify-content:space-between;gap:clamp(30px,4vw,60px)}
.bt .chip{align-self:flex-start}
.bt p{font-size:var(--fs-md);line-height:1.46;text-wrap:pretty}
.bt p a{border-bottom:1px solid rgba(17,17,17,.3)}
/* experience: the home tiles with room for one paragraph and a way in */
.xt{gap:clamp(26px,3.2vw,44px);padding:clamp(18px,2vw,28px)}
.xttop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xttop img{height:32px;width:auto;max-width:min(60%,150px);object-fit:contain;object-position:0 50%}
.xtb{display:flex;flex-direction:column;flex:1}
.xtb b{font-size:clamp(24px,2.5vw,36px);font-weight:700;line-height:1;letter-spacing:-.05em;text-wrap:balance}
.xtrole{margin-top:8px;font-size:var(--fs-sm);color:var(--mute)}
.xttext{margin-top:clamp(14px,1.6vw,20px);max-width:31em;line-height:1.46;text-wrap:pretty}
.xt .chip.go{align-self:flex-start;padding:5px 5px 5px 15px;font-size:13.5px;background:var(--ink)}
.xt--sm{gap:clamp(30px,3.6vw,52px)}
.xt--sm .xtb b{font-size:clamp(19px,1.7vw,23px);line-height:1.08;letter-spacing:-.04em}
.xt--sm .xttext{font-size:var(--fs-sm);color:rgba(17,17,17,.7)}
.edu{grid-template-columns:minmax(0,3fr) minmax(0,3fr) minmax(0,6fr)}
@media (max-width:900px){.edu{grid-template-columns:repeat(2,minmax(0,1fr))}.edu > :last-child{grid-column:1 / -1}}
@media (max-width:620px){.edu{grid-template-columns:1fr}}
/* skills: four cards on the stage, each a tilted chip and its list as chips */
.skgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tg)}
.skc{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(34px,4.6vw,68px);min-width:0;
  padding:clamp(18px,2vw,28px);border-radius:clamp(20px,2.4vw,34px);background:var(--card);
  box-shadow:inset 0 0 0 1px rgba(250,247,243,.1)}
.skc h3{font-size:15px;padding:9px 16px}
.skc .chip{white-space:normal}
@media (max-width:820px){.skgrid{grid-template-columns:1fr}}

/* ============================== 6 notes ============================== */
/* index: one white row per note; the row turns ink under the pointer */
.nrows{display:grid;gap:var(--tg);margin-top:clamp(44px,5.6vw,84px)}
.nr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;column-gap:clamp(14px,2.2vw,32px);
  padding:clamp(16px,2vw,28px) clamp(16px,2vw,28px);transition:background .35s ease,color .35s ease}
.nr .chip--tilt{padding:7px 12px;font-size:13px;background:var(--c);color:var(--t,#111);rotate:-8deg}
.nr h3{font-size:clamp(22px,2.5vw,36px);font-weight:700;line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
.nr p{margin-top:8px;max-width:36em;font-size:var(--fs-md);line-height:1.42;color:var(--mute);transition:color .35s ease}
.nrm{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.nr .rarrow{--as:clamp(40px,3.8vw,52px)}
@media (hover:hover){
  a.nr:hover{translate:none;background:var(--ink);color:var(--cream);box-shadow:0 0 0 1px var(--ink)}
  a.nr:hover p{color:rgba(250,247,243,.66)}
  a.nr:hover .nrm .chip{background:none;box-shadow:inset 0 0 0 1px rgba(250,247,243,.3)}
  a.nr:hover .rarrow{background:var(--cream);color:var(--ink)}
  a.nr:hover .chip--tilt{rotate:0deg}
}
@media (max-width:820px){
  .nr{grid-template-columns:auto minmax(0,1fr) auto;row-gap:14px;align-items:start}
  .nrm{grid-column:2;grid-row:2;flex-direction:row;flex-wrap:wrap;align-items:center}
}
@media (max-width:520px){.nr .rarrow{display:none}.nr{grid-template-columns:auto minmax(0,1fr)}}

/* article: the page keeps its reading column; head, meta and the way out take the site's shapes */
.artpage{padding-top:clamp(128px,14.5vw,204px)}
.artpage .artkick a{border-bottom:0;padding-bottom:8px}
.artpage .arth1{margin-top:clamp(20px,2.4vw,32px);margin-left:-.03em;font-size:clamp(34px,4.7vw,66px);font-weight:700;line-height:.98;
  letter-spacing:-.052em;text-wrap:balance}
.artpage .artmeta{justify-content:flex-start;gap:8px;margin-top:clamp(20px,2.4vw,30px);padding-top:0;border-top:0;color:var(--ink)}
.artpage .artbody h2{font-size:clamp(23px,2.3vw,31px);font-weight:700;line-height:1.06;letter-spacing:-.042em;text-wrap:balance}
.artpage .artfig img{border:0;border-radius:var(--mr);outline:1px solid rgba(17,17,17,.08);outline-offset:-1px}
.artpage .callout{border:0;border-radius:var(--tr);background:#fff;box-shadow:0 0 0 1px rgba(17,17,17,.07)}
.artpage .readnext{border-top:0;padding-top:0}
.artpage .rnrow{margin-top:14px;padding:clamp(18px,2.2vw,28px);border-radius:var(--tr);background:var(--ink);color:var(--cream);
  --as:clamp(40px,3.8vw,52px)}
.artpage .rntitle{font-size:clamp(22px,2.4vw,32px);font-weight:700;line-height:1.04;letter-spacing:-.046em;text-wrap:balance}
.artpage .readnext .chip{margin-top:12px}
@media (hover:hover){
  .artpage .rnrow:hover .rntitle{transform:none}
  .artpage .rnrow:hover .rarrow{background:var(--cream);color:var(--ink)}
}

/* ============================== 7 older templates ============================== */
/* client sites, mentoring and 404 keep their own markup; these bring their titles into the same voice */
[data-split] .char.alt,[data-split] .word.alt{font-family:inherit;font-style:normal;font-weight:inherit;
  font-size:1em;background:none;-webkit-text-fill-color:currentColor;color:inherit;padding-inline:0}
main .phead h1{font-size:clamp(32px,4.8vw,66px);font-weight:700;line-height:1;letter-spacing:-.05em;text-wrap:balance}
main .phead h1.disp{font-size:var(--fs-case);line-height:.9;letter-spacing:-.055em;margin-left:-.045em}
main .pnext h2,main .psec > h2{font-weight:700;letter-spacing:-.045em}
.pshot{border-radius:var(--mr)}
.arrowlink{gap:9px;font-size:13.5px;font-weight:500;margin-top:0}
.abox{width:22px;height:22px;border-radius:50%;border-color:rgba(17,17,17,.34)}
.abox svg{width:9px;height:9px}

/* ============================== 8 behaviour ============================== */
/* case study: how far through the page, and which chapter (quiet.js) */
.qprog{position:fixed;left:0;top:0;z-index:850;width:100%;height:3px;background:var(--grad);pointer-events:none;
  transform-origin:0 50%;transform:scaleX(var(--p,0))}
.cschap,.cssec[id]{scroll-margin-top:92px}
.qrail{position:fixed;z-index:40;top:50%;left:max(14px,calc((100vw - var(--maxw))/2 - 96px));translate:0 -50%;
  display:none;margin:0;padding:0;list-style:none;opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s}
.qrail.on{opacity:1;visibility:visible}
.qrail a{display:flex;align-items:center;gap:9px;padding-block:6px;white-space:nowrap;
  font-size:13.5px;font-weight:500;line-height:1.3;color:var(--mute);font-variant-numeric:tabular-nums;transition:color .25s ease}
.qrail a::before{content:"";flex:none;width:18px;height:1px;background:currentColor;
  transform-origin:0 50%;transform:scaleX(.4);transition:transform .45s var(--e)}
.qrail a[aria-current="true"]{color:var(--ink)}
.qrail a[aria-current="true"]::before{transform:none}
.qrail .rl{padding:3px 9px;border-radius:999px;background:var(--ink);color:var(--cream);
  opacity:0;transform:translateX(-6px);transition:opacity .22s ease,transform .35s var(--e);pointer-events:none}
.qrail:hover .rl,.qrail:focus-within .rl{opacity:1;transform:none}
@media (hover:hover){.qrail a:hover{color:var(--ink)}.qrail a:hover::before{transform:none}}
@media (min-width:1260px){.qrail{display:block}}

/* numbers: each card rises and its figure resolves, in reading order (quiet.js adds .q-in).
   Without script, or with reduced motion, the cards are simply there. */
@media (prefers-reduced-motion:no-preference){
  .csnums.q-pre .csnum{opacity:0;transform:translateY(20px)}
  .csnums.q-pre .csnum > *{opacity:0;filter:blur(5px)}
  .csnums.q-in .csnum{opacity:1;transform:none;
    transition:opacity .5s cubic-bezier(.33,1,.68,1),transform .8s var(--e);transition-delay:calc(var(--i,0)*90ms)}
  .csnums.q-in .csnum > *{opacity:1;filter:none;
    transition:opacity .6s cubic-bezier(.33,1,.68,1),filter .6s cubic-bezier(.33,1,.68,1);
    transition-delay:calc(var(--i,0)*90ms + var(--j,0)*50ms + 160ms)}
  .csnum:nth-child(2){--i:1}.csnum:nth-child(3){--i:2}.csnum:nth-child(4){--i:3}
  .csnum > :nth-child(2){--j:1}.csnum > :nth-child(3){--j:2}
}

/* ============================== 9 page transitions ============================== */
/* home.css sets the cross-fade and the cover group; the case page names its cover here */
.cscover > :first-child{view-transition-name:cover}