/* ==========================================================================
   Parcelademy – stylesheet
   Sections: 1 Fonts · 2 Tokens · 3 Reset & base · 4 Layout helpers
             5 Header · 6 Buttons · 7 Footer
   ========================================================================== */

/* 1 ─ Fonts (self-hosted, OFL licence – see /fonts) ─────────────────────── */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* 2 ─ Design tokens ──────────────────────────────────────────────────────── */

:root {
  /* Surfaces: warm paper and sand */
  --paper: #F4EEE5;
  --paper-2: #ECE3D5;
  --sand: #E3D4BE;
  --sand-deep: #CDB797;

  /* Ink */
  --ink: #2A2019;
  --ink-2: #5E4E3F;
  --line: rgb(42 32 25 / 0.16);
  --line-strong: rgb(42 32 25 / 0.42);

  /* Accent: orange. --orange for fills and large text, --orange-text for small text */
  --orange: #E2621B;
  --orange-hi: #F07B36;
  --orange-lo: #C24E10;
  --orange-text: #B4450C;

  /* Wrong / right – used only for that meaning */
  --red: #D94F45;
  --red-text: #B3362D;
  --green: #3E9E57;
  --green-text: #2C7A41;

  /* Cardboard boxes */
  --box-hi: #F4CF97;
  --box: #E8B677;
  --box-lo: #D49C5B;
  --tape: #CF9150;
  --box-heavy-hi: #D9A570;
  --box-heavy: #BE854D;
  --box-heavy-lo: #9F6A38;

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.92rem);
  --step-0: clamp(1.03rem, 0.98rem + 0.25vw, 1.15rem);
  --step-1: clamp(1.22rem, 1.1rem + 0.55vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --step-3: clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem);
  --step-4: clamp(3.6rem, 2rem + 8vw, 9.5rem);

  /* Space */
  --gutter: clamp(16px, 4.5vw, 56px);
  --space-s: clamp(0.75rem, 0.6rem + 0.6vw, 1.1rem);
  --space-m: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --space-l: clamp(2rem, 1.4rem + 3vw, 4rem);
  --space-xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* Shape & depth: the soft clay look */
  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --shadow-clay:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -3px 6px rgb(120 80 40 / 0.06),
    0 2px 4px -2px rgb(92 60 25 / 0.18),
    0 22px 44px -24px rgb(92 60 25 / 0.42);
  --shadow-clay-hover:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -3px 6px rgb(120 80 40 / 0.06),
    0 4px 8px -3px rgb(92 60 25 / 0.2),
    0 34px 60px -28px rgb(92 60 25 / 0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --header-h: 64px;
}

/* 3 ─ Reset & base ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--orange-text); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--orange); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-s);
  font-weight: 600;
}
.skip-link:focus { top: 12px; color: var(--paper); }

/* 4 ─ Layout helpers & type styles ───────────────────────────────────────── */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-xl); }

/* Mono "label" text – used for small technical tags like RULE 01 or ≈ 45 CM */
.label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Section kicker: "02 — The problem" with a strip of orange tape */
.kicker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-m);
}
.kicker::before {
  content: "";
  width: 2.25rem;
  height: 0.55rem;
  border-radius: 2px;
  background: var(--orange);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}

/* Big condensed display headlines */
.display {
  font-weight: 850;
  font-stretch: 68%;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.h2 { font-size: var(--step-3); }

.lead {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 34ch;
  text-wrap: pretty;
}

.prose { max-width: 60ch; color: var(--ink-2); text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 650; }

/* 5 ─ Header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgb(244 238 229 / 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  font-weight: 850;
  font-stretch: 75%;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.logo:hover { color: var(--ink); }
.logo__mark { width: 28px; height: 28px; fill: var(--box); }
.logo__mark .logo__top { fill: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .logo__top { transition: transform 0.4s var(--ease-spring); }
  .logo:hover .logo__top { transform: translateY(-3px); }
}

.site-nav { margin-left: auto; display: none; }
.site-nav ul { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.site-nav a:hover { background: var(--paper-2); color: var(--ink); }

@media (min-width: 900px) {
  .site-nav { display: block; }
}

/* 6 ─ Buttons ────────────────────────────────────────────────────────────── */

/* A chunky, physical-feeling button: it has a "base" (bottom shadow) and
   sinks into it when pressed. */
.btn {
  --btn-bg: var(--orange);
  --btn-hi: var(--orange-hi);
  --btn-base: var(--orange-lo);
  --btn-fg: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--btn-hi), var(--btn-bg) 60%);
  color: var(--btn-fg);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 5px 0 var(--btn-base),
    0 14px 22px -8px rgb(92 50 15 / 0.45);
  transform: translateY(0);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), filter 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.btn:hover { color: var(--btn-fg); filter: brightness(1.04); }
.btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 1px 0 var(--btn-base),
    0 6px 10px -6px rgb(92 50 15 / 0.45);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  filter: saturate(0.2);
  opacity: 0.6;
}

.btn--quiet {
  --btn-bg: var(--paper);
  --btn-hi: #FFFBF5;
  --btn-base: var(--sand-deep);
}

.btn__icon { width: 1.1em; height: 1.1em; flex: none; }

/* 7 ─ Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--space-l);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-m);
}
.site-footer__brand {
  font-weight: 850;
  font-stretch: 70%;
  font-size: 1.5rem;
  text-transform: uppercase;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: var(--step--1);
}

/* 8 ─ Clay box ───────────────────────────────────────────────────────────── */

/* One cardboard box. Its size comes from the parent (push test, rule scenes).
   The look: soft gradient body, a strip of tape from the top, rounded corners
   and inner highlights – the "clay" feel. */
.cbox {
  border-radius: 16% / 20%;
  background:
    linear-gradient(90deg, transparent 42%, var(--tape) 42% 58%, transparent 58%) top center / 100% 36% no-repeat,
    linear-gradient(180deg, var(--box-hi) 0%, var(--box) 48%, var(--box-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgb(255 255 255 / 0.5),
    inset 2px 0 3px rgb(255 255 255 / 0.18),
    inset 0 -3px 5px rgb(130 75 25 / 0.22),
    0 2px 3px rgb(90 55 20 / 0.22);
}
/* A small shipping label on some boxes */
.cbox--label { position: relative; }
.cbox--label::after {
  content: "";
  position: absolute;
  right: 12%; bottom: 16%;
  width: 26%; height: 22%;
  border-radius: 12%;
  background: #FBF4E8;
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.08);
  opacity: 0.85;
}
.cbox--heavy {
  --tape: #8E5C2E;
  background:
    linear-gradient(90deg, transparent 40%, var(--tape) 40% 60%, transparent 60%) top center / 100% 36% no-repeat,
    linear-gradient(180deg, var(--box-heavy-hi) 0%, var(--box-heavy) 50%, var(--box-heavy-lo) 100%);
}

/* 9 ─ Hero ───────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(1.5rem, 4vw, 4rem) var(--space-xl);
  overflow: clip;
}

.hero__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.3fr); }
}

.hero__text { container-type: inline-size; }
.hero__eyebrow { margin-bottom: var(--space-m); }

.hero__title {
  /* cqi = % of the text column's width. The name breaks as PARCEL / ADEMY;
     "PARCEL" is ~2.84em wide, so 34.5cqi makes it fill the column on every
     screen size (with a little safety margin). */
  font-size: 34.5cqi;
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.8;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: var(--space-m);
}
.hero__word { display: block; }
.hero__word > span { display: inline-block; transform-origin: 50% 100%; }
.hero__word--accent {
  color: var(--orange);
  text-shadow: 0 0.035em 0 var(--orange-lo);
}

/* Letters drop in one by one and squash a little on landing – like boxes. */
@media (prefers-reduced-motion: no-preference) {
  .hero__word > span { animation: letter-drop 0.7s var(--ease-out) both; }
  .hero__word:first-of-type > span:nth-child(1) { animation-delay: 0.05s; }
  .hero__word:first-of-type > span:nth-child(2) { animation-delay: 0.09s; }
  .hero__word:first-of-type > span:nth-child(3) { animation-delay: 0.13s; }
  .hero__word:first-of-type > span:nth-child(4) { animation-delay: 0.17s; }
  .hero__word:first-of-type > span:nth-child(5) { animation-delay: 0.21s; }
  .hero__word:first-of-type > span:nth-child(6) { animation-delay: 0.25s; }
  .hero__word--accent > span:nth-child(1) { animation-delay: 0.33s; }
  .hero__word--accent > span:nth-child(2) { animation-delay: 0.37s; }
  .hero__word--accent > span:nth-child(3) { animation-delay: 0.41s; }
  .hero__word--accent > span:nth-child(4) { animation-delay: 0.45s; }
  .hero__word--accent > span:nth-child(5) { animation-delay: 0.49s; }
  .hero__lead, .hero__actions { animation: fade-up 0.8s var(--ease-out) 0.55s both; }
}
@keyframes letter-drop {
  0%   { transform: translateY(-0.5em); opacity: 0; }
  55%  { transform: translateY(0) scale(1.06, 0.9); opacity: 1; }
  78%  { transform: translateY(-0.03em) scale(0.98, 1.03); }
  100% { transform: none; }
}
@keyframes fade-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.hero__lead { margin-bottom: var(--space-l); font-weight: 450; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}

