/* ==========================================================================
   Lee Schneidman — portfolio, v2.1 "editorial" (2026-09-14)
   The recruiter brief: 40–60 seconds. Three skills in a fixed bar, a grid of
   the work in the first frame, one sentence per project, a drawer for the rest.

   Design language (from the print / poetry world, not web-app conventions):
   · a 12-column grid that everything sits on — heads, spreads, the mosaic;
   · every project is a numbered spread under a hairline: 01.1, 01.2 …;
   · three faces: Frank Ruhl Libre for what is said, Inter for what is read,
     JetBrains Mono for what is counted (numbers, labels, meta);
   · controls are typographic — an underline and an arrow, never a button;
   · colour is the poem's: one station per skill, the stream as a hairline
     at the opening and the close, everything else paper and ink.
   Previous build: _pre-editorial-*.bak · full v1: _backups/site_2026-09-14_1315/.
   ========================================================================== */

:root{
  /* colour — every value is a poem colour (data/colors.js) */
  --panel:   #FBFAF8;
  --paper:   #F4F1EA;
  --mat:     #EEEAE2;
  --ink:     #14120F;
  --ink-2:   #4A4540;
  --ink-3:   #7A7268;
  --line:    #D9D3C8;
  --accent:  #A62B2B;          /* דקירתם */
  --accent-on-dark:#C88840;    /* כהלך */
  --colour-ink:#FBF6F2;
  --dark:    #1A0E0E;
  --dark-ink:#EFE9E3;

  --w-haomnam:#3D1818;  --w-od:#9090A0;       --w-yavou:#D4A843;  --w-yamim:#C8B89A;
  --w-slicha:#4169A8;   --w-hesed:#B5A895;    --w-sade:#2D5C3A;   --w-holech:#C88840;
  --w-yelatef:#743D28;  --w-shibolim:#8B7340; --w-timtak:#7A2030; --w-matar:#6B5B8A;

  --st-product: var(--w-timtak);   /* ותמתק — wine   */
  --st-motion:  var(--w-matar);    /* מטר — violet   */
  --st-image:   var(--w-holech);   /* כהלך — amber   */
  --ground-motion: color-mix(in oklab, var(--w-matar) 12%, var(--dark));
  --ground-image:  color-mix(in oklab, var(--w-yelatef) 18%, var(--dark));

  --paper-rgb:239,233,227;
  --panel-rgb:251,250,248;
  --ink-rgb:20,18,15;
  --dark-rgb:26,14,14;

  /* type */
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --serif:"Frank Ruhl Libre",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --display-face: var(--serif);
  --label-face: var(--mono);
  --label-track: .12em;

  --t-hero:    clamp(2.2rem, 4.55vw, 4.5rem);
  --t-display: clamp(2.6rem, 1.4rem + 3.8vw, 5rem);
  --t-title:   clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem);
  --t-md:      clamp(1.5rem, 1rem + 1.6vw, 2.35rem);
  --t-stand:   clamp(1.15rem, 1rem + .55vw, 1.45rem);
  --t-lead:    clamp(1.12rem, 1rem + .5vw, 1.4rem);
  --t-body:    clamp(1rem, .95rem + .28vw, 1.1rem);
  --t-small:   .9375rem;
  --t-label:   .74rem;

  /* space + grid */
  --pad:    clamp(1.25rem, 4.5vw, 5rem);
  --gutter: max(var(--pad), calc((100vw - 124rem) / 2));
  --gap:    clamp(.9rem, 1.6vw, 1.6rem);
  --r:      4px;
  --chrome: 3.4rem;

  --ease: cubic-bezier(.65,.02,.16,1);
  --fast: .22s;
  --slow: .62s;
}

@font-face{font-family:"Meir Ariel"; src:url("img/meir_ariel.ttf") format("truetype"); font-display:swap}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--chrome)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0; background:var(--panel); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-body); line-height:1.6;
  -webkit-font-smoothing:antialiased; text-wrap:pretty}
body.is-locked{overflow:hidden}
img,video,iframe{display:block; max-width:100%}
a{color:inherit}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--station, var(--accent)); outline-offset:3px}
::selection{background:var(--station-surface, var(--accent)); color:var(--colour-ink)}
.he{font-family:var(--serif); letter-spacing:0 !important; font-weight:500}

/* the grid everything sits on */
.grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gap)}

/* labels: one voice for everything counted or named */
.kicker, .slab, mark, .cap, .tab, .tile__cap, .lib__h, .more, .go, .more__kicker, .more__body h3,
.more__body figcaption, .colophon, .proj__n, .head__num, .meta__m{
  font-family:var(--label-face); font-weight:400; font-size:var(--t-label);
  letter-spacing:var(--label-track); text-transform:uppercase}
