/* ============================================================================
   PSAMMITE — design system.  Dark-first mineral identity.
   Drop-in: <link rel="stylesheet" href="/psammite.css">  (no build step)
   Tokens live in :root (DARK = brand default). Light swaps consistently below.
   The whole system descends from the name: psammite = sandstone —
   silica grains, cemented over deep time into permanent stone.
   ============================================================================ */

/* --- self-hosted fonts (no Google dependency) ------------------------------ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/fraunces-var.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/plexmono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/plexmono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/plexmono-600.woff2') format('woff2')}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/cinzel-600.woff2') format('woff2')}

:root{
  --nav-h:56px;
  /* --- stone ramp: cool mineral gray (wet sandstone / basalt sand) --- */
  --stone-900:#0E1417; --stone-800:#131B1F; --stone-700:#1B252A;
  --stone-600:#26333A; --stone-500:#3A4A52; --stone-400:#5C6C74;
  --stone-300:#8A98A0; --stone-200:#B9C4C9; --stone-100:#DEE5E7; --stone-050:#F2F5F5;

  /* --- silica: the single bright accent (quartz-gold). Never for alerts. --- */
  --silica:#F2B705; --silica-hi:#FFD23F; --silica-dim:#B4841A;

  /* --- semantic coastal data key --- */
  --ebb:#E05545;      /* erosion / loss / retreat */
  --tide:#43B0CF;     /* accretion / gain / water */
  --hold:var(--silica);/* holding / managed — meaning tied to the brand */
  --deep:#2A6E8A;     /* deep water / bathymetry */
  --earth:#B07A3C;    /* buyout / earthen */
  --retreat:#8F7BD6;  /* managed retreat (timelapse only) */

  /* --- roles (DARK default) --- */
  --bg:#131B1F; --ground:#0E1417; --surface:#1B252A; --raised:#26333A;
  --text:#DEE5E7; --text-dim:#8A98A0; --text-faint:#5C6C74;
  --accent:#F2B705; --accent-text:#0E1417;

  /* --- geometry: one radius language, no hard corners --- */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;

  /* --- elevation: shadows replace borders --- */
  --e1:0 1px 2px rgba(0,0,0,.35),0 2px 6px rgba(0,0,0,.28);
  --e2:0 8px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);
  --e3:0 20px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  --shadow-color:rgba(0,0,0,.5);

  /* --- the "sediment line": a divider that fades to nothing at both ends --- */
  --divider:linear-gradient(90deg,transparent,rgba(58,74,82,.7) 12%,rgba(58,74,82,.7) 88%,transparent);
  --hair:rgba(185,196,201,.10);
  --glow:rgba(242,183,5,.10);

  --ease:cubic-bezier(.22,1,.36,1);

  /* --- type: modern serif for gravity, mono for truth --- */
  --font-display:'Fraunces',Spectral,Georgia,serif;
  --font-ui:'Inter',system-ui,-apple-system,sans-serif;
  --font-data:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --font-seal:'Cinzel',serif; /* SEAL ONLY — nowhere else */
}

/* LIGHT — system-light users who haven't explicitly chosen dark (Certificate, long reads) */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F2F5F5; --ground:#E7ECEC; --surface:#FBFCFC; --raised:#EDF1F1;
    --text:#131B1F; --text-dim:#4A5860; --text-faint:#8A98A0;
    --accent:#B4841A; --accent-text:#0E1417;
    --divider:linear-gradient(90deg,transparent,rgba(58,74,82,.28) 12%,rgba(58,74,82,.28) 88%,transparent);
    --hair:rgba(19,27,31,.10); --glow:rgba(242,183,5,.16); --shadow-color:rgba(23,36,46,.18);
    --e1:0 1px 2px rgba(23,36,46,.10),0 2px 8px rgba(23,36,46,.08);
    --e2:0 10px 26px rgba(23,36,46,.12),inset 0 1px 0 rgba(255,255,255,.6);
    --e3:0 22px 54px rgba(23,36,46,.16),inset 0 1px 0 rgba(255,255,255,.7);
  }
}
/* explicit LIGHT (beats dark OS) */
:root[data-theme="light"]{
  --bg:#F2F5F5; --ground:#E7ECEC; --surface:#FBFCFC; --raised:#EDF1F1;
  --text:#131B1F; --text-dim:#4A5860; --text-faint:#8A98A0;
  --accent:#B4841A; --accent-text:#0E1417;
  --divider:linear-gradient(90deg,transparent,rgba(58,74,82,.28) 12%,rgba(58,74,82,.28) 88%,transparent);
  --hair:rgba(19,27,31,.10); --glow:rgba(242,183,5,.16); --shadow-color:rgba(23,36,46,.18);
  --e1:0 1px 2px rgba(23,36,46,.10),0 2px 8px rgba(23,36,46,.08);
  --e2:0 10px 26px rgba(23,36,46,.12),inset 0 1px 0 rgba(255,255,255,.6);
  --e3:0 22px 54px rgba(23,36,46,.16),inset 0 1px 0 rgba(255,255,255,.7);
}
/* explicit DARK (beats light OS) — restates the brand default */
:root[data-theme="dark"]{
  --bg:#131B1F; --ground:#0E1417; --surface:#1B252A; --raised:#26333A;
  --text:#DEE5E7; --text-dim:#8A98A0; --text-faint:#5C6C74;
  --accent:#F2B705; --accent-text:#0E1417;
  --divider:linear-gradient(90deg,transparent,rgba(58,74,82,.7) 12%,rgba(58,74,82,.7) 88%,transparent);
  --hair:rgba(185,196,201,.10); --glow:rgba(242,183,5,.10); --shadow-color:rgba(0,0,0,.5);
}

