/* ==========================================================================
   GulfArabic.com — lesson stylesheet v2
   Palette and component language adapted from the Waypoint reference.
   Ornament is al-Sadu (Bedouin weaving of Kuwait and the UAE), the khatim
   (eight-pointed star), the girih field, and the areesh palm-frond weave of
   traditional Gulf houses. All inline SVG: ~4.4 KB, zero extra requests.
   ========================================================================== */

/* ==========================================================================
   SELF-HOSTED FONTS
   Served from /fonts, so no connection to fonts.googleapis.com or
   fonts.gstatic.com is needed before text can be styled.

   Only the weights the stylesheet actually asks for are declared:
     Fraunces      500, 600, 500 italic     (headings, wordmark, pull quotes)
     IBM Plex Sans 400, 500, 600            (body, buttons, small labels)
     Noto Naskh    400                      (Arabic)

   The other files in the download are not referenced and should not be
   uploaded — see the note at the end of this block.

   font-display:swap means text paints immediately in the fallback face and
   swaps when the webfont lands, rather than sitting invisible.
   ========================================================================== */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/fraunces-v38-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/fraunces-v38-latin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;
  src:url('../fonts/fraunces-v38-latin-500italic.woff2') format('woff2');
}

@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ibm-plex-sans-v23-latin-500.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/ibm-plex-sans-v23-latin-600.woff2') format('woff2');
}

/* The Arabic face is 66 KB — the single heaviest font on the site. The
   unicode-range confines it to Arabic characters, so a page with no Arabic
   on it (p11 and p112, the pronunciation lessons) never downloads it at all. */
@font-face{
  font-family:'Noto Naskh Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/noto-naskh-arabic-v44-arabic_latin-regular.woff2') format('woff2');
  unicode-range:U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1,
                U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
                U+FE70-FEFF;
}

/* Downloaded but deliberately NOT declared, and not to be uploaded:
     ibm-plex-mono-*            (3 files) — Plex Mono was removed from the
                                design; --font-label uses Plex Sans now
     fraunces-v38-latin-regular — nothing is set in Fraunces 400
     fraunces-v38-latin-600italic — nothing is set in Fraunces 600 italic
     noto-naskh-arabic-*-700    — .nsh is pinned to 400
   That is 6 files and roughly 153 KB not shipped. */

