/* =====================================================================
   Distant Shore: the five-page voyage. Tokens come from main.css.
   One idea runs through every page: the site is a passage, the nav is
   its route, and each page is a leg with one authored moment.
   ===================================================================== */

/* ---------- Page turns (cross-document view transitions) ---------- */
@view-transition{ navigation:auto; }
.voyage__vessel{ view-transition-name:vessel; }
::view-transition-group(vessel){ animation-duration:0.95s; animation-timing-function:var(--ease); }
::view-transition-old(root){ animation:turn-out 0.42s cubic-bezier(0.4,0,1,1) both; }
::view-transition-new(root){ animation:turn-in 0.85s var(--ease) both; }
@keyframes turn-out{ to{ opacity:0; transform:translateY(-10px); } }
@keyframes turn-in{ from{ opacity:0; transform:translateY(18px); } }
::view-transition-group(*){ animation-duration:0.9s; animation-timing-function:var(--ease); }
@media (prefers-reduced-motion: reduce){
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*){ animation:none !important; }
}

/* ---------- The route: five legs in the nav, the vessel on the current one ---------- */
.voyage ol{ list-style:none; display:flex; align-items:center; gap:0; position:relative; }
.voyage li{ position:relative; display:flex; align-items:center; }
.voyage li + li::before{
  content:""; width:clamp(1.2rem,2.4vw,2.6rem); height:1px; margin:0 0.55rem;
  background:repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 6px); opacity:0.45;
}
.voyage a{ display:inline-flex; align-items:center; gap:0.5rem; min-height:44px; padding:0 0.15rem; opacity:0.62; transition:opacity 0.4s var(--ease); }
.voyage a:hover, .voyage a[aria-current]{ opacity:1; }
.voyage__n{ font-size:0.75rem; opacity:0.6; }
.voyage__vessel{
  position:absolute; left:50%; bottom:2px; width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%; background:currentColor; pointer-events:none;
}
.voyage__vessel::after{ content:""; position:absolute; inset:-4px; border:1px solid currentColor; border-radius:50%; opacity:0.5; }
@media (max-width:960px){ .voyage{ display:none; } }

/* ---------- Leg header: the opening of every page after Home ---------- */
.leg{ position:relative; padding:clamp(8rem,14vw,11rem) var(--gutter) clamp(3.5rem,7vw,6rem); overflow:hidden; }
.leg__log{ display:flex; align-items:center; gap:1.2rem; color:var(--muted); flex-wrap:wrap; }
.leg__log > span:first-child{ color:var(--rum-ink); }
.leg__rule{ flex:1; min-width:2rem; height:1px; background:var(--line); }
.leg__title{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,8.2vw,7rem); line-height:0.98; letter-spacing:-0.025em; margin:clamp(2rem,4vw,3.2rem) 0 clamp(1.6rem,3vw,2.4rem); max-width:13ch; position:relative; z-index:1; }
.leg__title .line{ display:block; overflow:hidden; padding-bottom:0.08em; }
.leg__title .line > span{ display:inline-block; }
.leg__title em{ color:var(--rum-ink); font-style:normal; }
.leg__lede{ font-size:clamp(1.05rem,1.4vw,1.25rem); line-height:1.6; color:var(--muted); max-width:46ch; position:relative; z-index:1; }
.leg__route{ position:absolute; left:42%; right:0; bottom:clamp(3rem,6vw,5rem); height:clamp(5rem,12vw,10rem); width:58%; overflow:visible; pointer-events:none; }
.leg__route path{ fill:none; stroke:var(--rum); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; animation:leg-draw 2.4s var(--ease) 0.5s forwards; }
@keyframes leg-draw{ to{ stroke-dashoffset:0; } }
@media (max-width:1180px){ .leg__route{ position:relative; display:block; left:auto; right:auto; bottom:auto; width:100%; height:3.2rem; margin-top:2rem; } }

