@charset "UTF-8";
/* ============================================================
   TRIUNE SOFTWARES — Custom layer on top of Tailwind.
   Only the things Tailwind can't do cleanly:
   - Global type baseline
   - Film grain overlay
   - Marquee animation
   - Reveal-on-scroll
   - Custom button with sliding fill
   - Image plate numerations
   - Cursor / selection
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,300;1,9..144,400&family=Inter+Tight:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --ink: #0e0f0c;
  --ink-2: #151713;
  --ink-3: #1d1f1a;
  --bone: #efe9dd;
  --bone-2: #e3dccb;
  --bone-dim: #c9c2b2;
  --forest: #2f4a3a;
  --forest-2: #3d5d4a;
  --forest-deep: #1e3127;
  --clay: #c46a3f;
  --clay-2: #b35a30;
  --gold: #c9a45c;
  --rule: rgba(239, 233, 221, 0.14);
  --rule-strong: rgba(239, 233, 221, 0.28);
  --rule-dim: rgba(239, 233, 221, 0.07);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
html, body {
  background: var(--ink);
  color: var(--bone);
  font-family: 'Inter Tight', system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
body {
  overflow-x: hidden;
  min-height: 100svh;
}
::selection { background: var(--clay); color: var(--bone); }

/* Crisp images, no awkward stretching */
img { max-width: 100%; height: auto; display: block; }

/* Long-string safety (emails, urls, phone numbers in narrow columns) */
a[href^="mailto:"], a[href^="tel:"] { word-break: break-word; }

/* Keyboard focus — visible only when keyboard navigating */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}
.btn:focus-visible { outline-offset: 4px; }

/* Mobile safe-area cushion at the very bottom (iPhone home indicator) */
@supports (padding: max(0px)) {
  footer { padding-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* Mobile nav drop-down: subtle slide+fade so it doesn't snap in */
[data-menu] {
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 260ms var(--ease-out), opacity 260ms var(--ease-out);
  pointer-events: none;
}
[data-menu]:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  [data-menu] { transition: none; }
}

/* Smooth hover for nav-link underline indicator */
.nav-link.is-active::before { transition: background-color 0.3s; }

/* Marquee shouldn't ever introduce a horizontal scrollbar — already overflow:hidden,
   but defend body for older webkit oddities */
@media (max-width: 768px) {
  .marquee__track { animation-duration: 45s; }
}

/* Film grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

/* Tri-bar vertical motif */
.triune-bars {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  height: 100vh;
  width: min(1400px, 100vw);
  pointer-events: none;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}
.triune-bars::before,
.triune-bars::after,
.triune-bars > span {
  content: "";
  border-left: 1px solid var(--rule-dim);
  height: 100%;
}
.triune-bars::before { grid-column: 3; }
.triune-bars > span { grid-column: 7; }
.triune-bars::after { grid-column: 11; }
@media (max-width: 768px) { .triune-bars { display: none; } }

/* ---- Custom button with sliding fill (can't nicely do in Tailwind) ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 26px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--bone);
  color: var(--bone);
  background: transparent;
  transition: color 0.35s var(--ease-out);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--ink); }
.btn:hover::before { transform: translateY(0); }
.btn .arrow { display: inline-block; transition: transform 0.4s var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--clay { border-color: var(--clay); color: var(--clay); }
.btn--clay::before { background: var(--clay); }
.btn--clay:hover { color: var(--ink); }

/* ---- Marquee ---- */
.marquee {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 80px, black calc(100% - 80px), transparent);
}
.marquee__track {
  display: inline-flex;
  gap: 60px;
  animation: marquee 60s linear infinite;
  align-items: center;
  padding-right: 60px;
  flex-shrink: 0;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Subtle fade-only variant for small chrome (eyebrows, coords) */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-fade.is-visible { opacity: 1; }

/* ---- Line mask reveal for display headlines ----
   Each .rv-line starts with its text pushed down 110% inside a clip mask.
   On .is-visible, it rises to 0 with a slow ease. Stagger set via --reveal-delay. */
.rv-lines { display: block; }
.rv-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;   /* prevents descender clipping */
  margin-bottom: -0.08em;
}
.rv-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: transform;
}
.rv-lines.is-visible .rv-line > span { transform: translateY(0); }

/* Stagger: each line is ~90ms behind the previous */
.rv-line:nth-child(1) > span { transition-delay: calc(var(--reveal-delay, 0s) + 0ms); }
.rv-line:nth-child(2) > span { transition-delay: calc(var(--reveal-delay, 0s) + 90ms); }
.rv-line:nth-child(3) > span { transition-delay: calc(var(--reveal-delay, 0s) + 180ms); }
.rv-line:nth-child(4) > span { transition-delay: calc(var(--reveal-delay, 0s) + 270ms); }
.rv-line:nth-child(5) > span { transition-delay: calc(var(--reveal-delay, 0s) + 360ms); }
.rv-line:nth-child(6) > span { transition-delay: calc(var(--reveal-delay, 0s) + 450ms); }

/* ---- Word-by-word fade for medium headlines / intros ---- */
.rv-words { display: inline; }
.rv-words .rv-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.rv-words.is-visible .rv-word { opacity: 1; transform: translateY(0); }

