/* WoodCAD — the site's only stylesheet. Direction «Майстерня» (workshop), chosen 2026-09-21 from three mockups:
   warm paper, wood, the helmet's yellow as the single accent.

   Two rules this file lives under, both from the site's Content-Security-Policy (`script-src 'none'`, everything
   from our own origin):
     * NO SCRIPT anywhere on the site — every moving part here is CSS: the menus, the tabs, the states;
     * NO FONT, image or stylesheet from another origin — system fonts, our own files, inline SVG.

   Readable first: large enough text, honest contrast, one column on a phone. */

:root {
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --display: "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

  --bg: #FBF7F1;
  --surface: #FFFFFF;
  --surface-2: #F4EEE3;
  --ink: #221E1A;
  --muted: #6B6257;
  --line: #E7DDCD;
  --line-strong: #CFC2AE;

  --helmet: #F2B01E;
  --helmet-dark: #D8930F;
  --helmet-ink: #3A2A07;
  --accent: #F2B01E;
  --accent-ink: #2A1E03;
  --accent-link: #99610E;
  --accent-soft: #FBEFD6;

  --radius: 14px;
  --radius-btn: 10px;
  --shadow: 0 1px 2px rgba(60, 45, 20, 0.05), 0 10px 26px rgba(60, 45, 20, 0.06);

  --ok-bg: #EAF5E4; --ok-ink: #2F6B2A; --ok-line: #CBE3C3;
  --warn-bg: #FFF3D6; --warn-ink: #8A5A00;
  --bad: #A8331F; --bad-bg: #FBE7E2;

  --draw-bg: #FFFDF8;
  --draw-line: #6B5B45;
  --draw-fill: #EADFC9;
  --draw-fill-2: #F3EAD9;
  --draw-dim: #99610E;

  --hero-bg: linear-gradient(180deg, #FDF9F3 0%, #F6EEE1 100%);
  --johnny-bg: linear-gradient(180deg, #F6EEE1 0%, #FBF7F1 100%);
  --art-paper: rgba(255, 253, 248, 0.94);
}

/* The dark theme: the same workshop at night (the model viewer's palette). Chosen with the theme button — a cookie
   the server reads, so the page arrives in it — and with no choice made, the system's colours decide. */
:root[data-theme="dark"] {
  --bg: #12100E; --surface: #1E1B18; --surface-2: #27231F; --ink: #EFE8DC; --muted: #A69B8B;
  --line: #36302A; --line-strong: #4A423A;
  --accent-link: #F5C86A; --accent-soft: #3A2E12;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
  --ok-bg: #1D2E1C; --ok-ink: #A3D69B; --ok-line: #2E4A2C;
  --warn-bg: #3A2E12; --warn-ink: #F5D58A;
  --bad: #F2A08F; --bad-bg: #3A1D17;
  --draw-bg: #211D19; --draw-line: #CDBFA8; --draw-fill: #3A3229; --draw-fill-2: #2E2822; --draw-dim: #F5C86A;
  --hero-bg: linear-gradient(180deg, #1E1B18 0%, #12100E 100%);
  --johnny-bg: linear-gradient(180deg, #1E1B18 0%, #12100E 100%);
  --art-paper: rgba(30, 27, 24, 0.94);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12100E; --surface: #1E1B18; --surface-2: #27231F; --ink: #EFE8DC; --muted: #A69B8B;
    --line: #36302A; --line-strong: #4A423A;
    --accent-link: #F5C86A; --accent-soft: #3A2E12;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
    --ok-bg: #1D2E1C; --ok-ink: #A3D69B; --ok-line: #2E4A2C;
    --warn-bg: #3A2E12; --warn-ink: #F5D58A;
    --bad: #F2A08F; --bad-bg: #3A1D17;
    --draw-bg: #211D19; --draw-line: #CDBFA8; --draw-fill: #3A3229; --draw-fill-2: #2E2822; --draw-dim: #F5C86A;
    --hero-bg: linear-gradient(180deg, #1E1B18 0%, #12100E 100%);
    --johnny-bg: linear-gradient(180deg, #1E1B18 0%, #12100E 100%);
    --art-paper: rgba(30, 27, 24, 0.94);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-link); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
p { margin: 0 0 1rem; }
small { font-size: 0.85em; }

/* ######################################################################################################## */
/* The frame: header, footer, messages                                                                      */
/* ######################################################################################################## */

/* The page's column (the author, 2026-10-22: a page that runs the whole width of a wide screen is hard to read).
   Backgrounds still go edge to edge; what is on them stays within --column, with at least the gutter at the
   sides on a narrow screen. */
:root { --column: 70rem; --side: max(clamp(1rem, 4vw, 3rem), calc((100% - var(--column)) / 2)); }

header.top {
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap;
  padding: 0.9rem var(--side); border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 50;          /* stays at the top while the page scrolls (the author) */
}
[id] { scroll-margin-top: 5rem; }                 /* an anchor lands below the header, not under it */
a.account { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--ink); border: 1px solid var(--line-strong); background: var(--surface); }
a.account:hover { background: var(--accent-soft); border-color: var(--helmet); }
a.account svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.mark { width: 42px; height: 34px; flex: none; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; margin-right: auto; }
header nav a { color: var(--muted); text-decoration: none; }
header nav a:hover { color: var(--ink); }
.top-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
form.inline { display: inline; margin: 0; }
/* the language list (web/_languages.html): a <details> opened with a click — no script */
details.langs { position: relative; }
details.langs > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--muted); padding: 0.25rem 0.45rem; border-radius: 8px; font-weight: 600; font-size: 0.9rem; }
details.langs > summary::-webkit-details-marker { display: none; }
details.langs > summary:hover, details.langs[open] > summary { color: var(--ink); background: var(--accent-soft); }
details.langs > summary svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
details.langs > summary svg.chevron { width: 12px; height: 12px; transition: transform 0.15s; }
details.langs[open] > summary svg.chevron { transform: rotate(180deg); }
details.langs .menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 11.5rem; z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow);
  padding: 0.3rem; display: grid; gap: 2px; margin: 0; }
details.langs .menu a { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-radius: 8px; padding: 0.5rem 0.65rem; color: var(--ink); text-decoration: none; }
details.langs .menu a:hover { background: var(--accent-soft); }
details.langs .menu a .code { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
details.langs .menu a.current { font-weight: 700; }
details.langs .menu a.current .code { color: var(--accent-link); }
/* the theme button: of its two buttons, the one leading away from the theme on screen */
button.theme { background: none; border: 0; padding: 0.25rem; color: var(--muted); display: inline-grid; place-items: center; }
button.theme:hover { color: var(--ink); filter: none; }
button.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
button.theme.to-light, :root[data-theme="dark"] button.theme.to-dark { display: none; }
:root[data-theme="dark"] button.theme.to-light { display: inline-grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) button.theme.to-light { display: inline-grid; }
  :root:not([data-theme="light"]) button.theme.to-dark { display: none; }
}

/* A narrow screen (the author's iPhone, 2026-10-23): the header's three parts no longer fit one row, the actions
   wrapped to the left of a second one, and the language list, hung from the right edge of its button, opened past
   the screen's left edge. Below this width the actions stay up on the right beside the mark — where the list has
   room — and the menu takes a row of its own. 44rem is above the widest one-row header measured (about 650 px,
   signed in), so nothing between wraps the old way. */
@media (max-width: 44rem) {
  header.top nav { order: 3; flex-basis: 100%; margin-right: 0; }
  .top-actions { margin-left: auto; justify-content: flex-end; }
}

main.page { max-width: 54rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 1rem 4rem; }
main.narrow { max-width: 30rem; }
main.wide { max-width: none; margin: 0; padding: 0; }
h1 { font-size: 1.9rem; margin: 0.3rem 0 1.2rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.6rem; }

ul.messages { list-style: none; max-width: 54rem; margin: 1rem auto 0; padding: 0 1rem; }
ul.messages li {
  padding: 0.7rem 0.9rem; border-radius: var(--radius-btn); margin-bottom: 0.4rem;
  background: var(--warn-bg); color: var(--warn-ink);
}
ul.messages li.success { background: var(--ok-bg); color: var(--ok-ink); }
ul.messages li.error { background: var(--bad-bg); color: var(--bad); }

footer.foot {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding: 1.6rem var(--side); border-top: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); font-size: 0.9rem;
}
footer.foot a { color: var(--muted); text-decoration: none; margin-left: 1rem; }
footer.foot a:hover { color: var(--ink); }
footer.foot .rights { flex-basis: 100%; font-size: 0.8rem; }

