/* Noble Convent School: "सुंदर लिखावट, सुंदर सोच" (a copybook page).
   Flat colour, no decorative gradients. Kalam for handwriting (headings), Merriweather for body,
   Noto Serif Devanagari for Hindi body text.
   Palette: ground #FAF6EC, ink #1F2A44, copybook paper #FFFDF4, rule blue #7FA6D6, margin red #D9534F, gold-star #E8B73A. */
:root {
  --ground: #FAF6EC; --ink: #1F2A44; --paper: #FFFDF4; --rule: #7FA6D6; --margin: #D9534F; --star: #E8B73A;
  --muted: #4B5671; --red-deep: #B23A36; --line: #DCD3BC; --paper-edge: #EDE4CC; --ink-soft: #E6E9F2; --star-soft: #FBEFC9;
  --display: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  --body: "Merriweather", Georgia, "Times New Roman", serif;
  --hi: "Noto Serif Devanagari", "Merriweather", serif;
  --head-h: 74px;
  --r: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 1rem; line-height: 1.75; overflow-x: hidden; }
[lang="hi"] { font-family: var(--hi); line-height: 1.85; }
img, svg { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.2; margin: 0 0 .5rem; color: var(--ink); }
h2 { font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1rem; }
a { color: var(--ink); text-underline-offset: .22em; text-decoration-thickness: 2px; text-decoration-color: var(--rule); }
a:hover { text-decoration-color: var(--margin); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible, .foot :focus-visible, .sheet :focus-visible { outline-color: #fff; }
.skip { position: absolute; left: .75rem; top: -4rem; z-index: 200; background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: var(--r); }
.skip:focus { top: .75rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ic { flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .55rem 1.35rem; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s, background-color .15s; }
.btn:hover { transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #2D3B5E; }
.btn-star { background: var(--star); color: var(--ink); }
.btn-star:hover { background: #F0C455; }
.btn-line { background: transparent; color: var(--ink); }
.btn-line:hover { background: var(--ink-soft); }
.btn.is-loading { opacity: .7; pointer-events: none; }
.btn .hi-sub { font-family: var(--hi); font-weight: 600; font-size: .82rem; }

/* ------------------------------------------------------------ header */
.top { position: sticky; top: 0; z-index: 60; background: var(--ground); height: var(--head-h); background-image: url("/assets/rule-line.svg"); background-repeat: no-repeat; background-size: 100% 3px; background-position: 0 100%; transition: box-shadow .2s; }
.top.is-scrolled { box-shadow: 0 6px 18px rgba(31, 42, 68, .1); }
.top-row { height: 100%; display: flex; align-items: center; gap: 1rem; }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 52px; width: auto; }
.lines { display: none; margin-left: auto; }
.lines ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .15rem; }
.lines a { display: flex; flex-direction: column; align-items: center; padding: .3rem .8rem .35rem; text-decoration: none; position: relative; line-height: 1.1; border-radius: 4px; }
.lines .en { font-family: var(--display); font-weight: 700; font-size: 1.28rem; }
.lines .hi { font-size: .8rem; color: var(--muted); font-family: var(--hi); font-weight: 600; line-height: 1.5; }
.lines a::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 1px; height: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 Q 12 1 25 5 T 50 4 T 75 5 T 99 3' fill='none' stroke='%23D9534F' stroke-width='3' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.lines a:hover::after, .lines a[aria-current="page"]::after { transform: scaleX(1); }
.lines a[aria-current="page"] .en::before { content: "★"; color: var(--star); font-size: .8em; margin-right: .3rem; -webkit-text-stroke: 1px var(--ink); }
.top-call { display: none; }
.menu-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.1rem; background: var(--ink); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; cursor: pointer; }
@media (min-width: 1100px) {
  .lines { display: block; }
  .top-call { display: inline-flex; min-height: 44px; font-size: 1.05rem; padding: .4rem 1rem; }
  .menu-btn { display: none; }
}
@media (min-width: 1100px) and (max-width: 1259px) { .top-call span { display: none; } .top-call { padding: .4rem .8rem; } }

/* menu sheet: a page that turns */
.sheet { position: fixed; inset: 0; z-index: 120; background-color: var(--paper); background-image: url("/assets/rule-band.svg"); background-size: 100% 78px; background-position: 0 2px; overflow-y: auto; transform-origin: 0 50%; transform: perspective(1500px) rotateY(-88deg); opacity: 0; transition: transform .55s cubic-bezier(.2, .7, .2, 1), opacity .3s; }
.sheet[hidden] { display: none; }
.sheet.is-open { transform: perspective(1500px) rotateY(0); opacity: 1; }
.sheet::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.4rem; width: 2px; background: var(--margin); opacity: .85; }
.sheet-inner { position: relative; padding: 1rem 1.25rem 2rem 3.6rem; max-width: 520px; margin: 0 auto; }
.sheet-close { display: flex; margin-left: auto; align-items: center; gap: .4rem; min-height: 48px; padding: 0 1.1rem; background: var(--ink); color: #fff; border: 0; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; cursor: pointer; }
.sheet-links { list-style: none; margin: 1rem 0 1.25rem; padding: 0; }
.sheet-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 78px; padding: 0 0 0; text-decoration: none; font-family: var(--display); font-weight: 700; font-size: 2.05rem; line-height: 78px; }
.sheet-links a .hi { font-size: .95rem; color: var(--muted); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.sheet-links a { position: relative; }
.sheet-links a[aria-current="page"]::before { content: "★"; color: var(--star); -webkit-text-stroke: 1px var(--ink); position: absolute; left: -2.1rem; font-size: 1.7rem; }
.sheet-act { display: grid; gap: .6rem; }
.sheet-act .btn { background-color: var(--paper); }
.sheet-act .btn-ink { background-color: var(--ink); }
body.sheet-open { overflow: hidden; }

/* dock (phones) */
.dock { position: fixed; z-index: 80; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-top: 3px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); }
.dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 62px; color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.1; }
.dock a:last-child { background: var(--ink); color: #fff; }
.dock a:focus-visible { outline-offset: -5px; }
.dock a:last-child:focus-visible { outline-color: #fff; }
@media (min-width: 1100px) { .dock { display: none; } }
@media (max-width: 1099px) { body { padding-bottom: 66px; } }

/* ------------------------------------------------------------ paper, ruling, shared parts */
.page { position: relative; background-color: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; box-shadow: 0 1px 0 var(--paper-edge), 0 14px 28px -18px rgba(31, 42, 68, .35); }
.page::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(1.9rem, 5vw, 3rem); width: 2px; background: var(--margin); opacity: .8; pointer-events: none; }
.page { padding: clamp(1.4rem, 3.5vw, 2.4rem) clamp(1.1rem, 3vw, 2.2rem) clamp(1.4rem, 3.5vw, 2.2rem) clamp(2.9rem, 8vw, 5rem); }
.page-in { position: relative; }
.ruled { --band: 4rem; --bo: 0px; background: url("/assets/rule-band.svg") 0 var(--bo) / 100% var(--band) repeat-y; }
.ruled-hi { background: url("/assets/rule-hi.svg") 0 0 / 100% var(--hband, 3.2rem) repeat-y; }
.sec { padding: clamp(2.8rem, 6vw, 4.8rem) 0; position: relative; }
.sec-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--red-deep); margin-bottom: .2rem; }
.h-hi { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--muted); margin: 0 0 1rem; line-height: 1.5; }
.lead { font-size: 1.08rem; max-width: 60ch; }
.lead-hi { font-size: .98rem; color: var(--muted); max-width: 60ch; }
.sub { color: var(--muted); font-size: .92rem; }
.tbc { display: block; margin: .6rem 0 0; padding: .55rem .8rem; border: 2px dashed #8B95AC; border-radius: var(--r); background: rgba(255, 253, 244, .6); color: var(--muted); font-size: .88rem; line-height: 1.55; }
.tbc b { color: var(--ink); font-weight: 700; }
.stamp { display: inline-block; font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--red-deep); border: 2px solid var(--red-deep); border-radius: 4px; padding: .05rem .6rem; transform: rotate(-2deg); background: var(--paper); }
.star { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.15em; flex: none; }
.star svg { width: 100%; height: 100%; display: block; }

