:root{
  --graphite:#23272B; --teal:#2AA79B; --teal-bright:#3BC4B6;
  --frost:#F5F7F8; --slate:#6B7680; --mist:#9AA6AD; --line:#DDE2E5;
  --display:'Exo 2',-apple-system,'Segoe UI',Arial,sans-serif;
  --body:'Archivo',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --mono:'Archivo',ui-monospace,'Cascadia Mono',Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
html{background:var(--frost)}
body{color:var(--graphite);font-family:var(--body);line-height:1.65;font-size:17px}
/* page banner: fixed pseudo-element instead of background-attachment:fixed, which iOS Safari mis-sizes
   Layers (top to bottom): 1) teal bloom - large ellipse scaling with viewport (90%+ width)
   2) tight teal core - adds depth at waterline, 3) PNG - carries the smooth vertical
   frost to teal gradient. All gradients use %/viewport-relative sizes so they scale
   gracefully from 320px to 4K. No hairline; PNG blends continuously. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background-color:var(--frost);
  background-image:
    radial-gradient(ellipse 92% 68% at 50% 112%, rgb(42 167 155 / .095) 0%, rgb(42 167 155 / 0) 62%),
    radial-gradient(ellipse 58% 38% at 50% 105%, rgb(42 167 155 / .055) 0%, transparent 68%),
    url(./ebbwater-banner-light.png);
  background-position: center bottom, center bottom, center bottom;
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
html[data-theme="dark"]{color-scheme:dark}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:2px}
.wrap{max-width:1440px;margin:0 auto;padding:0 clamp(24px,3vw,48px)}
@media (min-width:1600px){.wrap{max-width:1520px}}

/* sticky header: full-width bar (blur + translucent bg) with inner .wrap column */
.site-head{position:sticky;top:0;z-index:60;background:rgb(245 247 248 / .82);backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5)}
.head-in{padding-top:20px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* scroll progress bar under the header; scaleX(0) base keeps it hidden where scroll timelines are unsupported */
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(to right,var(--graphite) 50%,var(--teal) 50%);transform:scaleX(0);transform-origin:0 50%}
.brand{display:flex;align-items:center;gap:14px}
.brand svg{display:block}
.brand-name{font-family:var(--display);font-weight:500;letter-spacing:-.04em;font-size:18px;color:var(--graphite)}
.brand-name .accent{color:var(--teal)}

.hero{padding-top:80px;padding-bottom:72px}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.2vw,52px);line-height:1.12;letter-spacing:-.03em;max-width:24ch;color:#fff}
.hero p{margin-top:24px;max-width:68ch;color:var(--slate);font-size:18.5px}
.rise{display:block;width:64px;height:5px;background:linear-gradient(to right,var(--graphite) 45%,var(--teal) 45%);margin-bottom:28px}

