/* ==========================================================================
   Endless Hybrids — Components  (v1.1.0)
   Reusable .eh-* classes extracted from the landing page. Each reads only
   semantic tokens, so any [data-theme] container reskins them automatically.
   Load LAST: tokens.css -> themes.css -> base.css -> components.css.
   Naming: .eh-block / .eh-block__part / .eh-block--variant.
   ========================================================================== */

/* ==========================================================================
   Layout utilities
   ========================================================================== */
.eh-container { max-width: var(--eh-container-xl); margin-inline: auto; }
.eh-container--narrow { max-width: var(--eh-container-narrow); }
.eh-container--md     { max-width: var(--eh-container-md); }
.eh-container--lg     { max-width: var(--eh-container-lg); }

.eh-section { padding-block: clamp(48px, 6vw, 72px); padding-inline: var(--eh-section-pad); }

.eh-grid { display: grid; gap: var(--eh-space-7); }
.eh-grid--2 { grid-template-columns: repeat(2, 1fr); }
.eh-grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ==========================================================================
   Hero / cover (publication differentiator — distinct image per publication)
   Put data-theme="dark-navy" (or "dark-cinematic") on the hero so its text
   uses cream tokens. Set --eh-accent-2 on it for an optional per-publication
   secondary accent (used only on the eyebrow underline — see README rules).
   ========================================================================== */
.eh-hero {
  --eh-hero-scrim: linear-gradient(180deg, rgba(20,18,14,0.12) 0%, rgba(20,18,14,0.72) 100%);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: 340px; border-radius: var(--eh-radius-md);
}
.eh-hero--tall { min-height: 480px; }
.eh-hero--plain { border-radius: 0; }      /* full-bleed band (no rounded corners) */

.eh-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--eh-navy); }
.eh-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.eh-hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--eh-hero-scrim); }

.eh-hero__inner {
  width: 100%; max-width: var(--eh-container-md); margin-inline: auto;
  padding: clamp(28px, 5vw, 56px);
}
.eh-hero__eyebrow {
  font-family: var(--eh-font-sans); font-size: var(--eh-type-eyebrow);
  text-transform: uppercase; letter-spacing: var(--eh-track-eyebrow);
  color: var(--eh-muted);
}
.eh-hero__eyebrow--accent {
  display: inline-block; padding-bottom: 5px;
  border-bottom: 2px solid var(--eh-accent-2, var(--eh-accent));
}
.eh-hero__title {
  font-family: var(--eh-font-serif); font-weight: 400;
  font-size: var(--eh-type-display); line-height: var(--eh-lh-tight);
  color: var(--eh-heading); margin: var(--eh-space-3) 0 0;
}
.eh-hero__title em { font-style: italic; font-weight: 300; color: var(--eh-accent); }
.eh-hero__sub {
  font-family: var(--eh-font-serif); font-style: italic;
  font-size: var(--eh-type-subhead); line-height: 1.5;
  color: var(--eh-muted); margin-top: var(--eh-space-3);
  max-width: var(--eh-container-narrow);
}
.eh-hero__cta { margin-top: var(--eh-space-5); }

/* ==========================================================================
   Navbar
   ========================================================================== */
.eh-navbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding-inline: var(--eh-section-pad);
  background: var(--eh-surface-page);
  border-bottom: var(--eh-border-hairline);
}
.eh-navbar__logo {
  font-family: var(--eh-font-serif); font-weight: 500;
  font-size: 20px; color: var(--eh-heading); letter-spacing: 0.3px;
}
.eh-navbar__links { display: flex; gap: var(--eh-space-7); }
.eh-navbar__links a {
  font-family: var(--eh-font-sans); font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--eh-track-label);
  color: var(--eh-muted); opacity: 1;
  transition: color var(--eh-dur-hover) var(--eh-ease);
}
.eh-navbar__links a:hover { color: var(--eh-accent); opacity: 1; }

/* ==========================================================================
   Thesis / hero heading (compact, text-only)
   ========================================================================== */
.eh-thesis {
  font-family: var(--eh-font-serif); font-weight: 400;
  font-size: var(--eh-type-display); line-height: var(--eh-lh-tight);
  color: var(--eh-heading); letter-spacing: 1px;
}
.eh-thesis em { font-style: italic; font-weight: 300; color: var(--eh-accent); }
.eh-thesis-sub {
  font-family: var(--eh-font-serif); font-style: italic;
  font-size: var(--eh-type-subhead); line-height: 1.6;
  color: var(--eh-navy-soft); letter-spacing: 0.8px;
}
.eh-thesis-sub strong { font-weight: 500; color: var(--eh-heading); }

