/* ==========================================================================
   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 appears once on the home page and once on the About page, not in
   the rail on every page. "Director of AI Policy, AI Malaysia" becomes "former" on
   31 Dec 2026 — one edit in src/_data/site.js covers both. */
.standfirst {
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 2rem;
}

.rail nav { margin-top: 2.1rem; }

.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 phone-only menu toggle: on a wide screen the nav is simply present, so both the control
   and the footer's copy of the standing line are out of the way here. */
.nav-toggle, .nav-label { display: none; }
.foot .standing { display: none; }

/* 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; }

/* The provenance note on the About page. A stated fact about how the page was
   made rather than a warning: ruled above and below so it reads as a disclosure
   and not as prose he wrote. */
.provenance {
  font-size: var(--size-small);
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0;
  margin-bottom: 1.8rem;
}
.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;
}
.piece .origin {
  font-size: var(--size-small);
  color: var(--muted);
  margin: -1.4rem 0 2.125rem;
}
.piece-figure { margin: 0 0 2.4rem; }
.piece-figure img { display: block; width: 100%; height: auto; }
.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; }

/* A post's sign-off: the name, then Reza's line, set apart above a rule. The wording matches the
   rail's tagline exactly — "Make Everything A Learning Experience" — because that is the line,
   in both places. The rule is the "dash" of his sign-off, drawn here rather than written into
   every post, so one edit changes all of them. */
.signoff { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--rule);
           color: var(--muted); font-size: var(--size-small); line-height: 1.5; }
.signoff .signoff-name { display: inline-block; margin-bottom: 0.2rem; color: var(--ink);
                         letter-spacing: 0.04em; }

/* A piece the office has pinned to the front page: it sits above the newest, so a reader needs
   telling that it is deliberately there rather than out of order. */
.pinned { font-size: var(--size-small); letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--muted); margin: 0 0 0.45rem; }

/* ---- 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 .t { text-decoration: none; }
/* Each earlier piece is now a short one: the opening paragraph, then the way through to the
   whole piece. The list stopped being a two-column row when the pieces gained excerpts. */
.earlier li + li { margin-top: 1.9rem; }
.brief h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; margin: 0 0 0.2rem; }
.brief .when { color: var(--muted); font-size: var(--size-small); margin: 0 0 0.45rem; }
.brief p { margin: 0 0 0.35rem; }
.brief .more { margin: 0; font-size: var(--size-small); }

/* ---- 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; }
  /* The portrait centres once the rail stacks. On a wide screen it stays left,
     aligned with the wordmark and the nav.
     On a phone the rail is a header, not a page: Seth Godin's mobile view spends 183px
     on portrait, wordmark and a rule, and the rest of the first screen is the post. Left
     at rail scale, the portrait alone spent 248px and the nav 210px, so the first line of
     writing sat at y=737 of an 812px screen. Capped and one wrapped run instead. */
  /* The rail is one header block on a phone: photo, name and the Menu control on one line, the
     tagline beneath them, and the drawer dropping in under all of it. Flex order does this without
     touching the markup, so the desktop rail still stacks exactly as it did. */
  .rail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 1rem;
          padding: 1.1rem 1.25rem 1rem; }
  .rail-portrait { order: 1; flex: 0 0 auto; margin: 0; }
  .rail-portrait img { max-width: 84px; }
  .wordmark { order: 2; flex: 1 1 auto; margin: 0; }
  .officeline { order: 4; flex: 1 1 100%; margin: 0; }
  /* The nav folds into the toggle. Closed it is out of the tab order as well as out of sight;
     open it is the same list the desktop shows, stacked. */
  .nav-toggle { order: 0; display: block; position: absolute; width: 1px; height: 1px; margin: -1px;
                padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .nav-label {
    order: 3; flex: 0 0 auto; display: inline-block; margin: 0; padding: 0.32rem 0.75rem;
    font-size: var(--size-small); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--rule); border-radius: 2px; cursor: pointer;
  }
  .nav-label::after { content: " \25BE"; }
  .nav-toggle:checked ~ .nav-label::after { content: " \25B4"; }
  .nav-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .rail nav { order: 5; flex: 1 1 100%; max-height: 0; visibility: hidden; overflow: hidden;
              margin-top: 0.6rem;
              transition: max-height 0.28s ease, visibility 0s linear 0.28s; }
  .nav-toggle:checked ~ nav { max-height: 34rem; visibility: visible;
                              transition: max-height 0.28s ease, visibility 0s; }
  .rail nav ul, .rail nav .sub { display: block; }
  .rail nav li { display: block; margin-right: 0; }
  .rail nav a { padding: 0.24rem 0; }
  .rail nav .sub { margin: 0.3rem 0 0 0.875rem; }
  /* The standing line moves below the writing on a phone - it renders in the footer instead. */
  .rail-foot { display: none; }
  .foot .standing { display: block; margin-top: 1.5rem; }
  .event-photos.pair { grid-template-columns: 1fr; }
  :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); }
.events .where > span + span::before { content: "\00b7"; margin: 0 0.55em; color: var(--muted); }
.events .role { color: var(--ink); }
.events .what a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.events .what a:hover { border-bottom-color: var(--ink); }

/* ---- engagement pages ---- */
.event-meta { font-size: var(--size-small); color: var(--muted); margin: 0 0 1.9rem; }
.event-meta > * + *::before { content: "\00b7"; margin: 0 0.55em; color: var(--muted); }
.event-meta .event-topic { color: var(--ink); }
.event-photos { margin: 0 0 2rem; display: grid; gap: 0.85rem; }
.event-photos.pair { grid-template-columns: 1fr 1fr; }
.event-photos img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.event-photos figcaption { grid-column: 1 / -1; font-size: var(--size-small); color: var(--muted); margin-top: 0.1rem; }
.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 and the most recent one, shown in the rail under Speaking */
.rail nav .sub li.next, .rail nav .sub li.last { font-size: var(--size-small); color: var(--muted); line-height: 1.45; padding: 0.25rem 0; }

/* The Bahasa Malaysia half of the form's data notice. Section 7(3) wants the notice in both
   languages, so it is present in full: set apart by a rule rather than dimmed. */
.notice-bm { border-left: 2px solid var(--rule); padding-left: 1rem; }