/*
 * Yooper Hub design tokens. Owned by Site SEO; one file, one place to change a value.
 *
 *   Six colors, three family/weight pairs, no radius, no shadow.
 *   Spec: the Oct 8 2026 design handoff README (front page + article template).
 *
 * Loaded first on every page that loads any Site SEO stylesheet: design-tokens.php
 * adds this file as a dependency of each of them, so the order is guaranteed and a
 * page can never print a sheet that asks for a token this file has not defined.
 * The URL carries ?ver=<plugin version>.<file mtime> (asset-deploy.php), so a
 * changed token is never served from a stale cache.
 *
 * Contents
 *   1. Fonts (self-hosted latin subsets, font-display: swap)
 *   2. Tokens
 *   3. Legacy custom properties, names kept, all resolving to the tokens
 *   4. WordPress / theme.json presets, resolved to the tokens
 *   5. Base layer (zero specificity, every component rule still wins)
 *   6. Skip link, inputs, buttons, focus
 *   7. Photo credit
 *   8. Guards: no radius, no shadow, no italics
 *   9. Third-party and live-only markup that Site SEO does not own
 */

/* ---------------------------------------------------------------- 1. Fonts */

/* Newsreader: one variable file, wght 400-700 and opsz 6-72 (optical size follows
   font-size). IBM Plex Mono: 600 only. Both are latin subsets from Google Fonts,
   SIL Open Font License 1.1 (see fonts/LICENSES.txt). */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/newsreader-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The face shown while Newsreader loads. Times New Roman at Newsreader's average
   advance (100.7%) and vertical metrics, so the swap moves almost nothing. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman"), local("Times"), local("Liberation Serif");
  size-adjust: 100.7%;
  ascent-override: 73%;
  descent-override: 26.3%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- 2. Tokens */

