/* Trail Relief — Genesee canal locks. Kraft, iron, ice. */
:root {
  --trai-iron: #2a2e32;
  --trai-kraft: #e8d9c0;
  --trai-paper: #f3ead8;
  --trai-ice: #7aa0b5;
  --trai-rust: #b3542c;
  --trai-ink: #1c1f22;
  --trai-mute: #5c5852;
  --trai-display: "Trebuchet MS", Futura, "Avenir Next Condensed", sans-serif;
  --trai-body: "Lucida Grande", "Segoe UI", "Gill Sans", sans-serif;
  --trai-max: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body.trai-body {
  background:
    repeating-linear-gradient(135deg, rgba(179,84,44,0.05) 0 12px, transparent 12px 24px),
    var(--trai-paper);
  color: var(--trai-ink);
  font-family: var(--trai-body);
  font-size: 1.03rem;
  line-height: 1.6;
}
body.trai-locked { overflow: hidden; }
a { color: var(--trai-rust); text-underline-offset: 0.14em; }
a:hover { color: var(--trai-iron); }
h1, h2, h3, .trai-mark strong, .trai-keel__name, .trai-hold, .trai-act {
  font-family: var(--trai-display);
  font-weight: 700;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.05rem, 5.8vw, 3.5rem); line-height: 1.06; margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.8rem); margin: 0 0 0.5rem; }
h3 { font-size: 1.08rem; margin: 0 0 0.28rem; }
p { margin: 0 0 0.95rem; }
address { font-style: normal; }
.trai-dock { width: min(var(--trai-max), calc(100% - 2rem)); margin-inline: auto; }
.trai-skip {
  position: absolute; left: -999px; top: 0;
  background: var(--trai-rust); color: var(--trai-kraft); padding: 0.45rem 0.8rem; z-index: 90;
}
.trai-skip:focus { left: 0.55rem; top: 0.55rem; }
.trai-hazard {
  height: 8px;
  background: repeating-linear-gradient(90deg, var(--trai-iron) 0 16px, var(--trai-rust) 16px 32px);
}
.trai-bar { background: var(--trai-iron); color: var(--trai-kraft); position: sticky; top: 0; z-index: 40; }
.trai-bar.is-pinned { box-shadow: 0 12px 28px -20px #000; }
.trai-bar__row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.55rem; align-items: center; padding: 0.65rem 0; }
.trai-mark { display: flex; gap: 0.6rem; align-items: center; text-decoration: none; color: inherit; }
.trai-mark svg { color: var(--trai-ice); }
.trai-mark strong { display: block; font-size: 1.2rem; }
.trai-mark small { display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--trai-ice); }
.trai-tel { display: none; color: var(--trai-ice); text-decoration: none; font-family: var(--trai-display); }
.trai-burger {
  width: 42px; height: 42px; border: 1px solid var(--trai-kraft); background: transparent;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; cursor: pointer;
}
.trai-burger span { display: block; height: 2px; background: var(--trai-kraft); }
.trai-locks {
  position: fixed; inset: 0 0 0 auto; width: min(21rem, 88vw);
  background: var(--trai-iron); color: var(--trai-kraft);
  transform: translateX(100%); transition: transform 0.26s ease;
  padding: 4.2rem 1.2rem 2rem; z-index: 45; overflow: auto;
}
.trai-locks.is-open { transform: none; }
.trai-locks ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.trai-locks a { color: var(--trai-kraft); text-decoration: none; display: block; padding: 0.4rem 0; font-family: var(--trai-display); }
.trai-locks .is-here a { color: var(--trai-ice); }
.trai-hold {
  display: inline-block; background: var(--trai-rust); color: var(--trai-kraft);
  text-decoration: none; padding: 0.55rem 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.74rem;
}

.trai-channel { padding: 1.7rem 0 2.2rem; }
.trai-tag { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--trai-rust); margin: 0 0 0.35rem; }
.trai-lead { font-size: 1.1rem; max-width: 40rem; }
.trai-act {
  display: inline-block; background: var(--trai-iron); color: var(--trai-kraft);
  text-decoration: none; padding: 0.68rem 0.95rem; margin: 0.15rem 0.35rem 0.15rem 0;
}
.trai-act:hover { color: var(--trai-kraft); background: var(--trai-rust); }
.trai-act--ghost { background: transparent; color: var(--trai-iron); border: 1px solid var(--trai-iron); }
.trai-act--ghost:hover { background: var(--trai-iron); color: var(--trai-kraft); }
.trai-act--block { width: 100%; text-align: center; border: 0; cursor: pointer; font: inherit; }

