:root {
  --bg: #1d1234; --ink: #fff6e0; --a: #ff4f79; --b: #ffd23f;
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --serif: "Libre Caslon Text", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: #0d0a14; color: var(--ink); font: 16px/1.4 var(--font); display: grid; place-items: center; overflow: hidden; }
button, input { font: inherit; }
a { color: inherit; }

/* Story frame: 9:16 on desktop, the whole screen on phones. */
#frame {
  position: relative; overflow: hidden;
  width: min(100vw, calc(100dvh * 9 / 16)); height: min(100dvh, calc(100vw * 16 / 9));
  background: var(--bg); color: var(--ink); transition: background .45s, color .45s;
  container-type: inline-size;
}
@media (max-width: 600px) { #frame { width: 100vw; height: 100dvh; } }

.bars { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 4px; z-index: 6; }
.bars i { flex: 1; height: 3px; border-radius: 2px; background: currentColor; opacity: .25; }
.bars i.on { opacity: .95; }
.brand { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 14px; font-weight: 800; font-size: 13px; z-index: 6; opacity: .85; }
.close { position: absolute; top: calc(max(10px, env(safe-area-inset-top)) + 8px); right: 10px; z-index: 7; border: 0; background: none; color: inherit; font-weight: 600; font-size: 13px; cursor: pointer; opacity: .8; padding: 4px 6px; }
.tap { position: absolute; top: 0; bottom: 0; z-index: 4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap.prev { left: 0; width: 30%; }
.tap.next { right: 0; width: 70%; }
.hint { position: absolute; bottom: max(8px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 11px; opacity: .55; z-index: 5; pointer-events: none; }
.slide { position: absolute; inset: 0; padding: calc(max(10px, env(safe-area-inset-top)) + 54px) 7cqw calc(max(8px, env(safe-area-inset-bottom)) + 28px); display: flex; flex-direction: column; }

h1, h2, p { margin: 0; }
.kicker { font-weight: 600; font-size: 4.2cqw; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.huge { font-weight: 800; font-size: 15cqw; line-height: .92; letter-spacing: -.02em; overflow-wrap: anywhere; }
.big { font-weight: 800; font-size: 9.5cqw; line-height: 1.02; letter-spacing: -.015em; overflow-wrap: anywhere; }
.mid { font-weight: 600; font-size: 6.2cqw; line-height: 1.15; }
.small { font-size: 3.6cqw; opacity: .8; line-height: 1.4; }
.a { color: var(--a); } .b { color: var(--b); }
.grow { flex: 1; min-height: 0; }
.center { display: flex; flex-direction: column; justify-content: center; }

/* Entrance animation, staggered by --d. */
.rise { opacity: 0; transform: translateY(18px); animation: rise .55s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0) * 120ms + 80ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
.pop { transform: scale(.2); opacity: 0; animation: pop .6s cubic-bezier(.2,1.4,.3,1) forwards; animation-delay: calc(var(--d, 0) * 140ms + 100ms); }
@keyframes pop { to { transform: none; opacity: 1; } }
.dot { transform-box: fill-box; transform-origin: center; animation: pop .5s cubic-bezier(.2,1.4,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .rise, .pop, .dot { animation: none; opacity: 1; transform: none; } }

svg.map { width: 100%; height: 100%; display: block; }

/* Start screen */
.start { justify-content: safe center; overflow-y: auto; }
.start .field { position: relative; display: block; margin-top: 4cqw; }
.start label { display: block; font-size: 3.6cqw; font-weight: 600; opacity: .85; margin-bottom: 1.5cqw; }
.start input { width: 100%; border: 0; border-radius: 3cqw; padding: 3.6cqw 4cqw; font-size: max(16px, 5.4cqw); font-weight: 600; background: rgba(255,255,255,.12); color: inherit; outline: none; }
.start input:focus { background: rgba(255,255,255,.2); }
.start input::placeholder { color: inherit; opacity: .4; }
.sugg { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: 1cqw; background: #2b2047; border-radius: 3cqw; overflow: hidden; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.4); }
.sugg button { display: flex; justify-content: space-between; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; padding: 2.8cqw 4cqw; font-size: 4.2cqw; font-weight: 600; cursor: pointer; }
.sugg button + button { border-top: 1px solid rgba(255,255,255,.08); }
.sugg button:hover, .sugg button:focus { background: rgba(255,255,255,.1); outline: none; }
.sugg small { opacity: .6; font-weight: 400; }
.go { margin-top: 5cqw; width: 100%; border: 0; border-radius: 99px; padding: 4cqw; font-size: 5.2cqw; font-weight: 800; background: var(--ink); color: var(--bg); cursor: pointer; }
.go:disabled { opacity: .5; cursor: default; }
.err { min-height: 1.4em; margin-top: 2cqw; font-size: 3.6cqw; color: var(--b); }
details.about { margin-top: 5cqw; font-size: 3.4cqw; opacity: .8; }
details.about summary { cursor: pointer; font-weight: 600; }
details.about p { margin-top: 2cqw; line-height: 1.5; }

/* Book page */
.page { background: #f3ede1; color: #221d17; border-radius: 2cqw; padding: 4cqw 5cqw; font-family: var(--serif); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.3); transform: rotate(var(--rot, -1.5deg)); }
.page .hd { display: flex; justify-content: space-between; font-size: 3cqw; color: #8c8273; margin-bottom: 2cqw; font-style: italic; }
.page ol { list-style: none; margin: 0; padding: 0; font-size: 4.4cqw; line-height: 1.5; }
.page li.dim { color: #8c8273; }
.page li.blur { color: #b8ad99; letter-spacing: .3em; }
.page li.hit { color: #a3301f; font-weight: 700; font-size: 5.6cqw; position: relative; z-index: 0; }
.page li.hit::before { content: ""; position: absolute; left: -2cqw; right: -2cqw; top: 8%; bottom: 8%; background: rgba(163,48,31,.12); border-radius: 1cqw; z-index: -1; }
.page.none { font-family: var(--font); padding: 5cqw; }

/* Surname types */
.badge { border-radius: 5cqw; padding: 5cqw; color: #1d1234; }
.badge .t { font-weight: 800; font-size: 7.4cqw; line-height: 1; }
.badge .who { font-size: 3.4cqw; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .75; margin-bottom: 1.5cqw; }
.badge p { margin-top: 2cqw; font-size: 3.8cqw; }

/* Final: card + controls */
.final { padding-top: calc(max(10px, env(safe-area-inset-top)) + 40px); gap: 3cqw; padding-left: 5cqw; padding-right: 5cqw; }
.cardwrap { flex: 1; min-height: 0; display: grid; place-items: center; }
.card { container-type: inline-size; background: var(--cbg); color: var(--cink); border-radius: 3cqw; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: 6cqw;
        box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 3cqw 8cqw rgba(0,0,0,.45); }
.card.story { aspect-ratio: 9 / 16; height: 100%; max-width: 100%; }
.card.square { aspect-ratio: 1; width: 100%; max-height: 100%; }
.card .cb { font-weight: 800; font-size: 4cqw; letter-spacing: .04em; opacity: .85; }
.card .names { font-weight: 800; line-height: .95; letter-spacing: -.02em; margin-top: 4cqw; overflow-wrap: anywhere; }
.card.story .names { font-size: 11cqw; }
.card.square .names { font-size: 8.5cqw; }
.card .names .x { font-size: .55em; opacity: .7; }
.card .facts { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4cqw; }
.card .f .l { font-size: 3.2cqw; text-transform: uppercase; letter-spacing: .1em; opacity: .7; font-weight: 600; }
.card .f .v { font-size: 6.4cqw; font-weight: 800; line-height: 1.05; }
.card .f.letters .v { font-size: 22cqw; line-height: .85; }
.card .f.map { flex: 1; min-height: 20cqw; }
.card .foot { display: flex; justify-content: space-between; gap: 3cqw; font-size: 3.2cqw; opacity: .75; font-weight: 600; }
.controls { flex: none; display: grid; gap: 2.4cqw; font-size: 3.4cqw; }
.row { display: flex; gap: 1.6cqw; flex-wrap: wrap; align-items: center; }
.row .lbl { font-weight: 600; opacity: .7; width: 15cqw; }
.tg { border: 1.5px solid currentColor; background: none; color: inherit; border-radius: 99px; padding: 1.2cqw 2.6cqw; font-size: 3.2cqw; font-weight: 600; cursor: pointer; opacity: .6; }
.tg.on { background: var(--ink); color: var(--bg); border-color: var(--ink); opacity: 1; }
.tg:disabled { opacity: .25; cursor: default; }
.acts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2cqw; }
.acts button { border: 0; border-radius: 99px; padding: 3cqw 1cqw; font-weight: 800; font-size: 3.8cqw; cursor: pointer; background: var(--ink); color: var(--bg); }
.acts button.ghost { background: none; color: var(--ink); border: 1.5px solid currentColor; }
.toast { position: fixed; left: 50%; bottom: 18cqw; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 2cqw 4cqw; border-radius: 99px; font-weight: 600; font-size: 3.6cqw; z-index: 20; }

/* "Did you mean" under the form */
.dym { color: var(--ink); font-size: 3.8cqw; line-height: 1.5; }
.dym + .dym { margin-top: 2cqw; }
.dym button { border: 0; border-radius: 99px; margin: 1cqw 1cqw 0 0; padding: 1.4cqw 3cqw; font-weight: 700; font-size: 3.8cqw; background: var(--b); color: #1d1234; cursor: pointer; }
.dym button.keep { background: none; color: inherit; border: 1.5px solid currentColor; font-weight: 600; opacity: .8; }
/* Outbound links on slides sit above the tap zones. */
.out { position: relative; z-index: 6; align-self: flex-start; margin-top: 3cqw; font-weight: 600; font-size: 3.8cqw; }

/* "Put … on the map" */
.pin { width: 100%; border: 0; border-radius: 99px; padding: 3cqw; font-weight: 800; font-size: 4cqw; cursor: pointer; background: var(--a); color: #1d1234; }
.pin:disabled { cursor: default; }
.pin.done { background: none; color: var(--ink); border: 1.5px solid currentColor; }
.pinnote { margin: -1cqw 0 0; font-size: 3cqw; opacity: .75; text-align: center; }

/* Story mode owns touch: no page scrolling or pull-to-refresh fighting the swipe gestures. */
#frame.story { touch-action: none; user-select: none; -webkit-user-select: none; }
.toprow { display: flex; justify-content: space-between; align-items: center; }
.clear { border: 1.5px solid currentColor; background: none; color: inherit; border-radius: 99px; padding: 1.2cqw 3.4cqw; font-weight: 600; font-size: 3.4cqw; cursor: pointer; opacity: .75; }
.toast { display: flex; align-items: center; gap: 3cqw; }
.toast button { border: 0; background: none; color: inherit; font-weight: 800; font-size: 3.6cqw; text-decoration: underline; cursor: pointer; padding: 0; }

/* Pull to refresh on the start screen */
.start { overscroll-behavior-y: contain; }
.ptr { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translate(-50%, -48px); opacity: 0; z-index: 30;
       display: flex; align-items: center; gap: 2cqw; padding: 2cqw 4cqw; border-radius: 99px; background: var(--ink); color: var(--bg);
       font-weight: 700; font-size: 3.6cqw; pointer-events: none; }
.ptr-icon { display: inline-block; transition: transform .2s; }
.ptr.ready .ptr-icon { transform: rotate(180deg); }
.ptr.spinning .ptr-icon { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }

/* Top 3 towns, Wrapped style */
.top3 { display: grid; gap: 1.6cqw; margin-top: 1.5cqw; }
.rk { display: grid; grid-template-columns: 8cqw 1fr auto; align-items: center; gap: 2cqw; }
.rk .no { font-weight: 800; font-size: 7cqw; line-height: 1; }
.rk .tn { font-weight: 800; font-size: 5cqw; line-height: 1.05; }
.rk .tn small { display: block; font-weight: 400; font-size: 3.2cqw; opacity: .7; }
.rk .v { font-weight: 600; font-size: 3.6cqw; opacity: .8; }
.card .f .v.tv { font-size: 4.6cqw; }

/* Share row and secondary links */
.acts4 { display: grid; grid-template-columns: 1.2fr 1.3fr 1.2fr .7fr; gap: 1.6cqw; }
.acts4 button { border: 0; border-radius: 99px; padding: 2.8cqw 1cqw; font-weight: 800; font-size: 3.5cqw; cursor: pointer; background: var(--ink); color: var(--bg); }
.acts4 button.ghost { background: none; color: var(--ink); border: 1.5px solid currentColor; }
.links { display: flex; justify-content: center; gap: 2cqw; font-size: 3.4cqw; opacity: .85; }
.linkish { border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: 0; }
.start .linkish { font-size: 3.4cqw; opacity: .8; }

/* Feedback bottom sheet */
.sheet-wrap { position: fixed; inset: 0; justify-content: center; z-index: 40; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; touch-action: auto; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(100vw, calc(100dvh * 9 / 16)); background: #2b2047; color: #fff6e0; border-radius: 5cqw 5cqw 0 0; padding: 5cqw 5cqw calc(5cqw + env(safe-area-inset-bottom)); animation: up .25s cubic-bezier(.2,.8,.2,1); max-height: 90%; overflow-y: auto; }
@keyframes up { from { transform: translateY(100%); } }
.sheet-hd { display: flex; justify-content: space-between; align-items: center; font-size: 4.6cqw; margin-bottom: 3cqw; }
.sheet-x { border: 0; background: none; color: inherit; font-size: 4.6cqw; cursor: pointer; opacity: .8; }
.sheet .chips { display: flex; flex-wrap: wrap; gap: 2cqw; margin-bottom: 3cqw; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; border: 1.5px solid currentColor; border-radius: 99px; padding: 1.6cqw 3cqw; font-size: 3.4cqw; font-weight: 600; cursor: pointer; opacity: .75; }
.chip input:checked + span { background: #fff6e0; color: #1d1234; border-color: #fff6e0; opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid #ffd23f; }
.sheet textarea, .sheet input[type=email] { width: 100%; border: 0; border-radius: 3cqw; padding: 3cqw; font: inherit; font-size: max(16px, 4cqw); background: rgba(255,255,255,.12); color: inherit; outline: none; margin-bottom: 2.4cqw; resize: none; }
.sheet .check { display: flex; gap: 2cqw; align-items: flex-start; font-size: 3.4cqw; margin-bottom: 2.4cqw; opacity: .9; }
.sheet .go { margin-top: 1cqw; background: #fff6e0; color: #1d1234; }
.sheet-note { font-size: 3cqw; opacity: .7; margin: 2cqw 0 0; text-align: center; }
.sheet-done { text-align: center; padding: 6cqw 0; }

/* Start screen: the page itself scrolls (so phone browsers can tuck their address bar away), and our
   pull-to-refresh replaces the browser's. The story keeps its fixed full-screen frame. */
html.start-mode { overscroll-behavior-y: none; }
html.start-mode body { overflow-y: auto; align-items: start; }
html.start-mode #frame { height: auto; min-height: min(100dvh, calc(100vw * 16 / 9)); overflow: visible; }
@media (max-width: 600px) { html.start-mode #frame { min-height: 100dvh; } }
html.start-mode .slide.start { position: relative; inset: auto; min-height: inherit; overflow: visible; }
.topbtns { display: flex; gap: 2cqw; align-items: center; }
.help { width: 8cqw; height: 8cqw; border-radius: 50%; border: 1.5px solid currentColor; background: none; color: inherit; font-weight: 800; font-size: 4cqw; line-height: 1; cursor: pointer; opacity: .8; padding: 0; }
.field .xclear { position: absolute; right: 2cqw; bottom: 2.9cqw; width: 8cqw; height: 8cqw; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: inherit; font-size: 5cqw; line-height: 1; cursor: pointer; padding: 0; }
.field input { padding-right: 12cqw; }
.sheet-body p { margin: 0 0 3cqw; font-size: 3.8cqw; line-height: 1.5; opacity: .92; }
.sheet-links { display: flex; justify-content: center; gap: 2cqw; font-size: 3.6cqw; font-weight: 600; margin-top: 1cqw; }

/* A best-effort OCR reading: dashed highlight so it reads as "probably" */
.page.fuzzy li.hit::before { background: none; border: 1.5px dashed rgba(163,48,31,.6); }

/* Fun facts */
.ff { background: rgba(255,255,255,.07); border-radius: 4cqw; padding: 4cqw; }
.ff-name { font-weight: 800; font-size: 6cqw; margin-bottom: 2cqw; }
/* Label on its own line above the text: side by side, long labels like NEIGHBOURS ran into the text. */
.ff-row { padding: 1.8cqw 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 3.8cqw; line-height: 1.4; }
.ff-l { display: block; font-weight: 700; font-size: 2.9cqw; text-transform: uppercase; letter-spacing: .08em; opacity: .65; margin-bottom: .6cqw; }
.ff-t { display: block; }

/* ---------- Phase 1 visuals ---------- */
/* Soft glows from the theme colours plus a faint grain, behind every slide. */
#frame::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 88% -5%, color-mix(in srgb, var(--a) 30%, transparent), transparent 62%),
    radial-gradient(100% 60% at -5% 105%, color-mix(in srgb, var(--b) 24%, transparent), transparent 62%); }
#frame::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.slide { z-index: 1; }

/* Letter ripple */
svg text.lit { transform-box: fill-box; transform-origin: center; animation: lit .5s cubic-bezier(.2,1.4,.3,1) both; }
@keyframes lit { from { opacity: .15; transform: scale(.3); } }

/* Clavería cameo */
.cameo { display: flex; align-items: center; gap: 3cqw; margin-top: 4cqw; font-size: 3.4cqw; line-height: 1.35; opacity: .9; }
.cameo img { width: 14cqw; height: 14cqw; object-fit: cover; object-position: 50% 12%; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; flex: none; }

/* The book: the real cover behind recreated pages that turn in */
.bookstage { position: relative; padding-left: 16cqw; }
.bookstage .cover { position: absolute; left: -2cqw; top: 50%; width: 40cqw; height: auto; transform: translateY(-50%) rotate(-8deg);
  border-radius: 1.5cqw; box-shadow: 0 3cqw 8cqw rgba(0,0,0,.35); }
.bookstage .pages { position: relative; display: grid; gap: 4cqw; }
.flip { perspective: 900px; }
.flip .page { animation: pageturn .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--d, 0) * 200ms + 350ms); transform-origin: left center; }
@keyframes pageturn { from { opacity: 0; transform: rotateY(-75deg) rotate(var(--rot, -1.5deg)); } to { opacity: 1; transform: rotate(var(--rot, -1.5deg)); } }
.flip .page li.hit::before { transform-origin: left; animation: sweep .5s ease-out both; animation-delay: calc(var(--d, 0) * 200ms + 1.1s); }
@keyframes sweep { from { transform: scaleX(0); } }

/* Confetti */
canvas.confetti { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; }

/* Share card tilt and glare */
.card { transition: transform .25s ease-out; will-change: transform; }
.card.tilting { transition: none; }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(60% 45% at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 70%); }
.card.tilting::after { opacity: 1; }

/* ? sheet extras */
.sheet-body .credits { font-size: 3.2cqw; opacity: .7; }
.sheet-body .check { display: flex; gap: 2cqw; align-items: center; font-size: 3.8cqw; font-weight: 600; margin-top: 1cqw; }

/* Less motion: the switch in the ? sheet does what the system setting does. */
html.less-motion .rise, html.less-motion .pop, html.less-motion .dot, html.less-motion svg text.lit,
html.less-motion .flip .page, html.less-motion .flip .page li.hit::before { animation: none !important; opacity: 1; transform: none; }
html.less-motion .flip .page { transform: rotate(var(--rot, -1.5deg)); }
@media (prefers-reduced-motion: reduce) {
  svg text.lit, .flip .page, .flip .page li.hit::before { animation: none !important; opacity: 1; }
  .card { transition: none; }
}

/* Two pages on the book slide: smaller so the stage fits under the headline */
.pages.two { gap: 3cqw; }
.pages.two .page { padding: 3cqw 4cqw; }
.pages.two .page ol { font-size: 3.9cqw; line-height: 1.4; }
.pages.two .page li.hit { font-size: 4.8cqw; }
.pages.two .page .hd { margin-bottom: 1cqw; }

/* ---------- Phase 2: map camera ---------- */
/* Town markers and the province label appear once the camera arrives; the arc draws itself on the way. */
svg .tm { opacity: 0; transform-box: fill-box; transform-origin: center; }
svg.arrived .tm { animation: tm .45s cubic-bezier(.2,1.4,.3,1) both; }
svg.arrived .tm:nth-of-type(2) { animation-delay: .12s; } svg.arrived .tm:nth-of-type(3) { animation-delay: .24s; }
@keyframes tm { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
svg[data-camera] .lbl { opacity: 0; transition: opacity .4s; }
svg[data-camera].arrived .lbl { opacity: 1; }
svg .arc { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; }
svg.drawarc .arc { transition: stroke-dashoffset 1.4s ease-in-out; stroke-dashoffset: 0; }
svg.still .arc { transition: none; }
svg.still .tm, svg.still .lbl { animation: none; opacity: 1; }
html.less-motion svg .tm, html.less-motion svg .lbl { animation: none !important; opacity: 1 !important; }

/* Sources sheet */
.src { margin-bottom: 14px; }
.src-name { font-weight: 800; font-size: 1.05em; margin-bottom: 4px; }
.src .ff-t a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }