/* ═══════════════════════════════════════════════════════════
   krein.id — one screen, no page scroll.
   Type: Bitcount (dot-matrix display) + Courier Prime (UI/body).
   Momo Trust Display is reserved for the logo wordmark only.
   ═══════════════════════════════════════════════════════════ */

@font-face{font-family:'Momo';src:url('../../fonts/momo-trust-display-v2-latin-regular.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bitcount';src:url('../../fonts/bitcount-prop-single-200.woff2')format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'Bitcount';src:url('../../fonts/bitcount-prop-single-300.woff2')format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Bitcount';src:url('../../fonts/bitcount-prop-single-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Bitcount';src:url('../../fonts/bitcount-prop-single-500.woff2')format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Bitcount';src:url('../../fonts/bitcount-prop-single-600.woff2')format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../../fonts/courier-prime-400.woff2')format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../../fonts/courier-prime-700.woff2')format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#EAEAEA;
  --surface:#DEDEDE;         /* recessed panels: image frames, hovers */
  --ink:#0D0D0D;
  --mute:#67675F;            /* meets AA against --bg at body size */
  --line:#D3D3D3;
  --line-2:#BDBDBD;
  /* Two oranges, on purpose.
     --accent is the bright one, for MARKS: rules, dots, squares, ticks.
     It measures 2.56:1 on the background, so it must never carry words.
     --accent-ink is the same hue darkened to 5.01:1 — that one is for the
     few places the colour has to be readable text. */
  --accent:#F06B00;
  --accent-ink:#A34800;
  --brand:#C86515;           /* the logo mark and wordmark */

  --mono:'Courier Prime',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --dots:'Bitcount','Courier Prime',monospace;

  --logo-h:26px;             /* mark size; the wordmark is locked to it below */

  /* Portfolio cards. The layout slot is always --slot wide so nothing
     reflows as the highlight moves; only the frame inside it grows, from
     --narrow (portrait) to --wide (landscape). Height never changes. */
  --narrow:.78;
  --wide:1.34;
  /* Height leads and the slot follows, so the rail stays filled; the vw
     term keeps the widened centre card from crowding out its neighbours. */
  --card-h:clamp(190px,min(56vh,43vw),520px);
  --slot:calc(var(--card-h) * var(--wide));

  --edge:clamp(14px,3vw,44px);
  --gap:clamp(12px,1.8vw,26px);
  --bar:clamp(52px,7.4vh,68px);
  --snap:.22s cubic-bezier(.2,.9,.3,1);
}

*{box-sizing:border-box}

