/* =========================================================================
   free palestine · فلسطين حرة — styles.css
   Hand-written, in the reference idiom (reference/styles.css transposed):
   paper + speckle, one warm-grey ink, sketch boxes with the wobbly radius,
   hand-drawn underline, slight rotations. Tokens from research/05 §2.1–2.3.
   RTL: html[dir=rtl] — Arabic stacks, mirrored tilt, flipped rotations,
   logical properties everywhere.
   Breakpoints: sm 40rem · md 48rem · lg 64rem
   ========================================================================= */

/* ---------------------------------------------------------------- 1. fonts */
@font-face { font-family: "Reenie Beanie"; src: url("fonts/ReenieBeanie.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/Caveat.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Patrick Hand"; src: url("fonts/PatrickHand.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aref Ruqaa"; src: url("fonts/ArefRuqaa.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Amiri"; src: url("fonts/Amiri.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mada"; src: url("fonts/Mada.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------- 2. tokens */
:root {
  --paper: #f6f2e9;
  --paper-2: #efe9dc;
  --card: #f8f4ec;
  --ink: #4b463f;
  --ink-soft: #68615c;   /* 5.1:1 on paper — matches the oklch value below */
  --pencil: #9a938a;
  --rule: #c9c2b4;
  --secondary: #eae4d6;
  --sage: #a9bfa1;
  --olive: #8c9a6b;
  --sand: #e6d7b8;
  --anemone: #d9a39a;
  --sky: #b9cfe0;

  --paper: oklch(0.968 0.011 84);
  --paper-2: oklch(0.93 0.014 84);
  --ink: oklch(0.33 0.012 60);
  --ink-soft: oklch(0.5 0.012 60);
  --pencil: oklch(0.62 0.012 60);
  --rule: oklch(0.8 0.012 84);
  --sage: oklch(0.77 0.04 140);
  --olive: oklch(0.64 0.06 120);
  --sand: oklch(0.87 0.04 85);

  --background: var(--paper);
  --foreground: var(--ink);
  --border: var(--pencil);
  --ring: var(--ink-soft);

  --font-hand: "Reenie Beanie", "Caveat", "Aref Ruqaa", cursive;
  --font-body: "Caveat", "Patrick Hand", "Amiri", cursive;
  --font-micro: "Patrick Hand", "Caveat", "Mada", sans-serif;
  --font-ar: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
  --font-ar-body: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
  --font-ar-ui: "Mada", "Amiri", "Noto Naskh Arabic", sans-serif;

  --text-sm: 0.875rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.625rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-8xl: 6rem;
  --text-9xl: 8rem;

  --paper-dot-a: rgba(75, 70, 63, 0.05);
  --paper-dot-b: rgba(75, 70, 63, 0.04);

  --rot: 1;               /* flips to -1 in RTL: every rotation mirrors */
  --underline-tilt: -0.6deg;
}

@supports (color: color-mix(in oklab, black, white)) {
  :root {
    --paper-dot-a: color-mix(in oklab, var(--ink) 5%, transparent);
    --paper-dot-b: color-mix(in oklab, var(--ink) 4%, transparent);
  }
}

/* ----------------------------------------------------------- 3. base/reset */
*, *::before, *::after { box-sizing: border-box; border: 0 solid var(--border); }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(var(--paper-dot-a) 1px, transparent 1px),
    radial-gradient(var(--paper-dot-b) 1px, transparent 1px);
  background-size: 7px 7px, 11px 11px;
  background-position: 0 0, 3px 4px;
}

h1, h2, h3, h4 { font-family: var(--font-hand); font-weight: 400; margin: 0; line-height: 1.15; }
p, figure, ul, ol, dl, dd, blockquote, fieldset { margin: 0; }
ul { padding: 0; list-style: none; }
fieldset { padding: 0; min-width: 0; }
legend { padding: 0; }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
em { font-style: italic; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
[hidden] { display: none !important; }
.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; }
.soft { color: var(--ink-soft); }
/* a Latin name that must not be broken mid-name inside an Arabic paragraph (the registered
   company on /ar/imprint/ read «FREE / PALESTINE MEDIA S.R.L.») — F5. Addresses stay free to wrap. */
.nowrap { white-space: nowrap; }
/* below ~22rem the 27-character company name is wider than the sketch box's inner width and the
   nowrap pushed it past the drawn border — an overflowing legal line is worse than a wrapped one,
   so the very narrowest phones get the wrap back */
@media (max-width: 22rem) { .nowrap { white-space: normal; } }
.skip { position: absolute; inset-inline-start: 0.5rem; top: -4rem; padding: 0.5rem 0.75rem; background: var(--paper); z-index: 10; }
.skip:focus { top: 0.5rem; }
bdi { unicode-bidi: isolate; }

/* --------------------------------------------------- 4. sketch utilities */
.sketch-box {
  border: 2px solid var(--pencil);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  position: relative;
}
.sketch-box-sm {
  border: 2px solid var(--pencil);
  border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px;
}
.sketch-underline { position: relative; display: inline-block; }
.sketch-underline::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  bottom: -0.15em;
  height: 2px;
  background: var(--pencil);
  border-radius: 50%;
  transform: rotate(var(--underline-tilt));
}
html[dir=rtl] .sketch-underline::after { --underline-tilt: 0.6deg; bottom: -0.05em; }
.sketch-underline--ar::after { transform: rotate(0.6deg); bottom: -0.05em; }
.paper-rule { height: 2px; background: rgba(75, 70, 63, 0.35); border-radius: 50%; }
@supports (color: color-mix(in oklab, black, white)) { .paper-rule { background: color-mix(in oklab, var(--ink) 35%, transparent); } }

.tag {
  display: inline-block;
  padding: 0.1em 0.7em;
  background: var(--sand);
  font-family: var(--font-micro);
  font-size: var(--text-base);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.tag--soft { background: var(--paper-2); color: var(--ink-soft); }

/* rotation budget: panels ±0.4–0.5°, paragraphs ±0.2–0.3°, quotes ±1°, cards ±0.35°; all flip in RTL */
.rot-a { transform: rotate(calc(0.3deg * var(--rot))); }
.rot-b { transform: rotate(calc(-0.3deg * var(--rot))); }
.rot-c { transform: rotate(calc(0.2deg * var(--rot))); }
.rot-p { transform: rotate(calc(0.4deg * var(--rot))); }
.rot-n { transform: rotate(calc(-0.5deg * var(--rot))); }
.card.rot-p, .cat.rot-p { transform: rotate(calc(0.35deg * var(--rot))); }
.card.rot-n, .cat.rot-n { transform: rotate(calc(-0.35deg * var(--rot))); }
html[dir=rtl] { --rot: -1; }

.icon { width: 1.25em; height: 1.25em; stroke: currentColor; }
.heart { color: var(--ink-soft); }
.link { position: relative; white-space: nowrap; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.1em; height: 2px; background: var(--rule); border-radius: 50%; transform: rotate(var(--underline-tilt)); }
.link:hover::after { background: var(--pencil); }
.url { font-family: var(--font-micro); font-size: var(--text-sm); overflow-wrap: anywhere; }

.btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-hand);
  font-size: var(--text-2xl);
  line-height: 1.3;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  transition: background-color 0.15s ease;
}
.btn:hover { background: var(--secondary); }
.btn--lg { padding: 0.7rem 1.4rem; font-size: var(--text-3xl); }
.btn__pair { white-space: nowrap; } /* separator + other-language word stay together; the button wraps before them, never inside */
@media (max-width: 480px) { .btn--lg .btn__pair { display: block; } .btn--lg .btn__sep { display: none; } } /* on a phone the big buttons stack the two languages, no dangling dot */
.btn__other { color: var(--ink-soft); font-size: 0.85em; }
html[dir=rtl] .btn__other { font-family: var(--font-hand); }

/* --------------------------------------------------------------- 5. shell */
.page { margin-inline: auto; min-height: 100vh; min-height: 100svh; width: 100%; max-width: 64rem; overflow-x: hidden; padding: 1.5rem 1rem; }

.nav { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.5rem 1rem; }
.nav__links { grid-column: 1 / -1; }
/* the header brand is a two-word name beside a two-word Arabic name: neither half may break
   internally, or the header becomes a 2×2 block reading «free / palestine» beside «فلسطين / حرة»
   and doubles in height. Below 26rem the pair is stepped down instead of being allowed to wrap,
   Measured after the step-down, the whole pair fits on one line down to 320 px in both locales,
   so nothing is hidden at any real phone width; below 19rem (304 px) the Arabic drops out of the visible
   mark as a last resort (it stays in the link's aria-label either way).
   Checked at 320 / 344 / 352 / 360 / 375 / 390 px in both locales — qa/FIX_LOG_rebrand.md F1. */
.nav__brand { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-hand); font-size: var(--text-4xl); line-height: 1.1; letter-spacing: -0.02em; min-width: 0; }
.nav__brand-latin, .nav__brand-ar { white-space: nowrap; }
.nav__brand-ar { font-family: var(--font-ar); font-size: 0.75em; color: var(--ink-soft); }
html[dir=rtl] .nav__brand-ar { font-family: var(--font-hand); }
@media (max-width: 26rem) { .nav__brand { font-size: var(--text-3xl); gap: 0.45rem; } }
@media (max-width: 19rem) { .nav__brand-ar { display: none; } }  /* 20rem would also match 320 px exactly, which fits fine */
.nav__links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 1.1rem; row-gap: 0.25rem; font-family: var(--font-hand); font-size: var(--text-2xl); line-height: 1.4; }
.nav__link { display: inline-flex; align-items: center; min-height: 2.5rem; position: relative; }
.nav__link:hover { color: var(--ink-soft); }
.nav__link.is-here::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.35rem; height: 2px; background: var(--pencil); border-radius: 50%; transform: rotate(var(--underline-tilt)); }
.nav__lang { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-ar); padding: 0.1rem 0.7rem 0; min-height: 2.5rem; font-size: var(--text-xl); justify-self: end; }
.nav__lang:hover { background: var(--secondary); }
html[dir=rtl] .nav__lang { font-family: var(--font-hand); font-size: var(--text-2xl); }

