/* ---------------------------------------------------------------
   Academic Compass — base stylesheet
   Built to match aliabdaal.com's actual design system, verified from
   an archived snapshot: warm cream/white alternating sections, a
   rounded serif display face, a humanist sans for everything else,
   fully-pill-shaped colour-block buttons with dark text, big
   confident headlines, short scannable copy. Ali's site uses the
   commercial faces Recoleta (headline) and Elza (body) — Fraunces and
   Plus Jakarta Sans are the closest free equivalents, carrying the
   same warm/rounded character.
------------------------------------------------------------------ */

/* The structural ideas here — white page, off-white panels, pastel
   accents carrying dark text, flat two-tone illustrations — follow the
   same playbook as aliabdaal.com. The palette deliberately does not:
   his is a warm coral/cyan/butter/lavender set on a pink-tinted white.
   This one is botanical and cooler — sage, periwinkle, honey and dusty
   rose on an oat neutral, over a green-cast near-black rather than his
   violet-cast one. Same warmth and confidence, different signature. */
:root {
  --bg: #ffffff;
  --bg-cream: #f1f0ea;      /* oat — panels, cards */
  --ink: #1d2b26;
  --ink-soft: #4f5a55;
  --ink-faint: #6f7873;
  --accent: #7fbfa3;        /* sage — primary CTA */
  --accent-dark: #5a9d80;
  --blue: #8fa9dd;          /* periwinkle — secondary CTA */
  --blue-dark: #6d8bc7;
  --gold: #e8b866;          /* honey — icon accent */
  --lilac: #d29ba8;         /* dusty rose — icon accent */
  --line: #e2e0d6;
  --field-line: #8b948d;    /* form borders — 3:1 against white */
  --radius-card: 28px;
  --radius-panel: 20px;     /* the radius Ali uses on cards + hero */
  --radius-pill: 9999px;
  --serif: "Fraunces", Georgia, "Iowan Old Style", serif;
  --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --max: 1120px;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--ink);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.4em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.55rem; }

p { margin: 0 0 1.1em; }

.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
}

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.narrow {
  max-width: 620px;
}

section {
  padding: 80px 0;
}

.section-cream {
  background: var(--bg-cream);
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: 10px;
}

/* ---------- header / nav ---------- */

.site-header {
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand svg {
  flex-shrink: 0;
}

/* The wordmark stacks over a small byline. line-height is tightened
   from the body default so the two lines read as one lockup rather
   than two separate pieces of text, and the whole block is nudged up
   a little to stay optically centred against the compass mark. */
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-text small {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 3px;
}

nav.main-nav {
  display: flex;
  align-items: center;
  gap: 30px;
}

nav.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.98rem;
  font-weight: 600;
}

/* Excludes .btn, which has its own hover colours. Without the
   :not(), this rule outranks .btn-primary:hover and recoloured the
   YouTube pill's label to the same shade as its hover background,
   making the text vanish. */
nav.main-nav a:not(.btn):hover,
nav.main-nav a:not(.btn).active {
  color: var(--accent-dark);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

@media (max-width: 720px) {
  nav.main-nav {
    position: absolute;
    top: 88px;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 24px 24px;
    display: none;
  }

  nav.main-nav.open {
    display: flex;
  }

  nav.main-nav a {
    padding: 10px 0;
    width: 100%;
  }

  .nav-toggle {
    display: inline-block;
  }
}

/* ---------- buttons (pills) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-pill);
  border: none;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  color: var(--ink);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--accent);
}

.btn-primary:hover {
  background: var(--accent-dark);
  color: var(--ink);
}

.btn-secondary {
  background: var(--blue);
}

.btn-secondary:hover {
  background: var(--blue-dark);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--ink);
}

.btn-outline:hover {
  background: var(--ink);
  color: var(--bg);
}

/* text links styled like Ali's "Get started" pattern */
.text-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
}

.text-link:hover {
  color: var(--accent-dark);
}

/* ---------- hero ----------
   Ali's homepage opens on a warm off-white panel with softly rounded
   corners floating on white, rather than a full-bleed coloured band.
   Same treatment here, inset so the white page shows around it. */

.hero {
  padding: 0;
  margin: 8px 0 0;
}

.hero > .container {
  /* Stacking context for the hero, so the yellow disc behind the
     portrait can sit at z-index -1 without falling behind this panel. */
  position: relative;
  z-index: 0;
  background: var(--bg-cream);
  border-radius: var(--radius-panel);
  padding: clamp(40px, 5.5vw, 84px) clamp(24px, 4.5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 56px;
  align-items: center;
}

.hero h1 {
  margin-bottom: 22px;
}

/* Hand-drawn double underline under one word of the headline — the
   same annotation vocabulary as the circled word further down the
   page, so the two read as one set of marker-pen marks. */
.underlined {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.underlined svg {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 0.3em;
  margin-top: -0.06em;
  overflow: visible;
  color: var(--blue);
}

.hero .lede {
  max-width: 46ch;
  margin-bottom: 30px;
}

.hero .cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 860px) {
  .hero > .container {
    grid-template-columns: 1fr;
  }
  .hero-photo {
    order: -1;
    max-width: 320px;
    margin: 0 auto;
  }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.9rem; }
}

