/* Our Morning View — shared styles */
:root{
  --cream:#F5EBDC; --rust:#C0442E; --gold:#D9A441; --charcoal:#2B2622;
  --ink:#2B2622; --muted:#6B6157; --line:#E0D2BF; --paper:#FFFDF9;
  --shadow:0 2px 0 rgba(43,38,34,.08);
  --wrap:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px; line-height:1.6; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4,.mark{font-family:'Oswald',Impact,sans-serif; font-weight:600; letter-spacing:.01em; line-height:1.1; margin:0 0 .5em}
h1{font-size:clamp(2rem,6vw,3.1rem); text-transform:uppercase}
h2{font-size:clamp(1.4rem,4vw,2rem); text-transform:uppercase}
h3{font-size:1.15rem; text-transform:uppercase}
p{margin:0 0 1em}
a{color:var(--rust)}
img{max-width:100%}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

/* ---- mile marker: the recurring section label ---- */
.marker{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:14px;
  font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.marker::before{content:""; width:26px; height:3px; background:var(--gold)}

/* ---- header ---- */
header.site{background:var(--charcoal); color:var(--cream); position:sticky; top:0; z-index:50}
header.site .bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px; max-width:var(--wrap); margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--cream)}
.brand .sun{width:22px;height:22px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(217,164,65,.22); flex:0 0 auto}
.brand b{font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:1.02rem}
nav.site a{
  color:var(--cream); text-decoration:none; font-family:'Oswald',sans-serif;
  text-transform:uppercase; letter-spacing:.09em; font-size:.82rem; padding:8px 10px; display:inline-block; border-radius:4px;
}
nav.site a:hover,nav.site a:focus{background:rgba(245,235,220,.12)}
nav.site a[aria-current="page"]{color:var(--gold); box-shadow:inset 0 -2px 0 var(--gold)}
.navlist{display:flex; flex-wrap:wrap; gap:2px}
.menubtn{display:none; background:none; border:1px solid rgba(245,235,220,.35); color:var(--cream); border-radius:5px; padding:7px 11px; font-family:'Oswald',sans-serif; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem}
@media(max-width:860px){
  .menubtn{display:block}
  .navlist{display:none; width:100%; flex-direction:column; padding:0 12px 12px}
  .navlist.open{display:flex}
  header.site .bar{flex-wrap:wrap}
  nav.site{width:100%}
  nav.site a{padding:11px 8px; border-bottom:1px solid rgba(245,235,220,.12)}
}

/* ---- hero ---- */
.hero{background:var(--charcoal); color:var(--cream); padding:56px 0 60px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:6px;
  background:repeating-linear-gradient(90deg,var(--gold) 0 34px,transparent 34px 68px)}
.hero h1{color:var(--cream); max-width:16ch}
.hero .marker{color:var(--gold)}
.hero p{color:rgba(245,235,220,.82); max-width:56ch; font-size:1.06rem}
.hero.slim{padding:40px 0 44px}

/* ---- sections ---- */
section{padding:52px 0}
section.tight{padding:34px 0}
section.alt{background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}

/* ---- cards ---- */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:20px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
}
a.card:hover,a.card:focus{border-color:var(--rust); transform:translateY(-2px)}
a.card{transition:transform .15s ease,border-color .15s ease}
.card h3{margin-bottom:6px}
.card p{color:var(--muted); font-size:.95rem; margin-bottom:12px}
.card .go{margin-top:auto; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--rust)}
.tag{display:inline-block; font-family:'Oswald',sans-serif; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  background:var(--gold); color:var(--charcoal); padding:3px 8px; border-radius:3px; margin-bottom:10px; align-self:flex-start}
.tag.rust{background:var(--rust); color:var(--cream)}

