/* The palette — the single home for these six values. They were declared
   identically in styles.css, najdi-triangle-band and arabic-fold; three copies
   of a colour is how a palette drifts one page at a time.

   Contrast is measured, not guessed, and the ratios below are why each token
   exists. --earth is LARGE text only (3.9:1 on --bg); --earth-deep is the same
   hue at AA for small text (4.5:1 on both grounds).

   The two full-bleed pieces (facing-north, date-harvest) are apps with their
   own ground and keep their own palettes deliberately — they are not plates. */
:root{
  --bg:#ede4d3;          /* gypsum cream — page ground */
  --ink:#2b2622;         /* basalt charcoal — main text */
  --earth:#b5551d;       /* mud-brick terracotta — large text only */
  --earth-deep:#984718;  /* same hue, AA for small text */
  --muted:#6f6456;       /* faded earth — secondary text */
  --panel:#e3d7c2;       /* a step off --bg: footer band, spec panels, chips */
  --footer-bg:var(--panel); /* the landing page's name for --panel */
  --hairline:#2b262218;  /* card and figure borders: ink at low alpha */
}

/* Dark. This is NOT a new palette — it is the one Bmar settled and
   contrast-verified for the itch storefront mock (itch-theme-dark-mock.sh),
   mapped onto the site's tokens. Ground and ink swap; the accent moves from
   terracotta to the ochre that survives a dark ground.

   Measured, not guessed, as everywhere else here. Against #2b2622 / #3a332d:
     --ink   #ede4d3   11.86 / 9.84   AA small
     --earth #EFA94A    7.44 / 6.18   AA small — so unlike the light theme,
                                      the accent needs no separate deep variant
     --muted #ab9a85    5.48 / 4.55   AA small

   --muted is the one value lifted a step off the mock's #a1907a. That reads
   4.84 on the ground but only 4.01 on a panel, and this site puts muted text
   at .8rem inside panels, where 4.5 is the bar. #ab9a85 is the nearest value
   that clears it on both grounds.

   The two full-bleed apps are untouched: they carry their own grounds and
   their own palettes, and inverting them is art direction, not a token swap.
   The Najdi band keeps its own baked ground, exactly as in the itch mock. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#2b2622;
    --ink:#ede4d3;
    --earth:#EFA94A;
    --earth-deep:#EFA94A;
    --muted:#ab9a85;
    --panel:#3a332d;
    --footer-bg:var(--panel);
    --hairline:#ede4d322;
  }
}

/* Shared across every page — landing and all three pieces. Layout stays
   per-page (styles.css is landing-page-only); this file holds only the atoms
   that are genuinely identical everywhere: the Arabic face, its assignment
   to [lang="ar"], and a base keyboard-focus ring for pages that don't define
   their own. */

/* Noto Kufi Arabic — SIL Open Font License 1.1. Self-hosted so the Arabic
   face is the same on every device instead of whatever the OS picks. */
