/* ONE SYSTEM
   Columns: 12 (4 on mobile), margin --m, gutter --g, visible as hairlines. Baseline --b = 8px.
   Type: four sizes on one ratio (1.75): small / text / large / display. Nothing else.
   Zones (desktop): name cols 1-4 | windows cols 5-10 | index cols 11-12. Max = cols 1-10.
   The index never moves. Paper, ink, one Munich-1972 orange. */
:root {
  --paper: #f2efe8;
  --ink: #141414;
  --mute: #6f6c66;
  --hair: rgba(20, 20, 20, .08);
  --shade: #e0dcd2;
  --accent: #f07d00;
  --m: 32px;
  --g: 16px;
  --cols: 12;
  --b: 8px;
  --r: 1.75;
  --s: 13px;                                   /* small    13    */
  --t: calc(var(--s) * var(--r));              /* text     22.75 */
  --l: calc(var(--t) * var(--r));              /* large    39.8  */
  --d: calc(var(--l) * var(--r));              /* display  69.7  */
  --x: calc(var(--d) * var(--r) * var(--r));    /* poster   213 (the one giant word of an open view; two steps up the same ratio) */
  --lh-s: calc(var(--b) * 2);
  --lh-t: calc(var(--b) * 3.5);
  --lh-l: calc(var(--b) * 5);
  --lh-d: calc(var(--b) * 8);
  --pad: var(--g);
  --row: calc(var(--b) * 5);                   /* THE vertical module: every list row is a whole multiple of 40px */                             /* inner margin of a window */
  --ease: cubic-bezier(.76, 0, .18, 1);
  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--paper); color: var(--ink); -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font); font-weight: 400; font-size: var(--s); line-height: var(--lh-s); -webkit-font-smoothing: antialiased; overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left; }
a { color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
h1, h2, h3, p { font-size: inherit; font-weight: inherit; }

.t-s { font-size: var(--s); line-height: var(--lh-s); }
.t-t { font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; }
.t-l { font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; font-weight: 500; }   /* no separate large step: maps to text */
.t-d { font-size: var(--x); line-height: .76; letter-spacing: -.02em; font-weight: 800; }   /* display */
.lc { text-transform: lowercase; }
.b { font-weight: 800; }
.mute { color: var(--mute); }

/* the grid, felt: column hairlines behind everything + ticks on the top edge */
.gridlines, .ticks {
  position: fixed; left: 0; right: 0; top: 0; pointer-events: none;
  padding: 0 var(--m); display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g);
}
.gridlines { bottom: 0; z-index: 20; }
.gridlines i, .ticks i { position: relative; }
.gridlines i::before, .gridlines i:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hair); }
.gridlines i::before { left: calc(var(--g) / -2); }
.gridlines i:last-child::after { right: calc(var(--g) / -2); }   /* one line per column boundary, at the gutter centre */
.ticks { display: none; }
.ticks i { position: relative; }
.ticks i::before, .ticks i:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink); }
.ticks i::before { left: calc(var(--g) / -2); } .ticks i:last-child::after { right: calc(var(--g) / -2); }

.frame {
  position: relative; z-index: 1;
  height: 100dvh; padding: calc(var(--b) * 3) var(--m) calc(var(--b) * 4);
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g);
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.masthead {
  grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid;
  border-bottom: 3px solid var(--ink); padding-bottom: var(--b);
}
.m-name { grid-column: 1 / 5; visibility: hidden; }   /* the hero is the one name */
.m-role { grid-column: 5 / 9; }
.m-place { grid-column: 9 / 11; }
.m-mail { grid-column: 11 / -1; }
.m-mail a { text-decoration: none; border-bottom: 1px solid currentColor; }
.m-mail a:hover { color: var(--accent); }

.hero { grid-column: 1 / 11; grid-row: 2; position: relative; min-height: 40vh; overflow: hidden; transition: opacity .15s linear; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.hero-hint { position: absolute; top: calc(var(--b) * 2); left: 0; pointer-events: none; color: var(--ink) !important; }
.intro { grid-column: 1 / 11; grid-row: 3; margin-top: calc(var(--b) * 3); padding-top: calc(var(--b) * 2); border-top: 1px solid var(--ink); }
body.hero-off .hero { opacity: 0; }

/* the index: fixed zone, cols 11-12, never travels */
.rail { grid-column: 11 / -1; grid-row: 2 / 4; display: grid; grid-template-rows: repeat(4, auto); align-content: end; position: relative; padding-bottom: calc(var(--b) * 17); }   /* pinned to the frame bottom by a fixed offset: never moves between states */   /* the index sits in the name's bottom band */
.tab {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--b) * .5);
  border-top: 1px solid var(--ink); padding: var(--b) 0 calc(var(--b) * 2); min-width: 0;
}
body[data-state="idle"] .tab { padding: var(--tab-pt, var(--b)) 0 var(--tab-pb, calc(var(--b) * 2)); }
body[data-state="idle"] .rail { transform: translateY(var(--rail-shift, 0px)); }
@media (min-width: 761px) { body[data-state="idle"] .hero { transform: translateY(calc(var(--hero-nudge-top, 0px) - var(--hero-nudge, 0px))); } }   /* a shift, not a resize: the canvas keeps its size, so the resting name stays pixel-identical */
body.name-top[data-state="idle"] .hero-hint { top: auto; bottom: var(--b); }   /* name at the top: the hint joins the bottom band */
.tab-num { font-variant-numeric: tabular-nums; }
.tab-word { white-space: normal; }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
.tab:hover::after, .tab.front::after { transform: scaleX(1); }
.tab[aria-expanded="true"] .tab-num { color: var(--accent); }
.tab.ack { border-top-color: var(--accent); }   /* own-entry acknowledgement */
.tab[data-quiet]:focus-visible { outline: none; }

.stage, .maxzone { display: none; pointer-events: none; }

/* windows: paper fill, one heavy top rule, a flat paper-tone shadow offset one gutter; the grid hairlines run over everything */
.sheets { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.panel { position: absolute; inset: 0; pointer-events: none; }
.panel[hidden] { display: none; }
.sheet { position: absolute; inset: 0; background: var(--paper); pointer-events: auto; }
.rule, .shadow { position: absolute; left: 0; top: 0; width: 1px; height: 1px; transform-origin: 0 0; pointer-events: none; }
.rule { background: var(--ink); z-index: 2; }
.shadow { display: none; }
.panel-inner { position: absolute; display: flex; flex-direction: column; padding: 0 calc(var(--g) / 2) calc(var(--b) * 3); --pc: 6; }  /* no inner margin: the window's columns ARE the page columns */
[data-back="true"] .panel-body { visibility: hidden; }
[data-back="true"] .panel-head { padding: var(--b) 0; border-bottom: 0; }
[data-back="true"] .controls { display: none; }
[data-back="true"] .panel-title.t-d { font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; padding-top: 0; align-self: start; grid-row: 1; }
.fold-title { position: absolute; left: 0; top: 0; display: none; cursor: pointer; white-space: nowrap; }
[data-folded="true"] .fold-title { display: block; }

.panel-head {
  display: grid; grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); column-gap: var(--g); align-items: end;
  padding: calc(var(--b) * 2) 0 var(--b); border-bottom: 1px solid var(--ink);
  grid-template-rows: auto minmax(0, 1fr);
}
.panel-title { grid-column: 1 / -1; grid-row: 2; align-self: end; position: relative; z-index: 1; }   /* under the controls line, never over it */
.panel-title.t-d { font-size: var(--x); line-height: 1; letter-spacing: -.02em; padding-top: .14em; padding-bottom: .12em; white-space: normal; }   /* line box = ascent..descent: no descender reaches the rule, wrapped lines never touch */
.panel-head { overflow: visible; } .panel-body { position: relative; z-index: 0; }   /* descender room: the rule sits a fixed gap below the baseline */
.panel-title:focus-visible { outline: none; }
.controls { grid-column: 1 / -1; grid-row: 1; align-self: start; display: flex; justify-content: flex-end; gap: var(--g); }
.controls button { padding: 0; color: var(--ink); }
.controls { padding-right: 0; position: relative; z-index: 2; }   /* ends on the text edge, like the rules */
.controls button:hover { color: var(--accent); }
.panel-body { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; padding: var(--b) 0 0; scrollbar-width: none; }
.panel-body::-webkit-scrollbar { display: none; }
.cols { display: grid; grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); column-gap: var(--g); }
.kicker { grid-column: 1 / -1; margin-bottom: var(--b); }

/* projects */
.plist { list-style: none; row-gap: 0; }
.plist li { grid-column: 1 / -1; padding: var(--b) 0 calc(var(--b) * 3); border-top: 1px solid var(--ink); }
.plist .yr { grid-column: 1; padding-top: calc(var(--b) * 1.5); }
.plist .pr { grid-column: 2 / -1; }
.plist p { margin-top: var(--b); }

