/* Carnelian Ventures — site styles.
   Layout: a 12-column editorial grid, text set left on a ~64ch measure;
   deep sard grounds (hero, mission, approach, contact) bracket chalcedony reading sections.
   The one bold element is the lit sphere in the hero; everything else stays quiet. */

/* fonts: self-hosted, Latin subset */
@font-face { font-family: "Marcellus"; src: url("../fonts/marcellus-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("../fonts/albert-sans-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* colour — from the stone */
  --sard-900: #1e0b09;   /* deepest ground: hero, footer */
  --sard: #2a100d;       /* ink on light; dark section ground */
  --sard-700: #3a1a15;   /* raised surfaces on dark */
  --carnelian: #b8351c;  /* accent on light grounds */
  --carnelian-deep: #8e2410; /* hover on light */
  --ember: #e8754a;      /* accent on dark grounds */
  --ember-soft: #f3ddd3; /* tint behind carnelian text */
  --chalcedony: #edeeeb; /* light ground; text on dark */
  --chalcedony-raised: #f6f6f4;
  --agate: #6f6360;      /* secondary text on light */
  --mist: #c9bbb6;       /* secondary text on dark */
  --line-on-light: rgba(42, 16, 13, 0.14);
  --line-on-dark: rgba(237, 238, 235, 0.16);

  /* type */
  --font-display: "Marcellus", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Albert Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-display-xl: clamp(2.75rem, 1.6rem + 3.9vw, 4.5rem);
  --step-display-l: clamp(2.125rem, 1.45rem + 2.5vw, 3.5rem);
  --step-display-m: clamp(1.5rem, 1.15rem + 1.35vw, 2.35rem);
  --step-display-s: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  --step-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --step-body: 1.0625rem;
  --step-small: 0.9375rem;
  --step-caption: 0.8125rem;

  /* space — 4px base */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --gutter: clamp(20px, 5vw, 64px);
  --band: clamp(72px, 9vw, 136px);
  --radius: 2px;
  --measure: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--chalcedony);
  color: var(--sard);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.7;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 400; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--carnelian); outline-offset: 3px; border-radius: var(--radius); }
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--ember); }

.skip-link {
  position: absolute; left: var(--space-4); top: -60px; z-index: 100;
  background: var(--chalcedony); color: var(--sard); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius); text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: var(--space-4); }

.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.on-dark { background: var(--sard); color: var(--chalcedony); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: rgba(30, 11, 9, 0);
  color: var(--chalcedony);
  border-bottom: 1px solid transparent;
  transition: background-color .35s ease, border-color .35s ease;
}
.site-header.is-scrolled, .site-header.menu-open {
  background: rgba(30, 11, 9, 0.95);
  -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom-color: var(--line-on-dark);
}
.site-header + main .hero { margin-top: -77px; padding-top: 77px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 76px; }
.brand-link { display: inline-flex; flex-shrink: 0; }
.brand-link img { height: 46px; width: auto; }
.nav-toggle { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-6); }
.site-nav a { font-size: var(--step-small); text-decoration: none; color: var(--mist); transition: color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="true"] { color: var(--chalcedony); }
.site-nav a:not(.nav-cta) { position: relative; }
.site-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--ember);
  transform: scaleX(0); transform-origin: left center; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.site-nav a:not(.nav-cta):hover::after, .site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-nav .nav-cta {
  color: var(--chalcedony); border: 1px solid rgba(237, 238, 235, 0.4);
  padding: 9px 18px; border-radius: var(--radius); transition: border-color .2s ease, background-color .2s ease;
}
.site-nav .nav-cta:hover, .site-nav .nav-cta[aria-current="true"] { border-color: var(--ember); background: rgba(232, 117, 74, 0.08); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: 600 var(--step-small)/1.2 var(--font-sans); letter-spacing: .01em;
  padding: 15px 26px; border-radius: var(--radius); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--primary { background: var(--carnelian); color: #fff; }
.btn--primary:hover { background: var(--carnelian-deep); }
.on-dark .btn--primary, .hero .btn--primary { background: var(--ember); color: var(--sard-900); }
.on-dark .btn--primary:hover, .hero .btn--primary:hover { background: #f08a63; }
.link-quiet {
  font-size: var(--step-small); font-weight: 600; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: currentColor;
  transition: text-underline-offset .2s ease, color .2s ease;
}
.link-quiet:hover { text-underline-offset: 9px; }

/* ---------- hero ---------- */
.hero { background: var(--sard-900); color: var(--chalcedony); overflow: hidden; }
.hero-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5);
  align-items: center; padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px);
}
.hero-copy { grid-column: 1 / span 7; grid-row: 1; position: relative; z-index: 1; display: grid; gap: var(--space-6); min-width: 0; }
.hero h1 { font-size: var(--step-display-xl); line-height: 1.02; letter-spacing: -0.01em; }
.hero h1 span { display: block; }
.hero-lead { font-size: var(--step-lead); line-height: 1.6; color: var(--mist); max-width: 28em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.hero-actions .link-quiet { color: var(--chalcedony); }
.hero-visual { grid-column: 7 / span 6; grid-row: 1; position: relative; min-width: 0; }
.sphere-wrap { position: relative; width: 100%; max-width: 640px; aspect-ratio: 1 / 1; margin-left: auto; }
.sphere-wrap::before {
  /* warm light falling on the lit side of the sphere */
  content: ""; position: absolute; inset: 4% 26% 4% -10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 117, 74, 0.2), rgba(184, 53, 28, 0.09) 52%, rgba(184, 53, 28, 0) 100%);
  filter: blur(18px);
}
.sphere-wrap canvas { position: relative; display: block; width: 100%; height: 100%; }
.hero-interests {
  border-top: 1px solid var(--line-on-dark);
  display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: var(--space-5);
  padding-block: var(--space-6) var(--space-7); align-items: baseline;
}
.hero-interests p { color: var(--mist); font-size: var(--step-small); }
.hero-interests li { list-style: none; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; display: flex; gap: var(--space-3); align-items: baseline; }
.hero-interests ul { display: contents; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ember); flex-shrink: 0; transform: translateY(-3px); }

/* ---------- intro ---------- */
.intro-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); }
.intro-statement { grid-column: 1 / span 6; font-size: var(--step-display-m); line-height: 1.28; min-width: 0; }
.intro-statement--solo { grid-column: 1 / span 10; max-width: 30em; }
.intro-body { grid-column: 8 / span 5; display: grid; gap: var(--space-5); color: var(--sard); min-width: 0; align-content: start; padding-top: .4em; }

/* ---------- mission (stone) ---------- */
.mission { position: relative; background: var(--sard-900); color: var(--chalcedony); overflow: hidden; isolation: isolate; }
.mission picture, .mission picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -2; }
.mission::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(30, 11, 9, 0) 18%, rgba(30, 11, 9, 0.72) 52%, rgba(30, 11, 9, 0.94) 78%);
}
.mission-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); padding-block: clamp(96px, 12vw, 176px); }
.mission-copy { grid-column: 7 / span 6; display: grid; gap: var(--space-5); min-width: 0; }
.kicker { font-size: var(--step-small); font-weight: 600; color: var(--carnelian); }
.on-dark .kicker, .mission .kicker { color: var(--ember); }
.mission h2 { font-size: var(--step-display-m); line-height: 1.25; }
.mission p:not(.kicker) { color: var(--mist); max-width: 36em; }

/* ---------- services ---------- */
.section-head { display: grid; gap: var(--space-4); max-width: 46rem; margin-bottom: clamp(48px, 6vw, 88px); }
.section-head h2 { font-size: var(--step-display-l); line-height: 1.1; }
.section-head p { font-size: var(--step-lead); line-height: 1.6; color: var(--agate); }
.on-dark .section-head p { color: var(--mist); }
.service-lines { display: grid; gap: clamp(64px, 8vw, 120px); }
.service-line { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); align-items: stretch; }
.service-line figure { margin: 0; grid-column: 1 / span 5; min-width: 0; position: relative; min-height: 420px; }
.service-line figure picture, .service-line figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-line--flip figure img { object-position: 38% 62%; }
.service-line .service-list { grid-column: 7 / span 6; min-width: 0; }
.service-line--flip figure { grid-column: 8 / span 5; grid-row: 1; }
.service-line--flip .service-list { grid-column: 1 / span 6; grid-row: 1; }
.service-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--sard); }
.service-list-head h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-small); color: var(--carnelian); letter-spacing: .01em; }
.service-list-head span { font-size: var(--step-caption); color: var(--agate); }
.service { display: grid; gap: var(--space-4); padding-block: var(--space-6) var(--space-7); border-bottom: 1px solid var(--line-on-light); }
.service:last-child { border-bottom: 0; padding-bottom: 0; }
.service h4 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--step-display-s); line-height: 1.25; }
.service p { color: var(--sard); max-width: var(--measure); }
.service p + p { color: var(--agate); }

