/* Rewire Your Brain: styles.
   Medium-style article. Color roles: CREAM is the main color, BURGUNDY second, BLACK third.
   System fonts only (no downloads, no third-party requests). */
:root{
  --cream:#F2EADA;
  --cream-deep:#E8DCC3;
  --cream-line:#D6CAB2;
  --burgundy:#6E1424;
  --burgundy-bright:#A32640;
  --black:#0E0B0B;
  --ink:#171212;
  --ink-dim:#5B5148;
  --on-wine:#EBD9D4;
  --sans:"Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.6;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{width:min(100% - 40px,680px);margin-inline:auto}

#bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--burgundy-bright);z-index:10}

/* top bar */
.nav{border-bottom:1px solid var(--cream-line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;font-family:var(--sans)}
.brand{font-weight:700;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.nav span{font-size:13px;color:var(--ink-dim)}

/* title block */
.title{padding:48px 0 0}
h1{font-family:var(--sans);font-weight:700;font-size:clamp(34px,8.6vw,48px);line-height:1.12;letter-spacing:-.022em;color:var(--ink)}
.sub{font-family:var(--sans);font-size:clamp(19px,4.6vw,22px);line-height:1.45;color:var(--ink-dim);margin-top:14px;font-weight:400;letter-spacing:-.005em}
.by{display:flex;align-items:center;gap:14px;margin:30px 0 0;padding-bottom:26px;border-bottom:1px solid var(--cream-line);font-family:var(--sans)}
.av{width:48px;height:48px;border-radius:50%;background:var(--burgundy);color:var(--cream);display:grid;place-items:center;font-weight:700;font-size:16px;flex:none}
.by strong{display:block;font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.by span{font-size:14px;color:var(--ink-dim)}

/* phones: true phone shape (9:19.5) */
.phone{border-radius:13% / 6%;box-shadow:0 0 0 3px var(--black),0 16px 32px rgba(30,10,10,.28);background:#000}

/* hero image */
.panel{background:var(--burgundy);border-radius:10px;padding:38px 0 36px;margin-top:34px;overflow:hidden}
.hero{--w:min(34vw,160px);--wc:min(40vw,190px);position:relative;height:calc(var(--wc) * 2.164 + 28px)}
.hero img{position:absolute;width:var(--w)}
.hero .a{left:50%;top:28px;transform:translateX(-112%) rotate(-5deg)}
.hero .b{left:50%;top:0;transform:translateX(-50%);z-index:2;width:var(--wc)}
.hero .c{left:50%;top:28px;transform:translateX(12%) rotate(5deg)}

/* article text */
article p{margin-top:1.45em}
h2{font-family:var(--sans);font-weight:700;font-size:clamp(25px,6vw,30px);line-height:1.25;letter-spacing:-.014em;color:var(--ink);margin-top:2.3em}
h3{font-family:var(--sans);font-weight:700;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-top:2em}
strong{font-weight:700;color:var(--ink)}
mark{background:linear-gradient(transparent 52%,rgba(163,38,64,.3) 52%);color:inherit;padding:0 .08em}
.lead{font-size:1.1em}
.first{margin-top:0}
.ref{font-family:var(--sans);font-size:.7em;font-weight:600;letter-spacing:.03em;color:var(--burgundy);white-space:nowrap}

/* the verse (burgundy card) */
.verse{background:var(--burgundy);color:var(--cream);border-radius:10px;padding:34px 28px;margin-top:34px}
.verse blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(23px,5.6vw,29px);line-height:1.4;letter-spacing:-.01em}
.verse cite{display:block;margin-top:18px;font-family:var(--sans);font-style:normal;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#F0C9D1}

/* boxes the author fills in (remove before publishing) */
.ph{margin-top:1.6em;border-left:3px solid var(--burgundy);background:rgba(110,20,36,.09);padding:14px 18px;font-family:var(--sans);font-size:15px;line-height:1.55;color:#3a1a20}
.ph b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);margin-bottom:4px}

/* figures */
figure{margin:36px 0 0}
figcaption{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-dim);margin-top:14px;text-align:center}
figcaption b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.shots{background:var(--cream-deep);border-radius:10px;padding:30px 20px 26px;margin-top:34px}
.shots.wine{background:var(--burgundy)}
.shots.wine figcaption{color:var(--on-wine)}
.shots.wine figcaption b{color:var(--cream)}
.figs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.figs.one{grid-template-columns:minmax(0,230px);justify-content:center}
.figs figure{margin:0}
.figs.row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 20px 12px 6px;margin:0 -20px 0 -6px;scrollbar-width:none}
.figs.row::-webkit-scrollbar{display:none}
.figs.row figure{flex:0 0 58%;scroll-snap-align:start}
.swipe{font-family:var(--sans);font-size:12px;color:var(--ink-dim);text-align:center;margin-top:6px}
.cap{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--ink-dim);text-align:center;margin-top:14px}

/* timeline (small black card) */
.tl{background:var(--black);border-radius:10px;padding:22px 18px 14px}
.tl-row{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;padding:7px 0;font-family:var(--sans)}
.tl-name{font-size:12.5px;font-weight:600;color:var(--cream);line-height:1.2}
.tl-name span{display:block;font-weight:400;color:#B9AE9C;font-size:11px}
.tl-track{position:relative;height:14px;background:#271F1F;border-radius:7px}
.tl-seg{position:absolute;top:0;bottom:0;background:var(--burgundy-bright);border-radius:7px}
.tl-axis{display:grid;grid-template-columns:100px 1fr;gap:12px;margin-top:6px;font-family:var(--sans)}
.tl-axis div:last-child{display:flex;justify-content:space-between;font-size:11px;color:#B9AE9C}

/* research cards */
.stats{display:grid;gap:14px;margin-top:30px}
.stat{background:var(--burgundy);color:var(--cream);border-radius:10px;padding:26px 24px 22px}
.stat .n{font-family:var(--sans);font-weight:700;color:var(--cream);font-size:46px;line-height:1;letter-spacing:-.03em}
.stat .n small{font-size:.38em;font-weight:600;color:#F0C9D1;letter-spacing:0;margin-left:8px}
.stat p{margin-top:14px;font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--cream)}
.stat .src{display:inline-block;margin-top:12px;font-family:var(--sans);font-size:13px;color:#F0C9D1}
.note{font-family:var(--sans);font-size:15px;line-height:1.65;color:var(--ink-dim);margin-top:22px}

/* steps */
.steps{list-style:none;margin-top:1.4em;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:22px 0 22px 58px;border-top:1px solid var(--cream-line)}
.steps li:last-child{border-bottom:1px solid var(--cream-line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:22px;width:40px;height:40px;border-radius:50%;background:var(--burgundy);color:var(--cream);display:grid;place-items:center;font-family:var(--sans);font-weight:700;font-size:17px}
.steps b{display:block;font-family:var(--sans);font-weight:700;color:var(--ink);font-size:19px;line-height:1.3}
.steps span{display:block;margin-top:4px;font-size:18px;color:var(--ink-dim);line-height:1.55}

/* closing prayer (burgundy card) */
.prayer{background:var(--burgundy);border-radius:10px;padding:34px 28px;margin-top:48px}
.prayer p{margin:0;font-style:italic;font-size:clamp(22px,5.2vw,27px);line-height:1.45;color:var(--cream)}

/* tags + sources */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px}
.tags span{background:var(--cream-deep);color:var(--ink);font-family:var(--sans);font-size:14px;padding:9px 16px;border-radius:999px}
.sources{margin-top:44px;padding-top:24px;border-top:1px solid var(--cream-line);font-family:var(--sans);font-size:13.5px;line-height:1.65;color:var(--ink-dim)}
.sources h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.sources li{margin-top:9px;list-style:none}
.sources a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* author card */
.author{margin-top:48px;padding-top:30px;border-top:1px solid var(--cream-line);font-family:var(--sans)}
.author .row{display:flex;gap:16px;align-items:center}
.author .av{width:64px;height:64px;font-size:22px}
.author h4{font-size:20px;font-weight:700;color:var(--ink);line-height:1.2}
.btn{display:inline-block;margin-top:22px;background:var(--burgundy);color:var(--cream);font-weight:600;font-size:15px;padding:12px 24px;border-radius:999px;text-decoration:none}

/* black footer */
.foot{background:var(--black);color:#B9AE9C;margin-top:64px;padding:26px 0;font-family:var(--sans);font-size:13px;text-align:center}

@media (min-width:900px){
  body{font-size:21px}
  .title{padding-top:64px}
  .hero{--w:160px;--wc:190px}
  .hero .a{transform:translateX(-128%) rotate(-5deg)}
  .hero .c{transform:translateX(28%) rotate(5deg)}
  .figs{grid-template-columns:repeat(2,220px);justify-content:center;gap:30px}
  .figs.row{display:grid;grid-template-columns:repeat(3,200px);gap:22px;overflow:visible;padding:0;margin:0;justify-content:center}
  .swipe{display:none}
  .stats{grid-template-columns:1fr 1fr}
}