/* ============================================================
   subscribe.css — Subscribe page
   Relies on styles.css (tokens, fonts, .logo, .btn) + sector.css (sp-nav, sp-footer)
   ============================================================ */

.sub-main{max-width:1240px;margin:0 auto;padding:clamp(148px,16vh,168px) clamp(20px,5vw,56px) clamp(60px,8vw,110px)}

/* ---------- Hero: copy + cover ---------- */
.sub-hero{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(24px,3.5vw,56px);align-items:start}
.sub-hero__eyebrow{font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.sub-hero__title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(40px,6.4vw,84px);line-height:.98;margin-bottom:24px}
.sub-hero__title em{color:var(--gold-soft);font-style:normal;text-transform:none}
.sub-hero__lead{max-width:48ch;color:#fff;font-weight:300;font-size:clamp(15px,1.5vw,18px);line-height:1.75;margin-bottom:28px}
.sub-hero__tags{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.sub-hero__tags span{position:relative}
.sub-hero__tags span:not(:last-child)::after{content:"·";margin-left:18px;color:var(--gold)}

.sub-hero__cover{position:relative;display:flex;justify-content:center}
.sub-hero__cover img{width:min(640px,100%);height:auto;border-radius:4px;
  box-shadow:0 40px 90px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.5);
  transform:perspective(1600px) rotateY(-4deg);transition:transform .8s cubic-bezier(.16,1,.3,1)}
.sub-hero__cover:hover img{transform:perspective(1600px) rotateY(0deg)}
.sub-hero__cover::after{content:"";position:absolute;inset:auto 0 -30px 0;height:60px;
  background:radial-gradient(60% 100% at 50% 0,rgba(201,165,92,.18),transparent 70%)}

/* ---------- Plans ---------- */
.sub-plans{margin-top:clamp(48px,5.5vw,76px)}
.sub-plans__head{text-align:center;margin-bottom:48px}
.sub-plans__head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,3vw,40px);letter-spacing:-.01em}
.sub-plans__head p{color:var(--ink-dim);font-weight:300;margin-top:12px}
.sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2vw,28px);max-width:920px;margin:0 auto}
.plan{position:relative;border:1px solid var(--line);border-radius:8px;padding:clamp(28px,3.4vw,46px);
  background:linear-gradient(180deg,rgba(36,28,19,.5),rgba(20,16,11,.2));transition:border-color .4s,transform .4s}
.plan:hover{transform:translateY(-4px)}
.plan--featured{border-color:rgba(201,165,92,.5);
  background:radial-gradient(120% 90% at 50% 0,rgba(201,165,92,.12),transparent 60%),linear-gradient(180deg,var(--bg-3),var(--bg-2))}
.plan__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--gold);color:#1a1408;font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;padding:6px 16px;border-radius:40px}
.plan__name{font-family:var(--display);font-weight:500;text-transform:uppercase;font-size:clamp(20px,2vw,26px);letter-spacing:.02em}
.plan__price{margin:18px 0 6px;font-family:var(--display);font-weight:300;font-size:clamp(34px,4vw,52px);color:var(--ink)}
.plan__price small{font-size:14px;color:var(--ink-dim);letter-spacing:.04em;font-family:var(--sans);margin-left:6px}
.plan__note{color:var(--ink-dim);font-size:13px;margin-bottom:26px}
.plan__list{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:13px}
.plan__list li{position:relative;padding-left:26px;color:var(--ink);font-weight:300;font-size:14.5px;line-height:1.5;opacity:.92}
.plan__list li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:5px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.plan .btn{width:100%;justify-content:center}
@media(max-width:760px){.sub-hero{grid-template-columns:1fr}.sub-hero__cover{order:-1;margin-bottom:20px}.sub-grid{grid-template-columns:1fr}}

/* ---------- Email capture ---------- */
.sub-form-wrap{max-width:620px;margin:clamp(70px,9vw,110px) auto 0;text-align:center;
  border-top:1px solid var(--line);padding-top:clamp(50px,7vw,80px)}
