/* deloraine.org — Tasmanian topographic trail guide sheet */
:root {
  --del-mist: #F2F5F3;
  --del-paper: #FFFFFF;
  --del-dolerite: #1A2421;
  --del-dolerite-soft: #3B4A44;
  --del-eucalyptus: #2D6A4F;
  --del-eucalyptus-deep: #1F4D39;
  --del-eucalyptus-wash: #E3EFE8;
  --del-lichen: #CA8A04;
  --del-lichen-wash: #FBF1D6;
  --del-contour: #CBD5D0;
  --del-contour-soft: #E0E7E3;
  --del-slab: 'Bitter', Georgia, 'Times New Roman', serif;
  --del-body: 'Nunito Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
  --del-mono: 'Fira Code', 'SFMono-Regular', Menlo, Consolas, monospace;
  --del-maxw: 1120px;
  --del-radius: 6px;
  --del-shadow: 0 1px 2px rgba(26, 36, 33, .06), 0 8px 24px rgba(26, 36, 33, .06);
  --del-contour-bg: repeating-radial-gradient(ellipse 900px 520px at 85% -20%, transparent 0, transparent 38px, rgba(203, 213, 208, .55) 38px, rgba(203, 213, 208, .55) 39px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.del-body {
  margin: 0;
  background: var(--del-mist);
  color: var(--del-dolerite);
  font-family: var(--del-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
}
.del-mono { font-family: var(--del-mono); font-size: .92em; font-weight: 400; letter-spacing: 0; }
a { color: var(--del-eucalyptus); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--del-eucalyptus-deep); }
img, svg { max-width: 100%; height: auto; }
.del-skip { position: absolute; left: -999px; top: 8px; background: var(--del-dolerite); color: #fff; padding: .5rem 1rem; z-index: 100; }
.del-skip:focus { left: 8px; }

/* Strip + compass bar */
.del-grid-strip {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: center; align-items: center;
  background: var(--del-dolerite); color: #D9E2DD; font-size: .8rem; padding: .4rem 1rem; letter-spacing: .02em;
}
.del-grid-strip .del-mono { color: var(--del-lichen); }
.del-strip-dot { color: var(--del-lichen); font-size: .6rem; }
.del-compass-bar {
  background: var(--del-paper);
  border-bottom: 2px solid var(--del-eucalyptus);
  background-image: var(--del-contour-bg);
}
.del-compass-inner {
  max-width: var(--del-maxw); margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.del-mark { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--del-dolerite); }
.del-mark-rose { width: 48px; height: 48px; flex: none; }
.del-rose-ring { fill: none; stroke: var(--del-eucalyptus); stroke-width: 1.5; }
.del-rose-ring-inner { stroke: var(--del-contour); stroke-dasharray: 3 3; }
.del-rose-n { fill: var(--del-lichen); }
.del-rose-s { fill: var(--del-eucalyptus); }
.del-rose-ew { fill: var(--del-dolerite-soft); }
.del-rose-pin { fill: var(--del-dolerite); }
.del-mark-words { display: flex; flex-direction: column; line-height: 1.1; }
.del-mark-name { font-family: var(--del-slab); font-weight: 700; font-size: 1.5rem; letter-spacing: .01em; }
.del-mark-sub { font-size: .8rem; font-weight: 600; color: var(--del-eucalyptus); text-transform: uppercase; letter-spacing: .08em; }
.del-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.del-nav-link {
  display: inline-block; padding: .45rem .75rem; text-decoration: none; font-weight: 600; font-size: .95rem;
  color: var(--del-dolerite); border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0;
}
.del-nav-link:hover { color: var(--del-eucalyptus-deep); background: var(--del-eucalyptus-wash); }
.del-nav-link[aria-current="page"] { border-bottom-color: var(--del-lichen); color: var(--del-eucalyptus-deep); }

/* Terrain grid (main) */
.del-terrain-grid {
  max-width: var(--del-maxw); margin: 0 auto; padding: 1.5rem 1.25rem 3rem;
  display: grid; gap: 1.5rem;
}
.del-trail { font-size: .85rem; color: var(--del-dolerite-soft); display: flex; gap: .5rem; align-items: center; }
.del-trail a { font-weight: 600; }
.del-trail-sep { color: var(--del-lichen); }

/* Track sheet */
.del-track-sheet {
  background: var(--del-paper);
  border: 1px solid var(--del-contour);
  border-top: 4px solid var(--del-eucalyptus);
  border-radius: var(--del-radius);
  box-shadow: var(--del-shadow);
  padding: 1.75rem clamp(1.1rem, 3vw, 2.25rem) 2rem;
  position: relative;
}
.del-track-sheet::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--del-radius);
  background: var(--del-contour-bg); opacity: .35;
}
.del-track-sheet > * { position: relative; }
.del-sheet-head { margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px dashed var(--del-contour); }
.del-sheet-no { margin: 0 0 .6rem; color: var(--del-eucalyptus); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.del-sheet-no em { font-style: italic; text-transform: none; letter-spacing: 0; }
.del-title {
  font-family: var(--del-slab); font-weight: 700; line-height: 1.15; margin: 0 0 .75rem;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem); letter-spacing: -.01em; color: var(--del-dolerite);
}
.del-title-2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
.del-lede { font-size: 1.12rem; line-height: 1.55; max-width: 62ch; margin: 0 0 .75rem; color: var(--del-dolerite-soft); }
.del-byline { margin: 0; font-size: .9rem; font-weight: 600; color: var(--del-eucalyptus-deep); }

/* Prose */
.del-prose { max-width: 72ch; }
.del-prose h2 { font-family: var(--del-slab); font-weight: 700; font-size: 1.5rem; margin: 2rem 0 .75rem; line-height: 1.2; padding-left: .85rem; border-left: 4px solid var(--del-lichen); }
.del-prose h3 { font-family: var(--del-slab); font-weight: 500; font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--del-eucalyptus-deep); }
.del-prose p { margin: 0 0 1rem; }
.del-prose ul, .del-prose ol { padding-left: 1.4rem; margin: 0 0 1.25rem; }
.del-prose li { margin-bottom: .5rem; }
.del-prose li strong { color: var(--del-dolerite); }
.del-route { counter-reset: del-leg; list-style: none; padding-left: 0; }
.del-route li { counter-increment: del-leg; position: relative; padding-left: 2.5rem; margin-bottom: .75rem; }
.del-route li::before {
  content: counter(del-leg); position: absolute; left: 0; top: .1rem; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: var(--del-lichen); color: var(--del-dolerite); font-family: var(--del-mono);
  font-size: .8rem; font-weight: 500; display: grid; place-items: center;
}
.del-grid-2 { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.del-grid-2 .del-prose { max-width: none; }
.del-hero-grid { margin-top: .25rem; }
.del-card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.2rem; text-decoration: none; color: var(--del-dolerite);
  background: var(--del-mist); border: 1px solid var(--del-contour); border-left: 4px solid var(--del-lichen); border-radius: var(--del-radius);
  transition: transform .15s ease, border-color .15s ease;
}
.del-card:hover { transform: translateY(-2px); border-left-color: var(--del-eucalyptus); color: var(--del-dolerite); }
.del-card-kicker { font-size: .75rem; color: var(--del-eucalyptus); text-transform: uppercase; letter-spacing: .06em; }
.del-card-title { font-family: var(--del-slab); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.del-card-text { font-size: .95rem; color: var(--del-dolerite-soft); }

/* Waypoint log */
.del-waypoint-log { margin: 1.25rem 0 1.5rem; border: 1px solid var(--del-contour); border-radius: var(--del-radius); background: var(--del-mist); overflow: hidden; }
.del-waypoint { display: grid; grid-template-columns: minmax(130px, 32%) 1fr; gap: .25rem 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--del-contour-soft); }
.del-waypoint:last-child { border-bottom: 0; }
.del-waypoint dt { font-family: var(--del-slab); font-weight: 500; color: var(--del-eucalyptus-deep); font-size: .95rem; }
.del-waypoint dd { margin: 0; font-size: .97rem; }
@media (max-width: 520px) { .del-waypoint { grid-template-columns: 1fr; } }

