@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 */
/* Sized to be seen. The band rail carries the same clamp so the two stay equal
   and sit level, which is the rule for how they read together. */
/* aspect-ratio is doing real work here. The <svg> element carries no viewBox of
   its own — the mark arrives through <use> — so height:auto alone falls back to
   the SVG default of 150px and the width clamp never reaches the screen. The mark
   is square, so aspect-ratio:1 makes the height follow the width. */
.breathe svg{
  width:clamp(190px,23vw,400px);
  aspect-ratio:1;
  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 12s — 4s in, 2s held, 6s out.
   The exhale runs longer than the inhale, which is the part every breathing method
   agrees on, and the ratio matters more than the total count. */
.breathe.is-running .breathe-svg{ animation:six-breathe 12s ease-in-out infinite; }
@keyframes six-breathe{
  0%     { --d:0px;  }   /* empty                    */
  33.33% { --d:11px; }   /* 4s  - breathe in         */
  50%    { --d:11px; }   /* 2s  - hold, held full    */
  100%   { --d:0px;  }   /* 6s  - breathe out        */
}
@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{
  /* same clamp as the breathe ring — the two stay equal and sit level */
  width:clamp(190px,23vw,400px); 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); }

/* Home page only: the band stays off the opening screen. There the ring is the
   whole point, and the band takes room away from it. It fades in once the
   opening block has scrolled away — arriving with the headline — and stays for
   the rest of the page. Scroll back to the top and it clears out again.
   :has() scopes this to the one page that carries an .opening block, so the
   other six pages are untouched. breathe.js does the toggling. */
body:has(.opening) .band-rail{
  opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility .45s;
}
body:has(.opening) .band-rail.past-opening{
  opacity:1; visibility:visible;
}

/* 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; }
}