/* Transformative Design — Caelverum Archives editorial */
:root {
  --cream: #F5F0E8;
  --cream-deep: #EDE6DA;
  --ink: #1A1814;
  --charcoal: #141210;
  --charcoal-soft: #1E1B17;
  --bronze: #8C7355;
  --bronze-light: #A89072;
  --muted: #6B6358;
  --muted-on-dark: #A39A8C;
  --line: rgba(26, 24, 20, 0.12);
  --line-on-dark: rgba(245, 240, 232, 0.12);
  --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", Arial, sans-serif;
  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a, a:link, a:visited { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: inherit; }
a:hover { color: var(--bronze); }
button { font: inherit; cursor: pointer; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* Typography */
.eyebrow, .label, .meta, .nav-links a, .plate-label, .site-footer .label, .plate-counter, .hero-meta-line {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.display {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.02em;
  margin: 0;
}
.display-xl { font-size: clamp(2.6rem, 7vw, 5.2rem); }
.display-lg { font-size: clamp(2rem, 4.5vw, 3.4rem); }
.display-md { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 36rem;
}
.prose p { margin: 0 0 1.15em; max-width: 40rem; }
.prose p:last-child { margin-bottom: 0; }

/* Full-bleed bands + padded content — avoids 100%-minus-calc width bugs */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.section { padding: clamp(4rem, 10vw, 7.5rem) 0; }
.section-tight { padding: clamp(3rem, 7vw, 5rem) 0; }

.band-cream,
.band-charcoal,
.site-header {
  width: 100%;
  max-width: 100%;
}

.band-cream { background: var(--cream); color: var(--ink); }
.band-charcoal { background: var(--charcoal); color: var(--cream); }
.band-charcoal .lede,
.band-charcoal .muted { color: var(--muted-on-dark); }
.band-charcoal a:hover { color: var(--bronze-light); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(245, 240, 232, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header.is-dark {
  background: rgba(20, 18, 16, 0.94);
  border-bottom-color: var(--line-on-dark);
  color: var(--cream);
}
.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.25rem;
}
.brand-eyebrow {
  color: var(--muted); white-space: nowrap;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
  max-width: calc(100% - 3.5rem);
  flex-shrink: 1; min-width: 0;
}
@media (min-width: 901px) {
  .brand-eyebrow {
    max-width: none;
    flex-shrink: 0;
    overflow: visible;
    text-overflow: clip;
  }
  .nav-links { gap: 0.85rem 1.05rem; }
  .nav-links a { font-size: 0.66rem; letter-spacing: 0.12em; }
}
.brand-eyebrow:hover { color: var(--bronze); }
.site-header.is-dark .brand-eyebrow { color: var(--muted-on-dark); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  width: 2.6rem; height: 2.6rem;
  padding: 0;
  color: inherit;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-toggle-bars {
  display: block; width: 1rem; height: 1px;
  background: currentColor; position: relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.site-header.nav-open .nav-toggle-bars { background: transparent; }
.site-header.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-header.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.nav-links {
  display: flex; flex-wrap: wrap; gap: 1.15rem 1.5rem;
  align-items: center; list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  text-decoration: none; color: inherit; opacity: 0.78;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; color: var(--bronze); }
.nav-links .ext::after { content: " →"; font-size: 0.85em; color: inherit; }
.nav-links a.is-disabled,
.nav-links a[aria-disabled="true"] {
  opacity: 0.4; pointer-events: none; cursor: not-allowed;
}

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad));
    top: 100%;
    flex-direction: column; align-items: flex-start;
    background: var(--cream); padding: 1.25rem var(--pad) 1.5rem;
    border-bottom: 1px solid var(--line); gap: 1rem;
    width: auto;
  }
  .site-header.is-dark .nav-links { background: var(--charcoal); border-color: var(--line-on-dark); }
  .site-header.nav-open .nav-links { display: flex; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.95rem 1.45rem;
  border: 1px solid transparent;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; font-weight: 500; transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.btn-wide { width: 100%; max-width: 28rem; }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { background: var(--charcoal); color: var(--cream); }
.btn-ink:link,
.btn-ink:visited,
.btn-ink:active { background: var(--ink); color: var(--cream); }
.btn-bronze,
.btn-bronze:link,
.btn-bronze:visited,
.btn-bronze:active {
  background: var(--bronze) !important;
  color: var(--cream) !important;
  -webkit-text-fill-color: var(--cream);
}
.btn-bronze:hover {
  background: var(--bronze-light) !important;
  color: var(--cream) !important;
  -webkit-text-fill-color: var(--cream);
}
/* Amazon CTA: bronze on charcoal — cream type, never Safari link-blue */
.btn-amazon,
.btn-amazon:link,
.btn-amazon:visited,
.btn-amazon:active {
  background: var(--bronze) !important;
  color: var(--cream) !important;
  -webkit-text-fill-color: var(--cream) !important;
  border-color: var(--bronze) !important;
}
.btn-amazon:hover {
  background: var(--bronze-light) !important;
  color: var(--cream) !important;
  -webkit-text-fill-color: var(--cream) !important;
}
.btn .arrow,
.ext::after {
  color: inherit !important;
  -webkit-text-fill-color: inherit;
  text-decoration: none;
}
/* CSS arrow — avoids OS emoji that can render blue */
.btn .arrow {
  display: inline-block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-0.05em);
}
.btn-ghost {
  background: transparent; border-color: currentColor; color: inherit;
}
.btn-ghost:hover { background: rgba(245,240,232,0.08); color: inherit; }
.btn[aria-disabled="true"], .btn.is-disabled {
  opacity: 0.45; pointer-events: none; cursor: not-allowed;
}
.text-link {
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.15rem;
}
.text-link:hover { color: var(--bronze); border-color: var(--bronze); }

/* Hero — stacked on mobile (title → concept → body → cover → meta → CTA) */
.hero {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: clamp(2.5rem, 6vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
.hero-copy .display { margin-bottom: 1rem; }
.hero-concept {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze); margin: 0 0 1.25rem; font-weight: 500;
}
.hero-meta-line {
  color: var(--muted);
  margin: 1.5rem 0 1.75rem;
  letter-spacing: 0.14em;
}
.hero-visual {
  position: relative;
  margin: 1.5rem 0 0;
  background: linear-gradient(165deg, #2a2621 0%, #151311 55%, #0d0c0b 100%);
  display: grid; place-items: center; padding: clamp(1.25rem, 4vw, 2rem);
  width: 100%;
  order: 0; /* overridden in mobile flow via sibling placement in markup */
}
.hero-visual img {
  width: min(100%, 340px); margin: 0 auto;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,0.45));
}

/* Mobile: visual sits between lede and meta in document order already */
@media (max-width: 860px) {
  .hero-visual { margin: 1.25rem 0 0; }
  .btn-wide { width: 100%; max-width: none; }
}

@media (min-width: 861px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .hero-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Pull visual out beside copy via grid placement on the figure */
  .hero-visual {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    align-self: stretch;
    min-height: 28rem;
  }
  /* Move visual to appear as second grid child: hero-copy is first, visual is nested.
     Use display contents so figure participates in hero grid. */
  .hero-copy { display: contents; }
  .hero-copy > .display,
  .hero-copy > .hero-concept,
  .hero-copy > .lede,
  .hero-copy > .hero-meta-line,
  .hero-copy > .btn {
    grid-column: 1;
  }
  .hero {
    grid-template-rows: auto auto auto auto auto;
    row-gap: 0.85rem;
    column-gap: clamp(2.5rem, 6vw, 4rem);
    align-items: center;
  }
  .hero-copy > .display { margin-bottom: 0.35rem; }
  .hero-copy > .hero-concept { margin-bottom: 0.35rem; }
  .hero-copy > .lede { margin-bottom: 0.5rem; }
  .hero-copy > .hero-meta-line {
    margin: 1.25rem 0 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    max-width: 32rem;
  }
  .hero-copy > .btn {
    width: auto;
    max-width: none;
    justify-self: start;
  }
  .hero-visual {
    grid-column: 2;
    grid-row: 1 / span 5;
    margin: 0;
    align-self: stretch;
  }
}

/* Transform diagram */
.idea-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.diagram {
  position: relative;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 0.75rem;
  padding: 2.5rem 1rem; min-height: 16rem;
  max-width: 100%;
  overflow: hidden;
}
.state-node { text-align: center; position: relative; z-index: 2; min-width: 0; }
.state-orb {
  width: clamp(4.5rem, 12vw, 6.5rem); height: clamp(4.5rem, 12vw, 6.5rem);
  margin: 0 auto 1rem; border-radius: 50%;
  border: 1px solid rgba(245,240,232,0.35);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.6rem; background: rgba(245,240,232,0.03);
}
.state-node .name { display: block; margin-bottom: 0.35rem; color: var(--cream); }
.state-node .desc { color: var(--muted-on-dark); font-size: 0.8rem; max-width: 9rem; margin: 0 auto; line-height: 1.4; }
.tp-center { text-align: center; position: relative; z-index: 3; padding: 0 0.5rem; min-width: 0; }
.tp-burst {
  width: 1.1rem; height: 1.1rem; margin: 0 auto 0.85rem;
  background: var(--cream); border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(245,240,232,0.08), 0 0 28px rgba(245,240,232,0.45);
  animation: pulse 4.5s ease-in-out infinite;
}
.tp-label {
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze-light); white-space: nowrap;
}
.diagram-arcs {
  position: absolute; inset: 18% 8% 28%; pointer-events: none; z-index: 1;
  max-width: 100%;
}
.diagram-arcs path {
  fill: none; stroke: rgba(245,240,232,0.22); stroke-width: 1;
}
.bridge-line {
  position: absolute; left: 18%; right: 18%; top: 42%;
  height: 1px; background: rgba(245,240,232,0.28); z-index: 1;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(245,240,232,0.08), 0 0 22px rgba(245,240,232,0.35); }
  50% { box-shadow: 0 0 0 10px rgba(245,240,232,0.05), 0 0 36px rgba(245,240,232,0.55); }
}
@media (max-width: 860px) {
  .idea-grid { grid-template-columns: 1fr; }
  .diagram { padding: 1.5rem 0; }
  .tp-label { white-space: normal; }
}

/* Structure accordion */
.divisions-head {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem); align-items: end;
}
@media (max-width: 900px) {
  .divisions-head { grid-template-columns: 1fr; }
}

