/* ============================================================
   Distant Shore Trading Co. main.css
   Editorial index layout. Erode display, Author body.
   ============================================================ */

:root{
  --paper: oklch(96.5% 0.012 85);
  --paper-deep: oklch(93% 0.018 83);
  --ink: oklch(16% 0.016 250);
  --ink-2: oklch(21% 0.018 250);
  --muted: oklch(41% 0.02 250);
  --muted-dark: oklch(64% 0.018 250);
  --rum: oklch(62% 0.13 55);
  --rum-bright: oklch(72% 0.14 60);
  --rum-ink: oklch(50% 0.12 50);
  --line: oklch(83% 0.018 85);
  --line-dark: oklch(30% 0.02 250);

  --serif: "Erode", Georgia, serif;
  --sans: "Author", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nassau light: the paper follows the time of day in Nassau.
   Set by main.js as html[data-light]; default is day. */
html[data-light="dawn"]{ --paper: oklch(96.4% 0.012 60); --paper-deep: oklch(93% 0.017 62); }
html[data-light="dusk"]{ --paper: oklch(95.6% 0.022 72); --paper-deep: oklch(92.2% 0.028 70); --line: oklch(82% 0.026 75); }
html[data-light="night"]{ --paper: oklch(93.2% 0.012 88); --paper-deep: oklch(90% 0.016 86); --line: oklch(80% 0.016 86); }
body, .islands, .letter, .preloader{ transition:background-color 2.4s var(--ease); }
.hero__clock{ color:var(--ink); margin-left:0.6em; }

/* Hex fallbacks for browsers without OKLCH (iOS before 15.4) */
@supports not (color: oklch(0% 0 0)){ :root{ --paper:#f7f3eb; --paper-deep:#eee7db; --ink:#080e14; --ink-2:#121920; --muted:#424b55; --muted-dark:#848d97; --rum:#c16e2d; --rum-bright:#e38d3d; --rum-ink:#9a531f; --line:#cdc7ba; --line-dark:#262f38; } }

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

/* Skip link */
.skip-link{
  position:fixed; top:1rem; left:1rem; z-index:10000;
  background:var(--ink); color:var(--paper);
  padding:0.6rem 1.2rem; border-radius:2px;
  transform:translateY(calc(-100% - 2rem));
  transition:transform 0.3s var(--ease);
}
.skip-link:focus-visible{ transform:translateY(0); }

/* Focus styles */
:focus-visible{
  outline:2px solid var(--rum);
  outline-offset:3px;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  font-size:1.02rem;
  line-height:1.65;
  overflow-x:hidden;
}

.mono{ font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:0.12em; font-size:0.72rem; }
a{ color:inherit; text-decoration:none; }
em, i{ font-style:normal; }


/* ---------- Preloader ---------- */
.preloader{
  position:fixed; inset:0; z-index:1000;
  background:var(--paper); color:var(--ink);
  display:grid; place-items:center;
}
.preloader__mark{ width:clamp(64px, 9vw, 112px); height:auto; overflow:visible; }
.preloader__mark path{
  fill:var(--ink); fill-opacity:0;
  stroke:var(--rum); stroke-width:6;
  stroke-dasharray:var(--len, 1); stroke-dashoffset:var(--len, 1);
}
.preloader__coord{
  position:absolute; left:50%; bottom:var(--gutter); transform:translateX(-50%);
  color:var(--muted); white-space:nowrap; opacity:0;
}

/* ---------- Nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.3rem var(--gutter);
  mix-blend-mode:difference; color:var(--paper);
}
.nav__brand{ display:inline-flex; align-items:center; gap:0.7rem; font-family:var(--serif); font-weight:500; font-size:1.05rem; letter-spacing:0.01em; white-space:nowrap; }
.nav__mark{ width:15px; height:auto; fill:currentColor; flex:none; }
.nav__links{ display:flex; gap:1.9rem; }
.nav__links a{ position:relative; padding:0.2rem 0; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform 0.6s var(--ease);
}
.nav__links a:hover::after, .nav__links a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
/* Trade login: a hairline pill with a waypoint ring, inverted by the nav's difference blend */
.nav__end{ display:flex; align-items:center; gap:1.6rem; }
.nav__login{
  display:inline-flex; align-items:center; gap:0.6rem; white-space:nowrap;
  padding:0.55rem 0.95rem 0.55rem 0.8rem; border:1px solid currentColor; border-radius:999px;
  transition:background-color 0.5s var(--ease), color 0.5s var(--ease);
}
.nav__login-ring{ width:8px; height:8px; border:1px solid currentColor; border-radius:50%; flex:none; transition:background-color 0.4s var(--ease); }
.nav__login-arrow{ width:14px; height:8px; fill:none; stroke:currentColor; stroke-width:1.2; transition:transform 0.5s var(--ease); }
.nav__login:hover .nav__login-ring, .nav__login:focus-visible .nav__login-ring{ background:currentColor; }
.nav__login:hover .nav__login-arrow, .nav__login:focus-visible .nav__login-arrow{ transform:translateX(3px); }
@media(max-width:430px){ .nav__menu-label{ display:none; } }
@media(max-width:520px){ .nav__login-more, .nav__login-arrow{ display:none; } .nav__login{ padding:0.45rem 0.75rem 0.45rem 0.65rem; } .nav__end{ gap:1.1rem; } }
.nav__menu-btn{
  background:none; border:none; color:inherit; cursor:pointer;
  display:none; align-items:center; gap:0.7rem; padding:0;
}
.nav__menu-icon{ width:22px; height:12px; display:flex; flex-direction:column; justify-content:space-between; }
.nav__menu-icon span{
  display:block; height:1px; background:currentColor;
  transform-origin:center; transition:transform 0.5s var(--ease);
}
.menu-open .nav__menu-icon span:first-child{ transform:translateY(5.5px) rotate(45deg); }
.menu-open .nav__menu-icon span:last-child{ transform:translateY(-5.5px) rotate(-45deg); }
@media(max-width:960px){
  .nav__links{ display:none; }
  .nav__menu-btn{ display:flex; }
}

/* ---------- Menu overlay ---------- */
.menu-overlay{
  position:fixed; inset:0; z-index:200;
  background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column;
  padding:6.5rem var(--gutter) 3rem;
  pointer-events:none;
  clip-path:polygon(0 0, 100% 0, 100% 0%, 0 0%);
  transition:clip-path 0.85s var(--ease);
}
.menu-overlay.open{ pointer-events:auto; clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.menu-overlay__inner{ display:flex; flex-direction:column; justify-content:space-between; flex:1; }
.menu-overlay__links{ display:flex; flex-direction:column; border-top:1px solid var(--line-dark); }
.menu-overlay__link{
  display:flex; align-items:baseline; gap:1.2rem;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 7vw, 5.5rem); line-height:1.15;
  color:var(--muted-dark);
  padding:0.4rem 0; border-bottom:1px solid var(--line-dark);
  transition:color 0.4s var(--ease);
}
.menu-overlay__link:hover{ color:var(--paper); }
.menu-overlay:not(.open) .menu-overlay__link{ opacity:0; }
.menu-overlay__foot{
  display:flex; justify-content:space-between; align-items:flex-end;
  flex-wrap:wrap; gap:1rem; padding-top:2rem; border-top:1px solid var(--line-dark);
}
.menu-overlay__email{ font-family:var(--serif); font-size:clamp(1rem,2.2vw,1.4rem); color:var(--muted-dark); transition:color 0.4s; }
.menu-overlay__email:hover{ color:var(--paper); }
.menu-overlay__loc{ color:var(--muted-dark); }
.menu-overlay__trade{ color:var(--rum-bright); transition:color 0.4s; }
.menu-overlay__trade:hover{ color:var(--paper); }

/* ---------- Section header device ---------- */
.sec-head{
  display:flex; align-items:baseline; gap:1.3rem;
  padding:1.6rem var(--gutter) 0;
}
.sec-head__name{ color:var(--ink); display:inline-flex; align-items:center; gap:0.75rem; }
.sec-head__name::before{ content:""; width:7px; height:7px; border-radius:50%; border:1px solid var(--rum); flex:none; }
.sec-head--dark .sec-head__name::before{ border-color:var(--rum-bright); }
.sec-head__rule{ flex:1; height:1px; background:var(--line); align-self:center; }
.sec-head__note{ color:var(--muted); }
.sec-head--dark .sec-head__name{ color:var(--paper); }
.sec-head--dark .sec-head__note{ color:var(--muted-dark); }
.sec-head--dark .sec-head__rule{ background:var(--line-dark); }

/* The mask is padded below so descenders (g, p, y) are not clipped; the
   negative margin keeps line spacing unchanged. */
.line{ display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em; }
.line > span{ display:block; }
html.js-ready .line > span{ transform:translateY(120%); }

/* ---------- HERO ---------- */
.hero{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding:5.4rem var(--gutter) 3rem;
}
.hero__rule-top{ height:1px; background:var(--line); margin-bottom:1.1rem; }
.hero__meta{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.8rem 2rem;
  color:var(--muted);
}
.hero__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 7.6vw, 7.6rem);
  line-height:1.02; letter-spacing:-0.02em;
  margin:auto 0 3rem;
  padding-top:4rem;
}
.hero__title{ font-size:clamp(2.7rem, 8.2vw, 8.6rem); line-height:0.98; letter-spacing:-0.03em; padding-top:2rem; }
.hero__row{ white-space:nowrap; }
.hero__row--in{ padding-left:clamp(1.5rem, 14vw, 16rem); }
.hero__row--far{ padding-left:clamp(0.5rem, 5vw, 6rem); }
.hero__row em{ color:var(--rum); }
@media(max-width:720px){ .hero__row{ white-space:normal; } .hero__row--in,.hero__row--far{ padding-left:0; } }
.hero__lower{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(2rem, 5vw, 6rem);
  align-items:end;
}
.hero{ position:relative; isolation:isolate; }
.hero__chart{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0; transition:opacity 2s var(--ease); }
.hero__chart.on{ opacity:1; }
.hero__route{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:visible; }
@media(max-width:860px){ .hero__route{ display:none; } }
.hero__route path{ fill:none; stroke:var(--rum); stroke-width:0.9; stroke-dasharray:var(--len, 1); stroke-dashoffset:0; }
html.js-ready .hero__route path{ stroke-dashoffset:var(--len, 1); }
.hero__route-end{ fill:var(--rum); }
html.js-ready .hero__route-end{ opacity:0; }
.hero__log{ display:flex; flex-wrap:wrap; gap:1.2rem clamp(1.5rem,4vw,3.5rem); align-self:end; padding-bottom:0.4rem; }
.hero__log dt{ color:var(--muted); margin-bottom:0.35rem; }
.hero__log dd{ color:var(--ink); }

/* Course rail: wide screens only, blends like the nav over dark bands */
.rail{
  position:fixed; z-index:250; left:calc(var(--gutter) * 0.42); top:22vh; bottom:22vh;
  display:none; mix-blend-mode:difference; color:var(--paper); pointer-events:none;
}
.rail__track{ position:absolute; left:0; top:0; bottom:0; width:1px; background:repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 7px); opacity:0.35; }
.rail__fill{ position:absolute; left:0; top:0; width:1px; height:100%; background:currentColor; transform-origin:top; transform:scaleY(0); opacity:1; }
.rail__log{
  position:absolute; left:50%; top:calc(100% + 1rem); transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl; white-space:nowrap; font-size:0.62rem; opacity:0.75;
}
@media(min-width:1180px){ .rail{ display:block; } }
.hero__aside{ display:flex; flex-direction:column; gap:1.8rem; padding-bottom:0.4rem; }
.hero__lede{ color:var(--muted); max-width:44ch; }
.hero__cue{ color:var(--ink); display:inline-flex; gap:0.6rem; align-items:center; }
.hero__cue span{ transition:transform 0.4s var(--ease); }
.hero__cue:hover span{ transform:translateY(4px); }
@media(max-width:860px){
  .hero__lower{ grid-template-columns:1fr; }
  .hero__title{ padding-top:6rem; }
}

