/* John Barry — site.css (johnbxrry.com)
   The Paper file "Branding 2.0" → Bxrry Website: the Home frame and the six skill pages.
   Everything down to "johnbxrry.com additions" is the Aire Company site's Branding 2.0 system (airecompany.co
   site.css), unchanged, so the sidebar, hero panel, headline, cursors, scramble and page moves behave the same.
   Tokens map one-to-one onto the Paper tokens; dark by default, light under <html data-mode="light">. */

@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Suisse Intl"; src: url("fonts/suisse-intl-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "KMR Apparat"; src: url("fonts/kmr-apparat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  /* type (Paper --font-suisse, --text-*, --leading-*, --font-weight-*) */
  --font-suisse: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-glyph: "KMR Apparat", var(--font-suisse);
  --text-14: 14px;  --leading-18: 18px;
  --text-23: 23px;  --leading-27: 27px;
  --text-13-5: 13.5px; --leading-17: 17px;
  --tracking: -0.02em;
  --tracking-display: -0.03em;
  /* space and shape (Paper --pd3/--pd2/--pd, --br2, --radius-sm, --radius-pill) */
  --pd3: 4px; --pd2: 8px; --pd: 16px;
  --br2: 8px; --radius-sm: 10px; --radius-pill: 40px;
  /* accents (Paper --color-accent-*, plnty.app's scramble colours) */
  --accent-purple: #744CF6;
  --accent-blue: #76C1F5;
  --accent-yellow: #E6BA29;
  --accent-orange: #FF5004;
  --accent-green: #7DA838;
  --sidebar-w: 397px;
  --ease-out: cubic-bezier(.22, .8, .2, 1);
}

