/* ============================================================
   Wedding site — "Classic Serif Elegance" (design-claude-classic-serif)
   Palette: ivory whites · deep and soft greens · pale blues
   Principle: practical first, personal second
   ============================================================ */

:root{
  --ivory:      #FBFAF6;   /* page background */
  --ivory-2:    #F4F2EA;   /* alternate section wash */
  --ink:        #2F3B33;   /* deep green-charcoal text */
  --ink-soft:   #5C6B60;   /* secondary text */
  --green:      #5A7263;   /* primary accent */
  --green-deep: #33443A;   /* dark band */
  --sage:       #9AAC9F;   /* soft accent, hairlines on dark */
  --blue:       #B9CEDA;   /* pale blue accent */
  --blue-wash:  #E4EDF2;   /* pale blue background wash */
  --forest:     #4A6741;   /* RSVP "attending" selected pill */
  --terracotta: #8A5744;   /* RSVP "unable to attend" selected pill */
  --hairline:   #DDD9CC;   /* fine rules */
  --vermillion: #B54A2E;   /* the torii gate, quietened for print — Back to Japan page */
  --serif: "Cormorant Garamond", Garamond, Georgia, serif;
  --sans:  "Jost", "Segoe UI", system-ui, sans-serif;
  --jp:    "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none !important; }
}

body{
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- shared utilities ---------- */

.wrap{ max-width:960px; margin:0 auto; padding:0 24px; }
.narrow{ max-width:680px; }

.kicker{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--green);
  font-weight:400;
}

h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(34px, 5vw, 46px);
  line-height:1.15;
  margin:14px 0 10px;
}

.rule{
  width:56px; height:1px;
  background:var(--green);
  margin:22px auto;
  position:relative;
}
.rule::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:5px; height:5px;
  background:var(--blue);
  border-radius:50%;
  transform:translate(-50%,-50%);
}

.section-head{ text-align:center; margin-bottom:52px; }
.section-head p.lede{ color:var(--ink-soft); max-width:520px; margin:0 auto; }

section{ padding:96px 0; }

/* The sticky nav sits over whatever an anchor link lands on — hold the
   section's heading clear of it. */
section[id], header[id]{ scroll-margin-top:76px; }

/* Phones: the same rhythm at three quarters of the height. Seven sections
   of 96px top and bottom is most of a screen's worth of empty page. */
@media (max-width:720px){
  section{ padding:64px 0; }
  section[id]{ scroll-margin-top:104px; }  /* the stacked mobile nav is taller */
  .section-head{ margin-bottom:34px; }
}

/* subtle scroll-reveal */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* image placeholder boxes */
.ph{
  border:1px dashed var(--sage);
  background:
    linear-gradient(135deg, rgba(185,206,218,.18), rgba(154,172,159,.14));
  display:grid; place-items:center;
  color:var(--ink-soft);
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  text-align:center; padding:12px;
}

/* ---------- sticky navigation ---------- */

