/* ============== Base ============== */
:root{
  --bg:#ffffff;
  --text:#0b0f10;
  --muted:#60686d;
  --line:#e6ecec;
  --accent:#0ea5a4;
  --accent-ink:#073e3e;
  --surface:#f6fbfb;
  --focus:#efb307;
  --radius:12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --container: 1160px;
  --step--1: clamp(12px, .78rem + .1vw, 14px);
  --step-0: clamp(14px, .9rem + .2vw, 16px);
  --step-1: clamp(18px, 1.1rem + .3vw, 22px);
  --step-2: clamp(22px, 1.4rem + .5vw, 28px);
  --step-3: clamp(28px, 1.7rem + .8vw, 36px);
  --step-4: clamp(36px, 2.1rem + 1.2vw, 48px);
  --header-h: 64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-size:var(--step-0);
  line-height:1.7;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-2)}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.container{max-width:var(--container);margin-inline:auto;padding:0 20px}
.section{padding:64px 0}
.section--soft{background:var(--surface)}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}
.more-link{font-weight:600}

.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{left:20px;top:20px;width:auto;height:auto;background:#fff;border:2px solid var(--accent);padding:.5rem 1rem;border-radius:8px;z-index:1000}

.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============== Header ============== */
.site-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);z-index:2000;
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  padding-top: env(safe-area-inset-top, 0px);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:calc(var(--header-h) + env(safe-area-inset-top, 0px))}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.brand-text{font-weight:800;letter-spacing:.2px;white-space:nowrap}
@media (max-width: 360px){ .brand-text{display:none} }
.brand--footer .brand-text{font-weight:700}
.brand-mark{border-radius:8px}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.header-cta{display:none;padding:.55rem .8rem;font-size:var(--step--1)}
@media (max-width:880px){
  .header-cta{display:inline-flex}
}

/* Mobile nav (no-peek) */
.site-nav{ /* default: fully hidden */
  position:fixed; left:0; right:0;
  top:calc(var(--header-h) + env(safe-area-inset-top, 0px));
  background:#fff; border-bottom:1px solid var(--line);
  padding:12px 20px;
  transform:translateY(-100%);
  opacity:0; visibility:hidden; pointer-events:none; overflow:hidden;
  z-index:-1;
  transition:
    transform .22s ease,
    opacity .18s ease,
    visibility 0s linear .22s,
    z-index 0s linear .22s;
}
.site-nav.open{
  transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;
  z-index:3000; /* above header */
  transition:
    transform .22s ease,
    opacity .18s ease;
  max-height: calc(100vh - var(--header-h) - env(safe-area-inset-top, 0px));
  overflow:auto; box-shadow:var(--shadow);
}

.site-nav ul{display:flex;gap:16px;align-items:center}
.site-nav a{padding:8px 10px;border-radius:8px}
.site-nav .btn{padding:10px 14px}