.slab{display:inline-block; padding:.32em .62em .28em; background:var(--station-surface, var(--ink)); color:var(--colour-ink)}
mark{background:var(--station-surface, var(--ink)); color:var(--colour-ink); padding:.2em .5em .18em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone}

/* ---------- the chrome ---------- */
.chrome{position:fixed; inset:0 0 auto 0; z-index:40; height:var(--chrome);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem;
  padding:0 var(--gutter);
  background:rgba(var(--panel-rgb),.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease)}
html.on-dark .chrome{background:rgba(var(--dark-rgb),.84); color:var(--dark-ink); border-color:rgba(var(--paper-rgb),.14)}
.chrome__name{font-family:var(--display-face); font-size:1.2rem; font-weight:500; text-decoration:none; justify-self:start; white-space:nowrap}
.tabs{display:flex; gap:.15rem; margin:0; padding:0; list-style:none}
.tab{display:inline-block; padding:.42rem .7rem; border-radius:2px; text-decoration:none; color:var(--ink-2); white-space:nowrap;
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease)}
html.on-dark .tab{color:rgba(var(--paper-rgb),.78)}
.tab:hover{color:var(--ink)} html.on-dark .tab:hover{color:var(--dark-ink)}
.tab[aria-current="true"]{background:var(--station-surface, var(--ink)); color:var(--colour-ink)}
.tab .short{display:none}
.chrome__right{justify-self:end}
.chrome__right .tab{color:var(--ink-3)}

/* ---------- sections ---------- */
.section{position:relative; padding:clamp(4rem,9vh,7.5rem) var(--gutter)}
.section--dark{background:var(--ground-image); color:var(--dark-ink); --accent:var(--accent-on-dark)}
.section--motion{background:var(--ground-motion); color:var(--dark-ink); --accent:var(--accent-on-dark)}
.section--dark, .section--motion{--line:rgba(var(--paper-rgb),.16); --ink-3:rgba(var(--paper-rgb),.6); --ink-2:rgba(var(--paper-rgb),.82); --mat:rgba(var(--paper-rgb),.07)}
.section--contact{background:var(--paper)}

