/* ==========================================================
   BLOOM ARABIA · بلوم أرابيا
   ----------------------------------------------------------
   Paper white, ink black. No brand colour anywhere.
   The dot is the identity device: it builds the landing, and
   every rule on every page is made of the same dots.
   One superfamily covers both scripts, so ع and E share
   proportions rather than being two strangers on a page.
   ========================================================== */

:root{
  --paper:#FDFDFB;
  --ink:#111110;
  --dim:rgba(17,17,16,.55);
  --faint:rgba(17,17,16,.22);

  --f-en:"IBM Plex Sans", system-ui, sans-serif;
  --f-ar:"IBM Plex Sans Arabic", system-ui, sans-serif;

  --measure:34rem;
  --gutter:clamp(1rem,3vw,2.4rem);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-en);
  font-weight:300;
  font-size:clamp(1rem,.5vw+.9rem,1.1rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
}

/* ---- the mirror ---- */
html[lang="ar"]{ direction:rtl; }
html[lang="ar"] body{ font-family:var(--f-ar); line-height:1.95; }
html[lang="en"] .ar-only{ display:none !important; }
html[lang="ar"] .en-only{ display:none !important; }
body{ transition:opacity .2s ease; }
body.turning{ opacity:0; }

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
::selection{ background:var(--ink); color:var(--paper); }
:focus-visible{ outline:1px solid var(--ink); outline-offset:4px; }

/* ---- the dot rule: the landing's dots, held still ---- */
.dotrule{
  height:2px; border:0;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px;
  background-repeat:repeat-x;
}
.dotrule.solid{ background-image:radial-gradient(var(--ink) 40%, transparent 41%); }

.wrap{ max-width:62rem; margin-inline:auto; padding-inline:var(--gutter); }
.reading{ max-width:var(--measure); }

/* letterspacing is Latin-only — it breaks Arabic's connected script,
   so Arabic gets size instead */
.label{
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim); line-height:1.5;
}
html[lang="ar"] .label{ letter-spacing:0; text-transform:none; font-size:.86rem; }

/* ---- header ---- */
.head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-block:clamp(1rem,2.4vw,1.7rem) 1.1rem;
}
.mark{ line-height:1; display:block; }
.mark .en{
  display:block; font-weight:500; font-size:clamp(.8rem,1.4vw,.95rem);
  letter-spacing:.2em; text-transform:uppercase;
}
.mark .ar{
  display:block; font-family:var(--f-ar); font-size:clamp(.85rem,1.5vw,1rem);
  margin-top:.35rem; color:var(--dim); direction:rtl;
}
.head nav{
  display:flex; gap:clamp(.7rem,1.9vw,1.4rem); flex-wrap:wrap; align-items:baseline;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
}
html[lang="ar"] .head nav{ letter-spacing:0; text-transform:none; font-size:.9rem; }
.head nav a{ color:var(--dim); }
.head nav a:hover, .head nav a[aria-current="page"]{ color:var(--ink); }
.turn{
  background:none; border:1px solid var(--faint); color:var(--ink);
  font-family:inherit; font-size:.78rem; padding:.28rem .7rem; cursor:pointer;
}
.turn:hover{ border-color:var(--ink); }

/* ---- opening ---- */
.opening{ padding-block:clamp(3rem,9vw,6.5rem) clamp(1.8rem,5vw,3.2rem); }
.opening h1{
  font-weight:300; font-size:clamp(2.1rem,6vw,3.8rem);
  line-height:1.04; letter-spacing:-.022em;
}
html[lang="ar"] .opening h1{ letter-spacing:0; line-height:1.4; font-size:clamp(1.9rem,5.2vw,3.2rem); }
.opening .standfirst{ margin-top:1.3rem; max-width:var(--measure); color:var(--dim); font-size:1.08em; }
.opening .label{ margin-bottom:1.2rem; }

