/* =========================================================================
   Stanford Critical AI — notebook / scrapbook
   Cream dot-grid page · cardinal serif headings · handwritten accents

   Sections in this file:
     1. Design tokens (colors, layout, type)
     2. Ribbon decorations (parallax)
     3. Base (body, page shell)
     4. Site header & nav
     5. Hero (logo + handwritten tagline)
     6. Sections + section heading squiggle
     7. Marginalia (handwritten notes in the left margin)
     8. Principles list (home page)
     9. Team grid (home page)
    10. Terms accordion (events page)
    11. Manyfesto document
    12. Site footer
    13. Utilities
    14. Small-screen overrides
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */

:root {
  /* Paper palette */
  --paper:          #f3ede0;
  --paper-shade:    #e9e1cf;

  /* Ink */
  --ink:            #1f1a16;
  --ink-soft:       #5a5048;

  /* Cardinal red — Stanford */
  --cardinal:       #8c1515;
  --cardinal-deep:  #6b0f0f;
  --cardinal-faint: rgba(140, 21, 21, 0.15);

  /* Rules + dot-grid background */
  --rule:           rgba(31, 26, 22, 0.18);
  --dot:            rgba(31, 26, 22, 0.22);

  /* Layout */
  --measure-wide:   760px;   /* max width of the reading column */
  --gutter:         160px;   /* left gutter on desktop for marginalia */

  /* Type */
  --serif-display:  "Fraunces", "EB Garamond", Georgia, serif;
  --serif-body:     "EB Garamond", "Source Serif Pro", Georgia, serif;
  --hand:           "Caveat", "Bradley Hand", cursive;

  /* The hand-drawn squiggle used under section headings & as <hr> rules.
     Inlined here once so callers just reference var(--squiggle). */
  --squiggle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 8' preserveAspectRatio='none'><path d='M2 4 Q 20 1 40 4 T 80 4 T 120 4 T 160 4 T 200 4 T 240 4 T 280 4 T 320 4 T 360 4 T 418 4' fill='none' stroke='%238c1515' stroke-width='1.8' stroke-linecap='round'/></svg>");
}


/* -------------------------------------------------------------------------
   2. Ribbon decorations (parallax, top-right + bottom-left)
   ------------------------------------------------------------------------- */

.ribbon {
  position: fixed;
  width: 380px;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.85;
  will-change: transform;
  z-index: 0;
}

.ribbon-top-right {
  top: 0px;    /* ↕ distance from top of viewport (95 clears the header) */
  right: 0;     /* ↔ distance from right edge (0 = flush, negative = more hidden) */
}

.ribbon-bl-a {
  top: 530px;
  left: 0px;
  transform: scaleX(-1);
}

.ribbon-bl-b {
  top: 150px;
  left: 0px;
  transform: scale(-1, -1);
}

@media (max-width: 600px) {
  .ribbon { width: 280px; }
}


/* -------------------------------------------------------------------------
   4. Base
   ------------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--serif-body);
  font-size: 19px;
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  /* Notebook-page dot grid */
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 48px 28px 96px;
  position: relative;        /* anchor for absolute marginalia */
}

/* On wide screens, reserve a left gutter for margin-notes; mirror it on the right to center the content. */
@media (min-width: 960px) {
  .page {
    padding-left: calc(var(--gutter) + 28px);
    padding-right: calc(var(--gutter) + 28px);
    max-width: calc(var(--measure-wide) + var(--gutter) * 2);
  }
}


/* -------------------------------------------------------------------------
   5. Site header & nav
   ------------------------------------------------------------------------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 16px;
  padding-bottom: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  /* Break out of the content column to span the full page width */
  margin-left: calc(-1 * (var(--gutter) + 28px));
  margin-right: calc(-1 * (var(--gutter) + 28px));
  padding-left: 40px;
  padding-right: 40px;
}

/* Pin the nav to the true horizontal midpoint of the header */
.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.site-header .brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
}

/* The logo JPG has a white background — multiply blends it into the paper. */
.site-header .brand-mark {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.site-header .brand-name {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 0.95;
  letter-spacing: 0.005em;
  color: var(--cardinal);
}

.site-nav {
  display: flex;
  gap: 22px;
  font-family: var(--serif-body);
  font-size: 17px;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-nav a:hover { color: var(--cardinal); }
.site-nav a.active {
  color: var(--cardinal);
  border-bottom-color: var(--cardinal);
}

.header-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--rule);
}

