/* Dare Masters Diving Club: one-page site. Tokens follow the brand style guide. */
@font-face{font-family:"Permanent Marker";src:url("/assets/fonts/permanent-marker-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --navy-950:#010e23;--navy-900:#01143a;--navy-800:#041c54;
  --blue-700:#0c3c84;--blue-600:#0c54b4;--blue-500:#0c6ccc;--blue-400:#0c84e4;--blue-200:#a9d4fa;--blue-50:#eaf4fe;
  --yellow-400:#fcdc02;--yellow-500:#f9be03;--white:#fff;
  --ink:var(--navy-900);--ink-muted:#3a4f7a;--brand:var(--blue-600);
  --font-display:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --font-condensed:"Barlow Condensed","Arial Narrow",sans-serif;
  --font-sans:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;
  --radius-sm:4px;--radius-md:8px;--radius-lg:16px;
  --shadow-lift:0 8px 24px rgba(1,14,35,.35);--shadow-hard:4px 4px 0 0 var(--navy-950);
  --section-pad:var(--space-7);
}
@media (min-width:768px){:root{--section-pad:var(--space-8)}}
@media (min-width:1100px){:root{--section-pad:var(--space-9)}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.6 var(--font-sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--blue-500);outline-offset:2px}
.site-header :focus-visible,.panel :focus-visible,.water :focus-visible,.hero-copy :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow-400)}
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-4)}
@media (min-width:768px){.wrap{padding-inline:var(--space-6)}}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--space-4);top:-60px;background:var(--yellow-400);color:var(--navy-900);padding:var(--space-2) var(--space-4);font:600 16px/1.2 var(--font-condensed);text-transform:uppercase;letter-spacing:.06em;z-index:100;border-radius:var(--radius-sm)}
.skip:focus{top:var(--space-2)}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--navy-900);color:#fff}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:56px;flex-wrap:wrap;padding-block:var(--space-2)}
.brand{font:700 20px/1.1 var(--font-condensed);letter-spacing:.04em;text-transform:uppercase;color:#fff;text-decoration:none}
.site-header ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-5)}
.site-header nav a{font:600 16px/1.2 var(--font-condensed);letter-spacing:.06em;text-transform:uppercase;color:#fff;text-decoration:none;padding:var(--space-2) 0;border-bottom:3px solid transparent}
.site-header nav a:hover{border-bottom-color:var(--yellow-400)}

/* logo band */
.logo-band{background:#fff;padding:var(--space-6) 0 var(--space-5)}
.logo-band img{width:100%;max-width:880px;margin-inline:auto;mix-blend-mode:multiply}

/* callouts */
.callout{display:inline-block;margin:0;font:400 clamp(36px,6vw,56px)/1 var(--font-display);letter-spacing:.01em;text-transform:uppercase;color:#fff;transform:rotate(-3deg);text-shadow:0 3px 0 rgba(1,14,35,.9),0 6px 14px rgba(1,14,35,.55)}
.callout em{font-style:normal;color:var(--yellow-400)}
.callout.white{display:inline-block}
.callout.small{font-size:clamp(34px,5vw,48px)}
.brush-underline{display:block;width:100%;max-width:340px;height:10px;margin-top:var(--space-2);background:var(--yellow-400);clip-path:polygon(0 70%,3% 35%,100% 0,96% 50%,100% 100%,5% 88%);transform:rotate(-2deg)}
.brush-panel{display:inline-block;padding:var(--space-5) var(--space-7);background:var(--navy-950);color:#fff;clip-path:polygon(0 18%,3% 8%,7% 14%,12% 4%,18% 10%,26% 2%,34% 9%,44% 3%,55% 8%,66% 2%,78% 9%,88% 3%,96% 10%,100% 6%,98% 24%,100% 38%,97% 52%,100% 66%,96% 80%,99% 94%,90% 98%,80% 92%,70% 98%,58% 93%,46% 99%,34% 94%,22% 99%,12% 93%,5% 98%,1% 88%,3% 74%,0 60%,3% 46%,0 32%)}
.brush-panel .callout em{display:block;font-size:1.35em}

/* hero */
.hero{display:grid;background:var(--navy-900);color:#fff}
.hero-copy{padding:var(--space-7) var(--space-4);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.hero-title{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.lead{margin:0;font:600 clamp(20px,2.4vw,24px)/1.35 var(--font-sans);max-width:28ch;color:#fff}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;aspect-ratio:16/10}
@media (min-width:960px){
  .hero{grid-template-columns:minmax(380px,5fr) 7fr;min-height:560px}
  .hero-copy{padding:var(--space-8) var(--space-6) var(--space-8) max(var(--space-6),calc((100vw - 1120px)/2 + var(--space-6)))}
  .hero-photo img{aspect-ratio:auto;min-height:100%}
}

/* buttons */
.btn{display:inline-block;padding:var(--space-3) var(--space-5);border:2px solid transparent;border-radius:var(--radius-sm);font:600 18px/1.2 var(--font-condensed);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--yellow-400);color:var(--navy-900);box-shadow:var(--shadow-hard)}
.btn-primary:hover{background:var(--yellow-500)}
.panel .btn-primary,.hero .btn-primary{box-shadow:4px 4px 0 0 var(--blue-700)}

/* sections */
.section{padding-block:var(--section-pad)}
.section.water{background:var(--blue-700);color:#fff}
.section.panel{background:var(--navy-900);color:#fff}
.split{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:860px){.split{grid-template-columns:1fr 1fr;gap:var(--space-8)}.split.flip{grid-template-columns:5fr 6fr}}
.kicker{margin:0 0 var(--space-2);font:700 16px/1.2 var(--font-condensed);letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.kicker.light{color:var(--blue-200)}
.h2{margin:0 0 var(--space-4);font:700 clamp(32px,5vw,44px)/1.05 var(--font-condensed);letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.h2.light{color:#fff}
.section p{max-width:60ch}
.muted{color:var(--ink-muted)}
.on-dark{color:#fff}
.photo{margin:0}
.photo img{width:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-lift)}
.photo.tall img{max-width:420px;margin-inline:auto}

.reasons{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5)}
.callout-line{font:400 clamp(26px,4vw,36px)/1.1 var(--font-display);text-transform:uppercase;color:#fff;text-shadow:0 3px 0 rgba(1,14,35,.9),0 6px 14px rgba(1,14,35,.55)}
.callout-line em{font-style:normal;color:var(--yellow-400)}

.banner{background:var(--navy-950)}
.banner img{width:100%;max-height:420px;object-fit:cover;object-position:50% 40%}

/* schedule */
.schedule{display:inline-block;margin:var(--space-3) 0 var(--space-5);padding:var(--space-5) var(--space-6);background:var(--navy-900);border-left:6px solid var(--yellow-400);border-radius:var(--radius-sm)}
.schedule p{margin:0}
.schedule .days{font:700 clamp(26px,4vw,34px)/1.1 var(--font-condensed);letter-spacing:.01em;text-transform:uppercase;color:var(--yellow-400)}
.schedule .when{font:700 clamp(26px,4vw,34px)/1.1 var(--font-condensed);letter-spacing:.01em;text-transform:uppercase;color:#fff}

/* join + contact */
.join{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:860px){.join{grid-template-columns:1fr 1fr;gap:var(--space-8)}}
.contact{display:grid;gap:var(--space-5)}
.contact .row{display:grid;grid-template-columns:40px 1fr;gap:var(--space-4);align-items:center}
.contact svg{width:36px;height:36px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.contact .lb{display:block;font:600 14px/1.2 var(--font-condensed);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-200)}
.contact .vl{display:block;font:700 clamp(20px,3.4vw,28px)/1.1 var(--font-condensed);letter-spacing:.01em;color:var(--yellow-400);text-decoration:none;overflow-wrap:anywhere}
.contact a.vl:hover{text-decoration:underline}
.contact .vl.up{text-transform:uppercase}

/* footer */
.site-footer{background:var(--navy-950);color:#fff;padding:var(--space-7) 0 var(--space-6)}
.signoff{margin:0 0 var(--space-6);max-width:260px}
.legal{margin:0;font:500 14px/1.4 var(--font-sans);color:var(--blue-200)}