/* ═══════════════════════════════════════════════════════════════════════
   ABOUT — the story behind Dark Tides Supply
   Palette and type come from styles.css. Nothing new is invented here:
   black, charcoal, aged cream, restrained gold. The photographs carry
   the colour, so every surface below stays out of their way.
   ═══════════════════════════════════════════════════════════════════════ */

.about-page{ background:#07080a; color:var(--cream-dim); }
.ab-topbar{ border-bottom-color:rgba(201,169,97,.16); }
.ab-util{ color:var(--cream-dim); text-decoration:none; font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.ab-util:hover{ color:var(--gold); }
.ab-main{ padding-left:var(--rail); overflow:hidden; }

/* Scroll reveals. Driven by js/about.js; the opacity:0 is applied only
   when that script's `js-on` class is present, so a JS failure leaves a
   readable page instead of a blank one. */
.js-on .a-reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js-on .a-reveal.in{ opacity:1; transform:none; }
.js-on .a-reveal[data-delay="1"]{ transition-delay:.13s; }
.js-on .a-reveal[data-delay="2"]{ transition-delay:.26s; }
@media (prefers-reduced-motion:reduce){
  .js-on .a-reveal{ opacity:1; transform:none; transition:none; }
}

/* ── 01 hero ──────────────────────────────────────────────────────────── */
.ab-hero{ position:relative; min-height:min(86vh,780px); display:flex; align-items:center; isolation:isolate; border-bottom:1px solid rgba(201,169,97,.2); }
.ab-hero-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:60% 38%; }
.ab-hero-scrim{ position:absolute; inset:0; z-index:-1; background:
  linear-gradient(90deg,#07080a 6%,rgba(7,8,10,.82) 34%,rgba(7,8,10,.18) 68%,rgba(7,8,10,.5)),
  linear-gradient(0deg,#07080a 2%,transparent 34%); }
.ab-hero-copy{ padding:clamp(70px,9vw,120px) var(--pad); max-width:760px; }
.ab-hero-copy h1{
  margin:0; font-family:var(--display); font-weight:400;
  font-size:clamp(44px,6.4vw,88px); line-height:.99; letter-spacing:.005em;
  text-transform:uppercase; color:var(--cream);
  text-shadow:0 4px 34px rgba(0,0,0,.65);
}
.ab-hero-sub{ margin:clamp(20px,2.4vw,30px) 0 0; color:var(--gold); font-size:clamp(13px,1.15vw,16px); line-height:1.62; letter-spacing:.05em; }
.ab-hero-copy .ornament{ margin-top:26px; }
.ab-hero-copy .ornament svg{ margin:0; }

/* ── 02 the obsession ─────────────────────────────────────────────────── */
.ab-story{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:0.92fr 1.08fr; align-items:center;
  gap:clamp(36px,5vw,80px); padding:clamp(64px,7vw,110px) var(--pad);
  background:#08090b;
  border-bottom:1px solid var(--hair);
}
/* John's parchment, mirrored. As delivered the skull sits left and the
   compass rose bottom-right — which is exactly where the copy and the
   caption are. Flipped, the skull lands behind the framed photo and the
   rose drops into the empty space under the signature. */
.ab-story::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('/images/about/story-texture.jpg') center / cover no-repeat;
  transform:scaleX(-1); opacity:.62;
}
.ab-story::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,.72) 26%, rgba(8,9,11,.3) 52%, rgba(8,9,11,.42) 100%),
    linear-gradient(180deg, rgba(8,9,11,.45), transparent 26%, rgba(8,9,11,.35));
}
.ab-story-copy .eyebrow{ margin:0 0 22px; }
.ab-story-copy p{ margin:0 0 17px; font-size:14.5px; line-height:1.85; color:var(--cream-dim); max-width:46ch; }
.ab-lede{ font-style:italic; color:var(--cream); }
.ab-sign{ margin:34px 0 2px !important; font-family:var(--display); font-size:20px; color:var(--gold); font-style:italic; }
.ab-sign-role{ font-size:10px !important; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); }