:root{
  --paper:#EDE7DA;
  --paper-2:#E3DBC7;
  --surface:#F5F1E6;
  --ink:#1F2A22;
  --ink-soft:#52604F;
  --ink-faint:#565F54;    /* passes on paper, cards and the header/footer tone */
  --trail:#C1652F;        /* ornament, fills, markers — never small text */
  --trail-btn:#B35E2C;    /* button fill: white on it clears 4.6:1        */
  --trail-text:#934D24;   /* terracotta for TEXT: passes on paper, cards AND the header/footer tone */
  --trail-dim:#8F4A22;
  --moss:#4C6B54;         /* large text and ornament only */
  --moss-dark:#3D5844;    /* passes on every background */
  --gold:#B8923F;         /* ornament only */
  --gold-text:#7D632B;    /* 4.62:1 */
  --line:#CBC1A6;
  --rule-strong:#A99B76;  /* the header separator */
  --card-shadow:0 20px 40px -18px rgba(31,42,34,.35);
  --radius:14px;

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', system-ui, sans-serif;
  /* Small-label face: eyebrows, breadcrumbs, reference numbers, badges.
     This was IBM Plex Mono, a fourth webfont costing ~29 KB to serve about
     forty short labels. Plex Sans is already loaded for body text and does
     the job with a little extra letter-spacing, which those rules already
     set. Kept as its own token so the labels can be changed independently
     of body copy later. */
  --font-label:'IBM Plex Sans', system-ui, sans-serif;
  --font-arabic:'Noto Naskh Arabic', 'Amiri', 'Geeza Pro', serif;

  --orn-rub:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23C1652F%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22miter%22%3E%3Cpolygon%20points%3D%2219.35%2C19.35%204.65%2C19.35%204.65%2C4.65%2019.35%2C4.65%22%2F%3E%3Cpolygon%20points%3D%2222.40%2C12.00%2012.00%2C22.40%201.60%2C12.00%2012.00%2C1.60%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2212.0%22%20cy%3D%2212.0%22%20r%3D%222.2%22%20fill%3D%22%23C1652F%22%2F%3E%3C%2Fsvg%3E");
  --orn-rub-solid:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23C1652F%22%20fill-rule%3D%22evenodd%22%20d%3D%22M%2019.50%2C19.50%20L%204.50%2C19.50%20L%204.50%2C4.50%20L%2019.50%2C4.50%20Z%20M%2022.60%2C12.00%20L%2012.00%2C22.60%20L%201.40%2C12.00%20L%2012.00%2C1.40%20Z%22%2F%3E%3Ccircle%20cx%3D%2212.0%22%20cy%3D%2212.0%22%20r%3D%222.6%22%20fill%3D%22%23C1652F%22%2F%3E%3C%2Fsvg%3E");
  --orn-rub-solid-gold:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23B8923F%22%20fill-rule%3D%22evenodd%22%20d%3D%22M%2019.50%2C19.50%20L%204.50%2C19.50%20L%204.50%2C4.50%20L%2019.50%2C4.50%20Z%20M%2022.60%2C12.00%20L%2012.00%2C22.60%20L%201.40%2C12.00%20L%2012.00%2C1.40%20Z%22%2F%3E%3Ccircle%20cx%3D%2212.0%22%20cy%3D%2212.0%22%20r%3D%222.6%22%20fill%3D%22%23B8923F%22%2F%3E%3C%2Fsvg%3E");
  --orn-padlock:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M4.6%207.2V5.1a3.4%203.4%200%20016.8%200v2.1%22%20fill%3D%22none%22%20stroke%3D%22%2352604F%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3Crect%20x%3D%222.4%22%20y%3D%227.2%22%20width%3D%2211.2%22%20height%3D%227.4%22%20rx%3D%221.6%22%20fill%3D%22%2352604F%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2210.2%22%20r%3D%221.3%22%20fill%3D%22%23EDE7DA%22%2F%3E%3Crect%20x%3D%227.3%22%20y%3D%2210.2%22%20width%3D%221.4%22%20height%3D%222.6%22%20rx%3D%22.7%22%20fill%3D%22%23EDE7DA%22%2F%3E%3C%2Fsvg%3E");
  --orn-girih:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B8923F%22%20stroke-width%3D%221%22%3E%3Cpolygon%20points%3D%2232.00%2C15.00%2034.69%2C25.49%2044.02%2C19.98%2038.51%2C29.31%2049.00%2C32.00%2038.51%2C34.69%2044.02%2C44.02%2034.69%2C38.51%2032.00%2C49.00%2029.31%2C38.51%2019.98%2C44.02%2025.49%2C34.69%2015.00%2C32.00%2025.49%2C29.31%2019.98%2C19.98%2029.31%2C25.49%22%2F%3E%3Cpolygon%20points%3D%220.00%2C-13.00%202.06%2C-4.97%209.19%2C-9.19%204.97%2C-2.06%2013.00%2C0.00%204.97%2C2.06%209.19%2C9.19%202.06%2C4.97%200.00%2C13.00%20-2.06%2C4.97%20-9.19%2C9.19%20-4.97%2C2.06%20-13.00%2C0.00%20-4.97%2C-2.06%20-9.19%2C-9.19%20-2.06%2C-4.97%22%2F%3E%3Cpolygon%20points%3D%2264.00%2C-13.00%2066.06%2C-4.97%2073.19%2C-9.19%2068.97%2C-2.06%2077.00%2C0.00%2068.97%2C2.06%2073.19%2C9.19%2066.06%2C4.97%2064.00%2C13.00%2061.94%2C4.97%2054.81%2C9.19%2059.03%2C2.06%2051.00%2C0.00%2059.03%2C-2.06%2054.81%2C-9.19%2061.94%2C-4.97%22%2F%3E%3Cpolygon%20points%3D%220.00%2C51.00%202.06%2C59.03%209.19%2C54.81%204.97%2C61.94%2013.00%2C64.00%204.97%2C66.06%209.19%2C73.19%202.06%2C68.97%200.00%2C77.00%20-2.06%2C68.97%20-9.19%2C73.19%20-4.97%2C66.06%20-13.00%2C64.00%20-4.97%2C61.94%20-9.19%2C54.81%20-2.06%2C59.03%22%2F%3E%3Cpolygon%20points%3D%2264.00%2C51.00%2066.06%2C59.03%2073.19%2C54.81%2068.97%2C61.94%2077.00%2C64.00%2068.97%2C66.06%2073.19%2C73.19%2066.06%2C68.97%2064.00%2C77.00%2061.94%2C68.97%2054.81%2C73.19%2059.03%2C66.06%2051.00%2C64.00%2059.03%2C61.94%2054.81%2C54.81%2061.94%2C59.03%22%2F%3E%3Cpath%20d%3D%22M32.0%200%20L32.0%209%20M0%2032.0%20L9%2032.0%20M64%2032.0%20L55%2032.0%20M32.0%2064%20L32.0%2055%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --orn-areesh:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23B8923F%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22square%22%3E%3Cpath%20d%3D%22M0%206%20H10%20M14%206%20H24%20M0%2018%20H10%20M14%2018%20H24%22%2F%3E%3Cpath%20d%3D%22M6%200%20V10%20M6%2014%20V24%20M18%200%20V10%20M18%2014%20V24%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

  /* --- the three-colour reading system ---------------------------------
     English prose  -> --ink       (dark green-black)
     Arabic script  -> --arabic    (deep petrol)
     Transliteration-> --translit  (terracotta)
     All three clear 4.5:1 on paper, on cards, and on note backgrounds. */
  --arabic:#1D4E5C;
  --translit:#934D24;

  /* --- the action colour -------------------------------------------------
     Deliberately OUTSIDE the sand palette. Everything on the page that is
     content is warm (sand, terracotta, gold, moss); everything that is an
     action a reader can take is this cool teal. That single split is what
     makes the CTAs findable — they are the only cool thing on the page.
     Teal is near-complementary to the terracotta, so it reads as chosen
     rather than borrowed, and it echoes --arabic without colliding with it.

       --cta          fill on light backgrounds. White on it clears 5.9:1
       --cta-text     the same hue as TEXT on paper: 6.3:1
       --cta-bright   fill on the dark paywall and the black footer, where
                      the dark teal would not separate from its background.
                      Takes --ink text (4.9:1), not white.                  */
  --cta:#0C6F7C;
  --cta-hover:#095A65;
  --cta-text:#0A5B66;
  --cta-bright:#17A2B3;
  --cta-bright-hover:#3BB9C8;

  /* --- the inverted footer ----------------------------------------------
     Black ground, warm-paper text. The tones are the page's own palette
     inverted rather than a second set of greys, so the footer still reads
     as the same site. Lowest ratio here is 9.3:1.                          */
  --footer-bg:#000000;
  --footer-ink:#EDE7DA;
  --footer-ink-soft:#B3AC9C;
  --footer-line:rgba(237,231,218,.16);
  --footer-link-hover:#E7A470;

  /* The reading column. 38rem was right for pure prose but cramped the
     vocabulary cards, which carry Arabic, transliteration and a gloss on one
     line and wrapped constantly with ~290px of the lesson column unused. */
  --measure:42rem;
  --header-h:5.4rem;   /* wordmark + padding + lattice */
}

*,*::before,*::after{box-sizing:border-box;}
html{font-size:100%;-webkit-text-size-adjust:100%;}
html[data-textsize="l"]{font-size:112.5%;}
html[data-textsize="xl"]{font-size:125%;}

html{background:var(--paper);}

body{
  margin:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.25rem;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
}

/* The girih field sits on its own fixed layer with its own opacity, above
   the paper and below the content. Painting it on <body> did not work: the
   body background propagates to the canvas, so it ended up behind this
   overlay rather than in front of it. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--orn-girih);
  background-size:64px 64px;
  background-attachment:fixed;
  opacity:.18;
}

a{color:var(--trail-text);text-underline-offset:.18em;}
a:hover{color:var(--trail-dim);}
img{max-width:100%;height:auto;}
:focus-visible{outline:2px solid var(--trail);outline-offset:3px;border-radius:4px;}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:100;}
.skip:focus{left:.5rem;top:.5rem;}

/* ---------- site header ------------------------------------------------- */

.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(227,219,199,.96);   /* the footer tone */
  backdrop-filter:saturate(1.25) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header::after{
  content:"";display:block;height:2px;
  background:var(--rule-strong);
}
.site-header__inner{
  max-width:1080px;margin:0 auto;padding:.8rem 1.5rem;
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--font-display);font-weight:600;
  font-size:1.95rem;line-height:1;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;margin-right:auto;
  white-space:nowrap;
}
.wordmark span{font-style:italic;font-weight:500;color:var(--moss-dark);}
@media(max-width:64rem){.wordmark{font-size:1.7rem;}}
@media(max-width:34rem){.wordmark{font-size:1.5rem;}}
/* gap is tuned: turning FREE Lessons! into a padded button costs ~17px, which
   is exactly enough to push this row onto a second line at the 1080px cap. */
.site-nav{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;row-gap:.6rem;}
.site-nav a{
  font-family:var(--font-body);font-weight:500;font-size:.95rem;white-space:nowrap;
  letter-spacing:.005em;color:var(--ink);text-decoration:none;
  padding:.2rem 0;border-bottom:2px solid transparent;
  transition:color .18s ease,border-color .18s ease;
}
.site-nav a:hover{border-bottom-color:var(--trail);}

.site-nav a:hover{color:var(--trail-dim);}