/* Hero portrait — a circle sitting on a warm yellow disc, the same
   shape language Ali uses for his own headshot. Placeholder until a
   real photo is dropped in; swapping in an <img> keeps the shape. */
.hero-photo {
  background: var(--bg);
  border-radius: 50%;
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Positioned but z-index:auto, so this circle's white background
     paints above the negative-z-index disc rather than under it. */
  position: relative;
}

/* The yellow disc is offset behind the portrait so the two circles
   read as a drawn composition rather than concentric rings. */
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -5%;
  background: var(--gold);
  border-radius: 50%;
  /* Nudged rather than concentric, so the ring is weighted to one
     side and reads as placed by hand, not as a border. */
  transform: translate(-2.5%, 1.5%);
  z-index: -1;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.hero-photo svg {
  width: 34%;
  height: 34%;
  color: var(--accent);
  opacity: 0.55;
}

.hero-photo .photo-label {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
}

/* ---------- pillar cards (how can I help you) ----------
   Laid out the way aliabdaal.com does it: two independent columns
   rather than a row-locked grid, with the section heading sitting
   *inside* the first column. That's what produces the staggered,
   masonry-ish rhythm — the right column starts with a card level
   with the heading instead of everything marching in rows. */

.pillar-layout {
  display: flex;
  align-items: flex-start;
  row-gap: 32px;
  column-gap: clamp(24px, 3.4vw, 48px);
}

.pillar-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (max-width: 800px) {
  .pillar-layout { flex-direction: column; gap: 24px; }
  .pillar-col { width: 100%; gap: 24px; }
}

.section-head h2 {
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 12ch;
}

/* Hand-drawn circle accent around one word in a heading. The path is
   the one Ali's theme ships as circle-blue.svg, so the wobble and the
   overshoot where the stroke crosses itself are the real thing rather
   than a clean geometric ellipse pretending to be sketched. */
.circled {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  isolation: isolate;
}

.circled svg {
  position: absolute;
  left: -12%;
  top: -14%;
  width: 124%;
  height: 128%;
  overflow: visible;
  z-index: -1;
  color: var(--blue);
}

/* Cards: flat oat on white, generously padded, no shadow and no
   border — the separation comes purely from the tonal step. These are
   presentational for now, not links, so they carry no hover state:
   a colour change on hover would promise a click that isn't there. */
.pillar-card {
  background: var(--bg-cream);
  border-radius: var(--radius-panel);
  padding: clamp(30px, 4.2vw, 60px);
  display: block;
  color: var(--ink);
}

/* One source of truth for each illustration's accent — the SVGs carry
   no colour of their own, so retinting a card means editing only the
   token above. */
.tint-sage .icon-fill       { fill: var(--accent); }
.tint-periwinkle .icon-fill { fill: var(--blue); }
.tint-honey .icon-fill      { fill: var(--gold); }
.tint-rose .icon-fill       { fill: var(--lilac); }

/* Cards that are genuinely links get a hover state; the presentational
   ones deliberately don't, so the colour change only ever appears where
   there's something to click.
   On hover the card floods with its own accent and the filled part of
   the illustration inverts to white — the dark linework is left alone,
   which is what keeps the drawing readable against the new background. */
a.pillar-card {
  text-decoration: none;
  transition: background-color 0.25s ease;
}

a.pillar-card .icon-fill {
  transition: fill 0.25s ease;
}

a.pillar-card:hover .icon-fill { fill: #fff; }

a.pillar-card.tint-sage:hover       { background: var(--accent); }
a.pillar-card.tint-periwinkle:hover { background: var(--blue); }
a.pillar-card.tint-honey:hover      { background: var(--gold); }
a.pillar-card.tint-rose:hover       { background: var(--lilac); }

/* Keyboard users get the same cue as mouse users. */
a.pillar-card:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.pillar-card,
  a.pillar-card .icon-fill { transition: none; }
}

/* Standalone icon illustrations — no badge box: a coloured
   silhouette with dark linework drawn over it. */
.pillar-card > svg {
  width: clamp(88px, 8.2vw, 118px);
  height: auto;
  display: block;
  overflow: visible;
}

.pillar-card h3 {
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.03em;
  margin: 24px 0 0;
}

.pillar-card p {
  color: var(--ink);
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.6;
  margin: 20px 0 0;
}

/* ---------- newsletter box ---------- */

