/* ============================================================
   arisaka-gg.org — GG-Theory preprint archive
   One stylesheet, no dependencies beyond Google Fonts.

   Type   Spectral (scholarly serif) for titles;
          IBM Plex Sans for reading; IBM Plex Mono for the ledger
          — codes, version stamps, DOIs, BibTeX.
   Color  Neutrals are cool-biased, not grey-by-default.  The accent
          is NOT a site color: each paper takes the hue its own
          cohort map gives it, so the page encodes where the paper
          sits in the twenty-two-paper cohort.
   ============================================================ */

:root {
  /* --- neutrals: light --- */
  --ground:      #FBFBFD;
  --surface:     #FFFFFF;
  --ink:         #14161C;
  --ink-2:       #3D4351;
  --ink-3:       #6B7285;
  --rule:        #E4E7EE;
  --rule-strong: #CBD1DD;
  --code-bg:     #F4F5F9;
  --shadow:      0 1px 2px rgba(20,22,28,.05), 0 8px 24px -12px rgba(20,22,28,.12);

  /* --- branch hues, light (from the cohort map's own palette) --- */
  --h-constitution: #6D4AA8;
  --h-gg6:          #AE3B3B;
  --h-gdos:         #8A6714;
  --h-pillars:      #2E6B4B;
  --h-fourd:        #2B589E;
  --h-capstone:     #8E6A17;
  --h-predictions:  #196C7D;
  --h-cosmology:    #1B6B5E;
  --h-foundations:  #574B8A;
  --h-whitepaper:   #77583A;
  --h-internal:     #5C6470;

  --accent: var(--h-fourd);          /* overridden per page */
  --accent-wash: color-mix(in srgb, var(--accent) 7%, var(--surface));
  --accent-edge: color-mix(in srgb, var(--accent) 26%, var(--rule));

  --measure: 64ch;
  --step--1: clamp(.80rem, .78rem + .10vw, .86rem);
  --step-0:  clamp(1rem, .97rem + .14vw, 1.075rem);
  --step-1:  clamp(1.18rem, 1.12rem + .28vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.34rem + .52vw, 1.8rem);
  --step-3:  clamp(1.85rem, 1.62rem + 1.05vw, 2.65rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:      #0D0F14;
    --surface:     #14171E;
    --ink:         #E9EBF1;
    --ink-2:       #B7BDCB;
    --ink-3:       #868D9F;
    --rule:        #252A35;
    --rule-strong: #39404F;
    --code-bg:     #191D26;
    --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);

    --h-constitution: #AC90DE;
    --h-gg6:          #E28A8A;
    --h-gdos:         #D9B55F;
    --h-pillars:      #82C7A0;
    --h-fourd:        #8FB7EA;
    --h-capstone:     #E2BA66;
    --h-predictions:  #74C9D9;
    --h-cosmology:    #74CFBC;
    --h-foundations:  #AA9EDC;
    --h-whitepaper:   #CBA780;
    --h-internal:     #9AA3B2;
  }
}
:root[data-theme="dark"] {
  --ground:      #0D0F14;
  --surface:     #14171E;
  --ink:         #E9EBF1;
  --ink-2:       #B7BDCB;
  --ink-3:       #868D9F;
  --rule:        #252A35;
  --rule-strong: #39404F;
  --code-bg:     #191D26;
  --shadow:      0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);

  --h-constitution: #AC90DE;
  --h-gg6:          #E28A8A;
  --h-gdos:         #D9B55F;
  --h-pillars:      #82C7A0;
  --h-fourd:        #8FB7EA;
  --h-capstone:     #E2BA66;
  --h-predictions:  #74C9D9;
  --h-cosmology:    #74CFBC;
  --h-foundations:  #AA9EDC;
  --h-whitepaper:   #CBA780;
  --h-internal:     #9AA3B2;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", ui-sans-serif, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* --- the branch stripe: hue = the paper's place in the cohort --- */
.branch-stripe { height: 3px; background: var(--accent); }

a { color: inherit; text-decoration-color: var(--accent-edge); text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}

.wrap { max-width: 74rem; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }

/* ---------- masthead ---------- */
.masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem 1.1rem;
  padding: 1.35rem 0 1.2rem; border-bottom: 1px solid var(--rule);
}
.masthead__home {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .04em;
  text-decoration: none; color: var(--ink);
}
.masthead__home:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.masthead__tag { font-size: var(--step--1); color: var(--ink-3); }

/* ---------- paper page: spine + reading column ---------- */
.paper { display: grid; gap: clamp(2rem, 4vw, 3.5rem); padding: clamp(2.2rem, 5vw, 3.6rem) 0 1rem; }
@media (min-width: 62rem) {
  .paper { grid-template-columns: 15.5rem minmax(0, 1fr); align-items: start; }
  .spine { position: sticky; top: 2rem; }
}

/* --- the spine: the metadata rail --- */
.spine { display: flex; flex-direction: column; gap: 1.6rem; font-size: var(--step--1); }
.code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--step-1); font-weight: 600; letter-spacing: -.01em;
  color: var(--accent); line-height: 1.15;
}
.branch-name {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); margin-top: .3rem;
}
.facts { display: grid; grid-template-columns: auto 1fr; gap: .38rem .9rem; margin: 0; }
.facts dt { color: var(--ink-3); }
.facts dd {
  margin: 0; font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--ink-2); word-break: break-word;
}
.facts dd a { color: var(--ink-2); }

