/* ═══════════════════════════════════════════════════════════════
   TENGGARA DIVE CO. — silkscreen travel-poster world
   Aesthetic: silkscreen travel-poster modernism
   Mechanic: screen-print registration — plates arrive off-register
             and snap into place under a squeegee wipe
   ═══════════════════════════════════════════════════════════════ */

:root{
  --palm:#0E4D45;
  --palm-d:#072B27;
  --mango:#FFB627;
  --hibiscus:#E8336D;
  --bone:#F2EDE3;
  --bone-d:#E4DCCC;
  --ink:#06201C;

  --poster:"Anybody",Impact,sans-serif;
  --sans:"Sen",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;

  --pad:clamp(20px,5vw,80px);
  --maxw:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--sans); font-size:clamp(1rem,.96rem + .2vw,1.06rem); line-height:1.68;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
/* paper tooth over everything */
body::after{
  content:""; position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.34;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
img,svg{display:block; max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}

/* ── poster type ─────────────────────────────────────────────── */
.wordmark,.h2,.visit__h{
  font-family:var(--poster); font-weight:800; text-transform:uppercase;
  line-height:.88; letter-spacing:-.012em; font-variation-settings:"wdth" 128;
}
.wordmark{font-size:clamp(2.9rem,10.4vw,8.6rem)}
.h2{font-size:clamp(2rem,5.2vw,4.2rem)}
.visit__h{font-size:clamp(1.9rem,4.4vw,3.4rem)}
.kicker{
  font-family:var(--mono); font-size:.64rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mango); margin:0;
}
.kicker--dark{color:var(--hibiscus)}

/* ── registration ────────────────────────────────────────────── */
.reg{position:relative; display:block}
.reg__k{position:relative; z-index:3; display:block}
.reg__p{
  position:absolute; inset:0; z-index:1; display:block; pointer-events:none;
  mix-blend-mode:multiply; opacity:.95;
  transition:transform 1.05s cubic-bezier(.16,.84,.3,1),opacity .9s ease;
}
.reg__p--m{color:var(--hibiscus); transform:translate(-.052em,.036em) rotate(-.35deg)}
.reg__p--y{color:var(--mango);    transform:translate(.046em,-.03em) rotate(.28deg)}
.registered .reg__p{transform:none; opacity:.8}
.learn .reg__p{mix-blend-mode:screen}
.hero .reg__p--y{color:var(--palm)}

/* ── the press: plates + squeegee ────────────────────────────── */
[data-poster]{position:relative; overflow:hidden; background:var(--palm-d)}
[data-poster]::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:linear-gradient(104deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 66%);
  transform:translateX(-135%);
}
[data-poster].registered::after{transform:translateX(135%); transition:transform 1.2s cubic-bezier(.55,0,.2,1) .1s}
.pl{transition:transform 1.15s cubic-bezier(.16,.84,.3,1)}
.pl--y{transform:translate(-10px,7px)}
.pl--m{transform:translate(8px,-6px)}
.pl--k{transform:translate(-4px,-4px)}
.registered .pl{transform:none}