/* ---------- The next leg: every page hands the reader on ---------- */
.nextleg{
  position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:1rem 2rem;
  background:var(--paper-deep); color:var(--ink); padding:clamp(4rem,8vw,7rem) var(--gutter) clamp(4rem,7vw,6rem);
  overflow:hidden; border-top:1px solid var(--line);
}
.nextleg__log{ grid-column:1 / -1; color:var(--rum-ink); }
.nextleg__title{ font-family:var(--serif); font-size:clamp(3rem,9vw,8rem); line-height:0.95; letter-spacing:-0.025em; transition:transform 0.9s var(--ease); }
.nextleg__teaser{ grid-column:1; color:var(--muted); font-size:1.05rem; max-width:40ch; }
.nextleg__arrow{ grid-column:2; grid-row:2 / 4; align-self:center; font-family:var(--serif); font-size:clamp(2.6rem,6vw,5rem); color:var(--rum-ink); transition:transform 0.9s var(--ease); }
.nextleg__route{ position:absolute; left:auto; right:var(--gutter); top:clamp(2.4rem,4vw,3.4rem); height:2.2rem; width:min(44%,34rem); pointer-events:none; overflow:visible; }
.nextleg__route path{ fill:none; stroke:var(--rum); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.6s var(--ease); }
.nextleg:hover .nextleg__route path, .nextleg:focus-visible .nextleg__route path, .nextleg.in .nextleg__route path{ stroke-dashoffset:0; }
.nextleg:hover .nextleg__title{ transform:translateX(0.6rem); }
.nextleg:hover .nextleg__arrow{ transform:translateX(0.8rem); }
.nextleg:focus-visible{ outline:2px solid var(--rum-ink); outline-offset:-8px; }

/* ---------- Home: two ways in ---------- */
.paths{ background:var(--ink); color:var(--paper); padding:2rem 0 clamp(4rem,8vw,7rem); }
.paths__grid{ display:grid; grid-template-columns:1fr 1fr; margin:clamp(2.5rem,5vw,4rem) var(--gutter) 0; border-top:1px solid var(--line-dark); }
.path{ position:relative; display:flex; flex-direction:column; gap:1rem; padding:clamp(2rem,4vw,3.4rem) clamp(1.5rem,3vw,3rem) clamp(2.4rem,4vw,3.6rem) 0; border-right:1px solid var(--line-dark); min-height:22rem; }
.path + .path{ padding-left:clamp(1.5rem,3vw,3rem); border-right:0; }
.path__for{ color:var(--rum-bright); }
.path__title{ font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,4.2rem); line-height:1; letter-spacing:-0.02em; transition:transform 0.9s var(--ease); }
.path__line{ color:var(--muted-dark); max-width:36ch; line-height:1.6; }
.path__route{ width:min(100%,24rem); height:2.4rem; margin-top:auto; overflow:visible; }
.path__route path{ fill:none; stroke:var(--rum-bright); stroke-width:1.2; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.4s var(--ease); }
.path__arrow{ position:absolute; right:clamp(1.5rem,3vw,3rem); bottom:clamp(2.2rem,4vw,3.4rem); font-family:var(--serif); font-size:2.4rem; color:var(--rum-bright); transition:transform 0.9s var(--ease); }
.path + .path .path__arrow{ right:0; }
.path:hover .path__route path, .path:focus-visible .path__route path{ stroke-dashoffset:0; }
.path:hover .path__title{ transform:translateX(0.5rem); }
.path:hover .path__arrow{ transform:translateX(0.6rem); }
.path:focus-visible{ outline:2px solid var(--rum-bright); outline-offset:-6px; }
@media (max-width:760px){
  .paths__grid{ grid-template-columns:1fr; }
  .path, .path + .path{ padding:2.2rem 0 2.6rem; border-right:0; min-height:0; }
  .path + .path{ border-top:1px solid var(--line-dark); }
  .path__arrow, .path + .path .path__arrow{ right:0; bottom:2.4rem; }
}

/* ---------- Home: the Collection in eight engravings ---------- */
.shelfstrip{ padding:2rem 0 clamp(4rem,8vw,7rem); }
.shelfstrip__list{ list-style:none; display:grid; grid-template-columns:repeat(8,1fr); gap:0; margin:clamp(2rem,4vw,3rem) var(--gutter) 0; border-top:1px solid var(--line); }
.shelfstrip__item{ display:flex; flex-direction:column; gap:0.5rem; padding:1.6rem 0.9rem 1.4rem; border-right:1px solid var(--line); min-height:100%; transition:background-color 0.5s var(--ease); }
.shelfstrip li:last-child .shelfstrip__item{ border-right:0; }
.shelfstrip__art{ display:block; width:100%; aspect-ratio:1; background:var(--rum-ink); -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; opacity:0.82; transition:transform 0.9s var(--ease), opacity 0.5s; margin-bottom:0.6rem; }
.shelfstrip__item .mono{ color:var(--rum-ink); }
.shelfstrip__name{ font-family:var(--serif); font-size:1rem; line-height:1.25; }
.shelfstrip__item:hover{ background:var(--paper-deep); }
.shelfstrip__item:hover .shelfstrip__art{ transform:translateY(-6px); opacity:1; }
@media (max-width:1000px){ .shelfstrip__list{ grid-template-columns:repeat(4,1fr); } .shelfstrip li:nth-child(4) .shelfstrip__item{ border-right:0; } .shelfstrip li:nth-child(n+5) .shelfstrip__item{ border-top:1px solid var(--line); } }
@media (max-width:520px){ .shelfstrip__list{ grid-template-columns:repeat(2,1fr); } .shelfstrip li:nth-child(odd) .shelfstrip__item{ border-right:1px solid var(--line); } .shelfstrip li:nth-child(even) .shelfstrip__item{ border-right:0; } .shelfstrip li:nth-child(n+3) .shelfstrip__item{ border-top:1px solid var(--line); } }