/* ==========================================================================
   Banner (the signature navy card: red left border + faint red wash)
   ========================================================================== */
.eh-banner {
  position: relative; overflow: hidden;
  max-width: var(--eh-container-narrow); margin-inline: auto;
  padding: clamp(32px, 4vw, 40px) clamp(24px, 4vw, 48px);
  background: var(--eh-navy); color: var(--eh-cream-strong);
  border-left: 3px solid var(--eh-red); border-radius: var(--eh-radius-md);
}
.eh-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--eh-red-wash) 0%, transparent 60%);
}
.eh-banner > * { position: relative; }
.eh-banner__heading {
  font-family: var(--eh-font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 32px); line-height: 1.3;
  color: rgba(255, 248, 230, 0.95); margin-bottom: var(--eh-space-4);
}
.eh-banner__body {
  font-family: var(--eh-font-sans); font-weight: 400;
  font-size: var(--eh-type-body); line-height: var(--eh-lh-body); color: var(--eh-cream-mute);
}
.eh-banner__body p { margin-bottom: var(--eh-space-3); }
.eh-banner__body strong { color: var(--eh-cream-strong); font-weight: 400; }

/* ==========================================================================
   Section label + collection header
   ========================================================================== */
.eh-section-label { text-align: center; }
.eh-section-label__text {
  font-family: var(--eh-font-serif); font-style: italic;
  font-size: var(--eh-type-h2); color: var(--eh-muted); letter-spacing: 0.5px;
}
.eh-section-label__rule {
  width: 32px; height: 1px; margin: var(--eh-space-3) auto 0;
  background: var(--eh-accent); opacity: 0.7;
}

.eh-collection-header { max-width: var(--eh-container-xl); margin: 0 auto var(--eh-space-8); text-align: center; }
.eh-collection-header__title {
  font-family: var(--eh-font-serif); font-style: italic;
  font-size: var(--eh-type-h2); color: var(--eh-heading); letter-spacing: 0.5px;
}
.eh-collection-header__title em { color: var(--eh-accent); font-style: italic; }
.eh-collection-header__desc {
  font-family: var(--eh-font-sans); font-weight: 400;
  font-size: var(--eh-type-body-sm); line-height: var(--eh-lh-body);
  color: var(--eh-muted); max-width: var(--eh-container-narrow);
  margin: var(--eh-space-3) auto 0;
}

/* ==========================================================================
   Cards (project = row, channel = stacked; featured + breathe variants)
   ========================================================================== */
.eh-card {
  display: flex; column-gap: var(--eh-space-9); row-gap: 0; align-items: flex-start; flex-wrap: wrap;
  padding: var(--eh-space-8); border-radius: var(--eh-radius-md);
  background: var(--eh-surface-raised); border: var(--eh-border-hairline);
  transition: border-color var(--eh-dur-hover) var(--eh-ease),
              box-shadow var(--eh-dur-hover) var(--eh-ease);
}
.eh-card:hover { border-color: var(--eh-divider-hover); box-shadow: var(--eh-elev-card); }

.eh-card--featured { border-left: 3px solid var(--eh-accent); padding: clamp(32px, 4vw, 40px); }
.eh-card--stacked  { flex-direction: column; gap: var(--eh-space-3); align-items: stretch; padding: var(--eh-space-7) var(--eh-space-6); }
.eh-card--stacked:hover { box-shadow: var(--eh-elev-soft); }
.eh-card--breathe { animation: eh-breathe var(--eh-breathe-dur) ease-in-out infinite; }
.eh-card--breathe:hover { animation: none; }

.eh-card__media {
  border-radius: var(--eh-radius-sm); background: var(--eh-navy);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.eh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-out; }
.eh-card:hover .eh-card__media img { transform: scale(1.03); }
.eh-card:not(.eh-card--stacked) .eh-card__media { width: 300px; min-width: 300px; height: 190px; }
.eh-card--featured .eh-card__media { height: 230px; }
.eh-card--stacked  .eh-card__media { width: 100%; height: 140px; margin-bottom: var(--eh-space-1); }

