/* CONTACTUM — a signal-red specification design for an electrical connector range.
   A warm off-white ground with a vivid red accent and a left label column on every data block, so
   the page reads as a wiring schedule rather than as a brochure. Distinct from the pale serif
   garden design, the kraft packaging design and the cool monospace solar one.

   The shared motion layer makes the sticky header take the body's background colour, so the
   masthead is designed as part of the body surface: the same colours apply whether or not the
   script runs. */

:root {
  color-scheme: light;
  --ground: #f4f2ee;
  --surface: #ffffff;
  --surface-2: #e9e5de;
  --ink: #17181a;
  --ink-2: #4c5054;
  --ink-3: #83878c;
  --rule: #d3cec6;
  --accent: #c0231f;
  --accent-ink: #ffffff;
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --shell: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.shell { width: min(100% - 2.4rem, var(--shell)); margin-inline: auto; }

/* ---------------------------------------------------------------- masthead */

.masthead { background: var(--ground); color: var(--ink); border-bottom: 3px solid var(--accent); }
.masthead-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 2rem; padding: 0.95rem 0; }
.brand { display: flex; align-items: baseline; gap: 0.65rem; margin: 0; }
.brand strong { font-size: 1.24rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.brand span { font-size: 0.71rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--ink-3); }

.site-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.1rem; margin-inline-start: auto; }
.site-nav a { color: var(--ink-2); font-size: 0.86rem; font-weight: 600; padding: 0.25rem 0; border-bottom: 3px solid transparent; }
.site-nav a:hover { color: var(--accent); text-decoration: none; border-bottom-color: var(--rule); }
.site-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------- headings */

h1, h2, h3 { line-height: 1.1; margin: 0 0 0.65rem; letter-spacing: -0.02em; }
h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.3rem); font-weight: 800; }
h2 { font-size: clamp(1.28rem, 1rem + 1.3vw, 1.78rem); font-weight: 700; }
h3 { font-size: 1.04rem; font-weight: 700; }

p { margin: 0 0 1rem; color: var(--ink-2); }
p.lead { font-size: 1.09rem; color: var(--ink); max-width: 59ch; }

.eyebrow { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin: 0 0 0.7rem; }

.breadcrumb { font-size: 0.8rem; color: var(--ink-3); margin: 0 0 1.1rem; font-weight: 600; }
.breadcrumb a { color: var(--ink-3); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-inline: 0.42rem; }

/* ---------------------------------------------------------------- sections */

.section { padding: clamp(2.2rem, 1.3rem + 3vw, 3.7rem) 0; }
.section + .section { border-top: 1px solid var(--rule); }
.section-head { max-width: 62ch; margin-bottom: 1.6rem; }
.section-head.spaced { margin-top: 2.2rem; }

.hero { padding: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem) 0 clamp(1.6rem, 1rem + 2vw, 2.5rem); }
.hero-grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.9rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.03fr); align-items: center; } }

.hero-figure { margin: 0; background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--accent); }
.hero-figure img { width: 100%; }
.hero-figure figcaption { font-size: 0.75rem; color: var(--ink-3); padding: 0.6rem 0.9rem; border-top: 1px solid var(--rule); font-weight: 600; }

/* ---------------------------------------------------------------- grids */

.grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.card { background: var(--surface); border: 1px solid var(--rule); padding: 1.15rem 1.25rem 1.35rem 1.45rem; border-left: 4px solid var(--accent); display: flex; flex-direction: column; gap: 0.45rem; }
.card h3 { margin: 0; }
.card p { margin: 0; font-size: 0.94rem; }
.card .tag { font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.card a.more { font-size: 0.87rem; font-weight: 700; margin-top: auto; }

.product-card { background: var(--surface); border: 1px solid var(--rule); display: flex; flex-direction: column; }
.product-card img { border-bottom: 1px solid var(--rule); }
.product-card .body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.product-card h3 { margin: 0; }
.product-card .body p { margin: 0; font-size: 0.93rem; }
.product-card .body a.more { margin-top: 0.45rem; font-size: 0.87rem; font-weight: 700; }

/* ---------------------------------------------------------------- data */

.spec-list { margin: 0 0 1.3rem; }
.spec-list > div { padding: 0.72rem 0 0.72rem 0.9rem; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule); display: grid; gap: 0.2rem 1.4rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .spec-list > div { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); } }
.spec-list > div:hover { border-left-color: var(--accent); }
.spec-list dt { font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 0; }
.spec-list dd { margin: 0; color: var(--ink); font-size: 0.95rem; }

.table-scroll { overflow-x: auto; margin: 0 0 1.3rem; border: 1px solid var(--rule); background: var(--surface); }
table { border-collapse: collapse; width: 100%; min-width: 32rem; }
caption { text-align: left; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 700; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: 0.68rem 0.9rem; border-bottom: 1px solid var(--rule); font-size: 0.93rem; }
thead th { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
tbody th { color: var(--ink); font-weight: 700; }
tbody td { color: var(--ink-2); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- notes */

details { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--ink); padding: 0.9rem 1.1rem; margin: 0 0 0.7rem; }
summary { cursor: pointer; font-weight: 700; font-size: 0.98rem; color: var(--ink); }
summary::marker { color: var(--accent); }
details p { margin: 0.62rem 0 0; font-size: 0.94rem; }

.note { font-size: 0.87rem; color: var(--ink-2); background: var(--surface-2); padding: 0.7rem 1rem; margin: 0 0 1.3rem; border-left: 4px solid var(--accent); font-weight: 600; }

.demo-band { background: var(--ink); color: var(--surface); padding: 0.72rem 1.1rem; font-size: 0.82rem; font-weight: 600; margin: 0 0 1.4rem; }
.demo-band strong { color: #f08a86; letter-spacing: 0.08em; }

/* ---------------------------------------------------------------- links */

.link-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.link-row a { font-size: 0.88rem; font-weight: 700; border: 2px solid var(--ink); padding: 0.6rem 1.1rem; color: var(--ink); background: var(--surface); }
.link-row a:hover { background: var(--ink); color: var(--surface); text-decoration: none; }
.link-row a.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.link-row a.primary:hover { background: #9c1b18; border-color: #9c1b18; color: var(--accent-ink); }

.next-links { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); margin-top: 1.3rem; }
.next-links a { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--accent); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.22rem; }
.next-links a span { font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.next-links a b { font-weight: 700; font-size: 1rem; color: var(--ink); }
.next-links a:hover { border-color: var(--accent); text-decoration: none; }
.next-links a:hover b { color: var(--accent); }

/* ---------------------------------------------------------------- footer */

.site-foot { border-top: 3px solid var(--ink); background: var(--surface-2); margin-top: 2.2rem; padding: 1.8rem 0 2.8rem; }
.site-foot p { font-size: 0.86rem; color: var(--ink-2); }
.site-foot .links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin-bottom: 0.9rem; }
.site-foot .links a { font-size: 0.86rem; color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- utilities */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-ink); padding: 0.7rem 1.1rem; z-index: 40; font-weight: 700; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
main:focus { outline: none; }