/* ---------- vision ---------- */
.vision-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); }
.vision-head { grid-column: 1 / span 6; display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.vision-head h2 { font-size: var(--step-display-l); line-height: 1.1; }
.vision-body { grid-column: 8 / span 5; display: grid; gap: var(--space-5); min-width: 0; padding-top: var(--space-2); }
.vision-body p:last-child { color: var(--agate); }
.focus-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-on-light); }
.focus-list li { display: flex; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--line-on-light); font-family: var(--font-display); font-size: 1.25rem; }
.focus-list .dot { background: var(--carnelian); }
.landscape { margin: clamp(56px, 7vw, 104px) 0 0; }
.landscape img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* ---------- approach ---------- */
.approach { background: var(--sard); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); counter-reset: step; position: relative; }
.step { display: grid; gap: var(--space-4); align-content: start; min-width: 0; position: relative; }
.step-orb { position: relative; width: 132px; height: 132px; margin-left: -12px; }
.step-orb canvas { width: 132px; height: 132px; display: block; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 66px; height: 1px; background: var(--line-on-dark);
  transform-origin: left center; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1);
}
.steps.is-pending::before { transform: scaleX(0); }
.step-num { transition: color .6s ease; }
.steps.is-armed .step:not(.is-lit) .step-num { color: var(--mist); }
.step-num { font-family: var(--font-display); color: var(--ember); font-size: 1.125rem; letter-spacing: .08em; }
.step h3 { font-size: var(--step-display-s); line-height: 1.2; }
.step p { color: var(--mist); font-size: var(--step-small); line-height: 1.7; }

/* ---------- team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 80px); row-gap: 0; border-top: 1px solid var(--sard); }
.person { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: var(--space-6); align-items: start; padding-block: var(--space-7); border-bottom: 1px solid var(--line-on-light); }
.portrait {
  /* the signet: a portrait set in a fine carnelian ring */
  margin: 0; width: 128px; aspect-ratio: 1 / 1; border-radius: 50%; padding: 5px;
  border: 1px solid var(--carnelian); background: var(--chalcedony);
}
.portrait picture, .portrait img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--sard-700); }
.seal {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--carnelian); color: var(--carnelian);
  font-family: var(--font-display); font-size: 1.375rem; letter-spacing: .04em;
  box-shadow: inset 0 0 0 4px var(--chalcedony), inset 0 0 0 5px rgba(184, 53, 28, 0.35);
}
.person-body { display: grid; gap: var(--space-3); min-width: 0; }
.person h3 { font-size: var(--step-display-s); line-height: 1.2; }
.person .role { font-size: var(--step-small); font-weight: 600; color: var(--carnelian); }
.person p:not(.role) { color: var(--sard); font-size: var(--step-small); line-height: 1.7; }
.team-more { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); margin-top: clamp(56px, 7vw, 96px); }
.team-more h3 { grid-column: 1 / span 4; font-size: var(--step-display-m); line-height: 1.2; }
.team-more div { grid-column: 6 / span 7; display: grid; gap: var(--space-5); min-width: 0; }
.team-more div p:last-child { color: var(--agate); }