nav.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav-inner{
  max-width:960px; margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.nav-mono{
  font-family:var(--serif); font-size:20px; letter-spacing:.08em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav-mono em{ font-style:italic; color:var(--green); }
.nav-links{
  display:flex; align-items:center; gap:26px;
  list-style:none;
  flex-wrap:wrap; justify-content:center;
}
.nav-links a{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-links a:hover{ color:var(--green); border-color:var(--green); }
.nav-links a.active{ color:var(--green); border-color:var(--green); }
.nav-links a.rsvp-pill{
  color:var(--ivory); background:var(--green);
  padding:9px 20px; border-radius:999px; border:none;
}
.nav-links a.rsvp-pill:hover{ background:var(--green-deep); color:var(--ivory); }
.nav-links a.rsvp-pill.active{ background:var(--green-deep); color:var(--ivory); }

@media (max-width:720px){
  .nav-inner{ flex-direction:column; gap:8px; padding:10px 12px; }
  /* keep all five links on one row: tighter type and gaps, no wrapping */
  .nav-links{ gap:clamp(8px, 2.6vw, 16px); width:100%; justify-content:center; flex-wrap:nowrap; }
  .nav-links a{ font-size:10px; letter-spacing:.12em; }
  .nav-links a.rsvp-pill{ padding:7px 14px; }
}
@media (max-width:360px){
  .nav-links a{ letter-spacing:.06em; }
  .nav-links a.rsvp-pill{ padding:7px 11px; }
}

/* ---------- hero ---------- */

header.hero{
  min-height:calc(100vh - 64px);
  min-height:calc(100svh - 64px);
  display:grid; place-items:center;
  text-align:center;
  padding:72px 24px 120px; /* bottom reserves clear space for the scroll hint */
  position:relative;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(185,206,218,.28), transparent 60%),
    var(--ivory);
}
@media (max-width:720px){
  /* the stacked logo + links nav is ~92px tall here; subtract it (and use
     svh, which excludes the browser chrome) or the centred hero gains a
     large empty band at the top */
  header.hero{
    min-height:calc(100vh - 110px);
    min-height:calc(100svh - 110px);
    padding:40px 20px 120px;
  }
}
.hero-salutation{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px, 2.4vw, 22px);
  color:var(--ink-soft);
  margin-bottom:20px;
}
/* One-time entrance after passing the gate (.hero-arrive via ?welcome=1):
   the rest of the hero matches the gate page, so only the guests' name —
   the one new thing — makes an entrance. */
.hero-arrive .hero-salutation{
  animation:salute 1.3s ease-out .3s both;
}
@keyframes salute{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-arrive .hero-salutation{ animation:none; }
}
.hero-date{
  font-size:13px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--green); font-weight:400;
  margin-top:26px;
}
h1{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(56px, 11vw, 118px);
  line-height:1.02; margin:26px 0 8px;
}
h1 .amp{
  display:block;
  font-style:italic; font-weight:300;
  font-size:.42em; line-height:1.3;
  color:var(--blue);
  filter:saturate(1.4) brightness(.82);
}
.hero-venue{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(19px, 2.6vw, 24px);
  color:var(--ink-soft);
  margin-top:14px;
}
.hero-cta{ margin-top:38px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn{
  display:inline-block;
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.28em; text-transform:uppercase;
  text-decoration:none;
  padding:15px 36px;
  border-radius:999px;
  transition:all .25s;
  cursor:pointer;
}
.btn-solid{ background:var(--green); color:var(--ivory); border:1px solid var(--green); }
.btn-solid:hover{ background:var(--green-deep); border-color:var(--green-deep); }
.btn-ghost{ background:transparent; color:var(--green); border:1px solid var(--sage); }
.btn-ghost:hover{ border-color:var(--green); }

.hero-count{
  margin-top:30px;
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink-soft);
}
.hero-count strong{ color:var(--green); font-weight:500; }

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none;
}
.scroll-hint::after{
  content:"↓"; display:block; text-align:center; margin-top:6px;
  animation:drift 2.2s ease-in-out infinite;
}
@keyframes drift{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
@media (prefers-reduced-motion: reduce){ .scroll-hint::after{ animation:none; } }

/* ---------- welcome strip (framed photo + short note) ---------- */

.welcome{
  background:var(--ivory-2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
/* framed print: contained rather than full bleed — no fade, a thin
   keyline, and the caption doing the storytelling */
.welcome-frame{
  /* a touch wider than the 680px text column so the photo still reads
     as a feature, but close enough to sit with the copy */
  max-width:800px; margin:0 auto; padding:0 24px;
}
.welcome-photo{
  /* 1.5:1 (close to the source ratio) so the crop keeps both faces and
     the engagement ring in the lower gesture — a wider frame drops the
     ring, which the "newly engaged" caption depends on */
  aspect-ratio:1.5/1;
  overflow:hidden;
  border:1px solid var(--hairline);
}
.welcome-photo img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:50% 30%;
  filter:brightness(1.12) saturate(.94);
}
.welcome-caption{
  text-align:center; margin-top:14px;
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink-soft);
}
.welcome-copy{ text-align:center; margin-top:34px; }
.welcome-copy p{ color:var(--ink-soft); margin-bottom:1em; }
.welcome-copy p.first{
  font-family:var(--serif); font-size:23px; font-style:italic;
  color:var(--ink); line-height:1.5;
}
@media (max-width:760px){
  .welcome-copy{ margin-top:28px; }
}

/* ---------- the day / timeline ----------
   Each entry is its own details/summary (the FAQ idiom, laid out as a
   timeline row) so guests open one description at a time. Times and
   headings are never hidden: that skeleton is what a guest checks on the
   morning itself, and it must not cost a tap. The closed row and the open
   one share a header layout — an entry that re-flowed as it opened would
   throw the reader's eye off the line they just tapped. */

.timeline{ max-width:620px; margin:0 auto; position:relative; }
.timeline::before{
  content:"";
  position:absolute; left:110px; top:8px; bottom:8px;
  width:1px; background:var(--hairline);
}
/* The entry itself stays a block and the SUMMARY carries the timeline grid:
   Chrome wraps a details' non-summary children in a ::details-content box,
   so a grid on .t-item can't place .t-detail in a column of its own — the
   description is aligned with padding instead (see .t-detail below). */
.t-item{ margin-bottom:26px; }
.t-item:last-child{ margin-bottom:0; }
/* The whole row is the control. Most of this undoes the FAQ-tuned global
   summary rule (a serif 21px flex row with padding of its own). Baseline
   alignment: the larger serif time sits low against the caps heading under
   starts-align. */
.t-item > summary{
  display:grid; grid-template-columns:88px 44px 1fr;
  align-items:baseline; gap:0;
  padding:0; font:inherit;
  list-style:none; cursor:pointer;
}
.t-item > summary::-webkit-details-marker{ display:none; }
/* the global summary:hover greens the whole row, times included */
.t-item > summary:hover{ color:inherit; }
.t-item > summary:hover h3{ color:var(--green); }
.t-time{
  font-family:var(--serif); font-style:italic;
  font-size:20px; color:var(--green);
  text-align:right;
}
.t-dot{
  justify-self:center; align-self:start;
  width:11px; height:11px; border-radius:50%;
  background:var(--ivory);
  border:2px solid var(--green);
  margin-top:9px;
  position:relative; z-index:1;
}
.t-item.highlight .t-dot{ background:var(--blue); border-color:var(--green); }
.t-item h3{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  max-width:400px;  /* keeps the + over the detail column, not out in space */
  font-family:var(--sans); font-weight:400;
  font-size:13px; letter-spacing:.24em; text-transform:uppercase;
  transition:color .2s;
}
/* the FAQ's + mark (rotates to a × when open), sized for a 13px heading */
.t-item h3 .mark{ font-size:17px; }
/* lines up under the heading: the time and dot columns above it */
.t-detail{ padding:9px 0 0 132px; }
.t-detail p{ color:var(--ink-soft); font-size:16px; max-width:400px; }
.t-detail p + p{ margin-top:.7em; }
.t-detail a{ color:var(--green); }

@media (max-width:560px){
  /* nothing between them to wrap under, so time and heading share a line
     and the schedule reads as a genuine list */
  .timeline::before{ left:16px; }
  .t-item{ margin-bottom:17px; }
  .t-item > summary{ grid-template-columns:36px auto 1fr; }
  .t-time{
    grid-column:2; grid-row:1;
    text-align:left; padding-right:14px;
    font-size:18px;
  }
  .t-item h3{ grid-column:3; grid-row:1; }
  .t-dot{ grid-column:1; grid-row:1; margin-top:7px; }
  .t-detail{ padding-left:36px; }
}

.note-line{
  text-align:center; margin-top:48px;
  font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:17px;
}

/* ---------- the playlist (a quiet band of its own) ---------- */
/* Sized to whisper: gifts-note proportions, not RSVP-band proportions
   (design: wedding/playlist-option-b-quiet-band.html). The ivory-2 wash
   and hairlines separate it from the timeline above and the questions
   below. Deliberately not in the nav. */

.playlist{
  background:var(--ivory-2);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:80px 0;
  text-align:center;
}
.playlist h2{ font-size:30px; }
.playlist .lede{ color:var(--ink-soft); max-width:520px; margin:0 auto 34px; }
.playlist-form{ max-width:560px; margin:0 auto; text-align:left; }
.playlist-card{
  background:#fff; border:1px solid var(--hairline);
  padding:24px 26px; color:var(--ink);
}
.song-fields{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; }
.song-fields .field{ margin-bottom:0; }
@media (max-width:480px){ .song-fields{ grid-template-columns:1fr; gap:10px; } }
.song-more{
  display:inline-block; margin-top:16px;
  background:none; border:none; cursor:pointer;
  font-family:var(--sans); font-weight:400;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green); padding:2px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.song-more:hover{ border-color:var(--green); }
/* .song-more sets display, which would defeat the hidden attribute the
   second-song reveal relies on — restore it explicitly. */
.playlist [hidden]{ display:none !important; }
.song-second{ margin-top:16px; padding-top:16px; border-top:1px solid var(--hairline); }
.song-second .second-label{
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:12px;
}
.playlist-actions{ text-align:center; margin-top:26px; }
.playlist .btn-solid.btn-saved{ background:var(--forest); border-color:var(--forest); }
/* The shared .saved-note is tuned for the dark RSVP band; on ivory it
   needs the soft ink instead. */
.playlist .saved-note{ color:var(--ink-soft); font-size:16px; margin-top:18px; }

/* ---------- expandable detail blocks (driving routes, playlist) ----------
   One idiom for "there's more here if you want it", shared with the FAQ's
   details/summary: a quiet card that opens in place. Used only where the
   content is genuinely optional for most guests — never for the schedule. */

.routes-fold, .playlist-fold{
  border:1px solid var(--hairline);
  background:var(--ivory);
  text-align:left;
}
.routes-fold{ margin-bottom:36px; }
.playlist-fold{ background:#fff; max-width:560px; margin:0 auto; }
.routes-fold > summary, .playlist-fold > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:20px 24px;
  font-family:var(--sans); font-size:16px; font-weight:300;
  transition:background .2s;
}
.routes-fold > summary::-webkit-details-marker,
.playlist-fold > summary::-webkit-details-marker{ display:none; }
.routes-fold > summary:hover,
.playlist-fold > summary:hover{ background:var(--ivory-2); color:inherit; }
.routes-fold[open] > summary,
.playlist-fold[open] > summary{ border-bottom:1px solid var(--hairline); }
.fold-face{ min-width:0; }
.fold-title{
  display:block;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
}
.fold-sub{
  display:block; margin-top:4px;
  font-family:var(--serif); font-style:italic;
  font-size:15.5px; line-height:1.5; color:var(--ink-soft);
}
.routes-fold .there-routes{ padding:24px; margin-bottom:0; }
/* inside the fold the card chrome would double up — the fold IS the card */
.playlist-fold .playlist-form{ max-width:none; padding:24px; }
.playlist-fold .playlist-card{ border:0; padding:0; background:transparent; }
@media (max-width:560px){
  .routes-fold > summary, .playlist-fold > summary{ padding:18px 20px; }
  .routes-fold .there-routes, .playlist-fold .playlist-form{ padding:20px; }
}

/* ---------- getting there ---------- */

.there{ background:var(--blue-wash); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); }