html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:14px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block}
::selection{background:var(--accent);color:#fff}

/* thin scrollbars in the accent, for the two panes that do scroll */
.scroll,.sheet-scroll{scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
.scroll::-webkit-scrollbar,.sheet-scroll::-webkit-scrollbar{width:6px;height:6px}
.scroll::-webkit-scrollbar-thumb,.sheet-scroll::-webkit-scrollbar-thumb{background:var(--accent)}
.scroll::-webkit-scrollbar-track,.sheet-scroll::-webkit-scrollbar-track{background:transparent}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.dot{color:var(--accent);font-style:normal}

/* Readable by crawlers and screen readers, not shown on screen. Used for
   the page heading and business details, which the logo represents
   visually. Clipped rather than display:none, which would hide it from
   assistive technology too. */
.sr-only{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ── BACKGROUND GRID ──────────────────────────────────── */

/* Painted by grid.js. Sits under everything and never takes a click. */
#grid{
  position:fixed;inset:0;z-index:0;
  pointer-events:none;
  display:block;
}

/* ── SHELL ────────────────────────────────────────────── */

.shell{position:relative;z-index:1;height:100dvh;display:flex;flex-direction:column}

/* Solid, so the background grid stops at the chrome instead of running
   underneath the navigation. */
.bar{
  position:relative;z-index:2;background:var(--bg);
  flex:none;height:var(--bar);padding:0 var(--edge);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  border-bottom:1px solid var(--line);
}

.logo{justify-self:start;display:flex;align-items:center;gap:.34em}
.logo-mark{width:var(--logo-h);height:var(--logo-h);flex:none}

/* Wordmark carries the brand terracotta, and its drawn height is matched
   to the mark: "krein.id" has no descenders, so its inked height measures
   0.8125 of the font size — dividing by that makes both exactly as tall. */
.logo-type{
  font-family:'Momo',var(--mono);
  font-size:calc(var(--logo-h) / .8125);
  line-height:1;letter-spacing:.005em;color:var(--brand);
}
.logo-type .dot{color:var(--brand)}   /* the logo keeps terracotta throughout */

.tabs{justify-self:center;display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}

.tab{
  position:relative;padding:5px 0;
  font-size:clamp(12px,1.25vw,14px);letter-spacing:.02em;
  color:var(--mute);white-space:nowrap;transition:color var(--snap);
}
.tab:hover{color:var(--ink)}
.tab::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform var(--snap);
}
.tab.is-on{color:var(--ink)}
.tab.is-on::after{transform:scaleX(1)}
/* a hint of the underline on hover, so the colour reads as interactive */
.tab:hover::after{transform:scaleX(1);opacity:.34}
.tab.is-on:hover::after{opacity:1}

.bar-end{justify-self:end;display:flex;align-items:center;gap:10px}

.lang{
  font-size:10px;letter-spacing:.16em;color:var(--mute);
  border:1px solid var(--line);padding:5px 7px;transition:border-color var(--snap),color var(--snap);
}
.lang:hover{color:var(--ink);border-color:var(--accent)}
/* 10px text, so the readable orange rather than the bright one */
.lang .is-on{color:var(--accent-ink)}
.lang-sep{font-style:normal;opacity:.3;margin:0 3px}

/* CTA — solid block, square corners */
.cta{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 15px;background:var(--ink);color:var(--bg);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  transition:opacity var(--snap),transform var(--snap);
}
.cta::after{content:'';width:5px;height:5px;background:var(--accent)}
.cta:hover{opacity:.84}
.cta:active{transform:translateY(1px)}
.cta-lg{padding:13px 24px;font-size:12px}

/* ── STAGE / PANELS ───────────────────────────────────── */

.stage{flex:1;position:relative;min-height:0}

.panel{
  position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;
  opacity:0;pointer-events:none;transition:opacity .18s linear;
}
.panel.is-on{opacity:1;pointer-events:auto}
.panel[hidden]{display:none}

.scroll{flex:1;min-height:0;overflow-y:auto;padding:var(--edge);scrollbar-width:thin}

/* ── PORTF. — infinite horizontal rail ────────────────── */

.rail-wrap{flex:1;min-height:0;position:relative;display:flex}

/* perspective turns the per-card rotateY from app.js into a drum that
   rolls away behind the centre; without it they would just look skewed */
.rail{
  flex:1;min-height:0;display:flex;align-items:center;overflow:hidden;
  cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;
  perspective:1400px;perspective-origin:50% 50%;
}

/* Arrows — a way through for anyone who does not think to swipe.
   Deliberately NOT backdrop-filter. That property forces the whole
   3D-transformed rail behind it onto a different rasterisation path, and
   every card rendered as a blank box. A translucent white fill reads the
   same here, because the background behind it is a flat colour. */
.nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:clamp(34px,4.4vw,46px);height:clamp(34px,4.4vw,46px);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.66);
  box-shadow:0 0 0 1px rgba(255,255,255,.8), 0 3px 14px rgba(0,0,0,.12);
  color:var(--ink);
  transition:background-color var(--snap),box-shadow var(--snap),opacity var(--snap);
}
.nav svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nav:hover{background:rgba(255,255,255,.88);box-shadow:0 0 0 1px var(--accent), 0 3px 14px rgba(0,0,0,.14)}
.nav:active{transform:translateY(-50%) scale(.94)}
.nav-prev{left:clamp(8px,1.6vw,20px)}
.nav-next{right:clamp(8px,1.6vw,20px)}
.rail.is-drag{cursor:grabbing}
.rail:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}

/* Kill the browser's native drag-the-picture behaviour. Without this it
   hijacks the pointer stream, so the swipe stalls AND no click ever fires. */
.rail a,.rail img{-webkit-user-drag:none;user-drag:none}

.rail-track{
  display:flex;align-items:center;gap:var(--gap);padding:0 var(--gap);
  transform-style:preserve-3d;
}

