/* Fonts are self-hosted, not loaded from Google.

   The Google Fonts stylesheet sits on a third party origin, so before
   anything paints the browser must do DNS, TCP, TLS and a request to
   fonts.googleapis.com, then discover and fetch the files from a second
   origin. On throttled mobile that cost first contentful paint about
   three seconds. Serving from our own origin removes the chain, and it
   turns "the page still reads if Google Fonts fails" from a graceful
   fallback into something that cannot happen.

   Both are variable fonts, latin subset, so one file covers every weight
   the design uses. */
@font-face{
  font-family:'Newsreader';
  src:url('/assets/fonts/newsreader-latin-var.woff2') format('woff2-variations'),
      url('/assets/fonts/newsreader-latin-var.woff2') format('woff2');
  font-weight:200 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2-variations'),
      url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  font-weight:300 600;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Wild Toronto design system.
   Ported from near-north-prototype.html. BRAND.md sections 7 to 11 are
   the authority; where the prototype and BRAND.md disagree, BRAND.md wins.

   Two prototype devices are deliberately absent: the .ph placeholder
   scene generator and the .proto slot toggle. Neither ships. */

:root{
  --paper:#F6F3ED;
  --paper-2:#EDE8DE;
  --ink:#141A16;
  --ink-soft:#3A443D;
  --forest:#1B3027;
  --forest-2:#122019;
  --sage:#8E9C88;
  --stone:#DCD5C6;
  --clay:#AF5F3A;
  --rule:rgba(20,26,22,.14);
  --rule-dark:rgba(246,243,237,.18);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --max:1240px;
  --gut:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:860px}
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sage);margin:0 0 22px;
}
.eyebrow.inv{color:rgba(246,243,237,.55)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(34px,5.2vw,72px);line-height:1.06;text-wrap:balance}
h2{font-size:clamp(29px,4vw,52px);line-height:1.12;text-wrap:balance}
h3{font-size:clamp(21px,2.1vw,27px);line-height:1.22}
p{margin:0 0 1.15em}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6}

/* Visible keyboard focus. The prototype had none, and the brief
   requires it. */
:where(a,button,summary,details,[tabindex]):focus-visible{
  outline:2px solid var(--clay);outline-offset:3px;border-radius:2px;
}
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--paper);padding:14px 22px;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- photographs ---------- */
.photo{position:relative;overflow:hidden;background:var(--forest);border-radius:2px}
.photo img,.photo picture{width:100%;height:100%;display:block}
.photo img{object-fit:cover}
.hero .photo,.closing .photo{position:absolute;inset:0;border-radius:0}
.split .photo{aspect-ratio:4/5}
.card .photo{aspect-ratio:4/3;border-radius:0}
@media(max-width:900px){.split .photo{aspect-ratio:16/10}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:17px 30px;border-radius:2px;border:1px solid transparent;
  transition:.28s ease;cursor:pointer;
}
.btn-solid{background:var(--paper);color:var(--ink)}
.btn-solid:hover{background:var(--clay);color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--clay)}
.btn-ghost{border-color:rgba(246,243,237,.4);color:var(--paper)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(246,243,237,.09)}
.btn .ar{transition:transform .28s ease}
.btn:hover .ar{transform:translateX(5px)}
.btn:disabled,.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;background:transparent;color:var(--paper);
  border-color:rgba(246,243,237,.3);
}
.btn:disabled:hover,.btn[aria-disabled="true"]:hover{background:transparent;border-color:rgba(246,243,237,.3)}

/* ---------- nav ---------- */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;padding:22px 0;
  transition:background .4s ease,padding .4s ease,border-color .4s ease;
  border-bottom:1px solid transparent;
}
header.stuck{background:rgba(246,243,237,.94);backdrop-filter:blur(14px);padding:14px 0;border-bottom-color:var(--rule)}
/* flex-wrap is set explicitly because its initial value is nowrap, not
   wrap. Below roughly 390px the wordmark and the CTA together are wider
   than the space between the gutters even with the endorsement hidden,
   and a nowrap row clips them off screen with no scrollbar to reach
   them. Wrapping to a second line is the graceful failure. */
.navrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}
.mark{display:flex;align-items:baseline;gap:11px;text-decoration:none;color:var(--paper);transition:color .4s}
header.stuck .mark{color:var(--ink)}
.mark b{font-family:var(--serif);font-weight:400;font-size:21px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.mark span{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{
  text-decoration:none;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(246,243,237,.82);transition:color .4s;
}
header.stuck .navlinks a{color:var(--ink-soft)}
.navlinks a:hover{color:var(--clay)}
.navcta{font-size:12px !important;padding:12px 22px;border:1px solid rgba(246,243,237,.45);border-radius:2px;white-space:nowrap}
header.stuck .navcta{border-color:var(--ink);color:var(--ink) !important}
header.stuck .navcta:hover{background:var(--ink);color:var(--paper) !important}
@media(max-width:900px){.navlinks a:not(.navcta){display:none}}
/* The links collapse at 900px per BRAND.md, but the row needs roughly
   1001px to hold the wordmark plus all five items, so between 900 and
   1010px nothing collapsed and the CTA was pushed past the right edge.
   The endorsement is the widest thing on the row that is not a link, so
   it goes first and the gap tightens with it. */
@media(max-width:1010px){
  .mark span{display:none}
  .navlinks{gap:20px}
}
/* On a light page the nav sits on paper from the start, not over a photo. */
body.light-top header .mark{color:var(--ink)}
body.light-top header .navlinks a{color:var(--ink-soft)}
body.light-top header .navcta{border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:var(--paper)}
/* Two layers, because BRAND.md's four-stop values are tuned for a darker
   photograph than the one in the hero now. On the canoe shot the mid-tones
   land exactly where the headline sits.

   The vertical layer keeps the four-stop shape the brand defines and
   deepens every stop. The 75deg layer darkens the left side only, behind
   the text column, so the right of the photograph still breathes rather
   than the whole frame going flat. */
.hero .scrim{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(75deg,rgba(9,14,11,.5) 0%,rgba(9,14,11,.16) 52%,rgba(9,14,11,0) 78%),
    linear-gradient(180deg,rgba(9,14,11,.74) 0%,rgba(9,14,11,.34) 34%,rgba(9,14,11,.68) 68%,rgba(9,14,11,.93) 100%);
}
/* Hero-scoped, all of it. The dark #handled section reads fine on a flat
   background and does not want text shadows. */
.hero .eyebrow.inv{color:rgba(246,243,237,.72)}
.hero-in{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,7vh,92px);padding-top:150px}
.hero h1{max-width:none;text-wrap:initial;font-size:clamp(34px,4.9vw,68px);text-shadow:0 1px 30px rgba(9,14,11,.45)}
/* The two sentences stay as separate blocks, per BRAND.md. Balance is
   applied inside the second one only, because "a few hours north" runs
   two characters longer than the old "two hours north" and was leaving
   "north." orphaned on a line of its own at desktop widths. */
.hero h1 em{font-style:normal;display:block;text-wrap:balance}
.hero .sub{max-width:46ch;margin:30px 0 38px;font-size:clamp(16.5px,1.4vw,19.5px);color:rgba(246,243,237,.94);font-weight:300;text-shadow:0 1px 18px rgba(9,14,11,.5)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* Brighter than --rule-dark and the .7 label colour used elsewhere on
   dark. Both of those assume a flat forest background, not a photograph. */
.hero-facts{
  display:flex;flex-wrap:wrap;gap:0 44px;margin-top:52px;padding-top:24px;
  border-top:1px solid rgba(246,243,237,.28);
}
.hero-facts div{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,243,237,.82);padding:4px 0}
.crumb{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:rgba(246,243,237,.66);margin:0 0 22px}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover{color:var(--paper)}

/* ---------- generic section ---------- */
section{padding:clamp(84px,11vw,150px) 0}
section.dark{background:var(--forest);color:var(--paper)}
section.dark h2,section.dark h3,section.dark h4{color:var(--paper)}
section.dark p{color:rgba(246,243,237,.8)}
.mid{background:var(--paper-2)}

.center{text-align:center}
.center h2{margin:0 auto;max-width:22ch}
/* Unused since the #place columns became .intro. Kept as a generic
   two-column utility. */
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,76px);margin-top:46px}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:0}}