.there-map{
  background:var(--ivory);
  border:1px solid var(--hairline);
  margin-bottom:36px;
  overflow:hidden;
}

.aerial{ position:relative; }
.aerial img{ display:block; width:100%; height:auto; }
.marker{
  position:absolute; transform:translate(-50%,-50%);
  display:flex; align-items:center; gap:8px;
  pointer-events:none;
}
.marker .dot{
  width:11px; height:11px; border-radius:50%;
  background:var(--ivory); border:2px solid var(--green-deep);
  box-shadow:0 0 0 4px rgba(251,250,246,.35);
  flex:none;
  font-size:0; /* dot numbers only surface in the mobile legend treatment */
}
.marker .lbl{
  background:rgba(47,59,51,.82); color:var(--ivory);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  padding:6px 12px; border-radius:3px; white-space:nowrap;
}
.marker.flip{ flex-direction:row-reverse; }
.marker.above{ flex-direction:column-reverse; gap:6px; }

.aerial-legend{ display:none; }

/* compact split: the left column drives the row height, so the photo stays a
   modest crop rather than stretching into a tall sliver of tree canopy */
.there-split{ display:grid; grid-template-columns:1.35fr 1fr; }
.there-txt{ padding:34px 36px 32px; }
.there-txt h3{
  font-family:var(--serif); font-weight:500; font-size:22px; margin-bottom:8px;
}
.there-txt address{
  font-style:normal; font-size:15px; color:var(--ink-soft); line-height:1.7; margin-bottom:18px;
}
.there-txt .map-links{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.there-txt .map-links .btn{ padding:12px 26px; font-size:11px; }
.there-txt .rulebar{ border-top:1px solid var(--hairline); margin:22px 0 16px; }
.there .eyebrow{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--green); font-weight:400; margin-bottom:8px;
}
.there-txt .tipnote{ font-size:14.5px; color:var(--ink-soft); }
.there-pic{ position:relative; }
.there-pic img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:50% 74%; /* keep the entrance gates in frame, not the tree above */
}

/* what3words chip — terracotta slashes keep it on-palette */
.w3w{
  display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; max-width:100%;
  border:1px solid var(--hairline); background:var(--ivory-2);
  border-radius:999px; padding:8px 18px 8px 16px; font-size:14px; margin:0;
  text-decoration:none; transition:border-color .25s;
}
.w3w:hover{ border-color:var(--sage); }
.w3w .w3w-k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft); }
.w3w .w3w-v{ letter-spacing:.02em; color:var(--ink); }
.w3w .sl{ color:var(--terracotta); letter-spacing:0; }

/* route cards — one per approach */
.there-routes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:24px; }
.route-card{
  background:var(--ivory); border:1px solid var(--hairline);
  padding:32px 28px 30px; position:relative;
}
.route-card::before{
  content:""; position:absolute; left:28px; right:28px; top:0;
  height:2px; background:var(--green);
}
.route-card .compass{
  font-family:var(--sans); font-size:12px; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--green); margin-bottom:2px;
}
.route-card p.body{ font-size:15px; color:var(--ink-soft); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 14px; }
.chips span{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-deep); border:1px solid var(--sage);
  border-radius:3px; padding:4px 9px; background:var(--ivory);
}
.chips i{ font-style:normal; color:var(--sage); font-size:12px; }

/* the one thing everyone should read, whichever road brought them */
.final-band{ background:var(--green-deep); color:#EAEDE4; padding:30px 40px 28px; margin-bottom:36px; }
.final-band .eyebrow{ color:var(--sage); }
.final-band p.big{ font-family:var(--serif); font-size:16.5px; line-height:1.6; max-width:760px; }
.final-band .satnote{ color:var(--sage); }
.satnote{ display:block; margin-top:10px; font-size:13px; font-style:italic; }
.satnote::before{
  content:""; display:inline-block; width:14px; height:1px;
  background:var(--sage); vertical-align:middle; margin-right:8px;
}

.there-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.t-card{
  background:var(--ivory);
  border:1px solid var(--hairline);
  padding:34px 30px;
}
.t-card .glyph{
  font-family:var(--serif); font-size:26px; color:var(--green);
  display:block; margin-bottom:12px;
}
.t-card h4{
  font-family:var(--sans); font-weight:400; font-size:12px;
  letter-spacing:.26em; text-transform:uppercase;
  margin-bottom:10px;
}
.t-card p{ font-size:15px; color:var(--ink-soft); }

@media (max-width:820px){
  .there-split{ grid-template-columns:1fr; }

  /* narrow screens: floating labels would clip inside the card's
     overflow:hidden — swap them for numbered dots plus a legend */
  .marker .lbl{ display:none; }
  .marker .dot{
    width:20px; height:20px;
    display:grid; place-items:center;
    font-size:10px; font-weight:400; color:var(--green-deep);
  }
  .aerial-legend{
    display:block;
    list-style:none; margin:0; padding:16px 20px 18px;
    border-bottom:1px solid var(--hairline);
  }
  .aerial-legend li{
    display:flex; align-items:center; gap:10px;
    padding:4px 0;
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-soft);
  }
  .aerial-legend .n{
    width:20px; height:20px; border-radius:50%; flex:none;
    background:var(--ivory); border:2px solid var(--green-deep);
    display:grid; place-items:center;
    font-size:10px; color:var(--green-deep);
  }
  /* keep the directions button on one line down to 320px */
  .there-txt .btn{ padding:13px 22px; letter-spacing:.18em; }
  /* Stacked, the entrance photo is 240px of scroll that says nothing the
     aerial above hasn't already said. Desktop keeps it. */
  .there-pic{ display:none; }
  .w3w{ font-size:12.5px; padding:7px 14px; gap:8px; }
  .w3w .w3w-k{ font-size:9px; }
  .there-routes{ grid-template-columns:1fr; }
  .final-band{ padding:26px 26px 24px; }
  .there-cards{ grid-template-columns:1fr; }
}

