/* Keith Systems: Central Coast layer (2026-10-11 redesign).
   Hand-built art only: coast map (real lat/lon), marine layer, vineyard rows, segmentation diagram. */
:root { --sea: #08262e; --sage: #2b4a3f; --coral: #E58A74; }

/* hero */
.hero-coast { padding-bottom: 0; isolation: isolate; }
.hero-coast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 14vw, 200px);
  background: url(/images/art/hills.svg) bottom / 100% 100% no-repeat; z-index: -1; pointer-events: none; }
.hero-coast .hero-inner { align-items: start; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.hero-coast h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); max-width: 17ch; text-wrap: balance; }
.hero-coast h1 em { font-style: normal; color: var(--amber); }
.kicker { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 600; color: var(--text); margin: 0 0 .9rem; max-width: 34ch; line-height: 1.3; }
.map-frame { position: relative; border: 1px solid var(--line); background: #0c171b; }
.map-frame .frame-tag { position: absolute; left: 0; bottom: 0; z-index: 2; }
.map-caption { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .7rem; }
.map-caption a { color: var(--amber); }

/* ticker of real places */
.places { border-block: 1px solid var(--line-soft); background: var(--ink-2); overflow: hidden; }
.places ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; padding: 1rem 0; font-family: var(--mono); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.places li::before { content: "/"; color: var(--amber); margin-right: .6rem; }
.places a { text-decoration: none; } .places a:hover { color: var(--amber); }

/* niche band */
.niche { position: relative; }
.niche-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.niche h2 { margin-bottom: 1rem; max-width: 20ch; }
.niche p { color: var(--muted); max-width: 58ch; }
.niche p + p { margin-top: .9rem; }
.niche strong { color: var(--text); }
.seg-figure { margin: 0; border: 1px solid var(--line); background: #0c171b; }
.seg-figure img, .seg-figure svg { width: 100%; height: auto; display: block; }
.seg-figure figcaption { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: .7rem .9rem; border-top: 1px solid var(--line); }
.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.chip-list li { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); padding: .35rem .7rem; font-family: var(--mono); font-size: .74rem; color: var(--text); background: var(--ink-2); }
.chip-list .ico { width: 16px; height: 16px; color: var(--amber); }
.niche .scope-mini { margin-top: 1.2rem; font-size: .88rem; border-left: 2px solid var(--amber); padding-left: .9rem; }

/* icon cards */
.ico { width: 26px; height: 26px; color: var(--amber); flex: none; }
.icard-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.icard-grid li { display: flex; background: var(--ink); }
.icard { display: flex; flex-direction: column; gap: .6rem; width: 100%; padding: 1.5rem 1.4rem 1.6rem; text-decoration: none; color: var(--text); position: relative; transition: background .15s; }
.icard:hover, .icard:focus-visible { background: var(--ink-2); }
.icard:hover .icard-more { color: var(--amber-lift); }
.icard-title { font-family: var(--display); font-weight: 600; font-size: 1.18rem; line-height: 1.2; }
.icard-text { color: var(--muted); font-size: .94rem; }
.icard-more { margin-top: auto; padding-top: .3rem; color: var(--amber); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.icard-tag { position: absolute; top: 1.2rem; right: 1.2rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; color: var(--muted); }

/* scenic band (vineyards + marine layer) */
.scene { position: relative; min-height: clamp(260px, 34vw, 420px); display: flex; align-items: flex-end;
  background: var(--ink) url(/images/art/vineyard-fog.svg) center bottom / cover no-repeat; border-block: 1px solid var(--line-soft); }
.scene .wrap { position: relative; z-index: 1; padding-block: clamp(2rem, 5vw, 3.5rem); }
.scene blockquote { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2.3rem); line-height: 1.15; max-width: 24ch; color: var(--text); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.scene cite { display: block; margin-top: .8rem; font-family: var(--mono); font-style: normal; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }

/* researcher band */
.research { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.research .badge { width: clamp(84px, 11vw, 120px); aspect-ratio: 1; border: 1px solid var(--amber); display: grid; place-items: center; color: var(--amber); position: relative; }
.research .badge .ico { width: 54%; height: 54%; }
.research .badge::after { content: "CVD"; position: absolute; bottom: -1.4rem; left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; color: var(--muted); }
.research p { color: var(--muted); max-width: 64ch; }
.research ul { list-style: none; margin-top: 1rem; display: grid; gap: .45rem; font-family: var(--mono); font-size: .8rem; color: var(--text); }
.research ul li::before { content: "> "; color: var(--amber); }

/* about */
.about-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-grid .frame { aspect-ratio: 4 / 5; max-width: 380px; }
.about-grid h2 { margin-bottom: 1rem; }
.about-grid p { color: var(--muted); max-width: 60ch; }
.about-grid ul.ticks { margin-top: 1rem; }

/* map section */
.map-band .map-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 4vw, 3rem); align-items: start; }
.area-list { list-style: none; display: grid; gap: .1rem; }
.area-list li { border-bottom: 1px solid var(--line-soft); padding: .7rem 0; }
.area-list a { font-family: var(--display); font-weight: 600; font-size: 1.08rem; text-decoration: none; color: var(--text); }
.area-list a:hover { color: var(--amber); }
.area-list span { display: block; color: var(--muted); font-size: .86rem; }

/* steps on home */
.steps-band .steps li p { margin-top: .2rem; }

@media (max-width: 960px) {
  .niche-grid, .map-band .map-wrap, .about-grid { grid-template-columns: 1fr; }
  .about-grid .frame { max-width: 300px; }
}
@media (max-width: 860px) {
  .hero-coast .hero-inner { grid-template-columns: 1fr; }
  .hero-coast .hero-figure { order: 2; }
}
@media (max-width: 560px) {
  .research { grid-template-columns: 1fr; }
  .research .badge { margin-bottom: 1.2rem; }
}

.coast-map{width:100%;height:auto;display:block;font-family:'IBM Plex Mono',ui-monospace,monospace}
.coast-map .grat{stroke:#15242a;stroke-width:1}
.coast-map .grat-t{fill:#3c5157;font-size:9px;letter-spacing:.06em}
.coast-map .geo{fill:#56707a;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.coast-map .geo-ocean{fill:#3d6470;font-size:13px;letter-spacing:.5em}
.coast-map .link{fill:none;stroke:#E39A2B;stroke-width:1.3;stroke-opacity:.55;stroke-dasharray:4 6;animation:ks-dash 6s linear infinite}
.coast-map .node{fill:#0c171b;stroke:#E39A2B;stroke-width:2}
.coast-map .hub{fill:#E39A2B}
.coast-map .ring{fill:none;stroke:#E39A2B;stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ks-ping 2.8s ease-out infinite}
.coast-map .node-t{fill:#DCE4E3;font-size:13px;font-family:'IBM Plex Sans Condensed','Helvetica Neue',Arial,sans-serif;font-weight:600}
.coast-map .hub-t{fill:#F2AE44;font-size:16px;font-family:'IBM Plex Sans Condensed','Helvetica Neue',Arial,sans-serif;font-weight:700}
.coast-map .hub-tag{fill:#8a999e;font-size:8.5px;letter-spacing:.12em}
.coast-map .minor{fill:#5f7e84}
.coast-map .minor-t{fill:#7f9297;font-size:9.5px}
.coast-map a.map-link:hover .node,.coast-map a.map-link:focus .node{fill:#E39A2B}
.coast-map a.map-link:hover text,.coast-map a.map-link:focus text{fill:#F2AE44;text-decoration:underline}
.coast-map .fogband{animation:ks-fog 14s ease-in-out infinite alternate}
@keyframes ks-dash{to{stroke-dashoffset:-100}}
@keyframes ks-ping{0%{transform:scale(.5);opacity:.9}100%{transform:scale(1.8);opacity:0}}
@keyframes ks-fog{from{opacity:.55}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.coast-map .link,.coast-map .ring,.coast-map .fogband{animation:none}}

/* final pass: proof strip links, Credly hint */
.proof-text a{color:inherit;text-decoration:underline;text-decoration-color:rgba(232,163,61,.55);text-underline-offset:3px}
.proof-text a:hover{text-decoration-color:currentColor}
.proof-sub{display:block;font-size:.78rem;opacity:.7;margin-top:.15rem}
.byline a{color:inherit}
.art-frame{background:#0c171b;display:flex;align-items:flex-end;min-height:280px}
.art-frame svg{width:100%;height:auto;display:block}
.prose-block ul+p,.prose-block ol+p{margin-top:1.1rem}