.header-social a {
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.header-social a:hover { color: var(--cardinal); }
.header-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255, 250, 235, 0.6);
  color: var(--cardinal);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.nav-toggle:hover {
  color: var(--cardinal-deep);
  border-color: var(--cardinal-faint);
  background: rgba(255, 250, 235, 0.9);
}


/* -------------------------------------------------------------------------
   6. Hero
   ------------------------------------------------------------------------- */

.hero {
  text-align: center;
  margin: 0 0 4px;
}

.hero .hero-logo {
  display: block;
  margin: 0 auto;
  width: min(62%, 220px);
  height: auto;
  mix-blend-mode: multiply;   /* same reason as brand-mark */
  animation: fadeRise 1s ease-out both;
}

.hero .tagline {
  margin: 4px 0 0;
  font-family: var(--hand);
  font-size: clamp(22px, 2.6vw, 28px);
  color: var(--cardinal-deep);
  transform: rotate(-1.5deg);
  animation: fadeRise 1s ease-out 0.2s both;
}

@keyframes fadeRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* -------------------------------------------------------------------------
   7. Sections — used by the home page
   ------------------------------------------------------------------------- */

section.dispatch {
  position: relative;          /* anchor for absolutely-positioned marginalia */
  margin: 36px 0 56px;
}

/* Tuck the first section right under the hero. */
section.dispatch:first-of-type { margin-top: 0; }
.hero + .dispatch              { margin-top: 8px; }

.dispatch h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  color: var(--cardinal);
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.05;
  margin: 0 0 18px;
  letter-spacing: -0.005em;
  display: inline-block;       /* keep the underline ::after as wide as text */
  position: relative;
}

/* Hand-drawn red squiggle underline on every section heading. */
.dispatch h2::after {
  content: "";
  display: block;
  height: 8px;
  margin-top: 4px;
  background: var(--squiggle) no-repeat;
  background-size: 100% 100%;
}

.dispatch p { margin: 14px 0; }


/* -------------------------------------------------------------------------
   8. Marginalia
       Handwritten note that floats in the left gutter on desktop, falls
       back inline (with a ↳ arrow) on narrow screens.
   ------------------------------------------------------------------------- */

.margin-note {
  display: block;
  font-family: var(--hand);
  font-size: 21px;
  line-height: 1.25;
  color: var(--cardinal-deep);
  margin: 8px 0 14px;
  transform: rotate(-1.5deg);
}

.margin-note::before {
  content: "↳ ";
  color: var(--cardinal);
}

@media (min-width: 960px) {
  .margin-note {
    /* Pull the note into the left gutter, anchored to the parent section. */
    position: absolute;
    left: calc(-1 * var(--gutter) + 8px);
    width: max-content;                        /* shrink to text */
    max-width: calc(var(--gutter) - 32px);     /* …but cap at gutter width */
    margin: 0;
    padding-right: 30px;                       /* room for the trailing dash */
    line-height: 1.2;
    transform: rotate(-2deg);
  }

  .margin-note::before { content: ""; }       /* drop the ↳ arrow in the gutter */

  /* Small slanted red dash trailing the note. */
  .margin-note::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 22px;
    height: 1.8px;
    background: var(--cardinal);
    border-radius: 1px;
    transform: translateY(-50%) rotate(-3deg);
  }
}



/* -------------------------------------------------------------------------
   9. Principles list (home — "What we believe")
        Bold red lead-in followed by explanatory body text.
   ------------------------------------------------------------------------- */

.principles {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.principles li {
  padding: 18px 0;
  border-top: 1px dashed var(--rule);
}

.principles li:last-child { border-bottom: 1px dashed var(--rule); }

.principles .lead {
  font-family: var(--serif-display);
  color: var(--cardinal);
  font-weight: 700;
  font-size: 21px;
  margin-right: 6px;
}

.principles .body { color: var(--ink); }


/* Inline "Read the full Manyfesto →" link. */
.continue-link {
  margin-top: 28px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 18px;
}

.continue-link a {
  color: var(--cardinal);
  text-decoration: none;
  border-bottom: 1px solid var(--cardinal);
  padding-bottom: 2px;
}

.continue-link a:hover { background: var(--cardinal-faint); }


/* -------------------------------------------------------------------------
   10. Team grid (home — "Co-founders")
   ------------------------------------------------------------------------- */

.team {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px 28px;
}

/* Each card: avatar on the left, name + role to the right, bio underneath. */
.team .member {
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: rgba(255, 250, 235, 0.5);
  display: grid;
  grid-template-columns: 72px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: start;
}

.team .avatar {
  grid-row: 1 / 3;             /* span both rows next to name + role */
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-shade);
  display: block;
}

