@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/sourceserif4-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/sourceserif4-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* TrekWest Tours — one stylesheet.
   Design device: the logo's italic slant (-12deg) carried into photo strips, dividers and timeline marks.
   Colors are lifted from the logo (blue / coral / plum) plus an Aspen-gold booking button. */

:root {
  --ink: #14202b;
  --ink-soft: #46535f;
  --paper: #f5f7f8;
  --white: #ffffff;
  --stone: #e2e8eb;
  --line: #cfd8dd;
  --blue: #216484;
  --blue-deep: #17465d;
  --coral: #c0514e;
  --plum: #a03d5c;
  --gold: #f2b03d;
  --gold-deep: #d99412;
  --night: #0f1830;

  --font-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --max: 74rem;
  --measure: 44rem;
  --cut: 7%;               /* horizontal offset of the slant */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.68 var(--font-body);
  text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: var(--coral); }
:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 100; font-family: var(--font-ui); }
.skip:focus { left: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 800;
  font-style: italic;
  line-height: 1.04;
  letter-spacing: -.012em;
  margin: 0 0 .6em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 5.6vw, 4.2rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.4rem); margin-top: 1.6em; }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.4em; }
p { margin: 0 0 1.1em; }
strong { font-weight: 650; }
ul { padding-left: 1.2rem; margin: 0 0 1.3em; }
li { margin-bottom: .45em; }
li::marker { color: var(--coral); }

/* ---------- buttons ---------- */
.btn, .btn-ghost {
  display: inline-block;
  font: 700 .95rem/1 var(--font-ui);
  font-stretch: 112%;
  letter-spacing: .01em;
  padding: .95rem 1.5rem;
  text-decoration: none;
  background: var(--gold);
  color: var(--ink);
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  padding-inline: 2rem;
  transition: background .15s;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); clip-path: none; padding-inline: 1.5rem; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.cta { margin: 1.8rem 0; }

