/* ==========================================================================
   mutoumise — static pages: About, Contact, FAQ
   (ported from design/pages/{about,contact,faq}.html + mobile cards)
   ========================================================================== */

/* ==========================================================================
   about — opening statement
   ========================================================================== */

.opening {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-20) var(--sp-8) var(--sp-16);
  display: grid; grid-template-columns: 56px 1fr;
  column-gap: var(--sp-12);
}
.opening__rail { grid-row: 1 / span 2; padding-top: var(--sp-2); }
.opening__copy h1 { font-size: var(--text-4xl); margin: var(--sp-6) 0 0; max-width: 16ch; }
.opening .standfirst {
  grid-column: 2;
  color: var(--sumi-soft); font-size: var(--text-lg);
  max-width: 38rem; margin-top: var(--sp-6); margin-left: var(--sp-16);
}

/* ---- about: wide image ---- */
.wide { max-width: 1408px; margin-inline: auto; padding-inline: var(--sp-4); }
.wide img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  border-radius: var(--radius); background: var(--washi-deep);
}
.wide figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--sp-3); padding-inline: var(--sp-4);
}

/* ---- about: narrative ---- */
.story {
  max-width: var(--container); margin: var(--sp-28) auto 0;
  padding-inline: var(--sp-8);
  display: grid; grid-template-columns: 32rem 1fr; column-gap: var(--sp-28);
  align-items: start;
}
.story__block h2 { font-size: var(--text-2xl); margin: var(--sp-3) 0 var(--sp-4); }
.story__block p { color: var(--sumi-soft); }
.story__block p + p { margin-top: var(--sp-4); }
.story__col--a .story__block + .story__block { margin-top: var(--sp-20); }
.story__col--b { margin-top: var(--sp-28); max-width: 27rem; justify-self: start; }
.story__aside { margin-top: var(--sp-16); }
.story__aside img {
  aspect-ratio: 3 / 4; object-fit: cover; width: 100%;
  border-radius: var(--radius); background: var(--washi-deep);
}
.story__aside figcaption { margin-top: var(--sp-3); }

/* ---- about: woods band (list itself is styled by pages.css .woods) ---- */
.woods-band { background: var(--washi-deep); margin-top: var(--sp-28); }
.woods-band__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-20) var(--sp-8);
  display: grid; grid-template-columns: 1fr 560px; gap: var(--sp-20);
}
.woods-band__copy h2 { font-size: var(--text-3xl); margin: var(--sp-4) 0 var(--sp-6); }
.woods-band__copy p { color: var(--sumi-soft); max-width: 26rem; }
.woods-band__list { margin-top: var(--sp-8); }
.woods-band .woods { margin-top: 0; }

/* ---- about: the bear ---- */
.bear {
  max-width: var(--container); margin: var(--sp-28) auto 0;
  padding-inline: var(--sp-8);
  display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-16);
  align-items: start;
}
.bear__mark { width: 140px; margin-top: var(--sp-8); }
.bear__copy h2 { font-size: var(--text-2xl); margin: var(--sp-3) 0 var(--sp-4); }
.bear__copy p { color: var(--sumi-soft); max-width: 36rem; }
.bear__copy p + p { margin-top: var(--sp-4); }
.bear__seal { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); }
.bear__seal .note {
  font-size: var(--text-xs); letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--sumi-faint);
}

/* ---- about: closing ---- */
.closing { max-width: var(--container); margin: var(--sp-28) auto 0; padding-inline: var(--sp-8); }
.closing__row {
  border-top: 1px solid var(--sumi); padding-top: var(--sp-8);
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-8);
}

/* ==========================================================================
   contact
   ========================================================================== */