/* The free-lessons link is the site's whole purpose, so it is the one solid
   button in the bar. "Get access" sits beside it as an outline — two solid
   buttons would cancel each other out. The rub seal that used to mark this
   link is gone: the fill is the emphasis now, and the arrow already in the
   label does the pointing. */
.site-nav a.free{display:inline-flex;align-items:center;gap:.4rem;}

/* .site-nav a carries a 2px transparent bottom border for its underline
   hover. Buttons must not inherit it, and .btn alone loses on specificity. */
.site-nav a.btn{border:1px solid var(--cta);}
.site-nav a.btn:hover{border:1px solid var(--cta-hover);}
.site-nav a.btn--outline{border:1px solid var(--cta);}
.site-nav a.btn--outline:hover{border:1px solid var(--cta);}
/* --- collapsing menu -----------------------------------------------------
   The toggle is only shown once JS has marked the header, so with scripts
   off the nav stays visible (wrapped) rather than becoming unreachable. */
.nav-toggle{
  display:none;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:.95rem;
  color:var(--ink);background:transparent;
  border:1px solid var(--line);border-radius:8px;
  padding:.5rem .8rem;cursor:pointer;line-height:1;
}
.nav-toggle .bars{display:grid;gap:3px;}
.nav-toggle .bars i{display:block;width:16px;height:2px;background:var(--ink);border-radius:1px;}

@media(max-width:64rem){
  .site-header[data-nav] .nav-toggle{display:inline-flex;}
  .site-header[data-nav] .site-nav{
    display:none;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    padding:1.25rem 1.5rem 1.25rem;   /* clears the header rule */
    box-shadow:var(--card-shadow);
  }
  .site-header[data-nav="open"] .site-nav{display:flex;}
  .site-header[data-nav] .site-nav a:first-of-type{padding-top:0;}
  .site-header[data-nav] .site-nav a{
    font-size:1.05rem;padding:.8rem 0;
    border-bottom:1px solid var(--line);border-top:0;
  }
  .site-header[data-nav] .site-nav a:last-of-type{border-bottom:0;}
  .site-header[data-nav] .site-nav .btn{
    margin-top:.75rem;text-align:center;font-size:1rem;padding:.75rem 1rem;
    border:1px solid var(--cta);            /* beats the flat-list border above */
  }
  .site-header[data-nav] .site-nav .btn--outline{border:1px solid var(--cta);}
  .site-header[data-nav] .site-nav a.free{justify-content:center;}
  .site-header[data-nav] .textsize{margin-top:.9rem;align-self:flex-start;}
  .site-header__inner{position:relative;}
}

.btn{
  display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.92rem;
  padding:.7rem 1.15rem;border-radius:8px;text-decoration:none;cursor:pointer;
  background:var(--cta);border:1px solid var(--cta);color:#fff !important;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);}

/* Secondary action: same hue, no fill. For the "away" half of a pair, so the
   two never compete for the same click. */
.btn--outline{
  background:transparent;border-color:var(--cta);color:var(--cta-text) !important;
}
.btn--outline:hover{background:var(--cta);border-color:var(--cta);color:#fff !important;}

/* On the dark paywall and the black footer the dark teal sinks into its own
   background, so the fill flips bright and the label goes dark. */
.paywall .btn,
.site-footer .btn,
.btn--on-dark{
  background:var(--cta-bright);border-color:var(--cta-bright);color:var(--ink) !important;
}
.paywall .btn:hover,
.site-footer .btn:hover,
.btn--on-dark:hover{background:var(--cta-bright-hover);border-color:var(--cta-bright-hover);}

/* In the header bar the button must not inherit the larger reading size. */
.site-header .btn{
  font-size:.92rem;font-weight:600;letter-spacing:.005em;
  padding:.58rem .9rem;white-space:nowrap;line-height:1.2;
}
.btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink) !important;}
.btn--ghost:hover{background:var(--ink);color:var(--paper) !important;}

/* ---------- text size control (Waypoint toggle) ------------------------- */

.textsize{
  position:relative;display:inline-flex;flex:none;
  background:var(--paper-2);border:1px solid var(--line);
  border-radius:999px;padding:4px;font-family:var(--font-label);
}
.textsize__label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.textsize button{
  position:relative;z-index:2;border:0;background:transparent;cursor:pointer;
  padding:.45rem .85rem;border-radius:999px;color:var(--ink-soft);
  font-family:inherit;font-weight:500;line-height:1;
  min-width:2.9rem;min-height:2.4rem;
  transition:color .25s ease;
}
.textsize button[aria-pressed="true"]{color:#fff;}
.textsize__thumb{
  position:absolute;top:4px;left:4px;
  height:calc(100% - 8px);width:calc(33.333% - 2.7px);
  background:var(--ink);border-radius:999px;
  transition:transform .28s cubic-bezier(.65,0,.35,1);
}
html[data-textsize="l"]  .textsize__thumb{transform:translateX(100%);}
html[data-textsize="xl"] .textsize__thumb{transform:translateX(200%);}
.textsize .s1{font-size:.8rem;}
.textsize .s2{font-size:.95rem;}
.textsize .s3{font-size:1.1rem;}

/* ---------- page frame --------------------------------------------------- */

.page{
  max-width:1080px;margin:0 auto;padding:2.5rem 1.5rem 5rem;
  display:grid;gap:3rem;grid-template-columns:minmax(0,1fr);
}
@media(min-width:64rem){
  .page{grid-template-columns:minmax(0,1fr) 17rem;align-items:start;}
  .lesson{grid-column:1;grid-row:1;}
  .rail{
    grid-column:2;grid-row:1;
    position:sticky;top:calc(var(--header-h) + 1rem);
    /* If the unit list is taller than the space left below the header,
       scroll it internally rather than letting the bottom fall off-screen. */
    max-height:calc(100vh - var(--header-h) - 2rem);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .rail::-webkit-scrollbar{width:8px;}
  .rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px;}
  .rail::-webkit-scrollbar-track{background:transparent;}
}

/* ---------- lesson head -------------------------------------------------- */

.crumbs{font-family:var(--font-label);font-size:.8rem;color:var(--ink-soft);margin:0 0 1.5rem;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--ink-faint);}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--trail-text);text-decoration:underline;}

.eyebrow{
  font-family:var(--font-label);font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--trail-text);
  display:flex;align-items:center;gap:10px;margin:0 0 1rem;
}
.eyebrow::before{content:"";width:20px;height:1px;background:var(--trail-text);}

h1{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(2.2rem,1.5rem+3vw,3.4rem);
  line-height:1.06;letter-spacing:-.01em;margin:0 0 1rem;
}
h1 em{font-style:italic;font-weight:500;color:var(--moss);}
.lesson>h1{padding-bottom:1.9rem;position:relative;}
/* The rule is capped to the same measure as the text beneath it. It used to
   span the full lesson column — 898px against a 608px body — so the khatim
   sat well to the right of everything it was dividing. */
