/* ==========================================================
   shell.css — top bar, overlay menu, page frame, footer
   ========================================================== */

/* ------------------------------ top bar ------------------------------ */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:90;
  height:var(--bar);
  border-bottom:var(--rule) solid transparent;
  background:rgba(242,242,237,.72);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.hd.is-stuck{background:rgba(242,242,237,.94);border-bottom-color:var(--line)}
.hd__in{
  height:100%;display:flex;align-items:center;gap:clamp(16px,3vw,44px);
}
.hd__brand{display:flex;align-items:baseline;gap:10px;flex-shrink:0}
.hd__mark{
  font-size:1.16rem;font-weight:750;letter-spacing:-.03em;
}
.hd__mark i{
  font-style:normal;color:var(--sig);
}
.hd__en{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  color:var(--ink-3);text-transform:uppercase;
}
.hd__nav{
  display:flex;align-items:center;gap:clamp(14px,1.9vw,30px);
  margin-left:auto;
}
.hd__nav a{
  position:relative;font-size:.9rem;font-weight:550;color:var(--ink-2);
  padding:6px 0;
  transition:color var(--dur) var(--ease);
}
.hd__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--sig);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.hd__nav a:hover{color:var(--ink)}
.hd__nav a:hover::after,.hd__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hd__nav a[aria-current="page"]{color:var(--ink);font-weight:650}
.hd__tail{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:8px}
.hd__live{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pine);
}
.hd__live i{
  width:6px;height:6px;border-radius:50%;background:var(--pine);
  box-shadow:0 0 0 0 rgba(15,91,69,.5);animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(15,91,69,.45)}
  70%{box-shadow:0 0 0 7px rgba(15,91,69,0)}
  100%{box-shadow:0 0 0 0 rgba(15,91,69,0)}
}
.hd__cta{
  display:inline-flex;align-items:center;gap:.4em;
  padding:.5em .95em;border-radius:var(--r-sm);
  border:var(--rule) solid var(--ink);background:var(--ink);color:var(--on-night);
  font-size:.82rem;font-weight:600;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.hd__cta:hover{background:var(--sig);border-color:var(--sig);color:#fff}
.hd__menu{
  display:none;align-items:center;gap:.5em;
  padding:.5em .8em;border:var(--rule) solid var(--line);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
}
.hd__menu .bars{display:grid;gap:3px;width:14px}
.hd__menu .bars span{height:1.5px;background:var(--ink);transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.hd__menu[aria-expanded="true"] .bars span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.hd__menu[aria-expanded="true"] .bars span:nth-child(2){opacity:0}
.hd__menu[aria-expanded="true"] .bars span:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

/* ------------------------------ overlay menu ------------------------------ */
.menu{
  position:fixed;inset:0;z-index:95;
  background:var(--night);color:var(--on-night);
  padding:calc(var(--bar) + 24px) 0 32px;
  overflow-y:auto;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .52s var(--ease);
  visibility:hidden;
}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible}
.menu__grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:clamp(24px,5vw,72px);
}
.menu__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 40px}
.menu__links a{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:var(--rule) solid var(--line-night);
  font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;letter-spacing:-.02em;
  transition:color var(--dur) var(--ease),padding-left var(--dur) var(--ease);
}
.menu__links a span{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--on-night-2)}
.menu__links a:hover{color:var(--sig);padding-left:8px}
.menu__side{padding-top:6px}
.menu__side h4{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-night-2);margin-bottom:12px;font-weight:500;
}
.menu__side ul{display:grid;gap:9px}
.menu__side a{font-size:.88rem;color:var(--on-night-2);transition:color var(--dur) var(--ease)}
.menu__side a:hover{color:var(--on-night)}
.menu__note{
  margin-top:26px;padding-top:18px;border-top:var(--rule) solid var(--line-night);
  font-size:.76rem;line-height:1.7;color:var(--on-night-2);
}