/* 10 ─ Push test ─────────────────────────────────────────────────────────── */

.push-test {
  position: relative;
  padding: clamp(14px, 2.4vw, 28px);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, #FBF7F0, #F0E6D8);
  box-shadow: var(--shadow-clay);
}

.push-test__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: clamp(8px, 2vw, 20px);
}
.push-test__title { display: flex; align-items: center; gap: 0.5rem; color: var(--ink); font-weight: 700; }
.push-test__title::before {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgb(226 98 27 / 0.2);
}

/* The two stages share one scale: their widths are in the same ratio as
   their widths in "stage units" (360 : 240). JS sets --s = px per unit. */
.push-test__stages,
.push-test__floor {
  display: grid;
  grid-template-columns: 360fr 240fr;
}
.push-test__stages {
  --s: 1;
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  background-image:
    linear-gradient(to right, rgb(42 32 25 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(42 32 25 / 0.05) 1px, transparent 1px);
  background-size: calc(var(--s) * 24px) calc(var(--s) * 24px);
  background-position: left bottom;
}

.pt-stage { position: relative; }
.pt-stage--towers {
  aspect-ratio: 360 / 236;
  /* clip the left and top edges: the ram slides in from "off stage",
     boxes drop in from above; the heap may spill over the right edge */
  clip-path: inset(0 -40% -6% 0);
}
.pt-stage--t {
  aspect-ratio: 240 / 236;
  clip-path: inset(0 -40% -6% 0);
}

.pt-stage .cbox {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--s) * 56px);
  height: calc(var(--s) * 44px);
  will-change: transform;
}

/* The pusher: a rod with a rounded plate, slides in from the left */
.pt-ram {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--s) * 96px);
  height: calc(var(--s) * 30px);
  display: flex;
  align-items: center;
  transform: translateX(-120%);
  will-change: transform;
}
.pt-ram__rod {
  flex: 1;
  height: 28%;
  border-radius: 99px;
  background: linear-gradient(180deg, #8C7A68, #5E4E3F);
}
.pt-ram__plate {
  width: calc(var(--s) * 13px);
  height: 100%;
  border-radius: calc(var(--s) * 6px);
  background: linear-gradient(90deg, var(--orange-lo), var(--orange) 45%, var(--orange-hi));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 2px 4px rgb(92 50 15 / 0.3);
}

/* Verdict marks: pop in with a spring */
.pt-mark {
  position: absolute;
  width: calc(var(--s) * 54px);
  height: calc(var(--s) * 54px);
  top: calc(var(--s) * 6px);
  z-index: 300;
  opacity: 0;
  transform: scale(0.2) rotate(-25deg);
  transition: transform 0.55s var(--ease-spring), opacity 0.2s;
  filter: drop-shadow(0 4px 4px rgb(92 50 15 / 0.22));
}
.pt-mark.is-shown { opacity: 1; transform: none; }
.pt-mark--wrong { left: calc(var(--s) * 176px); stroke: var(--red); }
.pt-mark--right { left: calc(var(--s) * 93px); stroke: var(--green); }
.pt-mark--wrong .pt-mark__shade { stroke: #A8372F; }
.pt-mark--right .pt-mark__shade { stroke: #2A7440; }

.push-test__floor {
  border-top: 3px solid var(--ink);
  padding-top: 0.9rem;
  background: repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / 25)) top / 100% 7px no-repeat;
}
.push-test__floor > :first-child { padding-left: calc(20 / 360 * 100%); }
.push-test__floor > :last-child { padding-left: calc(34 / 240 * 100%); }
.push-test__floor .label { font-size: 0.72rem; color: var(--ink); }

.push-test__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: clamp(16px, 2.5vw, 26px);
}
.btn--push { min-width: 9.5rem; }
.push-test__status {
  flex: 1 1 14rem;
  min-height: 3em;
  display: flex;
  align-items: center;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--ink-2);
}
.push-test__status.is-result { color: var(--ink); font-weight: 600; }

