:root{
  /* Exact values from Dash_Brand_Kit.pdf */
  --cream:#F7F1E1;        /* Milk-Cream Base */
  --blue:#A5CAEE;         /* Signal Blue */
  --red:#841E1B;          /* Poster Red */
  --logo-orange:#F15A29;  /* Logo Background Red/Orange — reserve for logo lockups */
  --teal:#357B7B;         /* Diner Teal */
  --coral:#FFD0CB;        /* Soda Coral */
  --gold:#FDD794;         /* Dog Yellow */
  --ink:#1A2F43;          /* Ink Neutral */

  /* Brand kit's actual font roles:
     Headings = Shrikhand, Subheadings = VAG Rounded Next, Body = Garet, Captions = IBM Plex Mono.
     VAG Rounded Next / Garet aren't freely licensed for web — Fredoka and Mulish stand in. */
  --font-heading:'Shrikhand', cursive;
  --font-subheading:'Fredoka', sans-serif;
  --font-body:'Mulish', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --font-handwritten:'Caveat', cursive;

  /* 8-point spacing scale — used for new/updated rules below so
     paddings, gaps and section rhythm line up consistently. */
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-7:56px;
  --space-8:64px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
h1{font-family:var(--font-heading);font-weight:400;line-height:1.05;margin:0 0 16px;}
h2,h3,h4{font-family:var(--font-subheading);font-weight:600;line-height:1.15;margin:0 0 16px;}
.wave{display:block;width:100%;height:auto;}

/* Buttons — subheading font, since Shrikhand is reserved for big headline moments.
   min-height:44px guarantees the accessible tap-target size regardless of
   how the padding gets tuned later; display:inline-flex centers label text
   inside that box instead of relying on padding alone. */
.btn{
  font-family:var(--font-subheading);font-weight:600;font-size:16px;
  padding:14px var(--space-4);border-radius:12px;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;border:2px solid var(--ink);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  box-shadow:0 0 0 rgba(26,47,67,0);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,47,67,0.18);}
.btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(26,47,67,0.18);}
.btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.btn-primary{background:var(--red);color:var(--cream);}
.btn-primary:hover{background:#701715;}
.btn-outline{background:transparent;color:var(--ink);}
.btn-outline:hover{background:rgba(26,47,67,0.06);}

/* Hero's secondary action is intentionally NOT a .btn — a quiet inline
   link so "Get the Dash app" stays the only button-shaped, high-contrast
   thing in the hero. Underline-on-hover keeps it discoverable without
   competing for attention. */
.text-link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;
  font-family:var(--font-subheading);font-weight:600;font-size:15px;
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid transparent;
  transition:border-color .15s ease, opacity .15s ease;
}
.text-link:hover{border-color:var(--ink);}
.text-link:focus-visible{outline:3px solid var(--teal);outline-offset:4px;}

/* ==============================
   Site nav — prominent logo,
   retro button-style menu
   ============================== */
.site-nav{background:var(--cream);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:20;}
.site-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2) var(--space-4);gap:var(--space-3);}

.site-logo{text-decoration:none;display:flex;align-items:center;gap:10px;min-height:44px;}
.site-logo-mark{
  height:44px;
  width:auto;   /* face crop is no longer square (ring removed) — let it keep its natural proportions */
  display:block;
  flex-shrink:0;
}
.site-logo-text{
  font-family:var(--font-heading);
  font-size:26px;
  color:var(--ink);
  line-height:1;
}

.icon-paw{color:var(--ink);flex-shrink:0;}