/* ---------- I. THE HOUSE ---------- */
.house{ padding-bottom:7rem; }
.house__body{
  display:grid; grid-template-columns:1.25fr 0.75fr;
  gap:3rem clamp(2rem,5vw,6rem);
  padding:4rem var(--gutter) 0;
  align-items:start;
}
.house__statement{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 3.4vw, 3.2rem);
  line-height:1.12; letter-spacing:-0.015em;
}
.house__cols p{ color:var(--muted); max-width:48ch; }
.house__cols p + p{ margin-top:1.2rem; }
.house__facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  margin:4.5rem var(--gutter) 0;
  border-top:1px solid var(--line);
}
.fact{ padding:1.8rem 2rem 0 0; }
.fact + .fact{ padding-left:2rem; border-left:1px solid var(--line); }
.fact dt{ color:var(--rum-ink); margin-bottom:0.8rem; }
.fact dd{ color:var(--muted); font-size:0.95rem; max-width:36ch; }
@media(max-width:860px){
  .house__body{ grid-template-columns:1fr; }
  .house__facts{ grid-template-columns:1fr; gap:1.6rem; }
  .fact + .fact{ padding-left:0; border-left:none; border-top:1px solid var(--line); padding-top:1.6rem; }
}

/* ---------- III. THE COLLECTION, dark ---------- */
.index{ background:var(--ink); color:var(--paper); padding:2rem 0 6.5rem; }
.index__intro{
  color:var(--muted-dark); max-width:58ch;
  padding:3rem var(--gutter) 3.5rem;
}
.index__list{ list-style:none; border-top:1px solid var(--line-dark); }
.row{
  position:relative;
  display:grid; grid-template-columns:minmax(90px,140px) 1fr minmax(0,34ch) clamp(96px, 10vw, 150px);
  gap:1rem clamp(1.5rem,3vw,3rem); align-items:center;
  padding:2.2rem var(--gutter);
  border-bottom:1px solid var(--line-dark);
}
.row__num{ color:var(--rum-bright); }
.row__title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.9rem, 4.6vw, 4.2rem); line-height:1; letter-spacing:-0.02em;
  transition:transform 0.8s var(--ease), color 0.5s var(--ease);
}
.row__note{ color:var(--muted-dark); font-size:0.93rem; }
.row__art{
  width:clamp(96px, 10vw, 150px); aspect-ratio:1; justify-self:end;
  background:var(--rum-bright);
  -webkit-mask:var(--plate) center / contain no-repeat; mask:var(--plate) center / contain no-repeat;
  opacity:0.8; transition:opacity 0.8s var(--ease), transform 1.2s var(--ease), clip-path 1.8s var(--ease);
}
html.js-ready .row__art{ clip-path:inset(0 0 100% 0); }
html.js-ready .row.in .row__art{ clip-path:inset(0 0 0 0); }
.row:hover .row__art{ opacity:1; transform:translateY(-4px) scale(1.04); }
@media(max-width:860px){
  .row{ grid-template-columns:1fr auto; gap:0.6rem 1rem; }
  .row__num{ grid-column:1 / -1; }
  .row__art{ grid-row:2 / 4; grid-column:2; }
  .row__note{ grid-column:1; }
}