.sub-form-wrap h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,2.4vw,30px);margin-bottom:12px}
.sub-form-wrap p{color:var(--ink-dim);font-weight:300;margin-bottom:28px}
.sub-form{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.sub-form input{flex:1;min-width:240px;background:transparent;border:1px solid var(--line);color:var(--ink);
  padding:16px 20px;border-radius:40px;font-family:var(--sans);font-size:14px;letter-spacing:.04em}
.sub-form input:focus{outline:none;border-color:var(--gold)}
.sub-form .note{flex-basis:100%;margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim)}

/* ---- intermediate purchase-flow state ----
   Larger logo, right-hand nav removed (see subscribe.html). */
/* intermediate nav inherits the equidistant base padding (equal top & side inset) */
.sp-nav--intermediate .sp-nav__brand .logo{height:clamp(43px,5.1vw,62px)}
.sp-nav--intermediate.scrolled .sp-nav__brand .logo{height:clamp(35px,4vw,48px)}

/* ---- CTA buttons — brand terracotta (#BE4A44), scoped to the subscribe page ---- */
.sub-main .btn--solid{background:#BE4A44;color:#fff}
.sub-main .btn--solid:hover{background:#d05e57}
.sub-main .btn--ghost{border-color:#BE4A44;color:#BE4A44}
.sub-main .btn--ghost:hover{border-color:#BE4A44;color:#a03d37;background:rgba(190,74,68,.10)}

/* ---- footer logo equidistant from the edges (equal inset, like the header) ---- */
.sp-footer{padding:clamp(20px,5vw,56px)}

/* ---- hero flipbook (same animated magazine as the homepage) ---- */
.sub-hero__cover{align-self:start}
.sub-hero__cover::after{display:none}                       /* drop the old cover glow */
.sub-hero__cover .hero__visual{height:clamp(410px,52vh,520px);width:100%;margin:0}
.sub-hero__cover .flipbook{filter:drop-shadow(0 16px 30px rgba(0,0,0,.5))}
/* the flipbook uses curated full-bleed pages (see subscribe.html) so there are no
   white page margins to show; the dark page background keeps the flip fold/corners
   clean against the dark hero */
.sub-hero__cover .flipbook .page{background:#0f0b07}
/* bleed each page image ~1px past its edges so object-fit's sub-pixel rounding
   never leaves a dark hairline at the spine on fractional-width screens */
.sub-hero__cover .flipbook .page__img{width:calc(100% + 2px);margin-left:-1px}
.sub-hero__cover .flip-ui{padding-top:22px}
.sub-hero__cover .flip-ui__btn{border-color:rgba(240,235,225,.28);color:var(--gold-soft)}
.sub-hero__cover .flip-ui__btn:hover{background:#BE4A44;color:#fff;border-color:#BE4A44}
.sub-hero__cover .flip-ui__count{color:rgba(240,235,225,.55)}
@media(max-width:1024px){.sub-hero__cover .hero__visual{height:auto}}

/* ---- uniform gold accents → brand terracotta (#BE4A44) ---- */
.sub-hero__eyebrow{color:#BE4A44}
.sub-hero__title em{color:#BE4A44}                                   /* brand red accent for the title */
.sub-hero__tags span:not(:last-child)::after{color:#BE4A44}
.sub-hero__cover::after{background:radial-gradient(60% 100% at 50% 0,rgba(190,74,68,.20),transparent 70%)}
.plan--featured{border-color:rgba(190,74,68,.5);
  background:radial-gradient(120% 90% at 50% 0,rgba(190,74,68,.12),transparent 60%),linear-gradient(180deg,var(--bg-3),var(--bg-2))}
.plan__badge{background:#BE4A44;color:#fff}
.plan__list li::before{border-color:#BE4A44}
.sub-form input:focus{border-color:#BE4A44}