/* chrome lifted verbatim from sharvilsaxena.com/styles.css */
@font-face{font-family: Geist;
  src: url("/assets/fonts/geist.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;}
@font-face{font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;}
@font-face{font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-display: swap;
  font-weight: 600;}
@font-face{font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-400.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;}
.theme-toggle,
.menu-trigger,
.menu-close,
.menu-theme{border: 0;
  background: none;
  color: var(--signal-muted);
  font:
    500 11px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;}
.page-loader{position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  gap: 28px;
  background: var(--signal-bg);
  color: var(--signal-text);
  animation: loader-leave 0.7s 1.45s var(--ease) forwards;}
.loader-name{font: 400 clamp(46px, 6vw, 86px)/1 "Bodoni Moda", "Times New Roman", serif;
  letter-spacing: -0.06em;
  filter: blur(10px);
  opacity: 0;
  animation: loader-name 0.75s 0.08s var(--ease) forwards;}
.loader-rule{width: min(320px, 70vw); height: 1px; overflow: hidden; background: var(--signal-line);}
.loader-rule i{display: block; width: 100%; height: 100%; background: var(--signal-text); transform: translateX(-100%); animation: loader-rule 1s 0.2s var(--ease) forwards;}
.bottom-menu-trigger{position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 110;
  min-width: 116px;
  height: 42px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border: 1px solid var(--signal-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--signal-bg) 86%, transparent);
  color: var(--signal-text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font: 500 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateX(-50%);
  transition: width 0.45s var(--ease), background 0.25s, color 0.25s;}
.bottom-menu-trigger:hover{background: var(--signal-text); color: var(--signal-bg);}
.bottom-menu-trigger i{font-size: 15px; font-style: normal; transition: transform 0.45s var(--ease);}
.bottom-menu-trigger[aria-expanded="true"] i{transform: rotate(45deg);}
.site-menu{position: fixed;
  inset: 0;
  z-index: 100;
  padding: 32px clamp(25px, 4vw, 70px) 90px;
  display: grid;
  align-items: end;
  background: color-mix(in srgb, var(--signal-bg) 76%, transparent);
  color: var(--signal-text);
  backdrop-filter: blur(28px) saturate(0.6);
  -webkit-backdrop-filter: blur(28px) saturate(0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s;}
.site-menu.is-open{opacity: 1; visibility: visible;}
.site-menu nav{justify-self: center;
  width: min(570px, 100%);
  display: grid;}
.site-menu nav a{position: relative;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: baseline;
  border-bottom: 1px solid var(--signal-line);
  font: 400 clamp(48px, 7vw, 92px)/1 "Bodoni Moda", serif;
  letter-spacing: -0.055em;
  transform: translateY(36px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), font-style 0.2s;}
.site-menu.is-open nav a{transform: none; opacity: 1;}
.site-menu.is-open nav a:nth-child(2){transition-delay: 0.04s;}
.site-menu.is-open nav a:nth-child(3){transition-delay: 0.08s;}
.site-menu.is-open nav a:nth-child(4){transition-delay: 0.12s;}
.site-menu.is-open nav a:nth-child(5){transition-delay: 0.16s;}
.site-menu nav a::after{content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: var(--signal-text);
  transition: width 0.45s var(--ease);}
.site-menu nav:has(a:hover) a:not(:hover){opacity: 0.2;}
.site-menu.is-open nav a:hover{transform: translateX(8px);}
.site-menu nav a:hover::after{width: 100%;}
.site-menu nav span{font: 400 9px "IBM Plex Mono", monospace; letter-spacing: 0; color: var(--signal-muted);}
.menu-theme{position: absolute; left: clamp(25px, 4vw, 70px); bottom: 31px;}
.paper-header{width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #d2cec6;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;}
.paper-header nav{display: flex; gap: 26px; color: #85827c;}
.paper-header > span{color: #85827c;}
.paper-header nav a{transition: color 0.25s ease;}
.paper-header nav:has(a:hover) a:not(:hover){color: #bbb7af;}
.paper-header nav a:hover{color: #30302e;}
.page-title{padding: clamp(90px, 14vw, 190px) 0 clamp(80px, 11vw, 140px);
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 320px;
  align-items: end;
  gap: 32px;}
.page-title > span,
.archive-copy > span,
.essay-entry > div,
.privacy-note > span{color: #8d8a83; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;}
.page-title h1,
.privacy-note h1{margin: 0;
  font: 400 clamp(60px, 8vw, 120px)/0.84 "Bodoni Moda", serif;
  letter-spacing: -0.065em;}
.page-title > p{margin: 0; color: #6e6c67; font-size: 11px; line-height: 1.7;}
.paper-footer{width: min(1720px, calc(100% - 64px)); min-height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #d2cec6; color: #8d8a83; font: 400 9px "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 0.08em;}
.paper-footer nav{display: flex; gap: 8px;}
.paper-footer a{width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #d2cec6; transition: background 0.25s, transform 0.35s var(--ease);}
.paper-footer a:hover{background: #ebe7df; transform: translateY(-2px);}
.paper-footer img{width: 14px; height: 14px; opacity: 0.72;}

/* study.sharvilsaxena.com — sharvilsaxena.com's identity, applied to the
   MA 26100 pages.

   The guide is fully tokenised: sixteen custom properties carry every colour,
   shadow and font stack it uses. So the re-skin is a token remap and nothing
   else — no markup is touched, no section is dropped, no layout changes. The
   topographic-survey structure survives; only the pigments change.

   The original palette was USGS map colours on a pale green ground. This one is
   the site's warm bone paper (#f4f1ec / #30302e) with its gold and lime doing
   the accent work. Four semantic hues are still four distinguishable hues,
   because the guide leans on them: contour = level sets, water = flow and flux,
   veg = the answer, revise = the punchline. Collapsing them to one gold would
   have cost real information.

   Loaded after the guide's own <style>, so these :root rules win on order. */

/* ------------------------------------------------------------- light ---- */
:root {
  --paper: #f4f1ec;
  --paper-2: #eae6df;
  --card: #fbf9f6;

  --ink: #30302e;
  --ink-2: #5e5b55;
  --ink-3: #93918b;

  --rule: #d2cec6;
  --rule-2: #e4e0d9;

  --contour: #8a6a3b; /* bronze — the --gold family, dark enough to read */
  --water: #45687a;
  --veg: #55763e;
  --revise: #a8452f;

  --shadow: 0 1px 2px rgba(48, 48, 46, 0.05), 0 10px 30px -20px rgba(48, 48, 46, 0.28);

  --disp: Geist, "Helvetica Neue", Arial, sans-serif;
  --body: Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* the site's own tokens, for the chrome lifted from it verbatim */
  --signal-bg: #f4f1ec;
  --signal-text: #30302e;
  --signal-muted: #93918b;
  --signal-line: #d2cec6;
  --gold: #c7b58a;
  --lime: #c9f45b;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

/* -------------------------------------------------------------- dark ---- */
/* Two selectors, because two systems meet here: the guide drives itself from
   :root[data-theme], the site from body.is-dark. study.js sets both, so either
   entry point lands in the same place. */
:root[data-theme="dark"],
:root:has(body.is-dark) {
  --paper: #161615;
  --paper-2: #101010;
  --card: #1e1e1c;

  --ink: #e7e3dc;
  --ink-2: #a9a59d;
  --ink-3: #85827c;

  --rule: #383734;
  --rule-2: #2a2926;

  --contour: #c7b58a; /* the site's gold, unmodified */
  --water: #8fb6c7;
  --veg: #c9f45b; /* the site's lime: the answer colour */
  --revise: #e08a6e;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 10px 30px -20px rgba(0, 0, 0, 0.8);

  --signal-bg: #161615;
  --signal-text: #e7e3dc;
  --signal-muted: #85827c;
  --signal-line: #383734;
  color-scheme: dark;
}

/* The guide ships a prefers-color-scheme rule that would fight an explicit
   choice. study.js always writes data-theme, so pin the system default to the
   same tokens and let the attribute decide. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --paper: #161615;
    --paper-2: #101010;
    --card: #1e1e1c;
    --ink: #e7e3dc;
    --ink-2: #a9a59d;
    --ink-3: #85827c;
    --rule: #383734;
    --rule-2: #2a2926;
    --contour: #c7b58a;
    --water: #8fb6c7;
    --veg: #c9f45b;
    --revise: #e08a6e;
    --signal-bg: #161615;
    --signal-text: #e7e3dc;
    --signal-muted: #85827c;
    --signal-line: #383734;
    color-scheme: dark;
  }
}

/* ------------------------------------------- type: metric repairs only --- */
/* The guide already sets every label in var(--mono) at a size and tracking it
   chose deliberately — .lbl at 10px/.14em, .eyebrow at 11px/.16em, and so on.
   Restyling those here was a mistake: it flattened all of them to one tracking
   and shrank the eyebrows, which is what threw the spacing out. The tokens do
   the work; the components are left alone.

   What does need repair is metrics. Swapping --disp to Geist and --mono to IBM
   Plex Mono changes how much vertical room a glyph wants, and the guide sets
   several small labels at line-height 1 — fine for Archivo and JetBrains Mono,
   a shear for these. Anything inside an overflow-hidden box loses its
   ascenders. So: give exactly those cases room, and change nothing else. */

/* The quiz rail clips overflow-y to keep the condensing animation tidy, so
   line-height 1 on the tab labels cut the tops off every tab. */
.tabs button b {
  line-height: 1.22;
}
.tabs button i {
  line-height: 1.2;
  max-height: 14px;
}
.picker.stuck .tabs button i {
  max-height: 0;
}

/* Same story, less visibly, on the small uppercase labels. */
.lbl,
.eyebrow,
.sec-n,
.chip,
.qz {
  line-height: 1.15;
}

/* Bodoni is the site's display face, used once per page at display size —
   never for running heads, where its hairlines disappear. */
.page-title h1,
.hero h1,
.study-hero h1 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.045em;
}

/* --------------------------------------------------- chrome adjustments -- */
/* The lifted chrome assumes it owns the page. Here it sits above the guide's
   own sticky rail and hero, so it needs to be transparent to layout. */
.paper-header {
  font-family: var(--mono);
  color: var(--ink-3);
  border-bottom-color: var(--rule);
  background: transparent;
}
.paper-header a {
  color: var(--ink);
  text-decoration: none;
}
.paper-header a:hover {
  color: var(--contour);
}

.paper-footer {
  border-top-color: var(--rule);
  color: var(--ink-3);
  background: transparent;
}
.paper-footer img {
  width: 15px;
  height: 15px;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.paper-footer a:hover img {
  opacity: 1;
}
:root[data-theme="dark"] .paper-footer img,
:root:has(body.is-dark) .paper-footer img {
  filter: invert(1);
  opacity: 0.5;
}

.bottom-menu-trigger,
.site-menu {
  font-family: var(--mono);
}
.bottom-menu-trigger {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  color: var(--ink);
}
.site-menu {
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  color: var(--ink);
}
.site-menu nav a {
  color: var(--ink);
}
.menu-theme {
  border-color: var(--rule);
  color: var(--ink);
}

/* The guide pins its own back-link top-left, where the header now lives. */
.sitenav {
  display: none !important;
}

/* Give the fixed bottom pill room so it never covers the last line. */
body {
  padding-bottom: 76px;
}

/* --------------------------------------------------------- study index -- */
.study-page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  min-height: 100svh;
}
.study-wrap {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.study-hero {
  padding: clamp(64px, 14vh, 150px) 0 clamp(40px, 8vh, 80px);
  border-bottom: 1px solid var(--rule);
}
.study-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(56px, 9vw, 122px);
  line-height: 0.85;
}
.study-hero p {
  max-width: 60ch;
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink-2);
}
.study-hero .eyebrow {
  display: block;
  margin-bottom: 22px;
  color: var(--ink-3);
}

.course-list {
  padding: clamp(30px, 6vh, 58px) 0 20px;
}
.course {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: opacity 0.25s var(--ease);
}
.course:hover {
  opacity: 0.62;
}
.course-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.course h2 {
  margin: 14px 0 8px;
  font-family: var(--disp);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.course p {
  max-width: 68ch;
  margin: 0 0 16px;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}
.course-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.course-meta span {
  padding: 5px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.course-meta b {
  color: var(--contour);
  font-weight: 600;
}

.study-soon {
  padding: 26px 0 90px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.study-soon b {
  color: var(--ink-2);
  font-weight: 400;
}