/* The Journal Foundry Co. — site styles
   Palette and type from the brand system: charcoal / cream / ink / gold, Lora + Poppins. */

:root {
  --charcoal: #1B1917;
  --charcoal-deep: #141312;
  --cream: #F6F1E9;
  --cream-deep: #EFE8DC;
  --paper: #FBF8F2;
  --pale: #F1F1E8;
  --ink: #2B231E;
  --ink-soft: #4A403A;
  --muted: #8C8279;
  --line: #D9CFC2;
  --gold: #C9A86A;
  --ember: #A6602B;
  --moss: #223229;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--serif); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--ember); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
p { text-wrap: pretty; }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: var(--charcoal); padding: 8px 12px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }

/* type helpers */
.k { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; }
.cap { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: var(--muted); line-height: 1.55; }
.lab { font-family: var(--sans); font-weight: 500; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.rule { height: 1px; width: 56px; background: var(--gold); flex: none; }
.kicker { display: flex; align-items: center; gap: 16px; }
.kicker .k { color: var(--ember); }
.on-dark .kicker .k, .on-dark .k { color: var(--gold); }
.lede { font-size: 20px; line-height: 1.6; color: var(--ink-soft); }
.on-dark .lede { color: rgba(246,241,233,.78); }
.h-xl { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.06; font-weight: 600; letter-spacing: -0.012em; }
.h-l  { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.16; }
.h-m  { font-size: clamp(22px, 1.8vw, 25px); line-height: 1.3; font-weight: 600; }
.italic-gold { color: var(--gold); font-style: italic; font-weight: 500; }

/* buttons */
.btn {
  font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .04em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--charcoal); }
