/* ===============================================
   Subsite stylesheet — used by himcm/ and usaio/
   Light theme inspired by Mistral AI design tokens
   (warm cream surfaces · orange primary · editorial serif headings)
   =============================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- color tokens ----- */
  --c-primary:        #fa520f;
  --c-primary-deep:   #cc3a05;
  --c-on-primary:     #ffffff;

  --c-sunshine-300:   #ffd06a;
  --c-sunshine-500:   #ffb83e;
  --c-sunshine-700:   #ffa110;
  --c-sunshine-800:   #ff8105;
  --c-sunshine-900:   #ff8a00;
  --c-yellow-saturated: #ffd900;

  --c-cream:          #fff8e0;
  --c-cream-light:    #fffaeb;
  --c-cream-deeper:   #fff0c2;
  --c-beige-deep:     #e6d5a8;

  --c-ink:            #1f1f1f;
  --c-ink-tint:       #3d3d3d;
  --c-charcoal:       #2c2c2c;
  --c-slate:          #4a4a4a;
  --c-steel:          #6a6a6a;
  --c-stone:          #8a8a8a;
  --c-muted:          #a8a8a8;

  --c-hairline:        #e5e5e5;
  --c-hairline-soft:   #ededed;
  --c-hairline-strong: #c7c7c7;

  --c-canvas:         #ffffff;
  --c-surface:        #fafafa;
  --c-surface-cream:  #fff8e0;
  --c-surface-cream-soft: #fffaeb;
  --c-surface-code:   #1c1c1e;

  --c-on-cream:       #1f1f1f;
  --c-on-dark:        #ffffff;
  --c-on-dark-muted:  #a8a8a8;

  --c-link:           #fa520f;

  /* status accents (kept for panels, but warm-tuned to fit palette) */
  --c-success: #2f8a4f;
  --c-warn:    #d9870c;
  --c-danger:  #c63a2b;

  /* ----- spacing tokens ----- */
  --sp-xxs:  4px;
  --sp-xs:   8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  20px;
  --sp-xl:  24px;
  --sp-xxl: 32px;
  --sp-xxxl: 40px;
  --sp-section-sm: 48px;
  --sp-section:    64px;
  --sp-section-lg: 96px;
  --sp-hero:      120px;

  /* ----- radius tokens ----- */
  --rad-xs:   4px;
  --rad-sm:   6px;
  --rad-md:   8px;
  --rad-lg:  12px;
  --rad-xl:  16px;
  --rad-xxl: 20px;
  --rad-full: 9999px;

  /* ----- shadow tokens ----- */
  --shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 40px rgba(31, 31, 31, 0.08);

  /* ----- type tokens ----- */
  --font-display: 'Cormorant Garamond', 'PP Editorial Old', 'Times New Roman', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero:     84px;
  --fs-display:  64px;
  --fs-h1:       52px;
  --fs-h2:       36px;
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-h5:       18px;
  --fs-subtitle: 18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  13px;
  --fs-micro:    11px;
  --fs-button:   14px;
  --fs-stat:     56px;

  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.50;
  --lh-relaxed: 1.55;

  /* ----- layout ----- */
  --max-width:     1180px;
  --content-width: 800px;

  /* ----- signature sunset gradient ----- */
  --gradient-sunset: linear-gradient(
    90deg,
    var(--c-primary) 0%,
    var(--c-sunshine-700) 35%,
    var(--c-yellow-saturated) 65%,
    var(--c-cream) 100%
  );
}

