/* ============================================================
   Brickvanta — "Ma-Doori" (間取り, floor plan) direction. Sourced from live
   web research (WebSearch, 2026-07-23): madori-reading is a real, distinct
   skill in Japanese apartment hunting (comparing 1K/1DK/1LDK/2DK layouts).
   Third JP Real Estate site in the batch — mechanic is diagram-led (hand-
   drawn SVG floor-plan diagrams), not photo-led (urbanhavora) or photo-
   portfolio-led (aptenclave). Blueprint blue + a single vermillion-red
   accent (architects/inspectors redline floor plans in red pen on blue
   drafting paper — a real convention, not decoration).
   Chrome codes (white-pages/_chrome-library/, RNG 2026-07-23, excluding all
   codes used by prior batch sites): header=H9 (icon-only nav + tooltip),
   footer=F8 (accordion, narrow column even on desktop), contact=C4
   (email-as-hero, form secondary), cookie=K2 (corner toast), callout=T2
   (left border-rule, no fill). Section-library: topic-grid=G9 (flat
   divided list), post-card=P6 (first-line-of-content preview), faq=Q4
   (numbered instead of chevron), pages=R3 (one long playbook page with
   anchor TOC instead of separate guide pages). New categories: animation=
   M7 (loading-veil on page load), verification=S7 (rotate-shape captcha).
   ============================================================ */

/* ============================================================
   M7 — loading-veil reveal. Plays on every full page load (this is a
   static multi-page site, there is no SPA transition to hook instead) —
   a light ink-colored veil scales away to reveal the already-rendered
   page beneath it. Disabled entirely under prefers-reduced-motion.
   ============================================================ */
.page-veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink);
  transform-origin: top;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .page-veil { animation: veil-out 0.5s var(--ease-in-out) 0.05s forwards; }
}
@media (prefers-reduced-motion: reduce) {
  .page-veil { display: none; }
}
@keyframes veil-out { to { transform: scaleY(0); } }

/* ============================================================
   Header — H9: icon-only nav, text label appears as a tooltip on hover/
   focus. Compact — 5 nav items fit without crowding a text-label row.
   ============================================================ */
.nav--icons .nav__list { gap: 0.3rem; }
.nav--icons .nav__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; padding: 0; position: relative;
}
.nav--icons .nav__link .licon { margin: 0; }
.nav--icons .nav__link.is-active { background: var(--brand-tint); }
.nav--icons .tip {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 4px);
  opacity: 0; pointer-events: none; transition: opacity 150ms ease-out, transform 150ms ease-out;
  font-size: 0.68rem; white-space: nowrap; background: var(--ink); color: var(--bg);
  padding: 0.25rem 0.55rem; border-radius: 0.2rem; z-index: 10;
}
.nav--icons .nav__link:hover .tip, .nav--icons .nav__link:focus-visible .tip {
  opacity: 1; transform: translate(-50%, 8px);
}
@media (max-width: 920px) {
  /* Mobile fallback: the desktop tooltip .tip span carries the exact same
     label text already — reuse it as an inline visible label instead of
     duplicating text via ::after, which the shared style.css already
     claims on `.nav__link.is-active::after` for the underline indicator
     (a real pseudo-element collision, caught live: the label silently
     got `display:none` on the active item because of it). */
  .nav--icons .nav__link { width: auto; height: auto; justify-content: flex-start; gap: 0.6rem; padding: 0.9rem 1rem; }
  .nav--icons .tip {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    background: none; color: var(--ink); padding: 0; font-size: 0.95rem;
  }
}
/* animations.css's `.licon--on-light` hardcodes a dark glyph color meant
   for the normal light topbar — invisible once `.topbar.is-scrolled`
   switches to a dark background (same root cause documented for other
   sites in this batch: icon tone doesn't adapt to a changed context).
   Override at matching specificity here, scoped to this site only. */