/* the head: a hairline, the number, the name, the standfirst */
.head{align-items:end; padding-top:1.4rem; border-top:1px solid var(--station-line, var(--line)); margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.head__l{grid-column:1 / 8}
.head__num{display:block; color:var(--station-ink, var(--ink-3)); margin-bottom:1.2rem}
.head__t{margin:0; font-family:var(--display-face); font-size:var(--t-display); line-height:.98; font-weight:500; letter-spacing:-.012em}
.head__blurb{grid-column:8 / 13; margin:0; font-family:var(--serif); font-size:var(--t-stand); line-height:1.45; color:var(--ink); max-width:38ch}
.section--dark .head__blurb, .section--motion .head__blurb{color:var(--dark-ink)}

/* ---------- the opening ---------- */
.hero{padding-top:calc(var(--chrome) + clamp(1.6rem,4vh,3rem)); padding-bottom:clamp(1.5rem,3vh,2.5rem)}
.hero__text{margin-bottom:clamp(1.2rem,3vh,2rem)}
.kicker{display:flex; flex-wrap:wrap; align-items:baseline; gap:.75em; margin:0 0 1rem; color:var(--ink-3)}
.hero .kicker{margin-bottom:.9rem}
.display{margin:0; font-family:var(--display-face); font-size:var(--t-hero); line-height:1.05; font-weight:500; letter-spacing:-.012em; text-wrap:nowrap}

/* the mosaic — eight tiles, one size, a caption each: the opening is an index, not a collage */
.mosaic{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.3rem var(--gap); align-items:start}
.tile{display:block; text-decoration:none; color:inherit; min-width:0}
.tile__img{display:block; aspect-ratio:4/3; max-height:calc((100vh - 25rem) / 2); overflow:hidden; border-radius:var(--r); background:var(--mat)}
.tile__img img{width:100%; height:100%; object-fit:cover; object-position:var(--pos, 50% 50%); transition:transform var(--slow) var(--ease)}
.tile:hover .tile__img img{transform:scale(1.03)}
.tile__cap{display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; margin-top:.55rem; min-width:0;
  font-size:.68rem; color:var(--ink-3); line-height:1.3}
.tile__cap b{display:flex; align-items:center; gap:.45em; font-weight:400; color:var(--ink-2); white-space:nowrap; flex:none}
.tile__cap b::before{content:""; width:.5em; height:.5em; border-radius:50%; background:var(--tl); flex:none}
.tile__cap i{font-style:normal; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tile[data-st="product"]{--tl:var(--st-product)} .tile[data-st="image"]{--tl:var(--st-image)} .tile[data-st="motion"]{--tl:var(--st-motion)}
.tile__cap .he{font-size:1.15em}

/* the stream — the poem's colours in poem order, a hairline at the opening and the close */
.stream{height:3px; margin-top:clamp(1.6rem,4vh,2.6rem);
  background:linear-gradient(to right,
    var(--w-haomnam) 0 8.33%, var(--w-od) 8.33% 16.66%, var(--w-yavou) 16.66% 25%, var(--w-yamim) 25% 33.33%,
    var(--w-slicha) 33.33% 41.66%, var(--w-hesed) 41.66% 50%, var(--w-sade) 50% 58.33%, var(--w-holech) 58.33% 66.66%,
    var(--w-yelatef) 66.66% 75%, var(--w-shibolim) 75% 83.33%, var(--w-timtak) 83.33% 91.66%, var(--w-matar) 91.66% 100%)}
.stream--top{margin:0 0 clamp(2.5rem,6vh,4rem)}

/* crop marks — gesture 04, on the opening and the ending only */
.printmarks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
.printmarks path{fill:none; stroke:currentColor; stroke-width:1; opacity:.4; vector-effect:non-scaling-stroke}

/* ---------- projects: numbered spreads under a hairline ---------- */
.proj{position:relative; align-items:start; row-gap:.9rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
  margin-bottom:clamp(3.5rem,8vh,6.5rem)}
.proj:last-child{margin-bottom:0}
.proj__n{grid-column:1 / -1; color:var(--station-ink, var(--ink-3))}
.proj__media{grid-column:1 / 9; min-width:0}
.proj__text{grid-column:9 / 13; min-width:0; display:flex; flex-direction:column; gap:.55rem;
  position:sticky; top:calc(var(--chrome) + 1.5rem)}
.proj--flip .proj__media{grid-column:5 / 13; grid-row:2}
.proj--flip .proj__text{grid-column:1 / 5; grid-row:2; padding-inline-end:var(--gap)}
.proj__media > img, .proj__media > video, .proj__media > iframe{width:100%; border-radius:var(--r); background:transparent}
.proj__media--mat{background:var(--mat); border-radius:var(--r); padding:clamp(.5rem,1vw,1rem)}
.proj__media--mat > img, .proj__media--mat > iframe{border-radius:2px}
.proj__cap{grid-column:1 / 9; margin:0}
.proj--flip .proj__cap{grid-column:5 / 13}
.proj__t{margin:.4rem 0 0; font-family:var(--display-face); font-size:var(--t-title); line-height:1.1; font-weight:500; letter-spacing:0}
.proj__k{margin:0; font-size:var(--t-small); color:var(--ink-3)}
.proj__s{margin:.5rem 0 0; font-family:var(--serif); font-size:var(--t-lead); line-height:1.4; color:var(--ink); max-width:30ch}
.section--dark .proj__s, .section--motion .proj__s{color:var(--dark-ink)}
.meta{display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem 1rem; margin:.4rem 0 0; line-height:1.6}
.meta__m{color:var(--ink-3); letter-spacing:.06em; text-transform:none}
.actions{display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin:.7rem 0 0}
.more, .go{display:inline-flex; align-items:baseline; gap:.5em; padding:0; border:0; background:none; cursor:pointer;
  color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.4em;
  text-decoration-color:var(--station-ink, var(--accent)); transition:color var(--fast) var(--ease)}
.more:hover, .go:hover{color:var(--station-ink, var(--accent))}
.go{color:var(--ink-3); text-decoration-color:currentColor}
.section--dark .more, .section--motion .more{color:var(--dark-ink)}
.cap{margin:.6rem 0 0; color:var(--ink-3); font-size:.7rem}

/* the flagship: photo · clip · text */
.proj--flag .proj__media--a{grid-column:1 / 4}
.proj--flag .proj__media--b{grid-column:4 / 9}
.proj--flag .proj__media > img, .proj--flag .proj__media > video{height:100%; object-fit:cover}
.proj--flag .proj__media--a, .proj--flag .proj__media--b{height:min(60vh, 34rem); overflow:hidden; border-radius:var(--r)}
.proj--flag .proj__media > img, .proj--flag .proj__media > video{aspect-ratio:auto; width:100%; height:100%}
.frame{aspect-ratio:16/10; width:100%; border:0}

/* the redline — gesture 06, once in the whole site */
.redline{position:relative; display:inline-block; padding:0 .06em}
.redline__ring{position:absolute; left:-.42em; top:-.3em; width:calc(100% + .84em); height:calc(100% + .52em); pointer-events:none; overflow:visible}
.redline__ring path{fill:none; stroke:var(--station-ink, var(--accent)); stroke-width:1.5; stroke-linecap:round; vector-effect:non-scaling-stroke}

/* the poster wall — three 9:16 prints, never cropped */
.posterwall{--ph:min(64vh, 42rem); display:grid; grid-template-columns:repeat(3, minmax(0, calc(var(--ph) * 9 / 16))); justify-content:start; gap:6px}
.posterwall .pw{overflow:hidden; border-radius:var(--r); background:var(--dark) center/cover no-repeat}
.posterwall video{width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; display:block}
.bigquote{font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,1rem + 1.4vw,2rem); line-height:1.3; margin:.4em 0 0}

/* the typeface specimen and the 2×2 media grid */
.media4{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.media4 img, .specimen{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r)}
.specimen{background:var(--paper); color:#14120F; --ink-3:#7A7268; display:flex; flex-direction:column; justify-content:center; gap:.2rem; padding:.8rem 1.2rem; text-align:start; overflow:hidden}
.specimen__abc{margin:0; font-family:"Meir Ariel", var(--serif); font-size:clamp(1.5rem, .6rem + 1.9vw, 2.7rem); line-height:1.25; word-spacing:.14em}
.specimen__name{margin:0; font-family:"Meir Ariel", var(--serif); font-size:clamp(1rem, .6rem + .9vw, 1.4rem); color:var(--ink-3)}

/* motion: the stage and the library */
.proj--reel .proj__media{grid-column:1 / 10}
.proj--reel .proj__text{grid-column:10 / 13}
.stage video{width:100%; aspect-ratio:16/9; background:var(--dark); border-radius:var(--r)}
.library{padding-top:1.4rem; border-top:1px solid var(--line); margin-top:clamp(3rem,7vh,5rem)}
.lib__h{grid-column:1 / -1; display:flex; align-items:baseline; gap:.9rem; margin:0 0 1.1rem; color:var(--ink-2)}
.lib__hn{color:var(--station-ink, var(--ink-3))}
.lib__hint{color:var(--ink-3)}
.lib{grid-column:1 / -1; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1.2rem var(--gap); margin:0; padding:0; list-style:none}
.lib__item{display:block; width:100%; padding:0; border:0; background:none; text-align:start; cursor:pointer}
.lib__item img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--r); background:rgba(var(--paper-rgb),.06);
  outline:2px solid transparent; outline-offset:3px; transition:outline-color var(--fast) var(--ease), opacity var(--fast) var(--ease)}
