/* ==========================================================================
   Urban Transformation Studio — platform stylesheet
   SCE Negev · School of Architecture
   Family B of the studio design package: monochrome + one hue for state.
   Type: Inter (screen text) · IBM Plex Mono (labels, captions, metadata)
   ========================================================================== */

:root{
  --paper:#FFFFFF;
  --panel:#F6F7F8;
  --panel-2:#EDEFF1;
  --ink:#111111;
  --ink-2:#5A6167;
  --ink-3:#8A9096;
  --rule:#D8DCDF;
  --rule-2:#EAEDEF;
  --accent:#1E5F74;
  --accent-soft:#E2EEF1;

  --gut:24px;
  --pad:clamp(20px, 4.5vw, 64px);
  --measure:66ch;

  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light;
}


*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  font-feature-settings:'kern' 1,'liga' 1,'tnum' 1;
  -webkit-font-smoothing:antialiased;
}
/* clip, not hidden: `overflow:hidden` here would make body a scroll container
   and break every `position:sticky` inside it */
html{overflow-x:clip}
body{overflow-x:clip}

::selection{background:var(--accent);color:var(--paper)}

a{color:inherit;text-decoration:none}

img{max-width:100%;display:block}

hr{border:0;border-top:1px solid var(--rule);margin:0}

/* --- five-step type scale ------------------------------------------------ */

