/* The Strop Room: shared tokens, base, nav and footer.
   Tokens: the "Sand" palette shared by accordion-footer, marquee-rows and hover-preview-list, accent tuned from
   rust #9a3412 to oxblood and accent-2 from teal #0f766e to bottle green. Fonts: Darker Grotesque + Manrope
   (accordion-footer). */
:root { --bg: #f3ead9; --fg: #2b2118; --accent: #8b1e24; --accent-2: #1e4d3b; --brass: #b8893b; --muted: color-mix(in oklab, var(--fg) 68%, var(--bg)); --accent-ink: color-mix(in oklab, var(--accent) 76%, var(--fg)); --accent-2-ink: color-mix(in oklab, var(--accent-2) 76%, var(--fg)); --on-accent: color(from var(--accent) xyz-d65 calc(clamp(0, (0.18 - y) * 10000, 1) * 0.9505) clamp(0, (0.18 - y) * 10000, 1) calc(clamp(0, (0.18 - y) * 10000, 1) * 1.089)); --on-accent-2: color(from var(--accent-2) xyz-d65 calc(clamp(0, (0.18 - y) * 10000, 1) * 0.9505) clamp(0, (0.18 - y) * 10000, 1) calc(clamp(0, (0.18 - y) * 10000, 1) * 1.089)); --line: color-mix(in oklab, var(--fg) 12%, transparent); --card: color-mix(in oklab, var(--fg) 4%, var(--bg)); --font-display: "Darker Grotesque"; --font-body: "Manrope"; }
/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body), system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { overflow-x: clip; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a, button, [role=tab], [role=slider] { touch-action: manipulation; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrapx { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.eyebrow { margin: 0 0 14px; font: 700 13px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.tone-dark { background: var(--fg); color: var(--bg); }

/* vectors (scribble-shapes, line-portrait-avatars): colours come in through --v-* */
.scrib { --v-stroke: var(--fg); --v-accent: var(--accent); }

/* pause control shared by the moving layers (marquee-rows ships this exact button) */
.pz { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--fg) 22%, transparent); background: color-mix(in oklab, var(--bg) 82%, transparent); color: var(--fg); cursor: pointer; backdrop-filter: blur(6px); } .pz svg { width: 14px; height: 14px; fill: currentColor; } .pz[aria-pressed=true] .i-pa, .pz:not([aria-pressed=true]) .i-pl { display: none; } .pz:hover { border-color: var(--fg); } .pz:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pz[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .pz.rm-hide { display: none; } }

/* magnetic-button (element): the pull on links as well as buttons */
.mgx { display: inline-flex; flex-wrap: wrap; gap: 14px; }
.mgx .mg { --mg-x: 0px; --mg-y: 0px; --mg-s: 1; position: relative; display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--fg); color: var(--bg); font: inherit; font-weight: 700; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transform: translate3d(var(--mg-x), var(--mg-y), 0) scale(var(--mg-s)); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, color 0.3s; will-change: transform; }
.mgx .mg.near { transition: transform 0.12s linear, background 0.3s, color 0.3s; }
.mgx .mg > span { --mg-lx: 0px; --mg-ly: 0px; display: inline-flex; align-items: center; gap: 12px; transform: translate3d(var(--mg-lx), var(--mg-ly), 0); transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.mgx .mg.near > span { transition: transform 0.12s linear; }
.mgx .mg::before { content: ""; position: absolute; inset: -14px; border-radius: inherit; background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--accent) 45%, transparent), transparent 70%); opacity: 0; transition: opacity 0.4s; z-index: -1; }
.mgx .mg.near::before, .mgx .mg:focus-visible::before { opacity: 1; }
.mgx .mg:hover, .mgx .mg:focus-visible { background: var(--accent); color: var(--on-accent); }
.mgx .mg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.mgx .mg.ghost { background: transparent; color: var(--fg); border: 1px solid color-mix(in oklab, var(--fg) 25%, transparent); }
.mgx .mg.ghost:hover, .mgx .mg.ghost:focus-visible { border-color: var(--accent); color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 8%, transparent); }
.mgx .mg.ghost::before { background: radial-gradient(60% 60% at 50% 50%, color-mix(in oklab, var(--accent-2) 40%, transparent), transparent 70%); }
.mgx .mg svg { width: 18px; height: 18px; flex: none; }
.mgx .mg:active { --mg-s: 0.96; }
@media (prefers-reduced-motion: reduce) { .mgx .mg, .mgx .mg > span { transform: none !important; transition: background 0.3s, color 0.3s; } }