.lib__item:hover img{opacity:.85}
.lib__item.is-on img{outline-color:var(--station-ink, var(--accent))}
.lib__t{display:block; margin-top:.5rem; font-size:.86rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lib__d{font-family:var(--mono); font-size:.68rem; color:var(--ink-3)}

/* ---------- contact ---------- */
.section--contact{padding-block:clamp(3rem,7vh,5rem) clamp(4rem,10vh,7rem)}
.contact{align-items:end}
.contact__l{grid-column:1 / 8}
.contact__r{grid-column:9 / 13}
.contact__line{margin:0 0 1.2rem; font-family:var(--serif); font-size:var(--t-stand); line-height:1.45; max-width:34ch}
.mail{display:inline-block; font-family:var(--display-face); font-size:var(--t-md); font-weight:500; text-decoration-thickness:2px;
  text-underline-offset:.16em; text-decoration-color:var(--accent); word-break:break-all}
.links{display:grid; gap:.55rem; margin:0; padding:0; list-style:none; font-size:var(--t-small)}
.links li{display:flex; align-items:baseline; gap:.6em}
.links li::before{content:"□"; font-family:var(--mono); color:var(--ink-3); font-size:.8em}
.links a, .links .more--plain{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em; text-decoration-color:var(--line)}
.links a:hover, .links .more--plain:hover{text-decoration-color:var(--accent); color:var(--ink)}
.more--plain{text-transform:none; letter-spacing:0; font-size:var(--t-small); font-family:var(--sans); color:var(--ink)}
.colophon{margin:2rem 0 0; color:var(--ink-3)}

/* ---------- the drawer: "read more" ---------- */
#more{position:fixed; inset:0; z-index:60; display:grid; justify-content:end;
  background:rgba(var(--ink-rgb),.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
#more[hidden]{display:none}
.more__panel{width:min(50rem,100vw); height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  background:var(--panel); color:var(--ink); box-shadow:-24px 0 60px rgba(var(--ink-rgb),.25);
  animation:slide var(--slow) var(--ease)}
@keyframes slide{from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){ .more__panel{animation:none} }
.more__head{position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem clamp(1.2rem,3vw,2.4rem); background:rgba(var(--panel-rgb),.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.more__kicker{margin:0; color:var(--ink-3); display:flex; align-items:baseline; gap:.7em; flex-wrap:wrap}
.more__close{border:0; background:none; padding:.4rem 0; cursor:pointer; font-family:var(--mono); font-size:var(--t-label); letter-spacing:var(--label-track); text-transform:uppercase; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:.4em; text-decoration-color:var(--line)}
.more__close:hover{color:var(--ink); text-decoration-color:var(--ink)}
.more__body{padding:clamp(1.5rem,4vh,2.6rem) clamp(1.2rem,3vw,2.4rem) 4rem}
.more__body h2{margin:0 0 1rem; font-family:var(--display-face); font-size:var(--t-md); line-height:1.12; font-weight:500; max-width:24ch; text-wrap:balance}
.more__body h2 .dim{color:var(--ink-3)}
.more__body h3{margin:2.2rem 0 .6rem; color:var(--station-ink, var(--ink-3))}
.more__body p{margin:0 0 .9em; max-width:62ch}
.more__body p.lead{font-family:var(--serif); font-size:var(--t-lead); line-height:1.42}
.more__body a{text-decoration-color:var(--station-ink, var(--accent)); text-underline-offset:.22em}
.more__body figure{margin:1.2rem 0}
.more__body figcaption{margin:.5rem .2rem 0; color:var(--ink-3)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem}
.grid4 img, .grid2 img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r)}
.grid2 img.wide{aspect-ratio:14/9}
.findings{list-style:none; margin:.4rem 0 0; padding:0}
.findings li{display:grid; grid-template-columns:2.4rem 1fr; gap:.4rem; padding:.7rem 0; border-top:1px solid var(--line)}
.findings__n{font-family:var(--mono); font-size:var(--t-small); color:var(--station-ink, var(--ink-3))}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.step__n{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; color:var(--station-ink, var(--ink-3)); margin-bottom:.4rem}
.step img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r)}
.step__t{margin:.6rem 0 .2rem; font-family:var(--display-face); font-size:calc(var(--t-body) * 1.15); font-weight:500}
.step__d{margin:0; font-size:var(--t-small); line-height:1.5; color:var(--ink-2)}
.more__body .bigquote{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:64rem){
  .head__l, .head__blurb, .contact__l, .contact__r{grid-column:1 / -1}
  .head{row-gap:1.2rem}
  .head__blurb{max-width:52ch}
  .proj__media, .proj__text, .proj__cap, .proj--flip .proj__media, .proj--flip .proj__text, .proj--flip .proj__cap,
  .proj--reel .proj__media, .proj--reel .proj__text{grid-column:1 / -1; grid-row:auto}
  .proj__text{position:static}
  .proj--flag .proj__media--a{grid-column:1 / 6} .proj--flag .proj__media--b{grid-column:6 / 13}
  .proj__s{max-width:40ch}
  .lib{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:1fr 1fr}
  .contact__r{margin-top:1.5rem}
}
@media (max-width:48rem){
  :root{--chrome:3.1rem; --gap:.7rem}
  .chrome{grid-template-columns:auto 1fr; gap:.5rem; padding:0 .9rem}
  .chrome__name{font-size:1rem}
  .tabs{gap:.1rem; justify-self:end}
  .tab{padding:.4rem .45rem; letter-spacing:.08em; font-size:.66rem}
  .tab .long{display:none} .tab .short{display:inline}
  .chrome__right{display:none}
  .hero{padding-top:calc(var(--chrome) + 1.8rem)}
  .display{text-wrap:balance; font-size:clamp(2rem, 9.5vw, 2.6rem)}
  .mosaic{grid-template-columns:1fr 1fr; gap:.9rem .6rem}
  .tile--desk{display:none}
  .tile__img{max-height:none}
  .tile__cap{font-size:.58rem; letter-spacing:.06em}
  .tile__cap i{display:none}
  .proj--flag .proj__media--a, .proj--flag .proj__media--b{grid-column:1 / -1; max-height:none}
  .posterwall{grid-template-columns:repeat(3,1fr); gap:3px}
  .lib{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .media4{gap:.35rem}
  #more{justify-content:stretch}
  .more__panel{width:100vw}
  .mail{font-size:clamp(1.15rem,5.2vw,1.6rem)}
}