/* Tall Timbers Group: an alpine route guide. */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2?v=e728cf97eb15") format("woff2-variations"), url("../fonts/fraunces.woff2?v=e728cf97eb15") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans.woff2?v=924099527bba") format("woff2-variations"), url("../fonts/work-sans.woff2?v=924099527bba") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --snow: #f5f4ef;      /* mineral paper */
  --paper: #efeee7;     /* shaded paper */
  --ink: #233c43;       /* spruce ink */
  --trail: #c75c31;     /* trail blaze */
  --trail-text: #a63f1c;/* readable trail blaze */
  --lichen: #8c9e93;    /* survey lines */
  --rule: #d1d2c7;

  --logo-mark: url("../img/logo/option-c-ridgeline.svg?v=928f89253e51");

  --display: "Fraunces", Georgia, serif;
  --body: "Work Sans", system-ui, sans-serif;

  /* five sizes, three doing most of the work */
  --fs-xl: clamp(3rem, 1.2rem + 5.4vw, 6rem);
  --fs-l: clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --fs-m: 1.375rem;
  --fs-body: 1.125rem;
  --fs-s: 0.875rem;

  --gap-section: clamp(5rem, 2rem + 9vw, 10rem);
  --edge: clamp(1.25rem, 5vw, 4.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--snow) url("../img/paper-grain.svg?v=bd9772f61d44");
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.55;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-weight: 500;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-xl); line-height: 0.98; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-l); line-height: 1.04; letter-spacing: -0.02em; }
p { margin: 0 0 1em; max-width: 36em; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: 1rem; top: -4rem;
  background: var(--ink); color: var(--snow);
  padding: 0.75rem 1rem; z-index: 10;
}
.skip:focus { top: 1rem; }

/* buttons and links: flat, square, one fill */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.4rem;
  background: var(--trail-text); color: var(--snow);
  font-weight: 600; text-decoration: none;
  border-radius: 3px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.button:hover { background: var(--ink); }
.button:active { transform: translateY(1px); }

.text-link {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--trail);
  text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.text-link:hover { text-decoration-thickness: 4px; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* header */
.site-header {
  display: flex; align-items: center; gap: 1rem 2.25rem;
  padding: 1.25rem var(--edge);
  position: relative; z-index: 2;
  max-width: 1600px; margin-inline: auto;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 2.75rem; text-decoration: none; margin-right: auto;
}
.logo-mark {
  width: 2.25rem; height: 2.25rem; flex: none;
  background-color: currentColor;
  -webkit-mask: var(--logo-mark) center / contain no-repeat;
  mask: var(--logo-mark) center / contain no-repeat;
}
.wordmark {
  font-family: var(--display); font-size: var(--fs-m); font-weight: 600;
  font-variation-settings: "SOFT" 100, "WONK" 0; letter-spacing: -0.01em;
}
.site-nav { display: flex; gap: 0.25rem 1.75rem; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-color: var(--trail); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site-nav a[aria-current="location"] { text-decoration: underline; text-decoration-color: var(--trail); text-underline-offset: 0.3em; }
.button-nav { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.button-nav:hover { background: var(--ink); color: var(--snow); }

/* hero: text and an engraved mountain panorama share the same sheet */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  align-items: center;
  column-gap: 2rem;
  max-width: 1600px;
  margin: 0 auto;
  padding: 4.5rem var(--edge) 4rem;
}
.hero-copy { grid-column: 1; grid-row: 1; max-width: 36rem; position: relative; z-index: 1; align-self: start; padding-top: 2.5rem; }
.hero-copy h1 { max-width: 11ch; margin-bottom: 2rem; font-weight: 450; }
.hero-copy > p:not(.lead) { font-size: 1.0625rem; max-width: 32em; }
.lead { font-size: var(--fs-m); line-height: 1.45; max-width: 25em; }
.mountain-scene { grid-column: 2; grid-row: 1; position: relative; min-width: 0; align-self: end; margin: -3.5rem -1.5rem 0 -2rem; }
.mountain-art { width: 100%; height: auto; max-height: 32rem; object-fit: contain; mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); }
.scene-caption { display: block; margin: 0.5rem 0 1.5rem 14%; font-family: var(--display); font-size: 0.9375rem; font-weight: 400; }

.you-are-here {
  position: absolute; right: 300px; top: 222px; margin: 0;
  transform: translate(-0.75rem, -50%);
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--display); font-size: var(--fs-m);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.yah-dot {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--trail); box-shadow: 0 0 0 5px var(--snow), 0 0 0 7px var(--trail);
  order: -1;
}

