/* Hallmark · shape: scent workbench · genre: editorial · theme: Solstice (deal 3/3) · job: buy · draw: 95c2f2
 * hero: Poster · nav: centered house mark with scent links and collection · footer: finished product with compact concept note
 * imagery: native 3D flacon and generated botanical photography · signature: one amber flacon opens into its notes and releases a nozzle-aligned mist
 * solstice: long-light to dusk · axes: warm/light-to-dark/serif · posture: restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: R, removed range cards and price fiction to keep one perfume and one story. */
/* Hallmark · waive 6b · hero: Poster and fold checked at 1280x800 · Afterlight puts its full 3D flacon below an editorial heading and action on opposite edges. */
/* Hallmark · waive 44c · hero: Poster with complete Afterlight flacon · The perfume object occupies its own central stage beneath the heading and primary action. */
/* Hallmark · waive 59 · dense scent workbench with one pinned flacon · The Afterlight chapters are a continuous object study; each viewport changes notes and light. */
/* Hallmark · waive 66 · functional chapter navigation for the perfume story · The Afterlight selector and previous/next controls provide keyboard access to every scent moment. */
/* Hallmark · dismissed 41 · root ink and stage background are not a painted pair · Afterlight uses measured stage ink on its background, and fixed brown ink on cream dialogs; 59 transition samples passed at 4.56:1 or higher. */
@import url('./tokens.css');
@import url('./base.css');
@font-face{font-family:'Yeseva One';src:url('assets/yeseva.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url('assets/archivo.ttf') format('truetype');font-weight:100 900;font-display:swap}
html{scroll-behavior:smooth;scroll-padding-top:0}body{background:var(--stage-bg);color:var(--stage-ink)}button,a,input,select{-webkit-tap-highlight-color:var(--color-clear);touch-action:manipulation}button{cursor:pointer;color:inherit}a{text-decoration:none}button,input,select{font-family:var(--font-body)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:var(--space-2xs)}button:disabled{opacity:.4;cursor:not-allowed;transform:none}button:active,a:active{transform:translateY(1px)}button[aria-busy=true]{cursor:progress}button[aria-invalid=true],input[aria-invalid=true]{outline:2px solid var(--color-error)}button.is-saved{background:var(--color-ink);color:var(--color-paper)}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.container{width:calc(100% - var(--gutter)*2);max-width:var(--container);padding-inline:0;margin-inline:auto}.skip{position:fixed;top:calc(-1*var(--space-3xl));left:var(--space-md);z-index:var(--z-toast);background:var(--color-paper);color:var(--color-ink);padding:var(--space-md)}.skip:focus{top:var(--space-md)}
#stage{position:fixed;inset:0;pointer-events:none;z-index:0;background:var(--stage-bg)}#stage canvas{display:block;width:100%;height:100%}.poster{position:absolute;inset:0;display:block}.poster img{width:100%;height:100%;object-fit:cover;filter:none}#stage.ready .poster{opacity:0}.header{height:var(--header-height);position:fixed;inset:0 0 auto;z-index:var(--z-raised);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-lg);color:var(--stage-ink)}.wordmark{font-family:var(--font-display);font-size:42px;line-height:1;letter-spacing:-.045em;justify-self:center}.desktop-nav{display:flex;gap:var(--space-lg);align-items:center;font-size:14px}.desktop-nav a{padding-block:var(--space-sm)}.desktop-nav a:hover,.text-link:hover,.product-footer a:hover{color:var(--color-accent)}.quiet{min-height:44px;padding:var(--space-xs) 0;background:none;border:0;font-size:14px;white-space:nowrap}.quiet:hover{color:var(--color-accent)}.collection-button{justify-self:end;display:flex;gap:var(--space-xs)}.mobile-menu{display:none}
main{position:relative;z-index:1;pointer-events:none}.chapter{min-height:760px;height:100svh;position:relative;pointer-events:none}.chapter-copy{padding-block:var(--space-4xl) var(--space-2xl);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-columns);align-items:end;pointer-events:auto}.chapter-copy h1,.chapter-copy h2{font-size:clamp(45px,5vw,75px);max-width:13ch;line-height:1.03;letter-spacing:-.035em}.chapter-intro{max-width:380px;justify-self:end;padding-bottom:var(--space-xs)}.lead{font-size:17px;line-height:1.5;max-width:34ch}.actions{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-lg)}.primary{display:inline-flex;justify-content:center;align-items:center;min-height:48px;padding:var(--space-sm) var(--space-lg);border:1px solid var(--color-accent);border-radius:var(--radius-pill);background:var(--color-accent);color:var(--color-accent-ink);font-size:14px;font-weight:500;line-height:1.2;white-space:nowrap;transition:transform var(--dur-micro) var(--ease-out),background-color var(--dur-short) var(--ease-out)}.primary:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-paper)}.text-link{display:inline-flex;min-height:44px;align-items:center;width:fit-content;border:0;border-bottom:1px solid currentColor;border-radius:0;background:none;padding:var(--space-xs) 0;font-size:14px;line-height:1.3;white-space:nowrap;transition:color var(--dur-short) var(--ease-out)}.chapter-intro>.text-link,.chapter-intro>.primary{margin-top:var(--space-lg)}.note-list{margin:var(--space-lg) 0 0;padding:var(--space-md) 0 0;border-top:1px solid var(--stage-rule);font-size:14px}.note-list dt{color:var(--stage-soft)}.note-list dd{margin:var(--space-2xs) 0 0}.chapter-bottom{display:flex;justify-content:space-between;align-items:end;padding-block:var(--space-lg);position:absolute;bottom:var(--space-foot);left:0;right:0;pointer-events:auto}.object-caption{font-family:var(--font-display);font-size:25px;line-height:1.25}.object-caption span,.scene-aside{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--stage-soft)}.scene-aside{text-align:right}.chapter-bottom .text-link{font-size:13px}.engraving-field{margin-top:var(--space-lg)}.engraving-field label{font-size:13px;display:block;margin-bottom:var(--space-xs)}.engraving-field input{width:100%;background:var(--color-clear);border:0;border-bottom:1px solid var(--stage-ink);border-radius:0;color:var(--stage-ink);padding:var(--space-sm) 0;font-size:18px;min-height:48px}.engraving-field input::placeholder{color:var(--stage-soft);font-size:14px}.field-help{font-size:12px;line-height:1.4;color:var(--stage-soft);margin-top:var(--space-xs)}
.js .chapter-copy{position:fixed;left:0;right:0;top:calc(var(--header-height) + var(--space-lg));padding:0;visibility:hidden;opacity:0;pointer-events:none}.js .chapter-bottom{position:fixed;visibility:hidden;opacity:0;pointer-events:none}.js .chapter.is-active .chapter-copy,.js .chapter.is-active .chapter-bottom{visibility:visible;opacity:1;pointer-events:auto}.js .chapter-copy .chapter-intro{pointer-events:auto}.js .product-footer{position:fixed;visibility:hidden;pointer-events:none}.js .chapter.is-active .product-footer{visibility:visible;pointer-events:auto}
.story-controls{position:fixed;z-index:var(--z-raised);bottom:var(--space-lg);left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding-top:var(--space-md);gap:var(--space-lg)}.progress-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--stage-rule)}.progress-line span{display:block;width:100%;height:100%;background:var(--stage-ink);transform-origin:left;transform:scaleX(0)}.step-button{display:flex;gap:var(--space-sm);align-items:center;min-height:44px;padding:var(--space-xs) 0;border:0;background:none;font-size:13px}.step-button:hover{color:var(--color-accent)}.step-button svg{width:16px;height:16px}.chapter-picker select{font-size:13px;min-height:44px;max-width:240px;cursor:pointer;border:0;border-radius:0;color:var(--stage-ink);background:var(--color-clear);padding:var(--space-xs) var(--space-sm);text-align:center}.chapter-picker option{background:var(--color-paper);color:var(--color-ink)}.product-panel{bottom:var(--space-poster);align-items:center;justify-content:center;gap:var(--space-xl);padding:0}.size-selector{border:0;padding:0;margin:0;display:flex;gap:var(--space-xs);align-items:center;position:relative;flex-wrap:wrap}.size-selector legend{font-size:12px;margin-bottom:var(--space-sm)}.size-selector input{position:absolute;opacity:0;width:1px;height:1px}.size-selector label{min-width:76px;min-height:44px;padding:var(--space-xs) var(--space-md);border:1px solid var(--stage-rule);display:grid;place-items:center;cursor:pointer;font-size:14px}.size-selector input:checked+label{border-color:var(--stage-ink);background:var(--stage-ink);color:var(--stage-bg)}.size-selector input:focus-visible+label{outline:2px solid var(--color-accent);outline-offset:var(--space-2xs)}.save-action{text-align:center;min-width:215px}.save-action .primary{min-width:215px}.product-footer{left:0;right:0;bottom:var(--space-foot);display:flex;justify-content:space-between;align-items:center;gap:var(--space-md);font-size:11px;color:var(--stage-soft)}.product-footer a{padding-block:var(--space-2xs);white-space:nowrap}.spray-status{font-size:12px;line-height:1.4;margin-top:var(--space-xs);min-height:1.4em;color:var(--stage-soft)}
dialog{border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-ink);padding:var(--space-xl);margin:auto;width:min(680px,calc(100% - var(--space-xl)));max-height:92svh;box-shadow:none}dialog::backdrop{background:var(--color-dialog-shade);backdrop-filter:none}.dialog-header{display:flex;justify-content:space-between;align-items:start;gap:var(--space-lg)}.dialog-header h2{font-size:clamp(28px,3vw,42px);max-width:20ch}.dialog-header p{font-size:13px;line-height:1.5;margin-top:var(--space-sm)}.icon-button{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--color-rule);background:none;border-radius:50%;padding:var(--space-xs)}.icon-button:hover{background:var(--color-paper-3)}.viewer{width:min(1100px,94%);height:92svh;max-width:none;max-height:900px;padding:var(--space-lg);overflow:clip}.viewer[open]{display:flex;flex-direction:column}.viewer:not([open]){display:none}#viewer-stage{flex:1;min-height:0;position:relative;touch-action:none;cursor:grab}#viewer-stage:active{cursor:grabbing}#viewer-stage canvas{width:100%;height:100%;display:block}.viewer-controls{display:flex;justify-content:center;align-items:center;gap:var(--space-lg);flex-wrap:wrap}.viewer-controls .text-link{font-size:13px}.drawer{position:fixed;inset:var(--space-md) var(--space-md) var(--space-md) auto;margin:0;height:calc(100% - var(--space-lg) - var(--space-xs));width:min(480px,calc(100% - var(--space-lg) - var(--space-xs)));max-height:none;padding:var(--space-lg);overflow-y:auto}.drawer-note{font-size:12px;line-height:1.6;color:var(--color-muted);margin-top:var(--space-xl)}.collection-empty{margin-top:var(--space-xl)}.collection-empty p{margin-block:var(--space-lg);max-width:45ch;font-size:16px}.collection-item{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:1px solid var(--color-rule)}.collection-item h3{font-size:29px}.collection-item p{font-size:14px;margin-top:var(--space-xs);overflow-wrap:break-word}.quantity{display:flex;align-items:center;gap:var(--space-lg);margin-top:var(--space-md)}.quantity button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--color-rule);background:none;border-radius:50%;font-size:19px}.quantity button:hover{background:var(--color-paper-3)}.collection-item .remove{font-size:12px;margin-top:var(--space-sm)}.about>p{margin-top:var(--space-lg);font-size:15px;line-height:1.6;max-width:55ch}.composition{margin-block:var(--space-xl);font-size:14px}.composition>div{display:flex;justify-content:space-between;gap:var(--space-lg);padding-block:var(--space-sm);border-bottom:1px solid var(--color-rule)}.composition dd{margin:0;text-align:right}.navigation>a{display:block;font-family:var(--font-display);font-size:32px;padding-block:var(--space-md)}.navigation>a:hover{color:var(--color-accent)}.mobile-menu{justify-self:start}.no-script{position:relative;z-index:2;padding:var(--space-lg);background:var(--color-paper);color:var(--color-ink);font-size:16px}.dialog-open{overflow-y:clip}
@media(min-width:1800px){:root{--gutter:144px;--header-height:120px}.chapter-copy h1,.chapter-copy h2{font-size:88px}}
@media(max-width:1100px){:root{--gutter:32px;--header-height:88px;--space-poster:144px}.chapter-copy h1,.chapter-copy h2{font-size:55px}.chapter-intro{max-width:330px}.lead{font-size:16px}.chapter-copy{gap:var(--space-xl)}.actions{gap:var(--space-md)}.product-panel{gap:var(--space-lg)}.wordmark{font-size:36px}}
@media(max-width:700px){:root{--gutter:20px;--header-height:78px;--space-foot:80px;--space-poster:124px}.header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-xs)}.wordmark{font-size:31px}.desktop-nav{display:none}.mobile-menu{display:block}.quiet{font-size:12px}.collection-button{gap:var(--space-2xs)}.chapter{height:100svh;min-height:680px}.chapter-copy{grid-template-columns:minmax(0,1fr);gap:var(--space-md);text-align:center;justify-items:center;align-items:center}.chapter-copy h1,.chapter-copy h2{font-size:clamp(34px,8.5vw,46px);max-width:18ch}.chapter-intro{justify-self:center;max-width:360px;padding:0}.lead{font-size:14px;line-height:1.45;max-width:35ch}.js .chapter-copy{top:calc(var(--header-height) + var(--space-sm))}.actions{margin-top:var(--space-md);gap:var(--space-md);justify-content:center}.primary{font-size:12px;min-height:44px;padding-inline:var(--space-lg)}.text-link{font-size:12px;min-height:44px}.chapter-copy .text-link{margin-top:var(--space-sm)}.actions .text-link{margin:0}.note-list{margin-top:var(--space-sm);padding-top:var(--space-xs);font-size:12px}.note-list div{display:flex;gap:var(--space-md);justify-content:center;align-items:center}.note-list dd{margin:0}.chapter-bottom{padding-block:var(--space-sm)}.object-caption{font-size:19px}.object-caption span,.scene-aside{font-size:11px}.scene-aside{max-width:140px}.chapter-bottom .text-link{font-size:11px}.story-controls{bottom:var(--space-md);gap:var(--space-sm);padding-top:var(--space-xs)}.step-button{font-size:11px;gap:var(--space-xs)}.chapter-picker select{font-size:11px;max-width:175px}.engraving-field{margin-top:var(--space-sm);text-align:left}.engraving-field label{font-size:12px;margin-bottom:var(--space-2xs)}.engraving-field input{font-size:16px;min-height:44px;padding-block:var(--space-xs);text-align:center}.engraving-field input::placeholder{font-size:12px}.field-help{font-size:11px;margin-top:var(--space-2xs)}.engraving-field .field-help{text-align:center}.product-panel{flex-wrap:wrap;gap:var(--space-md);bottom:var(--space-poster);padding:0}.size-selector{flex-basis:100%;justify-content:center;gap:var(--space-xs)}.size-selector legend{text-align:center;margin-bottom:var(--space-xs);font-size:11px}.size-selector label{font-size:12px;min-height:38px;min-width:72px}.save-action{min-width:200px}.save-action .primary{min-width:200px}.product-panel>[data-about]{font-size:11px;min-height:38px}.product-footer{bottom:var(--space-foot);font-size:10px;justify-content:center;flex-wrap:wrap;gap:var(--space-xs)}.product-footer a{display:none}.product-chapter .chapter-intro>.text-link{margin-top:var(--space-2xs)}.product-panel .save-action .field-help{font-size:10px}.viewer{padding:var(--space-md);height:94svh}.dialog-header h2{font-size:28px}.dialog-header p{font-size:11px}.viewer-controls{gap:var(--space-md)}.viewer-controls .text-link{font-size:11px}.drawer{inset:var(--space-xs) var(--space-xs) var(--space-xs) auto;width:calc(100% - var(--space-md));height:calc(100% - var(--space-md));padding:var(--space-lg)}dialog{padding:var(--space-lg)}.spray-status{font-size:11px;min-height:0}.chapter-intro>.primary{margin-top:var(--space-sm)}}
@media(max-width:360px){:root{--gutter:16px;--header-height:72px;--space-poster:116px}.wordmark{font-size:28px}.quiet{font-size:11px}.chapter-copy h1,.chapter-copy h2{font-size:34px}.chapter-copy{gap:var(--space-sm)}.lead{font-size:12px;max-width:34ch}.hero .actions{gap:var(--space-sm);margin-top:var(--space-xs)}.primary{font-size:11px;padding-inline:var(--space-md)}.hero .text-link{font-size:11px}.object-caption{font-size:17px}.scene-aside{font-size:10px}.chapter-bottom .text-link{font-size:10px}.note-list{font-size:11px}.chapter-picker select{max-width:150px;font-size:10px}.step-button span{display:none}.step-button{min-width:44px;justify-content:center}.product-panel{gap:var(--space-sm)}.save-action{min-width:175px}.save-action .primary{min-width:175px}.product-panel>[data-about]{font-size:10px}.field-help{font-size:10px}}
@media(orientation:landscape) and (max-height:650px){:root{--header-height:60px;--gutter:32px;--space-foot:66px;--space-poster:100px}.wordmark{font-size:28px}.desktop-nav,.quiet{font-size:12px}.chapter-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);text-align:left;gap:var(--space-lg)}.js .chapter-copy{top:calc(var(--header-height) + var(--space-sm))}.chapter-copy h1,.chapter-copy h2{font-size:35px;line-height:1.02}.chapter-intro{max-width:330px;justify-self:end}.lead{font-size:12px;line-height:1.4}.actions{gap:var(--space-md);margin-top:var(--space-sm)}.primary{min-height:40px;font-size:11px;padding:var(--space-xs) var(--space-md)}.text-link{font-size:11px;min-height:40px}.note-list{font-size:11px;margin-top:var(--space-xs);padding-top:var(--space-xs)}.note-list div{display:block}.note-list dd{margin-top:var(--space-2xs)}.chapter{min-height:420px}.object-caption{font-size:18px}.scene-aside{font-size:11px}.chapter-bottom{padding-block:var(--space-xs)}.chapter-intro>.text-link,.chapter-intro>.primary{margin-top:var(--space-xs)}.story-controls{bottom:var(--space-xs);padding-top:var(--space-xs)}.step-button,.chapter-picker select{min-height:36px}.product-panel{bottom:var(--space-poster);flex-wrap:nowrap;gap:var(--space-lg)}.size-selector{flex-basis:auto}.size-selector legend{font-size:10px;margin-bottom:var(--space-2xs)}.size-selector label{min-height:34px;font-size:11px}.save-action .primary{min-height:38px}.product-panel>.text-link{font-size:11px}.save-action .field-help{font-size:10px}.product-footer{font-size:10px}.engraving-field{margin-top:var(--space-xs)}.engraving-field input{min-height:38px;font-size:16px;padding-block:var(--space-xs)}.engraving-field label{font-size:11px;margin-bottom:var(--space-2xs)}.engraving-field .field-help{font-size:10px}.spray-status{font-size:10px;min-height:0}}
@media(orientation:landscape) and (max-height:400px){:root{--header-height:44px;--gutter:16px;--space-foot:54px;--space-poster:84px}.wordmark{font-size:25px}.chapter-copy h1,.chapter-copy h2{font-size:26px;max-width:18ch}.chapter-copy h1 br,.chapter-copy h2 br{display:none}.chapter-copy{gap:var(--space-lg)}.js .chapter-copy{top:calc(var(--header-height) + var(--space-xs))}.lead{font-size:10px;max-width:35ch}.actions{margin-top:var(--space-xs);gap:var(--space-sm)}.primary,.text-link{min-height:34px;font-size:10px;padding-block:var(--space-xs)}.note-list{font-size:10px;padding-top:var(--space-2xs);margin-top:var(--space-2xs)}.note-list div{display:flex;gap:var(--space-sm)}.note-list dd{margin:0}.scene-aside,.object-caption span{font-size:10px}.chapter-bottom{padding-block:var(--space-2xs)}.object-caption{font-size:16px}.chapter-bottom .text-link{min-height:30px;font-size:10px}.chapter{min-height:320px}.product-panel{gap:var(--space-md)}.size-selector legend{display:none}.size-selector label{min-height:30px;min-width:55px;font-size:10px;padding:var(--space-2xs) var(--space-sm)}.save-action{min-width:165px}.save-action .primary{min-width:165px;min-height:32px}.product-panel>[data-about]{font-size:10px;min-height:30px}.save-action .field-help{display:none}.product-footer{bottom:var(--space-foot);font-size:9px}.story-controls{bottom:var(--space-2xs)}.engraving-field label,.engraving-field .field-help{display:none}.engraving-field input{min-height:30px;padding-block:var(--space-2xs);font-size:14px}.chapter-intro>.text-link{min-height:30px}.step-button,.chapter-picker select{font-size:10px;min-height:32px}.step-button span{display:none}.step-button{min-width:44px;justify-content:center}.collection-button{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.is-dusk button:focus-visible,.is-dusk a:focus-visible,.is-dusk input:focus-visible,.is-dusk select:focus-visible{outline-color:var(--color-label)}.is-dusk .text-link:hover,.is-dusk .quiet:hover,.is-dusk .desktop-nav a:hover{color:var(--color-label)}

.size-selector label{border-color:var(--stage-ink)}.spray-status{min-height:1.4em}

.chapter-picker select{border-bottom:1px solid var(--stage-ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.size-selector input:focus-visible+label,.is-dusk button:focus-visible,.is-dusk a:focus-visible,.is-dusk input:focus-visible,.is-dusk select:focus-visible{outline-color:var(--stage-ink)}
dialog button:focus-visible,dialog a:focus-visible,dialog input:focus-visible,dialog select:focus-visible,.is-dusk dialog button:focus-visible,.is-dusk dialog a:focus-visible,.is-dusk dialog input:focus-visible,.is-dusk dialog select:focus-visible{outline-color:var(--color-accent)}.is-dusk dialog .text-link:hover{color:var(--color-accent)}