:root { --school-green:#28594b; --school-paper:#fffdf7; }
html { scroll-padding-top:24px; }
body { font-size:18px; }
.nav-links { font-size:16px; gap:16px; }
.nav-links>a:not(.button) { display:flex; flex-direction:column; gap:1px; }
.nav-links small { font-size:13px; color:var(--muted); }
.nav-links .button,.nav-links button { font-size:14px; }
.english-line { display:block; font-size:.72em; line-height:1.6; margin-top:8px; font-weight:500; letter-spacing:0; }
.school-hero { position:relative; overflow:hidden; border-radius:24px; min-height:620px; display:flex; align-items:center; background:linear-gradient(90deg,rgba(12,28,26,.88),rgba(12,28,26,.18)),url('school/hero.jpg') center 55%/cover no-repeat,#284c43; color:#fff; }
.school-hero-content { position:relative; padding:clamp(28px,5vw,68px); max-width:950px; }
.school-kicker { font-size:16px; letter-spacing:1px; }
.school-kicker span { display:block; font-size:14px; letter-spacing:0; margin-top:6px; }
.school-hero h1 { font-size:clamp(36px,5vw,66px); line-height:1.3; letter-spacing:-2px; }
.hero-en { font-size:clamp(21px,2.5vw,30px); line-height:1.5; margin:16px 0; }
.school-motto { font-size:18px; line-height:1.9; margin-top:24px; }
.school-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.school-hero .button { color:#163c30; background:#f4e6b9; border-color:#f4e6b9; }
.school-hero .button.secondary { color:#fff; background:rgba(0,0,0,.35); border-color:#d6e0d9; }
.school-introduction { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:58px 8px; }
.school-introduction h2 { font-size:clamp(26px,3vw,36px); line-height:1.6; word-break:keep-all; }
.school-introduction p { line-height:1.9; }
.school-room-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.school-room-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); color:var(--text); text-decoration:none; }
.school-room-card:hover { border-color:var(--accent); }
.school-room-photo { position:relative; aspect-ratio:3/2; overflow:hidden; background:linear-gradient(135deg,#436d60,#bbad80); }
.school-room-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.school-grade { position:absolute; bottom:14px; left:16px; padding:5px 12px; border-radius:8px; color:#fff; background:rgba(10,28,24,.85); font-weight:700; font-size:15px; }
.school-room-content { padding:24px; display:flex; flex:1; flex-direction:column; }
.school-room-content h3 { font-size:25px; line-height:1.5; word-break:keep-all; }
.school-room-content p { font-size:17px; line-height:1.8; margin:8px 0; }
.enter-room { display:block; margin-top:auto; padding-top:20px; font-size:16px; font-weight:700; color:var(--accent); }
.school-poetry-intro { margin:60px 0 32px; padding:clamp(24px,5vw,56px); border-radius:20px; color:#fff; background:linear-gradient(90deg,rgba(17,33,32,.91),rgba(17,33,32,.62)),url('school/poetry.jpg') center 48%/cover no-repeat,#253e37; }
.school-poetry-intro h2 { font-size:clamp(30px,4vw,44px); line-height:1.5; }
.school-poetry-intro .eyebrow { color:#f4e6b9; }
.school-poetry-intro>div { max-width:700px; }
.school-notice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.poem-card { padding:clamp(24px,4vw,44px); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:12px; background:var(--surface); margin:24px 0; overflow-wrap:anywhere; }
.poem-label { font-size:14px; color:var(--muted); }
.poem-lines { white-space:pre-wrap; line-height:2; font-size:20px; margin:22px 0; }
.poem-credit { font-size:16px; color:var(--muted); }
.poem-details { border-top:1px solid var(--line); padding-top:20px; margin-top:24px; }
.plain-lines { white-space:pre-wrap; line-height:1.8; margin-top:12px; }
.school-welcome { margin-top:48px; }
.school-room-banner { position:relative; min-height:360px; border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; background:#284c43; color:#fff; }
.school-room-banner>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.school-room-banner:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,25,22,.92),rgba(8,25,22,.12)); }
.school-room-banner>div { position:relative; z-index:1; padding:32px; }
.school-room-banner h1 { font-size:clamp(30px,4vw,48px); line-height:1.4; }
.room-description { margin-top:24px; }
.school-section-links { display:flex; flex-wrap:wrap; gap:18px; margin:28px 0; }
.school-section-links a { display:block; min-height:48px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; }
.classroom-poems { margin-top:64px; }
@media(min-width:1600px) { .shell { width:min(1320px,calc(100% - 64px)); } }
@media(max-width:1050px) { .school-room-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .school-notice-grid { grid-template-columns:1fr; } }
@media(max-width:700px) { .school-introduction { grid-template-columns:1fr; gap:12px; padding-block:30px; } .school-room-grid { grid-template-columns:1fr; } .school-hero { min-height:600px; background-position:60% center; } .school-room-banner { min-height:300px; } .school-room-banner>div { padding:24px; } .school-hero h1 { letter-spacing:-1px; } .school-actions .button { width:100%; text-align:center; } .nav-links { gap:12px; } .nav-links>a:not(.button) { min-height:48px; } }

/* Header school logo */
a.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  text-decoration: none;
}
.brand .school-logo {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  background: #fff;
  border-radius: 10px;
  padding: 2px;
}
.brand .brand-wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--text);
  letter-spacing: 0;
}
.brand .brand-wordmark strong {
  font-size: 23px;
  line-height: 1.25;
}
.brand .brand-wordmark small {
  font-size: 16px;
  line-height: 1.3;
  color: var(--muted);
}
@media (max-width: 700px) {
  .brand .school-logo { width: 52px; height: 52px; }
  .brand .brand-wordmark strong { font-size: 21px; }
  .brand .brand-wordmark small { font-size: 15px; }
}