/* Layout: A's edit-room structure and type, C's black-and-white photos with one color block, B's wordmark. Field photos are tinted in the story; galleries and passion projects show the work in its own colors. */
:root{
  --paper:#F4F4F1;
  --ink:#121212;
  --mute:#6B6B66;
  --rule:#D6D6D0;
  --orange:#FF5A12;
  --green:#00B45A;
  --pink:#FF3C8A;
  --clip-ink:#121212;
  --clip-ink-fg:#FFFFFF;
  --photo-bg:#121212;
  --display:"Archivo", "Arial Narrow", Arial, sans-serif;
  --body:"Archivo", Arial, sans-serif;
  --mono:"DM Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --paper:#111110;
  --ink:#ECECE7;
  --mute:#8E8E88;
  --rule:#2C2C2A;
  --clip-ink:#ECECE7;
  --clip-ink-fg:#111110;
  --photo-bg:#000000;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;font-stretch:100%;transition:background-color .25s,color .25s}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{padding-inline:var(--gutter)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.tc{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mute{color:var(--mute)}

/* wordmark */
.mark{font-family:var(--display);font-weight:860;font-stretch:72%;font-size:22px;letter-spacing:.01em;text-decoration:none;text-transform:uppercase;white-space:nowrap}
.mark .dot{display:inline-block;width:.24em;height:.24em;background:var(--pink);margin:0 .06em;vertical-align:baseline}

.bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;border-bottom:1px solid var(--ink)}
.bar-r{display:flex;align-items:center;gap:clamp(14px,3vw,32px)}
.nav{display:flex;gap:clamp(14px,3vw,32px)}
.nav a{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.theme{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.theme i{width:14px;height:14px;border:1.5px solid var(--ink);background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.theme:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:520px){.theme span{display:none}}

/* tinted photo */
.tint{position:relative;overflow:hidden;background:var(--photo-bg)}
.tint img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.03)}
.tint .blk{position:absolute;mix-blend-mode:multiply}
.blk.p{background:var(--pink)} .blk.o{background:var(--orange)} .blk.g{background:var(--green)}