.t-display{
  font-size:clamp(38px,6.2vw,72px);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.022em;
  margin:0;
}
.t-part{
  font-size:clamp(28px,4vw,50px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
}
.t-section{
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.012em;
  margin:0;
}
.t-body{font-size:15px;line-height:1.62;margin:0}
.t-note{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:0}
.t-label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  direction:ltr;
  margin:0;
}
.t-num{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.measure{max-width:var(--measure)}
.dim{color:var(--ink-2)}
.dimmer{color:var(--ink-3)}
.en{direction:ltr;font-family:var(--mono)}

/* --- shell --------------------------------------------------------------- */

.wrap{
  max-width:1680px;
  margin:0 auto;
  padding:0 var(--pad);
}

/* the masthead is sticky, so anything jumped to by hash must clear it */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:78px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

.rule{border-top:1px solid var(--rule)}
.rule-2{border-top:1px solid var(--rule-2)}

/* --- masthead ------------------------------------------------------------ */

.mast{
  position:sticky;
  top:0;
  z-index:80;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.mast__in{
  display:flex;
  align-items:center;
  gap:var(--gut);
  height:60px;
}
.mast__mark{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-inline-end:auto;
  min-width:0;
}
.mast__mark b{
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.mast__mark span{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}
.nav{display:flex;gap:2px;align-items:center}
.nav a{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  padding:8px 11px;
  border:1px solid transparent;
  transition:color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.nav a:hover{color:var(--ink);border-color:var(--rule)}
.nav a[aria-current="page"]{color:var(--accent);border-color:var(--rule)}


/* the masthead must never let the wordmark run under the nav */
.mast__mark{overflow:hidden}

@media (max-width:940px){
  .mast__in{gap:12px}
  .mast__mark span{display:none}
  .nav a{padding:8px 8px;letter-spacing:.1em}
  /* short labels, carried on the markup so the long ones stay in the DOM */
  .nav a[data-short]{font-size:0}
  .nav a[data-short]::after{content:attr(data-short);font-size:10px;letter-spacing:.1em}
}
@media (max-width:560px){
  .mast__mark b[data-short]{font-size:0}
  .mast__mark b[data-short]::after{
    content:attr(data-short);font-size:13px;letter-spacing:.08em;
  }
  .nav a{padding:8px 6px}
}

/* --- section scaffolding ------------------------------------------------- */

.sect{padding:clamp(56px,8vw,120px) 0;border-top:1px solid var(--rule)}
.sect--flush{border-top:0}

.sect__head{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:var(--gut) clamp(24px,5vw,80px);
  align-items:start;
  margin-bottom:clamp(32px,5vw,64px);
}
@media (max-width:900px){ .sect__head{grid-template-columns:1fr} }

.sect__no{
  font-family:var(--mono);
  font-size:clamp(30px,4.5vw,54px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink);
  display:block;
  margin-bottom:14px;
  font-variant-numeric:tabular-nums;
}

.lead{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.56;
  color:var(--ink-2);
  max-width:60ch;
}

/* --- link with rule ------------------------------------------------------ */

.link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  padding-bottom:5px;
  border-bottom:1px solid var(--ink);
  transition:color .18s var(--ease),border-color .18s var(--ease),gap .18s var(--ease);
}
.link:hover{color:var(--accent);border-color:var(--accent);gap:14px}
.link::after{content:'→';font-family:var(--sans);font-size:12px}

/* --- buttons ------------------------------------------------------------- */

.btn{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
  background:none;
  border:1px solid var(--rule);
  padding:9px 14px;
  cursor:pointer;
  line-height:1;
  white-space:nowrap;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.btn:hover{color:var(--ink);border-color:var(--ink-3)}
.btn[aria-pressed="true"],.btn.is-on{
  color:var(--accent);
  border-color:var(--accent);
  background:var(--accent-soft);
}
.btn:disabled{opacity:.4;cursor:default}
.btn:disabled:hover{color:var(--ink-2);border-color:var(--rule)}

/* ==========================================================================
   THE FOLD
   A sheet is 47 × 32 cm, printed both sides, creased into 6 columns × 2 rows.
   Closed it is one panel, 7.8 × 16 cm. The accordion opens first, then the
   half-fold drops. Every leaf below is a real hinge.
   ========================================================================== */

.fold{
  --cols:6;
  --rows:2;
  --pw:120px;            /* panel width, set by script */
  --ph:245px;            /* panel height, set by script */
  --A:172deg;            /* accordion dihedral, 172 → 0 */
  --B:-172deg;           /* half-fold dihedral, -172 → 0 */
  --tx:0px;
  --ty:0px;
  --flip:0deg;
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.fold__stage{
  position:relative;
  flex:0 0 auto;
  width:calc(var(--pw) * var(--cols));
  height:calc(var(--ph) * var(--rows));
  perspective:calc(var(--pw) * 14);
  perspective-origin:50% 42%;
}

/* the orbit layer: the reader turns the sheet, the flip turns the page over.
   Two separate transforms, because they move at very different speeds. */
.fold__orbit{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--yaw,0deg)) rotateX(var(--pitch,0deg));
  transition:transform .9s var(--ease);
}
/* while the pointer is driving it, follow immediately */
.fold.is-orbiting .fold__orbit{transition:transform .12s linear}

.fold__flip{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(var(--flip));
  transition:transform 1.15s var(--ease);
}

.fold__sheet{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:translate3d(var(--tx),var(--ty),0) rotateX(var(--tilt,0deg));
  transition:transform .9s var(--ease);
}

/* a leaf = one column. leaf 0 is the cover (right-hand column of side A). */
.lf{
  position:absolute;
  top:0;
  right:0;
  width:var(--pw);
  height:var(--ph);
  transform-style:preserve-3d;
}
.lf .lf{
  right:100%;
  top:0;
  transform-origin:right center;
  transform:translateZ(calc(var(--sgn,1) * var(--dz,0px))) rotateY(var(--A));
  transition:transform .9s var(--ease);
}

/* the bottom row, hinged on the half-fold crease */
.flap{
  position:absolute;
  top:100%;
  left:0;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transform-origin:center top;
  transform:rotateX(var(--B));
  transition:transform .9s var(--ease);
}

.face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  background-repeat:no-repeat;
  background-size:calc(var(--cols) * 100%) calc(var(--rows) * 100%);
  background-color:var(--panel-2);
  outline:.5px solid rgba(17,17,17,.10);
  outline-offset:-.5px;
}
.face--a{background-image:var(--img-a)}
.face--b{background-image:var(--img-b);transform:rotateY(180deg)}

/* paper: a hairline of shade along each crease so the folds read as folds */
.lf::after{
  content:'';
  position:absolute;
  top:0;bottom:0;left:0;
  width:14%;
  pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.13), rgba(0,0,0,0));
  opacity:calc(var(--crease,0));
  transition:opacity .9s var(--ease);
  z-index:3;
}

