/* Lectern design system. Paper, ink, one highlighter, one pen, seven binder tabs.
   Light only, on purpose. Every page loads this file; home.css adds the front
   page's layer on top. Since the 2026-09-13 home overhaul the whole site shares the
   home's foundation: Funnel Display for every heading and the wordmark, a cooler
   paper with no grain, the glass top bar, and the yellow-tile mark. */

:root {
  --paper: #f8f7f3;
  --paper-2: #efede6;
  --paper-3: #e4e2da;
  --card: #fffdf9;
  --ink: #16130e;
  --ink-2: #4b453a;
  --mute: #6b6456;
  --line: rgba(22, 19, 14, 0.12);
  --line-2: rgba(22, 19, 14, 0.26);
  --hi: #ffe14d;
  --hi-2: #ffd400;
  --hi-soft: #fff4b8;
  --pen: #1f3fd6;
  --pen-soft: #dfe5fb;
  --green: #1d7a4b;
  --green-bg: #dff1e6;
  --red: #b3341f;
  --red-bg: #f8e3dd;
  --amber: #8f5808;
  --amber-bg: #fbeed0;
  /* binder tabs: one per course, assigned by course id */
  --tab-0: #f2b8a2;
  --tab-1: #bfe3c6;
  --tab-2: #b9d8f5;
  --tab-3: #d6c6f2;
  --tab-4: #fbe58a;
  --tab-5: #f5c0d4;
  --tab-6: #cfe0a8;
  --r-s: 8px;
  --r: 12px;
  --r-l: 18px;
  --hair: 0 0 0 1px var(--line);
  --lift: 0 1px 0 rgba(22, 19, 14, 0.04), 0 10px 30px -14px rgba(22, 19, 14, 0.35);
  --lift-2: 0 2px 0 rgba(22, 19, 14, 0.04), 0 22px 44px -18px rgba(22, 19, 14, 0.45);
  --sans: "Instrument Sans", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display: "Funnel Display", var(--sans);
  --spring: cubic-bezier(0.22, 0.9, 0.3, 1);
  --soft: cubic-bezier(0.4, 0, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.4, 0.64, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--hi); color: var(--ink); }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -0.012em; line-height: 1; margin: 0; }
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 6vw, 5.5rem); line-height: 0.98; letter-spacing: -0.035em; }
h2 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1; letter-spacing: -0.035em; }
h3 { font-size: 1.4rem; line-height: 1.15; }
h4 { font-size: 1.15rem; line-height: 1.15; }
/* an emphasised word in a heading wears the highlighter bar, as the hero's client name does */
h1 em, h2 em, h3 em { font-style: normal; color: inherit; position: relative; z-index: 0; }
/* not when the script draws its swept stroke on the word instead (.hl) */
h1 em:not(.hl)::after, h2 em:not(.hl)::after, h3 em:not(.hl)::after { content: ""; position: absolute; left: -0.05em; right: -0.05em; bottom: 0.08em; height: 0.32em; background: var(--hi); border-radius: 0.06em; z-index: -1; }
p { margin: 0; }
p + p { margin-top: 0.7em; }
.mute { color: var(--mute); }
.addr { overflow-wrap: anywhere; color: var(--ink); }
.consent { margin: 4px 0 14px; color: var(--ink-2); font-size: 0.95em; }
.consent a { color: var(--ink); }
.ink-2 { color: var(--ink-2); }
.lede { color: var(--ink-2); font-size: 1.15rem; line-height: 1.5; max-width: 34em; }
.small { font-size: 0.92rem; }
b, strong { font-weight: 600; }
kbd { font: inherit; font-weight: 600; font-size: 0.92em; background: var(--paper-2); border-radius: 6px; padding: 1px 7px; box-shadow: 0 1px 0 var(--line-2); white-space: nowrap; }
code { font: inherit; font-weight: 600; background: var(--paper-2); border-radius: 5px; padding: 1px 6px; }

/* highlighter: a hand-swept stroke behind a phrase, drawn in when .in lands */
.hl { position: relative; white-space: nowrap; }
.hl svg { position: absolute; left: -0.1em; right: -0.1em; bottom: -0.08em; height: 0.55em; width: calc(100% + 0.2em); z-index: -1; overflow: visible; pointer-events: none; }
.hl svg path { fill: none; stroke: var(--hi); stroke-width: 14; stroke-linecap: round; mix-blend-mode: multiply; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--soft); }
.hl.in svg path, .in .hl svg path { stroke-dashoffset: 0; }

/* layout: one content width on every page, so the top bar and the footer sit in the
   same place everywhere (the front page once had its own, wider wrap) */
