/* =========================================================
   Anahata Foundation — Design System
   Front Range seasonal palette · Editorial serif type
   ========================================================= */

:root {
  /* Palette — pulled from the land */
  --paper:        #f4ede1;   /* off-white, warm not bright */
  --paper-2:      #ebe3d4;   /* slightly deeper paper for section alternation */
  --paper-light:  #fbf6ec;   /* near-white card surface for elevated content */
  --paper-bright: #fdf9f0;   /* the closest we go to white */
  --ink:          #1a1612;   /* near-black, warm */
  --ink-soft:     #4a4338;   /* secondary text, granite */
  --ink-mute:     #8a7f6e;   /* tertiary, faded ink on paper */

  --gold:         #b8964a;   /* tall grass, autumn cottonwood */
  --gold-deep:    #8a6f33;
  --sandstone:    #b15a3c;   /* red sandstone, sunset coral — the deck accent, earthier */
  --sandstone-deep:#8e3f25;
  --pine:         #3d4f3a;   /* deep pine green */
  --pine-deep:    #1f2a1d;
  --river:        #5d7a82;   /* river stone blue-gray */

  /* Gradients pulled from the land */
  --gradient-dawn: linear-gradient(180deg, #f4ede1 0%, #ebe0c8 50%, #d9b88a 100%);
  --gradient-meadow: linear-gradient(180deg, transparent 0%, rgba(177,90,60,0.04) 60%, rgba(177,90,60,0.10) 100%);
  --gradient-pine: linear-gradient(180deg, #2c3a29 0%, #1f2a1d 100%);
  --gradient-paper: linear-gradient(180deg, #f8f2e7 0%, #f4ede1 35%, #efe6d3 100%);
  --gradient-paper-2: linear-gradient(180deg, #ede5d6 0%, #ebe3d4 45%, #e3d8c0 100%);
  --gradient-cta: linear-gradient(180deg, #b15a3c 0%, #9a4a2f 100%);
  --gradient-cta-hover: linear-gradient(180deg, #c08a4a 0%, #a06a32 100%);
  --gradient-card: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 60%);
  --gradient-pine-radial: radial-gradient(ellipse at 30% 0%, #3a4a36 0%, #2c3a29 45%, #1f2a1d 100%);
  --gradient-sandstone-radial: radial-gradient(ellipse at 30% 0%, #a04830 0%, #7a3220 45%, #4d2014 100%);
  --gradient-ink-banner: linear-gradient(180deg, #221d18 0%, #1a1612 100%);
  --gradient-card-elevated: linear-gradient(180deg, #fdf9f0 0%, #f8f2e6 100%);
  --gradient-rule: linear-gradient(90deg, transparent 0%, var(--rule) 20%, var(--rule) 80%, transparent 100%);
  --gradient-rule-gold: linear-gradient(90deg, transparent 0%, rgba(184,150,74,0.4) 30%, rgba(184,150,74,0.6) 50%, rgba(184,150,74,0.4) 70%, transparent 100%);
  --gradient-glow-gold: radial-gradient(ellipse at center, rgba(184,150,74,0.15) 0%, transparent 70%);
  --gradient-glow-sandstone: radial-gradient(ellipse at center, rgba(177,90,60,0.12) 0%, transparent 65%);

  --rule:         #c9bfa9;   /* hairline rule color on paper */
  --rule-soft:    #d9d0bb;

  /* Type */
  --font-serif: "Cormorant Garamond", "EB Garamond", "Adobe Caslon Pro", Caslon, "Times New Roman", serif;
  --font-display: "Marcellus", "Trajan Pro", "Cormorant Garamond", "EB Garamond", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Spacing scale */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 5rem;
  --s-8: 7rem;
  --s-9: 10rem;

  /* Layout */
  --measure: 38rem;          /* ideal reading column */
  --measure-wide: 56rem;
  --max: 1280px;
  --gut: 2rem;               /* page gutter, same as --s-4 by default */
}

/* Mobile gutter and spacing scaling */
@media (max-width: 1024px) {
  :root {
    --gut: 1.5rem;
    --s-9: 8rem;
    --s-8: 6rem;
    --s-7: 5rem;
  }
}
@media (max-width: 800px) {
  :root {
    --gut: 1.25rem;
    --s-7: 4rem;
    --s-8: 5rem;
    --s-9: 6rem;
    --s-6: 2.5rem;
    --s-5: 2rem;
  }
}
@media (max-width: 480px) {
  :root {
    --gut: 1rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 4.5rem;
  }
}

/* Override .section padding at small sizes — moved below the base rule for source-order priority */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--gradient-paper);
  color: var(--ink);
  font-family: var(--font-serif);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "onum";
}
html { font-size: 18px; }
body { font-size: 20px; }

img { display: block; max-width: 100%; height: auto; }

/* Polished drop shadows on content images (not hero / bleed / nav / logos) */
.two-col img,
.two-col-narrow img,
section .shell img:not(.hero-img):not(.no-shadow),
section .shell-narrow img:not(.no-shadow) {
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 18px 40px -22px rgba(26,22,18,0.35),
    0 4px 12px -6px rgba(26,22,18,0.18);
}

/* Bleed images: subtle inner depth */
.bleed-image {
  box-shadow: 0 0 60px -10px rgba(26,22,18,0.25) inset;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s, color .15s;
}
a:hover { color: var(--sandstone-deep); border-bottom-color: var(--sandstone); }

/* =========================================================
   Typography scale — editorial, generous
   ========================================================= */

.eyebrow {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: bold;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandstone-deep);
  font-feature-settings: "lnum";
  margin-bottom: var(--s-2);
}

.eyebrow-soft {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  font-style: normal;
  margin-bottom: var(--s-2);
}

/* =========================================================
   Link styling utilities
   ========================================================= */

.link-cta {
  font-style: italic;
  color: var(--sandstone-deep);
  border-bottom-color: var(--sandstone);
}

.link-subtle {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.92rem;
  border-bottom: none;
}

.link-plain {
  border-bottom: none;
}

/* =========================================================
   Pull-quote attribution
   ========================================================= */

.pull-quote-cite {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.06em;
  font-size: 1.05rem;
  text-align: center;
}

/* =========================================================
   Scope row metadata
   ========================================================= */

.scope-meta {
  font-size: 1rem;
  color: var(--ink-mute);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
  font-style: italic;
}
.scope-row.current .scope-meta {
  color: var(--sandstone-deep);
}

/* =========================================================
   Invitation list (get-involved numbered rows)
   ========================================================= */

.invitation-list {
  margin-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.invitation-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.invitation-numeral {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sandstone-deep);
  font-size: 2rem;
}
.invitation-label {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin-left: 0.5rem;
}
.invitation-body {
  color: var(--ink-soft);
}
@media (max-width: 720px) {
  .invitation-row {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
}

/* Contact card — used on get-involved page for the "Reach Out" box */
.contact-card {
  margin-top: var(--s-6);
  padding: var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
}
.contact-card-email {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  word-break: break-word;
}
@media (max-width: 480px) {
  .contact-card-email { font-size: 1.15rem; }
}
.contact-card-meta {
  color: var(--ink-soft);
  margin: 0;
  font-size: 0.95rem;
}
.contact-card-link {
  margin: var(--s-3) 0 0 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
}
.contact-card-link a {
  border-bottom-color: var(--sandstone);
  color: var(--sandstone-deep);
}

/* Divider ornament inner text */
.divider-ornament-text {
  font-style: italic;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Footer/closing wordmark */
.foot-wordmark-wrap {
  text-align: center;
  margin-top: var(--s-4);
}
.foot-wordmark {
  height: 90px;
  width: auto;
  opacity: 0.8;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0 0 var(--s-3) 0;
  text-wrap: balance;
  letter-spacing: -0.005em;
  line-height: 1.08;
}

h1, .h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.06;
  margin-bottom: var(--s-4);
}

h2, .h2 {
  font-size: 2.9rem;
  font-weight: 400;
  line-height: 1.1;
}
@media (max-width: 600px) {
  h2, .h2 { font-size: 2.4rem; }
}

h3, .h3 {
  font-size: clamp(1.4rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
}

h4, .h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  text-transform: none;
}

/* Heading utilities — typographic line-break control & extra spacing */
.heading-narrow { max-width: 14em; }
.heading-wide { max-width: 18em; }
.heading-spaced { margin-bottom: var(--s-6); }

p {
  margin: 0 0 1.1em 0;
  text-wrap: pretty;
}

.lede {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
  text-wrap: pretty;
}

blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5);
  background: var(--gradient-card-elevated);
  border-radius: 4px;
  border-left: 3px solid;
  border-image: linear-gradient(180deg, var(--sandstone) 0%, var(--gold) 100%) 1;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 30px -22px rgba(26,22,18,0.18),
    0 2px 6px -3px rgba(26,22,18,0.06);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.3;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
  position: relative;
}
blockquote::before {
  content: "“";
  position: absolute;
  left: 0.15em;
  top: -0.05em;
  font-size: 1.2em;
  color: var(--sandstone);
  opacity: 0.35;
}
blockquote cite {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: var(--s-3);
  font-family: var(--font-serif);
}

.drop-cap::first-letter {
  font-family: var(--font-display);
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  margin: 0.08em 0.08em 0 -0.04em;
  font-weight: 400;
  color: var(--sandstone-deep);
}

.serif-script {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--sandstone-deep);
}

.small-caps {
  font-variant: small-caps;
  letter-spacing: 0.08em;
}

/* =========================================================
   Layout primitives
   ========================================================= */

.shell {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.shell-narrow {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

.shell-medium {
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 0 var(--s-4);
}

section {
  position: relative;
}

.section {
  padding: 7.5rem 0;  /* 120px */
}
@media (max-width: 1024px) { .section { padding: 6rem 0; } }
@media (max-width: 800px)  { .section { padding: 4.5rem 0; } }
@media (max-width: 480px)  { .section { padding: 3.25rem 0; } }

.section-tight {
  padding: var(--s-7) 0;
}

.section-pine {
  position: relative;
  background:
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(184,150,74,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(184,150,74,0.06) 0%, transparent 60%),
    var(--gradient-pine-radial);
  color: var(--paper);
}
.section-paper-2 {
  position: relative;
  background: var(--gradient-paper-2);
}
.section-paper-2::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: var(--gradient-rule);
  pointer-events: none;
}
.section-pine .eyebrow,
.section-sandstone-deep .eyebrow { color: var(--gold); }
.section-pine .eyebrow-soft,
.section-sandstone-deep .eyebrow-soft { color: var(--rule-soft); }
.section-pine a,
.section-sandstone-deep a { border-bottom-color: rgba(244,237,225,0.3); }
.section-pine a:hover,
.section-sandstone-deep a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.section-pine .pull-quote,
.section-sandstone-deep .pull-quote { color: var(--paper); }

/* Page-marker, pillar, and paragraph automatic restyling on dark backgrounds */
.section-pine .page-marker,
.section-sandstone-deep .page-marker {
  border-bottom-color: rgba(244, 237, 225, 0.2);
}
.section-pine .page-marker .num,
.section-sandstone-deep .page-marker .num { color: var(--gold); }
.section-pine .page-marker .label,
.section-sandstone-deep .page-marker .label { color: var(--paper); }
.section-pine p,
.section-sandstone-deep p { color: rgba(244, 237, 225, 0.85); }
/* Carousel card sits on its own light bg — keep body text ink-colored */
.section-pine .ic-card p,
.section-sandstone-deep .ic-card p { color: var(--ink); }
/* Installation carousel on dark sections — group labels and dots */
.section-pine .ic-group-label,
.section-sandstone-deep .ic-group-label {
  color: rgba(244, 237, 225, 0.75);
}
.section-pine .ic-dot,
.section-sandstone-deep .ic-dot {
  background: rgba(244, 237, 225, 0.4);
}
.section-pine .ic-dot:hover,
.section-sandstone-deep .ic-dot:hover {
  background: rgba(244, 237, 225, 0.7);
}
.section-pine .ic-dot.is-active,
.section-sandstone-deep .ic-dot.is-active {
  background: var(--gold);
}

/* Section-intro: wrapper around a subsection h2 + intro paragraph,
   adds breathing room between the intro and the content that follows */
.section-intro { margin-bottom: var(--s-5); }

/* Prose measure — constrain a paragraph's width for line-length readability */
.measure-prose { max-width: 38em; }

/* Site plan / aerial map image — grayscale by default; hover-magnifier
   lens (desktop) and click-to-open full-size lightbox (all). */
section .shell img.site-plan-img,
section .shell-narrow img.site-plan-img {
  border-radius: 0;
  filter: grayscale(1);
  transition: filter 0.4s ease;
  display: block;
  width: 100%;
  height: auto;
  /* Clip the bottom 2px to hide a stray white edge in the source JPG */
  clip-path: inset(0 0 2px 0);
}
.site-plan-wrap {
  position: relative;
  cursor: zoom-in;
  display: block;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Hairline rule below the image — applied to the wrapper so it
     stays unaffected by the image's grayscale filter. */
  box-shadow: 0 1px 0 var(--rule);
}
.site-plan-wrap .site-plan-img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
.site-plan-wrap:focus-visible {
  box-shadow: 0 0 0 2px var(--sandstone);
}
.site-plan-hint {
  padding: 0.4rem 0.8rem;
  background: radial-gradient(
    ellipse at 30% 0%,
    rgba(160, 72, 48, 0.78) 0%,
    rgba(122, 50, 32, 0.78) 45%,
    rgba(77, 32, 20, 0.78) 100%
  );
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 2px;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 0 2px 8px -2px rgba(26, 22, 18, 0.25);
}
.site-plan-hint-hover {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
}
.site-plan-hint-touch {
  text-align: center;
  margin-bottom: var(--s-2);
}

/* Hover magnifier lens — zoomed inset that tracks the cursor */
.site-plan-lens {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 3px solid var(--paper);
  box-shadow:
    0 0 0 1px var(--rule),
    0 18px 40px -16px rgba(26, 22, 18, 0.5),
    0 4px 12px -4px rgba(26, 22, 18, 0.25);
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
  z-index: 5;
}
.site-plan-lens.is-active { display: block; }

/* Hint text — different wording for hover vs touch devices */
.site-plan-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) {
  .site-plan-hint-hover { display: none; }
  .site-plan-hint-touch { display: block; }
}

/* Full-size lightbox modal */
.site-plan-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 10, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: zoom-out;
  padding: var(--s-4);
}
.site-plan-modal.is-open { display: flex; }
.site-plan-modal img {
  max-width: 95vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  display: block;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.site-plan-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(244, 237, 225, 0.5);
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.site-plan-modal-close:hover {
  background: rgba(244, 237, 225, 0.1);
  border-color: var(--paper);
}

/* Vertical-rhythm spacing utilities */
.mt-sm { margin-top: var(--s-4); }
.mt-md { margin-top: var(--s-5); }
.mt-lg { margin-top: var(--s-6); }
.mb-sm { margin-bottom: var(--s-4); }
.mb-md { margin-bottom: var(--s-5); }
.mb-lg { margin-bottom: var(--s-6); }

/* =========================================================
   Sandstone-deep section background — fully saturated dark
   sandstone with golden highlights. Parallel to .section-pine
   but in the red-rock palette.
   ========================================================= */

.section-sandstone-deep {
  position: relative;
  background:
    radial-gradient(ellipse 50% 30% at 80% 100%, rgba(255, 220, 150, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 10% 0%, rgba(255, 200, 150, 0.08) 0%, transparent 60%),
    var(--gradient-sandstone-radial);
  color: var(--paper);
}

/* =========================================================
   Section photos — generic 3-column photo grid (residence, etc.)
   ========================================================= */

.section-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.section-photos-four {
  grid-template-columns: repeat(2, 1fr);
}
.section-photos .placeholder {
  aspect-ratio: 4 / 3;
}
.section-photos img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
@media (max-width: 800px) {
  .section-photos,
  .section-photos-four { grid-template-columns: 1fr; }
}

/* Responsive show/hide utilities — for swapping layouts at the 800px breakpoint */
.show-sm-only { display: none; }
@media (max-width: 800px) {
  .show-md-up { display: none; }
  .show-sm-only { display: block; }
}

.divider {
  height: 1px;
  background: var(--gradient-rule);
  border: 0;
  margin: var(--s-6) 0;
}

.divider-ornament {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--sandstone);
  margin: var(--s-6) auto;
  width: fit-content;
}
.divider-ornament::before,
.divider-ornament::after {
  content: "";
  display: block;
  width: 4rem;
  height: 1px;
  background: var(--rule);
}

/* Horizontal full-bleed image */
.bleed-image {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 480px;
  max-height: 720px;
}
@media (max-width: 800px) {
  .bleed-image { height: 56vh; min-height: 320px; max-height: 480px; }
}
@media (max-width: 480px) {
  .bleed-image { height: 50vh; min-height: 260px; max-height: 380px; }
}
.bleed-image img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: -10%;
  left: 0;
  will-change: transform;
}
.bleed-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(26,22,18,0) 60%, rgba(26,22,18,0.25) 100%);
}

/* Fixed-background variant — image sits in the viewport as content scrolls past.
   iOS Safari ignores background-attachment: fixed and falls back to scrolling
   the image normally, which is acceptable degradation. */
.bleed-image-fixed {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.bleed-image-fixed img { display: none; }

/* =========================================================
   Wide editorial prose — heading on left, prose on right.
   For body sections that aren't the page intro.
   ========================================================= */
.wide-prose {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  column-gap: var(--s-7);
  align-items: start;
}
.wide-prose > h2 {
  margin-top: 0;
  position: sticky;
  top: 110px;
}
.wide-prose-body { min-width: 0; max-width: 38rem; }
.wide-prose-body > p:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .wide-prose { grid-template-columns: 1fr; gap: var(--s-4); }
  .wide-prose > h2 { position: static; }
}

/* Section head with title left, intro paragraph right — for compact
   carousel/grid sections where the stacked title+intro takes too much
   vertical room. Not a replacement for wide-prose; no sticky behavior. */
.section-head-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  column-gap: var(--s-6);
  align-items: end;
}
.section-head-split > h2 { margin: 0; }
.section-head-split > p { margin: 0; max-width: 38rem; }
@media (max-width: 900px) {
  .section-head-split {
    grid-template-columns: 1fr;
    row-gap: var(--s-3);
    align-items: start;
  }
}

