/* Direction D, the reading layout: long text at a comfortable measure. One stylesheet for every page that is
   mostly words: /about, /privacy, /terms, /offline, /privacy/delete/confirm, and the hero, prose and table
   primitives that /benchmark (bench.css) and /vargje (vargje.css) build on.
   Loaded after static/d.css (D's tokens, two faces, header, footer, focus) by pages whose <html> carries "d rd";
   templates/_read.html holds the shared head and the hero and contents macros, so the pages share markup too.
   Type: Instrument Serif for titles and headings, Geist for reading, at 18px/1.7 and a 68-character measure.
   The strict CSP allows no inline style; static/read.js only toggles attributes (the contents list). */

.rd { background: #fff; }   /* below a short page's footer: white, not brand.css's cream */
.rd body { background: #fff; overflow-x: hidden; }
.rd main { flex: 1 0 auto; }
.rd [hidden] { display: none !important; }
.rd .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; }
.rd .site-header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.82); border: 0; border-bottom: 1px solid rgba(220,227,236,.85); box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.rd .site-lang, .rd .nav-toggle { background: var(--mist); }
.rd .mono, .rd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.rd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 960px) { .rd-wrap { padding: 0 48px; } }

/* ── The opening: eyebrow, display title, lede ── */
.rd-hero { position: relative; overflow: clip; padding: 48px 0 40px; }
@media (min-width: 960px) { .rd-hero { padding: 104px 0 72px; } }
.rd-hero > .rd-wrap { position: relative; z-index: 1; }
.rd-h1 { margin: 0; max-width: 15ch; font: 400 clamp(52px, 8.6vw, 116px)/.94 var(--display); letter-spacing: -0.032em; color: var(--navy); text-wrap: balance; }
.rd-h1 em { font-style: italic; color: var(--poppy); }
.rd-updated { margin: 14px 0 0; font: 400 15px/1.4 var(--ui); color: var(--navy-2); }   /* the privacy page's last change */
.rd-h1 .rd-h1-en { display: block; margin-top: .22em; font-size: .46em; line-height: 1.05; font-style: italic; letter-spacing: -0.015em; color: var(--navy-2); }
.rd-deck { margin: 18px 0 0; font: italic 400 clamp(24px, 2.6vw, 32px)/1.2 var(--display); color: var(--navy-2); }
.rd-lede { margin: 26px 0 0; max-width: 38em; font-size: 19px; line-height: 1.6; color: var(--navy-2); text-wrap: pretty; }
@media (min-width: 960px) { .rd-lede { font-size: 21px; } }
.rd-meta { margin: 22px 0 0; font: 500 16px/1.4 var(--ui); color: var(--navy-2); }
.rd-meta::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--gold); vertical-align: 1px; }
/* the Bjeshkët mark, faint, behind a title (decorative; the hero clips it, so nothing scrolls sideways) */
.rd-mark { position: absolute; z-index: 0; right: -96px; top: 24px; width: 330px; height: auto; opacity: .06; pointer-events: none; user-select: none; }
@media (min-width: 960px) { .rd-mark { right: 2%; top: 56px; width: 560px; opacity: .065; } }

/* ── The opening's one signature visual (templates/_read.html, figure; launch audit design M11) ──
   Phone: under the text, the gutter's width. Desk: beside the title, the text keeping the left 54%. */
.rd-hero.has-fig .rd-h1 { max-width: 13ch; }
.rd-fig { margin: 30px 0 0; }
.rd-fig img { display: block; width: 100%; height: auto; }
.rd-fig-item { position: relative; overflow: hidden; border-radius: 22px; background: var(--mist);
  box-shadow: 0 1px 0 rgba(11,21,48,.04), 0 24px 48px -28px rgba(11,21,48,.45); }
