:root {
  --ink: #171717;
  --muted: #6b6b66;
  --line: #deded8;
  --paper: #ffffff;
  --soft: #f6f6f2;
  --orange: #FF9D50;
  --yellow: #FFF9D8;
  --cyan: #1DCED8;
  --green: #55E07E;
  --font-head: 'Pally', 'Open Sans', system-ui, sans-serif;
  --font-body: 'Open Sans', system-ui, sans-serif;
  --rail: 204px;
  --page: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; overflow-x: hidden; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  transition: background-color .2s ease, color .2s ease;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
p { margin-top: 0; }

main, .site-footer { margin-left: var(--rail); }
.page-width { width: min(calc(100% - 96px), var(--page)); margin-inline: auto; }
/* .site-footer carries .page-width too (for the same capped content width),
   but .page-width's own width formula assumes its containing block is
   already narrowed by the rail (true for everything nested inside <main>,
   since <main> itself has margin-left:var(--rail)). .site-footer is a
   sibling of <main>, not a child of it, so its containing block is the
   full body width -- meaning the plain "100% - 96px" formula produced a box
   108px too wide once margin-left:var(--rail) was added on top of it,
   pushing the footer's right edge past the viewport and causing the whole
   page to become horizontally scrollable. Subtracting the rail here too
   keeps the footer's total width (margin + box) within the viewport.
   Same-specificity plus a logical/physical property mismatch made this
   unreliable to override via source order alone, hence the more specific
   selector. */
.site-footer.page-width { margin-left: var(--rail); margin-right: 0; width: min(calc(100% - var(--rail) - 96px), var(--page)); }

/* Desktop side rail */
.site-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rail);
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 34px 26px 28px;
  border-right: 1px solid var(--ink);
  background: var(--paper);
  transition: background-color .2s ease, border-color .2s ease;
}
.rail-wordmark {
  font-family: var(--font-head);
  font-size: 24px;
  letter-spacing: -.025em;
  line-height: 1;
}
.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(70px, 12vh, 130px);
}
.rail-nav a {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  font-family: var(--font-head);
  font-size: 15px;
  border-bottom: 1px solid transparent;
  position: relative;
}
.rail-nav a span {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--muted);
}
.rail-nav a::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  width: 0;
  height: 8px;
  transform: translateY(-50%);
  background: var(--cyan);
  transition: width .18s ease;
}
.rail-nav a:hover::before,
.rail-nav a.active::before { width: 12px; }
.rail-nav a:hover { border-bottom-color: var(--line); }
.rail-bottom { margin-top: auto; display: grid; gap: 18px; align-items: start; }
.rail-mark { width: 22px; height: 22px; display: block; background: var(--green); }

.theme-toggle {
  width: fit-content;
  border: 0;
  background: transparent;
  padding: 0 0 2px;
  font-family: var(--font-head);
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 1px solid currentColor;
}
.theme-toggle:hover { color: var(--ink); }

/* Mobile header only */
.site-header { display: none; }

