/* ==========================================================
   BMJ Sensual Festival 2027 (Bachata Media Japan, 9th Edition)
   Built to BMJ Identity Manual v1.0 (September 2026).
   Core: Steel & Hinomaru (permanent).
   Campaign: Blue & Gold (2027 season).
   Ink 60 · Blue 22 · Chrome 10 · Gold 5 · Red 3.
   MOBILE FIRST — base rules are the phone; queries scale up.
   ========================================================== */

:root{
  /* Core — Steel & Hinomaru */
  --ink:#050507; --ink2:#0B0C10;
  --surface:#111319; --surface2:#171A22;
  --line:#262A35; --line-soft:#1B1F27;
  --chrome-hi:#F6F7F1; --chrome:#ADAEA9; --chrome-lo:#7D807B; --chrome-deep:#3A3D3B;
  --hinomaru-hi:#D93B33; --hinomaru:#A92620; --hinomaru-lo:#6B1610;

  /* Campaign — Blue & Gold (2027) */
  --navy:#141A45; --royal:#2F52A8; --electric:#4A83D8; --mist:#C9E2FF;
  --gold-hi:#FFF6C9; --gold:#FFD24A; --gold-lo:#EFA518; --gold-deep:#B9760C;

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --script:"Kaushan Script","Brush Script MT",cursive;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --maxw:1080px;
  --tap:48px;
  --bar:76px;
}
*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;background:var(--ink);color:var(--chrome-hi);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
@media (min-width:760px){ body{font-size:17px} }

[data-lang="ja"] [data-l="en"]{display:none!important}
[data-lang="en"] [data-l="ja"]{display:none!important}
[data-l="ja"]{line-height:1.85}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media (min-width:760px){ .wrap{padding-inline:28px} }
h1,h2,h3,h4{margin:0}
img{max-width:100%;display:block}
a{color:var(--mist);text-decoration:none}
:focus-visible{outline:2px solid var(--electric);outline-offset:3px;border-radius:2px}