.fold--flat .lf::after{opacity:0}

/* dragging the scrubber must track the pointer, not chase it */
.fold.is-scrubbing .lf .lf,
.fold.is-scrubbing .flap,
.fold.is-scrubbing .fold__sheet,
.fold.is-scrubbing .lf::after{transition:none}

/* panel numbering overlay */
.fold__grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(2,1fr);
  pointer-events:none;
  opacity:0;
  transition:opacity .4s var(--ease);
  z-index:6;
}
.fold__grid.is-on{opacity:1}
.fold__grid span{
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  margin:-.5px 0 0 -.5px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--accent);
  display:flex;
  align-items:flex-start;
  padding:6px;
  background:color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

/* --- fold controls ------------------------------------------------------- */

.foldbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:14px 0;
}
.foldbar__spacer{margin-inline-start:auto}

@media (max-width:900px){
  .foldbar .t-label{flex:1 1 100%;order:-1}
  .foldbar__spacer{display:none}
}

.scrub{
  flex:1 1 200px;
  min-width:160px;
  height:26px;
  position:relative;
  cursor:ew-resize;
  touch-action:none;
}
.scrub::before{
  content:'';
  position:absolute;
  left:0;right:0;top:50%;
  height:1px;
  background:var(--rule);
}
.scrub__fill{
  position:absolute;
  left:0;top:50%;
  height:1px;
  background:var(--accent);
  width:0%;
}
.scrub__knob{
  position:absolute;
  top:50%;
  width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;
  background:var(--accent);
  border-radius:50%;
}
.scrub__ticks{position:absolute;inset:0;pointer-events:none}
.scrub__ticks i{
  position:absolute;top:50%;width:1px;height:7px;margin-top:-3.5px;
  background:var(--rule);
}

/* ==========================================================================
   THE TWELVE — index of sheets
   ========================================================================== */

/* six across, twice — the same count as the columns of the sheet itself.
   Every step divides twelve, so the grid never leaves a ragged last row. */
.grid12{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
@media (max-width:1180px){ .grid12{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:820px){ .grid12{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .grid12{grid-template-columns:repeat(2,minmax(0,1fr))} }

.card{
  position:relative;
  background:var(--paper);
  padding:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  transition:background .2s var(--ease);
}
.card:hover{background:var(--panel)}
.card.is-empty:hover{background:var(--paper)}

.card__shot{
  position:relative;
  aspect-ratio:.4896;          /* one folded panel: 7.83 × 16 cm */
  /* in a narrow grid the true panel proportion gets absurdly tall; crop from
     the foot of the cover, which carries the credits, not the city */
  max-height:min(54vh,470px);
  overflow:hidden;
  background:var(--panel-2);
  perspective:900px;
}
.card__shot img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 26%;
  transform-origin:right center;
  transition:transform .55s var(--ease),opacity .35s var(--ease);
  backface-visibility:hidden;
}
.card:hover .card__shot img{transform:rotateY(-17deg) translateZ(0)}

.card__peek{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:600% 200%;
  background-position:80% 0%;      /* column 5 (rightmost), top row */
  opacity:0;
  transform:translateX(-6%);
  transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.card:hover .card__peek{opacity:1;transform:translateX(0)}

.card__tint{
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:var(--tint,var(--ink));
  z-index:2;
}
.card__body{
  padding:14px 16px 18px;
  display:flex;
  flex-direction:column;
  gap:3px;
  flex:1;
}
.card__name{font-size:16px;font-weight:700;letter-spacing:-.012em;line-height:1.15}
.card__meta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.card__team{font-size:12.5px;color:var(--ink-2);line-height:1.4;margin-top:6px}
.card__carries{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:auto;
  padding-top:12px;
}
.card__carries b{font-weight:500;color:var(--ink)}

.card.is-empty{opacity:.55}
.card.is-empty .card__shot{
  background:repeating-linear-gradient(-45deg,var(--panel) 0 6px,var(--paper) 6px 12px);
}
.card__missing{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ==========================================================================
   CROSS-READING MATRIX
   ========================================================================== */

.matrix-wrap{overflow-x:auto;border:1px solid var(--rule)}
.matrix{
  border-collapse:collapse;
  width:100%;
  min-width:640px;
  font-size:13.5px;
}
.matrix th,.matrix td{
  padding:0;
  text-align:center;
  vertical-align:middle;
  border-bottom:1px solid var(--rule-2);
}
.matrix thead th{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink-3);
  font-weight:400;
  padding:14px 0;
  border-bottom:1px solid var(--rule);
  text-transform:uppercase;
}
/* the whole header cell is the link, without changing the table's box model */
.matrix thead th a{display:block;margin:-14px 0;padding:14px 0}
.matrix thead th a:hover{color:var(--accent)}
.matrix .m-theme{
  text-align:left;
  padding:11px 16px 11px 18px;
  width:36%;
  min-width:200px;
  font-weight:500;
  line-height:1.3;
}
.matrix .m-theme small{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:3px;
  font-weight:400;
}
.matrix .m-n{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-2);
  width:58px;
  font-variant-numeric:tabular-nums;
  padding-right:12px;
  text-align:right;
}
.matrix tbody tr{transition:background .16s var(--ease);cursor:default}
.matrix tbody tr:hover{background:var(--panel)}
.matrix tbody tr.is-zero .m-theme{color:var(--accent)}
.matrix tbody tr.is-zero .m-n{color:var(--accent)}
.matrix tbody tr.is-zero{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}

.matrixbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--gut);
  flex-wrap:wrap;
  margin-bottom:14px;
  min-height:20px;
}
#readout{transition:color .18s var(--ease)}
#readout b{font-weight:700;color:var(--ink)}