/* ---- buttons ---- */
.btn{
  display:inline-block; background:var(--rust); color:var(--cream); text-decoration:none;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.1em; font-size:.9rem;
  padding:13px 22px; border-radius:6px; border:none; cursor:pointer;
}
.btn:hover,.btn:focus{background:#a83a26}
.btn.gold{background:var(--gold); color:var(--charcoal)}
.btn.gold:hover{background:#c9942f}
.btn.ghost{background:transparent; color:var(--rust); border:2px solid var(--rust)}
.btn.ghost:hover{background:var(--rust); color:var(--cream)}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}

/* ---- email capture ---- */
.capture{background:var(--rust); color:var(--cream); border-radius:12px; padding:26px}
.capture h2{color:var(--cream)}
.capture p{color:rgba(245,235,220,.9)}
.capture .marker{color:var(--gold)}
.fieldrow{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
input[type=email],input[type=text],input[type=number],select,textarea{
  font-family:'Archivo',sans-serif; font-size:1rem; padding:12px 13px;
  border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink); width:100%;
}
.fieldrow input{flex:1 1 240px; width:auto}
label{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:.76rem; color:var(--muted); margin-bottom:6px}
.hp{position:absolute; left:-9999px}

/* ---- calculator ---- */
.calc{background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:22px; box-shadow:var(--shadow)}
.inputs{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.field{margin:0}
.hint{font-size:.8rem; color:var(--muted); margin:5px 0 0}
.result{background:var(--charcoal); color:var(--cream); border-radius:10px; padding:22px; margin-top:20px}
.result .big{font-family:'Oswald',sans-serif; font-size:clamp(2.2rem,9vw,3.4rem); color:var(--gold); line-height:1; margin:4px 0 2px}
.result .biglabel{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.16em; font-size:.75rem; color:rgba(245,235,220,.75)}
.lines{margin-top:18px; border-top:1px solid rgba(245,235,220,.18); padding-top:12px}
.line{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid rgba(245,235,220,.1); font-size:.95rem}
.line:last-child{border-bottom:none}
.line span:last-child{font-family:'Oswald',sans-serif; letter-spacing:.02em; white-space:nowrap}
.line.total{color:var(--gold); font-size:1.05rem; padding-top:12px}
.verdict{margin-top:16px; background:rgba(217,164,65,.16); border-left:4px solid var(--gold); padding:12px 14px; font-size:.95rem; border-radius:0 6px 6px 0}
.toggle{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.toggle button{font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.09em; font-size:.8rem;
  padding:9px 15px; border-radius:20px; border:2px solid var(--line); background:#fff; color:var(--muted); cursor:pointer}
.toggle button[aria-pressed=true]{background:var(--charcoal); border-color:var(--charcoal); color:var(--gold)}
.checks{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-bottom:6px}
.check{display:flex; align-items:flex-start; gap:9px; background:#fff; border:1px solid var(--line); border-radius:8px; padding:11px 13px}
.check input{margin-top:4px; width:18px; height:18px; accent-color:var(--rust); flex:0 0 auto}
.check label{margin:0; text-transform:none; letter-spacing:0; font-family:'Archivo',sans-serif; font-size:.93rem; color:var(--ink)}

/* ---- lists / misc ---- */
.bullets{list-style:none; padding:0; margin:0}
.bullets li{padding:9px 0 9px 26px; border-bottom:1px solid var(--line); position:relative}
.bullets li:last-child{border-bottom:none}
.bullets li::before{content:""; position:absolute; left:4px; top:18px; width:10px; height:3px; background:var(--gold)}
.note{background:rgba(217,164,65,.14); border-left:4px solid var(--gold); padding:13px 15px; border-radius:0 6px 6px 0; font-size:.94rem}
.lede{font-size:1.1rem; max-width:62ch}
.center{text-align:center}
.stack>*+*{margin-top:14px}

/* ---- footer ---- */
footer.site{background:var(--charcoal); color:rgba(245,235,220,.75); padding:40px 0 30px; font-size:.92rem}
footer.site h4{color:var(--gold); font-size:.82rem; letter-spacing:.16em; margin-bottom:10px}
footer.site a{color:var(--cream); text-decoration:none; display:block; padding:4px 0}
footer.site a:hover{color:var(--gold)}
.footgrid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.legal{border-top:1px solid rgba(245,235,220,.15); margin-top:26px; padding-top:16px; font-size:.82rem; line-height:1.6}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---- video cards + embed ---- */
.vgrid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
a.vcard{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .15s ease,border-color .15s ease;
}
a.vcard:hover,a.vcard:focus{transform:translateY(-2px); border-color:var(--rust)}
.vthumb{position:relative; aspect-ratio:16/9; background:var(--charcoal); overflow:hidden}
.vthumb img{width:100%; height:100%; object-fit:cover; display:block}
.vthumb::after{
  content:""; position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; background:rgba(192,68,46,.92);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
}
.vthumb::before{
  content:""; position:absolute; left:50%; top:50%; z-index:2; margin:-9px 0 0 -6px;
  border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent var(--cream);
}
.vbody{padding:15px 16px 17px; display:flex; flex-direction:column; flex:1}
.vbody h3{font-size:1.02rem; text-transform:none; letter-spacing:0; line-height:1.25; margin-bottom:7px}
.vbody p{font-size:.9rem; color:var(--muted); margin-bottom:11px}
.vmeta{margin-top:auto; font-family:'Oswald',sans-serif; font-size:.72rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rust); display:flex; gap:12px; flex-wrap:wrap}
.vmeta span{color:var(--muted)}
.embedwrap{position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--charcoal); box-shadow:var(--shadow)}
.embedwrap iframe{position:absolute; inset:0; width:100%; height:100%; border:0}