/* Junto — site styles. Tokens follow the Junto design system (forest / ivory / burnt orange, Jost + IBM Plex Mono, hard edges). */

@font-face { font-family: "Jost"; src: url("/fonts/jost-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --forest: #1b3a2f;
  --ivory: #fbf9f4;
  --orange: #d9622f;
  --deep-orange: #b34e22;
  --light-orange: #f0a27f;
  --ivory-muted: rgba(251, 249, 244, 0.86);
  --ivory-soft: rgba(251, 249, 244, 0.78);
  --ivory-rule: rgba(251, 249, 244, 0.25);
  --ivory-line: rgba(251, 249, 244, 0.35);
  --forest-muted: rgba(27, 58, 47, 0.82);
  --forest-rule: rgba(27, 58, 47, 0.25);
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  --section: clamp(88px, 11vw, 176px);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--forest);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--light-orange); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--ivory); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -0.015em; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ivory); color: var(--forest); padding: 12px 16px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------- type helpers ---------- */
.mono { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; font-weight: 600; line-height: 1.4; }
.eyebrow { display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 13px; font-weight: 600; color: var(--light-orange); }
.meta { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 12px; font-weight: 500; color: var(--ivory-soft); }
.display { font-weight: 300; font-size: clamp(52px, 8vw, 128px); line-height: 0.95; letter-spacing: -0.02em; }
.h2 { font-weight: 300; font-size: clamp(42px, 5.4vw, 84px); line-height: 0.98; }
.h3 { font-weight: 400; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -0.005em; }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.6; color: var(--ivory-muted); max-width: 34em; }
.body-muted { color: var(--ivory-muted); }
.prose p + p { margin-top: 1em; }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.narrow { max-width: 960px; }
.section { padding-top: var(--section); padding-bottom: var(--section); }
.rule-top { border-top: 1px solid var(--ivory-rule); }
.center { text-align: center; }
.stack > * + * { margin-top: 24px; }
.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(48px, 6vw, 96px); }
.section-head.center { align-items: center; }
.split { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split > * { flex: 1 1 420px; min-width: 0; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(32px, 4vw, 56px); }

/* ---------- connector (line + square) ---------- */
.connector { display: flex; flex-direction: column; align-items: center; }
.connector .line { width: 1px; height: 56px; background: rgba(251, 249, 244, 0.5); }
.connector .node { width: 9px; height: 9px; border: 1px solid var(--ivory); }
.connector.long .line { height: 88px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--sans); font-size: 17px; font-weight: 500; line-height: 1;
  padding: 18px 26px; border: 1px solid var(--ivory); border-radius: 0;
  background: var(--ivory); color: var(--forest); text-decoration: none; cursor: pointer;
  box-shadow: 8px 8px 0 var(--orange);
  transition: transform 90ms ease, box-shadow 90ms ease, background 120ms ease, color 120ms ease;
}
.btn:hover { color: var(--forest); transform: translate(-1px, -1px); box-shadow: 9px 9px 0 var(--orange); }
.btn:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--orange); }
.btn-ghost { background: transparent; color: var(--ivory); box-shadow: 8px 8px 0 rgba(251, 249, 244, 0.16); }
.btn-ghost:hover { background: var(--ivory); color: var(--forest); box-shadow: 9px 9px 0 rgba(251, 249, 244, 0.24); }
.btn-ghost:active { box-shadow: 4px 4px 0 rgba(251, 249, 244, 0.16); }
.btn-quiet { background: none; border: 0; padding: 4px 0; box-shadow: none; color: var(--ivory); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.btn-quiet:hover { transform: none; box-shadow: none; color: var(--light-orange); }
.btn-row { display: flex; flex-wrap: wrap; gap: 24px 28px; align-items: center; }
.btn-row .btn:not(.btn-quiet) { min-width: 250px; }
.center .btn-row, .cta .btn-row { justify-content: center; }
@media (max-width: 600px) {
  .btn-row { flex-direction: column; align-items: stretch; padding-right: 8px; }
  .btn-row .btn:not(.btn-quiet) { width: 100%; min-width: 0; }
}
.on-ivory .btn { background: var(--forest); color: var(--ivory); border-color: var(--forest); }
.on-ivory .btn:hover { color: var(--ivory); }
.on-ivory .btn-ghost { background: transparent; color: var(--forest); box-shadow: 8px 8px 0 rgba(27, 58, 47, 0.14); }
.on-ivory .btn-ghost:hover { background: var(--forest); color: var(--ivory); }
.on-ivory .btn-quiet { background: none; border: 0; box-shadow: none; color: var(--forest); }
.on-ivory .btn-quiet:hover { color: var(--deep-orange); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--forest); border-bottom: 1px solid var(--ivory-rule); }
.nav { height: var(--header-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nav-group { display: flex; align-items: center; gap: 28px; }
.nav-group.right { justify-content: flex-end; }
.nav a.mono { text-decoration: none; }
.nav a.mono[aria-current="page"] { color: var(--light-orange); }
.nav .muted { color: var(--ivory-soft); }
.nav .apply { border: 1px solid var(--ivory); padding: 11px 16px; }
.nav .apply:hover { background: var(--ivory); color: var(--forest); }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: center; }
.brand img { width: 34px; height: auto; }
.brand span { font-family: var(--sans); font-weight: 500; font-size: 24px; letter-spacing: -0.01em; line-height: 1; }
.brand:hover { color: var(--ivory); }
.menu-toggle { display: none; justify-self: end; background: none; border: 1px solid var(--ivory-line); color: var(--ivory); padding: 10px 14px; cursor: pointer; }
.mobile-menu { display: none; }

@media (max-width: 980px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-group { display: none; }
  .brand { justify-self: start; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu { border-top: 1px solid var(--ivory-rule); padding: 8px var(--gutter) 28px; }
  .mobile-menu.open { display: block; }
  .mobile-menu a { display: block; padding: 16px 0; border-bottom: 1px solid var(--ivory-rule); text-decoration: none; font-size: 24px; font-weight: 300; }
  .mobile-menu .btn { margin-top: 24px; width: 100%; font-size: 17px; font-weight: 500; border-bottom: 1px solid var(--ivory); }
}

/* ---------- hero (home) ---------- */
.hero { min-height: calc(100svh - var(--header-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px var(--gutter) 0; }
.hero .display { max-width: 10.5em; margin-top: 28px; }
.hero .lead { margin-top: 36px; max-width: 30em; }
.hero .btn-row { margin-top: 40px; justify-content: center; }
.hero .connector:first-child { margin-bottom: 40px; }
.hero .connector:last-child { margin-top: 56px; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fade-up 900ms cubic-bezier(.2, .7, .2, 1) both; }
.d1 { animation-delay: 120ms; } .d2 { animation-delay: 240ms; } .d3 { animation-delay: 360ms; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: clamp(80px, 10vw, 150px) 0 clamp(56px, 7vw, 104px); text-align: center; }
.page-hero .display { font-size: clamp(48px, 7vw, 112px); max-width: 11em; margin: 24px auto 0; }
.page-hero .lead { margin: 32px auto 0; }
.page-hero .connector { margin-top: 56px; }

/* ---------- reveal (video opens to full-bleed) ---------- */
.reveal { height: 220vh; position: relative; }
@media (max-width: 700px) { .reveal { height: 160vh; } }
.reveal-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.reveal-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(var(--ry, 14%) var(--rx, 16%)); will-change: clip-path; }
.reveal-caption { position: absolute; left: var(--gutter); bottom: clamp(16px, 3vw, 40px); display: flex; flex-wrap: wrap; align-items: stretch; opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms ease; }
.reveal.done .reveal-caption { opacity: 1; transform: none; }
.reveal-caption .label { background: var(--forest); padding: 18px 20px; display: flex; align-items: center; }
.watch {
  display: inline-flex; align-items: center; gap: 12px; padding: 18px 22px;
  background: var(--ivory); color: var(--forest); border: 0; cursor: pointer; box-shadow: 6px 6px 0 var(--orange);
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
}
.watch:hover { color: var(--forest); }
.watch svg { width: 12px; height: 14px; }

/* ---------- photos ---------- */
.photo { position: relative; overflow: hidden; background: #163126; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.ratio-45 { aspect-ratio: 4 / 5; }
.ratio-32 { aspect-ratio: 3 / 2; }
.ratio-169 { aspect-ratio: 16 / 9; }
.ratio-11 { aspect-ratio: 1 / 1; }
.duo { position: relative; min-height: clamp(420px, 44vw, 600px); }
.duo .a { position: absolute; left: 0; top: 0; width: 62%; height: 78%; }
.duo .b { position: absolute; right: 0; bottom: 0; width: 46%; height: 58%; box-shadow: -8px -8px 0 var(--forest), 8px 8px 0 var(--orange); }
.duo-caption { position: absolute; left: 0; top: calc(78% + 14px); max-width: 52%; }
.zoom img { transition: transform 900ms cubic-bezier(.2, .7, .2, 1); }
.zoom:hover img { transform: scale(1.04); }

/* ---------- journey (outline numerals) ---------- */
.journey article { display: flex; flex-direction: column; gap: 18px; text-decoration: none; }
.numeral { font-weight: 300; font-size: clamp(110px, 12vw, 180px); line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--light-orange); }
.journey a { text-decoration: none; }
.journey a:hover .h3 { color: var(--light-orange); }

/* ---------- events ---------- */
.on-ivory { background: var(--ivory); color: var(--forest); }
.on-ivory a:hover { color: var(--deep-orange); }
.on-ivory .eyebrow { color: var(--deep-orange); }
.on-ivory .meta { color: var(--forest-muted); }
.on-ivory .lead, .on-ivory .body-muted { color: var(--forest-muted); }
.event-list { border-top: 1px solid currentColor; }
.event-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px 28px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--ivory-rule); }
.on-ivory .event-row { border-bottom-color: var(--forest-rule); }
.event-row .when { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 13px; font-weight: 600; line-height: 1.6; }
.event-row .title { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.15; font-weight: 400; }
.chip { display: inline-block; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600; line-height: 1; padding: 8px 12px; border: 1px solid currentColor; white-space: nowrap; }
.event-empty { padding: 28px 0; border-bottom: 1px solid var(--ivory-rule); }
.on-ivory .event-empty { border-bottom-color: var(--forest-rule); }
.event-skeleton { height: 82px; border-bottom: 1px solid var(--ivory-rule); position: relative; overflow: hidden; }
.on-ivory .event-skeleton { border-bottom-color: var(--forest-rule); }
.event-skeleton::after { content: ""; position: absolute; left: 0; top: 30px; height: 18px; width: 60%; background: currentColor; opacity: 0.08; }
.month-label { padding: 40px 0 12px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
@media (max-width: 600px) { .filters { display: grid; grid-template-columns: 1fr 1fr; } }
.filter { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600; padding: 12px 16px; background: transparent; border: 1px solid var(--ivory-line); color: var(--ivory); cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--ivory); color: var(--forest); border-color: var(--ivory); }
@media (max-width: 640px) {
  .event-row { grid-template-columns: 1fr auto; }
  .event-row .when { grid-column: 1 / -1; }
}

/* ---------- places ---------- */
.places { display: flex; flex-wrap: wrap; border-top: 1px solid var(--ivory-rule); border-left: 1px solid var(--ivory-rule); margin-top: 56px; text-align: left; }
.places > div { flex: 1 1 220px; padding: 28px 22px; border-right: 1px solid var(--ivory-rule); border-bottom: 1px solid var(--ivory-rule); display: flex; flex-direction: column; gap: 8px; }
.places .name { font-size: 26px; font-weight: 300; }

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq details { border: 1px solid var(--ivory-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; font-size: clamp(19px, 1.8vw, 22px); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { font-size: 30px; font-weight: 300; line-height: 1; transition: transform 200ms ease; flex: 0 0 auto; }
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .answer { padding: 0 28px 28px; color: var(--ivory-muted); max-width: 46em; }
.faq .answer p + p { margin-top: 0.9em; }
.faq .answer a { color: var(--ivory); }
.faq-group + .faq-group { margin-top: 72px; }
.faq-group .eyebrow { margin-bottom: 20px; }

/* ---------- feature list ---------- */
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--ivory-rule); border-left: 1px solid var(--ivory-rule); }
.points > div { padding: 32px 28px; border-right: 1px solid var(--ivory-rule); border-bottom: 1px solid var(--ivory-rule); display: flex; flex-direction: column; gap: 12px; }
.points .k { font-size: 24px; font-weight: 400; line-height: 1.15; }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta .display { font-size: clamp(56px, 8vw, 128px); margin-top: 24px; }
.cta .btn-row { margin-top: 48px; }
.cta .connector { margin-bottom: 40px; }

/* ---------- legal / long text ---------- */
.legal { max-width: 760px; margin: 0 auto; color: var(--ivory-muted); }
.legal h2 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 13px; font-weight: 600; color: var(--light-orange); margin: 56px 0 16px; }
.legal h3 { font-size: 22px; font-weight: 500; color: var(--ivory); margin: 36px 0 12px; letter-spacing: 0; }
.legal p { margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--ivory); }
.legal strong { color: var(--ivory); font-weight: 500; }