.rd-fig-item img { aspect-ratio: 3 / 2; object-fit: cover; }
.rd-hero.has-fig .rd-mark { display: none; }   /* the visual takes the faint mark's place, at every width */
.rd-fig figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px;
  padding: 7px 12px 8px; border-radius: 12px; background: rgba(255,255,255,.86); color: var(--navy);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3); font: 500 14px/1.35 var(--ui); }
.rd-fig-name { font: 400 20px/1.05 var(--display); }
.rd-fig-region { color: var(--navy-2); }
.rd-fig-place { flex-basis: 100%; font-size: 13px; color: var(--navy-2); }
.rd-fig-credit { flex-basis: 100%; font-size: 11px; color: var(--navy-2); opacity: .85; }
/* a strip of places: two by two, on a phone and beside the title on a desk */
.rd-fig-city.is-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rd-fig-city.is-strip .rd-fig-item { border-radius: 16px; }
.rd-fig-city.is-strip figcaption { left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 10px 6px; border-radius: 10px; }
.rd-fig-city.is-strip .rd-fig-name { font-size: 18px; }
.rd-fig-city.is-strip .rd-fig-region, .rd-fig-city.is-strip .rd-fig-credit { display: none; }
.rd-fig-still { overflow: hidden; border-radius: 22px; box-shadow: 0 24px 48px -28px rgba(11,21,48,.45); }
.rd-fig-still img { aspect-ratio: 3 / 2; object-fit: cover; }
.rd-pos-center { object-position: 50% 50%; }
.rd-pos-sea { object-position: 50% 70%; }      /* the terrace: the sea and the far shore */
.rd-pos-earth { object-position: 74% 40%; }    /* still-1: the Earth, not the empty sky beside it */
.rd-fig-sky { background: linear-gradient(180deg, #7fb2e6 0%, #b9d6f2 55%, #e9f2fb 100%); }   /* behind the transparent horizon */
.rd-fig-sky img { aspect-ratio: auto; object-fit: contain; margin-top: 18%; }
/* the voice notes: the mark on its own page of light, its reflection speaking */
.rd-fig-voice { display: grid; place-items: center; aspect-ratio: 3 / 2; border-radius: 22px;
  background: radial-gradient(70% 80% at 50% 40%, #fff 0%, #eef4fb 60%, #dfe9f6 100%); box-shadow: 0 24px 48px -28px rgba(11,21,48,.35); }
.rd-voice-mark { width: 58%; height: auto; overflow: visible; }
.rd-voice-mark line { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .rd-voice-mark line { animation: rd-speak 1.6s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  .rd-voice-mark line:nth-of-type(3n) { animation-duration: 1.2s; }
  .rd-voice-mark line:nth-of-type(3n+1) { animation-duration: 1.9s; animation-delay: -.6s; }
  .rd-voice-mark line:nth-of-type(4n+2) { animation-delay: -1.1s; }
  .rd-fig { animation: rd-fig-in .7s cubic-bezier(.2, .7, .3, 1) .15s both; }
}
@keyframes rd-speak { from { transform: scaleY(.35); } to { transform: scaleY(1.08); } }
@keyframes rd-fig-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) {
  .rd-hero.has-fig > .rd-wrap { display: grid; grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); column-gap: 56px; align-items: center; }
  .rd-hero.has-fig > .rd-wrap > * { grid-column: 1; }
  .rd-hero.has-fig > .rd-wrap > .rd-fig { grid-column: 2; grid-row: 1 / span 6; margin: 0; }
  .rd-hero.has-fig .rd-h1 { font-size: clamp(56px, 5.6vw, 92px); }
  .rd-hero.has-fig .rd-lede { font-size: 19px; }
}

/* ── Body: the text column and, on a desk, its contents on the right ── */
.rd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding-bottom: 104px; }
.rd-toc { grid-row: 1; }
@media (min-width: 1100px) {
  .rd-body.has-toc { grid-template-columns: minmax(0, 68ch) 240px; justify-content: space-between; column-gap: 72px; }
  .rd-body.has-toc .rd-prose { grid-column: 1; grid-row: 1; }
  .rd-body.has-toc .rd-toc { grid-column: 2; grid-row: 1; }
}

/* ── Prose ── */
.rd-prose { min-width: 0; max-width: 68ch; font-size: 18px; line-height: 1.7; color: var(--navy); }
.rd-prose > section + section, .rd-prose > .rd-sec { margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.rd-prose > section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rd-prose h2 { margin: 0 0 22px; font: 400 clamp(36px, 4.6vw, 54px)/1.02 var(--display); letter-spacing: -0.022em; color: var(--navy); scroll-margin-top: 96px; text-wrap: balance; }
.rd-prose h3 { margin: 0 0 6px; font: 600 18px/1.35 var(--ui); color: var(--navy); }
.rd-prose p { margin: 0 0 1.15em; text-wrap: pretty; }
.rd-prose p:last-child { margin-bottom: 0; }
.rd-prose .rd-standfirst { margin-bottom: 1.1em; font: 400 clamp(27px, 3vw, 34px)/1.24 var(--display); letter-spacing: -0.01em; color: var(--navy); }
.rd-prose .quiet { color: var(--navy-2); }
/* A link inside the text is a 44 px tap target without moving a line: the padding grows the hit area, not the line
   box (launch audit, UX L4). */
.rd-prose a { padding-block: 11px; color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(27,79,168,.4); transition: text-decoration-color .2s var(--ease); }
.rd-prose a:hover { text-decoration-color: currentColor; }
.rd-prose strong { font-weight: 600; color: var(--navy); }
.rd-prose em { font-style: italic; }
.rd-prose code { padding: 1px 6px; border-radius: 6px; background: var(--mist); font-size: .88em; overflow-wrap: anywhere; }
.rd-list { margin: 0; padding: 0; list-style: none; }
.rd-list > li { position: relative; margin: 0 0 16px; padding-left: 30px; }
.rd-list > li:last-child { margin-bottom: 0; }
.rd-list + p { margin-top: 24px; }
.rd-list > li::before { content: ""; position: absolute; left: 0; top: .82em; width: 16px; height: 0; border-top: 2px solid var(--poppy); }
.rd-list.is-numbered { counter-reset: rd; }
.rd-list.is-numbered > li { padding-left: 40px; counter-increment: rd; }
.rd-list.is-numbered > li::before { content: counter(rd, decimal-leading-zero); top: .06em; width: auto; height: auto; border: 0; font: italic 400 22px/1.4 var(--display); color: var(--gold); }
.rd-mail { overflow-wrap: anywhere; }

/* ── Contents: a disclosure on a phone, a sticky list beside the text on a desk (read.js opens it there) ── */
.rd-toc { align-self: start; border-radius: 18px; background: var(--mist); }
.rd-toc > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-radius: 18px; list-style: none; cursor: pointer; font: 600 16px var(--ui); color: var(--navy); }
.rd-toc > summary::-webkit-details-marker { display: none; }
.rd-toc > summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border: solid var(--navy-2); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.rd-toc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.rd-toc ol { margin: 0; padding: 0 10px 12px; list-style: none; }
.rd-toc a { display: flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; font: 500 16px/1.3 var(--ui); color: var(--navy-2); text-decoration: none; transition: color .2s var(--ease), background .2s var(--ease); }
.rd-toc a:hover { color: var(--navy); background: rgba(255,255,255,.7); }
.rd-toc a[aria-current="true"] { color: var(--navy); }
@media (min-width: 1100px) {
  .rd-toc { position: sticky; top: 96px; background: none; border-radius: 0; }
  .rd-toc > summary { min-height: 44px; padding: 0 0 0 16px; font: 500 16px var(--ui); color: var(--navy-2); letter-spacing: .06em; text-transform: uppercase; }
  .rd-toc[open] > summary::after { display: none; }
  .rd-toc ol { padding: 4px 0 0; border-left: 1px solid var(--line); }
  .rd-toc li { position: relative; }
  .rd-toc a { padding: 6px 0 6px 16px; border-radius: 0; }
  .rd-toc a:hover { background: none; }
  .rd-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 2px; background: var(--poppy); }
}

/* ── Panels, forms and buttons (privacy's two deletions, the emailed confirmation, the offline retry) ── */
.rd-panel { margin-top: 20px; padding: 22px 20px 20px; border-radius: 22px; background: var(--mist); }
@media (min-width: 960px) { .rd-panel { padding: 28px 30px 26px; } }
.rd-panel h3 { font: 400 28px/1.1 var(--display); letter-spacing: -0.01em; margin-bottom: 8px; }
.rd-panel p { color: var(--navy-2); font-size: 17px; line-height: 1.6; }
.rd-panel .rd-bil > [lang="sq"] { color: var(--navy); }
.rd-field { margin-top: 16px; }
.rd-field label { display: block; margin-bottom: 8px; font: 600 16px var(--ui); color: var(--navy); }
.rd-field input { width: 100%; min-height: 52px; padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: 400 17px/1.4 var(--ui); color: var(--navy); }
.rd-field input::placeholder { color: #6A7389; opacity: 1; }
.rd-field input:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 4px rgba(27,79,168,.16); }
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.rd-btn { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .4em; min-height: 52px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--navy); color: #fff;
  font: 600 16px/1.2 var(--ui); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(11,21,48,.7);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s var(--ease); }
