@property --d{syntax:"<length>";inherits:true;initial-value:0px}

/* SIX — Sixwatch, LLC
   Black and white. No web fonts, no external requests.
   The tick marks from the mark are the design system. */

:root{
  --ink:#0a0a0a;
  --paper:#ffffff;
  --quiet:#5c5c5c;
  --hair:#d8d8d8;
  --alert:#c1121f;
  /* reading column grows with the window instead of sitting in a fixed strip */
  --measure:clamp(19rem, 4rem + 44vw, 46rem);
  /* measured off the rendered page, not guessed */
  --head:74px;
  --crisis:45px;
}
@media (prefers-color-scheme: dark){
  :root{ --ink:#f2f2f2; --paper:#0a0a0a; --quiet:#a0a0a0; --hair:#2e2e2e; --alert:#ff5d5d; }
}
:root[data-theme="dark"]{ --ink:#f2f2f2; --paper:#0a0a0a; --quiet:#a0a0a0; --hair:#2e2e2e; --alert:#ff5d5d; }
:root[data-theme="light"]{ --ink:#0a0a0a; --paper:#ffffff; --quiet:#5c5c5c; --hair:#d8d8d8; --alert:#c1121f; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  font-size:clamp(1.05rem,0.95rem + 0.42vw,1.32rem);
  line-height:1.62;
}
img{ max-width:100%; height:auto; display:block; }

.skip{
  position:absolute; left:-9999px;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
}
.skip:focus{ left:1rem; top:1rem; z-index:99; }

/* ── header — pinned to the top, always visible ──────── */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; flex-wrap:wrap; gap:.6rem 2rem;
  align-items:center; justify-content:space-between;
  padding:.9rem clamp(1.1rem,5vw,3rem);
  padding-top:calc(.9rem + env(safe-area-inset-top, 0px));
  background:var(--paper);
  border-bottom:1px solid var(--hair);
  box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit; }
.mark{ width:44px; height:44px; flex:none; }
.wordmark{ font-size:1.14rem; letter-spacing:.12em; text-transform:uppercase; }
.llc{ color:var(--quiet); letter-spacing:.06em; }

.site-head nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.site-head nav a{
  color:var(--quiet); text-decoration:none;
  font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:1px solid transparent; padding-bottom:2px;
}
.site-head nav a:hover,.site-head nav a:focus-visible{ color:var(--ink); border-color:var(--ink); }

/* ── layout ─────────────────────────────────────────── */
main{ padding:var(--head) clamp(1.1rem,5vw,3rem) 0; }
section{ max-width:var(--measure); margin:0 auto; padding:clamp(3rem,8vw,5.5rem) 0; }
.rule{
  border:0; border-top:1px solid var(--hair);
  max-width:var(--measure); margin:0 auto;
}

h1,h2,h3{ line-height:1.22; font-weight:400; margin:0 0 1rem; }
h1{ font-size:clamp(1.65rem,1rem + 3.1vw,3.5rem); letter-spacing:-.015em; }
h2{
  font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--quiet); margin-bottom:2rem;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
h3{ font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); margin-bottom:.9rem; }
p{ margin:0 0 1.15rem; }

.eyebrow{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--quiet); margin-bottom:1.8rem;
}
.hero h1{ margin-bottom:2rem; }
.lede{ font-size:1.14em; }
.note{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.9rem; line-height:1.6; color:var(--quiet);
}

/* ── story ──────────────────────────────────────────── */
.pull{
  font-size:1.24em; line-height:1.42;
  margin:2rem 0; padding-left:1.3rem;
  border-left:2px solid var(--ink);
}
.signature{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.88rem; color:var(--quiet); margin-top:2rem;
}

/* quoted speech — Chad's voice */
.said{
  font-style:italic;
  margin:0 0 1.15rem;
  padding-left:1.3rem;
  border-left:1px solid var(--hair);
}

/* ── sub-headings inside a long section ─────────────── */
.device h3,.science h3{ margin-top:3.2rem; }
.device h3:first-of-type{ margin-top:1rem; }

