/* Display preferences 1.0.0: KonnichiCollect's type, color and motion mapping.
   The shared module (/js/display-preferences.js) only sets three attributes on
   <html>. Everything below is this site's answer to them. Load this file after
   each page's own <style> block so equal-specificity rules resolve here. */

/* ===== PANEL TOKENS (light) ===== */
:root {
  --text-scale: 1;
  --dp-surface: #FDFCFA;
  --dp-surface-soft: #FAF8F5;
  --dp-ink: #1B2A4A;
  --dp-muted: #5A6577;
  --dp-control-border: #6B7487;
  --dp-button: #1B2A4A;
  --dp-button-hover: #2A3D66;
  --dp-on-button: #FFFFFF;
  --dp-focus: #B8283B;
  --dp-shadow: 0 0.5rem 2rem rgba(27, 42, 74, 0.22);
}

/* ===== TEXT SIZE =====
   Every font-size on the site is in rem, so the root percentage carries all of
   it. Fluid headings multiply their vw term by --text-scale so they grow too. */
html[data-display-text="larger"] { font-size: 125%; --text-scale: 1.25; }
html[data-display-text="largest"] { font-size: 150%; --text-scale: 1.5; }

/* Fixed-height heroes and banners clip their text once it grows. Let them grow
   with the content, keep their resting height as a floor, and clear the 80px
   fixed nav. Photo heroes only from 801px: at 800px and below they are already
   a photo band above the text (main.css, fleet hero-photo rule), and these
   overrides would push the band down and undo it. */
@media (min-width: 801px) {
  html:is([data-display-text="larger"], [data-display-text="largest"]) :is(.hero, .page-hero) {
    height: auto;
    padding-top: calc(80px + 2.5rem);
    padding-bottom: 3rem;
  }
  html:is([data-display-text="larger"], [data-display-text="largest"]) .hero { min-height: max(100vh, 600px); }
  html:is([data-display-text="larger"], [data-display-text="largest"]) .page-hero { min-height: max(70vh, 480px); }
}
html:is([data-display-text="larger"], [data-display-text="largest"]) .gallery-hero {
  height: auto;
  padding-top: calc(80px + 2.5rem);
  padding-bottom: 3rem;
  min-height: max(45vh, 300px);
}
html:is([data-display-text="larger"], [data-display-text="largest"]) .banner {
  height: auto;
  min-height: 400px;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
/* Single long words ("Collectibles" at 150% is wider than a 320px phone) must
   wrap instead of being clipped by the heroes' overflow: hidden. Hyphenation
   only for headings on phones: on body text it chopped ordinary words
   ("per-sonal", "set-ting") at desktop width. */
html:is([data-display-text="larger"], [data-display-text="largest"]) :is(h1, h2, h3, h4, p, li, a, .btn) {
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  html:is([data-display-text="larger"], [data-display-text="largest"]) :is(h1, h2, h3, h4) { hyphens: auto; }
}
html:is([data-display-text="larger"], [data-display-text="largest"]) :is(.hero__content, .page-hero__content, .gallery-hero__content, .banner__content) {
  min-width: 0;
}
/* The footer wordmark is a logotype, like the nav one: it holds its size so it
   never forces the footer wider than a 320px phone. */
html:is([data-display-text="larger"], [data-display-text="largest"]) .footer__brand-name { font-size: 20px; }

/* Keep room between the enlarged wordmark and seven desktop links at
   125% and 150% text sizes. Use the drawer below these widths. */
@media (max-width: 1840px) {
  html[data-display-text="largest"] .nav { padding: 0 clamp(16px, 4vw, 24px); }
  html[data-display-text="largest"] .nav__hamburger { display: block; }
  html[data-display-text="largest"] .nav__links {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: calc(100dvh - 80px);
    flex-direction: column;
    background: var(--warm-white);
    padding: 32px 24px;
    gap: 8px;
    z-index: 99;
    overflow-y: auto;
  }
  html[data-display-text="largest"] .nav__links.mobile-open { display: flex; }
  html[data-display-text="largest"] .nav__links a { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--border); display: block; }
  html[data-display-text="largest"] .nav__links .nav__cta { margin-top: 12px; text-align: center; border-bottom: none; }
  html[data-display-text="largest"] .nav__hamburger.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
  html[data-display-text="largest"] .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  html[data-display-text="largest"] .nav__hamburger.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }
}
@media (max-width: 1640px) {
  html[data-display-text="larger"] .nav { padding: 0 clamp(16px, 4vw, 24px); }
  html[data-display-text="larger"] .nav__hamburger { display: block; }
  html[data-display-text="larger"] .nav__links {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: calc(100dvh - 80px);
    flex-direction: column;
    background: var(--warm-white);
    padding: 32px 24px;
    gap: 8px;
    z-index: 99;
    overflow-y: auto;
  }
  html[data-display-text="larger"] .nav__links.mobile-open { display: flex; }
  html[data-display-text="larger"] .nav__links a { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--border); display: block; }
  html[data-display-text="larger"] .nav__links .nav__cta { margin-top: 12px; text-align: center; border-bottom: none; }
  html[data-display-text="larger"] .nav__hamburger.open span:nth-child(1) { top: 11px; transform: rotate(45deg); }
  html[data-display-text="larger"] .nav__hamburger.open span:nth-child(2) { opacity: 0; }
  html[data-display-text="larger"] .nav__hamburger.open span:nth-child(3) { top: 11px; transform: rotate(-45deg); }
}
/* On a phone the wordmark shares the 80px bar with the menu button, and at
   larger sizes it runs into it. It is the brand's logotype, not reading text,
   so it holds its default phone size (18px) here; the logo image carries the
   same name for assistive technology. */