/* ---------- II. THE ISLANDS ---------- */
.islands{ background:var(--paper-deep); padding-bottom:7rem; }
.islands__body{
  display:grid; grid-template-columns:0.8fr 1.2fr;
  gap:3rem clamp(2rem,6vw,8rem);
  padding:4rem var(--gutter) 0; align-items:start;
}
.islands__lede{ color:var(--muted); max-width:44ch; font-size:1.08rem; }
.islands__list{ list-style:none; border-top:1px solid var(--line); }
.islands__list li{
  display:flex; align-items:baseline; gap:1.4rem;
  font-family:var(--serif); font-size:clamp(1.6rem, 3.6vw, 3.1rem); line-height:1.1; letter-spacing:-0.015em;
  padding:1.1rem 0; border-bottom:1px solid var(--line);
}
.islands__list .mono{ color:var(--rum-ink); flex:none; width:2.4rem; }
.islands__item{ display:flex; flex-direction:column; gap:0.45rem; }
.islands__note{ font-family:var(--sans); font-size:0.95rem; line-height:1.55; letter-spacing:0; color:var(--muted); max-width:44ch; }
.islands__source{ color:var(--muted); margin-top:1rem; font-size:0.66rem; }
.islands__left{ display:flex; flex-direction:column; gap:3rem; }
.islands__chart{ max-width:520px; }
.islands__chart svg{ width:100%; height:auto; display:block; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.islands__chart figcaption{ color:var(--muted); margin-top:0.9rem; }
.chart__grid{ stroke:var(--line); stroke-width:0.6; }
.chart__deg{ font:500 7px var(--mono); letter-spacing:0.1em; fill:var(--muted); opacity:0.8; }
.chart__sound{ font:400 6.5px var(--mono); fill:var(--muted); opacity:0.45; }
.chart__isle{ fill:var(--ink); }
.chart__name{ font:500 7.5px var(--mono); letter-spacing:0.12em; text-transform:uppercase; fill:var(--ink); }
.chart__name--port{ fill:var(--rum); font-size:8.5px; }
.chart__port{ fill:var(--rum); }
.chart__port-ring{ fill:none; stroke:var(--rum); stroke-width:0.8; }
.chart__route{ fill:none; stroke:var(--rum); stroke-width:1; stroke-dasharray:var(--len, 1); stroke-dashoffset:0; }
html.js-ready .islands__chart .chart__route{ stroke-dashoffset:var(--len, 1); transition:stroke-dashoffset 2.6s cubic-bezier(.65,0,.35,1) 0.4s; }
html.js-ready .islands__chart.in .chart__route{ stroke-dashoffset:0; }
@media(max-width:860px){ .islands__body{ grid-template-columns:1fr; } }

/* ---------- IV. THE METHOD ---------- */
/* ---------- The Serve: five classics in a row, glasses drawn in ink ---------- */
.serves{ padding:2rem 0 5rem; }
.serves__intro{ color:var(--muted); max-width:58ch; padding:3rem var(--gutter) 1rem; }
.serves__list{ list-style:none; display:grid; grid-template-columns:repeat(5,1fr); margin:2.5rem var(--gutter) 0; border-top:1px solid var(--line); }
.serve{ display:flex; flex-direction:column; gap:0.7rem; padding:2.4rem clamp(0.8rem,1.6vw,1.6rem) 0; }
.serve + .serve{ border-left:1px solid var(--line); }
.serve__art{
  width:100%; aspect-ratio:4 / 5; margin-bottom:1rem; background:var(--ink); opacity:0.88;
  -webkit-mask:var(--plate) center bottom / contain no-repeat; mask:var(--plate) center bottom / contain no-repeat;
  transition:transform 1.2s var(--ease), opacity 0.8s var(--ease), clip-path 1.8s var(--ease);
}
html.js-ready .serve__art{ clip-path:inset(100% 0 0 0); }
html.js-ready .serve.in .serve__art{ clip-path:inset(0 0 0 0); }
.serve:hover .serve__art{ transform:translateY(-6px); opacity:1; }
.serve__name{ font-family:var(--serif); font-weight:400; font-size:clamp(1.35rem, 1.9vw, 1.75rem); line-height:1.1; }
.serve__note{ color:var(--muted); font-size:0.92rem; max-width:26ch; }
.serve__from{ color:var(--rum-ink); }
@media(max-width:960px){
  .serves__list{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin-right:0; padding-right:var(--gutter); scrollbar-width:none; }
  .serves__list::-webkit-scrollbar{ display:none; }
  .serve{ flex:0 0 min(62vw, 260px); scroll-snap-align:start; }
  .serve:first-child{ padding-left:0; }
}
@media(max-width:640px){ .serves .sec-head__note{ display:none; } }
@media (prefers-reduced-motion: reduce){ html.js-ready .serve__art{ clip-path:none; } .serve__art{ transition:none; } }

.method{ padding-bottom:7rem; }
.method__list{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin:4rem var(--gutter) 0; position:relative;
  border-top:1px solid var(--line);
}
.step{ position:relative; padding:2.6rem clamp(1rem,2vw,2rem) 0 0; display:flex; flex-direction:column; gap:1.4rem; }
.step + .step{ padding-left:clamp(1rem,2vw,2rem); border-left:1px solid var(--line); }
.step::before{
  content:""; position:absolute; top:-4px; left:0; width:7px; height:7px; border-radius:50%;
  background:var(--paper); border:1px solid var(--rum);
}
.step + .step::before{ left:-4px; }
.step__num{ font-family:var(--serif); font-size:clamp(3.2rem, 6vw, 5.6rem); color:var(--rum); line-height:0.9; letter-spacing:-0.03em; }
.step__art{
  width:min(100%, 220px); aspect-ratio:1; background:var(--ink); opacity:0.85;
  -webkit-mask:var(--plate) left center / contain no-repeat; mask:var(--plate) left center / contain no-repeat;
  transition:clip-path 1.8s var(--ease) 0.2s;
}
html.js-ready .step__art{ clip-path:inset(0 0 100% 0); }
html.js-ready .step.in .step__art{ clip-path:inset(0 0 0 0); }
.step__body{ display:flex; flex-direction:column; gap:0.8rem; }
.step__body h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem, 2.2vw, 2rem); line-height:1.1; }
.step__body p{ color:var(--muted); max-width:30ch; font-size:0.95rem; }
@media(max-width:960px){
  .method__list{ grid-template-columns:1fr 1fr; row-gap:3rem; }
  .step:nth-child(3){ border-left:none; padding-left:0; }
  .step:nth-child(3)::before{ left:0; }
}
@media(max-width:560px){
  .method__list{ grid-template-columns:1fr; border-top:none; border-left:1px solid var(--line); row-gap:2.6rem; }
  .step, .step + .step{ border-left:none; padding:0 0 0 1.6rem; }
  .step::before, .step + .step::before, .step:nth-child(3)::before{ top:0.5rem; left:-4px; }
  .step__art{ width:min(60%, 180px); }
}
.method__quote{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 5.2vw, 5.4rem);
  line-height:1.04; letter-spacing:-0.025em;
  padding:clamp(6rem,12vw,11rem) var(--gutter) 2rem;
  max-width:none; text-align:center;
}
.method__quote .line > span{ display:inline-block; }
.method__cite{ display:flex; justify-content:center; align-items:center; gap:0.8rem; color:var(--muted); padding:0 var(--gutter); font-style:normal; }
.method__cite::before, .method__cite::after{ content:""; width:3rem; height:1px; background:var(--line); }