/* ######################################################################################################## */
/* Buttons, forms, tables — everything the pages are built from                                             */
/* ######################################################################################################## */

button, .button {
  display: inline-block; font: 500 0.95rem/1 var(--font); cursor: pointer; text-decoration: none;
  padding: 0.7rem 1.2rem; border-radius: var(--radius-btn);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); transition: 0.15s;
}
button:hover, .button:hover { filter: brightness(1.06); }
button.secondary, .button.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
button.danger, .button.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
button.small, .button.small { padding: 0.42rem 0.75rem; font-size: 0.85rem; }
button.big { padding: 0.95rem 1.6rem; font-size: 1.02rem; }
button.wide { width: 100%; }
button.link { background: none; border: none; color: var(--accent-link); padding: 0; text-decoration: underline; }
button[disabled] { opacity: 0.45; cursor: not-allowed; }
a.danger { color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }

.field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 1.1rem; }
.field label { font-size: 0.9rem; color: var(--muted); }
.field input {
  font: inherit; padding: 0.75rem 0.9rem; max-width: 26rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn); background: var(--surface); color: var(--ink);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field small { color: var(--muted); }
.error, .errors { color: var(--bad); }
ul.errors { padding-left: 1.2rem; }

.panel-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem 1.4rem; margin-bottom: 1.2rem; box-shadow: var(--shadow);
}
.panel-box h2 { font-size: 1.05rem; margin: 0 0 0.9rem; }
.panel-box h2 small { font-weight: 400; color: var(--muted); }

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin-top: 0.6rem; }
th {
  text-align: left; font-weight: 500; color: var(--muted); font-size: 0.8rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.5rem 1rem 0.5rem 0; border-bottom: 1px solid var(--line);
}
td { padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--line); }