/* hero */
.hero{padding-block:clamp(28px,6vw,72px) clamp(24px,4vw,48px)}
.name{margin:0;font-family:var(--display);font-weight:860;font-stretch:62%;font-size:clamp(6rem,35vw,34rem);line-height:.78;letter-spacing:-.01em;text-transform:uppercase}
.hero-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:clamp(20px,3vw,36px)}
@media (min-width:860px){.hero-row{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.lede{margin:0;max-width:30ch;font-size:clamp(20px,2.4vw,30px);line-height:1.25;font-stretch:92%;text-wrap:balance}

/* sequence */
.seq{padding-block:28px 12px;border-top:1px solid var(--ink)}
.seq-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-bottom:14px}
.seq-head b{font-weight:500}
.timeline{position:relative;padding-bottom:6px}
.tl-inner{position:relative}
.ruler{position:relative;height:28px;border-bottom:1px solid var(--rule)}
.tick{position:absolute;bottom:0;width:1px;background:var(--ink);height:8px}
.tick.maj{height:14px}
.tick span{position:absolute;bottom:16px;left:3px;white-space:nowrap;font-family:var(--mono);font-size:10px;color:var(--mute)}
.track{display:grid;grid-template-columns:34px 1fr;align-items:stretch;border-bottom:1px solid var(--rule)}
.track-id{font-family:var(--mono);font-size:11px;color:var(--mute);display:flex;align-items:center}
.lane{position:relative;height:64px}
.clip{position:absolute;top:8px;bottom:8px;display:flex;flex-direction:column;justify-content:space-between;padding:7px 9px;text-decoration:none;color:#fff;overflow:hidden;outline-offset:3px;box-shadow:inset -2px 0 0 var(--paper)}
.clip b{font-family:var(--mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip i{font-style:normal;font-family:var(--mono);font-size:10px;opacity:.85}
.c-orange{background:var(--orange)} .c-green{background:var(--green)} .c-pink{background:var(--pink)} .c-ink{background:var(--clip-ink);color:var(--clip-ink-fg)}
.playhead{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--ink);pointer-events:none;transition:left .45s cubic-bezier(.3,.7,.2,1)}
.playhead::before{content:"";position:absolute;top:0;left:-7px;border:6px solid transparent;border-top:9px solid var(--ink)}
.seq-note{margin-top:10px;color:var(--mute)}

/* project rows */
.work{padding-block:clamp(36px,6vw,80px) 0}
.row{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;padding-block:22px 26px;border-top:1px solid var(--ink);text-decoration:none;align-items:start}
.row:last-child{border-bottom:1px solid var(--ink)}
.chip{width:18px;height:40px;margin-top:10px}
.row h3{margin:0;font-family:var(--display);font-weight:820;font-stretch:66%;text-transform:uppercase;font-size:clamp(2.6rem,8.4vw,7.4rem);line-height:.86;letter-spacing:-.005em;text-wrap:balance}
.row .meta{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--mute)}
.row p{grid-column:2;margin:4px 0 0;max-width:56ch;font-size:17px}
.row:hover h3,.row:focus-visible h3{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:8px}

/* passion projects */
.passion{padding-block:clamp(56px,8vw,110px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;border-top:1px solid var(--ink);padding-top:12px;margin-bottom:clamp(20px,3vw,36px)}
.sec-head h2{margin:0;font-family:var(--display);font-weight:860;font-stretch:62%;text-transform:uppercase;font-size:clamp(3rem,10vw,9rem);line-height:.8}
.pp{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px) clamp(16px,2vw,28px)}
@media (min-width:860px){.pp{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp article{display:flex;flex-direction:column;gap:10px}
.pp img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pp h3{margin:4px 0 0;font-family:var(--display);font-weight:820;font-stretch:66%;text-transform:uppercase;font-size:clamp(2.2rem,4vw,3.4rem);line-height:.88}
.pp .meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--mute)}
.pp p{margin:0;font-size:16px;line-height:1.5;max-width:46ch}
.pp .did{display:flex;flex-wrap:wrap;gap:6px}
.pp .did span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border:1px solid var(--ink)}
.photos{margin-top:clamp(36px,5vw,64px)}
.photos .strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:860px){.photos .strip{grid-template-columns:2fr 2fr 1.2fr 2fr}}
.photos img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;min-height:180px}
.merch-ph{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;max-width:62ch}
.merch-ph div{aspect-ratio:4/5;display:flex;align-items:flex-end;padding:12px;background:repeating-linear-gradient(135deg,var(--rule) 0 1px,transparent 1px 12px)}
.players{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.players{grid-template-columns:minmax(0,1fr) minmax(0,.36fr);align-items:stretch}}
.player.vert{aspect-ratio:9/16}
@media (min-width:760px){.player.vert{aspect-ratio:auto;height:100%}}
.plist{border-bottom:1px solid var(--ink)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 24px;align-items:baseline;padding-block:14px;border-top:1px solid var(--rule);text-decoration:none}
.prow h3{margin:0;grid-row:span 2;font-family:var(--display);font-weight:820;font-stretch:66%;text-transform:uppercase;font-size:clamp(2rem,5vw,4rem);line-height:.9}
@media (min-width:760px){.prow{grid-template-columns:minmax(0,1fr) 200px 120px}.prow h3{grid-row:auto}}
.prow:hover h3,.prow:focus-visible h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
/* video player placeholder: real poster frame, player comes in the build */
.player{position:relative;display:block;background:#000;aspect-ratio:16/9;overflow:hidden}
.player img{width:100%;height:100%;object-fit:cover}
.player .play{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:10px;padding:9px 12px 9px 10px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.player .play::before{content:"";width:0;height:0;border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}
/* gallery: the work in its real colors, outside the site's treatment */
.gallery{padding-block:clamp(40px,6vw,80px) 0}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:900px){.gal{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gal button{all:unset;cursor:zoom-in;display:block;position:relative;overflow:hidden;background:#000}
.gal button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.gal img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .3s}
.gal button:hover img{transform:scale(1.03)}
.gal .wide{grid-column:span 2}
.gal .wide img{aspect-ratio:2/1}
.gal .contain img{object-fit:contain;background:#fff}
.lb{position:fixed;inset:0;z-index:80;background:rgba(8,8,8,.96);display:grid;grid-template-rows:auto 1fr auto;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.lb-top{display:flex;justify-content:space-between;align-items:center;color:#cfcfca;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.lb button{all:unset;cursor:pointer;color:#fff;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding:10px 12px}
.lb button:focus-visible{outline:2px solid #fff}
.lb-stage{display:flex;align-items:center;justify-content:center;min-height:0}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain}
.lb-cap{color:#cfcfca;font-family:var(--mono);font-size:11px;text-align:center;min-height:1.4em}
.lb-nav{display:flex;justify-content:center;gap:8px}
.ph-intro{max-width:56ch;margin:0 0 clamp(24px,4vw,40px);font-size:clamp(18px,1.8vw,21px);line-height:1.45}
.feature{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:clamp(24px,4vw,40px);align-items:end}
@media (min-width:900px){.feature{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px}}
.feature .feat-img{all:unset;cursor:zoom-in;display:block}
.feature .feat-img:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.feature img{width:100%;aspect-ratio:5/4;object-fit:cover}
.feature h3{margin:0 0 10px;font-family:var(--display);font-weight:860;font-stretch:62%;text-transform:uppercase;font-size:clamp(2.6rem,6vw,5rem);line-height:.85}
.feature p{margin:0;max-width:46ch}
.gal-titled button{background:transparent}
.gal-titled .gt{display:block;padding-top:6px;font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}

.cs-title.long{font-size:clamp(3rem,9.5vw,9.5rem);line-height:.84;max-width:14ch;text-wrap:balance}
.week{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-block:22px 26px}
@media (min-width:760px){.week{grid-template-columns:repeat(5,minmax(0,1fr))}}
.day{display:flex;flex-direction:column;gap:6px;min-width:0}
.day .blk2{padding:10px 10px 12px;color:#fff;min-height:84px;display:flex;flex-direction:column;justify-content:space-between}
.day .blk2 b{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.day .blk2 strong{font-family:var(--display);font-weight:820;font-stretch:70%;text-transform:uppercase;font-size:24px;line-height:.95}
.day p{margin:0;font-size:14.5px;line-height:1.45;color:var(--ink)}
.pipe{list-style:none;margin:22px 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.pipe li{border-top:4px solid var(--ink);padding:10px 0 4px;display:flex;flex-direction:column;gap:4px;min-width:0}
.pipe li.t-text{border-color:var(--clip-ink)} .pipe li.t-audio{border-color:var(--pink)} .pipe li.t-pic{border-color:var(--green)} .pipe li.t-motion{border-color:var(--orange)}
.pipe .n{font-family:var(--mono);font-size:11px;color:var(--mute)}
.pipe b{font-family:var(--display);font-weight:820;font-stretch:72%;text-transform:uppercase;font-size:22px;line-height:1}
.pipe p{margin:0;font-size:14.5px;line-height:1.45}
.pipe .tool{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--mute)}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--mute)}
.key i{display:inline-block;width:14px;height:4px;vertical-align:middle;margin-right:6px}
.verts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.verts .player{aspect-ratio:9/16}
.verts .player .play{left:8px;bottom:8px;padding:7px 9px 7px 8px;font-size:10px}
@media (max-width:520px){.verts .player .play span{display:none}}
.facts2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 32px}
.facts2 div{border-top:1px solid var(--ink);padding-block:14px 8px}
.facts2 .n{font-family:var(--display);font-weight:860;font-stretch:62%;font-size:clamp(3rem,7vw,5.6rem);line-height:.85;display:block}
.facts2 small{display:block;font-size:15px;line-height:1.4;margin-top:8px;max-width:30ch}
.track.t2 .lane{height:56px}
.tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tools span{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;padding:3px 7px;border:1px solid var(--ink)}
.pp-entry{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-block:clamp(36px,5vw,64px) 0;border-top:1px solid var(--ink);margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){.pp-entry{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}}
.pp-entry h2{margin:0 0 10px;font-family:var(--display);font-weight:860;font-stretch:62%;text-transform:uppercase;font-size:clamp(3rem,8vw,7rem);line-height:.82}
.pp-entry p{margin:0 0 1em;max-width:52ch}
.pp-entry dl{margin:16px 0 0}
.pp-entry dl div{display:grid;grid-template-columns:90px 1fr;gap:12px;padding-block:8px;border-top:1px solid var(--rule)}
.pp-entry dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding-top:3px}
.pp-entry dd{margin:0;font-size:15px}

.foot{border-top:1px solid var(--ink);padding-block:28px 120px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:clamp(56px,8vw,110px)}
.foot .big{font-family:var(--display);font-weight:860;font-stretch:62%;font-size:clamp(3rem,10vw,8rem);line-height:.8;text-transform:uppercase;margin:0}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{padding-block:6px;border-bottom:1px solid var(--rule)}

/* case study */
.cs-head{padding-block:clamp(28px,5vw,64px) 28px}
.cs-head .mono{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;color:var(--mute)}
.cs-head .mono .chip{width:12px;height:12px;margin:0}
.cs-title{margin:14px 0 0;font-family:var(--display);font-weight:860;font-stretch:62%;text-transform:uppercase;font-size:clamp(4rem,15vw,15rem);line-height:.8;letter-spacing:-.01em}
.dek{max-width:34ch;margin:22px 0 0;font-size:clamp(20px,2.3vw,28px);line-height:1.28;font-stretch:92%}
.hero-photo{aspect-ratio:16/9}
@media (max-width:700px){.hero-photo{aspect-ratio:4/5}}
figure{margin:0}
figcaption{font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--mute);margin-top:8px;max-width:70ch}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 32px;padding-block:20px 8px;border-bottom:1px solid var(--ink)}
.info dl{margin:0}
.info div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding-block:10px;border-top:1px solid var(--rule)}
.info dt{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--mute);padding-top:3px}
.info dd{margin:0;font-size:16px;line-height:1.45}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-block:clamp(32px,5vw,64px) 0}
.sec .side{color:var(--mute)}
.sec .side b{color:var(--ink);font-weight:500}
.sec h2{margin:0 0 6px;font-family:var(--display);font-weight:820;font-stretch:68%;text-transform:uppercase;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:.9;text-wrap:balance}
.sec p{margin:0 0 1em;max-width:62ch}
@media (min-width:900px){
  .sec{grid-template-columns:220px minmax(0,1fr);gap:40px}
  .sec .side{position:sticky;top:20px;align-self:start}
}
.livery-row{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:end}
@media (min-width:900px){.livery-row{grid-template-columns:minmax(0,62ch) 300px;gap:40px}}
.livery-sm{background:#0b0b0b;padding:10px;max-width:300px}
.grid4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid4 .tint{aspect-ratio:3/4}
@media (min-width:900px){.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.crew-photo{aspect-ratio:4/3}
@media (max-width:700px){.crew-photo{aspect-ratio:4/5}}
.quote{margin:0;padding-block:clamp(32px,5vw,64px);font-family:var(--display);font-weight:780;font-stretch:66%;text-transform:uppercase;font-size:clamp(2.4rem,7vw,6.2rem);line-height:1.02;max-width:18ch;text-wrap:balance}
.quote .hl{background:var(--pink);color:#121212;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.strip2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.strip2 figure{background:#121212;padding:8px 8px 10px}
.strip2 .tint{aspect-ratio:16/9}
.strip2 figcaption{color:#bdbdb6;margin-top:8px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.results{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 32px;margin-top:8px}
.results div{border-top:1px solid var(--ink);padding-block:14px 8px}
.results .n{font-family:var(--display);font-weight:860;font-stretch:62%;font-size:clamp(3.4rem,8vw,6.4rem);line-height:.85;display:block}
.results small{display:block;font-size:15px;line-height:1.4;margin-top:8px;max-width:32ch}
.win{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:end;margin-top:clamp(36px,5vw,64px)}
@media (min-width:900px){.win{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px}}
.win img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:60% 40%}
.next{display:block;margin-top:clamp(48px,8vw,96px);padding-block:22px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);text-decoration:none}
.next h3{margin:6px 0 0;font-family:var(--display);font-weight:820;font-stretch:66%;text-transform:uppercase;font-size:clamp(2.2rem,7vw,6rem);line-height:.88}

/* about */
.ab-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 0}
@media (min-width:900px){.ab-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}}
.portrait{aspect-ratio:1/1}
.career .lane{height:44px}
.career .clip{top:6px;bottom:6px;padding:4px 6px}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 28px;margin-top:18px}
.legend > div{display:grid;grid-template-columns:14px minmax(0,1fr);gap:10px;padding-block:9px;border-top:1px solid var(--rule);font-size:15px;line-height:1.4}
.legend > div > div{display:block;min-width:0}
.legend i{width:14px;height:14px;margin-top:3px}
.legend b{font-weight:600}
.legend span{display:block;color:var(--mute);font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.offclock{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:8px}
.offclock div{border-top:1px solid var(--ink);padding-top:10px;font-size:16px}
.offclock h4{margin:0 0 4px;font-family:var(--mono);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ===== readability pass ===== */
body{line-height:1.6}
@media (min-width:760px){body{font-size:19px}}
.mono,.nav a{font-size:13px}
.theme{font-size:12px}
figcaption{font-family:var(--body);font-size:14.5px;letter-spacing:0;line-height:1.45;margin-top:10px}
.strip2 figcaption{font-family:var(--mono);font-size:12.5px}
.info dt,.pp-entry dt{font-size:12.5px}
.info dd{font-size:17px}
.pp-entry dd{font-size:16px}
.tools span,.pp .did span{font-size:11.5px}
.gal-titled .gt{font-size:12.5px}
.tick span{font-size:11px}
.clip b{font-size:12px}.clip i{font-size:11px}
.clip.nob b{visibility:hidden}.clip.noi i{visibility:hidden}
.legend span{font-size:12px}
.pipe .tool{font-size:11.5px}.pipe .n{font-size:12px}
.day p,.pipe p{font-size:15.5px}
.results small,.facts2 small{font-size:16px}
.lb-cap{font-size:13.5px}
.player .play{font-size:12px}
.verts .player .play{font-size:11px}
/* headings shrink to fit instead of breaking a word */
.cs-title,.row h3,.next h3,.prow h3,.sec h2,.pp-entry h2,.feature h3,.sec-head h2,.name,.foot .big{overflow-wrap:normal;word-break:normal;min-width:0}
.row{grid-template-columns:auto minmax(0,1fr)}
.cs-title.long{max-width:none}
/* sections: a full-width rule, the label on it, then one reading column */
.sec{display:block;padding-block:clamp(44px,6vw,76px) 0}
.sec .side{position:static;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 14px;padding-top:12px;border-top:1px solid var(--ink);color:var(--mute)}
.sec .side b{color:var(--ink);font-weight:500}
.sec .side span::before{content:"/";margin-right:12px;color:var(--rule)}
.sec h2{margin:0 0 14px;max-width:22ch}
.sec p{max-width:64ch}
.livery-row{display:block}
.livery-row figure{margin-top:10px;max-width:420px}
.livery-sm{max-width:420px}
.merch{margin-top:22px;max-width:760px}
.merch-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.merch-row img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#E6E6E1}
.duo{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:760px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.duo .player .play{left:10px;bottom:10px}
@media (max-width:520px){.duo .player .play span{display:none}}
.seq .legend{margin-top:14px}
.ruler{overflow:hidden}
.timeline{overflow-x:clip}
html,body{overflow-x:clip}
@media (max-width:640px){
  .bar{flex-wrap:wrap;row-gap:10px}
  .bar-r{width:100%;justify-content:space-between;gap:10px}
  .nav{gap:0;justify-content:space-between;flex:1}
  .nav a{font-size:12.5px;letter-spacing:.04em}
}

/* ===== layout v3: left-aligned reading column, story index in the right margin ===== */
.ruler{height:38px}
.sec{display:block;border-top:1px solid var(--ink);margin-top:clamp(48px,6vw,88px);padding-block:14px 0}
.sec .side{border-top:0;padding-top:0;margin:0;display:block;position:static}
.sec .side .lab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:14px;color:var(--mute)}
.sec .side .lab b{color:var(--ink);font-weight:500}
.sec .side h2{margin:0 0 16px;color:var(--ink)}
@media (min-width:1100px){
  .sec.has-rail{display:grid;grid-template-columns:minmax(0,1fr) 230px;grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,120px);row-gap:0;align-items:start}
  .sec.has-rail > .side,.sec.has-rail > .sbody{grid-column:1}
  .sec.has-rail > }
.gal.posts img{aspect-ratio:4/5}
.gal.posts .wide img{aspect-ratio:8/5}
.merch-row{align-items:end;gap:clamp(12px,3vw,40px)}
.merch-row img{aspect-ratio:auto;height:auto;object-fit:contain;background:none;filter:drop-shadow(0 18px 22px rgba(0,0,0,.16))}
:root[data-theme="dark"] .merch-row img{filter:drop-shadow(0 0 1px rgba(255,255,255,.4)) drop-shadow(0 18px 28px rgba(0,0,0,.6))}
.seq-note{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:14.5px}
.nav a{padding-block:8px}
.info{border-bottom:0}
.gallery > p.mono{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:14.5px}

.gal.photos img{aspect-ratio:3/4}
.gal.photos .wide img{aspect-ratio:3/2}
.row .out{grid-column:2;margin:6px 0 0;max-width:60ch;font-size:16.5px;line-height:1.45}
.row .out b{display:inline-block;margin-right:10px;color:var(--mute);font-weight:400}
.reveal .tint .blk{transform:scaleX(0);transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1) .15s}
.reveal .tint.in .blk{transform:none}