/* ---------- V. PARTNERSHIP, dark ---------- */
.trade{ background:var(--ink); color:var(--paper); padding:2rem 0 6.5rem; }
.trade__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line-dark);
  border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark);
  margin-top:3rem;
}
.tcol{ background:var(--ink); padding:2.6rem var(--gutter); display:flex; flex-direction:column; gap:1rem; }
.tcol__num{ color:var(--rum-bright); }
.tcol h3{ font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,3.4vw,3.2rem); line-height:1.05; letter-spacing:-0.02em; max-width:14ch; text-wrap:balance; margin-bottom:1rem; }
.tcol p{ color:var(--muted-dark); max-width:44ch; font-size:0.95rem; }
.tcol__points{ list-style:none; border-top:1px solid var(--line-dark); max-width:52ch; }
.tcol__points li{ color:oklch(78% 0.014 250); font-size:1rem; padding:0.9rem 0; border-bottom:1px solid var(--line-dark); }
.tcol__link{ color:var(--paper); display:inline-flex; gap:0.6rem; margin-top:0.6rem; }
.tcol__link span{ transition:transform 0.4s var(--ease); }
.tcol__link:hover span{ transform:translateX(5px); }
.trade__faq{ margin:3.5rem var(--gutter) 0; }
.qa{ border-bottom:1px solid var(--line-dark); }
.qa summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:2rem;
  padding:1.5rem 0;
  font-family:var(--serif); font-size:clamp(1.1rem,2.2vw,1.55rem);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa__sign{ position:relative; width:14px; height:14px; flex-shrink:0; }