/* dark: the boards as built (Paper --color-dark-*, plus the blend literals #070707 / #0E0E0E / #141414) */
:root, :root[data-mode="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: #070707;            /* hero panel */
  --card: #0E0E0E;             /* sidebar cards, tiles, pills */
  --card-in-panel: #0E0E0E;    /* cards sitting on the hero panel */
  --card-active: #141414;
  --surface: #1A1A1A;          /* --color-dark-surface: the form sheet */
  --chip: #E1E5E21A;           /* --color-dark-chip */
  --chip-hover: #E1E5E229;
  --surface-hover: #E1E5E233;
  --control: #FFFFFF1F;        /* --color-dark-control */
  --control-glyph: #E2E6E3;
  --hairline: #E1E5E212;       /* card edges */
  --hairline-strong: #E1E5E214;/* hero panel edge, index rules */
  --hairline-sheet: #E1E5E21F; /* --color-dark-hairline: the form sheet */
  --card-glow: radial-gradient(ellipse 76% 130% at 24% 65%, #6B6B6B 0%, #393939 100%);
  --rule: #E1E5E233;           /* --color-dark-rule */
  --ink: #E2E6E3;              /* --color-dark-ink */
  --ink-muted: #E1E5E280;      /* --color-dark-ink-muted */
  --ink-72: color-mix(in srgb, var(--ink) 72%, transparent);
  --ink-60: color-mix(in srgb, var(--ink) 60%, transparent);
  --ink-40: color-mix(in srgb, var(--ink) 40%, transparent);
  --on-ink: #000000;           /* type on ink fills */
  --tile-ink: #000000;         /* initials on accent tiles */
  --glow: rgba(225, 229, 226, 0.075);
  --figure-filter: none;
  --toggle-knob-x: 24px;
}
/* light: the "· Light" boards (Paper --color-light-*, measured from pensatori-irrazionali.com) */
:root[data-mode="light"] {
  color-scheme: light;
  --bg: #F5F5F5;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --card-in-panel: #F5F5F5;
  --card-active: #E9E9E9;
  --surface: #FFFFFF;
  --chip: #E9E9E9;
  --chip-hover: #D8D8D8;
  --surface-hover: #D3D3D3;
  --control: #1E1E1ECC;
  --control-glyph: #FFFFFF;
  --hairline: #3030301A;
  --hairline-strong: #3030301A;
  --hairline-sheet: #3030301A;
  --card-glow: radial-gradient(ellipse 76% 130% at 24% 65%, #FFFFFF 0%, #E9E9E9 100%);
  --rule: #00000033;
  --ink: #434343;
  --ink-muted: #5E5E5E;
  --on-ink: #FFFFFF;
  --tile-ink: #000000;
  --glow: rgba(67, 67, 67, 0.05);
  --figure-filter: invert(1);
  --toggle-knob-x: 0px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-suisse);
  font-size: var(--text-14);
  line-height: var(--leading-18);
  font-weight: 400;
  letter-spacing: var(--tracking);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
:root[data-mode-ready] body,
:root[data-mode-ready] .card, :root[data-mode-ready] .pill, :root[data-mode-ready] .tile,
:root[data-mode-ready] .hero, :root[data-mode-ready] .toggle, :root[data-mode-ready] .toggle-knob {
  transition: background-color 400ms ease, color 400ms ease, border-color 400ms ease, transform 400ms var(--ease-out);
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, svg { display: block; }
h1, h2, h3, p, figure, blockquote { margin: 0; font-weight: inherit; }
h1, h2, h3 { font-size: inherit; line-height: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.t-muted { color: var(--ink-muted); }
.t-60 { color: var(--ink-60); }

/* which layout shows: the desktop boards from 1025px, the mobile boards below (Paper --breakpoint-1025) */
@media (min-width: 1025px) { .only-mobile { display: none !important; } }
@media (max-width: 1024px) { .only-desktop { display: none !important; } }

/* ---------- components ---------- */
/* pills: 40 tall, radius 40, 16 inline (Paper "Show all work", "Start a Project", "Back") */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pd2);
  height: 40px; padding-inline: var(--pd); flex-shrink: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-14); line-height: var(--leading-18); white-space: nowrap;
}
.pill--card { background: var(--card); border: 1px solid var(--hairline); }
.pill--chip { background: var(--chip); }
.pill--chip:hover { background: var(--chip-hover); }
.pill--ink { background: var(--ink); color: var(--on-ink); font-weight: 500; }
.pill--ink:hover { opacity: 0.86; }
.pill svg { flex-shrink: 0; }

/* theme toggle (Paper "Theme Toggle"): 62×38 track, 32px knob; the knob sits right in dark, left in light */
.toggle {
  position: relative; display: flex; align-items: center; flex-shrink: 0;
  width: 62px; height: 38px; padding: 3px; border-radius: 38px;
  background: var(--control);
}
.toggle-knob {
  width: 32px; height: 32px; border-radius: 50%; background: var(--chip);
  transform: translateX(var(--toggle-knob-x));
}
:root[data-mode="light"] .toggle-knob { background: #E9E9E9; }

/* cards (Paper sidebar cards): radius 10, padding 16, hairline edge */
.card {
  position: relative; display: flex; gap: 12px;
  padding: var(--pd); border-radius: var(--radius-sm);
  background: var(--card); border: 1px solid var(--hairline);
  overflow: hidden;
}
.card-text { display: flex; flex-direction: column; min-width: 0; }
.card-title { color: var(--ink); }
.card-sub { color: var(--ink-60); }
a.card:hover { background: var(--card-active); }
.card--about { flex-direction: column; gap: 0; }
.card--project { height: 98px; }
.tile-mark {
  display: flex; align-items: center; justify-content: center;
  width: 65px; height: 65px; flex-shrink: 0; border-radius: var(--radius-sm);
  color: #000000; font-size: 20px; line-height: 24px; font-weight: 500;
}
.tile-mark--blue { background: var(--accent-blue); }
.tile-mark--yellow { background: var(--accent-yellow); }
.tile-mark--orange { background: var(--accent-orange); }
.tile-mark--green { background: var(--accent-green); }
.tile-mark--purple { background: var(--accent-purple); color: #E2E6E3; }
.tile-mark--ink { background: var(--ink); color: var(--on-ink); }
.card--glow::before { content: ""; position: absolute; inset: 0; background: var(--card-glow); opacity: 0.4; }
.card--glow > * { position: relative; }
.card--dim { opacity: 0.68; }

/* the work list while it's coming soon: blurred, with the gloss chip over it */
.work { position: relative; display: flex; flex-direction: column; gap: 8px; }
.work-list { display: flex; flex-direction: column; gap: 8px; }
.work.is-coming-soon .work-list { filter: blur(9px); pointer-events: none; user-select: none; }
.deck { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 2px; }
.deck span { display: block; height: 10px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--card); border: 1px solid var(--hairline); opacity: 0.5; }
.deck span:first-child { width: calc(100% - 24px); }
.deck span:last-child { width: calc(100% - 48px); height: 8px; opacity: 0.25; }
/* The chip starts over the middle of the list (--cs-drop down from its top), rides up with the scroll until it is
   centred in the view, then holds there while the cards pass under it: a zero-height sticky row ahead of the list. */
.coming-soon { --cs-drop: 300px; display: none; position: sticky; top: calc(50vh - 30px - var(--cs-drop)); z-index: 5; height: 0; margin-bottom: -8px; pointer-events: none; }
.work.is-coming-soon .coming-soon { display: block; }
.sidebar .coming-soon { top: calc(50vh - 38px - var(--cs-drop)); } /* the sidebar's 8px top padding moves its sticky line */
.coming-soon img { position: absolute; left: 50%; top: var(--cs-drop); width: 224px; height: 60px; transform: translateX(-50%) rotate(-3deg); }
/* room past the end of the list, so there is enough scroll for the chip to reach the centre and hold a moment */
.sidebar:has(.work.is-coming-soon) .sb-cards { padding-bottom: max(0px, calc(50vh - 260px)); }
.m-page:has(.work.is-coming-soon) { padding-bottom: max(8px, calc(50vh - 260px)); }
/* the deck at the sidebar's bottom edge (motion.js): later cards tuck behind earlier ones */
.sb-cards .card { transform-origin: 50% 100%; will-change: transform; }
.card--about { z-index: 2; }
.sb-cards .work-list { position: relative; z-index: 1; }
.coming-soon .cs-light { display: none; }
:root[data-mode="light"] .coming-soon .cs-dark { display: none; }
:root[data-mode="light"] .coming-soon .cs-light { display: block; }

/* page tiles (Paper "Nav Tiles"): 52 tall, label left, ↗ right */
.tiles { display: flex; gap: 8px; }
.tile {
  flex: 1 1 0; display: flex; align-items: center; justify-content: space-between;
  height: 52px; padding-inline: var(--pd);
  border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--hairline);
}
.tile:hover { background: var(--card-active); }
.tile svg { color: var(--ink-muted); flex-shrink: 0; }
.hero .tile { background: var(--card-in-panel); border-color: var(--hairline-strong); }
.hero .tile:hover { background: var(--card-active); }

/* the scramble glyphs: KMR Apparat in the five accents */
.g { font-family: var(--font-glyph); font-weight: 500; }
.g--purple { color: var(--accent-purple); }
.g--blue { color: var(--accent-blue); }
.g--yellow { color: var(--accent-yellow); }
.g--orange { color: var(--accent-orange); }
.g--green { color: var(--accent-green); }

/* floating cursors: the Aire app library cursors with name chips. Decorative only. */
.cursors { position: absolute; inset: 0; pointer-events: none; }
/* --fx/--fy/--fr are the float offsets motion.js loops; the design's own angle stays in --r */
.cur {
  --fx: 0px; --fy: 0px; --fr: 0deg;
  position: absolute; width: var(--s); height: var(--s); transform-origin: 0 0;
  transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r, 0deg) + var(--fr)));
}
.cur .cursor-svg { width: 100%; height: 100%; }
.cur-chip {
  position: absolute; left: 70%; top: 85%;
  display: flex; align-items: center; height: 28px; padding: 0 9px; border-radius: 8px;
  font-size: 14px; line-height: 17px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
}
.cur-chip--you { background: var(--ink); color: var(--on-ink); }
.cur-chip--client { background: var(--accent-purple); color: #FFFFFF; }
.cur-chip--aire { background: var(--accent-orange); color: #000000; }

/* the live cursor (partials/site-cursor.html, moved by motion.js): replaces the system cursor on mouse devices */
html.has-cursor, html.has-cursor * { cursor: none !important; }
.site-cursor, .site-cursor-tag { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity 160ms ease; }
html:not(.has-cursor) .site-cursor, html:not(.has-cursor) .site-cursor-tag { display: none; }
html.cursor-on .site-cursor, html.cursor-on .site-cursor-tag { opacity: 1; }
.sc-icon { position: absolute; display: none; width: 30px; height: 30px; }
.sc-icon .cursor-svg { width: 100%; height: 100%; transition: transform 120ms ease; }
.site-cursor[data-state="default"] .sc-icon--default, .site-cursor[data-state="pointer"] .sc-icon--pointer,
.site-cursor[data-state="text"] .sc-icon--text, .site-cursor[data-state="grab"] .sc-icon--grab { display: block; }
/* each icon sits so its hotspot is the pointer: the arrow's tip, the fingertip, the centre of the I-beam and hand */
.sc-icon--default { left: -7.5px; top: -5px; }
.sc-icon--pointer { left: -11.5px; top: -6px; }
.sc-icon--text, .sc-icon--grab { left: -15px; top: -15px; }
.site-cursor.is-down .cursor-svg { transform: scale(0.88); }
.site-cursor-tag .cur-chip { left: 16px; top: 20px; height: 24px; padding: 0 8px; border-radius: 7px; font-size: 13px; line-height: 16px; pointer-events: none; }

/* the hover scramble (motion.js): glyphs in KMR Apparat; each headline line is held to one row of fixed height,
   so a wider scramble overflows sideways (centred) instead of wrapping, and the lines below never move */
.ch.is-scr { font-family: var(--font-glyph); font-weight: 500; }
[data-scramble] { display: block; }
.line { display: block; height: 1lh; white-space: nowrap; }
.line br { display: none; }
.headline .line, .m-headline .line { width: max-content; margin-left: 50%; transform: translateX(-50%); }

/* page moves: motion.js blurs these in; hidden until it starts so nothing flashes (the head script drops the class after 2.5s regardless) */
html.is-entering :is(.hero-top > *, .identity > *, .index-row, .quote-card, .m-page > .controls, .m-identity > *, .m-page > .tiles, .m-page > .work, .m-head > *, .m-block, .m-cta, .confirmed-inner > *) { opacity: 0; }
.identity picture, .m-identity picture { display: block; }

/* service / deliverable pills */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--chip); font-size: 13px; line-height: 16px; white-space: nowrap; }
.tag { display: inline-flex; align-self: flex-start; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); background: var(--surface-hover); font-size: 12px; line-height: 16px; white-space: nowrap; }