.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item summary {
  list-style: none;
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.35rem 0;
  cursor: pointer;
  user-select: none;
}
.accordion-item summary::-webkit-details-marker { display: none; }
.acc-num {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze); font-weight: 500;
}
.acc-title {
  font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 1.75rem);
  font-weight: 500; letter-spacing: 0.02em;
}
.acc-icon {
  width: 1.5rem; height: 1.5rem; position: relative;
  color: var(--muted);
}
.acc-icon::before,
.acc-icon::after {
  content: ""; position: absolute; background: currentColor;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.acc-icon::before { width: 12px; height: 1px; }
.acc-icon::after { width: 1px; height: 12px; transition: transform .2s, opacity .2s; }
.accordion-item[open] .acc-icon::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }

.accordion-panel {
  padding: 0 0 1.75rem;
  display: grid;
  grid-template-columns: 1fr minmax(0, 16rem);
  gap: 1.5rem;
  align-items: start;
}
.accordion-panel p {
  margin: 0; color: var(--muted); max-width: 34rem;
}
.division-thumb {
  aspect-ratio: 4/3; overflow: hidden; background: var(--cream-deep);
}
.division-thumb img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 700px) {
  .accordion-panel { grid-template-columns: 1fr; }
  .division-thumb { max-width: 100%; }
}

