:root {
  /* ============================================================
     BNK BRAND PALETTE — sampled from the logo
     60 / 30 / 10  →  red dominant · green secondary · amber accent
  ============================================================ */
  --primary:        #EE1D24;  /* vermillion red — CTAs, links, active states */
  --primary-hover:  #CA191F;  /* button hover / active */
  --secondary:      #70BE41;  /* leaf green — icons, fills, badges */
  --secondary-deep: #437227;  /* AA-safe green for text / links */
  --accent:         #F9A51C;  /* saffron amber — highlights, tags, swooshes */
  --accent-deep:    #A26B12;  /* AA-safe amber for text / icons */
  --paper:          #FAF7F1;  /* warm off-white — page background */
  --paper-2:        #EFE6D6;  /* deeper paper — visual boxes / fills */
  --ink-solid:      #262626;  /* near-black — body text & dark anchor */

  /* ---- Legacy aliases mapped onto the palette (keep older CSS working) ---- */
  --cream:   #FAF7F1;
  --cream-2: #EFE6D6;
  --ink:     #262626;
  --ink-60:  rgba(38,38,38,.62);
  --ink-30:  rgba(38,38,38,.68); /* darkened from .34 — original was under 2:1 contrast, fails WCAG AA */
  --ink-10:  rgba(38,38,38,.12);
  --red:     #EE1D24;
  --red-dk:  #CA191F;
  --red-lt:  rgba(238,29,36,.10);
  --gold:    #A26B12;          /* amber-as-text → deep, AA-safe */
  --navy:    #262626;          /* no navy in palette → dark anchor is Ink */
  --white:   #FFFFFF;
  --shadow:  0 6px 30px rgba(38,38,38,.08);
  --shadow-lg: 0 20px 60px rgba(38,38,38,.13);
  --r: 6px;
  --ease: .3s cubic-bezier(.4,0,.2,1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
.serif { font-family: 'Playfair Display', serif; }
.jp    { font-family: 'Noto Serif JP', serif; }

/* ============================================================
   ANNOUNCEMENT BAR
============================================================ */
.ann {
  background: var(--red); color: #fff;
  padding: .55rem 2rem;
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  font-size: .75rem; font-weight: 500; letter-spacing: .04em;
  position: relative; flex-shrink: 0;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.ann a { text-decoration: underline; opacity: .9; }
.ann a:hover { opacity: 1; }
.ann-x { position:absolute; right:1.2rem; font-size:1rem; opacity:.6; cursor:pointer; padding:4px; }
.ann-x:hover { opacity:1; }

/* ============================================================
   NAV
============================================================ */
.topbar {
  background: var(--white);
  border-bottom: 1px solid var(--ink-10);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem;
  height: 64px;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(38,38,38,.05);
}
.logo { display: flex; flex-direction: row; align-items: center; gap: .6rem; line-height: 1.1; flex-shrink: 0; }
.logo-mark { height: 46px; width: auto; display: block; }
.logo-text { display: flex; flex-direction: column; line-height: 1.1; }
.logo-bnk {
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700;
  color: var(--red); letter-spacing: .04em;
}
.logo-sub { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }

/* Tab navigation */
.tabs {
  display: flex; align-items: stretch; height: 100%;
  gap: 0;
}
.tab-btn {
  display: flex; align-items: center; gap: .4rem;
  padding: 0 1.1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-60);
  border-bottom: 3px solid transparent;
  transition: color var(--ease), border-color var(--ease);
  white-space: nowrap; cursor: pointer;
  position: relative;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active { color: var(--red); border-bottom-color: var(--red); }
.tab-btn .tab-icon { display: none; }

.nav-apply {
  background: var(--red); color: #fff;
  padding: .45rem 1.2rem; border-radius: var(--r);
  font-size: .75rem; font-weight: 600; letter-spacing: .06em;
  white-space: nowrap; flex-shrink: 0;
  transition: background var(--ease), transform var(--ease);
}
.nav-apply:hover { background: var(--red-dk); transform: translateY(-1px); }

/* Mobile hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 5px; }
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

/* Mobile dropdown */
.mobile-nav {
  display: none; position: fixed; top: 64px; left: 0; right: 0;
  background: var(--white); border-bottom: 1px solid var(--ink-10);
  flex-direction: column; box-shadow: var(--shadow-lg); z-index: 130;
  max-height: calc(100vh - 64px); overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav .tab-btn {
  padding: 1rem 2rem; border-bottom: 1px solid var(--ink-10); border-left: 3px solid transparent;
  letter-spacing: .08em; text-align: left; justify-content: flex-start;
}
.mobile-nav .tab-btn.active { border-left-color: var(--red); color: var(--red); border-bottom-color: var(--ink-10); }

/* ============================================================
   PAGE CONTENT
============================================================ */
.pages { flex: 1; position: relative; }
.page {
  display: none;
  animation: fadeIn .35s ease;
}
.page.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   SHARED SECTION STYLES
============================================================ */
.page-hero {
  padding: 4rem 3rem 3rem;
  max-width: 1160px; margin: 0 auto;
}
.page-content { padding: 0 3rem 4rem; max-width: 1160px; margin: 0 auto; }

.eyebrow {
  font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--red); display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem;
}

.page-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem,4vw,3rem); font-weight: 500; line-height: 1.1; letter-spacing: -.01em;
  margin-bottom: 1.2rem;
}
.page-title em { color: var(--red); font-style: italic; }
.lead { font-size: .95rem; line-height: 1.9; color: var(--ink-60); max-width: 650px; }
.body-text { font-size: .88rem; line-height: 1.9; color: var(--ink-60); }

.divider { border: none; border-top: 1px solid var(--ink-10); margin: 2.5rem 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: var(--r);
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  transition: all var(--ease);
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dk); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(238,29,36,.3); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-30); }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Cards */
.card {
  background: var(--white); border-radius: var(--r);
  border: 1px solid var(--ink-10); padding: 2rem;
  box-shadow: var(--shadow);
}
.card-red-top { border-top: 3px solid var(--red); }
.card-navy { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.2rem; }
.grid-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 1rem; }

