/* Mike's Donuts & Coffee v2 — Anthora cup identity.
   The site is dressed as the classic NYC coffee cup: warm paper-cream
   body, printed navy Greek-key (meander) banding as the outlines
   (header rule, section-title rules, footer band), navy ink for text.
   A touch of gold keeps a warm accent; the real photos own the hero.
   No 3D, no CDN — all self-hosted. */
/* html[data-theme] to match html[data-category] specificity — the
theme's tokens must win over the category palette. */
html[data-theme="mikes-v2"] {
  /* --- Anthora palette: the cup's cream paper + printed navy ---------- */
  --paper: #f4ecd8;          /* cup body / page background */
  --paper-deep: #ece0c3;     /* slightly worn cream for alt bands */
  --ink: #1e3058;            /* navy ink */
  --ink-soft: #56648d;       /* muted navy for secondary text */
  --line: #d8caa4;           /* cream rule between bands */
  --brand: #2b4a8f;          /* the cup's printed blue */
  --brand-deep: #1e3058;     /* deep navy for solid fills */
  --accent: #c29a4b;         /* warm gold accent */
  --accent-deep: #a9833a;    /* readable gold on cream */
  --hero-bg: #1a2340;        /* navy wash under the hero photo */
  --hero-ink: #fdf7e8;       /* cream ink on the photo */
  --rule: #d8caa4;

  /* The Greek key tile: two alternating meander motifs, 48x24, seamless
     when tiled horizontally (stroke exits/enters at mid-height edges).
     Reused for every band on the page. */
  --meander: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 12H4V20H16V4H8V12H16V8H20V12H28V8H32V12H40V4H32V20H44V12H48' fill='none' stroke='%232b4a8f' stroke-width='4'/%3E%3C/svg%3E");
  --paper-grain: radial-gradient(rgba(30, 48, 88, 0.05) 1px, transparent 1.6px);

  /* --- the whole page wears the cup's blue --------------------------- */
  background: var(--brand);
}

/* --- framed page: the site is a card on the blue, boxed with a border --- */
/* Navy fills the entire viewport; the site itself becomes a cream-paper
   card inset from the edges, outlined by a box border that runs around
   the browser — the cup's rim. A thin navy hairline sits just inside the
   frame, like the cup's printed double band. */
[data-theme="mikes-v2"] body {
  margin: clamp(0.55rem, 2vw, 1.15rem);
  border: clamp(0.3rem, 0.9vw, 0.6rem) solid var(--paper);
  box-shadow: inset 0 0 0 2px var(--brand); /* hairline inside the rim */
  background: var(--paper);
  min-height: calc(100vh - 2 * clamp(0.55rem, 2vw, 1.15rem));
}

