/* Santa Mike Japan — site stylesheet, built on the Santa Mike Japan design system.
   Colour, type, spacing, radius and shadow values are the system's tokens. */

:root {
  /* colour — Candlelight */
  --paper:#f4ead9; --card:#fdf5e1; --inset:#ffffff;
  --ink:#081f0b; --ink-muted:#6f5a49;
  --red:#ac0c1a; --red-fill:#ac0c1a; --red-bright:#cb1b1d; --red-ground:#922420;
  --coral:#ff5c5c; --holly:#397930; --holly-fill:#397930; --forest:#081f0b; --sage:#4a775e;
  --gold:#f4bb40; --gold-pale:#f0cd68;
  --snow:#ffffff; --snow-face:#f6f6f6; --frost:#a3c3c3; --ice:#daeaf0; --mat:#dad6cc;
  --line:#e2d3b8; --focus:#081f0b; --focus-inverse:#fdf5e1;
  --on-red:#fdf5e1; --on-coral:#081f0b; --on-gold:#081f0b;
  /* spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  /* radius */
  --radius-sm:4px; --radius-md:10px; --radius-lg:20px; --radius-xl:32px; --radius-pill:999px;
  /* shadow */
  --shadow-card:0 2px 8px rgba(8,31,11,.12);
  --shadow-lift:0 8px 24px rgba(8,31,11,.18);
  /* type */
  --font-display:"Playfair Display", "Zen Maru Gothic", Georgia, serif;
  --font-body:"Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:76px; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:30px;
  -webkit-text-size-adjust:100%;
  /* Japanese line-breaking rules: no break before a long vowel mark or small kana */
  line-break:strict;
}
img { max-width:100%; display:block; }
a { color:var(--red); }
a:hover { color:var(--red-ground); }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.wrap { width:min(1100px, 100% - 48px); margin-inline:auto; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- type scale ---------- */
.eyebrow {
  font-size:14px; font-weight:700; letter-spacing:.18em; line-height:18px;
  text-transform:uppercase; color:var(--red); margin:0 0 var(--space-3);
}
.jp-headline { font-size:32px; font-weight:700; line-height:48px; margin:0; word-break:keep-all; overflow-wrap:anywhere; }
.jp-lead { font-size:20px; font-weight:500; line-height:36px; margin:0; line-break:strict; }
.jp-body { font-size:16px; font-weight:400; line-height:30px; line-break:strict; }
.jp-caption { font-size:13px; line-height:24px; color:var(--ink-muted); }
.en-line { font-size:17px; font-weight:500; line-height:26px; color:var(--ink-muted); margin:var(--space-2) 0 0; }
.label { font-size:13px; font-weight:700; letter-spacing:.08em; line-height:18px; }

/* ---------- header ---------- */
.site-head {
  position:sticky; top:0; z-index:20; background:rgba(244,234,217,.94);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.site-head__in { position:relative; display:flex; align-items:center; gap:var(--space-5); padding:var(--space-3) 0; }
.brand { display:flex; align-items:center; gap:var(--space-3); text-decoration:none; color:var(--ink); margin-right:auto; flex-shrink:0; }
.brand img { height:44px; width:auto; }
.brand b { font-family:var(--font-display); font-size:21px; font-weight:700; line-height:1.1; display:block; }
.brand span { font-size:12px; line-height:1.3; color:var(--ink-muted); display:block; }
.nav { display:flex; gap:var(--space-5); align-items:center; }
.nav a { font-size:14px; font-weight:700; text-decoration:none; color:var(--ink); white-space:nowrap; }
.nav a:hover { color:var(--red); }
.nav a.en { color:var(--ink-muted); letter-spacing:.06em; }

/* ---------- buttons ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); flex-wrap:wrap;
  max-width:100%; min-height:44px; text-align:center;
  font-family:var(--font-body); font-size:15px; font-weight:700; line-height:20px;
  padding:var(--space-3) var(--space-6); border-radius:var(--radius-pill);
  border:2px solid transparent; text-decoration:none; cursor:pointer;
  transition:background-color .15s;
}
.btn--primary { background:var(--red-fill); color:var(--on-red); }
.btn--primary:hover { background:var(--red-ground); color:var(--on-red); }
.btn--secondary { background:var(--holly-fill); color:var(--on-red); }
.btn--secondary:hover { background:var(--forest); color:var(--on-red); }
.btn--quiet { background:transparent; color:var(--ink); border-color:var(--ink-muted); }
.btn--quiet:hover { background:var(--card); color:var(--ink); }
.btn--primary:focus-visible, .btn--secondary:focus-visible { outline-color:var(--focus-inverse); }
.btn__en { font-size:12px; font-weight:700; letter-spacing:.08em; opacity:.92; }

/* ---------- hero ---------- */
.hero { position:relative; background:var(--forest); color:var(--on-red); overflow:hidden; }
.hero__in { position:relative; padding:var(--space-9) 0; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:var(--space-7); align-items:center; }
.hero__copy { min-width:0; }
.hero__eyebrow { color:var(--gold); }
.hero .hero__jp {
  font-family:var(--font-body); font-size:40px; font-weight:700; line-height:1.5;
  color:var(--on-red); margin:0; word-break:keep-all; overflow-wrap:anywhere;
}
.hero__script {
  font-family:var(--font-display); font-size:32px; font-style:italic; font-weight:400;
  line-height:40px; color:var(--gold-pale); margin:var(--space-2) 0 0;
}
.hero__sub { color:var(--gold-pale); margin:var(--space-3) 0 0; font-size:17px; line-height:28px; word-break:keep-all; overflow-wrap:anywhere; }
.hero__cta { display:flex; gap:var(--space-4); flex-wrap:wrap; margin-top:var(--space-6); }
.hero__photo { margin:0; padding:var(--space-3); background:var(--mat); border-radius:var(--radius-xl); }
.hero__photo img { width:100%; height:auto; border-radius:var(--radius-lg); }
.hero__photo figcaption { font-family:var(--font-display); font-size:17px; line-height:26px; color:var(--ink); text-align:center; padding:var(--space-4) var(--space-2) var(--space-1); }

/* ---------- sections ---------- */
.section { padding:var(--space-9) 0; }
.section--tint { background:var(--card); }
.section__head { max-width:44rem; margin:0 0 var(--space-7); }
.section__head .jp-headline { margin-bottom:var(--space-2); }
.about-story { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr); gap:var(--space-8); align-items:start; }
.about-story__photo { margin:0; padding:var(--space-3); background:var(--mat); border-radius:var(--radius-xl); }
.about-story__photo img { width:100%; height:auto; border-radius:var(--radius-lg); }
.about-story__copy { min-width:0; }
.about-story__copy .jp-body { max-width:32em; }
.about-story__copy .card { margin-top:var(--space-6); }

/* ---------- services ---------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:var(--space-5); }
.card {
  background:var(--card); border:1px solid var(--sage); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-card); display:flex; flex-direction:column;
}
.section--tint .card { background:var(--inset); }
.card h3 { font-size:22px; font-weight:700; line-height:34px; margin:0 0 var(--space-2); word-break:keep-all; overflow-wrap:anywhere; }
.card .en-line { margin-top:0; font-size:14px; }
.card p { margin:var(--space-3) 0 0; font-size:15px; line-height:28px; }
.rate__val span { display:block; font-size:13px; line-height:24px; font-weight:500; }

/* one public starting price, shared by every experience */
.price-lead {
  font-size:20px; font-weight:500; line-height:36px; line-break:strict;
  margin:var(--space-6) 0 0; max-width:32em;
}
.price-lead b { font-size:26px; font-weight:700; color:var(--red); }
.price-lead__en { margin-top:var(--space-2); max-width:42rem; }

/* ---------- upcoming Christmas invitations ---------- */
.events { background:var(--card); }
.event-invitation {
  border:1px solid var(--sage); border-radius:var(--radius-lg);
  background:var(--paper); overflow:hidden;
}
.event-invitation + .event-invitation { margin-top:var(--space-5); }
.event-invitation[hidden], .events-empty[hidden] { display:none; }

/* collapsed row: date, title, place and a drawn +/- glyph. Reuses the same
   icon-swap technique as .menu__glyph. Click toggles native <details> state,
   no script involved. */
.event-summary {
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  padding:var(--space-5) var(--space-6); cursor:pointer; list-style:none;
}
.event-summary::-webkit-details-marker { display:none; }
.event-summary:hover { background:var(--card); }
.event-invitation[open] .event-summary { border-bottom:1px solid var(--sage); }
.event-summary__glyph {
  width:24px; height:24px; flex-shrink:0; color:var(--red);
}
.event-summary__glyph svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.event-invitation:not([open]) .event-summary__glyph--minus { display:none; }
.event-invitation[open] .event-summary__glyph--plus { display:none; }
.event-summary__text { display:flex; flex-direction:column; gap:var(--space-1); min-width:0; }
.event-summary__date { font-size:13px; font-weight:700; color:var(--red); }
.event-summary__title { font-size:18px; font-weight:700; line-height:1.4; }
.event-summary__title span { font-weight:500; color:var(--ink-muted); }
.event-summary__place { font-size:14px; color:var(--ink-muted); }

/* expanded content: the same two-column layout the single-event design used */
.event-invitation__panel {
  display:grid; grid-template-columns:240px minmax(0,1fr); padding:var(--space-2);
}
.event-date {
  background:var(--forest); color:var(--on-red); border-radius:var(--radius-md);
  padding:var(--space-7) var(--space-5); text-align:center;
}
.event-date .label { color:var(--gold-pale); }
.event-date__days {
  font-family:var(--font-display); font-size:72px; line-height:1;
  margin:var(--space-6) 0; display:flex; justify-content:center; align-items:center; gap:var(--space-2);
}
.event-date__days span { font-size:26px; color:var(--gold-pale); }
.event-date__english { font-size:13px; }
.event-star { display:block; width:32px; height:32px; margin:var(--space-6) auto 0; color:var(--gold-pale); }
.event-invitation__body { padding:var(--space-6); min-width:0; }
.event-invitation__body > p { max-width:60ch; }
.event-invitation__body > .jp-body { max-width:32em; }
.event-status { margin:0; color:var(--red); font-size:15px; font-weight:700; line-height:26px; }
.event-status span { display:block; font-size:13px; font-weight:500; }
.event-details { margin:var(--space-5) 0 var(--space-6); border-top:1px solid var(--sage); }
.event-details > div { padding-top:var(--space-4); }
.event-details dt { font-weight:700; font-size:14px; }
.event-details dt span { font-weight:400; color:var(--ink-muted); margin-left:var(--space-2); }
.event-details dd { margin:var(--space-1) 0 0; }
.event-details dd span { display:block; color:var(--ink-muted); font-size:14px; line-height:24px; }
.event-details .event-map { display:inline-block; margin-top:var(--space-2); font-weight:700; }
.event-invitation .btn { flex-wrap:wrap; text-align:center; }
.events-empty p { margin:0; }
@media (max-width:650px) {
  .event-invitation__panel { grid-template-columns:minmax(0,1fr); }
  .event-summary { padding:var(--space-4) var(--space-5); }
  .event-date { padding:var(--space-5); }
  .event-date__days { margin:var(--space-4) 0; }
  .event-star { display:none; }
  .event-invitation__body { padding:var(--space-5) var(--space-4); }
}

/* ---------- gallery ---------- */
.gallery { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-4); }
.shot {
  position:relative; background:var(--mat); border-radius:var(--radius-lg);
  overflow:hidden; aspect-ratio:4/5;
}
/* absolute + inset rather than aspect-ratio directly on the <img>: some engines
   size a replaced element's box from its width/height attributes in pixels
   instead of scaling by aspect-ratio, leaving a gap under a shorter image.
   This sidesteps that by giving the ratio to the box and letting the image
   simply fill it. */
