/* ==========================================================================
   Brand Lucid — stylesheet
   Type: Marcellus (headlines, amber) + Roboto 375 (body, white, 18px/1.55)
   Structure: tokens → backdrop → layout → hero → type → offers → form → closing
   Images from ../images/. Both faces come from Google Fonts; nothing self-hosted.
   ========================================================================== */

:root{
  --bg:#0b0a10;
  --panel:rgba(19,16,13,0.82);
  --panel-border:rgba(232,168,104,0.34);
  --panel-border-strong:rgba(232,168,104,0.62);

  /* amber replaced the older browner gold (#c9a24b) throughout */
  --amber:#E8A868;
  --amber-bright:#F0BC85;
  --amber-line:rgba(232,168,104,0.5);

  --ink:#ffffff;
  --ink-dim:#B7AC97;
  /* the same hue and saturation, +2 points of lightness — used only inside
     the form, where the labels sit over the tarot art */
  --ink-form:#BBB19D;
  --danger:#d98a7a;
  --shadow:0 30px 70px rgba(0,0,0,0.55);

  --display:'Marcellus', Georgia, 'Times New Roman', serif;
  --body:'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* anything sitting directly on the dunes needs this to stay legible */
  --float-shadow:0 2px 16px rgba(0,0,0,0.92), 0 0 42px rgba(11,10,16,0.85);
}

*{box-sizing:border-box;}

html{
  background:var(--bg);
}
html, body{
  margin:0;
  color:var(--ink);
  font-family:var(--body);
  font-weight:375;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body{position:relative;}

/*
  The dune backdrop. `position: fixed` pins it to the viewport with no JS and
  covers every scroll depth. Two things to preserve here: the page background
  lives on `html` only — a background on `body` paints over this layer — and
  the veil stays light enough that the dunes actually read.
*/
.bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.bg-fixed{
  position:absolute;
  inset:0;
  background-image:url("../images/dunes.webp");
  background-size:cover;
  background-position:center;
  filter:brightness(1.15) saturate(1.05) contrast(1.15);
}
.bg-veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(130% 75% at 50% 20%, rgba(11,10,16,0.05) 0%, rgba(11,10,16,0.20) 65%, rgba(11,10,16,0.34) 100%),
    linear-gradient(180deg, rgba(11,10,16,0.10) 0%, rgba(11,10,16,0.18) 50%, rgba(11,10,16,0.28) 100%);
}

main{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:clamp(28px,6vw,64px) clamp(16px,5vw,24px) 96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(30px,6vw,54px);
}

/* --------------------------------------------------------------------------
   Panels — used for long-form copy. Short copy floats bare on the dunes
   instead, which is what gives the page its rhythm.
   -------------------------------------------------------------------------- */
.panel{
  width:100%;
  background:var(--panel);
  border:1px solid var(--panel-border);
  box-shadow:var(--shadow);
  padding:clamp(24px,5vw,44px);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  /* lets .declaration size itself against the panel, not the viewport,
     so the sentence spans edge to edge at every width */
  container-type:inline-size;
}

/* --------------------------------------------------------------------------
   Hero — unchanged from v1 apart from the accent colour
   -------------------------------------------------------------------------- */
.hero-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,4vw,28px);
  padding-top:clamp(20px,4vw,32px);
}
.hero-frame{
  position:relative;
  padding:10px;
  border:1px solid var(--panel-border-strong);
  max-width:420px;
  width:100%;
}
.hero-frame::before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(232,168,104,0.28);
  pointer-events:none;
}
.hero-frame img{display:block;width:100%;height:auto;}

.banner-frame{width:100%;max-width:520px;}
.banner-frame img{display:block;width:100%;height:auto;}

.welcome-line{
  font-family:var(--body);
  font-weight:375;
  font-size:20px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  margin:0;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

/* the page's one h1 — all caps, measure held just inside the panel width
   so it breaks to two lines with roughly an inch of air either side */
.section-heading{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.5rem,4.4vw,2.55rem);
  line-height:1.26;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-align:center;
  color:var(--amber);
  /* no text-wrap:balance here — balancing shortens every line, and this
     headline is meant to run nearly the full measure inside its inset */
  margin:0;
  padding:0 clamp(8px,7vw,92px);   /* ~an inch of air at desktop */
  text-shadow:var(--float-shadow);
}

