/* Sam & Sak · samandsak.com
   One stylesheet, five pages. Every value here traces to
   Reference/03 · The brand system. Nothing new is invented in CSS.

   THE GOLD LAW. On dusk, #D9A22E for anything drawn and #EFC169 for anything
   typed. On cream, #9A6E12 or nothing. The two golds exist because brand gold
   measures 4.18 to 1 on cream, under the 4.5 small text needs. */

:root{
  --cream:#F8F5EE;
  --sand:#F2E7C8;
  --dusk:#0A1E33;
  --navy:#12395C;
  --ink-soft:#26404E;
  --body-dark:#E9F1F7;
  --muted:#A0BECD;
  --gold-deep:#9A6E12;   /* the one gold on cream */
  --gold:#D9A22E;        /* drawn, on dusk */
  --gold-lt:#EFC169;     /* typed, on dusk */
  --quiet:#5F7280;       /* small print on cream. 4.9 to 1 */
  --measure:42rem;
  --wide:60rem;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--cream);
  color:var(--dusk);
  font-family:Poppins,system-ui,-apple-system,sans-serif;
  font-weight:400; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:640px){ body{font-size:18px} }
@media (min-width:1000px){ body{font-size:19px} }

img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* ── ONE LEFT EDGE ────────────────────────────────────────────────
   Both wraps are the same width, so every section on the page begins at the
   same x. Prose is held to a reading measure by capping the children, not by
   narrowing the container. Before this, a .wrap section and a .wrap-wide
   section started at different places on a wide screen, and the page read as
   slightly misaligned without it being obvious why. */
.wrap, .wrap-wide{max-width:var(--wide); margin:0 auto; padding:0 16px}
.wrap > *{max-width:var(--measure)}
.wrap > .spine{max-width:var(--measure)}

/* ── the mark ───────────────────────────────────────────────────────
   Lora italic, the ampersand in Allura at 1.5 times, dropped 5 percent,
   ™ at 0.34 and raised. The script ampersand is the mark's one ornament
   and is never spent in body copy. */
.mark{
  font-family:Lora,Georgia,serif; font-style:italic; font-weight:500;
  line-height:1; letter-spacing:.005em; display:inline-block;
  text-decoration:none; color:var(--dusk);
}
.mark .amp{
  font-family:Allura,cursive; font-style:normal; color:var(--gold-deep);
  font-size:1.5em; position:relative; top:.05em; margin:0 .04em;
}
/* The brand sheet sets ™ at 0.34 of the word, which is right on a 1080px
   tile where the mark is 34px tall. On a 27px web header the same ratio
   renders about 9px and disappears. The ratio holds, with a floor, so it is
   legible on a phone without becoming a second word. */
.mark .tm{font-size:max(11px,.38em); vertical-align:super; letter-spacing:0}
.on-dusk .mark, .dusk .mark{color:var(--cream)}
.on-dusk .mark .amp, .dusk .mark .amp{color:var(--gold)}

/* ── header ───────────────────────────────────────────────────────
   One left edge, top to bottom. The header and the footer sit in the same
   wrap as the body, so the mark, the first heading and the address all start
   at the same x. A centred header above left-aligned prose reads as two
   different pages stacked. Changed 5 October 2026. */
.site-head{
  padding:28px 0 0;
}
.site-head .mark{font-size:30px}
nav{
  margin:20px 0 0; display:flex; flex-wrap:wrap; gap:4px 22px;
  justify-content:flex-start;
}
nav a{
  font-size:13px; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; padding:6px 0;
  border-bottom:1px solid transparent;
}
nav a:hover{border-bottom-color:var(--gold-deep)}
nav a[aria-current=page]{color:var(--gold-deep); border-bottom-color:var(--gold-deep)}

/* ── type ───────────────────────────────────────────────────────── */
h1,h2,h3{font-family:Lora,Georgia,serif; font-style:italic; font-weight:400;
         letter-spacing:-.005em;}
