@import url("fonts/fonts.css");

/* Caldermoor Studios — story-card system.
   Desktop composition is authored in vw so the first viewport keeps the approved comp's proportions;
   below 820px the page restacks into single-column story cards. */

:root {
  --ground: #f5f5f7;
  --ink: #0b0f1c;
  --ink-soft: #4b5063;
  --surface: #ffffff;
  --rule: #e2e3e8;
  --navy: #081945;
  --navy-lift: #13296b;
  --cobalt: #1f58d4;
  --orange: #f77823;
  --orange-ink: #231004;
  --grass: #4d7838;
  --on-color: #ffffff;
  --pill-ink: #10204f;
  --pill-hover: #dfe7ff;
  --on-navy: #f1f2f6;
  --on-color-soft: rgba(255, 255, 255, .82);
  --focus: #2658cf;
  --face: "Akt", "Helvetica Neue", Arial, sans-serif;
  --radius-xl: 1.6vw;
  --radius-l: 1.3vw;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #08090c;
    --ink: #f1f2f6;
    --ink-soft: #a3a7b6;
    --surface: #121419;
    --rule: #23262e;
    --focus: #8fb0ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--ink-soft) var(--ground); }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.5 var(--face);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
::selection { background: var(--cobalt); color: #fff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0; }

.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 16px; z-index: 10; background: var(--ink); color: var(--ground); padding: 10px 14px; border-radius: 999px; }

/* ---------- top bar ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  height: 4.53vw; min-height: 56px;
  padding: 0 2.7vw 0 2.6vw;
}
.wordmark { font-size: max(17px, 1.3vw); font-weight: 700; letter-spacing: -.015em; text-decoration: none; }
.nav { display: flex; gap: 2.4vw; font-size: max(14px, .97vw); }
.nav a { text-decoration: none; color: var(--ink-soft); transition: color .2s; }
.nav a:hover { color: var(--ink); }

/* ---------- hero story card ---------- */
.story {
  position: relative;
  height: 42.5vw;
  margin: 0 .8vw;
  border-radius: var(--radius-xl);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 75% at 72% 48%, var(--navy-lift) 0%, rgba(19, 41, 107, 0) 70%),
    var(--navy);
  color: var(--on-color);
}
.story-art {
  position: absolute;
  z-index: -1;
  left: 41.5vw; top: -6.9vw;
  width: 57.5vw; height: 57.5vw;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 16%);
          mask-composite: intersect;
}
.story-art img { width: 100%; height: 100%; object-fit: cover; }
.story-copy { position: absolute; left: 3.24vw; top: 10.1vw; width: 44vw; }
.story h1 {
  font-size: 6.4vw; line-height: .87; letter-spacing: -.035em; font-weight: 860;
}
.story-sub { margin-top: 1.9vw; max-width: 38.5vw; font-size: 1.51vw; line-height: 1.42; color: var(--on-color); }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: 3.71vw; min-height: 48px; padding: 0 2.3vw;
  border-radius: 999px;
  background: #fff; color: var(--pill-ink);
  font-size: max(15px, 1.15vw); font-weight: 560; letter-spacing: -.005em;
  text-decoration: none;
  transition: background-color .25s cubic-bezier(.16, 1, .3, 1), color .25s cubic-bezier(.16, 1, .3, 1), transform .25s cubic-bezier(.16, 1, .3, 1);
}
.story .pill { margin-top: 1.46vw; width: 21.4vw; }
.pill:hover { background: var(--pill-hover); }
.pill:active { transform: scale(.98); }

/* ---------- apps: story cards continuing the hero ---------- */
.apps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.37vw;
  padding: 1.35vw 1.37vw 0;
}
.app {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--on-color);
  box-shadow: 0 1px 2px rgba(8, 25, 69, .08), 0 10px 30px -12px rgba(8, 25, 69, .25);
  transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .6s cubic-bezier(.16, 1, .3, 1);
}
.app:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(8, 25, 69, .1), 0 24px 48px -16px rgba(8, 25, 69, .38); }
.app--tempo { background: var(--cobalt); }
.app--recover { background: var(--orange); color: var(--orange-ink); }
.app--halfline { background: var(--grass); }
.app-text { padding: 2.1vw 1.95vw 0; }
.app h2 { font-size: 3.45vw; line-height: 1; letter-spacing: -.03em; font-weight: 860; }
.app-line { margin-top: 1.1vw; max-width: 26em; font-size: max(15px, 1.12vw); line-height: 1.45; opacity: .92; }
.app-platform { margin-top: .9vw; font-size: max(13px, .9vw); font-weight: 700; opacity: .8; }
.app-art { margin-top: auto; overflow: hidden; }
.app-art img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 22%);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.app:hover .app-art img { transform: scale(1.035); }

/* ---------- artwork ---------- */
.artwork {
  margin: 1.37vw 1.37vw 0;
  padding: 5vw;
  border-radius: var(--radius-xl);
  background: var(--surface);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr); gap: 4vw; align-items: start;
}
.artwork h2 { font-weight: 820; font-size: 3.4vw; line-height: .95; letter-spacing: -.03em; }
.artwork-copy p { margin-top: 1.4vw; max-width: 30em; font-size: max(15px, 1.12vw); line-height: 1.5; color: var(--ink-soft); }
.artwork-note { font-weight: 700; color: var(--ink) !important; }
.art-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1vw; }
.art-grid li { border-radius: var(--radius-l); overflow: hidden; background: var(--ground); box-shadow: 0 1px 2px rgba(8, 25, 69, .08), 0 10px 30px -12px rgba(8, 25, 69, .25); }
.art-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s cubic-bezier(.16, 1, .3, 1); }
.art-grid li:hover img { transform: scale(1.035); }

