/* ===== Generic section shell ===== */
.section { padding: 5rem 0; border-top: 1px solid var(--rule); }
.section--no-rule { border-top: 0; }
.section--paper { background: var(--paper); }
.section--paper-2 { background: var(--paper-2); }
@media (min-width: 48rem) { .section { padding: 7rem 0; } }

.section-head h2 {
	font-family: var(--font-display);
	margin-top: 1.25rem;
	max-width: 48rem;
	font-size: clamp(2.25rem, 6vw, 3.75rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.02em;
}
.section-head p.lede { margin-top: 1.5rem; max-width: 42rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted-foreground); }

.ar-4-3 { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.ar-4-5 { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.ar-16-10 { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ar-3-2 { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* ===== Hero ===== */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero__glow {
	position: absolute; right: -10rem; top: -10rem;
	width: 38rem; height: 38rem; border-radius: 50%;
	background: rgba(14, 124, 90, 0.18); filter: blur(120px); pointer-events: none;
}
.hero__inner { position: relative; padding: 8rem 0 4rem; }
@media (min-width: 48rem) { .hero__inner { padding: 10rem 0 6rem; } }
.hero__grid { display: grid; gap: 3.5rem; align-items: end; }
@media (min-width: 64rem) { .hero__grid { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; } }
.hero__content { min-width: 0; }
@media (min-width: 64rem) { .hero__content { grid-column: span 7; } }
.hero__media { min-width: 0; }
@media (min-width: 64rem) { .hero__media { grid-column: span 5; } }

.hero__title { font-family: var(--font-display); margin-top: 1.75rem; font-size: clamp(2.75rem, 9vw, 5.75rem); font-weight: 600; line-height: 0.94; letter-spacing: -0.03em; }
.hero__title-row { margin-top: 0.25rem; display: flex; align-items: baseline; gap: 1rem; }
.hero__title-num { font-variant-numeric: tabular-nums; color: var(--galas-bright); }
.hero__lede { margin-top: 2rem; max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: var(--navy-100); }
.hero__quote { margin-top: 2.25rem; border-left: 2px solid var(--galas-bright); padding-left: 1.25rem; }
.hero__quote .icon { color: var(--galas-bright); }
.hero__quote blockquote { font-family: var(--font-display); margin-top: 0.5rem; font-size: 1.5rem; font-weight: 500; font-style: italic; line-height: 1.3; }
@media (min-width: 40rem) { .hero__quote blockquote { font-size: 1.75rem; } }
.hero__quote figcaption { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-200); }
.hero__actions { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 40rem) { .hero__actions { flex-direction: row; } }

.hero__media-wrap { position: relative; }
.hero__media-figure { position: relative; }
.hero__media-figure img { filter: grayscale(12%) contrast(1.02); }
.hero__media-caption {
	position: absolute; top: 0; right: 0; z-index: 1;
	background: rgba(12, 35, 64, 0.85); padding: 0.5rem 0.75rem; color: var(--paper);
	font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero__badge {
	position: absolute; bottom: -2.5rem; left: 1rem; display: none;
	width: 11rem; border: 4px solid var(--ink); box-shadow: 0 18px 40px rgba(10, 30, 54, 0.45);
}
@media (min-width: 40rem) { .hero__badge { display: block; } }
@media (min-width: 64rem) { .hero__badge { left: -5rem; width: 13rem; } }

.hero__stats { margin-top: 6rem; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.2); }
@media (min-width: 40rem) { .hero__stats { margin-top: 5rem; } }
@media (min-width: 64rem) { .hero__stats { grid-template-columns: repeat(4, 1fr); } }
.hero__stat { border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-right: 1px solid rgba(255, 255, 255, 0.15); padding: 1.75rem 0.25rem; }
.hero__stat:nth-child(2n) { border-right: 0; }
@media (min-width: 64rem) {
	.hero__stat { border-bottom: 0; padding: 2rem 0.5rem; border-right: 1px solid rgba(255, 255, 255, 0.15); }
	.hero__stat:nth-child(2n) { border-right: 1px solid rgba(255, 255, 255, 0.15); }
	.hero__stat:last-child { border-right: 0; }
}
.hero__stat dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-200); }
.hero__stat dd { font-family: var(--font-display); font-variant-numeric: tabular-nums; margin-top: 0.5rem; font-size: 2.25rem; font-weight: 600; line-height: 1; color: var(--paper); }
@media (min-width: 40rem) { .hero__stat dd { font-size: 3rem; } }
.hero__stat-note { margin-top: 0.5rem; font-size: 0.75rem; line-height: 1.5; color: rgba(214, 226, 240, 0.8); }

/* ===== About ===== */
.about__top { margin-top: 3.5rem; display: grid; gap: 3rem; }
@media (min-width: 64rem) { .about__top { grid-template-columns: repeat(12, 1fr); gap: 3.5rem; } }
.about__article { min-width: 0; }
@media (min-width: 64rem) { .about__article { grid-column: span 7; } }
.about__dropcap { font-size: 1.125rem; line-height: 1.75; color: var(--navy-700); }
.about__facts { margin-top: 2.25rem; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 40rem) { .about__facts { grid-template-columns: repeat(3, 1fr); } }
.about__fact { background: var(--paper); padding: 1.25rem; }
.about__fact dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--galas); }
.about__fact dd { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.about__media { min-width: 0; }
@media (min-width: 64rem) { .about__media { grid-column: span 5; } }
.about__media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.about__media-grid > figure:first-child { grid-column: span 2; }
.about__caption { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-400); }

