/* styles.css - Asola 4D landing, direction A "Archive" (the design file, 2026-09-25), rebuilt plain on 2026-09-29.
 * Five eras, five papers: the era on <html data-era="0..4"> sets the palette, the display face, the grain and whether
 * the pictures go grey. The layout never changes with the era . Owner: Raffaele Terreni; AI-assisted. */

:root, [data-era="2"] { --bg: #f7f5f1; --card: #efece6; --ink: #17181a; --muted: #5b5e63; --accent: #c1272d; --gold: #c9a43c; --rule: rgba(23,24,26,.16); --ph: #e6e3dc; --ph2: #dedbd3; --display: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; --imgf: none; --pho: 0; --tex: none; }
[data-era="0"] { --bg: #e8d9b4; --card: #dfcda3; --ink: #3b2a17; --muted: #6a5232; --accent: #9e2b25; --gold: #b48a2f; --rule: rgba(59,42,23,.28); --ph: #d9c799; --ph2: #cfbb8c; --display: 'Pirata One', 'IM Fell English', serif; --imgf: sepia(.5); --pho: .82; --tex: none; }
[data-era="3"] { --bg: #f4f4f0; --card: #fffdf5; --ink: #1a1a1a; --muted: #4a4a48; --accent: #c4281b; --gold: #ffd21a; --rule: rgba(26,26,26,.32); --ph: #e6e6e0; --ph2: #d9d9d2; --display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif; --imgf: none; --pho: 0; --tex: none; }   /* the brick town: the look of the game The Brick Ages (cream, black, yellow, red) */
[data-era="1"] { --bg: #eedc98; --card: #f4e6ae; --ink: #2b1f10; --muted: #4d3c22; --accent: #7a3f12; --gold: #b4923e; --rule: rgba(58,43,24,.26); --ph: #e6d28e; --ph2: #dcc77e; --display: 'Pinyon Script', 'Cormorant Garamond', cursive; --imgf: sepia(.3); --pho: .82; --tex: none; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Source Serif 4', Georgia, serif; font-size: 17px; line-height: 1.6; transition: background .7s, color .7s; }
a { color: inherit; }
a:hover { opacity: .8; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.accent { color: var(--accent); }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.tiny { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
h1, h2, h3, .big-year, .plate-title, .foot-brand { font-family: var(--display); font-weight: 400; transition: font-family .3s; }
[data-lang="it"] { display: none; }
.texture { position: fixed; inset: 0; pointer-events: none; z-index: 60; background: var(--tex); mix-blend-mode: multiply; transition: opacity .7s; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); transition: background .7s; }
.top-row { height: 64px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.brand svg { color: var(--accent); }
.brand-name { font-family: var(--display); font-size: 21px; letter-spacing: -.01em; }
.nav { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 20px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; min-width: 0; overflow: hidden; flex: 1 1 0; height: 18px; line-height: 18px; }   /* wrap + fixed height: a link that does not fit drops out whole, never clipped mid-word */
.nav a { text-decoration: none; }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; white-space: nowrap; }
.era-strip { display: flex; border: 1px solid var(--rule); font-size: 11px; }
.era-chip { border: 0; padding: 10px 11px; min-height: 40px; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.era-chip.is-active { background: var(--ink); color: var(--bg); }
.donate { text-decoration: none; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 12px 16px; background: var(--accent); color: var(--bg); }

/* hero */
.hero { padding-top: 48px; padding-bottom: 32px; }
.catalogue { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 28px; display: flex; gap: 18px; flex-wrap: wrap; }
.hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px 64px; align-items: end; }
h1 { font-size: clamp(48px, 7vw, 92px); line-height: .98; letter-spacing: -.02em; margin: 0; }
.lead { margin: 0; font-size: 19px; color: var(--muted); max-width: 30em; text-wrap: pretty; }

/* plate I */
.plate { padding-bottom: 24px; }
.plate figure { margin: 0; }
.compare { position: relative; aspect-ratio: 1440 / 524; overflow: hidden; border: 1px solid var(--rule); cursor: ew-resize; touch-action: none; user-select: none; background: #d8d4cb; outline: none; }
.compare:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.compare-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-left { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.compare-right { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); pointer-events: none; }   /* each tag lives in its own half: showing the left hides the right, and the other way (2026-10-02) */
.plate-tag { position: absolute; top: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 300px; }
.plate-tag-left { left: 18px; align-items: flex-start; }
.plate-tag-right { right: 18px; align-items: flex-end; }
.plate-year { font-size: 44px; line-height: 1; }
.plate-year-old { font-family: var(--display); color: var(--ink); }
.plate-year-new { font-family: var(--display); color: var(--ink); }
.plate-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--card); border: 1px solid var(--rule); padding: 4px 8px; }
.plate-year { background: var(--card); padding: 2px 10px; border: 1px solid var(--rule); }
.handle { position: absolute; top: 0; bottom: 0; left: 50%; pointer-events: none; }
.handle i { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--bg); }
.handle b { position: absolute; top: 50%; left: -19px; width: 38px; height: 38px; margin-top: -19px; border-radius: 50%; background: var(--card); border: 1px solid var(--ink); box-shadow: 0 0 0 3px var(--bg); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 400; color: var(--ink); }
.plate-caption { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 40px; padding: 16px 0 0; }
.plate-title { margin: 0; font-size: 20px; line-height: 1.3; }
.plate-note { margin: 0; font-size: 14px; color: var(--muted); }
.plate-note b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); display: block; font-weight: 500; }

/* plates II and III - the recordings, side by side */
.plate-video { padding-top: 32px; }
.plate-video video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: #111; }
.plate-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 40px; }
.plate-pair figure { margin: 0; }
.plate-caption-one { grid-template-columns: 1fr; }
.proof-thumb { float: left; margin: 2px 12px 4px 0; }
.proof-thumb img { display: block; width: 46px; height: auto; border: 1px solid var(--rule); }
.plate-note a, .exhibit-meta .source a, .proof-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.proof-link { grid-column: 1 / -1; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; justify-self: start; }
.plate-proof { margin: 48px 0 0; }
.plate-proof .plate-label { max-width: none; }
.exhibit-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the timeline */
.timeline { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 32px; transition: border-color .7s; }   /* sits right under the era's film, so a slide shows a new film at once (2026-10-02) */
.timeline-grid { padding-top: 48px; padding-bottom: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 64px; align-items: center; }
.big-year { font-size: clamp(72px, 11vw, 140px); line-height: .9; letter-spacing: -.03em; }
.timeline .small { margin: 18px 0 0; max-width: 28em; }
#eraRange { width: 100%; margin: 0; accent-color: var(--accent); }
.era-range { position: relative; }
.era-ticks i { position: absolute; top: 12px; width: 2px; height: 10px; background: var(--ink); transform: translateX(-50%); pointer-events: none; }   /* a mark under each of the four stops; the thumb is 32 px wide, so a stop sits at 16 px + (width - 32 px) * n/3 */
.era-ticks i:nth-child(1) { left: 16px; } .era-ticks i:nth-child(2) { left: calc(16px + (100% - 32px) / 3); } .era-ticks i:nth-child(3) { left: calc(16px + (100% - 32px) * 2 / 3); } .era-ticks i:nth-child(4) { left: calc(100% - 16px); }
#eraRange { position: relative; z-index: 1; }
.era-buttons { position: relative; height: 64px; margin-top: 6px; }   /* each label centred under its stop; the active one boxed (2026-10-02) */
.era-btn { position: absolute; top: 0; transform: translateX(-50%); background: none; border: 1px solid transparent; padding: 6px 10px; min-height: 44px; cursor: pointer; color: var(--ink); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; transition: border-color .3s, background .3s; }
.era-btn:nth-child(1) { left: 16px; } .era-btn:nth-child(2) { left: calc(16px + (100% - 32px) / 3); } .era-btn:nth-child(3) { left: calc(16px + (100% - 32px) * 2 / 3); } .era-btn:nth-child(4) { left: calc(100% - 16px); }
.era-btn:is(:nth-child(1), :nth-child(4)) { padding-left: 5px; padding-right: 5px; }   /* the end labels are centred on their stops, so they hang past the row by half their width: the Italian "mattoncini" made the last one 4 px wider than the 28 px the page leaves there */
.era-btn b { font-size: 13px; font-weight: 500; }
.era-btn i { font-style: normal; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.era-btn.is-active { border-color: var(--ink); }
.proof-card { margin-top: 28px; border: 1px solid var(--ink); padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; background: var(--card); transition: background .7s; }
.proof-value { font-family: var(--display); font-size: 40px; line-height: 1; color: var(--accent); white-space: nowrap; }
.proof-value small { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.proof-src { font-size: 14px; line-height: 1.45; text-wrap: pretty; }

/* method */
.method { padding-top: 64px; padding-bottom: 64px; }
.method h2, .roadmap h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 0 0 28px; }
.steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 28px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.steps .n { font-size: 12px; color: var(--accent); }
.steps h3 { font-size: 24px; margin: 0; }
.steps p { margin: 0; font-size: 15px; color: var(--muted); }
.method-plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 40px; align-items: start; }
.method-plates figure { margin: 0; }
.method-plates img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.method-plates figcaption { font-size: 11px; color: var(--muted); padding-top: 8px; letter-spacing: .03em; line-height: 1.5; }