/* Approaches */
.approaches-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--line-on-dark);
}
.approaches-list li {
  display: grid; grid-template-columns: 3.5rem 1fr;
  gap: 1.25rem; align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line-on-dark);
}
.ap-num {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-light); padding-top: 0.35rem;
}
.approaches-list h3 {
  margin: 0 0 0.5rem;
  font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 1.8rem); font-weight: 500;
}
.approaches-list p {
  margin: 0; color: var(--muted-on-dark); max-width: 36rem;
}

@media (min-width: 900px) {
  .approaches-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    border-top: none;
  }
  .approaches-list li {
    grid-template-columns: 1fr;
    border: 1px solid var(--line-on-dark);
    padding: 1.75rem;
  }
}

/* Selected pages */
.plates-intro {
  display: flex; justify-content: space-between; gap: 2rem;
  align-items: end; margin-bottom: 2.5rem; flex-wrap: wrap;
}

/* Mobile plate viewer — one full page at a time */
.plate-viewer { margin-bottom: 0; }
.plate-viewer-stage {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
}
.plate-nav {
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--line-on-dark);
  background: transparent;
  color: var(--cream);
  font-size: 1.5rem; line-height: 1;
  display: grid; place-items: center;
  padding: 0;
  flex-shrink: 0;
}
.plate-nav:hover { border-color: var(--bronze-light); color: var(--bronze-light); }
.plate-viewer-frame {
  margin: 0;
  background: #0c0b0a;
  border: 1px solid var(--line-on-dark);
  min-height: min(72vh, 640px);
  height: min(72vh, 640px);
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: pan-y;
}
.plate-viewer-frame picture,
.plate-viewer-frame img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.plate-viewer-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: 1rem; flex-wrap: wrap;
}
.plate-counter { color: var(--muted-on-dark); }