:root { --wrap-max: 1320px; --wrap-pad: 56px; --c-yellow: #ffe14d; --c-pink: #ffc4dc; --c-sky: #b4dcff; --c-cobalt: #2a44e6; --c-mint: #b6ecca; --c-tomato: #ff6a3d; }
@media (min-width: 1800px) { :root { --wrap-max: 1480px; --wrap-pad: 120px; } }
@media (min-width: 2400px) { :root { --wrap-max: 1600px; } }
.wrap { position: relative; z-index: 1; width: min(var(--wrap-max), calc(100% - var(--wrap-pad))); margin: 0 auto; }
.narrow { width: min(560px, 100%); margin: 0 auto; }
.wide { width: min(880px, 100%); margin: 0 auto; }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* Vertical rhythm, every page: one section gap, one block gap, one element gap. */
:root { --gap-section: 96px; --gap-block: 56px; --gap-el: 24px; }
.page main { flex: 1; padding: 48px 0 var(--gap-section); }
#view > * + * { margin-top: var(--gap-el); }
#view > details.manage, #view > .ai-card-small { margin-top: var(--gap-block); }
.page .topbar { position: sticky; }
.title { margin: 0 0 12px; }
.title + .lede { margin-bottom: 0; }
#view h2 { margin-top: var(--gap-block); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack.tight { gap: 8px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }

/* topbar: the same sticky bar on every page, always visible. It is not a sheet of glass
   across the page (that was a slab): the bar itself is empty and lets the page through,
   the brand hangs from the top edge on an ink index tab, and the links sit in one small
   glass capsule at the other end. Once scrolled the tab tucks up a little and the
   capsule gains its shadow. */
.topbar { position: sticky; top: 0; z-index: 20; pointer-events: none; }
.topbar .nav { align-items: flex-start; height: 64px; padding: 0; }
.topbar .brand, .topbar .nav-links { pointer-events: auto; }
.topbar .brand { --tab-h: 60px; height: var(--tab-h); padding: 0 20px 0 15px; border-radius: 0 0 18px 18px; background: var(--ink); color: var(--paper); box-shadow: 0 14px 26px -16px rgba(22, 19, 14, 0.75); transition: height 0.45s var(--spring), transform 0.35s var(--spring), box-shadow 0.35s; }
.topbar .brand:hover { --tab-h: 66px; }
.topbar.scrolled .brand:hover { --tab-h: 60px; }
.topbar .brand .mark-book { transform-origin: 16px 15px; }
.topbar.scrolled .brand { --tab-h: 54px; }
.topbar .nav-links { --g-r: 999px; --g-blur: 18px; --g-fill: 0.55; margin-top: 10px; height: 44px; padding: 4px; gap: 2px; transition: box-shadow 0.35s; }
.topbar.scrolled .nav-links { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px var(--line), 0 16px 30px -18px rgba(22, 19, 14, 0.5); }
.topbar .nav-links a:not(.btn) { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; }
.topbar .nav-links .btn { margin-left: 0; height: 36px; padding: 0 16px; }
/* an in-page link lands its heading below the bar, not behind it */
section[id], [id]:target { scroll-margin-top: 90px; }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.42rem; line-height: 1; letter-spacing: -0.025em; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand .mark-book { transition: transform 0.5s var(--snap); transform-origin: 16px 15px; }
.brand:hover .mark-book { transform: rotate(-8deg) translateY(-1px); }
.nav-links { display: flex; gap: 12px; align-items: center; white-space: nowrap; }
.nav-links .btn { margin-left: 10px; }
.nav-links a:not(.btn), .nav-links button.linkish { padding: 9px 13px; border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--ink-2); transition: background 0.2s, color 0.2s; background: none; border: 0; }
.nav-links a:not(.btn):hover, .nav-links button.linkish:hover { background: rgba(22, 19, 14, 0.06); color: var(--ink); }
.nav-links a[aria-current="page"]:not(.btn) { color: var(--ink); background: rgba(22, 19, 14, 0.06); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1; white-space: nowrap;
  background: var(--ink); color: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 8px 20px -10px rgba(22, 19, 14, 0.65);
  transition: transform 0.22s var(--spring), box-shadow 0.22s var(--spring), background 0.2s, color 0.2s;
  position: relative; overflow: hidden;
}
.btn::after { /* light sweep on hover */
  content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%); transform: translateX(-120%); transition: transform 0.6s var(--soft); pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset, 0 14px 26px -10px rgba(22, 19, 14, 0.6); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.btn:disabled::after { display: none; }