/* ---------- Collection: the bar map ---------- */
.barmap{ padding:2rem 0 clamp(5rem,9vw,8rem); }
.barmap__intro{ margin:clamp(1.6rem,3vw,2.4rem) var(--gutter) 0; max-width:48ch; color:var(--muted); font-size:1.1rem; }
.barmap__grid{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(5rem,12vw) minmax(0,1.15fr); margin:clamp(2.5rem,5vw,4rem) var(--gutter) 0; }
.barmap__shelves, .barmap__serves{ list-style:none; position:relative; z-index:1; }
.barmap__shelves{ grid-column:1; border-top:1px solid var(--ink); }
.barmap__serves{ grid-column:3; display:flex; flex-direction:column; gap:0.8rem; }
.barmap__threads{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:0; }
.barmap__threads path{ fill:none; stroke:var(--rum); stroke-width:1.2; }
.barmap__shelf{ position:relative; display:grid; grid-template-columns:2.8rem 2rem 1fr; align-items:center; gap:0.9rem; padding:0.75rem 1.4rem 0.75rem 0; border-bottom:1px solid var(--line); transition:opacity 0.5s var(--ease); }
.barmap__plate{ display:block; width:2.8rem; aspect-ratio:1; background:var(--rum-ink); -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; opacity:0.55; transition:opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.barmap__shelf .mono{ color:var(--muted); }
.barmap__shelfname{ font-family:var(--serif); font-size:1.15rem; }
.barmap__pin{ position:absolute; width:9px; height:9px; border-radius:50%; border:1px solid var(--rum); background:var(--paper); top:50%; margin-top:-4.5px; transition:background-color 0.4s; }
.barmap__shelf .barmap__pin{ right:-4.5px; }
.barmap__serve .barmap__pin{ left:-4.5px; }
.barmap__serve{
  position:relative; width:100%; display:grid; grid-template-columns:4rem 1fr; grid-template-areas:"art name" "art note" "art from"; gap:0.15rem 1.2rem; align-items:center;
  text-align:left; background:none; border:1px solid var(--line); padding:0.9rem 1.2rem 0.9rem 1.4rem; cursor:pointer; color:var(--ink); font:inherit;
  transition:border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.barmap__art{ grid-area:art; display:block; width:4rem; aspect-ratio:1; background:var(--ink); -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; opacity:0.8; }
.barmap__name{ grid-area:name; font-family:var(--serif); font-size:1.35rem; line-height:1.15; }
.barmap__note{ grid-area:note; color:var(--muted); font-size:0.92rem; }
.barmap__from{ grid-area:from; color:var(--rum-ink); margin-top:0.25rem; }
.barmap__serve:hover, .barmap__serve[aria-pressed="true"]{ border-color:var(--rum); background:color-mix(in oklch, var(--paper-deep) 55%, transparent); }
.barmap__serve[aria-pressed="true"] .barmap__pin{ background:var(--rum); }
.barmap__serve:focus-visible{ outline:2px solid var(--rum-ink); outline-offset:3px; }
.barmap.is-active .barmap__shelf{ opacity:0.32; }
.barmap.is-active .barmap__shelf.is-lit{ opacity:1; }
.barmap__shelf.is-lit .barmap__plate{ opacity:1; transform:scale(1.08); }
.barmap__shelf.is-lit .barmap__pin{ background:var(--rum); }
.barmap__shelf.is-lit .mono{ color:var(--rum-ink); }
@media (max-width:900px){
  .barmap__grid{ grid-template-columns:1fr; }
  .barmap__threads{ display:none; }
  .barmap__shelves{ grid-column:1; display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem; margin-bottom:2rem; }
  .barmap__serves{ grid-column:1; }
  .barmap__shelf{ grid-template-columns:2.2rem 1.8rem 1fr; padding-right:0; }
  .barmap__plate{ width:2.2rem; }
  .barmap__shelfname{ font-size:1rem; }
  .barmap__pin{ display:none; }
}
@media (max-width:480px){ .barmap__shelves{ grid-template-columns:1fr; } }

/* ---------- House: the founding principle, and islands that answer ---------- */
.principle{ padding:clamp(5rem,10vw,8rem) var(--gutter); }
.chart__isle-hit{ fill:transparent; cursor:pointer; }
.chart__isle-g:focus{ outline:none; }
.chart__isle-g:focus-visible .chart__isle, .chart__isle-g:hover .chart__isle{ fill:var(--rum); r:4; }
.chart__isle-g:hover .chart__name, .chart__isle-g:focus-visible .chart__name{ fill:var(--rum-ink); }
.chart__leg{ fill:none; stroke:var(--rum); stroke-width:1.1; stroke-dasharray:3 4; }
.chart__readout{ font:500 11px var(--mono); letter-spacing:0.1em; text-transform:uppercase; fill:var(--rum-ink); }

/* ---------- Partners: the terms, drawn up as you read ---------- */
.terms{ padding:2rem 0 clamp(4rem,8vw,6rem); }
.terms__list{ list-style:none; margin:clamp(2rem,4vw,3rem) var(--gutter) 0; }
.terms__row{ position:relative; display:grid; grid-template-columns:minmax(9rem,16rem) 1fr; gap:1rem clamp(1.5rem,4vw,4rem); padding:clamp(1.4rem,2.6vw,2rem) 0; }
.terms__row::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease) 0.1s; }
.terms__row.in::before, html:not(.js-ready) .terms__row::before{ transform:scaleX(1); }
.terms__row:last-child{ border-bottom:1px solid var(--line); }
.terms__k{ color:var(--rum-ink); padding-top:0.5rem; }
.terms__v{ font-family:var(--serif); font-size:clamp(1.25rem,2vw,1.65rem); line-height:1.4; max-width:44ch; }
.terms__aside{ margin:2.4rem var(--gutter) 0; max-width:56ch; color:var(--muted); }
@media (max-width:640px){ .terms__row{ grid-template-columns:1fr; gap:0.5rem; } }