h1{font-size:clamp(31px,8vw,46px); line-height:1.15; margin:0 0 20px}
h2{font-size:clamp(25px,5.6vw,33px); line-height:1.22; margin:0 0 16px}
h3{font-size:clamp(21px,4.4vw,25px); line-height:1.26; margin:0 0 10px}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}
.lede{font-size:1.08em; color:var(--ink-soft)}
.soft{color:var(--ink-soft)}
.quiet{font-size:14px; color:var(--quiet)}

.eyebrow{
  font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); margin:0 0 12px;
}
.rule{width:56px; height:1px; background:var(--gold-deep); opacity:.6; margin:0 0 18px}
.pull-close{margin-top:46px; padding-top:34px;
  border-top:1px solid rgba(154,110,18,.28); max-width:var(--measure)}
.dusk .pull-close{border-top-color:rgba(217,162,46,.34)}
.pull{
  max-width:var(--measure);
  font-family:Lora,Georgia,serif; font-style:italic;
  font-size:clamp(21px,4.8vw,26px); line-height:1.34;
  color:var(--gold-deep); margin:0; text-align:center;
}

/* ── sections ───────────────────────────────────────────────────── */
section{padding:48px 0}
section.tight{padding:48px 0}
section.first{padding-top:34px}

/* ── THE RHYTHM ───────────────────────────────────────────────────
   Two cream sections in a row stacked their bottom padding on top of the next
   one's top padding, and the gap read as a hole rather than as breathing. A
   pull quote sat in 110px of empty cream on each side. A colour change earns
   that much room, because the eye needs a beat to cross it. A continuation
   does not. So a cream section following another cream section contributes no
   top padding of its own, and every boundary on the page is one value.
   This is also why the dusk sections looked better: the blue bounded them.
   Found 5 October 2026 by measuring the sections rather than by eye. */
section:not(.dusk) + section:not(.dusk){padding-top:0}
@media (min-width:1000px){
  section{padding:76px 0}
  section.tight{padding:76px 0}
  section.first{padding-top:52px}
  /* 54px was too big for a 42rem measure: a six word line became five words
     and an orphan, which is the same fault the tiles were fixed for. At 44
     most headings land on one line and none of them orphan. */
  h1{font-size:clamp(38px,3.4vw,44px)}
  h2{font-size:clamp(28px,2.5vw,32px)}
}

/* One post, one ground. On the web the same rule becomes: a section is
   wholly cream or wholly dusk, and a dusk section is a held breath, never
   decoration. */
.dusk{
  background:linear-gradient(180deg,var(--dusk) 0%,var(--navy) 100%);
  color:var(--body-dark);
}
.dusk h1,.dusk h2,.dusk h3{color:var(--cream)}
.dusk .eyebrow{color:var(--gold-lt)}
.dusk .rule{background:var(--gold)}
.dusk .soft,.dusk .lede{color:var(--muted)}
.dusk .pull{color:var(--gold-lt)}
.dusk .quiet{color:var(--muted)}
.dusk a{color:var(--cream)}