/* ============================================================
   HOME PAGE (with Floating Kanji CSS)
============================================================ */
.home-kanji-bg {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden;
}
.home-kanji-bg span {
  position: absolute; font-family: 'Noto Serif JP', serif; font-weight: 300; color: var(--secondary);
  opacity: 0; animation: floatK linear infinite;
}
@keyframes floatK {
  0%   { transform: translateY(100vh) rotate(var(--r,0deg)); opacity: 0; }
  10%  { opacity: var(--op,.03); }
  90%  { opacity: var(--op,.03); }
  100% { transform: translateY(-10vh) rotate(var(--r,0deg)); opacity: 0; }
}

.home-hero {
  min-height: calc(100vh - 112px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem;
  align-items: center; padding: 3.5rem 3rem;
  max-width: 1160px; margin: 0 auto; position: relative;
}

.home-left {}
.home-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.5rem,5vw,4.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.02em;
  margin-bottom: 1.4rem;
}
.home-h1 em { color: var(--red); font-style: italic; }
.home-desc { font-size: .93rem; line-height: 1.9; color: var(--ink-60); max-width: 460px; margin-bottom: 2.2rem; }
.home-btns { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.home-trust {
  display: flex; align-items: center; gap: .6rem; margin-top: 1.8rem;
  font-size: .72rem; color: var(--ink-30); letter-spacing: .04em;
}

/* JLPT Alert Card (home page) */
.alert-card {
  background: var(--white); border-radius: var(--r);
  border-top: 4px solid var(--red); box-shadow: var(--shadow-lg);
  padding: 2.2rem; position: relative;
}
.ac-live {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--red-lt); color: var(--red);
  font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 99px; margin-bottom: 1.1rem;
}
.ac-live::before { content:'●'; font-size:.45rem; animation: blink 1.5s infinite; }
.ac-title { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:500; margin-bottom:.2rem; }
.ac-sub { font-size:.78rem; color: var(--ink-60); margin-bottom:1.2rem; }
.ac-rows { border-top:1px solid var(--ink-10); padding-top:.9rem; }
.ac-row { display:flex; justify-content:space-between; font-size:.8rem; padding:.32rem 0; border-bottom:1px solid var(--ink-10); }
.ac-row:last-child { border-bottom:none; }
.ac-k { color: var(--ink-60); }
.ac-v { font-weight: 500; }
.ac-timing {
  margin: 1.1rem 0; background: var(--cream); border-radius: var(--r);
  padding: .9rem 1rem; font-size: .78rem;
}
.ac-timing h4 { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-30); margin-bottom:.5rem; }
.timing-row { display:flex; align-items:center; gap:.55rem; margin-bottom:.3rem; }
.timing-row:last-child { margin-bottom:0; }
.ttag { font-size:.58rem; font-weight:700; padding:.18rem .45rem; border-radius:2px; }
.ttag.am { background:rgba(112,190,65,.18); color:var(--secondary-deep); }
.ttag.pm { background:rgba(249,165,28,.18); color:var(--accent-deep); }
.ac-cta { width:100%; justify-content:center; margin-top:1.1rem; font-size:.82rem; }

/* Stats strip on home */
.home-stats {
  background: var(--navy); color:#fff;
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 3px solid var(--red);
}
.hs-item {
  padding: 2rem; text-align:center;
  border-right: 1px solid rgba(255,255,255,.07);
}
.hs-item:last-child { border-right:none; }
.hs-num {
  font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:400; line-height:1;
  color:#fff;
}
.hs-num sup { font-size:1.2rem; color:var(--red); }
.hs-label { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-top:.3rem; }
.hs-desc  { font-size:.75rem; color:rgba(255,255,255,.5); margin-top:.15rem; }

/* ============================================================
   ABOUT PAGE
============================================================ */
.about-grid { margin-top:3rem; max-width:780px; }
.about-visual-box {
  background: var(--cream-2); border-radius: var(--r);
  aspect-ratio: 3/4; max-width:360px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; position:relative;
}
.av-kanji { font-family:'Noto Serif JP',serif; font-size:11rem; color:var(--red); opacity:.12; line-height:1; }
.av-stamp {
  background:var(--red); color:#fff;
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem 1rem; margin-bottom:1rem;
}
.av-founded {
  font-size:.85rem; color:var(--ink-60); line-height:1.7; text-align:center;
  padding:0 2rem;
}
.about-right p { margin-bottom:1.1rem; }
.obj-grid { display:flex; flex-direction:column; gap:.7rem; margin-top:2rem; }
.obj-item {
  display:flex; gap:.9rem; align-items:flex-start;
  padding:1rem 1.2rem; background:var(--white); border-radius:var(--r);
  border:1px solid var(--ink-10); font-size:.86rem; color:var(--ink-60); line-height:1.6;
  transition: border-color var(--ease);
}
.obj-item:hover { border-color: var(--red); }
.obj-n {
  font-family:'Playfair Display',serif; font-size:.95rem; font-weight:700;
  color:var(--red); opacity:.5; flex-shrink:0; width:1.4rem; margin-top:.05rem;
}

/* ============================================================
   JLPT PAGE
============================================================ */

.levels-strip { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin:2rem 0 2.5rem; }
.lv-card {
  background:var(--white); border:1.5px solid var(--ink-10); border-radius:var(--r);
  padding:1.4rem .8rem; text-align:center;
  transition:all var(--ease); cursor:default;
  position:relative; overflow:hidden;
}
.lv-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:0;
  background:var(--secondary); transition:height var(--ease);
}
.lv-card:hover { border-color:rgba(112,190,65,.55); transform:translateY(-3px); box-shadow:var(--shadow); }
.lv-card:hover::after { height:3px; }
.lv-n  { font-family:'Playfair Display',serif; font-size:2rem; font-weight:500; color:var(--ink); line-height:1; }
.lv-jp { font-family:'Noto Serif JP',serif; font-size:.85rem; color:var(--secondary-deep); opacity:.75; margin:.3rem 0; }
.lv-lbl { font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-30); }

