/*
  The Head Spa by Hikari, D12 group 2: contact.html, faq.html, thank-you.html, 404.html,
  search.html. Loaded right after the page's D11 group file (d11-g3.css, or d11-g2.css on the
  search page), on these five pages only. Final states only, tokens only (no colour values, no
  font names), same as site.css. Words, links and head are the D11 pages' own; this file only
  places them. Class names are the pages' existing ones.

  D12 (DESIGN-D12.md 5, research/YUSEN-SKELETON.md 4): one piece per screen. A photograph or a
  film, one large line, a short paragraph and one link; the rest of the screen is left empty.
  Room comes from fewer pieces side by side, not from more padding around the same pieces.

  Contents
    1. Contact: the first screen is the film and the page name; the details scroll beside it
    2. Contact: the enquiry, the form on the page ground and the sign film on the right
    3. Contact: appointments on the curtain (no veil, the crop keeps the door out)
    4. FAQ: head, topics, the accordion with room around each question, the help band
    5. Thank you and 404: the words settle at the foot of the photograph
    6. Search
*/

/* 1. Contact: first screen and details */
.contact .contact__head .eyebrow { margin-bottom: var(--space-5); }
.contact .contact__head .page-lead { max-width: var(--measure-short); margin-top: var(--space-5); }
.g3-rows .contact__block { padding-block: clamp(1.75rem, 1.35rem + 1.2vw, 2.5rem); }
.g3-rows .contact__block + .contact__block { border-top-color: var(--rule); }
.g3-rows .contact__block:first-child { border-top-color: var(--rule); }
.g3-rows .contact__address { font-size: var(--fs-h3); line-height: 1.2; }
.g3-rows .contact__line a { font-size: var(--fs-body); }
.g3-rows .contact__block > .contact__address + .contact__station { margin-top: var(--space-3); }
.g3-rows .contact__block > .contact__station + p:has(> .text-link) { margin-top: var(--space-4); }
/* the film's control is the icon alone at every width, as on the home film (the words stay its
   accessible name) */
@media (min-width: 48em) {
  .contact__film .film-toggle { padding: 0; justify-content: center; }
  .contact__film .film-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 63.99em) {
  .contact.g3-split .g3-split__body {
    gap: var(--space-8);
    padding-top: var(--section-y-compact);
    padding-bottom: var(--section-y);
  }
}
@media (min-width: 64em) {
  /* the words column is two screens long; the film holds still beside both */
  .contact.g3-split .g3-split__body { gap: 0; padding-block: 0 var(--section-y); }
  .contact .contact__head {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: max(calc(100svh - var(--header-h)), 34rem);
    padding-bottom: var(--section-y);
  }
  .contact__details.g3-rows { max-width: 44rem; padding-top: var(--section-y-compact); }
  .g3-rows .contact__block { grid-template-columns: 12rem minmax(0, 1fr); }
}

/* 2. Contact: enquiry. Phones: the sign film, then the words and the form. 1440: the words and
   the form on the left (1 to 6), the sign film on the right (8 to 12), top lines matched, so
   the page turns from the facade on the left to the sign on the right. */