.qa__sign::before,.qa__sign::after{ content:""; position:absolute; background:var(--rum-bright); transition:transform 0.4s var(--ease); }
.qa__sign::before{ left:0; top:6.5px; width:14px; height:1px; }
.qa__sign::after{ left:6.5px; top:0; width:1px; height:14px; }
.qa[open] .qa__sign::after{ transform:scaleY(0); }
.qa p{ color:var(--muted-dark); max-width:62ch; padding-bottom:1.6rem; margin-top:-0.3rem; font-size:0.95rem; }
@media(max-width:860px){ .trade__cols{ grid-template-columns:1fr; } }

/* ---------- A LETTER FROM THE FOUNDER ---------- */
.letter{ background:var(--paper-deep); padding:clamp(5rem,10vw,9rem) var(--gutter); }
.letter__inner{ max-width:44rem; margin:0 auto; }
.letter__label{ display:block; color:var(--rum-ink); margin-bottom:2.6rem; }
.letter__body p{
  font-family:var(--serif); font-size:clamp(1.2rem, 1.9vw, 1.55rem); line-height:1.5;
  color:var(--ink); hanging-punctuation:first; max-width:60ch;
}
.letter__body p + p{ margin-top:1.3em; }
.letter__salute{ color:var(--muted) !important; }
.letter__sign{ margin-top:3rem; display:flex; flex-direction:column; gap:1rem; }
.letter__sig{ width:clamp(180px, 26vw, 280px); height:auto; fill:var(--ink); }
.letter__sign figcaption{ color:var(--muted); line-height:1.9; }
.letter__bio{ margin-top:2.4rem; padding-top:1.6rem; border-top:1px solid var(--line); color:var(--muted); font-size:0.95rem; max-width:52ch; }

