/* site.css — shared front-of-house chrome (landing, shop, builders).
   All partner-swappable choices are :root tokens (see CONVENTIONS.md).
   Builder/creator INTERNAL layout stays in each page; this file owns
   the paper look, nav, and the shared "a dog made it" vocabulary. */

:root{
  --paper:#f4efe4;
  --ink:#1d1b17;
  --accent:#c2462d;
  --accent-press:#8f3120;      /* pressed-button shadow of --accent */
  --accent2:#9db14c;           /* tennis-ball green — use sparingly */
  --accent2-press:#77883a;
  --muted:#6b6458;
  --line:#e3dcc9;
  --tape:rgba(220,200,150,.55);
  --card:#fff;
  --memo:#fffdf6;
  --font-body:"Comic Neue","Comic Sans MS","Segoe UI",system-ui,sans-serif;
  --font-marker:"Gochi Hand","Comic Sans MS",cursive;
  --font-ui:system-ui,"Segoe UI",sans-serif;
  --tilt-1:-1.2deg;
  --tilt-2:.8deg;
  --squiggle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='7' viewBox='0 0 28 7'%3E%3Cpath d='M0 4.5 Q 3.5 0.5 7 4.5 T 14 4.5 T 21 4.5 T 28 4.5' fill='none' stroke='%23c2462d' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  /* i did the background myself with my nose */
  background-image:radial-gradient(circle at 20% 10%, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:18px 18px;
}
.wrap{max-width:860px;margin:0 auto;padding:0 18px 90px;}

/* ---------- sticky nav (one constant bar — never changes on scroll) ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  font-family:var(--font-ui);font-size:14px;font-weight:700;
  background:var(--paper);
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.nav-inner{
  max-width:860px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 18px;
}
.nav-logo{color:var(--ink);text-decoration:none;font-size:17px;white-space:nowrap;}
.nav-logo:hover{color:var(--accent);}
.nav-links{display:flex;align-items:center;gap:18px;}
.nav-links a{color:var(--ink);text-decoration:none;padding:6px 2px;}
.nav-links a:hover,.nav-links a.here{color:var(--accent);}

/* ---------- shared vocabulary ---------- */
.badge{
  display:inline-block;border:2px dashed var(--accent);color:var(--accent);
  font-size:12px;letter-spacing:1px;text-transform:uppercase;
  padding:4px 10px;transform:rotate(-2deg);
}

.sticker{
  display:inline-block;background:var(--accent);color:#fff;
  border:3px solid #fff;border-radius:4px;padding:3px 10px;
  font-family:var(--font-ui);font-size:13px;font-weight:800;
  box-shadow:0 3px 0 rgba(0,0,0,.18), 0 6px 12px rgba(0,0,0,.12);
  transform:rotate(-2deg);
}
.sticker.alt{background:var(--accent2);transform:rotate(1.6deg);}
.sticker.plain{background:#8a8170;}

h2.sq{
  font-size:26px;margin:52px 0 8px;display:inline-block;padding-bottom:8px;
  background:var(--squiggle) repeat-x left bottom;
}

.note{
  background:var(--memo);border-left:4px solid var(--accent);
  padding:14px 16px;margin:26px 0;transform:rotate(.4deg);
  box-shadow:0 4px 0 rgba(0,0,0,.05);
}
.note p:first-child{margin-top:0;}
.note p:last-child{margin-bottom:0;}

/* taped-on marker note (the fourth-wall break) */
.taped{
  position:relative;display:inline-block;background:var(--memo);
  border:1px solid var(--line);padding:18px 26px 14px;
  font-family:var(--font-marker);font-size:24px;line-height:1.3;
  transform:rotate(var(--tilt-1));
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.taped::before{
  content:"";position:absolute;top:-12px;left:50%;width:92px;height:24px;
  transform:translateX(-50%) rotate(-2deg);background:var(--tape);
}

/* framed photo with tape corners */
.frame{
  position:relative;border:10px solid #fff;background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.25);transform:rotate(-1.5deg);
}
.frame img{display:block;width:100%;height:auto;}
.frame .tapecorner{
  position:absolute;width:70px;height:22px;background:var(--tape);top:-12px;
}
.frame .tapecorner.tl{left:-24px;transform:rotate(-38deg);}
.frame .tapecorner.tr{right:-24px;transform:rotate(38deg);}
.live{
  position:absolute;top:14px;right:-6px;background:#111;color:#fff;
  font-size:10px;letter-spacing:1px;padding:3px 8px;transform:rotate(3deg);
  font-family:var(--font-ui);
}
.live b{color:#46d369;}

ul.facts{list-style:none;padding:0;}
ul.facts li{padding:8px 0 8px 30px;position:relative;border-bottom:1px dotted #ccc4b0;}
ul.facts li::before{content:"🐾";position:absolute;left:0;top:6px;}

.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;}
.gallery figure{margin:0;background:#fff;padding:8px 8px 4px;border:1px solid var(--line);box-shadow:0 6px 14px rgba(0,0,0,.12);}
.gallery figure:nth-child(odd){transform:rotate(-1deg);}
.gallery figure:nth-child(even){transform:rotate(1.2deg);}
.gallery img{display:block;width:100%;height:170px;object-fit:cover;}
.gallery figcaption{font-size:13px;color:var(--muted);padding:6px 2px 2px;text-align:center;font-family:var(--font-marker);}

blockquote.stamp{
  background:#fff;border:2px solid var(--ink);margin:18px 0;padding:16px 18px;
  box-shadow:6px 6px 0 var(--ink);font-size:18px;
}
blockquote.stamp footer{font-size:13px;color:var(--muted);margin-top:8px;font-style:normal;}

.btn-press{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  font-size:20px;font-weight:bold;padding:14px 28px;border-radius:6px;
  box-shadow:0 6px 0 var(--accent-press);transform:rotate(-1deg);
}
.btn-press:active{transform:translateY(4px) rotate(-1deg);box-shadow:0 2px 0 var(--accent-press);}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:22px;}
.card{
  background:var(--card);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.12);
  padding:12px 12px 18px;text-align:center;display:flex;flex-direction:column;
}
.card:nth-child(odd){transform:rotate(-.7deg);}
.card:nth-child(even){transform:rotate(.7deg);}
.card img{display:block;width:100%;height:230px;object-fit:contain;background:#fbfaf6;border:1px solid var(--line);}
.card h3{font-size:19px;margin:14px 0 8px;}
.card p{font-size:13.5px;color:var(--muted);margin:8px 6px 0;flex:1;}
.card .go{
  display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:bold;
  font-size:15px;padding:10px 20px;border-radius:6px;box-shadow:0 4px 0 var(--accent-press);margin-top:14px;
}
.card .go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-press);}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:14px;}
.step{background:var(--memo);border-left:4px solid var(--accent);padding:14px 16px;box-shadow:0 4px 0 rgba(0,0,0,.05);}
.step b{display:block;font-size:15px;margin-bottom:4px;}
.step span{font-size:13.5px;color:var(--muted);}
.step:nth-child(1){transform:rotate(.4deg);}
.step:nth-child(2){transform:rotate(-.4deg);}
.step:nth-child(3){transform:rotate(.3deg);}

footer.site{margin-top:70px;text-align:center;font-size:12px;color:#8a8170;}

/* ---------- turf world: pages that live ON the field ----------
   body.turf = the real turf backdrop; .wrap.sheet = the paper the page is
   written on, taped over the grass; .realdog.roam = dogs playing in the
   margins (fixed to the viewport, behind the sheet). */
body.turf{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,.22) 100%) fixed,
    url("/img/turf-tile.jpg") repeat;
  background-size:cover, 520px auto; /* zoomed out vs the landing — reads calmer behind paper */
}
/* little chalk paw dots down the grass margins (photo supply is small for
   now — the dots hide behind the sheet on narrow screens automatically) */
