@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap");
body[data-edition] { --ink: #eee2cb; --paper: #140d0f; --accent: #cfaa69; --line: #67513b; --muted: #c0ab98; background: rgb(20, 13, 15); color: var(--ink); }
body.october { --paper: #171516; --accent: #e0a36e; --line: #6a4d3d; --muted: #c8b9a7; background: rgb(23, 21, 22); color: rgb(238, 226, 203); }
body[data-edition] .preview { background: rgb(15, 13, 14); color: rgb(192, 173, 149); border-bottom: 1px solid rgba(180, 138, 74, 0.19); font-size: 8px; position: relative; z-index: 6; }
body[data-edition] header { position: absolute; left: 0px; right: 0px; z-index: 5; padding: 25px 5vw; border: 0px; background: linear-gradient(rgba(15, 10, 12, 0.6), transparent); color: rgb(234, 223, 201); }
header .brand { font-size: 11px; }
nav a[aria-current] { color: rgb(239, 197, 135); text-decoration: underline; text-underline-offset: 7px; }
nav .back { opacity: 0.8; }
.poets-edition-hero, .halloween-hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(780px, -29px + 100svh); padding: 130px 6vw 95px; }
.poets-edition-hero { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0px, 1.2fr); align-items: center; gap: 4vw; background: radial-gradient(at 75% 60%, rgb(59, 27, 29) 0px, transparent 61%), linear-gradient(125deg, rgb(25, 14, 19), rgb(16, 11, 12) 65%); }
.poets-edition-hero::before, .poets-edition-hero::after { content: ""; position: absolute; z-index: 1; inset: 105px 28px 40px; border: 1px solid rgba(181, 139, 73, 0.25); pointer-events: none; }
.poets-edition-hero::after { inset: 111px 34px 46px; border-color: rgba(181, 139, 73, 0.125); }
.hero-copy { position: relative; z-index: 3; min-width: 0px; }
.hero-copy .eyebrow { font-size: 9px; color: rgb(216, 185, 127); letter-spacing: 0.19em; margin-bottom: 28px; }
.hero-copy h1 { font-size: clamp(95px, 10vw, 156px); line-height: 0.82; letter-spacing: -0.035em; margin: 0px; color: rgb(241, 226, 197); }
.poets .hero-copy h1 { font-family: UnifrakturMaguntia, "Libre Caslon Display", Georgia, serif; font-size: clamp(90px, 10vw, 150px); line-height: 0.87; letter-spacing: -0.015em; }
.poets .hero-copy h1 em { font-style: normal; color: rgb(215, 172, 101); }
.hero-copy .intro { font-family: "Libre Caslon Display", Georgia, serif; font-size: clamp(26px, 2.5vw, 37px); line-height: 1.1; color: rgb(231, 213, 180); }
.hero-copy .desc { font-size: 13px; line-height: 1.85; max-width: 370px; color: rgb(196, 173, 156); margin: 22px 0px 28px; }
.hero-copy .button { min-height: 46px; padding: 14px 18px; font-size: 11px; gap: 20px; color: rgb(33, 20, 15); }
.hero-copy .text-link { font-size: 11px; }
.hero-copy .actions { gap: 23px; }
.byline { font: italic 13px Georgia, serif; color: rgb(166, 145, 123); margin-top: 25px; }
.flourish { width: 230px; height: 42px; stroke: rgb(178, 139, 80); stroke-width: 1; margin: 23px 0px 20px; display: block; }
.package-hero { position: relative; z-index: 3; max-width: 690px; justify-self: end; width: 100%; }
.package-frame { position: relative; padding: 7px; border: 1px solid rgba(173, 130, 70, 0.314); background: rgb(46, 23, 23); box-shadow: rgba(0, 0, 0, 0.6) 0px 35px 80px; }
.package-frame::before, .package-frame::after { content: "✦"; position: absolute; color: rgb(203, 164, 103); font-size: 23px; line-height: 1; z-index: 1; }
.package-frame::before { top: -13px; left: -10px; }
.package-frame::after { bottom: -13px; right: -10px; }
.package-frame img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.package-hero figcaption { font: 8px / 1.7 "DM Mono", monospace; letter-spacing: 0.08em; text-align: center; color: rgb(187, 165, 140); margin: 15px auto 0px; max-width: 430px; }
.gold-halo { position: absolute; width: 65vw; height: 65vw; right: -15vw; top: -5vw; background: radial-gradient(rgba(179, 107, 48, 0.133), transparent 65%); pointer-events: none; animation: 7s ease-in-out 0s infinite alternate none running halo-breathe; }
@keyframes halo-breathe { 
  0% { transform: translate(-2%, -1%); opacity: 0.4; }
  100% { transform: translate(2%, 2%); opacity: 1; }
}
.hero-foot { position: absolute; z-index: 3; bottom: 23px; left: 6vw; right: 6vw; display: flex; justify-content: space-between; gap: 25px; font: 8px "DM Mono", monospace; letter-spacing: 0.16em; color: rgb(191, 168, 138); }
.hero-foot a { padding: 8px 0px; }
.hero-foot span { padding-block: 8px; }
.halloween-hero { display: flex; align-items: center; padding-inline: 7vw; min-height: max(800px, -29px + 100svh); }
.halloween-scene { position: absolute; z-index: 0; inset: 0px; background: rgb(20, 19, 21); }
.halloween-scene picture, .halloween-scene img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.night-shade { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(16, 16, 25, 0.71), rgba(16, 16, 25, 0.27) 43%, transparent 73%), linear-gradient(rgba(16, 16, 25, 0.46), transparent 25%, transparent 78%, rgb(23, 21, 22)); }
.halloween-hero .hero-copy { max-width: 620px; text-shadow: rgba(0, 0, 0, 0.6) 0px 2px 25px; }
.halloween-hero h1 em { color: rgb(235, 180, 123); }
.halloween-hero .intro { margin-top: 32px; }
.halloween-hero .desc { color: rgb(226, 208, 186); }
.halloween-hero .button { background: rgb(232, 182, 131); border-color: rgb(232, 182, 131); color: rgb(46, 33, 28); text-shadow: none; }
.rec-light { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: rgb(231, 172, 104); margin-right: 8px; box-shadow: rgba(231, 172, 104, 0.4) 0px 0px 12px; animation: 3s ease-in-out 0s infinite normal none running rec-pulse; }
@keyframes rec-pulse { 
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}
.scene-controls { position: fixed; right: 20px; bottom: max(18px,env(safe-area-inset-bottom)); z-index: 20; }
.scene-controls button { min-height: 44px; padding: 11px 16px; border: 1px solid rgba(190, 155, 96, 0.37); color: rgb(231, 216, 189); background: rgba(23, 16, 21, 0.95); font: 10px "DM Mono", monospace; box-shadow: rgba(0, 0, 0, 0.4) 0px 6px 25px; }
.scene-controls button:hover { background: rgb(57, 35, 43); }
html[data-atmosphere-motion="paused"] *, .motion-paused * { animation-play-state: paused !important; }
.product-story { position: relative; z-index: 3; background: rgb(25, 15, 19); }
.october .product-story { background: rgb(32, 26, 24); }
.product-story .section { padding: 90px max(7vw, -580px + 50vw); }
.product-story h2 { font-size: clamp(40px, 4.7vw, 66px); }
.product-story .eyebrow { color: rgb(198, 164, 108); font-size: 9px; }
.section-head > p { font-size: 12px; line-height: 1.8; max-width: 320px; }
.film-strip { background: rgb(23, 21, 25); border: 0px; border-block: 1px solid rgba(142, 102, 70, 0.3); color: rgb(212, 172, 125); font-size: 9px; letter-spacing: 0.17em; padding: 24px 5vw; }
.tape-story { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 8vw; align-items: center; }
.tape-art { padding: 10px; background: rgb(210, 188, 149); transform: rotate(-3deg); box-shadow: rgba(0, 0, 0, 0.4) 14px 22px 45px; max-width: 440px; margin: 10px auto 20px; }
.tape-art img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }
.tape-art figcaption { font: 7px / 1.6 "DM Mono", monospace; letter-spacing: 0.06em; color: rgb(70, 51, 37); text-align: center; padding-top: 10px; }
.tape-story > div > p:not(.eyebrow) { font-size: 14px; color: rgb(195, 178, 158); max-width: 500px; margin-top: 22px; }
.tape-story .text-link { display: inline-block; margin-top: 22px; }
.collection { border-block: 1px solid rgba(136, 106, 69, 0.25); background: linear-gradient(120deg, rgba(46, 20, 29, 0.565), rgba(17, 13, 16, 0.314)); }
.october .collection { background: linear-gradient(120deg, rgba(80, 54, 38, 0.267), rgba(21, 21, 27, 0.333)); }
.look-library { grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 1fr); gap: 6vw; margin-top: 35px; align-items: start; }
.spines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 530px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(147, 116, 73) rgb(33, 18, 25); padding: 3px; }
.spines button { font-size: 14px; font-family: Georgia, serif; line-height: 1.3; min-height: 55px; padding: 13px; gap: 11px; background: rgba(55, 28, 38, 0.333); color: rgb(224, 205, 176); border: 1px solid rgba(173, 132, 93, 0.333); box-shadow: rgb(18, 11, 14) 3px 0px inset; }
.spines button:hover { background: rgba(89, 65, 50, 0.467); }
.spines button span { font: 8px "DM Mono", monospace; min-width: 16px; color: rgb(182, 152, 104); }
.spines button.active { background: rgb(216, 190, 144); color: rgb(36, 19, 25); box-shadow: rgb(146, 112, 65) 3px 0px inset; }
.spines button.active span { color: rgb(88, 68, 46); }
.october .spines button { background: rgba(68, 49, 36, 0.4); }
.october .spines button.active { background: rgb(219, 178, 138); color: rgb(40, 28, 23); }
.look-detail { padding: 20px 0px; position: sticky; top: 30px; align-self: start; min-width: 0px; }
.look-detail h3 { font-size: clamp(38px, 4.4vw, 61px); margin: 17px 0px; overflow-wrap: anywhere; }
.look-detail > p { font-size: 13px; color: rgb(198, 179, 157); line-height: 1.85; }
.look-detail .fine { font-size: 10px; }
.look-detail .text-link { display: inline-block; font-size: 11px; margin-top: 20px; }
.swatches { height: 135px; margin: 30px 0px 17px; border: 1px solid rgba(168, 139, 99, 0.333); box-shadow: rgba(0, 0, 0, 0.267) 0px 12px 30px; }
.swatches span { position: relative; }
.swatches span::after { content: attr(data-hex); position: absolute; bottom: 10px; left: 0px; right: 0px; text-align: center; font: 8px "DM Mono", monospace; color: var(--swatch-ink); }
.photo-note { border-bottom: 1px solid rgba(153, 117, 72, 0.25); background: rgb(20, 15, 18); }
.photo-note > p:last-child { max-width: 660px; font-size: 13px; color: rgb(195, 177, 156); margin-top: 25px; }
.adaptive { background: rgb(212, 193, 163); color: rgb(53, 37, 42); }
.adaptive-copy > p:not(.eyebrow) { color: rgb(85, 66, 74); }
.adaptive .eyebrow { color: rgb(114, 83, 71); }
.diagram { border-color: rgb(108, 85, 68); }
.diagram-label { background: rgba(233, 223, 203, 0.88); }
.mask-buttons button { min-height: 44px; border-color: rgb(112, 87, 72); color: rgb(59, 41, 45); }
.mask-buttons button.active { background: rgb(61, 36, 46); color: rgb(243, 222, 192); }
.poets-process .steps { gap: 35px; }
.steps p { font-size: 13px; color: rgb(191, 174, 156); }
.steps h3 { font-size: 23px; }
.steps article { border-color: rgba(130, 102, 75, 0.4); }
.release { background: radial-gradient(at 50% 0px, rgb(67, 32, 43), rgb(21, 14, 18) 65%); border-color: rgba(170, 134, 69, 0.3); }
.release > p:not(.eyebrow) { font-size: 14px; }
.release .release-price { font: 48px "Libre Caslon Display", Georgia, serif; color: rgb(225, 190, 124); }
.release-price small { font: 10px "DM Mono", monospace; }
.release .button { gap: 30px; }
.release .fine { font-size: 10px !important; max-width: 600px !important; }
.proof { background: rgb(18, 19, 24); color: rgb(230, 217, 194); }
.proof .look-tabs { border-color: rgba(144, 113, 84, 0.333); }
.proof .look-tabs button { color: rgb(208, 183, 154); min-height: 44px; }
.proof .look-tabs button.active { background: rgb(217, 178, 135); color: rgb(42, 29, 25); }
.comparison input { accent-color: rgb(221, 170, 108); }
.comparison-hint { font-size: 10px; color: rgb(192, 179, 157); text-align: center; max-width: 640px; margin: 10px auto 0px; }
.editions { background: rgb(21, 20, 25); --ink: #e5d6be; --accent: #bd8157; --muted: #bcae9b; }
.edition-grid .featured { background: rgb(48, 38, 31); }
.edition-grid article { border-color: rgba(128, 107, 81, 0.4); }
.edition-grid .button.secondary { color: rgb(233, 213, 186); }
.faq { color: rgb(236, 223, 199); }
.faq details p { color: rgb(196, 180, 156); }
.faq summary { padding: 4px 0px; }
.environment-disclosure { margin: 0px; padding: 26px 7vw; background: rgb(16, 13, 16); color: rgb(168, 152, 131); font-size: 10px; line-height: 1.7; }
body[data-edition] footer { background: rgb(12, 9, 12); border-color: rgba(122, 94, 57, 0.2); color: rgb(216, 196, 168); padding-bottom: 85px; }
body[data-edition] footer span { color: rgb(172, 157, 137); }
.portal { background: rgb(22, 15, 19); color: rgb(230, 216, 191); --muted: #bfad93; --line: #755d4166; }
.portal .portal-title > p:last-child { color: rgb(189, 169, 141); }
.portal header { border-color: rgba(118, 90, 61, 0.333); }
.portal .world img { opacity: 0.85; object-position: center center; }
.portal .world { border: 1px solid rgba(133, 101, 60, 0.267); min-height: 520px; }
.portal footer { padding-bottom: 40px; }
@media (min-width: 1600px) {
  .poets-edition-hero { padding-inline: max(7vw, -720px + 50vw); }
  .halloween-hero { padding-left: max(7vw, -720px + 50vw); }
}
@media (max-width: 900px) and (min-width: 701px) {
  .poets-edition-hero { gap: 3vw; padding-inline: 5vw; }
  .poets .hero-copy h1 { font-size: 100px; }
  .hero-copy .desc { font-size: 12px; }
  .hero-copy .actions { gap: 15px; }
  .package-hero figcaption { font-size: 7px; }
  .poets-edition-hero::before { inset-inline: 18px; }
  .poets-edition-hero::after { inset-inline: 24px; }
}
@media (max-width: 700px) {
  body[data-edition] header { padding: 20px 6vw; gap: 15px; }
  .brand { font-size: 10px !important; }
  header .brand small { font-size: 7px; }
  header nav { font-size: 10px; gap: 15px; }
  header nav .back { font-size: 9px; }
  .preview { font-size: 7px !important; }
  .preview span { margin-inline: 6px; }
  .poets-edition-hero { grid-template-columns: 1fr; gap: 32px; min-height: 0px; padding: 152px 7vw 76px; }
  .poets-edition-hero::before { inset: 128px 12px 44px; }
  .poets-edition-hero::after { inset: 134px 18px 50px; }
  .poets .hero-copy h1 { font-size: clamp(80px, 24vw, 130px); line-height: 0.85; }
  .poets .hero-copy h1 br { display: none; }
  .poets .hero-copy h1 em::before { content: " "; }
  .hero-copy .eyebrow { font-size: 8px; line-height: 1.7; margin-bottom: 23px; letter-spacing: 0.14em; }
  .hero-copy .desc { font-size: 12px; max-width: 340px; margin: 20px 0px 23px; }
  .hero-copy .intro { font-size: 30px; }
  .flourish { width: 190px; height: 32px; margin: 20px 0px; }
  .hero-copy .actions { gap: 20px; }
  .hero-copy .button { font-size: 10px; }
  .hero-copy .text-link { font-size: 10px; }
  .byline { font-size: 11px; margin-top: 19px; }
  .package-hero { max-width: 500px; justify-self: center; }
  .package-hero figcaption { font-size: 7px; }
  .package-frame { padding: 5px; }
  .hero-foot { font-size: 6px; bottom: 19px; left: 7vw; right: 7vw; letter-spacing: 0.1em; }
  .hero-foot a { max-width: 140px; text-align: right; }
  .halloween-hero { min-height: max(840px, -25px + 100svh); padding: 155px 7vw 115px; align-items: flex-start; }
  .halloween-hero .hero-copy { max-width: 320px; }
  .halloween-hero h1 { font-size: clamp(90px, 26vw, 135px); }
  .halloween-hero .intro { margin-top: 28px; font-size: 31px; }
  .halloween-hero .desc { max-width: 270px; font-size: 11px; }
  .halloween-hero .hero-foot { bottom: 28px; }
  .halloween-scene img { object-position: center center; }
  .night-shade { background: linear-gradient(90deg, rgba(17, 16, 25, 0.69), rgba(17, 16, 25, 0.2) 85%), linear-gradient(rgba(16, 16, 25, 0.396), transparent 25%, transparent 70%, rgb(32, 26, 24)); }
  .scene-controls { right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); max-width: calc(-24px + 100vw); }
  .scene-controls button { font-size: 9px; min-height: 44px; padding: 10px 12px; }
  .product-story .section { padding: 60px 7vw; }
  .product-story h2 { font-size: clamp(36px, 10.7vw, 47px); }
  .section-head > p { margin-top: 25px; font-size: 12px; }
  .tape-story { grid-template-columns: 1fr; gap: 35px; }
  .tape-art { width: 84%; max-width: 340px; }
  .tape-story > div > p:not(.eyebrow) { font-size: 13px; }
  .look-library { grid-template-columns: 1fr; gap: 23px; margin-top: 28px; }
  .spines { max-height: 285px; grid-template-columns: 1fr 1fr; gap: 7px; }
  .spines button { font-size: 13px; min-height: 55px; padding: 12px 10px; gap: 8px; }
  .spines button span { font-size: 7px; }
  .look-detail { position: static; padding-top: 10px; }
  .look-detail h3 { font-size: 44px; }
  .swatches { height: 115px; margin-top: 25px; }
  .swatches span::after { font-size: 7px; }
  .adaptive { grid-template-columns: 1fr; gap: 35px; }
  .diagram { height: 260px; }
  .section-head { margin-bottom: 30px; }
  .photo-note > p:last-child { font-size: 12px; }
  .film-strip { font-size: 8px; gap: 15px; }
  .edition-grid { gap: 18px; margin-top: 35px; }
  .edition-grid article { padding: 25px; }
  .steps { gap: 30px; }
  .environment-disclosure { font-size: 9px; }
  .portal .world { min-height: 430px; }
  .portal .world h2 { font-size: 55px; }
  .portal footer { padding-bottom: 40px; }
}
@media (max-width: 350px) {
  .hero-copy .actions { gap: 12px; }
  .hero-copy .button { padding-inline: 13px; }
  .poets .hero-copy h1 { font-size: 76px; }
  .spines button { font-size: 11px; padding-inline: 8px; }
  .swatches span::after { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gold-halo, .rec-light { animation: auto ease 0s 1 normal none running none !important; }
}
@media (max-width: 700px) {
  .poets-edition-hero { gap: 20px; padding-top: 145px; }
  .poets-edition-hero > .hero-copy { display: contents; }
  .poets-edition-hero .hero-copy > .eyebrow { order: 1; position: relative; z-index: 3; margin: 0px; font-size: 7px; text-align: center; }
  .poets-edition-hero .hero-copy > h1 { order: 2; position: relative; z-index: 3; font-size: clamp(53px, 15.3vw, 75px); white-space: nowrap; text-align: center; line-height: 1.05; }
  .poets-edition-hero .package-hero { order: 3; }
  .poets-edition-hero .hero-copy > .flourish { order: 4; position: relative; z-index: 3; justify-self: center; margin: 0px; }
  .poets-edition-hero .hero-copy > .intro { order: 5; position: relative; z-index: 3; }
  .poets-edition-hero .hero-copy > .desc { order: 6; position: relative; z-index: 3; margin: 0px; }
  .poets-edition-hero .hero-copy > .actions { order: 7; position: relative; z-index: 3; }
  .poets-edition-hero .hero-copy > .byline { order: 8; position: relative; z-index: 3; margin: 0px; }
  .spines { grid-auto-flow: column; grid-template-rows: repeat(2, 55px); grid-template-columns: none; grid-auto-columns: 158px; overflow: auto hidden; max-height: none; scroll-snap-type: x; padding-bottom: 10px; }
  .spines button { scroll-snap-align: start; }
}
.pumpkin-light { position: absolute; z-index: 1; pointer-events: none; transform: translate(-50%, -50%); background: radial-gradient(rgba(255, 188, 103, 0.4), transparent 65%); mix-blend-mode: screen; animation: 2.7s ease-in-out 0s infinite alternate none running pumpkin-flicker; }
.pumpkin-light:nth-last-child(2) { animation-delay: -1.7s; }
.pumpkin-light:last-child { animation-delay: -0.9s; }
@keyframes pumpkin-flicker { 
  0% { opacity: 0.23; }
  19% { opacity: 0.7; }
  37% { opacity: 0.38; }
  59% { opacity: 0.85; }
  78% { opacity: 0.42; }
  100% { opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .pumpkin-light { opacity: 0.3; animation: auto ease 0s 1 normal none running none !important; }
}
header nav a { display: inline-flex; align-items: center; min-height: 44px; }
.comparison input { min-height: 44px; }
.scene-controls[hidden] { display: none !important; }
@media (max-width: 700px) {
  .package-hero figcaption { font-size: 8px; letter-spacing: 0.03em; }
}