/* products: the trail map */
.products {
  background: var(--paper) url("../img/paper-grain.svg?v=bd9772f61d44");
  padding: 6rem max(var(--edge), calc((100% - 1456px) / 2));
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}
.route-rail { position: sticky; top: 2rem; }
/* short desktop windows: the rail plus an answer can be taller than the screen, so let it scroll with the page */
@media (max-height: 820px) { .route-rail { position: static; } }
.route-rail h2 { margin-bottom: 1rem; }
.route-rail > p { font-size: 1rem; }

.profile { width: 100%; max-width: 20rem; height: auto; margin: 1.25rem 0 0.5rem; overflow: visible; }
.profile-ground { fill: var(--snow); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.profile-marker { transform: translate(0px, 78px); transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
.profile-marker circle { fill: var(--trail); stroke: var(--ink); stroke-width: 2; }

.routes { list-style: none; margin: 0; padding: 0; }
.routes a {
  display: flex; align-items: center; min-height: 3rem;
  padding: 0.65rem 0 0.65rem 1rem;
  border-left: 2px solid var(--rule);
  font-size: 1rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.routes a:hover { border-left-color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; }
.routes a[aria-current="true"] { border-left-color: var(--trail-text); background: #f3f5f180; font-weight: 600; }

.answer:empty { display: none; }
.answer {
  margin-top: 1.25rem; padding: 1.1rem 1.25rem;
  background: var(--snow);
  border-radius: 0 8px 8px 8px;
  border-left: 2px solid var(--trail-text);
  font-size: 1rem;
}
.answer p { margin: 0 0 0.6rem; }
.answer p:last-child { margin: 0; }
.answer a { font-weight: 600; text-decoration-color: var(--trail); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.answer .answer-link { display: inline-flex; align-items: center; min-height: 2.75rem; }

.trailmap {
  position: relative;
  padding: 0.5rem 0 1rem;
}
.trail-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.trail-lines .trail-path { fill: none; stroke: var(--trail); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 7; }
.trail-lines .trail-mask { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }

.trail { position: relative; }
.trail-b { margin-top: 6rem; }
.trailhead {
  position: relative; display: flex; align-items: center; gap: 1rem;
  font-size: clamp(1.75rem, 2.7vw, 2.5rem); font-weight: 400; line-height: 1.05;
  margin-bottom: 3.5rem;
}
.th-mark {
  flex: none; width: 2.5rem; height: 2.5rem;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
}

.waypoints { list-style: none; margin: 0; padding: 0; }
.waypoints li {
  position: relative;
  margin: 0 0 3.25rem calc(var(--x) * 0.7%);
  max-width: 26rem;
  padding: 0.25rem 1rem 0.85rem 3.75rem;
  border-radius: 0 12px 12px 12px;
  scroll-margin-top: 2rem;
  transition: background-color 0.25s ease;
}
.waypoints li:last-child { margin-bottom: 0; }
.wp {
  position: absolute; left: 0; top: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--snow); border: 1.5px solid var(--trail-text);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.waypoints h4 { font-size: var(--fs-m); font-weight: 600; line-height: 1.2; margin: 0.3rem 0 0.5rem; letter-spacing: -0.01em; }
.waypoints h4 a, .summit h3 { text-decoration: none; }
.waypoints h4 a {
  display: inline-block; min-height: 2.75rem; padding-top: 0.25rem;
  text-decoration: underline; text-decoration-color: var(--trail);
  text-decoration-thickness: 2px; text-underline-offset: 0.22em;
}
.waypoints h4 a:hover { text-decoration-thickness: 4px; }
.waypoints p { margin: 0; font-size: 1rem; line-height: 1.65; }
.waypoints .product-promise { font-weight: 600; margin-bottom: .65rem; }
.waypoints li:hover .wp { box-shadow: 0 0 0 5px #f3f5f180; }

.summit {
  position: relative;
  margin: 6rem 0 0 18%;
  max-width: 28rem;
  padding: 0.25rem 1rem 0.75rem 3.75rem;
  scroll-margin-top: 2rem;
  transition: background-color 0.25s ease;
  border-radius: 0 12px 12px 12px;
}
.summit-mark {
  position: absolute; left: 0; top: 0.2rem; width: 2.6rem; height: 2.3rem;
  background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.summit h3 { font-size: var(--fs-m); font-weight: 600; margin: 0.35rem 0 0.5rem; }
.summit p { margin-bottom: 0.25rem; }

.is-lit { background: var(--snow); }
.is-lit .wp { background: var(--trail-text); border-color: var(--trail-text); color: var(--snow); transform: scale(1.12); }
.waypoints li:target, .summit:target { background: var(--snow); }

/* about: a field note */
.field-note {
  max-width: 1456px; margin-inline: auto;
  padding: var(--gap-section) var(--edge);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem;
  align-items: start;
}
.note-photo { grid-column: 2 / span 3; margin: 3rem 0 0; position: relative; }
.note-photo::before { content: ""; position: absolute; inset: -1rem 1rem 2.75rem -1rem; border: 1px solid var(--rule); z-index: -1; }
.note-photo img { width: 100%; max-width: 300px; border-radius: 2px; }
.note-photo figcaption { font-size: var(--fs-s); margin-top: 0.6rem; }
.note-body { grid-column: 6 / span 6; }
.note-body h2 { margin-bottom: 2rem; }
.note-lead {
  font-family: var(--display); font-size: var(--fs-m); line-height: 1.5;
  font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400;
}
.signature {
  font-family: var(--display); font-size: var(--fs-l); line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 300;
  margin-top: 2rem;
}

/* contact close */
.contact {
  background: var(--paper) url("../img/paper-grain.svg?v=bd9772f61d44");
  padding: 5rem max(var(--edge), calc((100% - 1312px) / 2));
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
}
.contact h2 { max-width: 15ch; margin-bottom: 0; }
.contact-body .actions { margin-top: 1.5rem; }
.alt-mail { margin: 0; }
.alt-mail a { text-decoration-color: var(--ink); text-underline-offset: 0.25em; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* footer band */
.site-footer { background: var(--snow); }
.ridge-band { padding-top: 1rem; line-height: 0; }
.ridge-art, .ridge-photo { display: block; width: 100%; height: clamp(13rem, 29vw, 28.75rem); object-fit: cover; object-position: 50% 100%; }
.footer-ground {
  background: var(--ink); color: var(--snow);
  padding: 2rem var(--edge) 3rem;
  margin-top: -1px;
}
.closing {
  font-family: var(--display); font-size: var(--fs-xl); line-height: 1;
  font-variation-settings: "SOFT" 100, "WONK" 0; font-weight: 400; letter-spacing: -0.03em;
  text-align: left; max-width: 1456px; margin: 0 auto 3.5rem;
}
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem; font-size: var(--fs-s); max-width: 1456px; margin-inline: auto; }
.footer-meta p { margin: 0; }
.footer-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration-color: var(--lichen); text-underline-offset: 0.25em; }
.site-footer a:focus-visible { outline-color: var(--snow); }

/* 404: the footer ground steps to paper so the hero contours end on a tone change */
.page-lost .site-footer { background: var(--paper); }
.page-lost .hero { min-height: 36rem; background: url("../img/alpine-range.svg?v=2cc404d524eb") right center / 55% auto no-repeat; }
.page-lost .you-are-here { display: none; }

/* tablet and phone: a composition of its own */
@media (max-width: 1100px) {
  .you-are-here { display: none; }
  .hero { column-gap: 1.5rem; padding-top: 3rem; }
  .hero-copy h1 { font-size: clamp(3rem, 6.3vw, 5rem); }
  .hero-copy { padding-top: 0; }
  .mountain-scene { align-self: center; margin-inline: -1.5rem; }
}

@media (max-width: 860px) {
  .products { grid-template-columns: 1fr; }
  .route-rail { position: static; }
  .hero { grid-template-columns: 1.1fr 1fr; }
  .hero-copy { grid-row: 1; }
  .field-note { grid-template-columns: 1fr; gap: 2.5rem; }
  .note-photo { grid-column: 1; margin: 0; display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; align-items: end; }
  .note-photo::before { display: none; }
  .note-body { grid-column: 1; }
  .contact { grid-template-columns: 1fr; gap: 1.75rem; }
}

@media (max-width: 640px) {
  .site-header { flex-wrap: wrap; gap: 0.25rem 0.75rem; padding-top: 1rem; padding-bottom: 0.5rem; }
  .brand { gap: 0.5rem; }
  .logo-mark { width: 1.9rem; height: 1.9rem; }
  .wordmark { font-size: 1.0625rem; }
  .site-nav { order: 3; width: 100%; gap: 0 1.75rem; }
  .button-nav { padding: 0 0.9rem; font-size: 1rem; min-height: 2.75rem; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 2.75rem; padding-bottom: 2.75rem; }
  .hero-copy h1 { font-size: clamp(3.25rem, 12vw, 4.75rem); max-width: 12ch; margin-bottom: 1.5rem; }
  .lead { font-size: 1.25rem; }
  .hero .actions { gap: 0.75rem 1.25rem; }
  .hero .text-link { font-size: 1rem; }
  .mountain-scene { width: 100%; margin: 1rem 0 0; }
  .mountain-art { max-height: 24rem; object-fit: contain; }
  .scene-caption { margin: 0.25rem 0 1.5rem; text-align: center; font-size: 0.875rem; }
  .products { padding-block: 4rem; gap: 3rem; }
  .waypoints li { margin: 0 0 3rem calc(var(--x) * 0.05rem); padding-right: 0; padding-left: 3.4rem; }
  .trailhead { margin-bottom: 2.5rem; }
  .trail-b { margin-top: 4rem; }
  .summit { margin: 4rem 0 0; padding-right: 0; padding-left: 3.4rem; }
  .closing { text-align: left; margin-bottom: 2.5rem; }
  .footer-meta { flex-direction: column; }
  .page-lost .hero { background: none; min-height: 0; }
}

@media (max-width: 380px) {
  .site-header { column-gap: 0.5rem; }
  .wordmark { font-size: 0.9375rem; }
  .logo-mark { width: 1.5rem; height: 1.5rem; }
  .button-nav { font-size: 0.875rem; padding-inline: 0.45rem; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* print: ink on paper, no backgrounds to lean on */
@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip, .site-nav, .you-are-here, .trail-lines, .profile, .ridge-band, .mountain-scene { display: none !important; }
  .hero { display: block; }
  .hero, .products, .contact, .site-footer, .footer-ground, .page-lost .site-footer { background: none !important; color: #000; }
  .hero { margin-top: 0; padding-top: 1rem; min-height: 0; }
  .button { background: none !important; color: #000 !important; border: 2px solid #000; }
  .route-rail { position: static; }
  .waypoints li, .summit, .note-photo { break-inside: avoid; }
  .is-lit, .waypoints li:target, .summit:target { background: none; }
  .is-lit .wp { background: none; color: #000; }
}
/* Isometric objects share the mountain's paper, spruce, and warm light. */
.product-demo { margin: 1.25rem 0 0; max-width: 22rem; }
.product-demo > svg { display: block; width: 100%; height: auto; overflow: visible; margin-bottom: .75rem; }
.demo-ink { color: var(--ink); fill: none; stroke: #61786b; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.demo-ink text { fill: currentColor; stroke: none; font: 11px var(--body); }
.iso-front { fill: var(--iso-paper, #f9faf3); }
.iso-edge { fill: var(--iso-edge, #b8c9ba); }
.iso-green { fill: var(--iso-green, #426f58); }
.iso-amber { fill: var(--iso-amber, #d5b48a); }
.iso-shadow { fill: var(--iso-shadow); stroke: none; }
.iso-glow { fill: var(--iso-glow); stroke: none; }
.iso-base-left { fill: #d6e0d2; }
.iso-dark { fill: #285144; stroke: #345f4e; }
.iso-soft { fill: #d9e7d5; stroke: none; }
.iso-inset { fill: #e3ebdd; stroke: #bbceba; stroke-width: .8; }
.iso-slot { fill: #cfdfcc; stroke: #6f9578; stroke-dasharray: 2 3; }
.iso-bevel { fill: none; stroke: #fffef9; stroke-width: 1.5; opacity: .7; }
.iso-bolts { fill: #355f4e; stroke: none; }
.iso-object-shadow { fill: #385444; opacity: .12; stroke: none; }
.iso-fold { fill: #d4dfcf; }
.iso-rule { fill: none; stroke: #8ba28d; stroke-width: 1; }
.iso-hairline { fill: none; stroke: #fffef8; opacity: .8; stroke-width: 1; }
.iso-ink { fill: none; stroke: #406452; stroke-width: 1.5; }
.iso-shine { fill: none; stroke: #f8fbec; opacity: .6; stroke-width: 1.5; }
.iso-white-line { fill: none; stroke: #f8faef; stroke-width: 1.7; }
.iso-wire { fill: none; stroke: #5d8565; stroke-width: 2.2; }
.iso-ring { fill: none; stroke: #416a55; stroke-width: 3; }
.iso-bell { fill: #edc792; stroke: #f7deb8; }
.demo-ink .iso-cube-label { fill: #f9fbef; font-size: 10px; }
.demo-ink .iso-cube-label-dark { fill: #416a55; }
.iso-transient { opacity: 0; }
.iso-confetti { stroke: #bd8f60; fill: #bd8f60; }
.iso-book-glint { stroke: #fff; stroke-width: 3; }
[data-pop], [data-rock], [data-unfold], [data-lift] { transform-box: fill-box; transform-origin: center; }
.party-tassel { transform-origin: top left; }
.iso-clock-hand { transform-box: view-box; transform-origin: 0 0; }
.demo-footer { display: flex; align-items: flex-start; gap: .5rem 1rem; justify-content: space-between; }
.demo-caption { margin: 0; font-size: .8125rem; line-height: 1.5; max-width: 16rem; }
.demo-replay {
  appearance: none; border: 0; background: transparent; color: var(--ink);
  font: 500 .8125rem var(--body); cursor: pointer;
  min-height: 2.75rem; padding: .5rem; flex: none; margin-top: -.5rem;
  text-decoration: underline; text-decoration-color: var(--lichen); text-underline-offset: .25em;
}
.demo-replay:hover { color: var(--trail-text); text-decoration-color: currentColor; }
.demo-replay:active { transform: translateY(1px); }
.demo-replay[hidden] { display: none; }

/* The map responds to the scroll without moving the reading column. */
.mountain-window { position: relative; }
.mountain-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mountain-cloud { transform: translateX(var(--cloud-drift, 0px)); }
.mountain-cloud-near { transform: translateX(var(--cloud-near-drift, 0px)); }
.alpine-controls { display: flex; flex-wrap: wrap; gap: 0 1rem; margin: -1rem 0 0.5rem 14%; }
.alpine-controls[hidden] { display: none; }
.alpine-controls button { appearance: none; border: 0; padding: 0.5rem 0; min-height: 2.75rem; background: transparent; color: var(--ink); font: 500 0.8125rem var(--body); cursor: pointer; text-decoration: underline; text-decoration-color: var(--lichen); text-underline-offset: .25em; }
.alpine-controls button:hover { color: var(--trail-text); text-decoration-color: currentColor; }
.alpine-controls .alpine-toggle { margin-left: auto; font-size: 0.75rem; font-weight: 400; }
.alpine-character { opacity: 0; }
.alpine-ink { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.alpine-jacket { fill: var(--trail); stroke: var(--ink); stroke-width: 1.2; }
.alpine-skin { fill: #efd4b6; stroke: var(--ink); stroke-width: 1; }
.alpine-pack { fill: #6b8273; stroke: var(--ink); stroke-width: 1; }
.ski-track { fill: none; stroke: #6f8e86; stroke-width: 1.2; opacity: 0; }
.golf-flight { fill: none; stroke: var(--trail-text); stroke-width: 1; stroke-dasharray: 2 6; opacity: 0; }
.golf-ball { fill: #fff; stroke: var(--ink); stroke-width: .8; opacity: 0; }
.golf-landing { fill: none; stroke: var(--trail-text); stroke-width: 1.2; opacity: 0; }
.ridge-art { transform: translateY(var(--ridge-shift, 0px)); }
.ridge-band { overflow: hidden; }

@media (max-width: 640px) {
  .alpine-controls { margin: -1rem 0 .5rem; justify-content: center; gap: 0 1.1rem; }
  .alpine-controls .alpine-toggle { margin-left: 0; }
  .demo-footer { gap: .25rem; }
  .demo-replay { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mountain-cloud, .mountain-cloud-near, .ridge-art { animation: none !important; transform: none !important; }
  .demo-replay, .alpine-controls, .alpine-character, .ski-track, .golf-ball, .golf-flight, .golf-landing { display: none; }
}
@media print { .product-demo, .alpine-controls { display: none; } .ridge-art { transform: none; } }
/* Mineral paper stays continuous; the landscape carries the color and motion. */
body {
  isolation: isolate;
  background-image: url("../img/paper-grain.svg?v=bd9772f61d44"), radial-gradient(ellipse 800px 700px at 92% 200px, #e1e6df88, transparent), radial-gradient(ellipse 850px 900px at 0 600px, #e7decd60, transparent);
  background-size: 160px 160px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}
.products, .field-note, .contact { background: transparent; }
.products { position: relative; isolation: isolate; }
.products::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/contour-wash.svg?v=fc6c5203899a") right 10rem / 950px auto repeat-y;
  opacity: .24;
  mask-image: linear-gradient(transparent, #000 25%, #000 80%, transparent);
}
.contact { border-top: 1px solid #233c4314; }
.mountain-scene {
  --sky-core: #dcebf0; --sky-wash: #e4ece0aa;
  --alpine-face: #eef1e9; --alpine-ink: #657d75; --alpine-snow: #fffdfa;
  --figure-ink: #223b45;
}
.mountain-window { isolation: isolate; }
.mountain-window::before {
  content: ""; position: absolute; inset: 0 0 6%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 54% 40%, var(--sky-core) 0%, var(--sky-wash) 42%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 72%, transparent 100%);
}
.mountain-art { position: relative; display: block; }
/* Animate the halo, not the sun or moon itself; tree trunks stay rooted. */
.alpine-glow { transform-box: fill-box; transform-origin: center; animation: alpine-glow 17s ease-in-out infinite; }
.alpine-night-sky .alpine-glow { animation-duration: 23s; }
.alpine-breeze { transform-box: view-box; animation: alpine-breeze var(--wind-duration, 11s) ease-in-out var(--wind-delay, 0s) infinite; }
.alpine-glow, .alpine-breeze { animation-play-state: paused; }
.mountain-scene[data-ambient-motion="running"] .alpine-glow,
.mountain-scene[data-ambient-motion="running"] .alpine-breeze { animation-play-state: running; }
@keyframes alpine-glow { 0%, 100% { opacity: .62; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.19); } }
@keyframes alpine-breeze { 0%, 100% { transform: skewX(-.25deg); } 50% { transform: skewX(.55deg); } }
@media (prefers-reduced-motion: reduce) { .alpine-glow, .alpine-breeze { animation: none !important; } }
.alpine-night-sky, .alpine-morning-sky { display: none; }
.mountain-scene[data-time="night"] .alpine-night-sky,
.mountain-scene[data-time="morning"] .alpine-morning-sky { display: inline; }
.mountain-scene[data-time="night"] .alpine-day-sky,
.mountain-scene[data-time="morning"] .alpine-day-sky { display: none; }
.mountain-scene[data-season="winter"] .alpine-leaves { opacity: 0; }
.alpine-flowers { display: none; }
.mountain-scene[data-season="spring"] .alpine-flowers,
.mountain-scene[data-season="summer"] .alpine-flowers { display: inline; }
.alpine-snowfield { display: none; }
.mountain-scene[data-snow="true"] .alpine-snowfield { display: inline; }
.alpine-grove-snow { display: var(--grove-snow-display, none); }
.mountain-scene[data-snow="true"] { --grove-snow-display: inline; }
.mountain-scene[data-time="night"] .mountain-cloud,
.mountain-scene[data-time="night"] .mountain-cloud-near { stroke: #b2cbd4; opacity: .45; }
.alpine-controls button[hidden] { display: none; }
.alpine-ink { stroke: var(--figure-ink); stroke-width: 1; }
.figure-leg { fill: none; stroke: #2c4554; stroke-width: 5.2; stroke-linecap: round; stroke-linejoin: round; }
.figure-sleeve { fill: none; stroke: #c56738; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.figure-arm { fill: none; stroke: #e6c8a8; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.figure-boot { fill: #263a40; stroke: #182e36; stroke-width: .7; }
.figure-snowshoe { display: none; fill: #f0e8c8; fill-opacity: .7; stroke: #8f7455; stroke-width: 1; }
.mountain-scene[data-snow="true"] .figure-snowshoe { display: inline; }
.figure-lamp { display: none; }
.mountain-scene[data-time="night"] .figure-lamp { display: inline; }
.golfer-front-leg, .golfer-back-leg { stroke: #aa9877; stroke-width: 5; stroke-linecap: round; }
.golf-course .fairway { fill: var(--alpine-fairway, #d2dfc3); }
.golf-course .putting-green { fill: var(--alpine-green, #b3c99d); }
.golf-off-season { display: none; }
.mountain-scene[data-golf-open="false"] .golf-off-season { display: inline; }
.ski-track { stroke: var(--alpine-ink); }
.scene-preview { margin: 0 0 .75rem 14%; font-size: .8125rem; }
.scene-preview summary { width: fit-content; min-height: 2.75rem; line-height: 2.75rem; cursor: pointer; text-decoration: underline; text-decoration-color: var(--lichen); text-underline-offset: .25em; }
.scene-preview summary:hover { color: var(--trail-text); }
.scene-preview summary:focus-visible, .scene-preview select:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.scene-preview-panel { padding: 1rem; border: 1px solid var(--rule); border-radius: 6px; background: #f3f5f1e6; }
.scene-preview-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.scene-preview-field { display: grid; gap: .4rem; }
.scene-preview label { font-weight: 500; }
.scene-preview select { width: 100%; min-width: 0; min-height: 2.75rem; padding: .5rem; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); background: var(--snow); font: inherit; }
.scene-preview-footer { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between; margin-top: .5rem; }
.scene-preview-status { margin: 0; font-size: .75rem; }
.scene-preview-reset { appearance: none; min-height: 2.75rem; padding: .5rem 0; border: 0; color: var(--ink); background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.scene-preview-reset:disabled { opacity: .5; cursor: default; }
.scene-preview-clock { margin: .25rem 0 0; font-size: .75rem; line-height: 1.5; }
@media (max-width: 640px) { .scene-preview { margin-left: 0; } }
@media (max-width: 380px) { .scene-preview-fields { grid-template-columns: 1fr; gap: .75rem; } }
@media print {
  body, .products, .field-note, .contact { background: none !important; }
  .scene-preview { display: none; }
}