/* ---------- VI. BEGIN ---------- */
.contact{ padding-bottom:7rem; }
.contact__body{
  padding:4rem var(--gutter) 0;
  display:flex; flex-direction:column; gap:2.2rem; align-items:flex-start;
}
.contact__head{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem, 5.4vw, 4.8rem);
  line-height:1.04; letter-spacing:-0.02em;
}
.contact__note{ color:var(--muted); max-width:52ch; }
.contact__note a{ color:var(--ink); border-bottom:1px solid var(--line); transition:border-color 0.4s var(--ease); }
.contact__note a:hover{ border-color:var(--rum); }
.contact__paths{ width:100%; border-top:1px solid var(--line); margin-top:1rem; }
.contact__path{
  display:grid; grid-template-columns:minmax(110px,180px) 1fr auto; align-items:center; gap:1.5rem;
  padding:clamp(1.4rem,3vw,2.4rem) 0; border-bottom:1px solid var(--line);
}
.contact__path .mono{ color:var(--muted); }
.contact__path-label{
  font-family:var(--serif); font-size:clamp(2.2rem, 7vw, 6.4rem); line-height:1; letter-spacing:-0.025em;
  transition:transform 0.8s var(--ease), color 0.5s var(--ease);
}
.contact__arrow{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,3.4rem); color:var(--rum); transition:transform 0.8s var(--ease); }
.contact__path:hover .contact__path-label{ transform:translateX(0.8rem); color:var(--rum); }
.contact__path:hover .contact__arrow{ transform:translateX(0.6rem); }
@media(max-width:600px){ .contact__path{ grid-template-columns:1fr auto; } .contact__path .mono{ grid-column:1 / -1; } }

/* ---------- Footer ---------- */
.foot{ background:var(--ink); color:var(--paper); padding:3.5rem var(--gutter) 2.2rem; }
.foot__grid{ display:flex; flex-direction:column; gap:2.6rem; }
.foot__brand{ display:flex; align-items:flex-end; gap:clamp(1rem,2.4vw,2.4rem); font-family:var(--serif); line-height:0.85; }
.foot__brand-word{ font-size:clamp(3rem, 13.6vw, 16.5rem); letter-spacing:-0.045em; white-space:nowrap; }
.foot__brand-mark{ width:clamp(1.4rem, 4vw, 4.8rem); height:auto; fill:var(--rum); flex:none; margin-bottom:0.02em; align-self:center; }
.foot__ashore{ color:var(--muted-dark); }
.foot__nav{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.foot__nav a{ color:var(--muted-dark); transition:color 0.3s; }
.foot__nav a:hover{ color:var(--paper); }
.foot__meta{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  color:var(--muted-dark); font-size:0.66rem;
  border-top:1px solid var(--line-dark); padding-top:1.6rem;
}
.foot__credit{
  color:var(--muted-dark); font-size:0.66rem;
  text-align:center; margin-top:1.4rem;
}

/* ---------- Reveal states ----------
   Visible by default: content only becomes reveal-gated once js-ready
   confirms the animation script actually ran, so a blocked/failed
   main.js (CSP, ad blocker, flaky connection) never leaves copy hidden. */
.reveal,.reveal-row{ opacity:1; transform:none; }
html.js-ready .reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
html.js-ready .reveal.in{ opacity:1; transform:none; }
html.js-ready .reveal-row{ opacity:0; transform:translateY(28px); transition:opacity 0.9s var(--ease), transform 0.9s var(--ease); }
html.js-ready .reveal-row.in{ opacity:1; transform:none; }

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .line > span{ transform:none; }
  .reveal,.reveal-row{ opacity:1; transform:none; }
  .preloader{ display:none; }
  .menu-overlay:not(.open) .menu-overlay__link{ opacity:1; }
}

/* Small screens: let the founding quote flow as one paragraph rather
   than keeping desktop line breaks, and enlarge the chart labels. */
@media(max-width:720px){
  .method__quote .line{ display:inline; overflow:visible; }
  .method__quote .line > span{ display:inline; transform:none !important; }
  .chart__name{ font-size:12px; }
  .chart__name--port{ font-size:13px; }
  .chart__deg{ font-size:10px; }
  .chart__sound{ display:none; }
}

/* ---------- Typographic refinement ----------
   Balanced headlines, no orphaned last words in running text,
   old-style figures in prose, lining figures where data is set. */
h1, h2, h3, .house__statement, .contact__head, .row__title{ text-wrap:balance; }
p, dd, li, .qa summary{ text-wrap:pretty; }
body{ font-variant-numeric:oldstyle-nums proportional-nums; font-kerning:normal; }
.mono, .step__num, .row__num, .hero__clock, .rail__log, .chart__deg, .chart__sound{ font-variant-numeric:lining-nums tabular-nums; }
.letter__body p, .method__quote{ hanging-punctuation:first allow-end; }

/* Partnership FAQ: a quieter two-column set rather than a third ruled list */
@media(min-width:960px){
  .trade__faq{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 clamp(1.5rem,3vw,3rem); align-items:start; }
}
.tcol__link--quiet{ color:var(--muted-dark); margin-top:0; }
.tcol__link--quiet:hover{ color:var(--paper); }

