/* Review pass: stable compositions, readable controls, and explicit states. */
:root { --muted: oklch(.77 .008 130); --line: oklch(.34 .006 130); }
html { scrollbar-gutter: stable; }
p { text-wrap: pretty; }
h3 { text-wrap: balance; }
button, a { touch-action: manipulation; }
.nav-shell { gap: 24px; }
.nav-actions { gap: 14px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 18px; border: 1px solid var(--line); border-radius: 5px; }
.social-link:hover { color: var(--lime); border-color: var(--lime); }
.motion-toggle { min-width: 66px; min-height: 44px; font-size: 12px; }
.mobile-nav a { display: flex; align-items: center; min-height: 48px; }
.showroom-stage { height: 100svh; min-height: 680px; }
.stage-topline { top: 112px; font-size: 12px; letter-spacing: .06em; }
.preview-label { font-size: 12px; letter-spacing: .02em; }
.hero-copy { top: 27%; width: min(760px, 66%); }
.hero-copy h1 { font-size: clamp(64px, 6.6vw, 96px); }
.hero-copy p { font-size: 16px; line-height: 1.7; }
.quiet-link { min-height: 44px; margin-top: 9px; display: flex; align-items: center; font-size: 13px; border: 0; }
.sat-one { width: clamp(150px, 21vw, 290px); left: 2%; top: 37%; transform: rotate(-24deg); }
.sat-two { width: clamp(140px, 15vw, 200px); right: 5%; top: 19%; transform: rotate(16deg); }
.sat-three { width: clamp(130px, 15vw, 200px); left: 12%; top: 66%; transform: rotate(-12deg); }
.sat-four { width: clamp(110px, 12vw, 170px); left: 25%; top: 15%; transform: rotate(12deg); }
.object-rig { width: clamp(260px, 25vw, 360px); height: clamp(260px, 25vw, 360px); left: 70%; top: 58%; }
.object-halo { display: none; }
.hero-object { filter: drop-shadow(0 18px 22px #0008); }
.chapter-copy { top: 26%; left: 8%; width: 39%; }
.chapter-copy h2 { font-size: clamp(54px, 6vw, 82px); }
.chapter-copy p { font-size: 16px; max-width: 36ch; }
.chapter-copy small { font-size: 12px; max-width: 38ch; }
.chapter-note { font-size: 12px; letter-spacing: .06em; }
.layer-notes { font-size: 14px; }
.material-layer { border-radius: 7px; inset: 20% 4%; }
.material-layer span { font-size: 10px; }
.nft-frame { inset: -4% -5% -22%; background: var(--surface); }
.nft-frame-top { font-size: 11px; }
.nft-frame-bottom strong { font-size: 17px; }
.nft-frame-bottom>span { font-size: 11px; }
.stage-bottom { bottom: 22px; font-size: 12px; letter-spacing: .03em; align-items: center; }
.scroll-cue { min-height: 44px; }
.scroll-line { height: 25px; }
.stage-step { gap: 16px; align-items: center; }
.story-controls { display: flex; gap: 4px; }
.story-controls button { width: 44px; height: 44px; color: var(--muted); font-size: 12px; border-bottom: 2px solid transparent; }
.story-controls button[aria-current="step"] { color: var(--lime); border-color: var(--lime); }
.stage-progress { height: 3px; }
.section-heading>.section-intro { max-width: 390px; }
.section-heading p { font-size: 15px; }
.section-heading h2, .physical-title h2 { margin-top: 0; }
.collection-section { padding: 100px 0 85px; }
.collection-toolbar { gap: 20px; }
.filter-group button { min-height: 44px; font-size: 13px; }
.result-count { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
.card-art { aspect-ratio: 1.13; height: auto; padding: 32px; }
.card-index { font-size: 11px; letter-spacing: .02em; }
.card-meta { align-items: start; gap: 10px; }
.card-meta h3 { font-size: 18px; }
.card-meta>span { font-size: 11px; }
.card-description { font-size: 13px; }
.collectible:has(.card-meta .is-saved) .card-art { background: oklch(.22 .024 130); }
.card-meta .is-saved { color: var(--lime); }
.collection-footnote, .physical-note { font-size: 13px; line-height: 1.7; }
.material-section { padding: 85px 0 100px; }
.material-description p { font-size: 15px; }
.material-description dl { font-size: 13px; }
.material-tabs button { min-height: 48px; }
.material-coordinate { font-size: 11px; }
.vault-stage { height: 100svh; min-height: 700px; padding-top: 96px; padding-bottom: 32px; }
.vault-layout { gap: 54px; margin: 32px 0; }
.vault-node { min-height: 130px; font-size: 13px; }
.vault-node small { font-size: 12px; }
.vault-node.active .node-icon { background: transparent; color: var(--lime); }
.vault-node[aria-pressed="true"] .node-icon { background: var(--lime); color: var(--bg); }
.vault-detail { min-height: 270px; }
.vault-detail p { font-size: 14px; line-height: 1.75; }
.vault-step-label,.vault-state { font-size: 12px; letter-spacing: .03em; }
.vault-bottom p { font-size: 13px; }
.physical-section { padding: 100px 0 85px; }
.physical-layout { align-items: start; }
.photo-large { border-radius: 8px; }
.photo-large img { aspect-ratio: 1; height: auto; }
.photo-large figcaption { font-size: 13px; background: var(--bg); position: relative; }
.physical-side>figure img { height: auto; aspect-ratio: 1.4; }
.physical-paths button { min-height: 54px; font-size: 14px; }
.faq-list summary { min-height: 64px; font-size: 15px; }
.faq-list p { font-size: 14px; }
.social-banner { display: flex; justify-content: space-between; gap: 32px; align-items: center; padding: 42px 0; margin-bottom: 42px; border-bottom: 1px solid var(--line); }
.social-banner h2 { font-size: clamp(38px,4vw,56px); }
.social-banner p { font-size: 14px; margin-top: 14px; color: var(--muted); }
.social-banner .button { white-space: nowrap; }
.footer-bottom,.footer-bottom button { font-size: 12px; }
.footer-bottom { align-items: start; }
.footer-bottom>span:nth-child(2) { max-width: 44ch; }
.dialog-product .dialog-note { font-size: 14px; }
.dialog-product small { font-size: 12px; }
.dialog-product h2 { overflow-wrap: anywhere; }
.dialog-product .button[aria-disabled="true"] { background: var(--surface); color: var(--lime); border: 1px solid var(--line); opacity: 1; cursor: default; }
.dialog-feedback { font-size: 12px; color: var(--lime); min-height: 24px; margin-top: 12px; }
.drawer-note { font-size: 14px; }
.saved-item { grid-template-columns: 80px minmax(0,1fr) 44px; gap: 16px; }
.saved-item h3 { font-size: 16px; }
.saved-item p { font-size: 12px; }
.saved-item button { width: 44px; height: 44px; font-size: 24px; }
.saved-item img { width: 80px; height: 80px; }
.empty-pocket { padding: 40px 0; }
.empty-pocket>span { color: var(--lime); font-size: 38px; }
.empty-pocket p { font-size: 14px; }
.mobile-motion { display: none; }
.reduced-motion .story-controls,.reduced-motion #stage-title,.reduced-motion .stage-progress { display: none; }
html.reduced-motion .showroom-stage { min-height: 680px; }
@media (min-width:768px) and (max-width:1100px) {
  .nav-shell { padding-inline:24px; gap:16px; }
  .desktop-nav { gap:18px; }
  .nav-actions { gap:8px; }
  .nav-actions>.motion-toggle { display:none; }
  .hero-copy { top:27%; width:70%; }
  .hero-copy h1 { font-size:clamp(62px,7.5vw,82px); }
  .object-rig { width:28vw; height:28vw; left:68%; top:60%; }
  .sat-four { top:17%; left:20%; width:13%; }
  .sat-two { top:19%; right:4%; width:15%; }
  .sat-one { left:1%; top:53%; width:22%; }
  .sat-three { left:10%; top:73%; width:16%; }
  .chapter-copy { left:6%; width:43%; }
  .chapter-copy h2 { font-size:62px; }
  .chapter-copy p { font-size:14px; }
  .vault-layout { gap:28px; grid-template-columns:1.2fr 1fr; }
  .node-icon { width:54px;height:54px; }
  .vault-track { top:27px; }
  .vault-node { font-size:11px; }
  .material-heading h2 { font-size:54px; }
  .material-tabs button { padding-inline:20px; }
}
@media (max-height:740px) and (min-width:768px) {
  .showroom-stage { min-height:580px; }
  .hero-copy { top:24%; }
  .hero-copy h1 { font-size:66px; }
  .hero-copy p { margin:18px 0; font-size:14px; }
  .object-rig { width:240px; height:240px; top:53%; }
  .sat-three { top:61%; width:145px; }
  .sat-four { top:18%; width:120px; }
  .stage-topline { top:100px; }
  .chapter-copy { top:24%; }
  .chapter-copy h2 { font-size:58px; margin:14px 0; }
  .chapter-copy p { font-size:14px; }
  .layer-notes { margin-top:16px; gap:5px; }
  .chapter-copy small { margin-top:12px; }
  .vault-stage { height:auto; min-height:690px; }
}
@media (max-width:767px) {
  .nav-shell { padding-inline:18px; gap:10px; }
  .nav-actions { gap:6px; }
  .social-link { width:40px; height:44px; border:0; font-size:17px; }
  .menu-button { width:44px; }
  .pocket-button { font-size:12px; }
  .mobile-motion { display:flex; gap:18px; align-items:center; min-height:48px; padding:0; font-size:14px; }
  .mobile-motion span { color:var(--lime); }
  .showroom-stage,html.reduced-motion .showroom-stage { height:100svh; min-height:660px; }
  .stage-topline { top:88px; left:20px; right:20px; font-size:11px; }
  .stage-topline>span:first-child { display:none; }
  .stage-topline { justify-content:center; }
  .preview-label { font-size:11px; }
  .hero-copy { top:24%; width:100%; padding:0 20px; }
  .hero-copy h1 { font-size:clamp(43px,11.4vw,70px); }
  .hero-copy p { font-size:14px; margin:20px auto; max-width:29ch; }
  .hero-copy .button { font-size:13px; min-height:48px; }
  .quiet-link { margin-top:6px; font-size:12px; }
  .sat-one { left:6%; top:15%; width:32%; transform:rotate(-16deg); }
  .sat-two { right:8%; top:14%; width:19%; min-width:0; }
  .sat-three { width:24%; min-width:0; left:8%; top:69%; }
  .sat-four { display:none; }
  .object-rig { width:56vw; height:56vw; max-width:300px; max-height:300px; left:43%; top:64%; }
  .chapter-copy { top:18%; left:24px; width:calc(100% - 48px); }
  .chapter-copy h2 { font-size:clamp(40px,10.8vw,56px); margin:12px 0 14px; }
  .chapter-copy p { font-size:14px; max-width:32ch; line-height:1.65; }
  .chapter-copy small { font-size:11px; max-width:32ch; margin-top:12px; }
  .chapter-note { font-size:11px; }
  .layer-notes { display:flex; gap:12px; font-size:11px; margin-top:16px; }
  .layer-notes span { max-width:90px; line-height:1.5; }
  .layer-notes b { display:block; margin-right:0; }
  .material-layer span { font-size:8px; }
  .nft-frame-top { font-size:9px; }
  .nft-frame-bottom { bottom:12px; left:14px; gap:4px; }
  .nft-frame-bottom strong { font-size:14px; }
  .nft-frame-bottom>span { font-size:9px; }
  .frame-status { display:none; }
  .stage-bottom { bottom:16px; font-size:11px; }
  .stage-step { gap:0; }
  #stage-title { display:none; }
  .scroll-cue { gap:8px; }
  .story-controls button { width:40px; height:44px; }
  .section-heading p { font-size:14px; max-width:34ch; }
  .collection-section { padding:64px 0; }
  .collection-toolbar { flex-wrap:wrap; gap:12px; padding-bottom:14px; }
  .filter-group { width:100%; justify-content:space-between; gap:4px; }
  .filter-group button { padding:8px 12px; font-size:12px; }
  .result-count { display:block; font-size:12px; }
  .collection-grid { gap:28px 14px; }
  .card-art { height:auto; aspect-ratio:1; padding:17px; }
  .card-index { font-size:10px; top:10px; left:10px; }
  .card-meta h3 { font-size:15px; }
  .card-meta>span { font-size:11px; }
  .card-description { font-size:12px; }
  .collection-footnote,.physical-note { font-size:12px; }
  .material-section { padding:60px 0 70px; }
  .material-tabs button { font-size:14px; padding-inline:14px; }
  .material-description p { font-size:14px; }
  .material-description dl { font-size:13px; }
  .vault-stage { height:auto; min-height:0; padding-top:64px; padding-bottom:32px; }
  .vault-stage>h2 { font-size:clamp(44px,12vw,60px); }
  .vault-top .preview-label { font-size:11px; max-width:100%; text-align:left; }
  .vault-layout { margin:32px 0 18px; }
  .vault-node { font-size:11px; gap:10px; min-height:112px; }
  .vault-node small { font-size:11px; }
  .vault-detail { min-height:270px; margin-top:16px; }
  .vault-detail p { font-size:14px; }
  .vault-step-label,.vault-state { font-size:11px; }
  .vault-bottom p { font-size:13px; }
  .physical-section { padding:70px 0; }
  .physical-title h2 { font-size:clamp(40px,11.7vw,58px); }
  .photo-large img { height:auto; }
  .physical-side>figure img { height:auto; }
  .faq-list summary { font-size:14px; }
  .faq-list p { font-size:14px; }
  .social-banner { display:block; padding:24px 0 36px; margin-bottom:30px; }
  .social-banner .button { margin-top:24px; width:100%; }
  .footer-bottom { font-size:12px; }
  .footer-bottom button { font-size:12px; }
  #pocket-dialog { padding:36px 24px; }
  .dialog-product img { height:200px; }
  .dialog-product h2 { font-size:42px; }
  .dialog-prose h2 { font-size:40px; }
  .dialog-product p { font-size:14px; }
  .saved-item { grid-template-columns:68px minmax(0,1fr) 44px; gap:12px; }
  .saved-item img { width:68px; }
}
@media (max-width:767px) and (max-height:740px) {
  .showroom-stage,html.reduced-motion .showroom-stage { min-height:600px; }
  .hero-copy { top:25%; }
  .hero-copy h1 { font-size:clamp(43px,9vw,60px); }
  .hero-copy p { font-size:13px; margin:14px auto; }
  .hero-copy .button { min-height:44px; }
  .object-rig { width:46vw; height:46vw; top:67%; left:50%; }
  .sat-three { top:72%; width:22%; }
  .chapter-copy { top:17%; }
  .chapter-copy h2 { font-size:clamp(40px,8vw,56px); margin:10px 0; }
  .chapter-copy p { font-size:13px; }
  .layer-notes { margin-top:10px; }
  .chapter-copy small { font-size:10px; margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) { .card-art img { transform:none!important; } }

.card-art img { position:absolute; inset:12%; width:76%; height:76%; }
.material-layer span { display:none; }

.pocket-button { white-space:nowrap; }
#vault { scroll-margin-top:-92px; }
html.compact-viewport .story-controls,html.compact-viewport #stage-title,html.compact-viewport .stage-progress { display:none; }
html.compact-viewport .showroom-stage { min-height:600px; }
@media(max-width:767px) {
  .story-controls button { width:44px; }
  #vault { scroll-margin-top:0; }
}
@media(max-width:380px) {
  .nav-actions>.social-link { display:none; }
  .sat-one { top:17%; }
}
@media(max-width:767px) and (max-height:740px) {
  .object-rig { width:52vw; height:52vw; left:44%; }
}

.card-index,.card-meta>span:not(.is-saved) { display:none; }
@media(max-width:767px) { .card-open { display:none; } }
.vault-node>span:not(.node-icon){min-height:36px;line-height:1.4;display:flex;justify-content:center;align-items:flex-start}@media(max-width:767px){.vault-node>span:not(.node-icon){min-height:32px}}
@media(max-width:767px) and (max-height:740px){.object-rig{width:min(52vw,29svh);height:min(52vw,29svh);left:auto;right:8%;top:59%}.sat-three{width:min(22vw,20svh);top:67%}}

/* Wide high-resolution Hello artwork: keep schematic layers proportional. */
.showroom .material-layer { inset:34% 3%; }
.showroom .hero-object { filter:none; }
/* A continuous real-world photo archive, 66 pixels per second. */
.photo-ribbon-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.photo-ribbon-heading p{font-size:16px;line-height:1.6}
.ribbon-toggle{min-height:44px;flex-shrink:0;font-size:12px;color:var(--muted);padding:8px 0 8px 16px;display:flex;gap:14px;align-items:center}
.ribbon-toggle:disabled{cursor:default}
.photo-ribbon{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;touch-action:pan-x pan-y}
.photo-ribbon::-webkit-scrollbar{display:none}
.ribbon-track{display:flex;width:max-content}
.ribbon-set{display:flex;gap:26px;padding-right:26px;flex:none}
.ribbon-set[hidden]{display:none}
.ribbon-set img{flex:none;width:clamp(260px,28vw,380px);height:clamp(210px,22vw,290px);object-fit:cover;border-radius:12px}
.ribbon-paths{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:30px}
.ribbon-paths button{font-size:14px;min-height:54px}
@media(max-width:767px){.photo-ribbon-heading{align-items:flex-start;gap:15px;margin-bottom:16px}.photo-ribbon-heading p{max-width:220px;font-size:13px}.ribbon-toggle{font-size:11px;padding-left:0;gap:8px}.ribbon-set{gap:16px;padding-right:16px}.ribbon-set img{width:260px;height:210px;border-radius:10px}.ribbon-paths{grid-template-columns:1fr;gap:0;margin-top:22px}}

/* Refinement: quieter section hierarchy and material-led presentation */
.section-heading h2,.material-heading h2,.physical-title h2,.faq-section>h2,.vault-stage>h2{font-family:var(--body);font-size:clamp(38px,4.3vw,62px);font-weight:500;line-height:1.12;letter-spacing:-.035em}
.section-heading h2 em,.material-heading h2 em,.physical-title h2 em,.faq-section>h2 em,.vault-stage>h2 em{color:var(--text)}
.collection-grid{gap:44px 28px}
.card-art{border-radius:4px;background:oklch(.18 .004 130)}
.card-index{display:none}
.card-art img{filter:drop-shadow(0 10px 12px #0004)}
.card-art:hover img{transform:translateY(-4px) scale(1.025)}
.card-meta h3{font-weight:500;letter-spacing:-.015em}
.card-meta>span{letter-spacing:0}
.card-description{margin-top:4px}
.filter-group button{border-radius:0;border-bottom:1px solid transparent;padding-inline:14px}
.filter-group button.active{background:transparent;border-bottom-color:var(--lime)}
.material-layer,.material-orbit{display:none}
.material-visual{background:transparent;border-radius:0}
.material-visual>img{max-width:384px;max-height:300px}
.layer-notes{gap:12px}
.layer-notes span{border-bottom:1px solid var(--line);padding-bottom:9px}
.social-link{border:0}
.ribbon-set img{border-radius:6px}
.photo-ribbon{border-top:0;padding-top:0}
.physical-title{margin-bottom:30px}
.social-banner h2{font-family:var(--body);font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.faq-list summary{padding-block:25px}
@media(max-width:767px){.collection-grid{gap:28px 16px}.section-heading h2,.material-heading h2,.physical-title h2,.faq-section>h2,.vault-stage>h2{font-size:clamp(32px,8.4vw,44px);letter-spacing:-.03em}.physical-title{margin-bottom:24px}.card-meta h3{font-size:14px}.material-visual{height:280px}.material-visual>img{max-width:85%}}
.resource-links{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0 0 60px}.resource-links h3{font-size:14px;font-weight:500;margin-bottom:18px}.resource-links a{display:block;font-size:13px;color:var(--muted);padding:9px 0}.resource-links a:hover,.connect-link:hover{color:var(--lime)}.connect-link{font-size:12px;white-space:nowrap}.pocket-destinations,.product-destinations{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0;font-size:12px}.pocket-destinations a,.product-destinations a{padding:10px 0;border-bottom:1px solid var(--line)}@media(max-width:1200px){.connect-link{display:none}.desktop-nav{gap:18px}}@media(max-width:767px){.resource-links{grid-template-columns:1fr 1fr;gap:30px 20px}.mobile-nav{max-height:calc(100svh - 68px);overflow-y:auto}}
.account-link{font-size:12px;white-space:nowrap}.account-link:hover{color:var(--lime)}@media(max-width:1100px){.nav-actions{gap:10px}.account-link{font-size:11px}}@media(max-width:450px){.nav-actions>.social-link{display:none}.brand{font-size:9px}.pocket-button{padding-inline:8px}.nav-shell{gap:10px}}