/* ==========================================================================
   albahrani.dev
   One page, two typefaces, one moving part.

   Colour:  blued steel on a silver dial (light) / silver on a blue dial (dark)
   Type:    Old Standard for Latin, Amiri for Arabic
   Scale:   every size is the previous one × e^(1/4), so four steps up is × e
   ========================================================================== */


/* ---------- 1. Fonts (served by jsDelivr from pinned @fontsource packages) -- */

@font-face {
  font-family: "Old Standard TT"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/old-standard-tt@5.3.0/files/old-standard-tt-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Old Standard TT"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/old-standard-tt@5.3.0/files/old-standard-tt-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Old Standard TT"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/old-standard-tt@5.3.0/files/old-standard-tt-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Old Standard has no Greek, so θ and π are borrowed from STIX Two (italic only) */
@font-face {
  font-family: "STIX Two Text"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource-variable/stix-two-text@5.3.0/files/stix-two-text-greek-wght-italic.woff2") format("woff2");
  unicode-range: U+03B8, U+03C0;
}
@font-face {
  font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/amiri@5.3.0/files/amiri-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Aref Ruqaa"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/npm/@fontsource/aref-ruqaa@5.3.0/files/aref-ruqaa-arabic-400-normal.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}


/* ---------- 2. Tokens ------------------------------------------------------ */

:root {
  color-scheme: light dark;

  /* silver dial */
  --paper:     #ECEEF0;
  --raised:    #F5F6F7;
  --ink:       #171F4A;               /* blued steel, in shade */
  --ink-2:     #4A5279;
  --rule:      rgba(23, 31, 74, .20);
  --rule-2:    rgba(23, 31, 74, .42);
  --hand:      #2A3EB1;               /* blued steel, catching the light */
  --hand-soft: #7482CE;

  /* type scale: ratio e^(1/4) */
  --e4:  1.2840254;
  --t0:  clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);
  --t-1: calc(var(--t0) / var(--e4));
  --t1:  calc(var(--t0) * var(--e4));
  --t2:  calc(var(--t1) * var(--e4));
  --t3:  calc(var(--t2) * var(--e4));
  --t4:  calc(var(--t3) * var(--e4));   /* = t0 × e */

  --serif:  "Old Standard TT", "STIX Two Text", "Amiri", "Bodoni MT", Didot, "Times New Roman", serif;
  --arabic: "Amiri", "Traditional Arabic", "Geeza Pro", "Times New Roman", serif;

  --gutter:  clamp(1.25rem, 5vw, 4.5rem);
  --section: clamp(5rem, 11vw, 9.5rem);

  /* every two-column block uses this split, so all right-hand columns
     start on one line: the spine of the page */
  --cols: minmax(0, 5fr) minmax(0, 6fr);
  --gap:  clamp(2rem, 6vw, 6rem);
  --spine: calc((100% - var(--gap)) * 5 / 11 + var(--gap));   /* x of that line */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* blue dial */
    --paper:     #10173A;
    --raised:    #151D46;
    --ink:       #E7E9F0;
    --ink-2:     #A9AFCB;
    --rule:      rgba(231, 233, 240, .20);
    --rule-2:    rgba(231, 233, 240, .42);
    --hand:      #B9C2F2;
    --hand-soft: #5A6BC4;
  }
}


/* ---------- 3. Base -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t0);
  line-height: 1.58;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ol, dl, dd, figure, blockquote { margin: 0; }
ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 400; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .24em;
  text-decoration-color: var(--rule-2);
  transition: color .15s, text-decoration-color .15s;
}
a:hover { color: var(--hand); text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--hand); outline-offset: 3px; }

::selection { background: var(--hand-soft); color: var(--ink); }

[lang="ar"] { font-family: var(--arabic); }

/* exponents, set by hand rather than with a maths library */
sup { font-size: .62em; line-height: 0; position: relative; top: -.62em; vertical-align: baseline; margin-left: .04em; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem;
  padding: .4rem .8rem; background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: .75rem; z-index: 10; }

.top, main, .foot {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}


/* ---------- 4. Top line ---------------------------------------------------- */

.top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding-block: 1.6rem;
  font-size: var(--t-1);
}
.top a { text-decoration: none; }
.top a:hover { text-decoration: underline; }
.top-site { font-style: italic; }
.top nav { display: flex; gap: clamp(1rem, 3vw, 2.2rem); }