/* Detail sitting under a centred lede, at body size rather than lede
   size. Three large text blocks in a row gave the section no hierarchy,
   and BRAND.md puts body copy at 17px across 45 to 75 characters, not
   21px across 40. The hairline is what separates this from the lede. */
.intro{
  max-width:68ch;margin:clamp(44px,5vw,64px) auto 0;
  padding-top:clamp(34px,4vw,44px);border-top:1px solid var(--rule);
}
.intro p{color:var(--ink-soft)}
.intro p:last-child{margin-bottom:0}

/* stats */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(56px,7vw,88px);
}
/* Numbers on one line each, labels aligned to a common baseline via the
   auto margin, so an unusually long label cannot shove its neighbours
   out of step. */
.stats div{background:var(--paper);padding:34px 26px;display:flex;flex-direction:column}
.stats .n{font-family:var(--serif);font-size:clamp(30px,3.4vw,44px);font-weight:300;line-height:1;letter-spacing:-.02em;text-wrap:nowrap}
.stats .l{font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px;opacity:.72}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* pull quote band */
.band{background:var(--forest-2);color:var(--paper);padding:clamp(70px,9vw,120px) 0;text-align:center}
.band p{
  font-family:var(--serif);font-weight:200;font-size:clamp(25px,3.6vw,46px);line-height:1.22;
  max-width:26ch;margin:0 auto;color:var(--paper);letter-spacing:-.015em;
}

/* split */
.split{display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(34px,5vw,80px);align-items:center}
.split.rev{grid-template-columns:1fr 1.02fr}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:38px}}

/* photo strip: trip page gallery. Three photographs in a hairline grid,
   4:3 each, no controls. Two across on tablet, one on mobile. */
#day .split h2{margin-bottom:28px}
#gallery{padding:clamp(60px,8vw,110px) 0 0}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:2px}
.strip figure{margin:0;aspect-ratio:4/3;border-radius:0}
@media(max-width:900px){.strip{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.strip{grid-template-columns:1fr}}

/* handled list */
.handled{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--rule-dark)}
.handled li{
  display:flex;gap:16px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule-dark);font-size:16px;
}
.handled .tick{color:var(--sage);font-size:13px;flex:0 0 auto}

/* trips */
/* Four cards now, two real and two held, so the row wants the full
   measure rather than the old 920px cap. The column count is explicit
   because auto-fit orphaned the fourth card onto a row of its own at
   every width between 900 and 1200px. */
.trips{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.2vw,30px);margin:clamp(46px,6vw,72px) auto 0;
}
/* Four across only where four fit. Below that it halves rather than
   dropping one card onto a row of its own. */
@media(max-width:1180px){.trips{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.trips{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--rule);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:.3s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(20,26,22,.11);border-color:rgba(20,26,22,.24)}
.card-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
/* The default chip is the quiet one, .live carries the accent. Clay is 1%
   of the page and a card status chip is one of its three sanctioned uses,
   so it has to point at the trip you can actually buy. The other way
   round spent the page's single accent on the trip that is not on sale. */
.chip{
  display:inline-block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest);border:1px solid rgba(27,48,39,.35);background:rgba(27,48,39,.06);
  padding:4px 9px;border-radius:2px;align-self:flex-start;margin-bottom:16px;
}
.chip.live{color:var(--clay);border-color:rgba(175,95,58,.4);background:transparent}
.card h3{margin-bottom:10px}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--clay)}
.card .desc{font-size:15px;color:var(--ink-soft);margin-bottom:20px}
/* The meta line is two lines now, an uppercase date row and a serif
   price. The block-level .75 opacity that dimmed the whole thing had to
   go with it, because it took the price under the 4.5 AA line. */