.contact {
  max-width: var(--container); margin: var(--sp-20) auto 0; padding-inline: var(--sp-8);
  display: grid; grid-template-columns: 56px 430px 1fr;
  column-gap: var(--sp-16); align-items: start;
}
.contact__rail { padding-top: var(--sp-4); }
.contact__intro h1 { font-size: var(--text-3xl); margin: var(--sp-4) 0 var(--sp-6); }
.contact__intro > p { color: var(--sumi-soft); max-width: 24rem; }
.contact-list { margin-top: var(--sp-12); border-top: var(--hairline); }
.contact-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; border-bottom: var(--hairline);
}
.contact-list .v { font-size: var(--text-sm); color: var(--sumi-soft); text-align: right; }
.contact-list a.v {
  border-bottom: 1px solid var(--washi-line);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.contact-list a.v:hover { color: var(--walnut-warm); border-color: var(--walnut-warm); }
.contact__intro .btn--quiet { margin-top: var(--sp-8); }

/* ---- contact: form ---- */
.contact__form { margin-top: var(--sp-12); }
.contact__form form { margin-top: var(--sp-8); display: grid; gap: var(--sp-8); }
.contact__form .form-row { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.contact .field .opt { color: var(--sumi-faint); font-weight: 400; }
.contact .field--order { max-width: 46%; }
.contact .textarea { resize: vertical; min-height: 9.5rem; }
.contact__send { display: flex; align-items: baseline; gap: var(--sp-6); margin-top: var(--sp-2); }
.contact__send small { font-size: var(--text-xs); color: var(--sumi-faint); letter-spacing: 0.04em; }
/* mobile-only placement of the FAQ link (after the form, per mobile card) */
.contact__faq { margin-top: var(--sp-12); display: none; justify-content: flex-end; }
/* honeypot — never shown; bots that fill it are dropped server-side */
.contact .field--web {
  position: absolute !important; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ==========================================================================
   faq
   ========================================================================== */

.faq-head {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-20) var(--sp-8) var(--sp-16);
  display: grid; grid-template-columns: 1fr 56px; gap: var(--sp-12);
  align-items: start;
}
.faq-head__copy { max-width: 40rem; }
.faq-head h1 { font-size: var(--text-4xl); margin: var(--sp-6) 0; }
.faq-head p { color: var(--sumi-soft); max-width: 32rem; }
.faq-head .v-rail { justify-self: end; padding-top: var(--sp-2); }

/* ---- faq: question groups ---- */
.faq {
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--sp-8);
  display: grid; row-gap: var(--sp-20);
}
.faq-group {
  position: relative;
  border-top: var(--hairline);
  padding-top: var(--sp-8);
  display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-16);
  align-items: start;
}
.faq-group::before {
  content: ""; position: absolute; top: -1px; left: 0;
  width: 40px; border-top: 1px solid var(--sumi);
}
.faq-group__head { display: grid; gap: var(--sp-3); }
.faq-group__head .note { font-size: var(--text-sm); color: var(--sumi-faint); max-width: 16rem; }
.faq-group .accordion { max-width: 46rem; }
/* stagger the answer columns slightly — reading rhythm, not a grid */
.faq-group:nth-child(even) .accordion { margin-left: var(--sp-12); }

/* ---- faq: native <details> as .accordion ---- */
.faq summary.accordion__q { cursor: pointer; list-style: none; }
.faq summary.accordion__q::-webkit-details-marker { display: none; }
.faq .accordion__q .mark::before { content: "+"; }
.faq details[open] > .accordion__q .mark::before { content: "−"; }

/* ---- faq: closing note ---- */
.faq-close { max-width: var(--container); margin: var(--sp-28) auto 0; padding-inline: var(--sp-8); }
.faq-close__box {
  border-top: 1px solid var(--sumi); padding-top: var(--sp-8);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-8); flex-wrap: wrap;
}
.faq-close h2 { font-size: var(--text-2xl); margin-top: var(--sp-2); }
.faq-close p { color: var(--sumi-soft); max-width: 28rem; }

/* ==========================================================================
   responsive — mobile cards
   ========================================================================== */

