/*
  /projects in the snowboard look (public/designs/snowboard.css): backcountry powder.
  Glacier navy, snow white, a cold ice blue, one avalanche-gear orange for the live
  signal and focus. Saira (wide) for headings and reading, Martian Mono for the
  readout-style header and meta. The contour lines are the mountain from the hero loop.
*/

:root[data-theme="snowboard"] {
  color-scheme: dark;

  --stage: #08131f;
  --shot: #0e1f33;
  --card: #0e1f33;
  --raise: #15283f;
  --line: #24384f;
  --fg: #f2f6fa;
  --muted: #a9bbcf;
  --sub: #c3d1e0;
  --faint: #5d7189;
  --accent: #ff7b3a;
  --accent-text: #a8d0f2;
  --on-accent: #08131f;
  --accent-soft: rgba(168, 208, 242, 0.1);

  --f-text: "Saira", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;

  --s-xl: clamp(1.45rem, 2.4vw, 2rem);
  --s-hero: clamp(2.6rem, 6vw, 4.6rem);

  --r-sm: 3px;
  --r-md: 3px;
}

.theme-snowboard {
  overflow-x: clip;
  background:
    url("/designs/media/snowboard/topo.svg") right -120px top -60px / min(1100px, 130vw) auto no-repeat,
    var(--stage);
}

.theme-snowboard ::selection {
  background: var(--accent-text);
  color: var(--stage);
}

.theme-snowboard :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Header: the transceiver strip */
.theme-snowboard .site-header {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(8, 19, 31, 0.6);
}

.theme-snowboard .site-header a:hover {
  color: var(--accent-text);
}

/* Headings: Saira, set wide */
.theme-snowboard .projects__intro h1,
.theme-snowboard .featured__title,
.theme-snowboard .entry__title {
  font-family: var(--f-text);
  font-weight: 600;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}

.theme-snowboard .projects__intro h1 {
  line-height: 0.98;
}

.theme-snowboard .featured__title,
.theme-snowboard .entry__title {
  line-height: 1.12;
}

.theme-snowboard .projects__lede {
  margin-top: 20px;
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.55;
}

/* Covers: a quiet frame, like a photo on a cold night */
.theme-snowboard .featured__media,
.theme-snowboard .entry__media {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.7);
}

.theme-snowboard .featured__pitch,
.theme-snowboard .entry__pitch {
  color: var(--sub);
}

/* Meta: the readout row */
.theme-snowboard .meta {
  font-stretch: 87.5%;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

.theme-snowboard .meta__status {
  color: var(--fg);
}

/* Status: an orange transceiver signal for live, an ice ring in progress, a dim dot archived */
.theme-snowboard .planet {
  box-shadow: none;
}

.theme-snowboard .planet--coral {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 123, 58, 0.22);
}

.theme-snowboard .planet--neutral {
  background: transparent;
  border: 2px solid var(--accent-text);
}

.theme-snowboard .planet--off {
  background: var(--faint);
}

/* Button: a snow-white outline, filled on hover */
.theme-snowboard .btn {
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid rgba(242, 246, 250, 0.45);
  border-radius: var(--r-sm);
  font-family: var(--f-text);
  font-stretch: 106%;
  font-size: 1rem;
  font-weight: 500;
}

.theme-snowboard .btn--ghost {
  background: transparent;
  color: var(--fg);
}

.theme-snowboard .btn--ghost:hover {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--stage);
}

/* More projects: label in the readout voice */
.theme-snowboard .more__title {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}

.theme-snowboard .entry {
  border-top-color: var(--line);
}

/* Contact */
.theme-snowboard .projects__contact {
  color: var(--muted);
  border-top-color: var(--line);
}

.theme-snowboard .projects__contact a {
  color: var(--accent-text);
  font-weight: 500;
}

.theme-snowboard .projects__contact a:hover {
  color: var(--fg);
}