/* ---------------------------------------------------------------------------
   BASE
   --------------------------------------------------------------------------- */
*{box-sizing:border-box}
/* ============ DEVICE-PERFECT: no overflow anywhere, safe-area (Dynamic Island/notch) aware ============ */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}         /* never a horizontal scrollbar on any device */
*,*::before,*::after{min-width:0}                  /* flex/grid children can shrink → no blowout */
img,svg,canvas,video,iframe,table{max-width:100%}
/* the safe-area inset amounts, usable anywhere */
:root{--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
      --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px)}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:400 17px/1.7 var(--font-ui);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
img{max-width:100%}
h1,h2,h3{text-wrap:balance;margin:0;overflow-wrap:anywhere}
/* long unbroken strings (URLs, coords) never force a scroll */
p,li,td,th,figcaption,.data{overflow-wrap:break-word}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* GRAIN — the mineral tooth on large surfaces. Static, near-zero cost. */
.psm-grain::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY — the family rhythm: dim mono eyebrow -> light Fraunces -> body
   --------------------------------------------------------------------------- */
.eyebrow{font:600 12px/1 var(--font-data);letter-spacing:.28em;text-transform:uppercase;color:var(--silica-dim)}
.title{font:340 clamp(28px,4.2vw,44px)/1.08 var(--font-display);font-optical-sizing:auto;letter-spacing:-.01em}
.lede{color:var(--text-dim);font-size:19px;line-height:1.6;max-width:62ch}
.data{font-family:var(--font-data);font-variant-numeric:tabular-nums}
.reading{max-width:68ch}
/* display "cut from wet sandstone" */
.text-quarried{
  background:linear-gradient(176deg,var(--stone-050),var(--stone-200) 60%,var(--stone-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
:root[data-theme="light"] .text-quarried{background:linear-gradient(176deg,var(--stone-800),var(--stone-600) 60%,var(--stone-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .text-quarried{background:linear-gradient(176deg,var(--stone-800),var(--stone-600) 60%,var(--stone-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}}

/* ---------------------------------------------------------------------------
   THE SEDIMENT LINE — the ONLY sanctioned divider. Never `border:1px solid`.
   --------------------------------------------------------------------------- */
.sediment{height:1px;border:0;background:var(--divider)}
/* stack dividers between list rows without a hard rule */
.rows > * + *{background-image:var(--divider);background-repeat:no-repeat;background-position:top;background-size:100% 1px}

/* ---------------------------------------------------------------------------
   STRATUM CARD — presence by light, not by line
   --------------------------------------------------------------------------- */
.stratum{
  background:var(--surface);border-radius:var(--r);padding:26px 24px;
  box-shadow:var(--e1);border:1px solid var(--hair);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
}
.stratum:hover{transform:translateY(-4px);box-shadow:var(--e2);border-color:color-mix(in srgb,var(--silica) 40%,transparent)}
.stratum .k{font:600 11px/1 var(--font-data);letter-spacing:.2em;text-transform:uppercase;color:var(--silica-dim);display:block;margin-bottom:12px}
.stratum h3{font:400 20px/1.2 var(--font-display);margin-bottom:8px}
.stratum p{color:var(--text-dim);font-size:15px;line-height:1.6;margin:0}

/* ---------------------------------------------------------------------------
   BUTTONS — pills, never corners
   --------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--font-ui);
  padding:14px 24px;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease),color .3s var(--ease)}
.btn-silica{background:linear-gradient(180deg,var(--silica-hi),var(--silica));color:var(--accent-text);box-shadow:var(--e1)}
.btn-silica:hover{transform:translateY(-2px);box-shadow:var(--e2),0 6px 26px -6px var(--silica)}
.btn-ghost{background:var(--raised);color:var(--text)}
.btn-ghost:hover{color:var(--accent);transform:translateY(-2px)}
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px var(--glow),var(--e1)}

/* ---------------------------------------------------------------------------
   FINDER (address input) — soft pill, no bordered box
   --------------------------------------------------------------------------- */
.finder{display:flex;gap:8px;align-items:center;background:var(--surface);border-radius:var(--r-pill);
  padding:6px 6px 6px 18px;box-shadow:var(--e2);border:1px solid var(--hair);max-width:520px}
.finder input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:400 16px var(--font-ui);outline:none}
.finder input::placeholder{color:var(--text-faint)}

/* ---------------------------------------------------------------------------
   BADGES — semantic, soft-filled pills (never hard alarm boxes)
   --------------------------------------------------------------------------- */
.badge{font:600 12px/1 var(--font-data);letter-spacing:.08em;text-transform:uppercase;padding:9px 14px;border-radius:var(--r-pill)}
.badge.ebb{background:color-mix(in srgb,var(--ebb) 18%,transparent);color:var(--ebb)}
.badge.tide{background:color-mix(in srgb,var(--tide) 18%,transparent);color:var(--tide)}
.badge.hold{background:color-mix(in srgb,var(--silica) 20%,transparent);color:var(--silica)}

/* ---------------------------------------------------------------------------
   THE COASTLINE NAV — a barrier-island edge, not a rectangle.
   Markup:
     <header class="nav">
       <div class="nav-body"><div class="nav-inner"> ...links... </div></div>
       <svg class="nav-coast" viewBox="0 0 1440 26" preserveAspectRatio="none" aria-hidden="true">
         <path d="M0,0 L1440,0 L1440,9 C1320,15 1200,7 1080,11 C960,15 900,20 780,17
                  C660,14 600,7 480,10 C360,13 240,21 120,16 C72,14 36,12 0,13 Z"/>
       </svg>
     </header>
   Keep the amplitude LOW — a dune profile you feel more than see. Each deploy
   may vary the path slightly; no two shores are identical.
   --------------------------------------------------------------------------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:200}
/* THE COASTLINE NAV — full-bleed liquid glass; the SST reads through it.
   carros506 technique: the glass is a MASKED background layer whose own bottom
   edge IS the coastline — ONE undulating edge, never a rectangle bar plus a
   separate band/line below it. A single waterline is stroked along that exact
   edge. The wave lives in the bottom band (padding-bottom); content rides above. */
.nav-body{
  position:relative;margin:0;max-width:none;
  padding-top:var(--safe-t);      /* glass extends under the status bar */
  padding-bottom:13px;            /* the wave band — the coastline lives here */
}
.nav-glass{position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--stone-900) 72%,transparent),
    color-mix(in srgb,var(--stone-900) 48%,transparent));
  backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--stone-050) 6%,transparent);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));   /* depth follows the wave, not a box */
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;   /* mask image set inline by mountNav */
}
.nav-inner{position:relative;z-index:2;   /* content rides ABOVE the masked glass */
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:43px;max-width:1600px;margin:0 auto;
  padding-left:max(clamp(18px,4vw,48px),var(--safe-l));
  padding-right:max(clamp(18px,4vw,48px),var(--safe-r))}