/* Gradient table */
.del-gradient-table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.5rem; font-size: .93rem; background: var(--del-paper); border: 1px solid var(--del-contour); }
.del-gradient-table caption { caption-side: top; text-align: left; font-family: var(--del-slab); font-weight: 500; font-size: .95rem; color: var(--del-eucalyptus-deep); padding: 0 0 .5rem; }
.del-gradient-table th, .del-gradient-table td { padding: .55rem .7rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--del-contour-soft); }
.del-gradient-table thead th { background: var(--del-eucalyptus); color: #fff; font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.del-gradient-table tbody th { font-weight: 600; color: var(--del-dolerite); background: var(--del-mist); }
.del-gradient-table tbody tr:nth-child(even) td { background: #F8FAF9; }
.del-gradient-table-wrap, .del-grid-2 > div { min-width: 0; overflow-x: auto; }

/* Notes & callouts */
.del-note { margin: 1.25rem 0 1.5rem; padding: 1rem 1.2rem; background: var(--del-lichen-wash); border-left: 4px solid var(--del-lichen); border-radius: 0 var(--del-radius) var(--del-radius) 0; font-size: .97rem; }
.del-note p { margin: 0; }
.del-note-kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #8A5E03; margin-bottom: .35rem !important; }
.del-callout { padding: 1rem 1.2rem; background: var(--del-eucalyptus-wash); border-left: 4px solid var(--del-eucalyptus); border-radius: 0 var(--del-radius) var(--del-radius) 0; }
.del-homeward { margin: 1.5rem 0; padding: 1.4rem 1.5rem; background: var(--del-eucalyptus-wash); border: 1px solid var(--del-contour); border-left: 5px solid var(--del-eucalyptus); border-radius: var(--del-radius); }
.del-homeward p { margin: 0 0 .5rem; }
.del-homeward-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--del-eucalyptus-deep); }
.del-homeward-heading { font-family: var(--del-slab); font-weight: 700; font-size: 1.3rem; line-height: 1.2; }
.del-button {
  display: inline-block; padding: .65rem 1.2rem; background: var(--del-eucalyptus); color: #fff !important; text-decoration: none; font-weight: 700;
  border-radius: var(--del-radius); border: 2px solid var(--del-eucalyptus); font-size: .95rem;
}
.del-button:hover { background: var(--del-eucalyptus-deep); border-color: var(--del-eucalyptus-deep); }

