/* Six Goose — sixgoose.com
   Palette & type live in :root. No external fonts: system serif/sans/mono stacks. */
:root{
  --paper:#f2ecdc; --paper-2:#e9e1cc; --paper-3:#ded4ba;
  --ink:#17323f; --ink-soft:#46616b; --rule:rgba(23,50,63,.22);
  --water:#9fbcc3; --water-pale:#d3e2e1;
  --marsh:#6f7d3c; --mud:#7a6a4c;
  --red:#b8412a; --green:#3d7550;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua","URW Palladio L",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono","DejaVu Sans Mono",monospace;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;color:var(--ink);font:400 1.0625rem/1.6 var(--serif);
  background-color:var(--paper);
  /* faint chart graticule */
  background-image:
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(23,50,63,.045) 79px 80px),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(23,50,63,.045) 79px 80px);
}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.mono{font-family:var(--mono);letter-spacing:.04em}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
h1,h2,h3{font-weight:600;line-height:1.1;margin:0 0 .6em}
.fine{font-size:.82rem;color:var(--ink-soft)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1.5rem;
  max-width:var(--max);margin:0 auto;padding:.9rem 1.5rem;
  background:rgba(242,236,220,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:44px;height:26px;fill:var(--ink)}
.brand-word{font-size:1.2rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.site-header nav{margin-left:auto}
.site-header ul{list-style:none;display:flex;gap:1.4rem;margin:0;padding:0}
.site-header nav a{font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.site-header nav a:hover{text-decoration:underline}
.coords{margin:0;font-size:.72rem;color:var(--ink-soft);border-left:1px solid var(--rule);padding-left:1.2rem}

/* ---------- hero ---------- */
.hero{max-width:var(--max);margin:0 auto;padding:3.5rem 1.5rem 2rem}
.hero-copy{max-width:44rem}
.eyebrow{font-size:.78rem;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem}
.hero h1{
  font-size:clamp(3.4rem,10vw,7.5rem);letter-spacing:-.01em;font-weight:700;margin:0 0 .25em;
  font-style:italic;
}
.lede{font-size:clamp(1.15rem,2.2vw,1.4rem);max-width:36rem;margin:0 0 1.6rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 2.6rem}
.btn{
  display:inline-block;font-family:var(--mono);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:.85rem 1.3rem;border:1.5px solid var(--ink);border-radius:2px;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
.btn-line:hover{background:var(--ink);color:var(--paper)}

.chart-frame{
  position:relative;margin:0;padding:10px;
  border:1px solid var(--ink);
  background:
    repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 36px) top/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--ink) 0 18px,transparent 18px 36px) bottom/100% 4px no-repeat,
    repeating-linear-gradient(0deg,var(--ink) 0 18px,transparent 18px 36px) left/4px 100% no-repeat,
    repeating-linear-gradient(0deg,var(--ink) 0 18px,transparent 18px 36px) right/4px 100% no-repeat,
    var(--paper);
}
.marsh{display:block;width:100%;height:auto;aspect-ratio:1200/320;min-height:260px;border:1px solid var(--ink)}
.tick{position:absolute;font-size:.66rem;background:var(--paper);padding:0 .4rem;color:var(--ink);z-index:1}
.tick.tl{top:-.55rem;left:1.2rem}.tick.tr{top:-.55rem;right:1.2rem}
.tick.bl{bottom:-.55rem;left:1.2rem}.tick.br{bottom:-.55rem;right:1.2rem;color:var(--red)}
.soundings,.creek-name{font-family:var(--serif)}
.creek-name{font-style:italic;letter-spacing:.05em}
.flock{animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-40px,6px)}to{transform:translate(60px,-8px)}}
.fog-a{animation:fog 40s ease-in-out infinite alternate}
.fog-b{animation:fog 52s ease-in-out infinite alternate-reverse}
@keyframes fog{from{transform:translateX(-80px)}to{transform:translateX(120px)}}

/* tide strip */
.tide{margin-top:2.2rem;border-top:1px solid var(--rule);padding-top:1rem}
.tide-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.tide h2{font-size:.78rem;text-transform:uppercase;margin:0;color:var(--ink-soft);font-weight:400}
.tide-state{margin:0;font-size:.85rem}
.tide-curve{display:block;width:100%;height:70px;margin:.4rem 0}
.tide .fine{margin:.2rem 0 0}