.btn-gold:hover { background: #D9BB80; color: var(--charcoal); }
.btn-ghost { border-color: rgba(246,241,233,.35); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-outline { border-color: var(--gold); color: var(--gold); min-height: 44px; padding: 0 22px; }
.btn-outline:hover { background: var(--gold); color: var(--charcoal); }
.btn-ink { border-color: var(--ink); color: var(--ink); }
.btn-ink:hover { background: var(--ink); color: var(--cream); }

/* layout */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.section { padding-block: clamp(72px, 8.5vw, 128px); }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.dark { background: radial-gradient(ellipse 70% 55% at 28% 18%, #2A2623 0%, #1B1917 55%, #151312 100%); color: var(--cream); }
.dark h1, .dark h2, .dark h3 { color: var(--cream); }
.cream-deep { background: var(--cream-deep); }

/* nav */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(27,25,23,.96); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(201,168,106,.28); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.brand { display: flex; align-items: center; gap: 14px; color: var(--cream); }
.brand .k { color: var(--cream); letter-spacing: .3em; }
.brand:hover { color: var(--cream); }
.nav-links { display: flex; align-items: center; gap: 40px; }
.nav-links a.k { color: rgba(246,241,233,.8); letter-spacing: .18em; }
.nav-links a.k:hover, .nav-links a.k[aria-current="page"] { color: var(--gold); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; cursor: pointer; color: var(--cream); }

/* hero */
.hero { position: relative; min-height: clamp(560px, 82vh, 820px); background: var(--charcoal); overflow: hidden; display: flex; align-items: center; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform-origin: 70% 55%; animation: heroDrift 26s ease-in-out infinite alternate; }
@keyframes heroDrift { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1%); } }
@media (prefers-reduced-motion: reduce) { .hero-img { animation: none; } }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27,25,23,.94) 0%, rgba(27,25,23,.8) 36%, rgba(27,25,23,.18) 62%, rgba(27,25,23,0) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; background: linear-gradient(180deg, rgba(27,25,23,0), rgba(27,25,23,.7)); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: 96px 72px; }
.hero-copy { max-width: 700px; display: flex; flex-direction: column; gap: 28px; color: var(--cream); }
.hero-copy p { max-width: 560px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: rgba(246,241,233,.82); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px; }
.hero-meta { color: rgba(246,241,233,.55); }
.hero-scroll { position: absolute; right: var(--gutter); bottom: 40px; z-index: 1; display: flex; align-items: center; gap: 12px; color: rgba(246,241,233,.55); }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* problem + statement */
.problem { align-items: center; }
.problem-copy { grid-column: span 6; display: flex; flex-direction: column; gap: 26px; padding-right: 32px; }
.statement-wrap { grid-column: 8 / span 5; position: relative; }
.statement-shadow { position: absolute; inset: 24px -24px -24px 24px; background: #E8E0D2; border-radius: 2px; transform: rotate(2deg); }
.statement { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 34px 36px 30px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px rgba(43,35,30,.18); }
.statement-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.statement-head strong { font-size: 26px; font-weight: 600; }
.hand { font-family: var(--hand); font-size: 22px; color: #2B4A66; line-height: 1; }
.st-group { display: flex; flex-direction: column; gap: 8px; }
.st-group header { display: flex; justify-content: space-between; }
.st-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.st-score { width: 32px; flex: none; text-align: center; border: 1px solid var(--ink); border-radius: 2px; }
.st-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; background: var(--pale); padding: 14px 16px; margin-top: 4px; }
.st-totals > div { display: flex; flex-direction: column; gap: 4px; }
.st-totals .hand { font-size: 26px; }
.st-balance { border-left: 1px solid var(--gold); padding-left: 14px; }
.st-balance .lab, .st-balance .hand, .st-running .hand { color: var(--ember); }
.st-running { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.st-running .hand { font-size: 30px; }

/* object */
.object { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 88px); }
.object-top { align-items: center; }
.object-cover { grid-column: span 5; position: relative; display: flex; justify-content: center; }
.object-cover .star { position: absolute; left: -60px; top: -40px; width: 360px; height: 360px; opacity: .06; pointer-events: none; }
.object-cover img { position: relative; width: min(430px, 100%); border-radius: 2px; box-shadow: 0 50px 90px rgba(0,0,0,.6); transform: rotate(-3deg); }
.object-copy { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 26px; }
.stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 8px; }
.stats > div { display: flex; flex-direction: column; gap: 6px; }
.stats strong { font-size: 36px; color: var(--gold); font-weight: 500; line-height: 1; }
.stats strong small { font-size: 22px; }
.stats .cap { color: rgba(246,241,233,.55); }
.row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 36px; }
.row-head .cap { color: rgba(246,241,233,.5); }
.pages-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.pages-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.page-card { display: flex; flex-direction: column; gap: 14px; }
.page-card figure { margin: 0; position: relative; }
.page-card img { width: 100%; border-radius: 2px; box-shadow: 0 24px 48px rgba(0,0,0,.45); }
.page-card .cover-crop { aspect-ratio: 440 / 569; object-fit: cover; }
.page-card strong { font-size: 18px; font-weight: 600; color: var(--cream); }
.page-card .cap { color: rgba(246,241,233,.6); }
.num { position: absolute; top: -12px; left: -12px; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: var(--charcoal); font-family: var(--sans); font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* how */
.how { display: flex; flex-direction: column; gap: 64px; }
.how-head { max-width: 760px; display: flex; flex-direction: column; gap: 18px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.step { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; border-top: 1px solid var(--gold); }
.step header { display: flex; align-items: center; justify-content: space-between; }
.step header em { font-size: 15px; color: var(--ember); }
.step p { color: var(--ink-soft); }
.step svg { color: var(--ember); }

/* privacy */
.privacy { background: radial-gradient(ellipse 60% 50% at 70% 30%, #2C4034 0%, #223229 55%, #1B2921 100%); color: var(--pale); }
.privacy h2 { color: var(--pale); }
.privacy .grid-12 { align-items: center; }
.privacy-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; }
.privacy-copy > p { color: rgba(241,241,232,.75); font-size: 18px; }
.note { background: var(--pale); color: var(--ink); padding: 30px 32px; display: flex; flex-direction: column; gap: 12px; margin-top: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.note .k { color: var(--ember); font-size: 11px; }
.note p { font-size: 18px; }
.privacy-page { grid-column: 7 / span 6; display: flex; justify-content: center; position: relative; }
.privacy-page img { width: min(440px, 100%); border-radius: 2px; box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.privacy-ring { position: absolute; left: 50%; top: 73.8%; width: 72%; max-width: 316px; aspect-ratio: 316 / 84; transform: translateX(-50%); border: 2px solid var(--gold); border-radius: 4px; box-shadow: 0 0 0 6px rgba(201,168,106,.18); pointer-events: none; }

/* range */
.range { display: flex; flex-direction: column; gap: 48px; }
.range-head { align-items: end; }
.range-head > div { grid-column: span 7; display: flex; flex-direction: column; gap: 18px; }
.range-head > p { grid-column: 9 / span 4; color: var(--ink-soft); }
.range-head a { color: var(--ember); border-bottom: 1px solid var(--gold); }
.covers-6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; align-items: end; }
.cover { width: 100%; aspect-ratio: 17 / 22; object-fit: cover; border-radius: 2px; box-shadow: 0 20px 40px rgba(43,35,30,.25); background: var(--charcoal); }

/* pricing */
.pricing { align-items: start; }
.pricing-copy { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.pricing-copy p { color: var(--ink-soft); }
.tiers { grid-column: 6 / span 7; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.tier { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 28px 0; border-bottom: 1px solid #D0C5B5; align-items: baseline; }
.tier:last-child { border-bottom-color: var(--ink); }
.tier .name { font-size: 23px; font-weight: 500; }
.tier .qty { color: var(--ink-soft); }
.tier .price { font-size: 32px; text-align: right; }
.tier .quoted { text-align: right; font-style: italic; color: var(--ink-soft); }
.draft { color: var(--ember); }

/* contact */
.contact { align-items: start; }
.contact-copy { grid-column: span 5; display: flex; flex-direction: column; gap: 22px; }
.contact-copy .lede { font-size: 18px; }
.contact-copy .alt { color: rgba(246,241,233,.55); font-size: 16px; margin-top: 12px; }
.contact-copy .alt a { color: var(--gold); }
.form { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 18px; background: rgba(246,241,233,.04); border: 1px solid rgba(246,241,233,.1); padding: clamp(24px, 3vw, 40px); }
.form .two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--sans); font-size: 12px; letter-spacing: .06em; color: rgba(246,241,233,.6); }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid rgba(246,241,233,.3); border-radius: 0;
  color: var(--cream); font-family: var(--serif); font-size: 17px; padding: 12px 0; outline: none; transition: border-color .2s ease;
}
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C9A86A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 2px center; padding-right: 26px; }
.field select option { color: var(--ink); }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--gold); }
.field textarea { min-height: 96px; resize: vertical; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 10px; }
.form-actions .cap { color: rgba(246,241,233,.45); }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* footer */
.footer { background: var(--charcoal-deep); color: var(--cream); border-top: 1px solid rgba(201,168,106,.2); padding-block: 56px 44px; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.footer-brand p { font-size: 14px; color: rgba(246,241,233,.5); }
.footer-cols { display: flex; flex-wrap: wrap; gap: 56px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 12px; }
.footer-cols .cap { color: var(--gold); }
.footer-cols a { color: rgba(246,241,233,.75); font-size: 15px; }
.footer-cols a:hover { color: var(--gold); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(246,241,233,.1); }
.footer-bottom .cap { color: rgba(246,241,233,.4); font-size: 11px; }
.footer-bottom .cap:last-child { max-width: 720px; text-align: right; }

/* journals page */
.page-head .grid-12 { align-items: end; }
.page-head-copy { grid-column: span 8; display: flex; flex-direction: column; gap: 24px; }
.page-head-copy h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; }
.page-head > .wrap > .grid-12 > p { grid-column: 10 / span 3; color: rgba(246,241,233,.7); }
.journal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 32px; }
.jcard { display: flex; flex-direction: column; gap: 14px; }
.jcard .cover-box { position: relative; overflow: hidden; border-radius: 2px; background: var(--charcoal); aspect-ratio: 17 / 22; box-shadow: 0 20px 40px rgba(43,35,30,.22); transition: transform .3s ease, box-shadow .3s ease; }
.jcard .cover-box img { width: 100%; height: 100%; object-fit: cover; }
.jcard:hover .cover-box { transform: translateY(-4px); box-shadow: 0 28px 50px rgba(43,35,30,.3); }
.jcard .meta { display: flex; flex-direction: column; gap: 6px; }
.jcard .title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.jcard .title-row strong { font-size: 19px; font-weight: 600; line-height: 1.3; }
.jcard .title-row span { white-space: nowrap; }
.jcard .go { color: var(--ember); font-size: 11px; letter-spacing: .2em; margin-top: 6px; }
.jcard .cover-box.tile, .tile { aspect-ratio: 17 / 22; background: var(--cream); border: 1px solid var(--ink); padding: 8px; display: flex; }
.tile > div { flex: 1; border: 1px solid var(--tile-acc, #3E5A4E); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 26px 18px 22px; text-align: center; }
.tile .name { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tile .name em { font-size: 12px; font-style: italic; color: var(--tile-acc, #3E5A4E); }
.tile .name b { font-size: 28px; line-height: 1.05; font-weight: 700; }
.tile .mark { width: 28px; height: 1px; background: var(--tile-acc, #3E5A4E); }
.bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.bundle { display: flex; flex-direction: column; gap: 14px; background: var(--charcoal); color: var(--cream); padding: 32px 28px; border-radius: 2px; }
.bundle .k { color: var(--gold); }
.bundle strong { font-size: 26px; font-weight: 600; line-height: 1.2; }
.bundle .cap { color: rgba(246,241,233,.6); }
.bundle .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.bundle .row span { font-size: 22px; }
.bundle .row a { color: var(--gold); font-size: 11px; letter-spacing: .2em; }

/* about */
.about-hero { position: relative; min-height: 520px; display: flex; align-items: flex-end; background: var(--charcoal); overflow: hidden; }
.about-hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.about-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,25,23,.35) 0%, rgba(27,25,23,.72) 55%, rgba(27,25,23,.95) 100%); }
.about-hero .wrap { position: relative; z-index: 1; width: 100%; padding-block: 96px 72px; }
.prose { max-width: 720px; display: flex; flex-direction: column; gap: 22px; }
.prose p { font-size: 19px; line-height: 1.65; color: var(--ink-soft); }
.prose h2 { margin-top: 24px; }
.prose ul { margin: 0; padding-left: 1.2em; color: var(--ink-soft); font-size: 18px; display: flex; flex-direction: column; gap: 8px; }
.on-dark .prose p { color: rgba(246,241,233,.78); }

/* responsive */
@media (max-width: 1100px) {
  .problem-copy { grid-column: span 12; padding-right: 0; }
  .statement-wrap { grid-column: 2 / span 10; margin-top: 24px; }
  .object-cover { grid-column: span 12; }
  .object-copy { grid-column: span 12; }
  .pages-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy-copy, .privacy-page { grid-column: span 12; }
  .range-head > div, .range-head > p { grid-column: span 12; }
  .covers-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pricing-copy, .tiers { grid-column: span 12; }
  .contact-copy, .form { grid-column: span 12; }
  .page-head-copy { grid-column: span 12; }
  .page-head > .wrap > .grid-12 > p { grid-column: span 12; }
  .journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav .wrap { height: 64px; }
  .nav-toggle { display: inline-flex; }
  .nav-links { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: flex-start; gap: 22px; padding: 24px var(--gutter) 28px; background: var(--charcoal); border-bottom: 1px solid rgba(201,168,106,.28); }
  .nav-links.open { display: flex; }
  .brand .k { font-size: 10px; }
  .hero { min-height: 620px; align-items: flex-start; }
  .hero-img { object-position: 50% 30%; }
  .hero::before { background: linear-gradient(180deg, rgba(27,25,23,.55) 0%, rgba(27,25,23,.85) 45%, rgba(27,25,23,.35) 100%); }
  .hero .wrap { padding-block: 56px 96px; }
  .hero-actions .btn { width: 100%; }
  .hero-scroll { display: none; }
  .grid-12 { gap: 24px; }
  .statement-wrap { grid-column: span 12; }
  .statement { padding: 24px 20px; }
  .statement-shadow { inset: 14px -8px -14px 8px; }
  .stats { gap: 28px; }
  .pages-4, .pages-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .page-card strong { font-size: 15px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .covers-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .tier { grid-template-columns: 1fr auto; }
  .tier .qty { grid-column: 1; }
  .tier .name { display: none; }
  .tier .price { font-size: 24px; }
  .form .two { grid-template-columns: 1fr; }
  .form-actions .btn { width: 100%; }
  .footer-bottom .cap:last-child { text-align: left; }
  .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .jcard .title-row strong { font-size: 16px; }
  .tile .name b { font-size: 20px; }
  .bundles { grid-template-columns: 1fr; }
  .object-cover img { transform: none; width: min(300px, 80%); }
}

/* /free/ — routing block for visitors arriving from a post about a different journal (added 20 Sep) */
.free-elsewhere{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.free-elsewhere>p{margin:10px 0 0;max-width:60ch}
.free-links{list-style:none;margin:18px 0 20px;padding:0;display:grid;gap:12px}
.free-links li{padding-left:16px;border-left:2px solid var(--gold)}
.free-links a{color:var(--ember);border-bottom:1px solid var(--gold);font-weight:500}
.free-links .cap{display:block;margin-top:3px}

/* v46 (24 Sep) — reel router on /free/, theme filter on /journals/, mid-width nav */
.story-jump{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;background:var(--ink);color:var(--cream);padding:14px 18px;border-left:3px solid var(--gold);font-family:var(--sans);font-size:14px;line-height:1.45;margin-bottom:6px}
.story-jump strong{color:var(--gold);font-weight:500}
.story-jump:hover{color:var(--cream)}.story-jump:hover strong{text-decoration:underline}
.story-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:40px 24px}
.scard{display:flex;flex-direction:column;gap:14px}
.scard-img{position:relative;display:block;aspect-ratio:4/5;border-radius:3px;overflow:visible}
.scard-img>img:first-child{width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:0 18px 36px rgba(43,35,30,.22);transition:transform .3s ease}
.scard:hover .scard-img>img:first-child{transform:translateY(-4px)}
.scard-cover{position:absolute;right:-8px;bottom:-12px;width:34%;height:auto;border-radius:2px;box-shadow:0 10px 22px rgba(0,0,0,.35);border:2px solid var(--paper)}
.scard .meta{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.scard .title-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.scard .title-row strong{font-size:17px;font-weight:600;line-height:1.3}
.scard .go{color:var(--ember);font-size:11px;letter-spacing:.2em;margin-top:4px}
.jfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}
.chip{font-family:var(--sans);font-size:13px;padding:9px 16px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);border-radius:999px;cursor:pointer;min-height:40px}
.chip:hover{border-color:var(--gold);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.jcard[hidden]{display:none}
@media (max-width:1100px){.story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:761px) and (max-width:1100px){.nav-links{gap:22px}.nav-links a.k{letter-spacing:.12em;white-space:nowrap}.brand .k{letter-spacing:.18em;white-space:nowrap}.nav-links .btn{white-space:nowrap}}
@media (max-width:760px){.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}.scard .title-row strong{font-size:15px}.chip{font-size:12.5px;padding:8px 13px}}


/* ===================== v47 (24 Sep) — design pass ===================== */
/* paper grain over the whole page: subtle, print-like */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:rgba(201,168,106,.35)}
.btn{border-radius:999px;letter-spacing:.06em}
.btn-gold{box-shadow:0 10px 26px rgba(201,168,106,.25)}
.btn-gold:hover{transform:translateY(-1px)}
.nav{background:rgba(27,25,23,.86);backdrop-filter:blur(14px) saturate(1.2)}
.nav-links .btn-outline{border-radius:999px}
.hp{position:absolute;left:-9999px}

/* ---------- /free/ ---------- */
.fx-hero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,110px) clamp(64px,8vw,120px)}
.fx-hero::after{content:"";position:absolute;right:-20%;top:-30%;width:70%;height:140%;background:radial-gradient(closest-side,rgba(201,168,106,.14),transparent 70%);pointer-events:none}
.fx-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.fx-copy{display:flex;flex-direction:column;gap:26px}
.fx-copy .h-xl{max-width:14ch}
.fx-lede{font-size:clamp(17px,1.35vw,19px);color:rgba(246,241,233,.78);max-width:56ch}
.fx-form{grid-column:auto;margin-top:6px;background:rgba(246,241,233,.05);border:1px solid rgba(201,168,106,.25);border-radius:6px;backdrop-filter:blur(4px)}
.fx-check{display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:13px;line-height:1.5;color:rgba(246,241,233,.7);cursor:pointer}
.fx-check input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin-top:1px;border:1px solid rgba(201,168,106,.7);border-radius:3px;background:transparent;cursor:pointer;display:grid;place-items:center}
.fx-check input:checked{background:var(--gold)}
.fx-check input:checked::after{content:"";width:5px;height:9px;border:solid var(--charcoal);border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fx-form .form-actions .cap{max-width:34ch}
.fx-phone{display:flex;flex-direction:column;align-items:center;gap:0;justify-self:center;position:relative;color:var(--cream)}
.phone{width:min(300px,62vw);aspect-ratio:9/19.5;border-radius:42px;padding:10px;background:linear-gradient(145deg,#3a342f,#141312);box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.08);transform:rotate(3deg);transition:transform .5s ease}
.fx-phone:hover .phone{transform:rotate(0deg) translateY(-6px)}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:33px;display:block;background:#111}
.fx-callout{position:relative;margin-top:-64px;margin-left:-60px;align-self:flex-start;max-width:280px;background:var(--paper);color:var(--ink);padding:18px 20px;border-radius:6px;box-shadow:0 24px 50px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:8px;transform:rotate(-2deg);border-left:3px solid var(--gold)}
.fx-callout .k{color:var(--ember);font-size:10px}
.fx-callout strong{font-size:17px;line-height:1.3;font-weight:600}
.fx-go{font-family:var(--sans);font-size:13px;color:var(--ember);font-weight:500}
.fx-phone:hover .fx-go{text-decoration:underline}
.stories-sec{background:linear-gradient(180deg,var(--cream-deep),var(--cream))}
.scard-img{isolation:isolate}
.scard-img>img:first-child,.scard-vid{border-radius:6px}
.scard-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease;z-index:1;pointer-events:none}
.scard-vid.play{opacity:1}
.scard-cover{z-index:2}
.scard-img::after{content:"▶";position:absolute;left:12px;top:12px;z-index:3;width:30px;height:30px;border-radius:50%;background:rgba(27,25,23,.6);color:var(--gold);font-size:10px;display:grid;place-items:center;backdrop-filter:blur(4px);transition:opacity .3s}
.scard:hover .scard-img::after{opacity:0}
.fx-inside-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.fan-pages{position:relative;aspect-ratio:1.2/1;max-width:560px;width:100%;justify-self:center}
.fan-pages img{position:absolute;top:8%;left:50%;width:52%;border-radius:3px;box-shadow:0 22px 50px rgba(43,35,30,.22);background:#fff;transition:transform .5s ease}
.fan-pages img:nth-child(1){transform:translateX(-10%) rotate(9deg)}
.fan-pages img:nth-child(2){transform:translateX(-50%) rotate(-1deg)}
.fan-pages img:nth-child(3){transform:translateX(-92%) rotate(-10deg)}
.fx-inside:hover .fan-pages img:nth-child(1){transform:translateX(-2%) rotate(13deg)}
.fx-inside:hover .fan-pages img:nth-child(3){transform:translateX(-100%) rotate(-14deg)}
.fx-inside-copy{display:flex;flex-direction:column;gap:22px}
.fx-inside-copy p{font-size:18px;color:var(--ink-soft);line-height:1.65}
.fx-list{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.fx-list li{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.fx-list strong{font-weight:600}
.fx-list span{color:var(--ink-soft)}

/* ---------- /journals/ ---------- */
.jx-hero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,110px)}
.jx-hero::after{content:"";position:absolute;right:-10%;top:-40%;width:70%;height:160%;background:radial-gradient(closest-side,rgba(201,168,106,.16),transparent 70%);pointer-events:none}
.jx-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.jx-copy{display:flex;flex-direction:column;gap:24px}
.jx-copy p{color:rgba(246,241,233,.78);font-size:clamp(17px,1.35vw,19px);max-width:52ch}
.jx-free a{color:var(--gold);border-bottom:1px solid var(--gold);font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.03em}
.jx-free span{display:block;margin-top:6px;font-size:14px;color:rgba(246,241,233,.55)}
.jx-fan{position:relative;height:clamp(300px,34vw,460px)}
.jx-fan img{position:absolute;left:50%;bottom:0;width:clamp(130px,15vw,210px);border-radius:3px;box-shadow:0 30px 60px rgba(0,0,0,.5);transform-origin:50% 120%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.jx-fan img:nth-child(1){transform:translateX(-50%) rotate(-24deg)}
.jx-fan img:nth-child(2){transform:translateX(-50%) rotate(-12deg)}
.jx-fan img:nth-child(3){transform:translateX(-50%) rotate(0deg);z-index:3}
.jx-fan img:nth-child(4){transform:translateX(-50%) rotate(12deg);z-index:2}
.jx-fan img:nth-child(5){transform:translateX(-50%) rotate(24deg);z-index:1}
.jx-fan:hover img:nth-child(1){transform:translateX(-50%) rotate(-32deg)}
.jx-fan:hover img:nth-child(2){transform:translateX(-50%) rotate(-16deg)}
.jx-fan:hover img:nth-child(4){transform:translateX(-50%) rotate(16deg)}
.jx-fan:hover img:nth-child(5){transform:translateX(-50%) rotate(32deg)}
.jfilter-bar{position:sticky;top:84px;z-index:15;background:rgba(246,241,233,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.jfilter-bar .jfilter{margin:0;padding:14px 0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jfilter-bar .jfilter::-webkit-scrollbar{display:none}
.chip{white-space:nowrap;flex:none}
.jx-list{padding-top:clamp(48px,5vw,72px)}
.journal-grid{gap:64px 36px}
.jcard{gap:18px}
.jshelf{display:block;position:relative;padding:28px 26px 30px;border-radius:8px;background:radial-gradient(ellipse at 50% 100%,#E6DCCB 0%,var(--cream-deep) 55%,#F3EDE3 100%);box-shadow:inset 0 0 0 1px rgba(217,207,194,.6)}
.jshelf::after{content:"";position:absolute;left:18%;right:18%;bottom:16px;height:14px;border-radius:50%;background:rgba(43,35,30,.22);filter:blur(10px);transition:transform .35s ease,opacity .35s}
.jcard .cover-box{display:block;position:relative;z-index:1;background:none;box-shadow:0 14px 28px rgba(43,35,30,.25);border-radius:2px 4px 4px 2px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.jcard .cover-box img{width:100%;height:auto;aspect-ratio:600/776;object-fit:cover}
.jcard .cover-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6%;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.08) 60%,transparent);z-index:1}
.jcard:hover .cover-box{transform:translateY(-8px) rotate(-1.5deg);box-shadow:0 28px 44px rgba(43,35,30,.3)}
.jcard:hover .jshelf::after{transform:scaleX(.85);opacity:.7}
.jcard .tile{aspect-ratio:600/776}
.jcard .title-row strong{font-size:18px}
.price{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.jbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.jbtn{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.04em;padding:8px 14px;border-radius:999px;background:var(--ink);color:var(--cream);border:1px solid var(--ink);transition:background .2s,color .2s}
.jbtn:hover{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.jbtn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.jbtn-line:hover{background:transparent;color:var(--ember);border-color:var(--gold)}
.bundle{border-radius:8px;background:radial-gradient(ellipse 80% 90% at 20% 0%,#2e2925,#1B1917 70%);box-shadow:0 20px 40px rgba(27,25,23,.2)}

@media (max-width:1100px){
  .fx-grid,.jx-grid,.fx-inside-grid{grid-template-columns:1fr}
  .fx-phone{order:-1}
  .jx-fan{height:280px}
}
@media (max-width:760px){
  .jfilter-bar{top:64px}
  .fx-copy .h-xl{max-width:none}
  .phone{width:min(230px,60vw);border-radius:34px}
  .phone video{border-radius:26px}
  .fx-callout{margin:-48px 0 0 0;align-self:center;max-width:260px}
  .fx-list li{grid-template-columns:1fr;gap:2px}
  .jshelf{padding:16px 14px 20px}
  .journal-grid{gap:40px 16px}
  .jbtn{font-size:11px;padding:7px 11px}
  .jx-fan{height:230px}
  .jx-fan img{width:120px}
}
@media (prefers-reduced-motion: reduce){.phone,.jx-fan img,.fan-pages img,.jcard .cover-box{transition:none}}
@media (max-width:760px){.phone{width:min(190px,52vw)}.scard .jbtns{gap:6px}.scard .jbtn{font-size:10.5px;padding:6px 10px}.price{font-size:12px;padding:2px 8px}}

/* ===================== v48 — per-journal pages ===================== */
.jmore{font-family:var(--sans);font-size:12px;color:var(--ember);margin-top:4px;letter-spacing:.03em}
.jmore:hover{text-decoration:underline}
.jp-hero{position:relative;overflow:hidden;padding-block:clamp(48px,6vw,96px) clamp(64px,7vw,110px)}
.jp-hero::after{content:"";position:absolute;right:-12%;top:-35%;width:70%;height:150%;background:radial-gradient(closest-side,rgba(201,168,106,.16),transparent 70%);pointer-events:none}
.jp-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.jp-copy{display:flex;flex-direction:column;gap:20px}
.jp-crumb{color:rgba(246,241,233,.5)}.jp-crumb a{color:var(--gold)}.jp-crumb span{margin:0 6px;opacity:.5}
.jp-tag{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin-top:-6px}
.jp-lede{font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;color:rgba(246,241,233,.8);max-width:56ch}
.jp-buy{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.jp-facts{display:flex;gap:clamp(24px,4vw,56px);margin-top:14px;padding-top:22px;border-top:1px solid rgba(201,168,106,.25)}
.jp-facts strong{display:block;font-size:30px;font-weight:500;color:var(--gold);line-height:1}
.jp-facts .cap{color:rgba(246,241,233,.55)}
.jp-visual{justify-self:center;width:min(380px,80%)}
.jp-shelf{position:relative;padding:34px 34px 40px;border-radius:10px;background:radial-gradient(ellipse at 50% 100%,rgba(201,168,106,.22),rgba(246,241,233,.04) 60%,transparent);box-shadow:inset 0 0 0 1px rgba(201,168,106,.2)}
.jp-shelf::after{content:"";position:absolute;left:16%;right:16%;bottom:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);filter:blur(12px)}
.jp-shelf .cover-box,.jp-rel .cover-box{display:block;position:relative;z-index:1;border-radius:2px 4px 4px 2px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5);transform:rotate(-2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.jp-shelf .cover-box::before,.jp-rel .cover-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6%;background:linear-gradient(90deg,rgba(0,0,0,.3),rgba(255,255,255,.08) 60%,transparent);z-index:1}
.jp-shelf:hover .cover-box{transform:rotate(0) translateY(-8px)}
.jp-how{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:start}
.jp-how-head{display:flex;flex-direction:column;gap:22px;position:sticky;top:120px}
.jp-method a{color:var(--ember);border-bottom:1px solid var(--gold);font-family:var(--sans);font-size:14px;font-weight:500}
.jp-method span{display:block;margin-top:6px;color:var(--muted);font-size:15px}
.jp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.jp-steps li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:26px 0;border-top:1px solid var(--line)}
.jp-steps li:last-child{border-bottom:1px solid var(--line)}
.jp-n{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--gold);line-height:1}
.jp-steps strong{font-size:20px;font-weight:600;display:block;margin-bottom:6px}
.jp-steps p{color:var(--ink-soft);font-size:17px;line-height:1.6}
.jp-story{padding-block:clamp(64px,7vw,110px)}
.jp-story-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(40px,7vw,110px);align-items:center}
.phone-sm{width:min(250px,56vw)}
.jp-story-copy{display:flex;flex-direction:column;gap:22px;max-width:560px}
.jp-story-copy p{color:rgba(246,241,233,.72)}.jp-story-copy a{color:var(--gold);border-bottom:1px solid rgba(201,168,106,.5)}
.jp-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.jp-tags li{font-family:var(--serif);font-style:italic;font-size:17px;padding:8px 16px;border:1px solid rgba(201,168,106,.4);border-radius:999px;color:var(--cream)}
.jp-inside{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.jp-inside>div{display:flex;flex-direction:column;gap:20px}
.jp-fmt{color:var(--ink-soft);font-size:17px}
.jp-list{list-style:none;margin:0;padding:0;counter-reset:jl;background:var(--paper);border:1px solid var(--line);border-radius:6px;box-shadow:0 20px 40px rgba(43,35,30,.08)}
.jp-list li{counter-increment:jl;display:flex;gap:18px;align-items:baseline;padding:15px 22px;border-bottom:1px dashed var(--line);font-size:17px}
.jp-list li:last-child{border-bottom:0}
.jp-list li::before{content:counter(jl,decimal-leading-zero);font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--gold);flex:none;width:22px}
.jp-close{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(32px,5vw,72px);align-items:center}
.jp-note{border-left:2px solid var(--gold);padding:6px 0 6px 26px;display:flex;flex-direction:column;gap:14px}
.jp-note .k{color:var(--ember)}.jp-note p{color:var(--ink-soft);font-size:17px}
.jp-cta{background:var(--ink);color:var(--cream);border-radius:10px;padding:32px 30px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;box-shadow:0 30px 60px rgba(27,25,23,.25)}
.jp-cta strong{font-size:24px;font-weight:600;line-height:1.2}
.jp-cta .btn-ink{border-color:var(--gold);color:var(--charcoal);background:var(--gold)}
.jp-cta .btn-ink:hover{background:#D9BB80;color:var(--charcoal)}
.jp-cta .jbtn-line{color:var(--cream);border-color:rgba(246,241,233,.3)}
.jp-rels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:32px}
.jp-rel{display:flex;flex-direction:column;gap:10px}
.jp-rel .cover-box{transform:none;box-shadow:0 16px 32px rgba(43,35,30,.25);margin-bottom:6px}
.jp-rel:hover .cover-box{transform:translateY(-6px) rotate(-1.5deg)}
.jp-rel strong{font-size:17px;font-weight:600}
@media (max-width:1100px){.jp-grid,.jp-how,.jp-inside,.jp-close{grid-template-columns:1fr}.jp-how-head{position:static}.jp-rels{grid-template-columns:repeat(2,minmax(0,1fr))}.jp-visual{order:-1;width:min(300px,70%)}}
@media (max-width:760px){.jp-story-grid{grid-template-columns:1fr;justify-items:center}.jp-facts strong{font-size:24px}.jp-steps li{grid-template-columns:44px 1fr}.jp-buy .btn{width:100%}.jp-visual{width:min(240px,64%)}.jp-shelf{padding:22px 22px 30px}}

/* v50 — 3D hero slider */
.hero-3d { perspective: 1400px; }
.hero-3d .hs-stage { position: absolute; inset: -30px; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.hs-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateZ(-160px) scale(1.06); transition: opacity 1.6s ease, transform 1.6s cubic-bezier(.2,.7,.2,1), filter 1.6s ease; filter: blur(6px) brightness(.7); }
.hs-slide.is-on { opacity: 1; transform: translateZ(0) scale(1); filter: none; z-index: 1; }
.hs-slide.is-off { opacity: 0; transform: translateZ(120px) scale(1.04) rotateY(-4deg); filter: blur(4px); z-index: 2; }
.hs-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.hs-slide.is-on img { animation: hsDrift 8s ease-out forwards; }
@keyframes hsDrift { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
.hs-cap { position: absolute; right: clamp(24px, 5vw, 72px); bottom: 92px; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 12px; border: 1px solid rgba(201,168,106,.35); border-radius: 999px; background: rgba(27,25,23,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--cream); font-size: 13px; letter-spacing: .04em; opacity: 0; transform: translateY(14px); transition: opacity .8s .7s ease, transform .8s .7s ease; }
.hs-slide.is-on .hs-cap { opacity: 1; transform: none; }
.hs-time { font-family: inherit; color: var(--gold); font-weight: 600; padding-right: 12px; border-right: 1px solid rgba(201,168,106,.35); }
.hero-3d::before, .hero-3d::after { z-index: 1; pointer-events: none; }
.hero-3d .wrap { z-index: 3; }
.hs-ui { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4; display: flex; align-items: center; gap: 20px; padding-inline: max(24px, calc((100vw - 1296px)/2)); color: rgba(246,241,233,.7); font-size: 12px; letter-spacing: .18em; }
.hs-count b { color: var(--cream); font-weight: 600; }
.hs-dots { display: flex; gap: 8px; }
.hs-dot { width: 44px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; }
.hs-dot i { display: block; width: 100%; height: 2px; background: rgba(246,241,233,.25); position: relative; overflow: hidden; }
.hs-dot i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; }
.hs-dot.is-on i::after { animation: hsBar 6.5s linear forwards; }
@keyframes hsBar { to { transform: scaleX(1); } }
.hero-3d .hero-scroll { z-index: 4; }
.hero-3d .h-xl { animation: hsRise 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero-3d .hero-copy > p, .hero-3d .hero-actions { animation: hsRise 1.1s .15s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hsRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .hs-slide img { object-position: 50% 30%; }
  .hs-cap { right: auto; left: 20px; bottom: 64px; font-size: 12px; }
  .hs-ui { bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide img, .hs-cap { transition: opacity .6s; animation: none !important; transform: none !important; filter: none !important; } }

/* v51 (27 Sep) free first-3-days sample button */
.jbtn-free{background:var(--gold);border-color:var(--gold);color:var(--charcoal)}
.jbtn-free:hover{background:#D9BB80;border-color:#D9BB80;color:var(--charcoal)}

/* ---------- v75: party season bar + homepage party-games section ---------- */
.season-bar{background:var(--gold);color:var(--charcoal-deep);font-family:var(--sans);font-size:13px;letter-spacing:.01em;text-align:center;padding:9px 0}
.season-bar .wrap{padding-inline:var(--gutter)}
.season-bar .sb-k{font-weight:700;letter-spacing:.12em;font-size:11px;margin-right:8px}
.season-bar a{color:var(--charcoal-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.season-bar a:hover{color:var(--ember)}
.pg{background:var(--cream-deep)}
.pg-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.pg-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(26px,3vw,38px);letter-spacing:-.01em;margin:0}
.pg-head p{margin:0;color:var(--ink-soft);max-width:52ch}
.pg-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pg-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;color:inherit;text-decoration:none;transition:transform .25s ease,box-shadow .25s ease}
.pg-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.pg-card img{display:block;width:100%;height:auto}
.pg-card .pg-body{padding:16px 18px 18px}
.pg-card .k{display:block;font-size:11px;letter-spacing:.14em;color:var(--ember);font-weight:600;margin-bottom:6px}
.pg-card strong{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25;margin-bottom:6px}
.pg-card .cap{color:var(--muted);font-size:13.5px;line-height:1.45}
.pg-card .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;font-weight:600}
.pg-card .row s{color:var(--muted);font-weight:400;margin-left:8px}
.pg-free{margin-top:22px;color:var(--ink-soft)}
.pg-free a{color:var(--ember);font-weight:600;border-bottom:1px solid var(--gold);text-decoration:none}
.pg-free a:hover{color:var(--charcoal)}
@media (max-width:860px){.pg-cards{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pg-cards{grid-template-columns:1fr}}