/* A soft pulsing ring that invites the first click */
@media (prefers-reduced-motion: no-preference) {
  .btn--push.is-inviting::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 18px;
    border: 2px solid var(--orange);
    animation: invite 2.2s var(--ease-out) infinite;
    pointer-events: none;
  }
}
@keyframes invite {
  0%   { opacity: 0.8; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.18, 1.35); }
}

/* 11 ─ Scroll reveal ─────────────────────────────────────────────────────── */

/* Only hidden when JS runs (html.js) and motion is welcome –
   otherwise everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
  }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .problem__cards .reveal:nth-child(2) { transition-delay: 0.1s; }
  .js .problem__cards .reveal:nth-child(3) { transition-delay: 0.2s; }
}

/* 12 ─ The problem ───────────────────────────────────────────────────────── */

.problem { border-top: 1px solid var(--line); }

.problem__intro {
  display: grid;
  gap: var(--space-m) var(--space-l);
  align-items: end;
}
@media (min-width: 900px) {
  .problem__intro { grid-template-columns: 1fr 1fr; }
}

.problem__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-m);
  margin-top: var(--space-l);
}

.card {
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, #FBF7F0, #F1E8DB);
  box-shadow: var(--shadow-clay);
  color: var(--ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.45s var(--ease-spring), box-shadow 0.45s var(--ease-out); }
}
.card:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-clay-hover); }
.card__tag { color: var(--orange-text); margin-bottom: 0.75rem; }
.card__title {
  margin-bottom: 0.5rem;
  color: var(--ink);
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.1;
  text-transform: uppercase;
}

.problem__answer {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-l);
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step-2);
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.15;
  text-wrap: balance;
  box-shadow: 0 30px 60px -30px rgb(42 32 25 / 0.6);
}
.problem__answer .label { color: var(--orange-hi); }

/* 13 ─ Rules ────────────────────────────────────────────────────────────── */

.rules { padding-bottom: var(--space-l); background: var(--paper-2); }
.rules__head { margin-bottom: var(--space-l); }
.rules__head .lead { margin-top: var(--space-m); }

.rules__list { margin: 0; padding: 0; list-style: none; }
.rule { padding-block: var(--space-l); }

.rule__grid {
  display: grid;
  gap: var(--space-m) var(--space-l);
  align-items: center;
}
@media (min-width: 900px) {
  /* Alternate: odd rules have the figure on the left, even ones on the right */
  .rule__grid { grid-template-columns: 1fr 1.25fr; grid-template-areas: "text fig"; }
  .rule:nth-child(odd) .rule__grid { grid-template-columns: 1.25fr 1fr; grid-template-areas: "fig text"; }
  .rule__text { grid-area: text; }
  .rule__figure { grid-area: fig; }
}

.rule__num {
  font-size: clamp(4.5rem, 3rem + 6vw, 8.5rem);
  font-weight: 900;
  font-stretch: 62%;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
  margin-bottom: 0.25em;
}
.rule__title {
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.8rem);
  margin-bottom: var(--space-s);
}
.rule__body {
  max-width: 38ch;
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.rule__body strong { color: var(--ink); font-weight: 650; }

/* Spec line drawn like a dimension line: |—— TEXT ——| */
.rule__spec {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  margin-top: var(--space-m);
  color: var(--orange-text);
  font-weight: 700;
}
.rule__spec::before,
.rule__spec::after {
  content: "";
  flex: none;
  width: clamp(0.75rem, 3vw, 2rem);
  height: 10px;
  border-inline: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat;
}

.rule__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, #FBF7F0, #EFE5D7);
  box-shadow: var(--shadow-clay);
}
@media (prefers-reduced-motion: no-preference) {
  .rule__frame { transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-out); }
  .rule__figure:hover .rule__frame { transform: translateY(-5px); box-shadow: var(--shadow-clay-hover); }
}
.rule__frame--photo img { width: 100%; }

.rule__caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-size: 0.72rem;
}
.rule__caption::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-radius: 2px;
  background: var(--orange);
}

/* 14 ─ Rule scenes (CSS illustrations) ───────────────────────────────────── */

/* All scenes have the same ratio as the rule images (1376 × 768).
   Sizes use cqi = 1% of the scene width, so they scale with it. */
