/* Shared MOMENTUS control system. Layout and card rendering live separately. */
:root{
 --ui-radius:4px;--ui-surface:#141416;--ui-hover:#242427;--ui-selected:#303035;
 --ui-border:#ffffff32;--ui-border-hover:#ffffff80;--ui-focus:#eeeeef;
 --ui-text:#eeeef0;--ui-muted:#aaaab2;--ui-disabled:#202023;--ui-disabled-text:#85858e;
 --ui-primary:#eeeef0;--ui-primary-hover:#fff;--ui-primary-text:#101012;
 --ui-rail-surface:rgba(24,24,24,.7);--ui-rail-border:#ffffff14;--ui-rail-shadow:0 10px 30px -12px #0008;
 --ui-time:140ms;--ui-dialog-width:460px;--ui-dialog-pad:24px;
}
button{border-radius:var(--ui-radius)}
:is(#email-signup,#sold-out,.purchase-entry button,.tool,#checkout-dialog button,#signup-dialog button){
 border-radius:var(--ui-radius);border:1px solid var(--ui-border);background:var(--control-bg,var(--ui-surface));color:var(--control-text,var(--ui-text));
 min-height:44px;opacity:1;cursor:pointer;transition:background-color var(--ui-time) ease,border-color var(--ui-time) ease,color var(--ui-time) ease;
}
.ui-primary{--control-bg:var(--ui-primary);--control-text:var(--ui-primary-text)}
:is(#email-signup,.purchase-entry button,.tool,#checkout-dialog button,#signup-dialog button):hover:not(:disabled){background:var(--ui-hover);border-color:var(--ui-border-hover);color:var(--ui-text)}
:is(.purchase-entry button,#checkout-dialog button).ui-primary:hover:not(:disabled){background:var(--ui-primary-hover);color:var(--ui-primary-text)}
.tool[aria-current=true],.tool[aria-pressed=true]{background:var(--ui-selected);border-color:var(--ui-focus);color:var(--ui-text)}
.tool[data-pending=true]{background:var(--ui-hover);border-color:var(--ui-border-hover)}
:is(#email-signup,#sold-out,.purchase-entry button,.tool,#checkout-dialog button,#signup-dialog button):disabled{
 background:var(--ui-disabled);border-color:var(--ui-border);color:var(--ui-disabled-text);opacity:1;cursor:not-allowed;
}
:is(button,a,summary):focus-visible,.hero:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
.dock{border-radius:var(--ui-radius);border:1px solid var(--ui-rail-border);background:var(--ui-rail-surface);box-shadow:var(--ui-rail-shadow)}
#checkout-dialog,#signup-dialog,#story-dialog{
 width:min(var(--ui-dialog-width),calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:var(--ui-dialog-pad);
 border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 96px #0009;
 overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ui-border-hover) transparent;overflow-wrap:break-word;
}
:is(#checkout-dialog,#signup-dialog,#story-dialog)::backdrop{background:#030306b8}
#checkout-dialog,#checkout-dialog *{font-family:Arial,sans-serif!important;font-size:14px!important;line-height:1.45}
#signup-dialog,#signup-dialog *,#story-dialog,#story-dialog *{font-family:"MOMENTUS Wraith",monospace;font-size:13px;line-height:1.55;font-weight:400}
:is(#checkout-dialog,#signup-dialog,#story-dialog) .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px}
:is(#checkout-dialog,#signup-dialog,#story-dialog) h2{margin:0;font-weight:400;letter-spacing:.04em;text-transform:uppercase}
:is(#checkout-dialog,#signup-dialog,#story-dialog) .close{width:44px;min-width:44px;height:44px;padding:0;display:grid;place-items:center}
:is(#checkout-dialog,#signup-dialog,#story-dialog) .ui-note,#review-example,#checkout-status{color:var(--ui-muted)}
#signup-dialog .dialog-intro{margin:0 0 16px}#signup-help{margin:0;padding-top:16px;border-top:1px solid var(--ui-border)}
#checkout-dialog .order-product{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:start;margin:0 0 24px}
#checkout-dialog .order-product img{display:block;width:64px;height:90px;object-fit:contain}
#checkout-dialog h3{margin:0;font-weight:400}#review-example{margin:6px 0}
#checkout-dialog .random-disclosure{font-weight:400;color:var(--ui-text);margin:12px 0}
#checkout-dialog .review-row{padding:16px 0;border-block:1px solid var(--ui-border);gap:12px}
#checkout-dialog .quantity-control{display:flex;gap:0;align-items:center}
#checkout-dialog .quantity-control button{width:44px;height:44px;padding:0}
#checkout-dialog .quantity-control output{min-width:40px;text-align:center;font-variant-numeric:tabular-nums}
#checkout-dialog .order-summary{margin:16px 0;border:0}#checkout-dialog .order-summary>div{padding:0;margin:10px 0;gap:16px}
#checkout-dialog .order-summary dd{font-variant-numeric:tabular-nums}
#checkout-dialog .ui-note{margin:0 0 16px}
.policy-access{border-block:1px solid var(--ui-border);color:var(--ui-muted)}
.policy-access summary{min-height:44px;align-content:center;cursor:pointer;color:var(--ui-text);padding:12px 0}
.policy-access p{margin:0 0 16px}.policy-access summary:hover{color:var(--ui-primary-hover)}
#checkout-dialog .purchase{width:100%;min-height:48px;margin:8px 0 0}
#checkout-status{margin:12px 0 0;text-align:left}
html.dialog-open{overflow:hidden;overscroll-behavior:none}
@media(max-width:720px){:root{--ui-dialog-pad:20px}:is(#checkout-dialog,#signup-dialog,#story-dialog){max-height:calc(100dvh - 24px)}}
@media(prefers-reduced-motion:reduce){:is(button,a,summary){transition:none!important}}

/* Verified destinations only. Reserve a touch-sized contact row at the edge. */
:root{--ui-edge-inline:24px;--ui-edge-bottom:18px;--contact-width:96px}
.contact-links{position:absolute;right:max(var(--ui-edge-inline),env(safe-area-inset-right));bottom:max(var(--ui-edge-bottom),env(safe-area-inset-bottom));z-index:4;display:flex;gap:0}
.contact-links a{display:grid;place-items:center;width:44px;min-width:44px;min-height:44px;padding:0;border:1px solid transparent;border-radius:var(--ui-radius);color:var(--ui-muted);font-size:9px;line-height:1.2;text-decoration:none;transition:color var(--ui-time) ease,background-color var(--ui-time) ease,border-color var(--ui-time) ease}
.contact-links a:hover{color:var(--ui-text);background:var(--ui-hover);border-color:var(--ui-border-hover)}
@media(max-width:720px){.dock{left:max(var(--ui-edge-inline),env(safe-area-inset-left));transform:none;max-width:calc(100vw - max(var(--ui-edge-inline),env(safe-area-inset-left)) - max(var(--ui-edge-inline),env(safe-area-inset-right)) - var(--contact-width) - 12px)}}
@media(max-width:720px){:root{--ui-edge-inline:12px;--ui-edge-bottom:12px}}
@media(prefers-reduced-motion:reduce){.contact-links a{transition:none}}

/* Explicit copy-only reset: decorative scene lighting remains a separate sibling. */
#drop-copy,#drop-copy *,#drop-copy::before,#drop-copy::after,#drop-copy *::before,#drop-copy *::after{
 text-shadow:none!important;box-shadow:none!important;filter:none!important;backdrop-filter:none!important;background:transparent!important;
}
/* Contact and signup are quiet text actions, not boxed controls. */
.contact-links a,#email-signup{background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-muted);text-decoration:none;text-underline-offset:4px;transition:color var(--ui-time) ease}
.contact-links a:hover,#email-signup:hover{background:transparent!important;border:0!important;color:var(--ui-text);text-decoration:underline;text-decoration-thickness:1px}
/* One size for every live Wraith label, including native signup dialogs.
   Explicit family beats the site's inherited system-font reset. */
:root{--wraith-size:12px}
@media(max-width:720px){:root{--wraith-size:11px}}
.card-case,.card-case *,.loading-intro,.loading-intro *,#signup-dialog,#signup-dialog *,body>noscript,body>noscript *{font-family:"MOMENTUS Wraith",monospace!important;font-size:var(--wraith-size)!important;font-synthesis:none}

/* The loading wordmark is wiped by a real near-camera card. Persistent header
   artwork is independent and never substituted for the loading surface. */
.card-case.ready .spatial-canvas,.card-case.ready .stage[data-renderer=fallback] .hero{animation:none;clip-path:none}
.corner .persistent-wordmark{visibility:visible}
.stage .loading-intro{z-index:0;clip-path:inset(0 calc(100% - var(--intro-edge,100%)) 0 0)}
.stage .spatial-canvas{z-index:1}
.loading-intro[data-complete=true]{display:none}
.is-entering .corner,.is-entering .corner-symbol,.is-entering .project-footer,.is-entering .purchase-entry,.is-entering .dock,.is-entering .contact-links{visibility:hidden}
.contact-links{display:flex;gap:8px}

/* Preserve the approved caption paragraphs; resize() measures natural height. */
#drop-blurb{white-space:pre-line}

/* Mobile composition: viewport-centered branding and card, compact metadata,
   complete caption in an accessible dialog instead of shrinking the object. */
#read-story{display:none}
#story-copy{white-space:pre-line;line-height:1.55;margin:0}
@media(max-width:720px){
 .card-case{height:100dvh;bottom:auto}
 .corner{left:0;right:0;max-width:none;display:block;pointer-events:none}
 .corner .persistent-wordmark{position:absolute;left:50%;top:22px;transform:translate(-50%,-50%);width:var(--header-wordmark-width);margin:0}
 #email-signup{position:absolute;right:max(12px,env(safe-area-inset-right));top:0;pointer-events:auto}
 .project-footer{top:max(88px,calc(env(safe-area-inset-top) + 60px));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
 .project-footer h1,.project-footer .collection-caption{grid-column:1;min-width:0}
 .project-footer .collection-caption{margin-top:4px}
 #read-story{display:block;grid-column:2;grid-row:1/3;min-height:44px;padding:0;border:0;background:transparent;color:var(--ui-muted);pointer-events:auto;text-decoration:underline;text-underline-offset:3px}
 #drop-blurb{display:none}
}

@media(max-width:720px){
 .dock{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);bottom:calc(max(12px,env(safe-area-inset-bottom)) + 56px);padding:0 4px;gap:0}
 .rail{gap:2px;padding:0;margin:0;mask-image:none}
 .thumb{width:clamp(32px,calc((100vw - 48px)/8),44px);height:44px;padding:5px}
 .card-case:not(.ready) .dock{transform:translate(-50%,12px)}
}

.menu-toggle{position:absolute;right:max(24px,env(safe-area-inset-right));top:0;display:grid;align-content:center;justify-content:center;gap:6px;width:44px;height:44px;padding:0;border:0;background:transparent;pointer-events:auto}
.menu-toggle span{display:block;width:20px;height:1px;background:var(--ui-text)}
.menu-toggle:hover span{background:#fff}
#menu-dialog{position:fixed;left:auto;bottom:auto;right:max(24px,env(safe-area-inset-right));top:calc(max(16px,env(safe-area-inset-top)) + 52px);margin:0;width:184px;padding:8px 12px;border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-surface);color:var(--ui-text);box-shadow:none;animation:menu-in 140ms ease-out both}
#menu-dialog,#menu-dialog *{font-family:"MOMENTUS Wraith",monospace!important;font-size:var(--wraith-size)!important;font-weight:400}
#menu-dialog::backdrop{background:#0005}
#menu-dialog a,#menu-dialog #email-signup{position:static;display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:44px;padding:0;border:0;background:transparent;color:var(--ui-text);text-decoration:none;white-space:nowrap;text-align:left}
#menu-dialog a:hover,#menu-dialog #email-signup:hover{text-decoration:underline;text-underline-offset:4px}
#menu-dialog.is-closing{animation:menu-out 120ms ease-in both}
@keyframes menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes menu-out{to{opacity:0;transform:translateY(-3px)}}
@media(max-width:720px){
 .menu-toggle{right:max(12px,env(safe-area-inset-right))}
 #menu-dialog{right:max(12px,env(safe-area-inset-right));top:calc(max(14px,env(safe-area-inset-top)) + 52px)}
 .contact-links{display:none}
 .dock{bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){#menu-dialog,#menu-dialog.is-closing{animation:none}}

/* Desktop contact links and distinct signup action; mobile uses the menu. */
.desktop-nav{position:absolute;right:6px;top:0;display:flex;align-items:center;gap:18px;pointer-events:auto}
.desktop-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ui-text)}
.desktop-nav a:hover{text-decoration:underline;text-underline-offset:4px}
#desktop-signup{display:flex;align-items:center;gap:16px;min-height:44px;padding:0 12px;border:1px solid var(--ui-border-hover);border-radius:var(--ui-radius);background:transparent;color:var(--ui-text)}
#desktop-signup:hover{background:var(--ui-hover)}
@media(min-width:721px){.menu-toggle{display:none}}
@media(max-width:720px){.desktop-nav{display:none}}

#desktop-signup{background:var(--ui-primary);color:var(--ui-primary-text);border-color:var(--ui-primary)}
@media(max-width:720px){
 .dock{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 24px)}
}

/* Supplied mobile reference: quiet full-height sheet, centered text stack,
   distinct full-width action below. Retain MOMENTUS typography and palette. */
#menu-dialog{inset:0;width:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#080808}
#menu-dialog .menu-symbol{position:absolute;left:max(12px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));width:44px;height:44px;object-fit:contain}
#menu-close{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));width:44px;height:44px;padding:0;border:0;background:transparent;color:var(--ui-text)}
#menu-dialog nav{position:absolute;left:max(24px,env(safe-area-inset-left));right:24px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px}
#menu-dialog .pending-link{display:flex;align-items:center;min-height:44px;color:#777;cursor:default}
#menu-dialog #email-signup{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));top:auto;width:auto;min-height:48px;justify-content:center;gap:16px;border-radius:var(--ui-radius);background:var(--ui-primary)!important;color:var(--ui-primary-text)!important;border:1px solid var(--ui-primary)!important}
#menu-dialog #email-signup:hover{background:#fff!important;text-decoration:none}
#desktop-signup:hover{color:var(--ui-text)}
@media(min-width:721px){.dock{max-width:min(760px,calc(100vw - 400px))}}
.corner{left:0;right:0;max-width:none;display:block}
.desktop-nav{right:max(24px,env(safe-area-inset-right))}

/* The large logotype belongs to document flow after both drop panels. */
html{scroll-snap-type:y proximity}
.drop-experience{position:relative;height:200dvh}
.drop-experience>.card-case{position:sticky;top:0;left:auto;right:auto;bottom:auto;width:100%;height:100dvh}
.drop-pages{position:absolute;inset:0}
.site-footer{position:relative;scroll-snap-align:end;padding:24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#000}
.site-footer img{display:block;width:100%;height:auto}
@media(max-width:720px){
 .site-footer{padding:18px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
 .dock{bottom:max(12px,env(safe-area-inset-bottom))}
}
@media(min-width:721px){.dock{max-width:min(760px,calc(100vw - 48px))}}

.site-footer,.site-footer *{font-family:"MOMENTUS Wraith",monospace!important;font-size:var(--wraith-size)!important;font-weight:400}
.site-footer nav{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 clamp(48px,8vw,128px);border-top:1px solid var(--ui-border);padding-top:12px}
.site-footer nav a,.site-footer nav span{display:flex;align-items:center;min-height:44px;color:var(--ui-text);text-decoration:none}
.site-footer nav a:hover{text-decoration:underline;text-underline-offset:4px}
.site-footer nav [aria-disabled=true]{color:#777;cursor:default}
.site-footer .copyright{margin:24px 0 0;line-height:1.5;color:var(--ui-muted)}
#drop-blurb{color:#c4c4c4}
.project-footer .collection-caption p{color:#bdbdbd}

/* Match the existing SIGN UP interaction: immediate color change, no sweep.
   Keep button geometry and the shared focus-visible outline unchanged. */
button:is(#desktop-signup,#checkout.ui-primary):not(:disabled){transition:none}
button:is(#desktop-signup,#checkout.ui-primary):hover:not(:disabled){background:var(--ui-hover);color:var(--ui-text);border-color:var(--ui-primary)}
@media(max-width:720px){
 button:is(#email-signup,#checkout.ui-primary):hover:not(:disabled){background:#fff;color:var(--ui-primary-text);border-color:var(--ui-primary)}
}

/* Branded order review: one readable type scale, one random-card disclosure. */
#checkout-dialog{--ui-dialog-width:480px;background:#101012;border-color:var(--ui-border);padding:24px}
#checkout-dialog .checkout-heading{display:flex;align-items:center;gap:12px;min-width:0}
#checkout-dialog .checkout-heading img{display:block;width:28px;height:28px;object-fit:contain}
#checkout-dialog .dialog-head{margin-bottom:24px}
#checkout-dialog .close{border-color:transparent;background:transparent}
#checkout-dialog .close:hover{background:var(--ui-hover);border-color:var(--ui-border-hover)}
#checkout-dialog .order-product{grid-template-columns:64px minmax(0,1fr);margin-bottom:16px;align-items:center}
#checkout-dialog h3,#checkout-dialog h2{font-weight:400}
#checkout-dialog #review-example{color:var(--ui-muted);margin:8px 0 0;overflow-wrap:anywhere}
#checkout-dialog #random-item{margin:0 0 20px;font-weight:400;line-height:1.5}
#checkout-dialog .review-row{padding:16px 0}
#checkout-dialog .order-summary{margin:20px 0 16px}
#checkout-dialog .order-summary dd{margin-left:12px;white-space:nowrap}
#checkout-dialog .policy-access{border-top:1px solid var(--ui-border);border-bottom:0;margin-bottom:12px}
#checkout-dialog .quantity-control button{width:48px;height:48px}
#checkout-dialog .purchase{margin:8px 0 0}
#checkout-dialog #checkout-status{margin-top:12px;line-height:1.5}
@media(max-width:720px){#checkout-dialog{padding:20px}}