/* ifaiwereadog.com — all styling lives here. Restyle by editing tokens and this file only;
   registration depends on markup hooks, not on anything below.

   Tokens: design/package/assets/tokens.css (approved light colourway; do not substitute).
   Contrast (WCAG 2.x), text / background:
     ink      on paper 14.4  | on paper-warm 15.7   body, headings, button bg
     ink-soft on paper  5.8  | on paper-warm  6.3   placeholder, footer, input border (non-text ≥3)
     umber    on paper  4.9  | on paper-warm  5.3   domain, errors, link hover
     paper-warm on ink 15.7                         button text
     muted    on paper  3.0  -> FAILS for small text: decoration only, never text
     rule     on paper  1.5  -> hairlines only, never a control's only boundary
   Focus ring: 2px ink, 14:1 against either surface. */

:root{
  --paper:#EDE9E0;
  --paper-warm:#F5F2EC;
  --ink:#131A24;
  --ink-soft:#4F5A64;
  --slate:#4A5765;
  --muted:#8B8577;
  --umber:#8A5A1E;
  --rule:#C9C3B5;

  --font-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Newsreader",Georgia,"Times New Roman",serif;

  --cw:clamp(240px, calc(100vw - 112px), 400px);   /* cover width: everything on the cover scales from it */
  --gutter:clamp(16px, 5vw, 40px);
  --radius:3px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
main{flex:1}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;line-height:1.15;margin:0 0 .6em}
p{margin:0 0 1em}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--umber)}
svg{display:block}

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- layout ---------- */

.page{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:clamp(40px, 8vw, 96px) var(--gutter);
}
.page--home{
  display:grid;
  gap:clamp(40px, 7vw, 88px);
  justify-items:center;
  align-items:center;
}
@media (min-width:900px){
  .page--home{grid-template-columns:auto minmax(0, 400px);justify-content:center;justify-items:start}
}

/* ---------- the cover (lifted from cover-reference.html; scales from --cw) ---------- */

.cover{
  width:var(--cw);
  aspect-ratio:2/3;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  padding:calc(var(--cw)*.095) calc(var(--cw)*.09);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 2px 14px rgba(19,26,36,.16);
}
.cover-mark{width:74%;align-self:center;color:var(--ink)}
.cover-title{
  font-size:calc(var(--cw)*.132);
  line-height:.93;
  font-weight:500;
  letter-spacing:-.032em;
  margin:0;
}
.cover-sub{
  font-size:calc(var(--cw)*.046);
  line-height:1.55;
  color:var(--ink-soft);
  margin:calc(var(--cw)*.056) 0 0;
}
.cover-foot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:calc(var(--cw)*.04);
  margin-top:calc(var(--cw)*.064);
  padding-top:calc(var(--cw)*.04);
  border-top:1px solid var(--rule);
}
.cover-byline{font-size:calc(var(--cw)*.043);color:var(--ink);white-space:nowrap}
.cover-domain{font-size:calc(var(--cw)*.039);color:var(--umber);white-space:nowrap}

/* ---------- sign-up ---------- */

.signup{width:100%;max-width:400px}
.signup__title{font-size:clamp(1.5rem, 4vw, 1.875rem)}

.field{margin:0 0 20px}
.field__label{
  display:block;
  font-family:var(--font-display);
  font-size:.9375rem;
  font-weight:600;
  margin-bottom:6px;
}
.field__input{
  display:block;
  width:100%;
  min-height:48px;
  padding:10px 12px;
  font:inherit;
  color:var(--ink);
  background:var(--paper-warm);
  border:1px solid var(--ink-soft);
  border-radius:var(--radius);
}
.field__input::placeholder{color:var(--ink-soft);opacity:1}
.field__input[aria-invalid="true"]{border-color:var(--umber);box-shadow:inset 0 0 0 1px var(--umber)}
.field__error{color:var(--umber);font-family:var(--font-display);font-size:.9375rem;font-weight:500;margin:4px 0 0}
.field__error:empty{display:none}

.check{display:flex;gap:12px;align-items:flex-start}
.check__input{
  flex:none;
  width:22px;height:22px;
  margin:3px 0 0;
  accent-color:var(--ink);
}
.check__label{font-size:1rem;line-height:1.5}
.check__more{margin:6px 0 0 34px;font-size:.9375rem}
.check__more a{display:inline-block;padding:10px 0}   /* 44px touch target */

.turnstile:empty{display:none}
.turnstile{margin:0 0 20px}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:600;
  color:var(--paper-warm);
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--radius);
  cursor:pointer;
}
.button:hover{background:var(--slate);border-color:var(--slate)}
.button:disabled{cursor:progress;opacity:.75}

.form__status{margin:16px 0 0;color:var(--umber);font-family:var(--font-display);font-weight:500}
.form__status:empty{display:none}

.form-success{
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:500;
  padding:16px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

/* Focused programmatically so screen readers announce it; not interactive, so no ring. */
.form-success:focus{outline:none}

.notice{color:var(--ink-soft)}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- text pages: privacy, unsubscribe, 404 ---------- */

.page--prose,.page--notice{max-width:720px}
.page--prose h1,.page--notice h1{font-size:clamp(1.75rem, 5vw, 2.5rem)}
.page--prose h2{font-size:1.25rem;margin-top:2em}
.page--prose ul{padding-left:1.25em;margin:0 0 1em}
.page--prose li{margin-bottom:.35em}
.meta{color:var(--ink-soft);font-size:.9375rem}
.home-link{font-family:var(--font-display);font-size:.9375rem}
.page--notice form{margin:24px 0}

/* ---------- footer ---------- */

.site-footer{
  border-top:1px solid var(--rule);
  padding:20px var(--gutter);
  font-family:var(--font-display);
  font-size:.875rem;
  color:var(--ink-soft);
  text-align:center;
}
.site-footer p{margin:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:.5em}
@media (max-width:479px){.site-footer p>[aria-hidden="true"]{display:none}.site-footer p{column-gap:1.25em}}
.site-footer a{color:var(--ink-soft);display:inline-block;padding:12px 0}
.site-footer a:hover{color:var(--umber)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}