/* ============================================================================
   THEME · NORTH PARK
   ============================================================================
   The cat and the strip mall. Flat vector art in hard one-point
   perspective, a gold sun, palms, an orange cat on the sidewalk. The skin
   follows the art: flat colour, square corners, a single hard offset in
   forest green instead of ink, and a grotesque (Archivo) doing both the
   display and the body — one voice, no serif.

   HOW A SKIN WORKS. Almost everything visual on the site is a token, so a
   theme is mostly a token block: retint the palette, swap the faces, reset
   the radii and shadows, and the components follow without being touched.
   The handful of rules under the tokens are the places tokens cannot
   reach — the display axis Fraunces wanted, the nav wordmark's tail, the
   band, the masthead art.

   Scoped to html[data-theme="North-Park"]; linked on every page.
   ========================================================================== */

html[data-theme="North-Park"] {
  /* --- surfaces & ink: cool paper, near-black teal ink ------------------ */
  --paper:        #f3f6f2;
  --paper-butter: #eef4ec;
  --paper-warm:   #ffffff;
  --sand:         #dfe7dc;
  --ink:          #1f2a2e;
  --ink-soft:     #56656b;
  --box:          #14201f;

  /* --- brand: the sun, a coral, the forest of the hills ---------------- */
  --gold:         #f5b400;
  --gold-deep:    #8a6400;
  --rust:         #ec5b3f;
  --rust-deep:    #a83a24;
  --cocoa:        #2f5d50;
  --sky:          #a8cbd9;

  /* --- case-study tints, shifted cooler to sit on this paper ------------ */
  --teal:         #1f6f6a;
  --teal-deep:    #164f4b;
  --avocado:      #5f7a2e;
  --avocado-deep: #43571f;
  --denim:        #3f6b95;
  --denim-deep:   #2c4c6b;
  --oxblood:      #8a3a3a;
  --oxblood-deep: #5e2626;
  --aqua:         #1f7d8c;
  --aqua-deep:    #165a66;
  --plum:         #5e4a7a;
  --plum-deep:    #42345a;

  /* --- type: one grotesque family, black for display -------------------- */
  --font-display: "Archivo Black", "Archivo", "Arial Black", Impact, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --display-variation: normal;        /* no SOFT/WONK axes to set */

  /* --- shape: square. Flat art has corners. ----------------------------- */
  --radius-card: 4px;
  --radius-pill: 4px;

  /* --- shadow: still a hard offset (the site's whole depth grammar rides
         on it), but in the forest green so it reads as a printed second
         colour rather than a drop shadow. ------------------------------- */
  --shadow-hard:       4px 4px 0 var(--cocoa);
  --shadow-hard-lg:    8px 8px 0 var(--cocoa);
  --shadow-hard-hover: 6px 6px 0 var(--cocoa);
  --ringer:            2px solid var(--ink);
}

/* Archivo Black is heavy enough that the tight tracking Fraunces wanted
   crowds it; let it sit at its natural width. */
html[data-theme="North-Park"] h1,
html[data-theme="North-Park"] h2,
html[data-theme="North-Park"] h3,
html[data-theme="North-Park"] .display,
html[data-theme="North-Park"] .h1,
html[data-theme="North-Park"] .h2,
html[data-theme="North-Park"] .h3 {
  letter-spacing: 0;
  font-weight: 400;      /* Archivo Black has one weight; 900 would faux-bold it */
}
html[data-theme="North-Park"] .nav__wordmark,
html[data-theme="North-Park"] .slib-view,
html[data-theme="North-Park"] .slib-az__key,
html[data-theme="North-Park"] .gloss-az__key,
html[data-theme="North-Park"] .hero-panel__subline,
html[data-theme="North-Park"] .hero-panel__email,
html[data-theme="North-Park"] .accord__num {
  font-weight: 400;
}

/* The 70s band becomes the sun / coral / forest of the plates. */
html[data-theme="North-Park"] .hero-band__stripe--gold  { background: var(--gold); }
html[data-theme="North-Park"] .hero-band__stripe--rust  { background: var(--rust); }
html[data-theme="North-Park"] .hero-band__stripe--cocoa { background: var(--cocoa); }

/* The nav is a solid block of the hills' colour, not ink. */
html[data-theme="North-Park"] .nav { background: var(--box); }
html[data-theme="North-Park"] .nav[data-scrolled="true"] { box-shadow: 0 4px 0 var(--cocoa); }

/* The AR chrome over the scene keeps its instrument red — it is meant to
   sit on top of any photograph — but the card face follows the theme's
   single family rather than the Roswell kit's Marvin Round. */
html[data-theme="North-Park"] .hero__frame {
  --font-annot: var(--font-display);
  --font-annot-weight: 400;
}

/* Masthead art on the sub-pages. */
html[data-theme="North-Park"] .masthead__plate--back {
  background-image: url(../../img/hero/themes/North-Park/10_Background.webp);
}
html[data-theme="North-Park"] .masthead__plate--mid {
  background-image: url(../../img/hero/themes/North-Park/08_Midground.webp);
}

/* The contact page's sky, same treatment as the mastheads. */
/* The back plate is TWO layers: the mountains (10) over the real sky (11),
   so the horizon sits on clouds rather than the flat --sky colour. CSS
   paints the first image on top. */
html[data-theme="North-Park"] .contact-sky__plate--back {
  background-image:
    url(../../img/hero/themes/North-Park/10_Background.webp),
    url(../../img/hero/themes/North-Park/11_Background.webp);
}
html[data-theme="North-Park"] .contact-sky__plate--mid {
  background-image: url(../../img/hero/themes/North-Park/08_Midground.webp);
}