/* ---------- MATERIALS (manual §05) ---------- */
.m-steel{background:linear-gradient(168deg,#F6F7F1 0%,#9FA29C 26%,#3A3D3B 48%,#C9CBC4 62%,#7D807B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.m-gold{background:linear-gradient(178deg,#FFF6C9 0%,#FFD24A 42%,#EFA518 68%,#B9760C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.m-water{background:radial-gradient(120% 130% at 50% 40%,#4A83D8 0%,#2F52A8 42%,#141A45 100%)}
.disc{background:radial-gradient(circle at 38% 32%,#D93B33 0%,#A92620 46%,#6B1610 100%);
  border-radius:50%;display:inline-block;flex:none}

/* ---------- TYPE SCALE (manual §04) ---------- */
.display{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
/* Archivo has no Japanese — Japanese display falls to Noto Sans JP 700 upright */
.display[data-l="ja"], .display [data-l="ja"]{
  font-family:var(--body);font-weight:700;font-style:normal;
  letter-spacing:.01em;line-height:1.25;text-transform:none}
.script{font-family:var(--script);font-weight:400;font-style:normal;
  text-transform:none;letter-spacing:0;color:var(--chrome-hi)}
.eyebrow{font-family:var(--display);font-weight:800;font-size:.7rem;line-height:1.4;
  text-transform:uppercase;letter-spacing:.14em;color:var(--chrome-lo)}
.mono{font-family:var(--mono);font-weight:400;font-size:.8rem;line-height:1.6;
  color:var(--mist);font-variant-numeric:tabular-nums}
.caption{font-size:.82rem;line-height:1.5;color:var(--chrome-lo)}

/* ---------- BUTTONS (manual §06) ----------
   Gold sells a ticket and is the only one of its kind on screen.
   Blue-outline is everything else. Red is competition entry only. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;cursor:pointer;font-family:var(--display);font-weight:800;font-size:.86rem;
  letter-spacing:.06em;text-transform:uppercase;min-height:var(--tap);
  padding:14px 26px;border-radius:2px;text-align:center;
  transition:transform .15s,box-shadow .15s,background .15s}
.btn-gold{background:linear-gradient(178deg,#FFD24A 0%,#EFA518 70%,#B9760C 100%);
  color:var(--ink);box-shadow:0 0 0 1px rgba(255,246,201,.45),0 10px 30px -12px rgba(239,165,24,.6)}
.btn-gold:active{transform:translateY(1px)}
.btn-blue{background:transparent;color:var(--mist);box-shadow:inset 0 0 0 1px var(--royal)}
.btn-blue:hover{box-shadow:inset 0 0 0 1px var(--electric);color:var(--chrome-hi)}
.btn-red{background:var(--hinomaru);color:var(--chrome-hi);
  box-shadow:0 0 0 1px var(--hinomaru-hi)}
.btn-block{width:100%}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(5,5,7,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;gap:12px;min-height:58px;
  max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
/* The logo sits in the nav on every page. Note this runs below the manual's
   240px minimum reproduction width — the manual's remedy is a simplified
   single-colour version, which does not exist yet. Until it does, the mark is
   kept as large as a phone bar allows and never below 150px. */
.nav .brandmark{display:flex;align-items:center;flex:none;min-height:var(--tap)}
.nav .brandmark img{width:118px;height:auto}
@media (min-width:520px){ .nav .brandmark img{width:140px} }
@media (min-width:900px){ .nav .brandmark img{width:150px} }
@media (min-width:1160px){ .nav .brandmark img{width:165px} }
.nav .edition{font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);flex:none}
.nav-links{display:none}
.nav-right{display:flex;align-items:center;gap:8px;margin-left:auto}
/* Header ticket link. Filled royal, NOT gold: the manual allows one gold
   button on screen and a sticky header one would fight the hero button and
   the mobile ticket bar all the way down the page. Hidden on the narrowest
   phones, where the sticky gold bar already carries the same link. */
.btn-nav{display:none;align-items:center;justify-content:center;flex:none;
  min-height:40px;padding:0 15px;border-radius:2px;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--royal);color:var(--chrome-hi);
  box-shadow:0 0 0 1px rgba(74,131,216,.55);transition:background .15s,box-shadow .15s}
.btn-nav:hover{background:var(--electric);box-shadow:0 0 0 1px rgba(201,226,255,.6)}
.btn-nav [data-l="ja"]{font-family:var(--body);font-weight:700;letter-spacing:.04em}
@media (min-width:430px){ .btn-nav{display:inline-flex} }
@media (min-width:900px){ .btn-nav{min-height:42px;padding:0 19px} }
.lang{display:flex;padding:3px;border-radius:2px;background:var(--surface);
  border:1px solid var(--line);flex:none}
.lang button{appearance:none;border:0;cursor:pointer;border-radius:1px;min-height:40px;
  padding:0 13px;font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.08em;background:transparent;color:var(--chrome-lo);white-space:nowrap}
.lang button[aria-pressed="true"]{background:var(--chrome-hi);color:var(--ink)}
@media (min-width:1000px){
  .nav-in{min-height:64px;padding-inline:28px;flex-wrap:nowrap}
  .nav-links{display:flex;gap:18px;margin-left:26px;font-family:var(--display);
    font-weight:800;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
  /* nowrap keeps every label on a single line — English items like ABOUT BMJ
     were breaking into two rows and making the bar twice as tall */
  .nav-links a{color:var(--chrome-lo);padding:6px 0;white-space:nowrap}
  .nav-links a:hover{color:var(--chrome-hi)}
  .nav-right{margin-left:auto}
}
@media (min-width:1120px){ .nav-links{gap:22px;margin-left:32px;letter-spacing:.12em} }

/* ============ HERO — key visual, then a deep-water band ============ */
.hero{position:relative;background:var(--ink)}
/* The artwork itself: portrait file on phones, landscape above 760px.
   Both are shipped with the site, so nothing depends on an outside host. */
/* The flyer is capped rather than full-bleed: at ~920px the 1920px master is
   served at better than 2x, so it stays crisp, and the ground shows either
   side instead of the artwork being stretched edge to edge. */
.kv-stage{position:relative;isolation:isolate;overflow:hidden;
  padding:16px 14px 20px;
  background:linear-gradient(180deg,var(--ink) 0%,#0B1030 40%,#101744 72%,var(--ink) 100%)}
@media (min-width:760px){ .kv-stage{padding:40px 28px 44px} }
.kv-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 70% at 50% 45%,transparent 0%,rgba(5,5,7,.5) 70%,rgba(5,5,7,.9) 100%)}
.kv{display:block;max-width:920px;margin-inline:auto;background:var(--navy);
  border-radius:4px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(201,226,255,.16),0 34px 80px -34px rgba(5,5,7,.95)}
.kv img{width:100%;height:auto;display:block}
.hero-band{position:relative;isolation:isolate;overflow:hidden;padding:36px 0 48px}
@media (min-width:760px){ .hero-band{padding:52px 0 68px} }
.hero-band::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 130% at 50% 40%,#4A83D8 0%,#2F52A8 42%,#141A45 100%)}
/* keep the page reading 60% ink: darken everything but the centre */
.hero-band::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(95% 75% at 50% 38%,transparent 0%,rgba(5,5,7,.42) 58%,rgba(5,5,7,.86) 100%),
    linear-gradient(180deg,rgba(5,5,7,.55) 0%,transparent 22%,transparent 64%,var(--ink) 100%)}
/* chrome ribbons raking across the water */
.ribbons{position:absolute;inset:0;z-index:-1;opacity:.4;pointer-events:none;
  mix-blend-mode:screen;overflow:hidden}
.ribbons i{position:absolute;left:-30%;width:160%;height:2px;display:block;filter:blur(1px);
  background:linear-gradient(90deg,transparent,#F6F7F1 38%,#7D807B 62%,transparent)}
.ribbons i:nth-child(1){top:24%;transform:rotate(-13deg);opacity:.75}
.ribbons i:nth-child(2){top:52%;transform:rotate(-8deg);height:1px;opacity:.5}
.ribbons i:nth-child(3){top:76%;transform:rotate(-16deg);height:3px;opacity:.35;filter:blur(2px)}

.hero-in{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media (min-width:760px){ .hero-in{padding-inline:28px} }

/* Logo plate. The manual forbids dropping the logo onto busy artwork without
   a scrim, and the hero is a water gradient — so the mark sits on a near-solid
   ink plate. Padding gives the required clear space (≈ one torii height). */
/* Master logo, transparent PNG. Kept at or above the 240px minimum
   reproduction width; no glow, outline or recolour (manual §02). */
.hero-logo{width:min(300px,74vw);min-width:240px;height:auto;margin-bottom:22px}
@media (min-width:760px){ .hero-logo{width:min(420px,40vw);margin-bottom:26px} }
.hero-in{position:relative;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
@media (min-width:760px){ .hero-in{padding-inline:28px} }

/* Logo plate. The manual forbids dropping the logo onto busy artwork without
   a scrim, and the hero is a water gradient — so the mark sits on a near-solid
   ink plate. Padding gives the required clear space (≈ one torii height). */
/* Master logo, transparent PNG. Kept at or above the 240px minimum
   reproduction width; no glow, outline or recolour (manual §02). */
.hero-logo{width:min(300px,74vw);min-width:240px;height:auto;margin-bottom:22px}
@media (min-width:760px){ .hero-logo{width:min(420px,40vw);margin-bottom:26px} }
.hero-logo-fb{font-family:var(--script);font-size:clamp(1.45rem,6vw,2.2rem);
  color:var(--chrome-hi);line-height:1.15;display:block}
.fb-name{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(1.25rem,5vw,1.9rem);
  line-height:1;margin-top:2px;display:block;color:var(--chrome)}

/* eyebrow + hinomaru bullet — used by the home hero and by every subpage hero,
   so it must not be scoped to .hero */
.kick{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.kick .disc{width:9px;height:9px}
.hero h1{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:.95;
  font-size:clamp(2.3rem,10.4vw,4.6rem)}
.hero .dateline{margin:14px 0 0;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1;
  font-size:clamp(1.15rem,4.6vw,1.9rem);color:var(--chrome-hi)}
.hero .venue-line{margin:8px 0 0;color:var(--mist);font-size:1rem;line-height:1.55}
.hero .offer{margin:14px 0 0;color:var(--chrome);font-size:.98rem;max-width:52ch}
.hero .cta{display:flex;flex-direction:column;gap:10px;margin-top:30px}
@media (min-width:620px){ .hero .cta{flex-direction:row;flex-wrap:wrap}
  .hero .cta .btn{width:auto} }
.hero .fx{margin-top:16px}

/* ============ COUNTDOWN ============
   Numerals are the data face (IBM Plex Mono, tabular) so the digits do not
   jitter as they tick. Gold is the campaign accent and this is the one place
   on the page it appears outside the ticket button. */
.countdown{margin-top:26px;padding-top:22px;border-top:1px solid rgba(201,226,255,.16)}
.cd-label{display:block;margin-bottom:10px;color:var(--mist);opacity:.85}
.cd-clock{display:flex;align-items:flex-start;gap:6px}
.cd-unit{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:52px}
.cd-unit b{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums;
  font-size:clamp(1.6rem,8.5vw,2.4rem);line-height:1;letter-spacing:-.01em;
  background:linear-gradient(178deg,#FFF6C9 0%,#FFD24A 42%,#EFA518 68%,#B9760C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cd-unit span{font-family:var(--display);font-weight:800;font-size:.6rem;line-height:1.3;
  letter-spacing:.13em;text-transform:uppercase;color:var(--chrome-lo)}
.cd-unit span[data-l="ja"]{font-family:var(--body);font-weight:700;letter-spacing:.06em}
.cd-sep{font-family:var(--mono);font-size:1.5rem;line-height:1;color:var(--chrome-deep);
  padding-top:2px}
.cd-done{margin:0;color:var(--mist);font-size:.95rem}
@media (min-width:620px){
  .cd-clock{gap:10px}
  .cd-unit{min-width:66px}
  .cd-unit b{font-size:2.5rem}
  .cd-sep{font-size:1.8rem;padding-top:5px}
}

/* ============ MARQUEE ============ */
.marquee{border-block:1px solid var(--line-soft);background:var(--ink2);
  overflow:hidden;padding:12px 0;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee ul{display:inline-flex;gap:26px;list-style:none;margin:0;padding:0 13px;
  animation:slide 44s linear infinite}
.marquee li{font-family:var(--display);font-weight:800;font-size:.8rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--chrome-lo)}
.marquee li::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--hinomaru);margin-left:26px;vertical-align:middle}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SECTIONS ============ */
.sec{padding-block:60px}
@media (min-width:760px){ .sec{padding-block:88px} }
.sec-head{margin-bottom:30px}
@media (min-width:760px){ .sec-head{margin-bottom:44px;max-width:66ch} }
.sec-head .eyebrow{display:block;margin-bottom:12px}
.sec-head h2{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.05;
  font-size:clamp(1.75rem,6.6vw,2.25rem);color:var(--chrome-hi)}
.sec-head h2[data-l="ja"]{font-size:clamp(1.4rem,5.4vw,1.95rem)}
.sec-head p{margin:16px 0 0;color:var(--chrome);font-size:.98rem;max-width:65ch}
.rule{height:1px;border:0;margin:0;background:var(--line-soft)}

/* ============ PILLARS ============ */
.pillars{display:grid;gap:14px}
@media (min-width:860px){ .pillars{grid-template-columns:repeat(3,1fr);gap:18px} }
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 22px 28px}
.pillar .top{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.pillar .top .disc{width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.6rem;color:var(--chrome-hi);
  font-style:normal;line-height:1;padding-top:1px}
.pillar h3{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1.22rem;line-height:1.1;
  color:var(--chrome-hi)}
.pillar h3[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  font-size:1.08rem;line-height:1.4;text-transform:none;letter-spacing:.01em}
.pillar p{margin:0;color:var(--chrome);font-size:.93rem;line-height:1.7}

/* ============ PHOTO STRIPS ============ */
.strip{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media (min-width:720px){ .strip{grid-template-columns:repeat(3,1fr);gap:10px} }
.strip figure{margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  background:var(--surface);border:1px solid var(--line-soft)}
.strip img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04) hue-rotate(-4deg)}  /* cool grade, manual §05 */
.strip.wide figure{aspect-ratio:3/2}

/* ============ GALLERY BAND (home page) ============
   The archive is a real reason to visit, so it gets a band of its own
   rather than a footer link. Reads as ink with a single chrome rule. */
.gallery-band{background:linear-gradient(180deg,var(--ink) 0%,var(--ink2) 60%,var(--ink) 100%);
  border-block:1px solid var(--line-soft)}
.gallery-band .strip:not([hidden]){margin-bottom:26px}
.gal-cta{border:1px solid var(--line);border-radius:3px;background:var(--surface);
  padding:22px 20px;display:grid;gap:22px}
.gal-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  border-bottom:1px solid var(--line-soft);padding-bottom:20px}
.gal-num{display:flex;flex-direction:column;gap:5px;min-width:0}
.gal-num b{font-family:var(--display);font-weight:900;font-style:italic;
  font-size:clamp(1.5rem,7vw,2.1rem);line-height:1;letter-spacing:-.02em;
  background:linear-gradient(168deg,#F6F7F1 0%,#9FA29C 26%,#3A3D3B 48%,#C9CBC4 62%,#7D807B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.gal-num span{font-size:.74rem;line-height:1.45;color:var(--chrome-lo)}
.gal-btns{display:grid;gap:10px}
@media (min-width:640px){
  .gal-cta{padding:26px 26px;grid-template-columns:1.35fr 1fr;align-items:center;gap:30px}
  .gal-nums{border-bottom:0;border-right:1px solid var(--line-soft);
    padding-bottom:0;padding-right:26px}
  .gal-num b{font-size:1.85rem}
  .gal-num span{font-size:.78rem}
}
@media (min-width:900px){ .gal-num b{font-size:2.15rem} }

/* ============ TOKYO ============ */
.tokyo{position:relative;overflow:hidden;padding-block:60px 0;
  background:linear-gradient(180deg,var(--ink) 0%,#0B1030 46%,var(--navy) 100%);
  border-top:1px solid var(--line-soft)}
@media (min-width:760px){ .tokyo{padding-block:88px 0} }
.tokyo .sec-head h2{font-size:clamp(2rem,8.5vw,3.4rem)}
.tokyo .sec-head h2[data-l="ja"]{font-size:clamp(1.55rem,6.2vw,2.5rem)}
.tokyo .sec-head p{color:var(--mist)}
.skyline{display:block;width:100%;height:auto;margin-top:32px;color:#04060F}
.skyline .sun{fill:var(--hinomaru)}

/* ============ VENUE ============ */
.vcard{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:24px 20px}
@media (min-width:760px){ .vcard{padding:32px 30px} }
.vstats{display:grid;gap:12px;margin-bottom:24px}
@media (min-width:620px){ .vstats{grid-template-columns:repeat(3,1fr)} }
.vstat{background:var(--ink2);border:1px solid var(--line-soft);border-radius:2px;padding:16px 18px}
.vstat b{display:block;font-family:var(--display);font-weight:900;font-style:italic;
  font-size:1.7rem;line-height:1;margin-bottom:7px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--chrome-hi)}
.vstat span{display:block;font-size:.8rem;color:var(--chrome-lo);line-height:1.45}
.vcard h3{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:1.1rem;letter-spacing:-.01em;margin-bottom:12px;color:var(--chrome-hi)}
.vcard h3[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  text-transform:none;letter-spacing:.01em}
.vaddr{margin:0 0 20px;color:var(--mist);font-size:.93rem;line-height:1.6}
.vlinks{display:flex;flex-direction:column;gap:10px}
@media (min-width:620px){ .vlinks{flex-direction:row} }

/* ============ HOTELS ============ */
.hotels{display:grid;gap:14px}
@media (min-width:760px){ .hotels{grid-template-columns:repeat(2,1fr);gap:16px} }
.hotel{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:24px 20px;display:flex;flex-direction:column}
@media (min-width:760px){ .hotel{padding:28px 26px} }
.hotel .tier-l{display:block;font-family:var(--display);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-lo);margin-bottom:10px}
.hotel h3{font-size:1.1rem;font-weight:700;line-height:1.3;margin-bottom:8px;color:var(--chrome-hi)}
.hotel .walk{margin:0 0 12px;font-size:.84rem;color:var(--mist);font-weight:500}
.hotel p.d{margin:0 0 20px;font-size:.88rem;color:var(--chrome);line-height:1.65}
.hotel .btn{margin-top:auto}
/* The one we actually recommend — gold as an accent, never a gold button. */
.hotel.pick{border-color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px rgba(255,210,74,.16),0 14px 40px -26px rgba(239,165,24,.55)}
.hotel.pick .tier-l{color:var(--gold)}

/* ============ PASSES / PRICE TIERS (manual §06) ============ */
.passes{display:grid;gap:16px}
@media (min-width:760px){ .passes{grid-template-columns:repeat(2,1fr);gap:18px} }
@media (min-width:1000px){ .passes.three{grid-template-columns:repeat(3,1fr)} }
.pass{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 22px;display:flex;flex-direction:column}
@media (min-width:760px){ .pass{padding:30px 28px} }
.pass.live{border-color:var(--gold-lo)}
.pass .status{display:flex;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-lo)}
.pass.live .status{color:var(--gold)}
.pass.live .status .disc{width:8px;height:8px}
.pass h3{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  font-size:1.12rem;letter-spacing:-.01em;line-height:1.15;margin-bottom:4px;color:var(--chrome-hi)}
.pass h3[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  text-transform:none;letter-spacing:.01em;font-size:1.05rem}
.price{font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:-.02em;
  font-size:2.1rem;line-height:1;margin:18px 0 5px;font-variant-numeric:tabular-nums;
  color:var(--chrome-hi)}
.pass.live .price{background:linear-gradient(178deg,#FFF6C9 0%,#FFD24A 42%,#EFA518 68%,#B9760C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.price-sub{margin:0 0 6px;font-size:.86rem;color:var(--chrome)}
.fee-note{margin:0 0 18px;font-size:.8rem;color:var(--chrome-lo);line-height:1.5}
.next-tier{margin:0 0 20px;padding:11px 13px;border:1px dashed var(--line);border-radius:2px;
  font-size:.79rem;color:var(--chrome-lo);line-height:1.5}
.next-tier b{font-family:var(--display);font-weight:900;font-style:italic;color:var(--chrome);
  font-variant-numeric:tabular-nums;font-size:.92rem}
.pass ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px}
.pass ul li{position:relative;padding-left:20px;font-size:.88rem;color:var(--chrome);line-height:1.6}
.pass ul li::before{content:"";position:absolute;left:1px;top:.6em;width:7px;height:7px;
  border-radius:50%;background:var(--royal)}
.pass ul li.no{color:var(--chrome-lo)}
.pass ul li.no::before{background:var(--chrome-deep)}
.pass .btn{margin-top:auto}
.fx-note{margin-top:22px;padding-left:13px;border-left:2px solid var(--line);
  font-size:.8rem;color:var(--chrome-lo);line-height:1.6}

/* ============ ASIAN CUP ============ */
.cup{background:var(--ink2);border-block:1px solid var(--line-soft);position:relative;overflow:hidden}
.cup::before{content:"";position:absolute;width:340px;height:340px;right:-120px;top:-120px;
  background:radial-gradient(circle at 38% 32%,#D93B33 0%,#A92620 46%,#6B1610 100%);
  border-radius:50%;opacity:.12;filter:blur(8px)}
.cup-grid{display:grid;gap:28px;position:relative}
@media (min-width:880px){ .cup-grid{grid-template-columns:1.1fr .9fr;gap:44px;align-items:center} }
.cup h2{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1.05;font-size:clamp(1.7rem,6.4vw,2.5rem);color:var(--chrome-hi)}
.cup h2[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  text-transform:none;font-size:clamp(1.35rem,5.2vw,1.9rem);line-height:1.35;letter-spacing:.01em}
.cup .road{font-family:var(--script);font-size:clamp(1.4rem,5vw,2rem);color:var(--chrome-hi);
  margin-top:10px;line-height:1.2}
.cup p.lede{color:var(--chrome);margin:18px 0 0;max-width:52ch;font-size:.96rem}
.cup .btn{margin-top:24px}
.cup dl{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.cup dl>div{background:var(--ink2);padding:15px 18px;display:flex;justify-content:space-between;
  align-items:baseline;gap:14px}
.cup dt{font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-lo)}
.cup dd{margin:0;font-family:var(--display);font-weight:900;font-style:italic;font-size:1.05rem;
  color:var(--chrome-hi);text-align:right;letter-spacing:-.01em}
.cup dd[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;font-size:.95rem;
  letter-spacing:.01em}

/* ============ LINEUP ============ */
.poster{margin:0 0 24px;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--surface)}
.poster figcaption{padding:11px 15px;font-family:var(--mono);font-size:.72rem;
  color:var(--chrome-lo);border-top:1px solid var(--line-soft);letter-spacing:.03em}
.artists{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  grid-template-columns:1fr}
@media (min-width:620px){ .artists{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .artists{grid-template-columns:repeat(4,1fr)} }
.artist{background:var(--ink);padding:16px 18px;display:flex;align-items:center;gap:11px}
.artist .disc{width:7px;height:7px}
.artist .nm{font-family:var(--display);font-weight:900;font-style:italic;font-size:.92rem;
  text-transform:uppercase;letter-spacing:-.01em;line-height:1.2;color:var(--chrome-hi)}
.artist .hd{margin-left:auto;font-family:var(--display);font-weight:800;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);flex:none}
.note{margin-top:18px;padding-left:13px;border-left:2px solid var(--line);
  font-size:.83rem;color:var(--chrome-lo);line-height:1.6}

/* ============ CLOSER ============ */
.closer{text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(110% 130% at 50% 100%,#2F52A8 0%,#141A45 48%,var(--ink) 100%)}
.closer h2{font-family:var(--display);font-weight:900;font-style:italic;text-transform:uppercase;
  letter-spacing:-.02em;line-height:1;font-size:clamp(1.9rem,7.4vw,3rem)}
.closer h2[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  text-transform:none;font-size:clamp(1.5rem,5.8vw,2.3rem);line-height:1.3;letter-spacing:.01em}
.closer p{color:var(--mist);margin:16px auto 0;max-width:46ch}
.closer .btn{margin-top:26px}
@media (max-width:619px){ .closer .btn{width:100%} }

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line-soft);background:var(--ink2)}
.foot{display:grid;gap:26px;padding:44px 20px 30px;max-width:var(--maxw);margin-inline:auto}
@media (min-width:720px){ .foot{grid-template-columns:1.6fr 1fr 1fr;padding:52px 28px 34px;gap:36px} }
.foot .script{font-size:1.55rem;line-height:1.15;display:block}

/* footer brandmark — sized like the nav logo, never full-bleed */
.foot-logo{width:170px;max-width:62%;height:auto;margin:0 0 4px}
@media (min-width:720px){ .foot-logo{width:190px;max-width:100%} }

.foot p{color:var(--chrome-lo);font-size:.84rem;margin:12px 0 0;line-height:1.6}
.foot h4{margin:0 0 10px;font-family:var(--display);font-weight:800;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-deep)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;font-size:.9rem}
.foot ul a{color:var(--chrome);display:inline-flex;align-items:center;min-height:44px}
.foot ul a:hover{color:var(--chrome-hi)}
.legal{border-top:1px solid var(--line-soft);padding:16px 20px 22px;max-width:var(--maxw);
  margin-inline:auto;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;
  font-size:.74rem;color:var(--chrome-deep)}

/* ============ STICKY BUY BAR ============
   Hidden whenever a gold button is already on screen, so the manual's
   "only ever one gold button on screen at a time" holds literally. */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(5,5,7,.95);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  transform:translateY(105%);transition:transform .25s ease;pointer-events:none}
.buybar.show{transform:translateY(0);pointer-events:auto}
body.has-bar{padding-bottom:var(--bar)}
@media (min-width:760px){ .buybar{display:none} body.has-bar{padding-bottom:0} }

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}

/* ==========================================================
   SUBPAGES — Asian Cup and Galleries
   Same tokens, no new colours. Red belongs to the competition
   (manual §06: red is reserved for the competition entry).
   ========================================================== */

/* compact hero for pages with no key visual of their own */
.pagehero{position:relative;isolation:isolate;overflow:hidden;padding:46px 0 52px}
@media (min-width:760px){ .pagehero{padding:74px 0 84px} }
.pagehero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 130% at 50% 38%,#4A83D8 0%,#2F52A8 42%,#141A45 100%)}
.pagehero::after{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(95% 78% at 50% 36%,transparent 0%,rgba(5,5,7,.46) 58%,rgba(5,5,7,.88) 100%),
  linear-gradient(180deg,rgba(5,5,7,.55) 0%,transparent 22%,transparent 62%,var(--ink) 100%)}
/* the Cup page leans red — the competition's own colour */
.pagehero.cup::before{
  background:radial-gradient(120% 130% at 50% 38%,#D93B33 0%,#A92620 40%,#4A0F0B 100%)}
.pagehero.cup::after{background:
  radial-gradient(95% 78% at 50% 36%,transparent 0%,rgba(5,5,7,.5) 56%,rgba(5,5,7,.9) 100%),
  linear-gradient(180deg,rgba(5,5,7,.58) 0%,transparent 22%,transparent 60%,var(--ink) 100%)}
.pagehero .hero-in{position:relative}
.pagehero h1{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1;color:var(--chrome-hi);
  font-size:clamp(2rem,8.6vw,3.6rem)}
.pagehero h1[data-l="ja"]{font-family:var(--body);font-weight:700;font-style:normal;
  text-transform:none;letter-spacing:.01em;line-height:1.25;font-size:clamp(1.5rem,6.2vw,2.5rem)}
.pagehero .sub{margin:16px 0 0;color:var(--mist);font-size:1rem;max-width:56ch}
.pagehero .cta{display:flex;flex-direction:column;gap:10px;margin-top:28px}
@media (min-width:620px){ .pagehero .cta{flex-direction:row;flex-wrap:wrap}
  .pagehero .cta .btn{width:auto} }

/* breadcrumb back to the festival */
.crumb{display:inline-flex;align-items:center;gap:8px;min-height:40px;
  font-family:var(--display);font-weight:800;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--chrome-lo);margin-bottom:18px}
.crumb:hover{color:var(--chrome-hi)}

/* the qualifier road: four cities into one final */
.road-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:700px){ .road-list{grid-template-columns:repeat(4,1fr)} }
.road-city{background:var(--ink2);padding:20px 18px}
.road-city.here{background:var(--surface);box-shadow:inset 3px 0 0 var(--hinomaru)}
@media (min-width:700px){ .road-city.here{box-shadow:inset 0 3px 0 var(--hinomaru)} }
.road-city b{display:block;font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;color:var(--chrome-hi);
  margin-bottom:5px}
.road-city span{display:block;font-size:.8rem;color:var(--chrome-lo);line-height:1.5}
.road-city.here span{color:var(--mist)}

/* spots counter */
.spots{display:grid;gap:12px;margin:0}
@media (min-width:620px){ .spots{grid-template-columns:repeat(3,1fr);gap:14px} }
.spot{background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:20px 20px}
.spot b{display:block;font-family:var(--display);font-weight:900;font-style:italic;
  font-size:1.9rem;line-height:1;letter-spacing:-.02em;margin-bottom:8px;
  font-variant-numeric:tabular-nums;color:var(--chrome-hi)}
.spot.red b{color:var(--hinomaru-hi)}
.spot span{display:block;font-size:.82rem;color:var(--chrome-lo);line-height:1.5}

/* numbered how-it-works steps */
.steps{display:grid;gap:14px;counter-reset:step}
@media (min-width:860px){ .steps{grid-template-columns:repeat(2,1fr);gap:18px} }
.step{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:22px 20px;display:flex;gap:14px;align-items:flex-start}
.step .disc{width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:800;font-size:.64rem;color:var(--chrome-hi);
  line-height:1;padding-top:1px;margin-top:2px}
.step h3{font-size:1rem;font-weight:700;margin-bottom:6px;color:var(--chrome-hi)}
.step p{margin:0;font-size:.9rem;color:var(--chrome);line-height:1.65}

/* gallery link cards */
.albums{display:grid;gap:14px}
@media (min-width:760px){ .albums{grid-template-columns:repeat(2,1fr);gap:16px} }
.album{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:26px 22px;display:flex;flex-direction:column}
.album .yr{font-family:var(--display);font-weight:900;font-style:italic;font-size:2rem;
  line-height:1;letter-spacing:-.02em;margin-bottom:10px;
  background:linear-gradient(168deg,#F6F7F1 0%,#9FA29C 26%,#3A3D3B 48%,#C9CBC4 62%,#7D807B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.album h3{font-size:1.06rem;font-weight:700;margin-bottom:8px;color:var(--chrome-hi)}
.album p{margin:0 0 20px;font-size:.88rem;color:var(--chrome);line-height:1.65}
.album .btn{margin-top:auto}
.album.soon{opacity:.6}

/* plain prose block for the credit / usage note */
.prose{max-width:62ch;color:var(--chrome);font-size:.95rem}
.prose p{margin:0 0 14px}
.prose p:last-child{margin:0}

/* ==========================================================
   PRICE LADDER — the Fullpass tier calendar from the flyer.
   Exactly one rung is gold: the tier on sale (manual §06).
   ========================================================== */
.ladder{border:1px solid var(--line);border-radius:3px;background:var(--ink2);overflow:hidden}

/* Phone: date+badge stack on the left, dollars above yen on the right. */
.rung{display:grid;grid-template-columns:1fr auto;gap:3px 14px;padding:15px 16px;
      border-top:1px solid var(--line-soft);align-items:center}
.rung:first-child{border-top:0}
.rung .when{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:2px}
.rung .limit{grid-column:1;grid-row:2;justify-self:start}
.rung .usd {grid-column:2;grid-row:1;justify-self:end}
.rung .jpy {grid-column:2;grid-row:2;justify-self:end}
.rung .lead{display:none}

/* Desktop: one row, five columns. Every rung emits a badge cell — empty on the
   tiers with no cap — so the prices stay in a straight column. */
@media (min-width:700px){
  .rung{grid-template-columns:minmax(140px,auto) 1fr auto 56px 150px;
        gap:0 18px;padding:17px 22px}
  .rung .when,.rung .limit,.rung .usd,.rung .jpy{grid-column:auto;grid-row:1}
  .rung .lead{display:block;grid-column:auto;grid-row:1;
    border-bottom:1px dotted var(--line);height:1px;align-self:center}
  .rung .limit{justify-self:end}
  .rung .usd{text-align:right}
  .rung .jpy{text-align:right;justify-self:stretch}
}

.rung .when b{font-family:var(--display);font-weight:900;font-style:italic;
  font-size:1.15rem;letter-spacing:-.01em;color:var(--chrome-hi);line-height:1;white-space:nowrap}
.rung .when b span{color:var(--chrome-lo);font-size:.86em;margin-left:5px}
.rung .when em{font-family:var(--display);font-weight:800;font-style:normal;font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-lo)}
.rung.live .when em{color:var(--gold)}

.rung .limit span{font-family:var(--display);font-weight:800;font-size:.58rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--chrome-lo);
  border:1px solid var(--line);border-radius:2px;padding:4px 8px;display:inline-block;
  white-space:nowrap}
.rung.live .limit span{color:var(--ink);background:var(--gold);border-color:var(--gold)}

.rung .usd{font-family:var(--mono);font-size:.82rem;color:var(--chrome-lo);
  font-variant-numeric:tabular-nums}
.rung .jpy{font-family:var(--display);font-weight:900;font-style:italic;letter-spacing:-.02em;
  font-size:1.5rem;line-height:1;color:var(--chrome-hi);font-variant-numeric:tabular-nums;
  white-space:nowrap}
@media (min-width:700px){ .rung .jpy{font-size:1.7rem} }

.rung.live{background:linear-gradient(100deg,rgba(255,210,74,.10),transparent 62%);
  box-shadow:inset 0 0 0 1px var(--gold-lo)}
.rung.live .jpy{background:linear-gradient(178deg,#FFF6C9 0%,#FFD24A 42%,#EFA518 68%,#B9760C 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* the buy block that hangs under the ladder */
.buybox{margin-top:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:3px;padding:22px 20px}
@media (min-width:760px){ .buybox{display:flex;align-items:center;gap:24px;padding:24px 26px} }
.buybox .fee-note{margin:0 0 16px;flex:1}
@media (min-width:760px){ .buybox .fee-note{margin:0} }
.buybox .btn{width:100%}
@media (min-width:760px){ .buybox .btn{width:auto;flex:none} }

/* ==========================================================
   LEGAL DOCUMENT — terms & community policy
   Long-form reading: quiet ground, generous measure, the
   numeral in the margin so clauses are easy to cite.
   ========================================================== */
.doc-intro{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:22px 20px;margin-bottom:38px}
@media (min-width:760px){ .doc-intro{padding:26px 28px} }
.doc-intro .when{font-family:var(--display);font-weight:900;font-style:italic;
  text-transform:uppercase;letter-spacing:-.01em;font-size:1rem;color:var(--chrome-hi);
  margin:0 0 10px}
.doc-intro p{margin:0;color:var(--chrome);font-size:.95rem;line-height:1.75;max-width:70ch}

.doc-toc{background:var(--ink2);border:1px solid var(--line-soft);border-radius:3px;
  padding:20px 18px;margin-bottom:40px}
@media (min-width:760px){ .doc-toc{padding:24px 26px} }
.doc-toc h3{font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-lo);margin-bottom:14px}
.doc-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:1px 26px}
@media (min-width:620px){ .doc-toc ol{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .doc-toc ol{grid-template-columns:repeat(3,1fr)} }
.doc-toc li{display:flex;gap:10px;align-items:baseline;padding:5px 0}
.doc-toc li i{font-family:var(--mono);font-style:normal;font-size:.74rem;color:var(--hinomaru-hi);
  min-width:1.7em;flex:none;font-variant-numeric:tabular-nums}
.doc-toc a{color:var(--chrome);font-size:.88rem;line-height:1.5}
.doc-toc a:hover{color:var(--chrome-hi)}

.clauses{display:flex;flex-direction:column;gap:34px}
@media (min-width:760px){ .clauses{gap:40px} }
.clause{scroll-margin-top:76px}
@media (min-width:860px){
  .clause{display:grid;grid-template-columns:66px minmax(0,1fr);gap:0 24px}
}
.clause .n{font-family:var(--display);font-weight:900;font-style:italic;font-size:1.5rem;
  line-height:1;letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px var(--hinomaru);
  font-variant-numeric:tabular-nums;user-select:none;margin-bottom:8px}
@media (min-width:860px){ .clause .n{font-size:2rem;margin-bottom:0;padding-top:2px} }
.clause h3{font-size:1.06rem;font-weight:700;line-height:1.45;color:var(--chrome-hi);
  margin-bottom:12px}
.clause .body{max-width:68ch}
.clause p{margin:0 0 13px;color:var(--chrome);font-size:.95rem;line-height:1.8}
.clause p:last-child{margin:0}
.clause ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.clause ul li{position:relative;padding-left:20px;color:var(--chrome);font-size:.93rem;
  line-height:1.75}
.clause ul li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;
  border-radius:50%;background:var(--royal)}

.agree{margin-top:44px;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--hinomaru);border-radius:3px;padding:24px 22px}
@media (min-width:760px){ .agree{padding:26px 28px} }
.agree p{margin:0;font-size:1rem;font-weight:500;color:var(--chrome-hi);line-height:1.7}
.agree .eyebrow{display:block;margin-bottom:10px;color:var(--hinomaru-hi)}

/* ============ ARTIST CARDS (artists.html) ============
   Photos are optional: each card carries data-photo, and bmj.js swaps the
   monogram plate for images/artists/<slug>.jpg the moment that file exists.
   The page is designed to look finished with no photos at all. */
/* Each card draws its own hairline, so a part-full last row leaves plain ink
   rather than lit empty cells — the grid works at any artist count. */
.cards{display:grid;gap:1px;grid-template-columns:repeat(2,1fr);padding:1px}
@media (min-width:700px){ .cards{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1040px){ .cards{grid-template-columns:repeat(4,1fr)} }
.card{background:var(--ink);box-shadow:0 0 0 1px var(--line-soft);
  padding:16px 14px 18px;display:flex;
  flex-direction:column;align-items:center;text-align:center;gap:8px}
.card h3{margin-top:3px}
@media (min-width:700px){ .card{padding:22px 18px 24px} }
.card .pic{width:100%;aspect-ratio:1;border-radius:50%;max-width:150px;
  background:radial-gradient(circle at 38% 30%,var(--surface2) 0%,var(--surface) 60%,var(--ink2) 100%);
  border:1px solid var(--line);display:grid;place-items:center;overflow:hidden}
.card .pic span{font-family:var(--display);font-weight:900;font-style:italic;
  font-size:clamp(1.2rem,6vw,1.7rem);letter-spacing:-.02em;
  background:linear-gradient(168deg,#F6F7F1 0%,#9FA29C 26%,#3A3D3B 48%,#C9CBC4 62%,#7D807B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.card .pic img{width:100%;height:100%;object-fit:cover;
  filter:saturate(.92) contrast(1.04) hue-rotate(-4deg)}
.card h3{font-family:var(--display);font-weight:900;font-style:italic;
  font-size:.92rem;line-height:1.25;letter-spacing:-.01em;text-transform:uppercase;
  color:var(--chrome-hi)}
@media (min-width:700px){ .card h3{font-size:1rem} }
/* Style sits under the name in chrome, then the flag and country in the
   quietest grey — name first, discipline second, origin last. */
.card .style{margin:0;font-size:.76rem;line-height:1.4;color:var(--mist);opacity:.9}
.card .style[data-l="ja"], .card .style span[data-l="ja"]{font-size:.74rem}
.card .meta{margin:0;display:flex;align-items:center;justify-content:center;
  gap:6px;line-height:1.3}
.card .flags{font-size:1rem;letter-spacing:.08em}
.card .cty{font-family:var(--display);font-weight:800;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--chrome-lo)}
.card .cty[data-l="ja"]{font-family:var(--body);font-weight:700;letter-spacing:.06em;
  font-size:.68rem;text-transform:none}

/* "announced soon" panel */
.soon-note{display:flex;gap:13px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:3px;padding:20px 18px}
.soon-note > .disc{width:9px;height:9px;margin-top:8px}
.soon-note p{margin:0 0 16px;color:var(--chrome);font-size:.93rem}

/* ============ HOTELS PAGE EXTRAS ============ */
.hotel.big{max-width:720px}
.hotel .feats{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.hotel .feats li{position:relative;padding-left:19px;font-size:.88rem;
  line-height:1.6;color:var(--chrome)}
.hotel .feats li::before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#D93B33 0%,#A92620 46%,#6B1610 100%)}

.mapcard{background:var(--surface);border:1px solid var(--line);
  border-radius:3px;padding:20px 18px}
@media (min-width:700px){ .mapcard{padding:26px 24px} }
.mapmark{display:flex;gap:13px;align-items:flex-start;margin-bottom:20px}
.mapmark > .disc{width:10px;height:10px;margin-top:7px;flex:none}
.mapmark b{display:block;font-family:var(--display);font-weight:800;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-hi);margin-bottom:7px}
.mapmark p{margin:0;font-size:.9rem;line-height:1.65;color:var(--chrome)}


/* ============ TERMS BRIEF (home page, last section) ============ */
.terms-brief{display:grid;gap:1px;padding:1px}
@media (min-width:820px){ .terms-brief{grid-template-columns:repeat(3,1fr)} }
.tb{display:flex;gap:12px;align-items:flex-start;background:var(--ink);
  box-shadow:0 0 0 1px var(--line-soft);padding:18px 17px}
.tb > .disc{width:8px;height:8px;margin-top:8px}
.tb h3{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--chrome-hi);margin-bottom:7px}
.tb h3[data-l="ja"]{font-family:var(--body);font-weight:700;font-size:.86rem;
  letter-spacing:.02em;text-transform:none}
.tb p{margin:0;font-size:.86rem;line-height:1.65;color:var(--chrome-lo)}


/* ============ VIDEO EMBED ============
   Google Drive's player letterboxes inside whatever box it is given, so a
   16:9 frame is safe for any source aspect. The fallback link sits under the
   iframe and only shows if the frame never paints. */
.vid{margin:26px 0 0}
.vid-frame{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  background:linear-gradient(160deg,var(--surface2) 0%,var(--ink2) 100%);
  box-shadow:0 0 0 1px var(--line),0 26px 60px -30px rgba(5,5,7,.95)}
.vid-fallback{position:absolute;inset:0;z-index:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  text-align:center;padding:22px;color:var(--mist);cursor:pointer;
  transition:background .18s}
.vid-fallback:hover{background:rgba(74,131,216,.07)}
.vid-cta{font-family:var(--display);font-weight:800;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase}
.vid-cta[data-l="ja"]{font-family:var(--body);font-weight:700;
  letter-spacing:.04em;text-transform:none;font-size:.9rem}
.vid-host{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  color:var(--chrome-deep)}
.vid-play{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#D93B33 0%,#A92620 46%,#6B1610 100%);
  color:var(--chrome-hi);font-size:1.15rem;padding-left:5px;
  box-shadow:0 0 0 1px rgba(217,59,51,.65),0 14px 34px -14px rgba(169,38,32,.85);
  transition:transform .18s}
.vid-fallback:hover .vid-play{transform:scale(1.06)}
/* only exists once someone has pressed play */
.vid-frame iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0}
.vid-frame.playing .vid-fallback{opacity:0;pointer-events:none}
.vid figcaption{margin-top:11px;font-size:.84rem;line-height:1.6;color:var(--chrome-lo)}


/* ============ SOCIAL HOURS (venue card) ============ */
.hours{margin:22px 0 24px;padding:16px 0 0;border-top:1px solid var(--line-soft)}
.hours-l{display:block;margin-bottom:12px;color:var(--chrome-lo)}
.hours dl{margin:0;display:grid;gap:1px;background:var(--line-soft);
  border:1px solid var(--line-soft);border-radius:3px;overflow:hidden}
@media (min-width:620px){ .hours dl{grid-template-columns:repeat(3,1fr)} }
.hours dl > div{background:var(--ink);display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;padding:12px 15px}
@media (min-width:620px){
  .hours dl > div{flex-direction:column;justify-content:flex-start;gap:6px;padding:14px 16px}
}
.hours dt{margin:0;font-family:var(--display);font-weight:800;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-lo)}
.hours dt[data-l="ja"]{font-family:var(--body);font-weight:700;font-size:.78rem;
  letter-spacing:.04em;text-transform:none}