body.turf::before,
body.turf::after{
  content:"";position:fixed;top:70px;bottom:0;width:46px;z-index:0;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='170' viewBox='0 0 46 170'%3E%3Cg fill='%23fffdf6'%3E%3Cg transform='translate(4 8) rotate(-14) scale(.34)'%3E%3Cellipse cx='21' cy='21' rx='6' ry='8.5'/%3E%3Cellipse cx='43' cy='21' rx='6' ry='8.5'/%3E%3Cellipse cx='9.5' cy='33' rx='5' ry='7'/%3E%3Cellipse cx='54.5' cy='33' rx='5' ry='7'/%3E%3Cpath d='M32 29 C41 29 49 38 49 46.5 C49 54 42.5 57 36.5 54.8 C34.2 54 29.8 54 27.5 54.8 C21.5 57 15 54 15 46.5 C15 38 23 29 32 29 Z'/%3E%3C/g%3E%3Cg transform='translate(22 96) rotate(13) scale(.34)'%3E%3Cellipse cx='21' cy='21' rx='6' ry='8.5'/%3E%3Cellipse cx='43' cy='21' rx='6' ry='8.5'/%3E%3Cellipse cx='9.5' cy='33' rx='5' ry='7'/%3E%3Cellipse cx='54.5' cy='33' rx='5' ry='7'/%3E%3Cpath d='M32 29 C41 29 49 38 49 46.5 C49 54 42.5 57 36.5 54.8 C34.2 54 29.8 54 27.5 54.8 C21.5 57 15 54 15 46.5 C15 38 23 29 32 29 Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat-y center / 40px auto;
  opacity:.28;
}
body.turf::before{left:6px;}
body.turf::after{right:6px;}
body.turf .wrap.sheet{
  position:relative;z-index:1;
  background:var(--paper);
  background-image:radial-gradient(circle at 20% 10%, rgba(0,0,0,.03) 1px, transparent 1px);
  background-size:18px 18px;
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(0,0,0,.32);
  margin:26px auto 64px;
  padding:6px 26px 60px;
}
body.turf .wrap.sheet::before,
body.turf .wrap.sheet::after{
  content:"";position:absolute;top:-12px;width:92px;height:24px;background:var(--tape);
}
body.turf .wrap.sheet::before{left:8%;transform:rotate(-5deg);}
body.turf .wrap.sheet::after{right:8%;transform:rotate(4deg);}
.realdog.roam{position:fixed;z-index:0;}
@media (max-width:900px){ .realdog.roam{display:none;} }

