/* THE VANDALIST FOUNDRY — translated from Thomas's Paper board (Nimble rose, artboard 1) */
@font-face { font-family: 'Providence'; src: url('../fonts/providence-rg.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Providence'; src: url('../fonts/providence-bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --cream: #F3ECE2; --cream-87: rgba(243,236,226,.53); --white: #FFFFFF;
  --peach: #FFB08A; --ink: #1E1812; --paper: #F6EFE4;
  --sans: 'Elms Sans', 'Figtree', system-ui, sans-serif;
  --hand: 'Providence', 'Caveat', cursive;
  --maxw: 1346px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 90px; }
body { font-family: var(--sans); color: var(--white); background: #7E2A0E; line-height: 1.3; -webkit-font-smoothing: antialiased; }
/* the fixed red ground — never moves, everything scrolls over it */
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: #7E2A0E url('../assets/bg-texture.jpg') center / cover; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* NAV — items on a full-bleed rule with dots (the board's motif) */
#nav { position: fixed; top: 0; left: 0; right: 0; z-index: 60; padding-top: 32px; padding-bottom: 14px; }
#nav::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1;
  background: #7E2A0E url('../assets/bg-texture.jpg') center / cover;
  clip-path: inset(0 0 calc(100vh - var(--band, 92px)) 0); }
.nav-items { display: flex; justify-content: center; gap: 90px; }
.nav-items a { font-weight: 700; font-size: clamp(12px, 1vw, 15px); letter-spacing: .2em; line-height: 19px; opacity: .85; transition: opacity .2s; }
.nav-items a:hover { opacity: 1; }
.nav-rule { position: relative; margin-top: 22px; height: 9px; opacity: .71; }
.nav-rule::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: var(--white); }
.nav-rule i { position: absolute; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--white); transform: translateX(-50%); }

/* HERO — the lockup */
.hero { /* tightened */ padding: 141px 0 60px; display: flex; justify-content: center; }
.hero img { width: min(395px, 70vw); height: auto; }