.nav-left{display:flex;align-items:center;gap:24px;min-width:0}
.nav-right{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{position:relative;color:var(--text-dim);
  font:500 13.5px/1 var(--font-ui);letter-spacing:.005em;
  text-decoration:none;padding:16px 0;transition:color .25s var(--ease);white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-links a.on{color:var(--text)}
.nav-links a.on::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  bottom:10px;width:5px;height:5px;border-radius:50%;background:var(--silica);
  box-shadow:0 0 8px color-mix(in srgb,var(--silica) 70%,transparent)}   /* silica pip on the active link */
/* the ONE silica action — a quiet pill (KNOW: check your address) */
.nav-cta{font:600 13px/1 var(--font-ui);letter-spacing:.01em;padding:9px 16px;border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--silica-hi),var(--silica));color:var(--accent-text);
  text-decoration:none;white-space:nowrap;box-shadow:var(--e1);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.nav-cta:hover{transform:translateY(-1px);box-shadow:var(--e2),0 6px 22px -8px var(--silica)}
/* the erosion waterline — ONE subtle red line stroked along the exact masked
   edge (same geometry as the mask, so it registers). Overlays the glass; it is
   the shore we're showing, never a filled band and never a hard rule. */
.nav-coast{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.nav-coast path{fill:none;stroke:color-mix(in srgb,var(--ebb) 40%,transparent);
  stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round}
body.psm-doc{padding-top:var(--nav-h)}
/* the wordmark — quarried mineral (cut from wet sandstone), Fraunces lowercase; silica dot */
.psm-wordmark{font:340 22px/1 var(--font-display);font-optical-sizing:auto;letter-spacing:.005em;
  text-decoration:none;white-space:nowrap;
  background:linear-gradient(176deg,var(--stone-050),var(--stone-200) 55%,var(--stone-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.psm-wordmark .dot{-webkit-text-fill-color:var(--silica);color:var(--silica)}
:root[data-theme="light"] .psm-wordmark{
  background:linear-gradient(176deg,var(--stone-800),var(--stone-600) 60%,var(--stone-500));
  -webkit-background-clip:text;background-clip:text}
/* nav search (shared with the storefront finder) */
.nav-search{display:none;align-items:center;gap:8px;background:var(--surface);border-radius:var(--r-pill);padding:7px 7px 7px 16px;box-shadow:var(--e1);border:1px solid var(--hair);max-width:340px;flex:1}
.nav-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font:400 14px var(--font-ui);outline:none}
.nav-search input::placeholder{color:var(--text-faint)}
.nav-search .btn{padding:9px 16px;font-size:13px}
/* mobile: soft menu pill, never a hard hamburger box; nav stays present */
.nav-menu{display:none;background:var(--raised);color:var(--text);border:0;border-radius:var(--r-pill);
  padding:9px 16px;font:600 12px/1 var(--font-data);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:var(--e1)}
@media(max-width:820px){
  .nav-links{position:absolute;top:100%;right:clamp(20px,5vw,72px);flex-direction:column;align-items:flex-start;gap:14px;
    background:var(--surface);padding:20px 24px;border-radius:var(--r);box-shadow:var(--e2);border:1px solid var(--hair);display:none}
  .nav-links.open{display:flex}
  .nav-menu{display:inline-block}
  .nav-search{display:none!important}
}

/* ---------------------------------------------------------------------------
   FOOTER (shared)
   --------------------------------------------------------------------------- */
.psm-footer{background:var(--ground);padding:56px clamp(20px,5vw,72px) 64px;margin-top:80px}
.psm-footer-in{max-width:min(1560px,94vw);margin:0 auto}
.psm-footer .fmark{font:340 22px/1 var(--font-display);color:var(--text)}
.psm-footer .fmark .dot{color:var(--silica)}
.psm-footer .flinks{display:flex;flex-wrap:wrap;gap:12px 26px;margin:22px 0 20px}
.psm-footer .flinks a{color:var(--text-dim);font:500 14px/1 var(--font-ui);text-decoration:none}
.psm-footer .flinks a:hover{color:var(--text)}
.psm-footer .fdisc{color:var(--text-faint);font:400 12px/1.6 var(--font-data);max-width:80ch}

/* ---------------------------------------------------------------------------
   ATMOSPHERE — the grain tooth + a single silica shoal-glow
   --------------------------------------------------------------------------- */
.psm-grain-ground::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E")}
.psm-glow{position:absolute;left:50%;top:-6%;width:min(1200px,120vw);height:820px;z-index:0;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(ellipse at center,var(--glow),transparent 62%)}
/* hero grain-field canvas (psammite.js draws into it) */
.psm-grainfield{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.75}

/* the quarried-stone display gradient (headlines cut from wet sandstone) */
.text-quarried{background:linear-gradient(176deg,var(--stone-050),var(--stone-200) 60%,var(--stone-400));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme="light"] .text-quarried{background:linear-gradient(176deg,var(--stone-800),var(--stone-600) 60%,var(--stone-500));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}