/* Block, the website. "Built in blocks": training as the app runs it, a block of weeks,
   each week's load worked out from the last. The full system is in design/site-theme.md.

   Ground: the painted block wall of a gym. Ink: iron. Raised panels: whiteboard white.
   Brand: the 45 lb plate's blue, from the app icon's lower block. Color otherwise is data:
   the rulebook's calls, the lamps and the plates. Words are set wide (Archivo at 125%),
   numbers narrow (Archivo at 62% to 75%), text at normal width: one family, three widths.
   The only decoration is the block: flat rectangles that stack. */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/Archivo-VF.woff2") format("woff2-variations"), url("/fonts/Archivo-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  /* Ground and ink */
  --wall: #d9d8d2;
  --mortar: #c8c6bf;
  --joint: #cfcdc6;
  --board: #f6f6f2;
  --board-rule: #e1e0da;
  --iron: #1d1f22;
  --iron-2: #2c2f33;
  --steel: #4f545a;
  --dust: #85888b;
  /* Brand: the 45 lb plate */
  --plate: #2e6fe8;
  --plate-ink: #1d55c0;
  /* Data: the rulebook's calls (MDCallTag), the lamps (Lights.swift), the bar (PlateBar.swift) */
  --up: #1b8a49;
  --hold: #f0b90b;
  --reset: #cf2f25;
  --deload: #8eaceb;
  --deload-ink: #2f5fbf;
  --same: #bdbcb5;
  --lamp-good: #ffffff;
  --lamp-no: #ff453a;
  --lamp-off: #3d4044;
  --glow-good: rgba(255, 255, 255, 0.42);
  --glow-no: rgba(255, 69, 58, 0.6);
  --shaft: #8c9298;
  --collar: #aab0b6;
  --clamp: #6c737a;
  /* Measures */
  --gutter: 20px;
  --measure: 62ch;
  --radius: 4px;
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --ease-lamp: cubic-bezier(0.2, 0.8, 0.3, 1.25);
  --text: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (min-width: 768px) { :root { --gutter: 40px; } }
@media (min-width: 1280px) { :root { --gutter: 56px; } }

/* Ground */
* { box-sizing: border-box; }
html { background: var(--wall); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--iron);
  font: 420 17px/1.55 var(--text);
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1280px) { body { font-size: 18px; } }
img, svg { max-width: 100%; }
img { height: auto; }
p, li, dd, td, th { margin: 0; }
p + p { margin-top: 0.85em; }
a { color: var(--plate-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(29, 85, 192, 0.35); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--plate); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--iron); color: var(--board); }
[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; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 10; background: var(--iron); color: var(--board); padding: 12px 16px; border-radius: var(--radius); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

/* Type: wide words, narrow numbers */
h1, h2, h3, .display {
  font-family: var(--text);
  font-stretch: 125%;
  font-weight: 860;
  letter-spacing: -0.022em;
  line-height: 0.96;
  margin: 0;
  color: var(--iron);
  text-wrap: balance;
}
h1 { font-size: clamp(44px, 7.4vw, 104px); letter-spacing: -0.03em; line-height: 0.92; }
h2 { font-size: clamp(32px, 4.6vw, 60px); }
h3 { font-size: clamp(21px, 2vw, 25px); font-weight: 800; letter-spacing: -0.012em; line-height: 1.1; }
.heavy { font-stretch: 112%; font-weight: 760; letter-spacing: -0.01em; line-height: 1.15; }
.num { font-stretch: 62%; font-weight: 820; font-variant-numeric: tabular-nums lining-nums; line-height: 0.86; letter-spacing: 0; }
.lead { font-size: clamp(19px, 2vw, 22px); line-height: 1.45; max-width: var(--measure); font-weight: 420; }
.label { display: block; margin: 0; font-size: 14px; line-height: 1.35; font-weight: 640; color: var(--steel); letter-spacing: 0; }
.label.chalk { color: var(--iron); }
.copy { max-width: var(--measure); }
.copy p, .copy li, .steel { color: var(--steel); }
.copy p strong, .copy li strong, strong { color: var(--iron); font-weight: 680; }
.copy .chalk, .copy p.chalk { color: var(--iron); }
.mono { font-family: var(--mono); font-size: 0.88em; word-break: break-all; }
.fine { color: var(--steel); font-size: 14px; line-height: 1.5; max-width: var(--measure); }
.muted { color: var(--steel); }

/* Tags: Pro, iOS 27, Free. A small iron block; Free is an outline. */
.tag {
  display: inline-block;
  vertical-align: 0.32em;
  margin-left: 0.4em;
  padding: 4px 7px 3px;
  border-radius: 3px;
  background: var(--iron);
  color: var(--board);
  font: 680 12px/1 var(--text);
  font-stretch: 100%;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tag.free { background: transparent; color: var(--iron); box-shadow: inset 0 0 0 1.5px var(--iron); }
.tag + .tag { margin-left: 0.3em; }
h1 .tag { vertical-align: 0.9em; font-size: 13px; }
.label .tag { vertical-align: 0.1em; margin-left: 6px; }

/* The rulebook's calls (MDCallTag): +10 and Reps +1 green, Hold yellow, Reset red, Deload blue */
.ct {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 7px 4px;
  border-radius: 3px;
  font: 700 13px/1 var(--text);
  font-stretch: 100%;
  white-space: nowrap;
  color: var(--iron);
  background: var(--same);
}
.ct.up { background: #198445; color: #fff; } /* a shade under --up: white text at 4.7:1 (AA) */
.ct.hold { background: var(--hold); color: var(--iron); }
.ct.reset { background: var(--reset); color: #fff; }
.ct.deload { background: var(--deload); color: var(--iron); }
.ct.same { background: transparent; color: var(--steel); box-shadow: inset 0 0 0 1.5px var(--same); }
.ct.plain { background: transparent; color: var(--iron); box-shadow: inset 0 0 0 1.5px var(--iron); }
.call-num { font-stretch: 62%; font-weight: 820; font-size: 24px; line-height: 1; }
.call-num.up { color: var(--up); }
.call-num.hold { color: #9a7400; }
.call-num.reset { color: var(--reset); }

/* Header */
.nav { position: relative; z-index: 2; }
.nav .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; min-height: 76px; padding-top: 16px; padding-bottom: 16px; }
.nav .mark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--iron); text-decoration: none; font-stretch: 125%; font-weight: 880; font-size: 25px; letter-spacing: -0.03em; line-height: 1; }
.nav .mark .logo { width: 22px; height: auto; flex: none; }
.nav .links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.nav .links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--steel); text-decoration: none; font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; }
.nav .links a:hover, .nav .links a[aria-current] { color: var(--iron); border-bottom-color: var(--iron); }
@media (max-width: 719px) {
  .nav .wrap { padding-top: 14px; padding-bottom: 0; min-height: 60px; }
  .nav .links { flex-basis: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nav .links::-webkit-scrollbar { display: none; }
  .nav .links a { white-space: nowrap; }
}

/* The wall: the joints of a painted block wall behind the top of each page */
.hero, .page-hero {
  position: relative;
  isolation: isolate;
}
.hero::before, .page-hero::before {
  content: "";
  position: absolute;
  inset: -76px 0 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='384' height='192'%3E%3Cg fill='none' stroke='%23d4d3cd' stroke-width='2'%3E%3Cpath d='M0 1H384M0 97H384M1 1V97M193 1V97M97 97V192M289 97V192'/%3E%3C/g%3E%3C/svg%3E");
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 40%, transparent 85%);
  pointer-events: none;
}