.team .name {
  display: block;
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  color: var(--cardinal);
  margin-top: 4px;
}

.team .role {
  display: block;
  font-family: var(--hand);
  font-size: 18px;
  color: var(--cardinal-deep);
  transform: rotate(-1deg);
  transform-origin: left center;
}

.team .bio {
  grid-column: 1 / -1;         /* bio spans full width under avatar + name */
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.team .bio-edu {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 14px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  opacity: 0.9;
}


/* -------------------------------------------------------------------------
   11. Terms accordion (events page)
   ------------------------------------------------------------------------- */

.terms { margin-top: 24px; }

.term {
  border-top: 1px dashed var(--rule);
  padding: 0;
}
.term:last-child { border-bottom: 1px dashed var(--rule); }

.term > summary {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--cardinal);
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.term > summary::-webkit-details-marker { display: none; }

.term > summary::after {
  content: "+";
  font-family: var(--serif-body);
  font-size: 20px;
  color: var(--ink-soft);
  font-weight: 400;
  line-height: 1;
}
.term[open] > summary::after { content: "−"; }

.term-events {
  list-style: none;
  padding: 0 0 18px 8px;
  margin: 0;
}
.term-events .empty-note {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 17px;
  padding: 6px 0 10px;
}

.term-event {
  padding: 10px 0;
  border-top: 1px solid rgba(31, 26, 22, 0.08);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.event-title {
  font-family: var(--serif-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.event-meta {
  font-family: var(--hand);
  font-size: 17px;
  color: var(--ink-soft);
}


/* -------------------------------------------------------------------------
   12. Manyfesto document
        A long-form article. Uses bold red lead-ins ("We hold that…")
        inside <strong>, two <h2 class="doc-section"> subheadings, a
        squiggle <hr>, an italic centered pull-quote, and a centered
        closing block at the end.
   ------------------------------------------------------------------------- */

.manyfesto-doc {
  position: relative;          /* anchor for marginalia inside the doc */
  margin-top: 8px;
}

/* The italic red lead under the hero: "Stanford, are you awake?" */
.manyfesto-doc .lead-italic {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--cardinal);
  font-size: 22px;
  margin: 0 0 24px;
}

/* Drop cap on the opening paragraph. */
.manyfesto-doc .opening::first-letter {
  float: left;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 76px;
  line-height: 0.85;
  color: var(--cardinal);
  margin: 8px 10px 0 0;
  padding: 2px 4px 0 0;
}

/* Centered italic pull-quote. */
.manyfesto-doc .quote-italic {
  font-family: var(--serif-display);
  font-style: italic;
  text-align: center;
  max-width: 560px;
  margin: 36px auto;
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink);
}

.manyfesto-doc p {
  margin: 20px 0;
  text-align: justify;
  hyphens: auto;
}

/* Bold red lead-in inside paragraphs ("We hold that AI is not neutral.") */
.manyfesto-doc p strong {
  font-family: var(--serif-display);
  font-weight: 700;
  color: var(--cardinal);
}

/* Section subheading inside the doc ("What we are doing", "An invitation") */
.manyfesto-doc .doc-section {
  display: inline-block;
  position: relative;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--cardinal);
  margin: 44px 0 14px;
  letter-spacing: -0.005em;
}

.manyfesto-doc .doc-section::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 4px;
  background: var(--squiggle) no-repeat;
  background-size: 100% 100%;
}

/* Decorative squiggle rule between major sections. */
.manyfesto-doc hr {
  border: 0;
  height: 10px;
  margin: 40px auto;
  background: var(--squiggle) center no-repeat;
  background-size: contain;
  opacity: 0.85;
}

/* "So, are you awake?" emphasis */
.manyfesto-doc .awake-line {
  font-family: var(--serif-display);
  font-weight: 600;
  color: var(--cardinal);
}