/* ===== WordPress build ===== */
/* Images carry width and height attributes (no layout shift while loading); let CSS size them. */
img{height:auto}
/* WordPress wraps the page in .wp-site-blocks and adds flow-layout spacing; the design sets its own. */
.wp-site-blocks,.wp-site-blocks > *,.site-main > *{margin-block:0}
.wp-site-blocks{padding:0}
.site-main{display:block}
header.wp-block-template-part,footer.wp-block-template-part{margin:0}
.skip-link.screen-reader-text:focus{background:var(--paper);color:var(--ink);padding:10px 14px;z-index:100}
.wrap > figure,.wrap > section,.wrap > div,.wrap > blockquote,.wrap > a,.wrap > h1,.wrap > p{margin-inline:0}
/* Section heads: the label drops under the heading when there isn't room beside it (Gallery on phones) */
.sec-head{flex-wrap:wrap}
.sec-head h2{flex:none;max-width:100%}
/* Case study pages: the Next link sits directly above the footer */
.gg-case .foot{margin-top:0;border-top:0}
/* Video players: poster first, the video loads only when someone presses play */
.player .play{text-decoration:none;cursor:pointer}
.player .play:hover{background:var(--ink);color:var(--paper)}
.player .play[aria-disabled="true"]{cursor:default}
.player .play[aria-disabled="true"]:hover{background:var(--paper);color:var(--ink)}
.player .play[aria-disabled="true"]::before{display:none}
.player video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:block}
/* ===== v1.1: phones, navigation, hover ===== */
/* Timeline labels: tighter lines so the name and timecode fit inside the block */
.clip b,.clip i{line-height:1.2}
.track.t2 .lane{height:60px}
.tap-hint{display:none}
/* Phones: the home and passion sequences become jump markers. Every block gets the same arrow
   instead of a name that only fits in the long ones; tapping scrolls to that project. */