/* ===== reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
:target { scroll-margin-top: 80px; }
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] { scroll-margin-top: 80px; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  background: var(--c-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--c-link);
  text-decoration: none;
  transition: color 0.15s;
}
a:hover { color: var(--c-primary-deep); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: -0.5px;
  color: var(--c-ink);
  margin: 1.6em 0 0.5em;
}
h1 { font-size: var(--fs-h1); font-weight: 400; margin-top: 0; letter-spacing: -1px; line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); padding-bottom: 0.3em; border-bottom: 1px solid var(--c-hairline-soft); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); color: var(--c-slate); }
h5 { font-size: var(--fs-h5); }

p, ul, ol, table { margin: 0.9em 0; }
ul, ol { padding-left: 1.4em; }
li { margin: 0.3em 0; }

hr {
  border: none;
  border-top: 1px solid var(--c-hairline-soft);
  margin: var(--sp-xxl) 0;
}

.muted { color: var(--c-steel); font-size: var(--fs-body-sm); }

/* ===== layout / header ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--c-hairline-soft);
  backdrop-filter: saturate(180%) blur(12px);
}

.nav-wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-md) var(--sp-xl);
  display: flex;
  align-items: center;
  gap: var(--sp-xl);
}

.brand {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--c-ink); }
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--rad-md);
  font-size: var(--fs-body-sm);
  font-weight: 700;
}

.nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  flex-wrap: wrap;
}
.nav-links li { margin: 0; }
.nav-links a {
  display: inline-block;
  padding: var(--sp-xs) var(--sp-sm);
  border-radius: var(--rad-sm);
  color: var(--c-slate);
  font-weight: 500;
  font-size: var(--fs-body-sm);
}
.nav-links a:hover { background: var(--c-surface-cream-soft); color: var(--c-ink); text-decoration: none; }
.nav-links a.active { background: var(--c-cream); color: var(--c-primary-deep); border: 1px solid var(--c-beige-deep); padding: 7px 11px; }
.nav-links .nav-spacer { margin-left: auto; }
.nav-back { color: var(--c-stone); font-size: var(--fs-caption); }

.nav-toggle { display: none; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--sp-section-sm) var(--sp-xl) var(--sp-section-lg);
}

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--sp-section-sm);
  align-items: start;
}
.layout-wide { grid-template-columns: 1fr; max-width: 980px; margin: 0 auto; }

.toc {
  position: sticky;
  top: 88px;
  font-size: var(--fs-body-sm);
  border-left: 2px solid var(--c-hairline-soft);
  padding-left: var(--sp-md);
}
.toc h4 {
  margin: 0 0 var(--sp-xs);
  font-size: var(--fs-micro);
  font-family: var(--font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-stone);
}
.toc ul { list-style: none; padding: 0; margin: 0; }
.toc li { margin: var(--sp-xxs) 0; }
.toc a {
  color: var(--c-steel);
  display: block;
  padding: 2px 0;
  line-height: 1.4;
}
.toc a:hover { color: var(--c-primary); text-decoration: none; }
.toc .toc-h3 { padding-left: var(--sp-sm); font-size: var(--fs-caption); }

article { min-width: 0; max-width: var(--content-width); }

footer {
  border-top: 1px solid var(--c-hairline-soft);
  padding: var(--sp-xxl) var(--sp-xl);
  text-align: center;
  color: var(--c-stone);
  font-size: var(--fs-caption);
  background: var(--c-canvas);
}

/* ===== sunset stripe (signature gradient band) ===== */
.sunset-stripe {
  height: 56px;
  background: var(--gradient-sunset);
}

/* ===== hero (subsite landing) ===== */
.hero {
  padding: var(--sp-section-lg) var(--sp-xl) var(--sp-section-sm);
  text-align: center;
  background: var(--c-cream-light);
  border-bottom: 1px solid var(--c-beige-deep);
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -1px;
  margin: 0 auto var(--sp-md);
  max-width: 820px;
  color: var(--c-ink);
}
.hero p.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-subtitle);
  color: var(--c-slate);
  max-width: 680px;
  margin: 0 auto var(--sp-xxl);
  line-height: var(--lh-normal);
}
.hero-stats {
  display: flex;
  justify-content: center;
  gap: var(--sp-xxxl);
  flex-wrap: wrap;
  margin-top: var(--sp-xxl);
}
.hero-stat { text-align: center; }
.hero-stat .stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-primary);
  letter-spacing: -0.5px;
}
.hero-stat .stat-label {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--c-steel);
  margin-top: var(--sp-xxs);
}