main { display: block; }
.page__title { margin-top: 2.5rem; font-size: var(--text-6xl); line-height: 1; width: fit-content; margin-inline: auto; }
.page__lead { margin-top: 1.25rem; text-align: center; font-size: var(--text-2xl); line-height: 1.4; color: var(--ink-soft); max-width: 40rem; margin-inline: auto; }
.crumbs { margin-top: 1.25rem; font-size: var(--text-lg); }
.section__title { margin-top: 3rem; margin-inline: auto; width: fit-content; font-size: var(--text-5xl); line-height: 1; }
.section__lead { margin-top: 1.25rem; margin-inline: auto; max-width: 36rem; }
.section__more { margin-top: 1.5rem; text-align: center; font-family: var(--font-hand); font-size: var(--text-2xl); }

/* ---------------------------------------------------------------- 6. hero */
.hero { margin-top: 2.5rem; display: grid; align-items: center; gap: 2rem; }
.hero__copy { text-align: center; min-width: 0; }
.hero__wordmark { display: flex; justify-content: center; }
.hero__wm { display: block; width: 100%; max-width: 20rem; height: auto; }
.hero__lines { margin-top: 1.5rem; }
.hero__line { font-family: var(--font-hand); font-size: var(--text-3xl); line-height: 1.3; text-wrap: balance; }
.hero__line + .hero__line { margin-top: 0.4rem; }
.hero__line--soft { color: var(--ink-soft); font-size: var(--text-2xl); }
.hero__cta { margin-top: 2rem; }
.hero__art { margin-inline: auto; width: 100%; max-width: 18rem; }
.drawing img, .mockup img { width: 100%; }