@media (max-width:759px){
  .clip[data-jump] b,.clip[data-jump] i{display:none}
  .clip[data-jump]{justify-content:flex-end}
  .clip[data-jump]::after{content:"↓";font-family:var(--mono);font-size:15px;line-height:1}
  .tap-hint{display:inline}
  p.tap-hint{display:block}
}
[id^="work-"],[id^="pp-"]{scroll-margin-top:16px}

/* Case study switcher under the header */
.cs-nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;padding-block:14px 0;color:var(--mute)}
.cs-nav .lbl{color:var(--ink);font-weight:500}
.cs-nav ol{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0;padding:0}
.cs-nav a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--mute);padding-block:4px;transition:color .2s}
.cs-nav a i{width:10px;height:10px;transition:transform .2s}
.cs-nav a .n{opacity:.7}
.cs-nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.cs-nav + .cs-head,.wrap:has(.cs-nav) + .wrap .cs-head{padding-top:clamp(20px,4vw,48px)}

/* End of a case study: a big Next with an arrow, then Previous and All work */
.pager{margin-top:clamp(48px,8vw,96px)}
.pager .next{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.next-txt{min-width:0}
.next-go{display:grid;place-items:center;width:clamp(48px,7vw,84px);aspect-ratio:1;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:clamp(22px,3vw,34px);transition:background-color .2s,color .2s,padding .25s}
.pager-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:14px;border-bottom:1px solid var(--ink)}
.pager-sub a{text-decoration:none;padding-block:4px}
.pager-sub .all{margin-left:auto}
.gg-case .pager .next{border-bottom:1px solid var(--rule)}

