/* Live Build Session — AI From The Field
   Design tokens and full styles. See DESIGN.md. */

:root{
  --ink:#141312; --panel:#0E0D0C; --panel2:#1B1917;
  --gold:#C9A24A; --gold-dim:#8a6f33;
  --paper:#FAF8F3; --mut:rgba(250,248,243,0.56); --mut2:rgba(250,248,243,0.34);
  --line:rgba(250,248,243,0.10); --line2:rgba(201,162,74,0.28);

  --f-display:'Big Shoulders Display', sans-serif;
  --f-body:'Work Sans', sans-serif;
  --f-mono:'Geist Mono', ui-monospace, monospace;
}

*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink); color:var(--paper);
  font-family:var(--f-body); font-weight:300;
  -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh;
}

/* faint editor gutter behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:repeating-linear-gradient(to right,rgba(201,162,74,0.035) 0,rgba(201,162,74,0.035) 1px,transparent 1px,transparent 88px);
}
.wrap{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 40px;}

/* top bar */
.bar{display:flex; align-items:center; justify-content:space-between; padding:30px 0 0;}
.brand{font-family:var(--f-mono); font-size:13px; letter-spacing:4px; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:11px;}
.brand .dot{width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px rgba(201,162,74,0.13);}
.bar .status{font-family:var(--f-mono); font-size:12px; letter-spacing:2px; color:var(--mut); text-transform:uppercase;}
.bar .status b{color:var(--paper); font-weight:500;}

/* hero */
.hero{display:grid; grid-template-columns:1.15fr 0.85fr; gap:64px; padding:74px 0 90px; align-items:start;}
@media(max-width:920px){.hero{grid-template-columns:1fr; gap:48px; padding:54px 0 64px;}}

.eyebrow{font-family:var(--f-mono); font-size:13px; letter-spacing:3px; color:var(--mut); text-transform:uppercase; margin-bottom:26px; display:flex; gap:14px; align-items:center;}
.eyebrow .tick{color:var(--gold); white-space:nowrap;}
h1{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(58px,8vw,118px); line-height:0.9; letter-spacing:-1px;}
h1 .gold{color:var(--gold);}
.lede{font-size:21px; color:rgba(250,248,243,0.82); max-width:520px; margin-top:30px; line-height:1.55;}
.lede b{font-weight:600; color:var(--paper);}

/* spec strip */
.specs{margin-top:46px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr);}
.specs .s{padding:24px 26px 24px 0;}
.specs .s + .s{padding-left:26px; border-left:1px solid var(--line);}
.specs .lab{font-family:var(--f-mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--mut2); margin-bottom:10px;}
.specs .val{font-family:var(--f-display); font-weight:700; font-size:40px; line-height:1; color:var(--gold);}
.specs .sub{font-size:14px; color:var(--mut); margin-top:5px;}

/* detail list */
.incl{margin-top:42px;}
.incl .h{font-family:var(--f-mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--mut); margin-bottom:18px;}
.incl ul{list-style:none; display:grid; gap:13px;}
.incl li{display:flex; gap:14px; font-size:16px; color:rgba(250,248,243,0.8);}
.incl li::before{content:"//"; font-family:var(--f-mono); color:var(--gold-dim); font-size:14px; flex:none; padding-top:1px;}