/* Two-column editorial */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
  align-items: start;
}
.two-col-narrow {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--s-6);
  align-items: start;
}
.two-col-narrow.flip { grid-template-columns: 2fr 1fr; }
@media (max-width: 800px) {
  .two-col, .two-col-narrow, .two-col-narrow.flip { grid-template-columns: 1fr; gap: var(--s-4); }
}

/* ===========================================================
   Site chrome — email banner & navigation
   ========================================================= */

.email-banner {
  background: var(--gradient-ink-banner);
  color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.email-banner-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.email-banner-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: rgba(244, 237, 225, 0.78);
}
.email-banner-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(244, 237, 225, 0.22);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.email-banner-form:focus-within {
  border-color: rgba(244, 237, 225, 0.55);
  background: rgba(255,255,255,0.07);
}
.email-banner-form input {
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--paper);
  padding: 0.5rem 0.95rem;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-style: italic;
  letter-spacing: 0.01em;
  min-width: 220px;
}
.email-banner-form input::placeholder {
  color: rgba(244, 237, 225, 0.38);
  font-style: italic;
}
.email-banner-form button {
  background: var(--gradient-cta);
  border: 0;
  color: var(--paper);
  padding: 0.5rem 1.25rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, filter 0.2s ease;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset;
}
.email-banner-form button:hover { background: var(--gradient-cta-hover); filter: brightness(1.05); }
.email-banner-form button:disabled { opacity: 0.6; cursor: default; }
.email-banner-thanks {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  .email-banner-inner { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .email-banner-line { text-align: center; font-size: 0.92rem; }
  .email-banner-form input { min-width: 0; flex: 1; }
}

/* =========================================================
   MailerLite embed — restyled to match the dark email banner.
   MailerLite injects its own CSS with !important and ID-prefixed
   selectors; we override with scoped !important rules.
   ========================================================= */
.email-banner-form-slot {
  flex: 0 1 auto;
  min-width: 260px;
}
.email-banner .ml-form-embedContainer,
.email-banner .ml-form-embedWrapper,
.email-banner .ml-form-embedWrapper.embedForm,
.email-banner .ml-form-embedWrapper.embedDefault,
.email-banner .ml-form-embedWrapper.embedPopup {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.email-banner .ml-form-embedBody,
.email-banner .ml-form-embedBody.ml-form-embedBodyHorizontal,
.email-banner .ml-form-successBody {
  padding: 0 !important;
  background: transparent !important;
}
.email-banner .ml-form-embedContent {
  display: none !important;
}
.email-banner .ml-form-formContent,
.email-banner .ml-form-formContent.horozintalForm,
.email-banner .ml-form-checkboxRow {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
.email-banner .ml-form-horizontalRow {
  margin: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: stretch !important;
  border: 1px solid rgba(244, 237, 225, 0.22) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.04) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
  height: auto !important;
  float: none !important;
}
.email-banner .ml-form-horizontalRow:focus-within {
  border-color: rgba(244, 237, 225, 0.55) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}
.email-banner .ml-input-horizontal {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
}
.email-banner .ml-input-horizontal .horizontal-fields {
  width: 100% !important;
  padding: 0 !important;
  float: none !important;
}
.email-banner .ml-field-group,
.email-banner .ml-field-email {
  width: 100% !important;
}
.email-banner .ml-form-fieldRow,
.email-banner .ml-form-fieldRow.ml-last-item {
  margin: 0 !important;
  width: 100% !important;
}
.email-banner .ml-form-horizontalRow input,
.email-banner .ml-form-fieldRow input {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  color: var(--paper) !important;
  padding: 0.5rem 0.95rem !important;
  font-family: var(--font-serif) !important;
  font-size: 0.98rem !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 21px !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  box-shadow: none !important;
}
.email-banner .ml-form-horizontalRow input::placeholder,
.email-banner .ml-form-fieldRow input::placeholder {
  color: rgba(244, 237, 225, 0.38) !important;
  font-style: italic !important;
}
.email-banner .ml-form-horizontalRow input::-webkit-input-placeholder,
.email-banner .ml-form-fieldRow input::-webkit-input-placeholder {
  color: rgba(244, 237, 225, 0.38) !important;
  font-style: italic !important;
}
.email-banner .ml-button-horizontal {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
  padding-top: 0 !important;
}
.email-banner .ml-button-horizontal button,
.email-banner .ml-form-horizontalRow button,
.email-banner .ml-form-embedSubmit button,
.email-banner .ml-mobileButton-horizontal button {
  background: var(--gradient-cta) !important;
  background-color: var(--sandstone) !important;
  border: 0 !important;
  color: var(--paper) !important;
  padding: 0.5rem 1.25rem !important;
  font-family: var(--font-display) !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset !important;
  line-height: 21px !important;
  transition: background 0.2s ease, filter 0.2s ease !important;
  height: auto !important;
  width: auto !important;
  margin: 0 !important;
}
.email-banner .ml-button-horizontal button:hover,
.email-banner .ml-form-horizontalRow button:hover,
.email-banner .ml-form-embedSubmit button:hover,
.email-banner .ml-mobileButton-horizontal button:hover {
  background: var(--gradient-cta-hover) !important;
  filter: brightness(1.05) !important;
}
.email-banner .ml-form-embedSubmit {
  margin: 0 !important;
  width: 100% !important;
  float: none !important;
}
.email-banner .ml-form-embedSubmit button.loading {
  display: none !important;
}
/* Success state */
.email-banner .ml-form-successBody {
  text-align: left !important;
}
.email-banner .ml-form-successContent {
  margin: 0 !important;
  text-align: left !important;
}
.email-banner .ml-form-successContent h4 {
  color: var(--gold) !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  margin: 0 0 0.2rem 0 !important;
  text-align: left !important;
}
.email-banner .ml-form-successContent p {
  color: rgba(244, 237, 225, 0.78) !important;
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 720px) {
  .email-banner-form-slot { width: 100%; min-width: 0; }
}
@media only screen and (max-width: 400px) {
  /* MailerLite hides the inline button below 400px and shows
     .ml-mobileButton-horizontal instead. Match that fallback. */
  .email-banner .ml-form-horizontalRow {
    border-radius: 10px !important;
  }
  .email-banner .ml-mobileButton-horizontal {
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 0 0 !important;
  }
  .email-banner .ml-mobileButton-horizontal button {
    border-radius: 10px !important;
    padding: 0.65rem 1rem !important;
    width: 100% !important;
  }
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(253,249,240,0.96) 0%, rgba(244,237,225,0.92) 100%);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 0;
}
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--gradient-rule-gold);
  pointer-events: none;
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.65rem var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.nav-mark {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
}
.nav-mark img { height: 56px; width: auto; }
.nav-mark .nav-foundation {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.18rem;
  padding-left: 0.95rem;
  margin-left: 0.2rem;
  border-left: 1px solid var(--rule);
  color: var(--ink);
}
.nav-mark .nav-foundation-label {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.nav-mark .nav-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--sandstone-deep);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .nav-mark .nav-tagline { display: none; }
  .nav-mark .nav-foundation { display: none; }
}
.nav-links {
  display: flex;
  gap: var(--s-4);
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.0rem;
  letter-spacing: 0;
}
/* Drawer header, per-link blurbs, and backdrop are mobile-only —
   hidden on desktop. The mobile @media block below re-enables them. */