/* handwritten aside, e.g. "← that's me" */
.marker-note{font-family:var(--font-marker);color:var(--muted);font-size:17px;}

/* scroll-reveal hook (site.js adds .walked) */
[data-walk]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
[data-walk].walked{opacity:1;transform:none;}

/* ---------- motion (max ONE moving thing per viewport — see CONVENTIONS) ---------- */

/* the paw on the logo flops when you pet it */
.nav-logo .paw{display:inline-block;}
.nav-logo:hover .paw{animation:earflop .55s ease;}
@keyframes earflop{0%{transform:rotate(0);}30%{transform:rotate(-16deg);}60%{transform:rotate(10deg);}100%{transform:rotate(0);}}

/* product cards sniff on hover, then sit up straight */
@media (hover:hover){
  .card{transition:transform .25s ease, box-shadow .25s ease;}
  .card:hover{animation:sniff .45s ease;transform:translateY(-5px);box-shadow:0 14px 26px rgba(0,0,0,.16);}
}
@keyframes sniff{
  0%{transform:translateY(0);}
  30%{transform:translateY(-8px) rotate(-.6deg);}
  55%{transform:translateY(-3px) rotate(.5deg);}
  100%{transform:translateY(-5px);}
}

/* paw prints step in beside a heading once it's walked into view */
.pawtrail{display:inline-block;margin-left:10px;font-size:.62em;letter-spacing:7px;}
.pawtrail span{display:inline-block;opacity:0;transform:translateY(5px) rotate(-14deg);transition:opacity .3s ease,transform .3s ease;}
[data-walk].walked .pawtrail span{opacity:.7;transform:none;}
[data-walk].walked .pawtrail span:nth-child(1){transition-delay:.2s;}
[data-walk].walked .pawtrail span:nth-child(2){transition-delay:.38s;}
[data-walk].walked .pawtrail span:nth-child(3){transition-delay:.56s;}

/* the wagging tail (pin inside .desk, behind the frame) */
.tail{position:absolute;left:-30px;bottom:56px;width:64px;height:84px;z-index:0;transform-origin:90% 95%;animation:wag .9s ease .6s 2;}
.desk .frame{z-index:1;}
.desk:hover .tail{animation:wag .7s ease infinite;}
@keyframes wag{0%,100%{transform:rotate(0);}30%{transform:rotate(-20deg);}70%{transform:rotate(12deg);}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
  [data-walk]{opacity:1;transform:none;}
}