/* Desktop strip — full pages via contain */
.plates-track {
  display: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 22vw);
  gap: 1.25rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.plates-track::-webkit-scrollbar { height: 6px; }
.plates-track::-webkit-scrollbar-thumb { background: rgba(245,240,232,0.25); }
.plate {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.85rem;
  min-width: 0;
}
.plate-frame {
  background: #0c0b0a; border: 1px solid var(--line-on-dark);
  aspect-ratio: 3/4;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.plate-frame img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
}
.plate-label { color: var(--muted-on-dark); margin: 0; }

@media (min-width: 901px) {
  .plate-viewer { display: none; }
  .plates-track { display: grid; }
  .plate:nth-child(even) { margin-top: 2rem; }
}

@media (max-width: 900px) {
  .plates-track { display: none; }
  .plate-viewer { display: block; }
}

/* Writings cards — square thumbs on mobile */
.writings-head {
  display: flex; justify-content: space-between; gap: 1.5rem;
  align-items: end; margin-bottom: 2.5rem; flex-wrap: wrap;
}
.writing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.writing-card {
  display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none; color: inherit;
  border-top: 1px solid var(--line); padding-top: 1.25rem;
}
.writing-card:hover { color: inherit; }
.writing-card:hover .card-title { color: var(--bronze); }
.writing-card .thumb {
  aspect-ratio: 1; overflow: hidden; background: var(--cream-deep);
}
.writing-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-title {
  font-family: var(--serif); font-size: 1.45rem; font-weight: 500;
  line-height: 1.2; margin: 0.35rem 0 0; transition: color .2s;
}
.writing-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) {
  .writing-grid { grid-template-columns: 1fr; }
  .writing-card {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 1rem;
    align-items: center;
  }
  .writing-card .thumb { aspect-ratio: 1; width: 5.5rem; }
}

/* Provenance */
.provenance-grid {
  display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.provenance-visual {
  background: var(--charcoal); aspect-ratio: 1; overflow: hidden;
  position: relative;
}
.provenance-visual img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0.92;
}
.museum-list {
  list-style: none; margin: 2rem 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.museum-list li {
  display: grid; grid-template-columns: 9.5rem 1fr;
  gap: 1rem; padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
}
.museum-list .k {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); padding-top: 0.25rem;
}
@media (max-width: 860px) {
  .provenance-grid { grid-template-columns: 1fr; }
  .museum-list li { grid-template-columns: 7.5rem 1fr; gap: 0.75rem; }
}