/* ---------------------------------------------------------- 7. why / quote */
.why { position: relative; margin-top: 3.5rem; }
.why__panel { margin-inline: auto; max-width: 48rem; transform: rotate(calc(-0.5deg * var(--rot))); padding: 2rem 1rem; }
.why__title { margin-inline: auto; width: fit-content; font-size: var(--text-4xl); line-height: 1.15; display: block; }
.why__body { margin-top: 1.75rem; margin-inline: auto; max-width: 36rem; font-size: var(--text-xl); line-height: 1.55; }
.why__body p:nth-child(4n+1) { transform: rotate(calc(0.3deg * var(--rot))); }
.why__body p:nth-child(4n+2) { transform: rotate(calc(-0.3deg * var(--rot))); }
.why__body p:nth-child(4n+3) { transform: rotate(calc(0.2deg * var(--rot))); }

.quote { margin-top: 2.5rem; display: flex; justify-content: center; }
.quote__box { transform: rotate(calc(-1deg * var(--rot))); font-family: var(--font-hand); font-size: var(--text-3xl); line-height: 1.3; max-width: 100%; }
.quote__box span { display: inline-block; padding: 0.5rem 1.25rem; }
.quote__box span::before { content: "«"; color: var(--ink-soft); margin-inline-end: 0.15em; }
.quote__box span::after { content: "»"; color: var(--ink-soft); margin-inline-start: 0.15em; }
html[dir=rtl] .quote__box { font-family: var(--font-ar); }

/* ---------------------------------------------------------------- 8. prose */
.prose { font-size: var(--text-xl); line-height: 1.55; }
.prose > * + * { margin-top: 1rem; }
.prose h3 { font-size: var(--text-3xl); margin-top: 1.75rem; line-height: 1.15; }
.prose h4 { font-size: var(--text-2xl); }
.prose ul { padding-inline-start: 1.4rem; list-style: none; }
.prose ul li { position: relative; }
.prose ul li::before { content: "—"; position: absolute; inset-inline-start: -1.4rem; color: var(--ink-soft); }
.prose ol { padding-inline-start: 1.6rem; }
.prose li + li { margin-top: 0.25rem; }
.prose a:not(.fn) { position: relative; }
.prose a:not(.fn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.05em; height: 2px; background: var(--rule); border-radius: 50%; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--font-micro); font-size: var(--text-base); }
.prose th, .prose td { text-align: start; padding: 0.3rem 0.5rem; border-bottom: 2px solid var(--rule); }
.prose--center { text-align: center; }
.prose--center ul { padding-inline-start: 0; }
.prose--center ul li::before { position: static; margin-inline-end: 0.4em; }
.table-wrap { overflow-x: auto; max-width: 100%; }

.fn {
  font-family: var(--font-micro);
  font-size: 0.7em;
  vertical-align: super;
  line-height: 1;
  padding-inline: 0.15em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  border-radius: 50%;
  display: inline-block;
  transform: rotate(calc(-4deg * var(--rot)));
}
.fn:hover { color: var(--ink); }