.badge {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem;
  background: var(--accent-soft); color: var(--accent-link); border: 1px solid transparent;
}
.badge.soft { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }

.state { padding: 0.6rem 0.9rem; border-radius: var(--radius-btn); display: inline-block; }
.state.active { background: var(--ok-bg); color: var(--ok-ink); }
.state.ended { background: var(--warn-bg); color: var(--warn-ink); }
.state.none { background: var(--surface-2); color: var(--muted); }

.notice, .warning { padding: 0.9rem 1.1rem; border-radius: var(--radius); margin: 1rem 0; }
.notice { background: var(--warn-bg); color: var(--warn-ink); }
.warning { background: var(--bad-bg); color: var(--bad); border: 1px solid var(--bad); }
.muted { color: var(--muted); }
.hint { color: var(--muted); font-size: 0.88rem; }

p.code {
  font: 700 2rem/1.2 var(--mono); letter-spacing: 0.08em; margin: 0.5rem 0; color: var(--ink);
}

ul.devices { list-style: none; padding: 0; margin: 0; }
ul.devices li {
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line);
}
ul.devices li strong { min-width: 8rem; }
ul.devices li span { color: var(--muted); font-size: 0.9rem; }
ul.devices input {
  font: inherit; padding: 0.35rem 0.55rem; width: 10rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
}

/* ######################################################################################################## */
/* The drawing — the same carcass in the hero and beside the sign-in form                                   */
/* ######################################################################################################## */

.drawing { width: 100%; height: auto; background: var(--draw-bg); border-radius: var(--radius); padding: 0.5rem; }
.brand-art { padding: 1.6rem; }