/* one word inside the h1, lit up */
.glow{
  color:#fff;
  text-shadow:
    0 0 14px rgba(255,255,255,0.8),
    0 0 34px rgba(255,255,255,0.45),
    0 0 70px rgba(255,255,255,0.22),
    0 2px 16px rgba(0,0,0,0.9);
}

/* section titles — always free-floating on the dunes, never in a panel */
.free-header{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,4vw,2.05rem);
  line-height:1.28;
  letter-spacing:0.07em;
  text-transform:uppercase;
  text-align:center;
  color:var(--amber);
  margin:0;
  text-shadow:var(--float-shadow);
}

/* the positioning line, set apart from everything else */
.category-line{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem,3.4vw,1.75rem);
  line-height:1.4;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-align:center;
  color:var(--amber);
  margin:0;
  max-width:22ch;
  text-shadow:var(--float-shadow);
}

/* body copy */
.prose{
  font-family:var(--body);
  font-weight:375;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  max-width:62ch;
  margin:0 auto;
}
.prose + .prose{margin-top:1.15em;}
.prose-tight{line-height:1.4;}

/* a phrase lifted out of a paragraph, letting the sentence continue below.
   Also the register for the positioning subhead under the h1. */
.lead-line{
  font-family:var(--body);
  font-weight:375;
  font-size:28px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 0.55em;
}

/* the positioning line, sitting under the h1 in the same white caps register */
.subhead{
  font-family:var(--body);
  font-weight:375;
  font-size:clamp(15px,2.6vw,19px);
  letter-spacing:0.12em;
  line-height:1.5;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  margin:0;
  max-width:34ch;
  text-shadow:var(--float-shadow);
}
.subhead strong{font-weight:600;}
.subhead em{font-style:italic;opacity:0.85;}

/* headline treatment for a single sentence set to span its panel edge to edge */
.declaration{
  font-family:var(--display);
  font-weight:400;
  /* 8.15cqi renders 58px against the 712px column. Kept in cqi rather than a
     fixed px so it still scales down with the container on small screens. */
  font-size:8.15cqi;
  line-height:1.12;
  letter-spacing:0.012em;
  text-align:center;
  white-space:nowrap;
  color:var(--amber);
  margin:0.65em 0;
  padding:0 2%;
}
@media (max-width:560px){
  .declaration{white-space:normal;font-size:12cqi;line-height:1.2;}
}

/* qualification bullets */
.qual-list{
  margin:0;
  padding:0 0 0 26px;
  list-style:none;
  max-width:62ch;
}
.qual-list li{
  position:relative;
  font-family:var(--body);
  font-weight:375;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:1.05em;
}
.qual-list li:last-child{margin-bottom:0;}
.qual-list li::before{
  content:"\2726";
  position:absolute;
  left:-26px;
  top:0.1em;
  font-size:0.8em;
  color:var(--amber);
}

/* the bonus line inside offer 3, lifted into the display face */
.bonus{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2.6vw,1.32rem);
  line-height:1.4;
  letter-spacing:0.02em;
  color:var(--amber);
  margin:22px 0 0;
  max-width:52ch;
}

/* inline emphasis, tuned for Roboto at weight 375 */
.prose strong, .offer-body strong, .qual-list strong{font-weight:600;}
.prose em, .offer-body em, .qual-list em{font-style:italic;}

/* the belonging ladder — lines set tight, with one real break before the close */
.ladder .prose + .prose{margin-top:1.15em;}
.ladder .prose.tight-to-next{margin-bottom:0;}
.ladder .prose.tight-to-next + .prose{margin-top:0.2em;}
.ladder .prose.after-break{margin-top:1.9em;}

.closing-line{color:var(--amber);font-weight:500;}

/* copy with no panel behind it — short, punchy lines only */
.float-copy{width:100%;}
.float-copy .prose{text-shadow:var(--float-shadow);}
.float-copy .prose + .prose{margin-top:0.9em;}

/* --------------------------------------------------------------------------
   Offers — hairline rows that expand. Native <details>, so they work with
   JavaScript disabled and announce correctly to screen readers.
   -------------------------------------------------------------------------- */