.box { margin-top: 2.5rem; padding: 1.5rem 1.1rem; }
.box--narrow { margin-inline: auto; max-width: 48rem; }
.box--q { margin-top: 1.5rem; }
@media (max-width: 40rem) { .box--narrow.rot-p { transform: rotate(calc(0.15deg * var(--rot))); } .box--narrow.rot-n { transform: rotate(calc(-0.15deg * var(--rot))); } } /* a tall box rotated 0.4° pushes its corners past a phone's edge */
.box__title { width: fit-content; font-size: var(--text-4xl); line-height: 1.15; margin-bottom: 1.25rem; }

.sources { margin-top: 3rem; margin-inline: auto; max-width: 48rem; }
.sources__title { font-size: var(--text-3xl); width: fit-content; }
.sources__list { margin-top: 0.75rem; padding-inline-start: 1.75rem; font-size: var(--text-base); line-height: 1.5; font-family: var(--font-micro); }
.sources__list li + li { margin-top: 0.35rem; }
.sources__list li::marker { color: var(--ink-soft); }
.sources__list a { overflow-wrap: anywhere; word-break: break-word; }
.sources__list .url { display: block; color: var(--ink-soft); font-size: var(--text-sm); }

/* --------------------------------------------------- 9. drawings: grid+cards */
.grid { margin-top: 2rem; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.card { padding: 1.25rem 1rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.card__art { display: block; width: 60%; }
.card__title { margin-top: 0.75rem; font-size: var(--text-3xl); line-height: 1.15; }
.card__word { font-family: var(--font-ar); font-size: var(--text-3xl); line-height: 1.5; margin-top: 0.1rem; }
.card__word--none { font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); }
.card__price { margin-top: 0.5rem; font-family: var(--font-hand); font-size: var(--text-2xl); }
.status { display: block; font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); }
.card__btn { margin-top: auto; }
.card__price { margin-bottom: 0.9rem; }

.catalogue { margin-top: 2.5rem; display: grid; gap: 2rem; }
.cat { padding: 1.5rem 1rem; display: grid; gap: 1rem; grid-template-columns: 1fr; justify-items: center; }
.cat__drawing { width: 60%; }
.cat__mockup { width: 55%; }
.cat__text { text-align: center; }
.cat__title { font-size: var(--text-4xl); line-height: 1.1; }
.cat__word { font-family: var(--font-ar); font-size: var(--text-4xl); line-height: 1.5; }
.cat__sub { color: var(--ink-soft); font-size: var(--text-xl); }
.cat__line { margin-top: 0.4rem; color: var(--ink-soft); font-family: var(--font-micro); font-size: var(--text-base); }
.cat__price { margin-top: 0.6rem; font-family: var(--font-hand); font-size: var(--text-3xl); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 0.9rem; }
.cat__text .btn { margin-top: 0.9rem; }
.cat__tally { margin-top: 0.75rem; font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); }
.tally { display: inline-flex; gap: 2px; align-items: flex-end; height: 1em; margin-inline-end: 0.5rem; vertical-align: -0.15em; }
.tally i { display: block; width: 2px; height: 1em; background: var(--ink); transform: rotate(4deg); }
.tally i.tally__five { width: 1.2em; height: 2px; margin-inline-start: -1.1em; margin-bottom: 0.45em; transform: rotate(-28deg); }