/* roadmap - the quests read from the project record (quests-ui.js) */
.roadmap { border-top: 1px solid var(--rule); }
.roadmap .wrap { padding-top: 64px; padding-bottom: 64px; }
.roadmap-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.roadmap-head h2 { margin-bottom: 12px; }
.roadmap-head .muted { margin: 0; max-width: 34em; font-size: 15px; }
.roadmap-meta { margin: 10px 0 0; text-transform: none; letter-spacing: .03em; font-size: 11px; }
.quest-group { margin: 36px 0 0; }
.quest-group-title { display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-family: 'IBM Plex Mono', monospace; font-weight: 400; }
.quest-count { color: var(--ink); font-size: 13px; letter-spacing: 0; }
.quest { border: 1px solid var(--rule); background: var(--card); margin: 0 0 8px; transition: background .7s; }
.quest summary { list-style: none; display: block; padding: 14px 16px; cursor: pointer; }
.quest summary::-webkit-details-marker { display: none; }
.quest-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.quest-name { font-family: var(--display); font-size: 20px; line-height: 1.25; }
.quest-pct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); }
.quest-state { flex: none; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule); color: var(--muted); white-space: nowrap; }
.quest-building .quest-state { color: var(--accent); border-color: var(--accent); }
.quest-check { flex: none; display: inline-flex; width: 20px; height: 20px; border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent); font-size: 11px; align-items: center; justify-content: center; }
.quest-bar { display: block; width: 100%; height: 5px; margin: 10px 0 0; background: var(--rule); overflow: hidden; }
.quest-bar i { display: block; height: 100%; background: var(--accent); }
.quest-body { padding: 0 16px 14px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.quest-body p { margin: 0 0 8px; }
.quest-status { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.quest-status b { color: var(--ink); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.roadmap-log { margin: 0; padding: 0; list-style: none; }
.roadmap-log li { padding: 8px 0; border-top: 1px solid var(--rule); font-size: 15px; color: var(--muted); }
.roadmap-log li .mono { color: var(--ink); font-size: 11px; margin-right: 12px; }
.quest-more { color: var(--muted); }

/* bring a photo */
.bring { background: var(--card); border-top: 1px solid var(--rule); transition: background .7s; }
.bring-grid { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 48px 72px; }
.bring h2 { font-size: clamp(36px, 4.8vw, 60px); line-height: 1.02; margin: 0 0 20px; }
.bring .lead { font-size: 18px; margin-bottom: 28px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-ink, .btn-line { text-decoration: none; padding: 14px 22px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.btn-ink { background: var(--ink); color: var(--bg); border: 1px solid var(--ink); }
.btn-line { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
.roadmap-head .btn-line { padding: 13px 18px; font-size: 12px; }
.label-card { border: 1px solid var(--ink); background: var(--bg); padding: 26px 28px; align-self: start; transition: background .7s; }
.label-card .tiny { margin: 0 0 16px; }
.label-card dl { margin: 0; display: grid; grid-template-columns: 110px 1fr; gap: 14px 16px; font-size: 15px; }
.label-card dt { font-family: var(--display); font-size: 18px; }
.label-card dd { margin: 0; color: var(--muted); }

/* footer */
.foot { border-top: 1px solid var(--rule); }
.foot-grid { padding-top: 32px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px 40px; font-size: 11px; line-height: 1.7; color: var(--muted); }
.foot-grid p { margin: 0; }
.foot-brand { font-size: 22px; color: var(--ink); margin: 0 0 6px !important; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px !important; }

/* small screens */
@media (max-width: 860px) { .nav { display: none; } }
@media (max-width: 640px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .top-row { gap: 12px; }
  .brand-name { font-size: 18px; }
  .era-strip { display: none; }   /* the timeline section keeps the era buttons; the header would overflow a phone */
  .donate { padding: 8px 10px; font-size: 11px; }
  .hero { padding-top: 48px; }
  .plate-year { font-size: 30px; }
  .compare { aspect-ratio: 4 / 3; }   /* a taller plate on a phone: the picture is cropped, never shrunk to a strip */
  .plate-tag { max-width: 46%; }
  .plate-label { font-size: 9px; }
  .steps li { grid-template-columns: 40px 1fr; }
  .steps p { grid-column: 2; }
  .exhibits { padding-top: 64px; }
}

/* the method as a road, with a picture per step; the first exercise under it (the ask, 2026-09-29) */
.method-head { max-width: 62em; margin-bottom: 32px; }
.method-head h2 { margin: 0 0 16px; }
.method-sub { margin: 0; font-size: 17px; max-width: 40em; }
.rule-line { margin: 18px 0 0; font-family: var(--display); font-size: clamp(22px, 2.6vw, 30px); line-height: 1.25; }
.rule-line em { color: var(--accent); }
.rule-line .mono { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.road { list-style: none; margin: 0; padding: 0; position: relative; }
.road::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid var(--ink); transition: border-color .7s; transform: translateX(-50%); }   /* the line centred on the pins (measured 2026-10-02: it hung to the right of them by its own width) */
.road-step { display: grid; grid-template-columns: minmax(0, 1fr) 56px minmax(0, 1fr); grid-template-areas: "text pin pic"; gap: 12px 0; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.road-text { grid-area: text; padding-right: 36px; }
.road-n { grid-area: pin; justify-self: center; }
.road-pic { grid-area: pic; padding-left: 36px; }
.road-step:last-child { border-bottom: 0; }
.road-n { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--ink); background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: background .7s; }
.road-text h3 { font-size: 26px; line-height: 1.15; margin: 0 0 8px; }
.road-text p { margin: 0 0 10px; font-size: 15px; color: var(--muted); text-wrap: pretty; }
.road-text .source { margin: 0; font-size: 11px; letter-spacing: .03em; color: var(--ink); border-top: 1px solid var(--rule); padding-top: 8px; }
.road-text .source a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.road-pic { margin: 0; }
.road-pic img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.road-pic-tall img { max-width: 300px; }
.road-pic figcaption { font-size: 11px; color: var(--muted); padding-top: 8px; letter-spacing: .03em; }
.road-empty { aspect-ratio: 1 / 1; border: 1px dashed var(--ink); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px; box-sizing: border-box; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.road-empty svg { width: 96px; height: 96px; color: var(--ink); display: block; }
.exercise { background: var(--card); border-top: 1px solid var(--rule); transition: background .7s; }
.exercise .wrap { padding-top: 64px; padding-bottom: 64px; }
.exercise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px 32px; align-items: start; }
.exercise-fig { margin: 0; }
.exercise-fig img, .exercise-fig video { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--bg); }
.exercise-fig figcaption { font-size: 14px; color: var(--muted); padding-top: 10px; line-height: 1.5; }
.exercise-fig figcaption b { font-weight: 500; color: var(--accent); margin-right: 10px; }
.exercise-wide { grid-column: 1 / -1; }
.exercise-wide video { max-height: 520px; object-fit: cover; }
.exercise .plate-proof .compare { background: var(--bg); }
@media (max-width: 760px) {
  .road { padding-left: 14px; }
  .road-step { grid-template-columns: 30px minmax(0, 1fr); }
  .road-n { width: 24px; height: 24px; margin-left: -27px; font-size: 10px; }
  .road-pic { grid-column: 2; }
}
.exercise-fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.exercise-strip { grid-column: 1 / -1; }
.exercise-strip img { aspect-ratio: auto; }

/* the road's rule: every picture a square of one size in one place */
.road-pic { width: auto; justify-self: start; display: grid; grid-template-columns: min-content; }   /* the figure is as wide as its frame; the caption wraps inside it, never past it (measured 2026-10-02: captions ran to the column's edge) */
.road-pic figcaption { min-width: 0; }
.road-pic img, .road-pic video, .road-pano, .road-pic-tall img, .road-empty { display: block; width: 320px; height: 320px; max-width: none; aspect-ratio: 1 / 1; object-fit: cover; }

/* the three styles, on the whole page, set by the year: html[data-style] = manuscript (the 1600s and 1700s) ·
   sketch (the 1800s and 1900s) · modern (the 2000s). The references: an illuminated page with a great painted initial
   and a gothic hand; a 1700s Italian hand on yellowed paper; the town's own arms for today. No textures: colours,
   letters, rules. Everything below transitions, so a change of year moves the whole page. */
  { transition: filter .7s, transform .7s, border-radius .7s, border-color .7s, border-width .4s, box-shadow .7s, background .7s, color .7s; }

/* manuscript: the illuminated page */
[data-style="manuscript"] :is(.road-pic img, .road-pic video, .road-pano, .road-empty, .exercise-fig img, .exercise-fig video, .plate-video video, .compare, .proof-thumb img) { border: 4px double var(--ink); box-shadow: 0 6px 14px rgba(59,42,23,.18); }
[data-style="manuscript"] .top { border-bottom: 3px double var(--ink); }
[data-style="manuscript"] .timeline { border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
[data-style="manuscript"] :is(.roadmap, .exercise, .bring, .foot) { border-top: 3px double var(--ink); }
[data-style="manuscript"] :is(.quest, .proof-card, .label-card) { border: 3px double var(--ink); }
[data-style="manuscript"] .road::before { border-left: 3px double var(--ink); }
[data-style="manuscript"] :is(.road-n, .era-strip, .btn-line) { border: 2px solid var(--ink); }
[data-style="manuscript"] .road-n { font-family: var(--display); font-size: 15px; }
[data-style="manuscript"] :is(h1, h2, h3, .big-year, .plate-title, .brand-name, .foot-brand, .quest-name, .proof-value) { font-weight: 500; letter-spacing: 0; }
[data-style="manuscript"] h1 { font-size: clamp(52px, 7.4vw, 100px); }
[data-style="manuscript"] :is(.era-chip, .donate, .btn-ink, .btn-line, .quest-state, .plate-label) { font-family: var(--display); text-transform: none; letter-spacing: .02em; font-size: 15px; }
[data-style="manuscript"] :is(.lead, .method-sub, .roadmap-head .muted, .road-text > p:first-of-type)::first-letter
  { float: left; font-family: var(--display); font-size: 4.6em; line-height: .76; padding: .04em .08em 0 0; margin: .02em .06em 0 0; color: var(--accent); }
[data-style="manuscript"] :is(figcaption, .road-pic figcaption, .exercise-fig figcaption, .plate-note b, .catalogue, .kicker, .quest-group-title, .tiny) { font-family: 'IM Fell English', serif; font-variant: small-caps; text-transform: none; letter-spacing: .06em; }
[data-style="manuscript"] .road-pic figcaption { font-size: 14px; }
[data-style="manuscript"] .quest-check { border-width: 2px; color: var(--gold); border-color: var(--gold); }
[data-style="manuscript"] .quest-bar i { background: var(--gold); }

/* sketch: the notebook of an engineer, in the own hand */
[data-style="sketch"] :is(.road-pic img, .road-pic video, .road-pano, .road-empty, .exercise-fig img, .exercise-fig video, .plate-video video, .compare, .proof-thumb img, .quest, .proof-card, .label-card, .era-strip) { border: 1px solid var(--ink); border-radius: 2px; }
[data-style="sketch"] :is(.btn-ink, .btn-line, .donate, .road-n) { border-radius: 2px; }
[data-style="sketch"] :is(.road-pic img, .road-pic video, .road-pano, .exercise-fig img, .plate-video video) { box-shadow: 0 4px 12px rgba(58,43,24,.14); }
[data-style="sketch"] .road::before { border-left: 1px solid var(--ink); }
[data-style="sketch"] .top { border-bottom: 1px solid var(--ink); }
[data-style="sketch"] .timeline { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
[data-style="sketch"] :is(.roadmap, .exercise, .bring, .foot, .steps) { border-top: 1px solid var(--ink); }
[data-style="sketch"] :is(h1, h2, h3, .plate-title, .big-year, .quest-name, .brand-name, .foot-brand, .proof-value, .road-n, figcaption, .lead, .method-sub) { font-style: italic; }
[data-style="sketch"] :is(h1, h2, h3, .plate-title, .big-year, .quest-name) { font-weight: 500; letter-spacing: 0; }
[data-style="sketch"] h1 { font-size: clamp(54px, 7.6vw, 104px); }
[data-style="sketch"] :is(.road-pic figcaption, .exercise-fig figcaption, .plate-note b, .catalogue, .kicker, .quest-group-title, .era-chip, .donate, .btn-ink, .btn-line, .quest-state, .plate-label, .tiny) { font-family: var(--display); font-style: italic; font-size: 15px; letter-spacing: .02em; text-transform: none; }
[data-style="sketch"] :is(.road-pic figcaption, .exercise-fig figcaption) { font-size: 16px; }
[data-style="sketch"] .quest-bar { height: 3px; }

/* modern: Asola's own colours, red, white and gold, on a clean plate */
[data-style="modern"] :is(.road-pic img, .road-pic video, .road-pano, .road-empty, .exercise-fig img, .plate-video video, .compare) { border: 1px solid var(--rule); }
[data-style="modern"] .road::before { border-left: 2px solid var(--accent); }
[data-style="modern"] .road-n { background: var(--accent); color: var(--bg); border-color: var(--accent); }
[data-style="modern"] :is(.roadmap, .exercise, .bring, .foot) { border-top: 1px solid var(--rule); }
[data-style="modern"] :is(.quest-check, .quest-live .quest-bar i) { color: var(--gold); border-color: var(--gold); background-color: var(--gold); }
[data-style="modern"] .quest-check { background-color: transparent; }
[data-style="modern"] .quest-building .quest-state { color: var(--accent); border-color: var(--accent); }
[data-style="modern"] .proof-value { color: var(--accent); }

@media (max-width: 760px) {
  .road::before { left: 15px; }
  .road-step { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "pin text" "pin pic"; gap: 12px 12px; }
  .road-text { padding-right: 0; }
  .road-n { justify-self: start; width: 30px; }
  .road-pic { width: 100%; justify-self: stretch; padding-left: 0; }
  .road-pic img, .road-pic video, .road-pic-tall img, .road-empty { width: 100%; height: auto; }
  .road-pano { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  [data-style="manuscript"] :is(.lead, .method-sub, .roadmap-head .muted, .road-text > p:first-of-type)::first-letter { font-size: 3.6em; }
}
/* a tablet held upright (761 to 920 px): two columns leave the picture column narrower than a 320 px picture with its frame (404 px in the 1697 look), so the picture ran
   up to 48 px past the screen. The steps stack as they do on a phone, but the pictures keep their size (measured 2026-10-04) */
@media (min-width: 761px) and (max-width: 920px) {
  .road { padding-left: 14px; }
  .road::before { left: 15px; }
  .road-step { grid-template-columns: 32px minmax(0, 1fr); grid-template-areas: "pin text" "pin pic"; gap: 12px 12px; }
  .road-text { padding-right: 0; }
  .road-n { justify-self: start; width: 30px; height: 24px; margin-left: -27px; font-size: 10px; }
  .road-pic { padding-left: 0; grid-column: 2; }
}

/* the body face follows the family too: early print for the manuscript, a garamond for the sketch, a light sans today */
[data-style="manuscript"] body { font-family: 'IM Fell English', 'Source Serif 4', Georgia, serif; font-size: 18px; }
[data-style="manuscript"] :is(h1, h2, h3, .big-year, .plate-title, .brand-name, .foot-brand, .quest-name, .proof-value, .road-n) { font-weight: 400; letter-spacing: .01em; }
[data-style="manuscript"] h1 { font-size: clamp(56px, 8vw, 108px); line-height: 1; }
[data-style="manuscript"] .big-year { font-size: clamp(80px, 12vw, 156px); }
[data-style="sketch"] body { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; }
[data-style="sketch"] :is(.lead, .method-sub) { font-size: 21px; font-style: normal; }
[data-style="sketch"] :is(h1, h2, h3, .big-year, .plate-title, .brand-name, .foot-brand, .quest-name, .proof-value, .road-n, figcaption) { font-style: normal; font-weight: 400; letter-spacing: 0; }
[data-style="sketch"] h1 { font-size: clamp(56px, 7vw, 96px); line-height: .95; }
[data-style="sketch"] h2 { font-size: clamp(44px, 5.4vw, 72px) !important; }
[data-style="sketch"] :is(h3, .plate-title, .quest-name) { font-size: 34px; line-height: 1.1; }
[data-style="sketch"] .big-year { font-size: clamp(90px, 13vw, 170px); }
[data-style="sketch"] :is(.road-pic figcaption, .exercise-fig figcaption, .plate-note b, .catalogue, .kicker, .quest-group-title, .era-chip, .donate, .btn-ink, .btn-line, .quest-state, .plate-label, .tiny) { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; }
[data-style="modern"] body { font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif; font-weight: 400; font-size: 16px; letter-spacing: -.005em; }
[data-style="modern"] :is(h1, h2, h3, .big-year, .plate-title, .brand-name, .foot-brand, .quest-name, .proof-value) { font-weight: 300; letter-spacing: -.02em; }
[data-style="modern"] .lead { font-weight: 300; }
[data-style="modern"] :is(.road-pic figcaption, .exercise-fig figcaption, .plate-note b, .catalogue, .kicker, .quest-group-title, .era-chip, .donate, .btn-ink, .btn-line, .quest-state, .plate-label, .tiny, .source, .mono) { font-family: 'Inter', -apple-system, system-ui, sans-serif; }
.quest-fold > summary { list-style: none; cursor: pointer; padding: 10px 0; }
.quest-fold > summary::-webkit-details-marker { display: none; }
.quest-fold .quest-count i { font-style: normal; color: var(--accent); margin-left: 8px; }
.quest-fold[open] .quest-count i { display: none; }
.road-video { background: var(--ph); }
/* the hero title on two lines in every family, whatever the face's width */
[data-style="manuscript"] h1 { font-size: clamp(50px, 6vw, 84px); }
[data-style="sketch"] h1 { font-size: clamp(46px, 5.2vw, 72px); }
[data-style="modern"] h1 { font-size: clamp(42px, 5.4vw, 76px); }

/* the pins sit above the spine, centred on it */
.road-n { position: relative; z-index: 1; line-height: 1; }
.road-pano { background: var(--ph); position: relative; }
.road-pano .pnl-load-box, .road-pano .pnl-lbox { display: none !important; }
.road-pano .pnl-preview-img { background-size: cover; }

/* paper under the two old ages: fibres, not dots (an SVG noise, drawn by the browser, no file) */
[data-style="manuscript"] body, [data-style="sketch"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .25 0 0 0 0 .18 0 0 0 0 .08 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23p)'/%3E%3C/svg%3E"); background-size: 400px 400px; background-blend-mode: multiply; }
[data-style="manuscript"] body { background-color: var(--bg); }
[data-style="sketch"] body { background-color: var(--bg); }
[data-style="manuscript"] .texture { background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(70,45,20,.22)); opacity: 1; }
[data-style="sketch"] .texture { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(70,45,20,.16)); opacity: 1; }

/* ---- the roles: every framed thing carries one class, each family styles the roles once ----
   .fr-pic   a still picture or film in a square or a figure          .fr-img   a picture inside a drag (edge only)
   .fr-drag  a drag between two pictures (its labels and handle stay whole)   .fr-live  the 360 (never masked, never filtered)
   .fr-card  a card (proof, label, quest)                              .fr-label a small label (plate tags, states)
   Sizes come from slices, not from stretching: the tear is 40 px on a square and on a wide plate alike. */
.fr-pic, .fr-drag, .fr-live, .fr-card, .fr-label { transition: border-color .7s, box-shadow .7s, background .7s, color .7s, outline-color .7s; }

[data-style="manuscript"] :is(.fr-pic, .fr-drag, .fr-live) { border: 1px solid var(--ink); box-shadow: 0 8px 18px rgba(59,42,23,.22); }
[data-style="manuscript"] .fr-card { border: 3px double var(--ink); }
[data-style="manuscript"] .fr-label { border: 1px solid var(--gold); }
[data-style="manuscript"] .handle b { border: 2px solid var(--gold); color: var(--accent); }

[data-style="sketch"] :is(.fr-pic, .fr-img) { border: 7px solid #f3ead2; -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='t' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='304' height='304' fill='white' filter='url(%23t)'/%3E%3C/svg%3E") 40 / 40px / 0 repeat; mask-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='t' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06' numOctaves='4' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='304' height='304' fill='white' filter='url(%23t)'/%3E%3C/svg%3E") 40 fill / 40px / 0 repeat; }
[data-style="sketch"] :is(.road-pic, .exercise-fig, .plate-video figure) { filter: drop-shadow(0 3px 4px rgba(58,43,24,.42)); }
[data-style="sketch"] :is(.road-pic:has(.fr-live), .exercise-fig:has(.fr-live)) { filter: none; }
[data-style="sketch"] .fr-drag { border: 0; background: #f3ead2; padding: 7px; box-shadow: 0 3px 6px rgba(58,43,24,.3); }
[data-style="sketch"] .fr-drag .fr-img { border: 0; }
[data-style="sketch"] .fr-live { border: 7px solid #f3ead2; box-shadow: 0 3px 6px rgba(58,43,24,.3); }
[data-style="sketch"] .fr-card { border: 1px solid var(--ink); }
[data-style="sketch"] .fr-label { border: 1px solid var(--ink); }
[data-style="sketch"] .handle b { border: 1px solid var(--ink); }

[data-style="modern"] :is(.fr-pic, .fr-drag, .fr-live) { border: 1px solid var(--rule); }
[data-style="modern"] .fr-card { border: 1px solid var(--rule); }
[data-style="modern"] .fr-label { border: 1px solid var(--rule); }
[data-style="modern"] .handle b { border: 1px solid var(--accent); color: var(--accent); }

/* ---- the time controls, one style per age: the track, the thumb (an icon of the age), the era buttons ---- */
#eraRange { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; }
#eraRange:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#eraRange::-webkit-slider-runnable-track { height: 2px; background: var(--ink); border-radius: 0; }
#eraRange::-moz-range-track { height: 2px; background: var(--ink); border: 0; }
#eraRange::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 32px; height: 32px; margin-top: -15px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23c1272d' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23c1272d'/%3E%3C/svg%3E") center / contain no-repeat; }
#eraRange::-moz-range-thumb { width: 32px; height: 32px; border: 0; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='12' fill='none' stroke='%23c1272d' stroke-width='2'/%3E%3Ccircle cx='16' cy='16' r='7' fill='%23c1272d'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-style="manuscript"] #eraRange::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(var(--gold), var(--gold)) center / 100% 1px no-repeat, var(--ink); }
[data-style="manuscript"] #eraRange::-webkit-slider-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='%23b48a2f' stroke='%233b2a17' stroke-width='1'%3E%3Ccircle cx='16' cy='5' r='4'/%3E%3Ccircle cx='27' cy='16' r='4'/%3E%3Ccircle cx='16' cy='27' r='4'/%3E%3Ccircle cx='5' cy='16' r='4'/%3E%3Ccircle cx='23.8' cy='8.2' r='4'/%3E%3Ccircle cx='23.8' cy='23.8' r='4'/%3E%3Ccircle cx='8.2' cy='23.8' r='4'/%3E%3Ccircle cx='8.2' cy='8.2' r='4'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='6' fill='%239e2b25' stroke='%233b2a17' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23f0dca0'/%3E%3C/svg%3E"); }
[data-style="manuscript"] #eraRange::-moz-range-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cg fill='%23b48a2f' stroke='%233b2a17' stroke-width='1'%3E%3Ccircle cx='16' cy='5' r='4'/%3E%3Ccircle cx='27' cy='16' r='4'/%3E%3Ccircle cx='16' cy='27' r='4'/%3E%3Ccircle cx='5' cy='16' r='4'/%3E%3Ccircle cx='23.8' cy='8.2' r='4'/%3E%3Ccircle cx='23.8' cy='23.8' r='4'/%3E%3Ccircle cx='8.2' cy='23.8' r='4'/%3E%3Ccircle cx='8.2' cy='8.2' r='4'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='6' fill='%239e2b25' stroke='%233b2a17' stroke-width='1'/%3E%3Ccircle cx='14' cy='14' r='1.6' fill='%23f0dca0'/%3E%3C/svg%3E"); }
[data-style="sketch"] #eraRange::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
[data-style="sketch"] #eraRange::-webkit-slider-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 2 L27 17 L16 30 L5 17 Z' fill='%233a2b18'/%3E%3Cpath d='M16 6 L24 17 L16 27 L8 17 Z' fill='%23f3ead2'/%3E%3Cpath d='M16 12 L16 27' stroke='%233a2b18' stroke-width='1.4'/%3E%3Ccircle cx='16' cy='12' r='2' fill='%233a2b18'/%3E%3C/svg%3E"); }
[data-style="sketch"] #eraRange::-moz-range-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath d='M16 2 L27 17 L16 30 L5 17 Z' fill='%233a2b18'/%3E%3Cpath d='M16 6 L24 17 L16 27 L8 17 Z' fill='%23f3ead2'/%3E%3Cpath d='M16 12 L16 27' stroke='%233a2b18' stroke-width='1.4'/%3E%3Ccircle cx='16' cy='12' r='2' fill='%233a2b18'/%3E%3C/svg%3E"); }
[data-style="modern"] #eraRange::-webkit-slider-runnable-track { background: var(--accent); }
[data-style="modern"] .era-btn.is-active { border-color: var(--accent); }
[data-style="manuscript"] .era-btn b { font-family: var(--display); font-size: 16px; font-weight: 400; }
[data-style="manuscript"] .era-btn i { font-family: 'IM Fell English', serif; font-variant: small-caps; text-transform: none; letter-spacing: .06em; font-size: 12px; }
[data-style="manuscript"] .era-btn.is-active { border: 2px double var(--gold); }
[data-style="sketch"] .era-btn b { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 17px; font-weight: 500; }
[data-style="sketch"] .era-btn.is-active { border: 1px solid var(--ink); border-radius: 2px; }
[data-style="sketch"] .era-btn i { font-family: 'Cormorant Garamond', serif; font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; }
[data-style="modern"] .era-btn b, [data-style="modern"] .era-btn i { font-family: 'Inter', -apple-system, system-ui, sans-serif; }

/* the frame box: every picture, film, 360 and drag sits in its own tight box (.fr); whatever hangs around a picture hangs on that box */
.fr { position: relative; display: block; width: fit-content; max-width: 100%; }
.fr-block, .exercise-fig .fr, .plate-video .fr { width: 100%; }
.road-pic .fr { width: 320px; }
.fr > :is(img, video, .road-pano, .road-empty, .compare) { display: block; }
[data-style="sketch"] .fr { filter: drop-shadow(0 3px 4px rgba(58,43,24,.42)); }
[data-style="sketch"] :is(.road-pic, .exercise-fig, .plate-video figure) { filter: none; }
[data-style="sketch"] .fr:has(.fr-live) { filter: none; }
/* the manuscript's corners: the ornament in the age's gold, on the frame box of every picture and drag, 30 px outside it */
@media (max-width: 760px) {
  .road-pic .fr { width: 100%; }
}

/* the manuscript's frame, the file (images/frame-src.png -> frame-ms.png, keyed and tinted in the age's accent): the whole
   frame round the box, the picture inside it (the sketch): the box takes a padding of the frame's width, the frame is
   drawn on the box in nine slices at the lines (30 %): corners fixed, sides stretched, nothing deformed */
[data-style="manuscript"] .fr { --frw: 60px; --frp: calc(var(--frw) * .4); padding: var(--frp); }   /* the picture sits close to the frame's lines; the corner scrolls lap its corners, as a mount does */
[data-style="manuscript"] :is(.fr-block, .fr:has(video)) { --frp: calc(var(--frw) * .55); }
[data-style="manuscript"] .plate-tag { top: 40px; }
[data-style="manuscript"] .plate-tag-left { left: 40px; }
[data-style="manuscript"] .plate-tag-right { right: 40px; }
[data-style="manuscript"] .plate > figure .fr { --frw: 90px; }
[data-style="manuscript"] .plate-video figure .fr { --frw: 64px; }
[data-style="manuscript"] .exercise-wide .fr { --frw: 80px; }
[data-style="manuscript"] .road-pic { justify-self: stretch; width: auto; }
[data-style="manuscript"] .road-pic .fr, [data-style="manuscript"] .road-pic .fr:has(video) { --frp: calc(var(--frw) * .4); width: calc(320px + 2 * var(--frp)); max-width: 100%; }   /* the same frame for a picture and a film in the road (films were 18 px wider) */
[data-style="manuscript"] .exercise-fig .fr { --frw: 40px; }
[data-style="manuscript"] .road-pic .fr > * { width: 100%; height: auto; aspect-ratio: 1 / 1; }
[data-style="manuscript"] .fr::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-sizing: border-box; border: var(--frw) solid transparent; border-image: url("images/frame-ms-lines.png") 30% / var(--frw) / 0 stretch; }   /* the lines only: the side slices stretch, so nothing with a shape may live in them (2026-10-02) */
@media (max-width: 760px) { [data-style="manuscript"] .fr, [data-style="manuscript"] .plate > figure .fr, [data-style="manuscript"] .plate-video figure .fr, [data-style="manuscript"] .exercise-wide .fr, [data-style="manuscript"] .exercise-fig .fr { --frw: 36px; } }

/* brick: the same town as bricks; the look of the game The Brick Ages: cream paper, black lines, yellow and red, a chunky
   uppercase face, hard offset shadows, rounded corners, studs */
[data-style="brick"] body { font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; }
[data-style="brick"] :is(h1, h2, h3, .big-year, .plate-title, .brand-name, .foot-brand, .quest-name, .proof-value, .road-n) { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .01em; font-style: normal; }
[data-style="brick"] h1 { font-size: clamp(38px, 5vw, 70px); line-height: 1; }
/* the title is two lines in every age. In heavy capitals the longer line ("DIFFERENT TIMES.", 10.65 em wide; the Italian is 8.9) must fit its column, so the size follows the column, not the screen: two columns from 960 px, one column on a phone, 17 px kept free for a classic scrollbar */
@media (min-width: 960px) { [data-style="brick"] h1 { font-size: min(48px, calc((100vw - 137px) / 21.7)); } }
@media (max-width: 480px) { [data-style="brick"] h1 { font-size: min(38px, calc((100vw - 57px) / 10.9)); } }
[data-style="brick"] :is(h1 em, h2 em, .plate-title em) { font-style: normal; color: var(--accent); }
[data-style="brick"] .big-year { font-size: clamp(60px, 8.5vw, 116px); }
[data-style="brick"] :is(.kicker, .catalogue, .tiny, .quest-group-title, .plate-note b, .road-pic figcaption, .exercise-fig figcaption, .source, .era-chip, .donate, .btn-ink, .btn-line, .quest-state, .plate-label) { font-family: var(--display); text-transform: uppercase; letter-spacing: .04em; }
[data-style="brick"] :is(.fr-pic, .fr-drag, .fr-live, .fr-card, .btn-ink, .btn-line, .donate, .era-strip) { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink); }
[data-style="brick"] .fr-label { border: 2px solid var(--ink); border-radius: 6px; background: var(--gold); color: var(--ink); box-shadow: 0 2px 0 var(--ink); }
[data-style="brick"] :is(.btn-ink, .donate) { background: var(--accent); color: #fff; }
[data-style="brick"] .btn-line { background: var(--gold); color: var(--ink); }
[data-style="brick"] .era-chip { border-radius: 6px; }
[data-style="brick"] .era-chip.is-active { background: var(--gold); color: var(--ink); }
[data-style="brick"] .era-btn.is-active { border: 2px solid var(--ink); border-radius: 6px; background: var(--gold); box-shadow: 0 3px 0 var(--ink); }
[data-style="brick"] .era-ticks i { height: 12px; top: 11px; }
[data-style="brick"] .top { border-bottom: 3px solid var(--ink); }
[data-style="brick"] :is(.timeline, .roadmap, .exercise, .bring, .foot, .steps) { border-color: var(--ink); }
[data-style="brick"] .road::before { border-left: 4px solid var(--ink); }
[data-style="brick"] .road-n { width: 34px; height: 34px; background: var(--gold); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
[data-style="brick"] .handle b { border: 2px solid var(--ink); background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
[data-style="brick"] .handle i { background: var(--ink); width: 3px; }
[data-style="brick"] #eraRange::-webkit-slider-runnable-track { height: 6px; background: var(--ink); border-radius: 3px; }
[data-style="brick"] #eraRange::-webkit-slider-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23ffd21a' stroke='%231a1a1a' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); margin-top: -13px; }
[data-style="brick"] #eraRange::-moz-range-thumb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='13' fill='%23ffd21a' stroke='%231a1a1a' stroke-width='2.5'/%3E%3Ccircle cx='16' cy='16' r='7' fill='none' stroke='%231a1a1a' stroke-width='2'/%3E%3C/svg%3E"); }
[data-style="brick"] .quest-bar { height: 10px; border: 2px solid var(--ink); border-radius: 5px; background: var(--card); }
[data-style="brick"] .quest-bar i { background: var(--gold); }
[data-style="brick"] .quest-check { border: 2px solid var(--ink); background: var(--gold); color: var(--ink); }
[data-style="brick"] body { background-image: radial-gradient(circle at 12px 12px, rgba(26,26,26,.07) 4px, transparent 5px); background-size: 24px 24px; }   /* studs on the paper only: the page's ground, never over a picture or a film */
[data-style="brick"] .texture { background: none; opacity: 0; }

/* the brick rule for buttons and chips, after Mark's .bbtn in The Brick Ages : a flat face in the brick's colour, a 2 px black border,
   a radius of 8 px, one hard black shadow 4 px under; the press sinks 3 px and the shadow shortens to 1; hover brightens a
   little. No stud on a button. Red for the calls, yellow for the line buttons and the active chip, cream for the era chips. */
[data-style="brick"] :is(.btn-ink, .btn-line, .donate, .era-chip) {
  --b: #fffdf5; position: relative; min-height: 44px; padding: 10px 16px 9px; border-radius: 8px; border: 2px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center; line-height: 1.1; text-align: center; white-space: nowrap;
  background: var(--b); background-image: none; color: var(--ink); font-weight: 800; letter-spacing: .04em; text-shadow: none;
  box-shadow: 0 4px 0 var(--ink); transition: transform .08s, box-shadow .08s, filter .08s; user-select: none;
}
[data-style="brick"] :is(.btn-ink, .btn-line, .donate, .era-chip):hover { filter: brightness(1.06); opacity: 1; transform: none; box-shadow: 0 4px 0 var(--ink); }
[data-style="brick"] :is(.btn-ink, .btn-line, .donate, .era-chip):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
[data-style="brick"] :is(.btn-ink, .donate) { --b: #d8262a; color: #fff; }
[data-style="brick"] .btn-line { --b: #ffd21a; }
[data-style="brick"] .era-chip { --b: #fffdf5; min-height: 36px; padding: 6px 12px 5px; border-radius: 6px; box-shadow: 0 3px 0 var(--ink); }
[data-style="brick"] .era-chip:hover { box-shadow: 0 3px 0 var(--ink); }
[data-style="brick"] .era-chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
[data-style="brick"] .era-chip.is-active { --b: #ffd21a; }
[data-style="brick"] .era-strip { border: 0; box-shadow: none; background: transparent; gap: 8px; padding: 0 6px 6px 0; border-radius: 0; }
[data-style="brick"] .roadmap-head .btn-line { padding: 10px 16px 9px; }
/* Mark's stud row, as on the zone card: four light studs at a card's top right, inside the face, never on a button */
[data-style="brick"] :is(.proof-card, .label-card) { position: relative; }
[data-style="brick"] :is(.proof-card, .label-card)::after { content: ""; position: absolute; right: 12px; top: 12px; width: 52px; height: 10px; pointer-events: none;
  background-image: radial-gradient(circle at 5px 5px, rgba(26,26,26,.14) 0 4.4px, transparent 5.2px); background-size: 14px 10px; background-repeat: repeat-x; }

/* the era's film, right under Plate I (2026-10-02): the film follows the era as the paper does; 1697 has no film and shows
   the grey plate with its located view. Only the active era's film loads (app.js swaps the source). */
.plate-film { padding-top: 24px; }
.plate-film .fr { width: 100%; }
.plate-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 1px solid var(--rule); background: #111; }
.film-empty { display: grid; place-items: center; aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--rule); background: var(--card); color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 24px; line-height: 1.8; }
.film-empty a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.plate-film .plate-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
/* the square around the Municipio, in the exercise: two films side by side */
.exercise-more { margin-top: 48px; }
.exercise-more .method-sub { margin-top: 0; }
/* the Bring button while the channel is being built (2026-10-02): the same brick, not a link, a shade quieter */
.btn-soon { cursor: default; opacity: .72; }
.soon-note { margin-top: 10px; }
.soon-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
.exercise-more .source { margin-top: 16px; font-size: 11px; color: var(--muted); letter-spacing: .03em; line-height: 1.6; }

/* the review of 2026-10-02: the page in the order of the Ws - what, why, how, when, who */
.why { border-top: 1px solid var(--rule); }
.why .wrap { padding: 48px 24px; max-width: 820px; }
.why h2 { margin: 8px 0 20px; }
.why .lead { margin: 0 0 14px; }
.why .method-sub { margin: 0; }
.steps-fold { margin-top: 40px; }
.steps-fold > summary, .record > summary, .now-note > summary { cursor: pointer; list-style: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.steps-fold > summary::-webkit-details-marker, .record > summary::-webkit-details-marker, .now-note > summary::-webkit-details-marker { display: none; }
.steps-fold > summary::before, .record > summary::before, .now-note > summary::before { content: "+ "; }
.steps-fold[open] > summary::before, .record[open] > summary::before, .now-note[open] > summary::before { content: "\2212  "; }
.steps-fold .exercise-grid { margin-top: 32px; }
.now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; margin-top: 40px; }
.now-card { border: 1px solid var(--rule); background: var(--card); display: flex; flex-direction: column; }
.now-card .fr { width: 100%; }
.now-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.now-body { padding: 16px 18px 18px; }
.now-title { margin: 0; font-size: 20px; line-height: 1.25; font-family: var(--display); }
.now-body > p { margin: 10px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.now-note { margin-top: 12px; }
.now-note > summary { font-size: 10px; border: 0; padding: 4px 0; color: var(--muted); }
.now-note p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.record { margin-top: 48px; }
.record .quest-group { margin-top: 28px; }
.roadmap .method-head { margin-bottom: 0; }
.who-line { margin-top: 20px; max-width: 34em; }
.foot-universal { margin: 8px 0 0; color: var(--ink); }
.plate-title em { font-style: italic; }
.why h2, .exercise h2 { font-size: clamp(30px, 3.6vw, 44px); }   /* one size for every section head: the method's and the roadmap's rule, shared */
.who-links { margin-top: 10px; }
.who-links a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--rule); }
@media (max-width: 640px) { .era-btn { padding: 4px 6px; } .era-btn i { font-size: 9px; letter-spacing: .02em; } }   /* 640 px is where the page margin drops to 20 px, the room the last label has */
/* the 1800s, readable (2026-10-02): Cormorant's regular is thin on yellow paper, so the body and captions run at 500, the leads at 600 */
[data-style="sketch"] body { font-weight: 500; }
[data-style="sketch"] :is(.lead, .method-sub, .road-text p, .plate-note, figcaption, .now-body p, .who-line, .small, dd) { font-weight: 500; }
[data-style="sketch"] :is(.lead, dt) { font-weight: 600; }   /* never the script face: Pinyon has one weight and a faked bold is ugly (2026-10-02) */
[data-style="sketch"] :is(.plate-note b, .kicker, .source, .tiny) { color: var(--ink); }
/* the manuscript's captions start at the frame's visible line, not at the box that holds the corner scrolls: the gold rule sits
   about 0.3 of the frame width inside the box (read on a 2x crop, 2026-10-02). --frw is set on the figure so the caption can use it. */
[data-style="manuscript"] .road-pic { --frw: 60px; }
[data-style="manuscript"] .plate > figure { --frw: 90px; }
[data-style="manuscript"] .plate-video figure { --frw: 64px; }
[data-style="manuscript"] .exercise-fig { --frw: 40px; }
[data-style="manuscript"] .exercise-wide { --frw: 80px; }
[data-style="manuscript"] :is(.road-pic figcaption, .exercise-fig figcaption, .plate-caption) { padding-left: calc(var(--frw, 60px) * .3); padding-right: calc(var(--frw, 60px) * .3); box-sizing: border-box; }
.fr > .road-empty { display: flex; }   /* the frame rule above sets display: block on everything inside a frame; the empty square needs its flex to centre the icon (measured 2026-10-02: the icon sat 68 px off centre) */
@media (max-width: 760px) { .road-pic { grid-template-columns: minmax(0, 1fr); width: 100%; justify-self: stretch; } .road-pic .fr, [data-style="manuscript"] .road-pic .fr, [data-style="manuscript"] .road-pic .fr:has(video) { width: 100%; max-width: 100%; } }   /* on a phone the figure fills the column (the min-content column above shrank it to a word, measured 2026-10-02) */
/* the frame's four middle knots, cut out of the frame file (2026-10-02) and drawn at the frame's own scale, never
   stretched: each knot's size and place are the ratios of its pixels to the slice thickness (220.5 px top and bottom, 237 px
   left and right), times --frw, which is what the border-image scales the slices by. */
[data-style="manuscript"] .fr::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background-image: url("images/frame-ms-mid-top.png"), url("images/frame-ms-mid-bottom.png"), url("images/frame-ms-mid-left.png"), url("images/frame-ms-mid-right.png");
  background-repeat: no-repeat;
  background-size: calc(var(--frw) * 0.3220) calc(var(--frw) * 0.1043), calc(var(--frw) * 0.3175) calc(var(--frw) * 0.1043), calc(var(--frw) * 0.0928) calc(var(--frw) * 0.2911), calc(var(--frw) * 0.0928) calc(var(--frw) * 0.2911);
  background-position: center calc(var(--frw) * 0.0590), center calc(100% - var(--frw) * 0.1723), calc(var(--frw) * 0.2489) center, calc(100% - var(--frw) * 0.2025) center; }
/* the town's arms in the header, one drawing per age (2026-10-02): the standard file for today, recolourings of it for the
   others. The brand keeps its height; the arms are 715 x 590 in the file, so 32 px tall is 26 wide. */
.arms { display: inline-block; height: 32px; width: 27px; position: relative; }
.arms img { position: absolute; left: 0; top: 0; height: 32px; width: auto; display: none; }
[data-era="0"] .arms-0, [data-era="1"] .arms-1, [data-era="2"] .arms-2, [data-era="3"] .arms-3 { display: block; }

/* language switch (2026-10-02): two era-style chips beside the era strip; on a phone the era strip hides and these stay */
.lang-strip .era-chip { display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 640px) { .era-strip.lang-strip { display: flex; } .lang-strip .era-chip { padding: 8px 9px; min-height: 36px; } }
/* the brick age's tiles and shadows make its header the widest: tighter gaps keep every nav link in view at laptop widths (2026-10-02) */
[data-style="brick"] .nav { gap: 13px; }
[data-style="brick"] .top-row { gap: 16px; }

/* the proof card on a phone (2026-10-02): its second column spilled past the screen edge (a nowrap value beside the source text), so the page zoomed out;
   one column instead, each label above what it names */
@media (max-width: 640px) {
  .proof-card { grid-template-columns: minmax(0, 1fr); }
  .proof-card > :nth-child(1) { order: 1; }
  .proof-card > .proof-value { order: 2; white-space: normal; }
  .proof-card > :nth-child(2) { order: 3; margin-top: 8px; }
  .proof-card > .proof-src { order: 4; }
  .proof-card > .proof-link { order: 5; }
}
/* the proof card where the timeline has two columns but its column is too narrow for the card's own figure (800 to 990 px): the phone's one-column order, so the long
   figure ("79% of buildings measured") wraps instead of pushing its text out of the card (measured 2026-10-04) */
@media (min-width: 800px) and (max-width: 990px) {
  .proof-card { grid-template-columns: minmax(0, 1fr); }
  .proof-card > :nth-child(1) { order: 1; }
  .proof-card > .proof-value { order: 2; white-space: normal; }
  .proof-card > :nth-child(2) { order: 3; margin-top: 8px; }
  .proof-card > .proof-src { order: 4; }
  .proof-card > .proof-link { order: 5; }
}

/* the era buttons under the year control on a phone (2026-10-02): the manuscript and sketch faces set their tags larger than the rule above, and the last
   label (centred on the last stop) then left the screen by a few pixels in Italian; smaller tags at phone width keep every label inside */
@media (max-width: 640px) {
  [data-style="manuscript"] .era-btn b { font-size: 14px; }
  [data-style="manuscript"] .era-btn i { font-size: 10px; letter-spacing: .02em; }
  [data-style="sketch"] .era-btn b { font-size: 15px; }
  [data-style="sketch"] .era-btn i { font-size: 11px; }
}

/* 2026-10-02, three notes on the bottom of the page. The call to give at the bottom is the header's Donate (the same class, so the two cannot drift apart in
   any age); Bring a photo takes the outline look the bottom Donate had (yellow in the brick age). The footer is short: the brand and the copyright, the links,
   one button; the data credits live in a window (a native dialog). */
.donate-lg { padding: 14px 22px; font-size: 13px; display: inline-block; }
.foot-grid { align-items: start; }
.foot-links { margin-top: 0 !important; align-items: baseline; }
@media (min-width: 761px) { .foot-links { justify-content: flex-end; } }
.foot-credits { background: none; border: 0; padding: 0; margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.foot-credits:hover { opacity: .8; }
.foot-credits:focus-visible, .credits-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.credits { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 18px 60px rgba(0, 0, 0, .35); overflow: auto; font-size: 15px; line-height: 1.55; }
.credits::backdrop { background: rgba(10, 10, 10, .5); }
.credits-inner { padding: 26px 30px 30px; }
.credits-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.credits-head h2 { margin: 0; font-size: 30px; line-height: 1.15; }
.credits-close { flex: none; width: 40px; height: 40px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 22px/1 'IBM Plex Mono', monospace; cursor: pointer; }
.credits h3 { margin: 18px 0 8px; font-size: 20px; }
.credits ul { margin: 0 0 14px; padding-left: 20px; }
.credits li { margin: 0 0 6px; }
.credits p { margin: 0 0 10px; }
body:has(dialog[open]) { overflow: hidden; }
[data-style="manuscript"] .credits { border: 3px double var(--ink); }
[data-style="sketch"] .credits { border: 1px solid var(--ink); border-radius: 2px; }
[data-style="modern"] .credits { border: 1px solid var(--rule); }
[data-style="brick"] .credits { border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink); }
[data-style="brick"] .credits-close { border: 2px solid var(--ink); border-radius: 8px; background: var(--gold); box-shadow: 0 3px 0 var(--ink); }
@media (max-width: 640px) { .credits-inner { padding: 20px 18px 24px; } .credits-head h2 { font-size: 24px; } }