.offers{width:100%;border-top:1px solid var(--amber-line);}
.offer{border-bottom:1px solid var(--amber-line);}
.offer summary{list-style:none;}
.offer summary::-webkit-details-marker{display:none;}

.offer-toggle{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:26px 4px;
  cursor:pointer;
  text-align:left;
}
.offer-toggle:hover .offer-title{color:var(--amber-bright);}
.offer-toggle:focus-visible{outline:1px solid var(--amber);outline-offset:4px;}

.offer-num{
  font-family:var(--display);
  font-size:1.05rem;
  line-height:1.5;
  color:var(--amber);
  opacity:0.8;
  flex:0 0 auto;
}
.offer-main{flex:1 1 auto;min-width:0;display:block;}
.offer-title{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.08rem,2.8vw,1.42rem);
  line-height:1.3;
  letter-spacing:0.045em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 8px;
  transition:color 0.2s ease;
}
.offer-title .sub{opacity:0.72;}
.offer-teaser{
  display:block;
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  opacity:0.9;
  margin:0;
}
.offer-sign{position:relative;width:16px;height:16px;margin-top:8px;flex:0 0 auto;}
.offer-sign::before,
.offer-sign::after{
  content:"";
  position:absolute;
  background:var(--amber);
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.offer-sign::before{left:0;top:7px;width:16px;height:1px;}
.offer-sign::after{left:7px;top:0;width:1px;height:16px;}
.offer[open] .offer-sign::after{transform:rotate(90deg);opacity:0;}

.offer-body{padding:0 4px 30px 0;}
.offer-body .prose{font-size:16px;line-height:1.6;max-width:60ch;margin:0;}
.offer-body .prose + .prose{margin-top:1em;}
.offer-meta{
  font-family:var(--body);
  font-weight:500;
  font-size:0.76rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--amber);
  margin:20px 0 0;
}
.offer-sessions{margin:16px 0 0;padding:0;list-style:none;}
.offer-sessions li{
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  padding:10px 0 10px 16px;
  border-left:1px solid var(--amber-line);
  margin-bottom:8px;
}
.offer-list{margin:14px 0 0;padding:0 0 0 18px;color:var(--ink);}
.offer-list li{font-size:16px;line-height:1.6;margin-bottom:6px;}
.offer-list li::marker{color:var(--amber);}

/* --------------------------------------------------------------------------
   Selected work — the device mockup, floating with no frame
   -------------------------------------------------------------------------- */
.work-figure{
  margin:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.work-figure img{display:block;width:100%;height:auto;}
.work-figure figcaption{
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  text-align:center;
  max-width:46ch;
  text-shadow:var(--float-shadow);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn{
  font-family:var(--body);
  font-size:0.95rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-weight:500;
  color:#1a1409;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber));
  border:1px solid var(--amber-bright);
  padding:16px 40px;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  box-shadow:0 8px 30px rgba(232,168,104,0.26);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(232,168,104,0.4);filter:brightness(1.05);}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.btn:disabled{opacity:0.55;cursor:not-allowed;transform:none;}
.btn-block{width:100%;}
a.btn:visited{color:#1a1409;}

/* --------------------------------------------------------------------------
   Form — structure unchanged from v1
   -------------------------------------------------------------------------- */
#apply.panel{
  position:relative;
  background-image:
    linear-gradient(rgba(19,16,13,0.46), rgba(19,16,13,0.46)),
    url("../images/illustration.webp");
  background-size:cover;
  background-position:center 15%;
}
.form-panel h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.4rem,3.6vw,2rem);
  letter-spacing:0.06em;
  color:var(--amber);
  text-align:center;
  margin:0 0 8px;
  text-transform:uppercase;
}
.form-panel > p.lede{
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  text-align:center;
  color:var(--ink-form);
  margin:0 0 clamp(24px,4vw,34px);
}

form{display:flex;flex-direction:column;gap:22px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:520px){.grid-2{grid-template-columns:1fr;}}

label{
  display:block;
  font-family:var(--body);
  font-weight:400;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:8px;
}
.req{color:var(--amber);}

