/* ============================================================
   Sway site chrome — banner, sidebar, content shell.

   The .gs-* rules are carried over verbatim from the Google Sites
   replica embedded in the legacy pages (extracted from the live
   Google Sites via getComputedStyle — see docs/ARCHITECTURE.md).
   Two deliberate departures from the legacy replica:
     1. The chrome is always visible (this IS the site now), so the
        body.standalone gating is gone.
     2. Below the 1280px breakpoint the sidebar becomes a slide-in
        drawer opened from a hamburger button in the banner, instead
        of disappearing entirely (the old replica left no navigation
        at all on narrow screens).
   ============================================================ */

/* ---- Tokens ----
   Chrome tokens (--gs-*) are theme-independent: the banner and sidebar are
   always dark, exactly like the legacy pages. Content tokens flip with the
   html.light-mode / html.dark-mode classes (same localStorage 'theme' key
   the legacy pages use, so the choice carries across the whole site).
   Light is the default — :root carries the light values for no-JS visitors. */
:root {
  --gs-banner-bg: rgb(35, 0, 77);
  --gs-sidebar-bg: rgb(25, 24, 26);
  --gs-text: rgb(249, 249, 249);
  --gs-active: rgb(80, 80, 208);
  --banner-h: 64px;
  --sidebar-w: 250px;

  color-scheme: light;
  --page-bg: #ffffff;
  --text: #212529;
  --text-strong: #111118;
  --text-soft: #3f3f46;
  --link-color: #5a5ad1;
  --link-hover: #3a3ab1;
  --rule: rgba(0, 0, 0, 0.16);
  --footer-text: #999999;
  --fab-bg: #ffffff;
  --fab-color: #333333;
  --fab-shadow: rgba(0, 0, 0, 0.22);
}
html.dark-mode {
  color-scheme: dark;
  --page-bg: #000000;
  --text: #f3f3f3;
  --text-strong: #ffffff;
  --text-soft: #d9d9d9;
  --link-color: #8a8aff;
  --link-hover: #b3b3ff;
  --rule: rgba(255, 255, 255, 0.25);
  --footer-text: #999999;
  --fab-bg: #26262c;
  --fab-color: #f3f3f3;
  --fab-shadow: rgba(0, 0, 0, 0.6);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--page-bg);
  scroll-behavior: smooth;
  /* Fluid root size: content type scales with the window so large displays
     read comfortably by default (≈20.5px at 1728px wide, 16px floor on
     small screens, 21.5px cap). Everything sized in rem scales with it;
     the banner/sidebar chrome is deliberately fixed in px. */
  font-size: clamp(16px, 11px + 0.55vw, 21.5px);
}
body {
  margin: 0;
  padding: var(--banner-h) 0 0 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 1280px) {
  body { margin-left: var(--sidebar-w); }
}

/* ---- Banner (Google Sites announcement bar) ---- */
.gs-banner{display:flex;position:fixed;top:0;left:0;right:0;z-index:1300;height:64px;background-color:rgb(35,0,77);padding:0 12px;justify-content:center;align-items:center}
.gs-banner p{font-family:Roboto,sans-serif;font-weight:300;font-size:16px;color:rgb(255,255,255);margin:16px 0}
.gs-banner .gs-btn-outer{display:flex;padding-left:23px}
.gs-banner .gs-btn-box{border:1px solid rgb(255,255,255);border-radius:4px;overflow:hidden;cursor:pointer;position:relative}
.gs-banner .gs-btn-box a{display:block;font-family:Roboto,sans-serif;font-weight:300;font-size:16px;color:rgb(255,255,255);line-height:34px;letter-spacing:0.25px;text-align:center;text-decoration:none;padding:0 23px}
.gs-banner .gs-btn-box:hover{background:rgba(255,255,255,0.08)}