:root {
  /* Color: six values, no others. */
  --yht-newsprint: #EAE3D6;   /* page ground; text on Ink and Oxide */
  --yht-ink: #16130F;         /* text, rules, dark bands, ink buttons */
  --yht-oxide: #A8492A;       /* kickers, links, the Stamp button. 4.5:1 on Newsprint, and Newsprint on it */
  --yht-muted: #5B534A;       /* credits, dates, read time, provenance. 5.9:1 on Newsprint */
  --yht-hairline: #C9C1B3;    /* row dividers only. Never text */
  --yht-photo: #DED5C5;       /* image placeholder while loading */

  /* Alpha steps of the six, for translucent layers on a dark band. Nothing else is translucent. */
  --yht-newsprint-6: rgba(234, 227, 214, 0.06);
  --yht-newsprint-12: rgba(234, 227, 214, 0.12);
  --yht-newsprint-18: rgba(234, 227, 214, 0.18);
  --yht-newsprint-24: rgba(234, 227, 214, 0.24);
  --yht-newsprint-32: rgba(234, 227, 214, 0.32);
  --yht-newsprint-48: rgba(234, 227, 214, 0.48);
  --yht-newsprint-64: rgba(234, 227, 214, 0.64);
  --yht-newsprint-72: rgba(234, 227, 214, 0.72);
  --yht-newsprint-80: rgba(234, 227, 214, 0.8);
  --yht-newsprint-90: rgba(234, 227, 214, 0.9);
  --yht-ink-6: rgba(22, 19, 15, 0.06);
  --yht-ink-12: rgba(22, 19, 15, 0.12);
  --yht-ink-18: rgba(22, 19, 15, 0.18);
  --yht-ink-32: rgba(22, 19, 15, 0.32);
  --yht-ink-48: rgba(22, 19, 15, 0.48);
  --yht-ink-64: rgba(22, 19, 15, 0.64);
  --yht-ink-80: rgba(22, 19, 15, 0.8);
  --yht-ink-90: rgba(22, 19, 15, 0.9);
  --yht-oxide-24: rgba(168, 73, 42, 0.24);
  --yht-oxide-32: rgba(168, 73, 42, 0.32);
  --yht-oxide-48: rgba(168, 73, 42, 0.48);

  /* Type: three family/weight pairs. Newsreader 400 and 700; IBM Plex Mono 600. */
  --yht-font-text: "Newsreader", "Newsreader Fallback", "Times New Roman", serif;
  --yht-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* ------------------------------------------------ 3. Legacy custom properties
   Every custom property a Site SEO stylesheet used to define, names unchanged,
   resolving to a token. The sheets no longer define them. A name that lands on
   the same token as another is deliberate: the old palette had neighbours
   (three navies, three greens, six off-whites) and they collapse here. */

:root {

  /* Site-wide (--yh-*) */
  --yh-amber: var(--yht-photo);
  --yh-amber-ink: var(--yht-ink);
  --yh-article-accent: var(--yht-oxide);
  --yh-article-copy: var(--yht-ink);
  --yh-article-heading: var(--yht-ink);
  --yh-article-muted: var(--yht-muted);
  --yh-article-rule: var(--yht-hairline);
  --yh-article-sans: var(--yht-font-text,Newsreader,"Times New Roman",serif);
  --yh-article-serif: var(--yht-font-text,Newsreader,"Times New Roman",serif);
  --yh-birch: var(--yht-photo);
  --yh-brand-archive: var(--yht-photo);
  --yh-brand-evergreen: var(--yht-oxide);
  --yh-brand-fog: var(--yht-photo);
  --yh-brand-freshwater: var(--yht-oxide);
  --yh-brand-ink: var(--yht-ink);
  --yh-brand-lake: var(--yht-oxide);
  --yh-brand-navy: var(--yht-ink);
  --yh-brand-paper: var(--yht-newsprint);
  --yh-brand-rule: var(--yht-hairline);
  --yh-brand-sans: var(--yht-font-text,Newsreader,"Times New Roman",serif);
  --yh-brand-serif: var(--yht-font-text,Newsreader,"Times New Roman",serif);
  --yh-brand-slate: var(--yht-muted);
  --yh-brand-snow: var(--yht-newsprint);
  --yh-drift: var(--yht-oxide);
  --yh-ink: var(--yht-ink);
  --yh-muted: var(--yht-muted);
  --yh-page: var(--yht-newsprint);
  --yh-paper: var(--yht-newsprint);
  --yh-photo-caption: var(--yht-muted);
  --yh-photo-credit: var(--yht-muted);
  --yh-photo-ink: var(--yht-ink);
  --yh-photo-matte: var(--yht-photo);
  --yh-photo-neutral: var(--yht-photo);
  --yh-photo-radius-archive: 0;
  --yh-photo-radius-card: 0;
  --yh-photo-radius-lead: 0;
  --yh-pine: var(--yht-oxide);
  --yh-r-ctl: 0;
  --yh-r-panel: 0;
  --yh-shadow-card: none;
  --yh-shell-accent: var(--yht-oxide);
  --yh-shell-accent-hover: var(--yht-ink);
  --yh-shell-bg: var(--yht-newsprint);
  --yh-shell-muted: var(--yht-muted);
  --yh-shell-navy: var(--yht-ink);
  --yh-shell-rule: var(--yht-hairline);
  --yh-shell-surface: var(--yht-newsprint);
  --yh-shell-text: var(--yht-ink);
  --yh-shop-fog: var(--yht-newsprint);
  --yh-shop-green: var(--yht-oxide);
  --yh-shop-ink: var(--yht-ink);
  --yh-shop-lime: var(--yht-oxide);
  --yh-shop-line: var(--yht-hairline);
  --yh-shop-mint: var(--yht-oxide);
  --yh-shop-muted: var(--yht-muted);
  --yh-shop-navy: var(--yht-ink);
  --yh-shop-paper: var(--yht-newsprint);
  --yh-superior: var(--yht-ink);

  /* Category archives (--yhca-*) */
  --yhca-accent: var(--yht-oxide);
  --yhca-card: var(--yht-newsprint);
  --yhca-ink: var(--yht-ink);
  --yhca-line: var(--yht-hairline);
  --yhca-muted: var(--yht-muted);
  --yhca-paper: var(--yht-newsprint);
  --yhca-soft: var(--yht-newsprint);

  /* Document pages (--yhd-*) */
  --yhd-green: var(--yht-oxide);
  --yhd-green-dark: var(--yht-ink);
  --yhd-ground: var(--yht-newsprint);
  --yhd-ink: var(--yht-ink);
  --yhd-line: var(--yht-hairline);
  --yhd-muted: var(--yht-muted);
  --yhd-paper: var(--yht-newsprint);
  --yhd-wash: var(--yht-newsprint);

  /* Go See It (--yhg-*) */
  --yhg-gold: var(--yht-newsprint);
  --yhg-green: var(--yht-oxide);
  --yhg-green-dark: var(--yht-ink);
  --yhg-ground: var(--yht-newsprint);
  --yhg-ink: var(--yht-ink);
  --yhg-line: var(--yht-hairline);
  --yhg-muted: var(--yht-muted);
  --yhg-paper: var(--yht-newsprint);
  --yhg-serif: var(--yht-font-text,Newsreader,"Times New Roman",serif);

  /* Utility pages (--yhu-*) */
  --yhu-gold: var(--yht-newsprint);
  --yhu-green: var(--yht-oxide);
  --yhu-green-dark: var(--yht-ink);
  --yhu-ground: var(--yht-newsprint);
  --yhu-ink: var(--yht-ink);
  --yhu-line: var(--yht-hairline);
  --yhu-muted: var(--yht-muted);
  --yhu-paper: var(--yht-newsprint);
  --yhu-wash: var(--yht-newsprint);

  /* Daily edition (--daily-*) */
  --daily-gold: var(--yht-newsprint);
  --daily-green: var(--yht-oxide);
  --daily-ink: var(--yht-ink);
  --daily-line: var(--yht-hairline);
  --daily-muted: var(--yht-muted);
  --daily-paper: var(--yht-newsprint);

  /* Sponsorship pages (--ink, --paper, --rule, --oxide) */
  --ink: var(--yht-ink);
  --ink-soft: var(--yht-muted);
  --paper: var(--yht-newsprint);
  --paper-deep: var(--yht-photo);
  --rule: var(--yht-hairline);
  --rule-firm: var(--yht-hairline);
  --oxide: var(--yht-oxide);
}

/* ------------------------------------- 4. WordPress / theme.json presets
   The block theme's palette is blue, and inline styles (var(--wp--preset--...))
   and has-*-color classes still point at it. html:root outranks the theme's own
   :root / body definitions wherever its global-styles block prints. */

html:root {
  --wp--preset--color--accent: var(--yht-newsprint);
  --wp--preset--color--base: var(--yht-newsprint);
  --wp--preset--color--base-50: var(--yht-newsprint);
  --wp--preset--color--base-100: var(--yht-newsprint);
  --wp--preset--color--base-200: var(--yht-newsprint);
  --wp--preset--color--base-300: var(--yht-newsprint);
  --wp--preset--color--black: var(--yht-ink);
  --wp--preset--color--contrast: var(--yht-ink);
  --wp--preset--color--cyan-bluish-gray: var(--yht-hairline);
  --wp--preset--color--light: var(--yht-newsprint);
  --wp--preset--color--light-green-cyan: var(--yht-oxide);
  --wp--preset--color--luminous-vivid-amber: var(--yht-oxide);
  --wp--preset--color--luminous-vivid-orange: var(--yht-oxide);
  --wp--preset--color--pale-cyan-blue: var(--yht-photo);
  --wp--preset--color--pale-pink: var(--yht-photo);
  --wp--preset--color--primary: var(--yht-oxide);
  --wp--preset--color--secondary: var(--yht-ink);
  --wp--preset--color--secondary-50: var(--yht-newsprint);
  --wp--preset--color--secondary-100: var(--yht-newsprint);
  --wp--preset--color--secondary-200: var(--yht-hairline);
  --wp--preset--color--secondary-300: var(--yht-hairline);
  --wp--preset--color--secondary-400: var(--yht-muted);
  --wp--preset--color--secondary-500: var(--yht-muted);
  --wp--preset--color--secondary-600: var(--yht-muted);
  --wp--preset--color--secondary-700: var(--yht-muted);
  --wp--preset--color--secondary-800: var(--yht-ink);
  --wp--preset--color--secondary-900: var(--yht-ink);
  --wp--preset--color--secondary-950: var(--yht-ink);
  --wp--preset--color--vivid-cyan-blue: var(--yht-oxide);
  --wp--preset--color--vivid-green-cyan: var(--yht-oxide);
  --wp--preset--color--vivid-purple: var(--yht-oxide);
  --wp--preset--color--vivid-red: var(--yht-oxide);
  --wp--preset--color--white: var(--yht-newsprint);
  --wp--preset--font-family--primary: var(--yht-font-text);
  --wp--preset--font-family--secondary: var(--yht-font-text);
  --wp--preset--font-family--system-sans-serif: var(--yht-font-text);
  --wp--preset--font-family--system-serif: var(--yht-font-text);
  --wp--preset--font-family--code: var(--yht-font-mono);
  --wp--preset--gradient--black-fadeup: linear-gradient(to top, var(--yht-ink-80), transparent);
  --wp--preset--gradient--blush-bordeaux: none;
  --wp--preset--gradient--blush-light-purple: none;
  --wp--preset--gradient--cool-to-warm-spectrum: none;
  --wp--preset--gradient--electric-grass: none;
  --wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: none;
  --wp--preset--gradient--luminous-dusk: none;
  --wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: none;
  --wp--preset--gradient--luminous-vivid-orange-to-vivid-red: none;
  --wp--preset--gradient--midnight: none;
  --wp--preset--gradient--pale-ocean: none;
  --wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: none;
  --wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: none;
  --wp--preset--shadow--crisp: none;
  --wp--preset--shadow--deep: none;
  --wp--preset--shadow--diminutive: none;
  --wp--preset--shadow--natural: none;
  --wp--preset--shadow--outlined: none;
  --wp--preset--shadow--petite: none;
  --wp--preset--shadow--sharp: none;
  --wp--preset--shadow--small: none;
  --wp--custom--global--border--radius: 0;
}

/* ------------------------------------------------------------ 5. Base layer */

:where(html) {
  background: var(--yht-newsprint);
  color: var(--yht-ink);
  font-synthesis: none;
}

:where(body) {
  background: var(--yht-newsprint);
  color: var(--yht-ink);
  font-family: var(--yht-font-text);
  font-weight: 400;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--yht-font-text);
  font-weight: 700;
}