.trai-stages { display: grid; gap: 0.7rem; margin: 1.3rem 0; }
.trai-stage {
  background: var(--trai-kraft);
  border-left: 6px solid var(--trai-iron);
  padding: 0.85rem 1rem;
}
.trai-stage--ice { border-left-color: var(--trai-ice); }
.trai-stage--rust { border-left-color: var(--trai-rust); }
.trai-stage span { font-family: var(--trai-display); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--trai-mute); }
.trai-mason { display: grid; gap: 1rem; }
.trai-brick { background: var(--trai-kraft); padding: 1rem; border: 1px solid rgba(42,46,50,0.12); }
.trai-split { display: grid; gap: 1.2rem; }
.trai-pay { display: grid; gap: 0.85rem; }
.trai-ticket { background: var(--trai-kraft); padding: 1rem; border: 2px dashed var(--trai-iron); }
.trai-ticket__n { font-family: var(--trai-display); font-size: 1.7rem; }
.trai-ticket--hot { background: var(--trai-iron); color: var(--trai-kraft); border-style: solid; }
.trai-ticket--hot .trai-tag { color: var(--trai-ice); }
.trai-crew { display: grid; gap: 1rem; }
.trai-crew article { background: var(--trai-kraft); padding: 0.9rem; }
.trai-crew .job { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--trai-rust); }
.trai-faq details { border-bottom: 1px solid rgba(42,46,50,0.14); padding: 0.6rem 0; }
.trai-faq summary { cursor: pointer; font-family: var(--trai-display); font-size: 1.1rem; }
.trai-form { background: var(--trai-kraft); padding: 1.1rem; }
.trai-fields { display: grid; gap: 0.75rem; }
.trai-fields label { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.18rem; }
.trai-fields input, .trai-fields select, .trai-fields textarea {
  width: 100%; border: 1px solid var(--trai-iron); background: var(--trai-paper);
  padding: 0.48rem 0.55rem; font: inherit; color: inherit;
}
.trai-list { list-style: none; margin: 0; padding: 0; }
.trai-list li { padding: 0.35rem 0 0.35rem 1.15rem; position: relative; border-bottom: 1px dashed rgba(42,46,50,0.14); }
.trai-list li::before { content: "▮"; position: absolute; left: 0; color: var(--trai-rust); font-size: 0.7rem; top: 0.45rem; }
.trai-map {
  min-height: 148px; position: relative;
  background:
    radial-gradient(circle at 55% 48%, var(--trai-rust) 0 6px, transparent 7px),
    repeating-linear-gradient(90deg, rgba(122,160,181,0.25) 0 8px, transparent 8px 20px),
    #cfc3ab;
}
.trai-map span { position: absolute; bottom: 0.45rem; left: 0.55rem; background: var(--trai-paper); padding: 0.18rem 0.4rem; font-size: 0.76rem; }
.trai-log a { display: grid; gap: 0.2rem; color: inherit; text-decoration: none; padding: 0.75rem 0; border-bottom: 1px solid rgba(42,46,50,0.14); }
.trai-log time { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--trai-rust); }
.trai-lost { padding: 3.2rem 0; }
.trai-lost__code { letter-spacing: 0.26em; font-size: 0.74rem; color: var(--trai-rust); }
.trai-lift { opacity: 0; transform: translateY(8px); transition: opacity 0.45s ease, transform 0.45s ease; }
.trai-lift.is-in { opacity: 1; transform: none; }

.trai-keel { background: var(--trai-iron); color: var(--trai-kraft); padding: 1.8rem 0 1rem; }
.trai-keel h2 { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--trai-ice); }
.trai-keel a { color: var(--trai-ice); }
.trai-keel__name { font-size: 1.45rem; margin: 0 0 0.4rem; }
.trai-keel__grid { display: grid; gap: 1.2rem; }
.trai-watch, .trai-gates { list-style: none; margin: 0; padding: 0; }
.trai-watch li { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; border-bottom: 1px dashed rgba(232,217,192,0.12); padding: 0.16rem 0; }
.trai-watch .is-shut { opacity: 0.45; }
.trai-gates a { text-decoration: none; }
.trai-keel__fine { width: min(var(--trai-max), calc(100% - 2rem)); margin: 1.1rem auto 0; font-size: 0.8rem; opacity: 0.7; }

@media (min-width: 780px) {
  .trai-tel { display: inline-block; }
  .trai-stages { grid-template-columns: repeat(3, 1fr); }
  .trai-mason { grid-template-columns: 1fr 1fr; }
  .trai-split { grid-template-columns: 1fr 1fr; }
  .trai-pay { grid-template-columns: 1fr 1fr; }
  .trai-crew { grid-template-columns: repeat(3, 1fr); }
  .trai-fields { grid-template-columns: 1fr 1fr; }
  .trai-wide { grid-column: 1 / -1; }
  .trai-keel__grid { grid-template-columns: 1.25fr 1fr 1fr 1fr; }
}
@media (min-width: 1060px) {
  .trai-burger { display: none; }
  .trai-bar__row { grid-template-columns: auto 1fr auto; }
  .trai-locks {
    position: static; width: auto; transform: none; padding: 0; background: transparent;
    display: flex; align-items: center; gap: 0.7rem; overflow: visible;
  }
  .trai-locks ul { display: flex; gap: 0.15rem; margin: 0; }
  .trai-locks a { font-size: 0.88rem; padding: 0.28rem 0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trai-lift { opacity: 1; transform: none; transition: none; }
  .trai-locks { transition: none; }
}