/* ==========================================================================
   Waterline — page styles
   Every rule is scoped under .waterline so nothing leaks into a host
   portfolio. Values are identical to the original Claude artifact.
   Theme: light by default; dark via prefers-color-scheme, or forced with
   data-theme="dark" / data-theme="light" on <html> (or on .waterline itself).
   ========================================================================== */

.waterline{
  --ground:#EEF0EC; --paper:#F7F8F5; --ink:#1E2A24; --muted:#56655D; --rule:#C9D2CB;
  --rail:#6F8CA6; --reed:#4F6B3A; --bill:#9C6F22;
  --display:"Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .waterline:not([data-theme="light"]){
    --ground:#12181A; --paper:#182023; --ink:#E3E8E2; --muted:#9AA8A2; --rule:#2B3538;
    --rail:#9DB4C8; --reed:#9DB57F; --bill:#D8AD5C; color-scheme:dark;
  }
}
:root[data-theme="dark"] .waterline:not([data-theme="light"]),
.waterline[data-theme="dark"]{
  --ground:#12181A; --paper:#182023; --ink:#E3E8E2; --muted:#9AA8A2; --rule:#2B3538;
  --rail:#9DB4C8; --reed:#9DB57F; --bill:#D8AD5C; color-scheme:dark;
}

.waterline, .waterline *{box-sizing:border-box}
.waterline{background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased}
.waterline img{max-width:100%;display:block}
.waterline .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.waterline .mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.waterline .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.waterline h1,.waterline h2,.waterline h3{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0}

/* Hero: the title sits in the overcast sky of the rail frame */
.waterline .hero{position:relative;background:#EDEFEE}
.waterline .hero img{width:100%;height:auto;aspect-ratio:2000/1126;object-fit:cover}
.waterline .hero-text{position:absolute;left:clamp(16px,4vw,56px);top:clamp(14px,4.5vw,64px);color:#1E2A24;max-width:44%}
.waterline .hero-text h1{font-size:clamp(40px,9vw,128px);line-height:.9;letter-spacing:-.01em}
.waterline .hero-text p{margin:.6em 0 0;font-family:var(--display);font-style:italic;font-size:clamp(15px,2vw,26px);line-height:1.2;color:#3C4A43}
.waterline .hero-meta{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:14px;border-bottom:1px solid var(--rule);color:var(--muted)}

/* Statement */
.waterline .statement{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 56px;padding-block:clamp(48px,8vw,96px)}
.waterline .statement p{margin:0 0 1em;max-width:62ch}
.waterline .statement .lede{font-family:var(--display);font-size:clamp(24px,3vw,34px);line-height:1.25;color:var(--ink)}

/* Timeline — 19:20:18 to 19:34:07, 829 seconds, positioned to scale */
.waterline .timeline{padding-block:8px 56px}
.waterline .tl{position:relative;height:84px;margin:18px 6px 0}
.waterline .tl-line{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--ink);opacity:.5}
.waterline .tl a{position:absolute;top:15px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:var(--ground);border:1.5px solid var(--ink);text-decoration:none}
.waterline .tl a:hover,.waterline .tl a:focus-visible{background:var(--bill);border-color:var(--bill);outline:none}
.waterline .tl a.heron{border-color:var(--rail);background:var(--rail)}
.waterline .tl .band{position:absolute;top:44px;border-top:3px solid var(--rule);padding-top:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.waterline .tl .band.h{border-color:var(--rail)}
.waterline .tl-ends{display:flex;justify-content:space-between;color:var(--bill)}

/* Movements */
.waterline .movement{padding-block:clamp(40px,6vw,72px);border-top:1px solid var(--rule)}
.waterline .mv-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px 56px;margin-bottom:36px;align-items:end}
.waterline .mv-head h2{font-size:clamp(34px,5vw,58px);line-height:1}
.waterline .mv-head p{margin:0;max-width:60ch;color:var(--muted)}
.waterline figure{margin:0}
.waterline .frame{display:grid;gap:12px}
.waterline .frame button{all:unset;cursor:zoom-in;display:block}
.waterline .frame button:focus-visible{outline:2px solid var(--bill);outline-offset:4px}
.waterline .cap{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline}
.waterline .cap .t{color:var(--bill)}
.waterline .cap h3{font-size:24px;line-height:1.15}
.waterline .cap p{grid-column:1/-1;margin:0;max-width:60ch;font-size:15.5px;color:var(--muted)}
.waterline .cap .x{grid-column:1/-1;color:var(--muted)}

.waterline .arrival{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:32px 56px;align-items:end}
.waterline .arrival .frame img{aspect-ratio:1126/2000;width:100%;object-fit:cover}
.waterline .arrival .aside{padding-bottom:8px}
.waterline .arrival .aside blockquote{margin:0 0 28px;font-family:var(--display);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.3;max-width:24ch}

.waterline .heron-seq{display:grid;gap:40px}
.waterline .heron-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.waterline .clock{display:inline-block;color:var(--rail);font-family:var(--mono);font-size:12px;margin-left:8px}

.waterline .still{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 28px}
.waterline .still .wide{grid-column:1/-1}

/* Approach */
.waterline .approach{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--rule);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:24px 56px}
.waterline .approach h2{font-size:clamp(32px,4vw,48px)}
.waterline .approach p{margin:0 0 1em;max-width:62ch}
.waterline .tbl-wrap{overflow-x:auto;margin-top:12px}
.waterline table{border-collapse:collapse;width:100%;min-width:520px;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.waterline th,.waterline td{text-align:left;padding:8px 12px 8px 0;border-bottom:1px solid var(--rule);white-space:nowrap}
.waterline th{font-weight:500;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.waterline td.n{color:var(--bill)}

.waterline footer{padding-block:32px 56px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted)}

/* Lightbox */
.waterline dialog{border:0;padding:0;background:transparent;max-width:96vw;max-height:94vh}
.waterline dialog::backdrop{background:rgba(10,14,15,.92)}
.waterline dialog img{max-width:96vw;max-height:88vh;width:auto;height:auto;object-fit:contain}
.waterline dialog .lb-cap{color:#DCE2DD;font-family:var(--mono);font-size:12px;padding-top:10px;display:flex;justify-content:space-between;gap:16px}
.waterline dialog button{all:unset;cursor:pointer;color:#DCE2DD;font-family:var(--mono);font-size:12px;text-decoration:underline}
.waterline dialog button:focus-visible{outline:2px solid #D8AD5C}

@media (max-width:760px){
  /* Export fix: minmax(0,1fr) instead of 1fr so the 520px exposure table scrolls inside .tbl-wrap
     instead of widening the page on phones (the original artifact scrolled sideways at <536px). */
  .waterline .statement,.waterline .mv-head,.waterline .approach,.waterline .arrival{grid-template-columns:minmax(0,1fr)}
  .waterline .heron-row,.waterline .still{grid-template-columns:1fr}
  .waterline .hero{display:flex;flex-direction:column-reverse;background:var(--ground)}
  .waterline .hero-text{position:static;max-width:none;color:var(--ink);padding:20px 16px 8px}
  .waterline .hero-text p{color:var(--muted)}
  .waterline .tl .band{font-size:10px;letter-spacing:.04em}
}
@media (prefers-reduced-motion:no-preference){
  .waterline .frame img{transition:filter .3s}
  .waterline .frame button:hover img{filter:brightness(1.04)}
}