/* ---------- desktop shell: sidebar + hero panel (Paper "Desktop — Home A") ---------- */
.shell { display: flex; align-items: flex-start; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; flex: 0 0 var(--sidebar-w); width: var(--sidebar-w);
  height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 8px 0 8px 8px;
}
.sidebar::-webkit-scrollbar { display: none; }
.sb-top { display: flex; flex-direction: column; height: 278px; }
.controls { display: flex; align-items: center; justify-content: space-between; }
.clock { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: var(--text-23); line-height: var(--leading-27); }
.sb-cards { display: flex; flex-direction: column; gap: 8px; }

.main { flex: 1 1 auto; min-width: 0; padding: 8px; }
/* ScrollSmoother (motion.js) eases the page column: #smooth-wrapper / #smooth-content hold .main. Without it they are
   plain boxes in the row. With it (html.has-smoother, desktop with a mouse) the wrapper is fixed over the viewport and
   the content moves by transform, so the sidebar leaves the row and stays fixed above it, scrolling on its own. */
#smooth-wrapper { flex: 1 1 auto; min-width: 0; }
html.has-smoother .sidebar { position: fixed; top: 0; left: 0; z-index: 2; }
html.has-smoother #smooth-wrapper { z-index: 1; }
html.has-smoother #smooth-content { padding-left: var(--sidebar-w); }
.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100vh - 16px);
  border-radius: var(--br2); background: var(--panel); border: 1px solid var(--hairline-strong);
  overflow: hidden;
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 55% 45% at 50% 36%, var(--glow) 0%, transparent 70%); }
.hero--page .hero-glow { background: radial-gradient(ellipse 55% 38% at 50% 22%, var(--glow) 0%, transparent 70%); }
.hero-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 0; }
.hero-top:has(> :only-child) { justify-content: flex-end; }