.briefcard{ display:grid; grid-template-columns:minmax(14rem,22rem) 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; background:var(--paper-deep); padding:clamp(4rem,8vw,6.5rem) var(--gutter); }
.briefcard__sheet{ display:block; perspective:1200px; }
.briefcard__sheet img{ display:block; width:100%; height:auto; background:var(--paper); box-shadow:0 1px 0 var(--line), 0 30px 60px -30px oklch(16% 0.016 250 / 0.45); transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0)); transition:transform 0.8s var(--ease), box-shadow 0.8s var(--ease); }
.briefcard__sheet:hover img{ --ty:-8px; box-shadow:0 1px 0 var(--line), 0 50px 80px -36px oklch(16% 0.016 250 / 0.5); }
.briefcard__sheet:focus-visible{ outline:2px solid var(--rum-ink); outline-offset:6px; }
.briefcard__text{ display:flex; flex-direction:column; gap:1rem; align-items:flex-start; }
.briefcard__text > .mono{ color:var(--rum-ink); }
.briefcard__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,3.6vw,3.2rem); line-height:1.08; letter-spacing:-0.015em; max-width:18ch; }
.briefcard__text p{ color:var(--muted); max-width:44ch; }
.briefcard__links{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; margin-top:0.8rem; }
.briefcard__btn, .account__btn{ display:inline-flex; align-items:center; gap:0.7rem; min-height:48px; padding:0 1.5rem; background:var(--ink); color:var(--paper); transition:background-color 0.4s var(--ease); }
.briefcard__btn:hover, .account__btn:hover{ background:var(--rum-ink); }
.link-quiet{ display:inline-flex; align-items:center; gap:0.5rem; min-height:44px; color:var(--ink); border-bottom:1px solid var(--line); transition:border-color 0.4s var(--ease); }
.link-quiet:hover{ border-color:var(--rum); }
@media (max-width:760px){ .briefcard{ grid-template-columns:1fr; } .briefcard__sheet{ max-width:16rem; } }

.enquire{ padding:2rem 0 clamp(5rem,9vw,8rem); }
.enquire__head{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1.02; letter-spacing:-0.02em; margin:clamp(2.4rem,5vw,4rem) var(--gutter) clamp(2rem,4vw,3rem); }
.enquire__head .line{ display:block; overflow:hidden; }
.enquire__head .line > span{ display:inline-block; }
.enquiry--open{ border:0; padding:0 var(--gutter); }