:where(strong, b, th) {
  font-weight: 700;
}

/* No italics anywhere in the system. */
:where(em, i, cite, dfn, address, var, blockquote, q) {
  font-style: normal;
}

/* Links: Oxide, no underline; Ink with an underline on hover. */
:where(a) {
  color: var(--yht-oxide);
  text-decoration: none;
}

:where(a:hover) {
  color: var(--yht-ink);
  text-decoration: underline;
}

::selection {
  background: var(--yht-ink);
  color: var(--yht-newsprint);
}

::placeholder {
  color: var(--yht-muted);
  opacity: 1;
}

/* ------------------------------------ 6. Skip link, inputs, buttons, focus */

/* Focus: a 2px Oxide ring on every control, 2px off the edge. On the dark bands
   Oxide is 2.8:1 against Ink, under the 3:1 a focus ring needs, so those use
   Newsprint (14:1). */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--yht-oxide);
  outline-offset: 2px;
}

:where(
  .yhseo-daily-site-header,
  .yhseo-brand-footer,
  .yhseo-brand-footer-mobile,
  .yhseo-daily-site-header__mobile-nav,
  .yhseo-daily-email,
  .yhseo-front__stamp,
  .yhseo-server-newsletter,
  .yhseo-retention-email,
  .yhac10,
  .yhac10-bar
) :focus-visible {
  outline-color: var(--yht-newsprint);
}