.dot{
  display:block;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--tint,var(--ink));
  transition:transform .16s var(--ease),box-shadow .16s var(--ease);
}
.dot--off{
  display:inline-block;
  width:8px;height:1px;border-radius:0;background:var(--ink-3);
  opacity:.5;vertical-align:middle;
}

/* every filled dot is the sheet it stands for */
.dotlink{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 4px;
  margin:-12px 0;
}
.dotlink:hover .dot,
.dotlink:focus-visible .dot{
  transform:scale(1.7);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--tint, #111) 20%, transparent);
}
.dotlink:focus-visible{outline:none}
.dotlink.is-dead{cursor:default}
.dotlink.is-dead .dot{opacity:.4}
.dotlink.is-dead:hover .dot{transform:none;box-shadow:none}

/* pointing at a dot lights the city it belongs to, all the way down */
.matrix td[data-code],
.matrix th[data-code]{transition:background .14s var(--ease)}
.matrix[class*="hl-"] th[data-code]{color:var(--ink-3)}

.matrix.hl-SCL .c-SCL, .matrix.hl-CPT .c-CPT, .matrix.hl-NBO .c-NBO,
.matrix.hl-JKT .c-JKT, .matrix.hl-MNL .c-MNL, .matrix.hl-ADD .c-ADD,
.matrix.hl-AMM .c-AMM, .matrix.hl-CAS .c-CAS, .matrix.hl-SAO .c-SAO,
.matrix.hl-MEX .c-MEX, .matrix.hl-CAI .c-CAI, .matrix.hl-DXB .c-DXB{
  background:var(--panel);
}
.matrix.hl-SCL th.c-SCL, .matrix.hl-CPT th.c-CPT, .matrix.hl-NBO th.c-NBO,
.matrix.hl-JKT th.c-JKT, .matrix.hl-MNL th.c-MNL, .matrix.hl-ADD th.c-ADD,
.matrix.hl-AMM th.c-AMM, .matrix.hl-CAS th.c-CAS, .matrix.hl-SAO th.c-SAO,
.matrix.hl-MEX th.c-MEX, .matrix.hl-CAI th.c-CAI, .matrix.hl-DXB th.c-DXB{
  color:var(--ink);
}