/* ---------- Venues: the next run, live ---------- */
.runs{ background:var(--ink); color:var(--paper); padding:2rem 0 clamp(4rem,8vw,6.5rem); }
.runs__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:center; margin:clamp(2.4rem,5vw,4rem) var(--gutter) 0; }
.runs__ask{ color:var(--muted-dark); margin-bottom:1rem; }
.runs__isles{ list-style:none; display:flex; flex-wrap:wrap; gap:0.6rem; margin-bottom:clamp(2rem,4vw,3rem); }
.runs__isle{ min-height:44px; padding:0 1rem; background:none; border:1px solid var(--line-dark); color:var(--muted-dark); font-family:var(--serif); font-size:1rem; cursor:pointer; transition:border-color 0.4s var(--ease), color 0.4s var(--ease), background-color 0.4s var(--ease); }
.runs__isle:hover{ border-color:var(--rum-bright); color:var(--paper); }
.runs__isle[aria-pressed="true"]{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.runs__isle:focus-visible{ outline:2px solid var(--rum-bright); outline-offset:3px; }
.runs__answer{ border-top:1px solid var(--line-dark); padding-top:1.6rem; min-height:11rem; }
.runs__zone{ color:var(--muted-dark); }
.runs__date{ font-family:var(--serif); font-size:clamp(2.2rem,4.4vw,3.8rem); line-height:1.05; letter-spacing:-0.015em; color:var(--paper); margin:0.6rem 0 0.8rem; }
.runs__by{ color:var(--rum-bright); }
.runs__chart{ margin:0; }
.runs__svg{ width:100%; height:auto; display:block; }
.runs__chart .chart__grid{ stroke:var(--line-dark); }
.runs__chart .chart__deg, .runs__chart .chart__sound{ fill:var(--muted-dark); }
.runs__chart .chart__name{ fill:var(--muted-dark); }
.runs__chart .chart__isle{ fill:var(--muted-dark); }
.runs__chart .chart__name--port{ fill:var(--paper); }
.runs__chart .chart__port, .runs__chart .chart__port-ring{ stroke:var(--rum-bright); }
.runs__chart .chart__port{ fill:var(--rum-bright); }
.runs__chart .chart__route{ display:none; }
.runs__route{ fill:none; stroke:var(--rum-bright); stroke-width:1.4; stroke-dasharray:1; stroke-dashoffset:1; }
.runs__route.is-drawn{ animation:leg-draw 1.6s var(--ease) forwards; }
.runs__dest{ fill:var(--rum-bright); opacity:0; transition:opacity 0.4s 1.2s; }
.runs__dest.is-on{ opacity:1; }
.runs__chart figcaption{ color:var(--muted-dark); margin-top:0.6rem; }
@media (max-width:900px){ .runs__grid{ grid-template-columns:1fr; } }

.venuefaq{ padding:2rem 0 clamp(5rem,9vw,8rem); }
.venuefaq__grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,6vw,7rem); margin:clamp(2.5rem,5vw,4rem) var(--gutter) 0; align-items:start; }
.venuefaq__aside{ position:sticky; top:7rem; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.venuefaq__head{ font-family:var(--serif); font-weight:400; font-size:clamp(2.6rem,5vw,4.4rem); line-height:1; letter-spacing:-0.02em; }
.venuefaq__head .line{ display:block; overflow:hidden; padding-bottom:0.06em; }
.venuefaq__head .line > span{ display:inline-block; }
.venuefaq__head em{ font-style:normal; color:var(--rum-ink); }
.venuefaq__lede{ color:var(--muted); max-width:34ch; font-size:1.05rem; line-height:1.65; }
.venuefaq__list{ counter-reset:q; border-top:1px solid var(--ink); }
.venuefaq .qa{ counter-increment:q; position:relative; border-bottom:1px solid var(--line); }
.venuefaq .qa summary{ display:grid; grid-template-columns:3rem 1fr auto; align-items:baseline; gap:1rem; padding:1.7rem 0; cursor:pointer; list-style:none; color:var(--ink); font-family:var(--serif); font-size:clamp(1.3rem,2vw,1.7rem); line-height:1.25; transition:color 0.4s var(--ease); }
.venuefaq .qa summary::before{ content:counter(q, decimal-leading-zero); font:500 0.75rem var(--mono); letter-spacing:0.12em; color:var(--muted); transform:translateY(-0.2em); transition:color 0.4s var(--ease); }
.venuefaq .qa summary:hover{ color:var(--rum-ink); }
.venuefaq .qa[open] summary::before{ color:var(--rum-ink); }
.venuefaq .qa::after{ content:""; position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--rum); transform:scaleX(0); transform-origin:left; transition:transform 0.9s var(--ease); }
.venuefaq .qa[open]::after{ transform:scaleX(1); }
.venuefaq .qa p{ margin:-0.4rem 0 0 4rem; padding-bottom:1.9rem; max-width:52ch; color:var(--ink); opacity:0.82; font-family:var(--serif); font-size:clamp(1.05rem,1.3vw,1.18rem); line-height:1.6; }
.venuefaq .qa__sign::before, .venuefaq .qa__sign::after{ background:var(--rum-ink); }
@media (max-width:900px){
  .venuefaq__grid{ grid-template-columns:1fr; }
  .venuefaq__aside{ position:static; }
  .venuefaq .qa summary{ grid-template-columns:2.4rem 1fr auto; }
  .venuefaq .qa p{ margin-left:3.4rem; }
}