.btn.did { background: var(--green); color: #fff; }
.btn.quiet.did { background: var(--green-bg); color: var(--green); box-shadow: none; }
.btn .arrow { width: 16px; height: 16px; transition: transform 0.25s var(--spring); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.quiet { background: transparent; color: var(--ink); box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn.quiet:hover { background: rgba(22, 19, 14, 0.05); box-shadow: 0 0 0 1px var(--line-2) inset; }
.btn.quiet::after { display: none; }
.btn.hi { background: var(--hi); color: var(--ink); box-shadow: 0 8px 20px -10px rgba(120, 95, 0, 0.6); }
.btn.hi:hover { background: var(--hi-2); }
.btn.pen { background: var(--pen); color: #fff; }
.btn.danger { background: transparent; color: var(--red); box-shadow: 0 0 0 1px rgba(179, 52, 31, 0.4) inset; }
.btn.danger:hover { background: var(--red-bg); }
.btn.danger::after { display: none; }
.btn.small { padding: 9px 15px; font-size: 0.92rem; }
.btn.icon { width: 42px; height: 42px; padding: 0; }
.btn.icon svg { width: 18px; height: 18px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--ink); }
.textlink svg { width: 16px; height: 16px; transition: transform 0.25s var(--spring); }
.textlink:hover svg { transform: translateX(3px); }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hi-2); text-decoration-thickness: 2px; }

/* cards */
.card {
  position: relative;
  background: var(--card);
  border-radius: var(--r-l);
  box-shadow: var(--hair), var(--lift);
  padding: 26px;
}
.card.flat { box-shadow: var(--hair); }
.card.paper { background: var(--paper-2); box-shadow: none; }
.card.yellow { background: var(--hi-soft); box-shadow: none; }
/* the binder's soft colours on cards, for a page of cards on paper (the set-up page) */
.card.sky { background: #e4f1ff; box-shadow: none; }
.card.mint { background: #e1f4e9; box-shadow: none; }
.card.pink { background: #ffe8f0; box-shadow: none; }
.card.mint.dead { background: var(--red-bg); }
.card h3 { margin-bottom: 4px; }
.card .lead { color: var(--mute); }

/* inputs */
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-weight: 600; font-size: 0.95rem; }
.input {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper);
  border: 0; border-radius: var(--r); padding: 13px 15px;
  box-shadow: 0 0 0 1px var(--line-2) inset;
  transition: box-shadow 0.2s, background 0.2s;
}
.input:focus { outline: none; box-shadow: 0 0 0 2px var(--pen) inset; background: #fff; }
.input::placeholder { color: var(--mute); }
textarea.input { min-height: 132px; resize: vertical; line-height: 1.45; }
select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2316130e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.hint { color: var(--mute); font-size: 0.92rem; }
.error { color: var(--red); background: var(--red-bg); border-radius: var(--r-s); padding: 11px 14px; font-size: 0.95rem; animation: shake 0.4s var(--soft); }
.error a, .error button.inline-link { color: inherit; }
.ok { color: var(--green); background: var(--green-bg); border-radius: var(--r-s); padding: 11px 14px; font-size: 0.95rem; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.copy { display: flex; gap: 8px; align-items: stretch; }
.copy .input { flex: 1; user-select: all; }

/* chips and tabs */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; background: var(--paper-2); border-radius: 999px; padding: 6px 12px; font-size: 0.92rem; font-weight: 500; }
.chip .tab { width: 10px; height: 10px; border-radius: 3px; background: var(--tab, var(--hi)); box-shadow: 0 0 0 1px rgba(22, 19, 14, 0.15) inset; flex: none; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.pill.green { background: var(--green-bg); color: var(--green); }
.pill.amber { background: var(--amber-bg); color: var(--amber); }
.pill.red { background: var(--red-bg); color: var(--red); }
.pill.pen { background: var(--pen-soft); color: var(--pen); }

/* status */
.status { display: flex; align-items: center; gap: 12px; }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(29, 122, 75, 0.5); animation: pulse 2.2s infinite; flex: none; }
.pulse.bad { background: var(--red); animation: none; }
.pulse.off { background: var(--mute); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 122, 75, 0.45); } 70% { box-shadow: 0 0 0 11px rgba(29, 122, 75, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 122, 75, 0); } }

/* details */
details.card { padding: 18px 24px; }
details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; }
details summary::-webkit-details-marker { display: none; }
details summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(-45deg); transition: transform 0.25s var(--spring); margin-right: 4px; }
details[open] summary::before { transform: rotate(45deg); }
details[open] summary { margin-bottom: 14px; }