/* theme detail blocks */
.theme{
  padding:clamp(28px,4vw,44px) 0;
  border-top:1px solid var(--rule);
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--gut) clamp(24px,4vw,64px);
}
@media (max-width:880px){ .theme{grid-template-columns:1fr} }

.theme__n{
  font-family:var(--mono);
  font-size:clamp(24px,3vw,38px);
  line-height:1;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.theme__n small{font-size:.5em;color:var(--ink-3);letter-spacing:.02em}

.chiprow{display:flex;flex-wrap:wrap;gap:4px;margin:14px 0 0}
.chip{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.11em;
  padding:4px 6px;
  border:1px solid var(--rule);
  color:var(--ink-3);
  line-height:1;
}
.chip.is-on{color:var(--paper);border-color:transparent;background:var(--tint,var(--ink))}

.finding{
  background:var(--panel);
  padding:18px 20px;
  margin-top:18px;
  border-left:2px solid var(--accent);
}
.finding .t-label{margin-bottom:8px}

/* ==========================================================================
   SHEET PAGE
   ========================================================================== */

.sheethead{
  display:grid;
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:var(--gut) clamp(24px,5vw,72px);
  align-items:end;
  padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,34px);
}
@media (max-width:900px){ .sheethead{grid-template-columns:1fr;align-items:start} }

.factlist{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:0;
  border-top:1px solid var(--rule);
  font-size:13.5px;
}
.factlist dt{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-3);
  padding:9px 20px 9px 0;
  border-bottom:1px solid var(--rule-2);
  white-space:nowrap;
}
.factlist dd{
  margin:0;
  padding:9px 0;
  border-bottom:1px solid var(--rule-2);
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.foldzone{
  background:var(--panel);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:clamp(28px,5vw,64px) 0 clamp(16px,2vw,28px);
}

.flatview{
  position:relative;
  border:1px solid var(--rule);
  background:var(--panel-2);
  overflow:hidden;
  cursor:zoom-in;
  touch-action:none;
}
.flatview.is-zoomed{cursor:grab}
.flatview.is-panning{cursor:grabbing}
.flatview img{
  width:100%;
  transform-origin:0 0;
  transition:transform .35s var(--ease);
  will-change:transform;
}
.flatview.is-panning img{transition:none}

.sidepick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:14px 0}

.pager{
  display:flex;
  justify-content:space-between;
  gap:var(--gut);
  padding:clamp(28px,4vw,56px) 0;
  border-top:1px solid var(--rule);
}
.pager a{display:flex;flex-direction:column;gap:5px;min-width:0}
.pager a:last-child{text-align:right;align-items:flex-end}
.pager b{font-size:18px;font-weight:700;letter-spacing:-.012em}

/* --- one sheet, seen from the cohort's side ------------------------------ */

.themegrid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:0;
  border:1px solid var(--rule);
  border-width:1px 0 0 1px;
}
.themegrid .tg-head{
  grid-column:1/-1;
  background:var(--paper);
  padding:16px 18px 12px;
  border:0 solid var(--rule);
  border-width:0 1px 1px 0;
}
.tg{
  background:var(--paper);
  border:0 solid var(--rule);
  border-width:0 1px 1px 0;
  padding:16px 18px 20px;
  transition:background .18s var(--ease);
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.tg b{font-size:15px;font-weight:700;letter-spacing:-.008em;line-height:1.25}
.tg .t-note{font-size:13px}
.tg:not(.is-on){background:var(--panel)}
.tg:not(.is-on) b{color:var(--ink-2);font-weight:500}
.tg:not(.is-on) .t-num{opacity:.65}
.tg.is-on{border-left:2px solid var(--tint,var(--accent));padding-left:16px}
.tg:hover{background:var(--panel-2)}
.tg:hover b{color:var(--ink)}

#absentMini b{font-size:26px}
#absentMini h3{margin-bottom:0}
#absentMini > a{padding:18px 20px 20px}

/* --- contents list ------------------------------------------------------- */

.contents{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--rule);
}
.contents li{
  list-style:none;
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:10px 0;
  border-bottom:1px solid var(--rule-2);
  font-size:14px;
}
.contents li i{
  font-family:var(--mono);
  font-style:normal;
  font-size:11px;
  color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.contents{padding:0;margin:0}

/* ==========================================================================
   HERO
   ========================================================================== */

/* block only: .hero is applied to the same element as .wrap, and a padding
   shorthand here would wipe out the wrap's side margins */
.hero{
  padding-top:clamp(48px,7vw,104px);
  padding-bottom:clamp(36px,5vw,64px);
}
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px,5vw,80px);
  align-items:end;
}
@media (max-width:960px){ .hero__grid{grid-template-columns:1fr;align-items:start} }

