/* ============================================================
   CHIGUO — BAUHAUS DESIGN BIBLE
   Dessau, 1919–1933. Form follows function; ornament is absent.

   FIVE COLOURS. No gradients, no shadows, no blur, no rounding
   (except true circles). One typeface: Jost*, a Futura descendant
   drawn in direct homage to the Bauhaus geometric sans.

   THE CODE — colour and shape carry MEANING, never decoration:
     ● RED CIRCLE    designer · imagination · UP
     ■ BLUE SQUARE   engineer · grounded    · DOWN
     ▲ YELLOW TRI    craft    · made by hand
   Every rule below serves that code.
   ============================================================ */
:root{
  --cell:clamp(48px,4vw,58px);
  --cap:126px;                   /* rail caption track: fits a two-line CN role */                    /* card model band; the WebGL layer matches it */
  --film-h:clamp(180px,30vh,320px); /* media height in the overlay strips */                    /* card model band; the WebGL layer matches it */   /* shared width for right-edge control cells */
  --paper:#EDE6D8; --paper-2:#E3DACA; --ink:#14110F;
  --red:#D93A28; --blue:#1B4E8C; --yellow:#F2C230;
  --rule:2px; --rule-thick:4px;
  --gut:clamp(16px,2.4vw,32px);
  --font:'Jost',ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
::selection{background:var(--yellow);color:var(--ink)}

/* language visibility ------------------------------------------------ */
html[data-lang="en"] [data-lang="cn"],html[data-lang="cn"] [data-lang="en"]{display:none!important}

/* ---- primitives: the alphabet -------------------------------------- */
.bh-dot{display:block;border-radius:50%;background:var(--red)}
.bh-sq{display:block;background:var(--blue)}
.bh-tri{display:block;width:0;height:0;background:none;border-left:var(--s,18px) solid transparent;border-right:var(--s,18px) solid transparent;border-bottom:calc(var(--s,18px)*1.6) solid var(--yellow)}
.bh-half{display:block;background:var(--red);border-radius:999px 999px 0 0}
.bh-arc{display:block;background:var(--blue);border-radius:100% 0 0 0}

/* ---- masthead ------------------------------------------------------ */
.bh-mast{position:fixed;inset:0 0 auto 0;z-index:80;display:flex;align-items:stretch;justify-content:space-between;height:56px;background:var(--paper);border-bottom:var(--rule) solid var(--ink)}
.bh-mast__mark{display:flex;align-items:center;gap:10px;padding:0 18px;border-right:var(--rule) solid var(--ink)}
.bh-mast__mark .bh-dot{width:14px;height:14px}
.bh-mast__mark .bh-sq{width:14px;height:14px}
.bh-mast__mark .bh-tri{--s:8px}
.bh-mast__name{font-weight:700;font-size:15px;letter-spacing:.22em;text-transform:uppercase;margin-left:6px}
.bh-mast__ver{display:flex;align-items:center;padding:0 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);opacity:.55;border-right:var(--rule) solid var(--ink)}
.bh-mast__spacer{flex:1}
.bh-lang{display:flex;border-left:var(--rule) solid var(--ink)}
.bh-lang button{appearance:none;border:0;border-left:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.14em;width:var(--cell);padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bh-lang button:first-child{border-left:0}
.bh-lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.bh-lang button:hover[aria-pressed="false"]{background:var(--yellow)}

/* ---- shared section frame ------------------------------------------ */
/* The fixed masthead is 56px; whatever sits at document top needs that offset.
   It used to live on .bh-hero, but the projects section moved above the hero. */
main{padding-top:56px}
.bh-sec{position:relative;z-index:2;background:var(--paper);border-bottom:var(--rule) solid var(--ink)}
.bh-sec[id],[id]{scroll-margin-top:58px}
.bh-label{display:flex;align-items:center;gap:12px;font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:14px var(--gut);border-bottom:var(--rule) solid var(--ink)}
.bh-label .bh-dot,.bh-label .bh-sq{width:10px;height:10px}
.bh-label .bh-tri{--s:6px}
.bh-label b{font-weight:700}
.bh-label span{opacity:.5;font-weight:500}

/* ---- hero -----------------------------------------------------------
   Left column is identity (type over the turning figure). Right column is
   the WORK, above the fold — that was the whole point of the rebuild. */
.bh-hero-zone{position:relative}
.bh-hero{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:minmax(0,1fr) auto;height:calc(100vh - 56px);border-bottom:var(--rule) solid var(--ink)}
.bh-hero__left{grid-row:1;grid-column:1;display:flex;flex-direction:column;min-height:0;border-right:var(--rule) solid var(--ink);padding:clamp(20px,3vh,38px) var(--gut) 0}
.bh-hero__eyebrow{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-bottom:clamp(12px,2vh,22px)}
.bh-hero__eyebrow .bh-dot{width:9px;height:9px}
.bh-hero h1{margin:0;font-weight:900;font-size:clamp(34px,min(5.4vw,9vh),86px);line-height:.86;letter-spacing:-.035em;text-transform:uppercase}
.bh-hero h1 .r{color:var(--red)}
.bh-hero h1 .b{color:var(--blue)}
.bh-hero__fig{position:relative;flex:1;min-height:clamp(180px,26vh,340px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin-top:clamp(10px,2vh,20px)}
.bh-hero__fig canvas{position:relative;z-index:2;width:auto;height:100%;max-width:100%;aspect-ratio:660/880;object-fit:contain;object-position:center bottom}
.bh-hero__fig .bh-dot{position:absolute;z-index:1;width:104%;aspect-ratio:1;bottom:-40%;left:-26%;background:var(--blue);border-radius:50%}
.bh-hero__stack{grid-row:1;grid-column:2;display:flex;flex-direction:column;min-height:0}
.bh-hero__foot{grid-row:2;grid-column:1/-1;display:block;border-top:var(--rule) solid var(--ink)}
.bh-hero__bio{padding:13px var(--gut);border-bottom:var(--rule) solid var(--ink)}
.bh-hero__bio p{margin:0;flex:1;min-width:0;font-size:clamp(13px,1vw,16px);line-height:1.55}
.bh-hero__bio em{font-style:normal;font-weight:700;background:none;padding:0;box-shadow:inset 0 -2px 0 var(--ink)}
.bh-hero__scroll{display:grid;grid-template-columns:1fr 1fr}
.bh-hero__scroll a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px var(--gut);font-weight:700;font-size:clamp(12px,1.1vw,15px);letter-spacing:.06em;text-transform:uppercase}
.bh-hero__scroll a:first-child{border-right:var(--rule) solid var(--ink)}
.bh-hero__scroll a:hover{background:var(--yellow);color:var(--ink)}
.bh-hero__scroll .k{display:flex;align-items:center;gap:12px}
.bh-hero__scroll .bh-dot,.bh-hero__scroll .bh-sq{width:14px;height:14px}
.bh-hero__scroll .n{font-size:22px;line-height:1}

/* ---- project rail ---------------------------------------------------
   Cards are real HTML and always readable; the single WebGL canvas is
   pinned over the slot band and pans with scrollLeft, so each model sits
   on its own card without paying for one context per project. */
.bh-strip__bar{display:flex;align-items:stretch;gap:12px;padding:0 0 0 var(--gut);min-height:52px;border-bottom:var(--rule) solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;flex-wrap:wrap}
.bh-strip__bar .bh-dot,.bh-strip__bar .bh-sq{width:10px;height:10px;align-self:center}
.bh-strip__bar>b,.bh-strip__bar>span:not([class]){align-self:center}
.bh-strip__bar b{font-weight:700}
.bh-strip__bar>span:not([class]){opacity:.5;font-weight:500;letter-spacing:.1em;text-transform:none}
.bh-strip__nav{display:flex;gap:0;margin-left:auto;align-self:stretch}
.bh-strip__nav button{appearance:none;border:0;border-left:var(--rule) solid var(--ink);background:var(--paper);color:var(--ink);font-family:var(--font);font-size:0;font-weight:700;width:var(--cell);align-self:stretch;cursor:pointer;display:flex;align-items:center;justify-content:center}
.bh-strip__nav button:hover{background:var(--yellow)}
.bh-rail{position:relative;flex:1;min-height:0;overflow:hidden}
.bh-rail__gl{position:absolute;z-index:1;top:0;left:0;width:100%;height:calc(100% - var(--cap));pointer-events:none}
.bh-rail__track{position:relative;z-index:2;height:100%;display:flex;column-gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.bh-rail__track::-webkit-scrollbar{display:none}
.bh-rcard{flex:0 0 clamp(190px,20vw,260px);scroll-snap-align:start;display:grid;grid-template-rows:minmax(0,1fr) var(--cap);border-right:var(--rule) solid var(--ink);background:none;appearance:none;padding:0;font-family:var(--font);color:inherit;text-align:left;cursor:pointer}
.bh-rcard__slot{position:relative;border-bottom:var(--rule) solid var(--ink)}
.bh-rcard__num{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--ink);color:var(--paper);font-weight:700;font-size:12px}
.bh-rcard__mark{position:absolute;top:0;right:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-left:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.bh-rcard__mark .bh-dot,.bh-rcard__mark .bh-sq{width:13px;height:13px}
.bh-rcard__mark .bh-tri{--s:7px}
.bh-rcard__txt{padding:11px var(--gut) 12px;display:flex;flex-direction:column;gap:3px;min-height:0}
.bh-rcard__txt h3{margin:0;font-weight:700;font-size:clamp(15px,1.35vw,22px);line-height:1.14;letter-spacing:-.012em}
.bh-rcard__sub{font-size:13px;line-height:1.4;opacity:.62}
.bh-rcard__role{margin-top:6px;padding-top:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.bh-rcard:hover .bh-rcard__txt{background:var(--yellow)}
.bh-rcard:focus-visible{outline:var(--rule-thick) solid var(--blue);outline-offset:-4px}

/* ---- manifesto ------------------------------------------------------ */
.bh-mani{position:relative;z-index:2;background:var(--paper);display:grid;grid-template-columns:1fr 2fr;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.bh-mani__art{position:relative;border-right:var(--rule) solid var(--ink);min-height:clamp(190px,24vw,300px);overflow:hidden}
.bh-mani__body{padding:clamp(24px,3.4vw,48px) var(--gut);display:flex;flex-direction:column;justify-content:center}
.bh-mani__k{display:flex;align-items:center;gap:12px;min-height:46px;font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;margin-bottom:clamp(14px,2vw,22px);padding:12px 0;border-bottom:var(--rule) solid var(--ink);color:#5b554c}
.bh-mani__k .bh-dot,.bh-mani__k .bh-sq{width:9px;height:9px}
.bh-mani__k .n{margin-left:auto;font-size:18px;line-height:1;letter-spacing:0}
.bh-mani__k:hover{color:var(--ink);background:var(--yellow)}
.bh-mani h2{margin:0 0 clamp(12px,1.6vw,18px);font-weight:900;font-size:clamp(28px,4vw,58px);line-height:1.02;letter-spacing:-.03em;text-transform:uppercase}
.bh-mani p{margin:0;font-size:clamp(14px,1.1vw,16px);line-height:1.66;max-width:56ch}
.bh-mani .cta{display:block;margin-top:10px;font-weight:700}
.bh-mani--up .bh-mani__art{background:var(--red)}
.bh-mani--up h2{color:var(--red)}
.bh-mani--up .bh-mani__art .bh-half{position:absolute;left:50%;bottom:0;width:64%;aspect-ratio:2/1;transform:translateX(-50%);background:var(--paper)}
.bh-mani--down{grid-template-columns:2fr 1fr}
.bh-mani--down .bh-mani__body{grid-column:1;grid-row:1}
.bh-mani--down .bh-mani__art{grid-column:2;grid-row:1;background:var(--blue);border-right:0;border-left:var(--rule) solid var(--ink)}
.bh-mani--down h2{color:var(--blue)}
.bh-mani--down .bh-mani__art .bh-sq{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);background:var(--paper)}

/* ---- project grid --------------------------------------------------- */
.bh-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.bh-card{position:relative;display:flex;flex-direction:column;border-right:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink);background:var(--paper);cursor:pointer;text-align:left;font-family:var(--font);appearance:none;padding:0;color:inherit}
.bh-card:nth-child(3n){border-right:0}
.bh-card__shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);border-bottom:var(--rule) solid var(--ink)}
.bh-card__shot img{width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.bh-card__num{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--ink);color:var(--paper);font-weight:700;font-size:13px;letter-spacing:.04em}
.bh-card__mark{position:absolute;top:0;right:0;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--paper);border-left:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.bh-card__mark .bh-dot,.bh-card__mark .bh-sq{width:16px;height:16px}
.bh-card__mark .bh-tri{--s:9px}
.bh-card__txt{padding:16px var(--gut) 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.bh-card__txt h3{margin:0;font-weight:700;font-size:clamp(16px,1.5vw,22px);line-height:1.14;letter-spacing:-.012em}
.bh-card__sub{font-size:13px;line-height:1.45;opacity:.62}
.bh-card__role{margin-top:auto;padding-top:12px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.bh-card:hover .bh-card__shot img{filter:saturate(1)}
.bh-card:hover .bh-card__txt{background:var(--yellow)}
.bh-card:focus-visible{outline:var(--rule-thick) solid var(--blue);outline-offset:-4px}

/* geometric stand-in where no photograph exists — a composition, never a
   grey placeholder. Two primitives, one bled off the edge, per Bauhaus
   poster practice. */
.bh-card__shot--art{position:relative;overflow:hidden}
.bh-card__shot--art.art-dot{background:var(--red)}
.bh-card__shot--art.art-sq{background:var(--blue)}
.bh-card__shot--art.art-tri{background:var(--yellow)}
.bh-card__shot--art .a1{position:absolute;right:-14%;bottom:-18%;width:66%;aspect-ratio:1;background:var(--paper);border-radius:0}
.bh-card__shot--art.art-dot .a1{border-radius:50%}
.bh-card__shot--art .a2{position:absolute;left:12%;top:14%;width:26%;aspect-ratio:1}
.bh-card__shot--art .a2.bh-tri{width:0;aspect-ratio:auto;--s:26px}
.bh-ov__art{position:relative;height:clamp(220px,42vh,420px);overflow:hidden}
.bh-ov__art.art-dot{background:var(--red)}
.bh-ov__art.art-sq{background:var(--blue)}
.bh-ov__art.art-tri{background:var(--yellow)}
.bh-ov__art .a1{position:absolute;right:-10%;bottom:-14%;width:62%;aspect-ratio:1;background:var(--paper)}
.bh-ov__art.art-dot .a1{border-radius:50%}
.bh-ov__art .a2{position:absolute;left:14%;top:16%;width:22%;aspect-ratio:1}
.bh-ov__art .a2.bh-tri{width:0;aspect-ratio:auto;--s:40px}

/* ---- resume --------------------------------------------------------- */
.bh-res{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.bh-res__col{border-right:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.bh-res__col:last-child{border-right:0}
.bh-res__h{display:flex;align-items:center;gap:10px;padding:14px var(--gut);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.bh-res__h .bh-dot,.bh-res__h .bh-sq{width:10px;height:10px}
.bh-res__h .bh-tri{--s:6px}
.bh-item{display:grid;grid-template-columns:auto 1fr;gap:0 16px;padding:18px var(--gut);border-bottom:var(--rule) solid var(--ink)}
.bh-item:last-child{border-bottom:0}
.bh-item__when{font-size:11px;font-weight:700;letter-spacing:.1em;padding-top:3px;white-space:nowrap;color:#5b554c}
.bh-item__what b{display:block;font-weight:700;font-size:clamp(15px,1.35vw,18px);line-height:1.22}
.bh-item__what span{display:block;margin-top:4px;font-size:13px;line-height:1.55;opacity:.66}
.bh-item__what ul{margin:8px 0 0;padding-left:15px}
.bh-item__what li{font-size:13px;line-height:1.6;opacity:.78;margin-bottom:3px}
.bh-item a{font-weight:700;border-bottom:var(--rule) solid var(--red)}

/* ---- footer --------------------------------------------------------- */
.bh-foot{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}
.bh-foot__q{grid-column:1/4;padding:clamp(30px,5vw,64px) var(--gut);border-right:var(--rule) solid var(--ink)}
.bh-foot__q p{margin:0 0 clamp(18px,2.6vw,30px);font-weight:700;font-size:clamp(19px,2vw,28px);line-height:1.1;letter-spacing:-.02em;max-width:22ch}
.bh-foot__mail{display:inline-flex;align-items:center;gap:14px;font-weight:700;font-size:clamp(14px,1.4vw,19px);border-bottom:var(--rule-thick) solid var(--red);padding-bottom:4px}
.bh-foot__mail:hover{background:var(--yellow);color:var(--ink)}
.bh-foot__art{position:relative;overflow:hidden;background:var(--yellow);min-height:200px}
.bh-foot__art .bh-arc{position:absolute;right:0;bottom:0;width:78%;aspect-ratio:1}
.bh-foot__art .bh-dot{position:absolute;left:14%;top:14%;width:30%;aspect-ratio:1}
.bh-colophon{display:flex;flex-wrap:wrap;gap:8px 26px;padding:14px var(--gut);border-top:var(--rule) solid var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* ---- project overlay ------------------------------------------------ */
.bh-ov{position:fixed;inset:0;z-index:120;display:none;background:var(--paper)}
.bh-ov.is-on{display:grid;grid-template-rows:56px 1fr}
.bh-ov__bar{display:flex;align-items:stretch;justify-content:space-between;border-bottom:var(--rule) solid var(--ink)}
.bh-ov__bar .t{display:flex;align-items:center;gap:12px;padding:0 var(--gut);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.bh-ov__bar .t .bh-dot,.bh-ov__bar .t .bh-sq{width:11px;height:11px}
.bh-ov__bar .t .bh-tri{--s:7px}
.bh-ov__x{appearance:none;border:0;border-left:var(--rule) solid var(--ink);background:var(--paper);font-family:var(--font);font-size:20px;font-weight:500;width:56px;cursor:pointer;color:var(--ink)}
.bh-ov__x:hover{background:var(--red);color:var(--paper)}
.bh-ov__body{display:block;overflow-y:auto}
.bh-ov__banner{position:relative;border-bottom:var(--rule) solid var(--ink);background:var(--paper-2)}
.bh-ov__banner img{width:100%;height:clamp(220px,42vh,420px);object-fit:cover;display:block}
.bh-ov__banner[hidden]{display:none}
.bh-ov__txt{padding:clamp(24px,3vw,44px) var(--gut)}
.bh-ov__txt .role{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:5px 10px;margin-bottom:16px}
.bh-ov__txt h2{margin:0 0 6px;font-weight:900;font-size:clamp(26px,3.2vw,46px);line-height:.98;letter-spacing:-.03em;text-transform:uppercase}
.bh-ov__txt .sub{font-size:13px;letter-spacing:.04em;opacity:.6;margin-bottom:20px}
.bh-ov__txt p{margin:0 0 16px;font-size:clamp(14px,1.05vw,16px);line-height:1.7;max-width:74ch}

/* filmstrip — the same horizontal mechanic as the hero rail, so the whole site
   has ONE way to move sideways through things. */
.bh-film{border-top:var(--rule) solid var(--ink)}
.bh-film[hidden]{display:none}
.bh-film__bar{display:flex;align-items:center;gap:12px;padding:12px var(--gut);border-bottom:var(--rule) solid var(--ink);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.bh-film__bar .bh-sq{width:10px;height:10px}
.bh-film__bar #ovCount{opacity:.5;font-weight:500;letter-spacing:.1em;text-transform:none}
.bh-film__bar .bh-strip__nav{margin-left:auto}
.bh-film__track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
.bh-film__track::-webkit-scrollbar{display:none}
.bh-film__track figure{flex:0 0 clamp(280px,42vw,520px);scroll-snap-align:start;margin:0;display:flex;flex-direction:column;border-right:var(--rule) solid var(--ink)}
.bh-film__track img{width:100%;height:var(--film-h);object-fit:cover;display:block;border-bottom:var(--rule) solid var(--ink)}
.bh-film__track figcaption{padding:10px var(--gut);font-size:13px;line-height:1.5;opacity:.72;flex:1}
.bh-ov__txt .go{display:inline-flex;align-items:center;gap:12px;margin-top:8px;padding:14px 22px;background:var(--blue);color:var(--paper);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.bh-ov__txt .go:hover{background:var(--red);color:var(--paper)}

/* ---- responsive ----------------------------------------------------- */
@media (max-width:1000px){
  .bh-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto}
  .bh-hero__stack,.bh-rail{min-width:0}
  .bh-hero__left{grid-row:1;grid-column:1;border-right:0;border-bottom:var(--rule) solid var(--ink);min-height:58vh}
  .bh-hero__stack{grid-row:2;grid-column:1;min-height:70vh}
  .bh-hero__foot{grid-row:3;grid-column:1}
  .bh-hero__fig{min-height:0;height:auto}
  .bh-hero__fig canvas{width:min(72%,460px,calc(52vh * 660 / 880));height:auto;max-height:none}
  .bh-hero__bio{border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-rcard{flex-basis:clamp(170px,30vw,220px)}
  .bh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bh-card:nth-child(3n){border-right:var(--rule) solid var(--ink)}
  .bh-card:nth-child(2n){border-right:0}
}
@media (max-width:680px){
  .bh-hero__left{grid-row:1;grid-column:1;border-right:0;border-bottom:var(--rule) solid var(--ink);min-height:72vh}
  .bh-hero__fig{min-height:0;height:auto}
  .bh-hero__fig canvas{width:min(86%,380px,calc(56vh * 660 / 880));height:auto;max-height:none}
  .bh-hero__stack{grid-row:2;grid-column:1;min-height:74vh}
  .bh-hero__foot{grid-row:3;grid-column:1}
  .bh-hero__bio{border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-rcard{flex-basis:76vw}
  .bh-strip__bar{font-size:10px;letter-spacing:.12em}
  .bh-strip__bar>span:not([class]){display:none}
  .bh-mast__ver{display:none}
  .bh-hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;height:auto;min-height:0}
  .bh-mani{grid-template-columns:1fr}
  .bh-mani__art{border-right:0;border-bottom:var(--rule) solid var(--ink);min-height:150px}
  .bh-mani--down{grid-template-columns:1fr}
  .bh-mani--down .bh-mani__art{grid-column:1;grid-row:1;border-left:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-mani--down .bh-mani__body{grid-column:1;grid-row:2}
  .bh-grid{grid-template-columns:1fr}
  .bh-card,.bh-card:nth-child(3n),.bh-card:nth-child(2n){border-right:0}
  .bh-res{grid-template-columns:1fr}
  .bh-res__col{border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-foot{grid-template-columns:1fr}
  .bh-foot__q{grid-column:1/-1;border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-foot__art{min-height:150px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* case-study beats — numbered, ruled, one idea per band. The number column is
   the Bauhaus device: order made visible instead of decorated. */
.bh-beat{display:grid;grid-template-columns:auto 1fr;gap:0 18px;padding:20px 0;border-top:var(--rule) solid var(--ink)}
.bh-beat:first-child{margin-top:8px}
.bh-beat__k{font-weight:900;font-size:15px;letter-spacing:.02em;color:var(--mark,var(--blue));padding-top:2px}
.bh-beat__b h3{margin:0 0 7px;font-weight:700;font-size:clamp(15px,1.35vw,19px);line-height:1.2;letter-spacing:-.01em}
.bh-beat__b p{margin:0;font-size:clamp(13px,1.02vw,15px);line-height:1.7}
#ovStudy{margin-bottom:24px}

/* ---- résumé download band ------------------------------------------
   Two equal cells, hard-ruled, no ornament. The mark block carries the
   colour code (■ engineer / ● designer) so the pair reads as one system
   rather than two buttons. This is the first thing a recruiter needs, so
   it sits above the résumé itself, at full width. */
.bh-dl{display:grid;grid-template-columns:1fr 1fr;border-bottom:var(--rule) solid var(--ink)}
.bh-dl__card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 18px;padding:0;border-right:var(--rule) solid var(--ink);background:var(--paper)}
.bh-dl__card:last-child{border-right:0}
.bh-dl__mark{display:flex;align-items:center;justify-content:center;width:clamp(56px,6vw,76px);align-self:stretch;border-right:var(--rule) solid var(--ink)}
.bh-dl__card--en .bh-dl__mark{background:var(--blue)}
.bh-dl__card--cn .bh-dl__mark{background:var(--red)}
.bh-dl__mark .bh-sq,.bh-dl__mark .bh-dot{width:20px;height:20px;background:var(--paper)}
.bh-dl__body{display:flex;flex-direction:column;gap:3px;padding:18px 0}
.bh-dl__body b{font-weight:700;font-size:clamp(16px,1.6vw,22px);line-height:1.1;letter-spacing:-.015em}
.bh-dl__body em{font-style:normal;font-size:12px;line-height:1.4;opacity:.62}
.bh-dl__act{padding:0 var(--gut);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.bh-dl__card:hover{background:var(--yellow)}
.bh-dl__card:hover .bh-dl__body em{opacity:.8}
.bh-dl__card:focus-visible{outline:var(--rule-thick) solid var(--ink);outline-offset:-4px}

/* ---- recruiter one-liner ------------------------------------------- */
.bh-pitch{border:var(--rule) solid var(--ink);padding:16px 18px;margin-bottom:clamp(20px,3vw,32px);max-width:64ch}
.bh-pitch__k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:8px}
.bh-pitch p{margin:0 0 12px;font-size:13px;line-height:1.62;font-weight:400;max-width:none}
.bh-pitch__copy{appearance:none;border:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 16px;cursor:pointer}
.bh-pitch__copy:hover{background:var(--red)}
.bh-pitch__copy.is-done{background:var(--blue)}

/* ---- masthead nav --------------------------------------------------- */
.bh-nav{display:flex}
.bh-nav a{display:flex;align-items:center;padding:0 18px;border-right:var(--rule) solid var(--ink);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase}
.bh-nav a:hover{background:var(--yellow);color:var(--ink)}

@media (max-width:680px){
  .bh-dl{grid-template-columns:1fr}
  .bh-dl__card{border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .bh-dl__card:last-child{border-bottom:0}
  .bh-nav a{padding:0 12px;font-size:10.5px;letter-spacing:.1em}
}

/* Chinese headlines need room: the glyph box is full-height, so the tight
   Latin line-height collides. Applies to every display size on the page. */
html[data-lang="cn"] .bh-mani h2,html[data-lang="cn"] .bh-hero h1,
html[data-lang="cn"] .bh-ov__txt h2{line-height:1.14;letter-spacing:0}
html[data-lang="cn"] .bh-foot__q p{line-height:1.32}

/* role block — {project type} above {my title}, always two lines so the
   pairing reads the same on every card. Type is quieter; the title is the
   claim, so it carries the weight. */
.bh-rcard__role,.bh-card__role{display:flex;flex-direction:column;gap:2px}
.bh-rcard__role .k,.bh-card__role .k{font-weight:500;opacity:.55}
.bh-rcard__role .t,.bh-card__role .t{font-weight:700}
.bh-ov__txt .role{display:flex;flex-direction:column;gap:2px;align-items:flex-start;line-height:1.3}
.bh-ov__txt .role .k{font-weight:500;opacity:.7}
.bh-ov__txt .role .t{font-weight:700}

/* the hero bio IS the forwarding line now — one copy affordance, up top,
   where a recruiter meets it instead of hunting the footer for it. */
.bh-hero__bio{display:flex;flex-direction:row;align-items:center;gap:16px}
.bh-hero__bio .bh-pitch__copy{flex:0 0 auto}

/* short laptops: the foot row must not eat the rail. Bio and CTA share a line
   and the type steps down, instead of the hero growing past the fold. */
@media (max-height:700px) and (min-width:681px){
  .bh-hero__bio{padding:9px var(--gut);gap:12px}
  .bh-hero__bio p{font-size:11.5px;line-height:1.48}
  .bh-hero__bio .bh-pitch__copy{padding:7px 12px;font-size:10px}
  .bh-hero__scroll a{padding:10px var(--gut);font-size:12px}
  .bh-hero__eyebrow{margin-bottom:8px}
}
@media (max-width:680px){
  .bh-film__track figure{flex-basis:84vw}
  .bh-ov__banner img{height:clamp(180px,32vh,260px)}
}

/* rail arrows — solid triangles from the page's shape alphabet (● ■ ▲), drawn
   with borders so they stay crisp at any size and inherit the hover colour. */
.bh-strip__nav button::before{content:"";display:block;width:0;height:0;
  border-top:8px solid transparent;border-bottom:8px solid transparent}
.bh-strip__nav button[data-rail-step="-1"]::before,
.bh-strip__nav button[data-film-step="-1"]::before,
.bh-strip__nav button[data-clip-step="-1"]::before{border-right:11px solid var(--ink)}
.bh-strip__nav button[data-rail-step="1"]::before,
.bh-strip__nav button[data-film-step="1"]::before,
.bh-strip__nav button[data-clip-step="1"]::before{border-left:11px solid var(--ink)}
.bh-strip__nav button:hover{background:var(--ink)}
.bh-strip__nav button:hover[data-rail-step="-1"]::before,
.bh-strip__nav button:hover[data-film-step="-1"]::before,
.bh-strip__nav button:hover[data-clip-step="-1"]::before{border-right-color:var(--yellow)}
.bh-strip__nav button:hover[data-rail-step="1"]::before,
.bh-strip__nav button:hover[data-film-step="1"]::before,
.bh-strip__nav button:hover[data-clip-step="1"]::before{border-left-color:var(--yellow)}
.bh-film__bar{align-items:stretch;padding:0 0 0 var(--gut);min-height:48px}
.bh-film__bar .bh-sq,.bh-film__bar>b,.bh-film__bar>span:not([class]){align-self:center}
.bh-film__bar .bh-strip__nav{align-self:stretch}

/* ---- social row -----------------------------------------------------
   Flush cells divided by single rules — the same cell grammar as the
   masthead language pair and the rail arrows. Mark above label, so the
   row reads without hovering. */
.bh-social{display:flex;border-top:var(--rule) solid var(--ink)}
.bh-social__cell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:16px 8px;border-left:var(--rule) solid var(--ink)}
.bh-social__cell:first-child{border-left:0}
.bh-social__cell svg{width:22px;height:22px;display:block;stroke:var(--ink);stroke-width:1.75;fill:none}
.bh-social__cell span{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.bh-social__cell:hover{background:var(--ink);color:var(--paper)}
.bh-social__cell:hover svg{stroke:var(--yellow)}
.bh-social__cell:focus-visible{outline:var(--rule-thick) solid var(--blue);outline-offset:-4px}
@media (max-width:680px){
  .bh-social__cell{padding:13px 4px;gap:5px}
  .bh-social__cell svg{width:19px;height:19px}
  .bh-social__cell span{font-size:8.5px}
  .bh-social__cell span{font-size:9px;letter-spacing:.1em}
}

/* video in the overlay — same box as an image so the banner and filmstrip do not
   reflow when an entry is a clip. */
.bh-ov__banner video,.bh-ov__banner img{width:100%;height:clamp(220px,42vh,420px);object-fit:cover;display:block}
.bh-film__track video{width:100%;height:var(--film-h);object-fit:cover;display:block;border-bottom:var(--rule) solid var(--ink);background:var(--ink)}
@media (max-width:680px){
  .bh-ov__banner video{height:clamp(180px,32vh,260px)}
}

/* tall character art in a wide band: crop from the TOP, not the centre. A 2:3
   figure in a 4:1 box cannot be contained without an 83% void, and a centred
   cover would keep only the skirt. */
.bh-ov__banner img.is-portrait{object-fit:cover;object-position:center 6%}
.bh-ov__banner:has(img.is-portrait){height:clamp(360px,50vh,480px)}
.bh-ov__banner:has(img.is-portrait) img{height:100%}
.bh-film__track img.is-portrait{object-fit:cover;object-position:center 10%}
.bh-card__shot img.is-portrait,.bh-rcard__slot img.is-portrait{object-fit:cover;object-position:center 8%}

/* highlight list — one capability per ruled row, marked with the square from the
   shape alphabet. Scannable in a way a prose case study is not. */
.bh-hl{list-style:none;margin:18px 0 4px;padding:0;border-top:var(--rule) solid var(--ink)}
.bh-hl li{position:relative;padding:12px 0 12px 26px;border-bottom:var(--rule) solid var(--ink);font-size:clamp(14px,1.05vw,16px);font-weight:700;line-height:1.4}
.bh-hl li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;background:var(--mark,var(--blue))}

/* leave-a-note modal — the same ruled cells as the rest of the page, no rounding,
   no shadow. Composes a mail to wanli@thenakedgamedev.com on send. */
.bh-pitch__copy--note{background:var(--yellow);color:var(--ink)}
.bh-pitch__copy--note:hover{background:var(--ink);color:var(--paper)}
.bh-note{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:var(--gut);background:rgba(20,17,15,.62)}
.bh-note[hidden]{display:none}
.bh-note__box{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--paper);border:var(--rule) solid var(--ink)}
.bh-note__bar{display:flex;align-items:stretch;justify-content:space-between;border-bottom:var(--rule) solid var(--ink)}
.bh-note__bar .t{display:flex;align-items:center;gap:12px;padding:0 var(--gut);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.bh-note__bar .t .bh-dot{width:11px;height:11px}
.bh-note__body{padding:clamp(18px,2.4vw,28px) var(--gut)}
.bh-note__f{display:block;margin-bottom:16px}
.bh-note__f>span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:7px}
.bh-note__f input,.bh-note__f textarea{width:100%;font-family:var(--font);font-size:14px;color:var(--ink);background:var(--paper-2);border:var(--rule) solid var(--ink);border-radius:0;padding:11px 12px;outline:none;resize:vertical}
.bh-note__f input:focus,.bh-note__f textarea:focus{background:var(--paper);outline:var(--rule) solid var(--blue);outline-offset:-4px}
.bh-note__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:var(--rule) solid var(--ink);padding-top:16px}
.bh-note__to{font-size:12px;letter-spacing:.04em;opacity:.6}
.bh-note__foot .go{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;background:var(--blue);color:var(--paper);border:0;font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.bh-note__foot .go:hover{background:var(--red)}

/* second destination button — outlined so the primary link stays primary */
.bh-ov__txt .go[hidden]{display:none}
.bh-ov__txt .go--alt{margin-left:10px;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 var(--rule) var(--ink)}
.bh-ov__txt .go--alt:hover{background:var(--ink);color:var(--paper)}

.bh-pitch__copy--note{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:2px;padding:12px 18px;line-height:1.2;min-height:46px}
.bh-pitch__copy--note .l1{font-size:11px;letter-spacing:.16em}
.bh-pitch__copy--note .l2{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:lowercase;opacity:.75}

/* clip strip — a paused clip carries a play mark (the shape alphabet's triangle),
   so "click another one" is visible rather than implied. One plays at a time. */
.bh-film__track figure{position:relative}
.bh-film__track figure:has(video){cursor:pointer}
.bh-film__track figure:has(video)::after{content:"";position:absolute;left:50%;top:calc(var(--film-h) / 2);transform:translate(-50%,-50%);
  width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:24px solid var(--paper);
  filter:drop-shadow(0 0 10px rgba(20,17,15,.55));pointer-events:none;transition:opacity .2s ease}
.bh-film__track figure.is-playing:has(video)::after{opacity:0}

/* One owner per boundary, by adjacency rather than by element: a manifesto draws
   its top rule only when it is first in its section. When anything precedes it,
   that element's own bottom rule is the boundary. */
* + .bh-mani{border-top:0}
.bh-mani:last-child{border-bottom:0}
/* filler cells complete the grid's last row so its closing rule runs full width */
.bh-card--fill{border-right:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink);background:var(--paper)}
.bh-card--fill:last-child{border-right:0}

/* per-clip fullscreen — a corner cell, separate from the play/pause tap so the
   two gestures never compete */
.bh-film__full{position:absolute;top:0;right:0;z-index:3;width:44px;height:44px;
  appearance:none;border:0;border-left:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink);
  background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1;cursor:pointer}
.bh-film__full:hover{background:var(--yellow)}
.bh-film__full:focus-visible{outline:var(--rule-thick) solid var(--blue);outline-offset:-4px}

/* full-size still viewer — the same ruled, square language as the overlay */
.bh-lb{position:fixed;inset:0;z-index:160;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:0;padding:clamp(12px,3vw,40px);background:rgba(20,17,15,.9)}
.bh-lb.is-on{display:flex}
.bh-lb img{max-width:100%;max-height:82vh;object-fit:contain;border:var(--rule) solid var(--paper);background:var(--ink)}
.bh-lb__cap{margin-top:14px;max-width:74ch;font-size:13px;line-height:1.5;color:var(--paper);text-align:center}
.bh-lb__x{position:absolute;top:0;right:0;width:56px;height:56px;appearance:none;border:0;
  border-left:var(--rule) solid var(--paper);border-bottom:var(--rule) solid var(--paper);
  background:transparent;color:var(--paper);font-family:var(--font);font-size:20px;cursor:pointer}
.bh-lb__x:hover{background:var(--red)}

.bh-lb video{max-width:100%;max-height:82vh;border:var(--rule) solid var(--paper);background:var(--ink)}
.bh-lb img[hidden],.bh-lb video[hidden]{display:none}