/* ---------- 5. Hero -------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: var(--cols);
  align-items: center;
  gap: var(--gap);
  min-height: min(calc(100svh - 5.5rem), 52rem);
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(3rem, 8vh, 6rem);
}

/* the name, set like an engraved card: small capitals, wide apart */
.hero h1 {
  font-size: var(--t0);
  letter-spacing: .3em;
  text-transform: uppercase;
  line-height: 1.5;
}
.name-ar {
  font-size: var(--t3);
  line-height: 1.55;
  margin-top: .15em;
  text-align: left;            /* sits under the Latin name, flush with it */
}
.lede {
  font-size: var(--t2);
  line-height: 1.26;
  max-width: 15.5em;
  margin-top: 1.35em;
  text-wrap: balance;
}
.status {
  color: var(--ink-2);
  max-width: 27em;
  margin-top: 1.3em;
}
.links {
  display: flex; flex-wrap: wrap; gap: .35em 1.7em;
  margin-top: 1.7em;
}

/* the dial */
.dial { min-width: 0; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }

.dial .axis        { stroke: var(--rule-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial .ring        { fill: none; stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dial .ticks       { fill: none; stroke: var(--ink-2); stroke-width: 3; }
.dial .ticks-major { stroke: var(--ink); stroke-width: 7; }

.dial text       { fill: var(--ink); font-family: var(--serif); font-size: 10px; }
.dial .axis-name { fill: var(--ink-2); font-size: 8.5px; font-style: italic; }
.dial .gr        { font-style: italic; }

.dial .arc     { fill: none; stroke: var(--ink-2); stroke-width: .8; }
.dial .leg     { stroke-width: 1.8; stroke-linecap: round; }
.dial .leg-cos { stroke: var(--ink); }
.dial .leg-sin { stroke: var(--hand-soft); }
.dial .hand    { stroke: var(--hand); stroke-width: 1.3; stroke-linecap: round; }
.dial .hub     { fill: var(--hand); }
.dial .point   { fill: var(--hand); stroke: var(--paper); stroke-width: 2; }
.dial .grip    { fill: transparent; cursor: grab; touch-action: none; outline: none; }
.dial .grip:active { cursor: grabbing; }
.dial .grip:focus-visible { stroke: var(--hand); stroke-width: 1; stroke-dasharray: 2.5 2.5; }

.dial figcaption { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.eq      { font-size: var(--t1); line-height: 1.3; }
.readout {
  display: flex; flex-wrap: wrap; gap: .1em 1.5em;
  margin-top: .5em;
  font-size: var(--t-1); color: var(--ink-2);
}
.readout span { white-space: nowrap; }
.readout b {
  display: inline-block; min-width: 3.2em; text-align: right;
  font-weight: 400; color: var(--ink);
}
/* short strokes that key the two numbers to the two legs of the triangle */
.key { display: inline-block; width: .95em; border-top: 2px solid; vertical-align: .28em; margin-right: .45em; }
.key-cos { color: var(--ink); }
.key-sin { color: var(--hand-soft); }
.caption, .plate figcaption {
  font-size: var(--t-1); font-style: italic; color: var(--ink-2);
  line-height: 1.45;
}
.caption { margin-top: .55em; }
.caption .hint { white-space: nowrap; }


/* ---------- 6. The standard ------------------------------------------------ */

.standard { padding-block: var(--section); border-top: 1px solid var(--rule); }

/* the two lines meet at a shared spine: Arabic runs out to the left of it,
   the identity to the right */
.standard-pair {
  position: relative;
  display: grid; grid-template-columns: var(--cols); gap: var(--gap);
  align-items: end;
}
.standard-pair::before {            /* the spine itself, drawn in the middle of the gap */
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--spine) - var(--gap) / 2);
  border-left: 1px solid var(--rule-2);
}
.maxim { padding-block: .5rem 1rem; }
.maxim:first-child { text-align: right; }

.maxim blockquote { font-size: var(--t4); line-height: 1.45; }
.identity         { font-size: var(--t4); line-height: 1.45; white-space: nowrap; }
.maxim figcaption { font-size: var(--t0); font-style: italic; color: var(--ink-2); margin-top: .5em; }

.standard-body {
  display: grid; grid-template-columns: var(--cols); gap: var(--gap);
  margin-top: clamp(3rem, 7vw, 5.5rem);
}
.creed { font-size: var(--t1); line-height: 1.5; }

.manner > div {
  display: grid; grid-template-columns: 6.2em 1fr; gap: 1em;
  padding-block: .7em;
  border-top: 1px solid var(--rule);
}
.manner > div:last-child { border-bottom: 1px solid var(--rule); }
.manner dt { font-style: italic; }
.manner dd { color: var(--ink-2); }


/* ---------- 7. Section heads ----------------------------------------------- */

.section-head {
  display: grid; grid-template-columns: var(--cols); gap: var(--gap); align-items: baseline;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink);
}
.section-head h2 { font-size: var(--t2); line-height: 1.2; }
.section-head p  { color: var(--ink-2); max-width: 26em; }

.work, .record, .contact { padding-bottom: var(--section); }


/* ---------- 8. Work -------------------------------------------------------- */

.project {
  display: grid; grid-template-columns: var(--cols); gap: var(--gap);
  align-items: start;
  margin-top: clamp(3.5rem, 8vw, 6rem);
}
.project + .project { padding-top: clamp(3.5rem, 8vw, 6rem); border-top: 1px solid var(--rule); }

.project h3 { font-size: var(--t2); line-height: 1.2; text-wrap: balance; }
.stack { font-size: var(--t-1); font-style: italic; color: var(--ink-2); margin-top: .5em; }
.project-text > p { max-width: 31em; }
.project-text > p + p { margin-top: 1em; }
.project-text > .stack + p { margin-top: 1.6em; }
.project-text [lang="ar"] { font-size: 1.12em; line-height: 1; white-space: nowrap; }
.project-links { display: flex; flex-wrap: wrap; gap: .35em 1.7em; padding-top: .5em; }

.project-evidence { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
.project-text, .project-evidence { min-width: 0; }

/* a plate: one hairline frame, like a figure in a printed monograph */
.plate { border: 1px solid var(--rule-2); background: var(--raised); padding: clamp(1rem, 2.4vw, 1.6rem); }
.plate figcaption { margin-top: 1.2rem; padding-top: .85rem; border-top: 1px solid var(--rule); }

.chart { font-size: var(--t-1); line-height: 1.25; color: var(--ink); }
.chart .dot {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--raised);          /* surface ring */
}
.chart .dot-base  { background: var(--hand-soft); }
.chart .dot-model { background: var(--hand); }
.chart [tabindex] { outline-offset: 4px; }

.legend { display: flex; flex-wrap: wrap; gap: .3em 1.6em; color: var(--ink-2); }
.legend span { position: relative; padding-left: 1.15em; }
.legend .dot { left: .34em; top: .62em; box-shadow: none; }

/* -- Fig. 2: dumbbell. --lw is the width of the label column -- */
.dumb { --lw: 7.4em; --pad: 1.3em; }
.dumb-rows { position: relative; margin-top: 1.1em; padding-right: var(--pad); }
.dumb-grid {
  position: absolute; inset: 0 var(--pad) 0 var(--lw);
  display: flex; justify-content: space-between;
}
.dumb-grid i { width: 1px; background: var(--rule); }
.dumb-row {
  position: relative;
  display: grid; grid-template-columns: var(--lw) 1fr; align-items: center;
  min-height: 3.5em;
}
.dumb-label { padding-right: 1em; text-align: right; }
.dumb-label span { display: block; color: var(--ink-2); font-size: .88em; margin-top: .1em; }
.dumb-track { position: relative; height: 100%; }
.dumb-bar { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--hand-soft); }
.dumb-track .dot { top: 50%; }
.dumb-track b {
  position: absolute; top: 50%; transform: translate(.85em, -50%);
  font-weight: 400;
}
.dumb-axis { position: relative; height: 1.7em; margin: .35em var(--pad) 0 var(--lw); color: var(--ink-2); }
.dumb-axis span { position: absolute; top: .3em; transform: translateX(-50%); white-space: nowrap; }