.get { display: flex; flex-direction: column; gap: .55rem; }
.get__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: .8rem;
  padding: .6rem .8rem; text-decoration: none;
  border: 1px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  font-weight: 500;
}
.get__link:hover { border-color: var(--accent); background: var(--accent-wash); }
.get__link--primary { border-color: var(--accent); box-shadow: var(--shadow); }
.get__meta {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .74rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}

/* --- the reading column --- */
.reading { min-width: 0; display: flex; flex-direction: column; gap: 2.4rem; }

.title {
  font-family: Spectral, Georgia, "Times New Roman", serif;
  font-weight: 600; font-size: var(--step-3); line-height: 1.14;
  letter-spacing: -.012em; margin: 0; text-wrap: balance; max-width: 22ch;
  max-width: min(22ch, 100%);
}
.subtitle {
  font-family: Spectral, Georgia, serif; font-weight: 400; font-style: italic;
  font-size: var(--step-1); line-height: 1.38; color: var(--ink-2);
  margin: .7rem 0 0; text-wrap: balance; max-width: 46ch;
}
.byline { margin: 1.2rem 0 0; font-size: var(--step-0); }
.byline strong { font-weight: 600; }
.byline span { display: block; color: var(--ink-3); font-size: var(--step--1); margin-top: .15rem; }

.stamp {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; letter-spacing: .01em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin-top: 1rem;
  padding-top: .9rem; border-top: 1px solid var(--rule);
}

section { display: flex; flex-direction: column; gap: .85rem; }
.label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--ink-3); margin: 0; font-weight: 600;
}
.abstract p { margin: 0 0 1em; max-width: var(--measure); }
.abstract p:last-child { margin-bottom: 0; }

.keywords { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.keywords li {
  font-size: .78rem; color: var(--ink-2);
  border: 1px solid var(--rule); background: var(--surface);
  padding: .16rem .55rem; border-radius: 2px;
}

/* --- cite --- */
.cite { border: 1px solid var(--rule); background: var(--surface); }
.cite__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--rule);
}
.cite__body {
  margin: 0; padding: .9rem; overflow-x: auto; background: var(--code-bg);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; line-height: 1.65; color: var(--ink-2); white-space: pre;
}
.copy {
  font: inherit; font-size: .74rem; font-weight: 600; letter-spacing: .03em;
  padding: .28rem .7rem; cursor: pointer; color: var(--accent);
  background: transparent; border: 1px solid var(--accent-edge); border-radius: 2px;
}
.copy:hover { background: var(--accent-wash); border-color: var(--accent); }

/* --- cohort --- */
.cohort { display: grid; gap: 1.4rem; }
.cohort__group { display: grid; gap: .5rem; }
.cohort__groupname {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 600;
  color: var(--branch, var(--ink-3));
}
.cohort__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .28rem; }
.cohort__list a {
  display: grid; grid-template-columns: 5.4rem 1fr; gap: .8rem;
  padding: .3rem .1rem; text-decoration: none; align-items: baseline;
}
.cohort__list a:hover .cohort__title { text-decoration: underline; text-decoration-color: var(--branch); }
.cohort__code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; font-weight: 600; color: var(--branch, var(--ink-3));
}
.cohort__title { font-size: .9rem; color: var(--ink-2); }
[aria-current="page"] .cohort__title { color: var(--ink); font-weight: 600; }
[aria-current="page"] .cohort__code::after { content: " ●"; font-size: .6em; vertical-align: .25em; }

/* ---------- index page ---------- */
.lede { padding: clamp(2.6rem, 6vw, 4.5rem) 0 2.2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.lede h1 {
  font-family: Spectral, Georgia, serif; font-weight: 600;
  font-size: var(--step-3); line-height: 1.12; letter-spacing: -.015em;
  margin: 0; max-width: 18ch; text-wrap: balance;
}
.lede p { margin: 0; max-width: var(--measure); color: var(--ink-2); }
.lede p.lede__counts { max-width: none; }
.lede__counts {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
  padding-top: 1rem; border-top: 1px solid var(--rule);
}

.shelf { display: grid; gap: 2.4rem; padding-bottom: 2rem; }
.shelf__group { display: grid; gap: .9rem; }
.shelf__groupname {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .11em; font-weight: 600;
  color: var(--branch); padding-bottom: .5rem; border-bottom: 2px solid var(--branch);
}
.cards { display: grid; gap: .1rem; }
.card {
  display: grid; gap: .35rem 1.2rem; padding: 1rem .2rem;
  border-bottom: 1px solid var(--rule); text-decoration: none;
}
@media (min-width: 48rem) {
  .card { grid-template-columns: 6.5rem minmax(0,1fr) 9rem; align-items: baseline; }
}
.card:hover { background: var(--accent-wash); }
.card__code {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .84rem; font-weight: 600; color: var(--branch);
}
.card__title {
  display: block; font-family: Spectral, Georgia, serif; font-size: var(--step-1);
  line-height: 1.28; color: var(--ink); text-wrap: balance;
}
.card__sub { display: block; font-size: .86rem; color: var(--ink-3); margin-top: .25rem; max-width: 62ch; }
.card__meta {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
@media (min-width: 48rem) { .card__meta { text-align: right; } }

/* ---------- footer ---------- */
.foot {
  margin-top: 3rem; padding: 1.6rem 0 3rem; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem;
  font-size: var(--step--1); color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* an internal study says so, in its own voice, right under the stamp */
.note {
  margin: .9rem 0 0; padding: .55rem .8rem; font-size: var(--step--1);
  color: var(--ink-2); background: var(--accent-wash);
  border-left: 2px solid var(--accent);
}