.shot img {
  position:absolute; inset:var(--space-1);
  width:calc(100% - var(--space-1)*2); height:calc(100% - var(--space-1)*2);
  object-fit:cover; border-radius:16px;
}

/* ---------- pricing ---------- */
.rate { border-top:1px solid var(--sage); display:flex; gap:var(--space-5); padding:var(--space-4) 0; align-items:baseline; flex-wrap:wrap; }
.rate:first-of-type { border-top:0; }
#pricing .jp-body { max-width:32em; margin-top:var(--space-5); }
#pricing > .wrap > div > p[lang="en"] { max-width:60ch; color:var(--ink-muted); }
.rate__name { flex:1 1 240px; font-size:17px; font-weight:700; line-height:28px; }
.rate__name span { display:block; font-size:13px; font-weight:400; color:var(--ink-muted); }
.rate__val { font-size:22px; font-weight:700; color:var(--red); }
.note {
  margin-top:var(--space-6); background:var(--card); border-left:0; border:1px solid var(--sage);
  border-radius:var(--radius-md); padding:var(--space-5); font-size:15px; line-height:28px;
}
.section--tint .note { background:var(--inset); }

/* ---------- faq ---------- */
.faq details {
  border-bottom:1px solid var(--sage); padding:var(--space-4) 0;
}
.faq summary {
  cursor:pointer; font-size:17px; font-weight:700; line-height:30px; list-style:none;
  display:flex; gap:var(--space-4); align-items:flex-start;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::before { content:"Q"; font-family:var(--font-display); color:var(--red); font-size:20px; line-height:30px; }
.faq details[open] summary { color:var(--red); }
.faq p { margin:var(--space-3) 0 0 var(--space-6); font-size:15px; line-height:30px; }

/* ---------- english block ---------- */
.en-block { background:var(--red-ground); color:var(--on-red); }
.en-block .eyebrow { color:var(--gold); }
.en-block h2 { font-family:var(--font-display); font-size:40px; font-weight:700; line-height:48px; margin:0 0 var(--space-4); }
.en-block p { font-size:17px; line-height:30px; max-width:42rem; }
.en-block a:not(.btn) { color:var(--gold-pale); }
.en-block ul { padding-left:1.2em; margin:var(--space-4) 0 0; }
.en-block li { font-size:16px; line-height:30px; }

/* ---------- form ---------- */
.form { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-5); max-width:760px; }
.field { display:flex; flex-direction:column; gap:var(--space-2); min-width:0; }
.field--wide { grid-column:1 / -1; }
.field label { font-size:14px; font-weight:700; line-height:22px; }
.field label span { font-weight:400; color:var(--ink-muted); font-size:12px; }
.field .req { color:var(--red); font-weight:700; }
.field input, .field select, .field textarea {
  font-family:var(--font-body); font-size:16px; line-height:26px; color:var(--ink);
  background:var(--inset); border:1px solid var(--ink-muted); border-radius:var(--radius-sm);
  padding:var(--space-3); width:100%; min-width:0; max-width:100%;
}
.field textarea { min-height:140px; resize:vertical; }
.form__actions { grid-column:1 / -1; display:flex; gap:var(--space-4); align-items:center; flex-wrap:wrap; }

