/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Tiempos Headline';
  src: url('../fonts/TiemposHeadlineWeb-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Headline';
  src: url('../fonts/TiemposHeadlineWeb-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Tiempos Text';
  src: url('../fonts/TiemposTextWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg: #F1EDE6;
  --text: #2C2C28;
  --pane-bg: #E8E2D8;
  --lochmara: #0080BD;
  --cobalt: #143D8A;
  --border: rgba(44, 44, 40, 0.75);

  --font-wordmark: 'Tiempos Headline', Georgia, serif;
  --font-headline: 'Tiempos Headline', Georgia, serif;
  --font-writing: 'Tiempos Text', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-width: 1600px;
  --margin: 32px;
  --gutter: 32px;
  --nav-height: 64px;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-16: 128px;
  --space-32: 256px;
  --space-48: 384px;
  --space-64: 512px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #2C2C28;
  --text: #FAF8F5;
  --pane-bg: #1F1F1B;
  --border: rgba(250, 248, 245, 0.25);
  color-scheme: dark;
}

/* ---------- Reset & base ---------- */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
button { font-family: inherit; }
.hide { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }

/* Reusable "label →" link: underline only the label, never the arrow glyph */
.arrow-link { text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; color: inherit; }
.arrow-link__label { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Grid ---------- */
.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}

/* ---------- Nav ---------- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
  pointer-events: none;
}
.site-nav > * { pointer-events: auto; }
.site-nav__brand {
  grid-column: 1 / 7;
  height: 100%;
  display: flex;
  align-items: center;
  margin-left: calc(var(--margin) * -1);
  padding-left: var(--margin);
  background: var(--pane-bg);
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--text);
}
[data-pane-theme="dark"] .site-nav__brand { background: var(--cobalt); color: #FAF8F5; }
.site-nav__right {
  grid-column: 7 / 13;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: calc(var(--margin) * -1);
  padding-right: var(--margin);
  background: var(--bg);
}
.site-nav__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0;
}
.site-nav__subtitle.is-visible { opacity: 1; }
.site-nav__controls { display: flex; align-items: center; gap: var(--space-2); }
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text);
}
.icon-btn svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.icon-btn.is-hidden { display: none; }
.icon-btn .icon-close { display: none; }
.icon-btn.is-open .icon-hamburger { display: none; }
.icon-btn.is-open .icon-close { display: block; }

/* ---------- Shell / split panes ---------- */
.shell {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.left-pane {
  grid-column: 1 / 7;
  position: sticky;
  top: 0;
  height: 100vh;
  margin-left: calc(var(--margin) * -1);
  background: var(--pane-bg);
  overflow: hidden;
}
[data-pane-theme="dark"] .left-pane { background: var(--cobalt); }
.right-pane {
  grid-column: 7 / 13;
  padding-top: 128px;
  padding-bottom: var(--space-1);
  
}
@media (min-width: 900px) { .right-pane { padding-right: var(--space-8); }}

/* ---------- Typography ---------- */
.headline {
  font-family: var(--font-headline);
  font-weight: 300;
  font-size: 32px;
  line-height: 1.1;
}
.headline-border { padding-top: 32px; border-top: 1px solid var(--border); }
@media (min-width: 900px) { .headline { font-size: 44px; } }
.writing p { font-family: var(--font-writing); font-size: 18px; line-height: 1.4; }
.writing p + p { margin-top: var(--space-4); }
.writing h2 { font-family: var(--font-headline); font-weight: 300; font-size: 28px; line-height: 1.15; margin-top: var(--space-8); margin-bottom: var(--space-2); }
.writing h3 { font-family: var(--font-headline); font-weight: 300; font-size: 22px; line-height: 1.15; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.writing a { text-decoration: underline; text-underline-offset: 3px; }
.writing img { border-radius: 4px; }
.writing figcaption { font-size: 14px; margin-top: var(--space-1); margin-bottom: var(--space-4); }
.writing strong { font-weight: 700; }
.article-width { max-width: 640px; }

/* legacy spacing utility classes present in migrated Markdown post bodies */
.mt1 { margin-top: var(--space-1); } .mt2 { margin-top: var(--space-2); } .mt3 { margin-top: var(--space-4); } .mt4 { margin-top: var(--space-8); }
.mb1 { margin-bottom: var(--space-1); } .mb2 { margin-bottom: var(--space-2); } .mb3 { margin-bottom: var(--space-8); } .mb4 { margin-bottom: var(--space-16); }
.grey { opacity: 0.65; }
.bold { font-weight: 700; }
.writing-date { font-family: var(--font-sans); font-size: 16px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--text);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  color: var(--text);
  background: none;
  transition: background-color .2s ease, color .2s ease;
}
.btn:hover { background: var(--text); color: var(--bg); }

/* ---------- Subnav (scroll index) ---------- */
.section-index { margin-top: var(--space-16); }
.section-index a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Showcase sections ---------- */
.showcase-section { padding-top: var(--space-64); scroll-margin-top: 32px; }
.showcase-section:first-of-type { padding-top: 0; }
.showcase-body { font-size: 16px; line-height: 1.6; max-width: 640px; }
.showcase-body p + p { margin-top: var(--space-2); }
.project { margin-bottom: var(--space-48); }
.project__work { margin-bottom: var(--space-32); }
.project__eyebrow { font-size: 16px; font-weight: 700; margin-bottom: var(--space-1); }
.project h3 { font-family: var(--font-headline); font-weight: 300; font-size: 44px; line-height: 1.15; margin-bottom: var(--space-4); }
.project__field { margin-top: var(--space-4); }
.project__field-label { font-size: 16px; font-weight: 700; /*margin-bottom: var(--space-1);*/ }
.project__field-value { font-size: 16px; line-height: 1.4; max-width: 640px; }
.project__field-value strong { font-weight: 700; color: var(--lochmara); }
.project__quote { font-style: italic; margin-top: var(--space-2); }
.project__quote-cite { display: block; font-style: normal; font-size: 16px; margin-top: var(--space-1); }
.project__side h3 { font-family: var(--font-headline); font-weight: 300; font-size: 28px; line-height: 1.15; margin-bottom: var(--space-1); }

/* ---------- Carousel (left pane) ---------- */
.carousel { position: absolute; inset: 0; padding-top: var(--space-8); padding-bottom: var(--space-4); }
.carousel__track { position: relative; width: 100%; height: 100%; overflow: hidden; }
/* Slides of the active group sit side by side in a row; the row translates so each
   slide's image and its own caption move together as one unit (per the original spec).
   Each slide is a column: the image takes the available space, and the caption sits
   in normal flow directly below it (never overlapping). */
.carousel__strip { display: flex; width: 100%; height: 100%; transition: transform .5s ease; }
.carousel__slide { display: flex; flex-direction: column; flex: 0 0 100%; width: 100%; height: 100%; }
.carousel__slide img { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: cover; }
.carousel__slide--contain img { object-fit: contain; }
.carousel__caption {
  flex: 0 0 auto;
  padding: 0 var(--margin) 0;
  font-size: 16px;
  color: var(--text);
  height: 28px;
}
[data-pane-theme="dark"] .carousel__caption { color: #FAF8F5; }
.carousel__arrows {
  position: absolute; right: var(--margin); bottom: 0;
  height: 28px;
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--text);
}
[data-pane-theme="dark"] .carousel__arrows { color: #FAF8F5; }
.carousel__arrows button {
  background: none; border: none; cursor: pointer;
  padding: 0 var(--space-1); font-size: 20px; line-height: 1;
  color: inherit;
}
.carousel__arrows button[hidden] { display: none; }

/* ---------- Notes listing ---------- */
.notes-list__item { padding-bottom: var(--space-6); }
.notes-list__item + .notes-list__item { margin-top: var(--space-6); }
.notes-list__date { font-size: 16px; margin-bottom: var(--space-1); }
.notes-list__entry { font-size: 18px; font-weight: 400; line-height: 1.5; }
.notes-list__entry .title { font-weight: 700; }
.notes-list__entry .title a { text-decoration: underline; text-underline-offset: 3px; color: inherit; }

/* ---------- Menu overlay: aligned to the right pane via the same grid, sized to content ---------- */
.menu-overlay {
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  z-index: 200;
  display: none;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--margin);
}
.menu-overlay.is-open { display: grid; }
.menu-overlay__panel {
  grid-column: 7 / 13;
  background: var(--bg);
  padding: var(--space-2) 0 var(--space-4);
}
.menu-overlay__list { list-style: none; padding: 0; margin: 0; }
.menu-overlay__list li { border-bottom: 1px solid var(--border); }
.menu-overlay__list a {
  display: block; padding: var(--space-2) 0;
  text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 18px;
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-16);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  font-size: 16px;
}
.site-footer ul { list-style: none; display: flex; gap: var(--space-4); margin: 0; padding: 0; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* ---------- 404 ---------- */
.error-page { padding-top: 160px; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .site-nav { background: var(--pane-bg); padding-inline: 0; }
  [data-pane-theme="dark"] .site-nav { background: var(--cobalt); }
  .site-nav__brand, .site-nav__right { background: none; margin: 0; }
  .site-nav__brand { grid-column: 1 / 7; padding-left: var(--margin); }
  .site-nav__right { grid-column: 7 / 13; padding-right: var(--margin); justify-content: flex-end; }
  .site-nav__subtitle { display: none; }
  .icon-btn { color: var(--text); }
  [data-pane-theme="dark"] .icon-btn { color: #FAF8F5; }
  .menu-overlay { padding-inline: 0; background: var(--pane-bg); }
  [data-pane-theme="dark"] .menu-overlay { background: var(--cobalt); }
  .menu-overlay__panel { grid-column: 1 / -1; background: none; padding-inline: var(--margin); }

  .shell { grid-template-columns: 1fr; }
  .left-pane {
    grid-column: 1 / -1;
    position: relative;
    height: 60vh;
    margin-left: calc(var(--margin) * -1);
    margin-right: calc(var(--margin) * -1);
  }
  .right-pane { grid-column: 1 / -1; padding-top: var(--space-4); }
  .article-width { max-width: none; }
}