.card .meta{
  padding-top:16px;border-top:1px solid var(--rule);margin-top:auto;
}
.card .when{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.card .price{
  font-family:var(--serif);font-weight:300;font-size:clamp(21px,2vw,26px);line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);margin-top:7px;
}
.card .book{
  margin-top:18px;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);display:inline-flex;gap:9px;align-items:center;
}
.card .book:hover{color:var(--clay)}
.card .book .ar{transition:transform .28s}
.card:hover .book .ar{transform:translateX(5px)}
/* A trip with no FareHarbor item renders a disabled control, never a
   link to a malformed url. */
.book[aria-disabled="true"],button.book[disabled]{
  color:var(--ink-soft);opacity:.55;cursor:not-allowed;
  background:none;border:0;padding:0;font:inherit;text-align:left;
  letter-spacing:.09em;text-transform:uppercase;font-size:12.5px;
}
.book[aria-disabled="true"]:hover,button.book[disabled]:hover{color:var(--ink-soft)}
.note{margin-top:34px;font-size:14px;color:var(--ink-soft);opacity:.8;max-width:70ch}

/* quotes. Two side by side, so they run smaller than a single centred
   pull quote would. */
.quotes{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:clamp(50px,6vw,76px);
}
.quotes .quote{background:var(--paper);padding:clamp(34px,4vw,54px) clamp(26px,3vw,44px)}
.quote{max-width:780px;margin:0}
.quote blockquote{margin:0}
.quote p{font-family:var(--serif);font-weight:200;font-size:clamp(20px,2.2vw,28px);line-height:1.3;letter-spacing:-.015em;margin:0;text-wrap:balance}
.quote .attr{font-family:var(--sans);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage);margin-top:24px}
@media(max-width:820px){.quotes{grid-template-columns:1fr}}

/* closing */
.closing{position:relative;min-height:78svh;display:flex;align-items:center;text-align:center;color:var(--paper)}
/* Same problem as the hero, more mildly, so the same treatment. */
.closing .scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(9,14,11,.62),rgba(9,14,11,.84))}
.closing .wrap{position:relative;z-index:3}
.closing h2{max-width:20ch;margin:0 auto 34px;font-weight:200;text-shadow:0 1px 24px rgba(9,14,11,.45)}

/* footer */
footer{background:var(--forest-2);color:rgba(246,243,237,.62);padding:70px 0 54px;font-size:13.5px}
.frow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:26px;align-items:flex-start}
.fmark{font-family:var(--serif);font-size:19px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper)}
footer .sub{margin-top:10px;line-height:1.8}
.flinks{display:flex;gap:26px;flex-wrap:wrap}
.flinks a{text-decoration:none;font-size:12px;letter-spacing:.09em;text-transform:uppercase}
.flinks a:hover{color:var(--paper)}
/* No extra opacity here. Stacked on the footer's own .62 alpha it
   landed at #676e68 on #122019, a contrast of 3.21 against the 4.5
   minimum. Inheriting the footer colour gives 6.57. */
.fbase{margin-top:46px;padding-top:24px;border-top:1px solid var(--rule-dark);font-size:11.5px;letter-spacing:.05em}

/* reveal

   Scoped to .js, which an inline script in the head adds. Without
   JavaScript nothing is hidden in the first place, so the page renders
   complete rather than blank. Hiding by default and revealing with
   script gets this exactly backwards.

   Deliberately never applied to hero content. BRAND.md describes this
   as elements fading in "on entering the viewport", and hero content
   never enters the viewport, it is already there at load. Animating it
   in cost 1.17s of LCP because the largest text block sat at opacity 0
   while the transition ran. */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv,.rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  header{transition:none}
  .btn,.card,.book .ar{transition:none}
}

