.magazine-page { --mag-ink: #171716; --mag-red: #c72d3b; --mag-cream: #f1eee6; color: var(--mag-ink); background: var(--mag-cream); }
.magazine-page h1, .magazine-page h2, .magazine-page h3, .magazine-page p { margin-top: 0; }
.magazine-page h2 { font-size: clamp(38px, 4.3vw, 70px); line-height: 1.08; letter-spacing: -.055em; }
.magazine-page h2 em, .magazine-bigline em { color: #ae2633; font-weight: 400; }
.magazine-page .button-primary { background: #d42e3c; box-shadow: 6px 6px 0 #74212c; }
.magazine-page .button-primary:hover { background: #ee3948; box-shadow: 3px 3px 0 #74212c; }
.magazine-page .button-primary:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.magazine-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .86fr); min-height: 760px; overflow: hidden; color: #f7f3eb; background: #171717; }
.magazine-hero::before { content: ''; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(#767676 1px, transparent 1px), linear-gradient(90deg, #767676 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(90deg, transparent 12%, black 72%); }
.magazine-hero::after { content: ''; position: absolute; z-index: 0; width: 520px; height: 520px; left: -260px; bottom: -340px; border: 1px solid rgba(211, 51, 66, .55); border-radius: 50%; box-shadow: 0 0 0 70px rgba(211, 51, 66, .04), 0 0 0 150px rgba(211, 51, 66, .025); pointer-events: none; }
.magazine-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 36px 4vw 88px 6vw; }
.magazine-hero .breadcrumbs { margin: 0 0 72px; }
.magazine-hero .breadcrumbs ol, .magazine-hero .breadcrumbs a { color: #c9c4be; }
.magazine-overline { margin-bottom: 30px; color: #ec5965; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.magazine-overline span { padding: 0 9px; color: #777; }
.magazine-hero h1 { max-width: 760px; font-size: clamp(58px, 6.3vw, 105px); letter-spacing: -.07em; line-height: .98; }
.magazine-hero h1 em { color: #e63a4b; font-style: normal; }
.magazine-lead { max-width: 585px; margin: 36px 0 32px; color: #dfd8d1; font: 21px/1.55 Georgia, serif; }
.magazine-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.magazine-quiet-link { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid #b5aca4; padding-bottom: 5px; }
.magazine-quiet-link:hover { color: #f75d69; }
.magazine-page .magazine-hero-note { margin: 32px 0 0; color: #b9b2aa; font-size: 11px; line-height: 1.5; letter-spacing: .05em; }
.magazine-hero-art { color: inherit; text-decoration: none; cursor: pointer; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; isolation: isolate; min-height: 720px; padding: 68px 7vw 90px 30px; }
.magazine-hero-art:focus-visible { outline: 3px solid #f25568; outline-offset: -8px; }
.magazine-hero-art::before { content: ''; position: absolute; z-index: -2; inset: 13% 4% 12% 2%; background: radial-gradient(ellipse, rgba(204, 45, 60, .4), transparent 67%); filter: blur(20px); }
.magazine-orbit { position: absolute; z-index: -1; border: 1px solid rgba(220, 70, 80, .3); border-radius: 50%; }
.magazine-orbit-one { width: 74%; aspect-ratio: 1; transform: rotate(-18deg) scaleX(.76); }
.magazine-orbit-two { width: 105%; aspect-ratio: 1; transform: rotate(18deg) scaleX(.72); }
.magazine-book { position: relative; z-index: 2; width: min(100%, 425px); transform: rotate(-5deg); filter: drop-shadow(25px 29px 15px rgba(0, 0, 0, .44)); animation: magazineFloat 7s ease-in-out infinite; }
.magazine-book img { display: block; width: 100%; height: auto; box-shadow: 3px 0 0 #d5cfc5, 7px 0 0 #8e877e; }
.magazine-edition { position: absolute; z-index: 1; right: 4vw; bottom: 8%; display: grid; place-items: center; width: 105px; height: 105px; border: 1px solid #f05262; border-radius: 50%; color: #f16470; font: 14px/1.3 Georgia, serif; text-align: center; transform: rotate(15deg); }
@keyframes magazineFloat { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-16px) rotate(-3deg); } }
.magazine-ticker { overflow: hidden; padding: 15px 0; color: #f7f3eb; background: #b32a38; font-size: 12px; font-weight: 800; letter-spacing: .17em; white-space: nowrap; }
.magazine-ticker div { width: max-content; animation: magazineTicker 28s linear infinite; }
.magazine-ticker span { padding: 0 26px; color: #f2a1a9; }
@keyframes magazineTicker { to { transform: translateX(-50%); } }
.magazine-section { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 45px; max-width: 1440px; margin: 0 auto; padding: 112px 6vw; }
.magazine-section-label { padding-top: 9px; font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #a72c39; }
.magazine-intro { border-bottom: 1px solid #cfc8be; }
.magazine-intro > div:last-child { max-width: 1000px; }
.magazine-bigline { font: clamp(37px, 4.6vw, 72px)/1.12 Georgia, serif; letter-spacing: -.055em; }
.magazine-intro > div:last-child > p:not(.magazine-bigline) { max-width: 730px; margin: 35px 0 55px; font: 20px/1.7 Georgia, serif; color: #49453f; }
.magazine-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #bdb6ac; }
.magazine-facts > div { padding: 25px 20px 0 0; }
.magazine-facts strong { display: block; font: 70px/1 Georgia, serif; letter-spacing: -.08em; }
.magazine-facts span { display: block; margin-top: 5px; color: #70675f; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.magazine-chapters { background: #e9e4db; max-width: none; padding-inline: max(6vw, calc((100vw - 1268px)/2)); }
.magazine-chapters > div:last-child { max-width: 1000px; }
.magazine-chapter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin-top: 53px; border-top: 1px solid #bdb6ac; }
.magazine-chapter-grid > div { padding: 28px 25px 32px 0; border-bottom: 1px solid #bdb6ac; }
.magazine-chapter-grid span { color: #a72c39; font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.magazine-chapter-grid h3 { margin: 22px 0 12px; font-size: 34px; }
.magazine-chapter-grid p { max-width: 360px; font: 17px/1.55 Georgia, serif; color: #55504a; }
.magazine-more { margin: 36px 0 0; max-width: 850px; font: 19px/1.6 Georgia, serif; }
.magazine-preview-head { display: flex; align-items: end; gap: 35px; justify-content: space-between; }
.magazine-preview-head h2 { max-width: 720px; }
.magazine-preview-head p { max-width: 290px; color: #615950; font: 16px/1.6 Georgia, serif; }
.magazine-reader { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; margin-top: 42px; }
.magazine-reader-main { min-width: 0; padding: 24px 24px 0; background: #252121; }
.magazine-reader-page { position: relative; display: block; width: min(100%, 570px); margin: 0 auto; padding: 0; border: 0; background: #ede9e0; box-shadow: 0 18px 32px rgba(0,0,0,.24); cursor: zoom-in; }
.magazine-reader-page img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; }
.magazine-reader-page > span { position: absolute; right: 12px; bottom: 12px; padding: 12px 14px; color: #fff; background: #a92535; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.magazine-reader-page:hover > span { background: #d03546; }
.magazine-reader-page:focus-visible, .magazine-reader-list button:focus-visible, .magazine-lightbox button:focus-visible { outline: 3px solid #f25568; outline-offset: 3px; }
.magazine-reader-caption { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0 19px; color: #f6f0e8; font-size: 13px; }
.magazine-reader-caption strong { font-weight: 700; }
.magazine-reader-caption span { color: #e96673; font-weight: 800; letter-spacing: .08em; }
.magazine-reader-side { display: flex; flex-direction: column; min-width: 0; }
.magazine-reader-kicker { margin: 0 0 12px; color: #9c2936; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.magazine-reader-list { display: grid; gap: 8px; }
.magazine-reader-list button { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px; border: 1px solid #d1c9bf; color: #302b29; background: #f9f6f0; text-align: left; cursor: pointer; }
.magazine-reader-list button[aria-current=true] { border-color: #a72c39; box-shadow: inset 3px 0 #a72c39; background: #fffdfa; }
.magazine-reader-list button:hover { border-color: #a72c39; }
.magazine-reader-list img { display: block; flex: 0 0 54px; width: 54px; height: 72px; object-fit: cover; }
.magazine-reader-list span { display: grid; gap: 6px; min-width: 0; }
.magazine-reader-list b { color: #9c2936; font-size: 10px; letter-spacing: .08em; }
.magazine-reader-list small { color: #615950; font: 12px/1.4 Georgia, serif; }
.magazine-reader-cta { display: block; margin-top: auto; padding: 22px 2px 0; color: #992735; font-size: 12px; font-weight: 800; text-underline-offset: 5px; }
.magazine-preview-credit { margin: 18px 0 0; color: #766f66; font-size: 11px; line-height: 1.5; }
.magazine-quote { padding: 100px 8vw; text-align: center; color: #f3eee7; background: #771f2b; }
.magazine-quote p { max-width: 1100px; margin: 0 auto 35px; font: clamp(32px, 4.2vw, 66px)/1.22 Georgia, serif; letter-spacing: -.045em; }
.magazine-quote span { color: #e9b5bb; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.magazine-offer { max-width: none; padding-inline: max(6vw, calc((100vw - 1268px)/2)); background: #171717; color: #f5f0e9; }
.magazine-offer h2 em { color: #ec4755; }
.magazine-offer-intro { max-width: 725px; color: #cec6be; font: 19px/1.65 Georgia, serif; }
.magazine-order-form[hidden], .magazine-order-form [hidden] { display: none !important; }
.magazine-waitlist[hidden] { display: none !important; }
.magazine-order-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 860px; margin: 32px 0 50px; padding: 32px; border: 1px solid #9a4b56; background: #292324; }
.magazine-order-form h3, .magazine-order-form > p, .magazine-order-form [data-magazine-shipping], .magazine-order-consent, .magazine-order-actions { grid-column: 1/-1; }
.magazine-order-form h3 { margin: 0; font-size: 28px; }
.magazine-order-form > p { margin: 0 0 8px; color: #f0b4bb; font-weight: 700; }
.magazine-order-form label { display: grid; gap: 7px; color: #f3e9e2; font-size: 14px; }
.magazine-order-form input:not([type=checkbox]) { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #8d837a; border-radius: 0; background: #fffaf3; color: #1a1717; font: 16px Arial, sans-serif; }
.magazine-order-form [data-magazine-shipping] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.magazine-order-form [data-magazine-shipping] p { grid-column: 1/-1; margin: 0; color: #c9c2ba; }
.magazine-order-consent { display: flex !important; align-items: flex-start; gap: 10px !important; line-height: 1.5; }
.magazine-order-consent input { margin-top: 4px; accent-color: #d42e3c; }
.magazine-order-consent a { color: #fff; text-decoration: underline; }
.magazine-order-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.magazine-order-cancel { border: 0; background: transparent; color: #f1d7da; text-decoration: underline; cursor: pointer; }
.magazine-formats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 45px 0 22px; }
.magazine-format { display: flex; flex-direction: column; align-items: flex-start; min-height: 365px; padding: 34px; border: 1px solid #625b58; background: #211f1f; }
.magazine-format-print { background: #2a2324; border-color: #85404a; }
.magazine-format-num { color: #e65a68; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.magazine-format h3 { margin: 23px 0 12px; color: #faf5ee; font-size: 34px; }
.magazine-format p { color: #c9c2ba; font: 17px/1.55 Georgia, serif; }
.magazine-price { margin-top: auto; color: #fff; font: 28px/1.25 Georgia, serif; }
.magazine-format small { margin: 9px 0 25px; color: #bdb2a9; font-size: 12px; line-height: 1.5; }
.magazine-format .button { width: 100%; }
.magazine-checkout-status { color: #d7c8be; font-size: 13px; line-height: 1.6; }
.magazine-checkout-status.is-success { color: #b9e9c4; font-weight: 700; }
.magazine-waitlist { display: grid; grid-template-columns: .9fr 1fr; gap: 50px; margin-top: 64px; padding: 38px 0 0; border-top: 1px solid #625b58; }
.magazine-waitlist h3 { color: #fff; font-size: 31px; line-height: 1.2; }
.magazine-waitlist p { max-width: 420px; color: #c9c2ba; font: 16px/1.6 Georgia, serif; }
.magazine-waitlist form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 15px; }
.magazine-waitlist label:not(.hidden-field):not(.magazine-consent) { color: #e6ddd4; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.magazine-waitlist input[type=email], .magazine-waitlist select { min-width: 0; width: 100%; height: 48px; padding: 10px 14px; border: 1px solid #8d837a; border-radius: 0; color: #161616; background: #f4f0e9; font: 15px Arial, sans-serif; }
.magazine-waitlist label[for=magazine-email] { grid-column: 1; grid-row: 1; }
.magazine-waitlist #magazine-email { grid-column: 1; grid-row: 2; }
.magazine-waitlist label[for=magazine-interest] { grid-column: 2; grid-row: 1; }
.magazine-waitlist #magazine-interest { grid-column: 2; grid-row: 2; }
.magazine-consent { grid-column: 1/-1; display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; color: #d8cec5; font-size: 12px; line-height: 1.5; }
.magazine-consent input { margin-top: 2px; accent-color: #d42e3c; }
.magazine-consent a { text-underline-offset: 3px; }
.magazine-waitlist form > button { grid-column: 1/-1; width: 100%; }
.magazine-waitlist .form-status { margin-top: 12px; }
.magazine-faq { background: #eee9e0; }
.magazine-faq h2 { margin-bottom: 35px; }
.magazine-faq details { border-top: 1px solid #bcb4a9; }
.magazine-faq details:last-child { border-bottom: 1px solid #bcb4a9; }
.magazine-faq summary { position: relative; padding: 24px 36px 24px 0; cursor: pointer; font-size: 20px; font-weight: 700; list-style: none; }
.magazine-faq summary::-webkit-details-marker { display: none; }
.magazine-faq summary::after { content: '+'; position: absolute; right: 4px; top: 20px; color: #b52c3a; font: 29px Georgia, serif; }
.magazine-faq details[open] summary::after { content: '−'; }
.magazine-faq details p { max-width: 750px; color: #5c544c; font: 17px/1.65 Georgia, serif; }
.magazine-lightbox { position: fixed; inset: 0; z-index: 100; width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: #f7f2eb; background: #171717; overflow: hidden; }
.magazine-lightbox::backdrop { background: rgba(0,0,0,.92); }
.magazine-lightbox[open] { display: flex; flex-direction: column; }
.magazine-lightbox-bar, .magazine-lightbox-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 0 0 auto; min-height: 64px; padding: 10px max(18px, 3vw); }
.magazine-lightbox-bar { border-bottom: 1px solid #494040; }
.magazine-lightbox-bar > span { font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.magazine-lightbox-bar > span b { margin: 0 8px; color: #d44a59; }
.magazine-lightbox-bar > div { display: flex; gap: 12px; }
.magazine-lightbox button { min-height: 42px; padding: 9px 15px; border: 1px solid #776d6b; color: #f7f2eb; background: transparent; font: 700 12px Arial, sans-serif; cursor: pointer; }
.magazine-lightbox button:hover { border-color: #f27480; color: #fff; }
.magazine-lightbox-close { border-color: #a62c39 !important; background: #a62c39 !important; }
.magazine-lightbox-canvas { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px; }
.magazine-lightbox-canvas figure { display: flex; align-items: center; justify-content: center; height: 100%; margin: 0; }
.magazine-lightbox-canvas img { display: block; width: auto; max-width: 100%; height: auto; max-height: 100%; object-fit: contain; box-shadow: 0 14px 35px rgba(0,0,0,.35); }
.magazine-lightbox.is-zoomed .magazine-lightbox-canvas { display: block; }
.magazine-lightbox.is-zoomed .magazine-lightbox-canvas figure { display: block; width: max-content; height: auto; margin: 0 auto; }
.magazine-lightbox.is-zoomed .magazine-lightbox-canvas img { width: min(1050px, 220vw); max-width: none; max-height: none; }
.magazine-lightbox-footer { border-top: 1px solid #494040; }
.magazine-lightbox-position { color: #f3e6e4; font: 13px/1.4 Georgia, serif; text-align: center; }
.has-magazine-motion .magazine-section, .has-magazine-motion .magazine-quote { opacity: 0; transform: translateY(35px); transition: opacity 650ms ease, transform 650ms ease; }
.has-magazine-motion .magazine-section.is-visible, .has-magazine-motion .magazine-quote.is-visible { opacity: 1; transform: none; }
@media (max-width: 1100px) { .magazine-hero { grid-template-columns: 1fr .78fr; } .magazine-hero h1 { font-size: clamp(55px, 6.4vw, 78px); } .magazine-hero-art { padding-right: 4vw; } .magazine-section { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; } }
@media (max-width: 760px) { .magazine-hero { grid-template-columns: 1fr; } .magazine-hero-copy { padding: 30px 6vw 25px; } .magazine-hero .breadcrumbs { margin-bottom: 48px; } .magazine-hero h1 { font-size: clamp(52px, 10.8vw, 78px); } .magazine-lead { font-size: 19px; } .magazine-hero-art { min-height: 500px; padding: 25px 16vw 70px; } .magazine-book { width: 300px; } .magazine-edition { right: 11vw; bottom: 7%; } .magazine-section { display: block; padding: 72px 6vw; } .magazine-section-label { margin-bottom: 26px; } .magazine-preview-head { display: block; } .magazine-reader { grid-template-columns: 1fr; } .magazine-reader-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .magazine-reader-cta { margin-top: 0; } .magazine-waitlist { grid-template-columns: 1fr; gap: 15px; } .magazine-quote { padding: 70px 6vw; } }
@media (max-width: 520px) { .magazine-hero h1 { font-size: clamp(48px, 12.2vw, 64px); } .magazine-hero-actions .button { width: 100%; } .magazine-hero-art { min-height: 420px; } .magazine-book { width: min(68vw, 280px); } .magazine-facts strong { font-size: 55px; } .magazine-chapter-grid, .magazine-formats, .magazine-order-form, .magazine-order-form [data-magazine-shipping] { grid-template-columns: 1fr; } .magazine-order-form { padding: 22px; } .magazine-reader { gap: 18px; margin-top: 28px; } .magazine-reader-main { padding: 12px 12px 0; } .magazine-reader-page > span { right: 8px; bottom: 8px; padding: 10px; font-size: 10px; } .magazine-reader-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; } .magazine-reader-list button { flex: 0 0 176px; scroll-snap-align: start; } .magazine-waitlist form { grid-template-columns: 1fr; } .magazine-waitlist label[for=magazine-email], .magazine-waitlist #magazine-email, .magazine-waitlist label[for=magazine-interest], .magazine-waitlist #magazine-interest { grid-column: 1; grid-row: auto; } .magazine-lightbox-bar > span { display: none; } .magazine-lightbox-bar > div { width: 100%; justify-content: space-between; } .magazine-lightbox-canvas { padding: 8px; } .magazine-lightbox-footer { gap: 6px; } .magazine-lightbox-footer button { padding: 8px; } .magazine-lightbox-footer button span { display: none; } .magazine-lightbox-position { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .magazine-book, .magazine-ticker div { animation: none; } .has-magazine-motion .magazine-section, .has-magazine-motion .magazine-quote { transition: none; transform: none; opacity: 1; } }