.eh-card__text { flex: 1; }
.eh-card__eyebrow {
  font-family: var(--eh-font-sans); font-size: var(--eh-type-eyebrow);
  text-transform: uppercase; letter-spacing: var(--eh-track-eyebrow); color: var(--eh-muted);
}
.eh-card__title {
  font-family: var(--eh-font-serif); font-weight: 500; font-size: var(--eh-type-h3);
  color: var(--eh-heading); letter-spacing: 0.3px; margin-bottom: var(--eh-space-1);
}
.eh-card--stacked .eh-card__title { font-size: 20px; }
.eh-card__meta {
  font-family: var(--eh-font-sans); font-size: var(--eh-type-label);
  text-transform: uppercase; letter-spacing: var(--eh-track-label);
  color: var(--eh-muted); margin-bottom: var(--eh-space-3);
}
.eh-card__status {
  display: inline-block; font-size: var(--eh-type-eyebrow);
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--eh-accent); margin-left: var(--eh-space-3);
}
.eh-card__body { font-size: var(--eh-type-body); line-height: var(--eh-lh-body); color: var(--eh-body); max-width: 560px; }

/* Accordion expand — place as a direct child of .eh-card (a sibling of __media /
   __text), NOT inside __text. It wraps onto its own full-width line below the
   image + body, so the hr + text align to the image's left edge (card padding). */
.eh-card__expand { width: 100%; max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.5s var(--eh-ease), opacity 0.4s var(--eh-ease); }
.eh-card.is-expanded .eh-card__expand { max-height: 500px; opacity: 1; }
.eh-card__expand-inner {
  padding: var(--eh-space-5) 0 var(--eh-space-2); max-width: 720px;
  font-size: var(--eh-type-body); line-height: var(--eh-lh-body);
  color: var(--eh-body); border-top: var(--eh-border-hairline);
}

/* ==========================================================================
   Buttons + text links
   ========================================================================== */
.eh-btn {
  display: inline-flex; align-items: center; gap: var(--eh-space-2);
  padding: 10px var(--eh-space-6); border: 0; border-radius: var(--eh-radius-sm);
  font-family: var(--eh-font-sans); font-size: var(--eh-type-cta);
  text-transform: uppercase; letter-spacing: var(--eh-track-label);
  cursor: pointer; transition: opacity var(--eh-dur-hover) var(--eh-ease),
                               box-shadow var(--eh-dur-hover) var(--eh-ease);
}
/* Primary CTA is the studio's RED signature — constant across themes (does NOT
   follow --eh-accent, so it stays red even inside a dark-cinematic hero). */
.eh-btn--accent { background: var(--eh-red); color: var(--eh-cream-bg); }
.eh-btn--accent:hover { opacity: 0.9; box-shadow: var(--eh-elev-cta); }

.eh-textlink {
  display: inline-flex; align-items: center; gap: var(--eh-space-2);
  font-family: var(--eh-font-sans); font-size: var(--eh-type-cta);
  text-transform: uppercase; letter-spacing: var(--eh-track-label);
  color: var(--eh-heading); opacity: 0.55; cursor: pointer;
  background: none; border: 0; padding: 0;
  transition: opacity var(--eh-dur-hover) var(--eh-ease);
}
.eh-textlink:hover { opacity: 0.9; }
.eh-textlink--accent { color: var(--eh-accent); opacity: 1; letter-spacing: 1.5px; }
.eh-textlink__arrow { transition: transform var(--eh-dur-hover) var(--eh-ease); }
.eh-textlink:hover .eh-textlink__arrow { transform: translateX(4px); }
/* Toggle (Read more / less): vertical arrow that flips when expanded */
.eh-textlink--toggle .eh-textlink__arrow { transition: transform var(--eh-dur-hover) var(--eh-ease); }
.eh-card.is-expanded .eh-textlink--toggle .eh-textlink__arrow,
.eh-textlink--toggle[aria-expanded="true"] .eh-textlink__arrow { transform: rotate(180deg); }

.eh-support-line {
  font-family: var(--eh-font-sans); font-weight: 300; font-size: 14px;
  line-height: 1.5; color: var(--eh-muted);
}

/* ==========================================================================
   Definition list (the "method" rows)
   ========================================================================== */
.eh-deflist { display: flex; flex-direction: column; }
.eh-deflist__item {
  display: flex; gap: var(--eh-space-6); align-items: baseline;
  padding: var(--eh-space-6) 0; border-bottom: var(--eh-border-hairline);
}
.eh-deflist__item:last-child { border-bottom: none; }
.eh-deflist__term {
  font-family: var(--eh-font-serif); font-style: italic; font-weight: 500;
  font-size: 17px; line-height: 1.4; color: var(--eh-heading);
  letter-spacing: 0.3px; min-width: 160px; flex-shrink: 0;
}
.eh-deflist__desc {
  font-family: var(--eh-font-sans); font-weight: 400; font-size: var(--eh-type-body-sm);
  line-height: var(--eh-lh-body); color: var(--eh-body); flex: 1;
}

