/* ============================================================
   Pawpetual — The Ordinary Record
   Colour: "Flow" (Keith chose it 2026-10-11). Every page is three
   zones, never a stack of coloured stripes:
     1. a dark top (the logo's own near-black)
     2. one light surface that warms slowly from ivory to cream
     3. a dark finale: closing lines, waitlist and footer together
   Colour lives in the words, not in blocks. The logo's teal-to-amber
   runs through as a small mark over each idea. Teal leads, mint
   carries the ordinary days, orange means the exception.
   ============================================================ */

:root{
  --paper:#fbf8f2;          /* ivory — top of the light surface */
  --paper-warm:#f0e7d4;     /* brand cream — bottom of the light surface */
  --ink:#14201f;
  --ink-soft:#4a524c;
  --ink-mute:#625f56;       /* 5.2:1 on cream, so small print stays readable all the way down */
  --teal:#128081;
  --teal-deep:#0e6a6b;      /* small teal text on the light surface (plain teal is under 4.5:1 on cream) */
  --navy:#013a4f;
  --mint:#9fcfc9;
  --orange:#e08000;         /* the exception, in the home page figure */
  --amber:#d38125;          /* Our story's last line, and the thread */
  --logo-ground:#080806;    /* the near-black the logo is drawn on; every dark zone uses it */
  --on-dark:#f0e7d4;        /* headings on dark */
  --on-dark-soft:#b9b2a3;   /* body text on dark */
  --on-dark-mute:#8d877a;   /* small print on dark */
  --dark-rule:#24231f;
  --rule:#e6dcc8;
  --rule-strong:#d3c4a6;
  --thread:linear-gradient(90deg,var(--teal) 0%,var(--amber) 100%);

  --read:42rem;             /* the reading column — the page is built on this */
  --shell:60rem;            /* header, footer, anything that spans */
  --pad:1.5rem;
  --gap:clamp(2.5rem,5vw,3.5rem);   /* tightened 2026-10-11 at Keith's request (was 3–4.75rem) */
}

*,*::before,*::after{box-sizing:border-box}

/* The page edge beyond the content (overscroll) stays dark. */
html{-webkit-text-size-adjust:100%;background:var(--logo-ground);scroll-behavior:smooth}

/* The light surface: one gradient for the whole page. The dark top and
   finale paint over its ends, so what shows is ivory warming to cream. */
body{
  margin:0;
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 22%,var(--paper-warm) 80%,var(--paper-warm) 100%);
  color:var(--ink);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:2px solid var(--teal);outline-offset:3px;border-radius:2px;
}
/* teal is too dark to see against black; the dark zones use mint */
.masthead :focus-visible,.band :focus-visible,.signup :focus-visible,
.site-foot :focus-visible,.beat-open :focus-visible,.beat-close :focus-visible{outline-color:var(--mint)}

/* Two containers, and only two. `shell` spans; `read` is the text column.
   Both are centred, so no section ever hugs one edge with dead space
   opposite it. */
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.read{width:100%;max-width:var(--read);margin-inline:auto;padding-inline:var(--pad)}

/* ---------- the thread ----------
   The logo's teal-to-amber as a short mark over each idea on the light
   surface (and over the kicker in the dark finale). It is what ties the
   page together, so it appears every time, in the same size. */
.eyebrow::before,.kicker::before,.beat-in::before{
  content:"";display:block;width:2.75rem;height:3px;border-radius:3px;
  background:var(--thread);margin:0 0 1.15rem;
}
.hero .eyebrow::before{margin-inline:auto}
.beat-open .beat-in::before,.beat-close .beat-in::before{content:none}

/* ---------- masthead ----------
   The logo is drawn on near-black (#080806 is the ground baked into the
   vector master) and its gradient is strongest there. On paper the cream
   half of the wordmark — "petual" — all but vanishes. So the masthead is
   a dark full-bleed band and the real lockup file sits in it, unmodified.
   Nothing here re-draws the logo in CSS. */
.masthead{background:var(--logo-ground);position:relative}
/* the top bar ends with the logo's own teal-to-amber, so it never runs into a dark section below it */
.masthead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--thread)}
.site-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:1.35rem 0 1.25rem;
}
.brand{display:block;line-height:0}
.brand img{width:auto;height:5.5rem}     /* wordmark stays legible at this height */
.brand:hover{text-decoration:none}
.site-nav{display:flex;align-items:center;gap:1.6rem;font-size:.98rem}
.site-nav a{color:#cfe0dd}
.site-nav a:hover{color:var(--mint)}

/* ---------- hero (home page) ---------- */
.hero-band{background:transparent}
.hero{text-align:center;padding:clamp(2.25rem,4.5vw,3.25rem) 0 clamp(2rem,4vw,2.75rem)}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal-deep);margin:0 0 1rem;
}
h1{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;font-size:clamp(2.1rem,5.4vw,3.25rem);line-height:1.1;
  letter-spacing:-.02em;margin:0;text-wrap:balance;color:var(--ink);
}
h1 .quiet{display:block;color:var(--teal)}
.hero-sub{
  font-size:clamp(1.02rem,1.9vw,1.18rem);color:var(--ink-soft);
  max-width:30rem;margin:1.1rem auto 0;line-height:1.55;text-wrap:pretty;
}