/* Reduced motion: every drawn line arrives already drawn */
@media (prefers-reduced-motion: reduce){
  .leg__route path, .nextleg__route path, .path__route path, .barmap__threads path, .runs__route{ animation:none !important; stroke-dashoffset:0 !important; }
  .terms__row::before{ transform:scaleX(1); transition:none; }
  .venuefaq .qa::after{ transition:none; }
}

/* ---------- The spread: a heading that holds the left while the content runs right ---------- */
.spread{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(2.5rem,6vw,7rem); margin:clamp(2.5rem,5vw,4rem) var(--gutter) 0; align-items:start; }
.spread__aside{ position:sticky; top:7rem; display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.spread__head{ font-family:var(--serif); font-weight:400; font-size:clamp(2.4rem,4.2vw,3.8rem); line-height:1; letter-spacing:-0.02em; }
.spread__head .line{ display:block; overflow:hidden; padding-bottom:0.06em; }
.spread__head .line > span{ display:inline-block; }
.spread__head em{ font-style:normal; color:var(--rum-ink); }
.spread__lede{ color:var(--muted); max-width:34ch; font-size:1.05rem; line-height:1.65; }
.spread .enquiry--open{ padding:0; }
.spread .enquiry__form{ margin:0; max-width:none; }
@media (max-width:900px){ .spread{ grid-template-columns:1fr; } .spread__aside{ position:static; } }

/* For stockists: five promises with the numbers set large */
.promise{ padding:2rem 0 clamp(5rem,9vw,7rem); }
.promise__list{ list-style:none; border-top:1px solid var(--ink); }
.promise__row{ display:grid; grid-template-columns:clamp(4rem,7vw,6rem) 1fr; align-items:baseline; gap:1rem; padding:1.5rem 0 1.6rem; border-bottom:1px solid var(--line); }
.promise__n{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); line-height:1; color:var(--rum); letter-spacing:-0.02em; }
.promise__t{ font-family:var(--serif); font-size:clamp(1.3rem,2.1vw,1.75rem); line-height:1.3; }

/* The trade account: a dark band with the three real steps beside the crate */
.account{ background:var(--ink); color:var(--paper); padding:clamp(5rem,9vw,8rem) var(--gutter); }
.account__grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(3rem,7vw,7rem); align-items:center; }
.account__main{ display:flex; flex-direction:column; align-items:flex-start; }
.account__kick{ color:var(--rum-bright); }
.account__head{ font-family:var(--serif); font-weight:400; font-size:clamp(3rem,6.4vw,5.6rem); line-height:0.98; letter-spacing:-0.025em; margin:1.2rem 0 1.4rem; }
.account__head .line{ display:block; overflow:hidden; padding-bottom:0.06em; }
.account__head .line > span{ display:inline-block; }
.account__head em{ font-style:normal; color:var(--rum-bright); }
.account__lede{ color:var(--muted-dark); max-width:42ch; font-size:1.08rem; line-height:1.65; margin-bottom:2rem; }
.account__links{ display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; }
.account__btn{ background:var(--paper); color:var(--ink); }
.account__btn:hover{ background:var(--rum-bright); }
.link-quiet--dark{ color:var(--paper); border-color:var(--line-dark); }
.link-quiet--dark:hover{ border-color:var(--rum-bright); }
.account__note{ margin-top:2rem; color:var(--muted-dark); }
.account__note a{ color:var(--paper); border-bottom:1px solid var(--line-dark); }
.account__card{ position:relative; border:1px solid var(--line-dark); padding:clamp(2rem,4vw,3rem); padding-top:clamp(8rem,12vw,10rem); overflow:hidden; }
.account__card::before{ content:"How it works"; position:absolute; top:clamp(2rem,4vw,3rem); left:clamp(2rem,4vw,3rem); font:500 0.75rem var(--mono); letter-spacing:0.12em; text-transform:uppercase; color:var(--muted-dark); }
.account__plate{ position:absolute; top:clamp(1.4rem,3vw,2.2rem); right:clamp(1.4rem,3vw,2.2rem); width:clamp(6rem,9vw,8rem); aspect-ratio:1; background:var(--rum-bright); opacity:0.7; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; }
.account__steps{ list-style:none; position:relative; }
.account__steps li{ display:grid; grid-template-columns:2.6rem 1fr; gap:1rem; padding:1.1rem 0; border-top:1px solid var(--line-dark); font-family:var(--serif); font-size:clamp(1.15rem,1.6vw,1.35rem); line-height:1.4; }
.account__steps .mono{ color:var(--rum-bright); padding-top:0.3rem; }
@media (max-width:900px){ .account__grid{ grid-template-columns:1fr; } }

