:root {
  color-scheme: light;
  --page: #ffffff;
  --surface: #ffffff;
  --ink: #182822;
  --green: #064a35;
  --border: #cdd2cf;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
.home-page { --page: #ffffff; --surface: #ffffff; }
img { display: block; max-width: 100%; }
a { color: inherit; }

.site-header { background: var(--surface); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1880px; margin: auto; padding: 12px 22px; }
.header-inner a { display: inline-block; }
.header-logo { width: 365px; height: auto; }
.header-icon { width: 82px; height: 82px; object-fit: contain; }

.opening { width: 100%; margin: auto; padding: 36px 22px 0; text-align: center; }
.question { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 74px; margin: 0 auto 18px; padding: 10px 20px; border: 0; background: transparent; color: var(--ink); font: 700 clamp(18px, calc(2.25vw - 2px), 36px)/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.question:hover, .question:focus-visible { color: var(--green); }
.question:focus-visible, a:focus-visible { outline: 3px solid #2372dd; outline-offset: 4px; }
.animated-logo { width: min(100%, 640px); margin: auto; background: var(--surface); padding: 10px 18px; }
.animated-logo object, .animated-logo img { width: 100%; height: auto; aspect-ratio: 1777 / 295; object-fit: contain; }

.story { width: 100%; max-width: 1600px; margin: 20px auto 0; padding: 0 22px; }
.story blockquote { width: max-content; max-width: 100%; margin: 0 auto 20px; padding: 16px 22px; background: var(--surface); border-left: 5px solid var(--green); }
.quote-text { display: inline-block; max-width: 100%; }
.story blockquote p { margin: 0; font-size: clamp(17px, calc(2vw - 3px), 27px); line-height: 1.35; }
.story cite { display: block; margin-top: 6px; color: #526059; font-size: 11px; font-style: normal; text-align: right; transform: translateX(14px); }
.story-copy { columns: 2; column-gap: 32px; }
.story-copy p { break-inside: avoid; margin: 0 0 12px; font-size: 16px; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease, visibility .35s ease; }
.story-copy p:nth-child(n+5) { text-align: right; }
.story-copy p.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.story-copy p:first-child { font-weight: 700; }
.inline-logo { display: inline-block; width: auto; height: 2em; max-width: none; vertical-align: -0.65em; }

.blocks { max-width: 1600px; margin: 32px auto 0; padding: 0 22px; }
.blocks-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.block { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: border-color .15s ease, opacity .35s ease, transform .35s ease, visibility .35s ease; }
.block.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.block:hover { border-color: var(--green); transform: translateY(-2px); }
.block img { width: 100%; height: 54px; object-fit: cover; object-position: top center; background: #fff; }
.block span { display: block; padding: 5px 8px; background: var(--green); color: #fff; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .035em; text-align: center; text-decoration: underline; text-decoration-color: #69aeff; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.demo-action { padding: 38px 22px 50px; text-align: center; }
.demo-action a { display: inline-block; padding: 16px 32px; border-radius: 7px; background: #000; color: #fff; font-size: 18px; font-weight: 700; text-decoration: none; }
.demo-action a:hover { background: #262626; }

.category-main { max-width: 1880px; margin: auto; padding: 18px 22px 50px; }
.category-top { display: flex; align-items: center; gap: 18px; margin: 0 0 16px; }
.category-top a { padding: 9px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; text-decoration: none; }
.category-top h1 { margin: 0; font-size: clamp(24px, 2.4vw, 38px); }
.gallery { display: grid; gap: 24px; }
.gallery figure { margin: 0; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.gallery figcaption { padding: 3px 4px 10px; font-weight: 700; font-size: 18px; }
.gallery img { width: 100%; height: auto; }

@media (max-width: 1200px) { .blocks-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .story-copy { columns: 1; } .story-copy p:nth-child(n+5) { text-align: left; } .blocks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .header-inner { padding: 10px 16px; } .header-logo { width: min(100%, 280px); } .header-icon { width: 52px; height: 52px; } .opening { padding: 26px 16px 0; } .question { min-height: 92px; margin-bottom: 10px; } .animated-logo { padding: 7px 9px; } .story { margin-top: 14px; padding: 0 16px; } .story blockquote { padding: 13px 15px; } .story-copy p { font-size: 15px; } .blocks { padding: 0 16px; } .blocks-grid { grid-template-columns: 1fr; gap: 14px; } .category-main { padding: 16px; } .category-top { align-items: flex-start; flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .block, .story-copy p { transition: none; } }