/* ── sources ────────────────────────────────────────── */
.refs{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid var(--hair);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:.86rem;
}
.refs summary{
  cursor:pointer; color:var(--quiet);
  letter-spacing:.14em; text-transform:uppercase; font-size:.78rem;
}
.refs summary:hover{ color:var(--ink); }
.refs ul{ list-style:none; padding:0; margin:1.2rem 0 0; }
.refs li{ margin-bottom:.7rem; line-height:1.55; color:var(--quiet); }
.refs a{ color:var(--ink); }

.band{ margin:2rem 0 0; }
.band img{
  width:100%; background:#fff; border:1px solid var(--hair); padding:1.5rem;
}
.band figcaption{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.86rem; line-height:1.6; color:var(--quiet); margin-top:.9rem;
}

/* ── lists ──────────────────────────────────────────── */
.plain,.paths{ list-style:none; padding:0; margin:0 0 1.6rem; }
.plain li,.paths li{
  position:relative; padding-left:1.5rem; margin-bottom:1rem;
}
.plain li::before,.paths li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.7rem; height:1px; background:var(--ink);
}

/* ── video ──────────────────────────────────────────── */
.frame{ position:relative; aspect-ratio:16/9; border:1px solid var(--hair); }
.frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── breathe ────────────────────────────────────────── */
/* sits at the very top of the page, centered */
.breathe-section{
  text-align:center;
  max-width:none;
  padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2rem,5vw,3.5rem);
}
.breathe{
  display:inline-flex; flex-direction:column; align-items:center; gap:1rem;
  background:none; border:0; padding:1rem; cursor:pointer; color:inherit;
  font:inherit;
}
/* the in-flow ring is gone; the rail sizes its own mark */
.breathe svg{
  width:clamp(130px,17vw,280px);
  height:auto;
}
.breathe-invite{
  max-width:32rem; margin:1.4rem auto 0;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.9rem; line-height:1.6; color:var(--quiet);
}
.breathe-word{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--quiet);
}
.breathe:focus-visible{ outline:2px solid var(--ink); outline-offset:6px; }


/* ── contact ────────────────────────────────────────── */
.contact-line{ font-size:1.1em; }
.contact-line a{ color:var(--ink); }

/* ── closing ────────────────────────────────────────── */
.closing{
  max-width:var(--measure); margin:0 auto;
  padding:clamp(3.5rem,9vw,6rem) 0;
  text-align:center; font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);
  letter-spacing:.02em; border-top:1px solid var(--hair);
}

/* ── footer ─────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--hair);
  padding:clamp(2rem,6vw,3.5rem) clamp(1.1rem,5vw,3rem);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.site-foot > *{ max-width:var(--measure); margin-left:auto; margin-right:auto; }
.legal{ font-size:.82rem; line-height:1.6; color:var(--quiet); }

/* ── crisis bar — red, fixed to the bottom of the screen, always visible ── */
.crisis-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--paper);
  border-top:2px solid var(--alert);
  padding:.65rem clamp(.9rem,4vw,2rem);
  padding-bottom:calc(.65rem + env(safe-area-inset-bottom, 0px));
  text-align:center;
  box-shadow:0 -6px 18px rgba(0,0,0,.06);
}
.crisis-bar p{
  margin:0; color:var(--alert);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(.82rem,.76rem + .18vw,.95rem);
  line-height:1.45;
}
.crisis-bar a{ color:var(--alert); font-weight:700; text-underline-offset:.16em; }
.crisis-bar .vet{ white-space:nowrap; }
@media (max-width:34rem){
  .crisis-bar .vet{ display:block; white-space:normal; }
}
/* clear the two pinned bars: header above, crisis line below */
body{ padding-top:4.9rem; padding-bottom:4.6rem; }
@media (max-width:52rem){ body{ padding-top:7.4rem; } }
@media (max-width:34rem){ body{ padding-top:7.4rem; padding-bottom:6.4rem; } }

a{ color:var(--ink); text-underline-offset:.18em; }

/* ── the breath ─────────────────────────────────────── */
/* Chad's mark, used whole. --d carries the tick ring straight out along each hour
   line and back; nothing resizes. A deep breath over 16s, so the movement carries the
   time and the hold only punctuates it:
   6s breathing in, 2s pause, 7s breathing out, 1s rest before the next one. */
