/* ============================================================
   poyoy's place — Version B
   Same zine/collage soul, restructured around what the site is
   actually FOR: showing the work and selling the plushes.

   COLOUR RULES:
     - the accents are WARM versions of the primaries, not screen RGB.
       Pure #0029FF / #FF2D2D / #00B33C are cold light; the paper
       background is warm cream, so they never settled against it.
       Vermilion, cobalt, golden and leaf all lean warm, so they agree
       with the paper and with each other while still reading primary.
     - ONE accent per element. The old sticker was red fill + yellow
       border + blue shadow in a 60px tag — three primaries fighting.
     - every bordered thing sets --c and uses it for BOTH its border and
       its offset shadow, so it reads as one solid colour block.
     - artwork gets a NEUTRAL frame. A coloured border around a colourful
       painting always clashes; let the art supply the colour.
     - grids cycle cobalt → vermilion → leaf so it looks composed.
   ============================================================ */

:root {
  --blue:   #2440C8;      /* cobalt, not electric blue */
  --red:    #E04A2F;      /* vermilion — warm, sits on cream */
  --green:  #2E9155;      /* leaf */
  --yellow: #FFCE1F;      /* golden, not acid #FAFF00 */
  --pink:   #E86BA0;

  --ink:    #241f1a;      /* warm near-black, text only */
  --paper:  #fdfbf4;
  --muted:  #6b6259;
  --frame:  #ded7c8;      /* neutral warm grey, for framing artwork */

  --comic: 'Comic Sans MS', 'Comic Neue', 'Marker Felt', 'Chalkboard SE', cursive, sans-serif;

  /* --c is what each component recolours. NOTE: do not wrap var(--c) inside
     another custom property declared here — it would be substituted against
     :root and freeze to blue before it inherits. Write the border/shadow out
     in each rule so --c resolves on the element itself. */
  --c: var(--blue);

  --measure: 62ch;
  --page:    1040px;
}

* { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; scroll-behavior: smooth; }

body {
  margin: 0;
  /* short pages (about) otherwise left the footer floating mid-screen with
     bare paper below it */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--comic);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper) url('assets/confetti-paper-2.webp') center / cover fixed;
}

img { max-width: 100%; height: auto; }
a { color: var(--blue); }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--yellow); border: 3px solid var(--blue);
  padding: 10px 16px; font-weight: bold; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ============================================================
   HEADER + NAV
   ============================================================ */

.topbar {
  background: var(--blue);
  background-image: url('assets/s2.webp');
  background-size: cover;
  border-bottom: 4px solid var(--yellow);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
/* the wordmark is ~2.8:1 — it needs real height to read as a banner
   rather than a stamp */
.brand img { height: 88px; width: auto; display: block; }

.nav { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.nav a {
  font-family: var(--comic);
  font-size: 17px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding: 7px 14px;
  border: 3px solid transparent;
  border-radius: 10px;
  /* deep-blue halo instead of a black one — keeps white text legible on
     the textured bar without reintroducing black */
  text-shadow: 1px 1px 0 #16277a, -1px -1px 0 #16277a, 1px -1px 0 #16277a, -1px 1px 0 #16277a;
  white-space: nowrap;
}

.nav a:hover { background: rgba(255,255,255,0.18); border-color: #fff; }

.nav a[aria-current="page"] {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--red);
  text-shadow: none;
}

/* the shop is the commercial point of the site — it gets to look like it */
.nav a.shop-cta {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--red);
  text-shadow: none;
  box-shadow: 3px 3px 0 var(--red);
}
.nav a.shop-cta:hover { background: var(--red); color: #fff; border-color: var(--yellow); box-shadow: 3px 3px 0 var(--yellow); }

/* ============================================================
   HERO
   ============================================================ */

.hero { text-align: center; padding: 44px 0 30px; }

.hero img.wordmark { width: min(560px, 90%); display: block; margin: 0 auto 6px; }

.hero p.tagline {
  font-size: clamp(19px, 2.4vw, 24px);
  max-width: 34ch;
  margin: 6px auto 26px;
  line-height: 1.45;
  text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  font-family: var(--comic);
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  padding: 13px 26px;
  border: 3px solid var(--c);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--c);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--c); }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--c); }

/* a button carries ONE colour: its fill and its block are the same family.
   Previously a yellow/red button sat next to a white/green one and they
   read as unrelated widgets. */