.nav-drawer-head { display: none; }
.nav-backdrop { display: none; }
.nav-link-blurb { display: none; }
.nav-links a {
  border: 0;
  color: var(--ink);
  padding: 0.25rem 0;
  position: relative;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:not(.cta):hover { color: var(--sandstone-deep); }
.nav-links a:not(.cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--sandstone);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-links a:not(.cta):hover::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--ink); }

/* Active page indicator */
.nav-links a.is-current:not(.cta) {
  color: var(--sandstone-deep);
}
.nav-links a.is-current:not(.cta)::after {
  transform: scaleX(1);
  background: var(--sandstone-deep);
}
.nav-links a.cta.is-current {
  background: var(--gradient-cta-hover);
}

.nav-links a.cta {
  color: var(--paper);
  background: var(--gradient-cta);
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  font-weight: 500;
  font-style: normal;
  font-family: var(--font-display);
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,0.15) inset, 0 6px 14px -8px rgba(154,74,47,0.5);
}
.nav-links a.cta:hover { background: var(--gradient-cta-hover); color: var(--paper); }

/* Hamburger toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 200;
}
.nav-toggle-bar {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.nav-toggle-bar:nth-child(1) { top: 15px; }
.nav-toggle-bar:nth-child(2) { top: 21px; }
.nav-toggle-bar:nth-child(3) { top: 27px; }
.nav-toggle-bar.a { top: 21px; transform: rotate(45deg); }
.nav-toggle-bar.fade { opacity: 0; }
.nav-toggle-bar.b { top: 21px; transform: rotate(-45deg); }

@media (max-width: 800px) {
  /* Backdrop-filter on .nav creates a containing block for fixed descendants,
     trapping the drawer inside the nav bar. Disable it on mobile so the
     drawer can position itself relative to the viewport. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(253, 249, 240, 0.96);
  }
  .nav-toggle { display: block; }
  .nav-mark img { height: 38px; }
  .nav-mark .nav-foundation { display: none; }
  .nav-inner { padding: 0.5rem var(--gut); }

  /* Drawer */
  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 92%;
    max-width: 420px;
    background: var(--gradient-paper);
    border-left: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 4.5rem 1.5rem 2rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: -20px 0 60px -20px rgba(26,22,18,0.25);
    z-index: 100;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }

  /* Brand header inside the drawer */
  .nav-drawer-head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    padding-bottom: 1.5rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
    color: var(--sandstone);
  }
  .nav-drawer-merkaba {
    width: 40px;
    height: 40px;
    margin-bottom: 0.4rem;
  }
  .nav-drawer-name {
    font-family: var(--font-serif);
    font-size: 0.82rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-drawer-tag {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--sandstone-deep);
  }

  /* Each link: title + blurb stacked */
  .nav-links a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-family: var(--font-display);
    letter-spacing: 0.01em;
  }
  .nav-links a:last-of-type { border-bottom: 0; }
  .nav-link-title {
    display: block;
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--ink);
  }
  .nav-link-blurb {
    display: block;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.4;
    color: var(--ink-soft);
    letter-spacing: 0;
    text-wrap: pretty;
  }
  .nav-links a.is-current .nav-link-title { color: var(--sandstone-deep); }
  .nav-links a.is-current .nav-link-blurb { color: var(--sandstone-deep); opacity: 0.85; }

  .nav-links a.cta {
    margin-top: 1.5rem;
    text-align: center;
    border: 0;
    font-size: 0.95rem;
    padding: 0.95rem 1.5rem;
    align-items: center;
    align-self: stretch;
  }

  /* Backdrop — real element so it can be tapped to close */
  .nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,22,18,0.45);
    backdrop-filter: blur(2px);
    z-index: 90;
    cursor: pointer;
  }
  .nav.is-open .nav-backdrop {
    display: block;
  }

}