.hero__kicker{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:clamp(20px,3vw,34px);
}

.statline{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid var(--rule);
  margin-top:clamp(28px,4vw,48px);
}
.statline div{
  flex:1 1 130px;
  padding:16px 18px 16px 0;
  border-bottom:1px solid var(--rule-2);
}
.statline b{
  display:block;
  font-family:var(--mono);
  font-size:clamp(22px,2.6vw,32px);
  font-weight:400;
  line-height:1;
  letter-spacing:-.02em;
  margin-bottom:7px;
  font-variant-numeric:tabular-nums;
}

/* --- the absence callout ------------------------------------------------- */

.absent{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
}
.absent > div,.absent > a{background:var(--paper);padding:22px 20px 26px;display:block}
.absent > a{transition:background .18s var(--ease)}
.absent > a:hover{background:var(--panel)}
.absent b{
  display:block;
  font-family:var(--mono);
  font-size:30px;
  font-weight:400;
  line-height:1;
  color:var(--accent);
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.absent h3{font-size:16px;font-weight:700;margin:0 0 7px;letter-spacing:-.01em}

/* --- teaching team ------------------------------------------------------- */

.people{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:0 clamp(24px,4vw,56px);
  border-top:1px solid var(--rule);
}
.people div{padding:16px 0;border-bottom:1px solid var(--rule-2)}
.people b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.008em;margin-bottom:4px}

/* --- footer -------------------------------------------------------------- */

.foot{
  border-top:1px solid var(--rule);
  padding:clamp(32px,4vw,56px) 0 clamp(40px,5vw,72px);
}
.foot__in{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gut) clamp(24px,5vw,64px);
  align-items:flex-start;
  justify-content:space-between;
}

/* --- reveal on scroll ---------------------------------------------------- */

/* Gated on .js-rv, which the script adds only once it knows it can reveal
   them again. A reveal is an enhancement; content must never depend on it. */
.js-rv .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-rv .rv.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
  .js-rv .rv{opacity:1;transform:none}
}

/* --- skip link ----------------------------------------------------------- */
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--ink);color:var(--paper);
  padding:10px 16px;z-index:200;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.skip:focus{left:8px;top:8px}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ==========================================================================
   THE STUDIO PAGE
   The studio is the subject; the sheets are the evidence it produced. These
   sections carry the argument and the ask.
   ========================================================================== */

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:14px 28px;
  align-items:center;
  margin-top:28px;
}
.link--quiet{color:var(--ink-2);border-bottom-color:var(--rule)}
.link--quiet:hover{color:var(--accent);border-bottom-color:var(--accent)}


/* --- the vocabulary of change -------------------------------------------- */

.vocab{
  display:grid;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--gut) clamp(24px,5vw,72px);
  align-items:start;
  margin-top:clamp(32px,5vw,60px);
  padding-top:clamp(28px,4vw,44px);
  border-top:1px solid var(--rule);
}
@media (max-width:900px){ .vocab{grid-template-columns:1fr} }

