/* Brand guidelines portal (prototype). One page, anchored sections, no build step. */
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url(assets/fonts/SpaceGrotesk-500-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url(assets/fonts/SpaceGrotesk-700-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(assets/fonts/Inter-400-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(assets/fonts/Inter-500-normal-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(assets/fonts/Inter-600-normal-latin.woff2) format("woff2"); }

:root {
  --ink: #14202e; --brick: #c4532f; --brick-text: #a8432a; --stone: #f1ece4; --sand: #e4ded4; --slate: #5b6675; --white: #fff;
  --paper: #faf8f4; --line: #e6e0d6; --muted: #6b7380; --ok: #2f7d4f; --bad: #b4372a;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --r: 14px; --r-sm: 8px; --header: 60px; --side: 248px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); }
body { margin: 0; font: 400 15px/1.6 var(--body); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
p { margin: 0; }
.muted { color: var(--muted); }
.eyebrow { font: 500 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 30; height: var(--header); display: flex; align-items: center; gap: 16px; padding: 0 20px; background: rgba(250, 248, 244, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: calc(var(--side) - 20px); }
.top .brand img { height: 22px; width: auto; }
.top .brand span { font: 500 14px var(--body); color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line); }
.search { flex: 1; max-width: 420px; position: relative; }
.search input { width: 100%; height: 36px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 0 56px 0 36px; font: inherit; font-size: 14px; color: var(--ink); }
.search input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.search svg { position: absolute; left: 11px; top: 10px; width: 16px; height: 16px; color: var(--muted); }
.search kbd { position: absolute; right: 8px; top: 7px; font: 500 11px var(--body); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; background: var(--paper); }
.top .meta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font: 500 12px var(--body); background: var(--stone); color: var(--ink); white-space: nowrap; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); font: 500 14px var(--body); text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #cfc7b9; }
.btn.primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.btn.primary:hover { background: #1f2f42; }
.btn.small { height: 30px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn svg { width: 16px; height: 16px; }

/* Layout */
.layout { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); }
.side { position: sticky; top: var(--header); height: calc(100vh - var(--header)); overflow-y: auto; padding: 20px 12px 40px 20px; border-right: 1px solid var(--line); }
.side h4 { font: 500 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 18px 10px 6px; }
.side h4:first-child { margin-top: 0; }
.side a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; color: #3a4552; }
.side a span { font: 500 11px var(--body); color: var(--muted); width: 18px; }
.side a:hover { background: var(--stone); }
.side a.on { background: var(--ink); color: var(--white); }
.side a.on span { color: #c8ccd2; }
.side a.hide { display: none; }
.side .card-dl { margin: 22px 4px 0; padding: 14px; border-radius: var(--r); background: var(--stone); font-size: 13px; }
.side .card-dl strong { display: block; font: 600 14px var(--body); margin-bottom: 4px; }
.side .card-dl .btn { margin-top: 10px; width: 100%; justify-content: center; }

main { min-width: 0; padding: 0 clamp(20px, 4vw, 56px) 80px; }
.sec { max-width: 1080px; margin: 0 auto; padding: 72px 0 8px; border-top: 1px solid var(--line); }
.sec:first-child { border-top: 0; padding-top: 32px; }
.sec-head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px 16px; align-items: start; margin-bottom: 32px; }
.sec-head .num { font: 700 14px var(--display); color: var(--brick-text); padding-top: 10px; }
.sec-head h2 { font-size: clamp(30px, 3.4vw, 42px); }
.sec-head p { grid-column: 2; max-width: 640px; color: var(--muted); font-size: 16px; }
.sec-head .actions { grid-row: 1 / span 2; grid-column: 3; display: flex; gap: 8px; padding-top: 6px; }
.sub { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 48px 0 16px; }
.sub h3 { font-size: 20px; }
.sub p { color: var(--muted); font-size: 14px; max-width: 520px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card .body { padding: 16px 18px 18px; }
.card h4 { font: 600 15px var(--body); letter-spacing: 0; margin-bottom: 4px; }
.card p { font-size: 14px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--line); background: var(--paper); font: 500 12px var(--body); text-decoration: none; }
.chip:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.lintel-rule { height: 6px; width: 48px; background: var(--brick); margin-bottom: 20px; }

/* 00 Overview */
.hero { position: relative; overflow: hidden; border-radius: 22px; background: var(--ink); color: var(--stone); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: end; min-height: 380px; }
.hero h1 { font-size: clamp(40px, 5.6vw, 72px); color: var(--white); }
.hero p { margin-top: 18px; max-width: 520px; color: #c3c9d1; font-size: 17px; }
.hero .mark { justify-self: end; width: min(260px, 100%); }
.hero dl { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid #2a3a4d; }
.hero dt { font: 500 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: #8a94a1; }
.hero dd { margin: 4px 0 0; font: 500 14px var(--body); color: var(--white); }
.quick { margin-top: 16px; }
.quick a { text-decoration: none; display: flex; flex-direction: column; }
.quick .vis { height: 132px; display: grid; place-items: center; background: var(--stone); border-bottom: 1px solid var(--line); }
.quick a:hover { border-color: var(--ink); }
.quick a:hover h4::after { transform: translateX(3px); }
.quick h4::after { content: " →"; display: inline-block; transition: transform .15s; }
.onepage { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.onepage > div { padding: 22px; border-left: 1px solid var(--line); }
.onepage > div:first-child { border-left: 0; }
.dots { display: flex; gap: 8px; margin-top: 14px; }
.dots i { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .08); }

/* 01 Foundation */
.manifest { font: 500 clamp(24px, 3vw, 34px)/1.25 var(--display); letter-spacing: -0.01em; max-width: 900px; }
.manifest em { font-style: normal; color: var(--brick-text); }
.values .n { font: 700 13px var(--display); color: var(--brick-text); }
.values h4 { margin-top: 28px; font: 700 20px var(--display); letter-spacing: -0.01em; }
.isnot { display: grid; grid-template-columns: 1fr 1fr; }
.isnot > div { padding: 22px; }
.isnot > div + div { border-left: 1px solid var(--line); background: var(--paper); }
.isnot ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.isnot li { display: flex; gap: 10px; font-size: 14px; }

/* Do / don't marks */
.mk { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font: 700 12px/1 var(--body); }
.mk.ok { background: var(--ok); }
.mk.no { background: var(--bad); }
.verdict { display: flex; align-items: center; gap: 8px; font: 600 13px var(--body); }
.verdict.ok { color: var(--ok); }
.verdict.no { color: var(--bad); }
.dd .stage { height: 150px; display: grid; place-items: center; padding: 24px; background: var(--stone); border-bottom: 3px solid transparent; }
.dd.ok .stage { border-bottom-color: var(--ok); }
.dd.no .stage { border-bottom-color: var(--bad); }
.dd .stage img { max-height: 46px; width: auto; }

/* 02 Logo */
.stage-main { position: relative; border-radius: var(--r); border: 1px solid var(--line); height: 380px; display: grid; place-items: center; transition: background .25s; }
.stage-main img { width: min(520px, 70%); }
.stage-main[data-bg="stone"] { background: var(--stone); }
.stage-main[data-bg="white"] { background: var(--white); }
.stage-main[data-bg="ink"] { background: var(--ink); }
.stage-main[data-bg="photo"] { background: linear-gradient(135deg, #8b6d55, #3c4a57 60%, #1d2733); }
.seg { position: absolute; left: 14px; top: 14px; display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .85); border: 1px solid var(--line); }
.seg button { border: 0; background: none; height: 28px; padding: 0 10px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.seg button.on { background: var(--ink); color: var(--white); }
.stage-main .dl { position: absolute; right: 14px; top: 14px; display: flex; gap: 6px; }
.anatomy { position: relative; padding: 56px 32px 32px; background: var(--white); display: grid; place-items: center; }
.anatomy .fig { position: relative; width: min(460px, 80%); }
.anatomy .fig img { width: 100%; }
.anatomy .pin { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--brick); color: var(--white); font: 700 11px/22px var(--body); text-align: center; transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--white); }
.legend { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 44px; font-size: 14px; }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend b { width: 20px; height: 20px; border-radius: 50%; background: var(--brick); color: var(--white); font: 700 11px/20px var(--body); text-align: center; }
.variant .stage { height: 170px; display: grid; place-items: center; padding: 28px; }
.variant .stage img { max-height: 70px; width: auto; max-width: 100%; }
.variant .stage.dark { background: var(--ink); }
.variant .stage.light { background: var(--stone); }
.space { position: relative; background: var(--white); display: grid; place-items: center; padding: 56px; }
.space .box { position: relative; padding: 44px; outline: 1px dashed var(--brick); background: repeating-linear-gradient(45deg, rgba(196, 83, 47, .07) 0 6px, transparent 6px 12px); }
.space .box > div { background: var(--white); padding: 6px; }
.space .box img { width: 260px; }
.space .x { position: absolute; font: 600 12px var(--body); color: var(--brick-text); }
.minsize { background: var(--white); padding: 40px 28px 28px; display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; align-items: end; gap: 20px; }
.minsize figure { margin: 0; }
.minsize figcaption { margin-top: 10px; font: 500 12px var(--body); color: var(--muted); }

/* 03 Colour */
.ratio { display: flex; height: 64px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.ratio div { display: flex; align-items: flex-end; padding: 8px 10px; font: 600 12px var(--body); }
.swatch .chip-color { height: 168px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.swatch .chip-color strong { font: 700 20px var(--display); }
.swatch .chip-color small { font-size: 12px; opacity: .8; }
.swatch .codes { padding: 6px 8px 8px; }
.code { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; background: none; padding: 7px 10px; border-radius: 7px; text-align: left; }
.code:hover { background: var(--stone); }
.code span:first-child { font: 500 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.code span:last-child { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.code.copied span:last-child::after { content: " ✓"; color: var(--ok); }
.matrix { width: 100%; border-collapse: separate; border-spacing: 6px; }
.matrix th { font: 500 12px var(--body); color: var(--muted); text-align: left; padding: 4px 6px; }
.matrix td { height: 74px; border-radius: 10px; padding: 10px 12px; vertical-align: top; border: 1px solid rgba(0, 0, 0, .06); }
.matrix td b { display: block; font: 700 18px var(--display); }
.matrix td small { font: 600 11px var(--body); padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, .9); color: var(--ink); }
.matrix td.fail { background-image: repeating-linear-gradient(45deg, transparent 0 8px, rgba(180, 55, 42, .08) 8px 16px); }
.matrix td.fail small { color: var(--bad); }

/* 04 Type */
.spec { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.spec .big { display: grid; place-items: center; font-size: 120px; line-height: 1; background: var(--stone); }
.spec .body { padding: 22px 24px; }
.spec .glyphs { margin-top: 14px; font-size: 22px; letter-spacing: .02em; word-break: break-all; }
.spec .weights { display: flex; gap: 18px; margin-top: 14px; font-size: 18px; }
.scale { width: 100%; border-collapse: collapse; background: var(--white); }
.scale td { padding: 18px 20px; border-top: 1px solid var(--line); vertical-align: middle; }
.scale tr:first-child td { border-top: 0; }
.scale td:first-child { width: 130px; }
.scale td:last-child { width: 1%; white-space: nowrap; text-align: right; color: var(--muted); }
.scale .sample { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px; width: 100%; }
.article { padding: 32px; background: var(--white); }
.article h3 { font-size: 32px; max-width: 560px; }
.article p { margin-top: 14px; max-width: 620px; color: #3a4552; }

/* 05 Graphic elements + 06 Imagery */
.elem .stage { height: 200px; display: grid; place-items: center; background: var(--stone); position: relative; overflow: hidden; }
.photo { height: 220px; position: relative; display: flex; align-items: flex-end; padding: 14px; color: var(--white); font: 600 13px var(--body); }
.photo.p1 { background: radial-gradient(circle at 70% 30%, #f3c89b, transparent 45%), linear-gradient(160deg, #b9805a, #5a4334); }
.photo.p2 { background: radial-gradient(circle at 30% 60%, #e8dccb, transparent 40%), linear-gradient(200deg, #7f8b80, #3b4a46); }
.photo.p3 { background: radial-gradient(circle at 60% 50%, #d9b48a, transparent 35%), linear-gradient(120deg, #c4532f, #6a2f1f); }
.photo.n1 { background: linear-gradient(90deg, #00e0ff, #ff00c8, #ffe600); }
.photo.n2 { background: repeating-linear-gradient(0deg, #9aa3ad 0 3px, #b9c0c7 3px 6px); filter: grayscale(1) contrast(.7); }
.photo.n3 { background: radial-gradient(circle, #ffffff 0 20%, #2b6cff 21% 40%, #ffffff 41%); }
.photo .badge { position: absolute; top: 12px; left: 12px; }

/* 07 Voice */
.slider { padding: 18px 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 140px minmax(0, 1fr) 140px; gap: 16px; align-items: center; font-size: 14px; }
.slider:first-child { border-top: 0; }
.slider span:last-child { text-align: right; }
.track { position: relative; height: 6px; border-radius: 99px; background: var(--sand); }
.track i { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--brick); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--brick); transform: translateX(-50%); }
.words { display: grid; grid-template-columns: 1fr 1fr; }
.words > div { padding: 20px 22px; }
.words > div + div { border-left: 1px solid var(--line); }
.words ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.words li { padding: 6px 10px; border-radius: 8px; background: var(--stone); font-size: 14px; }
.words .no li { background: #f6e3df; text-decoration: line-through; text-decoration-color: rgba(180, 55, 42, .5); }
.ba { padding: 20px 22px; }
.ba blockquote { margin: 12px 0 0; padding: 0; font: 500 18px/1.45 var(--display); }

/* 08 Applications */
.app .stage { height: 260px; display: grid; place-items: center; background: var(--sand); padding: 24px; overflow: hidden; }
.bcard { width: 236px; height: 136px; border-radius: 6px; box-shadow: 0 12px 30px rgba(20, 32, 46, .18); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; }
.bcard.front { background: var(--ink); align-items: flex-start; }
.bcard.back { background: var(--white); color: var(--ink); }
.bcards { position: relative; width: 300px; height: 200px; }
.bcards .front { position: absolute; left: 0; top: 0; transform: rotate(-4deg); }
.bcards .back { position: absolute; right: 0; bottom: 0; transform: rotate(3deg); }
.letter { width: 170px; height: 240px; background: var(--white); box-shadow: 0 12px 30px rgba(20, 32, 46, .16); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.letter .ln { height: 4px; background: var(--sand); border-radius: 2px; }
.browser { width: 100%; max-width: 340px; background: var(--white); border-radius: 10px; box-shadow: 0 12px 30px rgba(20, 32, 46, .16); overflow: hidden; }
.browser .bar { height: 22px; background: var(--stone); display: flex; align-items: center; gap: 4px; padding: 0 8px; }
.browser .bar i { width: 6px; height: 6px; border-radius: 50%; background: #cfc7b9; }
.browser .pg { padding: 18px; background: var(--ink); color: var(--white); height: 150px; display: flex; flex-direction: column; justify-content: flex-end; }
.browser .pg b { font: 700 18px/1.1 var(--display); max-width: 200px; }
.social { width: 190px; height: 190px; background: var(--brick); color: var(--white); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 12px 30px rgba(20, 32, 46, .18); }
.social b { font: 700 22px/1.05 var(--display); }
.sig { width: 100%; max-width: 330px; background: var(--white); border-radius: 8px; padding: 16px; box-shadow: 0 12px 30px rgba(20, 32, 46, .12); font-size: 11px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; }
.slide { width: 300px; aspect-ratio: 16/9; background: var(--stone); box-shadow: 0 12px 30px rgba(20, 32, 46, .16); padding: 18px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.slide::before { content: ""; position: absolute; left: 18px; top: 0; width: 40px; height: 5px; background: var(--brick); }

/* 09 Files */
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--white); font-size: 13px; font-weight: 500; }
.filters button.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.files { width: 100%; border-collapse: collapse; background: var(--white); }
.files td { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; vertical-align: middle; }
.files tr:first-child td { border-top: 0; }
.files .th { width: 72px; }
.files .th div { width: 56px; height: 40px; border-radius: 6px; background: var(--stone); display: grid; place-items: center; padding: 6px; }
.files .th img { max-height: 26px; width: auto; }
.files .th div.dark { background: var(--ink); }
.files td:last-child { text-align: right; white-space: nowrap; }
.files .kind { color: var(--muted); font-size: 13px; }

/* 10 Governance */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 90px 110px minmax(0, 1fr); gap: 16px; padding: 14px 20px; border-top: 1px solid var(--line); font-size: 14px; }
.timeline li:first-child { border-top: 0; }
.timeline b { font-family: var(--display); }
.contact { display: flex; gap: 16px; align-items: center; padding: 22px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); display: grid; place-items: center; font: 700 16px var(--display); flex: none; }

.foot { max-width: 1080px; margin: 72px auto 0; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 10px; font-size: 14px; transition: .2s; pointer-events: none; z-index: 50; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Mobile: the sidebar becomes a scrollable chip row under the top bar */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onepage { grid-template-columns: 1fr; }
  .onepage > div { border-left: 0; border-top: 1px solid var(--line); }
  .onepage > div:first-child { border-top: 0; }
}
@media (max-width: 820px) {
  .top .brand { min-width: 0; }
  .top .brand span, .top .pill, .search kbd { display: none; }
  .top .meta .btn span { display: none; }
  .layout { grid-template-columns: 1fr; }
  .side { position: sticky; top: var(--header); z-index: 20; height: auto; display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--line); background: var(--paper); scrollbar-width: none; }
  .side h4, .side .card-dl { display: none; }
  .side a { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--white); font-size: 13px; }
  .side a span { display: none; }
  html { scroll-padding-top: calc(var(--header) + 70px); }
  .sec { padding-top: 48px; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .num { padding: 0; }
  .sec-head p, .sec-head .actions { grid-column: 1; grid-row: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero .mark { justify-self: start; width: 84px; order: -1; }
  .hero dl { grid-template-columns: 1fr 1fr; }
  .g2, .g3, .g4, .isnot, .words, .spec { grid-template-columns: 1fr; }
  .isnot > div + div, .words > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .spec .big { height: 160px; }
  .slider { grid-template-columns: 1fr 1fr; }
  .slider .track { grid-column: 1 / -1; grid-row: 2; }
  .scale td:last-child, .files .kind, .files .size { display: none; }
  .stage-main { height: 280px; }
  .timeline li { grid-template-columns: 70px 1fr; }
  .timeline li span:last-child { grid-column: 1 / -1; }
  .sub { flex-direction: column; }
}
@media print {
  .top, .side, .toast, .seg, .dl, .actions { display: none !important; }
  .layout { display: block; }
  .sec { break-before: page; border: 0; }
}