/* STAGE — pinned previs frame */
#stage { position: relative; height: 480vh; }
.stage-sticky { position: sticky; top: max(126px, calc((100vh - min(41.2vw, 100vh - 230px, 698px) - 46px) / 2)); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 24px; }
.framewrap { position: relative; width: min(92vw, calc((100vh - 230px) * 2.233), 1560px); }
.frame { position: relative; width: 100%; aspect-ratio: 1346 / 603; border-radius: 46px; border: 2px solid rgba(255,255,255,.54); overflow: hidden; background: #14100B; }
.frame img.previs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.frame img.previs.on { opacity: 1; }
.cap { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 3; background: linear-gradient(180deg, rgba(20,16,11,0) 0%, rgba(20,16,11,.82) 100%); display: flex; align-items: flex-end; justify-content: space-between; padding: 0 40px 26px; }
.cap-title { font-size: clamp(20px, 2.5vw, 34px); letter-spacing: -.01em; color: var(--cream); }
.cap-tag { font-weight: 700; font-size: clamp(10px, .9vw, 12px); letter-spacing: .26em; color: var(--peach); }
.pill { position: relative; margin-top: 14px; left: auto; transform: none; z-index: 3; background: rgba(15,8,4,.45); border-radius: 999px; padding: 9px 18px; font-weight: 700; font-size: 11px; letter-spacing: .3em; color: rgba(243,236,226,.9); transition: opacity .4s; }
.pill.off { opacity: 0; }
.note { position: absolute; z-index: 2; font-family: var(--hand); font-size: clamp(16px, 1.7vw, 24px); letter-spacing: -.05em; line-height: 1.2; color: var(--cream); text-shadow: 0 2px 3px rgba(0,0,0,.35); opacity: 0; transform: translateY(8px) rotate(var(--r, -3deg)); transition: opacity .5s ease .2s, transform .5s ease .2s; text-align: center; }
.note.on { opacity: 1; transform: translateY(0) rotate(var(--r, -3deg)); }
.note svg { width: clamp(50px, 6vw, 90px); height: auto; display: block; margin: 4px auto 0; }

/* SUMMARY — the "what we do" block */
.summary { padding: 26px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.brandline { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 44px; }
.brandline img { width: 54px; height: 54px; }
.brandline span { font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .07em; color: var(--cream); }
.copyblock { max-width: 860px; opacity: .9; font-size: 17px; font-weight: 600; letter-spacing: .06em; line-height: 23px; color: #FDF4E8; margin-bottom: 34px; }
.copyblock b { font-weight: 900; color: #FFFFFF; }
.copyblock.tight { margin-bottom: 0; }
.copyblock br.mob { display: none; }
.connector { width: 2px; height: 64px; background: var(--white); opacity: .53; position: relative; margin: 14px 0 20px; }
.connector::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--white); }
.applyfor { position: relative; font-weight: 900; font-size: 20px; letter-spacing: .06em; opacity: 1; color: var(--cream); margin: -4px 0 72px; }
.applyfor::after { content: ''; position: absolute; top: calc(100% + 10px); left: 50%; margin-left: -1px; width: 2px; height: 32px; background: rgba(255,255,255,.53); }

/* CTA buttons */
.doors { position: relative; display: flex; gap: 120px; justify-content: center; flex-wrap: wrap; padding: 0 24px; }
.doors::before { content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 521px; height: 2px; background: rgba(255,255,255,.53); }
.door { position: relative; display: flex; align-items: center; justify-content: center; width: 399px; max-width: 90vw; height: 62px; border: 2px solid rgba(255,255,255,.53); border-radius: 14px; font-weight: 900; font-size: clamp(18px, 1.6vw, 23px); letter-spacing: .06em; transition: background .2s, color .2s, border-color .2s; }
.door::before { content: ''; position: absolute; top: -30px; left: 50%; margin-left: -1px; width: 2px; height: 28px; background: rgba(255,255,255,.53); }
.door:hover { background: var(--cream); color: #7E2A0E; border-color: var(--cream); }

/* MANIFESTO */
.manifesto { padding: 130px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.manifesto h2 { font-weight: 700; font-size: 23px; letter-spacing: .26em; color: var(--cream); }
.manifesto .hint { font-family: var(--hand); font-size: 22px; letter-spacing: -.06em; color: var(--cream); transform: rotate(-2deg); }
.pages { display: flex; gap: 76px; justify-content: center; flex-wrap: wrap; padding: 50px 24px 0; }
.page { width: 280px; height: 370px; background: var(--paper); border-radius: 3px; box-shadow: 0 18px 40px rgba(15,8,4,.4); padding: 26px 22px; display: flex; flex-direction: column; gap: 12px; cursor: zoom-in; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.page:nth-child(1) { transform: rotate(-4deg); } .page:nth-child(2) { transform: rotate(2deg); } .page:nth-child(3) { transform: rotate(5deg); }
.page:hover { transform: rotate(0deg) scale(1.5); box-shadow: 0 40px 80px rgba(15,8,4,.55); z-index: 5; position: relative; }
.page h3 { font-family: 'Times New Roman', serif; font-weight: 700; font-size: 15px; color: var(--ink); }
.page p { font-family: 'Times New Roman', serif; font-size: 9px; line-height: 15px; color: #574B3C; }
/* lightbox for mobile / click */
#lightbox { position: fixed; inset: 0; z-index: 99; display: none; align-items: center; justify-content: center; background: rgba(15,8,4,.8); padding: 24px; }
#lightbox.on { display: flex; }
#lightbox .sheet { background: var(--paper); max-width: 620px; max-height: 84vh; overflow: auto; padding: 48px 44px; border-radius: 4px; }
#lightbox h3 { font-family: 'Times New Roman', serif; font-size: 24px; color: var(--ink); margin-bottom: 18px; }
#lightbox p { font-family: 'Times New Roman', serif; font-size: 16px; line-height: 26px; color: #3a2f24; }

/* FOOTER */
footer { padding: 140px 24px 70px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
footer .rule { width: min(815px, 86vw); height: 2px; background: var(--cream-87); }
.socials { display: flex; gap: 44px; padding-top: 12px; flex-wrap: wrap; justify-content: center; }
.socials a { font-weight: 700; font-size: 14px; letter-spacing: .22em; color: var(--cream); opacity: .95; }
.socials a:hover { opacity: .6; }
footer .line { font-weight: 500; font-size: 14px; letter-spacing: .08em; color: rgba(243,236,226,.55); }

@media (max-width: 1000px) { .applyfor::after, .doors::before, .door::before { display: none; } .applyfor { margin-bottom: 40px; } }
@media (max-width: 900px) {
  .nav-items { gap: 34px; }
  #stage { height: 420vh; }
  .frame { border-radius: 24px; }
  .cap { padding: 0 20px 18px; height: 110px; }
  .doors { gap: 24px; }
  .pages { gap: 30px; }
  .page:hover { transform: rotate(0) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .frame img.previs, .note { transition: none; } }

.note svg { transform: translateX(var(--ax, 0)) rotate(var(--arot, 0deg)); }


/* MOBILE (phone) pass */
@media (max-width: 700px) {
  html { scroll-padding-top: 60px; }
  #nav { padding-top: 18px; }
  .nav-items { gap: 14px; padding: 0 8px; }
  .nav-items a { font-size: 10.5px; letter-spacing: .06em; font-weight: 600; white-space: nowrap; }
  .nav-rule { margin-top: 12px; }
  .nav-rule i { width: 10px; height: 10px; top: 2px; }
  .hero { padding: 100px 0 96px; }
  .hero img { width: 62vw; }
  #stage { height: 260vh; }
  .stage-sticky { top: max(170px, calc((100vh - 53vw) / 2 - 26px)); padding: 0; }
  .framewrap { width: 94vw; }
  .frame { border-radius: 16px; aspect-ratio: 1772 / 1000; }  /* uncropped stills */
  .cap { height: 74px; padding: 0 13px 10px; }
  .cap-title { font-size: 15px; }
  .cap-tag { font-size: 8px; letter-spacing: .16em; }
  .note { font-size: 15px; }
  .note svg { width: 34px; margin-top: 3px; }
  .note.ch0 { top: -24% !important; }
  .note.ch0.n0 { right: 9% !important; top: calc(-24% + 5px) !important; }
  .note.ch0.n1 { left: 7% !important; }
  .note.ch1, .note.ch2, .note.ch3 { font-size: 12px; }
  .pill { font-size: 9px; padding: 7px 14px; letter-spacing: .24em; }
  .summary { padding: 26px 18px 0; margin-top: 0; }
  .copyblock br.mob { display: inline; }
  .copyblock br.desk { display: none; }
  .copyblock.tight { margin-bottom: 18px; }
  .brandline { margin-bottom: 30px; }
  .brandline img { width: 42px; height: 42px; }
  .brandline span { font-size: 19px; }
  .copyblock { font-size: 13px; line-height: 20px; letter-spacing: .04em; margin-bottom: 24px; }
  .connector { height: 44px; }
  .applyfor { font-size: 16px; margin-bottom: 30px; }
  .door { height: 54px; font-size: 15px; border-radius: 11px; }
  .manifesto { padding-top: 80px; }
  .manifesto h2 { font-size: 17px; letter-spacing: .2em; text-align: center; }
  .manifesto .hint { font-size: 18px; }
  footer { padding: 90px 18px 50px; }
  .socials { gap: 14px 24px; }
  .socials a { font-size: 11px; letter-spacing: .14em; }
  footer .line { font-size: 11px; text-align: center; }
}

/* ============ SUB-PAGES (clubhouse + funding) — from the Paper boards ============ */
/* Full-bleed photo fixed behind everything; as you scroll it darkens + blurs under the text (the "veil").
   Accent = the brand red sampled from the texture (#7E2006) + a lighter red; no orange, no black slab. */
:root { --red: #7E2006; --red-light: #C24329; }
body.sub { background: #14100B; }
body.sub::before { display: none; }
.pagebg { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -2; background: #14100B center / cover no-repeat; }
.pageveil { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; background: rgba(20,16,11, var(--veil-a, 0)); -webkit-backdrop-filter: blur(var(--veil-b, 0px)); backdrop-filter: blur(var(--veil-b, 0px)); }
.subnav { position: absolute; top: 34px; left: 0; right: 0; z-index: 30; display: flex; justify-content: space-between; padding: 0 34px; }
.subnav a { font-weight: 700; font-size: clamp(10px, .85vw, 12px); letter-spacing: .22em; color: var(--cream); opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.subnav a:hover { opacity: 1; }

.subhero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 0 22px 13vh; }
.subhero::after { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -34vh; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,16,11,.28) 0%, rgba(20,16,11,0) 34%, rgba(20,16,11,.66) 68%, rgba(20,16,11,0) 100%); }
.subhero h1, .subhero .deck { position: relative; z-index: 2; }
.subhero h1 { font-weight: 800; font-size: clamp(34px, 5vw, 72px); line-height: 1.15; letter-spacing: -.02em; color: var(--cream); }
.subhero .deck { max-width: 1000px; margin-top: 16px; font-weight: 500; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.45; color: rgba(243,236,226,.86); }

.ground { position: relative; z-index: 1; padding-bottom: 10px; margin-top: -10vh; }
.eyebrow { font-family: var(--hand); font-weight: 700; font-size: clamp(16px, 1.4vw, 20px); letter-spacing: .23em; color: #EC6B4D; text-align: center; }

/* perks */
.perks { max-width: 1000px; margin: 0 auto; padding: 0 22px 0; }
.perks .eyebrow { margin-bottom: 34px; }
.perk { display: flex; align-items: center; justify-content: space-between; gap: 26px; padding: 17px 0; border-bottom: 1px solid rgba(243,236,226,.16); }
.perk span { font-weight: 600; font-size: clamp(15px, 1.5vw, 22px); line-height: 1.32; color: var(--cream); }
.perk em.rate { color: #E8876D; opacity: .72; }
.perk em { flex-shrink: 0; font-family: var(--hand); font-weight: 700; font-style: normal; font-size: clamp(12px, 1vw, 15px); letter-spacing: .1em; color: #EC6B4D; }

/* pricing */
.prices { max-width: 1120px; margin: 0 auto; padding: 72px 22px 0; display: flex; gap: 24px; }
.price { flex: 1; border: 1px solid rgba(243,236,226,.22); border-radius: 14px; padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; background: rgba(20,16,11,.28); color: inherit; transition: border-color .25s, box-shadow .25s, transform .25s; }
.price:hover { border-color: rgba(243,236,226,.6); box-shadow: 0 0 0 1px rgba(243,236,226,.12), 0 18px 50px rgba(0,0,0,.35); transform: translateY(-3px); }
.price.featured:hover { border-color: #E8876D; }
.price.featured { border: 2px solid var(--red-light); }
.price .tag { font-weight: 800; font-size: 12px; letter-spacing: .2em; color: rgba(243,236,226,.6); }
.price.featured .tag { color: var(--red-light); }
.price .amount { font-weight: 800; font-size: clamp(32px, 3.8vw, 54px); letter-spacing: -.02em; line-height: 1.15; color: var(--cream); }
.price .fine { font-weight: 500; font-size: clamp(14px, 1.2vw, 16.5px); line-height: 1.6; color: rgba(243,236,226,.8); }

/* buttons — flat brand red */
.cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 62px 22px 0; margin-bottom: 0; }
.btn { display: inline-block; padding: 22px 51px; border-radius: 15px; color: var(--cream); font-weight: 800; font-size: clamp(14px, 1.2vw, 16.5px); letter-spacing: .16em; text-align: center; background: var(--red-light); transition: transform .2s, filter .2s; }
.btn:hover { filter: brightness(1.18); transform: translateY(-2px); }
.btn-ghost { display: inline-block; padding: 16px 34px; border: 1.5px solid var(--red-light); border-radius: 6px; color: var(--red-light); font-weight: 800; font-size: 13px; letter-spacing: .16em; transition: background .25s, color .25s; }
.btn-ghost:hover, .btn-ghost:active { background: var(--red-light); border-color: var(--red-light); color: var(--cream); }
.scrawl { font-family: var(--hand); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.05em; color: rgba(243,236,226,.85); transform: rotate(-2deg); }

/* vertical zig-zag timeline: centre line, steps alternate sides, dots on the line, line runs into the button */
.vtl { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1fr 14px 1fr; column-gap: 44px; }
.vline { grid-column: 2; grid-row: 1 / span 3; width: 2px; justify-self: center; background: rgba(255,255,255,.42); }
.vdot { grid-column: 2; align-self: start; justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.9); margin-top: 83px; }
.vdot.r1 { grid-row: 1; } .vdot.r2 { grid-row: 2; } .vdot.r3 { grid-row: 3; }
.vstep { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 0 40px; }
.vstep.l { grid-column: 1; } .vstep.r { grid-column: 3; }
.vstep.r1 { grid-row: 1; } .vstep.r2 { grid-row: 2; } .vstep.r3 { grid-row: 3; }
.tl-month { font-family: var(--hand); font-size: clamp(19px, 1.8vw, 25px); line-height: 30px; letter-spacing: -.05em; color: #EC6B4D; }
.vstep.l .tl-month { transform: rotate(-2deg); } .vstep.r .tl-month { transform: rotate(2deg); }
.vstep h3 { font-weight: 800; font-size: clamp(19px, 2.1vw, 30px); letter-spacing: .1em; color: var(--cream); }
.vstep p { font-weight: 500; font-size: clamp(14px, 1.3vw, 18px); line-height: 1.55; color: rgba(243,236,226,.82); max-width: 460px; }
.cta-wrap.tl-end { padding-top: 0; }
.cta-wrap.tl-end::before { content: ''; width: 2px; height: 90px; background: rgba(255,255,255,.42); margin-bottom: -18px; }

/* livestream — the label is a handwritten aside, not a spaced eyebrow (so it doesn't read like another FAQ header) */
.stream { max-width: 900px; margin: 0 auto; padding: 104px 22px 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.stream .eyebrow { font-weight: 400; letter-spacing: -.05em; font-size: clamp(20px, 1.8vw, 26px); transform: rotate(-2.5deg); margin-bottom: 2px; }
.stream h2 { font-weight: 800; font-size: clamp(26px, 3vw, 42px); letter-spacing: -.02em; line-height: 1.2; color: var(--cream); }
.stream p { font-weight: 500; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; color: rgba(243,236,226,.8); }
.stream .btn-ghost { margin-top: 12px; }

/* FAQ (from the boards) */
.faq { max-width: 1000px; margin: 0 auto; padding: 0 22px 0; display: flex; flex-direction: column; }
.faq::before, .perks::before { content: ''; display: block; width: 2px; height: 85px; background: rgba(255,255,255,.45); align-self: center; margin: 0 auto 40px; }
.faq-head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.faq-head h2 { font-weight: 800; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.02em; line-height: 1.2; color: var(--cream); text-align: center; }
.qa { padding: 22px 0; border-bottom: 1px solid rgba(243,236,226,.16); text-align: center; cursor: pointer; }
.qa:last-child { border-bottom: 0; }
.qa h3 { font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.36; color: var(--cream); display: inline-flex; align-items: center; gap: 14px; transition: color .25s; }
.qa h3::after { content: '+'; font-weight: 400; font-size: 1.25em; line-height: 1; opacity: .55; transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.qa:hover h3::after { opacity: 1; }
.qa.open h3::after { transform: rotate(45deg); opacity: 1; }
.qa-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.qa-a > p { max-width: 700px; margin: 0 auto; padding-top: 12px; }
.qa.open .qa-a { opacity: 1; }
.qa p { font-weight: 500; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(243,236,226,.72); }
body.sub footer { position: relative; z-index: 1; padding-top: 28px; }

@media (min-width: 1200px) { .subnav { position: fixed; padding: 0 60px; top: 44px; } }
@media (min-width: 861px) { .vtl { padding-top: 6vh; } }
.faq::before { display: none; }
.faq { padding-top: 96px; }
@media (max-width: 860px) {
  .subnav { padding: 0 20px; top: 24px; }
  .subhero { padding-bottom: 9vh; }
  .subhero h1 { font-size: min(34px, 7.4vw); }
  .perk span { font-size: 14px; letter-spacing: -.015em; }
  .perk em { font-size: 11px; letter-spacing: .06em; }
  .perks { padding-top: 36px; }
 .prices { padding-top: 54px; } .stream { padding-top: 54px; }
  .perk { gap: 8px; padding: 14px 0; align-items: center; }
  .prices { flex-direction: column; }
  .cta-wrap { padding-top: 44px; }
  .btn { padding: 19px 31px; letter-spacing: .12em; }
  .vtl { column-gap: 18px; grid-template-columns: 14px 1fr; }
  .vline { grid-column: 1; margin-top: 34px; margin-bottom: 68px; }
  .vdot { grid-column: 1; margin-top: 63px; }
  .vstep { padding: 20px 0 27px; align-items: flex-start; text-align: left; }
  .vstep.l, .vstep.r { grid-column: 2; }
  .vstep.l .tl-month, .vstep.r .tl-month { transform: rotate(-2deg); }
  .vstep p { max-width: none; }
  .cta-wrap.tl-end { padding-top: 28px; } .cta-wrap.tl-end::before { display: none; }
  .faq { padding-top: 0; } .faq::before, .perks::before { height: 50px; margin-bottom: 26px; } .faq::before { margin-bottom: 32px; }
  .faq { padding-top: 64px; }
  .vtl { padding-top: 40px; }
  body .pagebg.shift { background-position: 42% 50%; }
}
a.inline { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(243,236,226,.45); }
a.inline:hover { text-decoration-color: var(--cream); }

/* ===== red-veil variant: remove class "red" from <body> to go back to the dark veil ===== */
body.sub.red .pageveil { background: url('../assets/bg-texture.jpg') center / cover no-repeat; opacity: var(--veil-a, 0); }
body.sub.red { --red-light: var(--peach); }
body.sub.red .btn { background: transparent; border: 2px solid rgba(243,236,226,.7); color: var(--cream); }
body.sub.red .btn:hover { background: var(--cream); color: #7E2A0E; border-color: var(--cream); filter: none; }
body.sub.red .btn-ghost { border-color: rgba(243,236,226,.55); color: var(--cream); }
body.sub.red .btn-ghost:hover { background: var(--cream); color: #7E2A0E; border-color: var(--cream); }
body.sub.red .price { background: rgba(20,16,11,.18); }
body.sub.red .price.featured { border-color: var(--cream); }
body.sub.red .price.featured .tag { color: var(--peach); }
body.sub.red .vdot { background: var(--cream); }
body.sub.red .perk em.rate { color: var(--peach); opacity: .62; }
/* misc */
.pagebg.shift { background-position: 34% 50%; }
.starmark { display: block; width: 34px; height: 34px; margin: 22px auto 0; background: var(--cream); -webkit-mask: url('../assets/star.png') center / contain no-repeat; mask: url('../assets/star.png') center / contain no-repeat; opacity: .9; }

/* ============ APPLY PAGES ============ */
.apply { max-width: 720px; margin: 0 auto; padding: 150px 22px 90px; }
.apply h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 64px); letter-spacing: -.02em; line-height: 1.12; color: var(--cream); }
.apply .deck { margin-top: 16px; font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); line-height: 1.5; color: rgba(243,236,226,.82); max-width: 600px; }
.apply .scrawl { display: inline-block; margin-top: 14px; }
form.app { margin-top: 54px; display: flex; flex-direction: column; gap: 26px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-weight: 800; font-size: 12px; letter-spacing: .2em; color: rgba(243,236,226,.62); }
.field label b { font-weight: 800; color: #EC6B4D; }
.field small { font-weight: 500; font-size: 13px; color: rgba(243,236,226,.5); margin-top: -3px; }
.field input, .field textarea, .field select { font: inherit; font-weight: 500; font-size: 17px; color: var(--cream); background: rgba(243,236,226,.06); border: 1px solid rgba(243,236,226,.22); border-radius: 10px; padding: 15px 16px; outline: none; transition: border-color .2s, background .2s; width: 100%; -webkit-appearance: none; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: rgba(243,236,226,.6); background: rgba(243,236,226,.09); }
.field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.field select { background-image: linear-gradient(45deg, transparent 50%, rgba(243,236,226,.6) 50%), linear-gradient(135deg, rgba(243,236,226,.6) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field select option { color: #16100A; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
form.app .btn { align-self: flex-start; margin-top: 10px; border: 0; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.thanks { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 120px 22px 60px; gap: 16px; }
.thanks h1 { font-weight: 800; font-size: clamp(34px, 4.4vw, 64px); letter-spacing: -.02em; color: var(--cream); }
.thanks p { font-weight: 500; font-size: clamp(15px, 1.3vw, 19px); color: rgba(243,236,226,.8); max-width: 520px; line-height: 1.5; }
.thanks .btn-ghost { margin-top: 18px; }
@media (max-width: 700px) { .row2 { grid-template-columns: 1fr; } .apply { padding-top: 110px; } form.app .btn { align-self: stretch; } }

/* VSL placeholder (funding) */
.vsl { max-width: 860px; margin: 0 auto; padding: 0 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vsl .scrawl { transform: rotate(-2deg); }
.vsl-box { width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; border: 2px solid rgba(243,236,226,.35); background: rgba(20,16,11,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: rgba(243,236,226,.55); }
.vsl-box .play { width: 62px; height: 62px; border-radius: 50%; border: 2px solid rgba(243,236,226,.45); display: grid; place-items: center; }
.vsl-box .play::after { content: ''; margin-left: 5px; border-left: 18px solid rgba(243,236,226,.7); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.vsl-box span { font-weight: 800; font-size: 12px; letter-spacing: .24em; }
@media (max-width: 700px) { .vsl-box { border-radius: 12px; } .vsl-box .play { width: 46px; height: 46px; } }