:root {
  --shiji-forest: #17664f;
  --shiji-forest-2: #2a7a5f;
  --shiji-cream: #fbf8f0;
  --shiji-paper: #fffefa;
  --shiji-amber: #cf8a24;
  --shiji-ink: #15362b;
  --shiji-muted: #66736d;
  --shiji-line: rgba(11, 63, 47, .19);
  --shiji-content: 1240px;
}

.shiji-story-page { color: var(--shiji-ink); background: var(--shiji-paper); }
.shiji-story-page main { overflow: clip; }
.shiji-story-page main > section { padding-right: max(32px, calc((100vw - var(--shiji-content)) / 2)); padding-left: max(32px, calc((100vw - var(--shiji-content)) / 2)); }
.shiji-story-page h1,
.shiji-story-page h2,
.shiji-story-page h3 { text-wrap: balance; }
.shiji-story-page .section-label { color: var(--shiji-amber); letter-spacing: .17em; }
.shiji-story-page .button { border-radius: 4px; }
.shiji-story-page .site-header nav { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.shiji-story-page .site-header .nav-pill,
.shiji-story-page .site-header nav .nav-pill { border-radius: 2px; }
.shiji-story-page .site-header .nav-pill-shiji[aria-current="page"] { color: var(--shiji-paper); background: var(--shiji-forest); }
.shiji-story-context { color: var(--shiji-paper) !important; background: var(--shiji-forest) !important; border: 0 !important; box-shadow: none !important; }
.shiji-story-context a { color: var(--shiji-paper) !important; background: transparent !important; border-color: rgba(255,255,255,.34) !important; }

.campus-page-shiji .shiji-story-hero {
  display: grid;
  grid-template-areas: "copy visual";
  grid-template-columns: minmax(520px, .9fr) minmax(620px, 1.1fr);
  min-height: 760px;
  padding: 0;
  color: var(--shiji-paper);
  background: var(--shiji-forest);
}
.campus-page-shiji .shiji-story-hero::before { display: none; }
.campus-page-shiji .shiji-story-hero-copy { grid-area: copy; align-self: stretch; display: flex; flex-direction: column; justify-content: center; max-width: none; padding: 82px clamp(44px, 5vw, 96px) 58px; }
.campus-page-shiji .shiji-story-hero .campus-hero-identity { color: #f1d39a; border-color: rgba(241,211,154,.34); }
.campus-page-shiji .shiji-story-hero .campus-hero-identity > span { color: var(--shiji-amber); border-color: var(--shiji-amber); }
.campus-page-shiji .shiji-story-hero .hero-kicker { color: #f1d39a; }
.campus-page-shiji .shiji-story-hero h1 { max-width: 640px; margin: 18px 0 24px; color: var(--shiji-paper); font-size: clamp(54px, 5.25vw, 82px); line-height: 1.07; letter-spacing: -.045em; }
.campus-page-shiji .shiji-story-hero-copy > p:not(.hero-kicker) { max-width: 540px; margin: 0 0 30px; color: rgba(255,254,250,.78); font-size: 17px; line-height: 1.9; }
.campus-page-shiji .shiji-story-hero-copy .campus-hero-contact { margin-top: -8px; margin-bottom: 26px; color: rgba(255,254,250,.88); font-size: 14px; line-height: 1.6; }
.campus-page-shiji .shiji-story-hero-copy .campus-hero-contact strong { color: #f0ca78; }
.campus-page-shiji .shiji-story-hero .button { align-self: flex-start; color: var(--shiji-forest); background: #f1d39a; border-color: #f1d39a; }
.shiji-story-index { margin-top: auto; color: var(--shiji-amber); font-family: var(--serif); font-size: clamp(112px, 12vw, 188px); font-weight: 400; line-height: .78; letter-spacing: -.06em; }
.campus-page-shiji .shiji-story-hero figure { grid-area: visual; min-height: 760px; margin: 0; border-radius: 0; box-shadow: none; }
.campus-page-shiji .shiji-story-hero figure img { min-height: 760px; object-position: center; }

.shiji-story-path { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4,1fr); max-width: var(--shiji-content); margin: 0 auto; padding: 0 0; background: var(--shiji-paper); border-bottom: 1px solid var(--shiji-line); }
.shiji-story-path a { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; min-height: 86px; padding: 0 26px; color: var(--shiji-ink); border-right: 1px solid var(--shiji-line); }
.shiji-story-path a:last-child { border-right: 0; }
.shiji-story-path span { color: var(--shiji-amber); font-family: var(--serif); font-size: 22px; }
.shiji-story-path b { font-size: 14px; }
.shiji-story-path a:hover { background: var(--shiji-cream); }

.shiji-story-questions { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(60px, 9vw, 150px); background: var(--shiji-paper); }
.shiji-story-questions header { align-self: start; position: sticky; top: 164px; }
.shiji-story-questions h2,
.shiji-story-programs h2,
.shiji-story-process h2,
.shiji-story-beliefs h2,
.shiji-story-environment h2,
.shiji-story-visit h2 { margin: 16px 0 24px; color: var(--shiji-forest); font-size: clamp(42px, 4.1vw, 64px); line-height: 1.12; letter-spacing: -.035em; }
.shiji-story-questions header > p:last-child,
.shiji-story-programs header > p:last-child,
.shiji-story-process header > p:last-child,
.shiji-story-environment header > p:last-child,
.shiji-story-visit > div > p:last-child { color: var(--shiji-muted); font-size: 17px; line-height: 1.9; }
.shiji-story-questions ol { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--shiji-line); }
.shiji-story-questions li { display: grid; grid-template-columns: 118px 1fr; gap: 30px; padding: 38px 0; border-bottom: 1px solid var(--shiji-line); }
.shiji-story-questions li > span { color: var(--shiji-amber); font-family: var(--serif); font-size: 60px; line-height: 1; }
.shiji-story-questions h3 { margin: 0 0 12px; color: var(--shiji-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.45; }
.shiji-story-questions li p { margin: 0; color: var(--shiji-muted); }

.shiji-story-programs { background: var(--shiji-cream); }
.shiji-story-programs > header { display: grid; grid-template-columns: 1fr 1fr; column-gap: 70px; align-items: end; margin-bottom: 58px; }
.shiji-story-programs > header .section-label { grid-column: 1 / -1; }
.shiji-story-programs > header h2 { margin-bottom: 0; }
.shiji-story-program-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.shiji-story-program-grid a { position: relative; display: grid; grid-template-columns: 48px 1fr; align-content: start; padding-bottom: 26px; color: var(--shiji-ink); border-bottom: 2px solid var(--shiji-forest); }
.shiji-story-program-grid figure { grid-column: 1 / -1; height: 300px; margin: 0 0 28px; overflow: hidden; background: #e6e0d4; }
.shiji-story-program-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shiji-story-program-grid a:hover img { transform: scale(1.025); }
.shiji-story-program-grid > a > span { color: var(--shiji-amber); font-family: var(--serif); font-size: 24px; }
.shiji-story-program-grid > a > div { min-width: 0; }
.shiji-story-program-grid .program-name { margin: 2px 0 14px; color: var(--shiji-amber); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.shiji-story-program-grid .program-name small { margin-left: 5px; color: var(--shiji-muted); font-size: 11px; letter-spacing: .04em; }
.shiji-story-program-grid h3 { margin: 0 0 14px; color: var(--shiji-forest); font-size: clamp(23px, 2vw, 29px); line-height: 1.35; }
.shiji-story-program-grid p:not(.program-name) { margin: 0 0 20px; color: var(--shiji-muted); font-size: 15px; line-height: 1.78; }
.shiji-story-program-grid ul { padding: 0; margin: 0 0 22px; list-style: none; border-top: 1px solid var(--shiji-line); }
.shiji-story-program-grid li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--shiji-line); color: var(--shiji-muted); font-size: 12px; line-height: 1.55; }
.shiji-story-program-grid li b { color: var(--shiji-forest); font-size: 12px; }
.shiji-story-program-grid em { color: var(--shiji-forest); font-size: 13px; font-style: normal; font-weight: 800; }

.shiji-story-sensory { display: grid; grid-template-columns: 1.18fr .82fr; min-height: 650px; padding: 0 !important; color: var(--shiji-paper); background: var(--shiji-forest); }
.shiji-learning-map-visual { position: relative; display: grid; align-content: center; min-height: 650px; padding: clamp(38px, 5vw, 76px); overflow: hidden; background: linear-gradient(138deg, #0b3f2f 0%, #0f5d3d 57%, #196845 100%); }
.shiji-learning-map-visual::before { position: absolute; width: min(44vw, 600px); height: min(44vw, 600px); right: -21%; bottom: -24%; content: ""; border: 1px solid rgba(241,211,154,.32); border-radius: 50%; box-shadow: 0 0 0 46px rgba(241,211,154,.055), 0 0 0 126px rgba(241,211,154,.04); }
.shiji-learning-map-visual::after { position: absolute; width: 52%; height: 1px; top: 50%; left: 24%; content: ""; background: rgba(241,211,154,.46); transform: rotate(-32deg); transform-origin: left center; }
.learning-map-kicker { position: relative; z-index: 1; display: block; margin-bottom: 74px; color: #f1d39a; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.shiji-learning-map-visual ol { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0; margin: 0; list-style: none; }
.shiji-learning-map-visual li { min-height: 142px; padding: 24px 21px; border: 1px solid rgba(255,255,255,.32); background: rgba(6,42,30,.2); backdrop-filter: blur(5px); }
.shiji-learning-map-visual li:nth-child(2) { transform: translateY(38px); }
.shiji-learning-map-visual li:nth-child(3) { transform: translateY(-12px); }
.shiji-learning-map-visual li:nth-child(4) { transform: translateY(26px); }
.shiji-learning-map-visual b { display: block; margin-bottom: 7px; color: var(--shiji-paper); font-family: var(--serif); font-size: clamp(32px, 3.2vw, 46px); font-weight: 400; }
.shiji-learning-map-visual small { color: rgba(255,254,250,.72); font-size: 12px; }
.shiji-learning-map-visual i { position: absolute; z-index: 1; width: 18px; height: 18px; top: 50%; left: 47%; border: 4px solid #f1d39a; border-radius: 50%; background: var(--shiji-forest); }
.shiji-story-sensory > div { align-self: center; padding: 80px max(38px, calc((100vw - var(--shiji-content)) / 2)) 80px 74px; }
.shiji-story-sensory h2 { margin: 18px 0 24px; color: var(--shiji-paper); font-size: clamp(42px, 4vw, 64px); line-height: 1.12; }
.shiji-story-sensory > div > p:not(.section-label) { color: rgba(255,254,250,.78); font-size: 17px; line-height: 1.9; }
.shiji-story-sensory dl { margin: 36px 0 0; border-top: 1px solid rgba(255,255,255,.26); }
.shiji-story-sensory dl div { display: grid; grid-template-columns: 120px 1fr; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.shiji-story-sensory dt { color: #f1d39a; font-weight: 800; }
.shiji-story-sensory dd { margin: 0; color: rgba(255,254,250,.72); }

.shiji-story-process { background: var(--shiji-paper); }
.shiji-story-process header { display: grid; grid-template-columns: 1.1fr .9fr; gap: 80px; align-items: end; }
.shiji-story-process header .section-label { grid-column: 1 / -1; }
.shiji-story-process header h2 { margin-bottom: 0; }
.shiji-story-process ol { display: grid; grid-template-columns: repeat(4,1fr); padding: 0; margin: 70px 0 0; list-style: none; border-top: 1px solid var(--shiji-line); }
.shiji-story-process li { position: relative; padding: 30px 30px 14px 0; }
.shiji-story-process li::before { position: absolute; top: -5px; left: 0; width: 9px; height: 9px; content: ""; background: var(--shiji-amber); border-radius: 50%; }
.shiji-story-process li > span { color: var(--shiji-amber); font-family: var(--serif); font-size: 46px; }
.shiji-story-process h3 { margin: 18px 0 8px; color: var(--shiji-forest); font-size: 22px; }
.shiji-story-process li p { margin: 0; color: var(--shiji-muted); font-size: 14px; }

.shiji-story-beliefs { color: var(--shiji-paper); background: #1b6a51; }
.shiji-story-beliefs header { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; }
.shiji-story-beliefs header .section-label { grid-column: 1 / -1; color: #f1d39a; }
.shiji-story-beliefs h2 { color: var(--shiji-paper); }
.shiji-story-beliefs header > p:last-child { align-self: end; margin: 0 0 18px; color: rgba(255,254,250,.72); font-family: var(--serif); font-size: 22px; line-height: 1.7; }
.shiji-story-beliefs > div { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 50px; border-top: 1px solid rgba(255,255,255,.22); }
.shiji-story-beliefs article { padding: 30px 38px 10px 0; border-right: 1px solid rgba(255,255,255,.17); }
.shiji-story-beliefs article + article { padding-left: 38px; }
.shiji-story-beliefs article:last-child { border-right: 0; }
.shiji-story-beliefs article span { color: #f1d39a; font-family: var(--serif); font-size: 26px; }
.shiji-story-beliefs h3 { margin: 35px 0 12px; color: var(--shiji-paper); font-size: 24px; }
.shiji-story-beliefs article p { color: rgba(255,254,250,.7); line-height: 1.8; }

.shiji-story-environment { background: var(--shiji-cream); }
.shiji-story-environment header { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 50px; }
.shiji-story-environment header .section-label { grid-column: 1 / -1; }
.shiji-story-environment header h2 { margin-bottom: 0; }
.shiji-story-environment > div { display: grid; grid-template-columns: 1.55fr .48fr .48fr; gap: 12px; height: 500px; }
.shiji-story-environment figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #e5dfd4; }
.shiji-story-environment img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.shiji-story-environment figure:hover img { transform: scale(1.025); }
.shiji-story-environment figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 40px 14px 14px; color: var(--shiji-paper); background: linear-gradient(transparent,rgba(8,48,36,.78)); font-size: 12px; font-weight: 800; }

.shiji-story-visit { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(70px, 10vw, 160px); background: var(--shiji-paper); }
.shiji-story-visit h2 { font-size: clamp(56px, 6vw, 90px); }
.shiji-story-visit dl { align-self: center; margin: 0; border-top: 1px solid var(--shiji-line); }
.shiji-story-visit dl div { padding: 20px 0; border-bottom: 1px solid var(--shiji-line); }
.shiji-story-visit dt { margin-bottom: 8px; color: var(--shiji-amber); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.shiji-story-visit dd { margin: 0; color: var(--shiji-ink); font-size: 17px; line-height: 1.7; }

.campus-page-shiji .shiji-story-consult { padding-top: 100px; padding-bottom: 100px; background: var(--shiji-forest); }
.shiji-story-consult .consult-actions { min-width: 350px; }
.shiji-story-consult .campus-contact-grid { justify-content: flex-end; }
.shiji-story-consult .campus-contact-card { grid-template-columns: 1fr; grid-template-rows: auto; gap: 8px; width: 330px; min-width: 0; padding: 18px 20px; color: var(--shiji-paper); background: rgba(255,254,250,.08); border: 1px solid rgba(255,255,255,.25); border-radius: 4px; }
.shiji-story-consult .campus-contact-card strong { color: #f1d39a; font-size: 14px; }
.shiji-story-consult .campus-contact-card small { color: rgba(255,254,250,.66); font-size: 11px; }
.shiji-story-consult .campus-phone-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.shiji-story-consult .campus-phone-list a { color: var(--shiji-paper); font-size: 14px; }
.shiji-story-consult .campus-phone-list em { color: rgba(255,254,250,.56); }
.shiji-story-footer { background: #104a38; }

.campus-page-shiji .campus-consult-card .campus-booking-card {
  color: var(--shiji-ink);
  background: #fff6e4;
  border-color: rgba(241, 211, 154, .62);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}
.campus-page-shiji .campus-booking-card p { color: #9a6816; }
.campus-page-shiji .campus-booking-card h3 { color: var(--shiji-ink); }
.campus-page-shiji .campus-booking-card small,
.campus-page-shiji .campus-booking-phones em { color: #6d746d; }
.campus-page-shiji .campus-booking-phones a { color: #0b4a36; }
.campus-page-shiji .campus-quick-booking { color: var(--shiji-paper); background: #1a674f; }
.campus-page-shiji .campus-quick-booking h2 { color: var(--shiji-paper); }
.campus-page-shiji .campus-quick-booking > div:first-child > p:not(.section-label) { color: rgba(255, 254, 250, .76); }
.campus-page-shiji .campus-quick-booking .section-label { color: #f1d39a; }
.campus-page-shiji .campus-quick-booking .campus-call { color: var(--shiji-ink); background: #f1d39a; }

@media (max-width: 1120px) {
  .campus-page-shiji .shiji-story-hero { grid-template-columns: 1fr 1fr; }
  .campus-page-shiji .shiji-story-hero-copy { padding-right: 40px; padding-left: 42px; }
  .campus-page-shiji .shiji-story-hero h1 { font-size: clamp(48px, 5.5vw, 68px); }
  .shiji-story-program-grid figure { height: 240px; }
  .shiji-story-environment > div { grid-template-columns: 1.35fr .55fr .55fr; height: auto; }
  .shiji-story-environment figure { height: 260px; }
  .shiji-story-environment-main { grid-row: span 2; height: auto !important; }
  .shiji-story-environment figure:last-child { grid-column: 2 / 4; }
}

@media (max-width: 720px) {
  .shiji-story-page main > section { padding-right: 22px; padding-left: 22px; }
  .shiji-story-page .site-header nav { background: rgba(255,254,250,.97); border-radius: 12px; }
  .shiji-story-context { grid-template-columns: 1fr auto; }
  .campus-page-shiji .shiji-story-hero { display: flex; min-height: 0; background: var(--shiji-forest); }
  .campus-page-shiji .shiji-story-hero figure { order: 1; min-height: 360px; margin: 0; border-radius: 0; }
  .campus-page-shiji .shiji-story-hero figure img { min-height: 360px; }
  .campus-page-shiji .shiji-story-hero-copy { order: 2; padding: 48px 22px 34px; border-top: 0; }
  .campus-page-shiji .shiji-story-hero h1 { font-size: clamp(46px, 13vw, 60px); }
  .shiji-story-index { align-self: flex-end; margin-top: 42px; font-size: 112px; }
  .shiji-story-path { grid-template-columns: 1fr 1fr; margin: 0 22px; }
  .shiji-story-path a { min-height: 70px; padding: 0 12px; border-bottom: 1px solid var(--shiji-line); }
  .shiji-story-questions,
  .shiji-story-visit { grid-template-columns: 1fr; gap: 44px; }
  .shiji-story-questions header { position: static; }
  .shiji-story-questions li { grid-template-columns: 62px 1fr; gap: 16px; padding: 28px 0; }
  .shiji-story-questions li > span { font-size: 44px; }
  .shiji-story-programs > header,
  .shiji-story-process header,
  .shiji-story-beliefs header,
  .shiji-story-environment header { grid-template-columns: 1fr; gap: 0; }
  .shiji-story-program-grid { grid-template-columns: 1fr; gap: 42px; }
  .shiji-story-program-grid figure { height: 250px; }
  .shiji-story-sensory { grid-template-columns: 1fr; }
  .shiji-learning-map-visual { min-height: 410px; padding: 48px 22px; }
  .learning-map-kicker { margin-bottom: 40px; }
  .shiji-learning-map-visual li { min-height: 118px; padding: 17px; }
  .shiji-story-sensory > div { padding: 64px 22px 70px; }
  .shiji-story-process ol { grid-template-columns: 1fr 1fr; gap: 0; }
  .shiji-story-process li { min-height: 170px; }
  .shiji-story-beliefs > div { grid-template-columns: 1fr; }
  .shiji-story-beliefs article,
  .shiji-story-beliefs article + article { padding: 28px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.17); }
  .shiji-story-beliefs h3 { margin-top: 16px; }
  .shiji-story-environment > div { grid-template-columns: 1fr 1fr; height: auto; }
  .shiji-story-environment figure,
  .shiji-story-environment-main { height: 210px !important; }
  .shiji-story-environment-main { grid-column: 1 / -1; height: 300px !important; }
  .shiji-story-environment figure:last-child { grid-column: auto; }
  .shiji-story-visit h2 { font-size: clamp(54px, 15vw, 72px); }
  .campus-page-shiji .shiji-story-consult { padding-top: 76px; padding-bottom: 76px; }
  .campus-page-shiji .campus-quick-booking { padding-right: 22px; padding-left: 22px; }
  .shiji-story-consult .consult-actions { min-width: 0; }
  .shiji-story-consult .campus-contact-grid { justify-content: flex-start; }
  .shiji-story-consult .campus-contact-card { width: 100%; }
  .campus-page-shiji .campus-consult-card .campus-booking-card { width: 100%; }
}

/* Century Garden uses the official logo palette instead of the old deep forest theme. */
:root {
  --shiji-forest: #078a52;
  --shiji-forest-2: #075f40;
  --shiji-cream: #f7fff1;
  --shiji-paper: #ffffff;
  --shiji-amber: #f39000;
  --shiji-ink: #17482b;
  --shiji-muted: #4c6c54;
  --shiji-line: rgba(7, 86, 58, .22);
}
.campus-page-shiji .shiji-story-hero,
.shiji-story-sensory,
.campus-page-shiji .shiji-story-consult { background: linear-gradient(118deg, #075f40, #078a52); }
.shiji-learning-map-visual { background: linear-gradient(138deg, #075f40, #078a52); }
.shiji-story-beliefs { background: #078a52; }
.campus-page-shiji .shiji-story-hero .campus-hero-identity,
.campus-page-shiji .shiji-story-hero .hero-kicker,
.learning-map-kicker,
.shiji-story-beliefs header .section-label { color: #abce07; }
.campus-page-shiji .shiji-story-hero .button,
.campus-page-shiji .campus-quick-booking .campus-call { color: #17482b; background: #abce07; border-color: #abce07; }
.shiji-story-page .section-label,
.shiji-story-index,
.shiji-story-path span,
.shiji-story-questions li > span,
.shiji-story-process li::before,
.shiji-story-process li > span,
.shiji-story-visit dt,
.shiji-story-program-grid > a > span,
.shiji-story-program-grid .program-name { color: #f39000; }
.shiji-story-program-grid a { border-bottom-color: #078a52; }
.campus-page-shiji .campus-booking-card p { color: #cf3e10; }
.campus-page-shiji .campus-booking-phones a { color: #07563a; }
.shiji-story-footer { background: #07563a; }

@media (prefers-reduced-motion: reduce) {
  .shiji-story-program-grid img,
  .shiji-story-environment img { transition: none; }
}