/* Constellation C-22 — Full Zip (Saddle Stitch with the complete zipper:
   fine teeth set into a darker tape band) */
:root {
  --bg: #7C1518; --ink: #EEEBDF; --body-c: rgba(238,235,223,.9);
  --muted: rgba(236,220,185,.65); --line: rgba(238,235,223,.2);
  --line-strong: rgba(238,235,223,.3); --frame: rgba(238,235,223,.55);
  --accent: #ECDCB9; --accent-soft: rgba(236,220,185,.45); --brand: #EEEBDF;
  --hover-bg: rgba(238,235,223,.06); --nav-bg: rgba(104,16,19,.95);
  --btn-hover-bg: #EEEBDF; --btn-hover-fg: #7C1518;
  --sel-bg: #EEEBDF; --sel-fg: #7C1518;
  --grain-o: .45; --mono-display: block;
  /* small type on the red: the muted tone at .65 falls under 4.5:1, so labels use this */
  --label: rgba(236,220,185,.88);
}
.hero {
  background: radial-gradient(130% 105% at 70% 8%, #A32226 0%, #8C191D 48%, #641013 100%);
}
.hero::after {
  background:
    linear-gradient(115deg, transparent 0%, rgba(255,236,210,.07) 36%, transparent 56%, rgba(0,0,0,.22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.2 0 0 0 0 0.18 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-monogram { color: rgba(24, 9, 7, .5); }
.hero-monogram svg {
  height: clamp(110px, 18vh, 170px);
  filter: drop-shadow(0 1px 0 rgba(255, 240, 218, .22)) drop-shadow(0 -1px 1px rgba(0, 0, 0, .55));
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
}
.frame { z-index: 2; }

/* overscroll past either end shows the canvas (html) background — a leather
   shadow, not raw crimson */
html { background: #241408; }

/* the page deepens as it descends: crimson holds through the opening, then
   grades through oxblood into leather-dark just before the saddle takes over */
body {
  background: linear-gradient(180deg,
    #7C1518 0%,
    #7C1518 45%,
    #6D1414 70%,
    #571711 85%,
    #3F2412 100%);
}

/* ---- saddle close: contact + footer sit on the brand's leather texture ---- */
.saddle-tail {
  position: relative;
  z-index: 2; /* above the body grain overlay, like main/.footer */
  background: url("saddle.jpg") center / cover no-repeat;
}
.saddle-tail::before {
  /* deepen the leather so ink text keeps contrast; darker at the very end */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(46,26,11,.62) 0%,
    rgba(46,26,11,.34) 42%,
    rgba(46,26,11,.62) 100%);
}
.saddle-tail .section,
.saddle-tail .footer { position: relative; z-index: 2; }

/* ---- seeded leather: the motif appears in small doses on the way down ---- */

/* section index numbers warm from palomino toward saddle as the page descends */
#genesis .index    { color: #ECDCB9; }
#philosophy .index { color: #DCC094; }
#portfolio .index  { color: #C9A374; }
#leadership .index { color: #B68A55; }
#contact .index    { color: #ECDCB9; } /* back to palomino once on the leather itself */

/* every section rule is a run of actual saddle stitches — slanted palomino
   thread dashes, the way a stitched seam sits on leather */
.section-line {
  border-top: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5'%3E%3Cpath d='M2 4 L10 1' stroke='%23ECDCB9' stroke-opacity='.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: top center;
  background-size: 16px 5px;
}

/* portfolio tiles warm with a leather tint on hover; the tag line takes the
   section's saddle tone */
.tile:hover, .tile:focus-visible { background: rgba(110, 66, 31, .25); }
/* one step lighter than the section index (#C9A374): 6.1:1 on the red, was 4.5:1 */
.ttags { color: #DCC094; }

/* the zipper: fine teeth set into a darker tape band */
.saddle-tail .footer {
  border-top: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Crect x='0.5' y='0.5' width='3' height='3' rx='0.8' fill='%23ECDCB9' fill-opacity='.6'/%3E%3Crect x='4.5' y='3.5' width='3' height='3' rx='0.8' fill='%23ECDCB9' fill-opacity='.6'/%3E%3C/svg%3E"),
    linear-gradient(rgba(36,20,8,.38), rgba(36,20,8,.38));
  background-repeat: repeat-x, no-repeat;
  background-position: center top 5px, center top;
  background-size: 8px 7px, 100% 17px;
}

/* ---- portfolio: a tile links out to the company's site and carries its
   mark rendered as a single cream silhouette (no palette clash) ---- */
.tlogo {
  width: auto; height: auto;
  max-height: 20px;
  max-width: 128px;
  /* a long label (LEAD INVESTOR) squeezes a wide mark rather than pushing it
     out of the tile */
  min-width: 0;
  filter: brightness(0) invert(.93) sepia(.08);
  opacity: .45;
  transition: opacity .35s;
}
.tile:hover .tlogo, .tile:focus-visible .tlogo { opacity: .95; }
/* marks whose detail needs more room to stay crisp */
.tlogo.tlogo-tall { max-height: 26px; }

/* ---- the footer credit: the Iwo Jima emblem beside R.S. Martin, Jr.'s name,
   in place of the footer mark and the flag (study D, 16 Sep 2026).
   master: docs/brand/iwo-jima-emblem-source.png; iwo-jima.png is cut at 3x the
   180px display width. Re-derive from the master to change size. ---- */
.footer-credit {
  display: flex; align-items: center; justify-content: center;
  gap: 2.4rem; text-align: left; margin: 0 auto 3.5rem; max-width: 600px;
}
/* The legal block sits centered between the emblem row and the cactus: the
   row's 3.5rem bottom margin equals the footer's 2.5rem bottom pad plus the
   16px of edge and button padding above the cactus sprite. Overrides the
   base footer pad (3rem, 6rem on phones). */
.saddle-tail .footer { padding-bottom: 2.5rem; }
.footer-emblem { flex: 0 0 180px; width: 180px; margin: 0; }
.footer-emblem img {
  display: block; width: 100%; height: auto;
  /* faint gold silhouette edge and a soft lift, so the cut-out sits on the leather */
  filter:
    drop-shadow(0 0 .6px rgba(236, 220, 185, .65))
    drop-shadow(0 0 2px rgba(210, 169, 92, .2))
    drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
}
.footer-name {
  display: block;
  font-family: var(--caps); font-weight: 400;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: #ECDCB9; margin: 0 0 .5rem;
}
.footer-service {
  display: block;
  font-family: var(--mono);
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.9; color: var(--muted);
}
.footer-service .sep { opacity: .6; }
/* A phrase moves to the next line whole rather than splitting, as nowrap did,
   but at enlarged text a phrase wider than the column may still wrap. */
.footer-service .nb { display: inline-block; max-width: 100%; }
@media (max-width: 45em) {
  .footer-credit { flex-direction: column; gap: 1.2rem; text-align: center; }
  .footer-emblem { flex-basis: auto; }
}

/* ---- V5+ additions: two-person leadership row + Martin-history note ---- */
.cards.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 900px; }
.card p + p { margin-top: .9rem; }
.bio-note {
  max-width: 720px;
  margin-top: 2.2rem;
  font-size: .8rem;
  font-style: italic;
  color: var(--muted);
}
@media (max-width: 45em) {
  .cards.cards-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- The Long Ride (easter egg): lives under the bottom edge of the saddle.
   Game code: longride.js ---- */
.egg-edge{position:relative;z-index:2;display:flex;justify-content:center;padding:10px 0 6px;}
#cactusBtn{background:none;border:0;padding:6px;cursor:pointer;line-height:0;opacity:.28;transition:opacity .3s;border-radius:2px;}
#cactusBtn:hover,#cactusBtn:focus-visible{opacity:.85;}
#cactusBtn canvas{display:block;}
.egg{position:relative;z-index:2;max-height:0;overflow:hidden;transition:max-height .7s cubic-bezier(.22,1,.36,1);background:#1B0E06;}
.egg.open{max-height:340px;}
.egg-inner{padding:14px clamp(10px,2vw,24px) 18px;}
#game{display:block;width:100%;max-width:760px;margin:0 auto;image-rendering:pixelated;image-rendering:crisp-edges;background:#1B0E06;touch-action:manipulation;}
#game:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
/* reduced motion: the panel opens without the unfold (longride.js then places it at once) */
@media (prefers-reduced-motion: reduce){.egg{transition:none;}}
.egg-hint{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,235,223,.35);text-align:center;margin:8px 0 0;}