/* Each leg's own engraving, drawn large and quiet on the right of its opening */
.leg__plate{ position:absolute; right:clamp(1rem,6vw,7rem); top:clamp(8rem,13vw,10rem); width:clamp(14rem,30vw,26rem); aspect-ratio:1; background:var(--rum-ink); opacity:0.16; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; animation:ink 1.6s var(--ease) 0.2s both; pointer-events:none; }
@keyframes ink{ from{ clip-path:inset(0 0 100% 0); } to{ clip-path:inset(0 0 0 0); } }
@media (max-width:760px){ .leg__plate{ width:10rem; top:auto; bottom:2rem; right:1rem; opacity:0.12; } }
@media (prefers-reduced-motion: reduce){ .leg__plate{ animation:none; } }

/* ---------- The engraved chart: ink drawn as a mask, routes on a layer in its own pixel space ---------- */
.ec{ margin:0; }
.ec__frame{ position:relative; aspect-ratio:1400 / 793; }
.ec__ink{ position:absolute; inset:0; background:var(--ink); opacity:0.9; -webkit-mask:var(--plate) center / 100% 100% no-repeat; mask:var(--plate) center / 100% 100% no-repeat; }
.ec__layer{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.ec__hit{ fill:transparent; cursor:pointer; }
.ec__dot{ fill:transparent; stroke:transparent; transition:fill 0.3s, stroke 0.3s; }
.ec__isle:hover .ec__dot, .ec__isle:focus-visible .ec__dot, .ec__isle.is-on .ec__dot{ fill:var(--rum); }
.ec__isle:focus{ outline:none; }
.ec__isle:focus-visible .ec__hit{ stroke:var(--rum-ink); stroke-width:2; }
.ec__leg{ fill:none; stroke:var(--rum); stroke-width:2.4; stroke-dasharray:6 8; stroke-linecap:round; }
.ec__port circle{ fill:var(--rum); }
.ec__port .ec__port-ring{ fill:none; stroke:var(--rum); stroke-width:2; }
.ec figcaption{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:0.9rem; color:var(--muted); }
.ec__readout{ color:var(--rum-ink); min-height:1.2em; }
.ec--dark .ec__ink{ background:var(--paper); opacity:0.72; }
.ec--dark figcaption{ color:var(--muted-dark); }
.ec--dark .ec__readout{ color:var(--rum-bright); }
.ec--dark .ec__leg, .ec--dark .ec__port .ec__port-ring{ stroke:var(--rum-bright); }
.ec--dark .ec__port circle:not(.ec__port-ring), .ec--dark .ec__isle.is-on .ec__dot{ fill:var(--rum-bright); }
.islands .ec{ margin-top:2.4rem; }
.runs__grid{ grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr); }

/* Nassau inset in the stockists spread */
.inset{ margin:1.2rem 0 0; width:min(100%,19rem); }
.inset__ink{ display:block; aspect-ratio:1088 / 1440; background:var(--ink); opacity:0.78; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; }
.inset figcaption{ color:var(--muted); margin-top:0.6rem; }
@media (max-width:900px){ .inset{ display:none; } }

/* The back bar: a full-width engraving opening the Collection */
.backbar{ margin:0 var(--gutter) clamp(3rem,6vw,5rem); }
.backbar__ink{ display:block; aspect-ratio:1504 / 704; background:var(--ink); opacity:0.88; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; animation:ink 1.8s var(--ease) 0.3s both; }
.backbar figcaption{ display:flex; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:0.9rem; border-top:1px solid var(--line); color:var(--muted); }
@media (prefers-reduced-motion: reduce){ .backbar__ink{ animation:none; } }

/* The lounge on the account card: a scene, not a stamp */
.account__card{ padding-top:clamp(2rem,4vw,3rem); }
.account__card::before{ content:none; }
.account__plate{ position:relative; display:block; top:auto; right:auto; width:100%; aspect-ratio:1; max-height:18rem; opacity:0.62; background:var(--paper); margin-bottom:1.6rem; }