/* Fixed-width slot: the highlight changes the frame inside, never the
   layout, so offsets stay valid while the rail moves.
   width / opacity / blur are driven per-frame from app.js — no CSS
   transition here, or it would fight the drag. */
/* Deliberately NOT preserve-3d or backface-visibility here. A card has no
   3D children of its own — only .rail-track needs to keep its children in
   space. Promoting each card to a 3D context made it rasterise into a
   layer that a late-arriving photo failed to invalidate, so cards stayed
   blank until something else forced a repaint. */
.card{
  flex:none;width:var(--slot);display:block;
}

/* Height is constant; width is what marks the highlighted card. The
   starting value is the portrait one, so the rail looks right even
   before the first paint. */
.card-fr{
  position:relative;
  height:var(--card-h);
  width:calc(var(--card-h) * var(--narrow));
  margin:0 auto;
  background:var(--surface);overflow:hidden;
  border:1px solid var(--line);
}
.card-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.card:hover .card-fr img{transform:scale(1.035)}

/* corner ticks — technical framing, in the accent so the crop marks read */
.card-fr::before,.card-fr::after{
  content:'';position:absolute;width:8px;height:8px;pointer-events:none;z-index:1;
  border-color:var(--accent);opacity:.9;
}
.card-fr::before{top:7px;left:7px;border-top:1px solid;border-left:1px solid}
.card-fr::after{bottom:7px;right:7px;border-bottom:1px solid;border-right:1px solid}

.card-no{
  position:absolute;top:8px;right:9px;z-index:1;
  font-family:var(--dots);font-size:13px;color:var(--accent);
}

/* the caption of the centred card gets a small leading rule */
.card-nm{position:relative}

/* Tracks the frame width so the caption stays flush with the photo edge. */
.card-meta{
  display:flex;flex-direction:column;gap:2px;
  width:calc(var(--card-h) * var(--narrow));
  margin:10px auto 0;
}
.card-nm{font-size:13px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}

/* placeholder when an image file is missing */
.ph::after{display:none}
.ph::before{
  content:attr(data-ph);inset:0;width:auto;height:auto;border:0;
  display:flex;align-items:center;justify-content:center;padding:14px;
  text-align:center;font-family:var(--dots);font-size:15px;
  color:var(--mute);opacity:1;line-height:1.4;
}

/* ── STRIP / READOUT ──────────────────────────────────── */

/* Same as the top bar: the footer band sits in front of the grid. */
.strip{
  position:relative;z-index:2;background:var(--bg);
  flex:none;padding:clamp(12px,2vh,20px) var(--edge);
  border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:var(--gap);
}

.readout{display:flex;align-items:baseline;gap:clamp(18px,3.4vw,50px);min-width:0;overflow:hidden}

/* Each stat is tagged with a small orange square rather than being tinted:
   the numbers stay black and legible, the colour still reads as a system. */
.rd{position:relative;display:flex;flex-direction:column;gap:1px;line-height:1.1;padding-top:9px}
.rd::before{content:'';position:absolute;top:0;left:0;width:5px;height:5px;background:var(--accent)}
.rd b{font-family:var(--dots);font-weight:600;font-size:clamp(22px,2.8vw,34px);letter-spacing:.02em}
.rd span{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
/* First stat is the headline figure. It uses the bright orange by explicit
   request; at 2.56:1 that is below the readable threshold, so no other
   text is allowed to follow it. */
.rd:first-child::before{width:100%;max-width:26px}
.rd:first-child b{color:var(--accent)}

.tick{
  position:relative;z-index:2;background:var(--bg);
  flex:none;margin:0;padding:0 var(--edge) clamp(9px,1.5vh,15px);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  display:flex;align-items:center;gap:8px;
}
/* blinking cursor-square: the line reads as a live status readout */
.tick::before{content:'';flex:none;width:4px;height:4px;background:var(--accent);animation:blip 2.6s steps(1,end) infinite}
@keyframes blip{0%,62%{opacity:1}63%,100%{opacity:.18}}

/* ── PROJ. — every project, grouped by year ───────────── */

.years{max-width:1280px;margin:0 auto}

.yr + .yr{margin-top:clamp(28px,5vh,54px)}

.yr-hd{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:10px;margin-bottom:clamp(12px,2vh,20px);
  border-bottom:1px solid var(--line);
}
.yr-hd h2{
  margin:0;font-family:var(--dots);font-weight:500;
  font-size:clamp(17px,2.2vw,24px);letter-spacing:.03em;
}
.yr-hd span{
  font-size:9px;letter-spacing:.18em;color:var(--mute);
  border:1px solid var(--accent);padding:2px 6px;
}

/* Steam-style shelf: portrait tiles, roomy gaps, softly rounded. */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(122px,15vw,178px),1fr));
  gap:clamp(12px,1.6vw,22px);
}