.ab-story-photo{ margin:0; }
.ab-frame{ padding:clamp(9px,1vw,15px); background:linear-gradient(155deg,#d9cfb6,#b6a98c 62%,#9d907512); box-shadow:0 26px 64px rgba(0,0,0,.62); }
.ab-frame img{ display:block; width:100%; height:auto; }
.ab-story-photo figcaption{ margin-top:14px; text-align:center; font-style:italic; font-size:12.5px; color:var(--muted); }

/* ── 03 the chart ─────────────────────────────────────────────────────── */
.ab-chart{ padding:clamp(60px,6.5vw,96px) var(--pad) clamp(52px,6vw,88px); background:#08080a; border-bottom:1px solid var(--hair); }
.ab-sec-head{ display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:clamp(38px,4.5vw,60px); }
.ab-sec-head span{ flex:1; max-width:230px; height:1px; background:linear-gradient(90deg,transparent,var(--hair-2),var(--hair)); }
.ab-sec-head span:last-child{ background:linear-gradient(270deg,transparent,var(--hair-2),var(--hair)); }
.ab-sec-head h2{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(15px,1.5vw,19px); letter-spacing:.26em; text-transform:uppercase; color:var(--gold); text-align:center; }

.ab-route{ position:relative; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(12px,1.5vw,22px); }
/* the rhumb line the ports hang from */
.ab-route::before{
  content:''; position:absolute; left:6%; right:6%; top:7px; height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 8%,var(--hair) 92%,transparent);
}
.ab-route li{ position:relative; padding-top:26px; text-align:center; }
.ab-node{ position:absolute; top:2px; left:50%; width:9px; height:9px; margin-left:-4.5px; transform:rotate(45deg); background:#0b0b0d; border:1px solid var(--gold-soft); }
.ab-route li h3{ margin:0 0 4px; font-family:var(--display); font-weight:400; font-size:clamp(11px,1.05vw,14px); letter-spacing:.16em; text-transform:uppercase; color:var(--cream); }
.ab-where{ margin:0 0 16px; font-style:italic; font-size:11.5px; line-height:1.5; color:var(--muted); }
.ab-plate{ overflow:hidden; border:1px solid var(--hair); background:#101013; }
.ab-plate img{ display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; transition:transform 1.1s var(--ease), filter .6s var(--ease); filter:saturate(.92); }
.ab-route li:hover .ab-plate img{ transform:scale(1.05); filter:saturate(1); }
.ab-drag-hint{ display:none; margin:18px 0 0; text-align:center; font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

/* ── 04 Ocracoke ──────────────────────────────────────────────────────── */
.ab-ocracoke{ position:relative; isolation:isolate; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:clamp(30px,4vw,64px); padding:0 var(--pad) 0 0; background:#08080a; border-bottom:1px solid var(--hair); overflow:hidden; }
/* John's own ground for this band. The skull-on-rose sits at the right of
   the artwork, which is the copy side — so it is left unmirrored and the
   scrim below is weighted to fade out past the end of the measure, letting
   the rose read in the margin rather than under the sentences. */
.ab-ocracoke::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('/images/about/ocracoke-texture.jpg') center / cover no-repeat;
  opacity:.75;
}
.ab-ocracoke::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,8,10,.7) 0%, rgba(8,8,10,.82) 52%, rgba(8,8,10,.66) 78%, rgba(8,8,10,.3) 100%);
}
.ab-ocracoke-photo{ position:relative; }
.ab-ocracoke-photo img{ display:block; width:100%; height:100%; min-height:clamp(300px,38vw,540px); object-fit:cover; object-position:20% 50%; }
.ab-ocracoke-photo::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,8,10,.35),transparent 30%,rgba(8,8,10,.9)); }
.ab-ocracoke-copy{ position:relative; z-index:2; padding:clamp(48px,5vw,80px) 0; }
.ab-ocracoke-copy h2{ margin:16px 0 22px; font-family:var(--display); font-weight:400; font-size:clamp(26px,3.1vw,44px); line-height:1.14; letter-spacing:.012em; text-transform:uppercase; color:var(--cream); }
.ab-ocracoke-copy p{ margin:0 0 15px; font-size:14px; line-height:1.85; color:var(--cream-dim); max-width:44ch; }

/* ── 05 where Dark Tides came from ────────────────────────────────────── */
.ab-origin{
  position:relative; isolation:isolate;
  display:grid; grid-template-columns:.85fr 1.15fr .85fr; align-items:center;
  gap:clamp(30px,4vw,64px); padding:clamp(64px,7vw,110px) var(--pad);
  background:#08080a;
  border-bottom:1px solid var(--hair);
}
/* The ship's hold. Unmirrored: the Jolly Roger falls behind the book on
   the left, the lantern behind the gear on the right, and the empty dark
   middle takes the copy. The plank deck along the bottom reads as a floor
   for both objects. */
