:root { --blue: #0b57d0; --ink: #111; --muted: #666; --line: #e5e5e5; --soft: #f4f7fd; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--ink); font: 16px/1.6 Arial, Helvetica, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 32px; }
h2 { font-size: 20px; margin-bottom: 4px; }
h3 { font-size: 16px; }
p { margin: 6px 0 0; }

.layout { max-width: 1000px; margin: 0 auto; padding: 48px 16px 64px; display: grid; gap: 48px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .layout { grid-template-columns: 240px minmax(0, 1fr); padding: 64px 32px; } }
main { min-width: 0; }

/* side card: four stages, top to bottom, then "Sites I like" */
.stages { display: none; }
@media (min-width: 860px) { .stages { display: block; position: sticky; top: 32px; align-self: start; } }
.stages .frame { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.stages img { display: block; width: 100%; height: auto; }
.stages .frame a { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; padding: 8px 10px; color: #fff; font-size: 13px; font-weight: bold; cursor: pointer; }
.stages .frame a:hover { text-decoration: none; background: rgba(11,87,208,.14); box-shadow: inset 0 0 0 2px rgba(11,87,208,.6); }
.stages .frame a.on { background: rgba(11,87,208,.18); box-shadow: inset 0 0 0 3px var(--blue); }
.stages .frame a span { background: rgba(0,0,0,.45); padding: 2px 6px; border-radius: 4px; }
.stages .frame a.on span { background: var(--blue); }
.s1 { top: 0; height: 23.556%; }
.s2 { top: 23.556%; height: 26.444%; }
.s3 { top: 50%; height: 25.778%; }
.s4 { top: 75.778%; height: 24.222%; }
.side-link { display: block; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: bold; }
.side-link:hover, .side-link.on { border-color: var(--blue); background: var(--soft); text-decoration: none; }

/* phone: the same four stages as a compact row */
.stages-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 20px; }
@media (min-width: 860px) { .stages-row { display: none; } .phone-only { display: none; } }
.stages-row a { display: block; font-size: 12px; font-weight: bold; color: var(--ink); text-align: center; }
.stages-row i { display: block; aspect-ratio: 1; border-radius: 6px; margin-bottom: 4px; background: url(img/stages.jpg) no-repeat; background-size: 260% auto; border: 1px solid var(--line); }
.stages-row a:nth-child(1) i { background-position: 66% 0; }
.stages-row a:nth-child(2) i { background-position: 62% 32%; }
.stages-row a:nth-child(3) i { background-position: 70% 64%; }
.stages-row a:nth-child(4) i { background-position: 80% 100%; }

main > header { margin-bottom: 40px; }
.lede { font-size: 18px; margin-top: 12px; max-width: 600px; }
.links { margin-top: 12px; font-size: 15px; }
.links a + a::before { content: "·"; color: var(--muted); margin: 0 8px; display: inline-block; }

section { padding: 32px 0; border-top: 1px solid var(--line); scroll-margin-top: 24px; }
.when { font-size: 14px; color: var(--muted); }
.item { margin-top: 22px; }
.item .tag { font-size: 13px; color: var(--blue); font-weight: bold; }
blockquote { margin: 26px 0 4px; padding: 0; max-width: 620px; font-size: 20px; line-height: 1.45; font-style: italic; color: var(--ink); }
ul.list { margin: 12px 0 0; padding-left: 18px; }
ul.list li { margin: 6px 0; }

figure { margin: 14px 0 0; }
figure img { display: block; width: 100%; max-width: 560px; border-radius: 8px; border: 1px solid var(--line); }
.pair { display: grid; gap: 10px; grid-template-columns: 1fr 1.5fr; max-width: 560px; margin-top: 14px; }
.pair img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
@media (max-width: 520px) { .pair { grid-template-columns: 1fr; } .pair img { height: auto; } }

pre { margin: 14px 0 0; padding: 14px 16px; background: var(--soft); border-radius: 8px; font: 13.5px/1.6 Menlo, Consolas, monospace; white-space: pre-wrap; max-width: 560px; }
pre b { color: var(--blue); font-weight: normal; }
pre i { color: var(--muted); font-style: normal; }

.shots { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 14px; }
.shots.two { grid-template-columns: 1fr 1fr; }
.shots img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.docs { font-size: 14px; color: var(--muted); margin-top: 12px; }
.macapp { margin: 20px 0 0; }
.macapp video { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.macapp figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Sites I like */
.sites { list-style: none; margin: 20px 0 0; padding: 0; }
.sites li { padding: 14px 0; border-top: 1px solid var(--line); }
.sites li span { display: block; font-size: 14px; color: var(--muted); }

footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.shots figure { margin: 0; }
.shots figure img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.shots figcaption { margin-top: 4px; }
.score iframe { display: block; width: 100%; max-width: 575px; height: 660px; border: 1px solid var(--line); border-radius: 8px; }
@media (max-width: 520px) { .score iframe { height: 620px; } }
/* page tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tabs a { padding: 8px 12px; font-size: 14px; font-weight: bold; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--blue); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }
.stages .side-link + .side-link { margin-top: 8px; }
.piece { margin-top: 18px; }
.piece h3 a { color: inherit; }
.pending { padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; margin-top: 10px; max-width: 575px; }
.frame-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.frame-hint b { color: var(--blue); }
.stages-hint { margin: 16px 0 6px; font-size: 13px; color: var(--muted); }
@media (min-width: 860px) { .stages-hint { display: none; } }