/* ============================================================================
   THEME · WIREFRAME A
   ============================================================================
   A starting-point template, not a finished look. Everything the site
   draws is here in its underwear: pastel paper, a lavender accent, a mint
   accent, dashed rules where the ringer was, no shadows, and a monospace
   for the annotation register. Art becomes boxes. The hero says "coming
   soon" across its middle. Dial it in later; for now it is the scaffold.

   Structure is the same as every theme sheet: a token block does most of
   the work, then the few rules tokens cannot reach. The PLACEHOLDER
   TREATMENT at the bottom is what makes this one a wireframe — every
   artifact frame and the portrait are washed out under a dashed box with
   a label, so the layout reads without the art.

   Scoped to html[data-theme="Wireframe-A"]; linked on every page.
   Wireframe B is a copy of this file with a different accent pair.
   ========================================================================== */

html[data-theme="Wireframe-A"] {
  /* --- surfaces & ink: near-white with a lavender cast, soft slate ---- */
  --paper:        #fbfaff;
  --paper-butter: #f7f5ff;
  --paper-warm:   #ffffff;
  --sand:         #ebe8f8;
  --ink:          #4b4a63;
  --ink-soft:     #7c7a94;
  --box:          #3a3950;

  /* --- accents: lavender where gold was, mint where rust was --------- */
  --gold:         #b9a7f2;
  --gold-deep:    #6f5dc4;
  --rust:         #7fd6c2;
  --rust-deep:    #2f9c84;
  --cocoa:        #f5c6b0;
  --sky:          #dfe9f7;

  /* --- tints: pastel versions of the case-study set -------------------- */
  --teal:         #8fd3c9;
  --teal-deep:    #3f8f85;
  --avocado:      #bfe3c9;
  --avocado-deep: #5f9a72;
  --denim:        #c3d0f5;
  --denim-deep:   #6b7fbf;
  --oxblood:      #e6b4c2;
  --oxblood-deep: #9c4f68;
  --aqua:         #a9dde6;
  --aqua-deep:    #3f8a99;
  --plum:         #d3c2ec;
  --plum-deep:    #7a5aa8;

  /* --- type: a grotesk for display, Inter for reading, mono for labels -- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-variation: normal;

  /* --- shape & depth: rounded, flat, dashed --------------------------- */
  --radius-card: 10px;
  --radius-pill: 999px;
  --shadow-hard:       0 0 0 transparent;
  --shadow-hard-lg:    0 0 0 transparent;
  --shadow-hard-hover: 0 0 0 transparent;
  --ringer:            1px dashed var(--ink-soft);
}

