/* Paper family v4. Artwork is image-generated; CSS handles layout and readable UI. */
:root{--paper:#f7f4ee;--ink:#222629;--muted:#5c5d5a;--line:#d5d1c8;--blue:#343c40;--acid:#e9ddc8;--surface:#fffdf8;--surface-raised:#eee9df;--studio-accent:#343c40;--studio-on-accent:#fffdf8;--studio-tint:#ebe7df;--studio-rule:#b2b0aa;--focus:#176579;--brand-paper:#f3ede2;--brand-ink:#222629;--fivefold-field:#222629;--studio-pigment-primary:transparent;--studio-pigment-secondary:transparent}
body[data-studio="kita"]{--studio-accent:#795215;--studio-on-accent:#fffdf8;--studio-tint:#f0e6d0;--studio-rule:#cba658;--studio-pigment-primary:#c48726;--studio-pigment-secondary:#277d86}
body[data-studio="learning"]{--studio-accent:#71475a;--studio-on-accent:#fffdf8;--studio-tint:#ede3e6;--studio-rule:#b68a9c;--studio-pigment-primary:#8b4264;--studio-pigment-secondary:#3e7388}
body[data-studio="nutrition"]{--studio-accent:#705236;--studio-on-accent:#fffdf8;--studio-tint:#eee4d7;--studio-rule:#b48c60;--studio-pigment-primary:#456846;--studio-pigment-secondary:#bf663a}
body[data-studio="movement"]{--studio-accent:#285744;--studio-on-accent:#fffdf8;--studio-tint:#e4eae2;--studio-rule:#8dab96;--studio-pigment-primary:#246b62;--studio-pigment-secondary:#cd7545}
body[data-studio="fivefold"]{--studio-accent:#343c40;--studio-on-accent:#fffdf8;--studio-tint:#e8e7e2;--studio-rule:#a5a8a5;--studio-pigment-primary:transparent;--studio-pigment-secondary:transparent}
html[data-theme="dark"]{--paper:#191d1f;--ink:#f3eee4;--muted:#bfbbb3;--line:#424647;--blue:#d8d4ca;--surface:#232829;--surface-raised:#2a3031;--studio-accent:#dbd5c8;--studio-on-accent:#191d1f;--studio-tint:#2c3131;--studio-rule:#858981;--focus:#9acbd8}
html[data-theme="dark"] body[data-studio="kita"]{--studio-accent:#e1be78;--studio-on-accent:#191d1f;--studio-tint:#302d25;--studio-rule:#82704e}
html[data-theme="dark"] body[data-studio="learning"]{--studio-accent:#d8b5c5;--studio-on-accent:#191d1f;--studio-tint:#30282e;--studio-rule:#886b7a}
html[data-theme="dark"] body[data-studio="nutrition"]{--studio-accent:#d5b793;--studio-on-accent:#191d1f;--studio-tint:#302c26;--studio-rule:#86775f}
html[data-theme="dark"] body[data-studio="movement"]{--studio-accent:#adccbb;--studio-on-accent:#191d1f;--studio-tint:#27312c;--studio-rule:#758a7b}
html[data-theme="dark"] body[data-studio="fivefold"]{--studio-accent:#dbd5c8;--studio-on-accent:#191d1f;--studio-tint:#2c3131;--studio-rule:#858981}
/* Display lettering is a graphic reference, never a reading font. */
h1,h2,h3{font-family:var(--sans);font-weight:650}
h1 em,h2 em{font:inherit;letter-spacing:inherit;color:inherit}
.header{border-top-width:2px;background:var(--paper)}
.header .brand-dot,body.theme-film .header .brand-dot{color:var(--ink)}
.shop-kicker{font-size:.72rem;letter-spacing:.13em}
.portal-heading{padding-block:38px 42px;grid-template-columns:1fr 250px;gap:34px}
.portal-heading h1{max-width:20ch;font-size:clamp(34px,4vw,56px);font-weight:650;line-height:1.12;letter-spacing:-.045em}
.portal-heading h1 em{color:var(--muted)}
.portal-brand-art{width:220px;height:220px;border-radius:2px}
.portal-entry-art,.portal-entry-small .portal-entry-art,.shop-feature-visual,.shop-product-image,.shop-detail-picture{border-radius:3px}
.portal-entry:hover .portal-entry-art{box-shadow:none;outline:1px solid var(--studio-rule);outline-offset:4px}
.portal-entry-copy{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.portal-entry.shop-fivefold .portal-entry-copy{border-top-color:var(--line)}
.portal-entry-copy h2{font-size:1.45rem;font-weight:700}
.portal-entry-copy>p{font-size:.91rem;line-height:1.6;max-width:34ch}
.portal-young{margin-top:45px}
.portal-young-label h2{font-size:.9rem;letter-spacing:.01em}
.shop-button{border-radius:3px;background:var(--ink);color:var(--paper);font-weight:750}
.shop-button:hover{background:var(--studio-accent);color:var(--studio-on-accent);transform:none}
.shop-kita{--shop-tone:#eadfc8;--shop-tone-strong:#795215;--shop-dark:#302d25}
.shop-learning{--shop-tone:#e9dfe1;--shop-tone-strong:#71475a;--shop-dark:#30282e}
.shop-nutrition{--shop-tone:#e8dfcf;--shop-tone-strong:#705236;--shop-dark:#302c26}
.shop-movement{--shop-tone:#dfe6dc;--shop-tone-strong:#285744;--shop-dark:#27312c}
.shop-fivefold{--shop-tone:var(--fivefold-field);--shop-tone-strong:#343c40;--shop-dark:var(--fivefold-field)}
.shop-studio-hero{border-radius:3px;margin-block:28px 36px}
.shop-studio-intro{padding:36px 36px 40px}
.shop-studio-intro h1{font-size:clamp(32px,3.4vw,49px);line-height:1.13;font-weight:650}
.shop-studio-intro .shop-kicker{border:0;padding:0;color:var(--studio-accent)}
.shop-studio-art>img{mask-image:none}
.shop-feature{padding-block:32px 52px}
.shop-feature-visual>.shop-cover{transform:rotate(-4deg);box-shadow:4px 7px 12px #0002}
.shop-feature-sample{transform:rotate(5deg);box-shadow:4px 7px 12px #0002}
.shop-feature-caption{font-size:.68rem;letter-spacing:.1em}
.shop-feature-copy h2{font-weight:650;line-height:1.18}
.shop-detail-summary h1{font-size:clamp(30px,3.6vw,48px);font-weight:650}
.shop-detail-sample .sample-preview-section{border-radius:3px;background:var(--surface)}
.shop-fivefold-hero,.shop-channel-banner{background:var(--fivefold-field);color:#f3eee4;border-radius:3px;padding:38px 42px}
.shop-fivefold-hero h1{font-size:clamp(34px,3.8vw,54px);font-weight:650}
.shop-fivefold-hero .shop-kicker{border:0;padding:0;color:#e4ded2}
.shop-fivefold-hero .shop-button,.shop-channel-actions .shop-button{background:#f3eee4;color:#222629;border-color:#f3eee4}
.shop-fivefold-hero .shop-button:hover,.shop-channel-actions .shop-button:hover{background:#fffdf8;color:#222629}
.shop-fivefold-art,.shop-channel-mark,.shop-archive-channel-art,.portal-entry.shop-fivefold .portal-entry-art{background:var(--fivefold-field);border-radius:3px}
.shop-fivefold-symbol img{width:100%;max-height:420px}
.portal-entry .shop-fivefold-symbol img{height:100%;width:100%;object-fit:contain}
.shop-channel-grid{gap:24px}
.shop-channel-mark{padding:0;aspect-ratio:1}
.shop-channel-mark>.shop-emblem{height:100%;width:100%}
.shop-channel>div:last-child{border-top:2px solid var(--channel-secondary);padding-top:16px;margin-top:16px}
.shop-channel h2{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.3}
.shop-channel-banner:after{display:none}
.shop-channel-banner-copy .shop-kicker{color:#e4ded2;border:0;padding:0}
.shop-channel-banner-copy h1{font-size:clamp(34px,4.2vw,60px);font-weight:650}
.shop-channel-banner-art>.shop-emblem{max-width:340px}
.shop-archive-link .shop-button{background:var(--ink);color:var(--paper)}
.shop-archive-channel-art{border-radius:3px;padding:0}
.shop-archive-channel-copy{border-top-color:var(--channel-secondary)}
.channel-signet-media,.channel-signet-hero,.card-media:has(>.channel-emblem-image),.card-media:has(>img[src*="paper-v4/"]){background:#222629!important;border-radius:3px}
.card-media>img[src*="paper-v4/"]{object-fit:contain}
.footer{background:#222629;color:#f3eee4}
.footer .brand>span,.footer a:hover{color:#f3eee4}
html[data-theme="dark"] .shop-studio-art{border-radius:0}
html[data-theme="dark"] .shop-studio-art>img,html[data-theme="dark"] .portal-entry-art>img{filter:none}
html[data-theme="dark"] .shop-topic-list>li{border-color:var(--studio-rule)}
html[data-theme="dark"] .shop-format,html[data-theme="dark"] .shop-feature-caption{color:#e5e0d5}
/* Controls retain discernible focus and selected states in both themes. */
:is(a,button,input,select):focus-visible{outline:3px solid var(--focus);outline-offset:4px}
@media(max-width:1000px){.shop-channel-grid{gap:16px}.shop-studio-intro{padding:28px}.shop-studio-intro h1{font-size:35px}}
@media(max-width:760px){
 .portal-heading{grid-template-columns:1fr 100px;gap:18px;padding-block:28px 32px;align-items:center}
 .portal-heading h1{font-size:30px;max-width:18ch}
 .portal-brand-art{width:100px;height:116px;object-fit:cover;margin:0}
 .portal-entry-copy h2{font-size:1.25rem}
 .portal-entry:not(.portal-entry-small){grid-template-columns:42% 1fr}
 .portal-entry-copy>p{font-size:.87rem}
 .shop-studio-intro{padding:28px 24px 20px}
 .shop-studio-intro h1{font-size:34px}
 .shop-studio-art{padding:0;max-height:310px}
 .shop-fivefold-hero,.shop-channel-banner{padding:28px 24px;border-radius:3px}
 .shop-fivefold-hero h1{font-size:34px}
 .shop-channel-banner-copy h1{font-size:36px}
 .shop-channel-mark{padding:0;border-radius:3px}
 .shop-channel:last-child>div:last-child{border-top-color:var(--channel-secondary)}
 .shop-detail-summary h1{font-size:32px}
}
@media(prefers-reduced-motion:reduce){.shop-channel:hover .shop-emblem,.shop-feature-visual:hover>.shop-cover{transform:none}}