/* yours-to-keep block */
.keep{margin-top:34px; border:1px solid var(--line2); border-radius:3px; padding:22px 24px; background:rgba(201,162,74,0.04);}
.keep .kh{font-family:var(--f-mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.keep .krow{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:560px){.keep .krow{grid-template-columns:1fr; gap:18px;}}
.keep .k{display:flex; flex-direction:column; gap:6px;}
.keep .kt{font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:24px; line-height:1; color:var(--paper);}
.keep .kd{font-size:14px; color:var(--mut); line-height:1.45;}

/* registration card */
.card{background:var(--panel); border:1px solid var(--line); border-radius:3px; padding:34px 32px 30px; position:sticky; top:30px;}
.card .ct{font-family:var(--f-mono); font-size:11px; letter-spacing:2.5px; text-transform:uppercase; color:var(--mut2); margin-bottom:6px;}
.card h2{font-family:var(--f-display); font-weight:700; text-transform:uppercase; font-size:34px; line-height:0.95; margin-bottom:4px;}
.card .when{font-family:var(--f-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--paper); margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.card .when .sep{color:var(--gold);}
.card .price{display:flex; align-items:center; gap:14px; margin:18px 0 4px; padding-bottom:22px; border-bottom:1px solid var(--line);}
.card .price .amt{font-family:var(--f-display); font-weight:800; font-size:62px; line-height:1; color:var(--paper);}
.card .price .note{font-size:13px; color:var(--mut); line-height:1.35;}
.card .price .note b{color:var(--gold); font-weight:600;}

/* GHL form embed */
:root{ --ghl-height:856px; }   /* fallback height before form_embed.js resizes; matches data-height */
.embed{margin-top:20px; border-radius:2px; overflow:hidden; background:var(--panel2);}
.embed iframe{display:block; width:100%; height:var(--ghl-height); min-height:var(--ghl-height); border:0;}

.fine{font-family:var(--f-mono); font-size:11px; letter-spacing:0.5px; color:var(--mut2); margin-top:16px; line-height:1.6; text-align:center;}

/* where your $20 goes — lives in the hero left column, below "yours to keep" */
.give{margin-top:44px; border-top:1px solid var(--line); padding-top:40px;}
.give .h{font-family:var(--f-mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:18px;}
.give h3{font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(30px,4.4vw,46px); line-height:0.95; letter-spacing:-0.5px; margin-bottom:18px;}
.give p{font-size:16px; color:rgba(250,248,243,0.8); line-height:1.6; max-width:56ch;}
.give p b{color:var(--gold); font-weight:600;}
.give-stat{margin-top:26px; padding-top:24px; border-top:1px solid var(--line2); display:flex; align-items:center; gap:22px;}
.give-stat .val{font-family:var(--f-display); font-weight:800; font-size:64px; line-height:1; color:var(--gold); flex:none;}
.give-stat .sub{font-size:14px; color:var(--mut); line-height:1.5;}

/* The Samaritan Inn external link */
a.inn{color:var(--gold); font-weight:600; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; text-decoration-color:rgba(201,162,74,0.45); transition:text-decoration-color .15s ease;}
a.inn:hover{text-decoration-color:var(--gold);}

/* footer */
.foot{border-top:1px solid var(--line); padding:30px 0 46px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.foot .l{font-family:var(--f-mono); font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--mut2);}
.foot .r{font-size:13px; color:var(--mut);}
.foot .r b{color:var(--paper); font-weight:600;}

/* ============================================================
   RESPONSIVE / MOBILE
   Base layout is desktop two-column. 920px stacks the hero;
   the rules below tune the stacked layout down to small phones.
   ============================================================ */

/* once the card is full-width and stacked, it must not be sticky */
@media(max-width:920px){
  .card{position:static; top:auto;}
  .wrap{padding:0 28px;}
}

/* phones */
@media(max-width:640px){
  .wrap{padding:0 20px;}

  /* top bar stacks: wordmark over the session status, kept to one line */
  .bar{flex-direction:column; align-items:flex-start; gap:7px; padding-top:22px;}
  .bar .status{font-size:10px; letter-spacing:0.2px; white-space:nowrap;}

  .hero{padding:38px 0 54px; gap:40px;}
  .eyebrow{letter-spacing:2px; margin-bottom:22px;}
  h1{font-size:clamp(42px,12.5vw,82px); letter-spacing:-0.5px;}
  .lede{font-size:18px; margin-top:24px; line-height:1.5;}

  /* spec strip: tighter padding so 3 columns still breathe */
  .specs{margin-top:36px;}
  .specs .s{padding:18px 12px 18px 0;}
  .specs .s + .s{padding-left:14px;}
  .specs .val{font-size:32px;}
  .specs .sub{font-size:12.5px;}

  .incl{margin-top:38px;}
  .incl li{font-size:15px;}
  .keep{padding:20px 20px;}

  .give{margin-top:38px; padding-top:34px;}
  .give-stat{gap:18px;}
  .give-stat .val{font-size:56px;}

  /* registration card */
  .card{padding:26px 22px;}
  .card h2{font-size:30px;}
  .card .price .amt{font-size:54px;}
  .card .price .note{font-size:12.5px;}

  /* footer stacks and left-aligns */
  .foot{flex-direction:column; align-items:flex-start; gap:8px; padding:26px 0 40px;}
}

/* very small phones: keep the headline from crowding the edges */
@media(max-width:360px){
  .specs .s{padding:16px 8px 16px 0;}
  .specs .s + .s{padding-left:10px;}
  .card .price .amt{font-size:48px;}
  /* keep the status on one line on very small phones */
  .bar .status{font-size:8.5px; letter-spacing:0.1px;}
}

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