.section-label {
  margin: 0 0 24px;
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-label span { width: 28px; height: 4px; background: var(--cyan); display: inline-block; }
.section-label.light { color: #fff; }
.section-label.light span { background: var(--orange); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 500;
  margin: 0;
  line-height: .98;
  letter-spacing: -0.045em;
}
h1 { font-size: clamp(70px, 8.7vw, 140px); }
h2 { font-size: clamp(46px, 5.7vw, 82px); }
h3 { font-size: 30px; }

/* Hero */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(340px, .84fr);
  gap: 6vw;
  align-items: center;
  padding: 70px 0 78px;
  position: relative;
  overflow: visible;
}
.hero-abstract { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.abstract-line {
  position: absolute;
  top: 13%;
  left: 44%;
  width: 31vw;
  max-width: 500px;
  height: 3px;
  background: var(--cyan);
  transform: rotate(-7deg);
  transform-origin: left center;
}
.abstract-square {
  position: absolute;
  left: 2%;
  bottom: 9%;
  width: 19px;
  height: 19px;
  background: var(--green);
}
.abstract-arc {
  position: absolute;
  right: -85px;
  top: 4%;
  width: 210px;
  height: 210px;
  border: 30px solid var(--yellow);
  border-radius: 50%;
  opacity: .9;
}
.hero-copy, .hero-side { position: relative; z-index: 2; }
.hero-copy { align-self: center; }
.hero-deck { font-size: clamp(25px, 2.5vw, 37px); max-width: 620px; margin: 30px 0 10px; }
.hero-small { color: var(--muted); font-size: 18px; }
.hero-links { display: flex; align-items: center; gap: 28px; margin-top: 38px; font-family: var(--font-head); }
.primary-link {
  display: inline-flex;
  gap: 48px;
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  padding: 15px 18px;
  min-width: 210px;
  justify-content: space-between;
  transition: transform .15s ease, background-color .15s ease;
}
.primary-link:hover { background: var(--orange); color: #111412; transform: translate(3px, -3px); }
.plain-link { border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.plain-link:hover { border-color: var(--cyan); }

.hero-side { align-self: stretch; display: grid; grid-template-rows: 1fr auto; min-height: 650px; }
.photo-wrap { position: relative; min-height: 505px; }
.photo-field {
  position: absolute;
  inset: 0;
  background: var(--soft);
  overflow: hidden;
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 0 100%);
}
.photo-field img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-field::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  right: 8%;
  width: 1px;
  height: 100%;
  background: color-mix(in srgb, var(--ink) 35%, transparent);
}
.photo-note {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 5;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .12em;
  background: var(--paper);
  color: var(--ink);
  padding: 6px 8px;
}
/* Positioned relative to .photo-wrap (not .photo-field), and painted before the
   photo in the DOM, so the frame itself covers whatever part of a shape would
   otherwise land on top of the photo. Only the parts that bleed past the
   frame's edge stay visible, peeking out from behind it. */
.shape { position: absolute; z-index: 0; }
.shape-yellow { width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--yellow); left: -12%; top: 13%; }
.shape-orange { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); right: -2%; bottom: -2%; }
.shape-cyan-bar { width: 70%; height: 13px; background: var(--cyan); left: 18%; top: 43%; transform: rotate(-14deg); }
.shape-green-square { width: 56px; height: 56px; background: var(--green); right: 8%; top: 14%; }
.side-note { display: grid; grid-template-columns: 52px 1fr; gap: 18px; border-top: 1px solid var(--ink); padding-top: 16px; margin-top: 28px; color: var(--muted); }
.side-note span { font-family: var(--font-head); color: var(--ink); font-size: 11px; letter-spacing: .1em; }
.side-note p { margin: 0; max-width: 390px; font-size: 16px; }

