*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
  --bg:#090806; --s1:#111009; --s2:#181510; --s3:#201c15; --amber:#D4721E; --a2:#F0A840;
  --adim:rgba(212,114,30,.10); --cream:#EDE8DF; --muted:#7B7368; --dim:#47433C;
  --rule:#1E1A14; --rule2:rgba(255,255,255,.055);
  --ffd:'Barlow Condensed', sans-serif; --ffb:'Barlow', sans-serif; --ffs:'Crimson Pro', Georgia, serif;
}
body { background:var(--bg); color:var(--cream); font-family:var(--ffb); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::after {
  content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
.wrap { max-width:1280px; margin:0 auto; padding:0 28px; }

.nav { position:sticky; top:0; z-index:100; background:rgba(9,8,6,.97); backdrop-filter:blur(14px) saturate(110%); border-bottom:1px solid var(--rule); }
.nav::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--amber),var(--a2) 50%,var(--amber)); }
.nav-in { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-logo { width:38px; height:38px; object-fit:contain; }
.brand-name { font-family:var(--ffd); font-size:21px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.brand-sub { margin-top:3px; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-links a { padding:7px 9px; border-radius:3px; color:var(--muted); font-family:var(--ffd); font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; transition:color .18s, background .18s; }
.nav-links a:hover { color:var(--cream); background:var(--s2); }
.nav-links a.active { color:var(--amber); }
.nav-links .nav-cta { border:1px solid var(--rule2); color:var(--cream); margin-left:6px; }
.nav-links .nav-cta:hover { border-color:var(--amber); color:var(--amber); background:var(--adim); }
.burger { display:none; background:var(--s2); border:1px solid var(--rule); color:var(--cream); padding:9px 11px; border-radius:3px; cursor:pointer; line-height:0; }

.routine-hero {
  border-bottom:1px solid var(--rule);
  background:radial-gradient(circle at 72% 12%, rgba(212,114,30,.16), transparent 34%), linear-gradient(180deg, rgba(255,255,255,.025), transparent 58%);
}
.routine-hero__grid { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:42px; align-items:end; padding:66px 28px 54px; }
.routine-kicker { color:var(--amber); font-family:var(--ffd); font-size:12px; font-weight:800; letter-spacing:.32em; text-transform:uppercase; margin-bottom:18px; }
.routine-hero h1 { max-width:780px; font-family:var(--ffd); font-size:clamp(52px, 7vw, 98px); line-height:.92; text-transform:uppercase; }
.routine-hero p { max-width:650px; margin-top:22px; color:var(--muted); font-family:var(--ffs); font-size:22px; line-height:1.45; }
.routine-note { border:1px solid var(--rule); border-left:3px solid #C84040; background:var(--s1); padding:20px; }
.routine-note strong { display:block; color:#E08080; font-family:var(--ffd); font-size:16px; letter-spacing:.12em; text-transform:uppercase; }
.routine-note p { margin-top:8px; font-size:16px; line-height:1.45; }

.builder-shell { display:grid; grid-template-columns:420px minmax(0,1fr); gap:28px; align-items:start; padding-top:42px; padding-bottom:34px; }
.builder-panel, .result-panel { border:1px solid var(--rule); background:var(--s1); }
.builder-panel { padding:20px; }
.builder-head, .result-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.builder-head span, .result-top span, .section-label span { color:var(--amber); font-family:var(--ffd); font-size:11px; font-weight:800; letter-spacing:.28em; text-transform:uppercase; }
.builder-head button, .result-top button, .result-actions a {
  min-height:34px; padding:8px 11px; border:1px solid var(--rule); background:var(--s2); color:var(--muted);
  font-family:var(--ffd); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; cursor:pointer;
}
.builder-head button:hover, .result-top button:hover, .result-actions a:hover { color:var(--amber); border-color:var(--amber); background:var(--adim); }
fieldset { border:0; margin:0 0 20px; }
legend { margin-bottom:9px; color:var(--cream); font-family:var(--ffd); font-size:18px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.choice-row, .choice-grid { display:grid; gap:8px; }
.choice-row { grid-template-columns:repeat(3,1fr); }
.choice-grid { grid-template-columns:repeat(2,1fr); }
.builder-panel label { cursor:pointer; }
.builder-panel label input { position:absolute; opacity:0; pointer-events:none; }
.builder-panel label span {
  display:flex; align-items:center; min-height:44px; padding:10px 12px; border:1px solid var(--rule); background:var(--s2);
  color:var(--muted); font-family:var(--ffd); font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
}
.builder-panel label input:checked + span { border-color:var(--amber); color:var(--amber); background:var(--adim); box-shadow:inset 3px 0 0 var(--amber); }

.result-panel { position:sticky; top:88px; padding:24px; border-top:3px solid var(--amber); }
.result-panel h2 { font-family:var(--ffd); font-size:clamp(36px, 5vw, 62px); line-height:.96; text-transform:uppercase; }
.result-panel > p { max-width:720px; margin-top:12px; color:var(--muted); font-family:var(--ffs); font-size:20px; line-height:1.4; }
.routine-steps { display:grid; gap:10px; margin:22px 0 0; list-style:none; counter-reset:step; }
.routine-steps li {
  counter-increment:step; display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; align-items:start;
  border:1px solid var(--rule); background:rgba(255,255,255,.018); padding:13px 14px; color:var(--cream); line-height:1.45;
}
.routine-steps li::before {
  content:counter(step, decimal-leading-zero); color:var(--amber); font-family:var(--ffd); font-size:15px; font-weight:900; letter-spacing:.12em;
}
.warning-card { margin-top:18px; padding:16px; border:1px solid var(--rule); border-left:3px solid #C84040; background:#120d0b; }
.warning-card strong { display:block; color:#E08080; font-family:var(--ffd); font-size:14px; letter-spacing:.12em; text-transform:uppercase; }
.warning-card p { margin-top:7px; color:var(--muted); font-family:var(--ffs); font-size:17px; line-height:1.45; }
.result-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }

.section-label { display:flex; align-items:center; gap:14px; margin-bottom:20px; }
.section-label::after { content:""; flex:1; height:1px; background:var(--rule); }
.saved-routines, .article-recs { padding-top:26px; padding-bottom:46px; }
.routine-newsletter { padding-top: 4px; padding-bottom: 56px; }
.saved-list { display:flex; flex-wrap:wrap; gap:8px; }
.saved-list button { border:1px solid var(--rule); background:var(--s1); color:var(--muted); padding:10px 12px; text-align:left; cursor:pointer; }
.saved-list button:hover { border-color:var(--amber); color:var(--cream); }
.saved-list b { display:block; color:var(--amber); font-family:var(--ffd); font-size:13px; text-transform:uppercase; }
.saved-list span { display:block; margin-top:4px; font-size:12px; }
.rec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.rec-card { border:1px solid var(--rule); background:var(--s1); transition:border-color .18s, background .18s; }
.rec-card:hover { border-color:rgba(212,114,30,.52); background:var(--s2); }
.rec-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.rec-card div { padding:14px; }
.rec-card span { color:var(--amber); font-family:var(--ffd); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; }
.rec-card h3 { margin-top:7px; color:var(--cream); font-family:var(--ffd); font-size:23px; line-height:1.05; text-transform:uppercase; }
.rec-card:hover h3 { color:var(--amber); }
.rec-card p { margin-top:8px; color:var(--muted); font-family:var(--ffs); font-size:16px; line-height:1.35; }

footer { border-top:1px solid var(--rule); background:var(--s1); padding:26px 0; }
.foot-in { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.foot-copy { font-size:13px; color:var(--muted); }
.foot-copy strong { color:var(--amber); }
.foot-legal { display:flex; gap:14px; }
.foot-legal a { color:var(--muted); font-family:var(--ffd); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.foot-legal a:hover { color:var(--cream); }

@media (max-width:1060px) {
  .routine-hero__grid, .builder-shell { grid-template-columns:1fr; }
  .result-panel { position:static; }
}
@media (max-width:860px) {
  .burger { display:flex; align-items:center; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:4px; padding:12px 16px 16px; background:rgba(9,8,6,.99); border-bottom:1px solid var(--rule); }
  .nav-links.open { display:flex; }
  .nav-links a { padding:12px 10px; border:1px solid var(--rule); border-radius:2px; }
  .nav-links .nav-cta { margin-left:0; }
}
@media (max-width:720px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .routine-hero__grid { padding:44px 18px 38px; }
  .routine-hero h1 { font-size:46px; }
  .routine-hero p { font-size:19px; }
  .choice-row, .choice-grid, .rec-grid { grid-template-columns:1fr; }
  .builder-panel, .result-panel { padding:18px; }
  .routine-steps li { grid-template-columns:32px minmax(0,1fr); }
}