/* Ellensburg Label Co. — shared styles for every page.
   Layout: slim plate masthead with nav; home = builder (controls | live plate + order) then reference sections;
   other pages = a single readable column (article) with a call-to-action into the builder. */
@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Michroma-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/fonts/IBMPlexSans-400-600-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-400-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Arimo-700-latin.woff2") format("woff2"); }

:root {
  /* One look, white, on every device (Juan, 2026-10-24): no dark mode. */
  color-scheme: light;
  --paper: #ffffff;
  --surface: #f6f7f7;
  --ink: #1b1e22;
  --steel: #5b646d;
  --rule: #dde1e1;
  --brass: #7a5c14;
  --brass-ink: #ffffff;
  --alert: #b3121f;
  --ok: #2c6e49;
  --grid: rgba(27, 30, 34, .06);
  --display: "Michroma", "Eurostile", "Microgramma", sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--body); }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.18; margin: 0; text-wrap: balance; text-transform: uppercase; letter-spacing: .02em; }
h2 { font-size: clamp(1.35rem, 3.2vw, 1.85rem); }
h3 { font-size: .98rem; }
p { margin: 0; }
a { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.eyebrow { font: 500 .74rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }

/* Masthead */
.mast { border-bottom: 1px solid var(--rule); }
.mast .wrap { padding-block: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.logo { display: block; width: 190px; max-width: 100%; height: auto; }
.logo .plate { fill: var(--ink); }
.logo .ink { fill: var(--paper); }
.logo .line { stroke: var(--paper); }
.mast .phone { font: 500 .9rem/1 var(--mono); color: var(--steel); user-select: all; }

.intro { padding-block: 40px 8px; display: grid; gap: 14px; max-width: 820px; }
.intro h1 { font-size: clamp(1.7rem, 4.8vw, 3rem); }
.intro h1 em { font-style: normal; color: var(--brass); }
.intro p { color: var(--steel); font-size: 1.1rem; max-width: 62ch; }

/* Builder */
.builder { padding-block: 32px 56px; }
.grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0, 1fr); } .stage { position: static !important; } }
.controls { display: grid; gap: 20px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
legend, label.lbl, .lbl { font: 600 .78rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--steel); padding: 0; margin-bottom: 2px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: baseline; }
.step i { font: 400 .95rem/1 var(--display); color: var(--brass); font-style: normal; }
input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, textarea {
  font: 500 1rem/1.3 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; width: 100%; min-width: 0;
}
textarea#text { font: 700 1.05rem/1.35 "Arimo", Arial, Helvetica, sans-serif; letter-spacing: .02em; min-height: 110px; resize: vertical; }
textarea#text.caps { text-transform: uppercase; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 10px; align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { font: 500 .8rem/1 var(--mono); background: transparent; color: var(--ink); border: 1px solid var(--rule); border-radius: 2px; padding: 8px 10px; cursor: pointer; }
.chips button:hover, .chips button[aria-pressed="true"] { border-color: var(--brass); color: var(--brass); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 46px; height: 32px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); cursor: pointer; font: 700 .85rem/1 "Arimo", Arial, sans-serif; padding: 0; }
.swatch[aria-pressed="true"] { outline: 2px solid var(--brass); outline-offset: 2px; }
.swatch:disabled { opacity: .3; cursor: not-allowed; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check { display: inline-flex; gap: 8px; align-items: center; font-size: .95rem; cursor: pointer; }
.hint { font-size: .85rem; color: var(--steel); }

.stage { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); display: grid; gap: 16px; }
.bench { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 20px; display: grid; gap: 14px; }
.board { background-color: var(--surface); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 20px 20px; border-radius: 3px; min-height: 240px; display: grid; place-items: center; padding: 28px 12px; overflow: hidden; }
#plate svg { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.22)); }
.scale { display: flex; align-items: center; gap: 8px; font: 500 .75rem/1 var(--mono); color: var(--steel); justify-content: center; }
.scale span { display: inline-block; height: 6px; border: 1.5px solid var(--steel); border-top: 0; }
.spec { font: 400 .85rem/1.5 var(--mono); color: var(--steel); display: grid; gap: 2px; }
.spec b { color: var(--ink); font-weight: 500; }
.warn { color: var(--alert); font-size: .92rem; }
.quote { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.qline { display: flex; justify-content: space-between; gap: 12px; color: var(--steel); }
.qline.total { color: var(--ink); font: 400 1.4rem/1 var(--display); }
.small { font-size: .82rem; color: var(--steel); }
details.file summary { cursor: pointer; font: 500 .82rem/1.2 var(--mono); color: var(--steel); }
details.file .prod { margin-top: 10px; background: #ffffff; border: 1px dashed var(--rule); border-radius: 3px; padding: 12px; display: grid; place-items: center; }
details.file .prod svg { max-width: 100%; height: auto; }

.order { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 20px; display: grid; gap: 12px; }
.btn { font: 400 .88rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--brass); color: var(--brass-ink); border: 0; border-radius: 3px; padding: 15px 20px; cursor: pointer; width: 100%; }
.btn:disabled { opacity: .5; cursor: wait; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.result { font-size: .95rem; }
.result.ok { color: var(--ok); font-weight: 600; }
.result.err { color: var(--alert); }

/* Reference sections */
section.ref { padding-block: 52px; border-top: 1px solid var(--rule); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 36px; margin-top: 26px; }
.item { display: grid; gap: 6px; align-content: start; }
.item .code { font: 500 .74rem/1.2 var(--mono); color: var(--brass); }
.item p { color: var(--steel); }
ol.steps { list-style: none; counter-reset: s; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; }
ol.steps li { counter-increment: s; display: grid; gap: 6px; align-content: start; }
ol.steps li::before { content: counter(s); font: 400 1.7rem/1 var(--display); color: var(--brass); }
ol.steps p { color: var(--steel); }
.no { color: var(--alert); font-weight: 600; }
footer { border-top: 1px solid var(--rule); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Site nav */
.mast a.home { display: block; line-height: 0; }
.mast nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font: 500 .92rem/1.2 var(--body); }
.mast nav a { color: var(--ink); text-decoration: none; padding-block: 10px; }
.mast nav a:hover, .mast nav a[aria-current="page"] { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

/* Content pages */
.crumbs { font: 400 .8rem/1.4 var(--mono); color: var(--steel); padding-block: 26px 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; }
.crumbs a { color: var(--steel); }
.article { padding-block: 18px 60px; display: grid; gap: 18px; max-width: 74ch; }
.article h1 { font-size: clamp(1.55rem, 4.4vw, 2.5rem); }
.article h2 { margin-top: 20px; font-size: clamp(1.05rem, 2.6vw, 1.3rem); }
.article .lede { font-size: 1.12rem; color: var(--steel); }
.article ul, .article ol { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.article .table-wrap { overflow-x: auto; }
.article table { border-collapse: collapse; width: 100%; min-width: 460px; font-variant-numeric: tabular-nums; }
.article th, .article td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.article th { font: 600 .78rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: var(--steel); }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; border: 1px solid var(--rule); background: var(--surface); border-radius: 4px; padding: 18px 20px; }
.cta p { flex: 1 1 260px; min-width: 0; }
a.btn { display: inline-block; width: auto; text-decoration: none; }
.related { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 24px; }
.faq { display: grid; }
.faq details { border-top: 1px solid var(--rule); padding-block: 14px; }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin-top: 8px; color: var(--steel); }

/* Footer */
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px 32px; padding-block: 32px; font: 400 .9rem/1.5 var(--body); color: var(--steel); }
footer .cols h2 { font: 600 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
footer .cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
footer .cols a { color: var(--steel); }
footer .cols a:hover { color: var(--brass); }
footer .fine { border-top: 1px solid var(--rule); padding-block: 16px 28px; font: 400 .8rem/1.4 var(--mono); color: var(--steel); }

/* Home H1: small search phrase over the big tagline */
.intro h1 { display: grid; gap: 14px; }
.intro h1 .eyebrow { text-transform: uppercase; }
.item h3 a { color: inherit; text-decoration: none; }
.item h3 a:hover { color: var(--brass); text-decoration: underline; text-underline-offset: 4px; }

/* Order (cart) */
.order h3 { margin-bottom: 2px; }
.cart { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cart li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; border: 1px solid var(--rule); border-radius: 4px; padding: 10px; background: var(--paper); }
.cart li.editing { border-color: var(--brass); }
.cart .thumb { display: grid; place-items: center; min-height: 44px; }
.cart .thumb svg { display: block; max-width: 76px; max-height: 60px; width: auto; height: auto; }
.cart .what { min-width: 0; }
.cart .what b { display: block; font: 700 .95rem/1.25 "Arimo", Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.cart .what span { display: block; font-size: .82rem; color: var(--steel); }
.cart .amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.cart .acts { grid-column: 2 / -1; display: flex; gap: 16px; }
.linkbtn { background: none; border: 0; padding: 4px 0; color: var(--brass); font: 500 .85rem/1.2 var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.totals { display: grid; gap: 6px; border-top: 1px solid var(--rule); padding-top: 12px; font-variant-numeric: tabular-nums; }
.label-price { color: var(--ink); font-weight: 600; }

/* Size tabs */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--rule); }
.tabs [role="tab"] { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font: 600 .88rem/1.2 var(--body); color: var(--steel); cursor: pointer; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brass); }
#stdPanel, #customPanel { padding-top: 10px; }
#customPanel { display: grid; gap: 8px; }
#customPanel[hidden] { display: none; }