section.wrap{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--line)}
/* sections whose content sits in a .panel bubble drop the hairline separator */
section.wrap:has(>.panel){border-top:0}
.panel{border:1px solid var(--line);border-radius:12px;background:#fff;padding:34px 32px}
.panel .entry{background:var(--frost)}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;color:#fff;text-transform:uppercase;margin-bottom:22px}
.eyebrow-panel{display:inline-block;padding:14px 22px;margin-bottom:28px}
.eyebrow-panel .eyebrow{margin-bottom:0}
@media (max-width:520px){.eyebrow-panel{padding:12px 18px}}

.entry{border:1px solid var(--line);border-radius:12px;background:#fff;padding:34px 32px}
.entry+.entry{margin-top:28px}
.badge-dev{color:#5B6770;background:#EEF1F3;border-color:#D8DEE3}
@media (max-width:520px){.entry,.panel{padding:26px 22px}}
.entry-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.entry-name{font-family:var(--display);font-weight:500;font-size:24px;letter-spacing:-.02em;color:#fff}
.badge{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#0E6E64;background:#E2F4F1;border:1px solid #BEE5E0;border-radius:999px;padding:4px 12px}
.entry p{margin-top:14px;color:var(--graphite);max-width:72ch}
.meta{margin-top:26px;padding-top:22px;border-top:1px dashed var(--line);display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px 36px}
.meta div{font-family:var(--mono);font-size:13px;color:var(--graphite)}
.meta span{display:block;font-size:11.5px;letter-spacing:.1em;color:#fff;text-transform:uppercase;margin-bottom:3px}
.entry-link{display:inline-block;margin-top:24px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.06em}

.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px 48px;margin-top:8px}
@media (min-width:1024px){.principles{grid-template-columns:repeat(3,1fr);gap:40px 56px}}
.principles h3{font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:-.02em;margin-bottom:8px;color:#fff}
.principles p{color:var(--slate);font-size:15.5px}

footer{padding:24px 0 48px;border:0;border-top:0;box-shadow:none}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot .panel{padding:14px 20px;display:flex;align-items:center;gap:26px;color:var(--slate);font-size:14px}
@media (max-width:520px){.foot .panel{padding:12px 16px}}
/* remove any hairline directly above the footer on every page */
main > section:last-of-type{border-bottom:0}
section.wrap:last-of-type{border-bottom:0}
footer::before, footer::after{content:none !important}
.foot a{color:var(--slate)}

.brand{text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
nav.site{display:flex;gap:30px}
nav.site a{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--graphite);text-transform:uppercase;padding-bottom:4px;border-bottom:2px solid transparent}
nav.site a:hover{text-decoration:none;border-bottom-color:var(--mist)}
nav.site a[aria-current="page"]{color:var(--teal);border-bottom-color:var(--teal)}
.contact-card{border:1px solid var(--line);border-radius:12px;background:#fff;padding:34px 32px;max-width:760px}
.contact-email{font-family:var(--mono);font-size:clamp(18px,3vw,24px);font-weight:500}
.contact-card p{margin-top:14px;color:var(--slate);font-size:15.5px}
.prose{max-width:80ch}
.prose .updated{font-family:var(--mono);font-size:13px;color:var(--slate)}
.prose h2{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.02em;margin-top:38px;margin-bottom:4px;color:#fff}
.prose p{margin-top:12px;color:var(--graphite)}
.prose ul{margin-top:14px;padding-left:22px}
.prose li{margin-top:10px}
.prose strong{font-weight:600}

.watermark{position:fixed;right:26px;bottom:20px;z-index:10;display:flex;align-items:center;gap:10px;opacity:.22;user-select:none;text-decoration:none}
.watermark:hover{text-decoration:none;opacity:.45}
.watermark:focus-visible{opacity:.45}
.watermark svg{display:block}
.watermark-name{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:-.04em;color:var(--graphite)}
.watermark-name .accent{color:var(--teal)}
html[data-theme="dark"] .watermark-name{color:#E8ECEF}
html[data-theme="dark"] .watermark-name .accent{color:var(--teal-bright)}

/* theme toggle */
.header-actions{display:flex;align-items:center;gap:28px}
.theme-toggle{appearance:none;border:1px solid var(--line);background:#fff;color:var(--graphite);width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .2s,border-color .2s,color .2s}
.theme-toggle:hover{border-color:var(--mist);background:var(--frost)}
.theme-toggle:active{transform:scale(.97)}
.theme-toggle svg{display:block}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-reduced-motion: reduce){.theme-toggle{transition:none}.theme-toggle:active{transform:none}}

/* reactive brand mark */
.logo-graphite{fill:#23272B}
.logo-teal{fill:#2AA79B}
html[data-theme="dark"] .logo-graphite{fill:#F5F7F8}
html[data-theme="dark"] .logo-teal{fill:#3BC4B6}

/* dark theme overrides */
html[data-theme="dark"]{background:#1A1E21}
html[data-theme="dark"] body{color:#E8ECEF}
html[data-theme="dark"] body::before{
  background-color:#1A1E21;
  background-image:
    radial-gradient(ellipse 92% 72% at 50% 110%, rgb(59 196 182 / .18) 0%, rgb(59 196 182 / 0) 62%),
    radial-gradient(ellipse 62% 42% at 50% 104%, rgb(42 167 155 / .12) 0%, transparent 68%),
    url(./ebbwater-banner-dark.png);
  background-position: center bottom, center bottom, center bottom;
  background-size: auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
html[data-theme="dark"] .site-head{background:rgb(26 30 33 / .82)}
html[data-theme="dark"] .progress{background:linear-gradient(to right,#E8ECEF 50%,var(--teal-bright) 50%)}
html[data-theme="dark"] a{color:var(--teal-bright)}
html[data-theme="dark"] .brand-name{color:var(--frost)}
html[data-theme="dark"] .brand-name .accent{color:var(--teal-bright)}
html[data-theme="dark"] .hero p{color:#9AA6AD}
html[data-theme="dark"] .rise{background:linear-gradient(to right,#E8ECEF 45%,var(--teal-bright) 45%)}
html[data-theme="dark"] section.wrap{border-top-color:#2F363B}
html[data-theme="dark"] .hero h1{color:#fff}
html[data-theme="dark"] .eyebrow{color:#fff}
html[data-theme="dark"] .entry-name{color:#fff}
html[data-theme="dark"] .principles h3{color:#fff}
html[data-theme="dark"] .prose h2{color:#fff}
html[data-theme="dark"] .panel{background:#23272B;border-color:#2F363B}
html[data-theme="dark"] .panel .entry{background:#1A1E21}
html[data-theme="dark"] .entry{background:#23272B;border-color:#2F363B}
html[data-theme="dark"] .entry p{color:#E8ECEF}
html[data-theme="dark"] .meta{border-top-color:#2F363B}
html[data-theme="dark"] .meta div{color:#E8ECEF}
html[data-theme="dark"] .meta span{color:#fff}
html[data-theme="dark"] .badge{color:#8EE0D6;background:#14302E;border-color:#1E4A46}
html[data-theme="dark"] .badge-dev{color:#B8C5CE;background:#1E2428;border-color:#2F363B}
html[data-theme="dark"] .principles p{color:#9AA6AD}
html[data-theme="dark"] footer{border-top:0}
html[data-theme="dark"] .foot .panel{color:#8A9AA3}
html[data-theme="dark"] .foot a{color:#8A9AA3}
html[data-theme="dark"] nav.site a{color:#E8ECEF}
html[data-theme="dark"] nav.site a:hover{border-bottom-color:#4A555E}
html[data-theme="dark"] nav.site a[aria-current="page"]{color:var(--teal-bright);border-bottom-color:var(--teal-bright)}
html[data-theme="dark"] .contact-card{background:#23272B;border-color:#2F363B}
html[data-theme="dark"] .contact-card p{color:#9AA6AD}
html[data-theme="dark"] .prose p{color:#E8ECEF}
html[data-theme="dark"] .prose .updated{color:#8A9AA3}
html[data-theme="dark"] .prose li{color:#E8ECEF}
html[data-theme="dark"] .theme-toggle{background:#23272B;border-color:#2F363B;color:#E8ECEF}
html[data-theme="dark"] .theme-toggle:hover{background:#2C3136;border-color:#3A444C}
html[data-theme="dark"] a:focus-visible,html[data-theme="dark"] button:focus-visible{outline-color:var(--teal-bright)}

/* desktop spread - use more width and air on large viewports */
@media (min-width:1200px){
  .head-in{padding-top:24px;padding-bottom:20px}
  .hero{padding-top:96px;padding-bottom:88px}
  .hero h1{font-size:clamp(36px,4vw,52px)}
  section.wrap{padding-top:80px;padding-bottom:80px}
}

/* banner scaling gradients: responsive tuning - bloom and wash scale with viewport
   Mobile compresses the bloom vertically to keep hero text legible; large screens
   expand it for a more immersive depth. The PNG remains the fallback. */
@media (max-width: 640px){
  body::before{
    background-image:
      radial-gradient(ellipse 130% 52% at 50% 108%, rgb(42 167 155 / .075) 0%, transparent 62%),
      radial-gradient(ellipse 78% 32% at 50% 103%, rgb(42 167 155 / .04) 0%, transparent 68%),
      url(./ebbwater-banner-light.png);
  }
  html[data-theme="dark"] body::before{
    background-image:
      radial-gradient(ellipse 130% 56% at 50% 106%, rgb(59 196 182 / .14) 0%, transparent 62%),
      radial-gradient(ellipse 80% 36% at 50% 102%, rgb(42 167 155 / .08) 0%, transparent 68%),
      url(./ebbwater-banner-dark.png);
  }
}
@media (min-width:1600px){
  body::before{
    background-image:
      radial-gradient(ellipse 88% 74% at 50% 114%, rgb(42 167 155 / .11) 0%, transparent 60%),
      radial-gradient(ellipse 54% 42% at 50% 106%, rgb(42 167 155 / .065) 0%, transparent 65%),
      url(./ebbwater-banner-light.png);
  }
  html[data-theme="dark"] body::before{
    background-image:
      radial-gradient(ellipse 88% 78% at 50% 112%, rgb(59 196 182 / .20) 0%, transparent 60%),
      radial-gradient(ellipse 56% 46% at 50% 105%, rgb(42 167 155 / .14) 0%, transparent 65%),
      url(./ebbwater-banner-dark.png);
  }
}

/* theme-aware images: fade on swap to avoid flash */
img[data-light-src]{transition:opacity .15s}
@media (prefers-reduced-motion: reduce){img[data-light-src]{transition:none}}

/* ------------------------------------------------------------------
   Motion: pure CSS, no JS. Entrance motion is gated behind
   prefers-reduced-motion; scroll-driven motion is additionally gated
   behind @supports so unsupported browsers render static content.
   Hidden "from" states only ever exist inside these guards.
------------------------------------------------------------------- */

/* hero headline: masked word-by-word rise on page load */
.hero .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.hero .w>span{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .hero .w>span{animation:word-rise .85s cubic-bezier(.19,.7,.22,1) both;animation-delay:calc(var(--i,0)*70ms + .1s)}
  .hero .rise{animation:rise-grow .7s cubic-bezier(.19,.7,.22,1) both;transform-origin:0 50%}
  .hero p{animation:fade-up .8s ease-out .55s both}
}
@keyframes word-rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes rise-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* scroll-driven: progress bar, header shadow, hero drift, section reveals */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .progress{animation:progress-fill linear both;animation-timeline:scroll(root)}
    .site-head{animation:head-shadow linear both;animation-timeline:scroll(root);animation-range:0px 140px}
    html[data-theme="dark"] .site-head{animation-name:head-shadow-dark}
    .hero{animation:hero-drift linear both;animation-timeline:view();animation-range:exit 0% exit 90%}
    .panel,.contact-card,.prose h2,.prose p,.prose ul{animation:reveal-rise .8s ease-out both;animation-timeline:view();animation-range:entry 0% entry 45%}
    .eyebrow{animation:eyebrow-slide .7s ease-out both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}
@keyframes progress-fill{from{transform:scaleX(0)}to{transform:scaleX(0.5)}}
@keyframes head-shadow{from{box-shadow:0 1px 0 rgb(35 39 43 / 0)}to{box-shadow:0 1px 0 var(--line),0 16px 32px -20px rgb(35 39 43 / .25)}}
@keyframes head-shadow-dark{from{box-shadow:0 1px 0 rgb(0 0 0 / 0)}to{box-shadow:0 1px 0 #2F363B,0 16px 32px -20px rgb(0 0 0 / .65)}}
@keyframes hero-drift{from{opacity:1;transform:translateY(0)}to{opacity:.1;transform:translateY(-32px)}}
@keyframes reveal-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes eyebrow-slide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:translateX(0)}}