/* Hallmark: Antenna Calculator product showcase, custom technical direction. */
/* The real Smith chart supplies the visual focus. The page uses the app's blue and mint palette. */
@font-face {
  font-family: "Instrument Sans";
  src: url("instrument-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --back: #101e28;
  --panel: #172b36;
  --frame: #203743;
  --line: #395460;
  --text: #f1f7f7;
  --muted: #bccdd2;
  --mint: #a0e2d4;
  --ink: #0a2224;
  --trace: #42616a55;
  --shadow: #081219b8;
  --clear: transparent;
  --body: "Instrument Sans", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-padding-top: 1.5rem; }
body { margin: 0; color: var(--text); background: var(--back); font: 1rem/1.6 var(--body); }
a { color: var(--mint); text-underline-offset: .23em; }
a:active { opacity: .82; }
a:focus-visible { outline: 3px solid var(--mint); outline-offset: 5px; }
.wrap { width: min(100% - 3rem, 76rem); margin-inline: auto; }
.skip { position: absolute; z-index: 3; top: .75rem; left: 1.5rem; padding: .5rem 1rem; background: var(--back); translate: 0 -200%; }
.skip:focus { translate: 0; }
.mast, .footer { display: flex; gap: .9rem 1.6rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding-block: 1.25rem; }
.mast { border-bottom: 1px solid var(--line); }
.mast nav, .footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.45rem; }
.mast a, .footer a { text-decoration: none; }
.mast a:hover, .footer a:hover { text-decoration: underline; }
.brand { display: inline-flex; gap: .65rem; align-items: center; color: var(--text); font-weight: 700; }
.brand img { border-radius: .6rem; }
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  padding-block: clamp(2rem, 7vw, 5.5rem);
}
h1, h2 { min-width: 0; margin: 0; font: 700 clamp(2.4rem, 5vw, 4.6rem)/.99 var(--display); overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: clamp(4rem, 7.75vw, 7.5rem); line-height: .88; letter-spacing: -.026em; }
.lead { margin: 1.45rem 0 1.5rem; max-width: 32rem; color: var(--muted); font-size: clamp(1.08rem, 2vw, 1.3rem); }
.action { display: inline-block; padding: .65rem 1.05rem; border-radius: .25rem; color: var(--ink); background: var(--mint); text-decoration: none; font-weight: 700; }
.action:hover { text-decoration: underline; }
.instrument {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .7rem; justify-items: center;
  padding: 1.45rem 1.2rem 1rem; border-radius: 1.5rem .2rem 1.5rem .2rem;
  background-color: var(--panel);
  background-image:
    linear-gradient(90deg, var(--clear) calc(50% - .5px), var(--trace) 50%, var(--clear) calc(50% + .5px)),
    linear-gradient(var(--clear) calc(50% - .5px), var(--trace) 50%, var(--clear) calc(50% + .5px)),
    repeating-radial-gradient(circle at 50% 50%, var(--clear) 0 2.7rem, var(--trace) 2.75rem 2.8rem, var(--clear) 2.85rem 5.5rem);
}
.hero-image, .screen > a { display: block; position: relative; border-radius: 1rem; padding: .35rem; color: var(--text); background: var(--frame); box-shadow: 0 .85rem 2.5rem var(--shadow); }
.hero-image { width: min(100%, 16.25rem); }
.hero-image img, .screen img { display: block; width: 100%; height: auto; border-radius: .65rem; }
.instrument-label, figcaption { position: relative; color: var(--muted); font-size: .88rem; text-align: center; }
.gallery { padding: clamp(2rem, 4vw, 3.35rem) 0; border-top: 1px solid var(--line); }
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .87fr); gap: 1.5rem clamp(2rem, 7vw, 7rem); align-items: start; margin-top: 1.5rem; }
.choices { display: grid; grid-template-columns: minmax(0, 1fr); }
.choices a { display: block; padding: .75rem .85rem; font-weight: 650; color: var(--text); text-decoration: none; border-block-end: 1px solid var(--line); }
.choices a:hover { text-decoration: underline; }
.choices a[aria-current="true"] { color: var(--mint); background: var(--panel); box-shadow: inset 3px 0 var(--mint); }
.screen-copy { max-width: 48ch; margin: 1.2rem 0 0; color: var(--muted); }
.screen { margin: 0; width: min(100%, 19rem); justify-self: center; }
figcaption { margin-top: .8rem; }
.details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 7vw, 7rem); border-top: 1px solid var(--line); padding-block: 2.1rem; }
.details h2, .policy-body h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.details p { max-width: 48ch; margin-bottom: 0; color: var(--muted); }
.footer { border-top: 1px solid var(--line); color: var(--muted); }
.policy-body { width: min(100% - 3rem, 47rem); margin-inline: auto; padding-block: clamp(2.25rem, 6vw, 5rem); }
.policy-body h1 { font-size: clamp(3.5rem, 7vw, 6rem); }
.policy-body section { margin-top: 2.2rem; }
.policy-body p { margin: .65rem 0 0; max-width: 67ch; color: var(--muted); }
.policy-byline { font-size: 1.14rem; }
@media (max-width: 45rem) {
  .wrap, .policy-body { width: min(100% - 2rem, 76rem); }
  .hero, .gallery-grid, .details { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { font-size: clamp(3.45rem, 13vw, 6.3rem); }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screen { justify-self: center; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}