/* panes */
.pane { display: none; }
.pane.show { display: block; animation: rise 0.45s var(--spring) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.illus { width: 100%; height: auto; display: block; border-radius: var(--r); }

/* modal */
.modal-back { position: fixed; inset: 0; background: rgba(22, 19, 14, 0.4); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; backdrop-filter: blur(3px); }
.modal-back.show { display: flex; animation: fade 0.2s both; }
.modal { width: min(520px, 100%); animation: rise 0.3s var(--spring) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* footer: the last sheet of the binder. Three coloured sheets, the hero's, lie under one
   frosted card that carries the brand, the links and the address. The sheets show
   through the glass as washes of colour and peek out at its edges. */
.site-foot-wrap { background: transparent; }
.site-foot { position: relative; padding: 56px 0 28px; }
.foot-sheets { position: absolute; inset: 56px 0 28px; z-index: 0; pointer-events: none; }
.foot-sheets span { position: absolute; border-radius: 28px; animation: foot-sway 10s ease-in-out infinite alternate; }
.foot-sheets span:nth-child(1) { --t: rotate(-0.9deg); inset: -12px 40% -10px -7px; background: #b4dcff; z-index: 2; animation-duration: 12s; }
.foot-sheets span:nth-child(2) { --t: rotate(0.8deg); inset: -9px -7px -12px 34%; background: #ffe14d; animation-delay: -5s; }
.foot-sheets span:nth-child(3) { --t: rotate(0.6deg); inset: 30% 24% -15px 26%; background: #ffc4dc; z-index: 3; animation-duration: 11s; animation-delay: -8s; }
.foot-sheets span { transform: var(--t); }
@keyframes foot-sway { to { transform: var(--t) rotate(0.9deg) translateY(-4px); } }
.foot-card { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px 40px; padding: 38px 42px 30px; border-radius: 30px; color: var(--ink); background: linear-gradient(150deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.5)); -webkit-backdrop-filter: blur(40px) saturate(1.9); backdrop-filter: blur(40px) saturate(1.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 0 0 1px var(--line), 0 30px 60px -36px rgba(22, 19, 14, 0.5); }
.foot-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.foot-brand .brand { font-size: 1.6rem; }
.foot-brand .brand svg { width: 36px; height: 36px; }
.foot-brand p { margin: 0; max-width: 42ch; color: var(--ink-2); }
.foot-brand .foot-mail { margin-top: auto; font-weight: 500; }
.foot-brand .foot-mail a { text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--hi-2); }
.foot-brand .foot-mail a:hover { background: var(--hi-soft); }
.foot-card nav { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; }
.foot-card nav a { display: inline-block; padding: 6px 14px; margin-left: -14px; border-radius: 999px; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; color: var(--ink); transition: background 0.2s, transform 0.3s var(--snap); }
.foot-card nav a:hover { background: rgba(255, 255, 255, 0.7); transform: translateX(4px); }
.foot-card nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.7); }
.foot-line { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgba(22, 19, 14, 0.1); color: var(--mute); font-size: 0.92rem; }
.foot-line span { white-space: nowrap; }

/* long-form pages */
.prose { width: min(700px, 100%); margin: 0 auto; }
.prose .title + .lede { margin-bottom: 8px; }
.prose h2 { margin: 48px 0 12px; font-size: 1.7rem; }
.prose h2::before { content: ""; display: block; width: 44px; height: 6px; background: var(--hi); border-radius: 3px; margin-bottom: 14px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.prose p + p { margin-top: 10px; }
.prose b { color: var(--ink); }
.prose a { text-decoration-color: var(--hi-2); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* reveal on scroll: only once the script has taken charge (html.js), so a page
   without it is fully visible */
html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--soft), transform 0.8s var(--spring); }
html.js .reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

/* skip link */
.skip { position: fixed; left: 16px; top: -80px; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; z-index: 99; text-decoration: none; }
.skip:focus { top: 12px; }
/* read by screen readers, never painted (a display:none region is not announced) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the phone gate: the site is desktop only. html.phone is set by site.js from the
   viewport width or a phone's user agent; the page stays in the document for crawlers
   and only the gate is painted. */
.gate { display: none; }
html.phone body > :not(.gate) { display: none !important; }
html.phone .gate { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 22px; min-height: 100vh; min-height: 100dvh; padding: 36px 22px 32px; overflow: hidden; }
.gate > * { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--soft), transform 0.8s var(--spring); }
.gate.in > * { opacity: 1; transform: none; }
.gate.in > :nth-child(2) { transition-delay: 0.12s; }
.gate.in > :nth-child(3) { transition-delay: 0.26s; }
.gate.in > :nth-child(4) { transition-delay: 0.42s; }
.gate.in > :nth-child(5) { transition-delay: 0.52s; }
.gate.in > :nth-child(6) { transition-delay: 0.6s; }
.gate-lede { color: var(--ink-2); font-size: 1rem; max-width: 24em; margin: -6px 0 0; }
.gate-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1.8rem; line-height: 1; letter-spacing: -0.025em; }
.gate-brand svg { width: 36px; height: 36px; }
.gate-brand .mark-book { transform-origin: 16px 15px; animation: gate-open 1.6s var(--spring) 0.2s both; }
@keyframes gate-open { 0% { transform: rotate(-14deg) translateY(2px) scale(0.9); } 55% { transform: rotate(4deg) translateY(-2px); } 100% { transform: none; } }
.gate-title { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 9.5vw, 2.6rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0; max-width: 11em; }
.gflip { position: relative; display: inline-block; height: 1.04em; overflow: hidden; vertical-align: bottom; text-align: left; transition: width 0.5s var(--spring); }
.gflip-word { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; padding-right: 0.06em; transform: translateY(105%); opacity: 0; transition: transform 0.55s var(--spring), opacity 0.35s; }
.gflip-word::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.28em; background: var(--hi); z-index: -1; border-radius: 3px; }
.gflip-word.cur { transform: none; opacity: 1; }
.gflip-word.out { transform: translateY(-105%); opacity: 0; }
.gate-scene { position: relative; width: 100%; max-width: 380px; }
.gate-glow { position: absolute; inset: -30px -40px; background: radial-gradient(closest-side, var(--hi-soft), transparent 70%); z-index: -1; animation: gate-glow 6s ease-in-out infinite alternate; }
@keyframes gate-glow { from { transform: scale(0.9) translateY(6px); opacity: 0.7; } to { transform: scale(1.08) translateY(-6px); opacity: 1; } }
.gchat { background: var(--card); border-radius: 20px; box-shadow: var(--hair), 0 18px 40px rgba(22, 19, 14, 0.14); text-align: left; overflow: hidden; }
.gchat-head { height: 50px; display: flex; align-items: center; gap: 9px; padding: 0 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15px; }
.gchat-head .who { transition: opacity 0.3s; }
.gchat-head .who.swap { opacity: 0; }
.glogo { display: inline-flex; width: 22px; height: 22px; flex: none; }
.glogo .logo { width: 22px; height: 22px; }
.glogo .logo-chatgpt { color: var(--ink); }
.gslot { margin-left: auto; height: 26px; border-radius: 13px; padding: 0 10px; display: flex; align-items: center; font-size: 12px; font-weight: 600; background: var(--green-bg); color: var(--green); white-space: nowrap; }
.gchat-body { min-height: 212px; padding: 16px 14px 14px; display: flex; flex-direction: column; gap: 12px; transition: opacity 0.35s; }
.gchat-body.leave { opacity: 0; }
.gbub.me { align-self: flex-end; max-width: 84%; min-height: 40px; background: var(--ink); color: var(--paper); border-radius: 16px; border-bottom-right-radius: 5px; padding: 10px 14px; font-size: 15px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.4s var(--spring); }
.gbub.me.on { opacity: 1; transform: none; }
.gbub.me .q.typing::after { content: ""; display: inline-block; width: 1.5px; height: 1em; background: var(--paper); margin-left: 2px; vertical-align: -0.15em; animation: gcaret 0.9s steps(1) infinite; }
@keyframes gcaret { 50% { opacity: 0; } }
.greply { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transition: opacity 0.3s; }
.greply.on { opacity: 1; }
.greply .glogo { margin-top: 3px; }
.greply-body { flex: 1; min-width: 0; }
.ganswers { display: flex; flex-direction: column; gap: 8px; }
.gans { display: flex; align-items: center; gap: 9px; font-size: 14.5px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s var(--soft), transform 0.45s var(--spring); }
.gans.on { opacity: 1; transform: none; }
.gans .tab { width: 9px; height: 14px; border-radius: 3px; background: var(--tab); box-shadow: 0 0 0 1px rgba(22, 19, 14, 0.18) inset; flex: none; }
.gans .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gans .src { margin-left: auto; font-size: 12px; color: var(--mute); white-space: nowrap; flex: none; }
.galine { font-size: 13.5px; color: var(--mute); opacity: 0; transition: opacity 0.4s; padding-top: 8px; }
.galine.on { opacity: 1; }
.gate-with { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; color: var(--ink-2); font-size: 0.95rem; font-weight: 500; }
.gate-with-one { display: inline-flex; align-items: center; gap: 7px; }
.gate-with-one .logo { width: 18px; height: 18px; }
.gate-with-one .logo-chatgpt { color: var(--ink); }
.gate-do { font-weight: 600; max-width: 20em; font-size: 1.05rem; }
@media (prefers-reduced-motion: reduce) { .gate > *, .gflip-word, .gbub.me, .greply, .gans, .galine { transition: none; opacity: 1; transform: none; } .gate-brand .mark-book, .gate-glow { animation: none; } }

