/**
 * The Doggos — Field Notes ("pen layer").  v0.7.51 (W1 hero · W2 scenes · W2.1 mobile-first · W2.2 crunch+stat+more cards)
 *
 * A reusable, sitewide annotation kit so any page can read like a page from
 * the kitchen's notebook:
 *   - handwritten margin notes + a curator's signature   (Caveat)
 *   - one hand-drawn circled / underlined word           (roughened SVG, NOT a font)
 *   - pen arrows                                          (roughened SVG)
 *   - mono catalogue tags (No. / FIG.)                   (JetBrains Mono)
 *
 * RULE (do not break): handwriting (Caveat) is for NOTES / one circled word /
 * the signature ONLY. Never headlines, body, prices, or buttons — those stay
 * Fraunces / Bricolage. Handwriting-as-typeface reads cheap and kills the
 * premium read.
 *
 * Enqueued sitewide by inc/enqueue.php (handle: thedoggos-fieldnotes, dep:
 * thedoggos). The shared roughen <filter id="dn-rough"> is injected once in
 * wp_footer (also inc/enqueue.php). Static by design (no animation) → it is
 * reduced-motion-safe and costs ~0 main-thread. The Caveat woff2 only downloads
 * on pages that actually render a .dn-note / .dn-sign element (font-display:swap).
 */

@font-face{
	font-family:'Caveat';
	font-style:normal;
	font-weight:400 700;            /* variable */
	font-display:swap;
	src:url('../fonts/caveat-latin.woff2') format('woff2');
	unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
	--dn-hand:'Caveat', ui-rounded, 'Segoe Print', cursive;
	--dn-mono:'JetBrains Mono', ui-monospace, monospace;
	--dn-ink:#2a2a36;
	--dn-soft:#5a5a6e;
	--dn-rust:#8e5a2f;
	--dn-paper:250,246,238;         /* bone, as an rgb triplet for rgba chips */
}

/* ---- handwritten note ---- */
.dn-note{
	font-family:var(--dn-hand);
	font-weight:600;
	line-height:.95;
	color:var(--dn-ink);
}
.dn-note--rust{ color:var(--dn-rust); }
.dn-note--soft{ color:var(--dn-soft); }

/* A note (or signature) floating over a photo gets a faint paper chip so it
   stays legible over any image / scrim — the "taped label" look. */
.dn-chip{
	background:rgba(var(--dn-paper),.80);
	border:1px solid rgba(42,42,54,.30);
	box-shadow:3px 3px 0 rgba(42,42,54,.16);
	padding:.30em .55em .42em;
}

/* ---- hand-circled / underlined word ----
   markup: <span class="dn-mark">word<svg class="dn-ring" ...><ellipse/></svg></span> */