/* the identity block: figure, glyph headline, floating cursors */
.identity { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 48px 24px; }
/* the home hero centres on the whole panel, not just the space under the Start a Project bar (64px), then lifts a
   touch for the optical centre: 88px more padding below than above moves the group up 44px */
.hero:not(.hero--page) .identity { padding: 24px 24px 112px; }
.figure { width: 104px; height: auto; filter: var(--figure-filter); }
/* the headline scales with the hero panel (1100px wide on the 1513px board) and stops at the board size */
.headline-box { position: relative; width: 19.2em; max-width: 100%; font-size: clamp(28px, calc((100vw - 413px) * 0.04545), 50px); }
.hl-page { width: 18.75em; font-size: clamp(28px, calc((100vw - 413px) * 0.04364), 48px); }
.headline {
  font-size: 1em; line-height: 1.12; font-weight: 500; letter-spacing: var(--tracking-display);
  text-align: center; color: var(--ink);
}
.headline .br-d { display: inline; }
.subline { max-width: 520px; text-align: center; font-size: 18px; line-height: 24px; color: var(--ink-muted); }
.identity .tiles { width: 560px; max-width: 100%; padding-top: 24px; }
.identity--page { gap: 20px; padding: 40px 24px 64px; }
.identity--page .headline { line-height: 1.125; }


/* ======================================================================================================
   johnbxrry.com additions
   ====================================================================================================== */
:root {
  /* SF Pro is what Paper draws; Apple devices have it as the system font, everywhere else gets Inter */
  --font-sf-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-sf-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
}