.nav-menu{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
.nav-menu ul{list-style:none;display:flex;align-items:center;gap:var(--space-2);margin:0;padding:0;flex-wrap:wrap;}
.nav-menu li{margin:0;}
.nav-menu a{
  text-decoration:none;
  font-family:var(--font-subheading);
  font-weight:600;
  font-size:14px;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:10px;
  padding:10px var(--space-2);
  min-height:44px;
  display:inline-flex;
  align-items:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.nav-menu a:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(26,47,67,0.15);}
.nav-menu a:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.nav-menu .nav-cta{
  /* already a .btn.btn-primary — this just tightens it to nav scale
     while staying comfortably above the 44px tap-target minimum */
  padding:10px var(--space-3);
  font-size:14px;
  background:var(--red);
  color:var(--cream);
}

/* Secondary nav only ever appears inside the mobile menu (see below) —
   on desktop the primary bar stays uncluttered and secondary links
   still live in the footer sitemap. */
.nav-links-secondary{display:none;}

/* Hand-drawn-feeling hamburger, not a system glyph — three bars that
   morph into an × with a plain CSS transform transition (no JS
   animation library, nothing heavy). */
.nav-toggle{
  display:none;
  width:44px;height:44px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:none;border:2px solid var(--ink);border-radius:10px;
  padding:0;cursor:pointer;flex-shrink:0;
}
.nav-toggle:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.nav-toggle-bar{
  width:20px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .2s ease, opacity .2s ease;
}
.site-nav.is-open .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav.is-open .nav-toggle-bar:nth-child(2){opacity:0;}
.site-nav.is-open .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:760px){
  .site-nav-inner{padding:var(--space-2) var(--space-3);}
  .nav-menu{
    display:none;flex-direction:column;align-items:stretch;width:100%;
    position:absolute;top:100%;left:0;background:var(--cream);
    border-bottom:3px solid var(--ink);
    box-shadow:0 12px 24px rgba(26,47,67,0.12);
    padding:var(--space-2) var(--space-3) var(--space-3);gap:var(--space-2);
  }
  .nav-menu ul{flex-direction:column;align-items:stretch;width:100%;gap:var(--space-1);}
  .nav-menu a{width:100%;text-align:center;}
  .nav-links-secondary{
    display:block;width:100%;
    margin-top:var(--space-1);padding-top:var(--space-2);
    border-top:1px solid rgba(26,47,67,0.15);
  }
  .nav-links-secondary ul{gap:var(--space-1);}
  .nav-links-secondary a{
    background:transparent;border-color:transparent;
    color:var(--ink);opacity:.75;font-size:13px;min-height:40px;
  }
  .nav-links-secondary a:hover{opacity:1;transform:none;box-shadow:none;}
  .nav-menu .nav-cta{width:100%;justify-content:center;margin-top:var(--space-1);}
  .site-nav.is-open .nav-menu{display:flex;}
  .nav-toggle{display:flex;}
}

/* ==============================
   Hero — reduced top space,
   bigger Shrikhand title
   ============================== */
.hero{padding:var(--space-3) 0 0;}
.hero-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:var(--space-5);}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);
  font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  background:var(--gold);color:var(--ink);padding:6px 14px;border-radius:999px;border:2px solid var(--ink);
}
.hero-copy h1{
  font-size:clamp(48px,8vw,104px);   /* "Dash" — the dominant, unmissable brand mark */
  margin:var(--space-2) 0 var(--space-1);
}
.hero-copy h1 .accent{color:var(--red);}
.hero-badge-stamp{
  width:64px;
  display:block;
  margin:0 0 var(--space-1);
  transform:rotate(-6deg);
  filter:drop-shadow(0 6px 10px rgba(26,47,67,0.25));
}
.hero-subhead{
  font-family:var(--font-subheading);
  font-weight:600;
  font-size:clamp(22px,3vw,32px);
  color:var(--ink);
  max-width:20ch;
  margin:0 0 var(--space-2);
  line-height:1.2;
}
.hero-subhead .accent{color:var(--red);}

/* The body copy that actually answers "what is this / who is it for" —
   previously wired to an unused custom field, so it never rendered.
   Kept visually one clear step down from the subhead: smaller, regular
   weight, softened colour, comfortable measure for a sentence of prose. */
.hero-desc{
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  opacity:.82;
  max-width:42ch;
  margin:0 0 var(--space-3);
}

.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);}

/* ==============================
   Hero art + scattered polaroids
   ============================== */
.hero-art{display:flex;flex-direction:column;align-items:center;}
.hero-polaroids{
  position:relative;
  width:100%;
  max-width:520px;
  aspect-ratio:1/1;
  margin:0 auto;
}
.hero-mascot{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:36%;   /* +80% from 20% — mascot now anchors the frame, polaroids
                  orbit it in left/right stacks instead of the corners */
  z-index:2;
}

.polaroid{
  position:absolute;
  background:#fff;
  padding:6px 6px 8px;
  border:1px solid rgba(26,47,67,0.15);
  box-shadow:0 10px 20px rgba(26,47,67,0.18);
  width:17%;
  z-index:3;
  margin:0;
}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;}
.polaroid-caption{
  font-family:var(--font-handwritten);
  font-size:clamp(11px,3.6vw,15px);
  color:var(--ink);
  text-align:center;
  margin:6px 0 0;
  line-height:1.1;
  transform:rotate(-1deg);   /* a little imperfection reads more "handwritten" */
}

/* With the mascot much bigger now, the polaroids no longer compete for
   its footprint directly — three stack vertically down the left side,
   two down the right, each column clear of the mascot by width alone
   (mascot occupies the center 32%-68% band; the columns sit outside
   that entirely), verified box-collision-checked including gaps
   between stacked polaroids in the same column. */