/* ===================== trip pages ===================== */

/* fact strip */
.facts{background:var(--forest-2);color:var(--paper)}
.facts dl{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:repeat(5,1fr);gap:1px;
}
.facts dl>div{padding:26px 18px 28px}
.facts dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin:0 0 9px}
.facts dd{margin:0;font-size:15px;line-height:1.4;color:var(--paper)}
@media(max-width:860px){.facts dl{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.facts dl{grid-template-columns:1fr}}

/* itinerary */
.itin{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--rule-dark)}
.itin .row{display:grid;grid-template-columns:118px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--rule-dark)}
.itin .tm{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);padding-top:5px}
.itin h3{font-size:20px;margin:0 0 6px}
.itin p{margin:0;font-size:15.5px}
.itin .key .tm{color:var(--clay)}
.timenote{margin-top:26px;font-size:13.5px;opacity:.7}
@media(max-width:620px){.itin .row{grid-template-columns:1fr;gap:6px}.itin .tm{padding-top:0}}

/* included */
.incl{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:clamp(44px,6vw,68px)}
.incl>div{background:var(--paper);padding:34px 30px 38px}
.incl h3{font-size:19px;margin:0 0 20px}
.incl ul{list-style:none;margin:0;padding:0}
.incl li{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15.5px}
.incl li:last-child{border-bottom:0}
.incl .tick{color:var(--sage);font-size:12px;flex:0 0 auto}
.incl .cross{color:var(--ink-soft);opacity:.5;font-size:12px;flex:0 0 auto}
.incl .off{background:var(--paper-2)}
@media(max-width:760px){.incl{grid-template-columns:1fr}}
.transport{
  margin-top:clamp(34px,4vw,50px);padding:26px 28px;background:var(--paper-2);
  border-left:2px solid var(--clay);font-size:15.5px;max-width:78ch;
}
.transport b{font-weight:500}

/* getting there */
.routefoot{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin:44px 0 0}
.routefoot>div{background:var(--paper-2);padding:24px 22px}
.routefoot dt{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);opacity:.75;margin:0 0 9px}
.routefoot dd{margin:0;font-size:15px;line-height:1.5}
@media(max-width:760px){.routefoot{grid-template-columns:1fr}}

/* dates */
/* auto-fill, not auto-fit. The fire tower trip has a single departure,
   and auto-fit would stretch that one card across the full 1240px. */
.dates{list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.date{background:var(--paper);padding:26px 24px 28px;display:flex;flex-direction:column;gap:5px}
.date .dow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--sage)}
.date .d{font-family:var(--serif);font-size:25px;line-height:1.15;letter-spacing:-.015em}
.date .p{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}
.date .go{margin-top:14px}
.date .go .book{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;gap:9px;align-items:center}
.date .go .book:hover{color:var(--clay)}
.date .go .book .ar{transition:transform .28s}
.date .go .book:hover .ar{transform:translateX(5px)}

/* faq */
.faq{margin-top:44px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;padding:21px 0;font-size:17px;list-style:none;
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--sage);font-size:19px;flex:0 0 auto;transition:transform .28s}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--clay)}
.faq .a{padding:0 0 22px;max-width:74ch}
.faq .a p{margin:0;font-size:15.5px;color:var(--ink-soft)}

/* policy */
.policy{width:100%;border-collapse:collapse;margin-top:44px;text-align:left}
.policy th,.policy td{padding:18px 20px;border-bottom:1px solid var(--rule-dark);font-weight:300;font-size:15.5px}
.policy thead th{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-weight:500}
.policy tbody th{color:var(--paper);width:42%}
.policy td{color:rgba(246,243,237,.8)}
@media(max-width:620px){
  .policy thead{position:absolute;left:-9999px}
  .policy tbody th,.policy td{display:block;width:auto;padding:12px 0}
  .policy tbody th{border-bottom:0;padding-bottom:2px}
}