.tile{display:block}

.tile-fr{
  position:relative;width:100%;aspect-ratio:3/4;
  background:var(--surface);overflow:hidden;
  border-radius:6px;
  box-shadow:0 0 0 1px var(--line);
  transition:box-shadow var(--snap),transform var(--snap);
}
.tile-fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.9,.3,1)}
.tile:hover .tile-fr{box-shadow:0 0 0 1px var(--accent);transform:translateY(-3px)}
.tile:hover .tile-fr img{transform:scale(1.05)}

.tile-nm{
  display:block;margin-top:9px;font-size:12px;line-height:1.35;
  transition:color var(--snap);
}
.tile:hover .tile-nm{color:var(--accent-ink)}

.tile-sub{
  display:block;margin-top:2px;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
}

/* ── OUR CLIENTS ──────────────────────────────────────── */

/* Hairlines come from each cell's own 1px ring, meeting inside the 1px gap.
   Drawing them on the container instead would leave a solid block wherever
   the last row is short. */
.grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(104px,12.5vw,164px),1fr));
  gap:1px;margin:1px;
}
.cell{
  position:relative;aspect-ratio:1/1;background:var(--bg);
  box-shadow:0 0 0 1px var(--line);
  display:flex;align-items:center;justify-content:center;padding:15%;
  transition:background-color var(--snap),box-shadow var(--snap);
}
.cell:hover{background:var(--surface);box-shadow:0 0 0 1px var(--accent)}
/* a corner tick that only appears on hover — the grid stays quiet at rest */
.cell::after{
  content:'';position:absolute;top:6px;left:6px;width:5px;height:5px;
  border-top:1px solid var(--accent);border-left:1px solid var(--accent);
  opacity:0;transition:opacity var(--snap);
}
.cell:hover::after{opacity:1}
.cell img{max-width:100%;max-height:100%;object-fit:contain;filter:grayscale(1);opacity:.5;transition:opacity var(--snap),filter var(--snap)}
.cell:hover img{opacity:1;filter:none}
.cell-nm{font-size:clamp(10px,1.1vw,12px);text-align:center;letter-spacing:.06em;color:var(--mute);transition:color var(--snap)}
.cell:hover .cell-nm{color:var(--ink)}

/* ── BOUT.US ──────────────────────────────────────────── */

.about{max-width:1080px;margin:auto}
/* A dot-matrix face turns to mush in a long sentence when it is heavy and
   tightly set. Light weight plus open tracking keeps the character but
   lets the words actually be read. */
.about h1{
  margin:0 0 22px;font-family:var(--dots);font-weight:400;
  font-size:clamp(20px,3vw,34px);line-height:1.34;letter-spacing:.045em;
}
.about p{margin:0 0 13px;max-width:62ch;color:var(--mute)}
.about p strong{color:var(--ink);font-weight:400}

.meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--gap);
  margin-top:clamp(24px,4.4vh,44px);padding-top:clamp(20px,3.4vh,34px);border-top:1px solid var(--line);
}
.meta h2{
  position:relative;margin:0 0 9px;padding-top:9px;
  font-size:10px;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.meta h2::before{content:'';position:absolute;top:0;left:0;width:14px;height:1px;background:var(--accent)}
.meta p{margin:0;font-size:13px;color:var(--ink);line-height:1.85}
.meta a{border-bottom:1px solid var(--line-2);transition:border-color var(--snap),color var(--snap)}
.meta a:hover{border-color:var(--accent);color:var(--accent-ink)}

.about .cta{margin-top:clamp(24px,4.4vh,42px)}

/* ── PROJECT SHEET — the only vertical scroll on the site ─ */

.sheet{position:fixed;inset:0;z-index:40;background:var(--bg);opacity:0;transition:opacity .2s linear}
.sheet.is-on{opacity:1}
.sheet[hidden]{display:none}

.sheet-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain}

