/* Layout: a composition book that opens onto the work. Pinned full-screen chapters, one per course; objects on a sideways shelf; a closing brief for brands. */
:root{
  --paper:#fbfaf6; --ink:#0a0a0a; --mute:#6b6b6b; --rule:#e2e2e2; --pen:#d0021b; --night:#000000; --day:#ffffff; --ruled:rgba(60,110,170,.16); --margin:rgba(208,2,27,.45);
  --display:"Archivo","Arial Narrow",Impact,sans-serif;
  --text:"Newsreader",Georgia,serif;
  --code:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:max(16px,env(safe-area-inset-left,0px));
  --gutR:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#000000;--ink:#ffffff;--mute:#9a9a9a;--rule:#262626;--pen:#ff4b5c;--ruled:rgba(255,255,255,.07);--margin:rgba(255,75,92,.4);color-scheme:dark}}
:root[data-theme="dark"]{--paper:#000000;--ink:#ffffff;--mute:#9a9a9a;--rule:#262626;--pen:#ff4b5c;--ruled:rgba(255,255,255,.07);--margin:rgba(255,75,92,.4);color-scheme:dark}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-variation-settings:"wdth" 100;font-size:15px;line-height:1.45;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pen);outline-offset:3px}
.code{font-family:var(--code);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.big{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;margin:0}
.serif{font-family:var(--text)}

/* header */
.hd{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:14px var(--gutR) 14px var(--gut);padding-top:calc(14px + env(safe-area-inset-top,0px));color:#fff;mix-blend-mode:difference;pointer-events:none}
.hd a{pointer-events:auto}
.hd .wm{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;font-size:22px;letter-spacing:.02em;text-transform:uppercase}
.hd nav{display:flex;gap:18px}
.hd nav a{font-family:var(--code);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}

/* 2. thesis */
.thesis{padding:clamp(80px,14vw,200px) var(--gutR) clamp(80px,12vw,180px) var(--gut)}
.thesis p{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(34px,5.6vw,92px);line-height:1;letter-spacing:-.015em;margin:0;max-width:16ch;text-wrap:balance}
.thesis .w{opacity:1;transition:opacity .2s}
.js-motion .thesis .w{opacity:.14}
.thesis .w.on{opacity:1}
.thesis .facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:48px}
.thesis .facts div{border-top:2px solid var(--ink);padding-top:10px;min-width:150px}
.thesis .facts .n{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(48px,6vw,84px);line-height:.9;display:block}

/* 3. courses */
.course{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;color:#fff}
.course .plate{position:absolute;inset:0;overflow:hidden}
.course .plate img{width:100%;height:100%;object-fit:cover}
.course .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.35) 100%)}
.course .num{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));left:var(--gut);z-index:2;font-family:var(--code);font-size:13px;letter-spacing:.08em}
.course .title{position:absolute;left:var(--gut);right:var(--gutR);bottom:clamp(24px,5vh,56px);z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:24px;align-items:end}
.course .title .big{font-size:clamp(60px,11.5vw,200px)}
.card{background:#fff;color:#000;padding:16px 18px;font-size:13px}
.card dl{margin:0;display:grid;grid-template-columns:5.5em 1fr;gap:6px 10px}
.card dt{font-family:var(--code);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#666}
.card dd{margin:0}
.card .note{font-family:var(--text);font-style:italic;color:#d0021b;font-size:16px;line-height:1.3;border-left:2px solid #d0021b;padding-left:10px;margin:14px 0 0}
.card .open{display:inline-block;margin-top:14px;font-family:var(--code);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid #000;padding-bottom:2px}

/* 4. show and tell */
.shelf{position:relative;background:var(--paper)}
.shelf .head{padding:clamp(72px,10vw,140px) var(--gutR) 28px var(--gut);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.shelf .head .big{font-size:clamp(56px,10vw,170px)}
.shelf .head p{font-family:var(--text);font-size:19px;max-width:22em;margin:0;color:var(--mute)}
.track-wrap{overflow:hidden}
.track{display:flex;gap:2px;padding:0 var(--gut) 72px;width:max-content}
.obj{width:clamp(240px,26vw,380px);flex:none;background:#fff;border:1px solid var(--rule)}
.obj img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;padding:18px}
.obj .tag{display:flex;justify-content:space-between;gap:10px;padding:10px 14px 14px;border-top:1px solid #e2e2e2;color:#000;background:#fff}
.obj .tag b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:15px;line-height:1.05}
.obj .tag span{font-family:var(--code);font-size:10.5px;letter-spacing:.06em;color:#6b6b6b;white-space:nowrap}

/* 5. for brands */
.brands{background:#000;color:#fff;padding:clamp(80px,12vw,180px) var(--gutR) clamp(80px,10vw,140px) var(--gut)}
.brands .big{font-size:clamp(56px,10vw,170px)}
.brands .lead{font-family:var(--text);font-size:clamp(19px,1.8vw,24px);max-width:30em;margin:28px 0 0;color:#d8d8d8}
.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin-top:56px;background:#2a2a2a;border:2px solid #2a2a2a}
.col{background:#000;padding:22px 20px 26px;min-width:0}
.col .code{color:#9a9a9a}
.col h3{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(34px,3.4vw,52px);line-height:.9;margin:10px 0 12px}
.col p{font-family:var(--text);font-size:16.5px;margin:0 0 14px;color:#d8d8d8}
.col ul{list-style:none;padding:0;margin:0;font-family:var(--code);font-size:12px;letter-spacing:.03em;line-height:1.8;color:#fff}
.partners{margin-top:56px;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(22px,2.6vw,38px);line-height:1.15;text-transform:uppercase;color:#5c5c5c}
.partners span{color:#fff}

/* 6. roster */
.roster{padding:clamp(72px,10vw,140px) var(--gutR) clamp(56px,8vw,100px) var(--gut);position:relative}
.roster .code{color:var(--mute)}
.names{list-style:none;margin:20px 0 0;padding:0}
.names li{border-top:1px solid var(--rule)}
.names li:last-child{border-bottom:1px solid var(--rule)}
.names a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:10px 0}
.names .nm{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(40px,7vw,110px);line-height:.92;transition:color .2s}
.names .wh{font-family:var(--code);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-align:right}
.names a:hover .nm,.names a:focus-visible .nm{color:var(--pen)}
.peek{position:fixed;left:0;top:0;width:min(300px,30vw);pointer-events:none;z-index:40;opacity:0;transition:opacity .15s}
.peek.on{opacity:1}

/* 7. hall pass */
.pass-sec{padding:clamp(48px,8vw,100px) var(--gutR) clamp(80px,10vw,140px) var(--gut)}
.pass{display:grid;grid-template-columns:auto minmax(0,1fr);border:3px dashed var(--ink);max-width:860px}
.pass .stub{background:var(--ink);color:var(--paper);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;padding:20px 12px}
.pass .body{padding:26px 28px}
.pass .big{font-size:clamp(56px,8vw,120px)}
.pass p{font-family:var(--text);font-size:19px;margin:14px 0 0;max-width:30em}
.pass .mail{font-family:var(--code);font-size:clamp(18px,2.2vw,26px);margin-top:18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pass .mail span{user-select:all}
.pass button{font-family:var(--code);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:7px 12px;cursor:pointer}
.ft{padding:0 var(--gutR) calc(28px + env(safe-area-inset-bottom,0px)) var(--gut);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--mute)}


/* notebook paper: ruled lines, a red margin, paper grain */
.paper{position:relative;background-color:var(--paper);
  background-image:
   repeating-linear-gradient(to bottom, transparent 0 33px, var(--ruled) 33px 34px),
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.paper > *{position:relative}
.thesis.paper{padding-left:calc(var(--gut) + 72px)}
.thesis.paper::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.thesis.paper .facts{margin-left:0}
/* index-card notes on each course */
.card{background-color:#fff;background-image:linear-gradient(to bottom, transparent 30px, rgba(208,2,27,.55) 30px, rgba(208,2,27,.55) 31.5px, transparent 31.5px),repeating-linear-gradient(to bottom, transparent 0 21px, rgba(60,110,170,.18) 21px 22px);background-position:0 0, 0 31px;padding-top:40px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:rotate(-1.2deg)}
.course:nth-of-type(even) .card{transform:rotate(1deg)}
.card .tab{position:absolute;top:8px;left:18px;font-family:var(--code);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:#d0021b}
.card{position:relative}
/* hand-drawn pencil underline */
.scribble{position:relative;display:inline-block}
.scribble svg{position:absolute;left:-2%;bottom:-.18em;width:104%;height:.36em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--pen);stroke-width:3;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.1s ease .3s}
.scribble.on path{stroke-dashoffset:0}
/* objects as exhibits, quoted like a label on a museum wall */
.obj{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.obj:hover{transform:translateY(-8px) rotate(-.6deg)}
.obj .tag b{font-family:var(--code);font-weight:500;font-variation-settings:normal;text-transform:uppercase;font-size:14px;letter-spacing:.04em}
.obj .tag{flex-direction:column;align-items:flex-start;gap:4px}
.obj .stamp{position:absolute;top:12px;right:12px;font-family:var(--code);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#d0021b;border:1.5px solid #d0021b;padding:3px 6px;transform:rotate(4deg);background:#fff}
/* cursor: a registration cross that opens into a label */
.cur{position:fixed;left:0;top:0;z-index:80;pointer-events:none;width:0;height:0}
.cur .x{position:absolute;left:-4px;top:-24px;width:28px;height:28px;transition:transform .25s;transform-origin:4px 24px}
.cur .lab{position:absolute;left:16px;top:12px;white-space:nowrap;font-family:var(--code);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--pen);color:#fff;padding:4px 8px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.cur.on .lab{opacity:1;transform:none}
.cur.on .x{transform:rotate(-12deg) scale(1.12)}
.cur.down .x{transform:translate(1px,-1px) scale(.92)}
html.has-cur, html.has-cur a, html.has-cur button{cursor:none}
@media (pointer:coarse){.cur{display:none}}
@media (max-width:820px){
  .hd nav{display:none}
  .course .title{grid-template-columns:1fr}
  .card{max-width:420px}
  .cols{grid-template-columns:1fr 1fr}
  .names a{grid-template-columns:1fr}
  .names .wh{text-align:left}
}
@media (max-width:520px){
  .cols{grid-template-columns:1fr}
  .course .title .big{font-size:clamp(52px,16vw,90px)}
  .card{font-size:12.5px;padding:14px}
  .card .note{font-size:15px}
}
/* without scroll animation: the shelf scrolls sideways by hand */
.no-pin .track-wrap{overflow-x:auto;scroll-snap-type:x mandatory}
.no-pin .obj{scroll-snap-align:start}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== multi-page additions ===== */
.hd nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.menu-btn{display:none;pointer-events:auto;background:none;border:1.5px solid currentColor;color:inherit;padding:6px 10px;font-size:11px}
.sheet{position:fixed;inset:0;z-index:60;padding:calc(72px + env(safe-area-inset-top,0px)) var(--gutR) 32px var(--gut);overflow:auto}
.sheet[hidden]{display:none}
.sheet ol{list-style:none;margin:16px 0 0;padding:0}
.sheet li{border-top:1px solid var(--rule)}
.sheet a{display:flex;gap:14px;align-items:baseline;padding:12px 0;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:44px;line-height:.95}
.sheet .n{font-family:var(--code);font-size:12px;font-weight:400;color:var(--pen)}
html.sheet-open .hd{mix-blend-mode:normal;color:var(--ink)}

/* page heading on every inner page */
.pagehead{padding:calc(120px + env(safe-area-inset-top,0px)) var(--gutR) clamp(40px,6vw,80px) calc(var(--gut) + 72px)}
.pagehead::before,.toc::before,.turn::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.kick{color:var(--pen);margin:0 0 16px}
.pagehead .big{font-size:clamp(48px,11vw,200px)}
.pagehead + .roster{padding-top:8px}
.pagehead .lede{font-family:var(--text);font-size:clamp(18px,1.7vw,23px);max-width:30em;margin:24px 0 0;color:var(--mute)}
.brands.first,.pass-sec.first{padding-top:calc(120px + env(safe-area-inset-top,0px))}
.pass-sec.first{min-height:80svh}

/* turn the page */
.turn{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--rule);padding:0 var(--gutR) 0 calc(var(--gut) + 72px)}
.turn a{display:flex;flex-direction:column;gap:8px;padding:clamp(32px,5vw,64px) 0}
.turn .next{text-align:right;align-items:flex-end}
.turn .code{color:var(--mute)}
.turn .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(34px,6vw,96px);line-height:.9;transition:color .2s}
.turn .prev .t{font-size:clamp(22px,2.6vw,36px);color:var(--mute)}
.turn a:hover .t{color:var(--pen)}

/* table of contents */
.toc{padding:clamp(72px,10vw,140px) var(--gutR) clamp(72px,10vw,140px) calc(var(--gut) + 72px)}
.toc .big{font-size:clamp(64px,12vw,200px)}
.rows{list-style:none;margin:40px 0 0;padding:0;counter-reset:r}
.rows li{border-top:1.5px solid var(--ink)}
.rows li:last-child{border-bottom:1.5px solid var(--ink)}
.rows a{display:grid;grid-template-columns:3.2em auto minmax(24px,1fr) auto;grid-template-areas:"n t d p" ". s s s";align-items:baseline;column-gap:16px;padding:16px 0 18px}
.rows .n{grid-area:n;font-family:var(--code);font-size:13px;color:var(--pen)}
.rows .t{grid-area:t;font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(44px,7.5vw,120px);line-height:.9;transition:color .2s,transform .3s}
.rows .dots{grid-area:d;border-bottom:2px dotted var(--mute);transform:translateY(-.4em)}
.rows .pg{grid-area:p;color:var(--mute)}
.rows .sub{grid-area:s;font-family:var(--text);font-size:clamp(16px,1.4vw,19px);color:var(--mute);margin-top:8px}
.rows a:hover .t,.rows a:focus-visible .t{color:var(--pen);transform:translateX(8px)}

/* contact sheet under each course */
.contact{background:#0a0a0a;color:#fff;padding:22px var(--gutR) 30px var(--gut)}
.contact .code{color:#ff8a3d;margin:0 0 14px}
.frames{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.frames figure{margin:0;background:#161616;padding:8px 8px 10px;transition:transform .3s}
.frames figure:hover{transform:translateY(-6px) rotate(-.8deg)}
.frames img{width:100%;aspect-ratio:4/5;object-fit:cover}
.frames figcaption{font-family:var(--code);font-size:10.5px;letter-spacing:.04em;color:#bdbdbd;margin-top:8px}
.frames b{color:#ff8a3d;font-weight:500;margin-right:6px}
@media (max-width:820px){.frames{grid-template-columns:1fr 1fr}}
/* ===== the composition book opens on its spine ===== */
.bookstage{position:relative;height:250svh;background:#0d0d0d;color:#000}
.bookstage .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;perspective:2600px;
  background:radial-gradient(ellipse at 50% 42%,#2a2a2a 0%,#0d0d0d 62%)}
.book{--p:0;--bh:min(80svh,calc(44vw / .77));--shift:50%;position:relative;height:var(--bh);width:calc(var(--bh) * .77);
  font-size:calc(var(--bh) / 42);transform-style:preserve-3d;
  transform:translateX(calc(var(--p) * var(--shift))) rotateX(calc((1 - var(--p)) * 6deg)) rotateZ(calc((1 - var(--p)) * -2deg));will-change:transform}
.book::after{content:'';position:absolute;left:4%;right:-2%;bottom:-3.5%;height:6%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);transform:translateZ(-1px);pointer-events:none}
.leaf{position:absolute;inset:0;padding:2.6em 2.4em 2.2em 3.4em;overflow:hidden;box-shadow:inset 10px 0 18px -10px rgba(0,0,0,.35);color:var(--ink)}
.leaf::before{content:'';position:absolute;top:0;bottom:0;left:2.3em;width:1.5px;background:var(--margin)}
.taped{position:relative;margin:0 0 1.6em;transform:rotate(-1.6deg);background:#fff;padding:.5em .5em 1.6em;box-shadow:0 .6em 1.4em rgba(0,0,0,.18)}
.taped img{width:100%;aspect-ratio:3/2;object-fit:cover}
.tape{position:absolute;width:5.5em;height:1.7em;background:rgba(240,230,200,.78);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2}
.tape.a{top:-.7em;left:-1em;transform:rotate(-24deg)}
.tape.b{top:-.7em;right:-1em;transform:rotate(22deg)}
.leaf .big{font-size:5.4em}
.leaf .who{font-family:var(--text);font-size:1.15em;line-height:1.4;margin:1em 0 0;max-width:24em}
.leaf .next{position:absolute;right:2.4em;bottom:1.8em;color:var(--pen);font-size:.8em}

.front{position:absolute;inset:0;z-index:2;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(calc(var(--p) * -178deg));cursor:pointer}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;border-radius:0 .5em .5em 0}
.face.out{background:#111;box-shadow:0 1.6em 3em rgba(0,0,0,.55)}
.face.out canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.face.out::before{content:'';position:absolute;left:0;top:0;bottom:0;width:9%;background:#050505;z-index:1;box-shadow:2px 0 6px rgba(0,0,0,.6)}
.face.in{transform:rotateY(180deg);background:#f3efe4;color:#0a0a0a;padding:2.6em 2.6em 2.2em;border-radius:.5em 0 0 .5em;box-shadow:inset -10px 0 18px -10px rgba(0,0,0,.35)}
.face.in .code{font-size:.75em;color:#6b6b6b;margin:0}
.face.in .hand{font-family:var(--text);font-style:italic;font-size:3em;line-height:1.1;margin:.2em 0 0;border-bottom:1.5px solid #0a0a0a;padding-bottom:.15em}
.sched{list-style:none;margin:.6em 0 0;padding:0}
.sched li{border-bottom:1px solid rgba(60,110,170,.35)}
.sched a{display:flex;gap:1em;align-items:baseline;padding:.45em 0;font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:1.5em}
.sched a span{font-family:var(--code);font-weight:400;font-size:.45em;color:#d0021b;min-width:5.4em}
.sched a:hover{color:#d0021b}
.face.in .since{position:absolute;left:2.6em;bottom:2em}
.book .label{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);z-index:2;background:#fff;color:#000;width:76%;border:.18em solid #000;box-shadow:0 0 0 .45em #fff;padding:1.2em 1.3em 1.1em}
.book .label .top{text-align:center;margin:0 0 .4em;font-size:.7em}
.book .label .row{display:grid;grid-template-columns:5em 1fr;align-items:end;gap:.6em;border-bottom:1.5px solid #000;padding:.5em 0 .25em}
.book .label .row .code{font-size:.62em}
.book .label .row .big{font-size:2.2em}
.book .label .row .big.s{font-size:1.4em}
.book .label .motto{font-family:var(--text);font-style:italic;font-size:1.35em;text-align:center;margin:.8em 0 0}
.cue{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:none;border:0;color:#fff;opacity:.75;cursor:pointer;transition:opacity .3s}
.opened .cue{opacity:0;pointer-events:none}
@media (max-width:820px){
  .hd nav{display:none}
  .menu-btn{display:inline-block}
  .book{--bh:min(74svh,calc(86vw / .77));--shift:0%}
  .pagehead,.toc,.turn{padding-left:calc(var(--gut) + 40px)}
  .pagehead::before,.toc::before,.turn::before{left:calc(var(--gut) + 22px)}
  .rows a{grid-template-columns:2.4em minmax(0,1fr) auto;grid-template-areas:"n t p" ". s s"}
  .rows .dots{display:none}
  .rows .t{font-size:9vw}
  .toc .big,.pagehead .big{font-size:11.5vw}
  .face.in .hand{font-size:2.6em}
  .turn{grid-template-columns:1fr}
  .turn .next{text-align:left;align-items:flex-start;border-top:1px solid var(--rule)}
}
@media (prefers-reduced-motion:reduce){
  .bookstage{height:auto}
  .bookstage .stick{position:relative;height:auto;min-height:100svh;padding:90px 0 60px}
}

/* ================= full site additions ================= */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 12px;font-family:var(--code);font-size:12px}
.skip:focus{left:8px}
.hd nav{gap:16px}
@media (max-width:1180px){.hd nav{display:none}.menu-btn{display:inline-block}}

/* footer */
.ft{display:block;padding:clamp(48px,7vw,90px) var(--gutR) calc(28px + env(safe-area-inset-bottom,0px)) calc(var(--gut) + 72px);color:var(--ink);border-top:1.5px solid var(--ink)}
.ft::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.ft-cols p{margin:0 0 8px;font-family:var(--text);font-size:18px;line-height:1.4}
.ft-cols .code{color:var(--pen);font-size:11.5px}
.ft-cols a:hover{color:var(--pen)}
.plain{list-style:none;margin:0;padding:0;font-family:var(--text);font-size:18px;line-height:1.55}
.ft-line{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:48px 0 0;color:var(--mute)}

/* links inside prose-like text */
.lede a,.prose a,.where a,.more a,.press a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.lede a:hover,.prose a:hover,.press a:hover{color:var(--pen)}
.more{margin:28px 0 0}
.more a{color:var(--pen)}

/* course card link */
.card .open{color:#000}
.card .open:hover{color:#d0021b;border-color:#d0021b}

/* contact sheets: lightbox links and product images */
.frames a{display:block}
.frames img.fit{object-fit:contain;background:#fff;padding:10px}
.big-sheet{padding-top:32px;padding-bottom:48px}
.big-sheet .frames{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

/* electives */
.electives{padding:clamp(72px,10vw,130px) var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px)}
.electives::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.electives .big{font-size:clamp(48px,8vw,130px)}
.el-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px;margin-top:36px}
.elective{display:flex;flex-direction:column;gap:6px}
.elective .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:#111;margin-bottom:6px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.elective .ph img{width:100%;height:100%;object-fit:cover}
.elective .ph.fit{background:#fff;border:1px solid var(--rule)}
.elective .ph.fit img{object-fit:contain;padding:14px}
.elective .ph.type{display:flex;align-items:flex-end;padding:14px;background:#0a0a0a;color:#fff}
.elective .ph.type span{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:.9}
.elective:hover .ph{transform:translateY(-6px) rotate(-.6deg)}
.elective .code{color:var(--mute);font-size:11px}
.elective .t{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:20px;line-height:1.05}
.elective:hover .t{color:var(--pen)}

/* show and tell: exhibits are links */
.obj{display:block;color:#000}
.shelf{padding-bottom:24px}
.track{padding-top:8px}

/* for brands */
.brands .kick{color:#ff4b5c}
.col li a{border-bottom:1px solid #444}
.col li a:hover{color:#ff4b5c;border-color:#ff4b5c}
.cta{margin:48px 0 0}
.cta a{display:inline-block;font-family:var(--code);font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:#ff4b5c;color:#000;padding:12px 18px}
.cta a:hover{background:#fff}

/* office hours */
.pass .mail a{border-bottom:2px solid var(--ink)}
.pass .where{margin-top:14px;color:var(--mute)}
.elsewhere{margin-top:56px;max-width:860px}
.big-list{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(34px,5vw,64px);line-height:1}
.big-list li{border-top:1px solid var(--rule);padding:8px 0}
.big-list a:hover{color:var(--pen)}

/* index (work) */
.work-sec{padding:0 var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px)}
.work-sec::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:24px}
.chip{font-family:var(--code);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid var(--ink);background:transparent;color:var(--ink);padding:7px 12px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.count{color:var(--mute);margin-left:8px}
.ledger{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.ledger .row{display:grid;grid-template-columns:5.2em 3.4em minmax(0,1.6fr) minmax(0,1fr) 8em;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.ledger .row[hidden]{display:none}
.ledger .no{color:var(--pen);font-size:11px}
.ledger .yr{font-family:var(--code);font-size:13px}
.ledger .nm{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(17px,1.6vw,22px);line-height:1.15}
.ledger .nm a:hover{color:var(--pen)}
.ledger .cx{font-family:var(--text);font-size:16px;color:var(--mute)}
.ledger .ct{color:var(--mute);font-size:10.5px;text-align:right}

/* project pages */
.case-plate{position:relative;height:88svh;min-height:560px;overflow:hidden;background:#000;color:#fff}
.case-plate .plate{position:absolute;inset:0}
.case-plate .plate img{width:100%;height:100%;object-fit:cover}
.case-plate .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.05) 55%,rgba(0,0,0,.4) 100%)}
.case-plate .plate.fit{background:#fff}
.case-plate .plate.fit img{object-fit:contain;padding:90px 8vw 34vh}
.case-plate .plate.fit::after{background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 40%)}
.case-plate .plate.type{display:flex;align-items:center;justify-content:center;background:#0a0a0a}
.case-plate .plate.type span{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:22vw;line-height:.8;color:#1c1c1c;text-align:center}
.case-plate .num{position:absolute;top:calc(68px + env(safe-area-inset-top,0px));left:var(--gut);z-index:2;color:#fff}
.case-plate .num a{border-bottom:1px solid #fff}
.case-plate .title{position:absolute;left:var(--gut);right:var(--gutR);bottom:clamp(24px,5vh,56px);z-index:2}
.case-plate .big{font-size:clamp(52px,9vw,160px);max-width:14ch}
.case-plate .tag-line{font-family:var(--text);font-size:clamp(18px,1.6vw,22px);max-width:34em;margin:16px 0 0;color:#eaeaea}
.case-body{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:clamp(28px,5vw,80px);padding:clamp(56px,8vw,110px) var(--gutR) clamp(56px,8vw,110px) calc(var(--gut) + 72px)}
.case-body::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.case-body .card{align-self:start;position:sticky;top:90px;transform:rotate(-1deg)}
.case-body .card dd a{text-decoration:underline}
.prose{font-family:var(--text);font-size:clamp(18px,1.4vw,21px);line-height:1.55;max-width:38em}
.prose p{margin:0 0 1em}
.prose .pull{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(44px,6vw,90px);line-height:.9;color:var(--pen);margin:0 0 .5em}
.prose h2.sec{font-family:var(--code);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pen);margin:2em 0 .8em;font-weight:500}
.prose ul.list{padding-left:1.1em;margin:0 0 1em}
.prose ul.list li{margin:0 0 .5em}
.prose .muted{color:var(--mute);font-size:.9em}
.prose .small{font-size:.85em}
.prose .timeline{list-style:none;margin:0 0 1.4em;padding:0;border-top:1.5px solid var(--ink)}
.prose .timeline li{display:grid;grid-template-columns:4em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.prose .timeline .yr{font-family:var(--code);font-size:13px;color:var(--pen)}
.prose .timeline h3{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;font-size:22px;margin:0 0 4px;text-transform:uppercase}
.prose .timeline p{margin:0;font-size:.92em}
.credits{color:var(--mute);margin-top:2em}

/* about */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,340px);gap:clamp(28px,5vw,80px);padding:0 var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px)}
.about::before,.record::before,.archive-sec::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.about .prose .lede{font-size:clamp(22px,2vw,28px);line-height:1.35;margin:0 0 1em;color:var(--ink)}
.taped.small{margin:0 0 28px}
.taped.small img{aspect-ratio:4/5}
.about aside .code{color:var(--pen)}
.mailbig{font-family:var(--code);font-size:18px;margin:6px 0 0}
.record{padding:clamp(56px,8vw,100px) var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px);border-top:1px solid var(--rule)}
.record .big{font-size:clamp(48px,8vw,130px)}
.timeline{list-style:none;margin:32px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.record .timeline li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--rule)}
.record .timeline .yr{color:var(--pen)}
.record .timeline h3{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(20px,2vw,28px);margin:0 0 6px}
.record .timeline p{font-family:var(--text);font-size:18px;margin:0;color:var(--mute);max-width:42em}
.press{list-style:none;margin:32px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.press li{padding:14px 0;border-bottom:1px solid var(--rule);font-family:var(--text);font-size:19px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.press .code{color:var(--mute)}

/* archive */
.archive-sec{padding:0 var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px)}
.archive{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.arc{display:grid;grid-template-columns:9em minmax(0,1fr);gap:20px;padding:28px 0;border-bottom:1px solid var(--rule)}
.arc .yr{color:var(--pen)}
.arc h2{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(30px,3.6vw,52px);line-height:.95;margin:0}
.arc .where{color:var(--mute);margin:8px 0 12px}
.arc p{font-family:var(--text);font-size:18px;max-width:42em;margin:0 0 16px}
.arc .frames{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));background:#0a0a0a;padding:12px}
.arc .frames figcaption{color:#bdbdbd}

/* lightbox */
.lightbox{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;color:#fff}
.lightbox::backdrop{background:rgba(0,0,0,.92)}
.lightbox figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 64px}
.lightbox img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain}
.lightbox figcaption{font-family:var(--code);font-size:12px;letter-spacing:.04em;margin-top:14px;color:#ddd;text-align:center}
.lightbox button{position:fixed;background:#000;color:#fff;border:1.5px solid #fff;padding:8px 12px;cursor:pointer;font-size:12px}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%}
.lb-next{right:16px;top:50%}

@media (max-width:980px){
  .el-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ledger .row{grid-template-columns:4.4em 3em minmax(0,1fr);row-gap:4px}
  .ledger .cx{grid-column:3}
  .ledger .ct{display:none}
  .case-body{grid-template-columns:1fr}
  .case-body .card{position:relative;top:0;max-width:420px}
  .about{grid-template-columns:1fr}
  .about aside{max-width:340px}
}
@media (max-width:820px){
  .ft,.electives,.work-sec,.case-body,.about,.record,.archive-sec{padding-left:calc(var(--gut) + 40px)}
  .ft::before,.electives::before,.work-sec::before,.case-body::before,.about::before,.record::before,.archive-sec::before{left:calc(var(--gut) + 22px)}
  .ft-cols{grid-template-columns:1fr}
  .record .timeline li,.arc{grid-template-columns:1fr;gap:6px}
  .case-plate .big{font-size:12vw}
  .lightbox figure{padding:56px 12px}
  .lb-prev,.lb-next{top:auto;bottom:16px}
}
html.sheet-open .hd{z-index:70}

/* ================= final pass ================= */

/* cursor: a real system cursor, so clicks land exactly at the pencil tip, with no lag */
html{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 30 L5 21 L11 27 Z' fill='%23e9d2a6' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M2 30 L3.3 26.2 L5.8 28.7 Z' fill='%230a0a0a'/%3E%3Cpath d='M5 21 L22 4 L28 10 L11 27 Z' fill='%23f2c200' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M22 4 L25 1 L31 7 L28 10 Z' fill='%23f4a3b0' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 30, auto}
a,button,label,[role=button],.chip,summary{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 30 L5 21 L11 27 Z' fill='%23e9d2a6' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M2 30 L3.3 26.2 L5.8 28.7 Z' fill='%230a0a0a'/%3E%3Cpath d='M5 21 L22 4 L28 10 L11 27 Z' fill='%23d0021b' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M22 4 L25 1 L31 7 L28 10 Z' fill='%23f4a3b0' stroke='%230a0a0a' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 30, pointer}
input,textarea{cursor:text}
.cur{display:none!important}

/* top bar: solid, always clickable, four items */
.hd{mix-blend-mode:normal;pointer-events:auto;color:var(--ink);background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--ink);padding-top:calc(12px + env(safe-area-inset-top,0px));padding-bottom:12px}
.hd .wm{font-size:20px}
.hd nav{display:flex!important;gap:4px}
.hd nav a{font-family:var(--code);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border:1.5px solid transparent}
.hd nav a:hover{border-color:var(--ink)}
.hd nav a[aria-current="page"]{background:var(--ink);color:var(--paper);text-decoration:none}
.menu-btn,.sheet{display:none!important}
@media (max-width:620px){.hd .wm{font-size:16px}.hd nav a{padding:7px 6px;font-size:10.5px;letter-spacing:.03em}}

/* book sits under the bar */
.bookstage{height:210svh}
.bookstage .stick{padding-top:56px}
.book{--bh:min(76svh,calc(44vw / .77))}
@media (max-width:820px){.book{--bh:min(68svh,calc(86vw / .77))}}

/* section heads */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:32px}
.sec-head .big{font-size:clamp(56px,10vw,170px)}
.sec-head .more{color:var(--pen);border-bottom:1.5px solid var(--pen);padding-bottom:3px}
.sub-h{font-family:var(--code);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pen);font-weight:500;margin:56px 0 16px}
.selected,.show,.worked,.social{padding:clamp(72px,10vw,130px) var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 72px)}
.selected::before,.show::before,.worked::before,.social::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 44px);width:1.5px;background:var(--margin)}
.show .lede{font-family:var(--text);font-size:clamp(18px,1.6vw,22px);max-width:34em;color:var(--mute);margin:-12px 0 32px}

/* selected work */
.sel-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:28px 22px}
.sel{grid-column:span 5;display:flex;flex-direction:column;gap:12px}
.sel.l{grid-column:span 7}
.sel .ph{display:block;overflow:hidden;background:#111;aspect-ratio:4/5}
.sel.l .ph{aspect-ratio:5/4}
.sel .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.sel:hover .ph img{transform:scale(1.04)}
.sel .cap{display:flex;flex-direction:column;gap:4px}
.sel .cap .code{color:var(--mute)}
.sel .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(30px,3.4vw,52px);line-height:.92}
.sel:hover .t{color:var(--pen)}

/* show and tell: a plain grid that always shows everything */
.obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
.obj{width:auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);color:#000}
.obj img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;padding:14px}
.obj img:not(.fit){object-fit:cover;padding:0}
.obj .tag{display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;border-top:1px solid #e2e2e2;background:#fff}
.obj .tag b{font-family:var(--code);font-weight:500;font-size:13px;letter-spacing:.04em}
.obj .tag span{font-family:var(--code);font-size:10.5px;letter-spacing:.04em;color:#6b6b6b;white-space:normal}
.obj:hover{transform:translateY(-6px) rotate(-.5deg);box-shadow:0 14px 30px rgba(0,0,0,.12)}

/* Study Hall band */
.sh{background:#0a0a0a;color:#fff;padding:clamp(72px,10vw,130px) var(--gutR) clamp(56px,8vw,100px) var(--gut)}
.sh .kick{color:#ff4b5c}
.sh-top{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.sh .big{font-size:clamp(64px,12vw,200px)}
.sh-logo{width:clamp(120px,14vw,200px);height:auto;filter:invert(1)}
.sh .lede{font-family:var(--text);font-size:clamp(19px,1.8vw,24px);max-width:34em;color:#d8d8d8;margin:24px 0 36px}
.eps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ep{display:flex;flex-direction:column;gap:8px}
.ep .ph{display:block;aspect-ratio:16/9;overflow:hidden;background:#222}
.ep .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ep:hover .ph img{transform:scale(1.05)}
.ep .code{color:#9a9a9a}
.ep .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(24px,2.4vw,36px);line-height:.95}
.ep:hover .t{color:#ff4b5c}
.sh-links{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0 0}
.btn{display:inline-block;font-family:var(--code);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;background:#ff4b5c;color:#000;padding:12px 16px;border:1.5px solid #ff4b5c}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn:hover{background:#fff;color:#000;border-color:#fff}
.prose .sh-links .btn.ghost{color:var(--ink)}

/* worked with */
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));border-top:1.5px solid var(--ink);border-left:1px solid var(--rule)}
.logo{display:flex;align-items:center;justify-content:center;height:110px;padding:18px 22px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);background:transparent;transition:background .2s}
.logo img{max-width:100%;max-height:50px;width:auto;height:auto;opacity:.88;transition:opacity .2s,transform .2s}
.logo:hover{background:#fff}
.logo:hover img{opacity:1;transform:scale(1.06)}
.also{color:var(--mute);margin:16px 0 0;line-height:1.9}
.also a{color:var(--ink);border-bottom:1px solid var(--rule)}
.also a:hover{color:var(--pen)}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:22px 18px}
.person{display:flex;flex-direction:column;gap:6px}
.person .ph{display:block;aspect-ratio:4/5;overflow:hidden;background:#111}
.person .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.person .ph img.fit{object-fit:contain;background:#fff;padding:10px}
.person:hover .ph img{transform:scale(1.05)}
.person .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:26px;line-height:.95;margin-top:4px}
.person:hover .t{color:var(--pen)}
.person .code{color:var(--mute);font-size:10.5px}
.artists{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:clamp(22px,2.6vw,38px);line-height:1.2;margin:0}
.artists a{margin-right:.35em;white-space:nowrap}
.artists a:not(:last-child)::after{content:" ·";color:var(--mute)}
.artists a:hover{color:var(--pen)}

/* social */
.igs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ig{display:block;aspect-ratio:1;overflow:hidden;background:#111}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .5s,filter .3s}
.ig:hover img{transform:scale(1.06)}
.socs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:28px;border-top:1.5px solid var(--ink)}
.soc{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1px solid var(--rule)}
.soc .code{color:var(--pen)}
.soc .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:28px;line-height:1}
.soc:hover .t{color:var(--pen)}

/* contact */
.contact-sec{background:#0a0a0a;color:#fff;padding:clamp(72px,10vw,130px) var(--gutR) clamp(72px,10vw,130px) var(--gut)}
.contact-sec .kick{color:#ff4b5c}
.contact-sec .big{font-size:clamp(56px,10vw,170px)}
.contact-sec .cols{margin-top:44px}
.contact-sec .col .ex{color:#9a9a9a;font-size:11px;margin:0}
.contact-sec .pass{margin-top:48px;border-color:#fff}
.contact-sec .pass .stub{background:#fff;color:#000}
.contact-sec .pass .mail a{border-color:#fff}
.contact-sec .pass button{background:#000;color:#fff;border-color:#fff}
.contact-sec .pass .where{color:#9a9a9a}

/* quote on project pages */
.quote{margin:1.4em 0;padding:0 0 0 18px;border-left:3px solid var(--pen)}
.quote p{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(24px,2.4vw,34px);line-height:1.1;margin:0 0 8px;text-transform:none}
.quote cite{font-family:var(--code);font-size:11.5px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}

/* work index */
.work-sec .sub-h{margin-top:0}
.ledger .row{grid-template-columns:3.6em minmax(0,1.6fr) minmax(0,1fr) 8em}
.frames figcaption b{display:none}

/* footer socials */
.ft .plain span{color:var(--mute);font-family:var(--code);font-size:12px}

@media (max-width:980px){
  .sel,.sel.l{grid-column:span 12}
  .sel .ph,.sel.l .ph{aspect-ratio:4/3}
  .eps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .igs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ledger .row{grid-template-columns:3.2em minmax(0,1fr)}
  .ledger .cx{grid-column:2}
}
@media (max-width:820px){
  .selected,.show,.worked,.social{padding-left:calc(var(--gut) + 40px)}
  .selected::before,.show::before,.worked::before,.social::before{left:calc(var(--gut) + 22px)}
  .obj-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logo{height:84px;padding:12px}
  .logo img{max-height:36px}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{filter:invert(1)}}
:root[data-theme="dark"] .logo img{filter:invert(1)}
.thesis .kick{font-family:var(--code);font-weight:400;font-variation-settings:normal;font-size:12px;letter-spacing:.08em;line-height:1.4;max-width:none;margin:0 0 18px;color:var(--pen)}
.thesis p#thesis{max-width:22ch}
.soc .t{font-size:clamp(18px,1.7vw,24px);overflow-wrap:anywhere}
.type-logo{width:60%;max-width:520px;height:auto;filter:invert(1);opacity:.9}
.elective .ph.type{align-items:center;justify-content:center}
.elective .ph.type .type-logo{width:70%}

/* ---------------------------------------------------------------- refinement pass */

/* phone: the notes card tab no longer sits on the first line */
.card{padding-top:40px}

/* selected work: 1 / 2 / 1 / 2 rhythm, bigger images, clear hierarchy */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px 32px}
.feat{display:flex;flex-direction:column;gap:18px;color:inherit;text-decoration:none}
.feat.w{grid-column:1 / -1}
.feat .ph{display:block;overflow:hidden;background:#111;aspect-ratio:4/5}
.feat.w .ph{aspect-ratio:16/8}
.feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.feat:hover .ph img{transform:scale(1.025)}
.feat .meta{display:grid;grid-template-columns:auto 1fr;column-gap:18px;row-gap:6px;align-items:baseline}
.feat .no{grid-row:1 / span 3;color:var(--pen);padding-top:.4em}
.feat .t{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(34px,4.2vw,68px);line-height:.9}
.feat.h .t{font-size:clamp(30px,3.2vw,50px)}
.feat .role{color:var(--mute)}
.feat .line{font-family:var(--text);font-size:clamp(16px,1.25vw,19px);line-height:1.4;max-width:46ch}
@media (max-width:820px){.feat-grid{grid-template-columns:1fr;gap:56px}.feat .ph,.feat.w .ph{aspect-ratio:4/5}.feat.w .ph{aspect-ratio:4/3}}

/* show and tell: a real collection grid, every object on white, complete rows */
.obj-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.obj{width:auto;display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);color:#000}
.obj:hover{transform:translateY(-4px)}
.obj .obj-ph{display:block;aspect-ratio:1;background:#fff}
.obj .obj-ph img,.obj img:not(.fit),.obj img{width:100%;height:100%;object-fit:contain;padding:14px;background:#fff}
.obj .tag{flex:1;display:flex;flex-direction:column;gap:3px;padding:10px 12px 12px;border-top:1px solid #e6e6e6}
.obj .tag b{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:15px;letter-spacing:0;line-height:1.05}
.obj .tag span{font-family:var(--code);font-size:10.5px;letter-spacing:.04em;color:#555;white-space:normal}
.obj .tag .yr{color:#999}
@media (max-width:1180px){.obj-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:620px){.obj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* worked with: artists as quiet text, not a wall of capitals */
.artists.small{font-family:var(--text);font-size:clamp(17px,1.4vw,21px);line-height:1.6;text-transform:none;font-weight:400;max-width:70ch}
.artists.small a{font:inherit;text-transform:none}
.artists.small a::after{content:none}

/* contact: email first, then the feed and profiles */
.contact-sec.r .ct-line{font-family:var(--text);font-size:clamp(18px,1.6vw,22px);max-width:40ch;margin:18px 0 26px;color:#ddd}
.contact-sec.r .mail{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.contact-sec.r .mail a{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(34px,6vw,84px);line-height:1;color:#fff;border-bottom:3px solid var(--pen)}
.contact-sec.r .where{margin-top:14px;color:#999}
.contact-sec.r .ct-feed{margin-top:64px}
.contact-sec.r .igs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.contact-sec.r .igs img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.contact-sec.r .socs{grid-template-columns:repeat(3,minmax(0,1fr));border-top-color:#444;column-gap:24px}
.contact-sec.r .soc{border-bottom-color:#333;color:#fff}
.soc .t{overflow-wrap:normal;word-break:normal;font-size:clamp(17px,1.5vw,22px)}
@media (max-width:820px){.contact-sec.r .igs{grid-template-columns:repeat(3,minmax(0,1fr))}.contact-sec.r .socs{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.soc .t{font-size:16px}}

/* work index: selected / more / full archive / in development */
.el-grid.lg{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 22px}
.elective.lg .t{font-size:clamp(22px,2vw,30px)}
.electives .sub-h{margin-top:0}
.electives .sub-h + .el-grid{margin-bottom:64px}
.chip span{opacity:.55;margin-left:4px}
.ledger .row[hidden]{display:none}
.dev{list-style:none;margin:18px 0 0;padding:0;border-top:1.5px solid var(--ink)}
.dev li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.dev .nm{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 75;text-transform:uppercase;font-size:20px}
.dev .cx{font-family:var(--text);color:var(--mute)}
.dev .st{color:var(--pen);border:1.5px solid var(--pen);padding:2px 7px;font-size:10px;white-space:nowrap}
.lede.small{font-size:17px}
@media (max-width:820px){.el-grid.lg{grid-template-columns:1fr 1fr}.dev li{grid-template-columns:1fr auto}.dev .cx{grid-column:1 / -1;grid-row:2}}

/* project pages: photographs in chapters, uncropped and large */
.chapters{background:#0d0d0d;color:#fff;padding:72px clamp(16px,4vw,56px) 56px}
.chapter + .chapter{margin-top:80px}
.ch-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #333;padding-bottom:12px;margin-bottom:22px}
.ch-head h2{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1;margin:0}
.ch-head .code{color:#888}
.ch-grid{columns:3 300px;column-gap:16px}
.ch-grid.c2{columns:2 340px}
.ch-grid figure{break-inside:avoid;margin:0 0 16px}
.ch-grid a{display:block;cursor:zoom-in}
.ch-grid img{display:block;width:100%;height:auto;background:#1a1a1a}
.ch-grid img.fit{background:#fff;padding:24px}
.ch-grid figcaption{font-family:var(--code);font-size:11px;letter-spacing:.04em;color:#aaa;padding:8px 0 0}
.ch-credits{color:#888;margin-top:40px}

/* lightbox */
dialog.lightbox{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(10,10,10,.97);color:#fff}
dialog.lightbox::backdrop{background:rgba(0,0,0,.85)}
dialog.lightbox figure{margin:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 72px 28px}
dialog.lightbox img{max-width:100%;max-height:calc(100dvh - 140px);object-fit:contain}
dialog.lightbox figcaption{font-family:var(--code);font-size:12px;letter-spacing:.04em;color:#ccc;text-align:center}
dialog.lightbox button{position:absolute;background:none;border:1px solid #555;color:#fff;cursor:pointer;padding:10px 14px;min-width:44px;min-height:44px}
dialog.lightbox .lb-close{top:12px;right:12px}
dialog.lightbox .lb-prev{left:12px;top:50%;transform:translateY(-50%)}
dialog.lightbox .lb-next{right:12px;top:50%;transform:translateY(-50%)}
@media (max-width:620px){dialog.lightbox figure{padding:56px 12px 80px}dialog.lightbox .lb-prev,dialog.lightbox .lb-next{top:auto;bottom:14px;transform:none}}

/* footer and inline links: comfortable tap targets on phones */
@media (pointer:coarse){.ft .plain li a{display:inline-block;padding:6px 0}}
.artists.small a{margin-right:0;white-space:normal}
.artists.small a:not(:last-child)::after{content:none}
.contact-sec.r #copy{font-family:var(--code);font-size:12px;letter-spacing:.06em;text-transform:uppercase;background:transparent;color:#fff;border:1.5px solid #fff;padding:10px 14px;min-height:44px;cursor:pointer}
.contact-sec.r #copy:hover{background:#fff;color:#000}
.dev-sec{position:relative;padding:0 var(--gutR) clamp(56px,8vw,100px) calc(var(--gut) + 40px)}
.dev-sec::before{content:'';position:absolute;top:0;bottom:0;left:calc(var(--gut) + 22px);width:1.5px;background:var(--margin)}
.ledger .ct{white-space:nowrap}
@media (max-width:620px){.ch-grid.c3{columns:2;column-gap:10px}.ch-grid.c3 figure{margin-bottom:10px}.ch-grid img.fit{padding:12px}}
.contact-sec.r .offer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px;border-top:1px solid #333;padding-top:22px}
.contact-sec.r .offer h3{font-family:var(--display);font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;font-size:24px;margin:0 0 6px;color:#fff}
.contact-sec.r .offer p{margin:0 0 6px;color:#ccc;font-family:var(--text);font-size:16px;line-height:1.4}
.contact-sec.r .offer .ex{color:#888;font-size:10.5px;letter-spacing:.04em}
@media (max-width:820px){.contact-sec.r .offer{grid-template-columns:1fr 1fr}}