/* =====================================================================
   STUDIO BENGUAR — renewal top page prototype
   Single responsive stylesheet. No framework.
   ===================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { line-height: 1.75; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Tokens ---------- */
:root {
  --paper:      #f5f1ea;   /* warm off-white — main background */
  --paper-2:    #ece5d9;   /* deeper panel */
  --ink:        #26221e;   /* primary text */
  --ink-soft:   #6a6155;   /* secondary text */
  --line:       #d7cfbf;   /* hairlines */
  --dark:       #1b1815;   /* dark sections */
  --on-dark:    #ece5d8;
  --on-dark-soft:#9b9282;
  --accent:     #8a6a45;   /* taupe / brown */
  --sage:       #6f7657;   /* muted green — used sparingly */

  --serif: "Cormorant Garamond", "Zen Old Mincho", "Times New Roman", serif;
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "YuMincho", "Noto Serif JP", serif;
  --sans:  "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --shell:   min(1280px, 100% - 2 * clamp(1.25rem, 6vw, 6rem));
  --header-h: 4.75rem;
}

/* ---------- Base ---------- */
body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
}
html { overflow-x: clip; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.shell { width: var(--shell); margin-inline: auto; }

.skip-link {
  position: fixed; left: 1rem; top: -100%; z-index: 200;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 2px;
}
.skip-link:focus { top: 1rem; }

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

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--serif);
  font-size: .8rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: ""; display: inline-block;
  width: 2.2rem; height: 1px; background: currentColor;
  vertical-align: middle; margin-right: .9em; margin-bottom: .18em;
}
.eyebrow--light { color: var(--on-dark-soft); }

.heading-en {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: .01em;
}
.heading-jp {
  font-family: var(--mincho);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
}

.section { padding-block: clamp(5rem, 13vw, 10.5rem); }
.section__head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

/* =====================================================================
   Header
   ===================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
  color: var(--on-dark);
}
.site-header::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 240%;
  background: linear-gradient(to bottom, rgba(20,17,14,.5), rgba(20,17,14,0));
  pointer-events: none; z-index: -1; transition: opacity .4s ease;
}
.site-header.is-solid::before { opacity: 0; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h);
}
.site-header.is-solid {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

.brand { display: inline-flex; align-items: center; gap: .7rem; }
.brand__mark {
  font-family: var(--serif); font-weight: 600; font-size: 1.15rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
}
.brand__name {
  font-family: var(--serif); font-weight: 500;
  letter-spacing: .22em; font-size: .95rem;
}

/* nav */
.nav-list { display: flex; gap: clamp(1.4rem, 2.6vw, 2.6rem); }
.nav-list a {
  font-family: var(--serif);
  font-size: .82rem; letter-spacing: .2em; text-transform: uppercase;
  position: relative; padding-block: .3rem;
}
.nav-list a span { display: none; }
.nav-list a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
.nav-list a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-toggle { display: none; align-items: center; gap: .6rem; }
.nav-toggle__label { font-family: var(--serif); font-size: .8rem; letter-spacing: .2em; }
.nav-toggle__bars { position: relative; width: 26px; height: 12px; }
.nav-toggle__bars i {
  position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor;
  transition: transform .35s ease, opacity .25s ease;
}
.nav-toggle__bars i:nth-child(1) { top: 0; }
.nav-toggle__bars i:nth-child(2) { top: 5px; }
.nav-toggle__bars i:nth-child(3) { top: 10px; }
.nav-panel__foot { display: none; }