.sheet-x{
  position:fixed;top:clamp(11px,2vh,20px);right:var(--edge);z-index:2;
  width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--line-2);font-size:19px;line-height:1;
  transition:background-color var(--snap),border-color var(--snap),color var(--snap);
}
.sheet-x:hover{background:var(--surface);border-color:var(--accent);color:var(--accent-ink)}

.sheet-in{max-width:1180px;margin:0 auto;padding:clamp(22px,5vh,62px) var(--edge) clamp(34px,7vh,84px)}

.sheet-hd{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--gap);
  align-items:end;padding-bottom:clamp(18px,3.4vh,34px);border-bottom:1px solid var(--line);
}
/* Project titles are short, so they hold up at a heavier weight than the
   about heading — but still opened up a little. */
.sheet-hd h1{
  margin:0;font-family:var(--dots);font-weight:500;
  font-size:clamp(25px,4.6vw,54px);line-height:1.1;letter-spacing:.025em;
}
.sheet-kick{
  position:relative;margin:0 0 10px;padding-top:10px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.sheet-kick::before{content:'';position:absolute;top:0;left:0;width:22px;height:2px;background:var(--accent)}
.sheet-intro{margin:0;color:var(--mute);max-width:48ch}

.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:var(--gap);
  padding:clamp(16px,3vh,30px) 0;border-bottom:1px solid var(--line);
}
.fact{position:relative;padding-left:11px}
.fact::before{content:'';position:absolute;top:3px;left:0;width:3px;height:3px;background:var(--accent)}
.fact span{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-bottom:3px}
.fact b{font-weight:400;font-size:13px}

.room{padding:clamp(28px,6vh,76px) 0;border-bottom:1px solid var(--line)}
.room-hd{display:flex;align-items:baseline;gap:14px;margin-bottom:clamp(13px,2.2vh,24px)}
.room-no{font-family:var(--dots);font-size:13px;color:var(--accent-ink)}
.room-hd h2{margin:0;font-size:clamp(15px,2vw,21px);font-weight:400;letter-spacing:.01em}
.room-note{margin:0 0 clamp(13px,2.2vh,24px);color:var(--mute);font-size:13px;max-width:54ch}

/* One photo per row, at its own aspect ratio. Nothing is cropped —
   a render that gets cut in half is worse than a tall page. */
.shots{display:flex;flex-direction:column;gap:var(--gap)}

.shot{position:relative;width:100%;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.shot img{width:100%;height:auto;display:block}
/* only placeholders need a reserved box */
.shot.ph{aspect-ratio:3/2}

.sheet-ft{padding-top:clamp(26px,5vh,66px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--gap)}
.sheet-ft p{margin:0;font-family:var(--dots);font-weight:300;font-size:clamp(16px,2.2vw,24px);max-width:24ch;line-height:1.35;letter-spacing:.04em}

/* ── RESPONSIVE ───────────────────────────────────────── */

@media (max-width:900px){
  .sheet-hd{grid-template-columns:1fr;align-items:start}
  .sheet-intro{margin-top:15px}
}

@media (max-width:760px){
  .card-fr::before,.card-fr::after{display:none}
  /* A square highlight fits a phone better than a 4:3 one. The card is
     held to 62vw so the next one pokes ~34px into the screen — that edge
     is the only cue a first-time visitor gets that the rail can be
     swiped, so it has to be plainly visible rather than a hairline. */
  :root{--wide:1;--card-h:clamp(190px,min(50vh,62vw),380px)}
  .bar{height:auto;padding:10px var(--edge);grid-template-columns:1fr auto;
       grid-template-areas:'logo end' 'tabs tabs';row-gap:9px}
  .logo{grid-area:logo}
  .bar-end{grid-area:end}
  .tabs{grid-area:tabs;justify-self:center}


  .strip{flex-direction:column;align-items:stretch;gap:14px}
  .readout{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
  .cta-lg{justify-content:center}

}

@media (max-width:400px){
  :root{--logo-h:21px}     /* mark and wordmark shrink together */
  .tabs{gap:13px}
  .cta{padding:7px 12px;font-size:10px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}