/* updated stamp */
.updated{margin:38px 0 0;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;opacity:.6}

/* 404 trip list */
.notfound{list-style:none;margin:40px auto 0;padding:0;max-width:560px;text-align:left;border-top:1px solid var(--rule)}
.notfound li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;border-bottom:1px solid var(--rule)}
.notfound a{text-decoration:none;font-family:var(--serif);font-size:21px}
.notfound a:hover{color:var(--clay)}
.notfound span{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);opacity:.7;flex:0 0 auto}

/* ===================== tour strip =====================
   Sits directly under the hero, above #place, so the thing people came
   for is on screen before any prose. Smaller than the #trips cards
   further down: one sentence of copy, no booking control. Paper-2 gives
   it a shelf of its own without introducing a third background colour. */
.tourstrip{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  padding:clamp(46px,5.4vw,70px) 0 clamp(50px,5.8vw,76px);
}
.tourstrip-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 32px;padding-bottom:clamp(24px,2.6vw,32px);
}
.tourstrip-head .eyebrow{margin:0 0 8px}
.tourstrip-head h2{font-size:clamp(25px,2.9vw,38px)}
.tourstrip-head .all{
  font-size:12px;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);display:inline-flex;gap:9px;align-items:center;white-space:nowrap;
}
.tourstrip-head .all:hover{color:var(--clay)}
.tourstrip-head .all .ar{transition:transform .28s}
.tourstrip-head .all:hover .ar{transform:translateX(5px)}

.tours{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:clamp(14px,1.6vw,22px)}
@media(max-width:560px){.tours{grid-template-columns:1fr}}

.tcard{
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;overflow:hidden;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:.3s ease;
}
a.tcard:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(20,26,22,.12);border-color:rgba(20,26,22,.24)}
.tcard .photo{aspect-ratio:16/10;border-radius:0}
.tcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.tcard .chip{margin-bottom:12px}
.tcard h3{font-size:clamp(18px,1.55vw,21px);line-height:1.2;margin:0 0 14px}
.tcard .desc{font-size:14px;line-height:1.5;color:var(--ink-soft);margin:0 0 18px}

/* Dates and prices carry the decision, so they are typeset rather than
   filed away inside the uppercase meta line. Date stays label-sized;
   the price steps up into the serif. */
.tcard .meta{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--rule);
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.tcard .when{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.tcard .price{
  font-family:var(--serif);font-weight:300;font-size:clamp(19px,1.7vw,23px);line-height:1.15;
  letter-spacing:-.015em;color:var(--ink);margin-top:4px;
}
.tcard .meta .ar{transition:transform .28s}
a.tcard:hover .meta .ar{transform:translateX(5px)}
a.tcard:hover h3{color:var(--clay)}

/* Held slots. No photograph, because a borrowed one implies a trip that
   is not planned yet. A forest block with a hairline label reads as
   space held on purpose rather than a broken card. Shared by both card
   sizes, so the strip and #trips stay in step. */
.tcard.soon .slot,.card.soon .slot{
  background:var(--forest);display:flex;align-items:center;justify-content:center;
}
.tcard.soon .slot{aspect-ratio:16/10}
.card.soon .slot{aspect-ratio:4/3}
.tcard.soon .slot span,.card.soon .slot span{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,237,.5);
}
.tcard.soon h3,.card.soon h3{color:var(--ink-soft)}
/* No opacity on these prices. --ink-soft at 70% measures 4.04:1 on
   paper, under the 4.5 AA line the rest of the stylesheet holds. */
.tcard.soon .price{color:var(--ink-soft);font-size:clamp(16px,1.4vw,18px)}
.card.soon .price{color:var(--ink-soft);font-size:clamp(18px,1.6vw,21px)}
.card.soon{box-shadow:none}