/* ---------- footer ---------- */
.site-foot { background:var(--forest); color:var(--on-red); padding:var(--space-9) 0 var(--space-7); }
.site-foot a { color:var(--gold-pale); }
.foot__grid { display:flex; gap:var(--space-8); flex-wrap:wrap; justify-content:space-between; }
.foot__grid > div { min-width:0; max-width:100%; }
.foot__name { font-family:var(--font-display); font-size:32px; font-weight:700; line-height:38px; margin:0; }
.foot__jp { font-size:19px; line-height:30px; color:var(--gold-pale); margin:0 0 var(--space-4); }
.foot__contact { font-size:16px; font-weight:700; line-height:30px; letter-spacing:.02em; }
.foot__contact a, a[href^="mailto:"] { overflow-wrap:anywhere; }
.foot__partners { display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap; }
.foot__partners img { height:64px; width:auto; }
.foot__accred { font-size:13px; line-height:22px; color:var(--gold-pale); margin-top:var(--space-3); max-width:22rem; word-break:keep-all; overflow-wrap:anywhere; }
.foot__legal {
  margin-top:var(--space-8); padding-top:var(--space-5); border-top:1px solid var(--sage);
  display:flex; gap:var(--space-5); flex-wrap:wrap; font-size:13px; line-height:24px;
}