/* ---- mobile / tablet nav ---- */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    position: fixed; inset: 0; z-index: -1;
    background: var(--paper); color: var(--ink);
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--header-h) clamp(1.5rem, 8vw, 4rem) 3rem;
    opacity: 0; visibility: hidden; transform: translateY(-1.5rem);
    transition: opacity .4s ease, transform .4s ease, visibility .4s;
  }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list li { border-bottom: 1px solid var(--line); }
  .nav-list li:first-child { border-top: 1px solid var(--line); }
  .nav-list a {
    display: flex; align-items: baseline; gap: 1rem;
    padding-block: 1.15rem; font-size: 1.15rem; letter-spacing: .16em;
  }
  .nav-list a::after { display: none; }
  .nav-list a span {
    display: inline; font-family: var(--sans); font-size: .72rem;
    letter-spacing: .12em; color: var(--ink-soft); text-transform: none;
  }
  .nav-panel__foot {
    display: block; margin-top: 2.5rem;
    font-size: .78rem; letter-spacing: .06em; color: var(--ink-soft);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav-panel { opacity: 1; visibility: visible; transform: none; }
  /* keep toggle readable above the open panel */
  body.nav-open .site-header { color: var(--ink); }
  body.nav-open .nav-toggle__bars i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  body.nav-open .nav-toggle__bars i:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle__bars i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  color: var(--on-dark);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 72%;
  animation: heroZoom 24s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: scale(1.02); }
  to   { transform: scale(1.12); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom, rgba(18,16,14,.52) 0%, rgba(18,16,14,.12) 26%, rgba(18,16,14,0) 44%),
    linear-gradient(to top, rgba(18,16,14,.80) 0%, rgba(18,16,14,.16) 56%, rgba(18,16,14,.30) 100%);
}
.hero__inner {
  position: relative; z-index: 2; width: var(--shell);
  padding-bottom: clamp(4.5rem, 12vh, 8rem);
  text-shadow: 0 1px 26px rgba(0,0,0,.35);
}
.hero .eyebrow--light { color: rgba(240,236,228,.82); }
.hero__title {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3.2rem, 12vw, 8.5rem);
  line-height: .98; letter-spacing: .02em;
  text-shadow: 0 2px 30px rgba(0,0,0,.25);
}
.hero__sub {
  margin-top: 1.4rem;
  font-family: var(--serif); font-size: clamp(1rem, 2.4vw, 1.4rem);
  letter-spacing: .32em; text-transform: uppercase;
}
.hero__note {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 1.6rem;
}
.hero__note span {
  display: block; width: var(--shell); margin-inline: auto;
  font-family: var(--mincho); font-size: .82rem; letter-spacing: .3em;
  color: var(--on-dark-soft);
}
.hero__scroll {
  position: absolute; z-index: 2; right: clamp(1.25rem, 6vw, 6rem); bottom: clamp(4.5rem, 12vh, 8rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
  writing-mode: vertical-rl;
  font-family: var(--serif); font-size: .68rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--on-dark-soft);
}
.hero__scroll i { width: 1px; height: 3.2rem; background: currentColor; overflow: hidden; position: relative; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--on-dark);
  animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine {
  0%   { transform: translateY(-100%); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* =====================================================================
   Concept
   ===================================================================== */
.section--concept { padding-top: clamp(6rem, 16vw, 12rem); padding-bottom: clamp(5rem, 12vw, 8.5rem); }
.concept__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.concept__lead { font-size: clamp(1.8rem, 4.6vw, 3.1rem); color: var(--ink); }
.concept__body { max-width: 44ch; color: var(--ink-soft); font-size: 1.02rem; line-break: strict; word-break: auto-phrase; }
.concept__body p + p { margin-top: 1.3rem; }

@media (min-width: 900px) {
  .concept__grid { grid-template-columns: 1.05fr .95fr; column-gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
  .concept__body { padding-top: .5rem; }
}

/* =====================================================================
   Studio
   ===================================================================== */
.section--studio { background: var(--paper-2); }
.studio__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.studio__figure { overflow: hidden; }
.studio__figure img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%;
  transition: transform 1.2s ease;
}
.studio__figure:hover img { transform: scale(1.04); }
.studio__desc { margin-top: 1.4rem; color: var(--ink-soft); max-width: 42ch; }
.spec {
  margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  font-family: var(--serif); font-size: .82rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.spec li { position: relative; padding-left: 1rem; }
.spec li::before { content: ""; position: absolute; left: 0; top: .55em; width: .3rem; height: .3rem; background: var(--sage); border-radius: 50%; }

@media (min-width: 900px) {
  .studio__grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Services
   ===================================================================== */
.svc-list { border-top: 1px solid var(--line); }
.svc {
  display: grid; grid-template-columns: 1fr; gap: .25rem;
  padding-block: clamp(1.6rem, 3.6vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
.svc__en {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem); line-height: 1.2;
}
.svc__jp { font-family: var(--mincho); font-size: .95rem; letter-spacing: .1em; color: var(--ink); }
.svc__desc { font-size: .85rem; line-height: 1.7; color: var(--ink-soft); }

@media (min-width: 820px) {
  .svc {
    grid-template-columns: minmax(0, 1fr) clamp(12rem, 24vw, 19rem);
    grid-template-areas: "en desc" "jp desc";
    align-items: baseline; column-gap: 2.5rem;
  }
  .svc__en { grid-area: en; }
  .svc__jp { grid-area: jp; }
  .svc__desc { grid-area: desc; text-align: right; }
}

/* =====================================================================
   Works
   ===================================================================== */
.section--works { background: var(--dark); color: var(--on-dark); }
.section--works .heading-en { color: var(--on-dark); }
.works__lead {
  margin-top: 1.4rem; font-family: var(--mincho);
  color: var(--on-dark-soft); letter-spacing: .08em; line-height: 1.9;
  line-break: strict; word-break: auto-phrase;
}
/* fields list on the dark home Works section — reuses .svc-list / .svc-item */
.section--works .svc-list { border-top-color: rgba(255, 255, 255, .14); }
.section--works .svc-item { border-bottom-color: rgba(255, 255, 255, .14); }
.section--works .svc-item__jp { color: var(--on-dark-soft); }
.section--works .link-more { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* =====================================================================
   Price
   ===================================================================== */
.section--price { text-align: center; padding-block: clamp(5rem, 12vw, 9rem); }
.price__inner .eyebrow { display: inline-block; }
.price__inner .eyebrow::before { display: none; }
.price__text { font-size: clamp(1.4rem, 3.6vw, 2.3rem); max-width: 26ch; margin-inline: auto; }
.price__sub { margin-top: 1.2rem; color: var(--ink-soft); font-size: .95rem; }
.section--price .link-more { margin-top: 2.4rem; }

/* =====================================================================
   Access
   ===================================================================== */
.section--access { background: var(--paper-2); }
.access__grid { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.access__addr {
  margin-top: 1.6rem; font-family: var(--mincho); font-size: 1.05rem;
  line-height: 2; letter-spacing: .08em;
}
.access__stations { margin-top: 1.2rem; font-size: .86rem; letter-spacing: .1em; color: var(--ink-soft); }
.access__links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.access__links .link-more { margin-top: 2rem; }
.access__links .link-more + .link-more { margin-top: 0; }
.access__map {
  position: relative; color: var(--accent);
  border: 1px solid var(--line); background: var(--paper);
  aspect-ratio: 4 / 3;
}
.access__map svg { width: 100%; height: 100%; }
.access__map-label {
  position: absolute; left: 1rem; bottom: .8rem;
  font-family: var(--serif); font-size: .7rem; letter-spacing: .3em; color: var(--ink-soft);
}
@media (min-width: 900px) { .access__grid { grid-template-columns: 1fr 1fr; } }

/* =====================================================================
   Contact
   ===================================================================== */
.section--contact {
  background: var(--dark); color: var(--on-dark);
  text-align: center; padding-block: clamp(6rem, 15vw, 11rem);
}
.contact__title { color: var(--on-dark); font-size: clamp(2.6rem, 8vw, 5.5rem); }
.contact__text { margin-top: 1.6rem; color: var(--on-dark-soft); letter-spacing: .06em; }
.btn {
  display: inline-block; margin-top: 2.6rem;
  padding: 1rem 3.4rem;
  font-family: var(--serif); font-size: .95rem; letter-spacing: .28em; text-transform: uppercase;
  border: 1px solid var(--on-dark-soft); color: var(--on-dark);
  transition: background-color .4s ease, color .4s ease, border-color .4s ease;
}
.btn:hover { background: var(--on-dark); color: var(--dark); border-color: var(--on-dark); }
.contact__mail { margin-top: 1.6rem; font-family: var(--serif); font-size: .85rem; letter-spacing: .2em; color: var(--on-dark-soft); }

/* =====================================================================
   Link "more"
   ===================================================================== */
.link-more {
  display: inline-flex; align-items: center; gap: .8rem; margin-top: 2rem;
  font-family: var(--serif); font-size: .85rem; letter-spacing: .24em; text-transform: uppercase;
  padding-bottom: .35rem; border-bottom: 1px solid currentColor;
}
.link-more i { width: 1.8rem; height: 1px; background: currentColor; position: relative; transition: width .35s ease; }
.link-more i::after {
  content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}
.link-more:hover i { width: 2.8rem; }
.link-more--light { color: var(--on-dark); }

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer { background: var(--dark); color: var(--on-dark-soft); padding-block: clamp(3rem, 7vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.08); }
.site-footer__inner { display: grid; gap: 1.6rem; }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: .9rem; color: var(--on-dark); }
.site-footer__brand .brand__name { font-size: 1rem; }
.site-footer__jp { font-family: var(--mincho); font-size: .8rem; letter-spacing: .12em; }
.site-footer__addr { font-size: .82rem; letter-spacing: .06em; }
.site-footer__addr a:hover { color: var(--on-dark); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.site-footer__nav a { font-family: var(--serif); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.site-footer__nav a:hover { color: var(--on-dark); }
.site-footer__copy { font-family: var(--serif); font-size: .72rem; letter-spacing: .2em; }

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand nav" "addr copy";
    align-items: center;
  }
  .site-footer__brand { grid-area: brand; }
  .site-footer__addr { grid-area: addr; }
  .site-footer__nav { grid-area: nav; justify-content: flex-end; }
  .site-footer__copy { grid-area: copy; text-align: right; }
}

/* =====================================================================
   Scroll reveal
   ===================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s ease, transform 1s ease; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hero__media img { animation: none; }
  .hero__scroll i::after { animation: none; }
  .studio__figure:hover img { transform: none; }
  .room__media img,
  .floor__frame img { transition: none; }
}

/* =====================================================================
   STUDIO page (studio.html) — reuses header / footer / tokens / .section
   ===================================================================== */

/* shared Japanese line-breaking helper */
.jp-text { line-break: strict; word-break: auto-phrase; }

/* sub-pages: solid header from the top (home page keeps the transparent-over-hero look) */
body.subpage .site-header { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
body.subpage .site-header::before { opacity: 0; }

/* page hero — shorter than the home hero, smaller title */
.hero--page { min-height: 74vh; }
.hero--page .hero__title { font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.05; }
.hero--page .hero__sub { margin-top: 1.2rem; }
.hero--page .hero__media img { object-position: center 58%; }
@media (max-width: 767px) { .hero--page { min-height: 64vh; } }

/* intro reuses .concept__grid / .concept__lead / .concept__body */

/* --- Control rooms --- */
.rooms { display: grid; gap: clamp(3.5rem, 9vw, 7rem); }
.room { display: grid; gap: clamp(1.8rem, 5vw, 3.5rem); align-items: start; }
.room__visual { overflow: hidden; }
.room__visual img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; transition: transform 1.2s ease; }
.room__visual:hover img { transform: scale(1.04); }
.room__plate {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; background: var(--paper); border: 1px solid var(--line);
  font-family: var(--serif); font-weight: 500; color: var(--accent);
  font-size: clamp(4.5rem, 14vw, 8.5rem); line-height: 1;
}
.room__label { font-family: var(--serif); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.room__title { margin-top: 1rem; font-family: var(--serif); font-weight: 500; font-size: clamp(1.6rem, 3.8vw, 2.3rem); line-break: strict; word-break: auto-phrase; }
.room__desc { margin-top: 1.1rem; color: var(--ink-soft); max-width: 42ch; }
@media (min-width: 900px) {
  .room { grid-template-columns: 1fr 1fr; align-items: center; }
  .room--reverse .room__visual { order: 2; }
}

/* --- Booths --- */
.booth-grid { display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); margin-top: clamp(2rem, 5vw, 3rem); }
@media (min-width: 700px) { .booth-grid { grid-template-columns: 1fr 1fr; } }
.booth { border-top: 1px solid var(--line); padding-top: 1.3rem; }
.booth__name { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; letter-spacing: .04em; }
.booth__meta { margin-top: .55rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; }
.booth-note { margin-top: clamp(2rem, 5vw, 3rem); color: var(--ink-soft); max-width: 52ch; }

/* "Show the space" photos, mobile only -- HOME's .studio__figure (Studio
   intro photo) and STUDIO's .room__visual / .photo-frame (Control Rooms /
   Booths). These are the large photos meant to read bigger than the body
   text, so each breaks out past the shell's side padding instead of
   inheriting it like ordinary content -- every text block keeps the shell
   gutter untouched. 6px is the confirmed shared target for every such
   photo (went 14px -> 10px -> 4px during comparison, settled on 6px;
   .studio__figure previously had no breakout at all, which is why HOME
   and STUDIO once looked inconsistent on a real device even though the
   Room/Booth math itself was already landing exactly on its old 14px
   target). Each selector reuses its own
   component's existing single-column breakpoint -- 900px is both
   .studio__grid's and .room's own 2-up switch, 700px is .booth-grid's --
   instead of introducing a new one. Photo ratio/object-fit are unchanged;
   PC (>=900px / >=700px) is unaffected. */
@media (max-width: 899px) {
  .studio__figure,
  .room__visual {
    width: calc(100vw - 12px);
    margin-inline: calc(50% - 50vw + 6px);
  }
}
@media (max-width: 699px) {
  .booth .photo-frame {
    width: calc(100vw - 12px);
    margin-inline: calc(50% - 50vw + 6px);
  }
}

/* Photo placeholders — temporary numbered frames reserving space for
   future photography. Quiet and undecorated (no radius/shadow) so they
   read as production markers, not finished design. Replace the element
   with a real <img> when the shot is ready; see PHOTO_SHOT_LIST.md.
   PC-only (from 1024px) across every instance (PHOTO 02–12), so a page
   doesn't grow long on mobile while waiting on real photography; the
   HOME hero photo (PHOTO 01) is a real <img>, not a .photo-placeholder,
   and is unaffected. */
.photo-placeholder {
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem; text-align: center;
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.photo-placeholder__num {
  font-family: var(--serif); letter-spacing: .3em; text-transform: uppercase;
  font-size: .78rem; color: var(--accent);
}
.photo-placeholder__label {
  font-size: .78rem; letter-spacing: .04em; color: var(--ink-soft);
}
@media (min-width: 1024px) {
  .photo-placeholder { display: flex; }
  /* Booths: each booth card carries its own photo-frame (PHOTO 04A / 04B)
     stacked above its text — add the gap only where the photo is actually
     visible (PC), so mobile (photo hidden) keeps its existing spacing. */
  .booth .photo-frame { margin-bottom: 1.2rem; }
}

/* Photo slot — the real <img> counterpart of .photo-placeholder. It sits
   as the next sibling of a .photo-placeholder, pointing at the fixed
   filename for its PHOTO number, under images/site-photos in the site
   root, and marked [hidden] in the HTML. js/main.js reveals it (and hides
   the placeholder) once it has actually loaded, so dropping in a
   same-named file is the entire replace-the-photo workflow — no HTML/CSS edits.
   If the file is still missing, the image never loads and the numbered
   placeholder above keeps showing. The `!important` guards make [hidden]
   win even though .photo-placeholder sets its own `display` per breakpoint. */
.photo-slot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-slot[hidden] { display: none !important; }
.photo-placeholder[hidden] { display: none !important; }

/* --- Floor plan --- */
.floor__frame {
  margin-top: clamp(2rem, 5vw, 3.5rem);
  max-width: 560px;
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(1.75rem, 5vw, 3rem);
  display: flex; justify-content: center;
}
.floor__frame img { width: 100%; max-width: 420px; mix-blend-mode: multiply; }
.floor__notes { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .84rem; letter-spacing: .06em; color: var(--ink-soft); }
.floor__notes li { position: relative; padding-left: .95rem; }
.floor__notes li::before { content: ""; position: absolute; left: 0; top: .5em; width: .28rem; height: .28rem; border-radius: 50%; background: var(--sage); }

/* --- Equipment (restrained spec list, not a dense table) --- */
.equip { border-top: 1px solid var(--line); margin-top: clamp(2rem, 5vw, 3rem); }
.equip > div { display: grid; grid-template-columns: 1fr; gap: .3rem; padding-block: clamp(1.3rem, 3vw, 1.9rem); border-bottom: 1px solid var(--line); }
.equip dt { font-family: var(--serif); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.equip dd { margin: 0; color: var(--ink); line-height: 1.7; line-break: strict; word-break: auto-phrase; }
@media (min-width: 760px) {
  .equip > div { grid-template-columns: 13rem 1fr; align-items: baseline; column-gap: 2.5rem; }
}

/* --- section tints for this page --- */
.section--rooms { background: var(--paper-2); }
.section--floor { background: var(--paper-2); }

/* =====================================================================
   SERVICES page (services.html) — reuses header / footer / tokens / .section
   ===================================================================== */

/* generic paper-2 tint for alternating sections */
.section--tint { background: var(--paper-2); }

/* text-only page head (no hero image) */
.page-head {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 11vw, 8rem));
  padding-bottom: clamp(3.5rem, 10vw, 7rem);
}
.page-head__title {
  margin-top: .4rem;
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: 1.1;
}
/* contact-send.php's "送信できませんでした" error heading only -- added via
   an extra class on that one <h1>, not validation_error_page()'s own
   heading or thanks.html's success heading, which both keep the shared
   clamp above untouched. Below ~526px that clamp is pinned at its 2.3rem
   floor regardless of width, and this specific 10-character string just
   overflows the available text column there, wrapping the final "た" onto
   its own second line alone. 1.85rem is the largest size that measured a
   clean single line with real safety margin (not just barely fitting) at
   360/375/390px, verified via Range.getClientRects() on the text node
   (not .getClientRects() on the h1 itself, which only reports the block's
   own box, not where the text actually wraps). PC and every other
   .page-head__title instance are unaffected. */
@media (max-width: 480px) {
  .page-head__title--error { font-size: 1.85rem; }
}
.page-head__lead {
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 44ch; color: var(--ink-soft); font-size: 1.02rem;
}
/* Desktop only: the clamps above settle at their max well before 1024px,
   leaving a tall near-empty first screen on laptop/desktop widths. Tighten
   the top/bottom padding and the lead's offset there so the next section's
   opening is visible on load; heading size, alignment and mobile are untouched. */
@media (min-width: 1024px) {
  .page-head {
    padding-top: calc(var(--header-h) + 2.75rem);
    padding-bottom: 2.25rem;
  }
  .page-head__lead { margin-top: 1.4rem; }
  /* the section right after page-head also carries its own generous top
     padding (up to 9rem); on longer, multi-line titles that stacks with the
     page-head padding above and pushes the next heading below the fold. */
  .page-head + .section--svc,
  .page-head + .section--fields {
    padding-top: 1.75rem;
  }
}

/* Page-head photo variant — shared across service detail pages (Casting,
   Narration, etc.) that have exactly one representative photo: it sits to
   the right of the page head only, never inside a body section, so every
   detail page follows the same rule regardless of whether it has a photo.
   Scoped to .page-head--photo; plain .page-head (every other page) and the
   rules above are untouched. .page-head__media reuses the existing
   .photo-placeholder/.photo-slot pair, so it is PC-only by the same
   convention as everywhere else -- on mobile it collapses to nothing and
   .page-head__text simply stacks on its own, no extra markup needed. */
.page-head--photo .page-head__media { margin-top: clamp(2rem, 5vw, 3rem); }
/* Placeholder-number slots (no real photo yet) are normally PC-only
   (.photo-placeholder defaults to display:none below 1024px, used site-wide
   for in-body media like Booths/Access). The page-head photo slot is the one
   exception: it must stack visibly on mobile too, same as a page that
   already has its real photo loaded (the <img> there has no such
   restriction), so layout comparison works consistently across every
   detail page regardless of whether its photo exists yet. Scoped to
   .page-head--photo only -- every other .photo-placeholder use is unaffected. */
.page-head--photo .photo-placeholder { display: flex; }
@media (min-width: 1024px) {
  .page-head--photo .page-head__grid {
    display: grid;
    /* Was clamp(260px,28vw,360px) -- read as a small photo floating far
       from the heading with a large dead gap beside it. Sized up so the
       photo carries roughly as much visual weight as the heading/lead
       column: ~540px at 1440px (the 520-560px target), a touch larger on
       bigger screens, without shrinking below ~340px right at the 1024px
       floor where the heading column needs the room most. Gap trimmed
       alongside it so the two columns read as a pair, not text-then-a-
       large-gap-then-photo. */
    grid-template-columns: 1fr clamp(340px, 37.5vw, 620px);
    column-gap: clamp(2.5rem, 5vw, 4rem);
    align-items: start;
  }
  /* align-items:start alone would line the photo up with the eyebrow label
     (the text column's actual top) -- push it down past the eyebrow to the
     H1's own top instead, measured as the fixed gap between the eyebrow's
     top and the H1's top (eyebrow height + the H1's margin-top; neither
     uses vw/clamp, so this gap doesn't change across >=1024px widths). */
  .page-head--photo .page-head__media { margin-top: 48px; }
}

/* Desktop-only section rhythm fix: every section wrapper below sets a full
   padding-block (top AND bottom) sized for standing alone. Two of them
   stacked back to back therefore ADD their padding together (bottom of one
   + top of the next), roughly doubling the gap a single section was tuned
   for -- on PC this reads as unfinished/template-like empty space, especially
   on shorter pages. Mobile never stacks these as tightly against each other
   visually (narrower measure, more natural scroll rhythm) and already reads
   fine, so this is scoped to 1024px+ only; the clamp() minimums (which is
   what mobile/small-desktop actually renders) are untouched. Internal
   spacing (svc-cat__head margins, rate-list rows, etc.) is unchanged --
   only the outer section padding that was causing the additive stacking. */
@media (min-width: 1024px) {
  .section--svc,
  .section--fields {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }
  .price-strip,
  .contact-access {
    padding-block: clamp(2rem, 4vw, 3.5rem);
  }
  /* kept the largest of the group on purpose -- it is the page's closing
     statement (dark, full-bleed), not a mid-page content section -- but
     still cut well below its old max so it doesn't read as a second
     "half-empty screen" stacked on top of the section before it. */
  .section--contact {
    padding-block: clamp(4rem, 8vw, 6.5rem);
  }
}

/* category block */
.section--svc { padding-block: clamp(4.5rem, 12vw, 9rem); }
.svc-cat__head { margin-bottom: clamp(2.5rem, 6vw, 4rem); max-width: 62ch; }
.svc-cat__num {
  font-family: var(--serif); font-size: .95rem; letter-spacing: .3em;
  color: var(--accent);
}
.svc-cat__name { margin-top: .7rem; font-size: clamp(1.9rem, 5vw, 3.2rem); line-height: 1.12; }
.svc-cat__jp {
  margin-top: .5rem; font-family: var(--mincho); font-size: 1rem;
  letter-spacing: .12em; color: var(--ink);
}
.svc-cat__lead { margin-top: 1.5rem; color: var(--ink-soft); line-height: 1.9; }
.svc-cat__note { margin-top: 1.6rem; font-size: .86rem; color: var(--ink-soft); }

/* Optional photo beside a category head — opt-in per section (wrap
   .svc-cat__head and add .svc-cat__media only where a suitable photo
   exists). Sections that omit .svc-cat__media are unaffected: .svc-cat__head
   simply keeps its own margin-bottom as before. The photo is PC-only
   (from 1024px, side by side); below that it is hidden entirely, not
   just stacked, so mobile stays text-only as before. */
.svc-cat__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.svc-cat__grid .svc-cat__head { margin-bottom: 0; }
.svc-cat__media { display: none; overflow: hidden; }
.svc-cat__media img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%;
}
@media (min-width: 1024px) {
  .svc-cat__grid {
    grid-template-columns: 1fr 1.15fr;
    column-gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .svc-cat__media { display: block; }
}

/* Access "04 Arrival" (#arrival) PHOTO 12 only, PC only -- the left column
   grew (arrival guidance text added beside it) but the photo was still the
   standard 4:3, so it kept reading visually heavier than the text once the
   text ran out. Column width/position and the 2-col layout are untouched;
   only this one image's own box gets shorter/wider (~17% less tall than
   4:3, same width), via aspect-ratio + object-fit:cover so it crops rather
   than distorts. Scoped to #arrival, not the shared .svc-cat__media rule
   above, so no other svc-cat__media photo is affected. object-position
   left at the shared center/60% -- verified by screenshot that the
   entrance signboard still reads cleanly at the new, shorter crop. */
@media (min-width: 1024px) {
  #arrival .svc-cat__media img {
    aspect-ratio: 8 / 5;
  }
  /* .svc-cat__grid uses align-items:start, so both columns start at the
     grid's own top by default -- that lines the photo up with "04" (the
     head column's first child), not with the "Arrival" heading below it.
     Measured via DOM (getBoundingClientRect): the H2's top sat 37.78px
     below the grid/media top at 1440px, so push the media column down by
     that exact amount. ".svc-cat__num"'s own size doesn't use vw/clamp, so
     this gap is a fixed px value, not a per-viewport one. */
  #arrival .svc-cat__media {
    margin-top: 37.78px;
  }
}

/* Access "04 Arrival" (#arrival) PHOTO 12 only, mobile only -- the one
   exception to the sitewide ".svc-cat__media { display:none }" below
   1024px (every other svc-cat__media instance -- none currently exist
   elsewhere, but the rule stays scoped to #arrival regardless -- keeps
   its mobile-hidden default). Shown using the same "large photo" breakout
   convention already used for HOME's .studio__figure and STUDIO's
   .room__visual/.photo-frame: the photo alone breaks out to a 6px edge
   gap (confirmed; went 14px -> 10px -> 4px during comparison) while
   .svc-cat__head/.arrival-list keep the ordinary shell padding.
   .svc-cat__grid's own existing `gap` already spaces it from the text
   above once it's visible, so no extra margin-top is added here. No
   aspect-ratio override either -- the PC-only 8/5 trim and the PC-only
   heading-alignment margin-top above are both scoped inside
   min-width:1024px, so they simply don't apply here; mobile falls back to
   the shared .svc-cat__media img 4:3 ratio on its own. */
@media (max-width: 1023px) {
  #arrival .svc-cat__media {
    display: block;
    width: calc(100vw - 12px);
    margin-inline: calc(50% - 50vw + 6px);
  }
}

/* Text-only detail pages (no photo yet): let the category head use most of
   the shell width on PC instead of sitting in a narrow 62ch column with a
   large empty gap beside it. Opt in per page via body.svc-wide — pages that
   later gain a .svc-cat__grid / .svc-cat__media section for a given block
   simply don't need this, since that block's head is capped by the grid
   column instead. */
@media (min-width: 1024px) {
  .svc-wide .svc-cat__head { max-width: 72%; }
}

/* representative service list — hairlines, no cards, no icons.
   .svc-list is defined once in the Services section above. */
.svc-item {
  display: grid; grid-template-columns: 1fr; gap: .15rem;
  padding-block: clamp(.95rem, 2.4vw, 1.35rem);
  border-bottom: 1px solid var(--line);
}
.svc-item > a { display: contents; color: inherit; }
.svc-item__en {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.25;
}
.svc-item__jp { font-size: .86rem; color: var(--ink-soft); line-break: strict; word-break: auto-phrase; }
.svc-item--key .svc-item__en { position: relative; }
.svc-item--key .svc-item__en::after {
  content: "\2192"; margin-left: .6em; font-size: .8em;
  color: var(--accent); opacity: .55; transition: opacity .3s ease, margin-left .3s ease;
}
.svc-item--key:hover .svc-item__en::after { opacity: 1; margin-left: .9em; }
.svc-item--key:hover .svc-item__en { text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }

@media (min-width: 720px) {
  .svc-item {
    grid-template-columns: minmax(0, 16.5rem) 1fr;
    align-items: baseline; column-gap: 2.5rem;
  }
}

/* Remote & Delivery — three ways to work, each with a line of context */
.svc-flow { border-top: 1px solid var(--line); }
.svc-flow__item {
  display: grid; grid-template-columns: 1fr; gap: .3rem;
  padding-block: clamp(1.4rem, 3.4vw, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.svc-flow__item .svc-item__jp { margin-top: -.1rem; }
.svc-flow__desc { margin-top: .5rem; color: var(--ink-soft); font-size: .92rem; line-height: 1.8; max-width: 52ch; }
@media (min-width: 820px) {
  .svc-flow__item {
    grid-template-columns: 16rem 1fr;
    grid-template-areas: "en desc" "jp desc";
    column-gap: 2.5rem; align-items: baseline;
  }
  .svc-flow__item .svc-item__en { grid-area: en; }
  .svc-flow__item .svc-item__jp { grid-area: jp; }
  .svc-flow__desc { grid-area: desc; margin-top: 0; }
}

/* slim PRICE 導線 */
.price-strip { text-align: center; padding-block: clamp(3.5rem, 9vw, 6.5rem); background: var(--paper-2); }
.price-strip .eyebrow { display: inline-block; }
.price-strip .eyebrow::before { display: none; }
.price-strip__text {
  font-family: var(--mincho); font-size: clamp(1.15rem, 3vw, 1.6rem);
  letter-spacing: .06em; color: var(--ink);
}
.price-strip .link-more { margin-top: 1.8rem; }

/* =====================================================================
   PRICE page (price.html) — reuses .page-head / .svc-cat__* / .section--svc
   Minimum-only rates; numbers are kept quiet, never headline-sized.
   ===================================================================== */
.rate-list { border-top: 1px solid var(--line); }
.rate {
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 2rem; row-gap: .1rem;
  padding-block: clamp(1.15rem, 2.8vw, 1.65rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.rate__name {
  grid-column: 1; font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); line-height: 1.25;
}
.rate__jp {
  display: block; margin-top: .15rem;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .04em; color: var(--ink-soft);
}
.rate__price {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-family: var(--serif); font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--ink); white-space: nowrap;
}
.rate__from {
  font-size: .62em; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-right: .55em;
}
.rate__unit { font-size: .7em; color: var(--ink-soft); }
.rate__price--quote {
  font-family: var(--sans); font-size: .84rem; letter-spacing: .04em;
  color: var(--ink-soft);
}
.rate-note {
  margin-top: 1.6rem; max-width: 54ch;
  font-size: .86rem; line-height: 1.9; color: var(--ink-soft);
}
/* narrow screens: drop the price onto its own line so the name never gets cramped */
@media (max-width: 560px) {
  .rate { grid-template-columns: 1fr; }
  .rate__price { grid-column: 1; grid-row: auto; align-self: start; margin-top: .55rem; }
}

/* =====================================================================
   WORKS page (works.html) — reuses .page-head / .section__head / .svc-list.
   Typography only: a hairline list of the fields BENGUAR has worked in.
   No work counts, no titles, no cover images.
   ===================================================================== */
.page-head__en {
  margin-top: .9rem;
  font-family: var(--serif); font-size: clamp(1rem, 2.4vw, 1.3rem);
  letter-spacing: .04em; color: var(--ink);
}

/* fields of work — quiet hairline list, shares .svc-list / .svc-item */
.section--fields { padding-block: clamp(4.5rem, 12vw, 9rem); }
.fields__lead {
  margin-top: 1.5rem; max-width: 48ch;
  color: var(--ink-soft); line-height: 1.9;
}

/* =====================================================================
   ACCESS page (access.html) — reuses .page-head / .svc-cat__* / .rate-list
   / .access__map. Practical first: address, stations, one Maps link.
   No embedded map service, no coloured map UI.
   ===================================================================== */

/* address — plain, selectable, no card */
.address { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.address__name {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: .02em;
}
.address__lines {
  margin-top: .9rem;
  font-family: var(--mincho);
  font-size: clamp(1.15rem, 3.2vw, 1.6rem); line-height: 1.95; letter-spacing: .05em;
  color: var(--ink);
}
.address__en {
  margin-top: 1rem;
  font-size: .82rem; letter-spacing: .03em; color: var(--ink-soft);
}

/* nearest stations reuse .rate-list / .rate; walk time sits in .rate__price */
#stations .rate__price {
  font-family: var(--mincho); font-size: clamp(.95rem, 2.2vw, 1.15rem);
  letter-spacing: .04em;
}

/* map — small framed abstract map + a single Maps link, never full-bleed */
.map-frame { max-width: 480px; margin-top: clamp(2rem, 5vw, 3rem); }
.map-frame .access__map { width: 100%; }
/* keep the Maps link an easy tap target on touch screens */
.map-frame .link-more { margin-top: 1.5rem; padding-block: .7rem .5rem; }
@media (max-width: 700px) {
  .map-frame .link-more { padding-block: .95rem .6rem; }
}

/* arrival — quiet hairline notes */
.arrival-list {
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line); max-width: 60ch;
}
.arrival-list li {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(.95rem, 2.4vw, 1.35rem);
  color: var(--ink); line-height: 1.85;
}

/* =====================================================================
   CONTACT page (contact.html) — reuses .page-head / .svc-cat__* /
   .section--svc / .equip / .link-more. A quiet "way in", not a SaaS
   form card: underline fields, large labels, generous spacing.
   Prototype only — no submit handler wiring beyond a console/notice.
   ===================================================================== */

/* 01 contact method — reuses .equip; make the values selectable & tappable */
.contact-method .equip { margin-top: clamp(1.5rem, 4vw, 2.4rem); max-width: 60ch; }
.contact-method .equip dd a {
  border-bottom: 1px solid var(--line); padding-bottom: .12rem;
  transition: border-color .3s ease;
}
.contact-method .equip dd a:hover { border-bottom-color: currentColor; }

/* 02 inquiry form — stacked, hairline underline fields */
.inquiry-form { margin-top: clamp(2rem, 5vw, 3rem); max-width: 40rem; }
.field {
  display: grid; gap: .5rem;
  padding-block: clamp(1.4rem, 3.4vw, 2rem);
  border-bottom: 1px solid var(--line);
}
.field:first-of-type { border-top: 1px solid var(--line); }
.field__label {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: .04em;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem .8rem;
}
.field__req, .field__opt {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap;
  padding: .14rem .5rem; border: 1px solid var(--line); color: var(--ink-soft);
}
.field__req { color: var(--accent); border-color: var(--accent); }
.field__jp {
  display: block;
  font-family: var(--mincho); font-size: .86rem; letter-spacing: .06em;
  color: var(--ink-soft);
}
.field__input {
  display: block; width: 100%; font: inherit; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft);
  border-radius: 0; padding: .7rem .1rem; min-height: 3rem;
  -webkit-appearance: none; appearance: none;
  transition: border-color .3s ease;
}
.field__input::placeholder { color: var(--ink-soft); opacity: .75; }
.field__input:focus {
  outline: none; border-bottom-color: var(--accent); border-bottom-width: 2px;
}
.field__textarea { min-height: 9.5rem; line-height: 1.8; resize: vertical; }
.field__select { display: block; position: relative; }
.field__select::after {
  content: ""; position: absolute; right: .35rem; top: 45%;
  width: .5rem; height: .5rem;
  border-right: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft);
  transform: translateY(-50%) rotate(45deg); pointer-events: none;
}
select.field__input { padding-right: 1.9rem; cursor: pointer; }
.field__hint { display: block; font-size: .8rem; line-height: 1.7; color: var(--ink-soft); }

.form-note {
  margin-top: clamp(1.6rem, 4vw, 2.2rem); max-width: 54ch;
  font-size: .84rem; line-height: 1.9; color: var(--ink-soft);
}
.form-note--after { margin-top: 1.1rem; }

.form-actions {
  margin-top: clamp(2rem, 5vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem;
}
.btn-send {
  display: inline-block; padding: 1rem 3rem;
  font-family: var(--serif); font-size: .95rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 1px solid var(--ink);
  transition: background-color .4s ease, color .4s ease;
}
.btn-send:hover { background: transparent; color: var(--ink); }

/* honeypot — must never be visible or focusable for real users */
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ACCESS 導線 — small centred strip, never a link list */
.contact-access { text-align: center; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.contact-access .eyebrow { display: inline-block; }
.contact-access .eyebrow::before { display: none; }
.contact-access__text {
  font-family: var(--mincho); font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: .06em; color: var(--ink);
}
.contact-access .link-more { margin-top: 1.6rem; }