/* ===== cards / panels ===== */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: var(--sp-lg);
  margin: var(--sp-xxl) 0;
}
.card {
  display: block;
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline-soft);
  border-radius: var(--rad-lg);
  padding: var(--sp-xl);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
  position: relative;
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-beige-deep);
  text-decoration: none;
}
.card.static:hover { box-shadow: none; border-color: var(--c-hairline-soft); cursor: default; }
.card .card-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--c-primary-deep);
  background: var(--c-cream);
  padding: 3px 8px;
  border-radius: var(--rad-sm);
  margin-bottom: var(--sp-sm);
  border: 1px solid var(--c-beige-deep);
}
.card h3 {
  font-family: var(--font-display);
  margin: var(--sp-xxs) 0 var(--sp-xs);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: -0.3px;
}
.card p {
  font-family: var(--font-sans);
  color: var(--c-slate);
  font-size: var(--fs-body-sm);
  margin: 0;
  line-height: var(--lh-normal);
}
.card-arrow {
  margin-top: var(--sp-md);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--c-primary);
}

.panel {
  background: var(--c-surface-cream-soft);
  border: 1px solid var(--c-beige-deep);
  border-radius: var(--rad-lg);
  padding: var(--sp-lg) var(--sp-xl);
  margin: var(--sp-lg) 0;
}

.panel-note {
  border-left: 3px solid var(--c-primary);
  background: var(--c-cream);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-lg) 0;
  border-radius: 0 var(--rad-md) var(--rad-md) 0;
  color: var(--c-charcoal);
}
.panel-note strong { color: var(--c-primary-deep); }

.panel-warn {
  border-left: 3px solid var(--c-warn);
  background: rgba(217, 135, 12, 0.08);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-lg) 0;
  border-radius: 0 var(--rad-md) var(--rad-md) 0;
  color: var(--c-charcoal);
}

.panel-success {
  border-left: 3px solid var(--c-success);
  background: rgba(47, 138, 79, 0.08);
  padding: var(--sp-md) var(--sp-lg);
  margin: var(--sp-lg) 0;
  border-radius: 0 var(--rad-md) var(--rad-md) 0;
  color: var(--c-charcoal);
}

/* ===== buttons ===== */
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: var(--c-primary);
  color: var(--c-on-primary);
  border-radius: var(--rad-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-button);
  line-height: 1.3;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--c-primary-deep); color: var(--c-on-primary); text-decoration: none; }
.btn:active { transform: scale(0.99); }
.btn-secondary {
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-hairline-strong);
}
.btn-secondary:hover { background: var(--c-surface-cream-soft); color: var(--c-ink); border-color: var(--c-beige-deep); }
.btn-row { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin: var(--sp-lg) 0; }
.btn-row.center { justify-content: center; }

/* ===== tables ===== */
table, .data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-md) 0;
  font-size: var(--fs-body-sm);
  font-family: var(--font-sans);
}
th, td {
  text-align: left;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid var(--c-hairline-soft);
  vertical-align: top;
}
th {
  background: var(--c-surface-cream-soft);
  font-weight: 600;
  color: var(--c-ink);
  border-bottom: 2px solid var(--c-beige-deep);
}
tbody tr:hover { background: var(--c-surface); }