/* Exam session cards */
.session-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.session-card {
  border-radius:var(--r); padding:2rem; border:1.5px solid var(--ink-10);
  background:var(--white); position:relative; overflow:hidden;
}
.session-card.live {
  border-color:rgba(238,29,36,.3); background:linear-gradient(135deg,#fff 0%,#fff5f5 100%);
}
.session-card.live::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red);
}
.sc-season { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-30); margin-bottom:.4rem; }
.sc-title  { font-family:'Playfair Display',serif; font-size:1.3rem; font-weight:500; margin-bottom:.8rem; }
.live-pill, .closed-pill {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .6rem; border-radius:99px; margin-bottom:.8rem;
}
.live-pill { background:var(--red-lt); color:var(--red); }
.live-pill::before { content:'●'; font-size:.4rem; animation:blink 1.5s infinite; }
.closed-pill { background:rgba(38,38,38,.06); color:var(--ink-30); }
.sc-rows { font-size:.8rem; border-top:1px solid var(--ink-10); padding-top:.8rem; }
.sc-row { display:flex; justify-content:space-between; padding:.3rem 0; border-bottom:1px solid var(--ink-10); }
.sc-row:last-child { border-bottom:none; }
.sc-k { color:var(--ink-60); }
.sc-v { font-weight:500; text-align:right; max-width:55%; }
.sc-timing {
  margin-top:1rem; background:var(--cream); border-radius:var(--r); padding:.9rem;
}
.sc-timing h5 { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-30); margin-bottom:.5rem; }
.et-row { display:flex; gap:.5rem; align-items:center; font-size:.77rem; color:var(--ink-60); margin-bottom:.3rem; }
.et-row:last-child{margin-bottom:0}
.et-tag { font-size:.58rem; font-weight:700; padding:.17rem .45rem; border-radius:2px; }
.et-tag.am { background:rgba(112,190,65,.16); color:var(--secondary-deep); }
.et-tag.pm { background:rgba(249,165,28,.16); color:var(--accent-deep); }

.jlpt-note {
  background:rgba(249,165,28,.08); border:1px solid rgba(249,165,28,.25);
  border-radius:var(--r); padding:1.2rem 1.5rem;
}
.jlpt-note h4 { font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:.5rem; }
.jlpt-note p { font-size:.82rem; line-height:1.8; color:var(--ink-60); }

/* ============================================================
   ACTIVITIES PAGE
============================================================ */
.act-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ink-10); border:1px solid var(--ink-10); border-radius:var(--r); overflow:hidden; margin-top:2rem; }
.act-card {
  background:var(--white); padding:2.2rem; position:relative; overflow:hidden;
  transition:background var(--ease);
}
.act-card:hover { background:var(--cream); }
.act-card::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:0;
  background:linear-gradient(90deg,var(--red),var(--accent));
  transition:height var(--ease);
}
.act-card:hover::after { height:3px; }
.act-icon { font-family:'Noto Serif JP',serif; font-size:2.5rem; color:var(--secondary); opacity:.42; line-height:1; margin-bottom:1rem; transition:opacity var(--ease); }
.act-card:hover .act-icon { opacity:.45; }
.act-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:500; margin-bottom:.5rem; }
.act-desc { font-size:.82rem; line-height:1.75; color:var(--ink-60); }
.act-tag {
  display:inline-block; margin-top:.8rem;
  font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red-lt); border-radius:2px; padding:.18rem .5rem;
}

/* ============================================================
   LIBRARY PAGE
============================================================ */
.library-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:3rem; align-items:start; margin-top:2.5rem; }
.lib-box {
  background:var(--navy); color:#fff; border-radius:var(--r);
  padding:2.5rem; position:relative; overflow:hidden;
}

.lib-box h3 { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:400; color:#fff; margin-bottom:.6rem; position:relative; z-index:1; }
.lib-box p  { font-size:.83rem; line-height:1.8; color:rgba(255,255,255,.45); margin-bottom:1.8rem; position:relative; z-index:1; }
.lib-mini-stats { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; position:relative; z-index:1; }
.lms { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); border-radius:var(--r); padding:.9rem 1rem; }
.lms-num { font-family:'Playfair Display',serif; font-size:1.8rem; color:#fff; line-height:1; }
.lms-lbl { font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-top:.15rem; }

.rule-list { display:flex; flex-direction:column; gap:.8rem; margin-top:1.5rem; }
.rule-item {
  display:flex; gap:1rem; align-items:flex-start;
  padding:1rem 1.2rem; border:1px solid var(--ink-10); border-radius:var(--r);
  font-size:.84rem; line-height:1.65;
  transition:border-color var(--ease);
}
.rule-item:hover { border-color:var(--red); }
.ri-icon {
  width:2.2rem; height:2.2rem; border-radius:50%; background:var(--red-lt);
  display:flex; align-items:center; justify-content:center;
  font-size:.62rem; font-weight:700; letter-spacing:.04em;
  color:var(--red); flex-shrink:0; font-family:'Outfit',sans-serif;
}
.ql-icon {
  font-family:'Playfair Display',serif; font-size:1.8rem; font-weight:300;
  color:var(--red); opacity:.25; line-height:1; margin-bottom:.6rem;
}
.rule-text { color:var(--ink-60); }
.rule-text strong { color:var(--ink); font-weight:500; }

/* ============================================================
   MEMBERSHIP PAGE
============================================================ */
.mem-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.mem-card {
  border-radius:var(--r); padding:2.2rem;
  border:1.5px solid var(--ink-10); background:var(--white);
  transition:all var(--ease); position:relative; overflow:hidden;
}
.mem-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:rgba(238,29,36,.25); }
.mc-n { font-family:'Playfair Display',serif; font-size:3rem; color:var(--ink-10); font-weight:300; line-height:1; margin-bottom:.3rem; }
.mc-type { font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--red); margin-bottom:.4rem; }
.mc-name { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:400; color:var(--ink); margin-bottom:.4rem; line-height:1.2; }
.mc-renew { font-size:.73rem; color:var(--ink-30); margin-bottom:1.4rem; }
.mc-hr { border:none; border-top:1px solid var(--ink-10); margin-bottom:1.4rem; }
.mc-feats { display:flex; flex-direction:column; gap:.55rem; margin-bottom:1.8rem; }
.mc-feat { display:flex; align-items:center; gap:.55rem; font-size:.81rem; color:var(--ink-60); }
.mc-feat::before { content:'✓'; color:var(--red); font-size:.72rem; font-weight:700; }
.mc-cta {
  font-size:.73rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--red); border-bottom:1px solid var(--red-lt); padding-bottom:1px;
  transition:all var(--ease); display:inline-flex; align-items:center; gap:.3rem;
}
.mc-cta:hover { border-bottom-color:var(--red); }

