/* These rules are loaded only by the QA template plugin. */
body.cs-design-page {
  --cs-bg: oklch(98.4% 0.003 248);
  --cs-surface: oklch(100% 0 0);
  --cs-fg: oklch(28.6% 0.039 248);
  --cs-ink: oklch(21% 0.032 265);
  --cs-muted: oklch(48.5% 0.024 264);
  --cs-border: oklch(92.8% 0.006 265);
  --cs-accent: oklch(72.5% 0.0998 82.3);
  --cs-accent-soft: oklch(72.5% 0.0998 82.3 / 0.14);
  --cs-maxw: 1150px;
  --cs-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --cs-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --bg: var(--cs-bg);
  --surface: var(--cs-surface);
  --fg: var(--cs-fg);
  --ink: var(--cs-ink);
  --muted: var(--cs-muted);
  --border: var(--cs-border);
  --accent: var(--cs-accent);
  --accent-soft: var(--cs-accent-soft);
  --maxw: var(--cs-maxw);
  --font-display: var(--cs-font-display);
  --font-body: var(--cs-font-body);
}

body.cs-design-page .cs-design-main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.cs-design-page article.cs-page {
  width: 100%;
  max-width: var(--cs-maxw);
  margin: 0 auto;
  padding: 0;
}

/* Akihabara pilot: preserve the live article's 1150px outer frame while
   keeping the production shell independent from Astra's narrow container. */
body.cs-design-akihabara article.cs-page {
  max-width: var(--cs-maxw);
  padding: 0 20px;
  box-sizing: border-box;
}

/* Phase C-4: Suica / Pasmo transport pilot. */
body.cs-design-suica article.cs-page {
  max-width: var(--cs-maxw);
  padding: 0 20px;
  box-sizing: border-box;
}

/* All production area guides use the same 1150px outer frame as the
   Akihabara pilot; the 20px inner gutter makes the 1110px hero slot match
   the shared visual contract at desktop and remain comfortable on mobile. */
body.cs-design-area article.cs-page {
  max-width: var(--cs-maxw);
  padding: 0 20px;
  box-sizing: border-box;
}