/* ---------- the record: the brand ----------
   Small multiples, one panel per pet, one shared twelve-week x-axis.
   The point is NOT a single odd day — it is that one animal's level
   left its established range and stayed there while the other's did
   not. A one-off cannot show that; duration can. The band is each
   pet's own usual range; the orange stretch is the part that persisted.
   Every element is direct-labelled, so nothing is carried by colour
   alone (brand orange is 2.8:1 on paper — labels are the required
   relief). Label text wears ink tokens, never the mark colour. */
.record{display:block;width:100%;height:auto}
.r-pet{font:600 16.5px Figtree,sans-serif;fill:var(--ink)}
.r-band{fill:var(--mint);opacity:.4}
.r-newband{fill:var(--orange);opacity:.14}
.r-bandlabel{font:400 13px Figtree,sans-serif;fill:var(--ink-mute)}
.r-line{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-drift{stroke:var(--orange);stroke-width:2.75}
.r-mark{stroke:var(--orange);stroke-width:1;stroke-dasharray:3 3;opacity:.65}
.r-note{font:600 13.5px Figtree,sans-serif;fill:var(--ink-soft)}
.r-axis{stroke:var(--rule-strong);stroke-width:1}
.r-tick{font:400 13px Figtree,sans-serif;fill:var(--ink-mute)}

.hero-record{margin:2.25rem auto 0}
.hero-caption{margin:.9rem auto 0;font-size:.88rem;color:var(--ink-mute);text-wrap:balance}
.hero-caption b{color:var(--ink-soft);font-weight:600}
.caption-note{display:block;margin-top:.3rem;font-size:.8rem;font-style:italic}

/* ---------- sections ----------
   No borders and no tinted blocks between sections: they all sit on the
   one light surface, and the thread mark over each kicker does the
   separating. `.tint` is kept as a class but no longer paints anything. */
section{padding-block:var(--gap)}
.tint{background:transparent}
.kicker{
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-mute);margin:0 0 1rem;
}
h2{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;font-size:clamp(1.6rem,3.4vw,2.15rem);line-height:1.22;
  letter-spacing:-.015em;margin:0 0 1.1rem;text-wrap:balance;color:var(--ink);
}
h3{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:600;font-size:1.2rem;line-height:1.3;margin:2.25rem 0 .6rem;color:var(--ink);
}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
.lead{font-size:1.15rem;color:var(--ink-soft)}
.pull{font-weight:600;color:var(--ink)}
.center{text-align:center}

/* ---------- the finale starts here (home page) ----------
   The closing band is the first part of the dark finale, so it shares the
   logo's near-black with the waitlist and footer below it. */
.band{background:var(--logo-ground);color:var(--on-dark-soft);padding-block:var(--gap)}
.band h2{color:var(--on-dark)}
.band p{color:var(--on-dark-soft)}
.band .kicker{color:var(--on-dark-mute)}
.band .pull{color:var(--on-dark)}

/* ---------- pull quote ---------- */
blockquote{
  margin:0;padding:0 0 0 1.4rem;border-left:3px solid var(--mint);
  font-family:"Source Serif 4",Georgia,serif;font-size:1.18rem;line-height:1.5;
  color:var(--ink-soft);font-style:italic;
}
blockquote cite{
  display:block;margin-top:.9rem;font-family:Figtree,sans-serif;font-size:.9rem;
  font-style:normal;color:var(--ink-mute);
}
blockquote + p{margin-top:1.6rem}