/* -- Fig. 3: four labelled points. --yw is the width of the y-axis gutter -- */
.scatter { --yw: 2.7em; }
.scatter .axis-title { color: var(--ink-2); }
.scatter-frame { position: relative; margin-top: .9em; padding-left: var(--yw); }
.scatter-y { position: absolute; left: 0; top: 0; bottom: 0; width: var(--yw); color: var(--ink-2); }
.scatter-y span { position: absolute; right: .6em; transform: translateY(-50%); }
.scatter-plot { position: relative; aspect-ratio: 37 / 25; }
.scatter-plot .gl { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); }
.scatter-plot .gl-base { background: var(--rule-2); }
.pt { position: absolute; width: 0; height: 0; }
.pt::before { content: ""; position: absolute; width: 34px; height: 34px; left: -17px; top: -17px; border-radius: 50%; }
.pt .dot { left: 0; top: 0; width: 12px; height: 12px; }
.pt:focus-visible { outline: none; }
.pt:focus-visible .dot { box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--hand); }   /* the ring goes round the dot */
.pt-name { position: absolute; left: .75em; top: 0; transform: translateY(-50%); white-space: nowrap; }
.pt-left .pt-name { left: auto; right: .75em; }
.scatter-x { position: relative; height: 1.7em; margin: .2em 0 0 var(--yw); color: var(--ink-2); }
.scatter-x span { position: absolute; top: .35em; transform: translateX(-50%); white-space: nowrap; }
.axis-title-x { margin-left: var(--yw); margin-top: .5em; text-align: center; }