/* highlight-marker-text (element): the marker is drawn by a scaled pseudo-element, so only transform animates */
.marks mark { position: relative; z-index: 0; color: inherit; background: none; padding: 0 0.12em; margin: 0 -0.12em; white-space: nowrap; }
.marks mark::before { content: ""; position: absolute; z-index: -1; inset: 0.08em 0 0.02em; border-radius: 3px; background: var(--ink, color-mix(in oklab, var(--accent) 22%, transparent)); transform: rotate(-1deg) scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.marks mark.b { --ink: color-mix(in oklab, var(--accent-2) 24%, transparent); } .marks mark.c { --ink: color-mix(in oklab, var(--brass) 38%, transparent); }
.marks mark.in::before { transform: rotate(-1deg) scaleX(1); }
@media (prefers-reduced-motion: reduce) { .marks mark::before { transition: none; transform: rotate(-1deg); } }

/* navigation (colour-flip-nav) */
#navigation { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); width: min(1000px, calc(100vw - 24px)); height: 60px; z-index: 50; }
#navigation .bar { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 8px 0 22px; border-radius: 999px; border: 1px solid; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background 250ms, color 250ms, border-color 250ms; }
#navigation .bar[data-tone="light"] { background: color-mix(in oklab, var(--bg) 80%, transparent); color: var(--fg); border-color: color-mix(in oklab, var(--fg) 12%, transparent); }
#navigation .bar[data-tone="dark"] { background: color-mix(in oklab, var(--fg) 88%, transparent); color: var(--bg); border-color: color-mix(in oklab, var(--bg) 16%, transparent); }
#navigation .over { clip-path: inset(0 0 calc(100% - var(--split, 0px)) 0); }
#navigation .base { clip-path: inset(var(--split, 0px) 0 0 0); }
#navigation.still .bar { transition: none; }
#navigation .wm { display: flex; align-items: center; gap: 9px; min-height: 44px; font: 800 24px/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; color: inherit; white-space: nowrap; }
#navigation .wm svg { width: 22px; height: 22px; flex: none; }
#navigation ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
#navigation ul a { display: block; padding: 10px 14px; border-radius: 999px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 600; }
#navigation ul a:hover, #navigation ul a[aria-current=page] { background: color-mix(in oklab, currentColor 12%, transparent); }
#navigation .end { display: flex; align-items: center; gap: 6px; }
#navigation .cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
#navigation .bar[data-tone="dark"] .cta { background: var(--bg); color: var(--fg); }
#navigation a:focus-visible, #navigation button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#navigation .menu { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid currentColor; background: none; color: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
@media (max-width: 760px) { #navigation ul { display: none; } #navigation .menu { display: inline-flex; align-items: center; gap: 6px; } #navigation .bar { padding-left: 16px; gap: 8px; } #navigation .wm { font-size: 21px; } #navigation .cta { padding: 0 16px; } }
@media (max-width: 380px) { #navigation .wm .full { display: none; } }
@media (prefers-reduced-motion: reduce) { #navigation .bar { transition: none; } }

/* popover-menu-overlay (element): the phone menu under the Menu button */
#overlay .menu { position: fixed; margin: 0; inset: auto; width: 232px; padding: 6px; border: 1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius: 16px; background: var(--bg); color: var(--fg); box-shadow: 0 20px 50px -20px #0006; transform-origin: top; transition: transform 0.18s cubic-bezier(.2,.8,.2,1), opacity 0.18s, overlay 0.18s allow-discrete, display 0.18s allow-discrete; }
#overlay .menu:not(:popover-open) { transform: scale(0.96) translateY(-4px); opacity: 0; }
@starting-style { #overlay .menu:popover-open { transform: scale(0.96) translateY(-4px); opacity: 0; } }
#overlay .menu a { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--fg); font-size: 15px; font-weight: 600; text-decoration: none; }
#overlay .menu a:hover, #overlay .menu a:focus-visible { background: color-mix(in oklab, var(--fg) 7%, transparent); outline: none; }
#overlay .menu a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#overlay .menu hr { border: 0; border-top: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); margin: 6px 4px; }
#overlay .menu .book { color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { #overlay .menu, #overlay .menu:not(:popover-open) { transform: none; } }

/* footer (accordion-footer) */
#footer { container-type: inline-size; background: var(--bg); border-top: 3px solid var(--fg); font: 500 15px/1.55 var(--font-body); }
#footer .in { max-width: 1220px; margin: 0 auto; padding: 56px 28px 0; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); }
#footer .lead { padding-right: 28px; } #footer .logo { display: flex; align-items: center; gap: 10px; font: 800 30px/1 var(--font-display); letter-spacing: -0.01em; } #footer .logo svg { width: 30px; height: 30px; flex: none; }
#footer .lead p { margin: 18px 0 0; font: 800 clamp(30px, 3.4vw, 40px)/.98 var(--font-display); letter-spacing: -0.01em; } #footer .lead small { display: block; margin-top: 14px; color: var(--muted); font-size: 13px; } #footer .lead small b { color: var(--fg); }
#footer .col { padding: 0 20px; border-left: 1px solid var(--line); } #footer h3 { margin: 0 0 12px; font: 800 30px/1 var(--font-display); }
#footer h3 button { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; } #footer h3 button[hidden], #footer h3 .t[hidden] { display: none; }
#footer h3 button i { position: relative; width: 16px; height: 16px; transition: transform 300ms cubic-bezier(.2,.7,.2,1); } #footer h3 button i::before, #footer h3 button i::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: currentColor; } #footer h3 button i::after { transform: rotate(90deg); } #footer h3 button[aria-expanded=true] i { transform: rotate(135deg); }
#footer ul { margin: 0; padding: 0; list-style: none; } #footer li { padding: 3px 0; } #footer a { color: var(--fg); text-decoration: none; } #footer a:hover, #footer a:focus-visible { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; outline: none; }
#footer address { font-style: normal; }
#footer .hrs li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } #footer .hrs li.today { font-weight: 800; } #footer .hrs li span { color: var(--muted); font-weight: 500; } #footer .badge { display: inline-block; margin: 2px 0 8px; padding: 2px 8px; border-radius: 999px; font: 700 12px var(--font-body); background: color-mix(in oklab, var(--accent-2) 16%, var(--bg)); color: var(--accent-2-ink); } #footer .badge.shut { background: color-mix(in oklab, var(--fg) 8%, var(--bg)); color: var(--muted); }
#footer .panel { overflow: hidden; } #footer .panel[hidden] { display: none; }
#footer .base { max-width: 1220px; margin: 40px auto 0; padding: 16px 28px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; } #footer .base > span:first-child { margin-right: auto; } #footer .base a { display: inline-block; padding: 5px 0; color: inherit; } #footer .base a:hover { color: var(--fg); }
#footer .fine { max-width: 1220px; margin: 0 auto; padding: 0 28px 28px; color: var(--muted); font-size: 13px; } #footer .fine p { margin: 0 0 4px; } #footer .fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#footer .base .tileio-made { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border: 1px solid color-mix(in oklab, var(--fg) 22%, transparent); border-radius: 999px; color: var(--fg); font-weight: 700; text-decoration: none; }
#footer .base .tileio-made:hover, #footer .base .tileio-made:focus-visible { border-color: var(--fg); text-decoration: none; }
@container (max-width: 980px) { #footer .in { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } #footer .lead { grid-column: 1 / -1; } #footer .col:nth-of-type(3n + 2) { border-left: 0; padding-left: 0; } }
@container (max-width: 720px) { #footer .in { grid-template-columns: 1fr; padding-top: 36px; } #footer .lead { padding: 0 0 22px; } #footer .col { padding: 0; border-left: 0; border-top: 1px solid var(--line); } #footer .col:last-child { border-bottom: 1px solid var(--line); } #footer h3 { margin: 0; font-size: 26px; } #footer h3 button { min-height: 56px; } #footer .panel > * { padding-bottom: 18px; } #footer li { padding: 6px 0; font-size: 16px; } #footer .base > span:first-child { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { #footer h3 button i { transition: none; } }
@media (max-width: 520px) { #navigation .cta .x { display: none; } }