/* ---------- waitlist form (dark finale) ---------- */
.signup{padding-block:var(--gap);text-align:center;background:var(--logo-ground)}
.signup h2{color:var(--on-dark)}
.signup p{color:var(--on-dark-soft)}
.signup p{text-wrap:balance}
.signup .intro{font-size:1.15rem;color:var(--on-dark)}
.wl-form{display:flex;gap:.6rem;max-width:27rem;margin:1.75rem auto 0;flex-wrap:wrap}
.wl-form input[type=email]{
  flex:1 1 15rem;min-width:0;padding:.85rem 1rem;font:inherit;font-size:1rem;
  color:var(--on-dark);background:#141413;border:1px solid #34322d;border-radius:.4rem;
}
.wl-form input[type=email]::placeholder{color:var(--on-dark-mute)}
.btn{
  flex:0 0 auto;padding:.85rem 1.5rem;font:inherit;font-size:1rem;font-weight:600;
  color:#ffffff;background:var(--teal);border:0;border-radius:.4rem;cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{background:var(--teal-deep)}
a.btn{display:inline-block;text-decoration:none}
a.btn:hover{text-decoration:none;color:#ffffff}
.beat-cta{margin:2rem 0 0}
.btn[disabled]{opacity:.6;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{min-height:1.5rem;margin:1rem 0 0;font-size:.98rem;font-weight:600;color:var(--mint)}
.form-msg.error{color:var(--orange)}
.signup .micro{font-size:.88rem;color:var(--on-dark-mute);margin:.7rem 0 0}

/* ---------- legal pages ---------- */
.legal{padding-block:var(--gap)}
.legal h1{font-size:clamp(1.9rem,4.2vw,2.5rem);text-align:left}
.legal .updated{color:var(--ink-mute);font-size:.95rem;margin-top:.5rem}
.legal h2{font-size:1.2rem;margin-top:2.2rem}
.legal ul{margin:0 0 1.1rem;padding-left:1.2rem;color:var(--ink-soft)}
.legal li{margin-bottom:.45rem}
.legal p{color:var(--ink-soft)}
.legal a{color:var(--teal-deep)}

/* ---------- footer (dark finale) ---------- */
.site-foot{background:var(--logo-ground);padding:2.5rem 0 3.5rem;font-size:.9rem}
.foot-note{color:var(--on-dark-mute);margin:0 0 1rem}
/* after the waitlist the footer sits on the same black, so a hairline marks where it starts */
.signup + .site-foot{padding-top:0}
.signup + .site-foot .foot-note{padding-top:2.5rem;border-top:1px solid var(--dark-rule)}
.foot-row{display:flex;flex-wrap:wrap;gap:1.25rem;align-items:center;
  justify-content:space-between;color:var(--on-dark-mute)}
.foot-links{display:flex;gap:1.25rem}
.foot-links a{color:var(--on-dark-mute)}
.foot-links a:hover{color:var(--on-dark)}

/* ============================================================
   Our story — one idea at a time, said large, then left alone.
   Dark opening (lit from below in teal), the light surface, a dark
   close whose last line is the page's only amber. The close runs
   straight into the waitlist and footer.
   ============================================================ */
.beat{
  display:grid;place-items:center;text-align:center;
  padding:clamp(3rem,6vw,4.25rem) var(--pad);   /* tightened 2026-10-11 (was 4.5–7rem) */
}
.beat-open + .beat{padding-top:clamp(4rem,8vw,5.5rem)}
.beat:has(+ .beat-close){padding-bottom:clamp(4rem,8vw,5.5rem)}
.beat-in{max-width:44rem;margin-inline:auto}
.beat-in::before{margin:0 auto 1.9rem}

.beat-open{
  min-height:min(86vh,52rem);padding-block:clamp(4.5rem,10vw,8rem);
  background:
    radial-gradient(52rem 24rem at 50% 100%, rgba(18,128,129,.30) 0%, rgba(18,128,129,0) 70%),
    var(--logo-ground);
}
.beat-close{
  padding-block:clamp(4rem,8vw,6rem);
  background:var(--logo-ground);
}

.say{
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.08;letter-spacing:-.025em;
  color:var(--ink);margin:0 auto;max-width:18ch;text-wrap:balance;
}
.say-m{font-size:clamp(1.85rem,4.4vw,3.1rem);max-width:22ch}
.say .ln{display:block}
.say .accent{color:var(--teal)}
.say .quiet{display:block;color:var(--teal)}
.say.soft{margin-top:1.4rem}
.say.gap{margin-top:clamp(3rem,7vw,5rem)}
.aside{
  font-size:clamp(1.08rem,2vw,1.3rem);line-height:1.55;color:var(--ink-soft);
  max-width:30rem;margin:1.4rem auto 0;text-wrap:pretty;
}
.lead-in{margin:0 auto 2.4rem}
.beat-turn .say{color:var(--navy)}
.beat-turn .aside:first-child{margin:0 auto 1.6rem}

.heard{list-style:none;margin:0;padding:0}
.heard li{
  font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.6rem,3.8vw,2.6rem);line-height:1.3;color:var(--navy);
}
.heard li + li{margin-top:.55rem}

.beat-open .say,.beat-close .say{color:var(--on-dark)}
.beat-open .aside{color:var(--on-dark-soft)}
.beat-close .say.soft{color:var(--amber)}
.keynote + .signup{padding-top:1rem}

/* The figure scales with its container, so SVG user units shrink with it.
   At ~342px wide the 11-unit labels render near 5px — unreadable on a real
   phone even though a 3x screenshot looks fine. Bump the type and strokes
   in user units so the rendered size stays put. */
@media (max-width:44rem){
  .r-pet{font-size:26px}
  .r-bandlabel,.r-tick{font-size:21px}
  .r-note{font-size:22px}
  .r-line{stroke-width:3.4}
  .r-drift{stroke-width:4.4}
  .r-mark{stroke-width:1.8}
  .beat-open{min-height:0;padding-block:4.5rem 5rem}   /* phone: the story starts on the first screen */
  .beat-close{padding-block:4rem}
  .heard li{font-size:1.4rem}
}

@media (max-width:34rem){
  .site-head{flex-direction:column;align-items:flex-start;gap:.85rem;padding-bottom:1rem}
  .site-nav{gap:1.4rem;font-size:.95rem;width:100%}
  .brand img{height:4.25rem}
  .hero-record{margin-top:2rem}
  .wl-form{flex-direction:column}
  .wl-form input[type=email],.wl-form .btn{flex:1 1 auto;width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}