.newsletter-box {
  background: var(--ink);
  border-radius: var(--radius-card);
  padding: 56px;
  color: #fff;
  text-align: center;
}

.newsletter-box .eyebrow { color: var(--accent); }

.newsletter-box h2 {
  color: #fff;
  margin-bottom: 12px;
}

.newsletter-box p {
  color: #cfc9d6;
  max-width: 50ch;
  margin: 0 auto 28px;
}

@media (max-width: 600px) {
  .newsletter-box { padding: 36px 24px; }
}

/* ---------- forms ---------- */

form .field {
  margin-bottom: 16px;
}

form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.newsletter-box form label {
  color: #cfc9d6;
}

form input[type="text"],
form input[type="email"],
form textarea {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  /* A real border, so fields are visible on the white page. They were
     borderless white-on-white everywhere except the dark newsletter
     box, which is the only place that treatment works. */
  border: 1.5px solid var(--field-line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  box-sizing: border-box;
}

/* Inside the dark newsletter panel the white fill is contrast enough. */
.newsletter-box form input[type="text"],
.newsletter-box form input[type="email"],
.newsletter-box form textarea {
  border-color: transparent;
}

form textarea {
  height: auto;
  padding: 16px 18px;
  border-radius: 20px;
  resize: vertical;
  min-height: 130px;
}

form input:focus,
form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.form-row .field {
  flex: 1 1 220px;
}

.form-inline {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.form-inline .field {
  flex: 1 1 280px;
  max-width: 340px;
  margin-bottom: 0;
}

.form-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 14px;
}

.newsletter-box .form-note {
  color: #a9a2b6;
}

.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.alert {
  padding: 14px 20px;
  border-radius: 16px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}

.alert-success {
  background: #e4f5ea;
  color: #1f6b3d;
}

.alert-error {
  background: #fce6e0;
  color: #b8391b;
}

.alert-on-dark.alert-success { background: rgba(93, 205, 241, 0.16); color: var(--blue); }
.alert-on-dark.alert-error { background: rgba(253, 151, 109, 0.18); color: var(--accent); }

/* ---------- about / bio ---------- */

.bio-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}

/* Narrower avatar column for the short intro blocks. This lives here
   rather than in an inline style so the stacking rule below can still
   win on small screens — as an inline rule it could not be overridden
   and the text column was being squeezed off the side of the page. */
.bio-layout.is-compact { grid-template-columns: 200px 1fr; }

@media (max-width: 780px) {
  .bio-layout,
  .bio-layout.is-compact { grid-template-columns: 1fr; }
  /* Once stacked the avatar has the full column to fill, which turned
     it into a full-width disc. Cap it so it stays a portrait. */
  .bio-layout .avatar-placeholder { max-width: 170px; }
}

.avatar-placeholder {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Warm yellow rather than cream: this sits on white on the about
     page and on cream on the home page, and cream disappeared against
     the latter. Yellow also echoes the hero portrait disc. */
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-placeholder span {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 600;
  color: var(--ink);
}

.quote {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.35;
  color: var(--ink);
  margin: 28px 0;
}

/* ---------- get-resource pages (email-gated single resource) ---------- */

.get-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.get-card {
  background: var(--bg-cream);
  border-radius: var(--radius-card);
  padding: 48px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 600px) {
  .get-card { padding: 32px 24px; }
}

.get-card .icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.get-card h1 { font-size: 2rem; margin-bottom: 10px; }

.get-card .lede { margin: 0 auto 28px; }

.get-card [data-unlock-reveal] {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  margin-top: 22px;
}

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0;
}

.site-footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--ink);
}

.foot-brand svg {
  flex-shrink: 0;
  color: var(--accent-dark);
}

.footer-note {
  font-size: 0.85rem;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* ---------- misc ---------- */

.center { text-align: center; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Cloudflare Turnstile ---------- */

/* The widget is injected by main.js into [data-turnstile]. It renders
   an iframe of a fixed size, so the only job here is spacing and
   keeping it from stretching a flex form row. An empty holder collapses
   to nothing, so pages keep their current spacing when Turnstile is
   switched off. */
[data-turnstile] {
  flex: none;
  /* Belt and braces against the widget forcing the page wider than the
     viewport; main.js also drops to Turnstile compact size below 420px. */
  max-width: 100%;
}

[data-turnstile] > * {
  max-width: 100%;
}

[data-turnstile]:not(:empty) {
  margin: 4px 0 16px;
}

/* The inline newsletter/resource forms lay their children out in a row;
   the widget needs its own line rather than being squeezed beside the
   input and the button. */
.form-inline [data-turnstile]:not(:empty) {
  flex-basis: 100%;
}

/* On the dark newsletter panel, centre it under the input. */
.newsletter-box [data-turnstile]:not(:empty) {
  display: flex;
  justify-content: center;
}