/* sidebar: the Resume card and the six skill cards (Paper "Resume · Download", "Skill · …") */
.card--resume { flex-direction: column; justify-content: space-between; gap: 12px; min-height: 106px; }
.resume-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn-light {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 32px; padding: 0 14px 0 11px;
  border-radius: 16px; background: #F2F2F0; color: #0E0E0E; font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: -0.01em;
}
.btn-light:hover { background: #FFFFFF; }
:root[data-mode="light"] .btn-light { background: var(--ink); color: var(--on-ink); }
.link-chips { display: flex; gap: 6px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 10px; border-radius: 13px;
  background: #FFFFFF0A; border: 1px solid var(--hairline-sheet);
  color: color-mix(in srgb, var(--ink) 80%, transparent); font-size: 12px; line-height: 14px; letter-spacing: -0.02em;
}
.link-chip svg { opacity: 0.7; }
.link-chip:hover { background: var(--chip); color: var(--ink); }
:root[data-mode="light"] .link-chip { background: transparent; }
.card--skill { height: 98px; }
.card--skill > div:first-child { flex-shrink: 0; }
.card[aria-current="page"] { background: var(--card-active); border-color: var(--hairline-sheet); }

/* the hero panel's content column (Paper "Content" / "Identity": 88 top, 128 bottom, 56 between) */
.hero-glow { inset: 0 0 auto 0; height: 1264px; background: radial-gradient(ellipse 55% 45% at 50% 32%, var(--glow) 0%, transparent 70%); }
.hero--page .hero-glow { background: radial-gradient(ellipse 55% 45% at 50% 26%, var(--glow) 0%, transparent 70%); }
.hero-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 56px; padding: 88px 31px 128px; }
.page-header { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 640px; max-width: 100%; }
.eyebrow { font-size: 16px; line-height: 22px; color: var(--ink); }
/* the headline: 640px frame at 50px (12.8em), lines set by the board; cursors placed in em (Paper px / 50) */
.hl-bx { width: 12.8em; font-size: clamp(30px, calc((100vw - 413px) * 0.04545), 50px); }
.hl-bx .headline { line-height: 1.12; }
.hl-bx .cur-chip { font-size: 0.28em; height: 2em; padding: 0 0.65em; line-height: 1.2; border-radius: 0.57em; }
.video, .body-col { width: 100%; max-width: 640px; }
/* the video card: 640×360 on the board, kept at 16:9; the play button centred however wide it gets */
.video > div { min-height: 0 !important; aspect-ratio: 16 / 9; }
.video .play { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.cs { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 1036px; }
.cs-sec { display: flex; flex-direction: column; }
.cs-sec > * { max-width: 100%; }
.cs img { display: block; max-width: 100%; }
.body-col a:hover, .cs a:hover { opacity: 0.7; }

/* page moves: the same entrance as airecompany.co, on this site's blocks */
html.is-entering :is(.page-header > *, .content > .video, .cs-sec, .content > .body-col) { opacity: 0; }

/* ---------- below 1025px: one column. The hero panel first, the sidebar's cards under it ---------- */
@media (max-width: 1024px) {
  .shell { flex-direction: column; align-items: stretch; }
  #smooth-wrapper { order: 1; }
  .sidebar { order: 2; position: static; flex: none; width: auto; height: auto; overflow: visible; padding: 0 8px 8px; }
  .sb-top, .deck { display: none; }
  .hero { min-height: 0; }
  .hero-top { padding: 16px 16px 0; }
  .content { gap: 48px; padding: 64px 16px 72px; }
  .hl-bx { font-size: clamp(28px, 6.4vw, 46px); }
  .hl-bx .cur--right { left: auto !important; right: -0.3em; }
}
@media (max-width: 700px) {
  .cs .r { flex-wrap: wrap !important; }
  .cs .r > .fx:not(.fx-s) { flex: 1 1 100% !important; }
  .cs .r > .fx-s { flex-grow: 1 !important; }
  .cs .ax { display: none !important; }
  /* text cards hug their text (the boards give them a 400px floor); label chips over images stay inside them */
  .cs .mh:not([data-compose]) { min-height: 0 !important; }
  .cs .tg { max-width: calc(100% - 24px); }
  .cs .tg > div { width: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* drawn compositions keep their board width; site.js zooms them to the column */
  .cs [data-compose] { flex: 0 0 var(--cw) !important; width: var(--cw) !important; max-width: none !important; }
  .hl-bx .cursors { display: none; }
  .hl-bx .headline .br-d { display: none; }
  .content { gap: 40px; padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}