/* ------------------------------ page frame ------------------------------ */
.pg{padding-top:var(--bar)}
.pg--home{padding-top:0}

.crumb{
  border-bottom:var(--rule) solid var(--line);
  background:var(--paper-2);
}
.crumb__in{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-block:11px;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);
}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--sig-deep)}
.crumb .sep{color:var(--ink-4)}
.crumb [aria-current="page"]{color:var(--ink);letter-spacing:.06em}

/* ------------------------------ page head ------------------------------ */
.ph{
  position:relative;
  padding:clamp(34px,5.2vw,68px) 0 clamp(26px,3.4vw,42px);
  border-bottom:var(--rule) solid var(--line);
  overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--line-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:.6;
}
.ph__in{position:relative;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);gap:clamp(20px,4vw,56px);align-items:end}
.ph__eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sig-deep);margin-bottom:18px;
}
.ph__eyebrow::before{content:"";width:26px;height:1px;background:var(--sig)}
.ph h1{margin-bottom:18px}
.ph__lead{
  max-width:62ch;color:var(--ink-2);font-size:clamp(1rem,1.3vw,1.1rem);
}
.ph__meta{
  display:grid;gap:12px;padding-left:20px;border-left:var(--rule) solid var(--line);
}
.ph__meta div{display:flex;flex-direction:column;gap:2px}
.ph__meta dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.ph__meta dd{margin:0;font-size:.9rem;font-weight:600}

/* ------------------------------ footer ------------------------------ */
.ft{
  background:var(--night);color:var(--on-night);
  padding-top:clamp(40px,5vw,64px);
  margin-top:clamp(40px,6vw,80px);
}
.ft a{color:var(--on-night-2)}
.ft a:hover{color:var(--on-night)}
.ft__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,2fr);
  gap:clamp(28px,5vw,64px);
  padding-bottom:clamp(28px,4vw,44px);
  border-bottom:var(--rule) solid var(--line-night);
}
.ft__brand{font-size:1.4rem;font-weight:750;letter-spacing:-.03em;margin-bottom:12px}
.ft__brand i{font-style:normal;color:var(--sig)}
.ft__claim{font-size:.88rem;line-height:1.85;color:var(--on-night-2);max-width:38ch}
.ft__badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ft__badges span{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  border:var(--rule) solid var(--line-night);border-radius:var(--r-xs);
  padding:.34em .6em;color:var(--on-night-2);
}
.ft__maps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ft__maps h4{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-night);margin-bottom:12px;font-weight:600;
}
.ft__maps li{margin-bottom:7px}
.ft__maps a{font-size:.83rem}
.ft__bot{
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:20px 0 26px;
  font-size:.74rem;color:var(--on-night-2);line-height:1.7;
}
.ft__bot p{margin:0}
.ft__legal{display:flex;gap:16px;flex-wrap:wrap}
.ft__legal a{border-bottom:1px solid transparent}
.ft__legal a:hover{border-bottom-color:var(--sig)}
.ft__disclaimer{
  font-size:.72rem;color:#7E867F;line-height:1.75;
  border-top:var(--rule) solid var(--line-night);
  padding-top:16px;
}

@media (max-width:1024px){
  .hd__nav{display:none}
  .hd__menu{display:inline-flex}
  .hd__live{display:none}
  .ph__in{grid-template-columns:1fr}
  .ph__meta{grid-template-columns:repeat(3,minmax(0,1fr));padding-left:0;border-left:0;border-top:var(--rule) solid var(--line);padding-top:18px}
  .ft__top{grid-template-columns:1fr}
  .ft__maps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  :root{--bar:60px}
  .hd__cta{display:none}
  .hd__en{display:none}
  .menu__grid{grid-template-columns:1fr}
  .menu__links{grid-template-columns:1fr}
  .ft__maps{grid-template-columns:1fr 1fr;gap:18px}
  .ft__bot{flex-direction:column}
}