@media (max-width: 720px) {
  section[id], [id]:target { scroll-margin-top: 70px; }
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .nav { padding: 16px 0; gap: 10px; }
  .brand { font-size: 1.3rem; }
  .nav-links { gap: 2px; }
  .nav-links button.linkish { padding: 8px 9px; font-size: 0.95rem; }
  .btn.small { padding: 8px 12px; font-size: 0.88rem; }
  .card { padding: 20px; }
  .site-foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  html.js .reveal { opacity: 1; transform: none; }
  .hl svg path { stroke-dashoffset: 0; }
  .topbar .brand, .topbar .nav-links { transition: none; }
  .sheets-bg span, .foot-sheets span { animation: none; }
}

/* ── plain pages: consent, uninstalled, lost, prose ── */
.form-card { display: flex; flex-direction: column; gap: 18px; }
.chip .tab { width: 12px; height: 16px; border-radius: 3px; }
.lost { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 40px; }
.lost .art { width: min(360px, 100%); margin: 0 auto; }
.lost .art svg { width: 100%; height: auto; }
.steps-plain { padding-left: 22px; margin: 0; display: flex; flex-direction: column; gap: 10px; color: var(--ink-2); }
.steps-plain li::marker { font-weight: 700; color: var(--ink); }
@media (max-width: 860px) {
  .lost { grid-template-columns: 1fr; gap: 28px; }
}