/* ######################################################################################################## */
/* The front page                                                                                           */
/* ######################################################################################################## */

.hero {
  position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(2rem, 6vw, 4.5rem) var(--side);
  background: var(--hero-bg);
}
.hero::after {                                   /* a hint of wood grain, drawn rather than downloaded */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background: repeating-linear-gradient(97deg, rgba(138, 90, 43, 0.05) 0 2px, transparent 2px 9px);
}
.hero > * { position: relative; z-index: 1; }
.eyebrow {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-link);
  margin-bottom: 0.8rem;
}
.hero h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 1.1rem; }
.lead { font-size: 1.1rem; color: var(--muted); max-width: 34rem; }
.hero-buttons { display: flex; gap: 0.8rem; flex-wrap: wrap; margin: 1.6rem 0 0.9rem; }
.hero-note { font-size: 0.85rem; color: var(--muted); margin: 0; }
.hero-art { display: flex; flex-direction: column; gap: 1rem; }

ul.spec { list-style: none; margin: 0; padding: 0; font: 13px/1.5 var(--mono); color: var(--muted); }
ul.spec li {
  display: grid; grid-template-columns: 1.3fr 0.8fr 0.9fr; gap: 0.5rem;
  padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--line);
}
ul.spec li span:first-child { color: var(--ink); }

.band { padding: clamp(2.2rem, 5vw, 4rem) var(--side); }
.band > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 1.2rem; }
.band-lead { color: var(--muted); max-width: 42rem; }
.band.tinted { background: var(--surface-2); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  padding: 1.3rem 1.4rem; box-shadow: var(--shadow);
}
.card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.card h3::before {
  content: ""; display: block; width: 26px; height: 3px; border-radius: 2px;
  background: var(--helmet); margin-bottom: 0.7rem;
}
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }

ol.how {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem; margin: 0; padding: 0;
}
ol.how li { border-top: 2px solid var(--accent); padding-top: 1rem; }
ol.how .num { font: 700 0.85rem/1 var(--mono); color: var(--accent-link); display: block; margin-bottom: 0.5rem; }
ol.how b { display: block; margin-bottom: 0.35rem; }
ol.how p { color: var(--muted); font-size: 0.95rem; margin: 0; }

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; max-width: 62rem; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow);
}
.plan.best { border-color: var(--accent); }
.plan .tag {
  position: absolute; top: -0.75rem; left: 1.4rem; background: var(--accent); color: var(--accent-ink);
  font-size: 0.75rem; padding: 0.25rem 0.7rem; border-radius: 999px;
}
.plan h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.price { font-family: var(--display); font-size: 1.7rem; font-weight: 700; margin-bottom: 1rem; }
.price small { font-size: 0.9rem; font-weight: 400; color: var(--muted); }
.plan ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.plan li { padding: 0.4rem 0 0.4rem 1.5rem; position: relative; color: var(--muted); font-size: 0.95rem; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-link); }

/* The eight steps of a project, each with a picture of its own. Odd steps put the picture on the right, even
   ones on the left, so the page reads as a way through rather than as a list. */
ol.journey { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(1.5rem, 4vw, 3rem); }
ol.journey > li {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center;
}
ol.journey > li:nth-child(even) .journey-text { order: 2; }
ol.journey .num {
  display: block; font: 700 0.85rem/1 var(--mono); letter-spacing: 0.1em;
  color: var(--accent-link); margin-bottom: 0.5rem;
}
ol.journey h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
ol.journey p { color: var(--muted); margin: 0; }
ol.journey p + p { margin-top: 0.75rem; }

/* A picture from the add-on. The frame is drawn even while the picture is missing, so the page already has its
   real proportions and nothing jumps when the screenshots arrive. */
figure.shot { margin: 0; }
figure.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.shot-frame {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 16 / 10; padding: 1rem; border-radius: var(--radius);
  border: 1px dashed var(--line-strong); background: var(--draw-bg); color: var(--muted); font-size: 0.9rem;
}