.btn{
  display:inline-flex; align-items:center; text-decoration:none;
  font-family:var(--mono); font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; padding:15px 28px; border:2px solid currentColor;
  transition:.3s cubic-bezier(.2,.7,.2,1);
}
.btn--mango{background:var(--mango); border-color:var(--mango); color:var(--ink)}
.btn--mango:hover{background:var(--hibiscus); border-color:var(--hibiscus); color:#fff}
.btn--bone{background:var(--bone); border-color:var(--bone); color:var(--ink)}
.btn--bone:hover{background:var(--ink); border-color:var(--ink); color:var(--bone)}
.btn--ghost{color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--bone)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

/* ── nav ─────────────────────────────────────────────────────── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:14px var(--pad); transition:background .35s ease,box-shadow .35s ease;
}
.nav.is-stuck{background:var(--palm); box-shadow:0 1px 0 rgba(255,182,39,.35)}
.nav__mark{
  font-family:var(--poster); font-weight:800; font-variation-settings:"wdth" 118;
  text-transform:uppercase; font-size:1.02rem; letter-spacing:.01em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
}
.nav__links{display:flex; gap:clamp(14px,2vw,28px)}
.nav__links a{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; opacity:.75; transition:.25s;
}
.nav__links a:hover{opacity:1; color:var(--hibiscus)}
.nav.is-stuck .nav__mark,.nav.is-stuck .nav__links a{color:var(--bone)}
.nav.is-stuck .nav__links a:hover{color:var(--mango)}
.nav__call{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-decoration:none;
  color:var(--bone); background:var(--ink); padding:8px 15px; white-space:nowrap;
}
.nav__call:hover{background:var(--hibiscus); color:#fff}
@media (max-width:860px){.nav__links{display:none}}

/* ── hero ────────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  background:var(--mango); color:var(--ink); overflow:hidden;
}
.hero__poster{position:absolute; inset:0; z-index:0}
.hero__poster svg{width:100%; height:100%}
.hero__wrap{
  position:relative; z-index:3; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:120px var(--pad) 110px;
}
.hero .kicker{margin-bottom:clamp(18px,3vh,30px); color:var(--palm-d)}
.hero__sub{
  margin-top:clamp(22px,3.4vh,36px); max-width:44ch; font-size:clamp(1rem,1.4vw,1.16rem);
  color:rgba(6,32,28,.8);
}
.ticker{
  position:absolute; left:0; right:0; bottom:0; z-index:4; overflow:hidden;
  background:var(--mango); color:var(--ink); padding:9px 0;
  border-top:3px solid var(--ink);
}
.ticker__run{
  display:flex; gap:16px; white-space:nowrap; width:max-content;
  font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  animation:run 44s linear infinite;
}
.ticker__run i{font-style:normal; opacity:.5}
@keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── argument ────────────────────────────────────────────────── */
.argument{display:grid; grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.argument{grid-template-columns:1fr}}
.arg{padding:clamp(38px,6vw,74px) clamp(24px,3.4vw,48px)}
.arg--a{background:var(--mango); color:var(--ink)}
.arg--b{background:var(--hibiscus); color:#fff}
.arg--c{background:var(--ink); color:var(--bone)}
.arg__n{
  display:block; font-family:var(--poster); font-weight:900; font-variation-settings:"wdth" 108;
  font-size:clamp(4.2rem,9vw,7.4rem); line-height:.8; letter-spacing:-.03em; margin-bottom:18px;
}
.arg h2{
  font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; margin-bottom:18px;
}
.arg p{max-width:34ch; opacity:.88; font-size:.98rem}

/* ── heads ───────────────────────────────────────────────────── */
.head{max-width:64ch; margin-bottom:clamp(38px,5.5vh,66px)}
.head .h2{margin:14px 0}
.head__sub{max-width:56ch; opacity:.78; font-size:.99rem}

/* ── destination posters ─────────────────────────────────────── */
.waters{
  max-width:var(--maxw); margin:0 auto; padding:clamp(70px,11vh,140px) var(--pad);
}
/* 6 posters — 1 / 2 / 3, every count a divisor of 6, so the last row is always
   full. auto-fit used to resolve to 4 here and stranded two empty tracks. */
.posters{display:grid; grid-template-columns:1fr; gap:clamp(22px,2.6vw,40px)}
@media (min-width:660px){.posters{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.posters{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--bone); border:2px solid var(--ink); display:flex; flex-direction:column}
.card__art{aspect-ratio:400/520}
.card__art svg{width:100%; height:100%}
.card__body{padding:clamp(20px,2vw,28px); display:flex; flex-direction:column; flex:1}
.card h3{
  font-family:var(--poster); font-weight:800; font-variation-settings:"wdth" 112;
  text-transform:uppercase; font-size:clamp(1.3rem,2vw,1.7rem); line-height:1;
}
.card__loc{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hibiscus); margin:9px 0 15px !important;
}
.card p{font-size:.94rem; opacity:.82}
.card__season{
  margin-top:auto !important; padding-top:18px; font-family:var(--mono); font-size:.66rem;
  font-weight:600; letter-spacing:.14em; text-transform:uppercase; opacity:1 !important;
  color:var(--palm);
}
.note{
  margin-top:clamp(32px,4.6vh,52px); padding:18px 22px; background:var(--bone-d);
  border-left:6px solid var(--hibiscus); font-size:.92rem; max-width:74ch;
}

/* ── courses ─────────────────────────────────────────────────── */
.learn{background:var(--palm); color:var(--bone)}
.learn>*{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.learn .head{padding:clamp(70px,11vh,140px) var(--pad) 0; margin-bottom:clamp(34px,5vh,56px)}
.tickets{padding:0 var(--pad) clamp(70px,11vh,140px)}
.ticket{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,44px); align-items:start;
  padding:clamp(22px,3vh,34px) 0; border-top:2px dashed rgba(242,237,227,.3);
  transition:padding-left .45s cubic-bezier(.2,.7,.2,1);
}
.ticket:last-child{border-bottom:2px dashed rgba(242,237,227,.3)}
.ticket:hover{padding-left:14px}
.ticket__n{
  font-family:var(--poster); font-weight:800; font-variation-settings:"wdth" 90;
  font-size:clamp(1.7rem,3.4vw,2.7rem); line-height:1; color:var(--mango); min-width:2.4ch;
}
.ticket h3{
  font-family:var(--poster); font-weight:800; font-variation-settings:"wdth" 112;
  text-transform:uppercase; font-size:clamp(1.25rem,2.4vw,1.9rem); line-height:1; margin-bottom:12px;
}
.ticket p{max-width:62ch; color:rgba(242,237,227,.76); font-size:.96rem}
.ticket__d{
  font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.16em;
  color:var(--mango); padding-top:6px; white-space:nowrap;
}
@media (max-width:680px){
  .ticket{grid-template-columns:auto 1fr; row-gap:8px}
  .ticket__d{grid-column:2; padding-top:0}
}

/* ── gear ────────────────────────────────────────────────────── */
.gear{max-width:var(--maxw); margin:0 auto; padding:clamp(70px,11vh,140px) var(--pad)}
/* 6 counters — same rule as the posters. This grid paints var(--ink) behind a
   2px gap to draw the rules, so an unfilled track reads as a black slab; the
   column count must divide 6 exactly at every width. The per-cell ring keeps
   the outer rule even if the count ever changes. */
.brands{display:grid; grid-template-columns:1fr; gap:2px; background:var(--ink)}
@media (min-width:660px){.brands{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.brands{grid-template-columns:repeat(3,1fr)}}
.brand{padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column; position:relative; overflow:hidden; box-shadow:0 0 0 2px var(--ink)}
.brand h3{
  font-family:var(--poster); font-weight:800; font-variation-settings:"wdth" 116;
  text-transform:uppercase; font-size:clamp(1.35rem,2.2vw,1.85rem); line-height:1; margin-bottom:14px;
}
.brand p{font-size:.94rem; opacity:.85}
.brand__t{
  margin-top:auto; padding-top:20px; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.16em; text-transform:uppercase; opacity:.6;
}
.brand::before{
  content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px;
  background-image:radial-gradient(circle,currentColor 1.5px,transparent 1.7px);
  background-size:8px 8px; opacity:.28;
}
.brand--1{background:var(--mango); color:var(--ink)}
.brand--2{background:var(--palm); color:var(--bone)}
.brand--3{background:var(--hibiscus); color:#fff}
.brand--4{background:var(--bone-d); color:var(--ink)}
.brand--5{background:var(--ink); color:var(--bone)}
.brand--6{background:var(--palm-d); color:var(--bone)}
.warn{
  margin-top:clamp(30px,4vh,46px); padding:20px 24px; border:2px solid var(--hibiscus);
  font-size:.93rem; max-width:82ch;
}
.warn b{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hibiscus)}

/* ── visit ───────────────────────────────────────────────────── */
.visit{
  background:var(--mango); color:var(--ink);
  padding:clamp(64px,10vh,120px) var(--pad); display:grid;
  grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,90px);
  max-width:none; align-items:start;
}
@media (max-width:900px){.visit{grid-template-columns:1fr}}
.visit__l{max-width:46ch}
.visit .kicker{color:var(--hibiscus)}
.visit__h{margin:14px 0 18px}
/* 4 entries — 1 / 2 only, never 3, so the pairs stay square. */
.visit__d{display:grid; grid-template-columns:1fr; gap:28px}
@media (min-width:520px){.visit__d{grid-template-columns:repeat(2,1fr)}}
.visit__d dt{
  font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:9px; color:rgba(6,32,28,.6);
}
.visit__d dd{font-size:.96rem; line-height:1.72}
.visit__d em{color:var(--hibiscus); font-style:normal; font-weight:700}
.visit__d a{text-decoration:none; border-bottom:2px solid var(--ink)}

/* ── foot ────────────────────────────────────────────────────── */
.foot{
  background:var(--ink); color:rgba(242,237,227,.7); padding:34px var(--pad) 44px;
  display:flex; flex-wrap:wrap; gap:10px 40px; align-items:baseline;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
}
.foot__note{width:100%; text-transform:none; letter-spacing:0; font-family:var(--sans);
  font-size:.78rem; color:rgba(242,237,227,.4); margin-top:8px !important}

/* ── entrance ────────────────────────────────────────────────── */
[data-rise]{opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
[data-rise].in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  .reg__p{transform:none !important; opacity:.8}
  .pl{transform:none !important}
  [data-poster]::after{display:none}
  [data-rise]{opacity:1; transform:none}
}