/* ---------- news ---------- */
.post-list { border-top: 1px solid var(--ivory-rule); }
.post-list a { display: grid; grid-template-columns: 170px 1fr; gap: 12px 28px; padding: 32px 0; border-bottom: 1px solid var(--ivory-rule); text-decoration: none; }
.post-list .title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.15; }
@media (max-width: 640px) { .post-list a { grid-template-columns: 1fr; } }

.app-feature { max-width: 440px; margin: 40px auto; }
.app-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 40px 0; }
@media (max-width: 600px) { .app-gallery { grid-template-columns: 1fr; } }

/* ---------- video modal ---------- */
.modal { position: fixed; inset: 0; z-index: 200; background: rgba(13, 29, 23, 0.94); display: none; align-items: center; justify-content: center; padding: var(--gutter); }
.modal.open { display: flex; }
.modal-inner { width: min(1200px, 100%); }
.modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; box-shadow: 8px 8px 0 var(--orange); }
.modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 16px; }
.modal-close { background: none; border: 1px solid var(--ivory-line); color: var(--ivory); padding: 10px 14px; cursor: pointer; }
.modal-close:hover { background: var(--ivory); color: var(--forest); }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--ivory-rule); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; padding-top: 64px; padding-bottom: 48px; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 40px 72px; }
.footer-cols div { display: flex; flex-direction: column; gap: 10px; }
.footer-cols a { text-decoration: none; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--ivory-rule); }
.stamp { display: inline-block; border: 2px solid var(--ivory); padding: 8px 12px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 600; }

/* ---------- 404 ---------- */
.notfound { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px var(--gutter); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { height: auto; }
  .reveal-stage { position: relative; height: 80vh; }
  .reveal-media { clip-path: none; }
  .reveal-caption { opacity: 1; transform: none; }
}