/* ---------- Enquiry forms (inline, beneath each path) ---------- */
.enquiry{ border-bottom:1px solid var(--line); padding:0.6rem 0 2.6rem; }
.enquiry__form{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem clamp(1.5rem,3vw,3rem); max-width:62rem; margin-left:auto; }
.enquiry__field{ display:flex; flex-direction:column; gap:0.55rem; }
.enquiry__field--wide{ grid-column:1 / -1; }
.enquiry__field .mono{ color:var(--muted); }
.enquiry__field input, .enquiry__field select, .enquiry__field textarea{
  font:inherit; font-family:var(--serif); font-size:1.3rem; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:0.45rem 0 0.6rem; transition:border-color 0.4s var(--ease);
  appearance:none; -webkit-appearance:none;
}
.enquiry__field select{ cursor:pointer; background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position:calc(100% - 10px) 55%, calc(100% - 5px) 55%; background-size:5px 5px; background-repeat:no-repeat; }
/* Custom select: house-style button and listbox; the native select stays for the form */
.dsel__native{ position:absolute; opacity:0; pointer-events:none; width:1px; height:1px; }
.dsel{ position:relative; }
/* Lift the open field above later fields, whose reveal transforms create their own stacking layers */
.enquiry__field:has(.dsel.is-open){ position:relative; z-index:30; }
.dsel.is-open{ z-index:30; }
.dsel__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; cursor:pointer;
  font-family:var(--serif); font-size:1.3rem; color:var(--ink); text-align:left;
  background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:0.45rem 0 0.6rem; transition:border-color 0.4s var(--ease);
}
.dsel__val.is-empty{ color:var(--muted); }
.dsel__chev{ width:13px; height:8px; flex:none; fill:none; stroke:var(--muted); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; transition:transform 0.5s var(--ease), stroke 0.3s; }
.dsel__btn:hover .dsel__chev, .dsel.is-open .dsel__chev{ stroke:var(--rum-ink); }
.dsel.is-open .dsel__chev{ transform:rotate(180deg); }
.dsel__btn:focus-visible{ outline:none; border-color:var(--rum); box-shadow:0 1px 0 0 var(--rum); }
.dsel.is-open .dsel__btn{ border-color:var(--rum); }
.enquiry__field.is-invalid .dsel__btn{ border-color:oklch(55% 0.16 30); }
.dsel__list{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 0.5rem);
  list-style:none; margin:0; padding:0.4rem 0; max-height:24rem; overflow-y:auto;
  background:var(--paper); border:1px solid var(--line);
  box-shadow:0 18px 40px -18px oklch(16% 0.016 250 / 0.28);
  outline:none; transform-origin:top center; animation:dselIn 0.35s var(--ease);
}
@keyframes dselIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.dsel__list li{
  position:relative; cursor:pointer; padding:0.62rem 1.1rem 0.62rem 2.3rem;
  font-family:var(--serif); font-size:1.08rem; color:var(--ink); line-height:1.3;
  transition:background-color 0.2s, color 0.2s;
}
.dsel__list li + li{ border-top:1px solid color-mix(in oklch, var(--line) 55%, transparent); }
.dsel__list li::before{
  content:""; position:absolute; left:1.05rem; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border:1px solid var(--rum-ink); border-radius:50%; opacity:0; transition:opacity 0.2s;
}
.dsel__list li.is-active{ background:var(--paper-deep); }
.dsel__list li.is-active::before{ opacity:0.55; }
.dsel__list li[aria-selected="true"]{ color:var(--rum-ink); }
.dsel__list li[aria-selected="true"]::before{ opacity:1; background:var(--rum-ink); }
@media (prefers-reduced-motion: reduce){ .dsel__list{ animation:none; } .dsel__chev{ transition:none; } }
.enquiry__field textarea{ resize:vertical; min-height:6.5rem; line-height:1.45; }
.enquiry__field :is(input, select, textarea):focus{ outline:none; border-color:var(--rum); }
.enquiry__field :is(input, select, textarea):focus-visible{ outline:none; box-shadow:0 1px 0 0 var(--rum); }
.enquiry__field.is-invalid :is(input, select, textarea){ border-color:oklch(55% 0.16 30); }
.enquiry__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enquiry__foot{ grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; padding-top:0.6rem; }
.enquiry__note{ color:var(--muted); font-size:0.9rem; max-width:44ch; }
.enquiry__note a{ color:var(--ink); text-decoration-color:var(--rum-ink); text-underline-offset:0.2em; }
.foot__meta a{ color:inherit; transition:color 0.3s; }
.foot__meta a:hover{ color:var(--paper); }
.enquiry__send{
  display:inline-flex; gap:0.8rem; align-items:center; cursor:pointer;
  background:var(--ink); color:var(--paper); border:0; padding:1.05rem 1.6rem;
  transition:background-color 0.4s var(--ease);
}
.enquiry__send span{ transition:transform 0.5s var(--ease); }
.enquiry__send:hover{ background:var(--rum-ink); }
.enquiry__send:hover span{ transform:translateX(4px); }
.enquiry__send[disabled]{ opacity:0.55; cursor:progress; }
.enquiry__status{ grid-column:1 / -1; font-family:var(--serif); font-size:1.25rem; min-height:1.4em; }
.enquiry__status a{ color:var(--rum-ink); }
.enquiry.is-sent .enquiry__form > :not(.enquiry__status){ display:none; }
.enquiry.is-sent .enquiry__status{ font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.2; }
.contact__path[aria-expanded="true"] .contact__arrow{ transform:rotate(90deg); }
@media(max-width:700px){ .enquiry__form{ grid-template-columns:1fr; } }
.contact__path[aria-expanded="true"] .contact__path-label{ color:var(--rum); }