/* practice strokes divider */
.strokes { display: block; width: 100%; height: 62px; color: var(--ink); opacity: .85; }
.strokes path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.strokes .blue { stroke: var(--rule); }
.strokes .red { stroke: var(--margin); }
.js .strokes:not(.in) path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .strokes.in path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.3, .6, .2, 1); }

/* ------------------------------------------------------------ hero */
.hero { padding: 1.6rem 0 clamp(2rem, 5vw, 3.6rem); }
.hero-page.page { padding-top: 1.4rem; padding-bottom: 1.8rem; }
.open-pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .84rem; line-height: 1.4; padding: .25rem .8rem; border-radius: 999px; background: var(--ink-soft); color: var(--ink); margin-bottom: .9rem; font-weight: 700; }
.open-pill::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); flex: none; }
.open-pill[data-state="open"]::before { background: #2E7D4F; }
.open-pill[data-state="closed"]::before { background: var(--margin); }
.hero h1 { --font: clamp(2.6rem, 8vw, 4.5rem); --band: calc(var(--font) * 1.5); --bo: calc(var(--font) * -.06); font-size: var(--font); line-height: var(--band); margin: 0 0 .15rem; padding: 0; background: url("/assets/rule-band.svg") 0 var(--bo) / 100% var(--band) repeat-y; letter-spacing: -.005em; }
.hero h1 .w { display: inline-block; white-space: nowrap; }
.write-hi { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 4.2vw, 2.3rem); line-height: 1.5; margin: .35rem 0 0; color: var(--red-deep); }
.write-en { font-family: var(--display); font-weight: 400; font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 0 0 .9rem; color: var(--ink); line-height: 1.5; }
.write-en .hl { background: var(--star-soft); box-shadow: inset 0 -.55em 0 var(--star-soft); padding: 0 .2rem; }
.swash { display: block; width: min(100%, 380px); height: 22px; margin: .1rem 0 .1rem .1rem; overflow: visible; }
.swash path { fill: none; stroke: var(--margin); stroke-width: 5; stroke-linecap: round; }
.hero .lead { margin-bottom: .5rem; font-size: 1.02rem; }
.hero .lead-hi { margin-bottom: 1.1rem; font-size: .9rem; }
.hero-acts { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.hero-acts .btn-ink { padding-left: 1.6rem; padding-right: 1.6rem; }
.hero-note { margin: 1rem 0 0; font-size: .82rem; color: var(--muted); }
.glued { position: relative; margin: 0 auto; max-width: 520px; padding: 1.2rem 1rem 0; transform: rotate(1.4deg); }
.glued .print { position: relative; background: #fff; padding: .6rem .6rem 0; border-radius: 2px; box-shadow: 0 16px 28px -16px rgba(31, 42, 68, .5), 0 0 0 1px var(--paper-edge); }
.glued img { display: block; width: 100%; height: auto; }
.glued .cap { margin: 0; padding: .55rem .2rem .65rem; font-size: .8rem; line-height: 1.45; color: var(--muted); background: #fff; }
.pc { position: absolute; width: 38px; height: 38px; background: #E9D9A8; z-index: 2; box-shadow: 0 1px 2px rgba(31, 42, 68, .3); }
.pc.a { top: -4px; left: -4px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pc.b { top: -4px; right: -4px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pc.c { bottom: -4px; left: -4px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.pc.d { bottom: -4px; right: -4px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.gold-star { position: absolute; z-index: 3; right: -8px; top: -14px; width: 76px; height: 76px; transform: rotate(12deg); }
.gold-star svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 4px 4px rgba(31, 42, 68, .25)); }
.gold-star text { font-family: var(--display); font-weight: 700; }

/* the name writes itself: a left-to-right reveal, word by word. Static under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 .w { clip-path: inset(-10% 100% -20% -2%); animation: write .95s cubic-bezier(.5, .1, .3, 1) forwards; }
  .hero h1 .w1 { animation-delay: .25s; } .hero h1 .w2 { animation-delay: 1.05s; } .hero h1 .w3 { animation-delay: 1.9s; }
  .hero .swash path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .9s ease-out 2.6s forwards; }
  .hero .write-hi, .hero .write-en { opacity: 0; animation: fadein .6s ease-out 2.9s forwards; }
  .gold-star { animation: pop .6s cubic-bezier(.2, .8, .3, 1) 3.3s both; }
  @keyframes write { to { clip-path: inset(-10% -2% -20% -2%); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadein { to { opacity: 1; } }
  @keyframes pop { from { transform: rotate(-30deg) scale(0); } to { transform: rotate(12deg) scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sheet { transition: opacity .01s; transform: none; }
  .btn:hover { transform: none; }
}

/* ------------------------------------------------------------ practice pages (lessons) */
.lessons { margin-top: 1.8rem; }
.sheetpage { position: relative; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 3px; padding: 1.2rem 1.1rem 1.2rem 3.1rem; height: 100%; box-shadow: 0 12px 22px -18px rgba(31, 42, 68, .45); transition: transform .2s; display: flex; flex-direction: column; }
.sheetpage::before { content: ""; position: absolute; top: 0; bottom: 0; left: 2.1rem; width: 2px; background: var(--margin); opacity: .75; }
.lesson-col:nth-child(odd) .sheetpage { transform: rotate(-.5deg); }
.lesson-col:nth-child(even) .sheetpage { transform: rotate(.5deg); }
.sheetpage:hover { transform: rotate(0) translateY(-3px); }
.sp-no { font-family: var(--display); font-size: .95rem; color: var(--red-deep); font-weight: 700; margin: 0; line-height: 1.4; }
.sp-title { font-size: 1.55rem; margin: 0; line-height: 1.3; }
.sp-hi { font-family: var(--display); font-weight: 700; color: var(--muted); font-size: 1.1rem; margin: 0 0 .5rem; line-height: 1.4; }
.sp-q { font-size: .93rem; margin: .2rem 0 .3rem; }
.sp-q-hi { font-size: .86rem; color: var(--muted); margin: 0 0 .3rem; }
.sheetpage .tbc { margin-top: auto; }
.sheetpage a.sp-link { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-top: .6rem; display: inline-block; }

/* sample day timetable */
.tt-wrap { display: grid; gap: 1.6rem; }
.timetable { width: 100%; border-collapse: collapse; font-size: .96rem; }
.timetable caption { text-align: left; font-family: var(--display); font-weight: 700; font-size: 1.1rem; padding-bottom: .4rem; color: var(--muted); caption-side: bottom; padding-top: .6rem; }
.timetable th, .timetable td { text-align: left; padding: .55rem .5rem; vertical-align: top; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; }
.timetable thead th { font-family: var(--display); font-size: 1.05rem; color: var(--red-deep); }
.timetable td:first-child { font-family: var(--display); font-weight: 700; font-size: 1.1rem; white-space: nowrap; width: 1%; }
.timetable td .h { display: block; font-size: .85rem; color: var(--muted); }

/* facts */
.facts-grid { display: grid; gap: 1.2rem; }
.fact-list { list-style: none; margin: 0; padding: 0; }
.fact-list li { display: flex; gap: .7rem; padding: .5rem 0; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; align-items: flex-start; }
.fact-list .k { font-family: var(--display); font-weight: 700; min-width: 7.5rem; color: var(--muted); font-size: 1.05rem; line-height: 1.7; }
.fact-list .v { flex: 1; }
.blank-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .45rem; }
.blank-list li { border: 2px dashed #8B95AC; border-radius: var(--r); padding: .4rem .75rem; color: var(--muted); font-size: .92rem; background: rgba(255, 253, 244, .6); }
@media (min-width: 576px) { .blank-list { grid-template-columns: 1fr 1fr; } }

/* hours table */
.hours { width: 100%; border-collapse: collapse; font-size: .98rem; }
.hours th, .hours td { text-align: left; padding: .5rem .3rem; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; font-weight: 400; }
.hours th { font-family: var(--display); font-weight: 700; font-size: 1.1rem; }
.hours tr.today th, .hours tr.today td { background-color: var(--star-soft); font-weight: 700; }
.hours tr.today th::before { content: "★ "; color: #B8860B; }

/* map card */
.map-card { position: relative; background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; overflow: hidden; }
.map-card iframe { display: block; width: 100%; height: 300px; border: 0; }
.map-info { padding: 1.1rem 1.2rem; }
.map-info p { margin: 0 0 .3rem; }
.map-act { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }

/* faq */
.qa { max-width: 860px; }
.qa details { background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; padding: .15rem 0; }
.qa summary { list-style: none; cursor: pointer; display: flex; gap: .8rem; align-items: baseline; justify-content: space-between; padding: .75rem 0; font-family: var(--display); font-weight: 700; font-size: 1.28rem; line-height: 1.4; min-height: 48px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.8rem; line-height: 1; color: var(--red-deep); flex: none; transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa .a { padding: 0 0 1rem; max-width: 64ch; }
.qa .a .hi-a { color: var(--muted); font-size: .92rem; display: block; margin-top: .3rem; }

/* ------------------------------------------------------------ forms */
.enq { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 1.4rem clamp(1rem, 3vw, 1.6rem); box-shadow: 0 14px 28px -20px rgba(31, 42, 68, .45); position: relative; }
.enq-title { font-size: 1.7rem; margin: 0; }
.field { margin-bottom: .2rem; }
.field label { display: block; font-family: var(--display); font-weight: 700; font-size: 1.1rem; margin-bottom: .1rem; line-height: 1.5; }
.field label .hl { font-family: var(--hi); font-weight: 600; font-size: .8rem; color: var(--muted); margin-left: .3rem; }
.field .opt { font-family: var(--body); font-weight: 400; font-size: .78rem; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .5rem .75rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 2px solid #8B95AC; border-radius: var(--r); }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.field [aria-invalid="true"] { border-color: var(--red-deep); background: #FFF3F1; }
.hint { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.err { font-size: .86rem; color: var(--red-deep); font-weight: 700; margin: .25rem 0 0; }
.form-summary { margin: 0 0 1rem; padding: .6rem .9rem; background: #FFF3F1; border: 2px solid var(--red-deep); border-radius: var(--r); color: var(--red-deep); font-weight: 700; }
.form-summary:focus { outline: 3px solid var(--ink); }
.form-foot { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; margin-top: .8rem; }
.form-foot .small { font-size: .82rem; color: var(--muted); margin: 0; flex: 1 1 14rem; }
.form-result { margin-top: 1rem; font-weight: 700; }
.form-result.ok { padding: .8rem 1rem; background: #E8F4EC; border: 2px solid #2E7D4F; border-radius: var(--r); color: #1D5B37; }
.form-result.bad { padding: .8rem 1rem; background: #FFF3F1; border: 2px solid var(--red-deep); border-radius: var(--r); color: var(--red-deep); }

/* ------------------------------------------------------------ inner-page parts */
.pagehead { padding: 2rem 0 1.2rem; }
.pagehead h1 { --font: clamp(2.5rem, 7vw, 4.2rem); --band: calc(var(--font) * 1.5); --bo: calc(var(--font) * -.06); font-size: var(--font); line-height: var(--band); background: url("/assets/rule-band.svg") 0 var(--bo) / 100% var(--band) repeat-y; margin: 0; }
.pagehead .h-hi { font-size: clamp(1.4rem, 3.4vw, 2rem); color: var(--red-deep); margin: .3rem 0 .6rem; }
.crumb { font-size: .84rem; color: var(--muted); margin: 0 0 .5rem; }
.crumb a { color: var(--muted); }
.margin-notes { display: grid; gap: 0; }
.mn-row { display: grid; grid-template-columns: 1fr; gap: .2rem; padding: 1rem 0; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; }
.mn-row .mn { font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: var(--red-deep); line-height: 1.5; }
@media (min-width: 768px) { .mn-row { grid-template-columns: 11rem 1fr; gap: 1.5rem; } .mn-row .mn { text-align: right; } }
.figure { margin: 0; }
.figure .print { background: #fff; padding: .55rem .55rem 0; box-shadow: 0 16px 28px -18px rgba(31, 42, 68, .5), 0 0 0 1px var(--paper-edge); position: relative; }
.figure img { display: block; width: 100%; height: auto; }
.figure figcaption { padding: .5rem .15rem .6rem; font-size: .8rem; color: var(--muted); line-height: 1.45; background: #fff; }

/* academics: index tabs */
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 -2px; position: relative; z-index: 1; padding-left: .4rem; }
.tab { font-family: var(--display); font-weight: 700; font-size: 1.1rem; background: #EFE6CC; color: var(--ink); border: 2px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; padding: .35rem 1rem; min-height: 46px; cursor: pointer; line-height: 1.3; }
.tab[aria-selected="true"] { background: var(--paper); box-shadow: 0 2px 0 var(--paper); }
.tab[aria-selected="true"]::before { content: "★ "; color: #B8860B; }
.tabpanel { background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: clamp(1.1rem, 3vw, 2rem); position: relative; }
.tabpanel[hidden] { display: none; }
.sample-strip { background: var(--paper); border: 1px solid var(--paper-edge); border-radius: 4px; padding: 1.2rem 1.2rem 1.4rem; }
.sample-strip .lines-en { --band: 5.2rem; font-family: var(--display); font-weight: 700; font-size: 3.4rem; line-height: 5.2rem; background: url("/assets/rule-band.svg") 0 -.3rem / 100% 5.2rem repeat-y; color: var(--ink); overflow-wrap: anywhere; }
.sample-strip .lines-hi { font-family: var(--display); font-weight: 700; font-size: 2.5rem; line-height: 4rem; background: url("/assets/rule-hi.svg") 0 0 / 100% 4rem repeat-y; color: var(--red-deep); }
@media (max-width: 575px) { .sample-strip .lines-en { font-size: 2.3rem; line-height: 4rem; background-size: 100% 4rem; background-position: 0 -.2rem; } .sample-strip .lines-hi { font-size: 1.9rem; } }

/* admissions steps written on lines */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.2rem 1fr; gap: .6rem; padding: 1rem 0; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; }
.steps li::before { content: counter(s); font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--red-deep); text-align: center; }
.steps h3, .steps h2.st { margin: 0 0 .1rem; font-size: 1.35rem; }
.steps p { margin: 0 0 .25rem; }
.docs { columns: 1; list-style: none; padding: 0; margin: 0; }
@media (min-width: 576px) { .docs { columns: 2; column-gap: 1.5rem; } }
.docs li { break-inside: avoid; padding: .4rem 0 .4rem 1.9rem; position: relative; }
.docs li::before { content: ""; position: absolute; left: 0; top: .65rem; width: 1.1rem; height: 1.1rem; border: 2px solid var(--ink); border-radius: 3px; background: #fff; }

/* campus life */
.board { background: var(--paper); border: 2px solid var(--ink); border-radius: 4px; padding: clamp(1.25rem, 3vw, 1.8rem); position: relative; }
.gal { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .gal { grid-template-columns: repeat(2, 1fr); } }
.g-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; font: inherit; color: inherit; }
.g-btn .print { background: #fff; padding: .5rem .5rem 0; box-shadow: 0 14px 24px -18px rgba(31, 42, 68, .55), 0 0 0 1px var(--paper-edge); transition: transform .2s; }
.g-btn:hover .print { transform: rotate(-.8deg) translateY(-2px); }
.g-btn img { display: block; width: 100%; height: auto; }
.g-btn .gc { display: block; padding: .5rem .15rem .6rem; font-size: .76rem; color: var(--muted); line-height: 1.4; background: #fff; }
.ph-tile { min-height: 190px; border: 2px dashed #8B95AC; border-radius: var(--r); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--muted); font-size: .9rem; background: rgba(255, 253, 244, .6); }
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 1000px); width: 100%; overflow: visible; }
.lightbox::backdrop { background: rgba(20, 26, 44, .88); }
.lb-in { position: relative; background: #fff; padding: .6rem .6rem 0; border-radius: 3px; }
.lb-img { display: block; max-width: 100%; max-height: 74vh; margin: 0 auto; width: auto; height: auto; }
.lb-cap { margin: 0; padding: .6rem .3rem .7rem; font-size: .85rem; color: var(--muted); }
.lb-bar { display: flex; gap: .5rem; justify-content: center; margin-top: .8rem; }
.lb-bar button { min-height: 48px; padding: 0 1.1rem; border-radius: 999px; border: 2px solid #fff; background: var(--ink); color: #fff; font-family: var(--display); font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.notice { display: grid; grid-template-columns: auto 1fr; gap: .2rem 1rem; padding: .7rem 0; background: url("/assets/rule-line.svg") no-repeat 0 100% / 100% 2px; }
.notice .d { font-family: var(--display); font-weight: 700; color: var(--red-deep); font-size: 1.05rem; white-space: nowrap; }

/* contact */
.addr-big { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.6vw, 2.2rem); line-height: 1.5; margin: 0 0 .6rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1rem 0 0; }
.legal h2 { font-size: 1.6rem; margin-top: 1.6rem; }
.legal { max-width: 760px; }
.center { text-align: center; }

/* ------------------------------------------------------------ footer */
.foot { background: var(--ink); color: #E8ECF6; padding: 3rem 0 1.6rem; margin-top: 2rem; }
.foot a { color: #fff; text-decoration-color: #7889B3; }
.foot a:hover { text-decoration-color: var(--star); }
.foot h2 { font-size: 1.3rem; color: #fff; margin-bottom: .5rem; }
.foot .brand img { height: 56px; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: .15rem 0; }
.foot .small { font-size: .82rem; color: #C3CBE0; }
.foot .fine { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #3B4A70; font-size: .8rem; color: #C3CBE0; }
.foot .fine p { margin: 0 0 .4rem; }
.foot .strokes { color: #fff; opacity: .5; height: 40px; margin-bottom: 1.4rem; }
.foot .strokes .blue { stroke: #8FB3E0; }

.bleed-gap { height: 1px; }
@media (prefers-reduced-motion: reduce) { .strokes path { transition: none !important; } }
@media (max-width: 1099px) { .hero-acts .btn-star, .hero-acts .btn-line { display: none; } }
@media (max-width: 575px) {
  .hero { padding-top: 1rem; }
  .hero .lead { font-size: .94rem; line-height: 1.65; }
  .hero .lead-hi { display: none; }
  .hero-page.page { padding-top: 1rem; padding-bottom: 1.3rem; }
  .open-pill { font-size: .78rem; margin-bottom: .6rem; }
  .hero h1 { --font: 2.5rem; }
  .write-hi { font-size: 1.55rem; }
}
@media (max-width: 575px) { .gold-star { right: 2px; top: -18px; width: 62px; height: 62px; } .glued { padding-left: .6rem; padding-right: .6rem; } }
.g-btn .print { display: block; }
.g-btn .gc { display: block; }
.g-btn img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 35%; }
.gal { align-items: start; }