.hours dd{margin:0;font-family:var(--mono);font-size:.92rem;
  font-variant-numeric:tabular-nums;color:var(--mist)}
.hours dd[data-l="ja"]{font-family:var(--body);font-weight:700;font-size:.9rem}


/* venue shots sit above the venue card — two wide frames, stacked on phones */
.venue-shots{margin-bottom:26px}
.venue-shots figure{aspect-ratio:3/2}
@media (min-width:720px){ .venue-shots{grid-template-columns:repeat(2,1fr);gap:12px} }


/* A card photo that is a full 1920x1080 banner rather than a square crop.
   These percentages reproduce exactly the crop used on the other cards
   (source box x 587..1332, y 35..780), so the head sits in the same place
   and the festival lockup along the bottom stays outside the circle.
     width  = 1920/745 = 257.7%   left = -587/745 = -78.8%
     height auto keeps aspect     top  =  -35/745 =  -4.7%   */
.card .pic.banner{position:relative}
.card .pic.banner img{position:absolute;max-width:none;width:257.7%;height:auto;
  left:-78.8%;top:-4.7%}


/* A tier that has sold out. Dimmed and struck through so the ladder still
   shows the price history — proof the early tiers were real and did go —
   without anyone mistaking it for something they can still buy. */
.rung.gone{opacity:.55}
.rung.gone .jpy,.rung.gone .usd{text-decoration:line-through;
  text-decoration-thickness:1px;color:var(--chrome-lo)}
.rung.gone .when b{color:var(--chrome-lo)}
.rung.gone .when em{color:var(--chrome-deep)}
.rung.gone .limit span{color:var(--chrome-lo);background:transparent;
  border-color:var(--line);letter-spacing:.1em}