/* Selection in the house palette */
::selection{ background:var(--rum-ink); color:var(--paper); }

/* Paper grain: a barely visible print texture over the whole page */
body::after{
  content:""; position:fixed; inset:-50%; z-index:9000; pointer-events:none; opacity:0.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}
@media print{ body::after{ display:none; } }

/* ---------- The passage: pinned chart sequence ---------- */
.passage{ position:relative; background:var(--paper); }
.passage__stage{ position:relative; height:100vh; height:100svh; overflow:hidden; }
.passage__chart{ position:absolute; inset:0; width:100%; height:100%; }
.passage__chart .pg{ stroke:var(--line); stroke-width:0.5; vector-effect:non-scaling-stroke; opacity:0.6; }
.passage__chart .pg--m{ opacity:1; }
.passage__chart .pdeg{ font:500 calc(11px * var(--k, 1)) var(--mono); letter-spacing:0.1em; fill:var(--muted); }
.passage__chart .pc{ fill:none; stroke:var(--ink); stroke-width:0.6; vector-effect:non-scaling-stroke; }
.passage__chart .pc--0{ opacity:0.32; } .passage__chart .pc--1{ opacity:0.18; } .passage__chart .pc--2{ opacity:0.1; }
.passage__chart .ps{ font:400 calc(9px * var(--k, 1)) var(--mono); fill:var(--muted); opacity:0.5; }
.passage__chart .pi circle{ fill:var(--ink); }
.passage__chart .pi text{ font:500 calc(11px * var(--k, 1)) var(--mono); letter-spacing:0.14em; text-transform:uppercase; fill:var(--ink); }
.passage__chart .pr{ fill:none; stroke:var(--rum); stroke-width:calc(1.6px * var(--k, 1)); stroke-linecap:round; }
.passage__chart .pr-shadow{ fill:none; stroke:var(--rum); stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:2 6; opacity:0.35; }
.passage__chart .pp circle{ fill:var(--rum); }
.passage__chart .pp .pp-ring{ fill:none; stroke:var(--rum); stroke-width:1; vector-effect:non-scaling-stroke; transform-box:fill-box; transform-origin:center; }
.passage__chart .pp text{ font:500 calc(14px * var(--k, 1)) var(--mono); letter-spacing:0.16em; text-transform:uppercase; fill:var(--rum); }
.passage__chart .pship{ fill:var(--paper); stroke:var(--rum); stroke-width:1.5; vector-effect:non-scaling-stroke; }
.passage__top{ position:absolute; top:5.6rem; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; color:var(--muted); }
.passage__copy{ position:absolute; left:var(--gutter); bottom:clamp(5rem,12vh,8rem); max-width:min(34rem, 80vw); padding:1rem 1.4rem 1rem 0; background:linear-gradient(90deg, rgba(244,239,228,0.9) 70%, transparent); background:linear-gradient(90deg, color-mix(in oklch, var(--paper) 90%, transparent) 70%, transparent); }
.passage__line{ font-family:var(--serif); font-size:clamp(1.8rem,4vw,3.4rem); line-height:1.05; letter-spacing:-0.02em; text-wrap:balance; }
.passage__line--b{ position:absolute; left:0; bottom:0; color:var(--rum); opacity:0; }
.passage__log{ position:absolute; right:var(--gutter); bottom:clamp(5rem,12vh,8rem); display:flex; gap:2.4rem; text-align:right; padding:0.9rem 1.1rem; margin:-0.9rem -1.1rem; background:rgba(244,239,228,0.88); background:color-mix(in oklch, var(--paper) 88%, transparent); }
.passage__log dt{ color:var(--muted); margin-bottom:0.35rem; }
.passage__log dd{ color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
@media(max-width:720px){
  .passage__top span + span{ display:none; }
  .passage__log{ left:var(--gutter); right:auto; bottom:2rem; text-align:left; }
  .passage__copy{ bottom:7rem; }
}
/* Static final state (no JS animation): route complete, arrival shown */
html:not(.passage-live) .passage__line--a{ opacity:0; }
html:not(.passage-live) .passage__line--b{ opacity:1; }

/* Mobile voyage: the course rail rides in the narrow left margin on phones */
@media(max-width:1179px){
  .rail{ display:block; left:max(6px, calc(var(--gutter) * 0.32)); top:18vh; bottom:30vh; }
  .rail__log{ font-size:0.6rem; letter-spacing:0.14em; top:calc(100% + 0.8rem); }
  .rail__track{ opacity:0.28; }
}
@media(max-width:1179px) and (max-height:520px){ .rail{ display:none; } }