/* ----------------------------------------------------------- 10. product */
.product__head { margin-top: 1rem; text-align: center; }
.product__title { font-size: var(--text-6xl); line-height: 1; }
.product__word { margin-top: 0.25rem; font-family: var(--font-ar); font-size: var(--text-4xl); line-height: 1.5; }
.product__sub { margin-top: 0.1rem; color: var(--ink-soft); font-size: var(--text-2xl); font-family: var(--font-hand); }
.product__top { margin-top: 1.25rem; display: grid; gap: 1.5rem; align-items: start; grid-template-areas: "drawing" "buy" "side"; }
.product__drawing { grid-area: drawing; }
.product__side { grid-area: side; }
.product__buy { grid-area: buy; }
.product__drawing { text-align: center; }
.product__drawing figcaption, .product__mockup figcaption { margin-top: 0.35rem; font-family: var(--font-micro); font-size: var(--text-base); text-align: center; }
.product__side { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.product__mockup { width: 11rem; max-width: 46%; }
.product__drawing .drawing { margin-inline: auto; max-width: 24rem; }
.product__buy { margin-inline: auto; width: 100%; max-width: 30rem; padding: 1.5rem 1.25rem; text-align: center; }
.product__price { font-family: var(--font-hand); font-size: var(--text-4xl); line-height: 1.2; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.4rem 0.9rem; }
.product__pricenote { margin-top: 0.5rem; font-size: var(--text-base); }
.product__status { margin-top: 0.75rem; font-family: var(--font-micro); font-size: var(--text-base); }
.product__buy .btn--lg { margin-top: 0.75rem; }
.product__nopay { margin-top: 0.75rem; font-size: var(--text-base); max-width: 24rem; margin-inline: auto; }
.product__nav { margin-top: 3rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; font-family: var(--font-hand); font-size: var(--text-2xl); }
.written { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; font-size: var(--text-xl); align-items: baseline; }
.written dt { color: var(--ink-soft); font-family: var(--font-micro); font-size: var(--text-base); }
.written__ar { font-family: var(--font-ar); font-size: var(--text-4xl); line-height: 1.5; }
html[dir=ltr] .written__ar { text-align: left; }   /* the Arabic value stays beside its label, not at the far edge */
.written dd bdi { overflow-wrap: anywhere; }
.tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* sizes: hand-circled letters */
.sizes { margin-top: 1rem; }
.sizes legend { font-family: var(--font-hand); font-size: var(--text-2xl); margin-inline: auto; text-align: center; }
.sizes__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.size { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; cursor: pointer; font-family: var(--font-micro); font-size: var(--text-xl); }
.size__letter { position: relative; z-index: 1; }
.size__ring { position: absolute; left: 0; top: 0; width: 3.25rem; height: 3.25rem; opacity: 0; transform: rotate(calc(-8deg * var(--rot))) scale(1.1); transition: opacity 0.15s ease; color: var(--ink); pointer-events: none; }
.size:hover .size__ring { opacity: 0.35; }
.size input:checked ~ .size__ring { opacity: 1; }
.size input:focus-visible ~ .size__letter { outline: 2px solid var(--ring); outline-offset: 6px; border-radius: 50%; }
.sizes__hint { margin-top: 0.5rem; text-align: center; font-family: var(--font-micro); font-size: var(--text-base); }

/* ------------------------------------------------------------ 11. years */
.years-hero { margin-top: 2.5rem; display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.years-hero__intro { margin-top: 0; }
@media (max-width: 40rem) { .years-hero .years__spine { order: -1; } } /* on a phone the line comes first, in the first screen */
.years__spine { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding-block: 0.5rem; margin: 0; --pin-step: 2.9rem; --pin-img: 2.4rem; }
.years__scale { position: relative; width: calc(3rem + var(--tl-cols) * var(--pin-step)); height: var(--tl-h); margin-block: 2rem 2.5rem; margin-inline-start: 3.5rem; }
.years__line { position: absolute; inset-inline-start: 0; top: 0; width: 2px; height: var(--tl-h); background: var(--ink); border-radius: 50%; transform-origin: top; transform: scaleY(1) rotate(calc(0.4deg * var(--rot))); }
.years__spine.js .years__line { transform: scaleY(0) rotate(calc(0.4deg * var(--rot))); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.years__spine.js.is-drawn .years__line { transform: scaleY(1) rotate(calc(0.4deg * var(--rot))); }
.years__tick { position: absolute; inset-inline-start: -0.45rem; width: 1rem; height: 2px; margin-top: -1px; background: var(--ink-soft); border-radius: 50%; display: block; transform: rotate(calc(-3deg * var(--rot))); }
.years__tick.is-active { background: var(--ink); height: 3px; width: 1.4rem; }
.years__tick--decade { inset-inline-start: -1.1rem; width: 2.2rem; background: var(--pencil); }
.years__tick--decade b { position: absolute; inset-inline-end: calc(100% + 0.4rem); top: -0.65em; font-weight: 400; font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); line-height: 1; }
.years__spine.js .years__tick, .years__spine.js .years__pin { opacity: 0; transition: opacity 0.4s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.years__spine.js.is-drawn .years__tick, .years__spine.js.is-drawn .years__pin { opacity: 1; }
.years__end { position: absolute; inset-inline-start: -0.6rem; font-family: var(--font-hand); font-size: var(--text-2xl); line-height: 1; color: var(--ink); }
.years__end--top { top: -1.25em; inset-inline-start: auto; inset-inline-end: calc(100% + 0.6rem); }
.years__end--bottom { top: var(--tl-h); margin-top: -0.1em; inset-inline-start: auto; inset-inline-end: calc(100% + 0.6rem); }
.years__pin { position: absolute; inset-inline-start: calc(1.2rem + var(--col) * var(--pin-step)); margin-top: calc(var(--pin-img) / -2); display: flex; align-items: center; gap: 0.2rem; white-space: nowrap; }
.years__pin::before { content: ""; position: absolute; z-index: 0; inset-inline-end: 100%; top: 50%; width: calc(0.6rem + var(--col) * var(--pin-step)); height: 2px; background: var(--rule); }
.years__pin img { position: relative; z-index: 1; width: var(--pin-img); height: var(--pin-img); object-fit: contain; padding: 2px; border: 2px solid var(--pencil); border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px; background: var(--paper); flex-shrink: 0; transform: rotate(calc(-2deg * var(--rot))); }
.years__pin b { display: none; font-weight: 400; font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); line-height: 1; }
.years__pin:hover img, .years__pin:focus-visible img { border-color: var(--ink); }
.years__legend { font-family: var(--font-micro); font-size: var(--text-base); text-align: center; }
.years__rm { display: none; }
@media (prefers-reduced-motion: reduce) { .years__rm { display: inline; } }

.years { margin-top: 2rem; }
.events { padding: 0; list-style: none; min-width: 0; margin-top: 1rem; margin-inline: auto; max-width: 48rem; }
.events__decade { margin-top: 2rem; font-family: var(--font-hand); font-size: var(--text-4xl); color: var(--pencil); line-height: 1; }
.event { position: relative; min-width: 0; margin-top: 1.5rem; padding-inline-start: 1.25rem; border-inline-start: 2px solid var(--rule); scroll-margin-top: 1rem; }
.event[data-pinned] { border-inline-start-color: var(--pencil); }
.event.is-active { border-inline-start-color: var(--ink); }
.event__date { font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); }
.event__title { font-size: var(--text-3xl); line-height: 1.15; margin-top: 0.15rem; }
.event__text { margin-top: 0.4rem; font-size: var(--text-lg); line-height: 1.5; }
.event__range { margin-top: 0.5rem; font-size: var(--text-base); color: var(--ink-soft); }
.event__src { margin-top: 0.4rem; font-family: var(--font-micro); font-size: var(--text-base); overflow-wrap: anywhere; }
.event__src a { border-bottom: 1px solid var(--rule); }
.event__pins { margin-top: 0.6rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.event__pin { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.6rem 0.15rem 0.2rem; border: 2px solid var(--pencil); border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px; font-family: var(--font-hand); font-size: var(--text-xl); background: var(--card); }
.event__pin img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

/* ----------------------------------------------------- 11b. how to read */
.letter { display: flow-root; clear: both; }
.letter__glyph { float: inline-start; height: 6rem; margin-inline-end: 1.25rem; margin-block: 0.2rem 0.75rem; color: var(--ink); }
.letter__glyph svg { height: 100%; width: auto; display: block; }
.letter__name { display: block; padding-top: 1.5rem; }
.prose h3.letter { margin-top: 2.25rem; }
.letters-row { display: flex; justify-content: center; align-items: flex-end; gap: 2rem; margin: 0.5rem 0 1.5rem; direction: rtl; color: var(--ink); }
.letters-row__glyph { display: block; height: 7rem; }
.letters-row__glyph svg { height: 100%; width: auto; display: block; }

/* ---------------------------------------------------------- 12. ledger */
.ledger { margin-top: 2.5rem; margin-inline: auto; max-width: 52rem; }
.ledger__wrap { border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; padding: 0.25rem 0.5rem; }
.ledger__table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-micro); font-size: var(--text-base); }
.ledger__table th, .ledger__table td { padding: 0.6rem 0.75rem; text-align: start; border-bottom: 2px solid var(--rule); white-space: nowrap; }
.ledger__table th { font-family: var(--font-hand); font-size: var(--text-2xl); font-weight: 400; color: var(--ink); white-space: normal; line-height: 1.1; vertical-align: bottom; }
.ledger__table thead th { border-bottom-color: var(--pencil); }
.ledger__table tbody tr:last-child td { border-bottom: 0; }
.ledger__empty { text-align: center; color: var(--ink-soft); padding: 1.5rem 1rem; font-family: var(--font-body); font-size: var(--text-xl); }
.ledger__table tfoot td, .ledger__table tfoot th { border-top: 2px solid var(--pencil); border-bottom: 0; }
@media (max-width: 40rem) { .ledger__table th { font-size: var(--text-lg); padding: 0.45rem 0.35rem; } .ledger__table td { padding: 0.45rem 0.4rem; } } /* six headers fit a phone; real rows still scroll inside the wrapper */