.dn-mark{ position:relative; white-space:nowrap; }
.dn-ring{
	position:absolute; left:-9%; top:-20%; width:118%; height:148%;
	overflow:visible; pointer-events:none;
}
.dn-ring ellipse,.dn-ring path{
	fill:none; stroke:var(--dn-ink); stroke-width:2.4; stroke-linecap:round;
	filter:url(#dn-rough); opacity:.85;
}
.dn-ring--rust ellipse,.dn-ring--rust path{ stroke:var(--dn-rust); }

/* ---- pen arrow ---- */
.dn-arrow{ overflow:visible; pointer-events:none; }
.dn-arrow path{
	fill:none; stroke:var(--dn-ink); stroke-width:2.2; stroke-linecap:round;
	filter:url(#dn-rough);
}

/* ---- mono catalogue tag (accession / FIG.) ---- */
.dn-tag{
	font-family:var(--dn-mono); font-size:10.5px; letter-spacing:.13em;
	text-transform:uppercase; color:var(--dn-ink);
}
.dn-tag--chip{
	background:rgba(var(--dn-paper),.82); border:1px solid var(--dn-ink);
	padding:4px 8px;
}

/* ---- curator's signature ---- */
.dn-sign{
	font-family:var(--dn-hand); font-weight:600;
	font-size:clamp(26px,3.4vw,40px); line-height:.8; color:var(--dn-ink);
	display:inline-block; transform:rotate(-3deg);
}
.dn-sign small{
	display:block; font-family:var(--dn-mono); font-size:9.5px; letter-spacing:.12em;
	text-transform:uppercase; color:var(--dn-soft); transform:rotate(3deg); margin-top:6px;
}

/* =========================================================
   Surface: homepage hero  (theme .thedoggos-hero)
   The notes layer is absolute, never intercepts clicks, and sits above the
   image + scrim. Placement is tuned for the desktop banner crop.
   ========================================================= */
.thedoggos-hero__notes{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.thedoggos-hero__notes .dn-note,
.thedoggos-hero__notes .dn-tag,
.thedoggos-hero__notes .dn-sign,
.thedoggos-hero__notes .dn-arrow{ position:absolute; }

.dn-hero-tag--tl{ top:14px; left:14px; }
.dn-hero-tag--bl{ bottom:14px; left:14px; }
.dn-hero-note{
	top:30%; left:5%; transform:rotate(-4deg);
	font-size:clamp(21px,2.6vw,31px); max-width:200px;
}
.dn-hero-arrow{ top:40%; left:15%; width:120px; height:84px; }
.dn-hero-sign{ bottom:16px; right:16px; }

/* Mobile: KEEP the Toughie note (it's chipped, so it stays legible over the
   image) — only the arrow hides (its angle is tuned to the desktop crop). */
@media (max-width:768px){
	.dn-hero-arrow{ display:none; }
	.dn-hero-note{ top:auto; bottom:60px; left:12px; right:auto; max-width:64vw; font-size:22px; transform:rotate(-3deg); }
	.dn-hero-tag--bl{ display:none; }
	.dn-hero-sign{ bottom:12px; right:12px; }
	.dn-hero-sign .dn-sign,.dn-hero-sign{ font-size:22px; }
	.dn-hero-tag--tl{ font-size:9.5px; }
}

/* =========================================================
   Surface: PDP hero  (cinematic-pdp .cpdp-hero)
   ========================================================= */
.cpdp-hero .dn-sign{ display:block; margin-top:1.25rem; font-size:clamp(24px,3vw,34px); line-height:.85; }
.cpdp-hero .dn-sign small{ margin-top:11px; }
/* the headline accent word is large Fraunces — tuck the ring a touch tighter */
.cpdp-hero-headline .dn-ring{ top:-12%; height:126%; }
@media (max-width:600px){
	.cpdp-hero .dn-sign{ font-size:23px; margin-top:.9rem; }
}

/* =========================================================
   Surface: homepage cinematic scenes  (.dcx-scene)  — Wave 2 / 2.1
   Notes are VISIBLE on every breakpoint. On MOBILE each note parks in the scene's
   empty bottom padding (centered) — always visible, never overlapping the 1-col
   stacked content. On DESKTOP (>=1024px) it pulls out into the side gutter.
   .dcx-scene is overflow:hidden so nothing bleeds off-edge.
   ========================================================= */
.dcx-fieldnote{
	display:block; position:absolute; z-index:3; pointer-events:none;
	font-size:clamp(18px,4.4vw,27px); line-height:.95;
	left:50%; right:auto; top:auto; bottom:clamp(12px,3.4vw,26px);
	transform:translateX(-50%) rotate(-2deg);
	width:max-content; max-width:82vw; text-align:center;
}
@media (min-width:1024px){
	.dcx-fieldnote{ left:auto; right:auto; top:auto; bottom:auto; width:auto; max-width:200px; text-align:left; transform:none; }
	.dcx-fieldnote--manifesto{ bottom:7%;  left:4%;    transform:rotate(-3deg); }
	.dcx-fieldnote--anatomy{   top:60%;    right:4.5%; transform:rotate(3deg);  max-width:190px; }
	.dcx-fieldnote--upgrade{   top:56%;    right:5%;   transform:rotate(3deg); }
	.dcx-fieldnote--process{   bottom:6%;  left:5%;    transform:rotate(-3deg); }
	.dcx-fieldnote--wall{      top:20%;    left:4%;    transform:rotate(-3deg); }
	.dcx-fieldnote--crunch{    bottom:8%;  right:5%;   transform:rotate(2deg); }
}

/* Wave 2.2 — hand-circle around the manifesto "0" stat (a single big numeral). */
.dcx-stat-num.dn-mark{ display:inline-block; }
.dcx-stat-num .dn-ring{ left:-22%; width:144%; top:-14%; height:128%; }
.dcx-stat-num .dn-ring ellipse{ stroke-width:3; }

/* =========================================================
   Surface: PDP — inline handwritten aside in the hero copy (visible all sizes)
   ========================================================= */
.cpdp-fieldnote{
	display:block; font-family:var(--dn-hand); font-weight:600; color:var(--dn-rust);
	font-size:clamp(20px,5vw,27px); line-height:.95; transform:rotate(-2deg);
	margin:.7rem 0 .1rem;
}

/* =========================================================
   Surface: homepage product-grid cards — a scribble on a few key cards (Wave 2.1)
   Anchors to .pcard__plate (already position:relative for its corner marks).
   ========================================================= */
.pcard__doodle{
	position:absolute; z-index:4; bottom:8px; right:8px;
	font-family:var(--dn-hand); font-weight:700; color:var(--dn-ink);
	font-size:clamp(16px,4.4vw,21px); line-height:1; transform:rotate(-4deg);
	background:rgba(var(--dn-paper),.86); border:1px solid var(--dn-ink);
	padding:3px 8px 5px; box-shadow:2px 2px 0 var(--dn-ink); pointer-events:none;
}

/* The end-card curator signature FLOWS (not absolute) under the ledger so it
   reads as a hand sign-off; .dn-sign already rotates -3deg. */
.dcx-promise-sign{ display:block; margin:clamp(28px,4vw,48px) auto 0; text-align:center; }
.dcx-promise-sign small{ text-transform:uppercase; }
@media (max-width:600px){ .dcx-promise-sign{ font-size:24px; margin-top:24px; } }