/* True Rate: plywood, carpenter pencil, steel tape. Accent (tape yellow) stays under 10% of the page. */
/* --accent-2 is the plywood secondary from DESIGN.md (#c8743a), taken to its dark edge-grain shade so paper-band hovers pass AA */
body { --accent: #ffcc33; --accent-2: #934d1a; --ply-ink: #934d1a; }

/* hero: pinned while the tape comes out (desktop, motion allowed) */
.scrolly { position: relative; }
.scrolly .track { position: absolute; left: 0; top: 0; width: 1px; height: calc(100% - 100svh); pointer-events: none; }
.stage .track-m { position: absolute; left: 0; top: -38svh; width: 1px; height: 38svh; pointer-events: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .scrolly { height: 250svh; }
  .scrolly .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
}
.hero h1 { font-size: clamp(46px, 6.4vw, 100px); max-width: 12ch; }
.hero .lede { max-width: 42ch; }
.hero .stage .drag { left: 14%; bottom: 20%; }
.log { margin-top: 44px; max-width: 360px; }
.log .eyebrow { margin-bottom: 4px; }
.log ol { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: l; }
.log li { font: 500 12px/1.45 var(--mono); letter-spacing: .02em; color: var(--paper-faint); padding: 7px 0 6px 30px; border-bottom: 1px solid var(--rule);
  position: relative; counter-increment: l; transition: color .6s var(--ease); }
.log li::before { content: "0" counter(l); position: absolute; left: 0; color: var(--paper-faint); opacity: .6; }
.log li.on { color: var(--paper); }
.log li.on::before { color: var(--accent); opacity: 1; }
.log li.big.on { color: var(--accent); }
.log.all li { color: var(--paper); }

.band.paper { --accent-2: #934d1a; }
/* captions read as handwritten notes: mono, but not shouted */
.figure .fig { text-transform: none; letter-spacing: .03em; font-size: 12px; }

/* two-column sections that break the grid a little */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
.split h2 { max-width: 13ch; }
.band.paper h2 em, .band.paper h1 em { color: var(--ply-ink); }
.band.paper .eyebrow b { color: var(--ply-ink); }
.band.paper .ruled .num { color: var(--ply-ink); }
.ruled > li { grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.4fr); }
.ruled h3 { font-size: clamp(21px, 1.9vw, 27px); margin: 0; }
.ruled p { margin: 0; }
#why .ruled { margin-top: 10px; }
.said { margin: 44px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--accent-2); max-width: 30ch; transform: rotate(-.8deg); }
.said p { font: italic 400 clamp(22px, 2vw, 28px)/1.32 var(--display); margin: 0 0 10px; }
.said .fig { text-decoration: none; }
.band.paper .said .fig:hover { color: var(--ply-ink); }
.callout { font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.34; margin-top: clamp(56px, 7vw, 96px); max-width: none; }
.callout .scribble { white-space: normal; }
.callout .scribble::after { filter: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M1 5.6C34 3 70 6.6 104 4.2s66-1.4 95 1.2' fill='none' stroke='%23a1561f' stroke-width='2.4' stroke-linecap='round'/></svg>"); }

/* 03: the worked example */
.brief { font: 500 13px/1.7 var(--mono); letter-spacing: .04em; color: var(--paper-dim); max-width: 74ch; border-left: 2px solid var(--accent); padding-left: 18px; margin: 18px 0 64px; }
.example { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: clamp(64px, 8vw, 120px) minmax(0, 1fr); gap: 20px; padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.steps .big-num { font: 400 clamp(72px, 9vw, 136px)/.8 var(--display); color: var(--paper); }
.steps li:last-child .big-num { color: var(--accent); }
.steps h3 { margin-bottom: 10px; }
.steps p { color: var(--paper-dim); margin: 0; }
.answer { color: var(--paper); font-weight: 600; white-space: nowrap; }
.fig-calc { position: relative; margin-top: 40px; max-width: 420px; justify-self: end; }
.fig-calc .frame { transform: rotate(1.1deg); }
.aside { position: absolute; left: -150px; top: -64px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; color: var(--accent); }
.aside .arrow { width: 110px; height: 82px; order: 2; margin-left: 40px; transform: scaleX(-1) rotate(-8deg); }
.aside .note { color: var(--paper-dim); transform: rotate(-3deg); }
.gap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; padding-top: 34px; }
.gap p { margin: 0; color: var(--paper-dim); }
.gap strong { color: var(--paper); font-weight: 600; }
.go { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; justify-self: end; }

/* 04: markup / margin */
.fig-mm { max-width: 400px; }
.band.paper .figure .frame { background: #fbf6ec; box-shadow: 0 0 0 1px rgba(15, 13, 11, .1), 0 30px 50px -30px rgba(15, 13, 11, .55); }
.fig-mm .frame { transform: rotate(-1.4deg); }
.mm { border-collapse: collapse; margin: 28px 0 0; min-width: 260px; font-variant-numeric: tabular-nums; }
.mm caption { text-align: left; padding-bottom: 10px; color: #6d6458; }
.mm th { font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-align: left; color: #6d6458; padding: 10px 40px 10px 0; border-bottom: 1px solid rgba(15, 13, 11, .3); }
.mm td { font: 400 28px/1 var(--display); padding: 12px 40px 10px 0; border-bottom: 1px solid rgba(15, 13, 11, .14); }
.mm td + td { color: var(--ply-ink); }

/* 05: the kit */
.kit { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 90px); margin-top: 48px; align-items: start; }
.kit .ruled > li { grid-template-columns: 44px minmax(0, 1fr); padding: 20px 0; }
.kit .ruled > li > p { grid-column: 2; color: var(--paper-dim); }
.kit .ruled .num { font-size: 34px; }
.kit-side { margin-top: 18px; }
.fig-job .frame { transform: rotate(.7deg); }
.plain { list-style: none; margin: 40px 0 0; padding: 0; }
.plain li { padding: 12px 0 12px 26px; border-bottom: 1px solid var(--rule); position: relative; color: var(--paper-dim); }
.plain li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 12px; height: 2px; background: var(--accent); transform: rotate(-8deg); }

/* 06: limits */
.limits { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(15, 13, 11, .16); }
.limits li { padding: 18px 0; border-bottom: 1px solid rgba(15, 13, 11, .16); color: #3d362e; }
.limits b { color: var(--ink-0); font-weight: 600; }

/* 07: get it */
.get { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: center; }
.price { position: relative; justify-self: center; padding: 40px 0 0 30px; }
.price-num { display: block; font: 400 clamp(140px, 18vw, 260px)/.85 var(--display); letter-spacing: -.04em; color: var(--paper); }
.price .tag { position: absolute; top: 6px; right: -10px; transform: rotate(2deg); }
.price .arrow { position: absolute; left: -120px; bottom: 34px; width: 120px; height: 52px; color: var(--accent); transform: scaleX(-1) rotate(-12deg); }
.ask { margin-top: 30px; }
.ask a { color: var(--paper-dim); }

@media (max-width: 900px) {
  .split, .split.rev, .example, .gap, .kit, .get { grid-template-columns: 1fr; }
  .split.rev > figure { order: 2; }
  .fig-calc { justify-self: start; margin-top: 64px; }
  .aside { left: auto; right: 0; top: -58px; align-items: flex-end; }
  .aside .arrow { margin: 0 20px 0 0; }
  .go { justify-self: start; }
  .price { justify-self: start; padding-left: 0; }
  .price .arrow { display: none; }
  .price .tag { right: auto; left: 140px; }
  .log { max-width: none; }
}
@media (max-width: 560px) {
  .hero .stage { height: 56svh; }
  .steps li { grid-template-columns: 56px minmax(0, 1fr); gap: 14px; }
  .mm td { font-size: 24px; }
  .callout { font-size: 24px; }
}
h2 { text-wrap: balance; }
.kit .ruled > li { row-gap: 6px; }
.get .actions { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-top: 30px; }