.polaroid-1{top:2%;left:2%;transform:rotate(-9deg);}
.polaroid-2{top:37%;left:2%;transform:rotate(6deg);}
.polaroid-3{bottom:2%;left:2%;transform:rotate(-4deg);}
.polaroid-4{top:14%;right:2%;transform:rotate(7deg);}
.polaroid-5{bottom:14%;right:2%;transform:rotate(-7deg);}

@media (max-width:760px){
  .hero-grid{grid-template-columns:1fr;gap:var(--space-3);}
  /* Text now leads on mobile (natural DOM order — copy, then art):
     the headline, message and CTA are what a visitor needs in the
     first 3 seconds, so they no longer sit below a full-width square
     illustration. The illustration still follows immediately after,
     supporting the message rather than standing in for it. */
  .hero-art{margin-top:var(--space-2);}
  .hero-polaroids{max-width:320px;}
  .polaroid{width:19%;}
  .hero-badge-stamp{width:52px;}
  .hero{padding-top:var(--space-2);}
}

@media (max-width:400px){
  /* Smallest phones (iPhone SE and similar): drop two of the five
     polaroids rather than shrinking everything further — a cleaner,
     less cramped composition that still reads as "dog photo collage"
     around the mascot, and keeps captions legible. */
  .polaroid-4,.polaroid-5{display:none;}
  .hero-polaroids{max-width:300px;}
  .polaroid{width:19%;}
}

/* ==============================
   About page — bespoke chrome
   around Ghost's native {{content}}
   ============================== */
.about-header{padding:24px 0 8px;}
.about-badge{margin:0 auto var(--space-2);}
.about-section{padding-top:8px;}
.about-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  align-items:start;
  gap:var(--space-6);
}
.about-content{font-size:17px;line-height:1.7;color:var(--ink);}
.about-content h1{font-size:clamp(32px,5vw,48px);margin:0 0 12px;}
.about-content .article-excerpt{margin:0 0 var(--space-3);}
.about-content p{margin:0 0 var(--space-3);}
.about-content strong{font-family:var(--font-subheading);font-weight:600;}
.about-content blockquote{
  margin:var(--space-4) 0;
  padding:var(--space-1) 0 var(--space-1) var(--space-3);
  border-left:3px solid var(--red);
  font-family:var(--font-subheading);
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}

.about-photo{display:flex;justify-content:center;}
/* Reuses .polaroid's card look (white frame, border, shadow) but not
   its absolute positioning — this is a single standalone photo, not
   part of the hero collage, so it sits normally in the grid column.
   aspect-ratio is close to the source photo's own proportions rather
   than forced to a square, so the shot doesn't need heavy cropping —
   it keeps both Tony and the hole the caption refers to in frame. */
.about-polaroid{
  position:static;
  width:100%;
  max-width:320px;
  transform:rotate(-4deg);
}
.about-polaroid img{aspect-ratio:3/4;object-fit:cover;object-position:center 20%;}

@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:var(--space-4);}
  .about-photo{order:-1;margin-bottom:var(--space-1);}
  .about-polaroid{max-width:240px;margin:0 auto;}
}

/* Sections */
.section{padding:var(--space-7) 0;}
.section-head{margin-bottom:var(--space-4);}
.section-intro p{color:var(--ink);opacity:.8;max-width:60ch;}

@media (max-width:600px){
  .section{padding:var(--space-5) 0;}
  .section-head{margin-bottom:var(--space-3);}
}

/* Post grid + cards */
/* Tag filter bar — reuses the same rounded-pill visual language as
   .tag-chip and .eyebrow elsewhere, so it reads as part of the
   existing design rather than a new UI pattern. */
.tag-filter{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 var(--space-4);}
.tag-filter-pill{
  font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.03em;
  background:var(--cream);color:var(--ink);
  padding:8px 16px;border-radius:999px;border:2px solid var(--ink);
  cursor:pointer;min-height:40px;
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
}
.tag-filter-pill:hover{transform:translateY(-2px);}
.tag-filter-pill:focus-visible{outline:3px solid var(--teal);outline-offset:2px;}
.tag-filter-pill.is-active{background:var(--red);color:var(--cream);border-color:var(--red);}
.post-card.is-filtered-out{display:none;}
.tag-filter-empty{text-align:center;color:var(--ink);opacity:.7;padding:var(--space-5) 0;margin:0;}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);}
@media (max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr;}}