/* Centered closing block at the very end of the doc. */
.manyfesto-doc .closing-block {
  text-align: center;
  max-width: 520px;
  margin: 32px auto 0;
  padding: 16px 16px 24px;
  border-bottom: 1px solid var(--rule);
}

.manyfesto-doc .closing-line {
  margin: 6px 0;
  text-align: center;
  font-family: var(--serif-display);
  font-size: 21px;
}

.manyfesto-doc .closing-meta {
  margin: 18px 0 0;
  text-align: center;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  line-height: 1.5;
}

.manyfesto-doc .closing-meta-place {
  margin-top: 8px;
}

.manyfesto-doc .closing-meta-sep {
  white-space: pre;
}

.sign-cta {
  text-align: center;
  margin: 40px 0 48px;
  padding: 24px 16px;
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
}

.sign-cta p {
  margin: 0 0 14px;
  font-family: var(--serif-body);
  font-size: 18px;
  color: var(--ink-soft);
}

.sign-cta a {
  display: inline-block;
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--cardinal);
  text-decoration: none;
  border-bottom: 1px solid var(--cardinal);
  padding-bottom: 2px;
  transition: background 0.2s ease;
}

.sign-cta a:hover { background: var(--cardinal-faint); }

.signees-section {
  margin: 48px 0 8px;
}

.signees-list {
  margin-top: 18px;
  line-height: 1.8;
}

.signee {
  font-family: var(--hand);
  font-size: 20px;
  color: var(--cardinal-deep);
}

.signee:not(:last-child)::after {
  content: " · ";
  color: var(--ink-soft);
  font-family: var(--serif-body);
  font-size: 16px;
}


/* -------------------------------------------------------------------------
   13. Site footer
   ------------------------------------------------------------------------- */

.site-footer {
  margin-top: 64px;
  padding: 14px 0 48px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  font-family: var(--serif-body);
  font-size: 15px;
  color: var(--ink-soft);
  align-items: center;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--cardinal); }
.footer-links a.footer-email { color: var(--cardinal); }
.footer-links .footer-sep {
  margin: 0 9px;
  opacity: 0.4;
  user-select: none;
}

.footer-copy {
  font-family: var(--serif-body);
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.5;
  margin: 0;
}

/* Profile icon links on team member cards */
.member-icons {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.member-icon {
  display: flex;
  align-items: center;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s ease;
}
.member-icon:hover { color: var(--cardinal); }
.member-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}


/* -------------------------------------------------------------------------
   14. Utilities
   ------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* -------------------------------------------------------------------------
   15. Small-screen overrides
   ------------------------------------------------------------------------- */


@media (max-width: 959px) {
  .site-header {
    margin-left: -28px;
    margin-right: -28px;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 600px) {
  body                          { font-size: 17px; }
  .page                         { padding: 24px 20px 64px; }
  .site-header                  {
    flex-wrap: wrap;
    margin-bottom: 24px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .site-header .brand-mark      { width: 48px; height: 48px; }
  .site-header .brand-name      { font-size: 17px; }
  .header-social                { display: none; }
  .nav-toggle                   { display: flex; margin-left: auto; }
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: -20px;
    right: -20px;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 17px;
    padding: 8px 20px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 10;
  }
  .site-nav a {
    padding: 12px 0;
    border-bottom: 1px solid rgba(31, 26, 22, 0.08);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-header.nav-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .ribbon {
    display: none;
    will-change: auto;
  }
  .hero                         { padding: 20px 0 40px; }
  .dispatch                     { margin: 48px 0; }
  .dispatch h2                  { font-size: clamp(26px, 8vw, 32px); }
  .team                         { grid-template-columns: 1fr; gap: 14px; }
  .team .member                 { padding: 14px; }
  .sign-cta                     { margin: 32px 0 40px; padding: 20px 12px; }
  .signee                       { font-size: 18px; }
  .manyfesto-doc .closing-meta  { font-size: 14px; letter-spacing: 0.02em; padding: 0 4px; }
  .manyfesto-doc .closing-meta-sep { display: none; }
  .manyfesto-doc .closing-meta span:not(.closing-meta-sep) { display: block; }
  .manyfesto-doc .closing-meta-place { white-space: nowrap; margin-top: 4px; }
}