/* Skip links. WordPress prints a bare link and the browser colors it #0000EE;
   the focused state is a Newsprint tab with an Ink border, which reads on both
   the Newsprint page and the Ink header it lands over. */
a.skip-link,
a.yhseo-daily-skip-link {
  color: var(--yht-ink);
  background: var(--yht-newsprint);
  font-family: var(--yht-font-mono);
  font-size: 13px;
  font-weight: 600 !important;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

html a.skip-link.screen-reader-text:focus,
html a.yhseo-daily-skip-link:focus {
  border: 2px solid var(--yht-ink);
  color: var(--yht-ink);
  background: var(--yht-newsprint);
  font-size: 13px;
  padding: 14px 18px;
  text-decoration: none;
}

/* Text inputs, selects, textareas: Newsprint fill, 1.5px Ink border, Newsreader 18. */
:where(
  input:not([type]),
  input[type="text"], input[type="email"], input[type="search"], input[type="url"],
  input[type="tel"], input[type="number"], input[type="password"], input[type="date"],
  textarea, select
) {
  box-sizing: border-box;
  color: var(--yht-ink);
  background-color: var(--yht-newsprint);
  border: 1.5px solid var(--yht-ink);
  border-radius: 0;
  font: 400 18px/1.3 var(--yht-font-text);
  max-width: 100%;
  min-width: 0;   /* the intrinsic width of a 20-character field is wider than a phone footer */
  padding: 0 14px;
}

:where(textarea) {
  padding: 12px 14px;
}

:where(input, textarea, select):disabled {
  color: var(--yht-muted);
  border-color: var(--yht-hairline);
}

/* Radios and checkboxes: a 24px Ink-edged square; checked is Ink with a Newsprint core. */
:where(input[type="radio"], input[type="checkbox"]) {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  color: var(--yht-ink);
  background-color: var(--yht-newsprint);
  border: 1.5px solid var(--yht-ink);
  border-radius: 0;
  font: inherit;
  vertical-align: middle;
}

:where(input[type="radio"], input[type="checkbox"]):checked {
  background: linear-gradient(var(--yht-newsprint), var(--yht-newsprint)) center / 8px 8px no-repeat, var(--yht-ink);
}

/* Buttons: Ink fill, Newsprint label in Plex Mono, square, no browser chrome.
   Size is left to each component (padding and height already vary by context). */
:where(
  button, input[type="submit"], input[type="button"], input[type="reset"],
  .wp-element-button, .wp-block-button__link
) {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  color: var(--yht-newsprint);
  background: var(--yht-ink);
  border: 1.5px solid var(--yht-ink);
  border-radius: 0;
  cursor: pointer;
  font-family: var(--yht-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

:where(
  button, input[type="submit"], input[type="button"], input[type="reset"],
  .wp-element-button, .wp-block-button__link
):hover {
  color: var(--yht-newsprint);
  background: var(--yht-oxide);
  border-color: var(--yht-oxide);
  text-decoration: none;
}

:where(button, input[type="submit"], input[type="button"], input[type="reset"]):disabled {
  cursor: not-allowed;
  opacity: .5;
}

/* ------------------------------------------------------- 7. Photo credit */

/* Credits are the one mono string that is NOT upper-cased: licence names are
   case-sensitive (CC BY-SA 4.0, Public domain). design-tokens.php wraps the
   "Photo: ..." tail of a caption in this class at render time; nothing is saved. */
.yht-credit {
  display: block;
  margin-top: 4px;
  color: var(--yht-muted);
  font-family: var(--yht-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.45;
  text-transform: none;
}

/* ------------------------------------------------------------ 8. Guards */

/* No radius and no shadow, including on markup Site SEO does not own. */
*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --------------------- 9. Third-party and live-only markup (not Site SEO's)
   Rules for markup another plugin prints. Each block names its owner and the
   selector it restates; selectors carry "html body" so they outrank the owner's
   own sheet, which prints after this one. */

/* 9a. Header "Advertise" link and utility cell. Was a live-only inline block
   (id yh-hdr-advertise-css, printed by WPCode snippet 440's header); design-tokens.php
   drops that block and these are its rules, on the tokens. */
.yh-hdr-util {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  justify-self: end;
}

.yh-hdr-advertise {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--yht-newsprint-72);
  font-family: var(--yht-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.yh-hdr-advertise:hover,
.yh-hdr-advertise:focus-visible {
  color: var(--yht-newsprint);
  text-decoration: underline;
}

.yh-hdr-advertise[aria-current="page"] {
  color: var(--yht-newsprint);
}

@media (min-width: 1200px) {
  .yh-hdr-advertise { font-size: 12px; }
}

@media (max-width: 1119px) {
  .yhseo-daily-site-header .yh-hdr-util .yh-hdr-advertise { display: none !important; }
}

@media (max-width: 600px) {
  body .yhseo-brand-footer__inner { display: block; }
}

/* 9b. Article signup units (yooperhub-article-capture-v010). Its variants are
   custom properties, so restating the properties restyles every unit and the
   sticky bar; the literal colors and weights it sets besides are listed below. */
html body .yhac10-unit,
html body .yhac10-bar {
  --yh-fg: var(--yht-newsprint);
  --yh-kick: var(--yht-newsprint);
  --yh-edge: var(--yht-newsprint);
  --yh-btn: var(--yht-oxide);
  --yh-btn-fg: var(--yht-newsprint);
  --yh-err: var(--yht-newsprint);
}

html body .yhac10-unit--inline {
  --yh-fg: var(--yht-ink);
  --yh-kick: var(--yht-oxide);
  --yh-edge: var(--yht-ink);
  --yh-btn: var(--yht-oxide);
  --yh-btn-fg: var(--yht-newsprint);
  --yh-err: var(--yht-oxide);
}

html body .yhac10-unit {
  background: var(--yht-ink);
}

html body .yhac10-unit.yhac10-unit--inline {
  color: var(--yht-ink) !important;
  background: var(--yht-newsprint);
  border-color: var(--yht-hairline);
  border-left-color: var(--yht-oxide);
}

html body .yhac10-unit.yhac10-unit--inline h2.yhac10-title,
html body .yhac10-unit.yhac10-unit--inline h3.yhac10-title {
  color: var(--yht-ink) !important;
}

html body .yhac10-kicker {
  font-family: var(--yht-font-mono);
  font-weight: 600;
  letter-spacing: .1em;
}

html body .yhac10-title {
  font-family: var(--yht-font-text);
  font-weight: 700;
}

html body .yhac10-sub,
html body .yhac10-fine {
  font-family: var(--yht-font-text);
  font-weight: 400;
}

html body .yhac10-form input[type="email"] {
  color: var(--yht-ink);
  background: var(--yht-newsprint);
  border: 1.5px solid var(--yh-edge);
  font-family: var(--yht-font-text);
  font-size: 18px;
  font-weight: 400;
}

html body .yhac10-form input[type="email"]:focus,
html body .yhac10-form input[type="email"]:focus-visible {
  border-color: var(--yh-edge);
  outline: 2px solid var(--yh-kick);
  outline-offset: 2px;
}

html body .yhac10-form .mailerlite-subscribe-submit {
  font-family: var(--yht-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
}

html body .yhac10-form .mailerlite-form-response :is(h3, h4) {
  font-family: var(--yht-font-text);
  font-weight: 700;
}

html body .yhac10-form .mailerlite-form-error {
  font-family: var(--yht-font-text);
  font-weight: 400;
}

html body .yhac10-form .mailerlite-form-response:focus-visible,
html body .yhac10-bar__close:focus-visible {
  outline-color: var(--yht-newsprint);
}

@media (max-width: 768px) {
  html body .yhac10-bar.is-visible {
    background: var(--yht-ink);
    border-top-color: var(--yht-newsprint);
  }

  html body .yhac10-bar__copy {
    font-family: var(--yht-font-text);
    font-weight: 700;
  }

  html body .yhac10-bar .yhac10-form {
    --yh-btn: var(--yht-oxide);
  }

  html body .yhac10-bar .yhac10-form .mailerlite-subscribe-submit {
    font-size: 11px;
  }

  html body .yhac10-bar__close {
    color: var(--yht-newsprint-72);
    border-color: var(--yht-newsprint-32);
  }
}