/* ============================================================
   Amity Coast — site styles.
   Tokens: harbor chart. Cool paper ground with a graticule,
   channel teal for links and markers, buoy red for the one
   point on the chart that matters.
   Shared by index.html, privacy.html, terms.html and 404.html.
   No external fonts, no scripts: the CSP is script-src 'none'.
   ============================================================ */
:root {
  --ground:      #F3F5F3;
  --ground-sunk: #E6EAE7;
  --ink:         #14191B;
  --ink-soft:    #3C464A;
  --steel:       #6A757A;
  --rail:        #B8C1C0;
  --rail-faint:  #D2D9D7;
  --grid:        #DCE2DF;
  --channel:     #1F6B72;
  --buoy:        #B6482B;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --f-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --f-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:#0E1315; --ground-sunk:#151B1E; --ink:#E3E8E6; --ink-soft:#A6B0B3;
    --steel:#8A959A; --rail:#38434A; --rail-faint:#222A2F; --grid:#1A2226;
    --channel:#5FB6BD; --buoy:#D9694A;
  }
}

html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }

body {
  background-color: var(--ground);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; text-wrap: balance; }
a { color: var(--channel); text-decoration: none; border-bottom: 1px solid var(--channel); }
a:hover { color: var(--ink); border-bottom-color: var(--ink); }
a:focus-visible { outline: 2px solid var(--channel); outline-offset: 3px; }
address { font-style: normal; }

.wrap { max-width: 68rem; margin: 0 auto; padding-inline: var(--gutter); }

/* Masthead ------------------------------------------------- */
.masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.4rem 0 .9rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
.masthead b { color: var(--ink); font-weight: 600; }
.masthead b a { color: inherit; border: 0; }
.masthead nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.masthead nav a { border: 0; color: var(--steel); }
.masthead nav a:hover { color: var(--ink); }
.masthead-rule { height: 1px; background: var(--rail); }

/* Hero ----------------------------------------------------- */
.hero { padding: 4.5rem 0 3rem; }
.wordmark { font-size: clamp(3.4rem, 10vw, 7.5rem); line-height: .92; letter-spacing: -.02em; }
.eyebrow {
  margin-top: 1.6rem; font-family: var(--f-mono); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--steel);
}
.eyebrow span { color: var(--channel); }
.thesis { margin-top: 2.8rem; font-size: clamp(1.55rem, 3vw, 2.2rem); line-height: 1.25; max-width: 38rem; }
.lede { margin-top: 1.4rem; max-width: var(--measure); color: var(--ink-soft); font-size: 1.1rem; }

/* Figures -------------------------------------------------- */
.figwrap { margin: 2.6rem 0 0; overflow-x: auto; padding-bottom: .4rem; }
.fig { display: block; width: 100%; height: auto; }
.fig text { font-family: var(--f-mono); fill: var(--steel); font-size: 11px; letter-spacing: .08em; }
.fig .land { fill: var(--ground-sunk); stroke: none; }
.fig .shore { fill: none; stroke: var(--steel); stroke-width: 1.2; }
.fig .depth { fill: none; stroke: var(--rail-faint); stroke-width: 1; }
.fig .channel { fill: none; stroke: var(--channel); stroke-width: 1.2; stroke-dasharray: 6 5; }
.fig .berth { fill: var(--ground); stroke: var(--ink-soft); stroke-width: 1; }
.fig .berth-open { stroke-dasharray: 3 3; }
.fig .lbl { fill: var(--ink); }
.fig .buoy { fill: var(--buoy); }
.fig .rose { fill: none; stroke: var(--rail); stroke-width: 1; }
.caption {
  margin-top: .6rem; font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--steel);
}

/* Dividers + sections -------------------------------------- */
.divider { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 3rem; color: var(--rail); }
.divider .bar { flex: 1; height: 1px; background: var(--rail); }
.divider .tick { width: 1px; height: 10px; background: var(--rail); }
.divider svg { display: block; }
section { padding: 0 0 4rem; }
.chip {
  display: inline-flex; align-items: baseline; gap: .9rem;
  font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
.chip-n { color: var(--channel); }
.h2 { margin-top: 1rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.2; max-width: 40rem; }
.body { margin-top: 1.1rem; max-width: var(--measure); color: var(--ink-soft); }
.body strong { color: var(--ink); font-weight: 600; }

/* Product cards -------------------------------------------- */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px; background: var(--rail); border: 1px solid var(--rail); margin: 2.2rem 0 0;
}
.card { background: var(--ground); padding: 1.4rem 1.3rem 1.5rem; }
.card .tag {
  display: block; font-family: var(--f-mono); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--channel);
}
.card h3 { margin-top: .5rem; font-size: 1.3rem; }
.card .site { display: block; font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em; margin-top: .35rem; color: var(--steel); }
.card p { margin-top: .8rem; color: var(--ink-soft); font-size: .98rem; }

/* Numbered list -------------------------------------------- */
.list { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rail); }
.list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rail); }
.list .tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--channel); padding-top: .35rem; }
.list h3 { font-size: 1.15rem; }
.list p { margin-top: .35rem; color: var(--ink-soft); font-size: .98rem; max-width: var(--measure); }

/* Company facts -------------------------------------------- */
.facts {
  margin: 2.2rem 0 0; display: grid; grid-template-columns: max-content 1fr;
  gap: .7rem 2rem; border-top: 1px solid var(--rail); padding-top: 1.4rem; max-width: 44rem;
}
.facts dt { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); padding-top: .3rem; }
.facts dd { margin: 0; }

/* Footer --------------------------------------------------- */
footer {
  border-top: 1px solid var(--rail); padding: 2.2rem 0 3rem;
  display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  font-size: .86rem; color: var(--steel);
}
footer nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
footer nav a { border: 0; color: var(--ink-soft); }
footer nav a:hover { color: var(--ink); }

/* Legal pages + 404 ---------------------------------------- */
.legal { max-width: 44rem; padding: 3rem 0 4rem; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; }
.legal .meta { margin-top: .8rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
.legal h2 { margin-top: 2.4rem; font-size: 1.35rem; }
.legal p, .legal li { margin-top: .8rem; color: var(--ink-soft); }
.legal ul { padding-left: 1.2rem; }
.nf { padding: 6rem 0 8rem; max-width: 40rem; }

@media (max-width: 40rem) {
  .facts { grid-template-columns: 1fr; gap: .2rem 0; }
  .facts dt { margin-top: .9rem; }
  .list li { grid-template-columns: 1fr; gap: .2rem; }
}