/* VIDIIO — Site System
   Shared layout, nav, footer, components, motion.
   Loaded after tokens.css on every page. */

html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--sage); color: var(--bg-deep); }

/* ---- Layout ------------------------------------------------------ */
.container { width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 56px; }
.section { padding: 128px 0; position: relative; }
.section--tight { padding: 96px 0; }
section { position: relative; }

/* Theme bands */
.band-dark  { background: var(--bg-deep);  color: var(--ink); }
.band-dark2 { background: var(--bg-deep-2); color: var(--ink); }
.band-paper { background: var(--paper); color: var(--on-paper); }
.band-paper .eyebrow, .band-paper .sx-eyebrow { color: var(--sage-deep); }

/* ---- Typographic primitives ------------------------------------- */
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--sage);
  display: inline-flex; align-items: center; gap: 14px;
}
.eyebrow .tick { width: 40px; height: 1px; background: currentColor; opacity: 0.6; }

.display {
  font-family: var(--serif); font-weight: 500; line-height: 0.98;
  letter-spacing: -0.015em;
  font-size: clamp(48px, 7vw, 108px);
}
.display em { font-style: italic; }
.h2 {
  font-family: var(--serif); font-weight: 500; line-height: 1.02;
  letter-spacing: -0.01em; font-size: clamp(34px, 4.4vw, 64px);
}
.h2 em { font-style: italic; }
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; }
.lead {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(22px, 2.3vw, 32px); line-height: 1.4;
}
.body { font-size: 16px; line-height: 1.7; color: var(--ink-dim); }
.band-paper .body { color: var(--on-paper-dim); }
.small { font-size: 13.5px; line-height: 1.6; }
.idx { font-family: var(--sans); font-size: 11px; letter-spacing: 0.2em; color: var(--sage); }

/* ---- Buttons / links -------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  background: none; border: 0; color: inherit; padding: 0;
}
.btn .arw { position: relative; width: 34px; height: 1px; background: currentColor; transition: width 0.4s var(--ease); }
.btn .arw::after { content:""; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid currentColor; border-right:1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arw { width: 54px; }

.btn-solid {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  padding: 18px 30px; border-radius: 999px;
  background: var(--paper); color: var(--bg-deep); border: 1px solid var(--paper);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.btn-solid:hover { background: transparent; color: var(--paper); }
.band-paper .btn-solid { background: var(--bg-deep); color: var(--paper); border-color: var(--bg-deep); }
.band-paper .btn-solid:hover { background: transparent; color: var(--bg-deep); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  padding: 17px 30px; border-radius: 999px;
  background: transparent; color: inherit; border: 1px solid var(--line);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.btn-ghost:hover { border-color: var(--sage); background: rgba(139,152,130,0.08); }

/* ---- Header / Nav ----------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 26px 56px; transition: padding 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__mark { justify-self: start; }
.nav__links { justify-self: center; }
.nav__right { justify-self: end; }
.nav.scrolled {
  padding: 16px 56px;
  background: rgba(18,21,19,0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__mark { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: 0.26em; color: var(--paper); }
.nav__links { display: flex; align-items: center; gap: 38px; justify-self: center; }
.nav__links a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(236,231,220,0.7); position: relative; transition: color 0.3s var(--ease);
}
.nav__links a:hover, .nav__links a.active { color: var(--paper); }
.nav__links a.active::after {
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:1px; background: var(--sage);
}
.nav__cta { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper); display:inline-flex; align-items:center; gap:10px; }
.nav__cta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); }
.nav__right { display: flex; align-items: center; gap: 26px; }
.lang-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--sans); }
.lang-toggle [data-lang-opt] { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(236,231,220,0.42); transition: color .3s var(--ease); cursor: pointer; }
.lang-toggle [data-lang-opt]:hover { color: rgba(236,231,220,0.75); }
.lang-toggle [data-lang-opt].active { color: var(--paper); }
.lang-toggle .sep { font-size: 11px; color: rgba(236,231,220,0.28); }
.nav__burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background:none; border:0; padding:6px; }
.nav__burger span { width: 24px; height: 1.5px; background: var(--paper); display:block; transition: transform 0.3s var(--ease), opacity 0.3s; }

/* mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 99; background: var(--bg-deep);
  display: flex; flex-direction: column; justify-content: center; padding: 0 40px;
  transform: translateY(-100%); transition: transform 0.55s var(--ease); pointer-events: none;
}
.mobile-menu.open { transform: translateY(0); pointer-events: auto; }
.mobile-menu a { font-family: var(--serif); font-size: 44px; padding: 12px 0; color: var(--paper); border-bottom: 1px solid var(--line-soft); }
.mobile-menu a em { font-style: italic; color: var(--sage); }

/* ---- Image slots / placeholders --------------------------------- */
image-slot {
  display: block;
  border: 1px solid var(--line);
  background:
    repeating-linear-gradient(45deg, rgba(236,231,220,0.022) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, rgba(139,152,130,0.12), transparent 58%),
    var(--bg-deep-3);
}
image-slot[data-filled] { border-color: transparent; background: var(--bg-deep-3); }
image-slot::part(empty) { color: rgba(236,231,220,0.5); }
.band-paper image-slot {
  border-color: var(--line-dark);
  background:
    repeating-linear-gradient(45deg, rgba(22,26,23,0.025) 0 2px, transparent 2px 10px),
    linear-gradient(135deg, rgba(94,107,88,0.14), transparent 58%),
    #DCD6C8;
}
.band-paper image-slot::part(empty) { color: rgba(22,26,23,0.5); }
/* Slots fill a sized wrapper frame (aspect-ratio/height lives on the frame) */
.media-frame > image-slot { position: absolute; inset: 0; width: 100%; height: 100%; }
.media-frame { position: relative; overflow: hidden; }
.media-cap {
  position: absolute; left: 18px; bottom: 16px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  pointer-events: none;
}
.media-cap .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); }
.media-tr {
  position: absolute; right: 18px; top: 16px; z-index: 3;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
  pointer-events: none;
}

