/* ---------------------------------------------------------------------------
   whalegulch.com

   Not riddimBank's house style. This is a page about a piece of coastline, so
   the palette is drawn from it — wet slate, fog, and the pale green the ocean
   goes on an overcast day — and the display face is Cormorant Garamond at its
   lightest weight rather than the heavy grotesque the music sites use. Set
   large, widely tracked and thin, it reads as a place name on a map instead of
   a brand.

   Self-contained: one HTML file, one stylesheet, one photograph, no build step.
   --------------------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#10151a;          /* wet slate, warmer and lighter than the music sites */
  --panel:#171d24;
  --line:#28323c;
  --ink:#f2f5f7;
  --soft:#c2ccd4;
  --dim:#8d99a3;
  --sea:#6fbfae;         /* the green the water goes under fog */
  --sand:#d9c9a3;
}
body{
  background:var(--bg);color:var(--ink);line-height:1.7;
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
a{color:var(--sea)}

/* ------------------------------------------------------------------ the hero
   The lettering is over the photograph rather than in a band above it. The
   scrim is a gradient rather than a flat tint, so the top third is dark enough
   to carry white type while the horizon keeps its light. */
.hero{
  position:relative;isolation:isolate;
  min-height:min(74vh,620px);
  display:flex;align-items:flex-end;
  padding:0 24px 52px;
  background:#0b1013 url('/img/coast.webp') center 42% / cover no-repeat;
  border-bottom:1px solid var(--line);
}
.hero-shade{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom, rgba(8,12,15,.62) 0%, rgba(8,12,15,.12) 42%, rgba(8,12,15,.82) 100%);
}
.hero-text{width:100%;max-width:780px;margin:0 auto;text-align:center}

h1{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-weight:300;font-style:normal;
  font-size:clamp(3rem,13vw,7rem);
  line-height:1;letter-spacing:.055em;
  color:#fff;
  /* Two soft shadows rather than one hard one: a photograph has no guaranteed
     tone behind the type, and a hard drop shadow on a thin serif looks cheap. */
  text-shadow:0 2px 26px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.45);
}
.kicker{
  margin-top:20px;color:rgba(255,255,255,.88);
  font-size:.8125rem;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(0,0,0,.8);
}

main{flex:1 0 auto;width:100%;max-width:700px;margin:0 auto;padding:52px 24px 56px}
section{margin-bottom:52px}

h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:1.9rem;letter-spacing:.01em;color:var(--sand);margin-bottom:18px;
}
p{color:var(--soft);margin-bottom:18px}
.opening p:first-child{font-size:1.1875rem;color:var(--ink)}
.lede-sm{color:var(--dim);font-size:.9375rem}
em{color:var(--ink);font-style:italic}

/* Definition list rather than headed paragraphs: each of these really is a
   term and its explanation, and the markup may as well say so. */
dl{display:flex;flex-direction:column;gap:2px}
dl > div{
  background:var(--panel);border:1px solid var(--line);
  padding:18px 20px;
}
dl > div:first-child{border-radius:10px 10px 0 0}
dl > div:last-child{border-radius:0 0 10px 10px}
dl > div + div{border-top:0}
dt{
  color:var(--sea);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:7px;
}
dd{color:var(--soft)}

.onward{
  border-left:2px solid var(--sea);padding-left:16px;color:var(--dim);
  font-size:.9375rem;margin-bottom:0;
}

.map{
  position:relative;padding-bottom:66%;height:0;overflow:hidden;
  border-radius:10px;background:var(--panel);border:1px solid var(--line);
}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.emergency p{font-size:1.125rem}
.emergency a{color:#e8a56a;font-weight:700;text-decoration:none}
.emergency a:hover{text-decoration:underline}

.form{display:flex;flex-direction:column;gap:14px;max-width:520px;margin-top:20px}
.form label{display:flex;flex-direction:column;gap:6px;color:var(--soft);font-size:.9375rem}
.form input,.form textarea{
  background:#0c1114;border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:12px 14px;font-size:16px;font-family:inherit;width:100%;
}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--sea)}
.form textarea{resize:vertical;min-height:120px}
/* Genuinely invisible but NOT display:none — some bots skip hidden fields, and
   screen readers are handled by aria-hidden. */
.gotcha{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.btn{
  background:var(--sea);color:#08110e;border:0;border-radius:60px;padding:14px 32px;
  font-size:16px;font-weight:700;font-family:inherit;cursor:pointer;align-self:flex-start;
}
.btn:hover{background:#88d2c2}
.btn[disabled]{opacity:.5;cursor:default}
.form-msg{color:var(--dim);font-size:.9375rem;min-height:1.2em}
.form-msg.ok{color:var(--sea)}

footer{
  flex-shrink:0;border-top:1px solid var(--line);padding:26px 24px;text-align:center;
  color:var(--dim);font-size:.875rem;
}
.fine{margin-top:6px;font-size:.8125rem;color:#77828b}

@media(max-width:640px){
  .hero{min-height:min(62vh,460px);padding:0 18px 36px}
  h1{letter-spacing:.03em}          /* wide tracking eats the width on a phone */
  .kicker{letter-spacing:.16em;font-size:.75rem}
  main{padding:38px 18px 40px}
  section{margin-bottom:40px}
}