.timeline { margin-top: 6rem; }
.timeline__head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: 1rem; gap: 1rem; }
.timeline__head h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 40rem) { .timeline__head h3 { font-size: 1.875rem; } }
.timeline__head p { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--navy-400); }
.timeline__item { display: grid; gap: 0.75rem; border-bottom: 1px solid var(--rule); padding: 2rem 0; }
@media (min-width: 40rem) { .timeline__item { grid-template-columns: 7.5rem 1fr; gap: 2rem; } }
@media (min-width: 64rem) { .timeline__item { grid-template-columns: 9rem 1fr; } }
.timeline__year { font-family: var(--font-display); font-variant-numeric: tabular-nums; font-size: 1.875rem; font-weight: 600; line-height: 1; color: var(--galas); transition: color 200ms; }
@media (min-width: 40rem) { .timeline__year { font-size: 2.5rem; } }
.timeline__item:hover .timeline__year { color: var(--ink); }
.timeline__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.timeline__body { margin-top: 0.625rem; max-width: 42rem; line-height: 1.6; color: var(--muted-foreground); }

/* ===== Academics ===== */
.academics__grid { margin-top: 3.5rem; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 64rem) { .academics__grid { grid-template-columns: repeat(3, 1fr); } }
.academics__card { display: flex; flex-direction: column; background: var(--paper); }
.academics__figure { position: relative; overflow: hidden; }
.academics__figure img { transition: transform 500ms var(--ease-out-expo); }
.academics__card:hover .academics__figure img { transform: scale(1.03); }
.academics__icon { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; background: var(--ink); color: var(--paper); }
.academics__body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem; }
.academics__body h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.academics__list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; }
.academics__list li { display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--navy-700); }
.academics__list .icon { margin-top: 0.125rem; color: var(--galas); }