.topbar.is-scrolled .nav--icons .nav__link .licon__bi {
  color: rgba(var(--bg-rgb), 0.85) !important;
}
.topbar.is-scrolled .nav--icons .nav__link.is-active .licon__bi {
  color: var(--white) !important;
}

/* ============================================================
   Footer — F8: accordion groups, single narrow column even on desktop.
   ============================================================ */
/* Footer — variant F4 from _chrome-library/footer.md (re-picked by RNG
   2026-07-23, excluding F1/F3/F7/F8 already used elsewhere in the batch and
   brickvanta's own prior F8 pick). One large closing line as the visual
   anchor instead of columns/accordion; links drop to a single small row. */
.footer--signoff { background: var(--night); color: rgba(255, 255, 255, 0.72); border-top: 1px solid var(--night-2); }
.footer-signoff-wrap { max-width: 40rem; margin: 0 auto; padding: clamp(3rem, 7vw, 4.5rem) 1.2rem; text-align: center; }
.footer-signoff__brand { display: inline-flex; color: #fff; margin-bottom: 1.6rem; }
.footer-signoff__brand:hover { color: #fff; }
.footer-signoff__line {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.5;
  color: #fff;
  margin: 0 auto 2rem;
  max-width: 34rem;
}
.footer-signoff__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.2rem; margin-bottom: 1.8rem; }
.footer-signoff__links a { color: rgba(255, 255, 255, 0.68); font-size: 0.86rem; }
.footer-signoff__links a:hover { color: #fff; }
.footer-signoff__meta { display: flex; flex-direction: column; gap: 0.35rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.76rem; color: rgba(255, 255, 255, 0.5); }
.footer-signoff__meta a { color: rgba(255, 255, 255, 0.68); }
.footer-signoff__meta a:hover { color: #fff; }

/* ============================================================
   Cookie — K2: compact corner toast instead of a full-width bottom bar.
   Same 2-step banner→modal mechanic as the shared baseline, restyled.
   ============================================================ */
/* The shared style.css reserves body padding-bottom equal to the banner's
   height (`body:has(#cookie-banner:not([hidden]))`) — correct for the K1
   full-width bar (which would otherwise cover footer content), wrong here:
   K2 is a small floating corner card that overlaps content on purpose and
   never needs the page to make room for it. Caught live: leaving the
   shared rule active pushed the footer up and left a matching empty gap
   below it until the banner was dismissed. */
body:has(#cookie-banner:not([hidden])) {
  padding-bottom: 0;
}

.cookie--corner {
  position: fixed; right: 1rem; bottom: 1rem; left: auto; top: auto;
  width: min(92vw, 21rem); max-width: 21rem;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  flex-direction: column; align-items: stretch; gap: 0.75rem;
  padding: 1.1rem; z-index: 140;
}
.cookie--corner .cookie__actions { flex-direction: column; gap: 0.5rem; }
.cookie--corner .cookie__btn { width: 100%; }

/* ============================================================
   Callout — T2: left border-rule, no icon/box fill.
   ============================================================ */
.callout--rule { border-left: 3px solid var(--accent); background: none; border-radius: 0; padding: 0.9rem 0 0.9rem 1.1rem; }
.callout--rule p { margin: 0; color: var(--ink-soft); }

/* ============================================================
   Hero — diagram-led: floor-plan SVG on one side, headline+lead on the
   other. No photography anywhere on this site — line-drawing diagrams
   are the whole visual identity, consistent with the "read the madori"
   premise (a photo of a room tells you less than its floor plan does).
   ============================================================ */
.hero--madori { background: var(--bg); padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.hero--madori__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero--madori__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1rem; }
.hero--madori__title { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.35; color: var(--ink); margin: 0; }
.hero--madori__lead { margin: 1.1rem 0 0; max-width: 32rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.hero--madori__grid .btn { margin-top: 1.75rem; }
.hero--madori__diagram { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.madori-svg { width: 100%; height: auto; display: block; }
.madori-svg .wall { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.madori-svg .partition { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.madori-svg .door { fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-dasharray: 3 2; }
.madori-svg .dim { stroke: var(--muted); stroke-width: 1; }
.madori-svg .label { font-family: var(--font-body); font-size: 6.5px; fill: var(--ink-soft); }
.madori-svg .dimlabel { font-family: var(--font-mono); font-size: 5.5px; fill: var(--accent); }

/* ============================================================
   Re-worked away from G9 (flat divided list) into an actual 2x2 card
   grid — index.php had 3 consecutive sections built as "vertical list of
   bordered rows" (topic-list, post-peek-list, and visually the FAQ cards);
   a real grid of clickable cards breaks that repeated list mechanic.
   Cards are real <a> links (the old row markup showed an arrow icon but
   the row itself wasn't a link at all — dead affordance, fixed here too),
   deep-linking to each room type's anchor on madori-guide.php.
   ============================================================ */
.topic-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
.topic-card {
  display: block;
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(var(--accent-rgb), 0.35); }
.topic-card__no { display: block; font-family: var(--font-mono); color: var(--accent); font-size: 0.8rem; margin-bottom: 0.6rem; }
.topic-card__name { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; color: var(--ink); }
.topic-card__desc { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 640px) { .topic-grid { grid-template-columns: 1fr; } }

/* ============================================================
   P6 — post card with a first-line-of-content preview instead of a
   written excerpt (feels like "peeking into the text").
   ============================================================ */
.post-peek-list { border-top: 1px solid var(--line); }
.post-peek { padding: 1.5rem 0; border-bottom: 1px solid var(--line); display: block; }
.post-peek__meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); margin-bottom: 0.4rem; }
.post-peek h3 { margin: 0 0 0.5rem; font-family: var(--font-head); font-size: 1.15rem; }
.post-peek h3 a { color: var(--ink); }
.post-peek h3 a:hover { color: var(--accent); }
.post-peek__peek { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; position: relative; padding-left: 1.1rem; }
.post-peek__peek::before { content: "\201C"; position: absolute; left: 0; top: -0.15em; color: var(--muted); font-family: var(--font-head); font-size: 1.3em; }

/* ============================================================
   Q4 — FAQ with numerals instead of chevron icon.
   ============================================================ */
.faq--numbered .faq__item { display: grid; grid-template-columns: 2.5rem 1fr; gap: 0 0.9rem; }
.faq--numbered .faq__num { font-family: var(--font-mono); color: var(--accent); font-weight: 700; padding: 1.1rem 0 0 1.4rem; }
.faq--numbered .faq__q { padding-left: 0; }
.faq--numbered .faq__q .bi-chevron-down { display: none; }

/* ============================================================
   C4 — email as the hero of the contact page, form secondary/collapsed.
   ============================================================ */
.contact-email-hero { text-align: center; padding: 2rem 0 1rem; }
.contact-email-hero__link { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 4vw, 2rem); color: var(--accent); text-decoration: none; word-break: break-word; }
.contact-email-hero__link:hover { text-decoration: underline; }
.contact-email-hero__note { color: var(--muted); font-size: 0.85rem; margin-top: 0.6rem; }
.contact-email-hero__alt {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 1rem;
  background: none; border: none; color: var(--ink-soft); font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
#contact-form-wrap[hidden] { display: none; }
#contact-form-wrap { max-width: 32rem; margin: 1.5rem auto 0; }

/* ============================================================
   S7 — rotate-shape verification widget for the contact form.
   ============================================================ */
.verify-rotate { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 1rem; }
.verify-rotate__stage { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; flex-shrink: 0; }
.verify-rotate__shape { width: 2.4rem; height: 2.4rem; color: var(--accent); transition: transform 0.2s var(--ease-out); }
.verify-rotate__controls { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.verify-rotate__buttons { display: flex; gap: 0.5rem; }
.verify-rotate__btn { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.verify-rotate__btn:hover { background: var(--surface-3); }
.verify-rotate__status { font-size: 0.78rem; color: var(--muted); }
.verify-rotate.is-verified .verify-rotate__status { color: var(--ok); }
.verify-rotate.is-verified .verify-rotate__status::before { content: "\2713 "; }

/* ============================================================
   R3 — one long "playbook" page (madori-guide.php) with an anchor TOC
   instead of separate per-type guide pages.
   ============================================================ */
.playbook-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.playbook-toc a {
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.9rem;
  text-decoration: none;
}
.playbook-toc a:hover { border-color: var(--accent); color: var(--accent); }

/* Building/type profile — diagram left, description right, repeated
   identically for each madori type (no alternating order — the point is
   a consistent, scannable reference format, not editorial variety here). */
.building-profile { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; border-top: 2px solid var(--line-strong); padding: clamp(2rem, 5vw, 3rem) 0; }
.building-profile .hero--madori__diagram { margin: 0; }
.building-profile__no { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); letter-spacing: 0.06em; }
.building-profile h2 { font-family: var(--font-head); font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin: 0.4rem 0 1rem; color: var(--ink); }
.building-profile p.desc { color: var(--ink-soft); line-height: 1.85; margin: 0 0 1rem; }
@media (max-width: 780px) { .building-profile { grid-template-columns: 1fr; } }

/* Inline FAQ aside, woven into madori-guide.php content. */
.faq-inline { border-left: 3px solid var(--accent); background: var(--surface-2); padding: 1rem 1.2rem; margin: 1.5rem 0 0; }
.faq-inline__q { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--ink); margin: 0 0 0.4rem; }
.faq-inline__q .licon { color: var(--accent); }
.faq-inline__a { margin: 0; color: var(--ink-soft); }

/* Brand wordmark — L4 from white-pages/_chrome-library/logo.md (re-picked
   again 2026-07-23 — the L2 underline still read as a generic "accent
   underline", too close to a default web convention to feel distinct).
   L4: JP kagi-kakko corner brackets「」framing the wordmark — genuine JP
   typographic convention (not just a Latin bracket "["), doubles as a
   nod to the blueprint/technical-annotation theme (crop-mark brackets). */
.brand--wordmark .brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.brand__bracket { color: var(--accent); font-weight: 400; }

.section__head--center { text-align: center; }
.section__head--center .section__lead { margin-left: auto; margin-right: auto; }

/* SH4 from _chrome-library/section-head.md — bare kicker, no eyebrow-pill
   background/border/icon, applied to the FAQ section__head so it doesn't
   repeat the exact eyebrow-pill mechanic already used above it on this page. */
.section__head--bare-kicker .kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

/* One of three recurring section__head blocks broken out of the repeated
   eyebrow+centered-title skeleton — left-aligned split row (title + view-all
   link) instead, so consecutive sections on index.php don't all read as the
   same wrapper reused verbatim. */
.section__head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  max-width: none;
  text-align: left;
  margin: 0 0 1.75rem;
}
.section__head--split .section__title { margin: 0; }
.section__head-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding-bottom: 0.3rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.section__head-link:hover { color: var(--accent-soft); }
@media (max-width: 640px) {
  .section__head--split { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   LP5 — privacy/terms/cookies consolidated into one legal.php with a
   tab switcher, instead of 3 separate pages (chrome-library
   legal-pages.md, RNG 2026-07-23).
   ============================================================ */
.legal-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.legal-tabs__btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0.7rem 0.2rem; margin-right: 1.2rem; font-size: 0.95rem; color: var(--muted); cursor: pointer;
}
.legal-tabs__btn[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 700; }
.legal-panel[hidden] { display: none; }
/* .prose centers itself (max-width + margin:0 auto) for standalone article
   pages; here it shares .container with the left-aligned tabs/H1 above, so
   centering made the panel float in a narrower column disconnected from
   them. Keep the same reading width, drop the centering. */
.legal-panel.prose { margin: 0; max-width: 42rem; }
.legal-panel__contact { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9rem; }