/* ---------- folk border ---------- */
.folk { display:block; width:100%; height:28px; }

/* ---------- collapsible menu (shown only where .nav is hidden) ---------- */
/* No script: <details> carries its own expanded/collapsed state and announces it. */
.menu { display:none; position:static; }
.menu__button {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:44px; padding:var(--space-2) var(--space-4);
  font-family:var(--font-body); font-size:14px; font-weight:700; line-height:20px;
  color:var(--ink); background:transparent;
  border:2px solid var(--ink-muted); border-radius:var(--radius-pill);
  cursor:pointer; list-style:none; white-space:nowrap;
}
.menu__button::-webkit-details-marker { display:none; }
.menu__button:hover { background:var(--card); }
/* the glyph is drawn, per the brand's iconography rule — 24px box, 2px currentColor, round caps */
.menu__glyph {
  width:24px; height:24px; flex-shrink:0;
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
}
.menu:not([open]) .menu__glyph--open { display:none; }
.menu[open] .menu__glyph--shut { display:none; }
.menu__panel {
  position:absolute; top:100%; left:0; right:0; z-index:1;
  margin-top:var(--space-2); padding:var(--space-3) var(--space-5);
  background:var(--card); border:1px solid var(--sage);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lift);
  max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain;
}
@supports (max-height: 100dvh) { .menu__panel { max-height:calc(100dvh - 140px); } }
.menu__panel a {
  display:flex; align-items:center; min-height:44px;
  padding:var(--space-2) 0; border-top:1px solid var(--sage);
  font-size:16px; font-weight:700; line-height:28px;
  color:var(--ink); text-decoration:none;
}
.menu__panel a:first-child { border-top:0; }
.menu__panel a:hover { color:var(--red); }
.menu__panel a.en { color:var(--ink-muted); letter-spacing:.06em; }