.scene {
  --steel: #8E7C6A;
  position: relative;
  aspect-ratio: 1376 / 768;
  container-type: inline-size;
  background-image:
    linear-gradient(to right, rgb(42 32 25 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(42 32 25 / 0.05) 1px, transparent 1px);
  background-size: 4cqi 4cqi;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: max(9px, 1.6cqi);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.scene .cbox { display: block; }

/* Shared ✗ / ✓ marks */
.mark {
  width: max(26px, 7cqi);
  height: max(26px, 7cqi);
  filter: drop-shadow(0 3px 3px rgb(92 50 15 / 0.2));
}
.mark--wrong { stroke: var(--red); }
.mark--wrong .mark__shade { stroke: #A8372F; }
.mark--right { stroke: var(--green); }
.mark--right .mark__shade { stroke: #2A7440; }

/* Rule 2 – side view of a container */
.scene__container {
  position: absolute;
  left: 7cqi; right: 6cqi;
  top: 5cqi; bottom: 14cqi;
  display: flex;
  align-items: stretch;
  gap: 1cqi;
  padding-inline: 0.8cqi;
  border: 1.2cqi solid var(--steel);
  border-right: 0;
  border-radius: 1cqi 0 0 1cqi;
}
.wallcol {
  width: 8.5cqi;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 0.5cqi;
}
.wallcol .cbox { height: 6.3cqi; border-radius: 18% / 22%; }
.wallcol--next {
  outline: 0.3cqi dashed var(--orange);
  outline-offset: 0.5cqi;
  border-radius: 0.8cqi;
}
.scene__labels {
  position: absolute;
  left: calc(7cqi + 1.2cqi + 0.8cqi);
  top: calc(100% - 12cqi);
  display: flex;
  gap: 1cqi;
}
.scene__labels span { width: 8.5cqi; text-align: center; white-space: nowrap; }
.scene__labels .is-accent { color: var(--orange-text); font-weight: 700; }
.scene__dim {
  position: absolute;
  left: calc(7cqi + 1.2cqi + 0.8cqi);
  top: calc(100% - 7cqi);
  display: flex;
  align-items: center;
  gap: 1.2cqi;
  color: var(--orange-text);
  font-weight: 700;
  white-space: nowrap;
}
.scene__dim::before {
  content: "";
  width: 8.5cqi;
  height: 1.6cqi;
  border-inline: 0.3cqi solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 100% 0.3cqi no-repeat;
}
.scene__door {
  position: absolute;
  right: 6cqi;
  top: calc(100% - 12cqi);
}

/* Rule 3 – layer by layer */
.layers {
  position: absolute;
  left: 20cqi; right: 20cqi;
  bottom: 7cqi;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.6cqi;
  padding: 0 0.6cqi;
  border: 1.4cqi solid var(--steel);
  border-top: 0;
  border-radius: 0 0 1cqi 1cqi;
}
.layers__row { display: flex; gap: 0.6cqi; height: 9cqi; }
.layers .cbox { flex: 2 1 0; }
.layers .cbox--half { flex: 1 1 0; }

.layers__hud {
  position: absolute;
  left: 4cqi; right: 4cqi; top: 2.6cqi;
  display: flex;
  justify-content: space-between;
}
.layers__count b { color: var(--orange-text); font-weight: 700; }

/* The dashed "height line" on top of the current layer */
.layers__level {
  --level: 4;
  position: absolute;
  left: 17cqi; right: 17cqi;
  bottom: calc(7cqi + 1.4cqi + var(--level) * 9.6cqi - 0.6cqi);
  border-top: 0.3cqi dashed var(--orange);
  opacity: 0;
}

/* JS adds .is-building: boxes not yet placed hover above, invisible */
.is-building .layers__level { opacity: 1; }
.is-building .cbox.is-off { opacity: 0; transform: translateY(-14cqi) rotate(-6deg); }
@media (prefers-reduced-motion: no-preference) {
  .layers .cbox { transition: transform 0.55s var(--ease-spring), opacity 0.25s linear; }
  .layers__level { transition: bottom 0.5s var(--ease-out), opacity 0.3s; }
}

/* Rule 4 & 5 – compare wrong / right */
.scene--front,
.scene--heavy {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  padding-bottom: 7cqi;
}
.compare {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5cqi;
}
.compare .mark { order: -1; }
.compare::after {
  /* floor */
  content: "";
  position: absolute;
  left: -6cqi; right: -6cqi; bottom: -1.2cqi;
  height: 0.5cqi;
  border-radius: 1cqi;
  background: var(--steel);
}

.profile { display: flex; flex-direction: column; gap: 0.5cqi; position: relative; }
.profile .cbox { width: 15cqi; height: 7cqi; }
.profile .is-out { transform: translateX(3cqi); outline: 0.35cqi solid var(--red); outline-offset: 0.3cqi; }
.profile .is-back { transform: translateX(-2.6cqi); outline: 0.35cqi solid var(--red); outline-offset: 0.3cqi; }
.profile--straight::after {
  /* the straight front line */
  content: "";
  position: absolute;
  right: -1cqi; top: -2cqi; bottom: -2cqi;
  border-right: 0.35cqi dashed var(--orange);
}

.stack { display: flex; flex-direction: column; gap: 0.5cqi; align-items: center; }
.stack .cbox {
  width: 21cqi; height: 10.5cqi;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1.4cqi;
}
/* the weight sits on a small white shipping label */
.stack .cbox b {
  padding: 0.3cqi 1cqi;
  border-radius: 0.6cqi;
  background: #FBF4E8;
  color: var(--ink);
  font-size: max(9px, 1.8cqi);
  font-weight: 700;
  line-height: 1.3;
}
.stack .cbox--heavy { width: 23cqi; height: 12cqi; }
.compare--wrong .stack .cbox--heavy { transform: rotate(4deg) translateY(0.8cqi); }
.stack .is-crushed {
  height: 6.2cqi;
  padding-bottom: 0.8cqi;
  border-radius: 30% 22% 26% 34% / 40% 34% 30% 30%;
  transform: scaleX(1.06);
  filter: saturate(0.85) brightness(0.96);
}

/* Rule 3 sticky scroll: the rule is taller than the screen, its content
   stays in place while the wall builds (class added by JS). */
.rule--build.is-scrolly { height: 230vh; }
.rule--build.is-scrolly .rule__grid {
  position: sticky;
  top: var(--header-h);
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  align-content: center;
}

/* 15 ─ Checklist ─────────────────────────────────────────────────────────── */

.checklist__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 900px) {
  .checklist__grid { grid-template-columns: 1fr 1.15fr; }
}
.checklist__intro .prose { margin-block: var(--space-m) var(--space-m); }

/* The "slip": looks like a printed packing slip with a torn top edge */
.slip {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: 6px 6px var(--radius-l) var(--radius-l);
  background: #FFFCF7;
  box-shadow: var(--shadow-clay);
}
.slip::before {
  /* perforated top edge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -7px;
  height: 14px;
  background: radial-gradient(circle at 7px 0, var(--paper) 5px, transparent 5.5px) 0 0 / 18px 14px repeat-x;
}
.slip__head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 2px dashed var(--line);
}
.slip__head .label { color: var(--ink); font-weight: 700; }
.slip__list { display: grid; }
.slip__list li + li { border-top: 1px solid var(--line); }

.slip__item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 0.5rem;
  margin-inline: -0.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}
.slip__item:hover { background: var(--paper); }
.slip__item b {
  display: block;
  font-weight: 800;
  font-stretch: 80%;
  font-size: var(--step-1);
  line-height: 1.15;
  text-transform: uppercase;
}
.slip__item small { display: block; color: var(--ink-2); font-size: var(--step--1); margin-top: 0.15rem; }
.slip__num { font-family: var(--font-mono); font-weight: 700; color: var(--orange-text); font-size: 0.85rem; }

/* Custom clay checkbox – a real <input>, so it works with keyboard & screen readers */
.slip__item input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 30px; height: 30px;
  margin: 0;
  border-radius: 9px;
  background: var(--paper-2);
  box-shadow: inset 0 2px 4px rgb(92 60 25 / 0.22), inset 0 -1px 0 rgb(255 255 255 / 0.6);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.slip__item input::after {
  content: "";
  width: 13px; height: 7px;
  border: solid #fff;
  border-width: 0 0 3.5px 3.5px;
  border-radius: 1px;
  transform: translateY(-2px) rotate(-45deg) scale(0);
  transition: transform 0.35s var(--ease-spring);
}
.slip__item input:checked {
  background: var(--green);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 3px 0 #2A7440;
}
.slip__item input:checked::after { transform: translateY(-2px) rotate(-45deg) scale(1); }
.slip__item input:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.slip__item:has(input:checked) b { color: var(--green-text); }

.slip__done {
  min-height: 1.6em;
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--green-text);
}

/* Safety disclaimer at the bottom of the slip (also printed) */
.slip__disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
  color: var(--ink-2);
  font-size: var(--step--1);
  line-height: 1.45;
}
.slip__disclaimer svg { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; color: var(--orange-text); }

/* 16 ─ Training ──────────────────────────────────────────────────────────── */

.training { background: var(--paper-2); }
.training__grid {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}
@media (min-width: 900px) {
  .training__grid { grid-template-columns: 1fr 1.2fr; }
}
.training .prose { margin-block: var(--space-m); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-s);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: #FFF6EC;
  box-shadow: inset 0 0 0 1.5px rgb(226 98 27 / 0.45);
  color: var(--orange-text);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge__dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: var(--orange);
}
@media (prefers-reduced-motion: no-preference) {
  .badge__dot { animation: pulse 1.8s ease-in-out infinite; }
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(226 98 27 / 0.5); }
  50% { box-shadow: 0 0 0 6px rgb(226 98 27 / 0); }
}