.lesson>h1::after{
  content:"";position:absolute;left:0;bottom:0;
  width:min(100%, var(--measure));height:1.7rem;
  background:
    linear-gradient(var(--line),var(--line)) left center / calc(50% - 1.3rem) 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right center / calc(50% - 1.3rem) 1px no-repeat,
    var(--orn-rub) center center / 1.5rem 1.5rem no-repeat;
}

h2{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.5rem,1.2rem+1vw,1.9rem);
  line-height:1.2;margin:2.75rem 0 1rem;
}
h3{font-family:var(--font-display);font-weight:500;font-size:1.25rem;margin:2rem 0 .6rem;}
.standfirst{max-width:var(--measure);color:var(--ink-soft);font-size:1.1rem;margin:0 0 2rem;}

/* ---------- entries: the trail --------------------------------------------
   Waypoint's dashed trail line becomes an al-Sadu band running down the
   margin, with a khatim marking each entry.                                */

.legacy,.lesson p{max-width:var(--measure);}
.legacy p{max-width:none;}

.entries,.legacy{position:relative;}
.entry{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem 1.3rem 2.6rem;
  margin:0 0 .85rem;
}
.entry::before{
  content:"";position:absolute;left:.85rem;top:1.5rem;
  width:1.15rem;height:1.15rem;
  background:var(--orn-rub-solid) center / contain no-repeat;
}
/* The dashed vertical connector that used to run between cards is gone.
   It implied the cards were steps in a sequence, which they are not — they
   are independent vocabulary records — and it drew a stray line wherever a
   card happened to be followed by something that was not another card. */
.entry:hover{border-color:var(--gold);}

/* ---------- legacy prose classes ---------------------------------------- */

.legacy .nsh,.entry .nsh{
  /* Pinned to 400. Arabic naskh is not meant to be emboldened, and one stray
     <b> wrapping an Arabic run would otherwise pull in a second 67 KB font
     file for a single word. */
  font-family:var(--font-arabic);font-weight:400;font-size:1.6em;line-height:2;
  direction:rtl;unicode-bidi:isolate;
  color:var(--arabic);
  /* The source runs Arabic straight into the transliteration with no space
     between them — "…الصغيرة" immediately followed by "il-madiinat". The
     markup cannot gain a character, so the gap is set here instead.
     Physical, not logical: the span is RTL but sits in LTR flow, so
     margin-inline-end resolves to the left and leaves the following
     transliteration still touching it. */
  margin-left:.2em;margin-right:.35em;
}

/* Arabic quoted mid-sentence WITHOUT the .nsh class — "fuS-Ha فصحى",
   "lahjaat لهجات" on the homepage — is deliberately left to the visitor's
   system Arabic font. Giving it var(--font-arabic) would be prettier and
   more consistent, but it pulls the 66 KB Noto Naskh file onto the homepage
   for two words in parentheses. The lesson pages load that font anyway (their
   Arabic is .nsh), so this only affects the homepage, which is the page
   measured by PageSpeed. Deliberate trade, not an oversight.
   The lang/dir attributes stay: they are what screen readers and the bidi
   algorithm need, and they cost nothing. */

/* Inside a running paragraph the headword size is too much: at 1.6em with
   line-height 2 every line containing Arabic pushes its neighbours apart and
   the paragraph loses its rhythm. In a card the Arabic IS the headword and
   should stay large; in prose it is quoted mid-sentence. */
.legacy .prose .nsh,
.legacy .note .nsh{font-size:1.3em;line-height:1.85;}

/* Transliteration. In this course it is written as <b> or .substantive.
   Parenthesised English glosses inside them are re-coloured by .gloss,
   which the converter adds without touching a character of text. */
.legacy b,.legacy .substantive{color:var(--translit);font-weight:600;}
.legacy .gloss{color:var(--ink);font-weight:400;}
.legacy .substantive{
  display:inline-block;font-size:1.05em;
  border-bottom:2px solid var(--gold);padding-bottom:.08em;
}
/* .green is overloaded in the source: 99 of its 102 uses are short section
   headings ("2.) Singular CaaCiC -> plural CuCCaaC"), but three wrap an
   entire opening paragraph — and heading styling turned those into a wall of
   bold terracotta. A .green carrying an Arabic run or an audio button is
   content, not a heading, so it reads as ordinary prose. */
.legacy .green{color:var(--trail-text);font-weight:600;}
.legacy .green:has(.nsh),
.legacy .green:has(button){color:var(--ink);font-weight:400;}
/* The lattice panel — the areesh/mashrabiya card.
   .trq is the class the original pages already used; .note is the same
   treatment applied deliberately to an aside, a caveat or a "notice that…"
   remark, so those read as commentary rather than as another vocabulary
   record. It clears any floated picture. */
.legacy .trq,
.legacy .note{
  display:block;position:relative;clear:both;
  background:var(--paper-2);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem 1.15rem 1rem 2.9rem;margin:1.4rem 0;font-size:.95em;
}
/* A figure tucked inside the panel: float it against the panel's own edge,
   inside the padding, so the text wraps around it rather than the panel
   sitting under a picture that looks unrelated to it. */
.legacy .note>.figure--side{
  float:right;margin:.15rem 0 .8rem 1.2rem;max-width:min(45%, 13rem);
}
.legacy .note>.figure--side img{border-radius:10px;}

.legacy .trq::before,
.legacy .note::before{
  content:"";position:absolute;left:1rem;top:1.1rem;width:1.1rem;height:1.1rem;
  background:var(--orn-areesh) center / contain no-repeat;opacity:.85;
}
/* ---------- tables ------------------------------------------------------
   a11's alphabet table is 29 rows by 5 columns and had NO styling at all —
   it rendered as raw cells. Banded rows and generous cell padding do most of
   the work; the wrapper lets it scroll on a phone instead of pushing the
   whole page sideways. */

.table-wrap{
  overflow-x:auto;
  margin:1.8rem 0;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
.legacy table{
  border-collapse:collapse;width:100%;
  font-size:.95em;
  /* keeps columns readable rather than crushing the Arabic */
  min-width:34rem;
}
.legacy th,.legacy td{
  padding:.7rem .9rem;text-align:left;vertical-align:middle;
  border-bottom:1px solid var(--line);
}
.legacy thead th{
  position:sticky;top:0;z-index:1;
  background:var(--paper-2);
  font-family:var(--font-label);font-size:.72rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);
  border-bottom:1px solid var(--rule-strong);
  white-space:nowrap;
}
.legacy tbody tr:nth-child(even){background:rgba(193,101,47,.045);}
.legacy tbody tr:last-child td{border-bottom:none;}
.legacy tbody tr:hover{background:rgba(184,146,63,.10);}
/* Arabic inside a cell must not inherit the 1.6em run-size meant for prose. */
.legacy td .nsh,.legacy th .nsh{font-size:1.35em;line-height:1.6;}

