/* Worked frameworks · quiet production layout. White page, Georgia headings, system body. Components carry the
   color: one pastel per skeleton on the hero tiles, the matching bar on each skeleton heading and bucket card.
   Hairline cards, 6px radius, 44px tap targets, single column under 600px. Tokens match the case log. */
:root{--ink:#302B29;--muted:#5C544E;--line:#D9D9D9;--soft:#EFEDE8;--accent:#800000;--deep:#4B1020;--focus:#315873}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--harper-header-height,90px) + 24px)}
body{margin:0;background:#fff;color:var(--ink);font:15px/1.6 system-ui,-apple-system,sans-serif}
main{max-width:1160px;margin:auto;padding:32px 32px 64px}
a{color:var(--accent);text-underline-offset:4px}
a,button,summary{touch-action:manipulation}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.skip{position:absolute;top:-80px;left:16px;padding:12px;background:#fff}.skip:focus{top:0}
.eyebrow{margin:0;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
h1,h2,h3,h4{font-family:Georgia,serif;font-weight:400;text-wrap:balance}
h1{font-size:32px;line-height:1.25;margin:8px 0 16px}
h2{font-size:24px;line-height:1.3;margin:0 0 8px;padding-left:12px;border-left:4px solid var(--deep)}
h3{font-size:19px;line-height:1.35;margin:0 0 8px}
h4{font-size:17px;line-height:1.35;margin:0 0 6px;color:var(--deep)}
p,li,dt,dd,span{overflow-wrap:anywhere}
.lede{max-width:760px;margin:0 0 12px}
.note{font-size:13px;color:var(--muted);max-width:760px;margin:0}
.routes{display:flex;flex-wrap:wrap;gap:0 20px;margin:4px 0 0;padding:0;list-style:none;font-weight:600}
.routes a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}.routes a:hover{text-decoration:underline}

/* Hues, shared by the hero tiles, the skeleton headings and the bucket cards. */
[data-hue=goldenrod]{--wash:#FBF0D1;--tint-ink:#5C4300;--tint-line:#E9D28A}
[data-hue=lake]{--wash:#D6E9EE;--tint-ink:#002A3A;--tint-line:#9CC7D3}
[data-hue=ivy]{--wash:#E7EDDE;--tint-ink:#284734;--tint-line:#B9CDA0}
[data-hue=violet]{--wash:#E6DCE8;--tint-ink:#41273B;--tint-line:#BFAEC3}
[data-hue=terracotta]{--wash:#FAEAD6;--tint-ink:#A9431E;--tint-line:#EFC39B}
[data-hue=grey]{--wash:#EEEEEE;--tint-ink:#302B29;--tint-line:#CFCFCF}
[data-hue=rose]{--wash:#F3E3E4;--tint-ink:#643335;--tint-line:#D9AEB0}
[data-hue=forest]{--wash:#DFE9E3;--tint-ink:#1F4A30;--tint-line:#A9C6B3}

/* Visual hero: the eight skeletons as tiles, doubling as the anchor nav. */
.sk-hero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:24px 0 8px}
.sk-tile{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:14px 14px 12px;background:var(--wash);border:1px solid var(--tint-line);border-top:4px solid var(--tint-ink);border-radius:6px;color:var(--ink);text-decoration:none;transition:box-shadow .15s}
.sk-tile:hover{box-shadow:0 6px 18px rgba(48,43,41,.12)}
.sk-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.sk-n{font:700 12px/1 system-ui,-apple-system,sans-serif;letter-spacing:.06em;color:var(--tint-ink)}
.sk-name{font:400 20px/1.2 Georgia,serif;color:var(--deep)}
.sk-q{font-size:13px;line-height:1.45;color:var(--tint-ink)}
.sk-hero+.note{margin-top:10px}

/* The centerpiece: one skeleton beside what the caser wrote. */
.adapted{margin-top:44px;padding:24px 28px;background:#fff;border:1px solid var(--line);border-radius:10px}
.adapted h2{border-left-color:#284734}
.rule{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;max-width:880px;margin:16px 0 24px;padding:16px 20px;background:#E7EDDE;border:1px solid #B9CDA0;border-left:5px solid #284734;border-radius:0 6px 6px 0;color:#284734}
.rule-mark{font:400 30px/1 Georgia,serif;padding-top:2px}
.rule h3{margin:0 0 4px;color:#284734}
.rule p{margin:0;font-size:14px;line-height:1.55}
.compare{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 24px;margin:0}
.compare-head{display:contents}
.compare-head span{padding:0 0 8px;border-bottom:2px solid var(--deep);font:700 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--deep)}
.compare-row{display:contents}
.compare-row>div{padding:16px 0;border-top:1px solid var(--line)}
.compare-row:first-of-type>div{border-top:0}
.compare-row .skel{color:var(--muted)}
.compare-row .skel h4{color:#284734}
.compare-row .skel p{margin:0;font-size:14px}
.compare-row .wrote h4{display:flex;align-items:center;gap:8px}
.compare-row .wrote h4 .area{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:#284734;color:#fff;font:700 12px/1 system-ui,-apple-system,sans-serif}
.compare-row .wrote ul{margin:0 0 10px;padding-left:18px}
.compare-row .wrote li{margin:3px 0;font-size:14px}
.why{margin:0;padding:10px 14px;background:#F7F7F7;border:1px solid var(--line);border-radius:6px;font-size:13px;line-height:1.5;color:var(--muted)}
.why strong{color:#284734;font-weight:650}
.changed{max-width:880px;margin:24px 0 0}
.changed h3{margin-bottom:6px}
.changed ul{margin:0;padding-left:20px}
.changed li{margin:6px 0;font-size:14px}

/* One section per skeleton: question, bucket row, compact meta. */
.skeleton{margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.skeleton h2{border-left-color:var(--tint-ink);display:flex;align-items:center;gap:10px}
.skeleton h2 .n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--tint-ink);color:#fff;font:700 12px/1 system-ui,-apple-system,sans-serif;flex:none}
.skeleton .question{max-width:760px;margin:0 0 16px;font:400 19px/1.4 Georgia,serif;color:var(--deep)}
.bucket-row{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:14px}
.bucket-card{padding:14px 16px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--tint-ink);border-radius:6px}
.bucket-card h4{color:var(--tint-ink)}
.bucket-card p{margin:0;font-size:14px;line-height:1.55}
.sk-meta{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 16px;margin:16px 0 0;max-width:880px}
.sk-meta dt{font:700 11px/1.6 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--tint-ink);padding-top:6px}
.sk-meta dd{margin:0;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{padding:5px 10px;background:var(--wash);border:1px solid var(--tint-line);border-radius:14px;font-size:13px;line-height:1.4;color:var(--tint-ink)}
.chips li::before{content:'\201C'}.chips li::after{content:'\201D'}
.trap{padding:10px 14px;background:#F3E3E4;border:1px solid #D9AEB0;border-left:4px solid #643335;border-radius:0 6px 6px 0;color:#643335}
.skeleton:target h2{outline:2px solid var(--tint-ink);outline-offset:6px}

/* Elsewhere on the site. */
.elsewhere{margin-top:44px}
.elsewhere h2{border-left-color:#643335}
.elsewhere p{max-width:760px}
.action{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;background:#fff;border:1px solid var(--line);border-radius:4px;color:var(--accent);font-weight:600;text-decoration:none}
.action:hover{border-color:#A4343A;background:#FAF4F4}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}

@media(max-width:1000px){.sk-hero{grid-template-columns:repeat(2,minmax(0,1fr))}.sk-tile{min-height:0}.bucket-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:899px){main{padding:16px 16px 48px}h1{font-size:26px}.adapted{padding:18px}.compare{grid-template-columns:1fr;gap:0}.compare-head{display:none}.compare-row{display:block;padding:16px 0;border-top:1px solid var(--line)}.compare-row>div{padding:0;border-top:0}.compare-row .skel{margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--line)}.compare-row .skel h4::before{content:'Skeleton · ';font:700 11px/1 system-ui,-apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.sk-meta{grid-template-columns:1fr;gap:4px 0}.sk-meta dt{padding-top:10px}}
@media(max-width:600px){.sk-hero{grid-template-columns:1fr;gap:8px}.sk-tile{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;padding:12px 14px;border-top-width:1px;border-left:4px solid var(--tint-ink)}.sk-n{grid-row:1/3;align-self:start;padding-top:4px}.sk-name{font-size:18px}.bucket-row{grid-template-columns:1fr}.rule{grid-template-columns:1fr}.rule-mark{display:none}.action{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.sk-tile{transition:none}}
@media print{.skip,.recruiting-nav{display:none!important}.sk-hero{grid-template-columns:repeat(4,minmax(0,1fr))}.compare{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}