/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  height: 100vh;
  min-height: 640px;
  max-height: 900px;
  width: 100%;
  overflow: hidden;
  background-color: var(--ink);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 800px) {
  .hero {
    height: calc(100dvh - var(--top-bar-height, 180px));
    min-height: calc(100dvh - var(--top-bar-height, 180px));
    max-height: none;
  }
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.0) contrast(1.02);
}
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 25% 95%, rgba(177,90,60,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(184,150,74,0.18) 0%, transparent 55%),
    linear-gradient(180deg,
      rgba(26,22,18,0.20) 0%,
      rgba(26,22,18,0.05) 30%,
      rgba(26,22,18,0.10) 60%,
      rgba(26,22,18,0.55) 100%);
}
.hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-7) var(--gut);
  color: var(--paper);
}
.hero-inner {
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.hero-script {
  height: clamp(90px, 14vw, 160px);
  width: auto;
  margin-bottom: var(--s-3);
  filter: invert(1) brightness(1.1);
  opacity: 0.95;
}
.hero-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  line-height: 1.25;
  font-weight: 400;
  max-width: 32em;
  text-wrap: balance;
}
@media (max-width: 720px) {
  .hero-line br { display: none; }
}
.hero-meta {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,237,225,0.75);
  font-style: normal;
}

/* =========================================================
   Page chip / section marker
   ========================================================= */

.page-marker {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.page-marker .num {
  display: none;
}
.page-marker .label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--sandstone-deep);
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
   Cards / lists
   ========================================================= */

.threefold {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  align-items: stretch;
}
@media (max-width: 800px) {
  .threefold { grid-template-columns: 1fr; }
}
.threefold > div {
  position: relative;
  background: var(--gradient-card-elevated);
  border-radius: 6px;
  padding: var(--s-2) var(--s-2) var(--s-2) calc(var(--s-2) + 0.5rem);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 30px -22px rgba(26,22,18,0.18),
    0 2px 6px -3px rgba(26,22,18,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.threefold > div::before {
  content: "";
  position: absolute;
  left: 0; top: 12%;
  width: 3px; height: 76%;
  background: linear-gradient(180deg, var(--sandstone) 0%, var(--gold) 100%);
  border-radius: 0 3px 3px 0;
}
.threefold > div:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 22px 40px -22px rgba(26,22,18,0.25),
    0 4px 10px -3px rgba(26,22,18,0.08);
}
.threefold .role-num { display: none; }
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 800px) {
  .threefold { grid-template-columns: 1fr; }
}
.threefold .role-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--sandstone-deep);
  margin-bottom: 0.6rem;
  font-feature-settings: "lnum";
}
.threefold h3 {
  font-size: 1.5rem;
  margin-bottom: var(--s-2);
}
/* Threefold-specific: icons drift left into place as cards spread right — counter-motion for depth */
@media (min-width: 801px) {
  .threefold.stack-reveal > div .role-icon {
    transform: translateX(90px);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .threefold.stack-reveal > div:nth-child(2) .role-icon { transition-delay: 150ms; }
  .threefold.stack-reveal > div:nth-child(3) .role-icon { transition-delay: 300ms; }
  .threefold.stack-reveal.is-revealed > div .role-icon {
    transform: translateX(0);
  }
}

@media (max-width: 800px) {
  .threefold > div {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "para para";
    column-gap: var(--s-2);
    row-gap: var(--s-2);
    align-items: center;
  }
  .threefold > div > .role-icon {
    grid-area: icon;
    margin-bottom: 0;
    margin-left: -12px;
  }
  .threefold > div > h3 {
    grid-area: title;
    margin: 0;
  }
  .threefold > div > p {
    grid-area: para;
    margin: 0;
  }
}

.role-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  color: var(--sandstone);
  opacity: 0.9;
}
.role-icon svg { width: 100%; height: 100%; }

/* .pillar-icon is reused by the deck card fronts on /the-project/.
   The icon's overrides on dark sections live in the deck CSS block. */
.pillar-icon {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3);
  color: var(--gold);
  opacity: 0.9;
}
.pillar-icon svg { width: 100%; height: 100%; }

/* =========================================================
   Beginnings — paper-themed pillar-sized cards (home page)
   ========================================================= */

.beginnings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 900px) { .beginnings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .beginnings { grid-template-columns: 1fr; } }

/* =========================================================
   Generic reveal animations
   .stack-reveal — children start stacked at first column's position,
   then ease right to their grid columns with a small stagger.
   Apply to any single-row grid container (4, 3, etc. children).
   .page-opener-reveal — orchestrates page-marker / h1 / lede entrance
   for top-of-page editorial openers.
   ========================================================= */

.stack-reveal.stack-reveal > * {
  --stack-offset: 0;
  translate: calc(-100% * var(--stack-offset) - var(--s-4) * var(--stack-offset)) 0;
  opacity: 0;
  transition:
    translate 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.85s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.stack-reveal.stack-reveal > *:nth-child(1) { --stack-offset: 0; z-index: 6; }
.stack-reveal.stack-reveal > *:nth-child(2) { --stack-offset: 1; z-index: 5; transition-delay: 150ms; }
.stack-reveal.stack-reveal > *:nth-child(3) { --stack-offset: 2; z-index: 4; transition-delay: 300ms; }
.stack-reveal.stack-reveal > *:nth-child(4) { --stack-offset: 3; z-index: 3; transition-delay: 450ms; }
.stack-reveal.stack-reveal > *:nth-child(5) { --stack-offset: 4; z-index: 2; transition-delay: 600ms; }
.stack-reveal.stack-reveal > *:nth-child(6) { --stack-offset: 5; z-index: 1; transition-delay: 750ms; }
.stack-reveal.stack-reveal.is-revealed > * {
  translate: 0 0;
  opacity: 1;
}

/* Disable .stack-reveal animation when its grid drops to multi-row layouts */
@media (max-width: 800px) {
  .threefold.stack-reveal.stack-reveal > * {
    translate: 0 0;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}
@media (max-width: 900px) {
  .beginnings.stack-reveal.stack-reveal > * {
    translate: 0 0;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-reveal.stack-reveal > * {
    translate: 0 0 !important;
    opacity: 1 !important;
    transition: none !important;
  }
}

/* Page opener reveal — page-marker slides in from left, line draws,
   title eases down, lede wipes in. Applied to the opener shell. */
.page-opener-reveal .page-marker {
  transform: translateX(-30px);
  opacity: 0;
  border-bottom-color: transparent;
  position: relative;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
}
.page-opener-reveal .page-marker::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}
.page-opener-reveal h1 {
  transform: translateY(-20px);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 200ms,
    opacity 0.7s ease 200ms;
}
.page-opener-reveal .lede {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transition:
    clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1) 800ms,
    opacity 0.4s ease 800ms;
}
.page-opener-reveal.is-revealed .page-marker {
  transform: translateX(0);
  opacity: 1;
}
.page-opener-reveal.is-revealed .page-marker::after {
  transform: scaleX(1);
}
.page-opener-reveal.is-revealed h1 {
  transform: translateY(0);
  opacity: 1;
}
.page-opener-reveal.is-revealed .lede {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .page-opener-reveal .page-marker,
  .page-opener-reveal h1,
  .page-opener-reveal .lede {
    transform: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transition: none !important;
  }
  .page-opener-reveal .page-marker::after {
    transform: scaleX(1) !important;
  }
}

.beginning-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--gradient-card-elevated);
  border: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  border-radius: 6px;
  padding: var(--s-4);
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 30px -22px rgba(26,22,18,0.18),
    0 2px 6px -3px rgba(26,22,18,0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Diagonal sheen sweep on hover — from bottom-left off-card to top-right off-card.
   Transition is defined on the :hover rule so the sweep only animates IN.
   On mouse-out, the stripe snaps back to its rest position (off-card, invisible). */
.beginning-card::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: linear-gradient(
    45deg,
    transparent 35%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 65%
  );
  transform: translate(-50%, 50%);
  pointer-events: none;
  z-index: 1;
}
.beginning-card:hover::before {
  transform: translate(50%, -50%);
  transition: transform 1.3s cubic-bezier(0.25, 1, 0.5, 1) 120ms;
}

.beginning-card:hover {
  transform: translateY(-2px);
  border-color: var(--sandstone);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 22px 40px -22px rgba(26,22,18,0.25),
    0 4px 10px -3px rgba(26,22,18,0.08);
}
.beginning-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--sandstone-deep);
  font-size: 1.4rem;
  margin-bottom: 0.6rem;
  font-feature-settings: "lnum";
}
.beginning-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  margin-bottom: var(--s-2);
}
.beginning-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3) 0;
  flex-grow: 1;
}
.beginning-meta {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
  transition: color 0.3s ease;
}
.beginning-card:hover .beginning-meta { color: var(--sandstone-deep); }