/* about */
.about { row-gap: calc(var(--b) * 3); }
.about .lede { grid-column: 1 / -1; }
.about .col-a { grid-column: 1 / span 2; }
.about .col-b { grid-column: 3 / span 4; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); align-content: start; }
.about .col-b .kicker { grid-column: 1 / -1; }
.about ul { list-style: none; }
.about li { border-top: 1px solid var(--ink); padding: calc(var(--b) * .5) 0; }
.about .edu { grid-column: 1 / -1; border-top: 1px solid var(--ink); padding-top: var(--b); }

/* career */
.career { row-gap: calc(var(--b) * 3); align-items: start; }
.roles { list-style: none; grid-column: 1 / -1; }
.role {
  width: 100%; display: grid; grid-template-columns: repeat(var(--rc, var(--pc)), minmax(0, 1fr)); column-gap: var(--g);
  padding: var(--b) 0; border-top: 1px solid var(--ink); align-items: start; position: relative; min-height: calc(var(--b) * 8);
}
.roles li:last-child .role { border-bottom: 1px solid var(--ink); }
.role::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; }
.role.on::before { transform: scaleX(1); }
.r-meta { grid-column: 1; padding-top: calc(var(--b) * .75); }
.r-meta span { display: block; }
.r-title { grid-column: 2 / -3; font-weight: 400; display: grid; }
.r-title > i, .r-title::after { grid-area: 1 / 1; font-style: normal; }
.r-title > i.set { white-space: nowrap; }   /* explicit breaks computed from the bold setting */
.r-title::after { content: attr(data-text); font-weight: 800; letter-spacing: -.025em; visibility: hidden; }   /* reserves the bold width */
.role.on .r-title > i { font-weight: 800; letter-spacing: -.025em; }
.r-gfx { grid-column: -3 / -1; align-self: stretch; opacity: 0; transition: opacity .2s linear; display: flex; }
.role.on .r-gfx { opacity: 1; }
.gfx { display: block; width: 100%; height: 100%; overflow: visible; }
.r-gfx { position: relative; min-height: calc(var(--b) * 5); }
.r-gfx .gfx { position: absolute; inset: 0; }
.r-detail { display: none; }
.roles.focus .role { opacity: .55; }
.roles.focus .role.on { opacity: 1; }
.echo { grid-column: 1 / -1; display: grid; background: var(--paper); container-type: inline-size; }
.echo .e-fig { font-size: var(--figfs, var(--d)); line-height: 1; font-weight: 800; letter-spacing: -.04em; }   /* the one exception: the figure is display-small (69.7), fitted to its 216px column */
.echo .unit { grid-area: 1 / 1; }
.echo .e-fig { color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; display: block; }
.echo .e-note { display: block; border-top: 0; padding-top: 0; margin-top: 0; }
.echo .unit { padding-top: var(--b); }   /* figure on row 1's title line, caption lines under it on the 16px baseline */
.echo .e-note > * { display: block; font-size: var(--s); line-height: var(--lh-s); letter-spacing: 0; }   /* the stat column: figure (text) + caption */

/* career, desktop windows (>= 6 cols): list on the left, the stat block beside it, never under it */
[data-narrow="false"] .career { display: grid; grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); }
[data-narrow="false"] .roles { grid-column: 1 / -3; --rc: calc(var(--pc) - 2); }
[data-narrow="false"] .echo { grid-column: -3 / -1; grid-row: 1; align-self: start; }
[data-narrow="false"] .role { min-height: calc(var(--row) * 2); min-height: 0; padding: var(--b) 0; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
[data-narrow="false"] .role .r-meta { grid-column: 1; padding: 0; }
[data-narrow="false"] .role .r-title { grid-column: 2 / -3; }
[data-narrow="false"] .role .r-gfx { grid-column: -3 / -1; grid-row: 1; }



[data-wide="true"] .roles { grid-column: 1 / -4; --rc: calc(var(--pc) - 3); }
[data-wide="true"] .echo { grid-column: -4 / -1; }

/* career on desktop: title and stat column are pinned; only the list scrolls */
@media (min-width: 761px) {
  #panel-career .panel-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; }
  #panel-career .career { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  #panel-career .roles { overflow: auto; min-height: 0; max-height: 100%; scrollbar-width: none; padding-bottom: calc(var(--b) * 3); }
}
.more { position: absolute; left: calc(var(--g) / 2); right: 0; bottom: 0; height: calc(var(--b) * 3); background: var(--paper) !important; display: flex; align-items: flex-end; padding: 0 0 var(--b);
  background: linear-gradient(rgba(242, 239, 232, 0), var(--paper) 75%); pointer-events: none; opacity: 0; transition: opacity .2s linear; z-index: 3; }
[data-more="true"] .more { opacity: 1; }
[data-back="true"] .more { display: none; }

}

/* books & films */
.recs h3 { margin-bottom: var(--b); }
.recs > div:first-child { grid-column: 1 / span 3; }
.recs > div:last-child { grid-column: 4 / -1; }
.recs ol { list-style: none; }
.recs li { border-top: 1px solid var(--ink); padding: var(--b) 0 calc(var(--b) * 2); display: grid; grid-template-columns: 2.5em 1fr; }
.recs li > .n { padding-top: calc(var(--b) * 1.5); }
.recs .todo .t, .recs .todo .a, .recs .todo .w { color: var(--mute); }

/* ===== narrow windows (<= 4 cols): one column ===== */
[data-narrow="true"] .controls { justify-content: flex-start; }
[data-narrow="true"] .plist .yr, [data-narrow="true"] .plist .pr,
[data-narrow="true"] .about > *, [data-narrow="true"] .recs > div:first-child, [data-narrow="true"] .recs > div:last-child { grid-column: 1 / -1; }
[data-narrow="true"] .recs { row-gap: calc(var(--b) * 3); }
[data-narrow="true"] .role .r-meta { grid-column: 1 / -1; padding: 0; display: flex; gap: var(--g); }
[data-narrow="true"] .role .r-title { grid-column: 1 / -1; }

[data-narrow="true"] .r-title { grid-column: 1 / -1; }
[data-narrow="true"] .r-gfx { display: none; }

/* ===== wide windows (maximised, >= 8 cols): two-column compositions ===== */
[data-wide="true"] .panel-body { display: flex; flex-direction: column; }
.plist .pnum { display: none; }


[data-wide="true"] .recs > div:first-child { grid-column: 1 / span 5; }
[data-wide="true"] .recs > div:last-child { grid-column: 6 / -1; }

body[data-state="open"] .tab-num, body[data-state="open"] .tab-word { font-size: var(--s); line-height: var(--lh-s); letter-spacing: 0; }
body[data-state="open"] .tab { padding: var(--b) 0; gap: 0; }
body[data-state="open"] .rail { align-content: start; padding-bottom: 0; margin-top: calc(var(--b) * 4); }
/* ===== open: name + intro keep cols 1-4, windows cols 5-10, index cols 11-12 ===== */
body[data-state="open"] .hero { grid-column: 1 / 3; grid-row: 2; align-self: start; min-height: 0; aspect-ratio: 9 / 1; margin-top: calc(var(--b) * 2 + var(--hang, 0px)); }
body[data-state="open"] .intro { grid-column: 1 / 3; grid-row: 3; visibility: hidden; }   /* the intro lives in one place: idle (and the about panel) */
body[data-state="open"] .hero-hint { display: none; }
body[data-state="open"] .stage { display: block; grid-column: 3 / 11; grid-row: 2 / 4; margin-top: calc(var(--b) * 4); }   /* the first rules sit >= one text line under the masthead rule */
body[data-state="open"] .maxzone { display: block; grid-column: 1 / 11; grid-row: 2 / 4; margin-top: calc(var(--b) * 4); }
body.hero-off .intro { opacity: 0; transition: opacity .15s linear; }