.rd-btn:hover { transform: translateY(-1px); }
.rd-btn:active { transform: scale(.98); }
.rd-btn.is-danger { background: var(--poppy); box-shadow: 0 14px 30px -14px rgba(179,18,46,.65); }
.rd-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.rd-status { flex: 1 1 14rem; min-height: 1.5em; margin: 0; font: 500 16px/1.5 var(--ui); color: var(--navy-2); }

/* ── Both languages at once (offline, the emailed confirmation): Albanian first, English beneath ── */
.rd .bil-en { color: var(--navy-2); }
.rd-bil { display: grid; gap: 6px; }
.rd-bil > p { margin: 0; }
.rd-bil > [lang="en"] { color: var(--navy-2); }
.rd-foot { font-size: 16px; line-height: 1.55; color: var(--navy-2); }
.rd-foot > [lang="sq"] { color: var(--navy); }
.rd-chip .bil-en { font-weight: 500; }
.rd-card strong .bil-en { font-style: italic; }
.rd-note .bil-en { display: block; margin-top: 2px; }
.rd-btn .bil-en { color: inherit; opacity: .78; font-weight: 500; }

/* ── Two cards side by side (offline: what works, what waits for the connection) ── */
.rd-pair { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .rd-pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.rd-card { padding: 22px 20px 12px; border-radius: 22px; background: var(--mist); }
.rd-card.is-ok { background: linear-gradient(180deg, #EEF6F1 0%, #F6FAF7 100%); }
.rd-card.is-wait { background: linear-gradient(180deg, #FBF1EE 0%, #FDF8F6 100%); }
.rd-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; font: 600 16px var(--ui); color: var(--navy); }
.rd-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.is-ok .rd-chip { color: #0E6B4E; }
.is-wait .rd-chip { color: var(--poppy); }
.rd-card ul { margin: 14px 0 0; padding: 0; list-style: none; }
.rd-card li { border-top: 1px solid rgba(11,21,48,.08); }
.rd-card li > a, .rd-card li > div { display: grid; gap: 4px; padding: 14px 4px; min-height: 44px; color: inherit; text-decoration: none; }
.rd-card li > a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.rd-card strong { font: 400 24px/1.15 var(--display); color: var(--navy); }
.rd-card .rd-note { font-size: 16px; line-height: 1.5; color: var(--navy-2); }

@media (prefers-reduced-motion: reduce) {
  .rd-btn, .rd-toc a, .rd-prose a, .rd-toc > summary::after { transition: none; }
}