/* W2.1 "Maquette" for the flagship pages. Linked only by the Breakage Calendar, the census and the
 * forecast tracker, after the shared kit, so it re-skins them without touching any other page.
 *
 * The world: the walnut drafting room at dusk (header, intro, footer) and the bone drafting sheet on
 * the table (the data). One ember stone, the keystone, marks what matters next: the next date, a
 * tested fix, the one action. Voices: Archivo condensed for the record, Instrument Serif italic for
 * the human sentence, JetBrains Mono for labels and values.
 *
 * Contrast (WCAG, measured): ink on bone 16.30, muted on bone 6.50 (panel 7.02), ember-deep on bone
 * 5.25, walnut on ember 6.20, bone on walnut 16.30, stone on walnut 7.15, ember on walnut 6.20. */

@font-face { font-family: "KS Display"; src: url("../assets/fonts/Archivo-Display-Latin1-62-125-800-900.woff2") format("woff2"); font-weight: 800 900; font-stretch: 62% 125%; font-display: fallback; }
@font-face { font-family: "KS Text"; src: url("../assets/fonts/Archivo-Text-Latin1-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: fallback; }
@font-face { font-family: "KS Voice"; src: url("../assets/fonts/InstrumentSerif-Italic-Latin1.woff2") format("woff2"); font-style: italic; font-display: fallback; }
@font-face { font-family: "KS Mono"; src: url("../assets/fonts/JetBrainsMono-Medium-Latin1.woff2") format("woff2"); font-weight: 500; font-display: fallback; }

:root {
  color-scheme: light;
  --mq-walnut: #110D0A;
  --mq-ash: #1D1712;
  --mq-stone: #A69C8E;
  --mq-bone: #F2EBDD;
  --mq-ember: #FF5A1F;
  --mq-ember-deep: #AE3809;
  --mq-grid: rgba(17, 13, 10, .055);
  --mq-course: url("/assets/brand/course.svg");
  --mq-voice: "KS Voice", "Instrument Serif", Georgia, serif;

  /* The shared kit's names, re-pointed: every existing rule on these pages re-renders in Maquette. */
  --wp-paper: var(--mq-bone);
  --wp-panel: #F8F4EA;
  --wp-ink: var(--mq-walnut);
  --wp-muted: #5C5147;
  --wp-hair: #D6C9B2;
  --wp-cobalt: var(--mq-ember-deep);
  --wp-cobalt-deep: var(--mq-walnut);
  --wp-pale: var(--mq-stone);
  --wp-bio: var(--mq-ember);
  --wp-on-bio: var(--mq-walnut);
  --wp-cited: #FBD9C6;
  --wp-flag: #E9E1D3;
  --wp-rust: var(--mq-ember-deep);
  --wp-link: var(--mq-walnut);
  --wp-deep: var(--mq-walnut);
  --wp-deep-label: var(--mq-stone);
  --wp-focus: var(--mq-ember-deep);
  --wp-focus-field: var(--mq-ember);
  --wp-font-display: "KS Display", "Arial Narrow", Arial, sans-serif;
  --wp-font-body: "KS Text", Arial, sans-serif;
  --wp-font-mono: "KS Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wp-pill: 0;
  --cn-color-canvas: var(--wp-paper);
  --cn-color-panel: var(--wp-panel);
  --cn-color-ink: var(--wp-ink);
  --cn-color-muted: var(--wp-muted);
  --cn-color-link: var(--wp-link);
  --cn-color-line: var(--wp-hair);
}

/* The sheet: bone paper with a faint drafting grid. */
html, body { background-color: var(--mq-bone); color: var(--mq-walnut); }
body { font-family: var(--wp-font-body); }
main {
  background-image: linear-gradient(var(--mq-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mq-grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: -1px -1px;
}

/* Links read as ink with an ember-deep rule under them; the rule thickens on hover. */
main a { color: var(--mq-walnut); text-decoration-color: var(--mq-ember-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--wp-focus); outline-offset: 3px; }

/* Voices */
.mq-rec { font-family: var(--wp-font-display); font-stretch: 62%; font-weight: 800; letter-spacing: -.005em; text-transform: uppercase; }
.mq-voice { font-family: var(--mq-voice); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.label, .item-label { font-family: var(--wp-font-mono); letter-spacing: .08em; }
main h1, main h2 { font-family: var(--wp-font-display); font-stretch: 62%; font-weight: 800; letter-spacing: -.005em; line-height: .92; text-transform: uppercase; }
main h3 { font-family: var(--wp-font-display); font-stretch: 75%; font-weight: 800; letter-spacing: 0; }
main h3 code, main h2 code { text-transform: none; }

/* ---------- the drafting room: header ---------- */
.site-header { background: var(--mq-walnut); color: var(--mq-bone); }
.site-header .field-band, .site-footer .field-band { display: none; }
.site-header .wrap { min-height: 76px; }
.site-header .brand { color: var(--mq-bone); gap: 12px; }
.site-header .brand-mark { height: 32px; width: 32px; }
.site-header .brand-name { font: 900 17px/1 var(--wp-font-display); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; }
.site-header .site-nav a { color: var(--mq-bone); font: 800 18px/1 var(--wp-font-display); font-stretch: 62%; letter-spacing: .03em; padding-inline: 12px; text-transform: uppercase; }
.site-header .site-nav a:hover { color: var(--mq-ember); text-decoration: none; }
.site-header .site-nav a[aria-current="page"]::after { background: var(--mq-ember); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--mq-ember); }

/* The intro band continues the room. It is full bleed without widening the page: the shadow paints
 * the walnut out to the edges and clip-path trims it to the band's own height. */
.mq-band {
  background: var(--mq-walnut);
  box-shadow: 0 0 0 100vmax var(--mq-walnut);
  clip-path: inset(0 -100vmax);
  color: var(--mq-bone);
  position: relative;
}
.mq-band a:not(.btn):not(.cal-next) { color: var(--mq-bone); text-decoration-color: var(--mq-ember); }
.mq-band .label, .mq-band .item-label { color: var(--mq-stone); }
.mq-band :focus-visible { outline-color: var(--mq-ember); }
.mq-band .btn { background: var(--mq-ember); border: 0; border-radius: 0; color: var(--mq-walnut); font: 800 16px/1 var(--wp-font-display); font-stretch: 112%; letter-spacing: .02em; min-height: 56px; padding: 0 28px; text-decoration: none; text-transform: uppercase; }
.mq-band .btn:hover { background: #FF7440; color: var(--mq-walnut); }
.mq-band .more { font-weight: 700; padding-right: 1.4em; text-decoration: underline; text-decoration-color: var(--mq-ember); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mq-band code { background: var(--mq-ash); color: var(--mq-bone); }

/* The band closes on a course of stones; the ember keystone sits at its left end. */
.mq-course { height: 34px; margin: 0; position: relative; }
.mq-course::before { background: var(--mq-ember); clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); content: ""; height: 34px; left: 0; position: absolute; top: 0; width: 76px; }
.mq-course::after {
  background: var(--mq-bone);
  content: ""; height: 6px; left: 84px; position: absolute; right: 0; top: 0;
  -webkit-mask: var(--mq-course) 0 0 / 730px 6px repeat-x; mask: var(--mq-course) 0 0 / 730px 6px repeat-x;
}

/* A section rule on the sheet is a course of stones in ink. */
.mq-rule { border-top: 0 !important; position: relative; }
.mq-rule::before {
  background: var(--mq-walnut); content: ""; height: 4px; left: 0; position: absolute; right: 0; top: 0;
  -webkit-mask: var(--mq-course) 0 0 / 548px 4px repeat-x; mask: var(--mq-course) 0 0 / 548px 4px repeat-x;
}

/* ---------- footer: back into the room ---------- */
.site-footer { background: var(--mq-walnut); color: var(--mq-stone); }
.site-footer a, .site-footer nav a { color: var(--mq-bone); text-decoration-color: var(--mq-ember); }
.site-footer .wrap { border-top: 0; position: relative; padding-top: var(--wp-12); }
.site-footer .wrap::before {
  background: var(--mq-stone); content: ""; height: 6px; left: var(--wp-gutter); position: absolute; right: var(--wp-gutter); top: var(--wp-6);
  -webkit-mask: var(--mq-course) 0 0 / 730px 6px repeat-x; mask: var(--mq-course) 0 0 / 730px 6px repeat-x;
}

/* ---------- the value-capture block (shared closing) ---------- */
.vc h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.vc h3 { font-stretch: 75%; }

@media (prefers-reduced-motion: no-preference) {
  .mq-band .btn { transition: background .2s, transform .2s; }
  .mq-band .btn:hover { transform: translateY(-2px); }
}
@media (max-width: 720px) {
  .site-header .wrap { gap: var(--wp-2); min-height: 64px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { height: 28px; width: 28px; }
  .site-header .brand-name { font-size: 14px; }
  .site-header .site-nav { margin-right: 0; gap: 0; }
  .site-header .site-nav a { font-size: 17px; min-width: 44px; justify-content: center; padding-inline: 5px; }
  .site-header .site-nav a:last-child { padding-right: 0; }
}
@media (max-width: 600px) {
  .mq-course { height: 26px; }
  .mq-course::before { height: 26px; width: 56px; }
  .mq-course::after { left: 62px; }
}

/* ---------- the weekly email: a link to the provider's hosted page ---------- */
.mq-signup { border: 1px solid var(--mq-stone); display: grid; gap: var(--wp-2); margin-top: var(--wp-4); max-width: 36rem; padding: var(--wp-4) var(--wp-6) var(--wp-3); }
.mq-signup p { margin: 0; }
.mq-signup-title { font: 800 1.375rem/1 var(--wp-font-display); font-stretch: 62%; letter-spacing: .01em; text-transform: uppercase; }
.mq-signup-copy { color: var(--mq-stone); font-size: 1rem; }
.mq-signup-link { align-items: center; display: inline-flex; font-weight: 700; min-height: 48px; text-decoration: underline; text-decoration-color: var(--mq-ember); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.mq-signup-link::after { content: "→"; margin-left: .45em; text-decoration: none; }
.mq-signup-fine { color: var(--mq-stone); font-size: var(--wp-text-meta); line-height: 1.5; overflow-wrap: anywhere; }
main > article > .mq-signup, .mq-signup--sheet { border-color: var(--mq-walnut); }
.mq-signup--sheet .mq-signup-fine { color: var(--wp-muted); }
.mq-signup--sheet .mq-signup-copy { color: var(--wp-muted); }
@media (max-width: 600px) { .mq-signup { padding-inline: var(--wp-4); } }
/* the form variant: one field; the button sits beside it from 601px and under it on phones */
.mq-signup-label { font-weight: 700; line-height: 1.25; margin-bottom: -.25rem; }
.mq-signup-row { display: flex; flex-wrap: wrap; gap: var(--wp-2); }
.mq-signup-row input { background: var(--mq-bone); border: 2px solid var(--mq-walnut); border-radius: 0; color: var(--mq-walnut); flex: 1 1 14rem; font: inherit; min-height: 48px; min-width: 0; padding: 0 .75rem; }
.mq-signup-row button { background: var(--mq-ember); border: 2px solid var(--mq-walnut); border-radius: 0; color: var(--mq-walnut); cursor: pointer; flex: 0 0 auto; font: inherit; font-weight: 700; min-height: 48px; padding: 0 1.125rem; }
.mq-signup-row button:hover { background: var(--mq-bone); }
@media (max-width: 600px) {
  .mq-signup--form { margin-top: var(--wp-3); padding-block: var(--wp-3); }
  .mq-signup-row input, .mq-signup-row button { flex-basis: 100%; }
}