/* ===== mobile: index is a fixed bar at the bottom; one full sheet above it ===== */
@media (max-width: 760px) {
  :root { --m: 16px; --g: 12px; --cols: 4; --s: 12px; --lh-s: 16px; --lh-t: 24px; --lh-l: 40px; --lh-d: 56px; --pad: 12px; }
  .frame { padding-top: calc(var(--b) * 2.5); padding-bottom: calc(var(--b) * 1); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .m-name { grid-column: 1 / 3; } .m-role { grid-column: 3 / -1; }
  .m-place { grid-column: 1 / 3; } .m-mail { grid-column: 3 / -1; }
  .hero { grid-column: 1 / -1; grid-row: 2; min-height: 0; }
  .intro { grid-column: 1 / -1; grid-row: 3; padding: var(--b) 0 calc(var(--b) * 2); font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; }
  .rail { grid-column: 1 / -1; grid-row: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; column-gap: var(--g); padding-bottom: 0; }
  .tab { padding: var(--b) 0 var(--b); }
  .tab-num { font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; font-weight: 800; }
  :root { --x: var(--d); }   /* mobile display step: the whole word must fit 358px */
  body[data-state="open"] .masthead { border-bottom-color: transparent; }
  .panel-head { border-bottom: 1px solid var(--ink); }
  .panel-title.t-d { padding-top: calc(var(--b) * 2); line-height: .8; }
  .panel-body { padding-top: var(--b); }
  .tab-word { font-size: var(--s); line-height: var(--lh-s); font-weight: 800; letter-spacing: 0; }
  .controls [data-act="max"] { display: none; }
  body[data-state="open"] .hero { grid-column: 1 / -1; grid-row: 2; }
  body[data-state="open"] .intro { display: block; grid-column: 1 / -1; font-size: var(--t); line-height: var(--lh-t); letter-spacing: -.015em; }
  body[data-state="open"] .stage { grid-column: 1 / -1; grid-row: 2 / 4; margin-top: var(--b); margin-bottom: var(--b); }
  body[data-state="open"] .maxzone { grid-column: 1 / -1; grid-row: 2 / 4; }
  .role .r-detail { display: none; }
  body[data-state="open"] .rail { margin-top: 0; }
  body[data-state="open"] .m-name { visibility: visible; }
  .r-gfx { display: none; }
  .r-detail-in, .r-detail-in > * { display: block; }
  .role, .role::before, .r-gfx { transition: none !important; }
  .r-detail .r-dtop { display: grid; grid-template-columns: auto 1fr; column-gap: var(--g); align-items: center; }
  .r-detail-in { max-height: 220px; }
  #panel-career .panel-body { overflow-anchor: none; -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 8px, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent 0, transparent 8px, #000 24px, #000 calc(100% - 24px), transparent); }
  .r-detail .r-fig-m { color: var(--accent); white-space: nowrap; padding-top: var(--b); }
  .r-detail .r-gfx-m { padding: var(--b) 0; }
  .r-detail .r-gfx-m .gfx { height: calc(var(--b) * 7); }
  .r-detail-in > :last-child { padding-bottom: var(--b); }
  body[data-state="open"] .intro { font-size: var(--t); }
  #panel-career .panel-body { overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0; -webkit-mask-image: none !important; mask-image: none !important; }
  #panel-career .career { display: flex; flex-direction: column; flex: 1; min-height: 0; row-gap: 0; align-items: stretch; }
  #panel-career .echo { order: -1; flex: none; border-bottom: 1px solid var(--ink); padding-bottom: var(--b); margin-bottom: 0; }
  #panel-career .echo .e-top { display: grid; grid-template-columns: auto 1fr; column-gap: var(--g); align-items: center; }
  #panel-career .echo .e-fig { font-size: var(--t) !important; line-height: var(--lh-t); }
  #panel-career .echo .e-gfx .gfx { height: calc(var(--b) * 6); width: 100%; }
  #panel-career .echo .e-note { border-top: 0; margin-top: var(--b); padding-top: 0; }
  #panel-career .echo .e-note .t-t { font-size: var(--s); line-height: var(--lh-s); letter-spacing: 0; }
  #panel-career .roles { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-top: calc(var(--b) * 2); padding-bottom: calc(var(--b) * 3);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 8px, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent 0, transparent 8px, #000 24px, #000 calc(100% - 24px), transparent); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ===== one vertical module (40px). Labels sit on one shared first rule; rows are whole modules
   (snapped by JS from their content, never from the panel height); leftover height collects above a
   closing rule with the panel's caption at the bottom band. ===== */
.panel-body { padding-top: 0 !important; }
.kicker, .recs h3 { height: var(--row); margin: 0; display: flex; align-items: flex-end; padding-bottom: var(--b); grid-column: 1 / -1; }
.plist li { padding: 0; }
.plist li .yr, .plist li .pr { padding-top: calc(var(--b) * .5); }
.plist p { margin-top: 0; }
.about { row-gap: 0; align-content: start; }
.about .lede { grid-column: 1 / -1; }
.about li { padding: calc(var(--b) * 1.5) 0 0; }
.about .col-a { grid-column: 1 / span 2; }
.about .col-b { grid-column: 3 / span 4; }
.about .edu-wrap { grid-column: 7 / -1; }
.about .edu { border-top: 1px solid var(--ink); padding-top: calc(var(--b) * 1.5); }
[data-wide="true"] .about .col-a { grid-column: 1 / span 3; }
[data-wide="true"] .about .col-b { grid-column: 4 / span 4; }
[data-wide="true"] .about .edu-wrap { grid-column: 8 / -1; }
.recs li { padding: calc(var(--b) * 1.5) 0 0; }
.recs li > .n { padding-top: 0; }
.closing { position: absolute; left: calc(var(--g) / 2); right: calc(var(--g) / 2); bottom: calc(var(--b) * 3); border-top: 1px solid var(--ink); padding-top: var(--b); height: var(--row); pointer-events: none; }
[data-back="true"] .closing { display: none; }
.panel-inner { padding-bottom: calc(var(--row) + var(--b) * 3) !important; }
.more { bottom: calc(var(--row) + var(--b) * 3); }
@media (max-width: 760px) { .closing { display: none; } .panel-inner { padding-bottom: calc(var(--b) * 3) !important; } .more { bottom: 0; } }
.about .lede { order: 5; margin-top: var(--row); }   /* the lists take the first rule under the title; the intro closes the block */
@media (min-width: 761px) { #panel-career .roles { padding-bottom: 0; } }
@media (min-width: 761px) { #panel-career .roles li:last-child .role { border-bottom: 0; } }   /* the closing rule ends the list */
/* one column in narrow windows: every block full width on the left edge, rows on the 40px module */
[data-narrow="true"] .about > *, [data-narrow="true"] .about .col-a, [data-narrow="true"] .about .col-b, [data-narrow="true"] .about .edu-wrap, [data-narrow="true"] .about .lede { grid-column: 1 / -1 !important; }
[data-narrow="true"] .about .col-b { grid-template-columns: 1fr; }
[data-narrow="true"] .about .col-b ul + ul li:first-child { border-top: 1px solid var(--ink); }
[data-narrow="true"] .about > * + * { margin-top: var(--row); }
[data-narrow="true"] .about .lede { margin-top: var(--row); }
.echo .e-fig { line-height: 1.2 !important; }
/* scroll regions end on a row edge; the hint sits after the last complete row */
.snapped { overflow-anchor: none; }   /* the visible edge is a hairline between rows */
.snapped .role, .snapped li, .snapped .kicker, .snapped .lede, .snapped .edu { scroll-snap-align: start; }
.more.after { background: none !important; }
[data-narrow="true"] .recs { row-gap: var(--row) !important; }   /* the gap between books and films is one module */
.more { right: calc(var(--g) / 2) !important; }   /* the hint stays inside the text measure */
/* career: one fixed row height at every width; titles never exceed it */
.roles { container-type: inline-size; }
@container (max-width: 700px) {
  [data-narrow="false"] .role { grid-template-rows: auto 1fr; }
  [data-narrow="false"] .role .r-meta { grid-column: 1 / -3; display: flex; gap: var(--g); }
  [data-narrow="false"] .role .r-title { grid-column: 1 / -3; }
  [data-narrow="false"] .role .r-gfx { grid-row: 1 / -1; }
}
@container (max-width: 560px) {
  [data-narrow="false"] .role .r-meta, [data-narrow="false"] .role .r-title { grid-column: 1 / -2; }
  [data-narrow="false"] .role .r-gfx { grid-column: -2 / -1; }
}

@media (max-width: 760px) { .hero-hint { top: auto !important; bottom: var(--b); } }   /* the name hangs from the top: the hint sits at the bottom of the field */
/* career rows: content height rounded UP to whole 40px modules, with >= 28px under the title's last line
   (set by JS from the bold-reserved layout, so hover never changes a row) */
.role { padding: 0 !important; min-height: 0 !important; height: auto; overflow: visible; }
.role .r-meta { line-height: calc(var(--b) * 2.5) !important; padding-top: 0 !important; }   /* 20px caption line above the title */
.role .r-meta span { display: inline; margin-right: var(--g); }
.role { align-content: start !important; grid-template-rows: auto !important; grid-auto-rows: auto; }   /* content stays at the top; the module padding collects below the title */
.role .r-gfx { align-self: start; min-height: calc(var(--row) * 1.5); }

/* ===== career rows: a real grid at every width =====
   date track: fixed, never wraps (widest date at 13px); company: its own track, same x in every row
   and state; title: the next track; graphic: last. Narrow: company stacks under the date, same x. */
#panel-career .roles .role { display: grid !important; column-gap: var(--g); align-items: start;
  grid-template-columns: 5.5em 7.5em minmax(0, 1fr) minmax(88px, 24%); grid-template-areas: "date org title gfx"; }
#panel-career .roles .role > .r-meta { display: contents !important; }
#panel-career .roles .role .r-date { grid-area: date; white-space: nowrap; line-height: var(--lh-t); font-size: var(--s); display: block; margin: 0; }
#panel-career .roles .role .r-org { grid-area: org; line-height: var(--lh-t); font-size: var(--s); display: block; margin: 0; }
#panel-career .roles .role .r-title { grid-area: title; grid-column: auto !important; }
#panel-career .roles .role .r-gfx { grid-area: gfx; grid-column: auto !important; grid-row: auto !important; }
#panel-career .roles .role .r-detail { grid-column: 1 / -1; }
@container (max-width: 900px) {
  #panel-career .roles .role { grid-template-columns: 7.5em minmax(0, 1fr) minmax(72px, 20%); grid-template-areas: "date title gfx" "org title gfx"; grid-template-rows: calc(var(--b) * 2.5) auto !important; }
  #panel-career .roles .role .r-date, #panel-career .roles .role .r-org { line-height: calc(var(--b) * 2.5); }
}
[data-narrow="true"] #panel-career .roles .role, #panel-career [data-narrow="true"] .roles .role { grid-template-columns: 7.5em minmax(0, 1fr); grid-template-areas: "date title" "org title"; }
@media (max-width: 760px) { #panel-career .roles .role { grid-template-columns: 7.5em minmax(0, 1fr) !important; grid-template-areas: "date title" "org title" !important; } #panel-career .roles .role .r-gfx { display: none; } }
#panel-career .roles .role .r-gfx { min-height: calc(var(--b) * 5) !important; align-self: stretch; }   /* spans the date+company lines; never taller */
@media (min-width: 761px) {
  .panel-inner { padding-bottom: var(--row) !important; }          /* desktop: only the closing rule row is reserved; the hint lives inside the body */
  .closing { bottom: 0 !important; }
  .panel-head { padding-bottom: 0 !important; }                     /* the title's descender room is its own bottom space */
}

/* ===== round 25: career rows from their text; one primary text column across panels =====
   date/company = one grid column (so titles start on column 2, like project names and book titles);
   title runs to a compact graphic at the right edge; balanced title wraps. */
#panel-career .roles .role { padding: 13px 0 0 !important;   /* + 1px rule = 14 */
  grid-template-columns: max(var(--col1), var(--datew, 5.5em)) minmax(0, 1fr) calc(var(--b) * 5) !important;   /* 40px graphic track: titles get the width */ grid-template-areas: "date title gfx" "org title gfx" !important;
  grid-template-rows: calc(var(--b) * 2.5) auto !important; }
#panel-career .roles .role .r-date, #panel-career .roles .role .r-org { line-height: calc(var(--b) * 2.5) !important; }
#panel-career .roles .role .r-title > i { text-wrap: balance; }
#panel-career .roles .role .r-gfx { min-height: calc(var(--b) * 5) !important; }
.roles { --col1: calc((100% - (var(--rc, 6) - 1) * var(--g)) / var(--rc, 6)); }
.recs > div { --span: 3; }
.recs > div:last-child { --span: calc(var(--pc) - 3); }
[data-wide="true"] .recs > div:first-child { --span: 5; }
[data-wide="true"] .recs > div:last-child { --span: calc(var(--pc) - 5); }
.recs li { grid-template-columns: calc((100% - (var(--span) - 1) * var(--g)) / var(--span)) minmax(0, 1fr) !important; column-gap: var(--g); }
@media (max-width: 760px) {
  #panel-career .roles .role { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-areas: "date org" "title title" !important; grid-template-rows: auto auto !important; }
  [data-narrow="true"] .recs li { grid-template-columns: 2.5em minmax(0, 1fr) !important; }
}
[data-narrow="true"] .recs > div { --span: 4; }
#panel-career .roles .role .r-title::after { text-wrap: balance; }
@media (max-width: 760px) {   /* reserve the space of content that mounts after first paint, so the hero never resizes */
  .masthead { min-height: calc(var(--lh-s) * 3 + var(--b) + 3px); }
  .intro { min-height: calc(var(--lh-t) * 4 + var(--b) * 3 + 1px); }
  body[data-state="idle"] .rail { height: 69px; }   /* fixed: font swap cannot change it */
}

/* ===== round 26: one row grammar for every list panel (projects, books & films, career) =====
   row = 14 top (13 + 1px rule) + content on the 28px line unit + 28 below; the first-column label shares
   the title's first baseline; secondary text is the 13/16 caption in the muted colour, 3 columns wide. */
.panel-body { container-type: inline-size; }
.panel-inner { --cw: calc((100cqw - (var(--pc) - 1) * var(--g)) / var(--pc)); }
.plist li, .recs li { padding: 13px 0 0 !important; align-items: baseline; }
.plist li .yr, .plist li .pr { padding-top: 0 !important; }
.plist .yr, .recs li > .n { font-size: var(--s); line-height: var(--lh-t); }
.plist h3, .recs .t { font-size: var(--t) !important; line-height: var(--lh-t) !important; font-weight: 400 !important; letter-spacing: -.015em; }
.plist p, .recs .a, .recs .w { font-size: var(--s) !important; line-height: var(--lh-s) !important; letter-spacing: 0 !important; color: var(--mute); margin: 0 !important;
  max-width: calc(3 * var(--cw) + 2 * var(--g)); }
.recs .todo .t { color: var(--mute); }
.plist li { display: grid; grid-template-columns: repeat(var(--pc), minmax(0, 1fr)); column-gap: var(--g); }
[data-narrow="true"] .plist li { grid-template-columns: 4em minmax(0, 1fr); }
[data-narrow="true"] .plist li .yr { grid-column: 1; } [data-narrow="true"] .plist li .pr { grid-column: 2; }

/* about in a mid-width window (e.g. 1024): two wide columns, two stacked groups each, on the 40px rows,
   nothing wraps (working-with's two sub-columns size to their longest item) */
@container (min-width: 560px) and (max-width: 800px) {
  #panel-about .about { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; grid-auto-rows: var(--row); row-gap: 0 !important; }
  #panel-about .about > * { margin-top: 0 !important; }
  #panel-about .about .col-a { grid-column: 1 !important; grid-row: 1 / span 5; }
  #panel-about .about .edu-wrap { grid-column: 1 !important; grid-row: 6 / span 5; }
  #panel-about .about .col-b { grid-column: 2 !important; grid-row: 1 / span 6; grid-template-columns: max-content minmax(0, 1fr); }
  #panel-about .about .lede { grid-column: 1 / -1 !important; grid-row: 11; order: 0; align-self: start; font-size: var(--t); line-height: var(--lh-t); }   /* its own full-width band after the last list row */
}

.plist p { max-width: 75ch !important; }   /* short copy runs wide, capped at ~75 characters a line */
.plist .pr, .recs li > div { max-width: none; }

/* the per-role graphic lives in the stat column (desktop): the row keeps only its rule and bold title */
@media (min-width: 761px) { #panel-career .roles .role { grid-template-columns: max(var(--col1), var(--datew, 5.5em)) minmax(0, 1fr) !important; grid-template-areas: "date title" "org title" !important; } }
#panel-career .roles .role .r-gfx { display: none !important; }
.echo .e-gfx-d { display: block; margin-top: calc(var(--b) * 2); height: calc(var(--b) * 12); }
.echo .e-gfx-d .gfx { width: 100%; height: 100%; }
@media (max-width: 760px) { .echo .e-gfx-d { display: none; } }

/* ===== round 28 ===== */
/* desktop: "more ↓" shares the closing-rule row with the caption (caption left, hint right); the list
   is cut greedily to whole rows; no extra edge line (the next row's rule simply isn't shown) */
.snapped { box-shadow: none !important; }
@media (min-width: 761px) {
  .panel-inner .more, .panel-inner .more.after { top: auto !important; bottom: 0 !important; left: auto !important; right: calc(var(--g) / 2) !important;
    height: var(--row) !important; align-items: flex-start !important; padding: calc(var(--b) + 1px) 0 0 !important; background: none !important; }
}
/* phone: lists start one baseline under the section rule; spacing collects below, not above */
@media (max-width: 760px) {
  body[data-state="open"] .stage { margin-top: calc(var(--b) * 3) !important; }
  [data-narrow="true"] .about .col-a { margin-top: 0 !important; }
  #panel-career .echo { border-bottom: 0 !important; display: flex !important; flex-direction: column; justify-content: flex-end; }
  #panel-career .echo .unit { grid-area: auto; }
  #panel-career .roles { padding-top: 0 !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .panel-inner .more.after { padding-top: var(--b); height: calc(var(--b) * 3); }
  /* one masthead line: place (or the name when a sheet is open) and mail; the role is dropped on phone */
  .masthead { min-height: calc(var(--lh-s) + var(--b) + 3px) !important; }
  .m-role { display: none; }
  .m-place, .m-name { grid-column: 1 / 3 !important; grid-row: 1; }
  .m-mail { grid-column: 3 / -1 !important; grid-row: 1; }
  body[data-state="open"] .m-place { visibility: hidden; }
}
.beyond { visibility: hidden !important; }   /* a row the edge would cut is not shown at all */
.beyond * { visibility: hidden !important; }

/* ===== round 29 ===== */
/* phone: an open sheet hides the live hero (its box stays, so the idle framing is untouched) and the
   sheet's rule starts on the masthead rule: the band under the masthead holds only the wordmark */
@media (max-width: 760px) {
  body[data-state="open"] .hero { visibility: hidden !important; }
  body[data-state="open"] .stage { margin-top: -3px !important; }   /* the 3px sheet rule replaces the masthead rule exactly */
}
/* about: the pull-quote sits on the rhythm (1px rule, one 13+1 step) and never leaves a widow */
.about .lede { text-wrap: pretty; }
#panel-about .about .lede { border-top: 1px solid var(--ink); padding-top: 13px !important; }
p, .lede, .intro { text-wrap: pretty; }
@media (min-width: 761px) { #panel-career .roles .r-org { white-space: nowrap; } }   /* the company never wraps: the date track sizes to the widest date or company */
@media (min-width: 761px) { body[data-state="open"] .frame { padding-bottom: calc(var(--b) * 3); } }   /* open: the closing row sits one step lower (the docked tabs keep their line of clearance under the masthead) */

/* ===== round 31 ===== */
/* project and book secondary lines: 13 on 14, exactly half the 28 text line */
.plist p, .recs .a, .recs .w { line-height: 14px !important; }
/* every list ends on a rule: the last row draws its own bottom rule (inside its box, so the row stays on the grid) */
.plist li:last-child, .recs li:last-child, #panel-career .roles li:last-child .role, .about ul li:last-child, .about .edu:last-child { box-shadow: inset 0 -1px 0 var(--ink); }
@media (max-width: 760px) { .plist h3, .recs .t, .plist .yr, .recs li > .n { line-height: 28px !important; } }   /* phone list rows keep the 28 text line so rows land on 28 */
/* ===== round 32: the stat column hangs on the rows ===== */
@media (min-width: 761px) {
  #panel-career .echo .unit { padding-top: 0; }
  #panel-career .echo .e-fig { margin-top: var(--fig-dy, 0px); }
  #panel-career .echo .e-note { margin-top: var(--note-dy, 0px) !important; }
  #panel-career .echo .e-note > * { line-height: 14px !important; text-wrap: balance; }
}
@container (max-width: 800px) { #panel-career .panel-inner[data-narrow="false"] .echo { grid-column: -4 / -1; } #panel-career .panel-inner[data-narrow="false"] .roles { grid-column: 1 / -4; --rc: calc(var(--pc) - 3); } }   /* 1024: the caption gets three columns, never a one-word line */
/* ===== round 33 ===== */
/* the last row shown before a cut ends on its own rule (every width) */
.lastvis { box-shadow: inset 0 -1px 0 var(--ink) !important; }
/* phone: the desktop grammar. The closing hairline + caption sit directly above the tab bar, "more ↓" on its
   baseline at the right, and the region keeps one empty module above it */
@media (max-width: 760px) {
  .closing { display: block !important; bottom: 0 !important; }
  .panel-inner { padding-bottom: var(--row) !important; }
  .panel-inner .more, .panel-inner .more.after { top: auto !important; bottom: 0 !important; left: auto !important; right: calc(var(--g) / 2) !important;
    height: var(--row) !important; align-items: flex-start !important; padding: calc(var(--b) + 1px) 0 0 !important; background: none !important; }
  /* the two halves of "working with" are one list when stacked: no rule doubling at the seam */
  .about .col-b ul:not(:last-of-type) li:last-child { box-shadow: none; }
}
/* the bold (active) title keeps a full gutter before the stat column */
@media (min-width: 761px) { #panel-career .roles .role .r-title { padding-right: var(--g); } }
/* ===== round 34: one figure scale ===== */
@media (min-width: 761px) { #panel-career .echo .e-note > * { line-height: 20px !important; } }   /* 13/20, the list's secondary lines */
@media (max-width: 760px) {
  #panel-career .echo .e-top { display: block; }
  #panel-career .echo .e-fig { font-size: var(--figfs, 48px) !important; line-height: 1.1 !important; display: block; }   /* >= 2x the row title, on its own line */
  #panel-career .echo .e-gfx { display: block; margin-top: var(--b); }
  #panel-career .echo .e-gfx .gfx { height: calc(var(--b) * 4); }
}
/* ===== round 35: the running column in cols 1-2 (>= 1024, one panel open) ===== */
.runner { position: fixed; top: 0; height: 0; display: none; pointer-events: none; z-index: 1; }
.runner.on { display: block; }
.runner > * { position: absolute; left: 0; right: 0; margin: 0; }
.runner .rn-num { font-size: var(--d); line-height: 1; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.runner .rn-intro { font-size: var(--s); line-height: 20px; letter-spacing: 0; text-wrap: pretty; }
.runner .rn-rule { height: 0; border-top: 1px solid var(--ink); }
.runner .rn-cap { font-size: var(--s); line-height: var(--lh-s); }
@media (max-width: 1023px) { .runner { display: none !important; } }
/* ===== round 37 ===== */
/* the title is plain flow: its first line box is the element's first line (a baseline marker injected at
   the start of .r-title reads the text baseline); the bold reserve keeps its width only, at zero height */
.r-title { display: block !important; }
.r-title > i { display: inline; }
.r-title::after { display: block; height: 0; overflow: hidden; }
/* open (desktop): the panel's top rule hangs one module (40px) under the masthead line. The masthead rule
   becomes a hairline, so the only heavy rules are windows; docked tabs lay their own 3px rule on the
   masthead line and sit inside that module */
@media (min-width: 761px) {
  body[data-state="open"] .stage, body[data-state="open"] .maxzone { margin-top: -3px !important; }
  body[data-state="open"] .masthead { border-bottom-color: transparent; background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat; background-origin: border-box; }
  [data-back="true"] .panel-head { padding: 4px 0 0 !important; }
}
/* ===== round 38: idle, two-line name ===== */
/* the hero box is the name's ink + one module; the intro hangs from that module (the name's last
   baseline + 40), cols 1-8, at the 22.75 text size; the index keeps its bottom band */
/* round 38b: name mass at the top (one 8px module under the masthead rule), text at the bottom band,
   the field between them. The intro's last baseline shares the index's; its rule sits a fixed module above */
body[data-state="idle"] .hero { margin-top: var(--b); }   /* the canvas spans the whole field (the scene plays in it); the resting name hangs top-anchored */
body.name-top[data-state="idle"] .hero .hero-hint, body[data-state="idle"] .hero .hero-hint { top: calc(var(--hero-ink, 0px) + 16px) !important; bottom: auto !important; }   /* under the name's ink */
body[data-state="idle"] .intro { grid-row: 3; align-self: end; margin-top: 0; }   /* the canvas runs down to the intro rule */
@media (min-width: 761px) { body[data-state="idle"] .intro { grid-column: 1 / 9; } }
/* ===== round 39: 1024 career, the stat hangs in the running column; titles get cols 3-10 ===== */
.runner.has-echo .rn-intro { display: none; }
.runner > .echo { position: absolute; left: 0; right: 0; grid-column: auto; }
#panel-career .career.echo-out .roles, #panel-career .panel-inner[data-narrow="false"] .career.echo-out .roles { grid-column: 1 / -1 !important; --rc: var(--pc); }
@media (min-width: 761px) {
  .runner > .echo .unit { padding-top: 0; }
  .runner > .echo .e-fig { margin-top: var(--fig-dy, 0px); }
  .runner > .echo .e-note { margin-top: var(--note-dy, 0px) !important; }
  .runner > .echo .e-note > * { line-height: 20px !important; text-wrap: balance; }
}
.hero-hint { transition: opacity .2s linear; }
body.hero-playing .hero-hint { opacity: 0; }   /* only the resting name carries the hint */
/* round 40: the running-column number is a running head, not a display figure */
.runner .rn-num { font-size: var(--s) !important; line-height: var(--lh-s); letter-spacing: 0; font-weight: 800; }
/* ===== round 41: two rule weights. Heavy (3px): the window top rule and the active marker (orange only
   when active). Hairline (1px): everything else. Under the heading there is one hairline: the first row
   does not draw its own, and the active marker lies over that hairline instead of beside it ===== */
@media (min-width: 761px) { #panel-career .panel-head { border-bottom-color: transparent !important; } }   /* the first row's own rule is the line under the heading */
#panel-career .roles li:first-child .role::before { top: 0; }                 /* inside the scroller: the marker covers that rule, 3px */
/* ===== user direction (after round 41): no intro sentence, no role line in the masthead, no drawn grid;
   the round-40 section-word size is restored by fitDisplay. The idle hero runs to the frame bottom and the
   index's last line sits on the frame's bottom edge ===== */
.intro, .runner .rn-intro { display: none !important; }
.m-role { display: none !important; }
.gridlines { display: none !important; }
@media (max-width: 760px) { .panel-title.t-d { padding-top: calc(var(--b) * 2) !important; } }

/* ===== user: the section index is a horizontal menu bar under the masthead (every width, every state).
   Full-bleed ink band, paper text, "01 projects" on one line per item; desktop cells on cols 1/4/7/10,
   phone a 2x2 grid. The front panel's item is orange; hover inverts the cell. The vertical dock is gone. ===== */
.frame { grid-template-rows: auto auto minmax(0, 1fr) auto !important; }
.masthead { grid-row: 1 !important; border-bottom-color: transparent !important; background: none !important; }
.rail { grid-row: 2 !important; grid-column: 1 / -1 !important; display: grid !important; grid-template-columns: subgrid !important; grid-template-rows: auto !important;
  align-content: stretch !important; padding: 0 !important; margin: 0 !important; height: auto !important; transform: none !important; position: relative; z-index: 3; }
.rail::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--m)); right: calc(-1 * var(--m)); background: var(--ink); z-index: -1; }
.rail .tab { grid-column: span 3 !important; flex-direction: row !important; align-items: baseline !important; justify-content: flex-start !important; gap: .5em !important;
  border-top: 0 !important; padding: 12px 0 !important; min-height: 0; color: var(--paper); background: transparent; position: relative; cursor: pointer; }
.rail .tab::after { display: none !important; }
.rail .tab .tab-num, .rail .tab .tab-word { font-size: var(--s) !important; line-height: 16px !important; letter-spacing: 0 !important; font-weight: 800; color: inherit !important; white-space: nowrap; }
.rail .tab::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--g) / -2); right: calc(var(--g) / -2); background: transparent; z-index: -1; }
.rail .tab.front, .rail .tab[aria-expanded="true"].front { color: var(--accent); }
@media (hover: hover) {   /* touch taps never leave a sticky hover */
  .rail .tab:hover { color: var(--ink); }
  .rail .tab:hover::before { background: var(--paper); }
  .rail .tab.front:hover { color: var(--accent); }
}
.rail .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hero { grid-row: 3 !important; }
body[data-state="idle"] .hero { grid-column: 1 / -1 !important; }
.intro { grid-row: 4 !important; }
body[data-state="open"] .hero { grid-row: 3 !important; }
body[data-state="open"] .stage { grid-row: 3 / 5 !important; grid-column: 3 / -1 !important; }
body[data-state="open"] .maxzone { grid-row: 3 / 5 !important; grid-column: 1 / -1 !important; }
@media (max-width: 760px) {
  .frame { grid-template-rows: auto auto minmax(0, 1fr) auto !important; }
  .rail { column-gap: var(--g) !important; }
  .rail .tab { grid-column: span 2 !important; padding: 8px 0 !important; }
  body[data-state="open"] .stage { grid-column: 1 / -1 !important; }
}
@media (max-width: 760px) { body[data-state="open"] .stage { margin-top: var(--b) !important; } }   /* the sheet starts under the bar, not on it */
@container (max-width: 660px) { #panel-about .about .col-b { grid-template-columns: minmax(0, 1fr) !important; } }   /* 768: working-with stacks rather than drop under 120px */
/* the menu bar set large: one size per width, the largest at which "04 books & films" fits its cell
   (3 columns on desktop, 2 of 4 on the phone), capped at 48px. Pure CSS, so the band height is fixed from
   first paint (the hero below never moves). 7.5 = that item's width in ems at weight 800 (measured in place) */
:root { --bar-cell: calc((100vw - 2 * var(--m) - 11 * var(--g)) / 12 * 3 + 2 * var(--g)); }
@media (max-width: 760px) { :root { --bar-cell: calc((100vw - 2 * var(--m) - 3 * var(--g)) / 4 * 2 + var(--g)); } }
.rail .tab { --bar-fs: min(67.2px, calc((var(--bar-cell) - 8px) / 5.36));   /* menu row 40% larger (was 48px, /7.5) */ gap: .4em !important; padding: calc(var(--bar-fs) * .28) 0 calc(var(--bar-fs) * .3) !important; }
.rail .tab .tab-num, .rail .tab .tab-word { font-size: var(--bar-fs) !important; line-height: 1.1 !important; letter-spacing: -.02em !important; }
.rail .tab { height: round(up, calc(var(--bar-fs) * 1.6), 8px); padding: 0 !important; align-items: center !important; }   /* whole 8px modules: every line below lands on a whole pixel */
@media (min-width: 761px) { body[data-state="open"] .frame { padding-bottom: var(--b) !important; } }   /* the taller menu bar is paid for at the foot: the closing row sits one module lower */

/* DRAFT: drawer opening */
.drawer-front{position:fixed;left:0;top:0;width:10px;background:var(--ink,#151515);pointer-events:none;z-index:5;opacity:0;
  box-shadow:6px 0 14px rgba(0,0,0,.18)}
.drawer-front b{position:absolute;left:-7px;top:50%;width:6px;height:min(44px,60%);transform:translateY(-50%);
  background:var(--accent,#e3852a);border-radius:3px 0 0 3px}
.panel.drawing .sheet{box-shadow:inset 0 14px 18px -12px rgba(0,0,0,.25), inset 0 -14px 18px -12px rgba(0,0,0,.25)}
.drawer-front.h{height:10px;box-shadow:0 8px 16px rgba(0,0,0,.2)}
.drawer-front.h b{left:50%;top:auto;bottom:-7px;width:min(64px,30%);height:6px;transform:translateX(-50%);border-radius:0 0 3px 3px}
/* DRAFT: one clear back button replaces enlarge / minimise */
.controls button.back{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1.1em .45em .9em;border:2px solid var(--ink);
  border-radius:999px;background:var(--paper);font-weight:800;font-size:15px;line-height:1;cursor:pointer;transition:background .15s,color .15s}
.controls button.back .back-arrow{font-size:1.15em;transition:transform .15s}
.controls button.back:hover{background:var(--ink);color:var(--paper)}
.controls button.back:hover .back-arrow{transform:translateX(-4px)}
.controls button.back:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* drawer: contents ride with the drawer front (offset set on .panel, composited) */
.panel.drawing .panel-inner{transform:translate(var(--dx,0px),var(--dy,0px));will-change:transform}

/* the resting name sits lower on the first page */
@media (min-width: 761px) { body[data-state="idle"] .hero { margin-top: calc(var(--b) + 12vh); } }

/* a section just closed from its own menu item: the item looks untouched (no hover box, no focus ring) */
.rail .tab.just-closed, .rail .tab.just-closed:hover { color: var(--paper) !important; }
.rail .tab.just-closed::before, .rail .tab.just-closed:hover::before { background: transparent !important; }
.rail .tab.just-closed:focus-visible, .rail .tab[data-quiet]:focus-visible { outline: none; }

/* menu row 20% larger: "about" is short and "books & films" is long, so the four cells are 3 / 2 / 3 / 4 columns (desktop) */
@media (min-width: 761px) {
  .rail .tab:nth-child(2) { grid-column: span 2 !important; }
  .rail .tab:nth-child(4) { grid-column: span 4 !important; }
}

/* menu row: words only (the numbers stay in the markup for the panel caption, hidden here), set solid and large but
   capped at 80px so a 2K screen doesn't blow it up; below the cap it shrinks to fit one row, items spread edge to edge.
   The words are ~15 em wide in total plus at least 1.1 em between items = 18.4 em. Desktop sizes off the rail's own
   width (container units: a scrollbar can never push the last item off the row). Phone: the 2x2 grid, sized so
   "books & films" (~6.1 em) fits its half-width cell. */
.rail .tab .tab-num { display: none !important; }
.rail .tab .tab-word { letter-spacing: -.03em !important; }
@media (min-width: 761px) {
  .rail { container-type: inline-size; display: flex !important; justify-content: space-between !important; column-gap: 0 !important; }
  .rail .tab, .rail .tab:nth-child(2), .rail .tab:nth-child(4) { grid-column: auto !important; flex: none; }
  .rail .tab { --bar-fs: min(80px, 100cqw / 18.4); }
}
@media (max-width: 760px) { .rail .tab { --bar-fs: min(80px, (100vw - 2 * var(--m) - var(--g)) / 2 / 7.1); } }   /* "music & movies" is ~7 em */   /* no container here: it would switch off the rail's subgrid */

/* "click the name" sits at the foot of the hero field, not under the name's ink */
body[data-state="idle"] .hero .hero-hint, body.name-top[data-state="idle"] .hero .hero-hint { top: auto !important; bottom: var(--b) !important; }

/* ===== project detail panel: hover a project, a scrollable panel forms on the right ===== */
.pwrap { position: relative; }
.plist li { cursor: default; outline: none; transition: opacity .3s ease; }
.plist li .pr h3 { transition: color .2s ease; }
.plist li.on .pr h3 { color: var(--accent); }
.pwrap.open .plist li:not(.on) { opacity: .45; }
.pdetail { display: none; }
@media (min-width: 761px) and (hover: hover) {
  /* the list never reflows: its text always sits in the left half, the panel forms over the right half */
  .pwrap .plist li .pr { grid-column: 2 / span 2; }
  .pwrap .plist li p { text-wrap: pretty; }
  .pdetail {
    display: block; position: absolute; top: 0; right: 0; width: calc(50% - var(--g) / 2); height: var(--pdh, 60vh);
    overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink) transparent;
    border-top: 1px solid var(--ink); background: var(--paper, transparent);
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path .6s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
  }
  .pwrap.open .pdetail { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; transition-delay: .12s, .12s; }
  .pdetail::before { content: ""; position: sticky; top: 0; display: block; height: 3px; background: var(--accent);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .7s cubic-bezier(.2, .8, .2, 1) .2s; }
  .pwrap.open .pdetail::before { transform: scaleX(1); }
  .pd-in { padding: var(--b) 0 calc(var(--b) * 4); transition: opacity .14s ease, transform .5s cubic-bezier(.2, .8, .2, 1); transform: translateY(16px); }
  .pwrap.open .pd-in { transform: none; transition-delay: 0s, .2s; }
  .pdetail.swap .pd-in { opacity: 0; transform: translateY(8px); transition-delay: 0s; }
  .pd-in > * + * { margin-top: calc(var(--b) * 2); }
  .pd-in .kicker { margin-bottom: 0; }
  .pd-img { margin-left: 0; margin-right: 0; border: 1px solid var(--ink); line-height: 0; }
  .pd-img img { width: 100%; height: auto; display: block; }
  .pd-link { display: inline-block; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
  .pd-link:hover { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) { .plist, .pdetail, .pd-in, .pdetail::before { transition: none !important; } }

/* ===== career uses the project list + right panel; about is plain text ===== */
#panel-career .panel-body { overflow: auto; display: block; padding-bottom: 0; }   /* the list scrolls at every width (the phone rule above predates it) */
#panel-career .panel-body { -webkit-mask-image: none; mask-image: none; }
/* touch / narrow screens: the details open under the tapped row, like an accordion (no side panel, no hover) */
.pwrap.inline.open .pdetail { display: block; grid-column: 1 / -1; margin: calc(var(--b) / 2) 0 var(--b); padding-top: calc(var(--b) / 2); border-top: 3px solid var(--accent); }
.pwrap.inline .pdetail .pd-in > .kicker, .pwrap.inline .pdetail .pd-in > h3 { display: none; }   /* the row above already says it */
.pwrap.inline .pdetail .pd-img img { max-width: 100%; height: auto; }
.pwrap.inline .plist li { cursor: pointer; }
.pwrap.inline.open .plist li.on { height: auto !important; }   /* the row grid snaps rows to fixed heights; the open one grows with its details */
.plist .pr-sub { margin-top: 2px; }
.pd-fig { display: flex; align-items: baseline; gap: var(--g); flex-wrap: wrap; }
.pd-fig-n { color: var(--accent); font-size: calc(var(--t) * 2.4); line-height: 1; letter-spacing: -.03em; }
.about-text { max-width: none; }

.about-text p + p { margin-top: calc(var(--b) * 2); }

/* career: compact one-line rows (date · title · company); the description lives in the right panel, so long lists stay short */
.plist.compact li { padding: calc(var(--b) * .75) 0; align-items: baseline; }
.plist.compact .yr { padding-top: 0; white-space: nowrap; }
.plist.compact .pr { display: flex; align-items: baseline; gap: var(--g); flex-wrap: wrap; }
.plist.compact .pr .t-t { display: none; }
.plist.compact .pr .pr-sub { margin-top: 0; }
.plist.compact li:last-child { border-bottom: 1px solid var(--ink); }
.plist.compact .pnum { display: none; }
@media (max-width: 760px) { .plist.compact .pr .t-t { display: block; } }
.plist.compact li { height: auto !important; min-height: 0 !important; padding: calc(var(--b) * 1.25) 0 !important; }
.plist.compact .pr { flex-wrap: nowrap; min-width: 0; }
.plist.compact .pr h3 { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plist.compact .pr .pr-sub { flex: none; white-space: nowrap; }
@media (min-width: 761px) and (hover: hover) { .pwrap .plist.compact li .pr { grid-column: 2 / span 2; } }
/* titles get the full text column: no truncation; the company shows in the right panel */
.plist.compact .pr .pr-sub { display: none; }
.plist.compact .pr h3 { white-space: normal; overflow: visible; }
@media (min-width: 761px) and (hover: hover) {
  .pwrap.compact .plist.compact li .pr { grid-column: 2 / span 3; }
  .pwrap.compact .pdetail { width: calc(100% / 3 - var(--g) / 2); }
}
/* career: a much larger right panel (60%); the list keeps the left 40% with its own date + title columns */
@media (min-width: 761px) and (hover: hover) {
  .pwrap.compact .plist.compact { width: calc(40% - var(--g)); }
  .pwrap.compact .plist.compact li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .pwrap.compact .plist.compact li .yr { grid-column: 1; }
  .pwrap.compact .plist.compact li .pr { grid-column: 2; }
  .pwrap.compact .pdetail { width: 60%; }
}

/* formatting from the admin toolbar (js/fmt.js) */
.about-text strong, .pd-in strong { font-weight: 800; }
.about-text mark, .pd-in mark { background: var(--accent); color: inherit; padding: 0 .15em; }
.about-text a, .pd-in p a, .pd-in li a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .15em; }
.about-text a:hover, .pd-in p a:hover, .pd-in li a:hover { color: var(--accent); }
.fmt-list { list-style: none; }
.fmt-list li { position: relative; padding-left: 1.2em; }
.fmt-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.about-text .fmt-list { margin-top: calc(var(--b) * 2); }

/* about: chart column + text column */
.about-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--g) * 3); align-items: start; padding-right: 6%; }
[data-narrow="true"] .about-wrap { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--b) * 5); padding-right: 0; }
.about-chart { position: sticky; top: 0; }

/* the chart (js/bchart.js) */
.bc { margin: 0; user-select: none; -webkit-user-select: none; }
.bc-kick { font-size: var(--t); line-height: var(--lh-t); font-weight: 800; letter-spacing: -.01em; color: var(--ink); border-top: 3px solid var(--ink); padding-top: var(--b); display: flex; justify-content: space-between; }
.bc-read { display: grid; grid-template-columns: auto 1fr; column-gap: var(--g); align-items: end; padding: var(--b) 0 calc(var(--b) * 1.5); border-bottom: 1px solid var(--hair); }
.bc-fig { grid-row: 1 / span 2; font-size: var(--l); line-height: .85; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; transition: color .35s var(--ease); min-width: 2.2ch; }
.bc.hov .bc-fig { color: var(--accent); }
.bc-cap { font-size: var(--t); line-height: var(--lh-t); font-weight: 500; letter-spacing: -.015em; align-self: end; }
.bc-sub { font-size: var(--s); line-height: var(--lh-s); min-height: var(--lh-s); }
.bc-stage { padding-top: calc(var(--b) * 2); }
.bc-stage svg { display: block; width: 100%; height: auto; overflow: visible; cursor: pointer; font-family: var(--font); }
.bc-stage path { transition: fill .35s var(--ease), opacity .35s var(--ease), filter .35s var(--ease); }
.bc.hov .bc-stage path:not(.on) { opacity: .22; }
.bc-stage path.on { filter: drop-shadow(0 10px 18px rgba(240, 125, 0, .35)); }
.bc-guides line { stroke: var(--ink); stroke-opacity: .12; stroke-width: 1; shape-rendering: crispEdges; }
.bc-guides text { font-size: 11px; fill: var(--mute); font-variant-numeric: tabular-nums; }
.bc-cross { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; transition: opacity .25s; pointer-events: none; }
.bc-labels g { transition: opacity .35s var(--ease); cursor: pointer; }
.bc.hov .bc-labels g:not(.on) { opacity: .3; }
.bc-name { font-size: 13px; fill: var(--ink); }
.bc-val { font-size: 13px; font-weight: 800; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc-labels g.on .bc-val, .bc-labels g.on .bc-name { fill: var(--accent); }
.bc-lead { stroke: var(--ink); stroke-opacity: .35; stroke-width: 1; }
.bc-labels g.on .bc-lead { stroke: var(--accent); stroke-opacity: 1; }
.bc-cnum { font-size: var(--l); font-weight: 800; letter-spacing: -.03em; fill: var(--ink); font-variant-numeric: tabular-nums; }
.bc.hov .bc-cnum { fill: var(--accent); }
.bc-ccap { font-size: 13px; fill: var(--mute); }
.bc-modes { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--ink); margin-top: calc(var(--b) * 2); }
.bc-modes button { position: relative; font-size: var(--s); line-height: var(--lh-s); padding: var(--b) calc(var(--b) * 1.5) var(--b) 0; margin-right: calc(var(--b) * 1.5); color: var(--mute); transition: color .25s var(--ease); }
.bc-modes button::before { content: ""; position: absolute; left: 0; right: calc(var(--b) * 1.5); top: -2px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.bc-modes button:hover { color: var(--ink); }
.bc-modes button.on { color: var(--ink); font-weight: 800; }
.bc-modes button.on::before { transform: scaleX(1); }
.about-wrap.solo { grid-template-columns: minmax(0, 1fr); }
.about-chart.about-chart-out { position: fixed; z-index: 60; }

/* chart-type picker: a row of icon buttons, obvious and tappable */
.bc-pick { display: flex; justify-content: space-between; align-items: baseline; padding-top: calc(var(--b) * 2); }
.bc-pick-t { font-size: var(--s); font-weight: 800; }
.bc-pick-h { font-size: var(--s); }
.bc .bc-modes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--ink); border-top: 1px solid var(--ink); margin: var(--b) 0 calc(var(--b) * 2); }
.bc .bc-modes button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 2px 10px; margin: 0; border-left: 1px solid var(--ink); color: var(--ink); background: transparent; transition: background .3s var(--ease), color .3s var(--ease); font-size: 12px; line-height: 1; text-align: center; }
.bc .bc-modes button:first-child { border-left: 0; }
.bc .bc-modes button svg { width: 22px; height: 22px; fill: currentColor; transition: transform .4s var(--ease); }
.bc .bc-modes button:hover { background: var(--shade); }
.bc .bc-modes button:hover svg { transform: scale(1.15); }
.bc .bc-modes button.on { background: var(--ink); color: var(--paper); font-weight: 800; }
.bc .bc-modes button.on svg { fill: var(--accent); }
.bc .bc-modes button::before { content: none; }
.bc { container-type: inline-size; }
@container (max-width: 380px) {
  .bc .bc-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bc .bc-modes button:nth-child(4) { border-left: 0; }
  .bc .bc-modes button:nth-child(n+4) { border-top: 1px solid var(--ink); }
  .bc-pick-h { display: none; }
}

/* hero headroom: the canvas reaches up to the page top (behind the rail and masthead) so the click animations can play
   above the name while the name itself stays put; the rail and masthead stay on top and clickable */
.hero { overflow: visible !important; }
.hero-canvas { top: calc(-1 * var(--hero-head, 0px)) !important; height: calc(100% + var(--hero-head, 0px)) !important; }
.masthead { position: relative; z-index: 4; }


/* career list: date, employer and place read at a glance */
.plist.compact .pr { display: block; }
.plist.compact .yr { font-size: 17px !important; line-height: var(--lh-t) !important; font-weight: 800; color: var(--accent); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.plist .pr-meta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--b) * 1.5); margin: 2px 0 0 !important; font-size: 17px !important; line-height: 24px !important; color: var(--ink) !important; letter-spacing: -.01em !important; }
.plist .pr-meta .pr-org { font-weight: 800; color: var(--ink); }
.plist .pr-meta .pr-place { font-weight: 500; color: var(--ink); position: relative; padding-left: calc(var(--b) * 1.5); }
.plist .pr-meta .pr-place::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.pwrap.open .plist li:not(.on) .yr { color: var(--mute); }
.plist.compact .pr .pr-meta { display: flex; white-space: normal; }
@media (min-width: 761px) and (hover: hover) { .pwrap.compact .plist.compact li { grid-template-columns: 8.5em minmax(0, 1fr); } }
.plist.compact .yr, .plist .pr-meta { font-size: 19px !important; }
.plist .pr-meta { line-height: 26px !important; margin-top: 4px !important; }
@media (min-width: 761px) and (hover: hover) { .pwrap.compact .plist.compact li { grid-template-columns: 8em minmax(0, 1fr); } }
.pwrap.compact .pd-in > .kicker:first-child { font-size: 19px; line-height: 26px; font-weight: 800; color: var(--ink); }
/* phone / touch: date on its own line above the title */
@media (max-width: 760px), (hover: none) {
  #panel-career .plist.compact li { grid-template-columns: minmax(0, 1fr) !important; }
  #panel-career .plist.compact li .yr, #panel-career .plist.compact li .pr { grid-column: 1 !important; }
  #panel-career .plist.compact .yr, #panel-career .plist .pr-meta { font-size: 16px !important; line-height: 22px !important; }
}