.breathe.is-running .breathe-svg{ animation:six-breathe 16s ease-in-out infinite; }
@keyframes six-breathe{
  0%   { --d:0px;  }   /* empty                    */
  38%  { --d:11px; }   /* 6s  - deep breath in     */
  50%  { --d:11px; }   /* 2s  - pause, held full   */
  94%  { --d:0px;  }   /* 7s  - deep breath out    */
  100% { --d:0px;  }   /* 1s  - rest, then again   */
}
@media (prefers-reduced-motion: reduce){
  .breathe.is-running .breathe-svg{ animation:none; }
}

/* ── about us ───────────────────────────────────────── */
.about{ max-width:var(--measure); margin:0 auto; }
.about h1{ margin-bottom:2.6rem; }
.bio{ margin:0 0 2.8rem; }
/* a person's name is a name, not the small uppercase eyebrow h2 carries elsewhere */
.bio h2{
  font-family:inherit; text-transform:none; letter-spacing:-.01em;
  color:var(--ink); font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);
  margin:0 0 .25rem;
}
.bio-role{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--quiet); margin:0 0 1.3rem;
}
.bio + .bio{ border-top:1px solid var(--hair); padding-top:2.8rem; }

/* the opening is a screen of its own: Chad's line and the ring, nothing else showing */
.opening{
  position:relative;
  min-height:calc(100vh - var(--head) - var(--crisis));
  display:grid; place-items:center;
}
.opening .problem{
  position:absolute; top:clamp(1.2rem,4vh,2.6rem); left:0; right:0; padding:0;
}
.opening .breathe-section{ padding:0; margin:0; }

/* Chad's problem statement, first thing on the site */
.problem{ padding-top:0; padding-bottom:0; }
.problem .pull{ margin:0; font-size:1.3em; }

/* ── the band rail — the device stays in view ────────── */
.band-rail{
  position:fixed; right:clamp(.4rem,1.6vw,1.5rem); z-index:64;
  top:calc(var(--head) + (100vh - var(--head) - var(--crisis)) / 2);
  transform:translateY(-50%);
}
.band-rail a{
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--quiet);
}
.band-rail img{
  width:clamp(130px,17vw,280px); height:auto;
  background:#fff; border:1px solid var(--hair); padding:.5rem;
}
.band-rail span{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
}
.band-rail a:hover span,.band-rail a:focus-visible span{ color:var(--ink); }

/* narrow screens: the reading column takes the width, so the band sits low in the
   corner above the crisis line rather than over the text */
@media (max-width:1000px){
  .band-rail{ top:auto; bottom:calc(3.4rem + env(safe-area-inset-bottom,0px)); transform:none; }
  .band-rail img{ width:74px; padding:.35rem; }
  .band-rail span{ display:none; }
}

/* ── the video rail — the overview stays in view, opposite the band ──── */
.video-rail{
  position:fixed; left:clamp(.4rem,1.6vw,1.5rem); z-index:64;
  top:calc(var(--head) + (100vh - var(--head) - var(--crisis)) / 2);
  transform:translateY(-50%);
  width:clamp(130px,17vw,280px);
}
.video-rail .video-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  background:#fff; border:1px solid var(--hair); padding:0;
}
.video-rail .video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-max{
  display:block; width:100%; margin-top:.5rem; padding:0;
  background:none; border:0; cursor:pointer; text-align:center;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--quiet);
}
.video-max:hover,.video-max:focus-visible{ color:var(--ink); }

.video-modal{
  padding:0; background:#fff; border:1px solid var(--hair);
  width:min(92vw,1200px); max-width:none;
}
.video-modal::backdrop{ background:rgba(0,0,0,.72); }
.video-modal-inner{ position:relative; aspect-ratio:16/9; width:100%; }
.video-modal-inner iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-close{
  display:block; width:100%; padding:.7rem; cursor:pointer;
  background:none; border:0; border-top:1px solid var(--hair);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--quiet);
}
.video-close:hover,.video-close:focus-visible{ color:var(--ink); }

/* narrow screens: the reading column takes the width, so the video sits low in
   the left corner above the crisis line, matching the band on the right */
@media (max-width:1000px){
  .video-rail{
    top:auto; bottom:calc(3.4rem + env(safe-area-inset-bottom,0px));
    transform:none; width:120px;
  }
  .video-max{ display:none; }
}