:root { --brand: #7d2448; --brand-ink: #fff; --accent: #e2a93b; }
.hero { padding-block: var(--s5) var(--s5); }
.hero .container { grid-template-columns: 1fr; }
.hero-title { max-width: 20ch; }
.kicker { font: 700 var(--step--1)/1.2 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-text); margin: 0 0 var(--s2); }
.choices { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .choices { grid-template-columns: repeat(3, 1fr); } }
.choice { display: grid; grid-template-columns: 3rem 1fr; gap: var(--s3); align-items: center; padding: var(--s4); border: 2px solid var(--line); border-radius: var(--radius-l); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s; }
.choice:hover, .choice:focus-visible { border-color: var(--brand); transform: translateY(-2px); }
.choice b { display: block; font: 700 var(--step-1)/1.2 var(--font-display); }
.choice span { color: var(--ink-2); font-size: var(--step--1); }
.choice svg { width: 3rem; height: 3rem; }
@media (min-width: 760px) { .choice { grid-template-columns: 1fr; align-content: start; } }
.answer { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s2); text-align: center; background: var(--brand); color: var(--brand-ink); border-radius: var(--radius-l); padding: var(--s4); }
.answer div { display: grid; gap: 2px; }
.answer small { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; }
.answer strong { font: 750 clamp(1.4rem, 1rem + 2.5vw, 2.4rem)/1.1 var(--font-display); font-variant-numeric: tabular-nums; }
.answer .lead strong { font-size: clamp(2.2rem, 1.4rem + 4vw, 3.6rem); }
.answer-note { grid-column: 1 / -1; margin: var(--s2) 0 0; font-size: var(--step--1); opacity: 0.92; }
.tool { display: grid; gap: var(--s4); }
@media (min-width: 900px) { .tool.two { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.stage { display: grid; place-items: center; min-height: 13rem; background: var(--surface-2); border-radius: var(--radius); position: relative; overflow: hidden; }
.ring-circle { border-radius: 50%; border: 3px solid var(--brand); box-shadow: 0 0 0 9999px color-mix(in oklab, var(--surface-2) 40%, transparent); }
.cardline { position: relative; height: 4.5rem; margin: var(--s3) auto; border-left: 3px solid var(--brand); border-right: 3px solid var(--brand); background: repeating-linear-gradient(90deg, var(--brand-soft) 0 6px, transparent 6px 12px); border-radius: 4px; }
.range-row { display: flex; gap: var(--s2); align-items: center; }
.range-row input[type=range] { flex: 1; accent-color: var(--brand); min-height: 2.75rem; }
.step-btn { min-width: 2.75rem; min-height: 2.75rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 700 1.25rem/1 var(--font-body); cursor: pointer; }
.methods { display: grid; gap: var(--s3); counter-reset: m; padding: 0; list-style: none; }
.methods li { counter-increment: m; }
.methods details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.methods summary { cursor: pointer; font: 700 var(--step-0)/1.3 var(--font-display); list-style: none; display: flex; gap: var(--s3); align-items: center; }
.methods summary::before { content: counter(m); flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font-size: 0.95rem; }
.methods details p, .methods details ol { color: var(--ink-2); margin: var(--s3) 0 0; }
.chip { display: inline-block; padding: 2px 10px; border-radius: var(--pill); background: color-mix(in oklab, var(--accent) 30%, var(--surface)); color: var(--ink); font-size: 0.8rem; font-weight: 700; margin-left: auto; }
.rtable tr.hit td { background: var(--brand-soft); font-weight: 700; }
.small { font-size: var(--step--1); color: var(--ink-2); }
.print-only { display: none; }
@media print {
  body > *:not(main), main > *:not(.print-sheet), .site-header, footer { display: none !important; }
  .print-only { display: block; }
  .print-sheet { color: #000; background: #fff; }
  .sheet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm; }
  .sheet-grid div { text-align: center; font: 10pt/1.2 sans-serif; }
  .sheet-grid i { display: block; margin: 0 auto 2mm; border: 0.3mm solid #000; border-radius: 50%; }
  .inch { width: 25.4mm; height: 25.4mm; border: 0.3mm solid #000; display: inline-grid; place-items: center; font: 9pt sans-serif; }
}
.tool .flow { grid-template-columns: 1fr; align-content: start; }
.answer [data-mm] { font-size: clamp(1.05rem, 0.9rem + 1vw, 1.5rem); align-self: center; }
.stage { min-height: 9.5rem; padding: var(--s4); }
.stage-read { position: absolute; top: var(--s2); left: var(--s2); padding: 4px 10px; border-radius: var(--pill); background: var(--brand); color: var(--brand-ink); font: 700 var(--step--1)/1.2 var(--font-body); }
@media (max-width: 759px) { .tool .card { padding: var(--s4); } }
.chip { white-space: nowrap; }
.chart { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.chart th { text-align: left; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); padding: var(--s2) 6px; border-bottom: 2px solid var(--line); }
.chart td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.chart td:first-child { font: 700 var(--step-0)/1 var(--font-display); color: var(--brand-text); }
.chart tr.hit td { background: var(--brand-soft); font-weight: 700; }
.ring-circle { border-color: var(--brand-text); }
.cardline { border-color: var(--brand-text); }
.choice-lead { border-color: var(--brand); }
.choice .chip { display: inline-block; margin: var(--s2) 0 0; font-style: normal; }
.answer small { font-size: 0.8rem; opacity: 1; }
.methods summary { flex-wrap: wrap; }
.site-header nav { gap: var(--s3); }
@media (max-width: 759px) {
  .choice { padding: var(--s3) var(--s4); }
  .hero .container { gap: var(--s3); }
  .site-header .brand { font-size: 1rem; }
}
@media (max-width: 420px) { .site-header nav a[href="measure-a-ring"] { display: none; } }
/* Guide pages. */
.prose > p, .prose > h2 { max-width: 68ch; }
.prose > p + p, .prose > h2 + p, .prose > table + p { margin-top: var(--s3); }
.related { margin-top: var(--s5); font-size: var(--step--1); color: var(--ink-2); }
.chart tr.typical td { background: color-mix(in oklab, var(--accent) 18%, transparent); }
.dims { display: grid; grid-template-columns: auto 1fr; gap: var(--s1) var(--s3); margin: 0; font-variant-numeric: tabular-nums; }
.dims dt { color: var(--ink-2); font-size: var(--step--1); }
.dims dd { margin: 0; font-weight: 700; }
.answer-one { grid-template-columns: 1fr; }
.steps-one { grid-template-columns: 1fr; }
textarea.input { min-height: 7rem; resize: vertical; font: inherit; line-height: 1.45; }
.guides { display: grid; gap: var(--s2) var(--s4); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: 0; list-style: none; margin: var(--s4) 0 0; }
.strip { display: none; }
@media print {
  .strip { display: block; position: relative; height: 14mm; border: 0.3mm dashed #000; margin-top: 3mm; }
  .strip .tick { position: absolute; bottom: 0; height: 3mm; border-left: 0.25mm solid #000; font: 7pt sans-serif; padding-left: 0.6mm; }
  .strip .tick.major { height: 6mm; font-size: 6pt; }
  .strip .tick.high { height: 10mm; }
  .strip .tick.zero { height: 14mm; border-left-width: 0.4mm; }
}