/* ── set-up page: segmented client picker, the link box, the status line ── */
.seg { position: relative; display: flex; gap: 4px; background: var(--paper-2); border-radius: 999px; padding: 4px; }
.seg button { flex: 1; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; background: transparent; font: inherit; font-weight: 600; padding: 11px 14px; border-radius: 999px; color: var(--ink-2); cursor: pointer; transition: color 0.2s; }
.seg button.on { color: var(--ink); }
.seg .logo { width: 18px; height: 18px; }
.seg .pill-bg { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; background: var(--card); border-radius: 999px; box-shadow: var(--hair), 0 6px 14px -8px rgba(22, 19, 14, 0.5); transition: transform 0.4s var(--spring), width 0.4s var(--spring); }
.logo.big { width: 34px; height: 34px; }
.linkbox { display: flex; gap: 8px; align-items: stretch; }
.linkbox .input { flex: 1; min-width: 0; font-weight: 600; }
.status-card { display: flex; align-items: center; gap: 16px; }
.status-card > .stack { flex: 1; min-width: 0; }
.pane.show.stack { display: flex; }
/* the chat app's pane wears its tint on the header row */
.pane.card > .row.between:first-child { margin: -26px -26px 2px; padding: 20px 26px; background: var(--tint, var(--paper-2)); border-radius: var(--r-l) var(--r-l) 0 0; }
.inline-link { display: inline-block; max-width: 100%; min-width: 4.6em; text-align: center; background: var(--pen-soft); color: var(--pen); border: 0; border-radius: 7px; padding: 1px 8px; font: inherit; font-weight: 600; font-size: 0.92em; white-space: nowrap; vertical-align: baseline; cursor: pointer; transition: background 0.2s; }
.inline-link:hover { background: #cfd8f7; }
.inline-link.did { background: var(--green-bg); color: var(--green); }
.textlink.small { font-size: 0.92rem; }
.textlink.small svg { width: 14px; height: 14px; }
@media (max-width: 720px) {
  .seg button span, .seg button { font-size: 0.92rem; padding: 10px 8px; }
  .linkbox { flex-wrap: wrap; }
  .linkbox .input { flex-basis: 100%; }
  .status-card { flex-wrap: wrap; }
  .status-card > .stack { flex-basis: calc(100% - 28px); }
  .status-card > .btn { margin-left: 0 !important; }
}

/* ── set-up page: live preview ── */
.due-list { display: flex; flex-direction: column; gap: 8px; }
.due { display: flex; align-items: center; gap: 12px; background: var(--paper); border-radius: 10px; padding: 10px 12px; }
.due .tab { flex: none; width: 10px; height: 16px; border-radius: 3px; background: var(--tab); box-shadow: 0 0 0 1px rgba(22, 19, 14, 0.18) inset; }
.due-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.due-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due .when { flex: none; font-weight: 600; font-size: 0.92rem; color: var(--ink-2); }
.skeleton { height: 44px; border-radius: 10px; background: linear-gradient(90deg, var(--paper-2) 0%, var(--hi-soft) 50%, var(--paper-2) 100%); background-size: 200% 100%; animation: sweep 1.3s linear infinite; }
@keyframes sweep { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* the example question on each chat app's pane */
.try-q { margin-top: 4px; font-family: var(--display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.02em; }

/* ── school picker ── */
.pickwrap { position: relative; }
.picks { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; background: var(--card); border-radius: var(--r); box-shadow: var(--hair), var(--lift-2); padding: 6px; display: flex; flex-direction: column; max-height: 320px; overflow: auto; }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; border: 0; background: transparent; font: inherit; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.pick:hover, .pick[aria-selected="true"] { background: var(--paper-2); }
.pick:focus-visible { outline-offset: -2px; }
.pick span { font-size: 0.88rem; }


/* ── set-up guide ───────────────────────────────────────────────── */
.howto h3 { font-family: var(--sans); font-weight: 700; font-size: 1.15rem; margin: 26px 0 8px; letter-spacing: 0; }
.howto code { font-family: var(--sans); font-weight: 600; background: var(--hi-soft); padding: 1px 6px; border-radius: 6px; }
.howto .ai-box { margin: 26px 0 8px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.howto .ai-box p { color: var(--ink-2); margin: 0; }
.howto ol, .howto ul { margin-bottom: 8px; }

/* The consent and legal pages are the only ones a phone renders in full; their bar keeps just the brand and the button. */
@media (max-width: 720px) { .nav-links a:not(.btn) { display: none; } }
/* an error with an action under it (the extension's connect page has the same shape) */
.error .actions { display: flex; gap: 10px; margin-top: 8px; }

/* the AI set-up prompt on the set-up page */
.ai-card-small { padding: 26px 28px; display: flex; flex-direction: column; gap: 10px; }
.ai-card-small h2 { margin: 0; font-size: 1.5rem; }
.ai-card-small .copy { margin-top: 6px; }
/* what to type into the chat app's connector form: one row per field */
.trouble-more summary { font-weight: 600; }
.trouble-more[open] summary { margin-bottom: 12px; }
/* the connected page's steps: number, title, one line */
.next-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.next-steps li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: var(--r-l); background: var(--paper-2); }
.next-steps li.done { background: var(--green-bg); }
.next-steps .n { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 0.92rem; }
.next-steps li.done .n { background: var(--green); }
.next-steps b { font-size: 1.05rem; }
.next-steps span { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; } }
/* troubleshooting on the connected page */
.trouble { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trouble li { display: flex; flex-direction: column; gap: 2px; }
.trouble b { color: var(--ink); }
.trouble span { color: var(--ink-2); }

/* ── the cursor ─────────────────────────────────────────────────────
   The same arrow the step drawings use: ink with a paper edge on the page, brand yellow
   with an ink edge over anything that can be clicked. Hotspot at the tip (4,3). Text
   fields keep the I-beam; anything the browser has to show itself (wait, resize) stays
   native. Touch screens never see it. */
:root { --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2228%22 viewBox=%220 0 26 28%22%3E%3Cpath d=%22M4 3v17.2l4.7-4.3 3.1 6.9 3.5-1.6-3.1-6.7h6.5z%22 fill=%22%2316130e%22 stroke=%22%23f8f7f3%22 stroke-width=%221.8%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") 4 3, auto; --cur-hand: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2226%22 height=%2228%22 viewBox=%220 0 26 28%22%3E%3Cpath d=%22M4 3v17.2l4.7-4.3 3.1 6.9 3.5-1.6-3.1-6.7h6.5z%22 fill=%22%23ffe14d%22 stroke=%22%2316130e%22 stroke-width=%221.8%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") 4 3, pointer; }
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: var(--cur-arrow); }
  a, button, [role="button"], summary, label, select, .btn, .textlink, .linkish, .pick, .seg button, details summary { cursor: var(--cur-hand); }
  button:disabled, .btn:disabled, .btn[aria-disabled="true"] { cursor: var(--cur-arrow); }
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea { cursor: text; }
  input[type="checkbox"], input[type="radio"] { cursor: var(--cur-hand); }
}
/* Once the pointer moves, site.js takes over with a drawn cursor: the same arrow as a
   page element that follows the mouse. The CSS image cursor above stays as the first
   frame and the fallback. Reason (2026-09-13): image cursors failed on an ultrawide
   display, and a drawn one can press, tilt and change over controls on every screen.
   Text fields and selectable prose keep the system I-beam. (Two stray closing braces
   after the media block used to swallow the user-select rule below; removed.) */
