/* husamlab.uk — lab-notebook aesthetic: graph paper, ink, one reagent accent. */

/* ---------- tokens ---------- */
:root {
  --paper:      #F2EEE4;
  --paper-sunk: #E8E2D4;
  --ink:        #17150F;
  --ink-soft:   #4C473B;
  --ink-faint:  #6E6959;
  --accent:     #C93F16;
  --accent-wash: rgba(201, 63, 22, .13);
  --rule:       rgba(23, 21, 15, .16);
  --rule-soft:  rgba(23, 21, 15, .09);
  --grid:       rgba(23, 21, 15, .050);
  --grid-major: rgba(23, 21, 15, .075);
  --grain-op:   .045;

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
  --ledger: minmax(4.5rem, 9rem) minmax(0, 1fr) minmax(0, 1.45fr);
  --ledger-gap: clamp(2rem, 5vw, 4.5rem);
  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #121110;
    --paper-sunk: #1B1A17;
    --ink:        #EDE7DA;
    --ink-soft:   #ADA595;
    --ink-faint:  #948D7C;
    --accent:     #FF6B3D;
    --accent-wash: rgba(255, 107, 61, .16);
    --rule:       rgba(237, 231, 218, .18);
    --rule-soft:  rgba(237, 231, 218, .10);
    --grid:       rgba(237, 231, 218, .042);
    --grid-major: rgba(237, 231, 218, .065);
    --grain-op:   .06;
  }
}

/* Arabic typography swap — Amiri for display, Plex Sans Arabic for text. */
:root:lang(ar) {
  --display: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --mono:    "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  background-color: var(--paper);
  /* graph paper: fine 8px cells over a 64px major grid */
  background-image:
    linear-gradient(to right,  var(--grid-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
    linear-gradient(to right,  var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 8px 8px, 8px 8px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(.95rem, .9rem + .25vw, 1.0625rem);
  line-height: 1.72;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:lang(ar) body { line-height: 1.95; }

/* film grain over everything, no interaction */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain-op);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; }

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .6rem 1rem;
  font-size: .8rem;
  text-decoration: none;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ---------- masthead ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: clamp(1.1rem, 3vw, 2rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  letter-spacing: -.01em;
}
.brand__mark { width: 1.4rem; height: 1.4rem; color: var(--accent); flex: none; }
.brand__name { font-size: .95rem; font-weight: 600; }
.brand__tld { color: var(--ink-faint); font-weight: 400; }
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.06); }
.brand__mark { transition: transform .4s var(--ease); }

.masthead__meta { display: inline-flex; align-items: center; gap: clamp(.9rem, 3vw, 1.75rem); }

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:lang(ar) .status { letter-spacing: 0; text-transform: none; font-size: .8rem; }

.status__dot {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-wash);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
  0%          { box-shadow: 0 0 0 0 var(--accent-wash); }
  60%, 100%   { box-shadow: 0 0 0 .55rem transparent; }
}