.post-card{
  background:#fff;border:2px solid var(--ink);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
}
.post-card-media{position:relative;display:block;aspect-ratio:4/3;background:var(--blue);overflow:hidden;}
.post-card-media img{width:100%;height:100%;object-fit:cover;}
.post-card-ribbon{
  position:absolute;top:12px;right:12px;background:var(--red);color:var(--cream);
  font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  padding:5px 10px;border-radius:999px;border:2px solid var(--ink);
}
.post-card-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:10px;}
.post-card-tag{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;color:var(--red);letter-spacing:.03em;text-decoration:none;}
.post-card-tag:hover{text-decoration:underline;}
.post-card-body h3{font-size:19px;margin:0;}
.post-card-body h3 a{text-decoration:none;}
.post-card-excerpt{color:var(--ink);opacity:.75;font-size:14px;margin:0;flex:1;}
.post-card-meta{font-family:var(--font-mono);font-size:12px;color:var(--ink);opacity:.7;display:flex;gap:6px;flex-wrap:wrap;}

/* Article */
.article-header{padding:56px 0 32px;text-align:center;}
.article-header .wrap{max-width:760px;}
.article-excerpt{color:var(--ink);opacity:.8;font-size:18px;}
.article-meta{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:13px;color:var(--ink);opacity:.75;margin-top:16px;
}
.author-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--ink);}
.article-cover{max-width:1000px;margin:0 auto 40px;border-radius:16px;overflow:hidden;border:3px solid var(--ink);}
.article-content{max-width:680px;margin:0 auto;padding:0 var(--space-4) var(--space-5);font-size:17px;line-height:1.7;}
.article-content p{margin:0 0 var(--space-3);}
.article-content img{border-radius:12px;margin:24px 0;}

/* Koenig editor support: when an image/card is set to "wide" or "full"
   width in the editor, these classes break it out of the narrow
   article-content column instead of rendering unstyled at column width. */
.article-content .kg-width-wide{
  width:100vw;
  max-width:1040px;
  margin-left:50%;
  transform:translateX(-50%);
}
.article-content .kg-width-full{
  width:100vw;
  max-width:100vw;
  margin-left:50%;
  transform:translateX(-50%);
  border-radius:0;
}
.article-tags{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0;}
.tag-chip{
  font-family:var(--font-mono);font-size:12px;text-transform:uppercase;text-decoration:none;
  background:var(--gold);color:var(--ink);padding:6px 14px;border-radius:999px;border:2px solid var(--ink);
}
.author-card{
  display:flex;gap:16px;align-items:flex-start;background:#fff;border:2px solid var(--ink);
  border-radius:16px;padding:24px;margin:32px 0;
}
.author-card img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.author-card h4{margin:0 0 6px;}
.author-card p{margin:0;color:var(--ink);opacity:.8;}
.post-nav{max-width:760px;margin:0 auto;padding:0 32px 56px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.post-nav a{text-decoration:none;display:block;max-width:45%;}
.post-nav span{font-family:var(--font-mono);font-size:12px;opacity:.7;display:block;margin-bottom:4px;}
.post-nav-next{text-align:right;margin-left:auto;}

/* Pagination */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.pagination a,.pagination span{
  font-family:var(--font-mono);font-size:13px;padding:12px 16px;min-height:44px;
  display:inline-flex;align-items:center;
  border:2px solid var(--ink);border-radius:8px;text-decoration:none;
}
.pagination .current{background:var(--red);color:var(--cream);}

/* 404 */
.error-content{text-align:center;padding:100px 0;max-width:600px;margin:0 auto;}
.error-code{font-family:var(--font-heading);font-size:80px;color:var(--red);}

/* Footer */
.site-footer{background:var(--ink);color:var(--cream);padding:64px 0 32px;margin-top:0;}

.footer-intro{max-width:640px;margin:0 auto 32px;text-align:center;}
.footer-title{
  font-family:var(--font-heading);
  color:var(--cream);
  font-size:clamp(40px,6vw,64px);
  margin:0 0 6px;
  line-height:1.05;
}
.footer-tagline{
  font-family:var(--font-subheading);
  font-weight:600;
  color:var(--cream);
  font-size:clamp(18px,2.4vw,26px);
  margin:0 0 20px;
}
.footer-text{color:var(--cream);opacity:.85;font-size:15px;line-height:1.65;margin:0 0 28px;}
.footer-cta{display:inline-block;}

.footer-sitemap{
  display:flex;flex-wrap:wrap;justify-content:center;
  padding:22px 0;margin-bottom:20px;
  border-top:1px solid rgba(247,241,225,0.2);
  border-bottom:1px solid rgba(247,241,225,0.2);
}
.footer-sitemap ul{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 28px;margin:0;padding:0;
}
.footer-sitemap a{
  color:var(--cream);text-decoration:none;
  font-family:var(--font-mono);font-size:13px;
  text-transform:uppercase;letter-spacing:.03em;opacity:.85;
}
.footer-sitemap a:hover{opacity:1;text-decoration:underline;}

.footer-copyright{font-size:13px;opacity:.72;margin:0;text-align:center;}