.vrow{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,6fr);
  gap:8px clamp(16px,2.5vw,32px);
  align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid var(--rule-2);
}
.vrow:first-child{border-top:1px solid var(--rule-2)}
.vrow__place{padding-top:3px}
.vrow__term{font-size:17px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.vrow__term i{font-weight:400;font-style:normal;color:var(--ink-3);font-size:14px}
@media (max-width:760px){
  .vrow{grid-template-columns:1fr;gap:4px;padding:14px 0}
}

/* --- the three phases ----------------------------------------------------- */

.phases{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0;
  border:1px solid var(--rule);
  border-width:1px 0 0 1px;
}
.phase{
  background:var(--paper);
  border:0 solid var(--rule);
  border-width:0 1px 1px 0;
  padding:clamp(22px,3vw,34px) clamp(20px,2.5vw,30px) clamp(26px,3.5vw,38px);
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.phase__head{display:flex;align-items:baseline;gap:14px}
.phase__n{
  font-family:var(--mono);
  font-size:clamp(26px,3vw,38px);
  line-height:1;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.phase .t-body{flex-grow:1}
.phase__out{
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--rule-2);
  font-size:14px;
  font-weight:500;
}
.phase__out .t-label{display:block;margin-bottom:5px}

/* --- the field of cities -------------------------------------------------- */

.region{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px clamp(24px,4vw,56px);
  align-items:baseline;
  margin-top:clamp(28px,4vw,48px);
  padding-top:clamp(22px,3vw,34px);
  border-top:1px solid var(--rule);
}
@media (max-width:760px){ .region{grid-template-columns:1fr} }

.chiprow--big{gap:8px}
.chip--plain{
  background:none;
  color:var(--ink);
  border:1px solid var(--rule);
  font-size:12px;
  letter-spacing:.02em;
  padding:8px 14px;
  text-transform:none;
  font-family:var(--sans);
}

/* --- the work ------------------------------------------------------------- */

.worklede{
  margin:clamp(28px,4vw,48px) 0 clamp(20px,3vw,30px);
  padding-top:clamp(24px,3.5vw,38px);
  border-top:1px solid var(--rule);
}



/* the absences read as links on the studio page */
.absent > a{
  background:var(--paper);
  padding:22px 20px 26px;
  display:block;
  transition:background .18s var(--ease);
}
.absent > a:hover{background:var(--panel)}


/* --- the sheet as the demonstration ---------------------------------------
   It is the one object on the page that moves, so it gets room and a cue. */
/* The scroll track that drives the fold. Three screens tall, with the sheet
   pinned in the middle of it, so scrolling through the section is what opens
   the sheet. Without a height here the track is shorter than the viewport,
   the scroll range is negative, and the unfold never runs. */
.foldscroll{height:300vh;position:relative}
.foldscroll__stick{
  position:sticky;
  top:60px;
  height:calc(100vh - 60px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:24px;
}
.foldscroll__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:min(58vh,560px);
  /* a flex item defaults to min-width:auto, so the sheet could size itself
     from its parent and then push that parent wider — a loop that left the
     stage twice the viewport on a phone */
  min-width:0;
}
.foldscroll__stick > .wrap{min-width:0}

.foldscroll__inner{cursor:grab}
.foldscroll__inner:active{cursor:grabbing}
.foldhint{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  color:var(--ink-3);
  transition:color .2s var(--ease);
}
.foldscroll__stick:hover .foldhint{color:var(--ink-2)}
.foldhint__dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  flex:0 0 auto;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:1;transform:scale(1.35)}
}
@media (prefers-reduced-motion: reduce){ .foldhint__dot{animation:none;opacity:.8} }

/* no pointer to move on a touch screen — do not ask for one */
@media (hover: none){ .foldhint__hover{display:none} }

/* ==========================================================================
   PHONE
   The page already reflows; what needs work on a small screen is the two
   things that are wider than a phone by nature — the twelve-column matrix
   and the sheet — plus the control bar under the sheet.
   ========================================================================== */