input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea{
  width:100%;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(232,168,104,0.3);
  color:var(--ink);
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  padding:12px 14px;
  transition:border-color 0.2s ease, background 0.2s ease;
}
textarea{min-height:96px;resize:vertical;line-height:1.6;}
input::placeholder, textarea::placeholder{color:rgba(183,172,151,0.55);}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--amber);
  background:rgba(0,0,0,0.4);
}
input.touched:invalid, textarea.touched:invalid{border-color:var(--danger);}

fieldset{border:1px solid rgba(232,168,104,0.3);padding:18px 16px;margin:0;}
fieldset legend{
  font-family:var(--body);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:0 8px;
}
.check-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  /* column-major: the first four run down the left, the rest down the right */
  grid-auto-flow:column;
  grid-template-rows:repeat(4,auto);
  gap:12px 18px;
}
@media (max-width:520px){
  .check-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;}
}
.check-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:15px;
  line-height:1.45;
  color:var(--ink);
}
.check-item input{
  width:18px;height:18px;flex:0 0 18px;margin-top:2px;
  accent-color:var(--amber);
  background:transparent;
}

.field-note{font-size:0.82rem;color:var(--ink-dim);margin-top:6px;}
/* form labels lifted slightly so they read over the illustration */
#apply label,
#apply fieldset legend,
#apply .field-note{color:var(--ink-form);}
#apply input::placeholder,
#apply textarea::placeholder{color:rgba(187,177,157,0.58);}

#referral-wrap{display:none;}
#referral-wrap.show{display:block;}

.status-msg{
  font-size:0.92rem;
  padding:12px 14px;
  border:1px solid transparent;
  display:none;
}
.status-msg.show{display:block;}
.status-msg.error{border-color:rgba(217,138,122,0.5);color:var(--danger);background:rgba(217,138,122,0.08);}
.status-msg.info{border-color:rgba(232,168,104,0.4);color:var(--amber);background:rgba(232,168,104,0.08);}

.success-state{text-align:center;padding:30px 10px;}
.success-state h3{
  font-family:var(--display);
  font-weight:400;
  color:var(--amber);
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:1.3rem;
  margin:0 0 12px;
}
.success-state p{font-family:var(--body);font-weight:375;color:var(--ink);line-height:1.6;}

/* --------------------------------------------------------------------------
   Closing
   -------------------------------------------------------------------------- */
.closing-art{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
}
.closing-art img{
  display:block;
  height:200px;
  width:auto;
  border:1px solid var(--panel-border-strong);
  padding:6px;
  background:rgba(11,10,16,0.35);
  filter:brightness(1.2);
}
.closing-art figcaption{
  font-family:var(--body);
  font-weight:375;
  font-style:italic;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  text-align:center;
  max-width:34ch;
  text-shadow:var(--float-shadow);
}

.closing-mark{color:var(--amber);font-size:1.4rem;letter-spacing:0.5em;opacity:0.6;}

.site-footer{width:100%;text-align:center;}
.site-footer p{
  font-family:var(--body);
  font-weight:375;
  font-size:13px;
  letter-spacing:0.04em;
  line-height:1.7;
  color:var(--ink-dim);
  opacity:0.75;
  margin:0;
  text-shadow:0 2px 12px rgba(0,0,0,0.8);
}

a{color:var(--amber);}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* --------------------------------------------------------------------------
   v2 additions — the legitimacy pairs, bullet philosophy, guide title,
   glowing bonus, and the work caption
   -------------------------------------------------------------------------- */

/* "VISUAL / DESIGN" — white body caps over display amber caps, ~1in tall,
   sitting left of the sentence it belongs to */
.pair{
  margin:0;
  font-size:clamp(26px,5.4vw,44px);
  line-height:1.06;
  text-align:left;
}
.pair .w{
  display:block;
  font-family:var(--body);
  font-weight:300;
  letter-spacing:0.055em;
  text-transform:uppercase;
  color:var(--ink);
  text-shadow:var(--float-shadow);
}
.pair .g{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:1.33em;          /* a third larger than the word above it */
  letter-spacing:0.035em;
  text-transform:uppercase;
  color:var(--amber);
  text-shadow:var(--float-shadow);
}

.ladder-stack{
  display:flex;
  flex-direction:column;
  gap:clamp(26px,5vw,44px);
  width:100%;
}
.pair-row{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(14px,3.4vw,34px);
  align-items:center;
  width:100%;
}
.pair-row .prose{margin:0;max-width:38ch;}
@media (max-width:640px){
  .pair-row{grid-template-columns:1fr;gap:8px;}
  .pair{text-align:center;}
  .pair-row .prose{max-width:none;text-align:center;}
}