/* ---------- questions ---------- */

.faq{ max-width:680px; margin:0 auto; }
/* Scoped to the FAQ: the page's other details blocks (the RSVP fold, the
   routes fold, the playlist fold, the Japan page's bank card) are cards
   with borders of their own, and :first-of-type would out-specify them. */
.faq details{
  border-bottom:1px solid var(--hairline);
}
.faq details:first-of-type{ border-top:1px solid var(--hairline); }
summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:24px 4px;
  font-family:var(--serif); font-size:21px; font-weight:500;
  transition:color .2s;
}
summary::-webkit-details-marker{ display:none; }
summary:hover{ color:var(--green); }
summary .mark{
  font-family:var(--sans); font-weight:300; font-size:22px;
  color:var(--green); flex-shrink:0;
  transition:transform .25s;
}
details[open] summary .mark{ transform:rotate(45deg); }
details .answer{
  padding:0 4px 26px;
  color:var(--ink-soft); font-size:16px; max-width:600px;
}
details .answer p + p{ margin-top:.8em; }

/* ---------- rsvp band ---------- */

.rsvp-band{
  background:var(--green-deep);
  color:var(--ivory);
  text-align:center;
}
.rsvp-band .kicker{ color:var(--blue); }
.rsvp-band h2{ color:var(--ivory); }
.rsvp-band p.lede{ color:var(--sage); max-width:520px; margin:0 auto 36px; }

/* Several elements in this band toggle with the hidden attribute (server-
   rendered, then flipped by the page's JS) and set a display of their own
   below, which would otherwise beat the UA's [hidden] rule. */
.rsvp-band [hidden]{ display:none !important; }

/* ---------- the RSVP fold: a form before, a recap after ----------
   Once a party has answered, the form collapses behind a one-glance recap.
   Nearly every later visit is about timings or directions, and a spent form
   is the largest block of scroll between the hero and the useful content. */
.rsvp-fold{ max-width:560px; margin:0 auto; border:0; }
/* Nothing to recap until an answer exists: first-time guests get the plain
   form, and the summary appears the moment a save lands. */
.rsvp-fold[data-responded="0"] > summary{ display:none; }
.rsvp-fold > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  text-align:left;
  padding:20px 22px;
  background:rgba(251,250,246,.07);
  border:1px solid rgba(154,172,159,.45);
  font-family:var(--sans); font-size:16px; font-weight:300;
  transition:background .2s, border-color .2s;
}
.rsvp-fold > summary::-webkit-details-marker{ display:none; }
.rsvp-fold > summary:hover{
  background:rgba(251,250,246,.12); border-color:var(--sage); color:inherit;
}
.rsvp-fold[open] > summary{ margin-bottom:20px; }
.recap-body{ flex:1 1 auto; min-width:0; }
.recap-title{
  display:block;
  font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--blue);
}
.recap-lines{ display:block; margin-top:10px; }
/* Open, the cards below say all of this in full — the lines would only
   repeat them. "Last updated" stays: it belongs to both states. */
.rsvp-fold[open] .recap-lines{ display:none; }
/* name left, answer right — with wrapping as the fallback, so a long name
   pushes the answer onto its own line rather than out of the card */
.recap-line{
  display:flex; flex-wrap:wrap; justify-content:space-between;
  align-items:baseline; gap:2px 12px;
  padding:3px 0;
}
.recap-line .who{ font-family:var(--serif); font-size:20px; color:var(--ivory); }
.recap-line .what{
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage);
}
.recap-line .what.yes{ color:var(--blue); }
.recap-when{
  display:block; margin-top:10px;
  font-family:var(--serif); font-style:italic; font-size:14px; color:var(--sage);
}
.recap-cue{
  flex-shrink:0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory);
  border-bottom:1px solid var(--sage);
  padding-bottom:3px;
}
.rsvp-fold > summary:hover .recap-cue{ border-color:var(--blue); }
.rsvp-fold .cue-close{ display:none; }
.rsvp-fold[open] .cue-open{ display:none; }
.rsvp-fold[open] .cue-close{ display:inline; }

/* The RSVP form sits directly on the band: one white card per guest
   (name + attending choice), then the party message and save button.
   An unchecked pair of pills IS the "awaiting reply" state. */
.rsvp-form{
  max-width:560px; margin:0 auto;
  text-align:left;
}
.rsvp-guest{
  background:#fff;
  border:1px solid var(--hairline);
  padding:24px 26px;
  margin-bottom:14px;
  color:var(--ink);
}
.rsvp-guest h3{
  font-family:var(--serif); font-weight:500; font-size:23px;
  margin-bottom:14px;
}
.choice-row{ display:flex; gap:10px; flex-wrap:wrap; }
label.choice{ position:relative; cursor:pointer; }
label.choice input{
  /* visually hidden but still focusable, so the pills work by keyboard */
  position:absolute; opacity:0; width:1px; height:1px;
}
label.choice span{
  display:inline-block;
  font-family:var(--sans); font-size:11px; font-weight:400;
  letter-spacing:.18em; text-transform:uppercase;
  padding:10px 20px; border-radius:999px;
  border:1px solid var(--hairline); color:var(--ink-soft);
  white-space:nowrap;
  transition:all .2s;
}
label.choice:hover input:not(:checked) + span{ border-color:var(--green); color:var(--green); }
/* Selected answers must be scannable without reading: green fill = coming,
   terracotta fill = not coming, plus a checkmark so the distinction never
   rests on colour alone. */
label.choice input:checked + span{
  background:var(--forest); border-color:var(--forest); color:var(--ivory);
}
label.choice input[value="no"]:checked + span{
  background:var(--terracotta); border-color:var(--terracotta);
}
label.choice input:checked + span::before{
  content:"\2713"; display:inline-block; margin-right:9px;
  font-size:14px; line-height:1; vertical-align:-1px;
}
label.choice input[value="no"]:checked + span::before{ content:"\2715"; }
label.choice input:focus-visible + span{
  outline:2px solid var(--blue); outline-offset:2px;
}
@media (max-width:400px){
  label.choice span{ padding:9px 15px; letter-spacing:.1em; }
}
/* Save confirmation sits under the button — where the guest is looking —
   and fades in so it registers as new rather than as static page copy. */