/* Hamburger — only below the sidebar breakpoint */
.gs-menu-btn{display:none;position:absolute;left:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;padding:8px;cursor:pointer;border-radius:4px}
.gs-menu-btn:hover{background:rgba(255,255,255,0.08)}
@media (max-width: 1279px) {
  .gs-menu-btn{display:flex;align-items:center;justify-content:center}
}

/* ---- Sidebar (Google Sites navigation replica) ---- */
.gs-sidebar{display:block;position:fixed;top:64px;left:0;bottom:0;z-index:1250;width:250px;background-color:rgb(25,24,26);overflow-y:auto;padding-bottom:64px;font-family:Roboto,sans-serif;font-size:17.6px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.gs-sidebar::-webkit-scrollbar{width:4px}
.gs-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
.gs-sidebar .gs-logo{display:block;margin:48px 32px 0 48px;text-decoration:none}
.gs-sidebar .gs-logo img{width:36px;height:36px;max-width:100%}
.gs-sidebar .gs-brand{display:block;position:relative;z-index:20;margin:48px 32px 62px 48px;font-family:Roboto,sans-serif;font-size:26.6667px;font-weight:400;color:rgb(249,249,249);text-decoration:none;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.gs-sidebar ul{list-style:none;padding:0;margin:0}
.gs-sidebar li{list-style:none;padding:0;margin:0}
.gs-l1{position:relative;margin-top:12px;padding:0 12px 0 36px;font-family:Roboto,sans-serif;color:rgb(249,249,249);text-overflow:ellipsis}
.gs-l1-in{position:relative}
.gs-l1-in>a{display:block;position:relative;padding-left:4px;font-family:Roboto,sans-serif;font-size:17.6px;font-weight:400;color:rgb(249,249,249);text-decoration:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.gs-l1-in>a:hover{background:rgba(255,255,255,0.06)}
.gs-l2{position:relative;margin-top:12px;padding:0 12px 0 56px;font-family:Roboto,sans-serif;color:rgb(249,249,249);text-overflow:ellipsis}
.gs-l2-in{position:relative}
.gs-l2-in>a{display:block;position:relative;padding-left:4px;font-family:Roboto,sans-serif;font-size:17.6px;font-weight:400;color:rgb(249,249,249);text-decoration:none;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.gs-l2-in>a:hover{background:rgba(255,255,255,0.06)}
.gs-l2-in>a.gs-active{display:inline-block;height:26px;margin-right:12px;margin-left:4px;padding-left:0;border-bottom:7px solid rgb(80,80,208)}
.gs-l1-in>a.gs-section{cursor:default}
.gs-chev{position:absolute;top:-14.5px;left:-32px;width:36px;height:24px;padding-left:12px;cursor:pointer;transform:translateY(12px);vertical-align:middle;color:rgb(249,249,249)}
.gs-chev svg{width:24px;height:24px;transition:transform 0.2s}
.gs-open .gs-chev svg{transform:rotate(180deg)}
.gs-subnav{display:none;position:relative}
.gs-open>.gs-subnav{display:block}
.gs-l1-in>a.gs-active{display:inline-block;height:26px;margin-right:12px;margin-left:4px;padding-left:0;border-bottom:7px solid rgb(80,80,208)}

/* Drawer mode below the breakpoint */
@media (max-width: 1279px) {
  .gs-sidebar{transform:translateX(-100%);transition:transform 0.25s ease;box-shadow:2px 0 18px rgba(0,0,0,0.6)}
  body.nav-open .gs-sidebar{transform:translateX(0)}
  .gs-scrim{position:fixed;top:var(--banner-h);left:0;right:0;bottom:0;z-index:1240;background:rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity 0.25s ease}
  body.nav-open .gs-scrim{opacity:1;pointer-events:auto}
}
@media (min-width: 1280px) {
  .gs-scrim{display:none}
}

/* Narrow-screen banner (carried over from the replica) */
@media (max-width: 600px) {
  :root{--banner-h:48px}
  .gs-banner{height:48px;padding:0 16px 0 48px;flex-wrap:wrap;gap:6px}
  body{padding-top:48px}
  .gs-sidebar{top:48px}
  .gs-banner p{font-size:14px;margin:4px 0}
  .gs-banner .gs-btn-outer{padding-left:0}
  .gs-banner .gs-btn-box a{font-size:14px;line-height:28px;padding:0 14px}
}

/* ---- Content shell ---- */
.site-main { min-height: calc(100vh - var(--banner-h) - 80px); }
.page-container {
  max-width: 78rem;   /* scales with the fluid root, so text fills the window */
  margin: 0 auto;
  padding: 3rem 2.5rem 5rem;
}
@media (max-width: 600px) {
  .page-container { padding: 32px 20px 60px; }
}

/* Creators page: small headshot left, bio right (as on Google Sites) */
.creator-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin: 3rem 0;
}
.creator-row img {
  flex: 0 0 178px;
  width: 178px;
  height: auto;
  margin: 0;
}
.creator-row p { margin: 0; }
@media (max-width: 700px) {
  .creator-row { flex-direction: column; }
}

/* Social icon row (about page) */
.social-links {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin: 8px 0 -24px;
}
.social-links a { display: inline-flex; border-radius: 50%; }
.social-links svg { display: block; }

/* Collapsible FAQ items (js/faq-collapse.js folds h2+answer into these) */
.page-content details {
  border-bottom: 1px solid var(--rule);
  padding: 26px 0 26px;
}
.page-content details > summary {
  list-style: none;
  cursor: pointer;
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.667rem);
  line-height: 1.5;
  color: var(--text);
}
.page-content details > summary::-webkit-details-marker { display: none; }
.page-content details > summary:hover { color: var(--text-strong); }
.page-content details[open] { padding-bottom: 8px; }

/* ---- Floating page index ("on this page") ----
   Enabled per page with `toc: true` front matter; js/toc.js builds the
   links. Wide screens: sticky column right of the article. Narrow screens:
   a compact box above the content. */
.page-with-toc {
  display: grid;
  grid-template-areas: "content toc";
  grid-template-columns: minmax(0, 1fr) 14.5rem;
  gap: 0 3.5rem;
  align-items: start;
}
.page-with-toc > .page-content { grid-area: content; }
.page-toc {
  grid-area: toc;
  position: sticky;
  top: calc(var(--banner-h) + 32px);
  max-height: calc(100vh - var(--banner-h) - 64px);
  overflow-y: auto;
  padding: 4px 0 4px 20px;
  border-left: 1px solid var(--rule);
}
.page-toc-title {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--text-soft);
  margin: 0 0 10px;
}
.page-toc ul { list-style: none; margin: 0; padding: 0; }
.page-toc li { margin: 0; }
.page-toc li.toc-sub a { padding-left: 14px; }
.page-toc a {
  display: block;
  padding: 4px 0 4px 2px;
  font-family: Roboto, sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -21px;
  padding-left: 19px;
}
.page-toc li.toc-sub a { padding-left: 33px; }
.page-toc a:hover { color: var(--link-color); }
.page-toc a.toc-active {
  color: var(--link-color);
  border-left-color: var(--gs-active);
  font-weight: 400;
}
@media (max-width: 1100px) {
  .page-with-toc { display: block; }
  .page-toc {
    position: static;
    max-height: none;
    border-left: 0;
    border: 1px solid var(--rule);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 24px 0 8px;
  }
  .page-toc a, .page-toc li.toc-sub a { margin-left: 0; border-left: 0; padding-left: 0; }
  .page-toc li.toc-sub a { padding-left: 14px; }
}

/* ---- Theme toggle FAB (same placement/behavior as the legacy pages) ---- */
.theme-toggle {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1200;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--fab-bg);
  color: var(--fab-color);
  cursor: pointer;
  box-shadow: 0 4px 14px var(--fab-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}
.theme-toggle:hover { transform: scale(1.08); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.dark-mode .theme-toggle .icon-sun { display: block; }
html.dark-mode .theme-toggle .icon-moon { display: none; }

/* ---- Content typography ----
   Sizes measured from the live Google Sites pages via getComputedStyle:
   h1 Roboto Mono 700 40px; h2 Roboto Mono 500 26.67px;
   body Roboto 300 16px, line-height ~2. Colors come from the theme tokens. */
.page-content h1 {
  font-family: "Roboto Mono", monospace;
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.38;
  color: var(--text-strong);
  margin: 0.9em 0 0.6em;
}
.page-content h2 {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: clamp(1.25rem, 2.2vw, 1.667rem);
  line-height: 1.5;
  color: var(--text);
  margin: 2.6em 0 0.9em;
}
.page-content h3 {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--text);
  margin: 1.8em 0 0.6em;
}
.page-content h4 {
  font-family: "Roboto Mono", monospace;
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--text-soft);
  margin: 1.7em 0 0.5em;
}
.page-content h2, .page-content h3 { scroll-margin-top: calc(var(--banner-h) + 20px); }
.page-content p, .page-content li {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
}
.page-content a { color: var(--link-color); text-decoration: none; }
.page-content a:hover { color: var(--link-hover); text-decoration: underline; }
/* Content images: constrained and centered by default (source files are
   large exports). Use class="img-wide" for anything that should span the
   full column. */