/* ---------- sections ---------- */
.section{max-width:var(--max);margin:0 auto;padding:5rem 1.5rem;border-top:1px solid var(--rule)}
.section-label{font-size:.75rem;text-transform:uppercase;color:var(--red);margin-bottom:1rem}
.section h2{font-size:clamp(2rem,4.4vw,3.2rem);max-width:22ch}
.section-lede{font-size:1.2rem;max-width:40rem;margin:0 0 2.2rem}

.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:3.5rem;align-items:start}
.prose p{max-width:36rem}
.legend{
  border:1.5px solid var(--ink);padding:1.4rem 1.5rem;background:var(--paper-2);
  box-shadow:6px 6px 0 var(--paper-3);
}
.legend h3{font-size:.78rem;text-transform:uppercase;margin:0 0 1rem;font-weight:400;border-bottom:1px solid var(--ink);padding-bottom:.5rem}
.legend dl{margin:0;display:grid;gap:.75rem}
.legend dt{font-weight:700}
.legend dd{margin:0 0 0 2rem;color:var(--ink-soft);font-size:.95rem}
.sym{display:inline-block;width:1.4rem;margin-right:.6rem;text-align:center;color:var(--red);font-family:var(--mono)}
.field-note{margin:1.3rem 0 0;padding-top:.8rem;border-top:1px dashed var(--rule);font-size:.7rem;line-height:1.7;color:var(--ink-soft)}

/* work */
.work{position:relative}
.markers{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.4rem}
.marker{
  position:relative;padding:1.6rem 1.4rem 1.4rem;border:1px solid var(--ink);background:var(--paper);
  transition:transform .2s ease,box-shadow .2s ease;
}
.marker:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--paper-3)}
.marker h3{font-size:1.45rem;margin:.9rem 0 .4rem}
.marker p{margin:0;color:var(--ink-soft)}
.buoy{
  display:inline-grid;place-items:center;min-width:3.1rem;height:2.4rem;padding:0 .5rem;
  font-size:.8rem;color:#fff;font-weight:700;
}
.buoy-green{background:var(--green);border-radius:3px}
.buoy-red{background:var(--red);clip-path:polygon(50% 0,100% 38%,100% 100%,0 100%,0 38%);padding-top:.9rem;height:3rem;margin-top:-.6rem}
.buoy-ghost{border:1.5px dashed var(--ink-soft);color:var(--ink-soft);border-radius:50%;min-width:2.4rem}
.marker-uncharted{border-style:dashed;background:transparent}

/* contact */
.contact{text-align:left}
.mail{
  font-size:clamp(1.6rem,5vw,3.2rem);font-style:italic;font-weight:600;text-decoration:none;
  border-bottom:3px solid var(--water);padding-bottom:.1em;word-break:break-word;
}
.mail:hover{border-color:var(--red)}

/* footer */
.site-footer{
  background:var(--ink);color:var(--paper);text-align:center;padding:3rem 1.5rem 2.4rem;margin-top:2rem;
}
.site-footer p{margin:.3rem 0}
.site-footer .fine{color:#b9c6c7}
.footer-flock{width:200px;height:42px;color:var(--paper);opacity:.85;margin-bottom:1rem}

/* 404 */
.lost{max-width:var(--max);margin:0 auto;padding:5rem 1.5rem 6rem;min-height:60vh}
.lost h1{font-size:clamp(2.6rem,7vw,5rem);font-style:italic}
.lost .big{font-family:var(--mono);color:var(--red);font-size:.85rem;text-transform:uppercase}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .coords{display:none}
  .about-grid{grid-template-columns:1fr;gap:2rem}
}
@media (max-width:560px){
  .site-header{padding:.75rem 1rem;gap:.8rem}
  .brand-word{font-size:1rem;letter-spacing:.14em}
  .brand-mark{width:34px;height:20px}
  .site-header ul{gap:.85rem}
  .site-header nav a{font-size:.72rem;letter-spacing:.08em}
  .hero{padding:2.2rem 1rem 1.5rem}
  .section{padding:3.5rem 1rem}
  .tick.tr,.tick.bl{display:none}
  .marsh{min-height:220px}
}
@media print{.site-header{position:static}.flock,.fog-a,.fog-b{animation:none}}
.p404{display:flex;flex-direction:column;min-height:100vh}.p404 .lost{flex:1;min-height:0}.p404 .site-header{width:100%}