/* ==========================================================================
   rezaali.my — layout and type
   Shape: the Seth Rail. Fixed 320px left rail with one small portrait at its
   head, ~740px reading column centred in the remainder, current piece on
   screen one. No hero band.
   Zero JavaScript on content pages. No framework.
   ========================================================================== */

/* ---- font: one variable file covers the whole weight range --------------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/sourceserif4-var.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/sourceserif4-var-italic.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}

/* ---- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

/* ---- the rail portrait -------------------------------------------------- */
/* the rail portrait — one picture, at the top of the rail, in the manner of
   Seth Godin's sidebar: small, singular, on every page, never a hero band. */
.rail-portrait { display: block; margin: 0 0 1.5rem; }
.rail-portrait img {
  display: block;
  width: 100%;
  max-width: 248px;
  height: auto;
  border: 1px solid var(--rule);
}

/* ---- shell: rail + reading column --------------------------------------- */
.shell { display: flex; align-items: flex-start; }

.rail {
  flex: 0 0 var(--rail-width);
  width: var(--rail-width);
  position: sticky;
  top: 0;
  padding: 3.5rem var(--rail-pad);
  border-right: 1px solid var(--rule);
}

.wordmark {
  font-size: var(--size-wordmark);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
.wordmark a { color: inherit; text-decoration: none; }

.officeline {
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

/* the role line. "Director of AI Policy, AI Malaysia" becomes "former" on
   31 Dec 2026 — one edit here plus one on the About page at the turn of the year. */
.role {
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 2.125rem;
}

.rail nav ul { list-style: none; padding: 0; }
.rail nav li { margin: 0; }
.rail nav a {
  display: inline-block;
  padding: 0.44rem 0;
  font-size: var(--size-nav);
  color: var(--ink);
  text-decoration: none;
}
.rail nav a:hover { text-decoration: underline; }
.rail nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.rail nav .sub { margin: 0.35rem 0 0 0.875rem; }
.rail nav .sub a {
  font-size: var(--size-small);
  color: var(--muted);
  padding: 0.25rem 0;
}

/* the foot of the rail: standing lines, not navigation */
.rail-foot {
  margin-top: 3.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
  font-size: var(--size-small);
  line-height: 1.6;
  color: var(--muted);
}
.rail-foot p { margin-bottom: 0.7rem; }
.values { letter-spacing: 0.02em; }

/* ---- long-form pages ---------------------------------------------------- */
.page h1 { font-size: var(--size-h1); font-weight: 600; line-height: 1.22; margin-bottom: 1.6rem; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink); margin-bottom: 1.6rem; }
.values-list { margin: 0 0 1.5rem; }
.values-list dt { font-weight: 600; margin-top: 1.2rem; }
.values-list dd { margin: 0.25rem 0 0; }

.col { flex: 1 1 auto; padding: 3.5rem var(--gutter) 6rem; }
.col-inner { max-width: var(--measure); margin: 0 auto; }

/* ---- the current piece -------------------------------------------------- */
.piece h1 {
  font-size: var(--size-h1);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.005em;
  margin-bottom: 0.6rem;
}
.piece .date {
  font-size: var(--size-small);
  color: var(--muted);
  margin-bottom: 2.125rem;
}
.prose p { margin-bottom: var(--space-block); }
.prose h2 { font-size: var(--size-h2); font-weight: 600; margin: 2.6rem 0 0.9rem; }
.prose blockquote {
  font-style: italic;
  margin: 2rem 0;
  padding-left: 1.5rem;
  border-left: 1px solid var(--rule-strong);
  color: var(--ink);
}
.prose ul { padding-left: 1.2rem; margin-bottom: var(--space-block); }
.prose li { margin-bottom: 0.4rem; }
.prose img { margin: 2rem 0; }
.prose figcaption,
.prose .caption { font-size: var(--size-small); color: var(--muted); margin-top: 0.6rem; }

/* ---- earlier pieces ----------------------------------------------------- */
.divider { border: 0; border-top: 1px solid var(--rule); margin: 3.4rem 0 2.4rem; }
.earlier h2 {
  font-size: var(--size-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.earlier ul { list-style: none; padding: 0; }
.earlier li { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.5rem 0; }
.earlier .t { text-decoration: none; }
.earlier time { color: var(--muted); font-size: var(--size-small); white-space: nowrap; }

/* ---- archive index ------------------------------------------------------ */
.section-label {
  font-size: var(--size-small);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.era { margin-bottom: 2.6rem; }
.era h2 { font-size: var(--size-h2); font-weight: 600; margin-bottom: 0.2rem; }
.era .span { font-size: var(--size-small); color: var(--muted); margin-bottom: 0.9rem; }
.index { list-style: none; padding: 0; }
.index li { padding: 0.4rem 0; display: flex; justify-content: space-between; gap: 1.5rem; }
.index time, .index .when { color: var(--muted); font-size: var(--size-small); white-space: nowrap; }

/* ---- the office / contact section -------------------------------------- */
.notice {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: 1.2rem 0;
  margin: 0 0 2.6rem;
}
.notice p { margin-bottom: 0.5rem; }
.notice p:last-child { margin-bottom: 0; }

.routing { padding-left: 1.2rem; }
.routing li { margin-bottom: 0.5rem; }

form { margin-top: 2.4rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-size: var(--size-small); color: var(--muted); margin-bottom: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 0.6rem 0.7rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
.field .hint { font-size: var(--size-small); color: var(--muted); margin-top: 0.35rem; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 1.6rem; }
.consent input { margin-top: 0.35rem; }
.consent label { font-size: var(--size-small); color: var(--muted); }
.hp { position: absolute; left: -9999px; }        /* honeypot */
button[type="submit"] {
  font: inherit;
  font-size: 1rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
}
button[type="submit"]:hover { background: var(--accent); border-color: var(--accent); }

/* ---- footer ------------------------------------------------------------- */
.foot {
  margin-top: 4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: var(--size-small);
  color: var(--muted);
}
.foot p { margin-bottom: 0.4rem; }

/* ---- flags for undecided content --------------------------------------- */
.todo {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-sunk);
  color: var(--muted);
  padding: 0.2rem 0.45rem;
  display: inline-block;
  margin-bottom: 0.9rem;
}

/* ---- mobile: the rail unpins, nothing fixed, no JS --------------------- */
@media (max-width: 1100px) {
  .col { padding-left: 3.5rem; padding-right: 3.5rem; }
}
@media (max-width: 768px) {
  .shell { display: block; }
  .rail {
    position: static;
    width: 100%;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 2rem 1.25rem 1.4rem;
  }
  .col { padding: 2rem 1.25rem 4rem; }
  .rail nav ul { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
  .rail nav .sub { display: flex; flex-wrap: wrap; gap: 0 0.9rem; margin: 0.2rem 0 0; }  /* social stays, wraps inline */
  .rail nav .sub a { padding: 0.1rem 0; }
  .rail-foot { margin-top: 1.6rem; }
  :root { --size-h1: 1.75rem; }
}
@media print {
  .rail { display: none; }
  .col { padding: 0; }
  a { color: var(--ink); }
}

/* ---- speaking: a dated ledger, not a feed ------------------------------- */
.events { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.events li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
.events time { display: block; font-size: var(--size-small); color: var(--muted); }
.events .what { display: block; }
.events .where { display: block; font-size: var(--size-small); color: var(--muted); }
.year h3 { font-size: var(--size-small); font-weight: 400; letter-spacing: 0.14em;
           text-transform: uppercase; color: var(--muted); margin: 1.8rem 0 0.2rem; }

/* the next engagement, shown in the rail under Speaking */
.rail nav .sub li.next { font-size: var(--size-small); color: var(--muted); line-height: 1.45; padding: 0.25rem 0; }