/* career (desktop): one line per role — date | title | company | location as columns; the list takes more width */
@media (min-width: 761px) and (hover: hover) {
  .pwrap.compact .plist.compact { width: calc(62% - var(--g)); }
  .pwrap.compact .pdetail { width: 38%; }
  #panel-career .plist.compact li { grid-template-columns: 6.2em minmax(0, 1fr) minmax(0, 11em) minmax(0, 13em) !important; column-gap: var(--g); align-items: baseline; }
  #panel-career .plist.compact li .pr, #panel-career .plist.compact li .pr-meta { display: contents !important; }
  #panel-career .plist.compact li .yr { grid-column: 1; }
  #panel-career .plist.compact li .pr h3 { grid-column: 2; font-size: 19px !important; line-height: 26px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #panel-career .plist.compact li .pr-org { grid-column: 3; }
  #panel-career .plist.compact li .pr-place { grid-column: 4; padding-left: 0; }
  #panel-career .plist.compact li .pr-org, #panel-career .plist.compact li .pr-place { font-size: 15px; line-height: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  #panel-career .plist.compact li .pr-place::before { content: none; }
  #panel-career .plist.compact .yr { font-size: 15px !important; line-height: 26px !important; }
  #panel-career .plist.compact li .pr .t-t { display: none !important; }
}
/* career: job titles, companies and places keep their own capitals (as written in the admin) */
#panel-career .plist h3.lc, #panel-career .pd-in h3.lc, #panel-career .pd-in > .kicker:first-child { text-transform: none; }