@media (max-width: 700px){

  /* --- the matrix ---------------------------------------------------------
     640px of table in a 335px window. The theme column pins to the left so
     you never lose the row you are reading while swiping across the cities,
     and the right edge fades so it is obvious there is more. */
  .matrix-wrap{
    position:relative;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .matrix{table-layout:fixed}
  .matrix .m-n{width:52px}
  .matrix .m-theme{
    position:sticky;
    left:0;
    z-index:2;
    background:var(--paper);
    width:150px;
    font-size:12.5px;
    padding-right:12px;
    box-shadow:1px 0 0 var(--rule-2);
  }
  .matrix tbody tr.is-zero .m-theme{background:var(--panel)}
  /* the row hover tint must not show through the pinned cell */
  .matrix tbody tr:hover .m-theme{background:var(--panel)}

  .matrix-wrap::after{
    content:'';
    position:absolute;
    top:0;right:0;bottom:0;
    width:36px;
    pointer-events:none;
    background:linear-gradient(to right, transparent, var(--paper));
  }
  .matrixbar{gap:4px}

  /* --- the sheet ----------------------------------------------------------
     It is the one thing worth giving screen to, so it gets the width back
     from the page padding and a taller stage. */
  .foldscroll{height:240vh}
  .foldscroll__inner{min-height:40vh}
  .foldzone .fold,
  .foldscroll .fold{margin-inline:calc(var(--pad) * -0.5)}

  /* --- the control bar ----------------------------------------------------
     Was wrapping to three ragged rows with one button orphaned. Now: the
     state on its own line, the scrub full width, the buttons in a row. */
  .foldbar{gap:10px 8px}
  .foldbar .t-label{flex:1 1 100%;order:-1}
  .foldbar .scrub{flex:1 1 100%;order:1;margin:2px 0}
  .foldbar .btn{order:2;flex:1 1 auto;text-align:center}
  .foldbar__spacer{display:none}

  /* --- odds and ends ------------------------------------------------------ */
  .hero__cta{gap:12px 20px}
  .vrow{grid-template-columns:1fr}

  /* the city codes are 9.5px and also tap targets */
  .chip{font-size:11px;padding:7px 9px}
  .chiprow{gap:5px}
}

/* very narrow: the sheet still has to be a sheet */
@media (max-width: 400px){
  .foldscroll__inner{min-height:36vh}
  .matrix .m-theme{width:126px;font-size:12px}
}

/* --- the twelve, folded or laid open -------------------------------------
   Two readings of the same set: the covers as they sit folded on a table,
   or every sheet open at once, which is the atlas. */

.gridbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gut);
  flex-wrap:wrap;
  margin-bottom:14px;
}
.gridbar__btns{display:flex;gap:6px}

.card__open{display:none}
.card__open img{width:100%;height:100%;object-fit:cover}

.grid12.is-open{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid12.is-open .card__shot{display:none}
.grid12.is-open .card__open{
  display:block;
  position:relative;
  aspect-ratio:1.469;          /* the open sheet: 47 × 32 cm */
  overflow:hidden;
  background:var(--panel-2);
}
.grid12.is-open .card__open .card__missing{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
/* the whole sheet is the subject now, so the card body steps back */
.grid12.is-open .card__team,
.grid12.is-open .card__carries{display:none}

@media (max-width:1180px){ .grid12.is-open{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .grid12.is-open{grid-template-columns:1fr} }

/* --- course credit -------------------------------------------------------- */
.credit{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:var(--gut) clamp(24px,4vw,56px);
  margin-top:clamp(28px,4vw,48px);
  padding-top:clamp(22px,3vw,32px);
  border-top:1px solid var(--rule);
}
.credit .t-body{line-height:1.55}
.credit__link{
  color:var(--accent);
  border-bottom:1px solid var(--accent);
  overflow-wrap:anywhere;
}
.credit__link:hover{opacity:.7}

/* the address sits behind an envelope: one glyph instead of a line of text
   under every name. Title and aria-label carry the address itself. */
.people__mail{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  margin-inline-start:9px;
  vertical-align:-4px;
  border:1px solid var(--rule);
  border-radius:50%;
  color:var(--ink-3);
  transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease);
}
.people__mail svg{
  width:11px;
  height:11px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.people__mail:hover,
.people__mail:focus-visible{
  color:var(--paper);
  background:var(--accent);
  border-color:var(--accent);
}

/* an academic title reads as a qualifier, not as part of the name */
.people__title{font-weight:500;color:var(--ink-3)}