.admission { margin-top: 4rem; display: grid; gap: 2.5rem; }
@media (min-width: 64rem) { .admission { grid-template-columns: repeat(12, 1fr); } }
.admission__intro { min-width: 0; }
@media (min-width: 64rem) { .admission__intro { grid-column: span 4; } }
.admission__intro h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 40rem) { .admission__intro h3 { font-size: 1.875rem; } }
.admission__intro p { margin-top: 1rem; line-height: 1.6; color: var(--muted-foreground); }
.admission__note { margin-top: 1.25rem; display: flex; gap: 0.625rem; border-left: 2px solid var(--galas); background: var(--paper); padding: 1rem; font-size: 0.875rem; line-height: 1.6; color: var(--navy-700); }
.admission__note .icon { margin-top: 0.125rem; color: var(--galas); }
.admission__table-wrap { border: 1px solid var(--rule); background: var(--paper); overflow-x: auto; }
@media (min-width: 64rem) { .admission__table-wrap { grid-column: span 8; } }
.admission__table { font-size: 0.875rem; }
.admission__table thead tr { border-bottom: 2px solid var(--ink); }
.admission__table th { height: 3rem; text-align: left; padding: 0 1rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.admission__table th:not(:first-child), .admission__table td:not(:first-child) { text-align: right; }
.admission__table td { padding: 1rem; border-top: 1px solid var(--rule); }
.admission__table td:first-child { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.admission__table td:nth-child(2) { font-weight: 600; color: var(--galas); font-variant-numeric: tabular-nums; }
.admission__table td:nth-child(3) { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ===== Mars ===== */
.mars { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); padding: 6rem 0; }
@media (min-width: 48rem) { .mars { padding: 8rem 0; } }
.mars__glow { position: absolute; left: -8rem; bottom: 0; width: 30rem; height: 30rem; border-radius: 50%; background: rgba(14, 124, 90, 0.15); filter: blur(110px); }
.mars__grid { position: relative; display: grid; gap: 3rem; }
@media (min-width: 64rem) { .mars__grid { grid-template-columns: repeat(12, 1fr); gap: 4rem; } }
.mars__head { min-width: 0; }
@media (min-width: 64rem) { .mars__head { grid-column: span 4; } }
.mars__head h2 { font-family: var(--font-display); margin-top: 1.25rem; font-size: 2.25rem; font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
@media (min-width: 40rem) { .mars__head h2 { font-size: 3rem; } }
.mars__composer { margin-top: 1.5rem; display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--navy-100); }
.mars__composer .icon { color: var(--galas-bright); }
.mars__credit { margin-top: 2.5rem; display: none; align-items: center; gap: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 2.5rem; }
@media (min-width: 64rem) { .mars__credit { display: flex; } }
.mars__credit img { width: 6rem; height: 6rem; object-fit: contain; flex-shrink: 0; }
.mars__credit p { font-family: var(--font-display); font-size: 1.125rem; font-style: italic; line-height: 1.3; color: rgba(251, 250, 246, 0.8); }
.mars__lyrics { min-width: 0; }
@media (min-width: 64rem) { .mars__lyrics { grid-column: span 8; } }
.mars__lyrics-grid { display: grid; gap: 2.5rem; }
@media (min-width: 40rem) { .mars__lyrics-grid { grid-template-columns: repeat(2, 1fr); } }
.mars__lyrics-label { border-bottom: 1px solid rgba(255, 255, 255, 0.25); padding-bottom: 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--galas-bright); }
.mars__lyrics p { font-family: var(--font-display); margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.85; color: rgba(251, 250, 246, 0.95); }
@media (min-width: 40rem) { .mars__lyrics p { font-size: 1.5rem; } }
.mars__lyrics-chorus p { font-style: italic; }
.mars__lyrics span { display: block; }

/* ===== Facilities ===== */
.facilities__list { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 3.5rem; }
.facility-group { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) { .facility-group { grid-template-columns: repeat(12, 1fr); gap: 2.5rem; } }
.facility-group__head { min-width: 0; }
@media (min-width: 64rem) { .facility-group__head { grid-column: span 3; } }
.facility-group__head-inner { border-top: 2px solid var(--ink); padding-top: 1rem; }
.facility-group__head h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.facility-group__head p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; color: var(--muted-foreground); }
.facility-group__items { display: grid; gap: 1px; min-width: 0; }
@media (min-width: 40rem) { .facility-group__items { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facility-group__items { grid-column: span 9; grid-template-columns: repeat(3, 1fr); } }
.facility-item { display: flex; min-height: 6.5rem; flex-direction: column; justify-content: space-between; gap: 0.75rem; background: var(--paper); padding: 1.25rem; outline: 1px solid var(--rule); transition: background-color 200ms; }
.facility-item:hover { background: var(--paper-2); }
.facility-item__top { display: flex; align-items: flex-start; gap: 0.75rem; }
.facility-item__top .icon { margin-top: 0.125rem; color: var(--galas); transition: transform 200ms; }
.facility-item:hover .facility-item__top .icon { transform: scale(1.1); }
.facility-item__name { font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.facility-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-left: 2rem; }
.facility-item__tag { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; background: var(--galas); color: #fff; padding: 0.25rem 0.5rem; }
.facility-item__note { font-size: 0.75rem; color: var(--muted-foreground); }

/* ===== Student life ===== */
.orgs { margin-top: 3.5rem; }
.orgs__label, .extra__label { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-400); }
.orgs__grid { margin-top: 1.25rem; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 48rem) { .orgs__grid { grid-template-columns: repeat(2, 1fr); } }
.org-card { background: var(--paper); padding: 1.75rem; }
.org-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.org-card__id { display: flex; align-items: center; gap: 0.75rem; }
.org-card__icon { display: flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: var(--ink); color: var(--paper); flex-shrink: 0; }
.org-card__abbr { font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.org-card__badge { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; border: 1px solid var(--galas); color: var(--galas); padding: 0.25rem 0.625rem; white-space: nowrap; }
.org-card__name { margin-top: 1rem; font-size: 0.875rem; font-weight: 500; color: var(--navy-700); }
.org-card__body { margin-top: 0.75rem; line-height: 1.6; color: var(--muted-foreground); }

.extra { margin-top: 4rem; }
.extra__tabs { margin-top: 1.25rem; }
.extra__tablist { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--rule); }
.extra__tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; padding-inline: 1rem; font-size: 0.875rem; color: var(--navy-700); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.extra__tab[aria-selected='true'] { color: var(--galas); border-bottom-color: var(--galas); }
.extra__tab .icon { color: currentColor; }
.extra__panel { padding-top: 1.5rem; }
.extra__panel[hidden] { display: none; }
.extra__units { display: grid; gap: 1px; border: 1px solid var(--rule); background: var(--rule); }
@media (min-width: 40rem) { .extra__units { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .extra__units { grid-template-columns: repeat(4, 1fr); } }
.extra__unit { display: flex; min-height: 5.5rem; align-items: flex-start; gap: 0.75rem; background: var(--paper); padding: 1.25rem; }
.extra__unit-index { font-family: var(--font-mono); font-variant-numeric: tabular-nums; margin-top: 0.125rem; color: var(--galas); font-size: 0.6875rem; }
.extra__unit-name { font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.extra__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; border: 1px dashed var(--rule); background: var(--paper); padding: 2rem; }
.extra__empty .icon { color: var(--navy-400); }
.extra__empty h4 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--ink); }
.extra__empty p { max-width: 28rem; line-height: 1.6; color: var(--muted-foreground); }