/* ============================================================
   LEADERSHIP PAGE
============================================================ */
.leader-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:2.5rem; }
.committee-photo { margin-top:2.5rem; }
.committee-photo img {
  width:100%; height:auto; display:block;
  border-radius:12px; border:1px solid var(--ink-10); box-shadow:var(--shadow);
}

/* Committee names — simple name above role, under the photo */
.committee-names {
  margin-top:2.5rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem 1.6rem;
}
.cn-item { border-top:1px solid var(--ink-10); padding-top:.75rem; }
.cn-name {
  font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:500;
  color:var(--ink); line-height:1.25;
}
.cn-role {
  font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-top:.3rem;
}
@media(max-width:760px){ .committee-names { grid-template-columns:1fr 1fr; } }

/* Prominent "view venues" CTA in the home alert card */
.ac-venues-btn { width:100%; justify-content:center; margin:1.1rem 0; font-size:.82rem; }
.leader-card {
  background:var(--white); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--ink-10); box-shadow:var(--shadow);
  transition:all var(--ease);
}
.leader-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.lc-avatar {
  aspect-ratio:1; background:var(--cream-2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Noto Serif JP',serif; font-size:3rem; color:var(--red); opacity:.25;
  position:relative; overflow:hidden;
}
.lc-avatar::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--red); }
.leader-card.president .lc-avatar { background:linear-gradient(135deg,#f0e8da,#e0d4c0); opacity:1; }
.leader-card.president .lc-avatar::after { background:linear-gradient(90deg,var(--red),var(--accent)); }
.lc-info { padding:1.1rem 1.2rem; }
.lc-role { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:.3rem; }
.leader-card.president .lc-role { color:var(--gold); }
.lc-name { font-family:'Playfair Display',serif; font-size:1rem; font-weight:500; line-height:1.2; }
.lc-sub  { font-size:.73rem; color:var(--ink-30); margin-top:.2rem; }

/* ============================================================
   CONTACT PAGE
============================================================ */
.contact-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:4rem; align-items:start; margin-top:2.5rem; }
.ci-list { display:flex; flex-direction:column; gap:1.5rem; }
.ci-item { display:flex; gap:1rem; align-items:flex-start; }
.ci-icon {
  width:2.8rem; height:2.8rem; border-radius:var(--r);
  background:var(--red-lt); color:var(--red);
  font-size:.55rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:'Outfit',sans-serif;
}
.ci-lbl { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-30); margin-bottom:.25rem; }
.ci-val { font-size:.86rem; line-height:1.7; color:var(--ink); }
.ci-val a { color:var(--red); transition:opacity .2s; }
.ci-val a:hover { opacity:.7; }
.map-box {
  margin-top:1.8rem; background:var(--cream-2); border-radius:var(--r);
  border:1px solid var(--ink-10); padding:1.5rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.5rem; min-height:130px;
}
.map-box span { font-size:1.8rem; }
.map-box p { font-size:.78rem; color:var(--ink-60); }
.map-box a { color:var(--red); font-size:.76rem; font-weight:500; }
/* Form */
.cform { display:flex; flex-direction:column; gap:1.1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.fg { display:flex; flex-direction:column; gap:.35rem; }
.fg label { font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-60); font-weight:500; }
.fg input,.fg select,.fg textarea {
  border:1.5px solid var(--ink-10); border-radius:var(--r);
  padding:.65rem .9rem; font-family:'Outfit',sans-serif; font-size:.86rem;
  color:var(--ink); background:var(--white); outline:none;
  transition:border-color var(--ease);
}
.fg input:focus,.fg select:focus,.fg textarea:focus { border-color:var(--red); }
.fg input::placeholder,.fg textarea::placeholder { color:var(--ink-30); }
.fg textarea { resize:vertical; min-height:110px; }
.fg select { cursor:pointer; }
.form-footer { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.form-note { font-size:.72rem; color:var(--ink-30); }
.success-msg {
  display:none; align-items:center; gap:.5rem;
  color:var(--red); font-size:.83rem; font-weight:500;
  padding:.65rem 1.1rem; background:var(--red-lt); border-radius:var(--r);
}

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: #262626; color:#fff; padding:3rem 3rem 1.5rem;
  flex-shrink:0;
}
.ft {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem;
  padding-bottom:2rem; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:1.5rem;
}
.fb-name { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:var(--red); }
.fb-jp   { font-family:'Noto Serif JP',serif; font-size:.8rem; color:rgba(255,255,255,.2); margin:.2rem 0 .9rem; }
.fb-desc { font-size:.77rem; line-height:1.8; color:rgba(255,255,255,.3); max-width:240px; }
.fb-social { display:flex; gap:.7rem; margin-top:1.3rem; }
.fb-social a {
  width:2rem; height:2rem; border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; color:rgba(255,255,255,.35);
  transition:all var(--ease);
}
.fb-social a:hover { border-color:var(--red); color:var(--red); }
.fc h4 { font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.22); margin-bottom:1rem; }
.fc ul { display:flex; flex-direction:column; gap:.55rem; }
.fc a { font-size:.8rem; color:rgba(255,255,255,.4); transition:color var(--ease); }
.fc a:hover { color:#fff; }
.fb-bottom {
  display:flex; justify-content:space-between; align-items:center;
  font-size:.7rem; color:rgba(255,255,255,.2);
}
.fb-bottom .fb-links { display:flex; gap:1.8rem; }
.fb-bottom a { color:rgba(255,255,255,.2); transition:color .2s; }
.fb-bottom a:hover { color:rgba(255,255,255,.5); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:960px) {
  .topbar { padding:0 1.5rem; position:relative; }
  .tabs { display:none; }
  .hamburger { display:flex; }
  .home-hero { grid-template-columns:1fr; padding:2.5rem 1.5rem; min-height:auto; }
  .home-stats { grid-template-columns:1fr 1fr; }
  .grid-2,.grid-3,.grid-4,.grid-5,
  .about-grid,.library-grid,.contact-grid,
  .session-grid,.levels-strip { grid-template-columns:1fr; }
  .levels-strip { grid-template-columns:repeat(3,1fr); }
  .act-grid { grid-template-columns:1fr 1fr; }
  .mem-grid { grid-template-columns:1fr; }
  .leader-grid { grid-template-columns:1fr 1fr; }
  .ft { grid-template-columns:1fr 1fr; gap:2rem; }
  .fb-bottom { flex-direction:column; gap:.6rem; text-align:center; }
  .fb-bottom .fb-links { gap:1.2rem; }
  .page-hero,.page-content { padding-left:1.5rem; padding-right:1.5rem; }
  .home-hero { padding:2rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .act-grid { grid-template-columns:1fr; }
  .levels-strip { grid-template-columns:repeat(3,1fr); }
  .home-stats { grid-template-columns:1fr 1fr; }

  /* Logo + "Applications Closed"/"Apply for JLPT" button + hamburger were
     overflowing the topbar on narrow phones (all three have flex-shrink:0
     and nothing wraps) — drop the long subtitle and tighten the button so
     everything fits without the page auto-zooming to compensate. */
  .topbar { padding:0 1rem; }
  .logo { gap:.35rem; }
  .logo-mark { height:34px; }
  .logo-bnk { font-size:1.15rem; }
  .logo-sub {
    display:block; font-size:.52rem; letter-spacing:.04em;
    max-width:104px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .nav-apply { padding:.4rem .6rem; font-size:.62rem; letter-spacing:.02em; }
  .hamburger { padding:5px 0 5px 5px; }
}

/* ============================================================
   NEWS PAGE
============================================================ */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: start;
}
/* Posts */
.news-posts { display: flex; flex-direction: column; gap: 0; }
.news-post {
  padding: 2rem 0;
  border-bottom: 1px solid var(--ink-10);
}
.news-post:first-child { padding-top: 0; }
.news-post.archived-post {
  background: var(--white);
  border: 1px solid var(--ink-10);
  border-radius: var(--r);
  padding: 2rem;
  margin-bottom: 1rem;
}
.news-post.archived-post .np-title { color: var(--ink-60); }
.np-meta {
  display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem;
}
.np-cat {
  font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red); background: var(--red-lt);
  padding: .2rem .6rem; border-radius: 2px;
}
.np-date {
  font-size: .75rem; color: var(--ink-30);
}
.np-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-weight: 500; line-height: 1.25;
  margin-bottom: 1rem; color: var(--ink);
}
.archived-post .np-title { font-size: 1.4rem; }
.np-body p {
  font-size: .87rem; line-height: 1.85; color: var(--ink-60);
  margin-bottom: .8rem;
}
.np-body p:last-child { margin-bottom: 0; }
.np-body a { color: var(--red); border-bottom: 1px solid var(--red-lt); transition: border-color .2s; }
.np-body a:hover { border-bottom-color: var(--red); }
.np-body strong { color: var(--ink); font-weight: 500; }
.np-list {
  list-style: none; margin: .6rem 0; display: flex; flex-direction: column; gap: .4rem;
  padding-left: 1rem;
}
.np-list li {
  font-size: .87rem; color: var(--ink-60); line-height: 1.6; position: relative;
}
.np-list li::before {
  content: '—'; position: absolute; left: -1rem; color: var(--red); font-size: .75rem;
}
.np-timing-box {
  background: var(--cream); border-radius: var(--r);
  padding: 1rem 1.2rem; margin: 1rem 0;
}
.ntb-title {
  font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-30); margin-bottom: .7rem;
}
.ntb-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: .82rem; padding: .3rem 0; border-bottom: 1px solid var(--ink-10);
  gap: 1rem; flex-wrap: wrap;
}
.ntb-row:last-child { border-bottom: none; }
.ntb-row strong { color: var(--ink); font-weight: 500; }
.ntb-row span { color: var(--ink-60); font-size: .78rem; }
.np-btn { margin-top: 1.2rem; font-size: .8rem; }