/* Scopes table */
.scopes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.scope-row {
  position: relative;
  display: block;
  padding: var(--s-4) calc(var(--s-3) + 1.5rem) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
  outline: none;
}
@media (hover: hover) {
  .scope-row:hover {
    transform: scale(1.008);
  }
}
.scope-row-summary {
  display: grid;
  grid-template-columns: 7rem 14rem 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.scope-row .scope-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--sandstone-deep);
  line-height: 1;
  letter-spacing: 0.04em;
  transition: color 0.35s ease;
}
.scope-row .scope-name {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: 0;
}
.scope-row .scope-body {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-soft);
  transition: color 0.35s ease;
}

/* Always-on elevated style — for the .current scope and any expanded row.
   On mobile, the elevation now means "this row is open" (since hover
   styles are gated to hover-capable devices below). */
.scope-row.current,
.scope-row.is-expanded {
  background: var(--gradient-card-elevated);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 14px 30px -22px rgba(26,22,18,0.18),
    0 2px 6px -3px rgba(26,22,18,0.06);
  border-bottom-color: transparent;
}

/* Hover/keyboard-focus elevations only on devices that actually have
   hover (mouse). Prevents "sticky hover" on touch. */
@media (hover: hover) {
  .scope-row:hover,
  .scope-row:focus-visible {
    background: var(--gradient-card-elevated);
    border-radius: 6px;
    box-shadow:
      0 1px 0 rgba(255,255,255,0.6) inset,
      0 14px 30px -22px rgba(26,22,18,0.18),
      0 2px 6px -3px rgba(26,22,18,0.06);
    border-bottom-color: transparent;
  }
  .scope-row:hover .scope-num { color: var(--sandstone); }
  .scope-row:hover .scope-body { color: var(--ink); }
}

/* Expand/collapse chevron at right edge of each row */
.scope-row::after {
  content: "";
  position: absolute;
  right: calc(var(--s-3) + 0.4rem);
  top: var(--s-4);
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--sandstone-deep);
  border-bottom: 1.5px solid var(--sandstone-deep);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.scope-row.is-expanded::after {
  transform: rotate(-135deg);
}

/* Expandable details panel — max-height transition controlled by JS */
.scope-row-details {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s ease, margin-top 0.4s ease;
}
.scope-row-details-inner {
  padding-left: calc(7rem + var(--s-4));
}
.scope-row.is-expanded .scope-row-details {
  margin-top: var(--s-3);
}
.scope-row-details ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.scope-row-details li { margin-bottom: 0.5em; }
.scope-row-details li::marker { color: var(--sandstone); }

@media (max-width: 760px) {
  .scope-row-details-inner { padding-left: 0; }
}

/* Big right-pointing triangle pointer — only on .current, sits outside the row */
.scope-row.current::before {
  content: "";
  position: absolute;
  left: -0.8rem;
  top: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent var(--sandstone);
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 4px rgba(142,63,37,0.35));
}
.scope-row.current .tag {
  display: inline-block;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandstone-deep);
  font-style: italic;
  margin-bottom: 0.5rem;
}
@media (max-width: 760px) {
  /* Mobile layout: number + name share the first row, then meta, then body.
     Wrapper divs are flattened with display: contents so children
     participate directly in the grid. */
  .scope-row-summary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num name"
      "meta meta"
      "body body";
    column-gap: 0.7rem;
    row-gap: 0.3rem;
    align-items: baseline;
  }
  .scope-row-summary > div:not(.scope-body) { display: contents; }
  .scope-row .scope-num { grid-area: num; font-size: 2.2rem; }
  .scope-row .scope-name { grid-area: name; font-size: 1.5rem; }
  .scope-row .scope-meta { grid-area: meta; }
  .scope-row .scope-body { grid-area: body; font-size: 1rem; margin-top: 0.4rem; }
  /* Currently Seeking tag: hide on mobile — the arrow indicator carries the meaning */
  .scope-row.current .tag { display: none; }
  /* Keep the arrow indicator visible on mobile; size it down so it doesn't crowd */
  .scope-row.current::before {
    display: block;
    border-width: 10px 0 10px 14px;
    left: -0.5rem;
  }
  .scope-row {
    padding: var(--s-3) calc(var(--s-3) + 1.2rem) var(--s-3) var(--s-3);
  }
  .scope-row::after { top: var(--s-3); }
}

/* Detail caption — used under photos */
.caption {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  font-style: italic;
  margin-top: var(--s-2);
  text-align: left;
}

/* Pull quote */
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ink);
  margin: 0 auto;
  padding: 0 var(--s-2);
  text-align: center;
  max-width: 24em;
}

/* =========================================================
   Stats / facts strip
   ========================================================= */

.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  background: var(--gradient-card-elevated);
  padding: var(--s-4) var(--s-4);
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 14px 30px -22px rgba(26,22,18,0.18),
    0 2px 6px -3px rgba(26,22,18,0.06);
}
@media (max-width: 720px) { .facts { grid-template-columns: repeat(2, 1fr); } }
.fact .num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "lnum";
}
.fact .lab {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* =========================================================
   Updates / blog posts
   ========================================================= */

.post {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-3) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}
.post:last-child { border-bottom: 0; }
.post:hover {
  background:
    var(--gradient-glow-sandstone),
    var(--gradient-card-elevated);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 18px 40px -28px rgba(142,63,37,0.35),
    0 2px 8px -4px rgba(26,22,18,0.08);
  border-bottom-color: transparent;
  transform: scale(1.008);
}
.post:hover h3 { color: var(--ink); }
.post:hover p { color: var(--ink); }
.post .post-date {
  font-family: var(--font-serif);
  font-feature-settings: "onum";
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.post h3 {
  font-size: 1.5rem;
  font-weight: 400;
  font-family: var(--font-display);
  margin-bottom: 0.4rem;
}
.post p { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 0.6rem 0; }
.post .post-tag {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sandstone-deep);
  font-style: italic;
}
@media (max-width: 700px) {
  .post { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* =========================================================
   Photo Carousel (reusable — used by land + residence sections)
   ========================================================= */

.photo-carousel {
  position: relative;
  outline: none;
}
.photo-carousel-frame {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 24px 50px -28px rgba(26,22,18,0.4),
    0 6px 14px -8px rgba(26,22,18,0.2);
}
.photo-carousel-track {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.photo-carousel-track.is-dragging { cursor: grabbing; }
.photo-carousel-track img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.photo-slide {
  flex: 0 0 100%;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 6s ease-out;
  /* override drop shadow rule for content images inside carousel */
  border-radius: 0 !important;
  box-shadow: none !important;
}
.photo-slide.is-active img {
  transform: scale(1.05);
}

/* Arrows */
.photo-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244,237,225,0.35);
  background: rgba(26,22,18,0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  z-index: 2;
}
.photo-arrow:hover {
  background: rgba(177,90,60,0.85);
  border-color: rgba(244,237,225,0.6);
  transform: translateY(-50%) scale(1.06);
}
.photo-arrow svg { width: 22px; height: 22px; }
.photo-arrow-prev { left: 1rem; }
.photo-arrow-next { right: 1rem; }

/* Meta row */
.photo-carousel-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  margin-top: var(--s-3);
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.photo-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-soft);
  flex: 1;
}
.photo-counter {
  font-family: var(--font-serif);
  font-feature-settings: "lnum";
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.photo-counter-current {
  color: var(--sandstone-deep);
  font-weight: 500;
}

/* Dots */
.photo-dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: var(--s-3);
}
.photo-dot,
.ic-dot {
  width: 28px;
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: var(--rule);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, width 0.25s ease;
  appearance: none;
}
.photo-dot:hover,
.ic-dot:hover {
  background: var(--ink-mute);
}
.photo-dot.is-active,
.ic-dot.is-active {
  background: var(--sandstone-deep);
  width: 44px;
  transform: none;
}

@media (max-width: 700px) {
  .photo-carousel-track { aspect-ratio: 4 / 3; }
  .photo-arrow { width: 38px; height: 38px; }
  .photo-arrow-prev { left: 0.5rem; }
  .photo-arrow-next { right: 0.5rem; }
  .photo-carousel-meta { flex-direction: column; gap: 0.4rem; }
}

/* Responsive grid modifier — on desktop render as a 2-column grid with
   no carousel chrome; below 800px falls through to the normal carousel. */
@media (min-width: 801px) {
  .photo-carousel-grid-md .photo-carousel-frame {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .photo-carousel-grid-md .photo-carousel-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: auto;
    gap: var(--s-3);
    overflow: visible;
    scroll-snap-type: none;
  }
  .photo-carousel-grid-md .photo-slide { flex: none; scroll-snap-align: none; }
  .photo-carousel-grid-md .photo-slide img {
    aspect-ratio: 3 / 2;
    border-radius: 4px;
    transform: none;
  }
  .photo-carousel-grid-md .photo-slide.is-active img { transform: none; }
  .photo-carousel-grid-md .photo-arrow,
  .photo-carousel-grid-md .photo-dots,
  .photo-carousel-grid-md .photo-carousel-meta {
    display: none;
  }
}

/* =========================================================
   Footer
   ========================================================= */