.nav-toggle{display:none;position:relative;border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px}
.nav-toggle .bar{display:block;width:20px;height:2px;background:#222;margin:4px 0;border-radius:1px}

@media (max-width: 880px){
  .nav-toggle{display:inline-block}
  .site-nav ul{flex-direction:column;align-items:stretch}
  .site-nav .nav-cta{display:none} /* avoid duplicate primary button in mobile sheet */
}

/* ============== Buttons ============== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{text-decoration:none;filter:brightness(.98)}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff;border-color:transparent}
.btn-ghost{background:transparent;box-shadow:none}

/* ============== Hero ============== */
.hero{padding:56px 0 40px;background:linear-gradient(180deg, #f4ffff 0, transparent 70%)}
.hero-grid{display:grid;grid-template-columns: 1.15fr .85fr;gap:30px;align-items:center}
.hero-copy p{color:var(--muted)}
.br-lg{display:none}
@media (min-width: 980px){.br-lg{display:inline}}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.hero-media{aspect-ratio: 16/11}
.hero-media img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}

/* ============== Cards ============== */
.card-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{grid-column: span 12;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card-link{display:grid;grid-template-columns: 1fr; color:inherit}
.card-media{aspect-ratio: 16/10; width:100%; object-fit:cover;background:#eaf5f5}
.card-body{padding:16px}
.card-title{margin:.1em 0 .3em}
.eyebrow{font-size:var(--step--1);color:var(--muted);margin-bottom:6px}
.tags{display:flex;gap:8px;color:var(--muted);font-size:var(--step--1)}

@media(min-width:680px){
  .card{grid-column: span 6}
}
@media(min-width:980px){
  .card{grid-column: span 4}
}

/* ============== Events section ============== */
.events .card-text{color:var(--muted)}

/* ============== Page head ============== */
.page-head{margin-bottom:20px}
.page-lead{color:var(--muted)}

/* ============== Filters ============== */
.filters{display:grid;gap:12px;margin:20px 0 24px}
.filters input[type="search"]{
  border:1px solid var(--line);padding:.8rem 1rem;border-radius:12px;box-shadow:var(--shadow);width:100%
}
.filter-pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .8rem;cursor:pointer}
.pill--reset{border-style:dashed}

/* ============== Event detail ============== */
.breadcrumb{font-size:var(--step--1);margin-bottom:8px}
.breadcrumb ol{display:flex;gap:8px;flex-wrap:wrap}
.breadcrumb a{color:var(--muted)}

.event-head{display:grid;gap:20px;margin-bottom:16px}
.event-meta .sub{color:var(--muted)}
.event-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.event-cover img{border-radius:var(--radius);box-shadow:var(--shadow)}

.event-body{display:grid;grid-template-columns: 1.4fr .8fr;gap:28px;margin-top:24px}
.event-main section{margin:24px 0}
.def{display:grid;grid-template-columns: 5.5rem 1fr;gap:4px 12px;margin:0}
.def dt{color:var(--muted)}
.map-embed iframe{width:100%;height:220px;border-radius:12px}
.notice{margin-top:16px}

.ticket-table{display:grid;gap:12px}
.ticket{display:grid;grid-template-columns: 1.2fr .8fr .6fr;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff;box-shadow:var(--shadow)}

.related{margin-top:36px}

@media (max-width: 980px){
  .event-body{grid-template-columns: 1fr}
}

/* ============== CTA section ============== */
.cta-section{background:linear-gradient(180deg, #f8fefe 0, #ffffff 70%)}
.cta-grid{display:grid;grid-template-columns: 1fr;gap:8px}

/* ============== Footer ============== */
.site-footer{border-top:1px solid var(--line);padding-top:36px}
.footer-grid{display:grid;grid-template-columns: repeat(12,1fr);gap:20px}
.footer-grid > *{grid-column: span 12}
.brand--footer{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.social{display:flex;gap:12px;color:var(--muted);padding:0}
.foot-links{display:grid;gap:6px;padding:0}
.foot-note{color:var(--muted);margin-bottom:12px}
.foot-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:14px 0;margin-top:14px}

@media(min-width:720px){
  .footer-grid > *:nth-child(1){grid-column: span 5}
  .footer-grid > *:nth-child(2){grid-column: span 3}
  .footer-grid > *:nth-child(3){grid-column: span 4}
}

/* ============== Forms ============== */
input[type="email"], input[type="search"]{
  font:inherit;border-radius:10px;border:1px solid var(--line);padding:.7rem 1rem;background:#fff;box-shadow:var(--shadow)
}
form .form-hint{color:var(--muted);font-size:var(--step--1);margin-top:6px}
form .form-result{font-weight:600;margin-top:8px}
.newsletter.big{display:flex;gap:8px;flex-wrap:wrap}
.newsletter.big input{flex:1;min-width:220px}

/* ============== Prose ============== */
.narrow{max-width: 780px}
.prose h2{margin-top:1.4em}
.prose h3{margin-top:1.2em}
.prose p + p{margin-top:.8em}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;margin:.6rem 0}

/* Focus ring for all */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}


/* --- Breadcrumb: remove list numbering & add separator, prevent overlap/wrap nicely --- */
.breadcrumb{font-size:var(--step--1);margin:.5rem 0 8px;line-height:1.6;overflow-wrap:anywhere}
.breadcrumb ol{display:flex;gap:.2rem .4rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.breadcrumb li{display:inline-flex;align-items:center;margin:0;padding:0;list-style:none}
.breadcrumb li+li::before{content:"›";margin:0 .4rem;color:var(--muted);opacity:.8}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}