.g3-enquiry.enquiry { padding-block: var(--section-y); }
.g3-enquiry .enquiry__head p { max-width: var(--measure-short); }
.g3-enquiry .enquiry__head .text-link { margin-top: var(--space-5); }
.g3-enquiry .enquiry__form { gap: var(--space-6); }
.g3-enquiry .field { gap: var(--space-1); }
.g3-enquiry .field label {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* underline fields on the page ground (yusen contact); the question keeps a hairline box */
.g3-enquiry .field input,
.g3-enquiry .field textarea { background: transparent; }
.g3-enquiry .field input { padding-inline: 0; }
.g3-enquiry .field textarea { box-shadow: inset 0 0 0 1px var(--rule-strong); }
.g3-enquiry .field input:user-invalid { box-shadow: inset 0 -2px 0 var(--accent); }
.g3-enquiry .field textarea:user-invalid { box-shadow: inset 0 0 0 1px var(--rule-strong), inset 0 -2px 0 var(--accent); }
.g3-enquiry .enquiry__fine { max-width: var(--measure); color: var(--muted); }
@media (max-width: 63.99em) {
  /* the film stands apart (64), the words and the form read as one piece (32) */
  .g3-enquiry .enquiry__grid { row-gap: var(--space-6); }
  .g3-enquiry__film { margin-bottom: var(--space-6); }
}
@media (min-width: 64em) {
  .g3-enquiry .enquiry__grid { row-gap: var(--space-8); }
  .g3-enquiry__film { grid-column: 8 / -1; grid-row: 1 / span 2; }
  .g3-enquiry .enquiry__head { grid-column: 1 / span 6; grid-row: 1; }
  .g3-enquiry .enquiry__form { grid-column: 1 / span 6; grid-row: 2; }
}

/* 3. Contact: appointments. The home gift crop of WA0013 (tools/d12/make-gift-crop.py): the
   curtain and the chairs, with the door, the road and the bins of the D11 WA0012 crop out of
   the frame. Ink stands on the bright curtain by itself, so the ivory veil of .bleed--light is
   off (DESIGN-D12 5.5, home 7). */
.g3-book.bleed--light::before { background: none; }
.g3-book { min-height: clamp(30rem, 78svh, 44rem); }
.g3-book .bleed__media img { object-position: 50% 50%; }
.g3-book .bleed__content { gap: var(--space-5); }
@media (min-width: 48em) {
  .g3-book { min-height: clamp(34rem, 88svh, 52rem); }
  .g3-book .bleed__media img { object-position: 50% 100%; }
}

/* 4. FAQ */
.g3-faq-head .page-lead { max-width: var(--measure-short); }
.g3-faq.faq { padding-top: var(--section-y); padding-bottom: var(--section-y); }
/* topics: a quiet list of four, no rules, no arrows (yusen's side index) */
.g3-faq .faq__index-label {
  margin-bottom: var(--space-3);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.g3-faq .faq__index li,
.g3-faq .faq__index li:last-child { border: 0; }
.g3-faq .faq__index .icon { display: none; }
.g3-faq .faq__index a { justify-content: flex-start; color: var(--ink-soft); }
.g3-faq .faq__index a:hover,
.g3-faq .faq__index a[aria-current] { color: var(--accent); }
@media (min-width: 64em) {
  .g3-faq .faq__index a { min-height: 2.25rem; }
  .g3-faq .faq__groups { grid-column: 5 / span 7; }
}
/* groups and questions */
.g3-faq .faq-group + .faq-group { margin-top: var(--section-y); }
.g3-faq .faq-group__title { margin-bottom: var(--space-6); }
.g3-faq .qa__btn {
  padding-block: clamp(1.5rem, 1.25rem + 0.8vw, 2.125rem);
  font-size: var(--fs-h3);
  line-height: 1.25;
}
.g3-faq .qa__icon { width: 1.25rem; height: 1.25rem; }
[data-accordion="on"].faq__groups .qa__a { max-width: var(--measure); }
[data-accordion="on"].faq__groups .qa__a > :last-child { margin-bottom: clamp(2rem, 1.6rem + 1.2vw, 3rem); }
/* help: the question large on the left; the line, the numbers and the link at its foot on the
   right (the home collage's words-at-the-foot rule) */
.g3-faq-help.faq-help { padding-block: var(--section-y); }
.g3-faq-help .faq-help__copy p:not(.contact__line) { max-width: var(--measure-short); }
@media (max-width: 63.99em) {
  .g3-faq-help .faq-help__grid { row-gap: var(--space-6); }
  .g3-faq-help .faq-help__actions { justify-self: start; }
}
@media (min-width: 64em) {
  .g3-faq-help .faq-help__grid { grid-template-rows: auto auto auto; align-items: end; row-gap: 0; }
  .g3-faq-help .faq-help__copy { display: contents; }
  .g3-faq-help .faq-help__title { grid-column: 1 / span 6; grid-row: 1 / span 3; align-self: end; }
  .g3-faq-help .faq-help__copy > p { grid-column: 8 / -1; grid-row: 1; margin: 0; }
  .g3-faq-help .faq-help__lines { grid-column: 8 / -1; grid-row: 2; margin-top: var(--space-3); }
  .g3-faq-help .faq-help__actions { grid-column: 8 / -1; grid-row: 3; justify-self: start; margin-top: var(--space-5); }
}

/* 5. Thank you and 404. Thank you: the lounge crop right of the entrance door
   (tools/d12/g2_make_lounge_crop.py), the chairs kept in every frame. */
.g3-system .page-lede { max-width: var(--measure-short); }
.page-thanks .g3-split__media img { object-position: 50% 62%; }
.g3-system .system__links { column-gap: var(--space-6); }
@media (min-width: 64em) {
  .g3-system .g3-split__body { justify-content: flex-end; padding-block: var(--section-y); }
}
@media (max-width: 63.99em) {
  .g3-system .g3-split__body { padding-top: var(--section-y-compact); padding-bottom: var(--section-y); }
}

/* 6. Search */
.page-search .page-head { padding-top: var(--section-y); }
.page-search .page-head .page-lede { max-width: var(--measure-short); }
.page-search .search-results { padding-bottom: var(--section-y); }
.page-search .suggest { margin-top: var(--space-8); }
.page-search [data-search-idle] .suggest__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: var(--space-6);
  row-gap: var(--space-2);
}
@media (min-width: 48em) {
  .page-search [data-search-idle] .suggest__list { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: var(--space-8); }
}