/* ===== code ===== */
code, kbd, pre, samp { font-family: var(--font-mono); }
code {
  background: var(--c-cream);
  padding: 2px 6px;
  border-radius: var(--rad-xs);
  font-size: 0.88em;
  border: 1px solid var(--c-beige-deep);
  color: var(--c-charcoal);
}
pre {
  background: var(--c-surface-code);
  color: var(--c-on-dark);
  padding: var(--sp-md) var(--sp-lg);
  border-radius: var(--rad-lg);
  overflow-x: auto;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  margin: var(--sp-md) 0;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* ===== blockquote ===== */
blockquote {
  margin: var(--sp-md) 0;
  padding: var(--sp-sm) var(--sp-lg);
  border-left: 3px solid var(--c-beige-deep);
  color: var(--c-slate);
  font-family: var(--font-display);
  font-style: italic;
}

/* ===== pills ===== */
.pill {
  display: inline-block;
  background: var(--c-surface);
  color: var(--c-steel);
  padding: 3px 10px;
  border-radius: var(--rad-full);
  font-size: var(--fs-micro);
  font-weight: 500;
  border: 1px solid var(--c-hairline);
  margin-right: var(--sp-xxs);
}
.pill-primary { background: var(--c-cream); color: var(--c-primary-deep); border-color: var(--c-beige-deep); }
.pill-success { background: rgba(47, 138, 79, 0.10); color: var(--c-success); border-color: transparent; }
.pill-warn    { background: rgba(217, 135, 12, 0.12); color: var(--c-warn); border-color: transparent; }
.pill-danger  { background: rgba(198, 58, 43, 0.10); color: var(--c-danger); border-color: transparent; }

/* ===== step list ===== */
.steps { counter-reset: step; list-style: none; padding: 0; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 52px;
  margin-bottom: var(--sp-lg);
  min-height: 36px;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--rad-full);
  background: var(--c-cream);
  color: var(--c-primary-deep);
  border: 1px solid var(--c-beige-deep);
  font-family: var(--font-display);
  font-weight: 600;
}

/* ===== quiz ===== */
.quiz {
  background: var(--c-canvas);
  border: 1px solid var(--c-hairline-soft);
  border-radius: var(--rad-lg);
  padding: var(--sp-lg);
  margin: var(--sp-lg) 0;
}
.quiz h4 { margin-top: 0; color: var(--c-primary); }
.quiz .quiz-opts { list-style: none; padding: 0; margin: var(--sp-xs) 0 0; }
.quiz .quiz-opts li {
  padding: var(--sp-xs) var(--sp-sm);
  border: 1px solid var(--c-hairline);
  border-radius: var(--rad-sm);
  margin: var(--sp-xxs) 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz .quiz-opts li:hover { border-color: var(--c-primary); background: var(--c-surface-cream-soft); }
.quiz .quiz-opts li.correct { border-color: var(--c-success); background: rgba(47, 138, 79, 0.10); }
.quiz .quiz-opts li.wrong   { border-color: var(--c-danger);  background: rgba(198, 58, 43, 0.10); }
.quiz .quiz-feedback { margin-top: var(--sp-sm); padding: var(--sp-xs) var(--sp-md); border-radius: var(--rad-sm); font-size: var(--fs-body-sm); display: none; }
.quiz .quiz-feedback.show { display: block; }
.quiz .quiz-feedback.correct { background: rgba(47, 138, 79, 0.12); color: var(--c-success); }
.quiz .quiz-feedback.wrong   { background: rgba(198, 58, 43, 0.10); color: var(--c-danger); }

/* ===== spoiler / details ===== */
details, details.spoiler {
  margin: var(--sp-md) 0;
  border: 1px solid var(--c-hairline-soft);
  border-radius: var(--rad-lg);
  padding: 0;
  background: var(--c-canvas);
}
details[open], details.spoiler[open] { border-color: var(--c-beige-deep); }
details summary, details.spoiler summary {
  padding: var(--sp-sm) var(--sp-lg);
  cursor: pointer;
  font-weight: 600;
  color: var(--c-primary);
  list-style: none;
  user-select: none;
}
details summary::-webkit-details-marker, details.spoiler summary::-webkit-details-marker { display: none; }
details summary::before, details.spoiler summary::before {
  content: "▶ ";
  display: inline-block;
  margin-right: 6px;
  font-size: 0.7em;
  transition: transform 0.15s;
}
details[open] summary::before, details.spoiler[open] summary::before { transform: rotate(90deg); }
details > *:not(summary), details.spoiler > *:not(summary) {
  padding: 0 var(--sp-lg) var(--sp-md);
}

/* ===== preformatted excerpt boxes (used in paper.html) ===== */
.box-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  white-space: pre-wrap;
  background: var(--c-surface-cream-soft);
  padding: var(--sp-md);
  border-radius: var(--rad-md);
  border: 1px solid var(--c-beige-deep);
  color: var(--c-charcoal);
}
.box-letter {
  font-family: var(--font-display);
  font-style: italic;
  padding: var(--sp-sm) var(--sp-md);
  background: var(--c-surface-cream-soft);
  border-radius: var(--rad-md);
  border: 1px solid var(--c-beige-deep);
  color: var(--c-charcoal);
}