/* ---------- image-bullet lists ------------------------------------------
   a13 listed its selling points as sentences glued together by a decorative
   GIF, which the browser ran into one paragraph. As a real list they get
   real spacing, and the marker comes from the stylesheet. */

.legacy .bullets{list-style:none;margin:1.6rem 0;padding-left:1.9rem;display:grid;gap:.85rem;}
.legacy .bullets li{position:relative;line-height:1.6;}
.legacy .bullets li::before{
  content:"";position:absolute;left:-1.6rem;top:.45em;
  width:.85rem;height:.85rem;
  background:var(--orn-rub-solid-gold) center / contain no-repeat;
}
.legacy .lede{font-size:1.08em;line-height:1.65;color:var(--ink);}

/* ---------- prose runs --------------------------------------------------
   Explanatory paragraphs, and on the pronunciation pages one block per
   sound. p11 and p112 were a single wall because the card rule needs an
   Arabic run and those pages are transliteration only — every sound ran into
   the next. The margin is what separates them. */
.legacy .prose{margin:0 0 1.35rem;line-height:1.7;}
.legacy .prose:last-child{margin-bottom:0;}

/* "Examples:" and friends — a label for the cards beneath, not a paragraph. */
.legacy .grouplabel{
  font-family:var(--font-label);font-size:.76rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);
  margin:1.6rem 0 .7rem;
}

/* The sound being taught, as a badge at the head of its own block. */
.legacy .sound{
  display:inline-block;min-width:2.1rem;text-align:center;
  font-family:var(--font-label);font-weight:600;font-size:1.05em;
  color:#fff;background:var(--trail-btn);
  border-radius:6px;padding:.1em .45em;margin-right:.15em;
}

.legacy ul{list-style:none;padding-left:1.7rem;}
.legacy ul li{position:relative;}
.legacy ul li::before{
  content:"";position:absolute;left:-1.5rem;top:.5em;width:.8rem;height:.8rem;
  background:var(--orn-rub-solid-gold) center / contain no-repeat;
}
.legacy br+br{line-height:2.1;}
.legacy iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--radius);margin:1.5rem 0;}

hr,.ornament-rule{
  border:0;height:1.7rem;margin:2.5rem 0;
  background:
    linear-gradient(var(--line),var(--line)) left center / calc(50% - 1.3rem) 1px no-repeat,
    linear-gradient(var(--line),var(--line)) right center / calc(50% - 1.3rem) 1px no-repeat,
    var(--orn-rub) center center / 1.5rem 1.5rem no-repeat;
}

/* ---------- audio button ------------------------------------------------- */

.say{
  --size:2.15rem;position:relative;
  width:var(--size);height:var(--size);flex:none;
  display:inline-grid;place-items:center;vertical-align:middle;margin:0 .15rem;
  padding:0;cursor:pointer;border-radius:50%;
  border:1px solid var(--line);background:var(--surface);color:var(--trail-text);
  transition:background .18s ease,border-color .18s ease,transform .1s ease;
}
.say:hover{background:var(--trail);border-color:var(--trail);color:#fff;}
.say:active{transform:scale(.94);}
.say svg{width:.85rem;height:.85rem;fill:currentColor;}
.say .ico-stop{display:none;}
.say[aria-pressed="true"]{background:var(--trail);border-color:var(--trail);color:#fff;}
.say[aria-pressed="true"] .ico-play{display:none;}
.say[aria-pressed="true"] .ico-stop{display:block;}
.say[aria-pressed="true"]::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--trail);animation:pulse 1.1s ease-out infinite;pointer-events:none;
}
@keyframes pulse{from{transform:scale(1);opacity:.7;}to{transform:scale(1.7);opacity:0;}}
.say--none{cursor:default;border-style:dashed;color:var(--ink-faint);}
.say--none:hover{background:var(--surface);border-color:var(--line);color:var(--ink-faint);}

/* ---------- figures ------------------------------------------------------ */

figure{margin:2rem 0;}
figure img{border-radius:var(--radius);display:block;width:100%;border:1px solid var(--line);}
figcaption{
  font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink-soft);
  margin-top:.65rem;padding-left:.8rem;border-left:2px solid var(--gold);line-height:1.45;
}
/* Floated beside PROSE, never beside a card.
   A float next to running text is exactly right and is what these pages were
   authored for. What it must not do is squeeze a bordered vocabulary card to
   half width, which is what produced g22's 288px first pronoun against 608px
   for the other seven. `.entry{clear:right}` below settles it: prose wraps
   around the picture, cards always start on a clean line.

   No width is set here. These photos are small originals — 119x295, 282x111,
   475x152 — and forcing them to a column width upscaled them into a blur. */
/* Base (narrow screens): the figure is its own band.
   Declared BEFORE the float rules — an equally specific `.figure--side`
   rule sitting after the media query silently won and wiped out the
   float's side margin, so text ran flush against the picture. */
.figure--side{margin:1.6rem 0;}

@media(min-width:48rem){
  /* The cap is what makes the wrap work. Cards flow alongside the picture,
     so the picture must leave them a readable column: at 15rem the widest
     original (475px) comes down to 240px and the cards keep ~340px. Without
     it a landscape photo would squeeze them to a ribbon. */
  .figure--side{
    float:right;margin:.3rem 0 1.2rem 1.75rem;
    max-width:min(45%, 15rem);
  }
  .figure--left{float:left;margin:.3rem 1.75rem 1.2rem 0;}

  /* A table cannot wrap around a float — it would scroll under it. */
  .figure--side:has(+ .table-wrap){float:none;margin:1.8rem auto;}
}
.figure--fit{margin:1.8rem 0;}
.figure--side img,.figure--fit img{border-radius:var(--radius);}
.figure--side figcaption,.figure--fit figcaption{text-align:left;}

/* ---------- paywall: the inverted card ---------------------------------- */