/* Space Grotesk carries less weight than Fraunces 900; 700 is its top. */
html[data-theme="Wireframe-A"] h1,
html[data-theme="Wireframe-A"] h2,
html[data-theme="Wireframe-A"] h3,
html[data-theme="Wireframe-A"] .display,
html[data-theme="Wireframe-A"] .h1,
html[data-theme="Wireframe-A"] .h2,
html[data-theme="Wireframe-A"] .h3,
html[data-theme="Wireframe-A"] .nav__wordmark,
html[data-theme="Wireframe-A"] .slib-view,
html[data-theme="Wireframe-A"] .slib-az__key,
html[data-theme="Wireframe-A"] .gloss-az__key,
html[data-theme="Wireframe-A"] .hero-panel__subline,
html[data-theme="Wireframe-A"] .hero-panel__email,
html[data-theme="Wireframe-A"] .accord__num {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Eyebrows and every uppercase micro-register go monospace — the
   annotation voice of a wireframe. */
html[data-theme="Wireframe-A"] .eyebrow,
html[data-theme="Wireframe-A"] .chip,
html[data-theme="Wireframe-A"] .slib-pill,
html[data-theme="Wireframe-A"] .slib-tag,
html[data-theme="Wireframe-A"] .gloss-pill,
html[data-theme="Wireframe-A"] .gloss-tag,
html[data-theme="Wireframe-A"] .artifact__tag,
html[data-theme="Wireframe-A"] .hero-fineprint {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.06em;
}

/* Hover lifts rely on the hard shadow; with none, they translate into
   nothing. A dashed ring stands in as the hover state. */
html[data-theme="Wireframe-A"] .btn:hover,
html[data-theme="Wireframe-A"] .slib-pill:hover,
html[data-theme="Wireframe-A"] .gloss-pill:hover,
html[data-theme="Wireframe-A"] .slib-view:hover,
html[data-theme="Wireframe-A"] a.slib-chip:hover,
html[data-theme="Wireframe-A"] a.gloss-pivot:hover,
html[data-theme="Wireframe-A"] .accord .accord__item:hover {
  transform: none;
  outline: 1px dashed var(--gold-deep);
  outline-offset: 2px;
}

/* The nav and footer are pale, not ink: a wireframe has no dark chrome. */
html[data-theme="Wireframe-A"] .nav,
html[data-theme="Wireframe-A"] .strip {
  background: var(--paper-warm);
  color: var(--ink);
  border-bottom: var(--ringer);
}
html[data-theme="Wireframe-A"] .nav__wordmark,
html[data-theme="Wireframe-A"] .nav__link,
html[data-theme="Wireframe-A"] .nav__toggle,
html[data-theme="Wireframe-A"] .strip a,
html[data-theme="Wireframe-A"] .strip p { color: var(--ink); }
html[data-theme="Wireframe-A"] .nav__toggle { border-color: var(--ink); }
html[data-theme="Wireframe-A"] .nav__drawer { background: var(--paper-warm); box-shadow: none; border-bottom: var(--ringer); }
html[data-theme="Wireframe-A"] .nav[data-scrolled="true"] { box-shadow: none; }
html[data-theme="Wireframe-A"] .nav__link:hover,
html[data-theme="Wireframe-A"] .nav__link[aria-current] { color: var(--gold-deep); border-bottom-color: var(--gold-deep); }

/* Mastheads and the hero frame are pastel sky with a dotted grid — the
   wireframe's answer to a photograph. */
html[data-theme="Wireframe-A"] .masthead,
html[data-theme="Wireframe-A"] .hero__frame {
  background:
    radial-gradient(circle, var(--ink-soft) 1px, transparent 1.5px) 0 0 / 24px 24px,
    var(--sky);
}
html[data-theme="Wireframe-A"] .masthead h1,
html[data-theme="Wireframe-A"] .masthead p {
  color: var(--ink);
  text-shadow: none;
}
html[data-theme="Wireframe-A"] .masthead__plate--back {
  background-image: url(../../img/hero/themes/Wireframe-A/10_Background.webp);
}
html[data-theme="Wireframe-A"] .masthead__plate--mid {
  background-image: url(../../img/hero/themes/Wireframe-A/08_Midground.webp);
}

/* The 70s band, in the accent pair. */
html[data-theme="Wireframe-A"] .hero-band__stripe--gold  { background: var(--gold); }
html[data-theme="Wireframe-A"] .hero-band__stripe--rust  { background: var(--rust); }
html[data-theme="Wireframe-A"] .hero-band__stripe--cocoa { background: var(--cocoa); }

/* The AR instruments over the scene go lavender instead of red, and the
   card face goes mono. */
html[data-theme="Wireframe-A"] .hero__frame {
  --annot-red:    #6f5dc4;
  --annot-orange: #7fd6c2;
  --annot-paper:  #ffffff;
  --annot-ink:    #4b4a63;
  --font-annot:   "IBM Plex Mono", ui-monospace, monospace;
  --font-annot-weight: 500;
}

/* ---------------------------------------------------------- COMING SOON --
   Centred on the hero, over the cards and the scene, pointer-transparent
   so the diorama still tracks the cursor underneath. The template's one
   piece of honesty. */
html[data-theme="Wireframe-A"] .hero__frame::after {
  content: "Coming soon";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 35;                       /* over the carousel's 30 */
  translate: -50% -50%;
  padding: 0.6em 1.2em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px dashed var(--ink);
  border-radius: 6px;
  pointer-events: none;
}

/* ---------------------------------------------------- PLACEHOLDER ART ----
   Every artifact frame and the portrait: the picture is washed to a ghost
   under a dashed box with an X through it and a label, so the page keeps
   its shape and says what it is. */
html[data-theme="Wireframe-A"] .artifact__frame,
html[data-theme="Wireframe-A"] .about__portrait,
html[data-theme="Wireframe-A"] .case-hero__media,
html[data-theme="Wireframe-A"] .card__media {
  position: relative;
  border: 1px dashed var(--ink-soft);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), var(--ink-soft) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to top left,  transparent calc(50% - 0.5px), var(--ink-soft) 50%, transparent calc(50% + 0.5px)),
    var(--sand);
  transform: none !important;        /* no 2% tilt on a wireframe */
}
html[data-theme="Wireframe-A"] .artifact__frame img,
html[data-theme="Wireframe-A"] .about__portrait img,
html[data-theme="Wireframe-A"] .case-hero__media img,
html[data-theme="Wireframe-A"] .card__media img {
  filter: grayscale(1) contrast(0.5);
  opacity: 0.18;
  mix-blend-mode: multiply;
}
html[data-theme="Wireframe-A"] .artifact__frame::after,
html[data-theme="Wireframe-A"] .about__portrait::after,
html[data-theme="Wireframe-A"] .case-hero__media::after,
html[data-theme="Wireframe-A"] .card__media::after {
  content: "IMAGE";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  padding: 0.35em 0.8em;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--ink);
  background: var(--paper-warm);
  border: 1px dashed var(--ink-soft);
  pointer-events: none;
}
html[data-theme="Wireframe-A"] .about__portrait::after     { content: "PORTRAIT"; }
html[data-theme="Wireframe-A"] .case-hero__media::after    { content: "SIGNATURE ARTIFACT"; }

/* Space Grotesk runs wider than Fraunces: at the phone register the longest
   case-study title words ("Marketplace") clear a 360px screen only a size
   down. */
@media (max-width: 499px) {
  html[data-theme="Wireframe-A"] .case-hero h1 { font-size: 44px; }
}

/* 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="Wireframe-A"] .contact-sky__plate--back {
  background-image:
    url(../../img/hero/themes/Wireframe-A/10_Background.webp),
    url(../../img/hero/themes/Wireframe-A/11_Background.webp);
}
html[data-theme="Wireframe-A"] .contact-sky__plate--mid {
  background-image: url(../../img/hero/themes/Wireframe-A/07_Midground.webp);
}