/* ── buttons ────────────────────────────────────────────────────── */
.btn{
  font:inherit; font-weight:500; font-size:16px; cursor:pointer;
  padding:14px 24px; border-radius:4px;
  border:1px solid var(--dusk); background:var(--dusk); color:var(--cream);
  text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover{background:#15304a}
.btn.ghost{background:none; color:var(--dusk); border-color:rgba(10,30,51,.42)}
.btn.ghost:hover{background:rgba(10,30,51,.055)}
.btn.block{display:block; width:100%}
.dusk .btn{background:var(--cream); color:var(--dusk); border-color:var(--cream)}
.dusk .btn:hover{background:#fff}
.dusk .btn.ghost{background:none; color:var(--cream); border-color:rgba(248,245,238,.5)}
.dusk .btn.ghost:hover{background:rgba(248,245,238,.09)}
.btn[aria-disabled=true]{opacity:.45; pointer-events:none}

a:focus-visible,.btn:focus-visible,input:focus-visible,button:focus-visible{
  outline:2px solid var(--gold-deep); outline-offset:3px;
}
.dusk a:focus-visible,.dusk .btn:focus-visible,.dusk input:focus-visible{
  outline-color:var(--gold-lt);
}

/* ── cards ──────────────────────────────────────────────────────── */
.card{
  border:1px solid rgba(154,110,18,.3); border-radius:6px;
  padding:28px 24px; background:rgba(255,255,255,.45); margin:0 0 20px;
}
.dusk .card{border-color:rgba(217,162,46,.34); background:rgba(255,255,255,.055)}
.cards{display:grid; gap:22px}
@media (min-width:760px){
  .cards.two{grid-template-columns:1fr 1fr; align-items:start}
  .cards.two .card{display:flex; flex-direction:column; height:100%}
  .cards.two .card p:last-child{margin-top:auto; padding-top:8px}
}
/* A heading block at reading measure, inside a wide wrap. */
.narrow{max-width:var(--measure)}

/* ── the split · text one side, picture the other ─────────────────
   The page was one narrow column top to bottom, which on a laptop reads as a
   phone page with empty gutters. Two real two-column moments fix it: the hero
   and the pair of cards. Prose stays at a reading measure, because 40rem is
   about seventy characters and that is still the right line length. */
.split{display:grid; gap:26px; align-items:center}
.split > figure{margin:0}
.split img{margin:0 auto}
@media (min-width:860px){
  .split{grid-template-columns:1.25fr .75fr; gap:56px}
  .split img{margin:0}
  .split .pair-img{max-width:min(460px,100%)}
}

/* ── the spine · the four moves, same device as the tile ────────── */
.spine{list-style:none; margin:28px 0 0; padding:0}
.spine li{
  position:relative; padding:0 0 30px 62px; margin:0;
}
.spine li:last-child{padding-bottom:0}
.spine li::before{          /* the node */
  content:attr(data-n);
  position:absolute; left:0; top:2px;
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--gold-deep); background:var(--cream);
  color:var(--gold-deep); font-size:13px; font-weight:500;
  display:flex; align-items:center; justify-content:center;
}
.spine li:not(:last-child)::after{   /* the connector, edge to edge */
  content:""; position:absolute; left:19px; top:46px; bottom:8px;
  width:2px; background:var(--gold-deep); opacity:.45;
}
.dusk .spine li::before{
  border-color:var(--gold); background:transparent; color:var(--gold-lt);
}
.dusk .spine li:not(:last-child)::after{background:var(--gold)}
.spine h3{margin:0 0 4px}
.spine p{margin:0; color:var(--ink-soft)}
.dusk .spine p{color:var(--muted)}

/* ── figures ────────────────────────────────────────────────────── */
figure{margin:28px 0}
figure img{margin:0 auto}
figcaption{
  margin:14px 0 0; text-align:center; font-size:14px; color:var(--quiet);
}
.dusk figcaption{color:var(--muted)}
.pair-img{max-width:min(420px,100%)}
/* The hero portrait. She is the one selling this, so she is in the first
   screen rather than on a page somebody has to click to. Square, because a
   landscape crop beside a column of text reads as a stock photo. */
.portrait{max-width:min(360px,100%); border-radius:6px}

/* On a phone the hero stacks, and with the portrait after the copy her face
   lands a full scroll down. Most of this traffic is a phone. So on narrow
   screens the portrait goes first and goes small: her face is the first thing,
   and the headline is still inside the same screen. */
@media (max-width:859px){
  .split > figure{order:-1; margin:0 0 22px}
  .split > figure img{margin:0}          /* left, like everything else */
  .portrait{max-width:min(190px,52%)}
}
.solo-img{max-width:min(190px,100%)}

.with-figure{display:grid; gap:14px; align-items:center}
/* The character sits to the RIGHT of the words, not the left. With the image
   first, every heading beside a character started 220px in from the page's
   left edge, and the page read as misaligned without it being obvious why.
   Same rule as ONE LEFT EDGE above: the words always start at the same x, and
   the drawing is what moves. Changed 5 October 2026. */
@media (min-width:640px){
  .with-figure{
    max-width:none;                          /* escape the .wrap child cap */
    grid-template-columns:minmax(0,var(--measure)) 190px; gap:48px;
  }
  .with-figure > img{grid-column:2; grid-row:1; margin:0}
  .with-figure > div{grid-column:1; grid-row:1}
}

/* ── the author block ─────────────────────────────────────────────
   A smaller portrait beside the words, for the "who is teaching this" block
   on the two selling pages. Same rule as the characters: the words hold the
   left edge and the picture is what moves. */
.author{display:grid; gap:20px; align-items:start}
.author .portrait{max-width:min(200px,60%)}
@media (min-width:640px){
  .author{max-width:none; grid-template-columns:minmax(0,34rem) 190px; gap:44px}
  .author > img{grid-column:2; grid-row:1; margin:0}
  .author > div{grid-column:1; grid-row:1}
  .author .portrait{max-width:190px}
}

/* ── what people say ──────────────────────────────────────────────
   Quiet, not shouty. A testimonial that is styled louder than the page reads
   as advertising, and the one thing a testimonial has to be is believed. */
.said{
  margin:0 0 26px; padding:0 0 0 20px;
  border-left:2px solid var(--gold-deep); max-width:var(--measure);
}
.said p{
  font-family:Lora,Georgia,serif; font-style:italic;
  font-size:clamp(18px,2.2vw,20px); line-height:1.5; margin:0 0 10px;
  color:var(--ink-soft);
}
.said cite{
  font-style:normal; font-size:13px; font-weight:500; letter-spacing:.09em;
  text-transform:uppercase; color:var(--quiet);
}
.dusk .said{border-left-color:var(--gold)}
.dusk .said p{color:var(--body-dark)}
.dusk .said cite{color:var(--muted)}

/* ── you might be thinking ────────────────────────────────────────
   Her own voice in her own head, printed before I answer it. Quoted and
   italic so it reads as somebody else talking, with the quote glyph itself
   as the marker. Deliberately not cards: these are not features. */
.thinking{list-style:none; margin:26px 0 0; padding:0; max-width:var(--measure)}
.thinking li{
  position:relative; padding:0 0 0 32px; margin:0 0 18px;
  font-family:Lora,Georgia,serif; font-style:italic;
  font-size:clamp(17px,2.1vw,19px); line-height:1.5;
  color:var(--ink-soft);
}
.thinking li:last-child{margin-bottom:0}
.thinking li::before{
  content:"\201C"; position:absolute; left:0; top:.46em;
  font-family:Lora,Georgia,serif; font-style:normal;
  font-size:34px; line-height:0; color:var(--gold-deep);
}
.dusk .thinking li{color:var(--body-dark)}
.dusk .thinking li::before{color:var(--gold)}

/* ── a question answered plainly ──────────────────────────────────
   For the four things a cold reader has to be told before any of this
   means anything. Hairline between them, nothing else. */
.plain{margin:30px 0 0; max-width:var(--measure)}
.plain h3{margin:0 0 7px}
.plain p{margin:0}
.plain > div + div{
  margin-top:26px; padding-top:26px;
  border-top:1px solid rgba(154,110,18,.22);
}
.dusk .plain > div + div{border-top-color:rgba(217,162,46,.28)}

/* ── a plain list that still belongs here ─────────────────────────
   Gold dot, reading measure, nothing clever. Used where the content is
   genuinely a list and dressing it as cards would be a lie. */
.gets{list-style:none; margin:26px 0 0; padding:0; max-width:var(--measure)}
.gets li{
  position:relative; padding:0 0 0 28px; margin:0 0 15px;
  color:var(--ink-soft);
}
.gets li:last-child{margin-bottom:0}
.gets li::before{
  content:""; position:absolute; left:3px; top:.66em;
  width:7px; height:7px; border-radius:50%; background:var(--gold-deep);
}
.gets strong{color:var(--dusk); font-weight:500}
.dusk .gets li{color:var(--muted)}
.dusk .gets li::before{background:var(--gold)}
.dusk .gets strong{color:var(--cream)}

/* ── form ───────────────────────────────────────────────────────── */
form{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0}
input[type=email]{
  flex:1 1 13rem; min-width:0; font:inherit; font-size:16px;
  padding:14px; border-radius:4px; background:var(--cream); color:var(--dusk);
  border:1px solid rgba(10,30,51,.24);
}
input[type=email]::placeholder{color:#8C9CA6}
.dusk input[type=email]{
  background:rgba(255,255,255,.07); color:var(--cream);
  border-color:rgba(248,245,238,.3);
}
.dusk input[type=email]::placeholder{color:var(--muted)}
.hp{position:absolute; left:-9999px}

/* ── footer ─────────────────────────────────────────────────────── */
/* The rule still spans the full width; only the words inside it move. */
.site-foot{
  margin:0; padding:40px 0 48px; text-align:left;
  border-top:1px solid rgba(154,110,18,.24);
}
.site-foot .mark{font-size:24px; margin:0 0 14px}
.site-foot p{margin:0 0 8px; font-size:14px; color:var(--quiet)}
.site-foot a{color:var(--ink-soft)}
.addr{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--quiet); margin-top:16px !important;
}
.site-foot .wrap-wide > *{max-width:var(--measure)}
.skip{
  position:absolute; left:-9999px; background:var(--dusk); color:var(--cream);
  padding:12px 18px; border-radius:4px;
}
.skip:focus{left:16px; top:16px; z-index:10}


/* ── the one question invite ──────────────────────────────────────
   A question first, an email second. The chips are the app's own Reach
   list, so somebody who answers here meets the same question when they
   open the app, and it reads as continuation rather than repetition. */
.invite{
  position:fixed; inset:0; z-index:100;
  background:rgba(10,30,51,.52);
  display:flex; align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
  animation:invite-in .22s ease-out;
}
.invite[hidden]{display:none}
@keyframes invite-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){ .invite{animation:none} }

.invite-card{
  position:relative; width:100%; max-width:30rem;
  background:var(--cream); color:var(--dusk);
  border:1px solid rgba(154,110,18,.4); border-radius:8px;
  padding:34px 26px 28px; margin:auto;
  box-shadow:0 18px 50px rgba(10,30,51,.26);
}
.invite-card h2{font-size:clamp(23px,5.4vw,28px); margin:0 0 10px}
.invite-card .eyebrow{margin-bottom:10px}
.invite-card p{margin:0 0 14px}
.invite form{display:block; margin:0}

.invite-x{
  position:absolute; top:8px; right:8px;
  width:40px; height:40px; line-height:1;
  font-size:24px; font-family:inherit;
  background:none; border:0; border-radius:4px;
  color:var(--ink-soft); cursor:pointer;
}
.invite-x:hover{background:rgba(10,30,51,.07)}

.chips{display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 0}
.chip{
  font:inherit; font-size:15px; cursor:pointer;
  padding:9px 15px; border-radius:999px;
  border:1px solid rgba(10,30,51,.3); background:none; color:var(--dusk);
}
.chip:hover{background:var(--sand); border-color:var(--gold-deep)}

.invite .row{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 0}
.invite .row input[type=email]{flex:1 1 12rem}
.invite-back{
  font:inherit; font-size:14px; background:none; border:0; padding:0;
  color:var(--quiet); text-decoration:underline; cursor:pointer;
  margin-top:14px;
}