.paywall{
  position:relative;margin:3.5rem 0 0;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:var(--radius);
  padding:2.4rem 1.9rem 2rem;text-align:center;box-shadow:var(--card-shadow);
  overflow:hidden;
}
.paywall::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--gold);
}
.paywall h2{margin:.6rem 0 .5rem;color:var(--paper);}
.paywall p{max-width:32rem;margin:0 auto 1.6rem;color:#C7CFC5;}
.paywall__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.paywall .btn--ghost{border-color:var(--paper);color:var(--paper) !important;}
.paywall .btn--ghost:hover{background:var(--paper);color:var(--ink) !important;}

/* ---------- pager -------------------------------------------------------- */

/* Every link in the pager is an action, so every one renders as a button:
   the outline for "go read something else", the solid fill for anything that
   converts. Selecting the solid ones by href rather than by class means all
   27 converted pages pick this up without a single markup edit. */
.pager{
  display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;
  margin-top:2.5rem;padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-family:var(--font-body);font-size:.95rem;
}
.pager a{
  display:inline-block;font-weight:600;font-size:.92rem;line-height:1.2;
  padding:.7rem 1.15rem;border-radius:8px;text-decoration:none;cursor:pointer;
  background:transparent;border:1px solid var(--cta);color:var(--cta-text);
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.pager a:hover{background:var(--cta);border-color:var(--cta);color:#fff;}
.pager a[href*="subscr"],
.pager a[href*="monstercampaigns"],
.pager a[href*="amzn."]{
  background:var(--cta);border-color:var(--cta);color:#fff;
}
.pager a[href*="subscr"]:hover,
.pager a[href*="monstercampaigns"]:hover,
.pager a[href*="amzn."]:hover{background:var(--cta-hover);border-color:var(--cta-hover);}
.pager span{display:block;font-family:var(--font-label);font-size:.72rem;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.08em;}

/* ---------- rail: Waypoint's table container ---------------------------- */

.rail{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);overflow:hidden;
}
.rail h2{
  font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
  margin:0;padding:1.1rem 1.2rem .85rem;border-bottom:1px solid var(--line);
  line-height:1.5;
  position:sticky;top:0;background:var(--surface);z-index:1;
}
.rail h2 .unit{
  display:block;              /* always on its own line */
  color:var(--trail-text);font-weight:500;letter-spacing:.1em;
}
.rail ol{list-style:none;margin:0;padding:0;}
.rail li{
  display:flex;gap:.6rem;align-items:baseline;
  padding:.6rem 1.2rem;border-bottom:1px solid var(--line);font-size:.95rem;
}
.rail li:last-child{border-bottom:none;}
/* tabular-nums keeps G.2.6 / G.3.10 aligned down the column now that these
   are set in a proportional face rather than a monospace one. */
.rail .ref{font-family:var(--font-label);font-size:.76rem;color:var(--ink-faint);
  flex:none;width:3rem;font-variant-numeric:tabular-nums;}
.rail a{color:var(--ink);text-decoration:none;}
.rail a:hover{color:var(--trail-text);text-decoration:underline;}
.rail .locked{color:var(--ink-soft);}
.rail .locked::after{content:"";display:inline-block;vertical-align:-.15em;
  width:1em;height:1em;margin-left:.4em;
  background:var(--orn-padlock) center / contain no-repeat;}
.rail [aria-current="page"]{font-weight:600;color:var(--trail-text);}
.rail .btn{display:block;margin:1rem 1.2rem 1.2rem;text-align:center;}

/* ---------- course index ------------------------------------------------- */

.index-list{list-style:none;margin:1rem 0 2.5rem;padding:0;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);overflow:hidden;}
.index-list li{display:flex;gap:.8rem;align-items:baseline;
  padding:.7rem 1.2rem;border-bottom:1px solid var(--line);}
.index-list li:last-child{border-bottom:none;}
.index-list .ref{font-family:var(--font-label);font-size:.8rem;color:var(--ink-faint);
  flex:none;width:3.4rem;font-variant-numeric:tabular-nums;}
.index-list a{text-decoration:none;}
.index-list a:hover{text-decoration:underline;}
.index-list .locked{color:var(--ink-soft);}
.index-list .locked::after{content:"";display:inline-block;vertical-align:-.15em;
  width:1em;height:1em;margin-left:.4em;
  background:var(--orn-padlock) center / contain no-repeat;}

/* ---------- footer ------------------------------------------------------- */

/* Inverted: black ground, warm-paper text. The gold hairline is the same
   3px the paywall card uses, so the two dark blocks on the page read as a
   matched pair rather than two unrelated accidents. */
.site-footer{
  border-top:3px solid var(--gold);
  background:var(--footer-bg);color:var(--footer-ink);
  padding:3rem 1.5rem 2.5rem;font-size:.95rem;
}
.site-footer__inner{max-width:1080px;margin:0 auto;display:grid;gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));}
.site-footer h2{font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--footer-ink-soft);margin:0 0 .7rem;font-weight:500;}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;}
.site-footer a{color:var(--footer-ink);text-decoration:none;}
.site-footer a:hover{color:var(--footer-link-hover);text-decoration:underline;}
.colophon{max-width:1080px;margin:2rem auto 0;padding-top:1.5rem;
  border-top:1px solid var(--footer-line);font-size:.82rem;color:var(--footer-ink-soft);}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  body::before{background-attachment:scroll;}
}
@media(prefers-contrast:more){
  body::before{display:none;}
  .entry::before{display:none;}
}

/* ---------- Quiz pages -------------------------------------------------- */

.page--narrow{grid-template-columns:minmax(0,1fr);max-width:44rem;}
@media(min-width:64rem){.page--narrow{grid-template-columns:minmax(0,1fr);}}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

.quiz__q{font-size:clamp(1.6rem,1.2rem+1.6vw,2.3rem);padding-bottom:1.9rem;}

.options{border:0;margin:0 0 1.75rem;padding:0;display:grid;gap:.6rem;}

/* The whole row is the control: label wraps the input, so clicking the
   answer text selects it. Previously only the 16px radio was clickable. */
