/* =====================================================================
   bytonyacall.com — overrides on top of the Helen template kit
   Helen's layout and components stay as
   shipped. Type is swapped to her Instagram look (Playfair Display + Jost), orange becomes cranberry, both
   themes follow the cover palette (light is the default), plus the few
   custom pieces (cover cards, buy chips, launch state, email forms).
   ===================================================================== */

/* ---------- type: matched to her Instagram grid ----------
   High-contrast serif with italic emphasis, spaced caps for labels,
   plain sans for reading text. Helen's Phudu / Instrument Sans are
   replaced through the two variables its stylesheet now reads. */
:root {
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', 'Instrument Sans', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-weight: 500; letter-spacing: 0; }
.hname { font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: 1.04; }
.hrole { font-style: italic; font-weight: 400; font-size: clamp(1.15rem, 2.2vw, 1.7rem); letter-spacing: 0; }
.hgreet, .stag, .exlbl, .tlyr, .pfcat, .dlbl, .ctlbl, .hcl, .abbl, .scrltxt, .pre-sub { font-family: var(--font-body); letter-spacing: .18em; }
.stitle, .stitles { font-weight: 500; letter-spacing: -.005em; line-height: 1.08; font-size: clamp(2.1rem, 4vw, 3.3rem); }
.stitle em, .stitles em { font-style: italic; font-weight: 600; }
.stitle span, .stitles span { font-style: italic; }
.nlogo, .ftlogo, .pre-mark { font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 1.05rem; }
.ftlogo { font-size: 1.3rem; }
.nlogo em, .ftlogo em { font-style: normal; }
.pre-n { font-weight: 500; letter-spacing: 0; }
.hwm, .bgn, .tstdq, .svbgn { font-weight: 600; letter-spacing: -.02em; }
.mqit { font-family: var(--font-body); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.tlrole, .edudeg, .pfttl, .svnm, .sbttl, .modal-title { font-weight: 500; letter-spacing: 0; }
.tlrole { font-size: 1.25rem; line-height: 1.3; }
.svnm { font-size: 1.3rem; }
.pfttl { font-size: 1.2rem; }
.ctemail { font-weight: 500; letter-spacing: 0; text-transform: none; font-size: clamp(1.2rem, 2.6vw, 1.9rem); }
.abbn, .hcv, .astn { font-weight: 600; letter-spacing: 0; }
#mob a { font-weight: 500; letter-spacing: .02em; }
.btd, .bto, .bta, .hirebtn, .chip, .pftag, .sktab, .pfbtn, .nlinks a, .form-control, .form-label { font-family: var(--font-body); }
.btd, .bto, .bta, .hirebtn { font-weight: 500; letter-spacing: .04em; }
.abbio, .hdesc, .sdesc, .tlp, .svdesc { font-weight: 300; }
.abbio strong { font-weight: 500; }

/* ---------- palette ---------- */
:root {
  --ac: #9B3140;            /* cranberry replaces Helen's #FF4D1C */
  --ac2: 155, 49, 64;
  --ac-deep: #7A2432;
  --gold: #C8A275;
  --dark: #1B1E1E;          /* preloader, marquee, quote band, footer (light theme) */

  /* light theme = the brief's cover palette */
  --bg: #FDFBF5;
  --bg2: #F4EFE6;
  --bg3: #EAE2D4;
  --card: #FFFFFF;
  --text: #2A2522;
  --text2: #544C39;
  --text3: #6B6455;   /* 5:1 on the shaded ground for the small labels */
  --border: #E4DCCB;
  --nav: rgba(253, 251, 245, .95);
}
[data-theme=dark] {
  --bg: #0E1010;            /* Helen's near-black, in the cover's warm-neutral hue */
  --bg2: #151818;
  --bg3: #1E2222;
  --card: #151818;
  --text: #FDFBF5;          /* cover cream */
  --text2: #C9C2B5;
  --text3: #6F6A5F;
  --border: #262B2B;
  --nav: rgba(14, 16, 16, .95);
}
[data-theme=dark] #mob,
[data-theme=dark] .mqsec,
[data-theme=dark] .tstsec,
[data-theme=dark] #footer { background: #090B0B; }

/* Helen hard-codes a few oranges / greens; bring them onto the palette */
.bta:hover { background: var(--ac-deep); }
.skfill { background: linear-gradient(90deg, var(--ac), var(--gold)); }
.avail { color: var(--ac); background: rgba(var(--ac2), .12); border-color: rgba(var(--ac2), .3); }
[data-theme=dark] .avail { color: #E6A8B1; }
.adot { background: var(--ac); box-shadow: 0 0 8px rgba(var(--ac2), .7); }
.tststars { display: none; }
.stag--ondark { background: rgba(var(--ac2), .22); color: #E6A8B1; }

/* ---------- launch state switch ---------- */
html[data-launch="pre"]  [data-show="live"] { display: none !important; }
html[data-launch="live"] [data-show="pre"]  { display: none !important; }
.pending-note { font-size: .8rem; color: var(--text3); margin: -22px 0 26px; }

/* ---------- sections that reuse Helen's section styles ---------- */
#book, #author, #podcast { padding: 120px 0; background: var(--bg); }
#inside, #books, #stay, #live { padding: 120px 0; background: var(--bg2); }
#books { background: var(--bg); }
#stay { background: var(--bg2); }
.tstsec { padding: 120px 0; background: var(--dark); position: relative; overflow: hidden; }
.abcnt--left { padding-left: 0; padding-right: 40px; }
@media (max-width: 991px) { .abcnt--left { padding-right: 0; margin-top: 0; margin-bottom: 40px; } }

/* hero: bigger portrait than Helen ships, cover thumbnail card instead of a stat card */
.hblob { max-width: 500px; }
.hblob img { object-position: 50% 20%; }
.hcard.c1 { left: -18px; bottom: 9%; }
.hcard.c2 { right: -10px; top: 9%; }
.hcard--cover { padding: 8px; }
.hcard--cover img { width: 104px; height: auto; border-radius: 6px; display: block; }
.hwm { letter-spacing: -.04em; }
@media (min-width: 992px) and (max-width: 1199px) { .hblob { max-width: 420px; } }
/* Helen hides the portrait under 992px; Tonya's shows on every size, stacked under the text */
@media (max-width: 991px) {
  #hero { min-height: 0; padding: 96px 0 64px; }
  #hero .row { flex-direction: column; }
  .hzone { display: block; order: -1; max-width: 430px; margin: 0 auto 34px; padding: 0 30px; }   /* portrait first on phones */
  .hblob { max-width: 370px; }
  .hcard.c1 { left: 6px; bottom: 6%; }
  .hcard.c2 { right: 6px; top: 6%; }
  .hbtns { margin-bottom: 28px; }
  .scrl { display: none; }
}
@media (max-width: 575px) {
  .hzone { padding: 0 18px; margin-bottom: 28px; }
  .hblob { max-width: 300px; }
  .hcard--cover img { width: 84px; }
  .hcard { padding: 10px 14px; }
  .hcv { font-size: 1.5rem; }
}

/* the book: the cover is a real object, not a cropped photo */
.abwrap--cover { text-align: center; }
.abimg--cover { height: auto; width: min(100%, 380px); margin: 0 auto; border-radius: 6px; box-shadow: var(--s3); }
.abwrap--cover .abbadge { right: 4%; bottom: -14px; }
@media (max-width: 991px) {
  /* on phones the badge sits under the cover instead of over the author's name */
  .abwrap--cover .abbadge { position: static; display: inline-block; margin: 16px auto 0; padding: 12px 20px; }
  .abwrap--cover .abbadge .abbn { font-size: 1.9rem; }
  .abwrap { margin-bottom: 8px; }
}
.abimg { object-position: 50% 22%; }
.abbadge--quote .abbn { font-size: 2.4rem; }

/* buy component */
.buy { margin-bottom: 26px; }
.buy .exlbl { margin-bottom: 12px; }
.buy .chips { margin-bottom: 0; }
a.chip { cursor: pointer; color: var(--text); }
a.chip[aria-disabled="true"] { opacity: .45; border-style: dashed; pointer-events: none; }

/* event card and book card images */
.pfcard--event, .pfcard--book { cursor: default; }
.pfcard--event .pfimgbox img { object-position: 50% 20%; }
.pfimgbox--white { background: #fff; padding: 26px; }
.pfimgbox--white img { object-fit: contain; }
.pfcard--event:hover, .pfcard--book:hover { transform: none; box-shadow: var(--s2); }
.pfcard--event:hover .pfimgbox img, .pfcard--book:hover .pfimgbox img { transform: none; }
.evline { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; font-weight: 400; color: var(--text) !important; line-height: 1.4; }

/* pull-quote band */
.tstcard .tsttxt { font-size: 1.45rem; font-style: normal; font-family: var(--font-display); font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: rgba(255, 255, 255, .92); }
.tstav { object-position: 50% 20%; }

/* forms (Helen inputs + a row layout) */
.form__row { display: flex; gap: 10px; align-items: stretch; }
.form__row .form-control { flex: 1 1 auto; min-width: 0; }
.bta--auto { width: auto; }
.form__note { font-size: .78rem; color: var(--text3); margin: 0; }
.form__thanks { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ac); margin: 8px 0 0; }
[data-theme=dark] .form__thanks { color: var(--gold); }
.form-control[aria-invalid="true"] { border-color: var(--ac); }
.form--inline { margin-top: 8px; max-width: 520px; }
#stay .ctval a:hover { color: var(--ac); }
@media (max-width: 575px) { .form__row { flex-direction: column; } .bta--auto { width: 100%; } }

/* motion: respect reduced-motion for the template's loops */
@media (prefers-reduced-motion: reduce) {
  .noise, .mqtrack, .hcard.c1, .hcard.c2, .adot, .scrlbar { animation: none !important; }
}

/* ---------- mobile menu: hamburger toggles and shows an X while open ---------- */
.ham { position: relative; z-index: 999; }
.ham span { transition: transform .3s, opacity .2s; }
.ham.on { background: rgba(255, 255, 255, .08); }
.ham.on span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: #fff; }
.ham.on span:nth-child(2) { opacity: 0; }
.ham.on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: #fff; }
body.menu-open { overflow: hidden; }
#mob { padding: 90px 24px 40px; }

/* ---------- accessibility: contrast for the small stuff ---------- */
.mqit { color: rgba(255, 255, 255, .62); }
.tstrole { color: var(--gold); }
.bgn::before { content: attr(data-n); }
.ftnav a { color: rgba(255, 255, 255, .72); }
.ftcopy { color: rgba(255, 255, 255, .6); }
.ftcopy em { color: var(--gold); }

/* quote slider dots: a finger-sized tap target */
.swiper-pagination-bullet { width: 12px; height: 12px; margin: 0 8px !important; position: relative; }
.swiper-pagination-bullet::after { content: ""; position: absolute; inset: -8px; }
.swiper-pagination-bullet-active { width: 28px; }
