/* Japanese Coloring Studio — official Scene Directory */
:root { color-scheme: light; --paper:#f7f5f0; --ink:#203142; --muted:#65747d; --accent:#b36b51; --line:#dedfdc; --white:#fff; }
* {box-sizing:border-box}
html {scroll-behavior:smooth}
body {margin:0;background:var(--paper);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,"Noto Sans JP",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration:none} img {display:block;max-width:100%}
.site-wrap {max-width:1240px;margin:auto;padding:0 clamp(18px,5vw,74px)}
.topbar {height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand {display:flex;align-items:center;gap:13px;letter-spacing:.14em;font-size:12px;font-weight:500;line-height:1.5}
.brand strong {font-weight:780}
.brand-mark {display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border:1px solid var(--accent);color:var(--accent);font-size:18px;font-family:Georgia,"Noto Serif JP",serif;font-weight:600;line-height:1}
.topbar-meta {font-size:11px;letter-spacing:.18em;color:var(--muted);white-space:nowrap}
.intro {padding:clamp(42px,7vw,84px) 0 30px}
.eyebrow {font-size:11px;letter-spacing:.22em;font-weight:650;color:var(--accent);display:flex;align-items:center;gap:12px}
.eyebrow-line {width:27px;height:1px;background:var(--accent)}
h1 {font-family:Georgia,"Times New Roman",serif;font-size:clamp(45px,7.1vw,91px);line-height:1.09;letter-spacing:-.038em;font-weight:400;margin:22px 0 18px}
h1 em {font-style:italic;color:var(--accent)}
.intro-en {font-size:15px;line-height:1.8;max-width:570px;color:#586772;margin:0 0 12px}
.intro-ja {font-size:13px;line-height:1.9;color:#74808a;margin:0}
.intro-bottom {margin-top:clamp(42px,6vw,75px);display:flex;align-items:end;justify-content:space-between;gap:8px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.collection-label {font-weight:700;letter-spacing:.17em;font-size:12px}
.collection-progress {font-family:Georgia,serif;font-size:27px;line-height:1}
.collection-progress small {font-family:system-ui,-apple-system,sans-serif;color:var(--muted);font-size:11px;letter-spacing:.08em}
.scene-gallery {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2.6vw,32px);padding:28px 0 clamp(48px,7vw,88px)}
.scene-card {display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);background:var(--white);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;overflow:hidden}
.scene-card:hover {transform:translateY(-4px);box-shadow:0 14px 34px rgba(35,45,50,.09);border-color:#c9c4ba}
.scene-card:focus-visible,.brand:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
.scene-image {aspect-ratio:5/4;position:relative;overflow:hidden;background:#edece8;display:flex;align-items:center;justify-content:center}
.scene-image img {width:100%;height:100%;object-fit:cover;object-position:center 32%;transition:transform .35s ease}
.scene-card:hover .scene-image img {transform:scale(1.025)}
.scene-number {position:absolute;left:14px;top:14px;background:#fcfbf6;min-width:40px;padding:8px 9px;color:var(--ink);font-family:Georgia,serif;font-size:16px;text-align:center;border:1px solid rgba(26,40,50,.08)}
.scene-details {padding:20px clamp(12px,2vw,23px) 21px;flex:1;display:flex;flex-direction:column}
.scene-region {font-size:10px;letter-spacing:.19em;font-weight:750;color:var(--accent)}
.scene-details h2 {font-family:Georgia,"Times New Roman",serif;font-size:clamp(18px,2.1vw,25px);font-weight:400;line-height:1.22;margin:8px 0 6px}
.scene-ja {font-size:12px;color:var(--muted);margin:0;line-height:1.55}
.scene-link {border-top:1px solid #e9e7e4;margin-top:auto;padding-top:20px;position:relative;top:13px;padding-bottom:13px;font-size:11px;letter-spacing:.035em;font-weight:650;color:var(--ink);display:flex;justify-content:space-between;gap:4px}
.scene-link span {font-size:16px;line-height:1}
.coming-soon {display:flex;align-items:center;gap:19px;border-top:1px solid var(--line);padding:25px 0 44px}
.coming-soon>span {color:var(--accent);font-size:25px}
.coming-soon strong {font-family:Georgia,serif;font-size:21px;font-weight:400}
.coming-soon p {color:var(--muted);margin:6px 0 0;line-height:1.55;font-size:12px}
.site-footer {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding:23px 0 32px;color:var(--muted);font-size:11px;letter-spacing:.03em}
@media (max-width:790px) {.scene-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar {height:76px}.scene-image {aspect-ratio:4/4}}
@media (max-width:490px) {.site-wrap {padding:0 16px}.topbar {height:66px}.brand{gap:8px;font-size:10px;letter-spacing:.07em}.brand-mark{width:29px;height:29px;font-size:15px}.topbar-meta{font-size:9px;letter-spacing:.08em}.intro{padding:42px 0 23px}.eyebrow{font-size:9px;letter-spacing:.12em}h1 {font-size:clamp(41px,10vw,58px);margin:17px 0 14px}.intro-en{font-size:13px}.intro-ja{font-size:12px}.intro-bottom{margin-top:34px}.collection-label{font-size:10px}.scene-gallery{gap:11px;padding:17px 0 46px}.scene-image{aspect-ratio:1/1}.scene-number{left:9px;top:9px;min-width:29px;padding:5px;font-size:12px}.scene-details{padding:14px 11px 13px}.scene-region{font-size:9px}.scene-details h2{font-size:18px;margin:7px 0 5px}.scene-ja{font-size:11px;min-height:32px}.scene-link{font-size:9px;padding-top:13px;top:8px;padding-bottom:8px}.scene-link span{font-size:13px}.coming-soon strong{font-size:19px}.site-footer{font-size:10px}}
@media (prefers-reduced-motion:reduce){.scene-card,.scene-image img{transition:none}.scene-card:hover{transform:none}}

/* Link to policy/information pages */
.jcs-legal-nav{display:flex;gap:12px 18px;flex-wrap:wrap;align-items:center;justify-content:center}
.jcs-legal-nav a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#a9aeb0}
.jcs-legal-nav a:hover{color:var(--accent)}
.jcs-legal-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:620px){.site-footer{flex-direction:column;text-align:center;padding-bottom:24px}.jcs-legal-nav{gap:8px 15px}}