.option{
  display:flex;align-items:center;gap:.85rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem 1.15rem;
  font-size:1.05rem;cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.option:hover{border-color:var(--trail);background:var(--paper);}
.option:focus-within{outline:2px solid var(--trail);outline-offset:2px;}
.option input{width:1.15rem;height:1.15rem;accent-color:var(--trail-btn);flex:none;margin:0;}
.option__text{font-family:var(--font-body);}
.option.is-picked{border-color:var(--trail);background:var(--paper);}

.submit{border:0;font-family:var(--font-body);cursor:pointer;}

.verdict{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  border-radius:var(--radius);padding:1rem 1.2rem;margin:1.5rem 0 0;
  font-weight:600;
}
.verdict--right{background:rgba(76,107,84,.14);border:1px solid var(--moss);color:var(--moss-dark);}
.verdict--wrong{background:rgba(193,101,47,.10);border:1px solid var(--trail);color:var(--trail-text);}


/* ---------- Float containment ------------------------------------------
   A floated figure was sliding underneath the entry cards, because a plain
   block box lets floats overlap it. Making the cards block formatting
   contexts means they sit beside the float instead of under it. */

.entry,.legacy .trq,.legacy p{display:flow-root;}
.legacy::after{content:"";display:block;clear:both;}

/* ---------- Reserve image space ----------------------------------------
   The converted pages carry no width/height, so the browser cannot reserve
   space and the page jumps when a lazy image arrives. Until real dimensions
   are written into the markup (see migrate/add_image_dims.py), hold a fixed
   box and crop rather than distort. */

/* Images render at their own size, never upscaled.
   This used to be `img:not([width]){aspect-ratio:4/3;object-fit:cover;
   width:100%}` — a stopgap to reserve space before the pages carried real
   dimensions. It forced every photo to the full column width and cropped it
   to 4:3, so p112's 119x295 portrait was blown up 5x and then cut down to a
   letterbox: huge, soft, and showing a fraction of the picture. Real
   width/height now come from add_image_dims.py, so the space is reserved
   properly and nothing needs to be stretched. */
.legacy img{max-width:100%;height:auto;}
.figure--side img{display:block;}

/* Cards DO wrap around a floated picture — that is the point of the float,
   and it is what stops a tall photo leaving an empty column beside it. The
   figure's max-width above guarantees the card still gets a readable share.
   `flow-root` (set further down) keeps the card's own box from sliding under
   the float; only the outer edge narrows. */

/* Breathing room around the things that used to collide:
   a CTA row running straight into the next card, and a picture butting up
   against the paragraph after it. */
.legacy .pager{margin-bottom:2.5rem;}
.legacy .table-wrap + *{margin-top:1.8rem;}
.legacy figure + .entry,
.legacy figure + p{margin-top:1.4rem;}

/* ==========================================================================
   HOMEPAGE
   Built for a PageSpeed-first hero: the largest element is the H1, which is
   text and paints with the first stylesheet, so LCP does not wait on an
   image. The old hero was a 100vh background-attachment:fixed splash whose
   contents were then hidden by `body.is-loading` until window.onload + 500ms
   — the flash of content appearing, vanishing and returning.
   ========================================================================== */

.hero{padding:3.5rem 1.5rem 2.5rem;}
.hero__inner{
  max-width:1080px;margin:0 auto;
  display:grid;gap:2.5rem;align-items:center;
  grid-template-columns:1fr;
}
/* Grid items default to min-content width, and a 1213px-wide photo has a
   large one — without this it bullies the fr units and squeezes the headline
   into a ribbon. */
.hero__inner>*{min-width:0;}
@media(min-width:56rem){
  .hero__inner{grid-template-columns:1.05fr .95fr;gap:3.5rem;}
}
.hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,1.4rem+2.6vw,3.35rem);
  line-height:1.1;letter-spacing:-.02em;margin:.35rem 0 0;
}
.hero h1 em{font-style:italic;font-weight:500;color:var(--moss-dark);}
.hero__lede{
  max-width:34rem;margin:1.15rem 0 0;
  font-size:1.12rem;line-height:1.6;color:var(--ink-soft);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem;}
.hero__actions .btn{font-size:1rem;padding:.85rem 1.35rem;}

.hero__facts{
  list-style:none;margin:2rem 0 0;padding:0;
  display:grid;gap:.55rem;font-size:.97rem;color:var(--ink-soft);
}
.hero__facts li{position:relative;padding-left:1.6rem;}
.hero__facts li::before{
  content:"";position:absolute;left:0;top:.35em;width:.85rem;height:.85rem;
  background:var(--orn-rub-solid-gold) center / contain no-repeat;
}
.hero__facts strong{color:var(--ink);font-weight:600;}

.hero__figure{margin:0;}
.hero__figure img{
  display:block;width:100%;height:auto;
  border-radius:var(--radius);box-shadow:var(--card-shadow);
}

/* ---------- bands -------------------------------------------------------- */

.band{padding:3.25rem 1.5rem;}
.band--tint{background:var(--surface);border-block:1px solid var(--line);}
.band__inner{max-width:1080px;margin:0 auto;}
.band h2{margin-top:0;}
.measure{max-width:var(--measure);}

.cols{display:grid;gap:2.5rem;grid-template-columns:1fr;}
@media(min-width:56rem){.cols{grid-template-columns:1fr 1fr;gap:3rem;}}
.cols h2{font-size:clamp(1.4rem,1.2rem+.7vw,1.75rem);}

/* Where it is spoken — the reader is moving to one of these. */
.places{
  list-style:none;margin:1.5rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:.6rem;
}
.places li{
  font-family:var(--font-label);font-size:.82rem;letter-spacing:.02em;
  border:1px solid var(--line);border-radius:999px;
  padding:.4rem .95rem;background:var(--surface);color:var(--ink-soft);
}
.band--tint .places li{background:var(--paper);}

/* ---------- the comparison ---------------------------------------------- */

/* Bottom margin matters as much as the top one: the paragraph that follows
   ("As you might imagine we receive many emails…") ran straight into the
   cards without it. */
.compare{display:grid;gap:1.25rem;margin:2rem 0 2.25rem;grid-template-columns:1fr;}
@media(min-width:48rem){.compare{grid-template-columns:1fr 1fr;}}
.compare__col{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;background:var(--surface);
}
.compare__col h3{
  margin:0 0 .6rem;font-size:1.05rem;font-weight:600;
  font-family:var(--font-body);color:var(--ink-soft);
}
.compare__col p{margin:0;}
/* Ours is the one the reader almost certainly wants — say so with the
   action colour rather than with extra words. */
.compare__col--ours{
  background:var(--paper);border-color:var(--cta);
  box-shadow:inset 0 0 0 1px var(--cta);
}
.compare__col--ours h3{color:var(--cta-text);}