.page-content img {
  max-width: min(100%, 39rem);
  height: auto;
  display: block;
  margin: 2em auto;
  border-radius: 6px;
}
.page-content img.img-wide { max-width: 100%; }
.page-content figure {
  margin: 2.5em auto;
  max-width: 40rem;
}
.page-content figure img { margin: 0 auto 0.6em; }
.page-content figcaption {
  font-size: 0.88rem;
  color: var(--text-soft);
  text-align: center;
}
.page-content blockquote {
  margin: 1.5em 0;
  padding: 0.2em 0 0.2em 1.2em;
  border-left: 4px solid var(--gs-active);
  font-style: italic;
}
.page-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
.page-content table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.page-content th, .page-content td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; }

/* ---- Rotating student pull-quote (landing + design studies) ----
   Typographic treatment — serif italic with a hanging quotation mark —
   rather than a card, and fully theme-aware. Rendered by js/landing.js. */
.quotes-container {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 170px;
}
.pull-quote {
  position: relative;
  margin: 0;
  /* The mark's ink is ~1.9rem wide; keep the text close so mark + quote
     read as one left edge. */
  padding-left: 2.3rem;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.pull-quote.fade-out { opacity: 0; }
.pull-quote::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.28em;
  font-family: Charter, "Bitstream Charter", Georgia, serif;
  font-size: 4.4rem;
  line-height: 1;
  color: var(--gs-active);
  opacity: 0.55;
}
.pull-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Charter, "Bitstream Charter", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.65;
  color: var(--text);
}
.pull-quote figcaption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
  font-family: "Roboto Mono", monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.pull-quote figcaption::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gs-active);
}

/* Responsive video embeds */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 1.5em 0;
}
.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Buttons in content (outlined, Google Sites style) */
.gs-button {
  display: inline-block;
  border: 1px solid var(--text-strong);
  border-radius: 4px;
  padding: 8px 24px;
  color: var(--text-strong);
  font-family: Roboto, sans-serif;
  font-weight: 300;
  text-decoration: none;
}
.gs-button:hover { background: rgba(128, 128, 128, 0.12); }

/* ---- Footer (black strip, small grey centered text — as on Google Sites) ---- */
.site-footer {
  padding: 28px 16px 36px;
  text-align: center;
}
.site-footer p {
  margin: 0;
  font-family: Roboto, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.5;
  color: var(--footer-text);
}