.ptr { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 26px; height: 28px; pointer-events: none; opacity: 0; transition: opacity 0.15s; will-change: transform; }
html.jscur .ptr { opacity: 1; }
html.jscur .ptr.gone { opacity: 0; }
.ptr svg { position: absolute; left: 0; top: 0; display: block; width: 26px; height: 28px; overflow: visible; transform-origin: 4px 3px; transform: rotate(var(--cr, 0deg)) scale(var(--cs, 1)); transition: transform 0.28s var(--snap), opacity 0.15s; filter: drop-shadow(0 1.5px 2px rgba(22, 19, 14, 0.3)); }
.ptr path { fill: var(--ink); stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; transition: fill 0.15s, stroke 0.15s; }
/* over text the arrow gives way to a drawn I-beam, centred on the point */
.ptr .ptr-beam { left: -3px; top: -9px; width: 14px; height: 24px; opacity: 0; transform: scale(0.7); transform-origin: 7px 12px; }
.ptr .ptr-beam path { fill: none; stroke-linecap: round; }
.ptr .ptr-beam .beam-edge { stroke: #fff; stroke-width: 4.2; }
.ptr .ptr-beam .beam-ink { stroke: var(--ink); stroke-width: 1.9; }
.ptr.text .ptr-arrow { opacity: 0; transform: scale(0.5); }
.ptr.text .ptr-beam { opacity: 1; transform: none; }
.ptr.hand { --cr: -12deg; --cs: 1.14; }
.ptr.hand path { fill: var(--hi); stroke: var(--ink); }
.ptr.down svg { animation: cur-press 0.32s var(--snap); }
@keyframes cur-press { 40% { transform: rotate(var(--cr, 0deg)) scale(calc(var(--cs, 1) * 0.8)); } }
.ptr-ring { position: absolute; left: 4px; top: 3px; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 1.5px solid var(--ink); opacity: 0; }
.ptr.down .ptr-ring { animation: cur-ring 0.5s ease-out; }
@keyframes cur-ring { from { opacity: 0.7; transform: scale(0.25); } to { opacity: 0; transform: scale(1.35); } }
@media (hover: hover) and (pointer: fine) {
  html.jscur, html.jscur * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) { .ptr svg, .ptr.down svg, .ptr.down .ptr-ring { transition: none; animation: none; } }

/* ── selection, one rule for every page (2026-09-13) ──────────────────
   Prose is text: paragraphs, list items, definitions and headings select with the
   native highlighter-yellow selection above. Everything else is not text and never
   enters a selection: controls, navigation, chips, drawings, the drawn cursor, and
   anything a page marks .nosel (the home's stage, stickers, tabs, marquees, split
   headings). A page never overrides ::selection or paints its own. */
button, .btn, .textlink, .linkish, .inline-link, .nav-links, .brand, summary, label, .pill, .seg, .chip, .chips, .gslot, .site-foot nav, .gate-brand, .gate-with, .gate-do, .illus, svg, .skeleton, .picks, .pulse, .ptr, .modal-back, .nosel { user-select: none; -webkit-user-select: none; }
.error, .ok, .hint, .lede, .prose, .steps-plain, .try-q, .faq-a, .due-text, .status-card b, .status-card span { user-select: text; -webkit-user-select: text; }


/* ── glass ──────────────────────────────────────────────────────────
   One frosted surface for every page: a white wash over what lies behind, blurred and
   saturated, a bright top edge and a hairline. --g-r, --g-blur and --g-fill tune it. */
.glass { position: relative; --g-r: var(--r-l); --g-blur: 28px; --g-fill: 0.5; border-radius: var(--g-r); background: linear-gradient(150deg, rgba(255, 255, 255, calc(var(--g-fill) + 0.18)), rgba(255, 255, 255, calc(var(--g-fill) - 0.14))); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(1.9); backdrop-filter: blur(var(--g-blur)) saturate(1.9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px var(--line), 0 24px 46px -30px rgba(22, 19, 14, 0.5); }

/* ── coloured sheets under a surface ─────────────────────────────────
   Three tilted sheets in the binder colours, the hero's motif, laid under a glass card
   so it has something to show through it. --s1, --s2, --s3 recolour them. */
.sheets-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.sheets-bg span { position: absolute; border-radius: 28px; transform: var(--t); animation: sheet-sway 10s ease-in-out infinite alternate; }
.sheets-bg span:nth-child(1) { --t: rotate(-0.9deg); inset: -12px 40% -10px -7px; background: var(--s1, var(--c-sky)); z-index: 2; animation-duration: 12s; }
.sheets-bg span:nth-child(2) { --t: rotate(0.8deg); inset: -9px -7px -12px 34%; background: var(--s2, var(--c-yellow)); animation-delay: -5s; }
.sheets-bg span:nth-child(3) { --t: rotate(0.6deg); inset: 30% 24% -15px 26%; background: var(--s3, var(--c-pink)); z-index: 3; animation-duration: 11s; animation-delay: -8s; }
@keyframes sheet-sway { to { transform: var(--t) rotate(0.9deg) translateY(-4px); } }
@keyframes sticker { from { transform: rotate(-120deg) scale(0.2); } }

/* ── binder dividers ────────────────────────────────────────────────
   A band is a coloured divider with a row of folder tabs above its top edge, laid over
   the bottom of the band before it. Solid tabs overlap inside the content column; the
   band's lip covers the rear tabs' bases and the current tab joins the band. The home
   and the guide both build the row with bandTabs() in site.js. */
.band { position: relative; margin: 0 14px; border-radius: 44px; padding-bottom: 140px; scroll-margin-top: 140px; }
.band + .band { margin-top: -44px; }
.band-tabs {
  --tab-overlap: 12px;
  --tab-step: calc((100% - var(--tab-overlap)) / var(--tab-count));
  position: absolute;
  left: calc((100% - min(var(--wrap-max), 100% - var(--wrap-pad))) / 2);
  top: -64px;
  width: min(576px, calc(100% - var(--wrap-pad)));
  height: 72px;
  isolation: isolate;
  overflow: hidden;
  pointer-events: none;
  user-select: none; -webkit-user-select: none;
}
.band-tab {
  position: absolute;
  bottom: 0;
  left: calc(var(--k) * var(--tab-step));
  width: calc(var(--tab-step) + var(--tab-overlap));
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(var(--tab-overlap) + 2px) 8px;
  border-radius: 16px 16px 0 0;
  background: var(--tc);
  color: var(--tfg);
  font-weight: 600;
  font-size: clamp(0.8125rem, 1.5vw, 1.02rem);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  text-wrap: balance;
  pointer-events: auto;
  transform: translateY(calc((1 - clamp(0, var(--in, 1) * 1.8 - var(--k) * 0.35, 1)) * 105%));
  transition: height 0.3s var(--spring), background-color 0.8s var(--soft);
}
.band-tab::before { content: ""; position: absolute; inset: 0 0 8px; border: 1px solid rgba(22, 19, 14, 0.24); border-bottom: 0; border-radius: inherit; pointer-events: none; }
.band-tab.on { z-index: 4; background: var(--bc); color: inherit; transition: background-color 0.8s var(--soft); }
.band-tab.off { height: calc(60px - var(--d) * 4px); z-index: var(--depth); }
.band-tab.off::after { content: ""; position: absolute; inset: auto 0 8px; height: 6px; background: linear-gradient(transparent, rgba(22, 19, 14, 0.18)); pointer-events: none; }
.band-tabs::after { content: ""; position: absolute; z-index: 3; inset: auto 0 0; height: 8px; background: var(--bc); transition: background-color 0.8s var(--soft); }
@media (hover: hover) { .band-tab.off:hover { height: 62px; } }
.band-tab:focus-visible { outline: none; }
.band-tab:focus-visible::before { border: 2px solid currentColor; inset: 4px 5px 12px; border-radius: 12px 12px 3px 3px; }
.band-tab.off:focus-visible { height: 62px; }
/* the round ink sticker with a number or a glyph, pinned to a card's corner */
.sticker { position: absolute; z-index: 2; width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--hi); font-family: var(--display); font-weight: 600; font-size: 2.8rem; line-height: 1; box-shadow: 0 16px 30px -16px rgba(22, 19, 14, 0.8); user-select: none; -webkit-user-select: none; }
html.js .sticker { animation: sticker 0.8s var(--snap) 0.3s backwards; }

/* a card on glass: the card's own paint gives way to the glass treatment */

/* ── the legal pages: a head, a sticky glass contents list on sheets, the prose ── */
.legal-head { padding: 20px 0 44px; }
.legal-head .lede { margin-top: 16px; max-width: 46em; }
.legal { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 72px; align-items: start; }
.legal-side { position: sticky; top: 88px; }
.toc-stack { position: relative; padding: 14px 16px 18px 12px; }
.toc-stack .sheets-bg span:nth-child(1) { --t: rotate(-2.2deg); inset: 4px 26% 16px -2px; }
.toc-stack .sheets-bg span:nth-child(2) { --t: rotate(2deg); inset: -2px -4px 20px 34%; }
.toc-stack .sheets-bg span:nth-child(3) { --t: rotate(1.2deg); inset: 44% 12% 2px 8%; }
.toc { --g-r: 22px; --g-fill: 0.6; --g-blur: 26px; display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; }
.toc a { display: block; padding: 7px 12px; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: 0.95rem; font-weight: 500; line-height: 1.3; transition: background 0.2s, color 0.2s, transform 0.3s var(--snap); }
.toc a:hover { background: rgba(255, 255, 255, 0.75); color: var(--ink); transform: translateX(3px); }
.toc a.on { background: var(--ink); color: var(--paper); }
.legal .prose { margin: 0; width: min(720px, 100%); }
.legal .prose > h2:first-child { margin-top: 0; }
.prose h2[id] { scroll-margin-top: 100px; }
@media (max-width: 1000px) {
  .legal { grid-template-columns: 1fr; gap: 32px; }
  .legal-side { position: static; }
  .toc-stack { display: none; }
}

/* ── the lost pages: the drawing on glass over sheets ── */
.lost .art-stack { position: relative; width: min(460px, 100%); margin: 0 auto; padding: 26px 30px; }
.lost .art-stack .sheets-bg span:nth-child(1) { --t: rotate(-2.6deg); inset: 6px 30% 20px -2px; }
.lost .art-stack .sheets-bg span:nth-child(2) { --t: rotate(2.4deg); inset: 0 -2px 24px 28%; }
.lost .art-stack .sheets-bg span:nth-child(3) { --t: rotate(1.2deg); inset: 42% 10% 0 12%; }
.lost .art { --g-r: 30px; --g-fill: 0.6; width: 100%; padding: 28px; }