/* ---------- header: split nav around a centered logo tile ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.site-header .in { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 4.4rem; }
.brand { grid-column: 2; display: block; padding: .5rem .2rem; }
.brand img { width: clamp(9rem, 20vw, 12.5rem); height: auto; }
.navwrap { display: contents; }
.nav-l { grid-column: 1; grid-row: 1; justify-self: start; }
.nav-r { grid-column: 3; grid-row: 1; justify-self: end; }
.nav { font-family: var(--font-ui); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.nav li { margin: 0; position: relative; }
.nav a { display: block; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; padding: .8rem .8rem; letter-spacing: .01em; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--coral); }
.nav .sub { position: absolute; left: 0; top: 100%; min-width: 16rem; background: #fff; border-top: 4px solid var(--coral); box-shadow: 0 14px 34px rgba(20,32,43,.2); display: none; padding: .4rem 0; flex-direction: column; align-items: stretch; gap: 0; }
.nav .sub a { color: var(--ink); font-weight: 600; padding: .65rem 1rem; }
.nav li:hover > .sub, .nav li:focus-within > .sub { display: block; }
.nav .btn { color: var(--ink); margin-left: .5rem; padding: .8rem 1.6rem; }
.nav .btn:hover { color: #fff; }
.nav-toggle { display: none; align-items: center; gap: .6rem; justify-self: end; grid-column: 3; grid-row: 1; font: 800 .85rem var(--font-ui); background: none; border: 0; padding: .8rem 0 .8rem .8rem; cursor: pointer; color: var(--ink); }
.nav-toggle .bars { width: 1.5rem; height: 2px; background: currentColor; box-shadow: 0 -7px currentColor, 0 7px currentColor; transition: box-shadow .2s, transform .2s; }
.nav-toggle[aria-expanded="true"] .bars { box-shadow: none; transform: rotate(45deg); position: relative; }
.nav-toggle[aria-expanded="true"] .bars::after { content: ""; position: absolute; inset: 0; background: currentColor; transform: rotate(-90deg); }

/* home header: fixed, always a solid white bar with dark links */
.site-header.on-hero { position: fixed; left: 0; right: 0; transition: background-color .25s, box-shadow .25s; background: #fff; box-shadow: 0 2px 18px rgba(8,16,26,.14); border-bottom: 1px solid var(--line); }
.on-hero .in { align-items: center; }
.on-hero .brand { background: #fff; padding: .5rem .2rem; }
.on-hero .brand img { width: clamp(8.5rem, 16vw, 11rem); }
.on-hero .nav { margin-top: 0; }
.on-hero .nav > ul > li > a { color: var(--ink); }
.on-hero .nav > ul > li > a:hover, .on-hero .nav a[aria-current="page"] { color: var(--coral); }
.on-hero .nav .btn { color: var(--ink); text-shadow: none; }
.on-hero .nav-toggle { color: var(--ink); }

/* after scrolling: solid white bar, dark text, compact logo */
.site-header.on-hero.scrolled { background: #fff; box-shadow: 0 2px 18px rgba(8,16,26,.14); border-bottom: 1px solid var(--line); }
.on-hero.scrolled .nav > ul > li > a { color: var(--ink); text-shadow: none; }
.on-hero.scrolled .nav-toggle { color: var(--ink); }
.on-hero.scrolled .nav > ul > li > a:hover, .on-hero.scrolled .nav a[aria-current="page"] { color: var(--coral); }

@media (max-width: 62rem) {
  .site-header .in { grid-template-columns: 1fr auto 1fr; min-height: 3.8rem; }
  .brand { grid-column: 2; }
  .nav-toggle { display: inline-flex; }
  .navwrap { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 4px solid var(--coral); padding: .4rem var(--gutter) 1.4rem; max-height: calc(100svh - 4rem); overflow: auto; box-shadow: 0 20px 30px rgba(8,16,26,.2); }
  .navwrap.open { display: block; }
  .nav { justify-self: stretch; margin: 0 !important; }
  .nav ul { flex-direction: column; align-items: stretch; }
  .nav a, .on-hero .nav > ul > li > a { color: var(--ink); text-shadow: none; padding: .85rem 0; font-size: 1.02rem; border-bottom: 1px solid var(--stone); }
  .nav .sub { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 .3rem 1rem; min-width: 0; }
  .nav .sub a { font-weight: 500; padding: .6rem 0; font-size: .98rem; }
  .nav .btn, .on-hero .nav .btn { margin: .9rem 0 0; text-align: center; border: 0; padding: 1.05rem 1rem; }
}
@media (min-width: 62.01rem) { .navwrap { display: contents !important; } }

/* ---------- strata divider ---------- */
.strata { height: 14px; background:
  linear-gradient(100deg, var(--blue) 0 22%, transparent 22% 23%, var(--coral) 23% 41%, transparent 41% 42%, var(--plum) 42% 60%, transparent 60% 61%, var(--gold) 61% 72%, transparent 72% 73%, var(--blue-deep) 73% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.strata.thin { height: 6px; }

/* ---------- hero: photo strips (tour + info pages) ---------- */
.hero { background: #fff; padding: clamp(1.8rem, 5vw, 3.5rem) 0 0; }
.hero .in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hero .intro { max-width: 46rem; font-size: clamp(1.08rem, 1.7vw, 1.25rem); color: var(--ink-soft); }
.hero .intro p:last-child { margin-bottom: 0; }
.hero .crumb { font: 600 .85rem var(--font-ui); color: var(--ink-soft); margin: 0 0 1rem; }
.hero .crumb a { color: inherit; }
.strips { display: flex; height: clamp(13rem, 33vw, 26rem); margin-top: clamp(1.6rem, 4vw, 2.6rem); overflow: hidden; }
.strips figure { margin: 0; flex: 1.15; position: relative; margin-left: calc(var(--cut) * -.9); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); background: var(--c); }
.strips figure:first-child { margin-left: 0; }
.strips figure:nth-child(1) { --c: var(--blue); }
.strips figure:nth-child(2) { --c: var(--coral); flex: 1.5; }
.strips figure:nth-child(3) { --c: var(--plum); }
.strips img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(calc(var(--cut) + 7px) 0, calc(100% - 7px) 0, calc(100% - var(--cut) - 7px) 100%, 7px 100%); }
.strips figure:first-child img { clip-path: polygon(0 0, calc(100% - 7px) 0, calc(100% - var(--cut) - 7px) 100%, 0 100%); }
.strips figure:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.strips figure:last-child img { clip-path: polygon(calc(var(--cut) + 7px) 0, 100% 0, 100% 100%, 7px 100%); }
.strips figure:last-child { clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- main content ---------- */
main { display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.band { padding: clamp(1.8rem, 4vw, 3rem) 0; }
.band > .row, .band > .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.row { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); }
.row:has(> .col + .col) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
.col > :first-child { margin-top: 0; }
.col figure { margin: 0 0 1.6rem; }
.col figure img { width: 100%; }
.col .video { margin: 1rem 0; }
.row > .col { min-width: 0; }
.single > .row > .col, .row:not(:has(> .col + .col)) > .col { max-width: var(--measure); }
.row:not(:has(> .col + .col)) > .col:has(> .video) { max-width: 52rem; }

.col.gallery { display: grid; gap: 1rem; }
.col.gallery figure { margin: 0; overflow: hidden; }
.col.gallery figure img { aspect-ratio: 4 / 3; object-fit: cover; }
.col.gallery figure:nth-child(3n+1) img { aspect-ratio: 3 / 2; }

@media (max-width: 52rem) {
  .row:has(> .col + .col) { grid-template-columns: 1fr; }
  .col.gallery { position: static; display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .col.gallery figure { flex: 0 0 78%; scroll-snap-align: start; }
  .col.gallery figure img { aspect-ratio: 4 / 3 !important; }
}

/* itinerary: slanted marker on a time line */
p.stop {
  position: relative; margin: 1.7rem 0 .25rem; padding-left: 1.6rem;
  font: 700 1rem/1.35 var(--font-ui); font-stretch: 108%; color: var(--ink);
}
p.stop::before {
  content: ""; position: absolute; left: 0; top: .2em; width: .8rem; height: 1.1em;
  background: var(--coral); clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
}
p.stop + p { margin-left: 1.6rem; border-left: 2px solid var(--stone); padding-left: 1rem; margin-left: .35rem; }
p.stop strong { font-weight: 700; }

/* reviews */
.review {
  position: relative; margin: 2.2rem 0; padding: clamp(1.5rem, 4vw, 2.6rem); color: #fff;
  background: linear-gradient(0deg, rgba(15,24,48,.82), rgba(15,24,48,.62)), var(--bg) center / cover, var(--night);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  padding-inline: clamp(2.2rem, 9vw, 5rem);
}
.review p { font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-style: italic; margin-bottom: .8em; }
.review footer { font: 600 .9rem var(--font-ui); color: #ffd98c; }

/* video facade */
.video-play { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--night); overflow: hidden; }
.video-play img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.video-play span { position: absolute; inset: 0; margin: auto; width: 5rem; height: 3.6rem; background: var(--gold); clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.video-play span::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-40%, -50%); border-left: 1.1rem solid var(--ink); border-top: .7rem solid transparent; border-bottom: .7rem solid transparent; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------- blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.6rem; }
.post-card a { text-decoration: none; color: inherit; display: block; }
.post-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .9rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.post-card:hover h2 { color: var(--coral); }
.post-card h2 { font-size: 1.25rem; margin: 0 0 .4em; }
.post-card .meta, .meta { font: 600 .85rem var(--font-ui); color: var(--ink-soft); margin: 0 0 .5rem; }
.post-card p { font-size: .98rem; }
@media (max-width: 62rem) { .posts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .posts { grid-template-columns: 1fr; } }
.recent { list-style: none; padding: 0; }
.recent li { padding: .6rem 0; border-bottom: 1px solid var(--line); margin: 0; }
.recent a { font-family: var(--font-ui); font-weight: 600; text-decoration: none; }

.article .wrap { max-width: 50rem; }
.article h2 { margin-top: 1.8em; }
.article figure { margin: 1.8rem 0; }
.hero-photo { max-width: var(--max); margin: 1.8rem auto 0; padding: 0 var(--gutter); }
.hero-photo img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1rem; background: #fff; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--line); border-top: 6px solid var(--blue); }
.form label { font: 700 .9rem var(--font-ui); display: grid; gap: .35rem; }
.form input, .form textarea, .form select { font: 400 1rem var(--font-body); padding: .8rem .9rem; border: 1.5px solid #9aa9b3; background: #fff; border-radius: 0; width: 100%; color: var(--ink); }
.form textarea { min-height: 9rem; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--ink); }
.form .hp { position: absolute; left: -9999px; }
.form .btn { justify-self: start; }
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.5rem; }
.contact-grid > div { background: #fff; padding: 1.3rem 1.4rem; border-left: 6px solid var(--coral); }
.contact-grid h2 { font-size: 1.05rem; margin: 0 0 .4em; }
.contact-grid p { margin: 0; font-size: 1.05rem; }
@media (max-width: 52rem) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- guides ---------- */
.guides { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.guide { display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: start; }
.guide figure { margin: 0; }
.guide figure img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.guide h3 { margin-top: 0; font-size: 1.6rem; }
.guide .role { font: 600 .95rem var(--font-ui); color: var(--coral); margin: -.3rem 0 1rem; }
@media (max-width: 40rem) { .guide { grid-template-columns: 1fr; } .guide figure { max-width: 12rem; } }

/* ---------- footer ---------- */
.reviews-strip { background: #fff; padding: 1.4rem 0; }
.reviews-strip img { width: 100%; max-width: 36rem; margin: 0 auto; padding: 0 var(--gutter); }
.site-footer { background: var(--night); color: #d9e1e8; font-family: var(--font-ui); font-size: .95rem; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--gold); }
.site-footer .in { max-width: var(--max); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 1.5rem; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.3fr; gap: 2rem; }
.site-footer h2 { font-size: 1rem; color: #fff; margin: 0 0 .8rem; font-style: italic; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 .45rem; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer .logo { width: 6rem; margin-bottom: 1rem; }
.site-footer .legal { max-width: var(--max); margin: 0 auto; padding: 1rem var(--gutter) 5.5rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .85rem; color: #aab6c1; }
.site-footer .form { background: transparent; border: 0; padding: 0; gap: .6rem; }
.site-footer .form label { color: #d9e1e8; font-weight: 600; }
.site-footer .form input { background: #fff; }
.site-footer .btn:hover { background: #fff; color: var(--ink); }
@media (max-width: 62rem) { .site-footer .in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .site-footer .in { grid-template-columns: 1fr; } }

/* mobile booking bar */
.bookbar { display: none; }
@media (max-width: 62rem) {
  .bookbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--gold); text-align: center; font: 800 1rem var(--font-ui); font-stretch: 112%; padding: 1rem; color: var(--ink); text-decoration: none; box-shadow: 0 -6px 18px rgba(20,32,43,.18); }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print { .site-header, .bookbar, .strips { display: none; } }

/* ---------- home ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-full { position: relative; min-height: min(94svh, 58rem); display: grid; align-items: end; color: #fff; background: var(--night); isolation: isolate; }
.hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; z-index: -2; }
.hero-full::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,16,26,.3) 0%, rgba(8,16,26,.08) 30%, rgba(8,16,26,.35) 62%, rgba(8,16,26,.82) 100%); }
.hero-copy { max-width: 62rem; margin: 0 auto; padding: 9rem var(--gutter) clamp(4.5rem, 9vw, 6.5rem); text-align: center; }
.hero-full h1 { color: #fff; font-size: clamp(2.3rem, 7.2vw, 5.6rem); text-shadow: 0 2px 22px rgba(0,0,0,.4); margin-bottom: .35em; }
.hero-full p { font-size: clamp(1.05rem, 1.9vw, 1.32rem); max-width: 44rem; margin: 0 auto 1.8rem; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; align-items: center; }
.finder { display: flex; align-items: stretch; background: rgba(255,255,255,.96); min-width: min(100%, 21rem); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.finder select { flex: 1; min-width: 0; font: 600 .95rem var(--font-ui); padding: 0 .9rem; height: 3.2rem; border: 0; background: transparent; color: var(--ink); appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 1.1rem) 52%, calc(100% - .8rem) 52%; background-size: .3rem .3rem; background-repeat: no-repeat; padding-right: 2.4rem; text-overflow: ellipsis; }
.finder .go { border: 0; background: var(--ink); color: #fff; font: 800 1.2rem var(--font-ui); width: 3.4rem; cursor: pointer; }
.finder .go:hover { background: var(--coral); }
.hero-full .btn { padding-block: 1.1rem; }

.promo { background: var(--gold); color: var(--ink); text-align: center; font: 600 .98rem var(--font-ui); padding: .85rem 3.2rem; position: relative; }
.promo p { margin: 0; }
.promo a { color: var(--ink); font-weight: 800; }
.promo button { position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--ink); padding: .4rem .7rem; }
.promo[hidden] { display: none; }

.styles { padding: clamp(2.5rem, 7vw, 5rem) 0; }
.styles .in { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.styles .intro { position: sticky; top: 6rem; }
.styles .intro h2 { margin-top: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.styles .intro p { font-family: var(--font-ui); font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.styles .intro .small { font-size: .85rem; }
.arrow { font: 800 .95rem var(--font-ui); color: var(--ink); text-decoration: none; display: inline-flex; gap: .6rem; align-items: center; border-bottom: 2px solid var(--coral); padding-bottom: .2rem; }
.arrow::after { content: "\2192"; }
.arrow:hover { color: var(--coral); }
.tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem 1.4rem; }
.tcard { display: block; text-decoration: none; color: var(--ink); }
.tcard .ph { position: relative; display: block; overflow: hidden; background: var(--stone); }
.tcard .ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
.tcard:hover .ph img { transform: scale(1.05); }
.tcard .tag { position: absolute; left: 0; bottom: 0; background: var(--ink); color: #fff; font: 700 .75rem var(--font-ui); padding: .35rem 1.1rem .35rem .7rem; clip-path: polygon(0 0, calc(100% - .5rem) 0, 100% 100%, 0 100%); }
.tcard .tx { display: block; padding-top: .9rem; }
.tcard strong { display: block; font: 800 1.08rem/1.15 var(--font-display); font-stretch: 118%; font-style: italic; margin-bottom: .45rem; }
.tcard:hover strong { color: var(--coral); }
.tcard .d { display: block; font: 400 .92rem/1.5 var(--font-ui); color: var(--ink-soft); }
.tcard .p { display: block; margin-top: .55rem; font: 700 .82rem var(--font-ui); color: var(--blue); }
.tcard.soon { opacity: .92; } .tcard.soon .tag { background: var(--plum); }
@media (max-width: 64rem) {
  .styles .in { grid-template-columns: 1fr; }
  .styles .intro { position: static; max-width: 38rem; }
}
@media (max-width: 52rem) { .tgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) {
  .tgrid { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .tcard { display: grid; grid-template-columns: 7.2rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: start; }
  .tcard .ph img { aspect-ratio: 1; height: 100%; }
  .tcard .tag { display: none; }
  .tcard .tx { padding-top: 0; }
  .tcard strong { font-size: 1rem; margin-bottom: .3rem; }
  .tcard .d { font-size: .86rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tcard .p { font-size: .78rem; margin-top: .4rem; }
}

.welcome { position: relative; isolation: isolate; color: #fff; text-align: center; padding: clamp(3.5rem, 9vw, 7rem) var(--gutter); background: var(--night); }
.welcome > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.welcome::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(10,20,32,.68); }
.wc { max-width: 46rem; margin: 0 auto; }
.welcome h2 { color: #fff; margin-top: 0; font-size: clamp(1.8rem, 4.4vw, 3rem); }
.welcome p { font-size: 1.05rem; }
.welcome .btn { margin-top: .6rem; }

.stats { background: var(--paper); padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.stats ul { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: var(--max); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.stats li { margin: 0; text-align: center; padding: .2rem 1rem; border-left: 3px solid var(--coral); text-align: left; }
.stats li:nth-child(2) { border-color: var(--plum); } .stats li:nth-child(3) { border-color: var(--blue); } .stats li:nth-child(4) { border-color: var(--gold); }
.stats b { display: block; font: 800 clamp(2.4rem, 5vw, 3.8rem)/1 var(--font-display); font-stretch: 125%; font-style: italic; color: var(--ink); }
.stats b i { font-style: normal; color: var(--gold-deep); font-size: .7em; margin-left: .1em; }
.stats span { display: block; font: 600 .92rem/1.4 var(--font-ui); color: var(--ink-soft); margin-top: .4rem; }
@media (max-width: 52rem) { .stats ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 30rem) { .stats li { padding-left: .8rem; } .stats b { font-size: 2.3rem; } }

.voices { background: var(--blue-deep); color: #fff; padding: clamp(3rem, 7vw, 5rem) 0; }
.voices .in { max-width: var(--max); margin: 0 auto; padding: 2rem var(--gutter); text-align: center; }
.voices h2 { color: #fff; margin: 0 0 .2em; }
.voices .sub { font: 600 1rem var(--font-ui); color: #ffd98c; margin-bottom: 2rem; }
.vgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; text-align: left; align-items: start; }
.vgrid figure { margin: 0; background: rgba(255,255,255,.08); border-top: 4px solid var(--gold); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; }
.vgrid blockquote { margin: 0 0 1rem; flex: 1; }
.vgrid p { font-size: .98rem; line-height: 1.6; margin: 0; }
.vgrid figcaption { font: 700 .9rem var(--font-ui); } .vgrid figcaption span { display: block; font-weight: 500; color: #b9cad6; margin-top: .1rem; }
.voices .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.voices .btn-ghost:hover { background: #fff; color: var(--ink); }
.vlinks { margin: 2rem 0 0; }
@media (max-width: 60rem) { .vgrid { grid-template-columns: 1fr; } }

.confidence { position: relative; isolation: isolate; color: #fff; padding: clamp(4rem, 10vw, 7rem) var(--gutter); background: var(--night); margin-top: 1rem; }
.confidence > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.confidence::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,16,26,.86), rgba(8,16,26,.45)); }
.cf { max-width: 70rem; margin: 0 auto; }
.cf > * { max-width: 36rem; }
.confidence h2 { color: #fff; margin-top: 0; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.confidence .arrow { color: #fff; }

.blogrows { padding: clamp(3rem, 7vw, 5rem) 0; }
.blogrows .in { max-width: 90rem; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 15rem 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.blogrows .intro { position: sticky; top: 6rem; }
.blogrows .intro h2 { margin-top: 0; font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.blogrows .intro p { font-family: var(--font-ui); font-size: .95rem; line-height: 1.55; color: var(--ink-soft); }
.blogrows .plist { display: grid; gap: clamp(1.5rem, 3vw, 2.4rem); }
.blogrows .pt { padding: 0; }
.blogrows .prow { gap: clamp(1rem, 3vw, 2.4rem); }
.blogrows .prow .pi img { aspect-ratio: 3 / 2; }
@media (max-width: 62rem) { .blogrows .in { grid-template-columns: 1fr; } .blogrows .intro { position: static; } }
.blogrows .bh { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; margin-bottom: 1.6rem; }
.blogrows .bh h2 { margin: 0; } .blogrows .bh p { margin: 0; font: 500 .95rem var(--font-ui); color: var(--ink-soft); }
.prow { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1rem, 3vw, 2.4rem); text-decoration: none; color: var(--ink); align-items: center; margin-bottom: 0; }
.prow:nth-child(even) { grid-template-columns: 1fr 1.1fr; } .prow:nth-child(even) .pi { order: 2; }
.prow .pi { display: block; overflow: hidden; } .prow .pi img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .5s; } .prow:hover .pi img { transform: scale(1.04); }
.pt { display: block; } .pt strong { display: block; font: 800 clamp(1.15rem, 2.2vw, 1.5rem)/1.15 var(--font-display); font-stretch: 118%; font-style: italic; margin: .2rem 0 .6rem; }
.pt .meta { display: block; margin: 0; } .pt > span:not(.meta):not(.read) { display: block; font-size: .98rem; color: var(--ink-soft); }
.pt .read { display: inline-block; margin-top: .8rem; font: 800 .88rem var(--font-ui); border-bottom: 2px solid var(--coral); color: var(--ink); }
.prow:hover strong { color: var(--coral); }
@media (max-width: 40rem) { .prow, .prow:nth-child(even) { grid-template-columns: 1fr; gap: .8rem; margin-bottom: 0; } .prow:nth-child(even) .pi { order: 0; } }
.blogrows .cta { text-align: center; }
.videoband { padding-top: 0; } .videoband h2 { margin-top: 0; text-align: center; } .videoband .video { max-width: 52rem; margin: 0 auto; }

.site-footer .social li { margin: 0 0 .5rem; } .site-footer .social a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 600; } .site-footer .social svg { flex: none; }

/* header social icons */
.nav .soc { display: flex; align-items: center; gap: .1rem; margin-left: .3rem; }
.nav .soc a { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem .5rem; }
.nav .soc span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.on-hero .nav .soc a, .on-hero.scrolled .nav .soc a { color: var(--ink); }
.nav .soc a:hover { color: var(--coral); }
@media (max-width: 62rem) { .nav .soc { margin: .6rem 0 0; gap: 1.4rem; } .nav .soc a { padding: .6rem 0; border: 0; } .nav .soc span { position: static; width: auto; height: auto; clip: auto; font-size: .95rem; } }
@media (min-width: 62.01rem) and (max-width: 80rem) { .nav .soc { display: none; } }
.nav .btn { white-space: nowrap; }
/* recent posts strip */
.recents { padding: clamp(2rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line); }
.recents .wrap > h2 { margin-top: 0; }
.recents .more { margin-top: 1.4rem; font-family: var(--font-ui); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: center; }
.recents .post-card h3 { font: 800 1.05rem/1.2 var(--font-display); font-stretch: 118%; font-style: italic; margin: 0 0 .3rem; }
.recents .post-card:hover h3 { color: var(--coral); }
@media (max-width: 52rem) { .recents .posts { grid-template-columns: 1fr; } }

/* hero: button + finder read as one joined, parallel-slanted bar */
.hero-actions { --hc: 1.1rem; gap: 0; filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); }
.hero-full .btn { height: 3.6rem; padding: 0 2.2rem 0 2.4rem; display: inline-flex; align-items: center; box-shadow: none; clip-path: polygon(var(--hc) 0, 100% 0, calc(100% - var(--hc)) 100%, 0 100%); }
.finder { height: 3.6rem; box-shadow: none; background: #fff; min-width: min(100%, 22rem); margin-left: calc(var(--hc) * -1 + .3rem); clip-path: polygon(var(--hc) 0, 100% 0, calc(100% - var(--hc)) 100%, 0 100%); }
.finder select { height: 100%; padding-left: calc(var(--hc) + .9rem); }
.finder .go { width: 4.2rem; padding-right: var(--hc); }
@media (max-width: 40rem) {
  .hero-actions { flex-direction: column; gap: .7rem; width: 100%; }
  .hero-full .btn { width: min(100%, 22rem); justify-content: center; }
  .finder { margin-left: 0; width: min(100%, 22rem); }
}
/* reviews strip: same blue as the image so it reads as one band */
.reviews-strip { background: #1e4764; padding: 1.2rem 0; }

/* angled section tops: only the TOP edge is cut, and the section pulls up over the
   previous one's bottom padding, so the previous section's own colour fills the wedge
   (no slivers, nothing left behind showing the page background) */
:root { --slope: clamp(1.4rem, 3.6vw, 3.2rem); }
.welcome, .voices, .confidence, .reviews-strip { position: relative; margin-top: calc(var(--slope) * -1); }
.welcome, .confidence { padding-top: calc(clamp(3.5rem, 9vw, 7rem) + var(--slope)); }
.voices { padding-top: calc(clamp(3rem, 7vw, 5rem) + var(--slope)); }
.reviews-strip { padding-top: calc(1.2rem + var(--slope)); }
.welcome, .confidence, .reviews-strip { clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%); }   /* rises to the right */
.voices { clip-path: polygon(0 0, 100% var(--slope), 100% 100%, 0 100%); }                                   /* rises to the left */
.confidence { margin-top: calc(var(--slope) * -1); }

/* counter-wedge: a gold wedge at the bottom of each angled section, slanting the opposite way
   so the pair balances (blue/dark coming one way, gold the other) */
.welcome, .voices, .confidence, .reviews-strip { padding-bottom: calc(var(--wb, 0px) + var(--slope)); }
.welcome { --wb: clamp(3.5rem, 9vw, 7rem); } .confidence { --wb: clamp(4rem, 10vw, 7rem); } .voices { --wb: clamp(3rem, 7vw, 5rem); } .reviews-strip { --wb: 1.2rem; }
.welcome::after, .voices::after, .confidence::after, .reviews-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--slope); background: var(--gold); z-index: 1; pointer-events: none; }
.welcome::after, .confidence::after, .reviews-strip::after { clip-path: polygon(0 0, 100% 100%, 0 100%); }  /* thick on the left, top rises right→ opposite */
.voices::after { clip-path: polygon(100% 0, 100% 100%, 0 100%); }
/* voices is followed by the angled "confidence" band, which overlaps its last wedge-height; lift the gold above that */
.voices { padding-bottom: calc(var(--wb) + var(--slope) * 2); }
.voices::after { bottom: var(--slope); }

/* anchor jumps clear the fixed header */
html { scroll-padding-top: 5.5rem; }

/* end-of-article booking prompt */
.cta-band { background: var(--paper); border-top: 1px solid var(--line); }
.cta-band .wrap { display: flex; flex-wrap: wrap; gap: 1.2rem 2.5rem; align-items: center; justify-content: space-between; }
.cta-band h2 { margin: 0 0 .3em; font-size: clamp(1.4rem, 3vw, 2rem); }
.cta-band p { margin: 0; max-width: 40rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* voices → confidence: the gold strip runs parallel to the next section's angled top, so no blue shows between them */
.voices { --gt: .9rem; padding-bottom: calc(var(--wb) + var(--slope) + var(--gt)); }
.voices::after { bottom: 0; height: calc(var(--slope) + var(--gt)); clip-path: polygon(0 var(--slope), 100% 0, 100% var(--gt), 0 100%); }

/* guides index + guide article furniture */
.gsec { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.gsec h2 { margin: 0 0 .25em; }
.gsec .sub { margin: 0 0 1.4rem; font-family: var(--font-ui); color: var(--ink-soft); }
.gsec .post-card h3 { font: 800 1.15rem/1.2 var(--font-display); font-stretch: 118%; font-style: italic; margin: 0 0 .35rem; }
.gsec .post-card:hover h3 { color: var(--coral); }
.gsec + .gsec { border-top: 1px solid var(--line); }
.article .tldr { background: var(--paper); border-left: 4px solid var(--gold); padding: 1rem 1.2rem; margin: 0 0 1.8rem; font-family: var(--font-ui); }
.article .tldr strong { display: block; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: .4rem; }
.article .tldr ul { margin: 0; padding-left: 1.1rem; }
.article .tldr li { margin: .25rem 0; }
.article .note { background: #fff8e8; border: 1px solid #f1d9a0; padding: .9rem 1.1rem; margin: 1.4rem 0; font-family: var(--font-ui); font-size: .95rem; }
.article .cmp { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-family: var(--font-ui); font-size: .92rem; }
.article .cmp th, .article .cmp td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.article .cmp th { background: var(--blue-deep); color: #fff; font-weight: 700; }
.article .cmp tbody th { background: var(--paper); color: var(--ink); font-weight: 700; }
.article .cmp td em { color: var(--ink-soft); font-style: normal; font-size: .85em; }
.article .tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); }
.article .pick { border: 2px solid var(--blue); padding: 1rem 1.2rem; margin: 1.6rem 0; }
.article .pick h3 { margin-top: 0; }
.article .related { margin: 2.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-family: var(--font-ui); }
.article .related h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.article .related ul { margin: 0; padding-left: 1.1rem; }
.article .meta { font: 600 .85rem var(--font-ui); color: var(--ink-soft); }
@media (max-width: 48rem) { .article .cmp { min-width: 40rem; } .article .cmp th:first-child { min-width: 7rem; } }
.hero .tagline { font: 800 clamp(1.1rem, 2.2vw, 1.5rem)/1.2 var(--font-display); font-stretch: 118%; font-style: italic; color: var(--blue-deep); margin: -.4rem 0 .9rem; }
.nav li > a { white-space: nowrap; }

/* owner photos inside Field Notes articles */
.article .inline-photo { margin: 1.8rem 0; }
.article .inline-photo img { width: 100%; height: auto; }

/* Instagram band at the foot of every Field Notes article */
.ig-band { background: var(--night); color: #fff; overflow: hidden; position: relative; isolation: isolate; }
.ig-band::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; background: radial-gradient(closest-side, rgba(242,176,61,.35), rgba(192,81,78,.22) 45%, rgba(160,61,92,.12) 65%, transparent 72%); }
.ig-in { max-width: var(--max); margin: 0 auto; padding: clamp(2.6rem, 6vw, 4.5rem) var(--gutter); display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ig-handle { display: inline-flex; align-items: center; gap: .55rem; font: 800 1rem var(--font-ui); letter-spacing: .02em; margin: 0 0 .8rem; padding: .45rem .9rem .45rem .55rem; border-radius: 999px; background: linear-gradient(90deg, #f2b03d, #c0514e 55%, #a03d5c); }
.ig-handle svg { width: 1.35rem; height: 1.35rem; }
.ig-band h2 { color: #fff; margin: 0 0 .5rem; font-size: clamp(1.8rem, 4.2vw, 3rem); line-height: 1.05; }
.ig-band p { color: rgba(255,255,255,.86); max-width: 34rem; }
.ig-btn { margin-top: .6rem; }
.ig-phones { position: relative; display: block; height: clamp(17rem, 34vw, 24rem); }
.ig-reel { position: absolute; top: 50%; width: 38%; aspect-ratio: 9 / 16; border-radius: 1.1rem; overflow: hidden; border: 4px solid #fff; box-shadow: 0 18px 40px rgba(0,0,0,.45); background: #222; transition: transform .25s ease; }
.ig-reel img { width: 100%; height: 100%; object-fit: cover; }
.ig-reel.r1 { left: 4%; transform: translateY(-50%) rotate(-8deg); }
.ig-reel.r2 { left: 31%; transform: translateY(-54%) rotate(1deg); z-index: 2; width: 40%; }
.ig-reel.r3 { left: 59%; transform: translateY(-48%) rotate(9deg); }
.ig-phones:hover .r1 { transform: translateY(-52%) rotate(-11deg); }
.ig-phones:hover .r3 { transform: translateY(-46%) rotate(12deg); }
.ig-play { position: absolute; inset: 0; margin: auto; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: rgba(15,24,48,.55); backdrop-filter: blur(2px); }
.ig-play::after { content: ""; position: absolute; left: 1.1rem; top: .85rem; border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent #fff; }
@media (max-width: 48rem) {
  .ig-in { grid-template-columns: 1fr; }
  .ig-phones { height: 16rem; order: -1; }
  .ig-reel { width: 30%; } .ig-reel.r2 { width: 32%; left: 34%; } .ig-reel.r1 { left: 6%; } .ig-reel.r3 { left: 64%; }
}
.hero-photo.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.4rem, 1.2vw, .9rem); }
.hero-photo.pair img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.hero-photo.tall img { aspect-ratio: 16 / 10; object-position: 50% 40%; }
@media (max-width: 40rem) { .hero-photo.pair img { aspect-ratio: 3 / 4; } }

/* in-article photo rows from @@PHOTOS:a,b,c@@ */
.photo-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.4rem, 1.2vw, .7rem); margin: 1.8rem 0; }
.photo-row.n3 { grid-template-columns: repeat(3, 1fr); }
.photo-row img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 40rem) {
  .photo-row.n3 { grid-template-columns: 1fr 1fr; }
  .photo-row.n3 img:last-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}