.saved-note{
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--blue);
  margin-top:20px;
  animation:note-in .6s ease both;
}
@keyframes note-in{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){ .saved-note{ animation:none; } }
.rsvp-updated{
  margin-top:14px;
  font-family:var(--serif); font-style:italic; font-size:15px; color:var(--sage);
}
.rsvp-band .btn-solid{ background:var(--ivory-2); color:var(--green-deep); border-color:var(--ivory-2); }
.rsvp-band .btn-solid:hover{ background:#fff; border-color:#fff; }
.rsvp-band .btn-solid.btn-saved{ background:var(--forest); color:var(--ivory); border-color:var(--forest); }

/* ---------- gifts (deliberately quiet) ---------- */

.gifts{ text-align:center; padding:80px 0; }
.gifts h2{ font-size:30px; }
.gifts p{ color:var(--ink-soft); max-width:520px; margin:0 auto 1em; }
.gifts a{ color:var(--green); }

/* ============================================================
   Back to Japan — honeymoon fund page (design: gifts option D,
   "The Hybrid" — wedding/backtojapan-gifts-d-hybrid.html, with
   the opening from photo option C, "Matted Portrait" — wedding/
   backtojapan-photo-c-matted-portrait.html: the story leads and
   the photo is a white-matted 4:5 print beside it).
   The gifts are a shelf of museum-label cards acting as a
   basket: stamping a card presses a vermillion hanko seal over
   its chop mark, amounts sum into one PayPal.Me link, and a
   fixed checkout bar carries the running total. The vending-
   machine fund (custom amount) adds to the basket. Everything
   here is scoped under .japan so the vermillion accents never
   leak into the main page.
   ============================================================ */

.japan .kicker{ color:var(--vermillion); }

/* The give section toggles its states with the hidden attribute (server-
   rendered, then flipped by the page's JS). Several of those elements set
   a display of their own below, which would otherwise beat the UA's
   [hidden] rule and leave an empty total or a stray button on screen. */
.japan [hidden]{ display:none !important; }

.nav-back{
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
  padding:6px 0; border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.nav-back:hover{ color:var(--green); border-color:var(--green); }

/* compact opening: story left, mounted print right */
.japan .opening{
  display:grid; grid-template-columns:minmax(0, 58fr) minmax(0, 42fr);
  gap:64px; align-items:center;
  max-width:880px; margin:0 auto; padding:84px 24px 92px;
  position:relative;
}
.japan .opening-copy{ position:relative; }
.japan h1{
  font-weight:400;
  font-size:clamp(42px, 5.4vw, 58px); line-height:1.06;
  margin:16px 0 0;
}
.japan .v-rule{
  width:56px; height:2px; background:var(--vermillion);
  margin:26px 0;
}
.japan .opening-copy .first{
  font-family:var(--serif); font-size:22px; font-style:italic;
  line-height:1.55; margin-bottom:18px;
}
.japan .opening-copy p{ color:var(--ink-soft); margin-bottom:1em; max-width:44ch; }
/* mounted print: white mat, hairline frame, caption beneath */
.japan .mat-frame{ position:relative; margin:0; }
.japan .mat{
  background:#fff;
  border:1px solid var(--hairline);
  padding:14px;
  box-shadow:0 1px 0 rgba(47,59,51,.04);
}
.japan .mat-photo{
  aspect-ratio:4/5;
  overflow:hidden;
}
.japan .mat-photo img{
  width:100%; height:100%; display:block;
  object-fit:cover; object-position:42% 35%;
  filter:brightness(1.03) saturate(.98);
}
.japan .mat-caption{
  text-align:center; margin-top:13px;
  font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--ink-soft);
}
/* the vertical lettering — "to Japan, once again" —
   hung outside the print's right edge */
.japan .tategaki{
  position:absolute; top:2px; left:calc(100% + 22px);
  writing-mode:vertical-rl;
  font-family:var(--jp);
  font-size:19px; letter-spacing:.42em;
  color:var(--sage);
  user-select:none;
  white-space:nowrap;
}

/* ---------- the gift shelf: museum-label cards as a basket ---------- */
.japan .gift-shelf{
  padding:88px 24px 84px;
  border-top:1px solid var(--hairline);
  text-align:center;
}
.japan .gift-shelf h2{
  font-size:clamp(30px, 4.4vw, 38px);
  margin:14px 0 10px;
}
.japan .rule{ background:var(--vermillion); }
.japan .gift-shelf .lede{ color:var(--ink-soft); max-width:540px; margin:0 auto 52px; }
.japan .shelf{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  max-width:1020px; margin:0 auto; text-align:left;
}
.japan .gift{
  position:relative;
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--hairline);
  padding:26px 24px 22px;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.japan .gift:hover{ border-color:var(--sage); }
.japan .gift:focus-within{ outline:2px solid var(--green); outline-offset:2px; }
/* the real checkbox, visually absorbed into the card */
.japan .gift-check{ position:absolute; opacity:0; pointer-events:none; }
.japan .gift .kanji{
  position:absolute; top:16px; right:18px;
  font-family:var(--jp); font-size:30px; line-height:1;
  color:var(--sage); opacity:.5;
  transition:opacity .16s ease;
  pointer-events:none;
}
.japan .gift .gift-title{
  display:block;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:400; margin:0 34px 7px 0;
}
.japan .gift .story{
  display:block;
  font-family:var(--serif); font-style:italic;
  font-size:16px; line-height:1.5; color:var(--ink-soft);
  flex-grow:1; margin:0 0 20px; max-width:30ch;
}
.japan .gift .price{
  font-family:var(--serif); font-size:25px; font-weight:500;
  line-height:1;
  transition:color .18s ease;
}
/* the hakubun seal — a solid disc pressed over the chop mark */
.japan .seal{
  position:absolute; top:5px; right:7px;
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--jp); font-size:25px; line-height:1;
  background:var(--vermillion); color:var(--ivory);
  transform:rotate(-8deg) scale(1.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease-out, transform .16s ease-out;
}
.japan .gift-check:checked ~ .kanji{ opacity:0; }
.japan .gift-check:checked ~ .seal{
  opacity:.94;
  transform:rotate(-8deg) scale(1);
}
.japan .gift-check:checked ~ .price{ color:var(--vermillion); }
/* the stamped card's border needs the parent — :has() everywhere that
   matters; a browser without it just misses the border, the seal (sibling
   selectors above) still shows */
.japan .gift:has(.gift-check:checked){
  border-color:var(--vermillion);
  box-shadow:inset 0 0 0 1px var(--vermillion);
}

/* the vending machine fund — a deep-green panel, additive */
.japan .vending{
  grid-column:1 / -1;
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:28px;
  background:var(--green-deep); color:var(--ivory);
  border:1px solid var(--green-deep);
  padding:28px 34px;
  position:relative; overflow:hidden;
  text-align:left;
}
.japan .vending .yen{
  position:absolute; right:-14px; top:50%;
  transform:translateY(-50%);
  font-family:var(--jp); font-size:130px; line-height:1;
  color:#fff; opacity:.05;
  user-select:none; pointer-events:none;
}
.japan .vending-title{
  display:block;
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:400; margin-bottom:6px;
}
.japan .vending .story{
  font-family:var(--serif); font-style:italic;
  font-size:16.5px; color:var(--sage);
  max-width:46ch; margin:0;
}
.japan .vend-panel{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  position:relative; z-index:1;
}
.japan .coin-slot{
  width:34px; height:5px; border-radius:3px;
  background:var(--ivory); opacity:.5;
  transition:background .18s ease, opacity .18s ease;
}
.japan .vend-amount{
  display:flex; align-items:baseline; gap:6px;
  border:1px solid rgba(251,250,246,.35);
  padding:8px 16px;
  transition:border-color .18s ease;
}
.japan .vend-amount label{
  font-family:var(--serif); font-size:22px; font-weight:500;
}
.japan .vend-amount input{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:19px;
  color:var(--ivory); width:110px;
  background:transparent; border:0;
  padding:0 2px;
}
.japan .vend-amount input:focus{ outline:none; }
.japan .vend-amount input::placeholder{
  font-family:var(--serif); font-style:italic; font-size:16px;
  color:var(--sage);
}
.japan .vending.active .vend-amount{ border-color:var(--vermillion); }
.japan .vending.active .coin-slot{ background:var(--vermillion); opacity:1; }
.japan .vend-note{
  font-size:12px; letter-spacing:.06em; color:var(--sage);
}

/* JS-off: the shelf saves with a plain form post */
.japan .shelf-save{ grid-column:1 / -1; text-align:center; padding-top:12px; }
.japan .shelf-save button{ cursor:pointer; font-family:var(--sans); }
.japan .shelf-saved{
  margin-top:16px;
  font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--ink-soft);
}