/* ---------- principles ---------- */
.principles {
  margin: 1.37vw;
  padding: 6vw 5vw 5.5vw;
  border-radius: var(--radius-xl);
  background: var(--navy);
  color: var(--on-navy);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 4vw;
}
.principles h2 { font-weight: 820; font-size: 4.6vw; line-height: .92; letter-spacing: -.035em; align-self: start; }
.principle-list { list-style: none; margin: 0; padding: 0; }
.principle-list li { padding: 1.6vw 0 1.8vw; border-top: 1px solid rgba(255, 255, 255, .16); }
.principle-list li:first-child { border-top: 0; padding-top: .4vw; }
.principle-list strong { display: block; font-size: max(22px, 2.05vw); line-height: 1.12; letter-spacing: -.02em; }
.principle-list span { display: block; margin-top: .7vw; max-width: 36em; font-size: max(15px, 1.12vw); line-height: 1.5; opacity: .72; }

/* ---------- company ---------- */
.company {
  margin: 0 1.37vw;
  padding: 5vw;
  border-radius: var(--radius-xl);
  background: var(--surface);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3vw 4vw; align-items: start;
}
.company h2 { font-weight: 820; font-size: 3.4vw; line-height: .95; letter-spacing: -.03em; }
.facts { margin: 0; display: grid; gap: 1.4vw; }
.facts div { display: grid; grid-template-columns: 11em 1fr; gap: 1.5em; padding-bottom: 1.4vw; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-soft); font-size: max(14px, .95vw); }
.facts dd { margin: 0; font-size: max(16px, 1.15vw); line-height: 1.45; }

/* ---------- footer ---------- */
.foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 2.4vw 2.7vw 2.6vw 2.6vw;
  font-size: 14px; color: var(--ink-soft);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- legal page ---------- */
.legal {
  margin: 0 .8vw 1.37vw;
  padding: clamp(40px, 6vw, 96px) clamp(20px, 6vw, 96px);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.legal-inner { max-width: 44rem; }
.legal h1 { font-weight: 820; font-size: clamp(44px, 5.2vw, 88px); line-height: .92; letter-spacing: -.03em; }
.legal .meta { margin-top: 16px; color: var(--ink-soft); font-size: 15px; }
.legal .lead { margin-top: 40px; font-size: 20px; line-height: 1.5; }
.legal h2 { margin-top: 48px; font-size: 26px; letter-spacing: -.02em; }
.legal p, .legal li { margin-top: 14px; color: var(--ink-soft); line-height: 1.62; }
.legal ul { padding-left: 20px; margin: 0; }
.legal strong { color: var(--ink); }

/* ---------- motion: one authored moment ---------- */
@media (prefers-reduced-motion: no-preference) {
  .story-art img { animation: settle 1.6s cubic-bezier(.16, 1, .3, 1) both; }
  @keyframes settle {
    from { transform: translateY(2.5%) scale(1.04); filter: blur(10px) saturate(.7); }
    to { transform: none; filter: none; }
  }
}

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  :root { --radius-xl: 24px; --radius-l: 22px; }
  .bar { height: 60px; padding: 0 16px; }
  .wordmark { white-space: nowrap; font-size: 15px; }
  .nav { gap: 16px; font-size: 14px; }
  .nav a[href="#studio"] { display: none; }
  .story { height: auto; margin: 0 10px; display: flex; flex-direction: column-reverse; }
  .story-art { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 1; margin-top: -4%; z-index: 0; overflow: hidden; }
  .story-art img { transform: scale(1.12); transform-origin: 50% 60%; }
  .story-copy { position: relative; left: auto; top: auto; width: auto; padding: 36px 22px 0; z-index: 1; }
  .story h1 { font-size: clamp(44px, 13vw, 76px); }
  .story-sub { margin-top: 18px; max-width: none; font-size: 17px; }
  .story .pill { margin-top: 24px; width: 100%; height: 54px; font-size: 16px; }
  .apps { grid-template-columns: 1fr; gap: 12px; padding: 12px 10px 0; }
  .app-text { padding: 26px 22px 0; }
  .app h2 { font-size: 40px; }
  .app-line { margin-top: 12px; }
  .app-platform { margin-top: 10px; }
  .artwork { margin: 12px 10px 0; padding: 40px 22px; grid-template-columns: 1fr; gap: 24px; }
  .artwork h2 { font-size: 36px; }
  .artwork-copy p { margin-top: 14px; }
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .principles { margin: 12px 10px; padding: 40px 22px 28px; grid-template-columns: 1fr; gap: 24px; }
  .principles h2 { font-size: 44px; }
  .principle-list li { padding: 20px 0 22px; }
  .principle-list span { margin-top: 8px; }
  .company { margin: 0 10px; padding: 40px 22px; grid-template-columns: 1fr; gap: 28px; }
  .company h2 { font-size: 36px; }
  .facts { gap: 16px; }
  .facts div { grid-template-columns: 1fr; gap: 4px; padding-bottom: 16px; }
  .foot { padding: 24px 16px 28px; }
  .legal { margin: 0 10px 12px; }
}