/* --- printed meander structure ---------------------------------------- */
/* Header: cream cup rim, with a printed Greek-key band under it. */
[data-theme="mikes-v2"] .site-header {
  background: rgba(244, 236, 216, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
[data-theme="mikes-v2"] .site-header::after {
  content: "";
  display: block;
  height: 14px;
  margin: 0;
  width: 100%;
  background-image: var(--meander);
  background-size: 48px 14px;
  background-repeat: repeat-x;
  opacity: 0.9;
}
[data-theme="mikes-v2"] .brand {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}
[data-theme="mikes-v2"] .brand::before {
  content: "🍩";
  font-size: 0.95em;
  margin-right: 0.15em;
}
[data-theme="mikes-v2"] .nav a {
  font-weight: 600;
  color: var(--ink-soft);
}
[data-theme="mikes-v2"] .nav a:hover {
  color: var(--brand);
  text-decoration-color: var(--accent);
}

/* --- hero: the real storefront photo, navy cup wash under it ---------- */
[data-theme="mikes-v2"] .hero {
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(244, 236, 216, 0.4), rgba(26, 35, 64, 0.66)),
    radial-gradient(110% 85% at 88% 12%, rgba(43, 74, 143, 0.35), transparent 58%);
  padding: clamp(1.2rem, 3vw, 2.4rem) 0;
  align-items: center;
}
[data-theme="mikes-v2"] .hero-inner {
  padding-block: clamp(0.4rem, 1.4vw, 1.2rem) clamp(1.2rem, 2.6vw, 2.4rem);
}
[data-theme="mikes-v2"] .hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: var(--brand);
}
[data-theme="mikes-v2"] .hero-kicker::before,
[data-theme="mikes-v2"] .hero-kicker::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 2px;
  transform: rotate(45deg); /* tiny key motifs, like the banding */
  background: var(--brand);
}
[data-theme="mikes-v2"] .hero-kicker::after {
  background: var(--accent);
}
[data-theme="mikes-v2"] .hero-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 900;
  color: var(--hero-ink);
  text-wrap: balance;
}
[data-theme="mikes-v2"] .hero-title .accent {
  color: var(--accent);
}
[data-theme="mikes-v2"] .hero-photos {
  display: none; /* the real storefront photo owns the hero; photos live in the gallery */
}
[data-theme="mikes-v2"] .hero-actions .btn-primary {
  background: linear-gradient(180deg, #35609f, var(--brand-deep));
  color: var(--hero-ink);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(30, 48, 88, 0.4);
}
[data-theme="mikes-v2"] .hero-actions .btn-secondary {
  border: 2px solid var(--hero-ink);
  color: var(--hero-ink);
  border-radius: 999px;
  font-weight: 700;
}
[data-theme="mikes-v2"] .hero-actions .btn-social {
  border: 2px solid var(--accent);
  color: var(--hero-ink);
  border-radius: 999px;
}

/* --- section rhythm + meander rules ------------------------------------ */
[data-theme="mikes-v2"] .section {
  padding: clamp(3rem, 7vw, 6rem) 0;
}
[data-theme="mikes-v2"] .section-title {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  color: var(--ink);
}
[data-theme="mikes-v2"] .section-title::after {
  content: "";
  display: block;
  width: 9rem;
  height: 12px;
  margin-top: 0.85rem;
  background-image: var(--meander);
  background-size: 48px 12px;
  background-repeat: repeat-x;
  opacity: 0.85;
}
[data-theme="mikes-v2"] .section-alt {
  background:
    var(--paper-grain),
    linear-gradient(180deg, var(--paper), var(--paper-deep));
  background-size: 14px 14px, auto;
}

/* --- story: the 1976 founding on cream paper --------------------------- */
[data-theme="mikes-v2"] .story-section {
  background:
    radial-gradient(85% 60% at 12% 0%, rgba(43, 74, 143, 0.08), transparent 60%),
    radial-gradient(85% 60% at 88% 100%, rgba(194, 154, 75, 0.09), transparent 60%),
    var(--paper);
}
[data-theme="mikes-v2"] .story-lead {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}
[data-theme="mikes-v2"] .story-beat::before {
  background: var(--brand) !important;
  box-shadow: 0 0 0 4px rgba(43, 74, 143, 0.28);
}
[data-theme="mikes-v2"] .story-beat .beat-year {
  color: var(--brand);
  font-weight: 800;
}

/* --- services as a counter card: navy-outlined chips ------------------- */
[data-theme="mikes-v2"] .service {
  border: 2px solid rgba(43, 74, 143, 0.3);
  border-radius: 1.4rem;
  background: #fbf5e2;
  box-shadow: 0 10px 24px rgba(30, 48, 88, 0.1);
  font-weight: 600;
  color: var(--ink);
}
[data-theme="mikes-v2"] .service::before {
  content: "●";
  color: var(--brand);
  margin-right: 0.5rem;
  font-size: 0.8em;
}

/* --- footer: navy base, printed Greek-key band on top ------------------- */
[data-theme="mikes-v2"] .site-footer {
  background: linear-gradient(180deg, var(--brand-deep), #16233f);
  color: rgba(253, 247, 232, 0.88);
  border-top: 14px solid transparent;
}
[data-theme="mikes-v2"] .site-footer::before {
  content: "";
  display: block;
  height: 14px;
  margin: -14px 0 14px;
  background-image: var(--meander);
  background-size: 48px 14px;
  background-repeat: repeat-x;
  opacity: 0.9;
}
[data-theme="mikes-v2"] .site-footer a {
  color: var(--accent);
}

/* --- reel + map keep their base style ---------------------------------- */

/* --- responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  [data-theme="mikes-v2"] .header-inner {
    flex-wrap: wrap;
    row-gap: 0.35rem;
  }
}

/* --- scroll reveals: photos and tiles pop as you scroll --------------- */
[data-theme="mikes-v2"] .reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
[data-theme="mikes-v2"] .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Hero collage keeps its hand-placed tilt/depth — reveal with opacity only. */
[data-theme="mikes-v2"] .hero-photo.reveal {
  transform: none;
}

/* --- facts band under the hero: navy chips, like the cup's print ------- */
[data-theme="mikes-v2"] .fact-band {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  padding: 1.15rem 0 0;
}
[data-theme="mikes-v2"] .fact-chip {
  background: rgba(30, 48, 88, 0.92);
  border: 1px solid rgba(253, 247, 232, 0.28);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hero-ink);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}
[data-theme="mikes-v2"] .fact-chip:nth-child(1) {
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="mikes-v2"] .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}