/* tooltip: one element, moved around by main.js */
.tip {
  position: fixed; z-index: 20; pointer-events: none;
  max-width: 17rem; padding: .55em .8em;
  background: var(--ink); color: var(--paper);
  font-size: var(--t-1); line-height: 1.35;
}
.tip strong { display: block; font-weight: 400; font-style: italic; opacity: .78; margin-bottom: .15em; }
.tip span { display: block; }

/* tables: the same numbers, for reading rather than looking */
.numbers { width: 100%; border-collapse: collapse; font-size: var(--t-1); line-height: 1.35; }
.numbers caption { text-align: left; font-style: italic; color: var(--ink-2); padding-bottom: .6em; }
.numbers th, .numbers td { padding: .5em 0; text-align: left; font-weight: 400; border-top: 1px solid var(--rule); }
.numbers thead th { color: var(--ink-2); font-style: italic; border-top: 1px solid var(--rule-2); }
.numbers tbody tr:last-child > * { border-bottom: 1px solid var(--rule-2); }
.numbers .num { text-align: right; padding-left: .9em; white-space: nowrap; }
.table-scroll .numbers tbody th { white-space: nowrap; }
.table-scroll { overflow-x: auto; }

.figure-data summary { font-size: var(--t-1); font-style: italic; color: var(--ink-2); cursor: pointer; width: fit-content; }
.figure-data summary:hover { color: var(--hand); }
.figure-data[open] summary { margin-bottom: .8em; }


/* ---------- 9. Record ------------------------------------------------------ */

.ledger { margin-top: clamp(1.5rem, 4vw, 3rem); }
.ledger h3 {
  font-size: var(--t0); font-style: italic; color: var(--ink-2);
  margin-top: 2.6em; padding-bottom: .6em;
}
.ledger h3:first-child { margin-top: 0; }
.ledger li {
  display: grid; grid-template-columns: var(--cols); gap: var(--gap);
  padding-block: 1em;
  border-top: 1px solid var(--rule);
}
.ledger ol li:last-child { border-bottom: 1px solid var(--rule); }
.when { color: var(--ink-2); }
.role { font-size: var(--t1); line-height: 1.3; }
.org  { color: var(--ink-2); margin-top: .2em; }
.note { max-width: 31em; margin-top: .7em; }


/* ---------- 10. Contact ---------------------------------------------------- */

.contact-body {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  margin-left: var(--spine);          /* starts on the spine, like every right-hand column */
}
.contact-line { font-size: var(--t1); line-height: 1.45; max-width: 24em; }
.contact-mail { font-size: min(var(--t2), 5.3vw); line-height: 1.3; margin-top: .9em; overflow-wrap: anywhere; }   /* shrinks on phones so the address stays on one line */
.signature {
  font-family: "Aref Ruqaa", var(--arabic);
  font-size: var(--t3); line-height: 1.7;
  color: var(--hand);
  text-align: left;
  margin-top: .9em;
}


/* ---------- 11. Foot ------------------------------------------------------- */

.foot-in {
  display: grid; grid-template-columns: var(--cols); gap: .6rem var(--gap);
  padding-block: 1.6rem 3rem;
  border-top: 1px solid var(--ink);
  font-size: var(--t-1); color: var(--ink-2);
}
.colophon { max-width: 31em; font-style: italic; }
.colophon i { font-style: normal; }


/* ---------- 12. Narrower screens ------------------------------------------- */

@media (max-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 3rem; }
  .dial { justify-self: start; width: min(100%, 26rem); }
  .dial text { font-size: 11.5px; }
  .dial .axis-name { font-size: 10px; }

  .standard-body, .section-head, .project, .foot-in { grid-template-columns: minmax(0, 1fr); }
  .section-head { gap: .8rem; }
  .project { gap: 2.5rem; }

  .ledger li { grid-template-columns: minmax(0, 1fr); gap: .35em; }
  .contact-body { margin-left: 0; }
}

@media (max-width: 40rem) {
  .hero h1 { letter-spacing: .24em; }

  /* the spine turns into a pause between the two lines */
  .standard-pair { grid-template-columns: 1fr; gap: 0; }
  .standard-pair::before { display: none; }
  .maxim:first-child { padding-bottom: 2.2rem; border-bottom: 1px solid var(--rule-2); }
  .maxim:last-child  { padding-top: 2rem; }
  .maxim blockquote, .identity { font-size: var(--t3); }

  .dumb { --lw: 5.6em; }
  .manner > div { grid-template-columns: 5.6em 1fr; }
}


/* ---------- 13. Motion and print ------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
}

@media print {
  .top nav, .skip, .hint, .tip { display: none; }
  body { background: #fff; color: #000; }
}