.lang {
  font: inherit;
  font-size: .78rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .3rem .95rem;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.lang:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- shared ---------- */
.eyebrow {
  margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
:lang(ar) .eyebrow { letter-spacing: 0; text-transform: none; font-size: .85rem; }

.section-title {
  margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.section-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}
:lang(ar) .section-title { letter-spacing: 0; text-transform: none; font-size: .85rem; }

.lead {
  max-width: var(--measure);
  margin: 0;
  font-size: clamp(1.02rem, .95rem + .5vw, 1.35rem);
  line-height: 1.62;
  color: var(--ink-soft);
}
.lead b { color: var(--ink); font-weight: 600; }
:lang(ar) .lead { line-height: 1.9; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: clamp(3.5rem, 10vw, 7.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

.hero__body { position: relative; z-index: 2; max-width: 46rem; }

.hero__title {
  margin: 0 0 clamp(1.6rem, 4vw, 2.4rem);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 1.5rem + 10vw, 8.5rem);
  line-height: .88;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  text-wrap: balance;
}
:lang(ar) .hero__title {
  line-height: 1.42;
  letter-spacing: 0;
  font-size: clamp(2.5rem, 1.1rem + 7.5vw, 6.25rem);
  font-weight: 700;
}

/* hand-drawn highlight under the key word */
.marked {
  position: relative;
  background: transparent;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "SOFT" 60, "WONK" 1;
}
.marked::after {
  content: "";
  position: absolute;
  inset-inline: -.06em;
  bottom: -.12em;
  height: .075em;
  background: var(--accent);
  transform: scaleX(0) rotate(-.5deg);
  transform-origin: var(--mark-origin, left);
  animation: sweep 1s var(--ease) 1.1s forwards;
}
[dir="rtl"] .marked::after { --mark-origin: right; }
/* Arabic letterforms sit lower and carry marks — drop the rule clear of them */
:lang(ar) .marked::after { bottom: -.06em; height: .05em; }
@keyframes sweep { to { transform: scaleX(1) rotate(-.5deg); } }

/* decorative plotted curve */
.plot {
  position: absolute;
  inset-block-start: clamp(4rem, 12vh, 9rem);
  inset-inline-end: clamp(1rem, 4vw, 4rem);
  width: min(42%, 30rem);
  height: min(58%, 26rem);
  margin: 0;
  color: var(--accent);
  opacity: .42;
  pointer-events: none;
  display: grid;
  place-items: center;
  z-index: 1;
}
[dir="rtl"] .plot { transform: scaleX(-1); }
.plot__svg { width: 100%; height: 100%; }
.plot__axis { color: var(--ink-faint); opacity: .5; }
.plot__line { stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 2.4s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.plot__dots circle { opacity: 0; animation: pop .5s var(--ease) forwards; }
.plot__dots circle:nth-child(1) { animation-delay: 1.3s; }
.plot__dots circle:nth-child(2) { animation-delay: 1.7s; }
.plot__dots circle:nth-child(3) { animation-delay: 2.1s; }
.plot__dots circle:nth-child(4) { animation-delay: 2.5s; }
@keyframes pop { from { opacity: 0; r: 0; } to { opacity: 1; } }

@media (max-width: 60rem) { .plot { display: none; } }

/* identity card — tilted, dashed, taped to the page */
.card {
  position: relative;
  z-index: 3;
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  margin-inline-start: 0;
  width: min(21rem, 100%);
  padding: 1.15rem 1.25rem 1rem;
  background: var(--paper);
  border: 1px dashed var(--rule);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .5rem 1rem;
  transform: rotate(-1.1deg);
  transition: transform .5s var(--ease);
  box-shadow: 0 1px 0 var(--rule-soft), 12px 14px 0 -6px var(--accent-wash);
}
[dir="rtl"] .card { transform: rotate(1.1deg); }
.card:hover { transform: rotate(0deg); }

.card__photo {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  padding: .2rem;
  filter: grayscale(1) contrast(1.06);
  transition: filter .5s var(--ease);
}
.card:hover .card__photo { filter: grayscale(0) contrast(1); }

.card__id { margin: 0; line-height: 1.35; }
.card__name {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1;
}
:lang(ar) .card__name { letter-spacing: 0; font-weight: 700; font-size: 1.5rem; }

.card__role {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
:lang(ar) .card__role { letter-spacing: 0; text-transform: none; font-size: .8rem; }

.card__note {
  grid-column: 1 / -1;
  margin: .35rem 0 0;
  padding-top: .7rem;
  border-top: 1px dotted var(--rule-soft);
  color: var(--accent);
  font-size: .78rem;
}
:lang(ar) .card__note { font-size: .85rem; }

/* ---------- entries ---------- */
.entries {
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.entries__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}

.entry {
  display: grid;
  grid-template-columns: minmax(3.25rem, 5rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: .5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .35s var(--ease);
}
.entry__num  { grid-row: 1 / span 2; }
.entry__title { grid-column: 2; }
.entry__desc { grid-column: 2; }

/* wide: read as a three-column lab index */
@media (min-width: 62rem) {
  .entry {
    grid-template-columns: var(--ledger);
    column-gap: var(--ledger-gap);
    align-items: start;
  }
  .entry__num   { grid-row: 1; }
  .entry__title { grid-column: 2; }
  .entry__desc  { grid-column: 3; padding-top: .5rem; }
}
.entry:hover { background: var(--paper-sunk); }

.entry__num {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1;
  color: var(--ink-faint);
  font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1;
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.entry:hover .entry__num { color: var(--accent); transform: translateX(.35rem); }
:lang(ar) .entry__num { font-weight: 700; letter-spacing: .04em; }
[dir="rtl"] .entry:hover .entry__num { transform: translateX(-.35rem); }

.entry__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 90, "SOFT" 20, "WONK" 1;
}
:lang(ar) .entry__title { letter-spacing: 0; line-height: 1.4; font-weight: 700; }
.entry__desc {
  margin: 0;
  max-width: 52ch;
  color: var(--ink-soft);
  font-size: .93rem;
}
:lang(ar) .entry__desc { font-size: 1rem; }

/* ---------- 404 ---------- */
.notfound {
  padding: clamp(4rem, 14vw, 10rem) var(--gutter) clamp(4rem, 10vw, 8rem);
  max-width: 46rem;
}
.notfound__title {
  margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.5rem + 6vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
}
:lang(ar) .notfound__title { line-height: 1.35; letter-spacing: 0; font-weight: 700; }

.notfound__back {
  display: inline-block;
  margin-top: 1.75rem;
  color: var(--accent);
  text-decoration: none;
  font-size: .85rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: .15em;
  transition: opacity .25s var(--ease);
}
.notfound__back:hover { opacity: .65; }

/* ---------- colophon ---------- */
.colophon {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding: clamp(1.75rem, 4vw, 2.5rem) var(--gutter) clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
  font-size: .78rem;
  color: var(--ink-faint);
}
.colophon p { margin: 0; }
.colophon__note { max-width: 42ch; }
.colophon__meta { display: inline-flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.colophon a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: .1em;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.colophon a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- entrance choreography ---------- */
@media (prefers-reduced-motion: no-preference) {
  .eyebrow, .hero__title, .lead, .card, .plot {
    animation: rise .9s var(--ease) both;
  }
  .eyebrow      { animation-delay: .05s; }
  .hero__title  { animation-delay: .16s; }
  .lead         { animation-delay: .30s; }
  .card         { animation-delay: .46s; }
  .plot         { animation-delay: .30s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; }
  }
  /* keep the tilt on the card while it rises */
  .card { animation-name: rise-tilt; }
  @keyframes rise-tilt {
    from { opacity: 0; transform: translateY(1.1rem) rotate(-1.1deg); }
    to   { opacity: 1; transform: translateY(0) rotate(-1.1deg); }
  }
  [dir="rtl"] .card { animation-name: rise-tilt-rtl; }
  @keyframes rise-tilt-rtl {
    from { opacity: 0; transform: translateY(1.1rem) rotate(1.1deg); }
    to   { opacity: 1; transform: translateY(0) rotate(1.1deg); }
  }

  /* sections fade in as they enter the viewport */
  .reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-visible { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .marked::after { transform: scaleX(1); }
  .plot__line { stroke-dashoffset: 0; }
  .plot__dots circle { opacity: 1; }
}