/* Sidebar */
.news-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 80px; }
.ns-widget {
  background: var(--white); border: 1px solid var(--ink-10);
  border-radius: var(--r); padding: 1.4rem;
}
.ns-widget-title {
  font-size: .65rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-30); margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--ink-10);
}
.ns-links { display: flex; flex-direction: column; gap: 0; }
.ns-links li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--ink-10);
}
.ns-links li:last-child { border-bottom: none; padding-bottom: 0; }
.ns-link {
  font-size: .8rem; color: var(--ink-60); text-align: left; line-height: 1.4;
  transition: color var(--ease); flex: 1; cursor: pointer;
}
.ns-link:hover { color: var(--red); }
.ns-link-plain { font-size: .8rem; color: var(--ink-60); flex: 1; }
.ns-link-date { font-size: .68rem; color: var(--ink-30); white-space: nowrap; flex-shrink: 0; }
.ns-cats { display: flex; flex-direction: column; gap: 0; }
.ns-cats li {
  display: flex; justify-content: space-between; align-items: center;
  padding: .5rem 0; border-bottom: 1px solid var(--ink-10); font-size: .82rem;
}
.ns-cats li:last-child { border-bottom: none; padding-bottom: 0; }
.ns-cat-name { color: var(--ink-60); }
.ns-cat-count {
  font-size: .68rem; font-weight: 600; color: var(--red);
  background: var(--red-lt); padding: .15rem .5rem; border-radius: 99px;
}
.ns-apply-box { border-left: 3px solid var(--red); }