/* --------------------------------------------------------- 13. reserve */
.form { margin-top: 2rem; margin-inline: auto; max-width: 34rem; padding: 1.75rem 1.25rem; background: var(--card); }
.form__intro { margin-bottom: 1.25rem; }
.field { margin-top: 1.25rem; }
.field label, .field legend { display: block; font-family: var(--font-hand); font-size: var(--text-2xl); line-height: 1.2; margin-bottom: 0.3rem; }
.field input:not([type=checkbox]):not([type=radio]), .field select, .field textarea {
  display: block; width: 100%; padding: 0.55rem 0.8rem; background: var(--paper);
  border: 2px solid var(--pencil); border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px;
  font-family: var(--font-micro); font-size: var(--text-lg); color: var(--ink);
}
.field select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b463f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9.5 Q12 16 19 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.1rem; }
html[dir=rtl] .field select { background-position: left 0.75rem center; padding-inline-end: 0.8rem; padding-inline-start: 2.2rem; }
.field textarea { resize: vertical; min-height: 4.5rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field--check label, .field--addons label { display: flex; gap: 0.6rem; align-items: flex-start; font-family: var(--font-body); font-size: var(--text-base); line-height: 1.45; cursor: pointer; }
.field--addons label + label { margin-top: 0.4rem; }
html[dir=rtl] .field--check label.check, html[dir=rtl] .field--addons label.check { font-family: var(--font-ar-body); font-size: 1.1rem; } /* body face, outranks the .field label display face */
/* hand-drawn checkbox: a small sketch box, the tick from the icon sprite */
.check__box { position: relative; flex-shrink: 0; width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; border: 2px solid var(--pencil); border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px; background: var(--paper); transform: rotate(calc(-3deg * var(--rot))); }
.check__tick { position: absolute; inset: -0.35rem -0.3rem -0.1rem -0.2rem; width: auto; height: auto; opacity: 0; color: var(--ink); stroke-width: 3; transition: opacity 0.12s ease; }
.check input:checked ~ .check__box .check__tick { opacity: 1; }
.check input:focus-visible ~ .check__box { outline: 2px solid var(--ring); outline-offset: 3px; }
.check:hover .check__box { border-color: var(--ink); }
.field__err { margin-top: 0.3rem; font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink); }
.field__err::before { content: "↑ "; }
html[dir=rtl] .field__err::before { content: "↑ "; }
.field.is-invalid input:not(.sr-only), .field.is-invalid select, .field.is-invalid .sizes__row, .field.is-invalid .check__box { outline: 3px double var(--ink-soft); outline-offset: 2px; border-radius: 120px 8px 110px 10px / 10px 110px 8px 120px; } /* pencil-grey, never red (CONCEPT §5) */
.hp { position: absolute; inset-inline-start: -200vw; width: 1px; height: 1px; overflow: hidden; }
.form__nopay { margin-top: 1.25rem; font-size: var(--text-base); }
.form__actions { margin-top: 1rem; text-align: center; }
.form__mailto { margin-top: 0.75rem; text-align: center; font-size: var(--text-base); }
.form__err { margin-top: 0.75rem; text-align: center; }
.form.is-busy .btn { opacity: 0.6; pointer-events: none; }
.form .sizes legend { margin-inline: 0; text-align: start; }
.form .sizes__row { justify-content: flex-start; }
html[dir=rtl] .form .sizes__row { justify-content: flex-end; } /* the row is dir=ltr (S→XXL) but sits at the form's start edge */