footer.site-foot {
  background: radial-gradient(ellipse at 20% 0%, #243020 0%, #1a2316 50%, #131c10 100%);
  color: var(--paper);
  padding: var(--s-7) 0 var(--s-4);
  margin-top: 0;
}
footer.site-foot .shell {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 800px) {
  footer.site-foot .shell { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
@media (max-width: 480px) {
  footer.site-foot .shell { grid-template-columns: 1fr; gap: var(--s-3); }
}
footer.site-foot .foot-mark {
  height: 80px; width: auto;
  filter: invert(1) brightness(1.05);
  opacity: 0.92;
  margin-bottom: var(--s-3);
}
footer.site-foot p { color: rgba(244,237,225,0.7); font-size: 0.92rem; }
footer.site-foot h5 {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
footer.site-foot a {
  color: var(--paper);
  border: 0;
  display: block;
  padding: 0.25rem 0;
  font-size: 0.95rem;
  opacity: 0.85;
}
footer.site-foot a:hover { color: var(--gold); opacity: 1; }
footer.site-foot .foot-legal {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(244,237,225,0.15);
  font-size: 0.78rem;
  color: rgba(244,237,225,0.5);
  text-align: center;
  letter-spacing: 0.05em;
}

/* =========================================================
   Placeholder image (for missing portraits)
   ========================================================= */
.placeholder {
  background: var(--paper-2);
  border: 1px dashed var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-4);
  color: var(--ink-mute);
  font-style: italic;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  aspect-ratio: 4/5;
}
.placeholder.square { aspect-ratio: 1/1; }
.placeholder.wide { aspect-ratio: 16/9; }

/* Photo wrapper — stretches to text height in two-col-narrow contexts */
.photo-frame {
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 18px 40px -22px rgba(26,22,18,0.35),
    0 4px 12px -6px rgba(26,22,18,0.18);
}
.photo-frame img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 801px) {
  .two-col-narrow .photo-frame {
    align-self: stretch;
    height: 100%;
    min-height: 480px;
  }
  .two-col-narrow .photo-frame img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Modifier: slow horizontal pan with gentle zoom */
.photo-frame.is-panning img {
  animation: photoPan 28s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes photoPan {
  from { transform: scale(1.1) translateX(-1.5%); }
  to   { transform: scale(1.1) translateX(1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .photo-frame.is-panning img { animation: none; transform: scale(1.05); }
}

.placeholder-label {
  display: block;
  margin-top: var(--s-3);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.coda-line {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: var(--s-4);
}

/* =========================================================
   Anchor scroll offset for sticky nav
   ========================================================= */
section[id] { scroll-margin-top: 70px; }

/* Subtle reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .9s ease, transform .9s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* =========================================================
   Welcome layout — center column matches the project-page
   opener (shell-narrow page-opener-reveal) and stays centered
   on the page; the Anahata definition floats in the left
   margin without shifting the main column.
   ========================================================= */
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.welcome-opener .page-marker { margin-top: 0; }

.welcome-side {
  position: sticky;
  top: 110px;
  padding: var(--s-4) var(--s-4);
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-left: 3px solid var(--sandstone);
  border-radius: 2px;
  text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 20px -14px rgba(26,22,18,0.18);
}
.welcome-side-pron {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.welcome-side-def {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  text-wrap: pretty;
  font-style: normal;
}
.welcome-side-def em { font-style: italic; }

@media (max-width: 900px) {
  .welcome-grid {
    grid-template-columns: 1fr;
    max-width: var(--measure);
    padding: 0;
  }
  .welcome-side {
    position: static;
    margin: 0 var(--s-4) var(--s-5);
  }
}

/* =========================================================
   Welcome callout — colored block holding the Anahata definition
   ========================================================= */
.welcome-callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-5);
  margin: var(--s-4) 0 var(--s-5);
  background:
    linear-gradient(135deg, rgba(193,103,74,0.08) 0%, rgba(184,150,74,0.05) 60%, rgba(255,255,255,0) 100%),
    var(--paper-2);
  border-left: 3px solid var(--sandstone);
  border-radius: 2px;
  position: relative;
}
.welcome-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(193,103,74,0.15);
  border-left: 0;
  border-radius: 0 2px 2px 0;
  pointer-events: none;
}
.welcome-callout-glyph {
  width: 64px;
  height: 64px;
  color: var(--sandstone-deep);
  flex: none;
  margin-top: 0.25rem;
}
.welcome-callout-glyph svg { width: 100%; height: 100%; display: block; }
.welcome-callout-eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sandstone-deep);
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.welcome-callout-pron {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.welcome-callout-def {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 var(--s-3) 0;
  text-wrap: pretty;
}
.welcome-callout-coda {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gold-deep);
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid rgba(193,103,74,0.18);
}
@media (max-width: 700px) {
  .welcome-callout { grid-template-columns: 1fr; padding: var(--s-4); }
  .welcome-callout-glyph { width: 48px; height: 48px; }
  .welcome-callout-def { font-size: 1.05rem; }
}

/* =========================================================
   Closing hero — image with overlaid Soul Purpose + invitations
   ========================================================= */
.closing-hero {
  position: relative;
  width: 100%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.closing-hero-img {
  position: absolute;
  inset: -10% 0 -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  z-index: -2;
  will-change: transform;
}
.closing-hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Image stays fully vibrant — only a very faint vignette to soften edges */
  background: radial-gradient(ellipse at center, rgba(15,12,10,0) 50%, rgba(15,12,10,0.18) 100%);
}
.closing-hero-content {
  position: relative;
  width: 100%;
  max-width: 980px;
  padding: var(--s-7) var(--gut);
  color: var(--paper);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse at center, rgba(11,11,11,0.44) 0%, rgba(11,11,11,0.01) 70%);
}
.closing-hero-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--s-4);
  text-shadow: 0 1px 8px rgba(0,0,0,0.55), 0 0 18px rgba(0,0,0,0.4);
}
.closing-hero-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.6rem, 3.5vw, 2.7rem);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: #ffffff;
  max-width: 22em;
  margin: 0 auto var(--s-7);
  text-wrap: balance;
  text-shadow:
    0 1px 0 rgba(114, 113, 113, 0.35),
    0 0 18px rgba(49, 49, 49, 0.45),
    /**0 0 36px rgba(255,255,255,0.25),
    0 0 28px rgba(180, 180, 180, 0.55),**/
    0 6px 32px rgba(0,0,0,0.25);
}
.closing-hero-cards-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--s-4);
  text-shadow: 0 1px 8px rgba(0,0,0,0.6), 0 0 18px rgba(0,0,0,0.45);
}
.closing-hero-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  width: 100%;
  max-width: 920px;
}
.closing-card {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.1rem 1rem;
  background: rgba(244, 237, 225, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(184, 150, 74, 0.35);
  border-radius: 3px;
  text-align: left;
  color: var(--ink);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(15, 12, 10, 0.18);
}
.closing-card:hover {
  background: rgba(251, 246, 236, 0.92);
  border-color: var(--sandstone);
  transform: translateY(-2px);
}
.closing-card-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sandstone-deep);
  line-height: 1;
}
.closing-card-label {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
}
.closing-card-meta {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
  padding-top: 0.4rem;
}
.closing-card:hover .closing-card-meta { color: var(--sandstone-deep); }

@media (max-width: 900px) {
  .closing-hero-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .closing-hero { min-height: 70vh; }
  .closing-hero-cards { grid-template-columns: 1fr; }
  .closing-hero-content { padding: var(--s-5) var(--gut); }
}

/* =========================================================
   Installations Carousel — text-led card with small image,
   used on the-project.html to step through venues, art
   installations, and play areas.
   ========================================================= */
.installations-carousel {
  outline: none;
}

/* Peeking-card viewport: track is translated by JS for explicit
   smooth animation on drag/swipe. Viewport clips overflow only.
   touch-action: pan-y lets the page scroll vertically while keeping
   horizontal touch motion captured by our pointer-event drag. */
.ic-viewport {
  position: relative;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: grab;
  outline: none;
  /* Soft fade on the peek edges so partials feel intentional */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ic-viewport.is-dragging { cursor: grabbing; }

/* Floating prev/next arrows — visible on touch/mobile only. On desktop
   the drag interaction is enough. */
.ic-nav {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(244, 237, 225, 0.92);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease;
  padding: 0;
}
.ic-nav:hover { background: var(--paper); }
.ic-nav:active { transform: translateY(-50%) scale(0.94); }
.ic-nav-prev { left: 12px; }
.ic-nav-next { right: 12px; }
.ic-nav svg { width: 18px; height: 18px; }
.ic-nav[disabled] { opacity: 0.35; cursor: default; }
.ic-viewport:focus-visible .ic-card.is-active {
  box-shadow: 0 0 0 2px var(--sandstone), 0 30px 60px -30px rgba(26,22,18,0.22);
}

.ic-track {
  display: flex;
  align-items: stretch;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}

/* Card layout: image fills the right ~60% as a background layer,
   with a paper-colored gradient fading over its left edge so the
   text reads cleanly while overlapping the image slightly. */
.ic-card {
  flex: 0 0 80%;
  position: relative;
  height: 400px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px -32px rgba(26,22,18,0.22);
  transition: opacity 0.4s ease, box-shadow 0.4s ease;
  opacity: 0.5;
}
.ic-card.is-active {
  opacity: 1;
  box-shadow: 0 30px 60px -30px rgba(26,22,18,0.32);
}

/* Gradient mask over the figure — paper at left, fading to clear
   image on the right. Lives above the figure, below the text. */
.ic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Solid paper covers card up to image edge (40%); fades over the
     first ~10% of the image so the image is fully visible by 46%. */
  background: linear-gradient(
    90deg,
    var(--paper) 0%,
    var(--paper) 40%,
    rgba(244, 237, 225, 0) 46%
  );
  z-index: 2;
  pointer-events: none;
}

.ic-text {
  position: relative;
  z-index: 3;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: var(--s-5);
}