/* the two ladder verdicts, set tight, then a beat, then the close */
.verdicts{width:100%;}
.verdicts .prose{margin:0;}
.verdicts .prose + .prose{margin-top:0.22em;}
.verdicts .prose + .prose.ladder-close{margin-top:1.9em;}

/* philosophy, now a list of her own sentences */
.goal-list{
  margin:0;
  padding:0 0 0 26px;
  list-style:none;
  max-width:62ch;
}
.goal-list li{
  position:relative;
  font-family:var(--body);
  font-weight:375;
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
  margin-bottom:1em;
}
.goal-list li:last-child{margin-bottom:0;}
.goal-list li::before{
  content:"\2726";
  position:absolute;
  left:-26px;
  top:0.1em;
  font-size:0.8em;
  color:var(--amber);
}

/* the bio title — body face, bold, 10pt over running text */
.guide-title{
  font-family:var(--body);
  font-weight:600;
  font-size:28px;
  line-height:1.3;
  color:var(--ink);
  max-width:62ch;
  margin:0 auto 0.7em;
}
.float-copy .guide-title{text-shadow:var(--float-shadow);}

/* the bonus at the foot of offer 3 */
.bonus{
  margin:26px 0 0;
  max-width:56ch;
}
.bonus .hot{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.3rem,3.4vw,1.8rem);
  line-height:1.25;
  letter-spacing:0.03em;
  color:var(--amber);
  text-shadow:
    0 0 12px rgba(232,168,104,0.75),
    0 0 30px rgba(232,168,104,0.4),
    0 0 62px rgba(232,168,104,0.2);
  margin-bottom:0.4em;
}
.bonus .cool{
  display:block;
  font-family:var(--body);
  font-weight:375;
  font-size:18px;
  line-height:1.55;
  color:#fff;
}

/* an offer row whose title is lit */
.offer-title.lit{
  text-shadow:
    0 0 12px rgba(232,168,104,0.7),
    0 0 30px rgba(232,168,104,0.38),
    0 0 60px rgba(232,168,104,0.18);
}
.offer-title .bonus-tag{white-space:nowrap;}

/* caption under the work sample */
.work-figure figcaption.work-caption{
  font-family:var(--body);
  font-weight:500;
  font-size:clamp(14px,2.4vw,18px);
  letter-spacing:0.13em;
  line-height:1.5;
  text-transform:uppercase;
  text-align:center;
  color:#fff;
  margin:0;
  text-shadow:
    0 0 14px rgba(255,255,255,0.72),
    0 0 34px rgba(255,255,255,0.4),
    0 0 68px rgba(255,255,255,0.18),
    0 2px 16px rgba(0,0,0,0.9);
}

/* --------------------------------------------------------------------------
   Dividers — black hairlines. Straight rules bracket the positioning line;
   chevrons bracket the legitimacy pairs so they read as their own passage.
   -------------------------------------------------------------------------- */

.rule-black{
  width:100%;
  height:0;
  border:0;
  border-top:1px solid rgba(0,0,0,0.9);
  margin:0;
}

/* h1 + rule + positioning line + rule, evenly spaced as one unit rather than
   inheriting main's much larger section gap */
.masthead-block{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,3.4vw,30px);
  padding-bottom:clamp(14px,3.4vw,38px);
}

/* a hairline that dips to a point at the centre of the column, and its mirror.
   preserveAspectRatio="none" stretches the viewBox to full width; the stroke
   would stretch with it, so vector-effect pins it back to a true 1px. */
.chev{
  display:block;
  width:100%;
  height:clamp(20px,4.2vw,38px);
}
.chev path{
  fill:none;
  stroke:rgba(0,0,0,0.9);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
}

/* extra air after a passage that should not run straight into the next one */
.space-after{padding-bottom:clamp(16px,4vw,46px);}

/* --------------------------------------------------------------------------
   Artwork behind copy — a backdrop on the goal panel, and behind the bio.
   Both use a ::before rather than a background-image on the element itself,
   because opacity has to apply to the art alone and not to the text over it.
   -------------------------------------------------------------------------- */