@media(max-width:960px) {
  .news-layout { grid-template-columns: 1fr; }
  .news-sidebar { position: static; }
}

/* ============================================================
   HOME ALERT — "Next Session" label (was unstyled)
============================================================ */
.ac-upcoming {
  display:inline-block;
  font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); background:var(--red-lt);
  padding:.25rem .7rem; border-radius:99px; margin-bottom:1.1rem;
}

/* ============================================================
   "WHICH LEVEL?" PROMPT (on JLPT page)
============================================================ */
.level-prompt {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; text-align:left;
  background:var(--cream-2); border:1px solid var(--ink-10); border-left:3px solid var(--red);
  border-radius:var(--r); padding:1rem 1.4rem; margin:0 0 2.5rem;
  transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.level-prompt:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--red); }
.lp-q   { font-size:.9rem; color:var(--ink); font-weight:500; }
.lp-cta { font-size:.82rem; font-weight:600; color:var(--red); letter-spacing:.02em; }

/* ============================================================
   JLPT PLACEMENT CHECK
============================================================ */
.quiz { max-width:680px; margin:0 auto; }

.quiz-card {
  background:var(--white); border:1px solid var(--ink-10); border-top:4px solid var(--red);
  border-radius:var(--r); box-shadow:var(--shadow); padding:2.6rem 2.4rem; text-align:center;
}
.qi-badge {
  font-family:'Noto Serif JP',serif; font-size:3rem; color:var(--red); opacity:.25; line-height:1;
  margin-bottom:.6rem;
}
.qi-title { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:500; margin-bottom:.7rem; }
.qi-desc  { font-size:.88rem; line-height:1.85; color:var(--ink-60); max-width:460px; margin:0 auto 1.4rem; }
.qi-points {
  display:flex; flex-direction:column; gap:.5rem; text-align:left;
  max-width:340px; margin:0 auto 1.8rem;
}
.qi-points li { font-size:.85rem; color:var(--ink-60); display:flex; align-items:center; gap:.6rem; }
.qi-points li::before { content:'✓'; color:var(--red); font-weight:700; font-size:.78rem; }
.qi-note { font-size:.72rem; color:var(--ink-30); line-height:1.7; margin-top:1.4rem; max-width:460px; margin-left:auto; margin-right:auto; }

/* Progress + question flow */
.quiz-progress { margin-bottom:1.6rem; }
.qp-bar { height:6px; background:var(--ink-10); border-radius:99px; overflow:hidden; }
.qp-bar span {
  display:block; height:100%; width:0; background:var(--red);
  border-radius:99px; transition:width .35s cubic-bezier(.4,0,.2,1);
}
.qp-meta {
  display:flex; justify-content:space-between; align-items:center; margin-top:.6rem;
  font-size:.72rem; color:var(--ink-30); letter-spacing:.04em;
}
.qp-restart { font-size:.72rem; color:var(--ink-30); text-decoration:underline; transition:color var(--ease); }
.qp-restart:hover { color:var(--red); }

.quiz-q {
  background:var(--white); border:1px solid var(--ink-10); border-radius:var(--r);
  box-shadow:var(--shadow); padding:2.4rem 2.2rem;
}
.qq-level {
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red); margin-bottom:.7rem;
}
.qq-text {
  font-family:'Noto Serif JP',serif; font-size:1.5rem; font-weight:400; line-height:1.6;
  color:var(--ink); margin-bottom:1.8rem;
}
.qq-options { display:flex; flex-direction:column; gap:.7rem; }
.qq-opt {
  width:100%; text-align:left;
  font-family:'Noto Serif JP',serif; font-size:1.05rem; color:var(--ink);
  background:var(--white); border:1.5px solid var(--ink-10); border-radius:var(--r);
  padding:.9rem 1.2rem; transition:all var(--ease);
}
.qq-opt:hover {
  border-color:var(--red); background:var(--red-lt); transform:translateX(3px);
}

/* Result */
.qr-card { padding-top:2.2rem; }
.qr-eyebrow {
  font-size:.62rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-30); margin-bottom:.6rem;
}
.qr-level {
  font-family:'Playfair Display',serif; font-size:4.5rem; font-weight:500; line-height:1;
  color:var(--red);
}
.qr-jp { font-family:'Noto Serif JP',serif; font-size:1.1rem; color:var(--ink-30); margin:.3rem 0 1.2rem; }
.qr-msg { font-size:.92rem; line-height:1.85; color:var(--ink-60); max-width:480px; margin:0 auto 1rem; }
.qr-score {
  display:inline-block; font-size:.78rem; color:var(--ink-60);
  background:var(--cream); border-radius:99px; padding:.4rem 1rem; margin-bottom:1.6rem;
}
.qr-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

@media(max-width:600px) {
  .quiz-card, .quiz-q { padding:1.8rem 1.4rem; }
  .qq-text { font-size:1.3rem; }
  .qr-level { font-size:3.5rem; }
  .qr-actions { flex-direction:column; }
  .qr-actions .btn { justify-content:center; }
}

/* Instant right/wrong feedback on option buttons (Practice page) */
.qq-opt.correct { border-color:var(--secondary-deep); background:rgba(112,190,65,.12); }
.qq-opt.wrong   { border-color:var(--red); background:var(--red-lt); }
.qq-opt:disabled { cursor:default; transform:none; }
.qq-opt:disabled:hover { transform:none; }

/* Post-answer feedback strip: "Correct!" flashes briefly; a wrong answer
   or timeout holds the screen with the right answer until Next is pressed */