/* ---------- contact ---------- */
.contact { background: var(--sard-900); color: var(--chalcedony); }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-7); align-items: center; }
.contact-copy { grid-column: 1 / span 6; display: grid; gap: var(--space-6); min-width: 0; }
.contact-copy h2 { font-size: var(--step-display-l); line-height: 1.08; }
.contact-copy > p { color: var(--mist); font-size: var(--step-lead); line-height: 1.6; max-width: 34em; }
.contact-details { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3) var(--space-6); margin: 0; border-top: 1px solid var(--line-on-dark); padding-top: var(--space-5); }
.contact-details dt { color: var(--mist); font-size: var(--step-small); }
.contact-details dd { margin: 0; font-family: var(--font-display); font-size: 1.25rem; overflow-wrap: anywhere; }
.contact-details dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--ember); transition: text-underline-offset .2s ease; }
.contact-details dd a:hover { text-underline-offset: 9px; }
.contact-details .pending { color: var(--mist); font-family: var(--font-sans); font-size: var(--step-small); font-style: italic; }
.contact-visual { grid-column: 8 / span 5; margin: 0; min-width: 0; }
.contact-visual img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 60%; }

/* ---------- footer ---------- */
.site-footer { background: var(--sard-900); color: var(--mist); border-top: 1px solid var(--line-on-dark); }
.footer-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-6); padding-block: var(--space-8) var(--space-7); align-items: end; }
.footer-brand { grid-column: 1 / span 6; display: grid; gap: var(--space-4); }
.footer-brand img { height: 40px; width: auto; }
.footer-brand p { font-family: var(--font-display); font-size: 1.125rem; color: var(--chalcedony); }
.footer-nav { grid-column: 8 / span 5; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3) var(--space-6); font-size: var(--step-small); }
.footer-nav a { text-decoration: none; }
.footer-nav a:hover { color: var(--chalcedony); }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); font-size: var(--step-caption); border-top: 1px solid var(--line-on-dark); padding-top: var(--space-5); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-8); }
  .steps::before { display: none; }
}
@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: none; border: 1px solid rgba(237, 238, 235, 0.4); color: var(--chalcedony);
    font: 600 var(--step-small)/1 var(--font-sans); padding: 10px 14px; border-radius: var(--radius); cursor: pointer;
  }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--sard-900); border-bottom: 1px solid var(--line-on-dark); display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--gutter) var(--space-5); }
  .site-nav li a { display: block; padding-block: var(--space-4); border-bottom: 1px solid var(--line-on-dark); font-size: 1.0625rem; color: var(--chalcedony); }
  .site-nav .nav-cta { margin-top: var(--space-4); text-align: center; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .site-nav a[aria-current="true"]:not(.nav-cta) { color: var(--ember); }

  .hero-copy, .hero-visual { grid-column: 1 / -1; grid-row: auto; }
  .hero-visual { order: -1; }
  .sphere-wrap { max-width: 420px; margin-inline: auto; }
  .hero-grid { row-gap: var(--space-4); padding-top: var(--space-5); }
  .hero-interests { grid-template-columns: 1fr; gap: var(--space-3); }
  .intro-statement, .intro-body, .vision-head, .vision-body, .mission-copy, .contact-copy, .contact-visual,
  .team-more h3, .team-more div, .footer-brand, .footer-nav { grid-column: 1 / -1; }
  .mission::after { background: linear-gradient(180deg, rgba(30, 11, 9, 0.55) 0%, rgba(30, 11, 9, 0.9) 60%); }
  .service-line figure, .service-line .service-list,
  .service-line--flip figure, .service-line--flip .service-list { grid-column: 1 / -1; grid-row: auto; }
  .service-line figure { min-height: 0; }
  .service-line figure picture, .service-line figure img { position: static; height: auto; aspect-ratio: 16 / 10; }
  .team-grid { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
  .contact-visual img { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .person { grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-4); }
  .portrait { width: 88px; padding: 4px; }
  .brand-link img { height: 36px; }
  .landscape img { aspect-ratio: 4 / 3; }
}

.band--flush-bottom { padding-bottom: 0; }
.band--flush-top { padding-top: 0; }

/* ---------- opening sequence (one moment, on load) ---------- */
@keyframes cv-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cv-glow { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span, .hero-lead, .hero-actions, .hero-interests { animation: cv-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 span:nth-child(1) { animation-delay: .08s; }
  .hero h1 span:nth-child(2) { animation-delay: .2s; }
  .hero h1 span:nth-child(3) { animation-delay: .32s; }
  .hero-lead { animation-delay: .5s; }
  .hero-actions { animation-delay: .62s; }
  .hero-interests { animation-delay: .8s; }
  .sphere-wrap::before { animation: cv-glow 2.4s ease .2s both; }
}