/* ------------------------------------------------------ 14. thanks / 404 */
.thanks { margin-top: 3rem; text-align: center; }
.thanks__art { margin: 0 auto 1.5rem; max-width: 16rem; }
.thanks__line { font-size: var(--text-6xl); line-height: 1.05; }
.thanks__ar { margin-top: 1rem; font-family: var(--font-ar); font-size: var(--text-4xl); line-height: 1.5; color: var(--ink-soft); }
html[dir=rtl] .thanks__ar { font-family: var(--font-hand); }
.thanks .prose { margin-top: 1.5rem; margin-inline: auto; max-width: 30rem; }
.thanks__links { margin-top: 2rem; font-family: var(--font-hand); font-size: var(--text-2xl); }

/* ---------------------------------------------------------- 15. note */
.note { margin-top: 3rem; }
.note__panel { margin-inline: auto; max-width: 42rem; padding: 1.5rem 1.25rem; }
.note__title { font-size: var(--text-4xl); line-height: 1.15; margin-bottom: 1rem; }
.note__panel .btn { margin-top: 1rem; }

/* --------------------------------------------------------- 16. page art */
.page__art { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.page__art-item { width: 14rem; text-align: center; font-family: var(--font-micro); font-size: var(--text-base); }

/* ------------------------------------------------------------ 17. footer */
.rule { margin-top: 3rem; }
.footer { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; padding-block: 2rem; text-align: center; font-size: var(--text-lg); line-height: 1.5; }
/* the footer mark is meant to be read, not just recognised: at 9rem the Arabic fell to ~11 px
   and the year to ~7 px (F6) */
.footer__wordmark { display: block; width: 11rem; height: auto; }
.footer__col { display: flex; flex-direction: column; gap: 0.15rem; }
.footer__since { font-family: var(--font-hand); font-size: var(--text-2xl); }
.footer__nocookies { font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1rem; row-gap: 0.25rem; font-family: var(--font-hand); font-size: var(--text-xl); }
.footer__link { display: inline-flex; align-items: center; min-height: 2.5rem; }
.footer__link:hover { color: var(--ink-soft); }
.footer__copy { font-family: var(--font-micro); font-size: var(--text-base); color: var(--ink-soft); max-width: 36rem; }

/* ----------------------------------------------------------- 18. RTL */
html[dir=rtl] body { font-family: var(--font-ar-body); font-size: 1.2rem; line-height: 1.8; }
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3, html[dir=rtl] h4,
html[dir=rtl] .btn, html[dir=rtl] .nav__links, html[dir=rtl] .hero__line, html[dir=rtl] .section__more,
html[dir=rtl] .card__price, html[dir=rtl] .cat__price, html[dir=rtl] .product__price, html[dir=rtl] .footer__since,
html[dir=rtl] .footer__links, html[dir=rtl] .product__nav, html[dir=rtl] .thanks__links, html[dir=rtl] .events__decade,
html[dir=rtl] .field label, html[dir=rtl] .field legend, html[dir=rtl] .ledger__table th, html[dir=rtl] .event__pin,
html[dir=rtl] .years__end, html[dir=rtl] .product__sub { font-family: var(--font-ar); }
html[dir=rtl] h1, html[dir=rtl] h2, html[dir=rtl] h3 { line-height: 1.5; }
html[dir=rtl] .tag, html[dir=rtl] .status, html[dir=rtl] .cat__line, html[dir=rtl] .event__date, html[dir=rtl] .event__src,
html[dir=rtl] .sources__list, html[dir=rtl] .footer__copy, html[dir=rtl] .footer__nocookies, html[dir=rtl] .written dt,
html[dir=rtl] .field__err, html[dir=rtl] .cat__tally, html[dir=rtl] .product__status, html[dir=rtl] .years__legend,
html[dir=rtl] .field input, html[dir=rtl] .field select, html[dir=rtl] .field textarea, html[dir=rtl] .ledger__table,
html[dir=rtl] figcaption, html[dir=rtl] .page__art-item, html[dir=rtl] .sizes__hint { font-family: var(--font-ar-ui); }
html[dir=rtl] .prose { font-size: 1.25rem; line-height: 1.8; }
html[dir=rtl] .why__body { font-size: 1.3rem; line-height: 1.8; }
html[dir=rtl] .page__lead { line-height: 1.7; }
html[dir=rtl] .hero__line { line-height: 1.6; }
html[dir=rtl] .fn { transform: rotate(4deg); }
html[dir=rtl] .size, html[dir=rtl] .field label.size { font-family: var(--font-micro); } /* outranks the .field label Arabic face */
html[dir=rtl] .written { grid-template-columns: max-content 1fr; }
html[dir=rtl] .card__word, html[dir=rtl] .cat__word, html[dir=rtl] .product__word, html[dir=rtl] .written__ar { font-family: var(--font-ar); }

/* ------------------------------------------------- 19. very small phones */
@media (max-width: 22.5rem) {
  .hero__wordmark, .page__title, .product__title, .thanks__line { font-size: 3rem; }
  .hero__line { font-size: 1.625rem; }
  .nav__links { column-gap: 0.75rem; font-size: var(--text-xl); }
}

/* ----------------------------------------------------------- 20. sm 40rem */
@media (min-width: 40rem) {
  .page { padding: 2rem 1.5rem; }
  .nav { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .nav__links { grid-column: auto; justify-content: flex-end; column-gap: 1.5rem; }
  .nav__lang { order: 3; }
  .hero { margin-top: 3.5rem; }
  .hero__wm { max-width: 24rem; }
  .hero__line { font-size: var(--text-4xl); }
  .hero__line--soft { font-size: var(--text-3xl); }
  .hero__cta { margin-top: 2.5rem; }
  .hero__art { max-width: 24rem; }
  .why { margin-top: 5rem; }
  .why__panel { padding: 2.5rem; }
  .why__title { font-size: var(--text-5xl); }
  .why__body { font-size: var(--text-2xl); }
  .quote__box { font-size: var(--text-4xl); }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat { grid-template-columns: 3fr 2fr; grid-template-rows: auto auto; padding: 2rem 1.5rem; column-gap: 1.5rem; }
  .cat__drawing { grid-row: 1 / 3; width: 100%; max-width: 22rem; }
  .cat__mockup { width: 100%; max-width: 13rem; }
  .cat__text { grid-column: 2; }
  .box { padding: 2rem 2rem; }
  .form { padding: 2.25rem 2rem; }
  .product__top { grid-template-columns: 1fr 1fr; grid-template-areas: "drawing side" "drawing buy"; column-gap: 2rem; }
  .product__side { justify-content: flex-start; }
  .footer { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; text-align: start; }
  .footer__links { justify-content: flex-start; max-width: 22rem; }
  .footer__copy { width: 100%; text-align: center; }
  .years-hero { grid-template-columns: minmax(0, 1fr) auto; gap: 2.5rem; }
  .years__spine { --pin-step: 4rem; --pin-img: 2.75rem; }
  .years__scale { margin-inline-start: 4rem; }
  .years__pin b { display: block; }
  .product__mockup { width: 13rem; max-width: 48%; }
  .letter__glyph { height: 7rem; }
  .page__title { font-size: var(--text-8xl); }
}

/* ----------------------------------------------------------- 21. md 48rem */
@media (min-width: 48rem) {
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__copy { text-align: start; }
  .hero__wordmark { justify-content: flex-start; }
  .product__top { grid-template-columns: 5fr 4fr; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .years-hero { gap: 3rem; }
}

/* ----------------------------------------------------------- 22. lg 64rem */
@media (min-width: 64rem) {
  .hero__wm { max-width: 26rem; }
  .years__spine { --pin-step: 4.8rem; --pin-img: 3.5rem; }
  .letter__glyph { height: 7.5rem; }
}

@media print {
  body { background: #fff; }
  .nav, .footer, .btn, .form { display: none; }
}