:root{
    --navy: #001A60;
    --navy-deep: #000f3d;
    --navy-rgb: 0,26,96;
    --paper: #f6f4ee;
    --white: #fafaf7;
    --ink-soft: rgba(250,250,247,0.72);
    --ink-faint: rgba(250,250,247,0.46);
    --line: rgba(250,250,247,0.16);
    --line-strong: rgba(250,250,247,0.34);
    --dot: rgba(250,250,247,0.5);
    --mono: 'IBM Plex Mono', 'Noto Sans Mono', monospace;
    --sans: 'Noto Sans', system-ui, -apple-system, sans-serif;
    --gap-section: clamp(72px, 12vw, 160px);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--navy);
    color:var(--white);
    font-family:var(--sans);
    font-weight:400;
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }
  ::selection{ background:var(--white); color:var(--navy); }

  :focus-visible{
    outline:2px solid var(--white);
    outline-offset:3px;
  }

  .wrap{
    max-width:1040px;
    margin:0 auto;
    padding-left:clamp(20px, 5vw, 56px);
    padding-right:clamp(20px, 5vw, 56px);
  }

  /* ---------- dot-leader rule system (signature motif, echoes the logo's dot grid) ---------- */
  .dot-rule{
    background-image: radial-gradient(circle, var(--dot) 1.6px, transparent 1.7px);
    background-size: 11px 11px;
    background-repeat: repeat-x;
    background-position: left center;
    height: 2px;
  }

  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:40;
    background:rgba(var(--navy-rgb),0.86);
    backdrop-filter: blur(10px) saturate(140%);
    border-bottom:1px solid var(--line);
  }
  header .bar{
    display:flex; align-items:center; justify-content:space-between;
    padding-top:26px; padding-bottom:26px;
  }
  .brand{ display:flex; align-items:center; gap:16px; text-decoration:none; }
  .brand img{ width:auto; height:28px; }
  .brand-text{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.14em;
    color:var(--ink-soft);
    line-height:1.4;
    white-space:nowrap;
  }
  .brand-text b{ color:var(--white); font-weight:600; }

  .btn{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.08em;
    text-decoration:none;
    color:var(--navy);
    background:var(--white);
    padding:11px 20px;
    border-radius:2px;
    border:1px solid var(--white);
    display:inline-flex;
    align-items:center;
    gap:8px;
    transition:background .18s ease, color .18s ease, transform .18s ease;
    cursor:pointer;
  }
  .btn:hover{ background:transparent; border-color:var(--white); color:var(--white); }
  .btn:active{ transform:translateY(1px); }
  .btn-ghost{
    background:transparent; color:var(--white); border-color:var(--line);
  }
  .btn-ghost:hover{ background:var(--white); color:var(--navy); border-color:var(--white); }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding-top:clamp(64px, 11vw, 120px);
    padding-bottom:clamp(40px, 6vw, 64px);
    overflow:hidden;
    text-align:center;
  }
  .hero-inner{ position:relative; }
  .hero .logo-main{
    width:min(560px, 80%);
    height:auto;
    margin:0 auto 60px;
  }
  .hero p.lead{
    font-size:clamp(15px, 2vw, 17px);
    color:var(--ink-soft);
    max-width:34em;
    margin:0 auto 8px;
    letter-spacing:0.01em;
  }
  .hero .en-name{
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.16em;
    color:var(--ink-faint);
    margin:0 0 32px;
  }

  .meta-block{
    margin-top:36px;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    max-width:760px;
    margin-left:auto; margin-right:auto;
  }
  .meta-row{
    display:flex; flex-wrap:wrap; justify-content:center;
    gap:0;
  }
  .meta-row + .meta-row{ border-top:1px solid var(--line); }
  .meta-item{
    flex:1 1 200px;
    padding:22px 18px;
    border-right:1px solid var(--line);
  }
  .meta-item:last-child{ border-right:none; }
  .meta-item .k{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.16em;
    color:var(--ink-faint);
    text-transform:uppercase;
    margin-bottom:9px;
  }
  .meta-item .v{
    font-family:var(--mono);
    font-size:clamp(17px,2.4vw,20px);
    font-weight:500;
    color:var(--white);
    letter-spacing:0.01em;
  }
  .meta-item .v.v-prose{
    font-family:var(--sans);
    font-size:15px;
    font-weight:500;
    line-height:1.5;
    letter-spacing:0;
  }
  .venue-line{
    margin:8px 0 0;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.02em;
    color:var(--ink-faint);
    line-height:1.6;
  }

  /* ---------- section shell ---------- */
  section{ padding-top:var(--gap-section); padding-bottom:clamp(40px, 6vw, 64px); }
  section.bordered{ border-top:1px solid var(--line); }
  section.no-top-line{ border-top:none; }
  .section-head{ max-width:760px; margin:0 auto 44px; }
  h2{
    font-family:var(--sans);
    font-size:clamp(22px, 3vw, 28px);
    font-weight:500;
    margin:0;
    letter-spacing:0.01em;
    line-height:1.4;
  }
  /* dot-matrix section titles: 7-row grids, sized by height so all three share one letter size */
  h2 .title-img{
    display:block;
    height:clamp(24px, 4vw, 34px);
    width:auto;
  }
  .subscribe h2 .title-img{ margin-left:auto; margin-right:auto; }

  /* ---------- message ---------- */
  .message{
    max-width:760px;
    margin:0 auto;
  }
  .message .body p{
    margin:0 0 20px;
    color:var(--ink-soft);
    font-size:15.5px;
  }
  .message .body p:last-child{ margin-bottom:0; }
  .sign{
    max-width:760px;
    margin:28px auto 0;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    line-height:1.85;
    color:var(--ink-faint);
  }
  .sign b{ color:var(--white); display:block; margin-bottom:4px; font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0.01em;}

  /* ---------- important dates ---------- */
  .dates{ max-width:760px; margin:0 auto; }

  /* ---------- venue map ---------- */
  .map-frame{
    position:relative;
    max-width:760px;
    margin:0 auto;
    aspect-ratio: 16 / 7;
    background:var(--navy-deep);
  }
  .map-frame .map{ width:100%; height:100%; background:var(--navy-deep); }
  .map-frame .map-fallback{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.06em;
    color:var(--ink-soft);
    text-decoration:none;
  }
  .map-frame .map-fallback:hover{ color:var(--white); }
  .map-frame.is-live .map-fallback{ display:none; }
  .map-frame.is-failed .map{ display:none; }   /* hide Google's error overlay, show the link */
  @media (max-width: 640px){
    .map-frame{ aspect-ratio: 4 / 5; }
  }
  .date-row{
    display:flex; align-items:baseline; gap:14px;
    padding:20px 0;
    border-bottom:1px solid var(--line);
  }
  .date-row:first-of-type{ border-top:1px solid var(--line); }
  .date-row .label{
    flex:none;
    max-width:320px;
  }
  .date-row .label .ja{ font-size:15px; color:var(--white); font-weight:500; }
  .date-row .label .en{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.08em;
    color:var(--ink-faint);
    margin-top:4px;
  }
  .date-row .leader{ flex:1 1 auto; min-width:24px; align-self:center; }
  .date-row .val{
    flex:none;
    font-family:var(--mono);
    font-size:clamp(15px,2vw,17px);
    font-weight:500;
    color:var(--white);
    white-space:nowrap;
  }
  .date-row.tbd .val{ color:var(--ink-faint); font-style:normal; }

  /* ---------- subscribe ---------- */
  .subscribe{
    text-align:center;
    padding-top:var(--gap-section);
    padding-bottom:clamp(56px, 9vw, 100px);
  }
  .subscribe h2{ margin-bottom:14px; }
  .subscribe p{
    color:var(--ink-soft);
    max-width:34em;
    margin:0 auto 36px;
    font-size:15px;
  }
  .sub-btn{
    display:inline-block;
    font-family:var(--mono);
    font-size:12.5px;
    letter-spacing:0.08em;
    color:var(--navy);
    background:var(--white);
    border-radius:2px;
    padding:16px 34px;
    text-decoration:none;
    transition:background .18s ease;
  }
  .sub-btn:hover{ background:rgba(250,250,247,0.82); }
  button.sub-btn{ border:0; cursor:pointer; line-height:normal; }
  .sub-btn[disabled]{ opacity:0.6; cursor:default; }
  .sub-form{
    display:flex;
    gap:10px;
    justify-content:center;
    max-width:520px;
    margin:0 auto;
  }
  .sub-input{
    flex:1 1 auto;
    min-width:0;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:0.02em;
    color:var(--white);
    background:transparent;
    border:1px solid var(--line-strong);
    border-radius:2px;
    padding:15px 16px;
  }
  .sub-input::placeholder{ color:var(--ink-faint); }
  .sub-input:focus{ outline:none; border-color:var(--white); }
  .sub-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
  .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .subscribe .sub-status{
    min-height:1.85em;
    margin:18px auto 0;
    font-family:var(--mono);
    font-size:12px;
    line-height:1.85;
    letter-spacing:0.04em;
    color:var(--ink-soft);
  }
  /* the instruction has to be read to finish signing up, so it stays legible;
     the fine print below it may recede */
  .subscribe .sub-note{
    margin:12px auto 0;
    max-width:48em;
    font-family:var(--mono);
    font-size:11px;
    line-height:1.8;
    letter-spacing:0.04em;
    color:var(--ink-faint);
  }

  /* ---------- confirmation page (/confirm/) ---------- */
  body.confirm-page{ min-height:100vh; display:flex; flex-direction:column; }
  .confirm{
    flex:1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:64px 24px;
  }
  .confirm-mark{ display:block; width:min(292px, 86vw); height:auto; margin:0 0 30px; }
  .confirm-msg{ max-width:34em; font-size:17px; line-height:1.7; margin:0 0 32px; }
  .confirm .sub-btn{ padding:14px 30px; }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    padding-top:76px;
    padding-bottom:76px;
  }
  footer .foot-inner{
    display:flex; flex-direction:column; align-items:center; gap:32px;
    text-align:center;
  }
  footer img.logo-short{ width:auto; height:46px; opacity:0.72; }
  footer .copy{
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:0.05em;
    color:var(--ink-faint);
    line-height:1.9;
  }

  /* ---------- reveal on scroll ---------- */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  @media (max-width: 640px){
    .date-row{ flex-wrap:wrap; }
    .date-row .leader{ display:none; }
    .date-row .val{ margin-left:auto; }
    .brand-text{ display:none; }
    .sub-form{ flex-direction:column; }
  }