ul.planned {
  list-style: none; margin: 0 0 1rem; padding: 0; columns: 2; column-gap: 2rem; max-width: 52rem;
}
ul.planned li {
  break-inside: avoid; padding: 0.35rem 0 0.35rem 1.4rem; position: relative; color: var(--muted);
}
ul.planned li::before {
  content: ""; position: absolute; left: 0; top: 0.95rem; width: 8px; height: 2px; background: var(--line-strong);
}

.johnny {
  display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: center;
  background: var(--johnny-bg);
}
.johnny img { width: 100%; height: auto; border-radius: var(--radius); }
.johnny .shot-frame { aspect-ratio: 3 / 4; }
.johnny-text p { color: var(--muted); max-width: 46rem; }
.johnny-sign { font-style: italic; }

/* ######################################################################################################## */
/* Signing in and up — the form beside a drawing                                                            */
/* ######################################################################################################## */

.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 78vh; max-width: var(--column); margin: 0 auto; }
.split-art {
  display: flex; align-items: center; justify-content: center; padding: 2rem;
  background: linear-gradient(160deg, #8A5A2B 0%, #5E3B1B 60%, #3C2611 100%);
}
.split-art-inner { max-width: 26rem; text-align: center; }
.split-art .drawing { background: var(--art-paper); }
.split-form { display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--surface); }
.form-box { width: 100%; max-width: 24rem; }
.form-box h1 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.form-box .sub { color: var(--muted); margin-bottom: 1.6rem; }
.form-box .field input { max-width: none; }
.form-row { display: flex; justify-content: space-between; font-size: 0.9rem; margin-bottom: 1.1rem; }
.form-note { color: var(--muted); font-size: 0.85rem; margin-top: 1.2rem; }
/* the admin's second factor: six digits, large and spaced; the command that sets the key */
.field input.otp { font: 700 1.6rem/1 var(--mono); letter-spacing: 0.45em; text-align: center; padding: 0.7rem 0.4rem; }
pre.cmd {
  font: 0.85rem/1.5 var(--mono); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-btn); padding: 0.7rem 0.9rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 1rem;
}

/* ######################################################################################################## */
/* The admin (/staff/)                                                                                      */
/* ######################################################################################################## */

.admin { display: grid; grid-template-columns: 250px 1fr; min-height: 80vh; max-width: var(--column); margin: 0 auto; }
.side {
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.15rem;
}
.side-head {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  padding: 1rem 0.6rem 0.4rem;
}
.side a {
  text-decoration: none; color: var(--muted); font-size: 0.93rem;
  padding: 0.5rem 0.6rem; border-radius: var(--radius-btn);
}
.side a:hover { color: var(--ink); background: var(--surface-2); }
.side a.current { color: var(--ink); background: var(--accent-soft); font-weight: 500; }
.side-foot {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: 0.85rem; color: var(--muted);
}
.admin-main { padding: 1.2rem clamp(1rem, 3vw, 2rem) 3rem; max-width: 70rem; }
.admin-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem;
  color: var(--muted); font-size: 0.9rem;
}
.crumbs b { color: var(--ink); }
.crumbs i { font-style: normal; opacity: 0.5; margin: 0 0.35rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; box-shadow: var(--shadow);
}
.stat-label { font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-value { font-family: var(--display); font-size: 1.8rem; font-weight: 700; }
.mono, td.key { font-family: var(--mono); font-size: 0.86rem; }
ul.record { list-style: none; margin: 0; padding: 0; font-size: 0.88rem; }
ul.record li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
ul.record li b { color: var(--ink); font-weight: 500; }

@media (max-width: 900px) {
  .hero, .split, .johnny, .admin { grid-template-columns: 1fr; }
  ol.journey > li { grid-template-columns: 1fr; }
  ol.journey > li:nth-child(even) .journey-text { order: 0; }
  ul.planned { columns: 1; }
  .side { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .side-head, .side-foot { display: none; }
  ul.spec li { grid-template-columns: 1fr; gap: 0; }
}