/* ==========================================================================
   Bio / person block
   ========================================================================== */
.eh-bio { display: flex; gap: var(--eh-space-11); align-items: center; max-width: var(--eh-container-md); margin-inline: auto; }
.eh-bio__photo {
  width: 120px; min-width: 120px; height: 120px; border-radius: var(--eh-radius-round);
  background: var(--eh-navy); overflow: hidden;
}
.eh-bio__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.eh-bio__name { font-family: var(--eh-font-serif); font-weight: 500; font-size: var(--eh-type-h3); color: var(--eh-heading); letter-spacing: 0.3px; }
.eh-bio__role { font-family: var(--eh-font-sans); font-size: var(--eh-type-label); text-transform: uppercase; letter-spacing: var(--eh-track-label); color: var(--eh-muted); margin-bottom: var(--eh-space-1); }
.eh-bio__text { font-size: var(--eh-type-body); line-height: var(--eh-lh-body); color: var(--eh-body); max-width: var(--eh-container-narrow); }

/* ==========================================================================
   Kanji rule (交 divider)
   ========================================================================== */
.eh-kanji-rule { text-align: center; padding: var(--eh-space-12) var(--eh-space-6) var(--eh-space-8); }
.eh-kanji-rule__mark { display: block; font-family: var(--eh-font-serif); font-size: 2.4rem; line-height: 1; color: var(--eh-accent); margin-bottom: var(--eh-space-2); }
.eh-kanji-rule__reading { font-family: var(--eh-font-serif); font-style: italic; font-size: 1.05rem; color: var(--eh-muted); letter-spacing: 0.02em; }

/* ==========================================================================
   Footer
   ========================================================================== */
.eh-footer { display: flex; flex-direction: column; align-items: center; gap: var(--eh-space-2);
  padding: var(--eh-space-12) var(--eh-section-pad); text-align: center; }
.eh-footer__studio { font-family: var(--eh-font-serif); font-size: 17px; color: var(--eh-heading); letter-spacing: 1px; }
.eh-footer__descriptor { font-family: var(--eh-font-sans); font-size: var(--eh-type-eyebrow); text-transform: uppercase; letter-spacing: var(--eh-track-eyebrow); color: var(--eh-muted); }
.eh-footer__contact { margin-top: var(--eh-space-3); }
.eh-footer__contact a { font-size: 13px; color: var(--eh-accent); letter-spacing: 0.3px; }
.eh-footer__copy { font-size: var(--eh-type-label); color: var(--eh-muted); margin-top: var(--eh-space-2); letter-spacing: 0.5px; }

/* ==========================================================================
   Theme switch — flips the page between themes (demo / brand-exploration aid).
   Pair with brand/theme-switch.js: the script sets data-theme on <html> and
   persists the choice. Drop in <div class="eh-theme-switch">…</div> with one
   <button data-theme="…"> per theme. Add --fixed to pin it top-right.
   ========================================================================== */
.eh-theme-switch {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--eh-surface-raised); border: var(--eh-border-hairline);
  border-radius: 999px;
}
.eh-theme-switch button {
  font-family: var(--eh-font-sans); font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--eh-muted);
  background: none; border: 0; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: color var(--eh-dur-hover) var(--eh-ease), background var(--eh-dur-hover) var(--eh-ease);
}
.eh-theme-switch button:hover { color: var(--eh-heading); }
.eh-theme-switch button[aria-pressed="true"] { background: var(--eh-accent); color: var(--eh-cream-bg); }
.eh-theme-switch--fixed { position: fixed; top: 14px; right: 14px; z-index: 100; box-shadow: var(--eh-elev-soft); }
@media print { .eh-theme-switch { display: none; } }

/* ==========================================================================
   Responsive — mobile (<= 860px): mirror the landing page's behavior
   ========================================================================== */
@media (max-width: 860px) {
  .eh-grid--2, .eh-grid--3 { grid-template-columns: 1fr; }
  .eh-card { flex-direction: column; row-gap: var(--eh-space-5); text-align: center; }
  .eh-card:not(.eh-card--stacked) .eh-card__media { width: 100%; min-width: 0; height: 200px; }
  .eh-card__body, .eh-card__expand-inner { max-width: 100%; text-align: left; }
  .eh-deflist__item { flex-direction: column; gap: var(--eh-space-1); }
  .eh-deflist__term { min-width: 0; }
  .eh-bio { flex-direction: column; text-align: center; }
  .eh-bio__text { max-width: 100%; text-align: left; }
  .eh-navbar__links { gap: var(--eh-space-4); }
}