@font-face{
  font-family:"Noto Kufi Arabic"; font-style:normal; font-weight:400;
  font-display:swap; src:url("fonts/NotoKufiArabic-Regular.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Noto Kufi Arabic"; font-style:normal; font-weight:600;
  font-display:swap; src:url("fonts/NotoKufiArabic-SemiBold.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
[lang="ar"] { font-family:"Noto Kufi Arabic", system-ui, sans-serif; }

/* ---- the reading plate --------------------------------------------------
   najdi-triangle-band, /rights and arabic-fold are one kind of page: a centred
   column of prose on the cream ground. They had three different shells — three
   .home treatments, three .plate widths, three body faces — and /rights set no
   ground and no face at all, so it rendered white in the browser's default
   serif on a cream-and-terracotta site.

   facing-north and date-harvest are NOT plates. They are full-bleed apps with
   their own grounds and their own palettes, and nothing here touches them:
   the shell is scoped to .plate-page, which only the plates carry. */

.plate-page{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui, sans-serif; line-height:1.65;
  /* Anchor for the absolutely-positioned .lang-toggle in the top corner. */
  position:relative;
  /* Sticky footer, same construction as the landing page. Without it the
     closing band sits wherever the text happens to end — on /404 that is the
     middle of the viewport with empty ground beneath it. dvh, not vh, for the
     same reason styles.css uses it: 100vh counts mobile browser chrome that
     is not there. */
  min-height:100dvh; display:flex; flex-direction:column;
}
/* .plate and .home become flex items, and flex blockifies them: without this
   the back link would stretch to the full column width and take clicks across
   the whole top of the page. */
.plate-page .home{ align-self:flex-start; }
/* Two of the three plates set this and /rights did not, so its column measured
   its padding on the outside of the 44rem and the other two on the inside. */
.plate-page *{ box-sizing:border-box; }

/* Arabic still comes from [lang="ar"] above, so the body stack does not need
   to name Noto Kufi — the pages that did were only ever getting system-ui for
   their Latin text anyway. */

/* The back link, in the landing page's showcase-label idiom — the site's one
   label treatment. In flow rather than fixed: the band page pinned it to the
   viewport, where on a narrow screen it sits on top of the text it scrolls
   over. */
.plate-page .home{
  display:inline-block; margin:1.25rem 0 0 1.25rem;
  font-size:.72rem; font-weight:600; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none; color:var(--muted);
}
.plate-page .home:hover,
.plate-page .home:focus-visible{ color:var(--earth-deep); }
/* PO1: a bare uppercase "3reeq" reads as a wordmark, not a way back. A leading
   arrow in the same micro-label register fixes that without a second word.
   RTL moves the glyph to the other side and points it the other way. */
.plate-page .home::before{ content:"\2190\00a0"; }
[dir="rtl"] .plate-page .home::before{ content:none; }
[dir="rtl"] .plate-page .home::after{ content:"\00a0\2192"; }

/* ---- the back link on the full-bleed pieces ---------------------------
   facing-north, date-harvest and any later canvas piece are not .plate-page,
   so their back link is by #id. It is site chrome, not part of the tool, and
   it always sits in the leading top corner — the same corner as the plates'
   .home, opposite #lang — so a visitor never has to hunt for the way out.
   Same arrow + micro-label register as the plates' .home, RTL flip included.
   A piece sets only #home's COLOUR (and, on a busy ground, a background) to
   suit its scene; the position and type come from here and are not
   overridden. z-index above every in-app panel so the way out is always
   reachable. */
#home{
  position:fixed; z-index:10;
  inset-inline-start:max(12px, env(safe-area-inset-left));
  top:max(12px, env(safe-area-inset-top));
  font:600 .72rem/1 system-ui, sans-serif; letter-spacing:.09em;
  text-transform:uppercase; text-decoration:none;
}
#home::before{ content:"\2190\00a0"; }
[dir="rtl"] #home{ letter-spacing:normal; }
[dir="rtl"] #home::before{ content:none; }
[dir="rtl"] #home::after{ content:"\00a0\2192"; }

/* ---- the language toggle on the full-bleed pieces -------------------
   Same spot as the plates' .lang-toggle: the trailing top corner,
   opposite #home (which holds the leading corner). Flips with the
   language. It is a <button>, not a link: it flips
   documentElement.lang/dir in JS and re-renders (the LOCKED canvas-piece
   mechanism — no /ar/ URL). A piece sets only #lang's colours; position
   and type come from here.

   The label is the whole word — "العربية" / "English", the same as the
   landing. Not letter-spaced or uppercased: the .home micro-label
   register does not survive Arabic script (tracking breaks cursive
   joining), and the plates' toggle is not uppercase either. */
#lang{
  position:fixed; z-index:10;
  inset-inline-end:max(12px, env(safe-area-inset-right));
  top:max(12px, env(safe-area-inset-top));
  font:600 .8rem/1 system-ui, sans-serif;
  padding:3px 8px; cursor:pointer;
  background:transparent; border:1px solid currentColor; border-radius:6px;
}

.plate-page .plate{ flex:1; width:100%; max-width:44rem; margin:0 auto; padding:1.5rem 1.25rem 4rem; }

/* The page title. This is the site's title identity — terracotta, semibold,
   fluid, letter-spaced — and it was set on the landing page and the band page
   only. /rights and arabic-fold each declared their own charcoal fixed-size h1,
   so their titles read as body text with a size bump rather than as a title.
   One definition, here.

   --earth is AA-large only (3.9:1). Every use of it is a title at clamp()
   sizes, which is what makes that legal. */
.plate-page h1{
  margin:0; font-weight:600;
  font-size:clamp(1.7rem, 5.5vw, 2.4rem);
  letter-spacing:.02em; line-height:1.25;
  color:var(--earth);
}

/* The Latin half of a bilingual title, under the Arabic: the site's label
   idiom, same as the showcase captions and the back link. */
.plate-page h1 .en{
  display:block; margin-top:.4rem;
  font-size:.5em; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}

/* The one muted line under a title. The band page called it .sub, the other
   two .lead; .sub is taken by unrelated elements inside both apps, so .lead
   wins and the band page's markup moves to it. */
.plate-page .lead{ margin:.75rem 0 0; color:var(--muted); font-size:.95rem; }

/* The in-column footer note. The band page and arabic-fold carried near
   identical definitions; /rights and /404 had none at all, so /rights simply
   stopped. */
.plate-page footer{
  margin-top:3rem; padding-top:1.2rem;
  border-top:1px solid var(--hairline);
  font-size:.8rem; color:var(--muted);
}
.plate-page footer a{ color:var(--earth-deep); }

/* The closing band. The Najdi triangle band is the site's signature element
   and it was on two of six pages — the landing footer, and the band page's
   own figure, where it is the subject. Every plate now closes on it.

   Full-bleed like the landing page's, so it reaches both edges instead of
   sitting inside the 44rem column: it is a sibling of .plate, not a child.
   No top margin — .plate already carries 4rem of bottom padding. Absolute
   path so it resolves from any depth, /404.html included. aria-hidden in the
   markup: it is decoration and says nothing a screen reader needs. */
.plate-page .band{
  width:100%; height:clamp(20px, 4vw, 44px);
  background-image:url("/najdi-band.svg");
  background-repeat:repeat-x;
  background-position:center;
  background-size:auto 100%;
}
.plate-page a{ color:var(--earth-deep); }
.plate-page code{ font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- language toggle --------------------------------------------------
   The landing and every prose page carry this (B3). ONE spot on every
   page: the top corner opposite the back-link / logo — the trailing
   (inline-end) corner, which flips with the language exactly as it does
   on the landing (top-right in English, top-left in Arabic). This
   replaces the mixed placement before it: footer on the prose pages,
   under the back-link on the canvas pieces.

   --earth-deep, not --muted: --muted is only 4.06:1 on this ground and
   this is small text, and it is a link regardless.

   Unscoped on purpose: the landing uses it and carries no .plate-page.
   facing-north and date-harvest do NOT use this class — they have their
   own #lang button, positioned to the same corner. */
.lang-toggle{
  position:absolute; z-index:10;
  top:.9rem; inset-inline-end:1.1rem;
  margin:0;
  font-size:.8rem;
}
.lang-toggle a{
  color:var(--earth-deep);
  text-decoration:none;
  letter-spacing:.04em;
}
.lang-toggle a:hover,
.lang-toggle a:focus-visible{
  text-decoration:underline;
  text-underline-offset:.2em;
}

/* Base ring; pages with their own --earth-deep-style accent override this. */
a:focus-visible, button:focus-visible {
  outline:2px solid var(--earth-deep, #984718); outline-offset:3px;
}