.ic-eyebrow {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.2rem;
  line-height: 1.2;
}
.ic-eyebrow .ic-cat {
  color: var(--sandstone-deep);
  font-weight: 600;
  white-space: nowrap;
}
.ic-eyebrow .ic-sep {
  color: var(--rule);
  font-size: 0.85rem;
  display: none;
}
.ic-eyebrow .ic-size {
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: none;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--ink-mute);
  white-space: nowrap;
  position: relative;
  padding-left: 0.8rem;
}
.ic-eyebrow .ic-size::before {
  content: "·";
  position: absolute;
  left: 0.1rem;
  top: -0.1em;
  color: var(--rule);
  font-size: 1rem;
}

.ic-name {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
  color: #0d0a07;
  margin: 0 0 0.4rem 0;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.ic-body {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.55;
  color: #1a140e;
  margin: 0;
  text-wrap: pretty;
  max-width: 36em;
  text-shadow: 1px 1px 5px rgba(255, 255, 255, 0.85);
}

.ic-eyebrow { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }

.ic-figure {
  margin: 0;
  position: absolute;
  inset: 0 0 0 40%;
  z-index: 1;
  background: linear-gradient(135deg, oklch(91% 0.018 70) 0%, oklch(86% 0.025 50) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.ic-figure img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
.ic-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ic-figure::before {
  /* placeholder pattern when image fails or is missing */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 25% 25%, rgba(177,90,60,0.08) 0%, transparent 35%),
    radial-gradient(circle at 75% 75%, rgba(184,150,74,0.08) 0%, transparent 35%),
    repeating-linear-gradient(
      45deg,
      rgba(177,90,60,0.025) 0 14px,
      rgba(177,90,60,0.06) 14px 28px
    );
  z-index: 0;
}
.ic-figure::after {
  /* "image pending" stamp, only when no image loads */
  content: "image pending";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(80,55,30,0.42);
  z-index: 0;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.ic-figure-loading::after,
.ic-figure-error::after {
  opacity: 1;
}
.ic-figcaption {
  display: none;
}

.ic-groups {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.ic-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.ic-group-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.ic-dots {
  display: flex;
  gap: 0.5rem;
}
/* .ic-dot styling unified with .photo-dot — see top of carousel rules */

/* Tablet */
@media (max-width: 1024px) {
  .ic-card { height: 380px; }
}

/* Mobile — split-card design. Image on top, paper text panel below.
   No overlay, no contrast guessing. The body text is too long for the
   hero-overlay pattern, so text gets its own readable surface. */
@media (max-width: 720px) {
  .ic-card {
    flex: 0 0 88%;
    height: auto;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .ic-figure {
    position: relative;
    inset: auto;
    width: 100%;
    height: 220px;
    flex-shrink: 0;
  }
  /* Drop the gradient overlay — image and text are now physically separated */
  .ic-card::after { display: none; }
  .ic-text {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    padding: var(--s-4);
    background: var(--paper);
    color: var(--ink);
    justify-content: flex-start;
    text-shadow: none;
  }
  /* Reset to dark text on paper (was white-on-image for the old design) */
  .section-sandstone-deep .ic-card .ic-name,
  .section-pine .ic-card .ic-name {
    color: #0d0a07;
    text-shadow: none;
  }
  .section-sandstone-deep .ic-card .ic-body,
  .section-pine .ic-card .ic-body {
    color: #1a140e;
    text-shadow: none;
  }
  .section-sandstone-deep .ic-card .ic-eyebrow,
  .section-pine .ic-card .ic-eyebrow { text-shadow: none; }
  .section-sandstone-deep .ic-card .ic-eyebrow .ic-cat,
  .section-pine .ic-card .ic-eyebrow .ic-cat { color: var(--sandstone-deep); }
  .section-sandstone-deep .ic-card .ic-eyebrow .ic-size,
  .section-pine .ic-card .ic-eyebrow .ic-size { color: var(--ink-mute); }
  .ic-name { font-size: 1.55rem; }
  .ic-body { font-size: 0.95rem; line-height: 1.5; }
  /* Single-row indicators: drop the category labels, keep dots compact */
  .ic-groups {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }
  .ic-group { flex-direction: row; gap: 0.4rem; }
  .ic-group-label { display: none; }
  .ic-dots { gap: 0.35rem; }
  /* Show floating nav arrows on touch screens; center over the image */
  .ic-nav {
    display: flex;
    top: 110px;
    transform: translateY(-50%);
  }
  .ic-nav:active { transform: translateY(-50%) scale(0.94); }
}

/* =========================================================
   Card Deck — click-to-reveal divination-style stack.
   Currently used by the Four Pillars section on /the-project/.
   Markup pattern:
     .deck-stage[data-deck-stage]
       .deck-stage-head
         .deck-stage-text  (heading + lede + .deck-prompt)
         .deck-pile-origin[data-deck-origin]  (.deck-reset-placeholder)
       .deck-slots         (4x .deck-slot)
       .deck-cards-layer   (4x .deck-card with back + front faces)
   JS: initCardDecks() in site.js drives the deal/reset logic.
   ========================================================= */

.deck-stage {
  position: relative;
  /* Card sizing tokens scoped to the deck so they don't leak
     into the rest of the site. Tweak here to resize the deck. */
  --card-w: 220px;
  --card-h: 300px;
  --card-gap: var(--s-4);
  --stack-offset: 5px; /* per-card stagger in the deck pile */
}

.deck-stage-head {
  display: grid;
  grid-template-columns: 1fr var(--card-w);
  gap: var(--s-6);
  align-items: start;
  margin-bottom: var(--s-4);
  min-height: var(--card-h);
}
.deck-stage-text { padding-top: 0; }
/* Tighten the gap between the lede and the click-prompt so
   the heading area doesn't push the deck and slots downward. */
.deck-stage-text .measure-prose { margin-bottom: var(--s-3); }

/* Italic prompt that calls out the click affordance.
   Two variants live in the markup so each viewport gets the prompt
   in the right place: -desktop sits in the heading column under
   the lede, -mobile sits centered below the card deck area. */
.deck-prompt {
  font: italic 1rem/1.55 var(--font-serif);
  color: rgba(244, 237, 225, 0.62);
  margin: 0;
  max-width: 56ch;
}
.deck-prompt-mobile { display: none; }
@media (max-width: 900px) {
  .deck-prompt-desktop { display: none; }
  .deck-prompt-mobile {
    display: block;
    margin: var(--s-5) auto 0;
    width: 75%;
    max-width: none;
    text-align: center;
  }
}

/* Anchor cell that reserves the deck's resting position in the
   right column of the header row. Measured by JS. Also doubles
   as the click-to-reset surface once the deck is fully dealt.
   Lifted slightly so it floats above slot 4's landing position. */
.deck-pile-origin {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  justify-self: end;
  margin-top: -1.5rem;
  margin-right: 2rem;
}
/* Reset Deck button — sits where the deck pile lived. Hidden until
   the deck is fully dealt (.is-spent), so it doesn't compete with
   the cards while the deck is intact. Solid rounded box, gold text. */
.deck-reset-placeholder {
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Sit in the BOTTOM card's footprint so it occupies the exact spot
     where the deepest card of the pile sat. */
  transform: translate(calc(var(--stack-offset) * 3), calc(var(--stack-offset) * 3));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: var(--s-3);
  border: 1px solid rgba(184, 150, 74, 0.55);
  border-radius: 10px;
  background: rgba(36, 49, 33, 0.92);
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: default;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.deck-reset-placeholder span { display: block; }
.deck-stage.is-spent .deck-reset-placeholder {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}
.deck-stage.is-spent .deck-reset-placeholder:hover {
  color: var(--paper);
  border-color: var(--gold);
  background: rgba(184, 150, 74, 0.18);
}

/* Slots row — receives the dealt cards. Replaces the old .pillars grid. */
.deck-slots {
  display: grid;
  grid-template-columns: repeat(4, var(--card-w));
  gap: var(--card-gap);
  justify-content: space-between;
  height: var(--card-h);
}
.deck-slot {
  border: 1px dashed rgba(184, 150, 74, 0.18);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.08);
  transition: opacity 0.4s ease;
}
.deck-slot.is-filled { opacity: 0; }

/* Cards float in their own absolute layer over the stage. */
.deck-cards-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 1400px;
}

/* ---- card outer (handles travel) ---- */
.deck-card {
  position: absolute;
  top: 0; left: 0;
  width: var(--card-w);
  height: var(--card-h);
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--rot, 0deg));
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: var(--z, 1);
  will-change: transform;
  /* Hidden until the stage signals it's ready; the fall-in
     animation handles the entrance from there. */
  opacity: 0;
}
/* Once is-ready, cards become visible. Animation rule is split off
   below and suppressed once .has-entered is set, so the entrance
   doesn't re-fire later when other animation classes (return-arc)
   come and go. */
.deck-stage.is-ready .deck-card { opacity: 1; }
.deck-stage.is-ready:not(.has-entered) .deck-card {
  animation: deck-card-fall-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
/* Stagger so the bottom card lands first, then each card
   above falls onto the growing stack. */
.deck-stage.is-ready:not(.has-entered) .deck-card[data-card="3"] { animation-delay: 0s;    }
.deck-stage.is-ready:not(.has-entered) .deck-card[data-card="2"] { animation-delay: 0.16s; }
.deck-stage.is-ready:not(.has-entered) .deck-card[data-card="1"] { animation-delay: 0.32s; }
.deck-stage.is-ready:not(.has-entered) .deck-card[data-card="0"] { animation-delay: 0.48s; }

.deck-card[data-clickable] {
  pointer-events: auto;
  cursor: pointer;
}
.deck-card[data-clickable]:hover {
  transform: translate(var(--x, 0), calc(var(--y, 0) - 6px)) rotate(var(--rot, 0deg));
}
/* Slow pulsing glow on whichever card is currently the clickable
   top of the deck. Lives on the back face so it tracks the visible
   side of the pile. */
.deck-card[data-clickable] .deck-card-back {
  animation: deck-card-pulse 1.6s ease-in-out infinite;
}
.deck-card.is-placed {
  transform: translate(var(--slot-x), var(--slot-y)) rotate(0deg);
}

@keyframes deck-card-fall-in {
  from {
    opacity: 0;
    transform:
      translate(var(--x, 0), var(--y, 0))
      rotate(var(--rot, 0deg))
      translateZ(180px);
  }
  to {
    opacity: 1;
    transform:
      translate(var(--x, 0), var(--y, 0))
      rotate(var(--rot, 0deg))
      translateZ(0);
  }
}
@keyframes deck-card-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.3),
      0 18px 40px -16px rgba(0, 0, 0, 0.55),
      0 0 0 rgba(184, 150, 74, 0);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(0, 0, 0, 0.3),
      0 18px 40px -16px rgba(0, 0, 0, 0.55),
      0 0 22px rgba(184, 150, 74, 0.4);
  }
}