.qq-feedback {
  margin-top:1.4rem; padding:1rem 1.2rem; border-radius:var(--r);
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
}
.qq-feedback-text { font-size:.95rem; font-weight:600; line-height:1.7; }
.qq-feedback.is-correct { background:rgba(112,190,65,.12); color:var(--secondary-deep); }
.qq-feedback.is-wrong   { background:var(--red-lt); color:var(--red); }
.qq-feedback .qq-next { margin-left:auto; }
@media(max-width:600px) {
  .qq-feedback { flex-direction:column; align-items:stretch; text-align:center; }
  .qq-feedback .qq-next { margin-left:0; justify-content:center; }
}

/* ============================================================
   PRACTICE — category/level picker, timer bar, live stats
============================================================ */
.prac { max-width:680px; margin:0 auto; }
.prac-group { text-align:left; max-width:420px; margin:0 auto 1.2rem; }
.prac-group-label {
  font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-30); margin-bottom:.5rem;
}
.prac-chips { display:flex; gap:.6rem; flex-wrap:wrap; }
.prac-chip {
  font-family:'Outfit',sans-serif; font-size:.86rem; font-weight:500; color:var(--ink-60);
  background:var(--white); border:1.5px solid var(--ink-10); border-radius:99px;
  padding:.55rem 1.1rem; transition:all var(--ease);
}
.prac-chip:hover { border-color:var(--red); color:var(--red); }
.prac-chip.active { border-color:var(--red); background:var(--red); color:var(--white); }

.prac-select .btn { margin-top:.4rem; }
.prac-select .btn:disabled { opacity:.4; cursor:not-allowed; }

.prac-official {
  margin-top:2rem; padding:1.3rem 1.5rem;
  background:var(--cream-2); border:1px solid var(--ink-10); border-left:3px solid var(--secondary-deep);
  border-radius:var(--r);
}
.prac-official-label { font-size:.92rem; color:var(--ink); font-weight:500; margin-bottom:.9rem; }
.prac-official-links { display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.prac-official-links a {
  font-size:.9rem; font-weight:700; color:var(--white); background:var(--secondary-deep);
  border-radius:99px; padding:.55rem 1.15rem; transition:all var(--ease); display:inline-block;
}
.prac-official-links a:hover { background:var(--red); transform:translateY(-1px); box-shadow:var(--shadow); }

@media(max-width:600px) {
  .prac-official { padding:1.1rem 1.2rem; }
  .prac-official-label { font-size:.85rem; }
  .prac-official-links a { font-size:.84rem; padding:.5rem 1rem; }
}

.prac-timer { height:4px; background:var(--ink-10); border-radius:99px; overflow:hidden; margin-bottom:.8rem; }
.prac-timer span { display:block; height:100%; width:100%; background:var(--accent-deep); }

.prac-live-stats { font-size:.72rem; color:var(--ink-60); font-weight:600; letter-spacing:.02em; }

@media(max-width:600px) {
  .prac-chips { gap:.5rem; }
  .prac-chip { font-size:.8rem; padding:.5rem .9rem; }
  .qp-meta { flex-wrap:wrap; gap:.4rem; }
}

/* ============================================================
   NEWS TICKER — scrolling strip at the top of the home page
   Edit the message in script.js (TICKER_MESSAGE). Empty string
   hides the whole bar.
============================================================ */
.news-ticker {
  display:flex; align-items:center; gap:.9rem; width:100%;
  background:var(--red); color:var(--white); border:0; cursor:pointer;
  padding:.55rem 1.2rem; overflow:hidden; text-align:left; font-family:'Outfit',sans-serif;
}
.nt-label {
  flex:0 0 auto; font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(255,255,255,.2); border-radius:99px; padding:.28rem .75rem;
}
.nt-viewport { flex:1 1 auto; overflow:hidden; }
.nt-track { display:flex; width:max-content; animation-name:nt-scroll; animation-timing-function:linear; animation-iteration-count:infinite; }
.news-ticker:hover .nt-track { animation-play-state:paused; }
.nt-unit { display:flex; flex:0 0 auto; }
.nt-item { flex:0 0 auto; white-space:nowrap; padding-right:4rem; font-size:.86rem; font-weight:500; }
@keyframes nt-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .nt-track { animation:none; }
  .nt-viewport { overflow-x:auto; }
  .nt-item { padding-right:2rem; }
}
@media(max-width:600px) {
  .news-ticker { padding:.5rem .9rem; gap:.6rem; }
  .nt-item { font-size:.8rem; }
}

/* ============================================================
   HOME — alert card extras, test-takers band, quick links
============================================================ */
.ac-note { font-size:.74rem; color:var(--ink-30); line-height:1.6; margin-top:1rem; }
.ac-next {
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--ink-10);
  font-size:.78rem; color:var(--ink-60); line-height:1.6;
}
.ac-next strong { color:var(--ink); font-weight:600; }

.hs-num.hs-word { font-size:1.7rem; letter-spacing:.01em; }

.testtakers-band {
  max-width:1160px; margin:0 auto; padding:1.6rem 3rem;
  display:flex; align-items:baseline; justify-content:center; gap:.7rem;
  flex-wrap:wrap; text-align:center;
}
.tt-num {
  font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:600;
  color:var(--red); line-height:1;
}
.tt-label { font-size:.92rem; color:var(--ink-60); }
.tt-label strong { color:var(--ink); font-weight:600; }

.home-links {
  max-width:1160px; margin:0 auto; padding:.5rem 3rem 3.5rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem;
}
.home-link {
  text-align:left; cursor:pointer;
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.home-link:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:rgba(238,29,36,.25); }
.hl-title { font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:500; margin-bottom:.3rem; }
.hl-desc { font-size:.78rem; color:var(--ink-60); line-height:1.5; }

@media(max-width:600px) {
  .testtakers-band, .home-links { padding-left:1.5rem; padding-right:1.5rem; }
}

/* ============================================================
   JLPT LEVEL CARDS — clickable + details cue
============================================================ */
.lv-card { width:100%; cursor:pointer; }
.lv-more {
  display:block; margin-top:.55rem;
  font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-30); transition:color var(--ease);
}
.lv-card:hover .lv-more { color:var(--red); }