.japan .promise{
  margin:46px auto 0; max-width:520px;
  font-family:var(--serif); font-style:italic;
  font-size:18px; color:var(--ink-soft);
}

/* ---------- at the till: the slip, then how to send it ----------
   The section's job is NOT to be a second checkout (the bar below only
   walks the guest down here). It prints an itemised slip of what was
   stamped — the itemisation lives on the page, where it's true, since a
   PayPal.Me link can only ever carry one figure — and then offers the two
   ways to send it: PayPal loud, bank transfer visibly quieter. */
.japan .fund{
  padding:84px 24px 96px;
  text-align:center;
  border-top:1px solid var(--hairline);
}
.japan .fund h2{
  font-size:clamp(30px, 4.4vw, 38px);
  margin:14px 0 10px;
}
.japan .fund .lede{ color:var(--ink-soft); max-width:500px; margin:0 auto 34px; }

/* the slip itself — a shop receipt in the page's own hand */
.japan .slip{
  position:relative;
  max-width:520px; margin:0 auto;
  background:#fff;
  border:1px solid var(--hairline);
  padding:26px 30px 24px;
  text-align:left;
  transition:border-color .2s ease;
}
.japan .slip-head{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:12px; border-bottom:1px solid var(--hairline);
}
.japan .slip-line{
  display:flex; align-items:baseline; gap:12px;
  padding:12px 0;
  border-bottom:1px dotted var(--hairline);
}
/* the total's own rule closes the list — no doubled line above it */
.japan .slip-line:last-child{ border-bottom:0; }
.japan .slip-mark{
  font-family:var(--jp); font-size:17px; line-height:1;
  color:var(--sage);
  flex-shrink:0; width:20px;
}
.japan .slip-what{
  flex:1; min-width:0;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.5;
}
.japan .slip-amount{
  flex-shrink:0;
  font-family:var(--serif); font-size:19px; font-weight:500;
  color:var(--ink-soft);
}
.japan .slip-empty{
  padding:20px 0 4px;
  font-family:var(--serif); font-style:italic;
  font-size:16.5px; color:var(--ink-soft);
}
.japan .slip-total{
  display:flex; align-items:baseline; gap:12px;
  margin-top:14px; padding-top:14px;
  border-top:1px solid var(--ink);
}
.japan .slip-total .slip-what{ font-weight:400; }
.japan .slip-total .slip-amount{
  font-size:27px; color:var(--vermillion);
}
/* the 済 chop — pressed on the slip when the guest tells us it's away.
   Same gesture as the cards' hanko seal, squared off the way a document
   chop is; the sent line beneath keeps its right edge clear. */
.japan .slip-chop{
  position:absolute; right:26px; bottom:16px;
  width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--jp); font-size:28px; line-height:1;
  color:var(--vermillion);
  border:2px solid var(--vermillion); border-radius:4px;
  transform:rotate(-11deg) scale(1.35);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease-out, transform .2s ease-out;
}
/* room at the foot for the chop, so it lands in clear space beside the
   sent line rather than clipping the total */
.japan .slip-sent{ border-color:var(--vermillion); padding-bottom:40px; }
.japan .slip-sent .slip-chop{ opacity:.85; transform:rotate(-11deg) scale(1); }
.japan .slip-sent-line{
  margin-top:16px; padding-right:78px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}
@media (prefers-reduced-motion: reduce){
  .japan .slip-chop{ transition:none; }
}