/* Merch sits closer to the paragraph above it */
.merch{margin-top:6px}

/* Big multi-line titles: no underline (it ran through the next line, and stuck after a tap on phones).
   On hover the title nudges right instead; taps get no gray box. */
.row:hover h3,.row:focus-visible h3,.prow:hover h3,.prow:focus-visible h3{text-decoration:none}
.row h3,.next h3{transition:transform .25s}
.row:focus-visible h3,.next:focus-visible h3{transform:translateX(10px)}
a.row,a.prow,a.next,.clip,.cs-nav a,.pager-sub a{-webkit-tap-highlight-color:transparent}

/* Phones: project rows and passion rows show they're links (desktop has the hover instead) */
.row .go{display:none}
@media (max-width:759px){
  .row .go{grid-column:2;display:inline-flex;align-items:center;gap:10px;justify-self:start;margin-top:10px;color:var(--ink)}
  .row .go i{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);color:var(--paper);font-style:normal;font-size:16px;transition:background-color .15s,color .15s}
  .row:active .go i{background:var(--pink);color:#121212}
  .prow h3::after{content:"→";font-family:var(--mono);font-weight:400;font-size:.5em;margin-left:.35em;vertical-align:.25em}
  .prow:active h3{color:var(--mute)}
}

/* Hover (mouse and trackpad) and keyboard focus */
a,.theme{transition:color .2s,background-color .2s}
.mark .dot{transition:transform .25s}
.row .chip{transition:transform .25s;transform-origin:50% 0}
.clip{transition:filter .2s}
.foot a,.pager-sub a,.sbody a,.dek a,.gg-page a{text-decoration-thickness:1px;text-underline-offset:3px}
@media (hover:hover){
  .nav a:hover{text-decoration:underline;text-underline-offset:4px}
  .mark:hover .dot{transform:scale(1.6)}
  .theme:hover{color:var(--ink)}
  .row:hover .chip{transform:scaleY(1.5)}
  .clip:hover{filter:brightness(1.12) saturate(1.1)}
  .cs-nav a:hover{color:var(--ink)}
  .cs-nav a:hover i{transform:scale(1.4)}
  .row:hover h3,.next:hover h3{transform:translateX(10px)}
  .prow:hover h3{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
  .next:hover .next-go{background:var(--pink);color:#121212;padding-left:16px}
  .foot a:hover,.pager-sub a:hover,.sbody a:hover,.dek a:hover,.gg-page a:hover{background:var(--pink);color:#121212;text-decoration:none}
  .player:hover .play:not([aria-disabled]){background:var(--ink);color:var(--paper)}
  .prow:hover .mono{color:var(--ink)}
}
.nav a:focus-visible,.cs-nav a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.next:focus-visible .next-go{background:var(--pink);color:#121212}
.row:focus-visible .chip{transform:scaleY(1.5)}
@media (prefers-reduced-motion:reduce){.next:hover .next-go{padding-left:0}}

/* Generic pages (anything outside the designed pages) */
.gg-page{padding-block:clamp(28px,5vw,64px) 0}
.gg-page .cs-title{margin:0 0 clamp(20px,3vw,36px)}
.gg-page .wp-block-post-content{max-width:64ch}
.gg-page .wp-block-post-content > *{margin-block:0 1em}
.gg-404 p{max-width:46ch}