.game {
  border-radius: var(--radius-l);
  overflow: hidden;
  background: #2E251E;
  box-shadow: var(--shadow-clay-hover);
}
.game__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 1rem;
  background: #3A2F26;
}
.game__bar span { width: 10px; height: 10px; border-radius: 50%; background: #5E4E3F; }
.game__bar .label { margin-left: auto; color: #B9A794; font-size: 0.72rem; }
.game__placeholder,
.game__frame {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.game__placeholder {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  background:
    radial-gradient(60% 60% at 50% 55%, rgb(226 98 27 / 0.16), transparent 70%),
    linear-gradient(rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(255 255 255 / 0.04) 1px, transparent 1px) 0 0 / 28px 28px;
}
.game__placeholder .label { color: #CDBBA7; }
.game__boxes {
  display: grid;
  grid-template-columns: repeat(2, 56px);
  gap: 4px;
}
.game__boxes .cbox { height: 44px; }
.game__boxes .cbox:first-child { grid-column: 1 / 3; width: 56px; justify-self: center; }
@media (prefers-reduced-motion: no-preference) {
  .game__boxes .cbox:first-child { animation: hover-box 2.6s ease-in-out infinite; }
}
@keyframes hover-box {
  0%, 100% { transform: translateY(-10px); }
  50% { transform: translateY(-2px); }
}

/* 17 ─ About ─────────────────────────────────────────────────────────────── */

.about__grid {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1.3fr 1fr; }
}
.about__text { margin-top: var(--space-m); }
/* Roadmap – a quiet callout with an orange tape edge */
.about__next {
  display: grid;
  gap: 0.4rem;
  max-width: 60ch;
  margin-top: var(--space-m);
  padding: 1.1rem 1.35rem;
  border-left: 0.55rem solid var(--orange);
  border-radius: 6px var(--radius-m) var(--radius-m) 6px;
  background: rgb(255 252 247 / 0.7);
  box-shadow: var(--shadow-clay);
  color: var(--ink);
  font-weight: 500;
  text-wrap: pretty;
}
.about__next .label { color: var(--orange-text); font-weight: 700; }

.specsheet {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, #FBF7F0, #F1E8DB);
  box-shadow: var(--shadow-clay);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.specsheet div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px dashed var(--line);
}
.specsheet div:last-child { border-bottom: 0; }
.specsheet dt { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.specsheet dd { margin: 0; font-weight: 700; }
.specsheet__sub { display: block; margin-top: 0.2rem; font-weight: 500; color: var(--ink-2); }
.specsheet__zero { color: var(--orange-text); }
/* keep "0 trackers" together – lines only break between the items */
.specsheet__pair { white-space: nowrap; }

/* Footer additions */
.site-footer__brand + .label { margin-top: 0.2rem; }
.site-footer__note { flex-basis: 100%; font-size: 0.72rem; }

/* 18 ─ Legal pages & 404 ─────────────────────────────────────────────────── */

.legal { padding-block: var(--space-l) var(--space-xl); }
.legal .container { max-width: 820px; }
.legal h1 { font-size: var(--step-3); margin-bottom: var(--space-m); }
.legal h2 {
  margin-top: var(--space-l);
  margin-bottom: 0.6rem;
  font-size: var(--step-1);
  font-weight: 800;
  font-stretch: 85%;
}
.legal p, .legal li { color: var(--ink-2); max-width: 68ch; }
.legal p + p { margin-top: 0.8em; }
.legal ul { padding-left: 1.2em; margin-top: 0.6em; }
.legal address { font-style: normal; color: var(--ink); margin-top: 0.6em; }
.legal h3 {
  margin-top: var(--space-m);
  margin-bottom: 0.4rem;
  font-size: 1.05rem;
  font-weight: 750;
  font-stretch: 85%;
}
.legal h4 {
  margin-top: 1.2rem;
  margin-bottom: 0.3rem;
  font-size: 1rem;
  font-weight: 700;
}
.legal h3 + p, .legal h4 + p { margin-top: 0; }
.legal ul + p, .legal address + p { margin-top: 0.8em; }
/* long URLs must not overflow on small screens */
.legal a { overflow-wrap: anywhere; }
/* The legally required capitals of Art. 21 – kept readable */
.legal .ds-emphasis { font-size: var(--step--1); line-height: 1.55; letter-spacing: 0.01em; }
.legal .ds-source { margin-top: var(--space-m); font-size: var(--step--1); }
.note {
  padding: 1rem 1.25rem;
  margin-bottom: var(--space-m);
  border-radius: var(--radius-m);
  background: #FFF6EC;
  box-shadow: inset 0 0 0 1.5px rgb(226 98 27 / 0.4);
  font-size: var(--step--1);
}
.back-link { margin-left: auto; font-family: var(--font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }

.notfound {
  min-height: calc(100svh - var(--header-h) - 140px);
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--space-m);
  padding-block: var(--space-l);
}
.notfound__code { font-size: clamp(7rem, 30vw, 16rem); color: var(--orange); text-shadow: 0 0.035em 0 var(--orange-lo); }

/* 19 ─ Print: only the checklist ─────────────────────────────────────────── */

@media print {
  body { background: #fff; }
  .site-header, .skip-link, .site-footer,
  main > section:not(#checklist),
  .checklist__intro .btn,
  .slip__done { display: none !important; }
  #checklist { padding: 0; }
  .checklist__grid { display: block; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .slip { box-shadow: none; border: 2px solid #000; margin-top: 1.5rem; }
  .slip::before { display: none; }
  .slip__item input { box-shadow: none; border: 2px solid #000; background: #fff; }
}
.notfound .lead { margin-inline: auto; }

/* 20 ─ Progress wall (header) ────────────────────────────────────────────── */

.progress-wall {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-left: auto;
}
@media (min-width: 900px) {
  .progress-wall {
    margin-left: 0.75rem;
    padding-left: 1.25rem;
    border-left: 1px solid var(--line);
  }
}
.progress-wall__count { font-size: 0.75rem; font-weight: 700; color: var(--ink); }

/* 6 narrow columns: bottom boxes span columns 1-2, 3-4, 5-6,
   top boxes span 2-3 and 4-5 – each rests across two boxes below. */
.progress-wall__boxes {
  display: grid;
  grid-template-columns: repeat(6, 10px);
  grid-template-rows: 15px 15px;
  gap: 2px;
}
.progress-wall__boxes li:nth-child(1) { grid-area: 2 / 1 / 3 / 3; }
.progress-wall__boxes li:nth-child(2) { grid-area: 2 / 3 / 3 / 5; }
.progress-wall__boxes li:nth-child(3) { grid-area: 2 / 5 / 3 / 7; }
.progress-wall__boxes li:nth-child(4) { grid-area: 1 / 2 / 2 / 4; }
.progress-wall__boxes li:nth-child(5) { grid-area: 1 / 4 / 2 / 6; }

.progress-wall a {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
/* Enlarge the tap area without changing the look */
.progress-wall a::before { content: ""; position: absolute; inset: -4px -1px; }
/* The empty slot */
.progress-wall a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1.5px dashed var(--line-strong);
}
/* The box that drops in once the rule is reached */
.progress-wall li.is-read a::after {
  border: 0;
  background: linear-gradient(180deg, var(--box-hi), var(--box) 55%, var(--box-lo));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 2px rgb(90 55 20 / 0.3);
}
.progress-wall li.is-current a::after {
  background: linear-gradient(180deg, var(--orange-hi), var(--orange) 60%, var(--orange-lo));
}
.progress-wall a:hover::after { border-color: var(--orange); }
@media (prefers-reduced-motion: no-preference) {
  .progress-wall li.is-read a::after { animation: box-drop 0.5s var(--ease-spring) both; }
}
@keyframes box-drop {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* 21 ─ Reduced motion safety net ─────────────────────────────────────────── */

/* Visitors who ask their system for less motion get instant changes
   everywhere (the push test and layer build also skip their animations). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}