@media (max-width: 960px) {

  /* ---- about ---- */
  .opening {
    padding: var(--sp-12) var(--sp-6) 0;
    grid-template-columns: 1fr auto; column-gap: var(--sp-4);
  }
  .opening__copy { grid-row: 1; grid-column: 1; }
  .opening__rail { grid-row: 1; grid-column: 2; padding-top: var(--sp-6); }
  .opening__copy h1 { font-size: var(--text-3xl); margin: var(--sp-4) 0 0; max-width: 14ch; }
  .opening .standfirst {
    grid-column: 1 / -1; font-size: var(--text-md);
    margin-top: var(--sp-6); margin-left: var(--sp-8);
  }

  .wide { margin-top: var(--sp-12); }

  /* narrative flattens to one column, alternating insets, in reading order
     01 → 02 → aside → 03 (columns become display: contents) */
  .story {
    margin-top: var(--sp-16); padding-inline: var(--sp-6);
    grid-template-columns: 1fr; row-gap: var(--sp-12);
  }
  .story__col--a, .story__col--b { display: contents; }
  .story__block h2 { margin: var(--sp-2) 0 var(--sp-3); }
  .story__col--a .story__block:nth-child(1) { order: 1; margin-right: 10%; }
  .story__col--b .story__block { order: 2; margin-left: 10%; }
  .story__aside { order: 3; margin-top: 0; margin-right: 10%; }
  .story__col--a .story__block:nth-child(2) { order: 4; margin-top: 0; margin-left: 10%; }

  .woods-band { margin-top: var(--sp-16); }
  .woods-band__inner { grid-template-columns: 1fr; padding: var(--sp-12) var(--sp-6); gap: 0; }
  .woods-band__copy h2 { font-size: var(--text-2xl); margin: var(--sp-3) 0 var(--sp-4); }
  .woods-band__copy p { max-width: none; }
  .woods-band__list { margin-top: var(--sp-6); }
  /* hairlines read better in washi on the deep band; uses stack under names */
  .woods-band .woods { border-top-color: var(--washi); }
  .woods-band .woods li {
    border-bottom-color: var(--washi);
    display: grid; grid-template-columns: auto 1fr;
    column-gap: var(--sp-4); align-items: start;
  }
  .woods-band .woods .dot { grid-row: 1 / span 2; margin-top: 0.55em; }
  .woods-band .woods .name { grid-column: 2; }
  .woods-band .woods .use { display: block; grid-column: 2; margin-left: 0; text-align: left; }

  .bear { margin-top: var(--sp-16); padding-inline: var(--sp-6); grid-template-columns: 1fr; gap: 0; }
  .bear__mark { width: 96px; margin: 0 0 var(--sp-6); }
  .bear__copy { margin-right: 8%; }
  .bear__copy h2 { margin: var(--sp-2) 0 var(--sp-3); }
  .bear__seal { margin-top: var(--sp-6); }

  .closing { margin-top: var(--sp-16); padding-inline: var(--sp-6); }
  .closing__row {
    padding-top: var(--sp-6);
    display: grid; gap: var(--sp-4); justify-items: start;
  }
  .closing .btn--quiet { min-height: 44px; }

  /* ---- contact ---- */
  .contact {
    margin-top: 0; padding: var(--sp-12) var(--sp-6) 0;
    grid-template-columns: 1fr;
  }
  .contact__rail { display: none; }
  .contact__intro h1 { margin: var(--sp-4) 0 var(--sp-3); }
  .contact__intro > p { max-width: 26rem; }
  .contact-list { margin-top: var(--sp-8); margin-right: 8%; }
  .contact__intro .btn--quiet { display: none; }
  .contact__form form { gap: var(--sp-6); }
  .contact__form .form-row { gap: var(--sp-6); }
  .contact .field--order { max-width: 76%; }
  .contact .field--order label { white-space: nowrap; }
  .contact .textarea { min-height: 9rem; }
  .contact__send { display: grid; gap: var(--sp-3); justify-items: start; }
  .contact__faq { display: flex; }

  /* ---- faq ---- */
  .faq-head { padding: var(--sp-12) var(--sp-6) 0; grid-template-columns: 1fr; }
  .faq-head .v-rail { display: none; }
  .faq-head h1 { font-size: var(--text-3xl); margin: var(--sp-4) 0; }
  .faq { margin-top: var(--sp-12); padding-inline: var(--sp-6); row-gap: var(--sp-16); }
  .faq-group { grid-template-columns: 1fr; gap: 0; padding-top: var(--sp-6); }
  .faq-group__head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: var(--sp-3); row-gap: var(--sp-1);
  }
  .faq-group__head .note { flex-basis: 100%; max-width: none; }
  /* alternate the group heads off the left edge — reading rhythm */
  .faq-group:nth-child(even) .faq-group__head { margin-left: var(--sp-8); }
  .faq-group:nth-child(even) .accordion { margin-left: 0; }
  .faq-group .accordion { margin-top: var(--sp-4); max-width: none; }
  .faq .accordion__a { font-size: var(--text-sm); }
  .faq-close { margin-top: var(--sp-20); padding-inline: var(--sp-6); }
  .faq-close__box { display: block; padding-top: var(--sp-6); }
  .faq-close h2 { margin: var(--sp-2) 0 var(--sp-4); }
  .faq-close p .btn--quiet {
    display: flex; width: max-content;
    margin-top: var(--sp-4); min-height: 44px;
  }
}

@media (max-width: 560px) {
  .wide { padding-inline: var(--sp-2); }
  .wide img { aspect-ratio: 16 / 10; }
  .wide figcaption { display: grid; gap: 2px; }

  .contact__form .form-row { grid-template-columns: 1fr; }
  .contact__send .btn { width: 100%; }
}