/* Island Lab: shared chrome for section indexes and posts.
 *
 * Section pages (concepts/, philosophies/, explorations/) and the individual
 * posts inside them all link this file plus theme.css. A new post is just a
 * copy of an existing one with the prose swapped, so this holds everything
 * structural: the night palette, nav, the post article, and the index list.
 *
 * Load order in each page's <head>: fonts, then post.css, then theme.css.
 */

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

:root {
  --bg: #0e1410;
  --surface: #141a16;
  --text: #d6cfc0;
  --muted: #6b6358;
  --accent: #4a7c68;
  --faint: #1e2820;
  --line: #4a7c68;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'EB Garamond', serif;
  font-size: 1.15rem;
  line-height: 1.85;
  overflow-x: hidden;
}

/* ---- Nav ---- */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  z-index: 100;
  background: linear-gradient(var(--bg), transparent);
}
.nav-left { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.nav-home {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); text-decoration: none; transition: color 0.3s;
}
.nav-home:hover, .nav-home.here { color: var(--text); }

/* ---- Shared hero ---- */
.wrap { max-width: 680px; margin: 0 auto; padding: 0 2rem; }

.hero {
  padding: 9rem 0 1rem;
  position: relative;
}
.eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1.75rem; display: block;
}
.hero h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 400; font-style: italic; line-height: 1.2;
  color: var(--text); margin-bottom: 1.5rem; max-width: 22ch;
}
.hero-meta {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.5rem;
}
.hero-sub { font-size: 1.1rem; color: var(--muted); line-height: 1.8; max-width: 52ch; }

.rule { display: none; } /* the vertical hairline read as an awkward gap between sections (Sean, 2026-09-30); the section spacing carries the break */

/* ---- Post header image ---- */
.hero-image { margin: 1.25rem 0 2.5rem; }
.hero-image img {
  width: 100%; height: auto; display: block;
  border-radius: 6px;
}

/* ---- Post article ---- */
.post { padding-bottom: 5rem; }
.post p { color: var(--muted); font-size: 1.13rem; margin-bottom: 0.8rem; line-height: 1.85; }
.post p:last-child { margin-bottom: 0; }
.post p em { font-style: italic; color: var(--text); }
.post p strong { color: var(--text); font-weight: 500; }
.post h2 {
  font-size: 1.5rem; font-weight: 400; font-style: italic;
  color: var(--text); margin: 3rem 0 1.25rem; line-height: 1.3;
}
.post h3 {
  font-size: 1.15rem; font-weight: 500; font-style: italic;
  color: var(--text); margin: 2rem 0 0.5rem; line-height: 1.35;
}
.post .num {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); display: block; margin: 2.25rem 0 0.85rem; opacity: 0.85;
}
.post a {
  color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--accent-line); transition: border-color 0.2s, color 0.2s;
}
.post a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.post .pull {
  border-left: 1px solid var(--accent);
  padding: 0.25rem 0 0.25rem 1.75rem; margin: 1.1rem 0;
}
.post .pull p { font-size: 1.22rem; font-style: italic; color: var(--text); line-height: 1.65; margin: 0; }
.post .about {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--faint);
  font-size: 1.02rem; color: var(--muted);
}
.post .sep {
  text-align: center; color: var(--accent); opacity: 0.35;
  font-size: 1rem; letter-spacing: 0.5em; line-height: 1; margin: 1rem 0;
}

/* Cards used inside posts (lineages, layers) */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin: 1.5rem 0 2rem; }
.card-grid.two { grid-template-columns: 1fr 1fr; }
.card {
  border: 1px solid var(--faint); border-radius: 10px; background: var(--card-bg);
  padding: 1.6rem 1.75rem; transition: border-color 0.3s, background 0.3s;
}
.card:hover { border-color: var(--accent-soft); background: var(--card-bg-hover); }
.card-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 0.75rem; opacity: 0.9;
}
.card h4 {
  font-size: 1.18rem; font-weight: 400; font-style: italic;
  color: var(--text); margin-bottom: 0.75rem; line-height: 1.3;
}
.card p { color: var(--muted); font-size: 1rem; line-height: 1.78; margin: 0; }
.card p em { color: var(--text); font-style: italic; }
.card p a, .post .card p a { border-bottom: 1px solid var(--accent-line); }

