.starter { color: var(--charcoal); background: var(--cream); }
.starter a { color: var(--sapphire); text-underline-offset: .2em; }
.starter :focus-visible { outline: 3px solid var(--sapphire); outline-offset: 5px; }
.starter__skip { position: absolute; top: -100px; left: 20px; padding: 12px; background: white; z-index: 20; }
.starter__skip:focus { top: 12px; }
.starter__header, .starter__footer { max-width: 1200px; margin: auto; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.starter__header { border-bottom: 1px solid var(--cream-dark); }
.starter__brand { display: inline-flex; align-items: center; gap: 10px; font: 400 26px var(--font-display); text-decoration: none; }
.starter__hero { max-width: 960px; margin: auto; padding: 85px 32px 55px; }
.starter__eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--sapphire); margin-bottom: 20px; }
.starter h1 { font: 300 clamp(3.4rem, 8vw, 6.5rem)/1.04 var(--font-display); letter-spacing: -.045em; margin: 0 0 28px; }
.starter h1 em { color: var(--sapphire); }
.starter__standfirst { max-width: 720px; font-size: 1.3rem; line-height: 1.65; margin-bottom: 24px; }
.starter__meta, .starter__note { font-size: .9rem; color: #59534d; line-height: 1.65; }
.starter__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 28px 0 12px; }
.starter__actions button, .starter__button { border: 1px solid var(--sapphire); border-radius: 4px; padding: 12px 18px; background: transparent; font: 600 .95rem var(--font-body); color: var(--sapphire); cursor: pointer; text-decoration: none; }
.starter a.starter__button { background: var(--sapphire); color: white; }
.starter__actions button:hover { background: var(--cream-dark); }
.starter__actions [hidden] { display: none; }
#share-status { min-height: 1.5em; font-size: .9rem; overflow-wrap: anywhere; }
.starter__layout { max-width: 1200px; margin: auto; padding: 60px 32px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.starter__contents { position: sticky; top: 24px; font-size: .9rem; }
.starter__contents p { font-weight: 700; margin-bottom: 14px; }
.starter__contents ol { padding-left: 20px; }
.starter__contents li { margin: 0 0 12px; }
.starter__contents a { text-decoration: none; }
.starter__contents a:hover { text-decoration: underline; }
.starter__article { min-width: 0; }
.starter__article section { margin-bottom: 64px; scroll-margin-top: 24px; }
.starter h2 { font: 400 clamp(1.9rem, 3vw, 2.5rem)/1.2 var(--font-display); letter-spacing: -.025em; margin: 0 0 24px; }
.starter h3 { font-size: 1.05rem; line-height: 1.5; margin: 0 0 12px; }
.starter__article p, .starter__article li { line-height: 1.8; margin-bottom: 20px; }
.starter__article ul, .starter__article ol { padding-left: 24px; }
.starter__article .starter__eyebrow { margin-bottom: 12px; }
.starter__checklist { border: 1px solid #d3c9bc; border-radius: 4px; padding: 8px 24px; margin: 24px 0; }
.starter__checklist label { display: flex; align-items: start; gap: 14px; padding: 16px 0; line-height: 1.6; cursor: pointer; }
.starter__checklist label + label { border-top: 1px solid #e1d8cc; }
.starter__checklist input { margin-top: 5px; width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--sapphire); }
.starter__script { padding: 24px; margin: 24px 0; background: var(--cream-dark); border-radius: 4px; }
.starter__script { border-left: 3px solid var(--sapphire); background: #fffdf9; }
.starter__script p:last-child { margin-bottom: 0; }
.starter__table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid #d3c9bc; border-radius: 4px; }
.starter table { border-collapse: collapse; width: 100%; min-width: 620px; text-align: left; font-size: .95rem; line-height: 1.65; }
.starter caption { text-align: left; padding: 16px; font-weight: 700; background: var(--cream-dark); }
.starter th, .starter td { padding: 16px; vertical-align: top; border-bottom: 1px solid #e1d8cc; }
.starter thead { background: #fffdf9; }
.starter tbody tr:last-child > * { border-bottom: 0; }
.starter__sources { border-top: 1px solid #d3c9bc; padding-top: 40px; font-size: .92rem; }
.starter__footer { border-top: 1px solid #d3c9bc; font-size: .9rem; }
@media (max-width: 850px) { .starter__layout { grid-template-columns: minmax(0, 1fr); gap: 36px; } .starter__contents { position: static; padding-bottom: 24px; border-bottom: 1px solid #d3c9bc; } .starter__contents ol { columns: 2; column-gap: 24px; } .starter__contents li { break-inside: avoid; } }
@media (max-width: 480px) { .starter__header, .starter__footer { padding: 22px 20px; } .starter__header > a:last-child { font-size: .85rem; } .starter__hero { padding: 48px 20px 36px; } .starter__standfirst { font-size: 1.12rem; } .starter__layout { padding: 36px 20px; } .starter__contents ol { columns: 1; } .starter__checklist, .starter__script { padding-left: 18px; padding-right: 18px; } .starter__footer { flex-wrap: wrap; } }
@media print { .starter { background: white; color: black; } .starter__header, .starter__contents, .starter__actions, #share-status, .starter__skip, .starter__footer { display: none; } .starter__hero { padding: 0 0 24px; } .starter h1 { font-size: 40pt; } .starter__layout { display: block; padding: 24px 0; } .starter__article section { margin-bottom: 28px; } .starter h2, .starter h3 { break-after: avoid; } .starter__script, .starter__checklist label, .starter tr { break-inside: avoid; } .starter__table-wrap { overflow: visible; } .starter table { min-width: 0; font-size: 9pt; } .starter th, .starter td { padding: 8px; } .starter a { color: black; } }