/* Sections */
.hero { padding: clamp(28px, 6vw, 80px) 0 clamp(40px, 6vw, 72px); }
.sec { padding: clamp(80px, 10vw, 144px) 0 0; }
.sec-head { display: grid; gap: 18px; max-width: 920px; margin-bottom: clamp(32px, 4.4vw, 56px); }
.sec-head > .label:first-child { color: var(--steel); }
.split { display: grid; gap: 44px; align-items: start; }
@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(44px, 6vw, 104px); }
  .split.flip > .shot, .split.flip > .figure { order: -1; }
  .split.flip { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split.pairs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.stack { display: grid; gap: 22px; align-content: start; }
.stack > * + * { margin-top: 0; }
.more { margin-top: 2px; }
.more a { font-weight: 640; }

/* Raised panels: whiteboard white on the wall */
.panel { background: var(--board); border-radius: 6px; padding: clamp(20px, 2.4vw, 28px); }

/* Phones: real app screenshots in an iron bezel */
.shot { margin: 0; width: min(100%, 360px); justify-self: center; }
.shot .frame { border: 7px solid var(--iron); border-radius: 13% / 6%; overflow: hidden; background: var(--iron); }
.shot img { display: block; width: 100%; aspect-ratio: 1320 / 2868; }
.shot figcaption { margin-top: 14px; font-size: 14px; line-height: 1.4; font-weight: 560; color: var(--steel); text-align: center; text-wrap: balance; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; justify-items: center; align-items: start; }
.shots .shot, .shot.pair { width: min(100%, 300px); }
.shots .shot .frame { border-width: 5px; }
@media (min-width: 768px) { .shots { gap: 32px 26px; } }

/* Rows: lists and tables, joints between them */
.rows { border-top: 1.5px solid var(--mortar); margin: 0; padding: 0; list-style: none; }
.copy .rows { padding-left: 0; }
.rows > li, .rows > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 15px 0; border-bottom: 1.5px solid var(--mortar); }
.copy .rows > li + li { margin-top: 0; }
.rows .r-title { display: block; color: var(--iron); font-weight: 700; }
.rows .r-text { color: var(--steel); font-size: 15.5px; grid-column: 1; }
.rows.numbered { counter-reset: row; }
.rows.numbered > li { grid-template-columns: 40px minmax(0, 1fr); align-items: baseline; counter-increment: row; }
.rows.numbered > li::before { content: counter(row); font-stretch: 62%; font-weight: 820; font-size: 26px; color: var(--iron); line-height: 1; }
.rows.numbered > li > * { grid-column: 2; }
.rows.numbered p { color: var(--iron); }
.rows.numbered .r-text { color: var(--steel); }
.rows.lamp-rows > li { grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px; align-items: center; }
.rows.lamp-rows .r-text { grid-column: 2; }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; padding: 0 16px 10px 0; border-bottom: 1.5px solid var(--mortar); font-size: 13.5px; font-weight: 650; color: var(--steel); vertical-align: bottom; }
td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1.5px solid var(--mortar); vertical-align: top; color: var(--iron); font-size: 16px; }
td:last-child, th:last-child { padding-right: 0; }
td.steel { color: var(--steel); }
td.end, th.end { text-align: right; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel th, .panel td, .card th, .card td { border-bottom-color: var(--board-rule); }

/* Actions. The store action is the plate's blue; the rest are iron outlines. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: var(--radius);
  background: var(--plate); color: #fff;
  font: 720 17px/1 var(--text); font-stretch: 108%; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms linear, color 120ms linear;
}
.btn:hover, .btn:active { background: var(--plate-ink); }
.btn.secondary { background: transparent; color: var(--iron); box-shadow: inset 0 0 0 2px var(--iron); }
.btn.secondary:hover { background: var(--iron); color: var(--board); }
.btn img { display: block; height: 40px; width: auto; }
.cta { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 30px; }
.soon {
  display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 20px 0 16px;
  border-radius: var(--radius); box-shadow: inset 0 0 0 2px var(--iron); color: var(--iron);
  font: 680 16px/1.2 var(--text); font-stretch: 104%;
}
.soon::before { content: ""; width: 12px; height: 12px; border-radius: 2px; background: var(--plate); flex: none; }
.btn-link { font-weight: 650; }
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 52px; width: auto; }

/* Lamps: white a pass, red a miss, off not judged (Lights.swift). On the wall they sit in
   an iron housing, as the app draws them on its own dark ground. */
.lamps { --lamp: 44px; display: inline-flex; align-items: center; gap: max(4px, calc(var(--lamp) * 0.42)); padding: calc(var(--lamp) * 0.32 + 3px) calc(var(--lamp) * 0.42 + 4px); background: var(--iron); border-radius: calc(var(--lamp) * 0.3 + 4px); vertical-align: middle; }
.lamps.xl { --lamp: 54px; }
.lamps.l { --lamp: 40px; }
.lamps.m { --lamp: 16px; }
.lamps.s { --lamp: 12px; gap: 6px; }
.lamps.xs { --lamp: 9px; gap: 5px; }
.lamp { display: block; width: var(--lamp); height: var(--lamp); border-radius: 50%; background: var(--lamp-good); box-shadow: 0 0 calc(var(--lamp) * 0.7) var(--glow-good); flex: none; }
.lamp.no { background: var(--lamp-no); box-shadow: 0 0 calc(var(--lamp) * 0.7) var(--glow-no); }
.lamp.off { background: var(--lamp-off); box-shadow: inset 0 0 0 1px #4a4d52; }
.lamps.labeled { align-items: flex-start; }
.lamps.labeled .cell { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: max(var(--lamp), 56px); }
.lamps.labeled .cell .label { text-align: center; color: #c9cacb; font-size: 12px; }
.lamps.labeled .cell.no .label { color: #ff8a82; }
.lamps.labeled .cell.off .label { color: #8d9094; }

/* The call (TheCall) */
.call { display: grid; gap: 8px; padding: 16px 0; border-top: 1.5px solid var(--mortar); border-bottom: 1.5px solid var(--mortar); }
.call .call-label { display: flex; align-items: center; gap: 8px; }
.call .dots { display: inline-flex; gap: 3px; }
.call .dots i { width: 5px; height: 5px; border-radius: 1px; background: var(--iron); }
.call p { color: var(--iron); font-size: 17px; margin: 0; }

/* The bar (PlateBar.swift): drawn on whiteboard white so the shaft reads */
.bar { display: block; height: auto; }
.bar-box { display: block; width: 100%; }

/* Motion. One moment a page: the blocks build on the home page, the lamps light in the demo. */
@keyframes lamp-on { from { transform: scale(0.55); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes plate-on { 0% { transform: translateX(26px); opacity: 0; } 70% { transform: translateX(-2px); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes plate-off { from { transform: none; opacity: 1; } to { transform: translateX(26px); opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes set-down { 0% { transform: translateY(-42px); opacity: 0; } 62% { transform: translateY(2px); opacity: 1; } 100% { transform: none; opacity: 1; } }
.lit .lamp { animation: lamp-on 460ms var(--ease-lamp) both; animation-delay: var(--lamp-delay, 0ms); }
.bar.animate .plate { animation: plate-on 300ms var(--ease-out) both; transform-box: fill-box; animation-delay: calc(var(--i, 0) * 90ms); }
.bar .plate.off { animation: plate-off 140ms var(--ease-out) both; transform-box: fill-box; }
.bar .plate.on { animation: plate-on 300ms var(--ease-out) both; transform-box: fill-box; animation-delay: calc(var(--i, 0) * 90ms); }
.rise { animation: rise 380ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lit .lamp, .bar.animate .plate, .bar .plate.on, .rise { animation-name: fade; animation-duration: 300ms; }
  .bar .plate.off { animation-name: fade; animation-direction: reverse; }
  .btn, .toggle .sw, .toggle .sw::after { transition: none; }
}

/* The home page's hero: the title, the climb, then the pitch. On a phone the climb comes second. */
.hero .wrap { display: grid; gap: 36px; grid-template-areas: "title" "climb" "intro"; }
.hero h1 { grid-area: title; margin-top: 6px; }
.hero .climb { grid-area: climb; }
.hero .intro { grid-area: intro; max-width: 640px; }
.hero .price-note { color: var(--steel); font-size: 14.5px; margin-top: 16px; max-width: 52ch; }
@media (min-width: 1040px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-areas: "title climb" "intro climb"; column-gap: clamp(48px, 5vw, 88px); row-gap: 30px; align-items: end; }
  .hero .intro { align-self: start; }
}

/* The climb: weeks of one lift as stacks of 10 lb blocks */
.climb { --brick: clamp(22px, 3.1vw, 34px); --gap: 4px; margin: 0; display: grid; gap: 18px; }
.climb ol { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; align-items: end; }
.wk { display: grid; grid-template-rows: auto auto auto auto auto; justify-items: center; padding: 0 clamp(4px, 0.7vw, 8px); }
.wk .load { font-stretch: 62%; font-weight: 820; font-size: clamp(26px, 3.4vw, 46px); line-height: 0.9; color: var(--iron); }
.wk .ct { margin: 9px 0 12px; font-size: clamp(11px, 1.1vw, 13px); padding: 4px 6px 3px; }
.wk .ct.start { background: transparent; color: var(--steel); box-shadow: inset 0 0 0 1.5px var(--same); }
.wk .stack { display: flex; flex-direction: column-reverse; gap: var(--gap); width: 100%; }
.wk .stack i { display: block; height: var(--brick); border-radius: 3px; background: var(--iron); }
.wk .stack i.new { background: var(--up); }
.wk .stack i.held { background: var(--hold); }
.wk .stack i.dl { background: var(--deload); }
.wk .floor { width: calc(100% + 2 * clamp(4px, 0.7vw, 8px)); height: 4px; background: var(--iron); margin-top: 8px; }
.wk .wk-n { margin-top: 12px; font-size: 13px; font-weight: 640; color: var(--steel); white-space: nowrap; }
.wk .lamps { margin-top: 8px; }
.wk.next .wk-n { color: var(--iron); }
.climb figcaption { font-size: 15px; line-height: 1.5; color: var(--steel); max-width: 60ch; }
.climb figcaption strong { color: var(--iron); }
.climb .lift-name { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.climb .lift-name .heavy { font-size: clamp(18px, 1.7vw, 22px); }
.climb .lift-name .label { white-space: nowrap; }
.climb .stack i { animation: set-down 430ms var(--ease-out) both; animation-delay: calc(240ms + var(--n, 0) * 42ms); }
.climb .wk .load, .climb .wk .ct { animation: fade 320ms linear both; animation-delay: calc(360ms + var(--w, 0) * 190ms); }
@media (prefers-reduced-motion: reduce) {
  .climb .stack i, .climb .wk .load, .climb .wk .ct { animation: none; }
}
@media (max-width: 479px) {
  .wk .lamps { --lamp: 6px; gap: 3px; padding: 4px 5px; }
  .wk .wk-n { font-size: 11.5px; }
}

/* How a block runs: three steps, in order, drawn as stacks of one, two and three blocks.
   Side by side they stand on one floor; on a phone each stands on its own. */
.steps { --b: 30px; --g: 4px; display: grid; gap: 44px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps > li { --k: 1; --top: 0px; counter-increment: step; display: grid; gap: 12px; align-content: start; background: linear-gradient(var(--iron), var(--iron)) no-repeat 0 calc(var(--top) + var(--k) * (var(--b) + var(--g)) + 2px) / 100% 4px; }
.steps > li:nth-child(2) { --k: 2; }
.steps > li:nth-child(3) { --k: 3; }
.steps > li::before { content: counter(step); display: grid; place-items: center; width: 60px; height: var(--b); border-radius: 3px; background: var(--iron); color: var(--board); font-stretch: 62%; font-weight: 820; font-size: 21px; line-height: 1; margin-top: var(--top); margin-bottom: calc((var(--k) - 1) * (var(--b) + var(--g)) + 22px); }
.steps > li:nth-child(2)::before { box-shadow: 0 calc(var(--b) + var(--g)) 0 var(--iron); }
.steps > li:nth-child(3)::before { box-shadow: 0 calc(var(--b) + var(--g)) 0 var(--iron), 0 calc(2 * (var(--b) + var(--g))) 0 var(--iron); }
.steps p { color: var(--steel); max-width: 44ch; }
@media (min-width: 860px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
  .steps > li { --top: calc((3 - var(--k)) * (var(--b) + var(--g))); }
}

/* Hero of the other pages */
.page-hero { padding: clamp(28px, 6vw, 80px) 0 0; }
.page-hero .wrap { display: grid; gap: 40px; align-items: end; }
.page-hero .intro { max-width: 820px; display: grid; gap: 24px; }
.page-hero h1 { font-size: clamp(42px, 6.6vw, 92px); }
.page-hero .cta { margin-top: 4px; }
@media (min-width: 1024px) {
  .page-hero .wrap.with-art { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 72px; align-items: center; }
}
.art { display: grid; gap: 16px; }
.art .week { max-width: none; }
#code-before .cta { margin-top: 20px; }
.copy .link-sample { font: 700 clamp(18px, 2.4vw, 24px)/1.3 var(--text); color: var(--iron); margin: 0; }
.link-sample span { white-space: nowrap; }

/* The next targets (NextTargetsPanel): whiteboard white, a call tag under each load */
.card { display: grid; gap: 12px; width: 100%; max-width: 480px; background: var(--board); border-radius: 6px; padding: clamp(20px, 2.4vw, 28px); }
.card .card-title { font-stretch: 125%; font-weight: 860; font-size: clamp(30px, 3vw, 38px); letter-spacing: -0.025em; line-height: 0.95; margin: 0; }
.card .card-note { color: var(--steel); font-size: 14px; margin: 0; }
.card table th { font-size: 12.5px; padding: 0 0 8px; }
.card table td { padding: 12px 0; vertical-align: middle; }
.card .lift { display: grid; gap: 5px; padding-right: 12px; }
.card .lift .heavy { font-size: 18px; }
.card .lift .why { color: var(--steel); font-size: 13.5px; line-height: 1.38; font-weight: 420; }
.card .declared { display: grid; gap: 7px; justify-items: end; }
.card .declared .num { font-size: 36px; line-height: 0.95; }
.card .declared .ct { font-size: 12px; }
.card tr.still .heavy, .card tr.still .declared .num { color: var(--dust); }
.card tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }

/* The rulebook (RulebookView): five rules and the call each writes */
.rulebook th[scope="row"] { font-stretch: 62%; font-weight: 820; font-size: 26px; color: var(--iron); padding: 14px 0; width: 40px; vertical-align: top; border-bottom: 1.5px solid var(--mortar); line-height: 1; }
.rulebook td { padding: 15px 0; vertical-align: top; }
.rulebook td .sub { display: block; color: var(--steel); font-size: 15px; margin-top: 4px; }
.rulebook td.calls { text-align: right; white-space: nowrap; padding-left: 16px; }
.rulebook td.calls .ct + .ct { margin-left: 6px; }
.rulebook td.calls .lamps { vertical-align: middle; }
.legend { display: grid; gap: 0; border-top: 1.5px solid var(--mortar); margin: 0; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1.5px solid var(--mortar); color: var(--steel); font-size: 15px; }
.legend li > .ct { justify-self: start; }
.lamp-guide li { grid-template-columns: 72px minmax(0, 1fr); }
.lamp-guide .t { display: grid; gap: 3px; }
.lamp-guide .t .label { color: var(--iron); }

/* A block's week (WeekStrip): a lamp per day, Monday first, in the iron housing */
.week { display: grid; gap: 14px; padding: 18px 20px; border-radius: 6px; background: var(--iron); color: var(--board); max-width: 480px; }
.week .label { color: #b9bbbd; }
.week .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.week .day { display: grid; justify-items: center; gap: 10px; }
.week .day .label { font-size: 12px; }
.week .day.today .label { color: #fff; }
.week .mark { width: 18px; height: 18px; display: grid; place-items: center; }
.week .mark .lamp { --lamp: 12px; }
.week .mark .ring { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px #fff; }
.week .mark .rest { width: 4px; height: 4px; border-radius: 50%; background: #5a5d61; }
.week .head { display: flex; justify-content: space-between; gap: 12px; }

/* Lift rows (as on Today) */
.lifts { border-top: 1.5px solid var(--mortar); }
.lifts .lift { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; align-items: center; padding: 14px 0; border-bottom: 1.5px solid var(--mortar); }

/* Warm-up sets with their plates, on whiteboard white */
.ladder { background: var(--board); border-radius: 6px; padding: 4px clamp(14px, 2vw, 20px); }
.ladder .step { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(112px, 180px); gap: 0 16px; align-items: center; padding: 13px 0; border-bottom: 1.5px solid var(--board-rule); }
.ladder .step:last-child { border-bottom: 0; }
.ladder .step .k { font-size: 13px; font-weight: 650; color: var(--steel); }
.ladder .step .k.now { color: var(--iron); }
.ladder .step .v { display: grid; gap: 4px; }
.ladder .step .v .num { font-size: 30px; }
.ladder .step .v .label { font-size: 13px; }
.ladder .step .bar { justify-self: end; width: 100%; height: auto; }
.ladder .step .pic { justify-self: end; width: 100%; max-width: 180px; }
.ladder .step .pic svg { width: 100%; height: auto; display: block; }
@media (max-width: 479px) { .ladder .step { grid-template-columns: 48px minmax(0, 1fr) 104px; } }

/* Plans: Free is whiteboard white, Pro a solid iron block */
.plans { display: grid; gap: 20px; }
@media (min-width: 760px) { .plans { grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; } }
.plan { border-radius: 6px; padding: clamp(24px, 3vw, 40px); background: var(--board); }
.plan.pro { background: var(--iron); color: var(--board); }
.plan .plan-name { font-stretch: 125%; font-weight: 860; font-size: clamp(24px, 2.4vw, 30px); letter-spacing: -0.02em; line-height: 1; color: inherit; margin: 0; }
.plan .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 18px 0 20px; }
.plan .price .num { font-size: clamp(64px, 8vw, 96px); }
.plan .price .per { color: var(--steel); font-size: 15px; }
.plan.pro .price .per, .plan.pro .alt { color: #b9bbbd; }
.plan .alt { color: var(--steel); font-size: 15px; margin: -10px 0 22px; }
.plan.pro .alt strong { color: #fff; }
.plan .rows { border-top-color: var(--board-rule); }
.plan .rows > li { grid-template-columns: minmax(0, 1fr); padding: 12px 0; font-size: 16px; border-bottom-color: var(--board-rule); }
.plan.pro .rows { border-top-color: #3a3d42; }
.plan.pro .rows > li { border-bottom-color: #3a3d42; color: var(--board); }

/* Questions and answers */
.qa { border-top: 1.5px solid var(--mortar); }
.qa > div { padding: 20px 0; border-bottom: 1.5px solid var(--mortar); display: grid; gap: 8px; }
.qa > div > p + p { margin-top: 0; }
.qa .q { font-stretch: 112%; font-weight: 760; font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; color: var(--iron); }
.qa p:not(.q) { color: var(--steel); max-width: var(--measure); }
@media (min-width: 900px) { .qa > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: baseline; } }

/* Forms: the calculator and the demo */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin: 0 0 10px; }
.field { display: grid; gap: 10px; }
input[type="number"], input[type="text"], input[type="email"], input[type="password"], select {
  font: 500 17px/1.2 var(--text); font-variant-numeric: tabular-nums; color: var(--iron);
  background: var(--board); border: 1.5px solid var(--dust); border-radius: var(--radius); padding: 12px 14px; width: 100%; min-height: 50px;
  -moz-appearance: textfield; appearance: none;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:focus-visible, select:focus-visible { outline: 3px solid var(--plate); outline-offset: 1px; border-color: var(--iron); }
.chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chips.two { grid-template-columns: repeat(2, minmax(0, 92px)); }
.chip { position: relative; display: block; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip > span { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 58px; padding: 6px 4px; background: var(--board); border: 1.5px solid var(--board); border-radius: var(--radius); cursor: pointer; color: var(--dust); text-align: center; }
.chip .n { font-stretch: 62%; font-weight: 820; font-size: 24px; line-height: 1; }
.chip .label { font-size: 11px; color: inherit; }
.chip i { display: block; width: 24px; height: 8px; border-radius: 2px; background: var(--swatch, var(--shaft)); opacity: 0.3; }
.chip input:checked + span { color: var(--iron); border-color: var(--iron); box-shadow: inset 0 0 0 1px var(--iron); }
.chip input:checked + span i { opacity: 1; }
.chip input:focus-visible + span { outline: 3px solid var(--plate); outline-offset: 2px; }
.chip:hover > span { border-color: var(--mortar); }
.seg { display: inline-flex; justify-self: start; align-self: start; border-radius: var(--radius); overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--iron); }
.seg label { position: relative; display: block; }
.seg label + label { border-left: 1.5px solid var(--iron); }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; padding: 0 14px; font-size: 15px; font-weight: 650; color: var(--iron); cursor: pointer; }
.seg input:checked + span { background: var(--iron); color: var(--board); }
.seg input:focus-visible + span { outline: 3px solid var(--plate); outline-offset: -5px; }
.stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; background: var(--board); border: 1.5px solid var(--dust); border-radius: var(--radius); overflow: hidden; max-width: 280px; }
.stepper button { font: 500 26px/1 var(--text); color: var(--iron); background: transparent; border: 0; min-height: 58px; cursor: pointer; }
.stepper button:hover { background: #ecebe6; }
.stepper button:focus-visible { outline-offset: -5px; }
.stepper input { font-stretch: 62%; font-weight: 820; font-size: 34px; text-align: center; border: 0; border-left: 1.5px solid var(--board-rule); border-right: 1.5px solid var(--board-rule); border-radius: 0; background: transparent; min-height: 58px; padding: 0 4px; }
.stepper input:focus-visible { outline-offset: -5px; }
.toggle { position: relative; display: flex; align-items: center; gap: 14px; min-height: 48px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.toggle .sw { flex: none; width: 46px; height: 28px; border-radius: 6px; background: var(--mortar); position: relative; transition: background-color 120ms linear; }
.toggle .sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 3px; background: var(--board); transition: transform 160ms var(--ease-out); }
.toggle input:checked + .sw { background: var(--iron); }
.toggle input:checked + .sw::after { transform: translateX(18px); }
.toggle input:focus-visible + .sw { outline: 3px solid var(--plate); outline-offset: 3px; }
.toggle .t { color: var(--iron); font-size: 16px; line-height: 1.3; }
.toggle .t small { display: block; color: var(--steel); font-size: 14px; }

/* Tools: inputs on the left, the result on the right, on whiteboard white */
.tool { display: grid; gap: 40px; }
@media (min-width: 960px) { .tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); align-items: start; } }
.tool .controls { display: grid; gap: 28px; align-content: start; }
.tool .result { display: grid; gap: 18px; align-content: start; background: var(--board); border-radius: 6px; padding: clamp(20px, 2.6vw, 32px); }
@media (min-width: 960px) { .tool .result { position: sticky; top: 24px; } }
.big { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.big .num { font-size: clamp(88px, 12vw, 140px); line-height: 0.8; }
.big .unit { font-size: 15px; font-weight: 650; color: var(--steel); }
.verdict { font-stretch: 125%; font-weight: 880; font-size: clamp(44px, 6vw, 76px); line-height: 0.92; letter-spacing: -0.03em; margin: 0; }
.reasons { color: var(--reset); }
.miss { font-stretch: 112%; font-weight: 760; font-size: 22px; line-height: 1.1; color: var(--reset); margin: 0; }
.nearest { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.nearest .btn { min-height: 44px; font-size: 16px; padding: 0 16px; }
.sets td { font-size: 15px; vertical-align: middle; }
.sets .you td { color: var(--iron); font-weight: 700; }
.card-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 14px 0; border-top: 1.5px solid var(--board-rule); border-bottom: 1.5px solid var(--board-rule); }
.card-line .heavy { font-size: 20px; }
.card-line .why { color: var(--steel); font-size: 15px; grid-column: 1; }
.card-line .declared { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 6px; justify-items: end; }
.card-line .declared .num { font-size: 44px; line-height: 0.95; }

/* The code page */
.code-big { font-stretch: 125%; font-weight: 880; font-size: clamp(44px, 10vw, 120px); line-height: 0.95; word-break: break-all; letter-spacing: -0.01em; margin: 0; }
.code-box { display: grid; gap: 12px; padding: 24px; border-radius: 6px; background: var(--board); }
.code-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.code-form input { flex: 1 1 200px; text-transform: uppercase; }

/* The demo on /progression/ */
.demo { display: grid; gap: 32px; grid-template-areas: "sets" "judge" "inputs" "card"; }
.demo .d-sets { grid-area: sets; display: grid; gap: 14px; align-content: start; }
.demo .d-judge { grid-area: judge; display: grid; gap: 20px; align-content: start; justify-items: start; }
.demo .d-inputs { grid-area: inputs; display: grid; gap: 24px; align-content: start; }
.demo .d-card { grid-area: card; display: grid; gap: 14px; align-content: start; background: var(--board); border-radius: 6px; padding: clamp(20px, 2.4vw, 28px); }
.demo .d-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.demo .seg.rpe span { min-width: 0; padding: 0 12px; }
.demo .toggle .t { max-width: 34ch; }
@media (min-width: 960px) {
  .demo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 112px); row-gap: 44px; grid-template-areas: "sets judge" "inputs card"; }
}
.sets th:first-child, .sets td:first-child { width: 48px; }
.sets td { padding: 12px 12px 12px 0; }

/* The calculator on /plates/ */
.per-side { font-size: 30px; }
#c-fit { display: grid; gap: 8px; }
.result .warm { margin-top: 18px; display: grid; gap: 12px; }
.result .ladder { padding: 0; }

/* Tables with a lift or a program in the first column */
.weeks td { font-size: 15px; padding: 10px 12px 10px 0; }
.programs th[scope="row"], .data th[scope="row"] { font: inherit; letter-spacing: 0; color: var(--iron); padding: 15px 16px 15px 0; border-bottom: 1.5px solid var(--mortar); vertical-align: top; }
.programs th[scope="row"] .heavy { display: block; font-size: 20px; }
.programs .why, .weeks .why { display: block; color: var(--steel); font-size: 14px; line-height: 1.4; margin-top: 5px; font-weight: 420; }
.programs td .why { font-size: 12.5px; white-space: nowrap; }
.programs td .num { font-size: 30px; line-height: 1; }
.programs td { vertical-align: top; padding-top: 15px; }
.programs td.steel { font-size: 15px; }
.data { min-width: 640px; }
@media (max-width: 719px) {
  .data { min-width: 0; }
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .data tr { display: block; padding: 14px 0; border-bottom: 1.5px solid var(--mortar); }
  .data tbody tr:first-child { border-top: 1.5px solid var(--mortar); }
  .data th[scope="row"], .data td { display: block; border: 0; padding: 0; width: auto; }
  .data td::before { content: attr(data-label); display: block; margin: 12px 0 4px; font-size: 13px; font-weight: 650; color: var(--steel); }
  .data td.end, .data th.end { text-align: left; }
}
.data th[scope="row"] { font-weight: 700; }
@media (min-width: 720px) { .data th[scope="row"] { width: 24%; } }
.data td { font-size: 15px; }
.programs .kit-inline { display: none; }
@media (max-width: 599px) {
  .programs thead th:nth-child(4), .programs td:nth-child(4) { display: none; }
  .programs .kit-inline { display: block; color: var(--iron); font-size: 13px; }
  .programs th[scope="row"] .heavy { font-size: 18px; }
  .programs td .why { white-space: normal; }
}

/* Footer: an iron course at the foot of the wall */
.site-foot { margin-top: clamp(96px, 12vw, 168px); padding: 44px 0 56px; background: var(--iron); color: var(--board); }
.site-foot .wrap { display: grid; gap: 28px; }
.site-foot .foot-mark { display: inline-flex; align-items: center; gap: 10px; font-stretch: 125%; font-weight: 880; font-size: 25px; letter-spacing: -0.03em; color: var(--board); text-decoration: none; margin-bottom: 18px; }
.site-foot .foot-mark .logo { width: 22px; height: auto; }
.site-foot .label.chalk { color: var(--board); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.site-foot .links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 560; color: #c4c6c8; text-decoration: none; }
.site-foot .links a:hover { color: #fff; text-decoration: underline; text-decoration-color: #fff; }
.site-foot .legal { color: #9a9da1; font-size: 14px; max-width: var(--measure); }
.site-foot :focus-visible { outline-color: #fff; }
@media (min-width: 768px) { .site-foot .wrap { grid-template-columns: 1fr auto; align-items: start; } }

/* Apple's model on Private Cloud Compute needs an Apple entitlement that is not granted yet, so the
   pages hide what they say about it (guide.css does the same). Delete this rule when it ships. */
.pcc { display: none !important; }

/* Pages: switch, progression, plates, january, creators, code */

/* Words that stay with what follows them (a call tag and its period) */
.nowrap { white-space: nowrap; }

/* /switch/: the match. Each name from Hevy on the left, joined to the library's block it goes to. */
.match { margin: 0; display: grid; gap: 12px; background: var(--board); border-radius: 6px; padding: clamp(18px, 2.4vw, 28px); }
.match-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1.5px solid var(--board-rule); }
.match-top .heavy { font-size: clamp(18px, 1.7vw, 22px); }
.match-cols, .match-rows li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
.match-cols .label { font-size: 13px; }
.match-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.match-rows li { position: relative; }
.match-rows li::after { content: ""; position: absolute; top: 50%; left: calc(50% - 12px); width: 24px; height: 2px; margin-top: -1px; background: var(--iron); }
.match .from, .match .to { display: flex; flex-direction: column; justify-content: center; min-height: 50px; padding: 9px 12px; border-radius: 3px; font-size: 15px; line-height: 1.3; }
.match .from { color: var(--steel); box-shadow: inset 0 0 0 1.5px var(--mortar); }
.match .to { background: var(--iron); color: var(--board); font-weight: 650; }
.match .to small { display: block; margin-top: 3px; font-size: 13px; font-weight: 500; color: #b9bbbd; }
.match .new .to { background: transparent; color: var(--iron); box-shadow: inset 0 0 0 2px var(--iron); }
.match .new .to small { color: var(--steel); }
.match figcaption { padding-top: 4px; font-size: 15px; line-height: 1.5; color: var(--steel); }
@media (max-width: 479px) {
  .match-cols, .match-rows li { column-gap: 14px; }
  .match-rows li::after { left: calc(50% - 7px); width: 14px; }
  .match .from, .match .to { padding: 8px 9px; font-size: 14px; }
  .match .to small { font-size: 12px; }
}

/* /switch/: the two ways in. Each stands on a floor; the stack is what that way brings. */
.ways { display: grid; gap: 64px; }
@media (min-width: 860px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); } }
.way { display: grid; gap: 16px; align-content: start; }
.way h3 { margin-top: 8px; }
.way-note { color: var(--steel); max-width: var(--measure); }
.way-stack { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding-bottom: 8px; border-bottom: 4px solid var(--iron); }
.way-stack i { display: grid; grid-template-columns: 64px auto; align-items: center; gap: 14px; height: 34px; font-style: normal; font-size: 15px; font-weight: 650; color: var(--iron); }
.way-stack i::before { content: ""; height: 100%; border-radius: 3px; background: var(--iron); }
@media (min-width: 860px) { .way-stack { min-height: 84px; } }

/* /switch/: what each row of the review says */
.outcomes { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--mortar); }
.outcomes li { display: grid; gap: 10px; padding: 16px 0; border-bottom: 1.5px solid var(--mortar); }
@media (min-width: 600px) { .outcomes li { grid-template-columns: minmax(0, 14.5em) minmax(0, 1fr); gap: 20px; align-items: center; } }
.chip-to { justify-self: start; padding: 9px 12px; border-radius: 3px; background: var(--iron); color: var(--board); font-size: 15px; font-weight: 650; line-height: 1.25; }
.chip-to.new { background: transparent; color: var(--iron); box-shadow: inset 0 0 0 2px var(--iron); }
.outcomes .o-text { color: var(--steel); }
.trademark { margin-top: 32px; }

/* /progression/: the demo. The set screen is an iron block, and the lamps light on it. */
.sec.try { padding-top: clamp(56px, 5.6vw, 80px); }
.try .sec-head { margin-bottom: 36px; }
.demo .d-judge { background: var(--iron); color: var(--board); border-radius: 6px; padding: clamp(22px, 3vw, 36px); gap: 18px; grid-template-rows: auto auto auto minmax(1.4em, auto); }
.demo .d-judge > .label { color: #b9bbbd; }
.demo .d-judge .lamps { padding: 6px 0 0; background: none; border-radius: 0; }
@media (min-width: 960px) { .demo .d-judge .lamps { --lamp: 64px; } }
.demo .d-judge .verdict { color: var(--board); }
.demo .d-judge .reasons { color: #ff8a82; font-size: 15px; }
.demo .d-title { font-size: 21px; }
@media (max-width: 959px) { .demo { grid-template-columns: minmax(0, 1fr); } }
.demo .seg.rpe span { min-width: 42px; padding: 0 10px; }
.d-steppers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.d-steppers .stepper { max-width: none; grid-template-columns: 48px minmax(0, 1fr) 48px; }
.demo .d-card .bar-box { margin-top: 4px; }
.demo .toggle .sw { box-shadow: inset 0 0 0 1.5px var(--steel); } /* the switch's edge reads on the wall (3:1) */
.end-note { margin-top: 16px; }
@media (max-width: 479px) {
  .d-steppers { gap: 12px; }
  .d-steppers .stepper { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .d-steppers .stepper input { font-size: 30px; }
}

/* Plates drawn on whiteboard white: the light plates (10 lb, 5 kg) get an edge so they read. */
.bar .plate[fill="#ECEAE4"] { stroke: #b4b2aa; stroke-width: 1px; }

/* /plates/: the calculator. The loaded bar runs the width of the page; the controls sit under it. */
.calc-hero .intro { max-width: 1000px; }
.calc-hero h1 { font-size: clamp(40px, 5.4vw, 76px); }
.sec.calc-sec { padding-top: clamp(36px, 4.4vw, 56px); }
.calc { display: grid; gap: 36px; }
.calc-load { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "fit" "bar"; gap: 18px 36px; align-items: center; background: var(--board); border-radius: 6px; padding: clamp(20px, 3vw, 40px); }
.calc-load .big { grid-area: num; }
.calc-load .big .num { font-size: clamp(88px, 10vw, 140px); }
.calc-load #c-fit, .calc-load #c-miss { grid-area: fit; display: grid; gap: 8px; }
#c-fit .per-side { font-size: clamp(24px, 2.4vw, 32px); }
.calc-bar { grid-area: bar; min-height: 84px; }
@media (min-width: 960px) {
  .calc-load { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num bar" ". fit"; }
  .calc-load #c-fit, .calc-load #c-miss { justify-items: end; text-align: right; }
}
.calc .controls { display: grid; gap: 26px; align-content: start; }
.calc .controls .stepper { max-width: 300px; }
.calc .chip input:not(:checked) + span { color: var(--steel); }
.c-rack .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-rack .chip > span { min-height: 82px; justify-content: center; align-content: end; padding: 10px 4px 8px; }
.c-rack .chip i { width: calc(var(--pw) * 1.15px); height: calc(var(--ph) * 0.34px); border-radius: 2px; opacity: 1; }
.c-rack .chip i.light { box-shadow: inset 0 0 0 1px #b4b2aa; }
.c-rack .chip input:not(:checked) + span i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--mortar); }
.c-rack .chip input:not(:checked) + span .n { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--mortar); }
.calc .warm { display: grid; gap: 14px; align-content: start; }
.calc .warm .c-warm-title { font-size: clamp(20px, 1.9vw, 24px); }
@media (min-width: 600px) {
  .calc .controls { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; }
  .c-bars, .c-rack { grid-column: 1 / -1; }
  .c-bars .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 420px; }
  .c-rack .chips { grid-template-columns: repeat(7, minmax(0, 1fr)); max-width: 640px; }
}
@media (min-width: 960px) {
  #c-miss .nearest { justify-content: flex-end; }
}
/* Wide screens: the controls and the warm-ups side by side, under the bar */
@media (min-width: 1100px) {
  .calc { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 80px); row-gap: 44px; }
  .calc-load { grid-column: 1 / -1; }
  .calc .ladder .step { grid-template-columns: 48px minmax(0, 1fr) minmax(96px, 150px); }
}

/* /january/: the block of weeks. Six weeks from Monday, January 4 as courses of blocks: a session is an
   iron block, a rest day an open joint, the deload week blue. The sessions set down once, in order. */
.jan-hero h1 { font-size: clamp(42px, 5.9vw, 84px); }
.jan-block { margin: 0; display: grid; gap: 16px; container-type: inline-size; }
.jan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.jan-top .heavy { font-size: clamp(18px, 1.7vw, 22px); }
.jan { display: grid; gap: 4px; }
.jan-days, .jan-wk { display: grid; grid-template-columns: 62px repeat(7, minmax(0, 1fr)); gap: 4px; }
.jan-days span { padding-bottom: 4px; font-size: 12.5px; font-weight: 640; color: var(--steel); text-align: center; }
.jan-weeks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.jan-wn { display: grid; align-content: center; gap: 3px; }
.jan-wn b { font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--iron); }
.jan-wn small { font-size: 12.5px; line-height: 1.1; color: var(--steel); }
.jan .d { display: grid; align-content: space-between; gap: 4px; min-height: 54px; padding: 7px 7px 6px; border-radius: 3px; overflow: hidden; }
.jan .d b { font-stretch: 62%; font-weight: 820; font-size: 19px; line-height: 0.9; }
.jan .d small { font-size: 11px; font-weight: 640; line-height: 1.1; white-space: nowrap; }
.jan .d.r { color: var(--steel); box-shadow: inset 0 0 0 1.5px var(--mortar); }
.jan .d.s { background: var(--iron); color: var(--board); }
.jan .d.first { background: var(--plate); color: #fff; }
.jan .deload .d.s { background: var(--deload); color: var(--iron); }
.jan-block figcaption { display: grid; gap: 8px; padding-top: 4px; font-size: 15px; line-height: 1.4; color: var(--steel); }
.jan-key { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.jan-key > .ct { justify-self: start; }
.jan-sw { width: 26px; height: 20px; border-radius: 3px; background: var(--plate); }
.jan .d.s { animation: set-down 430ms var(--ease-out) both; animation-delay: calc(200ms + var(--n, 0) * 38ms); }
@media (prefers-reduced-motion: reduce) { .jan .d.s { animation: none; } }
/* Narrow walls: no workout names in the cells; on a phone, the week's date alone. */
@container (max-width: 470px) {
  .jan .d { min-height: 44px; }
  .jan .d small { display: none; }
}
@container (max-width: 420px) {
  .jan-days, .jan-wk { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 3px; }
  .jan, .jan-weeks { gap: 3px; }
  .jan-wn b { display: none; }
  .jan-wn small { font-size: 12px; font-weight: 640; }
  .jan-days span { font-size: 11px; }
  .jan .d { min-height: 40px; padding: 5px 5px 4px; }
  .jan .d b { font-size: 16px; }
}

/* /january/: the 21 programs. The deload week is a blue tag, as on the block. On a phone each program
   is a row of its own: the name and summary, then its days and weeks. */
.programs td .why { display: inline-block; margin-top: 7px; padding: 4px 6px 3px; border-radius: 3px; background: var(--deload); color: var(--iron); font-size: 12px; font-weight: 650; line-height: 1; }
@media (max-width: 599px) {
  .programs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .programs, .programs tbody { display: block; }
  .programs tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding: 16px 0; border-bottom: 1.5px solid var(--mortar); }
  .programs tbody tr:first-child { border-top: 1.5px solid var(--mortar); }
  .programs th[scope="row"] { flex: 1 1 100%; padding: 0; border: 0; }
  .programs td { padding: 0; border: 0; }
  .programs td.end { display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .programs td.end .num { font-size: 26px; }
  .programs td.end::after { order: 1; font-size: 14px; font-weight: 600; color: var(--steel); }
  .programs td:nth-child(2)::after { content: "days a week"; }
  .programs td:nth-child(3)::after { content: "weeks"; }
  .programs td.end .why { order: 2; margin: 0 0 0 4px; }
}

/* /creators/: the code your audience gets, drawn as a card: an iron block with the code and the offer */
.cta-note { color: var(--steel); font-size: 15px; }
.pass { margin: 0; display: grid; gap: 14px; }
.pass-card { display: grid; background: var(--iron); color: var(--board); border-radius: 6px; padding: clamp(24px, 3.2vw, 40px); container-type: inline-size; }
.pass-top { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); }
.pass-logo { width: 22px; height: auto; flex: none; color: var(--board); }
.pass-top .label { color: #b9bbbd; }
.pass-card p { margin: 0; }
/* The code fills the card's width, as a code a creator hands out would. */
.pass-code { font-stretch: 125%; font-weight: 880; font-size: clamp(32px, 3.6vw, 52px); font-size: min(64px, 12.4cqi); line-height: 0.95; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pass-card .pass-offer { margin-top: 18px; font-stretch: 112%; font-weight: 760; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; }
.pass-card .pass-terms { margin-top: 6px; color: #b9bbbd; font-size: 15px; }
.pass-card .pass-link { margin-top: 26px; padding-top: 16px; border-top: 1.5px solid #3a3d42; font-size: 15px; font-weight: 600; color: #e4e4e0; }
.pass-link span { white-space: nowrap; }
.pass figcaption { font-size: 15px; line-height: 1.5; color: var(--steel); max-width: 52ch; }

/* /creators/: what you get, each with its number */
.gets { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--mortar); }
.gets li { display: grid; gap: 6px 32px; padding: 24px 0; border-bottom: 1.5px solid var(--mortar); }
.gets .gets-n { font-size: clamp(52px, 6vw, 76px); color: var(--iron); }
.gets .r-title { font-stretch: 112%; font-weight: 760; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; color: var(--iron); }
.gets .r-text { color: var(--steel); max-width: var(--measure); }
@media (min-width: 720px) {
  .gets li { grid-template-columns: minmax(180px, 3fr) minmax(0, 7fr); align-items: start; }
  .gets .gets-n { grid-row: 1 / span 2; }
  .gets .r-title { padding-top: 6px; }
}

/* /code/: the code, then what it opens, month by month: one free month, then a paid year */
.code-intro { max-width: 900px; }
.code-intro h1 { font-size: clamp(40px, 5.4vw, 76px); }
.code-intro .code-box { padding: clamp(20px, 3vw, 36px); }
.code-lead { margin-top: 22px; }
.code-form { margin-top: 22px; }
.offer { display: grid; gap: 10px; margin-top: 12px; padding-top: 18px; border-top: 1.5px solid var(--board-rule); }
.offer-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 640; line-height: 1.3; color: var(--steel); }
.offer-labels span:last-child { color: var(--iron); text-align: right; }
.offer-months { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.offer-months li { height: 30px; border-radius: 3px; background: var(--iron); }
.offer-months li.free { background: transparent; box-shadow: inset 0 0 0 2px var(--iron); }
@media (max-width: 479px) { .offer-months { gap: 3px; } .offer-months li { height: 24px; } }