.btn--primary { --c: var(--red);   background: var(--yellow); }
.btn--blue    { --c: var(--blue);  background: var(--blue); color: #fff; }
.btn--green   { --c: var(--green); background: #fff; }

/* ============================================================
   SECTIONS + PANELS
   ============================================================ */

.section { padding: 34px 0; }

.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

h1, h2, h3 { font-family: var(--comic); line-height: 1.2; margin: 0; }

/* Display type is lowercase — it's the zine voice, and it's what the
   original site did with its hand-lettered headings. Body prose keeps its
   own capitals: lowercasing a whole paragraph hurts readability, and your
   character names (Eedoh, Yopp) would read as typos. To go fully
   lowercase, add `body { text-transform: lowercase; }` here. */
h1, h2, h3,
.nav a,
.btn,
.card h3,
.card .card-more,
.section-note,
.status-item dt,
.status-item dd,
.sticker,
.footer-cols h3,
.footer-cols a,
.footer-bottom,
.project-meta dt,
.project-meta dd { text-transform: lowercase; }

h2.section-title {
  font-size: clamp(26px, 3.4vw, 36px);
  background: var(--yellow);
  border: 3px solid var(--c);
  box-shadow: 4px 4px 0 var(--c);
  padding: 6px 18px;
  transform: rotate(-1.2deg);      /* the tilt lives here, not on the text */
  display: inline-block;
}

/* each section gets its own colour so the page has a rhythm */
.section:nth-of-type(3n+1) h2.section-title { --c: var(--blue); }
.section:nth-of-type(3n+2) h2.section-title { --c: var(--red); }
.section:nth-of-type(3n+3) h2.section-title { --c: var(--green); }

.section-note {
  color: var(--ink);
  font-size: 16px;
  text-shadow: 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
}

.panel {
  background: #fff;
  border: 3px solid var(--c);
  box-shadow: 6px 6px 0 var(--c);
  padding: 26px;
  margin-top: 22px;
}

/* stacked panels block in colour rather than repeating one hue down the page */
.section .panel:nth-of-type(3n+1) { --c: var(--blue); }
.section .panel:nth-of-type(3n+2) { --c: var(--red); }
.section .panel:nth-of-type(3n+3) { --c: var(--green); }

.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1em; }

/* ============================================================
   CARD GRID
   ============================================================ */

.grid {
  display: grid;
  gap: 22px;
  margin-top: 24px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 3px solid var(--c);
  box-shadow: 6px 6px 0 var(--c);
  padding: 18px;
  text-decoration: none;
  color: var(--ink);
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}

/* blue → red → green, repeating */
.grid .card:nth-child(3n+1) { --c: var(--blue); }
.grid .card:nth-child(3n+2) { --c: var(--red); }
.grid .card:nth-child(3n+3) { --c: var(--green); }

.card:hover, .card:focus-visible {
  transform: translate(-3px,-3px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--c);
}

.card figure { margin: 0 0 14px; text-align: center; }

.card figure img {
  height: 165px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

.card h3 { font-size: 21px; margin-bottom: 6px; }
.card p { margin: 0; font-size: 15.5px; color: var(--muted); line-height: 1.5; }
.card .card-more { margin-top: auto; padding-top: 12px; font-weight: bold; color: var(--c); }

/* ============================================================
   STATUS STRIP
   ============================================================ */

.status-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.status-item {
  background: #fff;
  border: 3px solid var(--c);
  box-shadow: 4px 4px 0 var(--c);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
}

.status-strip > .status-item:nth-child(4n+1) { --c: var(--blue); }
.status-strip > .status-item:nth-child(4n+2) { --c: var(--red); }
.status-strip > .status-item:nth-child(4n+3) { --c: var(--green); }
.status-strip > .status-item:nth-child(4n+4) { --c: var(--pink); }

.status-item dt {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  font-weight: bold;
}

.status-item dd { margin: 4px 0 0; font-size: 17px; font-weight: bold; }
.status-item .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.dot--open   { background: var(--green); }
.dot--closed { background: #c9c9c9; }
.dot--soon   { background: var(--yellow); border: 1px solid var(--red); }

/* ============================================================
   SHOP
   ============================================================ */

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
}

.shop-hero img { display: block; margin: 0 auto; max-height: 340px; width: auto; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 20px 0 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 46px;
  margin-bottom: 14px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 32px; height: 32px;
  background: var(--yellow);
  border: 3px solid var(--red);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: bold;
}

main { flex: 1 0 auto; }

/* ============================================================
   FOOTER — a blue colour block, not a black bar
   ============================================================ */

.site-footer {
  margin-top: 40px;
  background: var(--blue);
  color: #fff;
  border-top: 6px solid var(--yellow);
  padding: 34px 0 26px;
}

.site-footer a { color: var(--yellow); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 26px;
}

.footer-cols h3 { font-size: 17px; margin-bottom: 10px; color: var(--yellow); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: 7px; }
.footer-cols a { text-decoration: none; color: #fff; }
.footer-cols a:hover { text-decoration: underline; color: var(--yellow); }

.footer-bottom {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 2px solid rgba(255,255,255,.35);
  font-size: 14px;
  color: #dfe4ff;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* sticker accent — ONE colour. This was red fill + yellow border + blue
   shadow, three primaries competing inside a 60px tag. */
.sticker {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 11px;
  font-size: 14px;
  font-weight: bold;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 rgba(36,31,26,.22);
}


/* ============================================================
   PROJECTS PAGE + MAP
   ============================================================ */

.section-lead {
  max-width: var(--measure);
  margin: 6px 0 0;
  color: var(--ink);
  /* sits directly on the paper texture, so it needs a halo to stay legible */
  text-shadow: 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
}

.work-entry {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.work-entry > figure { margin: 0; text-align: center; }
.work-entry > figure img { max-height: 220px; width: auto; }
.work-entry h3 { font-size: 26px; margin-bottom: 10px; }

/* Artwork gets a NEUTRAL frame. These thumbnails had red/green/blue borders
   that fought the watercolours inside them — a coloured frame around
   colourful art always loses. */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.shots img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 3px solid var(--frame);
  background: #fff;
}

.where { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.where .btn { font-size: 16px; padding: 10px 18px; box-shadow: 4px 4px 0 var(--c); }

.project-meta {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 34px 0 0;
  padding: 22px 26px;
  background: #fff;
  border: 3px solid var(--frame);
  flex-wrap: wrap;
}
.project-meta div { text-align: center; }
.project-meta dt { font-size: 20px; font-weight: bold; margin-bottom: 5px; }
.project-meta dd { font-size: 16px; color: var(--muted); margin: 0; }

#map-container {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border: 3px solid var(--frame);
  background: #fff;
}

#map-container img { display: block; width: 100%; }

.hotspot {
  position: absolute;
  border: 3px solid transparent;
  background: transparent;
  font-family: var(--comic);
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-transform: lowercase;
  text-shadow: 1px 1px 0 #16277a, -1px -1px 0 #16277a, 1px -1px 0 #16277a, -1px 1px 0 #16277a;
  cursor: pointer;
  transition: .2s;
  border-radius: 6px;
}

.hotspot:nth-of-type(1) { top: 10%; left: 5%;  width: 35%; height: 40%; }
.hotspot:nth-of-type(2) { bottom: 5%; right: 5%; width: 40%; height: 50%; }
.hotspot:nth-of-type(3) { top: 50%; left: 40%; width: 15%; height: 15%; }

.hotspot:hover, .hotspot:focus-visible, .hotspot[aria-pressed="true"] {
  border-color: #fff;
  border-style: dashed;
  background: rgba(36,31,26,.22);
}

/* no hover on a touchscreen, so the labels stay visible there */
@media (hover: none) {
  .hotspot { border-color: #fff; border-style: dashed; background: rgba(36,31,26,.15); }
}

.map-readout { text-align: center; margin: 18px auto 0; min-height: 3em; max-width: var(--measure); }

@media (max-width: 720px) {
  .work-entry { grid-template-columns: 1fr; gap: 16px; }
  .shots { grid-template-columns: 1fr 1fr; }
  .project-meta { gap: 24px; padding: 18px; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 820px) {
  .shop-hero { grid-template-columns: 1fr; }
  .topbar { position: static; }          /* sticky nav eats too much of a small screen */
  .topbar .wrap { justify-content: center; }
  .brand img { height: 60px; }
  .nav { justify-content: center; }
  .nav a { padding: 6px 11px; font-size: 16px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  /* the note crowds the tilted sticker title once they wrap — give it its
     own line rather than letting it butt up against the corner */
  .section-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero { padding: 30px 0 22px; }
  .panel { padding: 18px; }
  .card figure img { height: 140px; }
  .btn { width: 100%; text-align: center; }
  .cta-row { flex-direction: column; }
  .footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}