.extra__meta { display: flex; gap: 1.25rem; align-items: center; margin-bottom: 1.5rem; padding: 1.25rem; border: 1px solid var(--rule); background: var(--paper); }
.extra__coach-photo { width: 6rem; flex-shrink: 0; }
.extra__meta-text { display: flex; flex-direction: column; gap: 0.5rem; }
.extra__meta-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--navy-700); }
.extra__meta-row .icon { color: var(--galas); flex-shrink: 0; }
.extra__meta-video { color: var(--galas); font-weight: 600; }
.extra__meta-video:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Info & Kontak ===== */
.info__grid { margin-top: 3.5rem; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 64rem) { .info__grid { grid-template-columns: repeat(3, 1fr); } }
.info-card { background: var(--paper); padding: 1.75rem; }
.info-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.info-card dl { margin-top: 1.5rem; }
.info-card dl > div { padding: 1rem 0; border-top: 1px solid var(--rule); }
.info-card dl > div:first-child { border-top: 0; padding-top: 0; }
.info-card dt { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--navy-400); }
.info-card dd { margin-top: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--ink); }
.info-card__link-row { margin-top: 1.5rem; display: flex; gap: 0.75rem; }
.info-card__link-row .icon { margin-top: 0.125rem; color: var(--galas); flex-shrink: 0; }
.info-card__link-row span { font-size: 0.875rem; line-height: 1.6; color: var(--navy-700); }
.info-card__link-row:hover span { color: var(--galas); text-decoration: underline; text-underline-offset: 4px; }
.info-card ul { margin-top: 1.25rem; }
.info-card ul a { display: flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; font-size: 0.875rem; color: var(--navy-700); }
.info-card ul a:hover { color: var(--galas); }
.info-card ul a .icon { color: var(--galas); flex-shrink: 0; }
.info-card__hours { margin-top: 1.5rem; display: flex; gap: 0.75rem; font-size: 0.875rem; line-height: 1.6; color: var(--navy-700); }
.info-card__hours .icon { margin-top: 0.125rem; color: var(--galas); flex-shrink: 0; }

/* ===== Berita (native posts) ===== */
.berita__grid { margin-top: 3.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .berita__grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.berita__cta { margin-top: 2.5rem; text-align: center; }
.berita__empty { border: 1px dashed var(--rule); padding: 2.5rem; text-align: center; color: var(--muted-foreground); }