.japan .pay-hero{
  max-width:520px; margin:26px auto 0;
}
.japan .btn-vermillion{
  display:inline-block;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ivory); text-decoration:none;
  padding:14px 32px; border-radius:999px;
  background:var(--vermillion); border:1px solid var(--vermillion);
  transition:background .25s;
}
.japan .btn-vermillion:hover{ background:#9E3F26; }
.japan .btn-vermillion:disabled{ opacity:.6; cursor:default; }
/* saved state settles into the site's green — "done" rather than "act" */
.japan .btn-vermillion.btn-saved{
  background:var(--green); border-color:var(--green);
}
/* The amount fallback for phones whose PayPal app eats the figure in the
   link. Quieter than the button, louder than the fee hint — it carries a
   number the guest may have to retype. Suppressed only where the device
   has no touch pointer at all (see the media query below); anything
   ambiguous errs towards showing it. */
.japan .pp-amount{ margin-top:16px; }
.japan .pp-amount p{
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}
.japan .pp-amount strong{
  font-style:normal; font-weight:500; color:var(--vermillion);
  white-space:nowrap;
}
/* A pill of its own rather than an inline link: this is a thumb target on
   a phone, and the only control here besides the button itself. Sized
   below .btn-quiet so it stays subordinate to "I've sent our gift". */
.japan .pp-copy{
  display:inline-block; cursor:pointer; margin-top:12px;
  font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent;
  padding:11px 24px; border-radius:999px;
  border:1px solid var(--hairline);
  transition:color .2s, border-color .2s;
}
.japan .pp-copy:hover,
.japan .pp-copy.copied{ color:var(--vermillion); border-color:var(--vermillion); }
/* Hidden only when nothing on the device can touch the screen. `pointer`/
   `hover` describe the PRIMARY pointer, which an iPad with a trackpad
   satisfies as squarely as a desktop — and iPadOS hands paypal.me to the
   PayPal app like any other tablet, so keying off those would hide the
   fallback in exactly the case it exists for. `any-pointer` instead asks
   whether the device has a touch pointer at all, and every OS that can
   pass the link to an installed app does. A browser that doesn't know the
   feature fails the query and shows the fallback — the right way to be
   wrong, since the cost is one quiet line nobody needed. */
@media not all and (any-pointer: coarse){
  .japan .pp-amount{ display:none; }
}
.japan .pp-hint{
  margin-top:18px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}
/* bank transfer: the quiet option, but unmistakably an option — a muted
   card on the alternate wash rather than a line of text hoping to be
   noticed. Folded shut, so it never competes with the PayPal button. */
.japan details.bank-card{
  max-width:520px; margin:22px auto 0;
  background:var(--ivory-2);
  border:1px solid var(--hairline);
  text-align:left;
}
.japan details.bank-card summary{
  list-style:none; cursor:pointer;
  /* the FAQ's summary rule is global and lays its children out in a row —
     this card stacks its two lines instead */
  display:block;
  position:relative;
  padding:16px 52px 16px 22px;
  transition:background .2s;
}
.japan details.bank-card summary::-webkit-details-marker{ display:none; }
.japan details.bank-card summary:hover{ background:#EDEBE1; }
.japan details.bank-card summary::after{
  content:'+';
  position:absolute; right:22px; top:50%; transform:translateY(-50%);
  font-family:var(--serif); font-size:22px; line-height:1;
  color:var(--ink-soft);
}
.japan details.bank-card[open] summary::after{ content:'\2013'; }
.japan .bank-face{
  display:block;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
}
.japan .bank-sub{
  display:block; margin-top:3px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}
.japan .bank-body{
  margin:0 22px; padding:18px 0 22px;
  border-top:1px solid var(--hairline);
}
.japan .bank-amount{
  margin:0 0 14px;
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink);
}
.japan .bank-amount strong{ font-style:normal; font-weight:500; color:var(--vermillion); }
.japan .bank-note{
  margin-top:14px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}

/* "I've sent our gift" — the guest's own word, never ours. Revealed only
   after they set off for PayPal or opened the bank card. */
.japan .sent-box{
  max-width:520px; margin:28px auto 0;
}
.japan .sent-ask{
  margin-bottom:16px;
  font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--ink-soft);
}
.japan .btn-quiet{
  display:inline-block; cursor:pointer;
  font-family:var(--sans);
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); background:transparent;
  padding:12px 28px; border-radius:999px;
  border:1px solid var(--hairline);
  transition:color .2s, border-color .2s;
}
.japan .btn-quiet:hover{ color:var(--vermillion); border-color:var(--vermillion); }
/* Disabled while a basket save is still in flight — see giftSentSync in
   backtojapan.html. Not just inert: the label swaps to say why. */
.japan .btn-quiet:disabled{ opacity:.55; cursor:default; }
.japan .btn-quiet:disabled:hover{ color:var(--ink-soft); border-color:var(--hairline); }
.japan .sent-done{
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink);
}
.japan .sent-nudge{
  margin-top:8px;
  font-family:var(--serif); font-style:italic;
  font-size:15px; color:var(--ink-soft);
}
/* a submit button that reads as a link (the undo, the save retry) */
.japan .link-btn{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; color:var(--ink-soft);
  border-bottom:1px solid var(--sage);
  transition:color .2s, border-color .2s;
}
.japan .link-btn:hover{ color:var(--vermillion); border-color:var(--vermillion); }
.japan .no-obligation{
  margin-top:44px;
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink-soft);
}
/* leave-a-note: quietly beneath the fold */
.japan .gift-note{
  max-width:560px; margin:72px auto 0;
}
.japan .gift-note h3{
  font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  font-weight:400; margin-bottom:6px;
}
.japan .gift-note-sub{
  font-family:var(--serif); font-style:italic;
  color:var(--ink-soft); font-size:16px; margin-bottom:24px;
}
.japan .note-form textarea{
  width:100%; min-height:110px; resize:vertical;
  background:#fff; border:1px solid var(--hairline);
  padding:16px 18px;
  font-family:var(--serif); font-style:italic; font-size:17px;
  color:var(--ink); line-height:1.6;
}
.japan .note-form textarea:focus{
  outline:none; border-color:var(--sage);
}
.japan .note-form button{
  margin-top:20px; cursor:pointer; font-family:var(--sans);
}
.japan .note-saved{
  margin-top:20px;
  font-family:var(--serif); font-style:italic;
  font-size:16px; color:var(--ink-soft);
  animation:note-in .6s ease both;
}
@media (prefers-reduced-motion: reduce){ .japan .note-saved{ animation:none; } }
.japan dl.bank{
  text-align:left;
  border-top:1px solid var(--hairline);
}
.japan dl.bank div{
  display:flex; justify-content:space-between; gap:16px;
  padding:10px 2px; border-bottom:1px solid var(--hairline);
}
.japan dl.bank dt{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-soft); padding-top:3px;
}
.japan dl.bank dd{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:14px; color:var(--ink);
}
/* ---------- the running-total bar: the way down to the slip ---------- */
.japan .choice-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(251,250,246,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--hairline);
  transform:translateY(100%);
  transition:transform .25s ease;
}
.japan .choice-bar.show{ transform:translateY(0); }
.japan .choice-inner{
  max-width:960px; margin:0 auto; padding:11px 24px;
  display:flex; align-items:center; gap:18px;
}
.japan .choice-copy{ flex:1; min-width:0; }
.japan .choice-copy .what{
  display:block;
  font-family:var(--serif); font-style:italic;
  font-size:17px; color:var(--ink); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.japan .choice-copy .what strong{
  font-style:normal; font-weight:500; color:var(--vermillion);
}
/* the save state: the page tells guests their choices are kept with their
   invitation, so it has to say when a save is in flight or has failed —
   for a bank transfer the slip is the only record of what the money meant */
.japan .choice-copy .save-state{
  display:block;
  font-size:11.5px; letter-spacing:.04em; color:var(--ink-soft);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.japan .choice-copy .save-state.saved{ color:var(--green); }
/* The failed state carries an actionable "Try again" button, not just
   status text — nowrap+ellipsis would let it clip out of reach on narrow
   screens (the bar's "Review your gift" button already eats width there).
   Let this one state wrap instead of truncating. */
.japan .choice-copy .save-state.failed{
  color:var(--vermillion);
  overflow:visible; text-overflow:clip; white-space:normal;
}
.japan .choice-bar .btn-vermillion{
  flex-shrink:0;
  padding:12px 26px; font-size:11px;
}
/* keep the footer readable above the fixed bar */
.japan.bar-open{ padding-bottom:72px; }

@media (max-width:1080px){
  .japan .tategaki{ display:none; }
}
@media (max-width:900px){
  .japan .shelf{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .japan .opening{ grid-template-columns:1fr; gap:44px; padding:48px 24px 64px; }
  .japan .mat-frame{ max-width:400px; margin:0 auto; width:100%; }
}
@media (max-width:600px){
  .japan .shelf{ grid-template-columns:1fr; }
  .japan .vending{ grid-template-columns:1fr; gap:18px; }
  .japan .vend-panel{ align-items:flex-start; }
  .japan .slip{ padding:22px 20px 20px; }
  .japan .slip-chop{ right:18px; bottom:16px; width:50px; height:50px; font-size:24px; }
  .japan .slip-sent-line{ padding-right:64px; }
  .japan .choice-inner{ gap:12px; padding:10px 20px; }
  .japan .choice-bar .btn-vermillion{ padding:11px 18px; letter-spacing:.18em; }
}

/* ---------- footer ---------- */

footer{
  border-top:1px solid var(--hairline);
  text-align:center;
  padding:56px 24px 64px;
}
footer .mono{
  font-family:var(--serif); font-size:26px; letter-spacing:.1em; margin-bottom:8px;
}
footer .mono em{ font-style:italic; color:var(--green); }
footer p{ font-size:13px; color:var(--ink-soft); letter-spacing:.08em; }
footer p + p{ margin-top:6px; }
footer a{ color:var(--ink-soft); }
footer a:hover{ color:var(--green); }

/* ============================================================
   Gate — invitation-code entry (the site's front door)
   ============================================================ */

.gate{
  min-height:100vh;
  display:grid; place-items:center;
  text-align:center;
  padding:48px 24px;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(185,206,218,.28), transparent 60%),
    var(--ivory);
}
.gate h1{ font-size:clamp(48px, 9vw, 96px); }
.gate .lede{
  color:var(--ink-soft); max-width:420px; margin:18px auto 34px;
}
.code-form{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}
.code-form input{
  font-family:var(--sans); font-size:15px; letter-spacing:.28em;
  text-align:center; text-transform:uppercase;
  background:#fff;
  border:1px solid var(--sage);
  color:var(--ink);
  padding:14px 22px; border-radius:999px;
  width:290px;
}
.code-form input::placeholder{ color:var(--sage); letter-spacing:.28em; }
.code-form input:focus{ outline:none; border-color:var(--green); }
.form-error{
  font-family:var(--serif); font-style:italic;
  color:#8A4B3D; font-size:16px;
  max-width:380px; margin:22px auto 0;
}
.gate-hint{
  margin-top:34px;
  font-size:13px; color:var(--ink-soft); letter-spacing:.04em;
  max-width:360px; margin-left:auto; margin-right:auto;
}

/* ============================================================
   Form fields (shared by the RSVP band form and the admin panel)
   ============================================================ */

.field{ margin-bottom:14px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:block;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:7px;
}
.field input[type=text], .field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--hairline);
  background:var(--ivory);
  font-family:var(--sans); font-weight:300; font-size:15px;
  color:var(--ink);
}
.field input[type=text]:focus, .field textarea:focus{
  outline:none; border-color:var(--sage);
}
.field textarea{ min-height:96px; resize:vertical; }