/* copyright line, bottom right, in the free strip under the windows */
.legal { position: fixed; right: var(--m); bottom: 9px; z-index: 70; white-space: nowrap; font-size: clamp(9px, .72vw, 11px); line-height: 14px; color: var(--mute); text-align: right; pointer-events: none; }
@media (max-width: 760px) { .legal { left: 0; right: 0; bottom: 0; padding: 4px var(--m) max(4px, env(safe-area-inset-bottom)); white-space: normal; font-size: 9px; line-height: 12px; text-align: left; background: var(--paper); } }
@media (max-width: 760px) { body:not([data-state="idle"]) .legal { display: none; } }
@media (max-width: 760px) { .legal { left: auto; width: 64%; padding: 0; right: var(--m); bottom: max(8px, env(safe-area-inset-bottom)); text-align: right; background: none; } }

/* texts: essays keep their capitals; the reading panel is wide, the list narrow */
#panel-books .plist h3.lc, #panel-books .pd-in h3.lc { text-transform: none; }
#panel-books .pd-in > .kicker:first-child { text-transform: none; }
.texts-empty { grid-column: 1 / -1; color: var(--mute); padding-top: var(--b); }
@media (min-width: 761px) and (hover: hover) {
  .pwrap.wide .plist { width: calc(40% - var(--g)); }
  .pwrap.wide .plist li { grid-template-columns: 8.5em minmax(0, 1fr) !important; }
  .pwrap.wide .plist li .yr { grid-column: 1 !important; }
  .pwrap.wide .plist li .pr { grid-column: 2 !important; }
  .pwrap.wide .pdetail { width: 60%; }
  .pwrap.wide .pd-in .pd-p { max-width: 68ch; }
}
#panel-books .pd-in h3 { font-size: var(--l) !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: -.025em !important; margin: calc(var(--b) * 1) 0 calc(var(--b) * 2); }

/* ===== deep links: the per-row copy-link and the arrival flash ===== */
.plist > li { position: relative; }
.copy-link { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 2px 4px; color: var(--mute); text-decoration: none; font-weight: 800;
  opacity: 0; transition: opacity .12s linear; z-index: 2; background: var(--paper); }
.plist > li:hover .copy-link, .plist > li:focus-within .copy-link, .copy-link:focus-visible { opacity: 1; }
.copy-link:hover, .copy-link:focus-visible { color: var(--accent); }
.copy-link.copied { color: var(--accent); opacity: 1; }
@media (hover: none), (max-width: 760px) { .copy-link { opacity: .45; } }
@keyframes hl-flash { 0%, 30% { background-color: color-mix(in srgb, var(--accent) 28%, transparent); } 100% { background-color: transparent; } }
.plist > li.hl { animation: hl-flash 1.6s ease-out; }
@media (max-width: 760px) { body[data-state="idle"] .hero { margin-top: 24px !important; } }   /* one module and a half under the menu bar */