/* ==========================================================================
   DAILY PAWS — CLAUDE EDITION
   primitives.css · the shared vocabulary: display type, eyebrows, buttons,
                    quiet links, the page shell, and the scroll reveal
   --------------------------------------------------------------------------
   These were defined in core.css and therefore existed on the front page
   alone, which is why every other page grew its own button family and its own
   heading pair instead of reusing them. They now load everywhere.

   Self-contained, like nav.css and footer.css: anything that would otherwise
   be supplied by core.css's reset is stated outright here, because the pages
   that load this file do not all load core.css. Tokens: shared/css/tokens.css.
   ========================================================================== */

/* ── Display type ──────────────────────────────────────────────────────── */
.dp-display{
  font-family:var(--f-display);
  font-weight:600;
  font-optical-sizing:auto;
  letter-spacing:-.022em;
  line-height:.98;
  text-wrap:balance;
  margin:0;
}
.dp-display em{ font-style:italic; font-weight:500 }
.dp-display .accent{ color:var(--rust) }

h1.dp-display{ font-size:clamp(2.7rem,7.4vw,5.9rem) }
h2.dp-display{ font-size:clamp(2.05rem,4.4vw,3.6rem); line-height:1.02 }
h3.dp-display{ font-size:clamp(1.75rem,3.2vw,2.85rem); line-height:1.04 }

/* These are paragraphs, so they state their own type and colour rather than
   inheriting whatever the host page's body sets. */
.dp-lede{
  font-family:var(--f-sans);
  font-size:clamp(1.0625rem,.55vw + .95rem,1.22rem);
  line-height:1.58;
  font-weight:400;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
}
.dp-body{
  font-family:var(--f-sans);
  font-size:1rem; line-height:1.62; font-weight:400;
  color:var(--ink-soft); max-width:58ch; margin:0;
}

.dp-eyebrow{
  font-family:var(--f-mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin:0;
}
/* The leading rule is part of the mark, not decoration: it anchors the label
   to the column edge. --bare drops it where the label is centred. */
.dp-eyebrow::before{
  content:""; width:22px; height:1px; background:currentColor; opacity:.5; flex:none;
}
.dp-eyebrow--bare::before{ display:none }
.dp-rule{ height:1px; background:var(--line); border:0 }

/* On dark grounds the pair lightens rather than changing colour. */
.dp-dark .dp-display, .dp-on-night .dp-display{ color:var(--cream) }
.dp-dark .dp-eyebrow, .dp-on-night .dp-eyebrow{ color:var(--cream-mute) }
.dp-dark .dp-lede, .dp-on-night .dp-lede,
.dp-dark .dp-body, .dp-on-night .dp-body{ color:rgba(244,234,214,.78) }

/* ── Layout ────────────────────────────────────────────────────────────── */
.dp-shell{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--gutter) }
.dp-section{ padding-block:var(--sec-pad) }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.dp-btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink);
  --btn-hov-bg:var(--rust); --btn-hov-fg:#FFF6EA;
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:50px; padding:0 26px; margin:0;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--r-pill);
  /* Stated rather than inherited: these also sit on pages with no reset. */
  font-family:var(--f-sans); font-size:.9375rem; font-weight:600;
  line-height:1.2; letter-spacing:.005em; white-space:nowrap;
  text-align:center; text-decoration:none; cursor:pointer;
  overflow:hidden; isolation:isolate;
  -webkit-appearance:none; appearance:none;
  transition:transform .3s var(--e-spring), box-shadow .34s var(--e-out),
             color .34s var(--e-io), border-color .34s var(--e-out);
}
.dp-btn::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--btn-hov-bg);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .52s var(--e-io);
}
.dp-btn:hover,.dp-btn:focus-visible{
  color:var(--btn-hov-fg); border-color:var(--btn-hov-bg);
  box-shadow:0 14px 28px -16px rgba(31,21,12,.65);
}
.dp-btn:hover::after,.dp-btn:focus-visible::after{ transform:scaleX(1); transform-origin:left center }
.dp-btn:active{ transform:translateY(1px) scale(.986) }
.dp-btn:disabled,.dp-btn[aria-disabled="true"]{ opacity:.55; cursor:default }
.dp-btn:disabled::after,.dp-btn[aria-disabled="true"]::after{ transform:scaleX(0) }

.dp-btn--accent{ --btn-bg:var(--rust); --btn-bd:var(--rust); --btn-fg:#FFF6EA;
                 --btn-hov-bg:var(--ink); --btn-hov-fg:var(--paper) }
.dp-btn--ghost{  --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line-firm);
                 --btn-hov-bg:var(--ink); --btn-hov-fg:var(--paper) }
.dp-btn--onDark{ --btn-bg:transparent; --btn-fg:var(--cream); --btn-bd:rgba(244,234,214,.42);
                 --btn-hov-bg:var(--cream); --btn-hov-fg:var(--night) }
.dp-btn--sm{ min-height:42px; padding:0 18px; font-size:.85rem }
.dp-btn--full{ display:flex; width:100% }

/* An icon travelling with the label (the Google mark, a chevron). */
.dp-btn svg,.dp-btn img{ flex:none; display:block }

/* Quiet text link with a rule that draws on hover */
.dp-link{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--f-sans); font-size:.875rem; font-weight:600;
  color:var(--ink); text-decoration:none;
  padding-bottom:2px; background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .42s var(--e-io), gap .3s var(--e-out), color .3s var(--e-out);
}
.dp-link:hover{ background-size:100% 1px; gap:.72em }
.dp-link svg{ width:13px; height:13px; flex:none }
.dp-dark .dp-link,.dp-on-night .dp-link{ color:var(--cream) }

/* ── Scroll reveal (observer lives in nav.js) ──────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(22px) }
@media (prefers-reduced-motion:no-preference){
  [data-reveal]{ transition:opacity .78s var(--e-out), transform .78s var(--e-out); transition-delay:var(--d,0ms) }
}
[data-reveal].is-in{ opacity:1; transform:none }
.no-js [data-reveal]{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important }
}