/* ---- Group stagger helper: direct children animate one after the other ---- */
.rv-group.is-visible > .reveal,
.rv-group.is-visible > .reveal-fade { /* handled by JS assigning delays */ }

/* ---- Accessibility: honor reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade,
  .rv-line > span,
  .rv-words .rv-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Image plate: number + caption overlays ---- */
.img-plate { position: relative; overflow: hidden; background: var(--ink-2); }
.img-plate > img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transition: transform 1.2s var(--ease-out), filter 1.2s var(--ease-out);
  filter: brightness(0.9) contrast(1.02) saturate(0.95);
}
.img-plate:hover > img { transform: scale(1.02); filter: brightness(1) contrast(1.04); }
.img-plate__num {
  position: absolute;
  top: 14px; right: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--bone);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  z-index: 2;
}
.img-plate__cap {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
  padding: 6px 12px;
  background: rgba(14,15,12,0.6);
  backdrop-filter: blur(4px);
  border-left: 1px solid var(--clay);
  z-index: 2;
}
.img-plate--corners::before,
.img-plate--corners::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--clay);
  z-index: 2;
}
.img-plate--corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.img-plate--corners::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---- Coord tag ---- */
.coord {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--bone-dim);
  text-transform: uppercase;
}
.coord::before { content: "◈"; color: var(--clay); font-size: 8px; }

/* ---- Eyebrow ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px; height: 1px;
  background: var(--clay);
}

/* ---- Nav link active rule ---- */
.nav-link {
  position: relative;
  color: var(--bone-dim);
  transition: color 0.3s;
  padding: 4px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-link:hover, .nav-link.is-active { color: var(--bone); }
.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 6px; height: 1px;
  background: var(--clay);
}

/* ---- Display type base (used with font-display) ---- */
.display { font-family: 'Fraunces', serif; font-weight: 300; letter-spacing: -0.02em; line-height: 0.95; }
.display em { font-style: italic; font-weight: 300; }

/* ============================================================
   Color utility fallbacks — explicit definitions so the accent
   palette renders even if Tailwind's runtime config doesn't
   register our custom colors in time. These mirror the config
   in tw-setup.js and take precedence via specificity-equivalent
   class selectors appearing after the CDN sheet.
   ============================================================ */
.text-clay       { color: var(--clay) !important; }
.text-clay\/90   { color: color-mix(in srgb, var(--clay) 90%, transparent) !important; }
.bg-clay         { background-color: var(--clay) !important; }
.bg-clay\/10     { background-color: color-mix(in srgb, var(--clay) 10%, transparent) !important; }
.border-clay     { border-color: var(--clay) !important; }
.hover\:text-clay:hover   { color: var(--clay) !important; }
.hover\:bg-clay:hover     { background-color: var(--clay) !important; }
.hover\:border-clay:hover { border-color: var(--clay) !important; }

.text-bone         { color: var(--bone) !important; }
.text-bone-2       { color: var(--bone-2) !important; }
.text-bone-dim     { color: var(--bone-dim) !important; }
.bg-bone           { background-color: var(--bone) !important; }
.bg-bone-dim       { background-color: var(--bone-dim) !important; }
.border-bone       { border-color: var(--bone) !important; }
.border-bone-dim   { border-color: var(--bone-dim) !important; }
.hover\:text-bone:hover { color: var(--bone) !important; }

.bg-ink            { background-color: var(--ink) !important; }
.bg-ink-2          { background-color: var(--ink-2) !important; }
.bg-ink-3          { background-color: var(--ink-3) !important; }
.hover\:bg-ink-2:hover { background-color: var(--ink-2) !important; }

.text-forest       { color: var(--forest) !important; }
.bg-forest         { background-color: var(--forest) !important; }
.bg-forest-deep    { background-color: var(--forest-deep) !important; }
.border-forest     { border-color: var(--forest) !important; }

.text-gold         { color: var(--gold) !important; }
.bg-gold           { background-color: var(--gold) !important; }

/* ===========================================================
   FAQ + BREADCRUMB (added for AEO / answer-engine optimization)
   =========================================================== */
.breadcrumbs {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: flex; align-items: center; gap: 10px; }
.breadcrumbs li + li::before { content: "/"; color: var(--clay); opacity: 0.7; }
.breadcrumbs a { color: var(--bone-dim); text-decoration: none; transition: color 160ms var(--ease-out); }
.breadcrumbs a:hover { color: var(--clay); }
.breadcrumbs [aria-current="page"] { color: var(--bone); }

.faq-item {
  border-top: 1px solid var(--rule-strong);
  padding: 28px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--rule-strong); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  color: var(--bone);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  transition: color 200ms var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--clay); }
.faq-item summary::after {
  content: "+";
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px;
  color: var(--clay);
  flex-shrink: 0;
  transition: transform 240ms var(--ease-out);
}
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { color: var(--clay); }
.faq-answer {
  padding-top: 18px;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  color: var(--bone-dim);
  line-height: 1.6;
  font-size: 16px;
  max-width: 72ch;
}
.faq-answer p + p { margin-top: 14px; }