/* The decanter beside the founding principle */
.principle{ display:grid; grid-template-columns:minmax(10rem,18rem) 1fr; gap:clamp(2rem,6vw,6rem); align-items:center; }
.principle__art{ display:block; aspect-ratio:768 / 864; background:var(--ink); opacity:0.85; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; }
.principle .method__quote, .principle .method__cite{ text-align:left; margin-left:0; }
@media (max-width:760px){ .principle{ grid-template-columns:1fr; } .principle__art{ width:11rem; } }
.islands__chartrow{ grid-column:1 / -1; margin-top:clamp(2.5rem,5vw,4rem); }
.islands .ec{ margin-top:0; }
.principle .method__quote .line{ display:inline; }
.principle .method__quote .line > span{ display:inline; }
.principle .method__quote{ font-size:clamp(1.9rem,3.6vw,3.2rem); max-width:22ch; }
.principle .method__cite{ white-space:nowrap; display:inline-flex; margin-top:1.6rem; }
.principle .method__cite{ grid-column:2; justify-self:start; margin-top:-1rem; }
.principle__art{ grid-row:1 / span 2; }
.principle .method__quote{ font-size:clamp(2.2rem,4.4vw,3.8rem); max-width:20ch; }
@media (max-width:760px){ .principle .method__cite{ grid-column:1; margin-top:0; } .principle__art{ grid-row:auto; } }

/* Venue types on House: each with its own engraving */
.islands__list li{ grid-template-columns:auto 1fr clamp(5rem,9vw,7.5rem) !important; }
.islands__art{ display:block; width:clamp(5rem,9vw,7.5rem); aspect-ratio:1; background:var(--ink); opacity:0.82; -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat; align-self:center; transition:opacity 0.5s var(--ease), transform 0.8s var(--ease); }
.islands__list li:hover .islands__art{ opacity:1; transform:translateY(-4px); }

/* The Passage, drawn on Chart No. 1: the old sketch layers give way to the engraving */
.passage__chart .pe{ opacity:0.62; }
.passage__chart .pg, .passage__chart .pc, .passage__chart .ps, .passage__chart .pi{ display:none; }
.passage__chart .pr, .passage__chart .pr-shadow{ stroke-width:2.6; }
.passage__chart .pp text{ display:none; }
/* Passage text reads off the chart through a soft vignette, not boxes */
.passage__copy, .passage__log{ background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.passage__stage::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(60% 45% at 18% 88%, color-mix(in oklch, var(--paper) 92%, transparent) 0%, transparent 70%),
             radial-gradient(35% 30% at 88% 90%, color-mix(in oklch, var(--paper) 90%, transparent) 0%, transparent 70%),
             linear-gradient(180deg, color-mix(in oklch, var(--paper) 80%, transparent) 0%, transparent 14%); }
.passage__top, .passage__copy, .passage__log{ z-index:1; }
/* Maker's mark in the footer credit */
.foot__credit{ display:flex; align-items:center; justify-content:center; gap:0.7rem; }
.foot__pine{ width:1.1rem; height:1.4rem; background:var(--rum-bright); opacity:0.8; -webkit-mask:url(/assets/plates/pineapple-mark.webp) center / contain no-repeat; mask:url(/assets/plates/pineapple-mark.webp) center / contain no-repeat; transition:opacity 0.4s, transform 0.6s var(--ease); }
.foot__credit:hover .foot__pine{ opacity:1; transform:translateY(-2px) rotate(-6deg); }
.foot__pine{ width:1.5rem; height:1.9rem; background:var(--rum-bright); opacity:1; }
.foot__meta{ align-items:center; }
@media (max-width:1000px){ .nextleg__route{ display:none; } }

/* Header: once the opening scrolls away, it sits on a quiet frosted band so nothing reads through it */
.nav{ transition:background-color 0.5s var(--ease), padding 0.5s var(--ease), box-shadow 0.5s var(--ease); }
.nav.is-stuck{ mix-blend-mode:normal; color:var(--ink); background:color-mix(in oklch, var(--paper) 86%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); box-shadow:0 1px 0 var(--line); padding-top:0.7rem; padding-bottom:0.7rem; }
.nav.is-stuck .nav__login{ border-color:currentColor; }
.menu-open .nav.is-stuck{ background:transparent; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; mix-blend-mode:difference; color:var(--paper); }
.nav.is-stuck.is-dark{ color:var(--paper); background:color-mix(in oklch, var(--ink) 84%, transparent); box-shadow:0 1px 0 var(--line-dark); }
.foot__pine{ width:2.1rem; height:2.7rem; }
.foot__credit{ justify-content:flex-end; text-align:right; }