/* PureMakers studio: shared shell, artwork-led home and accessible motion. */
:root { --studio-ink: #303e32; --studio-paper: #f5f2e9; --studio-rust: #935533; --studio-line: #deddd1; }
[hidden] { display: none !important; }
body { background: var(--studio-paper); }
html { scroll-padding-top: 7rem; }
[id] { scroll-margin-top: 1rem; }
.shop-main[id], .shop-main [id], .privacy-page main[id] { scroll-margin-top: 1rem; }
.announcement-banner { padding: .65rem 1.25rem; gap: .35rem 1.25rem; flex-wrap: wrap; background: var(--studio-ink); font-size: .72rem; letter-spacing: .035em; text-transform: none; }
.announcement-banner p { margin: 0; line-height: 1.5; }
.announcement-banner a { color: #fff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.announcement-banner .offer-note { color: #e4e8dc; opacity: 1; font-size: .68rem; }
.site-header { background: rgba(245,242,233,.97); border-bottom: 1px solid var(--studio-line); padding: 1rem 0; }
.header-inner { max-width: 1320px; padding: 0 2rem; gap: 1.5rem; }
.logo-lockup .logo { font-size: 1.65rem; }
.logo-lockup .logo-sub { font-size: .57rem; letter-spacing: .16em; }
.site-nav { gap: 1.5rem; }
.site-nav a { font-size: .82rem; color: #515847; }
.header-inner > .badge { padding: .7rem 1.1rem; font-size: .65rem; letter-spacing: .09em; background: var(--studio-ink); }
.nav-toggle { display: none; }
.shop-main { width: 100%; max-width: none; padding: 0; margin: 0; }
.studio-hero { max-width: 1320px; margin: 0 auto; padding: 4.5rem 2rem 3rem; display: grid; grid-template-columns: .95fr 1.15fr; align-items: center; gap: 3rem; }
.eyebrow { color: var(--studio-rust); text-transform: uppercase; letter-spacing: .17em; font-size: .66rem; font-weight: 600; line-height: 1.5; margin-bottom: 1.5rem; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: .8rem; }
.eyebrow-line { height: 1px; width: 2rem; background: currentColor; }
.hero-copy h1 { font-family: var(--font-display); font-size: clamp(3.9rem, 6.4vw, 6.25rem); font-weight: 400; line-height: 1.02; letter-spacing: -.045em; margin: 0 0 1.65rem; }
.hero-copy h1 em { color: #788269; font-weight: 400; }
.hero-intro { max-width: 370px; font-size: 1rem; line-height: 1.8; color: #5d6455; }
.studio-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; margin-top: 2rem; }
.studio-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--studio-ink); color: #fff; padding: 1rem 1.4rem; border-radius: 3px; text-decoration: none; font-size: .85rem; transition: background .2s, transform .2s; }
.studio-button:hover { background: #4b5a40; transform: translateY(-3px); }
.studio-button span { font-size: 1.25rem; }
.text-link { display: inline-flex; align-items: center; gap: .8rem; color: var(--studio-ink); text-decoration: none; border-bottom: 1px solid #b5baac; padding-bottom: .3rem; font-size: .8rem; }
.text-link:hover { border-color: currentColor; }
.hero-footnote { margin-top: 2.25rem; color: #656c5a; font-size: .72rem; display: flex; align-items: center; gap: .6rem; }
.hero-footnote > span { font-size: 1.3rem; color: var(--studio-rust); }
.hero-gallery { position: relative; min-width: 0; height: 610px; isolation: isolate; }
.gallery-orbit { position: absolute; inset: 40px 0 36px 25px; z-index: -1; border-radius: 48% 48% 4px 4px; background: #e5e7dc; transform: rotate(5deg); }
.gallery-orbit::after { content: ''; position: absolute; inset: -18px 14px 20px -18px; border: 1px solid #ced3c1; border-radius: inherit; }
.gallery-star { position: absolute; right: 0; top: 0; color: #a56c45; font-size: 4.5rem; line-height: 1; }
.hero-art { position: absolute; display: block; padding: 8px; color: var(--studio-ink); text-decoration: none; background: #fffdf7; box-shadow: 0 16px 36px #28332420; transition: box-shadow .3s; }
.hero-art:hover { box-shadow: 0 18px 40px #28332438; z-index: 5; }
.hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #eeece4; }
.hero-art-0 { width: 68%; left: 17%; top: 76px; transform: rotate(2deg); z-index: 2; }
.hero-art-1 { width: 34%; left: -3%; top: 15px; transform: rotate(-7deg); z-index: 3; }
.hero-art-2 { width: 35%; right: -1%; bottom: 32px; transform: rotate(6deg); z-index: 3; }
.hero-art-caption { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem .25rem .25rem; font-size: .65rem; line-height: 1.35; }
.hero-art-caption > span { font-size: 1rem; }
.gallery-note { position: absolute; bottom: -38px; left: 4%; font-size: .78rem; line-height: 1.7; color: #606953; }
.note-number { display: block; margin-bottom: .3rem; font-size: .6rem; letter-spacing: .12em; color: var(--studio-rust); }
.gallery-note em { font-family: var(--font-display); font-size: 1rem; }
.mockup-note { position: absolute; bottom: -12px; width: 100%; text-align: right; font-size: .61rem; color: #6b715f; }
.hero-fallback { width: 100%; margin-top: 100px; border-radius: 12px; }
.motion-control { position: absolute; right: 0; top: -30px; padding: .5rem .65rem; border: 1px solid var(--studio-line); border-radius: 99px; background: transparent; color: #58614f; font: inherit; font-size: .65rem; cursor: pointer; z-index: 6; }
.trust-strip { max-width: 1256px; margin: 1.5rem auto 5.5rem; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); border-radius: 0; background: transparent; }
.trust-item, .trust-item:first-child, .trust-item:last-child { border: 0; border-right: 1px solid var(--studio-line); border-radius: 0; background: transparent; }
.trust-item:last-child { border-right: 0; }
.trust-item strong { font-size: .77rem; font-weight: 500; }
.trust-item span { font-size: .66rem; }
.catalog-intro, .controls-container, .catalog-container, .count-bar { width: calc(100% - 4rem); max-width: 1256px; margin-left: auto; margin-right: auto; }
.catalog-intro { padding-top: .5rem; }
.catalog-intro:focus { outline: none; }
.collection-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.collection-heading .eyebrow { margin-bottom: .7rem; }
.collection-heading h2, .gallery-story h2 { font-family: var(--font-display); font-size: clamp(2rem,3vw,3rem); line-height: 1.25; letter-spacing: -.025em; font-weight: 400; }
.collection-heading h2 em { color: #6e7a60; font-weight: 400; }
.collection-heading > p { color: #68715d; font-size: .8rem; line-height: 1.7; }
.mood-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.mood-links a { padding: .7rem 1rem; border: 1px solid #d4d8c9; border-radius: 99px; color: #59624e; font-size: .75rem; text-decoration: none; transition: background .2s,color .2s; }
.mood-links a:hover { background: #e4e8da; }
.mood-links a[aria-current] { background: var(--studio-ink); color: white; border-color: var(--studio-ink); }
.controls-container { border-radius: 4px; background: #fffdf8; box-shadow: none; padding: 1rem; }
.count-bar { text-align: left; margin-top: 1rem; margin-bottom: 1.25rem; color: #66715b; font-size: .73rem; }
.product-grid { gap: 2rem 1.4rem; }
.card { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
.card:hover { transform: none; box-shadow: none; border-color: transparent; }
.card .image-container { border-radius: 5px; background: #e6e6dc; overflow: hidden; }
.card .image-container img { transition: transform .65s cubic-bezier(.2,.6,.3,1); }
.card:hover .image-container img { transform: scale(1.035); }
.card .details-container { padding: 1rem 0 .5rem; }
.product-title { font-size: .94rem; line-height: 1.45; min-height: 2.8rem; font-weight: 500; }
.product-detail { font-size: .72rem; line-height: 1.6; color: #69725e; }
.tag-pill { border: 0; padding: 0; border-radius: 0; color: #805933; background: transparent; font-size: .56rem; letter-spacing: .1em; }
.tags-row { margin-bottom: .55rem; }
.price { font-size: .96rem; color: var(--studio-ink); }
.price-note { color: #69725e; }
.etsy-btn { color: var(--studio-ink); border: 1px solid #b8c0ac; background: transparent; border-radius: 3px; padding: .55rem .8rem; font-size: .72rem; }
.etsy-btn:hover { background: var(--studio-ink); border-color: var(--studio-ink); color: #fff; }
.pagination-container { margin-top: 3rem; margin-bottom: 5rem; }
.page-btn.active { background: var(--studio-ink); border-color: var(--studio-ink); }
.gallery-story { max-width: 1256px; width: calc(100% - 4rem); margin: 2rem auto 6rem; background: var(--studio-ink); color: #f5f2e9; display: grid; grid-template-columns: 1fr 1fr; border-radius: 5px; overflow: hidden; }
.gallery-story-art { position: relative; min-height: 590px; background: #dfe2d3; color: #43543a; }
.story-word { position: absolute; top: 1.25rem; left: 2rem; font-family: var(--font-display); font-style: italic; font-size: clamp(3rem,6vw,5.5rem); opacity: .42; letter-spacing: -.04em; }
.story-print { position: absolute; width: 56%; padding: 8px; background: #fffdf7; box-shadow: 0 12px 22px #1c2e3228; }
.story-print img { width: 100%; height: auto; display: block; }
.story-print-0 { top: 130px; left: 8%; transform: rotate(-8deg); }
.story-print-1 { bottom: 90px; right: 5%; transform: rotate(7deg); }
.gallery-story-art > p { position: absolute; bottom: 28px; width: 100%; text-align: center; padding: 0 1rem; font-size: .72rem; }
.gallery-story-copy { padding: 3.5rem 3rem; align-self: center; }
.gallery-story .eyebrow { color: #d4c699; }
.gallery-story h2 { color: #f5f2e9; margin-bottom: 1.5rem; }
.gallery-story h2 em { color: #c3cdb4; font-weight: 400; }
.gallery-story-copy > p:not(.eyebrow) { font-size: .9rem; color: #d4daca; line-height: 1.8; margin-bottom: 1.5rem; }
.light-link { color: #f5f2e9; border-color: #85917a; }
.bundle-offer { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #65745d; }
.offer-kicker { display: block; font-size: .65rem; letter-spacing: .04em; margin-bottom: .5rem; color: #c5cfb8; }
.bundle-offer strong { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; }
.bundle-offer strong span { font-family: var(--font-sans); font-size: .78rem; display: inline-block; }
.offer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1rem 0; }
.copy-code { cursor: pointer; padding: .7rem .85rem; background: #eff1e6; border: 1px solid #eff1e6; border-radius: 3px; color: var(--studio-ink); font-family: inherit; font-size: .75rem; }
.offer-actions a { font-size: .74rem; color: #f5f2e9; text-underline-offset: 4px; }
.bundle-offer small { display: block; font-size: .65rem; line-height: 1.7; color: #c6d0bc; }
.copy-status { display: block; min-height: 1.5em; font-size: .72rem; margin-top: .3rem; color: #f5f2e9; }
.gallery-story :focus-visible { outline-color: #fff; }
.content-section { max-width: 1320px; padding: 5rem 2rem; }
.content-section h2 { font-size: clamp(1.8rem,2.7vw,2.7rem); letter-spacing: -.02em; }
.content-section .tagline { color: var(--studio-rust); font-size: .65rem; }
.content-band { background: #eeeee4; border: 0; }
.step-card { background: transparent; border: 0; border-top: 1px solid #cdd2c1; border-radius: 0; padding: 1.75rem 1rem 0 0; }
.step-number { width: auto; height: auto; background: transparent; color: #859071; font-family: var(--font-display); font-size: 2.7rem; line-height: 1.2; margin-bottom: 1rem; }
.step-card h3 { font-weight: 500; font-size: 1rem; }
.step-card p { font-size: .84rem; line-height: 1.8; }
.info-card { border-radius: 3px; background: #fffdf8; box-shadow: none; }
.info-grid { grid-template-columns: repeat(2, 1fr); }
.content-section details { padding: 1.2rem 0; border-color: #d7dacb; }
.content-section summary { font-size: .9rem; font-weight: 500; }
.content-section details p { font-size: .84rem; }
.about-copy { max-width: 1320px; }
footer { background: #e6e8dc; border-top: 1px solid #d4d9c6; }
.footer-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem 4rem; text-align: center; }
.grid-item h4 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; text-transform: none; letter-spacing: -.025em; }
.grid-item h4 a { color: var(--studio-ink); }
.footer-links, .copyright { border-color: #cbd1bd; }
.privacy-page main { padding-top: 3.5rem; padding-bottom: 5rem; max-width: 1040px; }
.privacy-page .content-block { border-radius: 5px; border-color: #d8dccd; box-shadow: 0 12px 40px #303e3205; }
.privacy-page .content-block h3 { margin-top: 2rem !important; }
.privacy-page .content-block p, .privacy-page .content-block li { color: #56604d; }
.privacy-page main a { color: var(--studio-ink); }

@media (prefers-reduced-motion: no-preference) {
    .interactive .hero-copy > * { animation: studio-enter .85s both; }
    .hero-copy h1 { animation-delay: .08s; }
    .hero-intro { animation-delay: .16s; }
    .studio-actions { animation-delay: .24s; }
    .hero-footnote { animation-delay: .32s; }
    .motion-ready .gallery-orbit { animation: studio-drift 10s ease-in-out infinite alternate; }
    .motion-ready .gallery-star { animation: studio-turn 24s linear infinite; }
    .motion-ready .hero-art-1 { animation: studio-float-left 6s ease-in-out infinite alternate; }
    .motion-ready .hero-art-2 { animation: studio-float-right 7s ease-in-out infinite alternate; }
    .reveal-pending { opacity: 0; }
    .reveal-shown { animation: studio-reveal .65s both; }
}
@keyframes studio-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes studio-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes studio-drift { to { transform: translateY(-12px) rotate(-3deg); } }
@keyframes studio-turn { to { transform: rotate(360deg); } }
@keyframes studio-float-left { to { transform: translateY(-10px) rotate(-5deg); } }
@keyframes studio-float-right { to { transform: translateY(10px) rotate(4deg); } }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }
.motion-paused .reveal-pending { opacity: 1; transform: none; }
.motion-paused .hero-copy > *, .motion-paused .reveal-shown { animation: none !important; opacity: 1; transform: none; }
@media (max-width: 1100px) {
    .studio-hero { gap: 1.5rem; padding-top: 4rem; }
    .hero-gallery { height: 520px; }
    .hero-art-0 { top: 85px; }
    .gallery-note { left: 7%; bottom: -38px; }
    .hero-art-2 { bottom: 45px; }
    .site-nav { gap: .8rem; }
    .header-inner { gap: 1rem; }
    .gallery-story-copy { padding: 2.5rem 2rem; }
    .product-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
    html { scroll-padding-top: 6rem; }
    .site-nav { display: flex; order: 4; width: 100%; justify-content: flex-start; flex-wrap: wrap; margin: 0; gap: 1rem 1.5rem; border-top: 1px solid var(--studio-line); padding-top: 1rem; }
    .interactive .site-nav { display: none; }
    .interactive .nav-open .site-nav { display: flex; }
    .nav-toggle { display: inline-flex; background: transparent; border: 1px solid #bfc7b4; border-radius: 3px; padding: .6rem .8rem; font: inherit; font-size: .75rem; color: var(--studio-ink); cursor: pointer; }
    .header-inner > .badge { margin-left: auto; }
    .logo-lockup .logo-sub { display: none; }
    .hero-copy h1 { font-size: 4.5rem; }
    .studio-hero { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .hero-gallery { height: 490px; }
    .hero-art-0 { width: 85%; left: 5%; }
    .hero-art-1 { width: 42%; }
    .hero-art-2 { width: 43%; bottom: 12px; }
    .gallery-note { left: 0; bottom: -38px; font-size: .65rem; }
    .gallery-note em { font-size: .8rem; }
    .hero-art-caption { font-size: .57rem; }
    .trust-strip { width: calc(100% - 4rem); grid-template-columns: repeat(4,1fr); }
    .gallery-story { grid-template-columns: 1fr; }
    .gallery-story-art { min-height: 480px; }
    .story-print { width: 37%; }
    .story-print-0 { top: 95px; left: 18%; }
    .story-print-1 { bottom: 65px; right: 16%; }
    .gallery-story-copy { padding: 3rem; }
}
@media (max-width: 700px) {
    .announcement-banner { padding: .55rem 1rem; gap: .2rem; font-size: .68rem; }
    .announcement-banner .offer-note { font-size: .61rem; }
    .studio-hero { grid-template-columns: 1fr; padding: 2.5rem 1.5rem 1.5rem; gap: 2rem; }
    .hero-copy h1 { font-size: clamp(3.8rem,12vw,5.7rem); }
    .hero-intro { max-width: 430px; font-size: .93rem; }
    .hero-copy .eyebrow { margin-bottom: 1.1rem; }
    .studio-actions { margin-top: 1.5rem; }
    .hero-footnote { margin-top: 1.25rem; }
    .hero-gallery { height: 570px; max-width: 510px; width: 100%; margin: 1rem auto; }
    .hero-art-0 { width: 70%; left: 16%; top: 75px; }
    .hero-art-1 { width: 35%; left: 0; top: 12px; }
    .hero-art-2 { width: 36%; right: 0; bottom: 20px; }
    .hero-art-caption { font-size: .65rem; }
    .gallery-note { bottom: -30px; left: 4%; }
    .gallery-note em { font-size: 1rem; }
    .gallery-star { font-size: 3.8rem; }
    .trust-strip { margin-bottom: 3.5rem; grid-template-columns: repeat(2,1fr); gap: 1.25rem .5rem; padding: 1.25rem 0; }
    .trust-item:nth-child(2) { border-right: 0; }
    .collection-heading { align-items: flex-start; }
    .collection-heading > p { display: none; }
    .catalog-intro, .controls-container, .catalog-container, .count-bar, .trust-strip, .gallery-story { width: calc(100% - 3rem); }
    .header-inner { padding: 0 1.5rem; }
    .product-grid { grid-template-columns: repeat(2,1fr); gap: 1.8rem 1rem; }
    .product-title { font-size: .87rem; }
    .content-section { padding: 3.5rem 1.5rem; }
    .gallery-story { margin-bottom: 3rem; }
    .gallery-story-art { min-height: 420px; }
    .story-print { width: 45%; }
    .story-print-0 { left: 10%; }
    .story-print-1 { right: 8%; }
    .gallery-story-copy { padding: 2.5rem 1.75rem; }
    .steps-grid { gap: 2rem; }
    .privacy-page main { padding-top: 2.5rem; }
}
@media (max-width: 480px) {
    .logo-lockup .logo { font-size: 1.3rem; }
    .logo-lockup img { width: 30px; height: 30px; border-radius: 7px; }
    .header-inner { gap: .6rem; padding: 0 1rem; }
    .header-inner > .badge { font-size: .55rem; padding: .55rem .65rem; }
    .nav-toggle { font-size: .68rem; padding: .45rem .6rem; }
    .site-header { padding: .8rem 0; }
    .hero-copy h1 { font-size: 3.3rem; letter-spacing: -.045em; margin-bottom: 1rem; }
    .hero-copy .eyebrow { font-size: .6rem; }
    .studio-actions { gap: .8rem; }
    .studio-actions .text-link { font-size: .7rem; }
    .studio-button { padding: .85rem 1rem; gap: 1rem; font-size: .78rem; }
    .hero-gallery { height: 440px; }
    .hero-art-caption { font-size: .57rem; }
    .gallery-note { left: 2%; bottom: -24px; font-size: .65rem; }
    .gallery-note em { font-size: .85rem; }
    .mockup-note { bottom: -55px; font-size: .55rem; text-align: center; }
    .hero-gallery { margin-bottom: 3rem; }
    .hero-art-2 { bottom: 25px; }
    .product-grid { grid-template-columns: 1fr; }
    .purchase-row { flex-direction: row; align-items: center; }
    .etsy-btn { width: auto; }
    .product-title { min-height: 0; font-size: 1rem; }
    .product-detail { font-size: .78rem; }
    .mood-links { gap: .4rem; }
    .mood-links a { font-size: .67rem; padding: .6rem .75rem; }
    .gallery-story-art { min-height: 355px; }
    .story-print { width: 53%; }
    .story-print-0 { left: 7%; top: 85px; }
    .story-print-1 { right: 6%; bottom: 65px; }
    .gallery-story-copy { padding: 2rem 1.5rem; }
    .story-word { font-size: 3.3rem; left: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal-pending { opacity: 1; transform: none; }
}