.rsvp-actions{ text-align:center; margin-top:28px; }

/* ============================================================
   Admin dashboard (internal, Basic-Auth protected)
   ============================================================ */

.admin{ max-width:1180px; margin:0 auto; padding:48px 24px 96px; }
.admin h1{ font-size:44px; margin:0 0 6px; }
.admin .sub{ color:var(--ink-soft); font-size:14px; margin-bottom:30px; }
.admin h2{ font-size:28px; margin-top:44px; }

.stat-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:16px; margin:24px 0;
}
.stat{
  background:#fff; border:1px solid var(--hairline);
  padding:18px 12px; text-align:center;
}
.stat .num{ font-family:var(--serif); font-size:40px; line-height:1.1; color:var(--green); }
.stat .lbl{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }

/* The code column holds an editable field now, so the row needs more width
   than a phone has — the table scrolls inside its own box rather than
   dragging the whole page sideways. */
.table-scroll{ overflow-x:auto; }
table.parties{
  width:100%; min-width:900px; border-collapse:collapse;
  font-size:14px; background:#fff;
  border:1px solid var(--hairline);
}
table.parties td:first-child{ min-width:150px; }
table.parties th, table.parties td{
  padding:10px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--hairline);
}
table.parties th{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:400; color:var(--ink-soft); background:var(--ivory-2);
}
.invcode{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px;
  background:var(--ivory-2);
  padding:2px 8px; border-radius:6px;
  white-space:nowrap;
}
.guest-line{ white-space:nowrap; }
.guest-line .chip{ margin-left:8px; vertical-align:1px; }
/* status chips — admin-only now the guest RSVP moved to the form pills */
.chip{
  font-family:var(--sans); font-size:10px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase;
  padding:5px 14px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--sage); color:var(--ink-soft);
}
.chip.yes{ background:var(--blue); color:var(--green-deep); border-color:var(--blue); }
.chip.no{ color:#8A4B3D; border-color:#C9A79B; }

.admin form.inline{ display:inline; }
/* Row actions stack: side by side they pushed the widened code column off the
   end of the table. */
table.parties td:last-child form.inline{ display:block; }
table.parties td:last-child form.inline + form.inline{ margin-top:6px; }
.btn-mini{
  font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 14px; border-radius:999px;
  background:transparent; border:1px solid var(--sage); color:var(--green);
  cursor:pointer; text-decoration:none; display:inline-block;
  white-space:nowrap;
}
.btn-mini:hover{ border-color:var(--green); }
.btn-mini.danger{ color:#8A4B3D; border-color:#C9A79B; }
/* Links column: three per-party downloads. Side by side they widened the
   table past what the code column already costs it, so they stack too. */
table.parties td.links .btn-mini{ display:block; width:fit-content; }
table.parties td.links .btn-mini + .btn-mini{ margin-top:6px; }

.admin-panel{
  background:#fff; border:1px solid var(--hairline);
  padding:26px; margin-top:20px; max-width:560px;
}
.admin-panel .hint{ font-size:13px; color:var(--ink-soft); margin-bottom:14px; }

/* The two whole-guest-list downloads. Wider than the add-invitation panel:
   its copy is what stops the print PDF and the guest images being confused
   for each other, so it gets a readable measure. */
.print-panel{ max-width:640px; }
.print-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.print-panel .print-warning{ margin:14px 0 0; }
.admin > .hint{
  font-size:13px; color:var(--ink-soft); line-height:1.7;
  max-width:640px; margin:10px 0 18px;
}

/* Per-party invitation code: an editable field, not a label — the codes are
   assigned by hand before the invitations go to print. */
.code-edit{ display:flex; gap:6px; align-items:center; }
.code-edit input{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:13px; text-transform:uppercase;
  background:var(--ivory-2); color:var(--ink);
  border:1px solid var(--hairline); border-radius:6px;
  padding:6px 10px; width:150px;
}
.code-edit input:focus{ outline:none; border-color:var(--green); background:#fff; }
.code-msg{ font-size:12px; line-height:1.5; margin-top:6px; max-width:220px; }
.code-msg.ok{ color:var(--green); }
.code-msg.error{ color:#8A4B3D; }

.dietary-list{ list-style:none; margin:14px 0 0; }
.dietary-list li{
  padding:8px 4px; border-bottom:1px solid var(--hairline);
  font-size:14px;
}
.dietary-list .who{ font-weight:400; }
.dietary-list .what{ color:var(--ink-soft); font-style:italic; }