.ab-origin::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:url('/images/about/origin-texture.jpg') center / cover no-repeat;
  opacity:.72;
}
.ab-origin::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,.8) 28%, rgba(8,8,10,.84) 68%, rgba(8,8,10,.42) 100%);
}
.ab-origin figure{ margin:0; }
.ab-origin-book img{ display:block; width:100%; height:auto; aspect-ratio:2/3; filter:drop-shadow(0 30px 60px rgba(0,0,0,.75)); }
.ab-origin-goods img{ display:block; width:100%; height:auto; aspect-ratio:10/11; object-fit:cover; border:1px solid var(--hair); }
.ab-origin-copy h2{ margin:0 0 22px; font-family:var(--display); font-weight:400; font-size:clamp(16px,1.45vw,21px); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-wrap:balance; }
.ab-origin-copy p{ margin:0 0 15px; font-size:14px; line-height:1.85; color:var(--cream-dim); max-width:48ch; }
.ab-origin-copy em{ color:var(--cream); }
.ab-origin-copy .btn{ margin-top:16px; }

/* ── 06 the closer ────────────────────────────────────────────────────── */
.ab-closer{ position:relative; display:grid; place-items:center; min-height:min(62vh,520px); text-align:center; isolation:isolate; }
.ab-closer-img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.ab-closer-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(7,8,10,.86),rgba(7,8,10,.7) 45%,rgba(7,8,10,.92)); }
.ab-closer-copy{ padding:clamp(56px,7vw,96px) var(--pad); }
.ab-closer-copy h2{ margin:0; font-family:var(--display); font-weight:400; font-size:clamp(19px,2.5vw,34px); line-height:1.5; letter-spacing:.055em; text-transform:uppercase; color:var(--gold); }
.ab-closer-copy h2 span{ display:block; }
.ab-closer-logo{ display:block; width:clamp(64px,7vw,92px); height:auto; margin:clamp(26px,3vw,40px) auto clamp(22px,2.6vw,32px); opacity:.9; }

/* ── responsive ───────────────────────────────────────────────────────── */
@media(max-width:1050px){
  .ab-story{ grid-template-columns:1fr; }
  .ab-story::after{ background:linear-gradient(180deg, rgba(8,9,11,.82), rgba(8,9,11,.62) 30%, rgba(8,9,11,.8)); }
  .ab-story-photo{ max-width:560px; }
  .ab-ocracoke{ grid-template-columns:1fr; padding:0 0 clamp(46px,6vw,70px); }
  .ab-ocracoke-photo::after{ background:linear-gradient(0deg,rgba(8,8,10,.92),transparent 55%); }
  .ab-ocracoke-copy{ padding:0 var(--pad); }
  .ab-origin{ grid-template-columns:1fr 1fr; }
  .ab-origin-copy{ grid-column:1 / -1; order:-1; }
}
@media(max-width:900px){
  /* The wordmark is centred and the utility nav is right-aligned; below
     ~830px they collide and print on top of each other. Tighten here,
     drop the text links entirely at 780 where no tightening saves it —
     the footer carries the same navigation. */
  .ab-util{ font-size:9.5px; letter-spacing:.1em; }
  /* the route stops being a grid and becomes something you drag along,
     which is closer to reading a chart anyway */
  .ab-route{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; -webkit-overflow-scrolling:touch; }
  .ab-route::before{ left:0; right:0; }
  .ab-route li{ flex:0 0 min(212px,62vw); scroll-snap-align:center; }
  .ab-drag-hint{ display:block; }
  .js-on .ab-route li.a-reveal{ opacity:1; transform:none; }
}
@media(max-width:780px){
  /* .rail is a fixed 56px opaque column and .ab-main drops its left
     padding here — without this it sits on top of the page. Same fix as
     vault.css; scoped to this page. */
  .rail{ display:none; }
  .ab-util{ display:none; }
  .ab-main{ padding-left:0; }
  /* On a phone the frame goes portrait and the copy would land straight on
     their faces. Anchor the copy to the bottom, weight the scrim there, and
     serve the 4:5 crop so both faces sit clear above the type. */
  .ab-hero{ min-height:86vh; align-items:flex-end; }
  .ab-hero-img{ object-position:50% 32%; }
  .ab-hero-scrim{ background:linear-gradient(0deg,#07080a 11%,rgba(7,8,10,.88) 33%,rgba(7,8,10,.22) 63%,rgba(7,8,10,.5)); }
  .ab-hero-copy{ padding:0 var(--pad) clamp(40px,9vw,62px); }
  .ab-origin{ grid-template-columns:1fr; }
  .ab-origin-book{ max-width:300px; margin:0 auto; }
  .ab-origin-goods{ max-width:420px; margin:0 auto; }
}
@media(max-width:520px){
  .ab-util{ font-size:9px; }
  .ab-sec-head h2{ font-size:13px; letter-spacing:.2em; }
  .ab-sec-head span{ max-width:60px; }
}