/* Planner */
.del-planner-form { display: grid; gap: 1rem 1.25rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; margin-bottom: 1.5rem; }
.del-field label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: .3rem; color: var(--del-dolerite-soft); }
.del-select, .del-input {
  width: 100%; padding: .6rem .7rem; font: inherit; font-size: .97rem; color: var(--del-dolerite); background: var(--del-paper);
  border: 1px solid var(--del-contour); border-radius: var(--del-radius); box-shadow: inset 0 1px 2px rgba(26,36,33,.05);
}
.del-input { font-family: var(--del-mono); }
.del-select:focus, .del-input:focus { outline: 2px solid var(--del-lichen); outline-offset: 1px; border-color: var(--del-eucalyptus); }
.del-field-check { display: flex; align-items: center; gap: .6rem; padding-bottom: .5rem; }
.del-field-check label { margin: 0; }
.del-field-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--del-eucalyptus); }
.del-planner-out { border-top: 1px dashed var(--del-contour); padding-top: 1.25rem; }
.del-stat-row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 1rem; }
.del-stat { background: var(--del-mist); border: 1px solid var(--del-contour); border-top: 3px solid var(--del-lichen); border-radius: var(--del-radius); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .2rem; }
.del-stat-value { font-size: 1.5rem; font-weight: 500; color: var(--del-eucalyptus-deep); line-height: 1.1; }
.del-stat-label { font-size: .78rem; color: var(--del-dolerite-soft); font-weight: 600; }
.del-planner-verdict { margin: 0 0 1.25rem; padding: .8rem 1rem; background: var(--del-eucalyptus-wash); border-left: 4px solid var(--del-eucalyptus); border-radius: 0 var(--del-radius) var(--del-radius) 0; font-size: .97rem; }
.del-planner-verdict.del-verdict-warn { background: var(--del-lichen-wash); border-left-color: var(--del-lichen); }
.del-planner-verdict.del-verdict-stop { background: #FBE4E1; border-left-color: #B42318; }
.del-gear-head { font-family: var(--del-slab); font-weight: 500; font-size: .95rem; color: var(--del-eucalyptus-deep); margin: 0 0 .6rem; }
.del-gear-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.del-gear-list li { padding: .45rem .6rem .45rem 2rem; background: var(--del-mist); border: 1px solid var(--del-contour-soft); border-radius: 4px; font-size: .92rem; position: relative; }
.del-gear-list li::before { content: "\25B3"; position: absolute; left: .65rem; top: .45rem; color: var(--del-lichen); font-size: .8rem; }
.del-gear-list li.del-gear-season { border-color: var(--del-lichen); }
.del-gear-list li.del-gear-season::before { content: "\2731"; }

/* Figures */
.del-figure { margin: 1.5rem 0 0; }
.del-figcaption { font-size: .85rem; color: var(--del-dolerite-soft); margin-top: .5rem; }
.del-profile-svg { width: 100%; height: auto; background: var(--del-mist); border: 1px solid var(--del-contour); border-radius: var(--del-radius); font-family: var(--del-mono); }
.del-profile-contours line { stroke: var(--del-contour); stroke-dasharray: 4 4; stroke-width: 1; }
.del-profile-ylabels text, .del-profile-xlabel { font-size: 10px; fill: var(--del-dolerite-soft); text-anchor: end; }
.del-profile-xlabel { text-anchor: start; }
.del-profile-xlabel-end { text-anchor: end; }
.del-profile-area { fill: url(#del-profile-fill); }
.del-profile-line { fill: none; stroke: var(--del-eucalyptus-deep); stroke-width: 2.5; stroke-linejoin: round; }
.del-profile-marks circle { fill: var(--del-lichen); stroke: var(--del-dolerite); stroke-width: 1; }
.del-profile-marks text { font-size: 10px; fill: var(--del-dolerite); text-anchor: middle; }
.del-profile-marks .del-scree { fill: var(--del-lichen); opacity: .25; }
.del-river-map svg { width: 100%; height: auto; background: var(--del-paper); border: 1px solid var(--del-contour); border-radius: var(--del-radius); font-family: var(--del-body); }
.del-map-contour { fill: none; stroke: var(--del-contour); stroke-width: .8; }
.del-map-river-bank { fill: none; stroke: var(--del-eucalyptus-wash); stroke-width: 26; stroke-linecap: round; }
.del-map-river { fill: none; stroke: #4F8FB5; stroke-width: 9; stroke-linecap: round; }
.del-map-road { stroke: var(--del-dolerite-soft); stroke-width: 3; stroke-dasharray: 10 6; opacity: .6; }
.del-map-road-minor { stroke-width: 2; }
.del-map-label { font-size: 12px; font-weight: 600; fill: var(--del-dolerite); text-anchor: middle; }
.del-map-road-label { text-anchor: start; font-size: 11px; fill: var(--del-dolerite-soft); font-weight: 400; }
.del-map-pin circle { fill: var(--del-lichen); stroke: var(--del-dolerite); stroke-width: 1.5; }
.del-map-pin text { font-family: var(--del-mono); font-size: 11px; font-weight: 500; fill: var(--del-dolerite); text-anchor: middle; }
.del-map-flow { font-family: var(--del-mono); font-size: 11px; fill: #4F8FB5; }
.del-grid-map { align-items: start; }

/* Colophon */
.del-colophon { background: var(--del-dolerite); color: #C9D3CD; margin-top: 1rem; border-top: 4px solid var(--del-lichen); }
.del-colophon a { color: #E6EEE9; }
.del-colophon a:hover { color: var(--del-lichen); }
.del-colophon-inner { max-width: var(--del-maxw); margin: 0 auto; padding: 2.5rem 1.25rem 1.5rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); font-size: .93rem; }
.del-colophon p { margin: 0 0 .6rem; }
.del-colophon-name { font-family: var(--del-slab); font-weight: 700; font-size: 1.15rem; color: #fff; }
.del-colophon-mail { color: var(--del-lichen); }
.del-colophon-head { font-family: var(--del-slab); font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: .06em; font-size: .8rem; }
.del-colophon ul { list-style: none; padding: 0; margin: 0; }
.del-colophon li { margin-bottom: .45rem; }
.del-colophon-base { max-width: var(--del-maxw); margin: 0 auto; padding: 1rem 1.25rem 2rem; border-top: 1px solid #33423C; font-size: .8rem; color: #9FB0A8; }
.del-colophon-base .del-mono { color: #8FA399; }

@media (max-width: 720px) {
  body.del-body { font-size: 16px; }
  .del-compass-inner { justify-content: center; text-align: center; }
  .del-nav-list { justify-content: center; }
  .del-track-sheet { padding: 1.4rem 1rem 1.5rem; }
}
@media print {
  .del-grid-strip, .del-nav, .del-colophon, .del-skip, .del-homeward { display: none; }
  .del-track-sheet { box-shadow: none; border-color: #999; }
}