@media (max-width: 480px) {
  html:is([data-display-text="larger"], [data-display-text="largest"]) .nav__logo { font-size: 18px; gap: 8px; }
  html:is([data-display-text="larger"], [data-display-text="largest"]) .nav__logo img { width: 48px; height: 48px; }
}
@media (max-width: 340px) {
  html:is([data-display-text="larger"], [data-display-text="largest"]) .nav__logo { font-size: 16px; letter-spacing: 0.04em; }
}

/* ===== DARK APPEARANCE =====
   One paired palette. --navy and --crimson are redefined as TEXT colors
   (that is how most rules use them); the few rules that paint them as a
   surface are pinned back to the brand's dark navy and crimson below.
   Images are never inverted or filtered. */
@media (forced-colors: none) {
  html[data-display-theme="dark"] {
    color-scheme: dark;
    --navy: #EEF1F8;
    --navy-light: #2A3D66;
    --crimson: #FF8F9D;
    --crimson-dark: #FFB8C1;
    --gold: #D4A843;
    --cream: #161F35;
    --warm-white: #10172A;
    --text-primary: #EEF1F8;
    --text-secondary: #C3CADB;
    --text-light: #A9B2C6;
    --border: #3A4766;
    --gold-ink: #D4A843;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --dp-band: #1B2A4A;
    --dp-card: #1B2540;
    --dp-card-soft: #232E4C;
    --dp-surface: #1B2540;
    --dp-surface-soft: #232E4C;
    --dp-ink: #EEF1F8;
    --dp-muted: #C3CADB;
    --dp-control-border: #8A96B5;
    --dp-button: #EEF1F8;
    --dp-button-hover: #FFFFFF;
    --dp-on-button: #10172A;
    --dp-focus: #FF8F9D;
    --dp-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.55);
  }

  /* Navigation bar and drawer */
  html[data-display-theme="dark"] .nav { background: rgba(16, 23, 42, 0.94); border-bottom-color: rgba(58, 71, 102, 0.8); }
  html[data-display-theme="dark"] .nav--scrolled { background: rgba(16, 23, 42, 0.98); }
  html[data-display-theme="dark"] .nav__cta { background: var(--navy-light); border: 1px solid #8A96B5; }
  html[data-display-theme="dark"] .nav__cta:hover { background: #34497A; }
  html[data-display-theme="dark"] .nav__links.mobile-open { background: var(--warm-white); }

  /* Surfaces painted with the brand navy stay dark navy */
  html[data-display-theme="dark"] :is(.footer, .trust-bar, .quote-section, .gallery-hero) { background-color: var(--dp-band); }
  html[data-display-theme="dark"] .skip-link { background: var(--dp-band); color: #FFFFFF; outline: 2px solid #EEF1F8; }
  html[data-display-theme="dark"] .sourcing__step-num { background: var(--navy-light); }

  /* Filled buttons keep the brand crimson with white text */
  html[data-display-theme="dark"] :is(.btn--primary, .how-works-step__number) { background-color: #B8283B; }
  html[data-display-theme="dark"] .btn--primary:hover { background-color: #8E1F2E; }
  html[data-display-theme="dark"] .btn:focus-visible { outline-color: #FFFFFF; box-shadow: 0 0 0 4px var(--crimson); }

  /* Japan Guide filter chips: selected chip inverts */
  html[data-display-theme="dark"] .guide-categories__btn { background: var(--dp-card); border-color: #56648A; }
  html[data-display-theme="dark"] :is(.guide-categories__btn:hover, .guide-categories__btn--active) { background: var(--navy); border-color: var(--navy); color: #10172A; }

  /* Cards and panels that were plain white or warm grey */
  html[data-display-theme="dark"] :is(.product-card, .guide-card, .source-card, .how-works-step, .social-link) { background: var(--dp-card); background-color: var(--dp-card); }
  html[data-display-theme="dark"] .product-card__img { background: var(--dp-card-soft); }
  html[data-display-theme="dark"] .product-card__badge { background: rgba(238, 241, 248, 0.08); }
  html[data-display-theme="dark"] .product-card__badge--new { background: rgba(255, 143, 157, 0.12); }
  html[data-display-theme="dark"] .sourcing__cat { background: rgba(238, 241, 248, 0.06); }
  html[data-display-theme="dark"] summary:hover { background-color: var(--dp-card-soft); }
  html[data-display-theme="dark"] details[open] summary { background-color: var(--dp-card); }

  /* Alt sections keep the site's own multiply blend: a light pattern multiplied
     over the dark --cream can only darken it, so text contrast never drops
     below its ratio on #161F35. The divider texture is toned down. */
  html[data-display-theme="dark"] .seigaiha-divider { opacity: 0.15; }
}

/* ===== MOTION =====
   The module sets data-display-motion="stop" for the site's own control OR the
   device's reduced-motion setting. Every animation on this site is owned. */
html[data-display-motion="stop"] { scroll-behavior: auto; }
html[data-display-motion="stop"] body *,
html[data-display-motion="stop"] body *::before,
html[data-display-motion="stop"] body *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html[data-display-motion="stop"] .fade-in { opacity: 1 !important; transform: none !important; }
html[data-display-motion="stop"] .petal { display: none; }
html[data-display-motion="stop"] .sparkle { opacity: 0.35; }
html[data-display-motion="stop"] .hero__slide img,
html[data-display-motion="stop"] .hero__slide.active img { transform: none; }

/* ===== LAUNCHER AND PANEL =====
   A 48px round button, bottom right, under the nav and its drawer (z 99/100)
   so it never sits over the menu. The visible text label is kept for assistive
   technology and replaced on screen by a sliders icon. */
.display-preferences {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: calc(100% - 32px);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dp-ink);
  line-height: 1.5;
}
.display-preferences [hidden] { display: none !important; }

.display-launcher {
  position: relative;
  flex: none;
  width: 48px;
  height: 48px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--dp-button);
  color: var(--dp-on-button);
  box-shadow: var(--dp-shadow);
  cursor: pointer;
  overflow: hidden;
  /* the accessible name stays the button text; it is moved off screen */
  text-indent: 200%;
  white-space: nowrap;
  font: inherit;
  font-size: 1rem;
}
.display-launcher::before {
  content: "";
  position: absolute;
  inset: 11px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.display-launcher:hover { background: var(--dp-button-hover); }
html[data-display-theme="dark"] .display-launcher { border-color: #10172A; }

.display-panel {
  width: 22rem;
  max-width: 100%;
  max-height: calc(100dvh - 80px - 48px - 3rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.25rem;
  border: 1px solid var(--dp-control-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--dp-surface);
  box-shadow: var(--dp-shadow);
}
.display-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.display-heading h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dp-ink);
}
.display-panel button,
.display-panel select {
  font: inherit;
  font-size: 0.9375rem;
  min-height: 44px;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--dp-control-border);
  border-radius: var(--radius, 8px);
  color: var(--dp-ink);
  background: var(--dp-surface-soft);
  cursor: pointer;
}
.display-panel button:hover { border-color: var(--dp-ink); }
.display-field { display: grid; gap: 0.375rem; margin-bottom: 0.75rem; }
.display-field label { font-size: 0.9375rem; font-weight: 600; color: var(--dp-ink); }
.display-panel select { width: 100%; background: var(--dp-surface); }
.display-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--dp-ink);
  cursor: pointer;
}
.display-check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--dp-button);
}
.display-panel p {
  margin: 0.25rem 0 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--dp-muted);
}
.display-panel #display-status { margin: 0.75rem 0 0; }
.display-panel #display-status:empty { display: none; }
#display-reset { width: 100%; }
.display-preferences :focus-visible { outline: 3px solid var(--dp-focus); outline-offset: 3px; }
/* Two-tone ring: a light band next to the button, then the focus colour, so
   one of the two always stands out (crimson alone was 2.30:1 on the footer). */
.display-launcher:focus-visible {
  outline: 3px solid var(--dp-focus);
  outline-offset: 5px;
  box-shadow: 0 0 0 5px var(--dp-on-button), var(--dp-shadow);
}

@media (max-height: 560px) {
  .display-panel { max-height: calc(100dvh - 48px - 2.5rem); }
}
@media (forced-colors: active) {
  .display-launcher, .display-panel, .display-panel button, .display-panel select {
    forced-color-adjust: auto;
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
    box-shadow: none;
  }
  .display-launcher::before { background: ButtonText; }
  .display-preferences :focus-visible { outline-color: Highlight; }
}
@media print { .display-preferences { display: none; } }