/* ---------- phones ---------- */
/* phone header keeps the one action that matters */
.nav-cta { display:none; }
@media (max-width:1100px) {
  .nav-cta {
    display:inline-flex; align-items:center; justify-content:center; min-height:44px;
    font-size:14px; font-weight:700; padding:var(--space-2) var(--space-5);
    background:var(--red-fill); color:var(--on-red); border-radius:var(--radius-pill);
    text-decoration:none; white-space:nowrap;
  }
  .nav-cta:hover { background:var(--red-ground); color:var(--on-red); }
  .nav { display:none; }
  .menu { display:block; }
}
@media (max-width: 900px) {
  .gallery { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .hero .hero__jp { font-size:32px; line-height:48px; }
  .hero__script { font-size:25px; line-height:32px; }
  .form { grid-template-columns:minmax(0,1fr); }
  .section { padding:var(--space-8) 0; }
  .hero__in { padding:var(--space-8) 0; grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .hero__photo { max-width:680px; width:100%; }
  .about-story { gap:var(--space-6); }
  .jp-headline { font-size:26px; line-height:42px; }
  .foot__grid { gap:var(--space-6); }
}
@media (max-width:650px) {
  .about-story { grid-template-columns:minmax(0,1fr); }
  .about-story__photo { max-width:400px; width:100%; margin-inline:auto; }
  .hero .hero__jp { font-size:28px; line-height:42px; }
  .hero__cta .btn { flex-wrap:wrap; }
}
@media (max-width:480px) {
  .wrap { width:calc(100% - 32px); }
  .site-head__in { gap:var(--space-3); flex-wrap:wrap; }
  .brand { gap:var(--space-2); }
  .brand b { font-size:19px; }
  .nav-cta { padding-inline:var(--space-3); }
  .menu__word { display:none; }
  .menu__button { padding-inline:var(--space-3); }
  .menu__panel { left:var(--space-1); right:var(--space-1); }
  .gallery { grid-template-columns:minmax(0,1fr); }
  .en-block h2 { font-size:30px; line-height:40px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .btn { transition:none; }
}