/* The editorial layer keeps the study controls and account flows intact. */
:root {
  --ink: #26362e;
  --paper: #f6f1e7;
  --white: #fffdf7;
  --line: #dcd8c9;
  --green: #193e34;
  --red: #a9543c;
  --red-dark: #853e2d;
  --gold: #cfaa73;
}

body {
  background: radial-gradient(circle at 69% 0, #fffaf1 0, var(--paper) 43%, #f2ede3 100%);
}

.paper-grain { opacity: .12; }
.app-shell { grid-template-columns: 238px minmax(0, 1fr); }
.side { background: #f1ede3; border-right-color: #dbd5c6; padding: 31px 17px 26px; }
.brand { border-bottom: 1px solid #dad5c7; margin-bottom: 31px; padding: 2px 10px 28px; }
.brand-mark { background: #a9543c; box-shadow: 4px 4px 0 #d6bd91; }
.brand strong { font-size: 25px; }
.side-eyebrow { padding-left: 12px; }
.nav-item { border-radius: 2px; }
.nav-item.active { background: #193e34; box-shadow: 0 8px 22px #193e3424; }
.main { max-width: 1600px; padding: 0 clamp(22px, 4.3vw, 78px) 90px; }
.topbar { height: 91px; }
.topbar-label { letter-spacing: .23em; }

.hero {
  isolation: isolate;
  display: block;
  min-height: 430px;
  background: #193e34;
  box-shadow: 0 18px 40px #26362e17;
}
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-media { z-index: -2; }
.hero-media img { object-fit: cover; object-position: center 53%; }
.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #113a31fa 0%, #153c33ef 27%, #183d35bc 49%, #1b3c343a 74%, #1b3c3408 100%);
}
.hero-copy { max-width: 790px; padding: 58px clamp(32px, 5.6vw, 82px) 61px; z-index: 1; }
.hero .eyebrow { color: #e7c493; letter-spacing: .24em; }
.hero h1 {
  max-width: 750px;
  margin: 22px 0 17px;
  font-size: clamp(39px, 4.4vw, 67px);
  line-height: 1.24;
  letter-spacing: .045em;
  text-wrap: balance;
  text-shadow: 0 2px 16px #0c2c2670;
}
.hero h1 span { color: #fff9e9; }
.hero h1 span:last-child { color: #f0c58b; }
.hero p { color: #f2eadd; font-size: 14px; line-height: 1.9; }
.hero-cta { margin-top: 29px; padding: 13px 20px; min-width: 159px; background: #b45e43; box-shadow: 0 5px 18px #092e2980; }
.hero-seal {
  position: absolute;
  right: 30px;
  bottom: 29px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #fff9e9;
  font: 14px/1.35 var(--serif);
  letter-spacing: .18em;
  text-shadow: 0 1px 9px #122e28dd;
}
.hero-seal:before { content: ""; width: 46px; height: 1px; margin: 0 0 7px auto; background: #f4dfbf; }

.section-heading { margin-top: 46px; }
.section-heading h2 { font-size: clamp(25px, 2.3vw, 33px); letter-spacing: .02em; }
.summary-grid { border-color: #ded9ca; box-shadow: 0 9px 24px #36483a0a; }
.summary-number, .summary-progress { padding: 27px 26px; }
.summary-number strong { font-size: 34px; }
.summary-progress strong { color: #a9543c; }
.path-heading { margin-top: 56px; }
.path-grid { gap: 14px; }
.path-card {
  min-height: 269px;
  padding: 18px 18px 16px;
  border-color: #e0ddcf;
  background: #fffcf5;
  box-shadow: 0 4px 15px #34443609;
}
.path-card:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #9eb8a1;
}
.path-card:after { width: 150px; height: 150px; top: -71px; right: -48px; border-color: #344e3522; }
.path-card:nth-child(2):before { background: #b2a16e; }
.path-card:nth-child(3):before { background: #b7654d; }
.path-card:nth-child(4):before { background: #758d9a; }
.path-card:nth-child(5):before { background: #b47b5c; }
.path-index { font-size: 10px; color: #73847a; }
.path-kanji {
  display: grid;
  place-items: center;
  align-self: stretch;
  height: 91px;
  margin: 13px 0 12px;
  font-size: 54px;
  background: radial-gradient(ellipse at 51% 51%, #e6ede3 0 35%, #f3f5ec 36% 53%, transparent 54%),
              repeating-linear-gradient(0deg, #e6e9dc40 0 1px, transparent 1px 12px);
}
.path-card:nth-child(2) .path-kanji { background: radial-gradient(ellipse at 51% 51%, #eee8d5 0 35%, #f8f5e9 36% 53%, transparent 54%); }
.path-card:nth-child(3) .path-kanji { background: radial-gradient(ellipse at 51% 51%, #f3e6df 0 35%, #fbf3ed 36% 53%, transparent 54%); }
.path-card:nth-child(4) .path-kanji { background: radial-gradient(ellipse at 51% 51%, #e3ebec 0 35%, #f1f5f4 36% 53%, transparent 54%); }
.path-card:nth-child(5) .path-kanji { background: radial-gradient(ellipse at 51% 51%, #f2e7da 0 35%, #faf3ea 36% 53%, transparent 54%); }
.path-card strong { font-size: 19px; }
.path-card p { font-size: 11px; color: #78867d; min-height: 38px; margin-top: 5px; }
.path-bottom { padding-top: 12px; }
.path-card:hover { transform: translateY(-5px); box-shadow: 0 16px 27px #25382c1b; border-color: #adbdab; }

.field-note {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 281px;
  margin-top: 44px;
  background: #e9e5d8;
  border: 1px solid #d9d6c7;
  overflow: hidden;
}
.field-note-image { min-height: 281px; overflow: hidden; }
.field-note-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.field-note-copy { padding: clamp(27px, 3vw, 43px) clamp(26px, 4vw, 57px); align-self: center; }
.field-note .eyebrow { color: #a9543c; }
.field-note h2 { font: 500 clamp(25px, 2.4vw, 36px)/1.34 var(--serif); margin: 12px 0 14px; letter-spacing: .015em; }
.field-note p { color: #59675c; line-height: 1.9; max-width: 540px; margin: 0 0 19px; }
.field-note a { display: inline-flex; align-items: center; gap: 24px; padding-bottom: 5px; border-bottom: 1px solid #a9543c; color: #914732; font-weight: 700; text-decoration: none; }
.field-note a:hover { gap: 31px; }
.overview-foot { margin-top: 28px; }

.library-banner { background: linear-gradient(115deg, #173a31 0%, #234e40 70%, #315c4b 100%); }
.library-banner h2 { font: 500 36px var(--serif); letter-spacing: .05em; margin: 7px 0 5px; }
.material-card:hover { border-color: #b0bfac; }

@media (max-width: 1050px) {
  .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { min-height: 390px; }
  .hero-copy { padding-top: 50px; padding-bottom: 52px; }
}
@media (max-width: 750px) {
  .app-shell { display: block; }
  .side { padding: 15px; border-bottom-color: #ddd6c8; }
  .brand { margin: 0; padding: 0; border: 0; }
  .main { padding: 0 15px 50px; }
  .topbar { height: auto; min-height: 62px; }
  .hero { min-height: 485px; }
  .hero-media img { object-position: 62% center; }
  .hero:before { background: linear-gradient(180deg, #12372ff7 0%, #153930e8 42%, #183b31a8 67%, #1b3c3429 100%); }
  .hero-copy { padding: 38px 27px 160px; }
  .hero h1 { font-size: clamp(34px, 8vw, 46px); line-height: 1.28; margin-top: 18px; }
  .hero p { font-size: 13px; max-width: 330px; }
  .hero-seal { bottom: 18px; right: 20px; font-size: 12px; }
  .section-heading { margin-top: 36px; }
  .path-heading { margin-top: 44px; }
  .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .path-card { min-height: 247px; padding: 14px; }
  .path-kanji { height: 75px; font-size: 46px; }
  .field-note { grid-template-columns: 1fr; margin-top: 32px; }
  .field-note-image { min-height: 0; height: 205px; }
  .field-note-copy { padding: 27px 25px 31px; }
  .field-note h2 { font-size: 27px; }
}
@media (max-width: 390px) {
  .path-grid { gap: 8px; }
  .path-card { min-height: 245px; padding: 12px; }
  .path-card strong { font-size: 17px; }
  .path-card p { font-size: 10px; }
  .hero-copy { padding-left: 22px; padding-right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .path-card, .field-note a, .hero-cta { transition-duration: .01ms; }
}