/* GPA strip */
.start-strip { background: var(--yellow); border-block: 1px solid var(--ink); position: relative; }
.start-strip::before {
  content: '';
  position: absolute;
  left: calc(var(--rail) * -1);
  top: 26px;
  width: calc(var(--rail) + 70px);
  height: 8px;
  background: var(--orange);
}
.start-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 7vw; align-items: stretch; }
.start-intro { padding: 64px 0 66px; }
.start-intro h2 { max-width: 480px; }
.gpa-feature { background: var(--cyan); color: #111412; padding: 42px 40px; display: flex; justify-content: space-between; gap: 34px; align-items: flex-start; min-height: 280px; transition: transform .16s ease, background-color .16s ease; }
.gpa-feature:hover { background: #22d7e1; transform: translateY(-6px); }
.gpa-feature strong { display: block; font-family: var(--font-head); font-size: clamp(42px, 4.5vw, 66px); letter-spacing: -.045em; margin-top: 18px; }
.gpa-feature p { max-width: 520px; margin: 10px 0 0; }
.gpa-tag { font-family: var(--font-head); font-size: 11px; letter-spacing: .12em; }
.big-arrow { font-family: var(--font-head); font-size: 42px; line-height: 1; }

/* Shared decorative geometry */
.student-index, .notes-section, .about-section { position: relative; }
.section-ghost { position: absolute; pointer-events: none; z-index: -1; }
.ghost-students { right: 2%; top: 42px; width: 150px; height: 150px; border: 22px solid var(--yellow); border-radius: 50%; opacity: .78; }
.ghost-notes { left: 47%; top: 44px; width: 86px; height: 86px; background: var(--green); opacity: .14; transform: rotate(12deg); }
.ghost-about { right: 7%; top: 72px; width: 180px; height: 5px; background: var(--orange); transform: rotate(-8deg); transform-origin: right center; }

/* Student index */
.student-index { padding: 112px 0 122px; }
.index-head { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 42px; align-items: end; margin-bottom: 54px; }
.index-head .section-label { align-self: start; }
.index-head h2 { font-size: clamp(42px, 4.8vw, 68px); }
.index-head > p:last-child { color: var(--muted); max-width: 360px; justify-self: end; }
.index-list { border-top: 1px solid var(--ink); }
.index-row {
  display: grid;
  grid-template-columns: 72px minmax(220px, .9fr) minmax(260px, 1.2fr) 74px;
  gap: 28px;
  align-items: center;
  min-height: 104px;
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  position: relative;
}
.index-row::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 3px; background: var(--cyan); transition: width .2s ease; }
a.index-row:hover::after { width: 100%; }
.index-no { font-family: var(--font-head); font-size: 13px; color: var(--muted); }
.index-title { font-family: var(--font-head); font-size: 31px; letter-spacing: -.03em; }
.index-copy { color: var(--muted); font-size: 16px; max-width: 520px; }
.index-mark { justify-self: end; font-family: var(--font-head); font-size: 10px; letter-spacing: .11em; padding: 5px 7px; border: 1px solid var(--line); }
.mark-cyan { background: var(--cyan); border-color: var(--cyan); color: #111412; }
.mark-orange { background: var(--orange); border-color: var(--orange); color: #111412; }
.mark-green { background: var(--green); border-color: var(--green); color: #111412; }
.mark-yellow { background: var(--yellow); border-color: #e9e1a7; color: #111412; }
.fine-print { color: var(--muted); font-size: 14px; max-width: 720px; margin: 28px 0 0; }

/* Notes */
.notes-section { padding: 112px 0; display: grid; grid-template-columns: .9fr 1.1fr; gap: 8vw; align-items: end; }
.notes-head h2 { max-width: 620px; }
.note-empty { border-top: 1px solid var(--ink); padding-top: 20px; align-self: end; }
.note-big { font-family: var(--font-head); font-size: 36px; margin-bottom: 8px; }
.note-empty p:last-child { color: var(--muted); max-width: 430px; }

/* CARE */
.care-spread { background: #111412; color: #fff; position: relative; overflow: hidden; }
.care-spread::before { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border: 38px solid var(--cyan); border-radius: 50%; opacity: .18; }
.care-spread::after { content: ''; position: absolute; left: 9%; bottom: 22px; width: 120px; height: 4px; background: var(--green); transform: rotate(11deg); }
.care-grid { padding: 100px 0 106px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 9vw; position: relative; z-index: 2; }
.care-heading h2 { max-width: 600px; }
.care-heading > p:last-child { color: #bdbdb7; max-width: 470px; margin-top: 28px; }
.care-lines { border-top: 1px solid #555; }
.care-lines article { position: relative; display: grid; grid-template-columns: 42px 180px 1fr; gap: 20px; align-items: start; border-bottom: 1px solid #444; padding: 28px 0 30px; }
.care-lines h3 { font-size: 28px; }
.care-lines p { margin: 0; color: #bdbdb7; font-size: 16px; max-width: 500px; }
.care-dot { width: 14px; height: 14px; display: inline-block; margin-top: 8px; }
.care-dot.orange { background: var(--orange); }
.care-dot.cyan { background: var(--cyan); }
.care-dot.green { background: var(--green); }

/* About */
.about-section { padding: 120px 0 130px; border-top: 1px solid var(--ink); display: grid; grid-template-columns: 70px 1.15fr .85fr; gap: 40px 6vw; }
.about-number { font-family: var(--font-head); font-size: 13px; color: var(--muted); }
.about-main h2 { font-size: clamp(46px, 5vw, 72px); max-width: 860px; margin-bottom: 34px; }
.about-main > p:not(.section-label) { max-width: 760px; font-size: 19px; }
.about-main > p:nth-of-type(n+3) { color: var(--muted); }
.about-aside { padding-top: 70px; }
.aside-line { border-top: 5px solid var(--line); padding: 14px 0 26px; }
.aside-line span { font-family: var(--font-head); font-size: 11px; letter-spacing: .1em; }
.aside-line p { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.cyan-line { border-color: var(--cyan); }
.orange-line { border-color: var(--orange); }
.green-line { border-color: var(--green); }

/* Contact */
.contact-section { background: var(--yellow); border-block: 1px solid var(--ink); position: relative; }
.contact-section::before { content: ''; position: absolute; top: -24px; right: 8vw; width: 48px; height: 48px; background: var(--orange); }
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; padding: 92px 0 100px; }
.contact-note { color: var(--muted); max-width: 430px; margin-top: 22px; }
.contact-form { max-width: 720px; }
.contact-form label { display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: start; border-top: 1px solid var(--ink); padding: 14px 0 18px; }
.contact-form .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; }
.contact-form label > span { font-family: var(--font-head); font-size: 12px; letter-spacing: .08em; padding-top: 9px; }
.contact-form input, .contact-form textarea { border: 0; background: transparent; border-radius: 0; outline: none; width: 100%; padding: 7px 0; resize: vertical; color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: inset 0 -3px 0 var(--cyan); }
.form-end { border-top: 1px solid var(--ink); padding-top: 18px; display: flex; gap: 20px; align-items: center; }
.form-end button { border: 0; background: var(--ink); color: var(--paper); font-family: var(--font-head); padding: 13px 24px; cursor: pointer; }
.form-end button:hover { background: var(--orange); color: #111412; }
.form-end p { margin: 0; color: var(--muted); font-size: 14px; }

.site-footer { min-height: 116px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-size: 14px; color: var(--muted); }
.site-footer span:nth-child(2) { text-align: center; font-family: var(--font-head); }
.site-footer a { justify-self: end; color: var(--ink); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

/* Dark mode */
html[data-theme="dark"] {
  --ink: #f4f5f2;
  --muted: #b7bbb5;
  --line: #353a35;
  --paper: #111412;
  --soft: #1a1e1b;
}
html[data-theme="dark"] .start-strip,
html[data-theme="dark"] .contact-section { background: #24251d; }
html[data-theme="dark"] .gpa-feature { background: var(--cyan); color: #111412; }
html[data-theme="dark"] .photo-note { background: #111412; color: #f4f5f2; }
html[data-theme="dark"] .care-spread { background: #080a09; }
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea { color: var(--ink); }
html[data-theme="dark"] .form-end button { background: var(--ink); color: #111412; }
html[data-theme="dark"] .form-end button:hover { background: var(--orange); color: #111412; }
html[data-theme="dark"] .abstract-arc { opacity: .15; }
html[data-theme="dark"] .ghost-students { opacity: .12; }
html[data-theme="dark"] .ghost-notes { opacity: .20; }
html[data-theme="dark"] .start-strip::before { opacity: .9; }

/* Tablet */
@media (max-width: 1080px) {
  :root { --rail: 176px; }
  .page-width { width: min(calc(100% - 56px), var(--page)); }
  .site-footer.page-width { width: min(calc(100% - var(--rail) - 56px), var(--page)); }
  .site-rail { padding-inline: 22px; }
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 44px; padding-top: 56px; }
  .hero-side { min-height: 0; grid-template-columns: 1fr; }
  .photo-wrap { min-height: 420px; }
  .start-grid, .care-grid, .notes-section, .contact-grid { grid-template-columns: 1fr; gap: 42px; }
  .gpa-feature { min-height: 220px; }
  .index-head { grid-template-columns: 1fr 1.2fr; }
  .index-head > p:last-child { grid-column: 2; justify-self: start; }
  /* The desktop row grid's minmax() minimums (220px + 260px, plus the fixed
     72px/74px columns and gaps) need about 710px to avoid overflowing --
     more than this breakpoint's available width once the rail and side
     gutters are subtracted. Switching to flexible tracks here removes that
     hard minimum. */
  .index-row { grid-template-columns: 42px 1fr auto; gap: 10px 14px; }
  .index-copy { grid-column: 2 / 4; max-width: none; }
  .index-mark { grid-column: 3; grid-row: 1; }
  .about-section { grid-template-columns: 50px 1fr; }
  .about-aside { grid-column: 2; padding-top: 0; }
}

/* Mobile */
@media (max-width: 780px) {
  :root { --rail: 0px; }
  html { scroll-padding-top: 76px; }
  body { font-size: 17px; }
  main, .site-footer.page-width { margin-left: 0; }
  .page-width { width: min(calc(100% - 36px), var(--page)); }
  .site-footer.page-width { width: min(calc(100% - 36px), var(--page)); }
  .site-rail { display: none; }
  .site-header {
    width: calc(100% - 36px);
    margin: 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
  }
  .wordmark { font-family: var(--font-head); font-size: 21px; letter-spacing: -.02em; }
  .mobile-actions { display: flex; align-items: center; gap: 16px; }
  .mobile-theme-toggle { font-size: 13px; }
  .menu-button { display: block; border: 0; background: transparent; font-family: var(--font-head); font-size: 14px; padding: 8px 0; cursor: pointer; }
  .site-nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    flex-direction: column;
    gap: 0;
    padding: 8px 18px 14px;
    z-index: 49;
  }
  .site-nav.open { display: flex; }
  .site-nav a { font-family: var(--font-head); padding: 12px 0; border-bottom: 1px solid var(--line); }
  .hero { padding: 52px 0 62px; }
  h1 { font-size: clamp(62px, 19vw, 92px); }
  .hero-links { align-items: flex-start; flex-direction: column; gap: 18px; }
  .abstract-line { left: 42%; top: 8%; width: 62vw; }
  .abstract-arc { width: 130px; height: 130px; border-width: 20px; right: -58px; top: 3%; }
  .photo-wrap { min-height: 310px; }
  .photo-field { clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 0 100%); }
  .shape-green-square { width: 38px; height: 38px; }
  .start-strip::before { left: -18px; width: 78px; height: 6px; }
  .start-intro { padding: 50px 0 0; }
  .gpa-feature { padding: 30px 24px; margin-bottom: 0; }
  .student-index { padding: 78px 0 86px; }
  .ghost-students { width: 95px; height: 95px; border-width: 15px; right: -28px; top: 46px; }
  .index-head { grid-template-columns: 1fr; gap: 18px; }
  .index-head > p:last-child { grid-column: auto; justify-self: start; }
  .index-row { grid-template-columns: 42px 1fr auto; gap: 10px 14px; padding: 20px 0; }
  .index-title { font-size: 25px; }
  .index-copy { grid-column: 2 / 4; }
  .index-mark { grid-column: 3; grid-row: 1; }
  .notes-section { padding: 80px 0; }
  .ghost-notes { left: auto; right: -16px; top: 44px; width: 64px; height: 64px; }
  .care-grid { padding: 74px 0 80px; }
  .care-lines article { grid-template-columns: 28px 1fr; }
  .care-lines p { grid-column: 2; }
  .about-section { padding: 86px 0 92px; grid-template-columns: 1fr; }
  .about-number { display: none; }
  .about-aside { grid-column: auto; }
  .ghost-about { width: 110px; top: 52px; right: 2%; }
  .contact-grid { padding: 72px 0 80px; }
  .contact-form label { grid-template-columns: 1fr; gap: 2px; }
  .contact-form label > span { padding-top: 0; }
  .site-footer { grid-template-columns: 1fr auto; min-height: 96px; }
  .site-footer span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}