/* ---- Section index ---- */
.post-list { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
a.post-row {
  border: 1px solid var(--faint); border-radius: 10px; background: var(--card-bg);
  padding: 1.85rem 2rem; text-decoration: none; color: inherit;
  display: block; transition: border-color 0.3s, background 0.3s;
}
a.post-row:hover { border-color: var(--accent-soft); background: var(--card-bg-hover); }
.pr-meta {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); opacity: 0.85; margin-bottom: 1rem;
}
.pr-meta .tag { color: var(--muted); }
.pr-title {
  font-size: 1.4rem; font-weight: 400; font-style: italic;
  color: var(--text); margin-bottom: 0.75rem; line-height: 1.3;
}
.pr-excerpt { color: var(--muted); font-size: 1.05rem; line-height: 1.8; margin-bottom: 1rem; }
.pr-excerpt em { color: var(--text); font-style: italic; }
.pr-more {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1px solid var(--accent-line); padding-bottom: 2px;
}
a.post-row:hover .pr-more { color: var(--text); border-color: var(--text); }

.idx-note {
  border: 1px dashed var(--faint); border-radius: 10px; background: transparent;
  padding: 1.85rem 2rem; color: var(--muted); font-size: 1.02rem; line-height: 1.8;
}
.idx-note em { color: var(--text); font-style: italic; }

/* ---- Footer / back ---- */
.post-foot { padding: 2.5rem 0 1rem; }
.foot-link {
  display: inline-block; margin-right: 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.foot-link:hover { color: var(--text); border-color: var(--text); }

footer {
  text-align: center; padding: 2rem;
  border-top: 1px solid var(--faint);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--muted); opacity: 0.5; margin-top: 3rem;
}

a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 700px) { .card-grid.two { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  nav { padding: 1.25rem 1.5rem; }
  .nav-left { gap: 1rem; }
  .hero { padding-top: 7.5rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Work captures and the one call to action (added 2026-09-30) */
.work-capture { margin: 2.25rem 0; max-width: 100%; }
.post .work-capture, .hero .work-capture, .approach .work-capture { max-width: 40rem; }
.work-capture img { width: 100%; max-width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid rgba(0,0,0,.08); }
.work-capture figcaption { font-size: .92rem; color: var(--muted); margin-top: .6rem; line-height: 1.5; }
.cta-row { margin: 2.5rem 0 1rem; }
.cta { display: inline-block; font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg); background: var(--accent); text-decoration: none; padding: 1rem 2rem; border-radius: 2px; transition: background 0.25s, transform 0.2s; }
.cta:hover { background: var(--accent-hover, var(--accent)); transform: translateY(-1px); }

/* ---- Hero setting: a faded photograph behind and to the right of the title ----
 * Markup sits just before header.hero inside div.wrap. .wrap is not positioned,
 * so the setting resolves against the initial containing block: top right of the
 * page, with no layout change to any ancestor. The mask repeats the Bocas hero's
 * radial fall-off (ellipse 60% 50%, transparent by 70%) intersected with a
 * linear fade from the top right. No animation, so reduced motion needs nothing. */
.hero-setting {
  position: absolute;
  top: 0; right: 0;
  width: 60vw;
  height: 24rem;
  background: var(--setting) center / cover no-repeat;
  opacity: 0.42;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at 66% 34%, #000 0%, rgba(0,0,0,.85) 28%, transparent 72%);
    mask-image: radial-gradient(ellipse 58% 62% at 66% 34%, #000 0%, rgba(0,0,0,.85) 28%, transparent 72%);
}
.hero-setting + .hero { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .hero-setting { width: 100vw; height: 28rem; opacity: 0.25; }
}

/* Footer: the two social links under the site line */
footer .foot-social { margin-top: .55rem; }
footer .foot-social a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
footer .foot-social a:hover { opacity: .75; }