/* Amazon */
.amazon-grid {
  display: grid; grid-template-columns: 1.1fr 0.7fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.amazon-cover {
  width: min(180px, 42vw); margin-top: 1.5rem;
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}
.amazon-facts {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem;
}
.amazon-facts li {
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted-on-dark); padding-left: 1rem;
  border-left: 2px solid var(--bronze);
}
.amazon-quote {
  font-family: var(--serif); font-style: italic; font-size: 1.35rem;
  line-height: 1.35; margin: 0 0 1.5rem; color: var(--cream);
}
@media (max-width: 900px) {
  .amazon-grid { grid-template-columns: 1fr; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line-on-dark);
  padding: 1.75rem 0 2.25rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  color: var(--muted-on-dark);
}

/* Writings index / article pages */
.page-hero { padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.page-hero .display { max-width: 18ch; }
.article-index {
  display: grid; gap: 0; border-top: 1px solid var(--line);
}
.article-index a {
  display: grid; grid-template-columns: 7rem 1fr minmax(0, 12rem);
  gap: 1.25rem; align-items: center;
  padding: 1.35rem 0; border-bottom: 1px solid var(--line);
  text-decoration: none; color: inherit;
}
.article-index a:hover .t { color: var(--bronze); }
.article-index .num { color: var(--muted); }
.article-index .t {
  font-family: var(--serif); font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 500; margin: 0;
}
.article-index .thumb {
  aspect-ratio: 16/10; overflow: hidden; background: var(--cream-deep);
}
.article-index .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) {
  .article-index a { grid-template-columns: 1fr; }
  .article-index .thumb { max-width: 14rem; }
}

.article-layout {
  display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
  padding-bottom: clamp(4rem, 8vw, 6rem);
}
.article-figure {
  position: sticky; top: 5.5rem;
  background: var(--cream-deep);
}
.article-figure img { width: 100%; }
.article-body .display { margin-bottom: 1.5rem; max-width: 16ch; }
.article-body .prose {
  font-size: 1.08rem; line-height: 1.8;
}
.article-body .prose h2,
.article-body .prose .subhead {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 500;
  margin: 2.25rem 0 0.9rem; line-height: 1.25;
}
.article-nav {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-figure { position: static; max-width: 28rem; }
}

.back-bar {
  padding: 1.25rem 0; border-bottom: 1px solid var(--line);
  display: flex; gap: 1.25rem; flex-wrap: wrap;
}
.back-bar a { text-decoration: none; opacity: 0.75; }
.back-bar a:hover { opacity: 1; color: var(--bronze); }


/* Safari link colour reset — visited/external links otherwise go system blue */
@supports (-webkit-touch-callout: none) {
  a[data-amazon-cta].btn-amazon,
  a[data-amazon-cta].btn-amazon:link,
  a[data-amazon-cta].btn-amazon:visited,
  a[data-amazon-cta].btn-amazon:active,
  a[data-amazon-cta].btn-amazon:hover {
    background-color: #A89072 !important;
    color: #141210 !important;
    -webkit-text-fill-color: #141210 !important;
    text-decoration: none !important;
  }
  a[data-amazon-cta].btn-amazon .arrow {
    color: #141210 !important;
    -webkit-text-fill-color: #141210 !important;
  }
  .nav-links a.ext,
  .nav-links a.ext:visited,
  .nav-links a.ext:link {
    color: inherit !important;
    -webkit-text-fill-color: inherit;
  }
}


/* Stronger Amazon button presence on charcoal */
.btn-amazon {
  display: inline-flex;
  width: 100%;
  max-width: 22rem;
  min-height: 3.1rem;
  padding: 1.05rem 1.6rem;
  border: 1px solid rgba(245, 240, 232, 0.22) !important;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(245, 240, 232, 0.12);
  letter-spacing: 0.14em;
  justify-content: center;
}
.band-charcoal .btn-amazon {
  background: #A89072 !important;
  color: #141210 !important;
  -webkit-text-fill-color: #141210 !important;
  border-color: #A89072 !important;
}
.band-charcoal .btn-amazon:hover {
  background: #BBA382 !important;
  color: #141210 !important;
  -webkit-text-fill-color: #141210 !important;
}
.band-charcoal .btn-amazon .arrow {
  color: #141210 !important;
  -webkit-text-fill-color: #141210 !important;
}