/* ===== math formula box ===== */
.math-box {
  background: var(--c-surface-cream-soft);
  border-left: 3px solid var(--c-primary);
  padding: var(--sp-sm) var(--sp-lg);
  margin: var(--sp-md) 0;
  border-radius: 0 var(--rad-md) var(--rad-md) 0;
  font-size: 1.02rem;
  overflow-x: auto;
  font-family: var(--font-display);
}

/* ===== problem index ===== */
.problem-index { margin: var(--sp-xxl) 0; }
.problem-index .yr-block {
  margin: var(--sp-md) 0;
  border: 1px solid var(--c-hairline-soft);
  border-radius: var(--rad-lg);
  padding: var(--sp-md) var(--sp-lg);
  background: var(--c-canvas);
}
.problem-index .yr-block h3 {
  margin: 0 0 var(--sp-sm);
  font-size: var(--fs-h5);
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--c-steel);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.problem-index .pi-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--sp-md);
  align-items: center;
  padding: var(--sp-sm) 0;
  border-top: 1px solid var(--c-hairline-soft);
}
.problem-index .pi-row:first-of-type { border-top: none; }
.problem-index .pi-label {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--c-primary);
  font-size: var(--fs-body-sm);
}
.problem-index .pi-title { font-weight: 600; color: var(--c-ink); }
.problem-index .pi-title small {
  display: block;
  font-weight: 400;
  color: var(--c-steel);
  font-size: var(--fs-caption);
  margin-top: 2px;
}

/* ===== responsive ===== */
@media (max-width: 820px) {
  .layout { grid-template-columns: 1fr; }
  .toc { position: static; border-left: none; padding-left: 0; border-top: 1px solid var(--c-hairline-soft); padding-top: var(--sp-sm); }
  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    background: none;
    border: 1px solid var(--c-hairline-strong);
    border-radius: var(--rad-sm);
    padding: 6px 10px;
    color: var(--c-ink);
    cursor: pointer;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    margin-top: var(--sp-sm);
    border-top: 1px solid var(--c-hairline-soft);
    padding-top: var(--sp-sm);
  }
  .nav-links.open { display: flex; }
  .nav-wrap { flex-wrap: wrap; }
  .nav-links .nav-spacer { margin-left: 0; }
  .hero h1 { font-size: 36px; }
  .hero { padding: var(--sp-section) var(--sp-md) var(--sp-xl); }
  main { padding: var(--sp-xl) var(--sp-md) var(--sp-section); }
  .problem-index .pi-row { grid-template-columns: 60px 1fr; }
}

/* ===== print ===== */
@media print {
  .site-header, .toc, footer, .btn-row, .sunset-stripe { display: none !important; }
  main { max-width: 100%; }
  body { font-size: 11pt; background: white; }
  pre { background: #f4f4f4; color: #1f1f1f; border: 1px solid var(--c-hairline); }
}