/* ---- card inner (handles the flip) ---- */
.deck-card-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.deck-card.is-flipping .deck-card-inner,
.deck-card.is-placed .deck-card-inner {
  transform: rotateY(180deg);
}
/* Returning card un-flips IN PLACE (outer still at slot position).
   This selector wins over .is-placed because it comes later in the
   cascade with equal specificity, so the inner rotates back to face
   down before the outer animates home. */
.deck-card.is-returning .deck-card-inner {
  transform: rotateY(0deg);
}

/* After the flip, the card takes a curved path back to the deck:
   sweeps far LEFT past the revealed pile (almost off-screen), drops
   DOWN, then arcs back to the right onto the deck pile. JS sets the
   waypoint vars and toggles --z mid-animation so the card visibly
   recedes behind the deck on its return. */
@keyframes deck-card-return-arc {
  0% {
    transform: translate(var(--slot-x), var(--slot-y)) rotate(0deg);
  }
  40% {
    /* Way left, past the revealed cards (mostly off-screen). */
    transform: translate(var(--arc-leftmost-x), var(--slot-y)) rotate(-7deg);
  }
  70% {
    /* Dropped down at the leftmost point. */
    transform: translate(var(--arc-leftmost-x), var(--arc-down-y)) rotate(-4deg);
  }
  100% {
    /* Up and right onto the deck pile (final position). */
    transform: translate(var(--x), var(--y)) rotate(var(--rot));
  }
}
/* Specificity must beat .deck-stage.is-ready .deck-card (which sets
   animation: deck-card-fall-in) — otherwise the arc never runs. */
.deck-stage .deck-card.is-returning-arc {
  animation: deck-card-return-arc 1s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
.deck-card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}

/* ===== CARD BACK — divination card design ===== */
.deck-card-back {
  background:
    radial-gradient(ellipse at center, rgba(184, 150, 74, 0.16) 0%, transparent 65%),
    linear-gradient(160deg, #2c3729 0%, #1c261b 100%);
  border: 1px solid rgba(184, 150, 74, 0.45);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    0 18px 40px -16px rgba(0, 0, 0, 0.55);
  color: var(--gold);
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 22px 18px;
  text-align: center;
}
/* double inner border */
.deck-card-back::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(184, 150, 74, 0.35);
  border-radius: 4px;
  pointer-events: none;
}
.deck-card-back::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184, 150, 74, 0.15);
  border-radius: 3px;
  pointer-events: none;
}
.deck-card-back-word {
  font: 0.52rem/1 var(--font-body);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(184, 150, 74, 0.92);
  /* compensate for trailing letter-spacing on the right
     so the visual word sits true-centered in the card */
  padding-left: 0.24em;
  align-self: end;
  position: relative;
  z-index: 1;
  white-space: nowrap;
}
.deck-card-back-word.is-bottom { align-self: start; }
.deck-card-back-mark {
  width: 76px;
  height: 76px;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 22px rgba(184, 150, 74, 0.25));
}
.deck-card-back-mark svg {
  width: 100%; height: 100%;
  stroke: var(--gold);
  stroke-width: 2.4;
}

/* corner ornaments */
.deck-card-back-corner {
  position: absolute;
  width: 22px; height: 22px;
  pointer-events: none;
  color: rgba(184, 150, 74, 0.55);
}
.deck-card-back-corner.tl { top: 18px; left: 18px; }
.deck-card-back-corner.tr { top: 18px; right: 18px; transform: scaleX(-1); }
.deck-card-back-corner.bl { bottom: 18px; left: 18px; transform: scaleY(-1); }
.deck-card-back-corner.br { bottom: 18px; right: 18px; transform: scale(-1, -1); }
.deck-card-back-corner svg { width: 100%; height: 100%; }

/* ===== CARD FRONT — pillar content =====
   A gold disc anchors the top-left corner (clipped by the card's
   rounded-rect overflow), with the pillar icon rendered in dark
   ink on top of it. Title sits below the icon, body text follows. */
.deck-card-front {
  transform: rotateY(180deg);
  background-color: #243121;
  background-image:
    linear-gradient(180deg, rgba(253, 249, 240, 0.06) 0%, rgba(253, 249, 240, 0.02) 100%);
  border: 1px solid rgba(184, 150, 74, 0.32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 36px -22px rgba(0, 0, 0, 0.5);
  padding: var(--s-3);
  display: flex; flex-direction: column;
  color: var(--paper);
}
/* Faint connected lattice across the card front. The X-lines extend
   tile-to-tile so the pattern reads as one continuous network. The
   whole layer is oversized + rotated so it tilts cleanly without
   exposing corners (the parent's overflow:hidden clips it back).
   Tweak: stroke alpha (opacity), background-size (density), rotate angle. */
.deck-card-front::after {
  content: '';
  position: absolute;
  inset: -120px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'><g fill='none' stroke='rgba(184,150,74,0.15)' stroke-width='0.5'><path d='M-2 -2 L46 46 M46 -2 L-2 46'/><circle cx='22' cy='22' r='3.5'/></g></svg>");
  background-repeat: repeat;
  background-size: 44px 44px;
  transform: rotate(15deg);
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
}
.deck-card-front::before {
  content: '';
  position: absolute;
  top: -65px;
  left: -75px;
  width: 1350px;
  height: 135px;
  border-radius: 50%;
  background: var(--gold);
  z-index: 0;
  pointer-events: none;
}
/* Lift everything inside the card above the gold disc. */
.deck-card-front > * {
  position: relative;
  z-index: 1;
}
.deck-card-front .pillar-icon {
  width: 48px; 
  /* height: 48px; */
  top: 0px;
  right: 5px;  
  position: absolute;
  /* margin-bottom: var(--s-3); */
  color: var(--ink); /* dark contrast inside the gold disc */
}
.deck-card-front .pillar-icon svg { 
    width: 100%; 
    height: 100%; 
    stroke-width: 2.2;
}
.deck-card-front h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  text-align: left;
  margin: 25px 0 0.45rem 0; /* tight gap so paragraph rises */
  line-height: 1.1;
}
.deck-card-front p {
  font-size: 0.95rem;
  line-height: 1.2; /* tighter than the lede so more text fits */
  color: rgba(244, 237, 225, 0.82);
  margin: 0;
}

/* ---- mobile: deal pile on top, single revealed pile below ---- */
@media (max-width: 900px) {
  .deck-stage-head {
    grid-template-columns: 1fr;
    gap: var(--s-5);
  }
  /* Deck centered initially. After the first deal, JS adds .has-dealt
     to the stage and the pile snaps left so it sits side-by-side with
     the revealed pile (with horizontal overlap in the middle).
     No transition on the pile-origin itself — JS-driven instant shift,
     so layout() can measure the new position immediately. The card
     elements then animate to the new position via their own
     transform transition. */
  .deck-pile-origin {
    justify-self: center;
    margin-right: 0;
    transform: translateX(var(--pile-x, 0));
  }
  .deck-stage.has-dealt .deck-pile-origin {
    --pile-x: -25%;
  }
  /* Revealed pile sits at the SAME vertical level as the deck pile
     (pulled up via negative margin) and is shifted RIGHT so the two
     piles share the row with horizontal overlap in the middle. */
  .deck-stage-head { margin-bottom: 0; }
  .deck-slots {
    display: block;
    position: relative;
    width: var(--card-w);
    height: var(--card-h);
    margin: calc(-1 * var(--card-h)) auto 0;
    transform: translateX(25%);
    grid-template-columns: none;
    gap: 0;
    justify-content: initial;
  }
  .deck-slot {
    position: absolute;
    top: 0; left: 0;
    width: var(--card-w);
    height: var(--card-h);
    border: none;
    background: none;
    min-height: 0;
  }
  /* Horizontal stacking — each slot offset further right so dealt
     cards land slightly right of the previous one. */
  .deck-slot[data-slot="0"] { transform: translateX(0); }
  .deck-slot[data-slot="1"] { transform: translateX(var(--stack-offset)); }
  .deck-slot[data-slot="2"] { transform: translateX(calc(var(--stack-offset) * 2)); }
  .deck-slot[data-slot="3"] { transform: translateX(calc(var(--stack-offset) * 3)); }

  /* Mobile reset button — small compact box on the LEFT side of the
     deck-pile-origin, vertically centered with the cards. Overrides
     the desktop card-sized placeholder so it doesn't get covered by
     the revealed pile that overlaps the deck pile area on mobile. */
  .deck-reset-placeholder {
    inset: auto;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    line-height: 1.05;
    gap: 0.1rem;
    border-radius: 8px;
    z-index: 30;
  }
}