/* ---- entries ---- */
.entry{
  display:grid; grid-template-columns:3.6rem 1fr;
  gap:0 clamp(1rem,3vw,2.2rem);
  padding-block:clamp(1.4rem,3.2vw,2.2rem);
  align-items:baseline;
}
.entry + .entry{ border-top:2px solid transparent;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x; background-position:top;
}
.entry .no{ font-size:.95rem; color:var(--dim); font-variant-numeric:lining-nums; }
.entry .ttl{ display:block; font-size:clamp(1.25rem,2.9vw,1.85rem); line-height:1.18; font-weight:300; }
html[lang="ar"] .entry .ttl{ line-height:1.55; }
.entry .desc{ display:block; color:var(--dim); margin-top:.4rem; max-width:34rem; }
.entry .meta{ display:flex; gap:1.2rem; flex-wrap:wrap; margin-top:.8rem; }
a.entry:hover .ttl{ text-decoration:underline; text-underline-offset:.24em; text-decoration-thickness:1px; }
a.entry:hover .no{ color:var(--ink); }

/* ---- record block ---- */
.record div{
  display:grid; grid-template-columns:9rem 1fr; gap:1.2rem;
  padding-block:.8rem; align-items:baseline;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x; background-position:bottom;
}
.record dt{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); }
html[lang="ar"] .record dt{ letter-spacing:0; text-transform:none; font-size:.9rem; }

/* ---- article ---- */
.body{ max-width:var(--measure); padding-block:clamp(1.6rem,4vw,2.6rem) clamp(3.5rem,9vw,6rem); }
.body > p{ margin-bottom:1.45em; }
.body h2{ font-weight:400; font-size:1.35em; margin:2.4em 0 .8em; }
.body blockquote{
  margin:2.4em 0; padding-block:1.3rem; font-size:1.28em; line-height:1.36; font-weight:300;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x;
  background-position:top, bottom;
  border-top:2px solid transparent; border-bottom:2px solid transparent;
}
html[lang="ar"] .body blockquote{ line-height:1.8; }
figure{ margin-block:clamp(2.2rem,6vw,3.6rem); }
figure img{ width:100%; filter:grayscale(1) contrast(1.06); }
figcaption{ margin-top:.8rem; color:var(--dim); font-size:.86rem; }

/* ---- form ---- */
.subscribe{ display:flex; gap:.6rem; flex-wrap:wrap; max-width:26rem; margin-top:1.2rem; }
.subscribe input{
  flex:1 1 13rem; font-family:inherit; font-size:1rem; color:var(--ink);
  background:none; border:0; border-bottom:1px solid var(--ink); padding:.45rem .1rem;
}
.subscribe input::placeholder{ color:var(--dim); }
.subscribe button{
  font-family:inherit; font-size:.85rem; background:none;
  border:1px solid var(--ink); color:var(--ink); padding:.45rem 1.1rem; cursor:pointer;
}
.subscribe button:hover{ background:var(--ink); color:var(--paper); }

/* ---- note ---- */
.note{
  padding-block:1rem; margin-block:clamp(2.2rem,6vw,3.4rem);
  color:var(--dim); font-size:.9rem;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x;
  background-position:top, bottom;
  border-top:2px solid transparent; border-bottom:2px solid transparent;
}

/* ---- footer ---- */
.foot{
  position:relative; z-index:2; background:var(--paper);
  padding-block:clamp(2.6rem,6vw,4rem) 2.4rem;
  margin-top:clamp(2.6rem,7vw,5rem);
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x; background-position:top;
  border-top:2px solid transparent;
}
.foot .cols{ display:grid; gap:clamp(1.6rem,5vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); }
.foot .links{ list-style:none; display:grid; gap:.5rem; }
.foot a{ color:var(--dim); }
.foot a:hover{ color:var(--ink); }
.foot .colophon{
  margin-top:clamp(2.2rem,5vw,3.2rem); padding-top:1rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background-image:radial-gradient(var(--faint) 40%, transparent 41%);
  background-size:5px 2px; background-repeat:repeat-x; background-position:top;
  border-top:2px solid transparent;
}
.stack > * + *{ margin-top:1rem; }

@media (max-width:34rem){
  .entry{ grid-template-columns:2.5rem 1fr; }
  .record div{ grid-template-columns:1fr; gap:.15rem; }
}
@media (prefers-reduced-motion:reduce){
  body{ transition:none; }
}