/* Keep Google auto-placed ad hosts inside the responsive content box. */
body.cs-design-production .google-auto-placed,
body.cs-design-production .google-auto-placed > ins.adsbygoogle,
body.cs-design-production .google-auto-placed > ins.adsbygoogle > [id^="aswift_"][id$="_host"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

body.cs-design-page .cs-design-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.cs-design-page .cs-design-content > .wrap {
  max-width: var(--cs-maxw);
}

body.cs-design-page .masthead,
body.cs-design-page .footer {
  width: 100%;
}

body.cs-design-page .masthead .main-nav ul,
body.cs-design-page .footer .f-links {
  list-style: none;
}

body.cs-design-page .entry-title,
body.cs-design-page .entry-header,
body.cs-design-page .entry-meta,
body.cs-design-page .ast-title-bar-wrap,
body.cs-design-page #masthead,
body.cs-design-page #colophon,
body.cs-design-page .site-header,
body.cs-design-page .site-footer,
body.cs-design-page #ast-scroll-top,
body.cs-design-page .post-navigation {
  display: none !important;
}

/* QA-only: keep the internal design catalog unobstructed on mobile. */
body.cs-design-qa .adsbygoogle,
body.cs-design-qa ins.adsbygoogle,
body.cs-design-qa iframe[id^="aswift_"] {
  display: none !important;
}

/* Production policy: keep the site-wide mobile ad. Reserve a conservative
   96px safe area so a fixed ad cannot cover the last CTA or footer row. */
@media (max-width: 720px) {
  body.cs-design-production .cs-design-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  body.cs-design-production .footer .footer-inner {
    padding-bottom: calc(144px + env(safe-area-inset-bottom));
  }

  body.cs-design-production {
    scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

/* Phase C-3: Akihabara production article modules. Scoped to the
   production allowlist page so the shared shell remains unaffected. */
body.cs-design-akihabara .cs-akihabara-content .hero{text-align:center;margin-top:44px}
body.cs-design-akihabara .cs-akihabara-content .hero>.wrap{max-width:960px;margin:0 auto;padding:0 24px}
body.cs-design-akihabara .cs-akihabara-content .hero .eyebrow{color:var(--cs-fg);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
body.cs-design-akihabara .cs-akihabara-content .hero h1{font-family:var(--font-display);font-size:clamp(34px,6vw,58px);line-height:1.05;margin:14px 0;font-weight:700;letter-spacing:-.02em;color:var(--cs-fg)}
body.cs-design-akihabara .cs-akihabara-content .hero p{font-size:19px;color:var(--cs-muted);max-width:700px;margin:0 auto;line-height:1.55}
body.cs-design-akihabara .cs-akihabara-content .hero .meta{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px 0;color:var(--cs-muted);font-size:13px}
body.cs-design-akihabara .cs-akihabara-content .heroimg.wide{margin:36px auto 0;width:100%;max-width:1110px;padding:0}
body.cs-design-akihabara .cs-akihabara-content .heroimg.wide figure{margin:0;padding:0}
body.cs-design-akihabara .cs-akihabara-content .heroimg.wide img{width:100%;height:420px;max-height:420px;object-fit:cover;object-position:center;display:block;border-radius:8px}
body.cs-design-akihabara .cs-akihabara-content .heroimg figcaption{text-align:center;font-size:13px;color:var(--cs-muted);margin-top:8px}
body.cs-design-akihabara .cs-akihabara-content .quick-nav-wrap{margin:28px 0 0;background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:8px;padding:18px 20px}
body.cs-design-akihabara .cs-akihabara-content .quick-nav-wrap .quick-nav{margin:0}
body.cs-design-akihabara .cs-akihabara-content .quick-nav-title{flex:0 0 100%;font-family:var(--font-body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cs-fg);margin:0 0 12px;padding:0;border:0;line-height:1.3}
body.cs-design-akihabara .cs-akihabara-content .quick-nav a{color:var(--cs-fg)}
body.cs-design-akihabara .cs-akihabara-content>.section{margin-top:56px}
body.cs-design-akihabara .cs-akihabara-content>.section .sec-head{margin-bottom:18px}
body.cs-design-akihabara .cs-akihabara-content>.section .kicker{display:block;margin:0 0 8px;color:var(--cs-fg);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
body.cs-design-akihabara .cs-akihabara-content .tbl-responsive{overflow-x:auto;margin:1.5em 0;border:1px solid var(--cs-border);border-radius:8px;background:var(--cs-surface)}
body.cs-design-akihabara .cs-akihabara-content .tbl-responsive .tbl{margin:0;min-width:760px}
body.cs-design-akihabara .cs-akihabara-content .section-media{margin:2em 0}
body.cs-design-akihabara .cs-akihabara-content .section-media img{width:100%;height:360px;max-height:360px;object-fit:cover;border-radius:8px;display:block}
body.cs-design-akihabara .cs-akihabara-content>.section>div>div>img:not(.emoji):not(.wp-smiley){display:block;width:100%;height:360px;max-height:360px;object-fit:cover;object-position:center;border-radius:8px}
body.cs-design-akihabara .cs-akihabara-content .section-media figcaption{text-align:center;color:var(--cs-muted);font-size:13px;margin-top:8px}
body.cs-design-akihabara .cs-akihabara-content .hotel-list{margin:0 0 2em;gap:14px}
body.cs-design-akihabara .cs-akihabara-content .hotel-list .hotel-card{list-style:none}
body.cs-design-akihabara .cs-akihabara-content .hc-band-name{font-family:var(--font-display);color:#fff}
body.cs-design-akihabara .cs-akihabara-content .hotel-facts{color:var(--cs-muted)}
body.cs-design-akihabara .cs-akihabara-content .hotel-facts .hf{font-size:13px}
body.cs-design-akihabara .cs-akihabara-content .hotel-card--band .hotel-facts{order:4}
body.cs-design-akihabara .cs-akihabara-content .hotel-card--band .hc-blurb{order:1}
body.cs-design-akihabara .cs-akihabara-content .hotel-card--band .hc-specs{order:2}
body.cs-design-akihabara .cs-akihabara-content .hotel-card--band .hc-tradeoff{order:3}
body.cs-design-akihabara .cs-akihabara-content .hotel-card--band .hc-foot{order:5}
body.cs-design-akihabara .cs-akihabara-content .hc-tradeoff{color:var(--cs-muted)}
body.cs-design-akihabara .cs-akihabara-content .hc-tradeoff strong{color:var(--cs-fg)}

/* DS final density overrides. These selectors intentionally include the
   design-content scope so the generic Astra/article p and li margins do not
   leak into hotel-card internals. */
body.cs-design-akihabara .cs-design-content .hotel-card{margin:0}
body.cs-design-akihabara .cs-design-content .hc-blurb{margin:0}
body.cs-design-akihabara .cs-design-content .hc-tradeoff{margin:0}
body.cs-design-akihabara .cs-design-content .hc-specs{margin:0}
body.cs-design-akihabara .cs-design-content .hotel-facts{margin:0}
body.cs-design-akihabara .cs-design-content .hc-chips{margin:0}
body.cs-design-akihabara .cs-design-content .sec-head h2{margin-top:0}
body.cs-design-akihabara .cs-design-content .hc-band-name{color:#fff}
body.cs-design-akihabara .cs-akihabara-content .pros-cons{margin:1.25em 0}
body.cs-design-akihabara .cs-akihabara-content .explore-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:1.5em 0}
body.cs-design-akihabara .cs-akihabara-content .explore-card{display:flex;flex-direction:column;background:var(--cs-surface);border:1px solid var(--cs-border);border-radius:8px;overflow:hidden;text-decoration:none;color:inherit}
body.cs-design-akihabara .cs-akihabara-content .explore-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
body.cs-design-akihabara .cs-akihabara-content .explore-card strong{font-family:var(--font-display);font-size:19px;color:var(--cs-fg);padding:14px 16px 0}
body.cs-design-akihabara .cs-akihabara-content .explore-card span{font-size:14px;line-height:1.55;color:var(--cs-muted);padding:6px 16px 16px}
body.cs-design-akihabara .cs-akihabara-content .disc{font-size:13px;color:var(--cs-muted);margin-top:48px}
body.cs-design-akihabara .cs-akihabara-content details.faq-item{padding:0;margin:10px 0}
body.cs-design-akihabara .cs-akihabara-content details.faq-item>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;cursor:pointer;list-style:none}
body.cs-design-akihabara .cs-akihabara-content details.faq-item>summary h3{margin:0;font-size:18px;line-height:1.35}
body.cs-design-akihabara .cs-akihabara-content details.faq-item>summary::-webkit-details-marker{display:none}
body.cs-design-akihabara .cs-akihabara-content details.faq-item>.faq-answer{padding:0 18px 16px}
body.cs-design-akihabara .cs-akihabara-content .w-narrow,
body.cs-design-akihabara .cs-akihabara-content .w-medium{width:100%;box-sizing:border-box}
/* Akihabara uses one shared left editorial axis. Keep the three max-width
   tiers, but do not center the narrower blocks inside the outer frame. */
body.cs-design-akihabara .cs-akihabara-content .w-narrow{max-width:780px;margin-left:0;margin-right:auto}
body.cs-design-akihabara .cs-akihabara-content .w-medium{max-width:940px;margin-left:0;margin-right:auto}
@media(max-width:760px){
  body.cs-design-akihabara .cs-akihabara-content .heroimg.wide img{height:300px;max-height:300px}
  body.cs-design-akihabara .cs-akihabara-content>.section{margin-top:44px}
  body.cs-design-akihabara .cs-akihabara-content>.section h2{font-size:27px}
  body.cs-design-akihabara .cs-akihabara-content>.section p{font-size:16px}
  body.cs-design-akihabara .cs-akihabara-content .section-media img{height:240px;max-height:240px}
  body.cs-design-akihabara .cs-akihabara-content>.section>div>div>img:not(.emoji):not(.wp-smiley){height:240px;max-height:240px}
  body.cs-design-akihabara .cs-akihabara-content .explore-grid{grid-template-columns:1fr}
  body.cs-design-akihabara .cs-akihabara-content .tbl-responsive .tbl{min-width:640px}
}