.pullquote{
  margin:2.5rem 0 0;padding:1.6rem 1.75rem 1.4rem 3.2rem;
  position:relative;max-width:46rem;
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);
}
.pullquote::before{
  content:"";position:absolute;left:1.25rem;top:1.75rem;
  width:1.25rem;height:1.25rem;
  background:var(--orn-areesh) center / contain no-repeat;opacity:.85;
}
.pullquote p{
  /* 500 so it maps to a real self-hosted file. Left unset it inherited 400,
     and there is no Fraunces 400-italic in the set — the browser would have
     slanted the upright face itself. */
  margin:0;font-family:var(--font-display);font-style:italic;font-weight:500;
  font-size:clamp(1.1rem,1rem+.5vw,1.35rem);line-height:1.5;
}
.pullquote cite{
  display:block;margin-top:.9rem;font-style:normal;
  font-family:var(--font-label);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- logos -------------------------------------------------------- */

.logos{
  list-style:none;margin:1.75rem 0 2.75rem;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:2.25rem;
}
.logos img{
  display:block;height:2.2rem;width:auto;
  filter:grayscale(1);opacity:.65;
  transition:filter .2s ease,opacity .2s ease;
}
.logos li:hover img{filter:grayscale(0);opacity:1;}

/* ---------- closing CTA -------------------------------------------------- */

.closer{
  padding:3.5rem 1.5rem;text-align:center;
  background:var(--ink);color:var(--paper);
  border-top:3px solid var(--gold);
}
.closer__inner{max-width:44rem;margin:0 auto;}
.closer h2{color:var(--paper);margin:0 0 1.5rem;}
.closer .hero__actions{justify-content:center;margin-top:0;}
.closer .btn--outline{border-color:var(--paper);color:var(--paper) !important;}
.closer .btn--outline:hover{background:var(--paper);color:var(--ink) !important;}

/* ---------- link list (links.php) ---------------------------------------- */

.linklist{list-style:none;margin:2rem 0;padding:0;display:grid;gap:1.1rem;}
.linklist li{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:1.1rem 1.3rem;
}
.linklist li>a{
  font-family:var(--font-display);font-weight:500;font-size:1.2rem;
  color:var(--ink);text-decoration:none;
}
.linklist li>a:hover{color:var(--cta-text);text-decoration:underline;}
/* An outbound marker, so it is obvious these leave the site. */
.linklist li>a::after{
  content:"";display:inline-block;vertical-align:-.05em;margin-left:.45em;
  width:.62em;height:.62em;
  background:var(--orn-rub-solid-gold) center / contain no-repeat;
}
.linklist p{margin:.45rem 0 0;color:var(--ink-soft);font-size:.97rem;line-height:1.55;}

/* ---------- pricing plans (subscr.php) ----------------------------------- */

.plans{display:grid;gap:1.25rem;margin:2rem 0 2.5rem;grid-template-columns:1fr;}
@media(min-width:44rem){.plans{grid-template-columns:1fr 1fr;}}
.plan{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:1.6rem 1.5rem;
  display:flex;flex-direction:column;
}
.plan--featured{
  background:var(--paper);border-color:var(--cta);
  box-shadow:inset 0 0 0 1px var(--cta);
}
.plan__name{
  font-family:var(--font-display);font-weight:500;
  font-size:1.15rem;line-height:1.35;margin:0 0 .4rem;
}
.plan__local{margin:0 0 1.1rem;font-size:.9rem;color:var(--ink-soft);line-height:1.5;}
.plan form{margin:0 0 .9rem;}
.plan__buy{display:block;width:100%;text-align:center;font-size:1rem;padding:.85rem 1rem;}
.plan__terms{margin:auto 0 0;font-size:.82rem;color:var(--ink-faint);}
.smallprint{font-size:.88rem;color:var(--ink-soft);}

/* The rail as shown on non-lesson pages (articles), where there is no unit. */
.rail__blurb{
  margin:0;padding:1.1rem 1.2rem 0;
  font-size:.93rem;line-height:1.55;color:var(--ink-soft);
}
.rail .btn+.btn{margin-top:0;}

/* ---------- article index (m/index.php) ---------------------------------- */

.articles{list-style:none;margin:2rem 0;padding:0;display:grid;gap:.75rem;}
.articles li{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);
  transition:border-color .18s ease,background .18s ease;
}
.articles li:hover{border-color:var(--cta);background:var(--paper);}
.articles a{
  display:flex;gap:.7rem;align-items:baseline;
  padding:1rem 1.25rem;text-decoration:none;
  font-family:var(--font-display);font-weight:500;font-size:1.1rem;
  line-height:1.35;color:var(--ink);
}
.articles a::before{
  content:"";flex:none;width:.7rem;height:.7rem;align-self:center;
  background:var(--orn-rub-solid) center / contain no-repeat;
}
.articles li:hover a{color:var(--cta-text);}
.articles a [lang="ar"]{font-family:var(--font-arabic);font-size:1.1em;}

/* ---------- contact form -------------------------------------------------- */

.contactform{margin:2rem 0 0;max-width:var(--measure);}
.field{margin:0 0 1.25rem;}
.field label{
  display:block;margin:0 0 .4rem;
  font-family:var(--font-label);font-size:.8rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:500;
}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);
  background:var(--surface);
  border:1px solid var(--line);border-radius:8px;
  padding:.7rem .85rem;
}
.field textarea{line-height:1.6;resize:vertical;}
.field input:focus,.field textarea:focus{
  outline:2px solid var(--cta);outline-offset:1px;
  border-color:var(--cta);background:var(--paper);
}
/* The captcha sits under its own input, not floating beside it. */
.field--verify img{display:block;margin-top:.6rem;border:1px solid var(--line);border-radius:4px;}
.formactions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.75rem;}
.formerror{
  margin:1.5rem 0 0;padding:.85rem 1.1rem;
  border:1px solid var(--trail);border-left-width:4px;border-radius:8px;
  background:rgba(193,101,47,.08);color:var(--trail-text);font-weight:600;
}

.formok{
  margin:1.75rem 0;padding:1.1rem 1.3rem;
  border:1px solid var(--moss);border-left-width:4px;border-radius:8px;
  background:rgba(76,107,84,.10);color:var(--moss-dark);
  font-size:1.05rem;line-height:1.6;
}
/* Honeypot: off-screen rather than display:none — some bots skip hidden
   fields, but they fill this one. Never focusable, never announced. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- members' account panel --------------------------------------- */

.account{
  border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:1.2rem 1.4rem;margin:1.75rem 0 2rem;
  display:grid;gap:.6rem;
}
.account__row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;}
.account__label{
  font-family:var(--font-label);font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);min-width:8rem;
}
.account__actions{margin-top:.4rem;}

/* ---------- quiz progress bar -------------------------------------------- */

.quizbar{
  height:6px;border-radius:999px;background:var(--paper-2);
  overflow:hidden;margin:.9rem 0 0;max-width:22rem;
}
.quizbar__fill{
  display:block;height:100%;background:var(--cta);
  border-radius:999px;transition:width .3s ease;
}
.quiz .verdict a.btn{margin-left:auto;}

/* The quiz card at the foot of a members' lesson. Same shape as the paywall
   card the public pages use, but it is an invitation to the quiz rather than
   a sales pitch — and deliberately NOT class="paywalled", which is the
   selector the paywall JSON-LD points Google at. */
.quizcard{
  position:relative;margin:3.5rem 0 0;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:var(--radius);
  padding:2.4rem 1.9rem 2rem;text-align:center;box-shadow:var(--card-shadow);
  overflow:hidden;
}
.quizcard::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--cta-bright);
}
.quizcard h2{margin:.6rem 0 .5rem;color:var(--paper);}
.quizcard p{max-width:32rem;margin:0 auto 1.6rem;color:#C7CFC5;}
.quizcard__actions,
.quizcard .paywall__actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.quizcard .btn{background:var(--cta-bright);border-color:var(--cta-bright);color:var(--ink) !important;}
.quizcard .btn:hover{background:var(--cta-bright-hover);border-color:var(--cta-bright-hover);}

/* ---------- anchor landing -----------------------------------------------
   The header is position:sticky, so jumping to #gulf-arabic-grammar scrolled
   the heading to y=0 and the header then sat on top of it — you landed just
   below the thing you asked for. scroll-margin-top reserves the header's own
   height plus a little air, so the heading arrives underneath it.

   :target-aware rather than blanket, so it only applies to elements something
   actually links to. */
[id]{scroll-margin-top:calc(var(--header-h) + 1.5rem);}

/* The banner the local preview injects adds height the real site will not
   have; harmless either way. */
html{scroll-behavior:smooth;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* One clear blank line between the last detail row and the buttons under it.
   .account__row has its own margin, so this is the extra gap on top of that --
   about one line of text, which is what makes the buttons read as a separate
   block rather than as a label for the date above them. */
.account__actions--spaced{margin-top:1.9rem;}