/* ---- Footer ------------------------------------------------------ */
.footer { background: var(--bg-deep); color: var(--ink); padding: 110px 0 40px; border-top: 1px solid var(--line); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end; padding-bottom: 72px; border-bottom: 1px solid var(--line); }
.footer__mark { font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 12vw, 150px); letter-spacing: 0.04em; line-height: 0.9; color: var(--paper); }
.footer__cta { text-align: right; }
.footer__cta .lead { color: var(--ink-dim); }
.footer__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; padding: 60px 0; }
.footer__col h4 { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 20px; font-weight: 500; }
.footer__col a, .footer__col p { display: block; font-size: 14px; color: var(--ink-dim); margin: 0 0 12px; transition: color 0.3s var(--ease); }
.footer__col a:hover { color: var(--paper); }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 30px; border-top: 1px solid var(--line-soft); }
.footer__bottom span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

/* ---- Motion ----------------------------------------------------- */
/* Transform-only entrances: opacity stays 1 so content is never hidden,
   even where the compositor doesn't advance the animation. */
@keyframes revUp { from { transform: translateY(30px); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.in { animation: revUp 0.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .js .reveal-d1.in { animation-delay: 0.08s; }
  .js .reveal-d2.in { animation-delay: 0.16s; }
  .js .reveal-d3.in { animation-delay: 0.24s; }
  .js .reveal-d4.in { animation-delay: 0.32s; }
}

/* ---- Generic helpers -------------------------------------------- */
.rule { height: 1px; background: var(--line); width: 100%; }
.band-paper .rule { background: var(--line-dark); }

/* ---- Interior page hero (shared) -------------------------------- */
.phero { padding: 200px 0 90px; position: relative; }
.phero__h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(58px, 9vw, 142px); line-height: 0.92; letter-spacing: -0.02em; margin: 30px 0 0; text-wrap: balance; }
.phero__h1 em { font-style: italic; }
.phero__foot { display: flex; justify-content: flex-end; margin-top: 82px; padding-top: 32px; border-top: 1px solid var(--line); }
.phero__aside { max-width: 50ch; }
.phero__media { margin-top: 64px; }
@media (max-width: 1080px) {
  .phero { padding: 150px 0 70px; }
  .phero__foot { justify-content: flex-start; }
}
.stack-sm > * + * { margin-top: 16px; }
.muted { color: var(--ink-faint); }
.accent { font-style: italic; color: var(--sage); }
.cols-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
.cols-meta .k { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.cols-meta .v { font-size: 14px; color: var(--ink-dim); margin-top: 8px; line-height: 1.5; }
.band-paper .cols-meta .k { color: var(--on-paper-faint); }
.band-paper .cols-meta .v { color: var(--on-paper-dim); }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 1080px) {
  .container { padding: 0 36px; }
  .nav, .nav.scrolled { padding-left: 36px; padding-right: 36px; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .footer__cta { text-align: left; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .section { padding: 84px 0; }
  .container { padding: 0 24px; }
  .nav, .nav.scrolled { padding-left: 24px; padding-right: 24px; }
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}