/* the branding diagram, hovering on its own between the bio and the offers */
.venn{
  display:block;
  width:100%;
  max-width:470px;
  height:auto;
  margin:0 auto;
  opacity:0.88;
}

/* the portrait, cut to a diamond: the horizontal diagonal is the full width
   of the column and its centre sits on the centre of the page */
.bio-diamond{
  display:block;
  width:100%;
  height:auto;
  margin:0 auto;
  /* a flattened diamond: flat top and bottom edges with the four corners
     chamfered off, so all three faces stay inside the shape */
  clip-path:polygon(18% 0, 82% 0, 100% 50%, 82% 100%, 18% 100%, 0 50%);
}
.bio-block{
  width:100%;
  margin-top:clamp(14px,4vw,44px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(18px,3.4vw,32px);
}
/* the name, in the white caps register from "Here our goal is," */
.bio-name{
  font-family:var(--body);
  font-weight:375;
  font-size:28px;
  letter-spacing:0.1em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--ink);
  max-width:62ch;
  width:100%;
  margin:0;
  text-shadow:var(--float-shadow);
}
/* the two name lines are one unit — without this wrapper they inherit the
   bio block's much larger flex gap and drift apart */
.bio-names{
  width:100%;
  max-width:62ch;
  display:flex;
  flex-direction:column;
  gap:2px;
}

/* "a.k.a." sitting on the same baseline as the wordmark */
.bio-aka{
  display:flex;
  align-items:center;
  gap:0.5em;
  flex-wrap:wrap;
}
/* sized in em so the mark tracks the name beside it at every screen width */
.kai-logo{
  display:block;
  height:1.95em;
  width:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,0.85));
}

/* the declaration now floats free of the panel, so it needs its own container
   for the cqi sizing to resolve against, plus the float shadow */
.declaration-wrap{
  width:100%;
  container-type:inline-size;
}
.float-copy .declaration,
.declaration-wrap .declaration{
  text-shadow:var(--float-shadow);
  margin:0;
}

/* --------------------------------------------------------------------------
   Pricing — closes each offer. The old figure in the display serif, amber and
   struck through; the new one beside it in white; the terms in body copy.
   -------------------------------------------------------------------------- */
.price{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.15em 0.5em;
  margin:28px 0 0;
  padding-top:22px;
  border-top:1px solid var(--amber-line);
}
.price-was{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.45rem,3.4vw,1.95rem);
  line-height:1.2;
  letter-spacing:0.01em;
  color:var(--amber);
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(232,168,104,0.85);
}
.price-now{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.6rem,3.9vw,2.2rem);
  line-height:1.2;
  letter-spacing:0.01em;
  color:#fff;
}
.price-value{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1rem,2.4vw,1.25rem);
  line-height:1.3;
  color:var(--amber);
  opacity:0.8;
}
.price-note{
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
}
.price-sub{
  font-family:var(--body);
  font-weight:375;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  margin:10px 0 0;
}

/* --------------------------------------------------------------------------
   Deals banner — full width above everything, typewriter caps on gold
   -------------------------------------------------------------------------- */
.deal-banner{
  display:block;
  width:100%;
  background:linear-gradient(180deg, var(--amber-bright), var(--amber));
  color:#0b0a10;
  font-family:'Courier Prime', ui-monospace, 'Courier New', monospace;
  font-weight:700;
  font-size:clamp(12px,1.7vw,16px);
  line-height:1.5;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  padding:11px 16px;
  text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,0.28);
  transition:filter 0.2s ease;
  position:relative;
  z-index:2;
}
.deal-banner:hover{filter:brightness(1.07);}
.deal-banner:focus-visible{outline:2px solid #0b0a10;outline-offset:-5px;}
.deal-banner:visited{color:#0b0a10;}

/* the offers heading is the banner's destination */
#offers{scroll-margin-top:24px;}

/* a call to action closing an offer, just above its price */
.offer-cta{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.1rem,2.7vw,1.4rem);
  line-height:1.3;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--amber);
  margin:24px 0 0;
}

/* a sentence lifted into the accent colour inside an offer */
.gold-line{color:var(--amber);}

.price-value{opacity:1;}
.price-now.is-gold{color:var(--amber);}