:root{
  --navy:#17232c;--raised:#1f2e39;--paper:#f4f0e8;--muted:#a9a397;--rule:#2f3e49;--gold:#d39a43;--gold-hover:#dfa751;--gold-press:#bd8735;
  --oxblood:#672d36;--teal-tile:#427578; /* brand teal, a touch deeper so 18px cream text reads at 4.5:1 */
  --serif:Castoro,"Iowan Old Style",Georgia,serif;--sans:Montserrat,"Helvetica Neue",Arial,sans-serif;--hand:Caveat,"Segoe Script",cursive;
  --gutter:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scrollbar-color:var(--rule) var(--navy);background:var(--navy)}
body{margin:0;background:var(--navy);color:var(--paper);font:400 15px/24px var(--sans);overflow-wrap:break-word}
::selection{background:var(--gold);color:var(--navy)}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
h1,h2,p{margin:0}
[hidden]{display:none!important}
.arr{width:24px;height:10px;flex:none;fill:none;stroke:currentColor;stroke-width:1.25;transition:transform .25s ease-out}

/* Hero: the photo graded toward the palette, her name stacked on the dark of her shirt */
.hero{position:relative;height:min(330px,70vh);overflow:hidden;background:var(--navy)}
.hero-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(.72) brightness(.7) sepia(.18)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,35,44,.28) 0%,rgba(23,35,44,.12) 30%,rgba(23,35,44,.72) 66%,#17232c 97%)}
.wordmark{position:absolute;z-index:2;left:var(--gutter);bottom:10px;font:400 33px/38px var(--serif);letter-spacing:.1em;text-transform:uppercase}

/* First screen */
.content{padding:0 var(--gutter)}
.pause{margin:10px 0 16px;font:italic 400 20px/28px var(--serif)}
.pause span{display:block}
.btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:54px;padding:12px;border:0;border-radius:2px;background:var(--gold);color:var(--navy);font:600 12px/16px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s ease-out}
.btn:active{background:var(--gold-press)}
.btn:disabled{opacity:.7;cursor:progress}

/* The chart stays out of sight until someone asks for it */
/* Warm paper, because Neutrino's chart is drawn for a light background */
.chart{display:none;margin:8px calc(var(--gutter) * -1) 0;padding:20px var(--gutter);background:var(--paper);color:var(--navy);scroll-margin-top:0}
.chart .note{color:#5a6265}
.chart .note a,.chart .retry,.chart .close{color:var(--navy)}
.chart a:focus-visible,.chart button:focus-visible{outline-color:var(--navy)}
.chart.open,.chart:target{display:block}
.chart:focus{outline:0}
.chart-slot neutrino-widget{display:block;width:100%;min-height:40px}
.chart-status{margin-bottom:8px}
.chart .note{margin-top:12px}
.retry,.close{min-height:44px;padding:10px 0;border:0;background:none;color:var(--paper);font:400 13px/20px var(--sans);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--muted);cursor:pointer}
.close{display:none;margin-top:4px}
.js .close{display:inline-block}
.retry{display:block}

/* Tiles, on the brand's rotating grounds */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.tile{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-height:128px;min-width:0;padding:14px 12px;color:var(--paper);text-decoration:none;font:400 24px/30px var(--serif);letter-spacing:.08em;text-transform:uppercase;transition:filter .25s ease-out}
.tile span{text-wrap:balance}
.tile:active{filter:brightness(1.18)}
#mainCta{scroll-margin-top:8px}
.t-oxblood{background:var(--oxblood)}
.t-teal{background:var(--teal-tile)}
.t-oxblood,.t-teal{font-size:18px;line-height:26px;letter-spacing:.05em}
@media (max-width:359px){.tiles{grid-template-columns:1fr}.tile{min-height:96px}}
@media (hover:hover){
  .btn:hover{background:var(--gold-hover)}
  .btn:hover .arr,.tile:hover .arr{transform:translateX(4px)}
  .tile:hover{filter:brightness(1.12)}
}

/* Sections */
.story,.panel{scroll-margin-top:24px}
.story{margin-top:56px;max-width:62ch}
.panel{margin:56px calc(var(--gutter) * -1) 0;padding:32px var(--gutter);background:var(--raised)}
h2{font:400 32px/38px var(--serif);text-wrap:balance}
.rule{display:block;width:32px;height:2px;margin:12px 0 18px;background:var(--gold)}
.story p+p,.panel p+p{margin-top:14px}
.line{font:italic 400 22px/30px var(--serif);text-wrap:balance}
.story .line{margin:24px 0}
.note{font-size:13px;line-height:20px;color:var(--muted)}

.form{display:grid;gap:8px;margin:20px 0 12px}
.form label{font:600 11px/16px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.form input{width:100%;min-height:50px;padding:12px 14px;border:1px solid #66747e;border-radius:2px;background:var(--navy);color:var(--paper);font:400 16px/24px var(--sans);caret-color:var(--gold)}
.form input::placeholder{color:var(--muted)}
.form .btn{justify-content:center}
.form-msg{font-size:15px;line-height:24px}

.foot{padding:40px 0 calc(80px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:13px;line-height:20px}
.foot a{display:inline-block;padding:12px 0;text-underline-offset:3px;text-decoration-color:var(--rule)}
.hand{margin-bottom:8px;font:500 30px/36px var(--hand);color:var(--gold);text-wrap:balance}

/* Tablet: one centered column, her name lined up with it */
@media (min-width:600px) and (max-width:899px){
  .content{max-width:560px;margin:0 auto}
  .wordmark{left:calc(50% - 280px + var(--gutter))}
  .hero{height:min(420px,70vh)}
  .hero-photo{object-position:50% 16%}
}

/* Laptop: her photo holds the left half, the page reads on the right */
@media (min-width:900px){
  .btn{padding:12px 20px}
  .layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero{position:sticky;top:0;height:100vh}
  .hero-photo{object-position:50% 20%}
  .wordmark{left:48px;bottom:40px;font-size:64px;line-height:68px}
  .content{width:100%;max-width:600px;padding:64px 48px}
  .pause{margin:0 0 28px;font-size:30px;line-height:38px}
  .chart{margin:8px 0 0;padding:24px}
  .tile{min-height:170px;padding:20px}
  .t-oxblood,.t-teal{font-size:24px;line-height:30px;letter-spacing:.08em}
  .panel{margin:64px 0 0;padding:40px}
  .story{margin-top:64px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* Small links inside notes, with room to tap */
.note a{display:inline-block;margin:-12px 0;padding:12px 0;color:var(--paper);text-underline-offset:3px}

/* Privacy page */
.legal{max-width:calc(62ch + 32px);margin:0 auto;padding:16px var(--gutter) calc(80px + env(safe-area-inset-bottom,0px));font-size:16px;line-height:26px}
.back{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:24px;font-size:13px;line-height:20px;text-decoration:none}
.back .arr{transform:scaleX(-1);color:var(--gold)}
.legal h1{font:400 40px/46px var(--serif);text-wrap:balance}
.legal h2{margin-top:40px;font-size:24px;line-height:32px}
.legal p,.legal ul{margin:12px 0 0}
.legal ul{padding-left:20px}
.legal li+li{margin-top:8px}
.legal .rule{margin-bottom:0}
.legal .updated{margin-top:32px}
.legal p a,.legal li a{text-underline-offset:3px;text-decoration-color:var(--gold)}
@media (min-width:900px){.legal{padding-top:48px}.legal h1{font-size:48px;line-height:56px}}