/* JLPT level details modal */
.lv-modal {
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
}
.lv-modal[hidden] { display:none; }
.lv-modal-overlay {
  position:absolute; inset:0; background:rgba(38,38,38,.55);
  animation:fadeIn .2s ease;
}
.lv-modal-box {
  position:relative; z-index:1; width:100%; max-width:480px;
  background:var(--white); border-radius:var(--r); border-top:4px solid var(--red);
  box-shadow:var(--shadow-lg); padding:2.2rem; max-height:90vh; overflow-y:auto;
  animation:fadeIn .25s ease;
}
.lv-modal-x {
  position:absolute; top:.6rem; right:1rem;
  font-size:1.7rem; line-height:1; color:var(--ink-30);
}
.lv-modal-x:hover { color:var(--red); }
.lvm-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.lvm-n { font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:500; color:var(--red); line-height:1; }
.lvm-jp { font-family:'Noto Serif JP',serif; font-size:1rem; color:var(--secondary-deep); }
.lvm-label { font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-30); margin-top:.25rem; }
.lvm-summary { font-size:.9rem; line-height:1.7; color:var(--ink); font-weight:500; margin-bottom:1.2rem; }
.lvm-skill { margin-bottom:1rem; }
.lvm-skill h4 { font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); margin-bottom:.35rem; }
.lvm-skill p { font-size:.84rem; line-height:1.75; color:var(--ink-60); }
.lvm-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 1rem; }
.lvm-src { font-size:.68rem; color:var(--ink-30); line-height:1.5; }

/* ============================================================
   EXAM VENUES (JLPT page) + home alert venues link
============================================================ */
.venues { margin: 2.2rem 0; }
.venue-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.venue-card {
  display:block; background:var(--white);
  border:1px solid var(--ink-10); border-left:3px solid var(--red);
  border-radius:var(--r); padding:1.3rem 1.4rem;
  transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
}
.venue-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.vc-levels {
  display:inline-block; margin-bottom:.7rem;
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); background:var(--red-lt); padding:.2rem .6rem; border-radius:99px;
}
.vc-name {
  font-family:'Playfair Display',serif; font-size:1.05rem; font-weight:500;
  line-height:1.3; color:var(--ink); margin-bottom:.8rem;
}
.vc-map { font-size:.76rem; font-weight:600; color:var(--red); letter-spacing:.02em; }
.venue-card:hover .vc-map { text-decoration:underline; }
.venue-note { font-size:.8rem; color:var(--ink-60); line-height:1.7; margin-top:1.1rem; }

.ac-venues-link {
  display:inline-block; margin-top:.8rem;
  font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--red);
}
.ac-venues-link:hover { text-decoration:underline; }

@media(max-width:960px){ .venue-grid { grid-template-columns:1fr; } }

/* ============================================================
   PLACEMENT QUIZ — skip button
============================================================ */
.qq-skip {
  display:block; margin:1.3rem auto 0;
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  color:var(--ink-30); transition:color var(--ease);
}
.qq-skip:hover { color:var(--red); text-decoration:underline; }

/* ============================================================
   PHOTO GALLERIES (auto-scrolling carousels)
============================================================ */
.gallery-section { max-width:1040px; margin:3rem auto 0; padding:0 1.5rem 3.5rem; text-align:center; }
.gallery-title {
  font-family:'Playfair Display',serif; font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:500; line-height:1.1; margin-bottom:1.6rem;
}
.gallery-title em { color:var(--red); font-style:italic; }

.gallery { max-width:1000px; margin:0 auto; }
.gal-frame {
  position:relative; overflow:hidden; aspect-ratio:16/9;
  border-radius:12px; border:1px solid var(--ink-10);
  background:var(--ink-solid); box-shadow:var(--shadow);
}
.gal-track { display:flex; height:100%; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.gal-slide { flex:1 0 0; height:100%; position:relative; }
.gal-slide img { width:100%; height:100%; object-fit:contain; display:block; }
.gal-cap {
  position:absolute; left:0; right:0; bottom:0; text-align:left;
  padding:2.2rem 1.4rem .9rem; color:#fff; font-size:.84rem; font-weight:500; line-height:1.4;
  background:linear-gradient(transparent, rgba(0,0,0,.78));
}
.gal-arrow {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:2.4rem; height:2.4rem; border-radius:50%;
  background:rgba(255,255,255,.88); color:var(--ink); font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:var(--shadow); transition:background var(--ease);
}
.gal-arrow:hover { background:#fff; }
.gal-prev { left:.7rem; } .gal-next { right:.7rem; }
/* ‹ / › sit visually high in their own line-box in this font — nudge down
   to center the actual glyph ink, not just its typographic box. */
.gal-arrow-glyph { display:inline-block; transform:translateY(-3px); }
.gal-dots { display:flex; justify-content:center; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.gal-dot {
  width:8px; height:8px; padding:0; border-radius:50%;
  background:var(--ink-10); cursor:pointer; transition:background var(--ease);
}
.gal-dot.active { background:var(--red); }
@media(max-width:600px){
  .gal-cap { font-size:.78rem; padding-bottom:.7rem; }
  .gal-arrow { width:2rem; height:2rem; font-size:1.2rem; }
}

/* ============================================================
   "APPLICATIONS CLOSED" — greyed, non-clickable states
============================================================ */
.btn-closed {
  background:var(--ink-10); color:var(--ink-30);
  cursor:not-allowed; pointer-events:none;
}
.nav-apply.closed {
  background:var(--ink-10); color:var(--ink-30);
  cursor:not-allowed; pointer-events:none;
}

/* AGM category tag — green to distinguish from JLPT (red) */
.np-cat.agm { color:var(--secondary-deep); background:rgba(112,190,65,.16); }

/* Flag-driven apply CTA — greyed/disabled state */
.btn.closed { background:var(--ink-10); color:var(--ink-30); border-color:transparent; cursor:not-allowed; pointer-events:none; }
.btn.closed:hover { transform:none; box-shadow:none; }
.fc-apply.closed { color:rgba(255,255,255,.25); pointer-events:none; }