/* Kairos Studios identity, Signature Pass v2 (2026-09-30): "Daylight".
   The page behaves like a sunlit room in Amherst: daylight.js tints the page from the sun,
   rakes light in from its true direction, casts window shadows that sway with the observed
   wind, and draws only observed weather. Light only.
   Every product shows its app icon and one home-screen screenshot in a single frame style.
   Type: Newsreader (Production Type) display, Archivo (Omnibus-Type) text; IBM Plex Mono
   only for addresses.
   Type scale: 1.25 from 17px (14, 17, 21.3, 26.6, 33.2, 41.5, 51.9, 64.8, 81).
   Space scale: 4, 8, 12, 16, 24, 32, 48, 64, 96.
   Grid: label column 168px, main column, screenshot column 288px, 40px gutters.
   Left edges: A (label column), B (main column), C (screenshot column). Nothing else. */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/Newsreader-normal-400_500.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/Newsreader-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/Archivo-normal-400_700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-normal-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-normal-500.woff2") format("woff2"); }

/* Light only. daylight.js tints --bg from the sun and draws the room layers. */
:root {
  color-scheme: light;
  --bg: #f2f3f3; --ink: #14181f; --mute: #434a56; --line: #d1d6dc; --acc: #1b4fa6;
  --display: "Newsreader", "Iowan Old Style", "Palatino", serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --label: 168px; --rail: 288px; --gutter: 40px;
}

/* The room: light, window shadows and observed weather, behind everything. */
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.room-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(var(--light-w, 80%) var(--light-h, 50%) at var(--light-x, 50%) var(--light-y, 0%), var(--light-c, #fff) 0%, color-mix(in srgb, var(--light-c, #fff) 50%, transparent) 40%, transparent 92%),
    linear-gradient(var(--shade-dir, 180deg), transparent 35%, rgba(24, 30, 44, var(--shade-a, 0.05)) 100%);
  opacity: var(--light-o, 0.6);
}
.room-window {
  position: absolute; inset: -15% -25%; opacity: var(--win-o, 0);
  transform: translateX(var(--win-x, 0)) skewX(var(--win-skew, 0deg)) scaleY(var(--win-len, 1));
  transform-origin: 50% 0; filter: blur(14px); mix-blend-mode: multiply;
}
.room-window svg { width: 100%; height: 100%; display: block; }
.room-window .panes { fill: #2a3140; }
.room-branch { position: absolute; top: -4%; right: -2%; width: min(46vw, 620px); aspect-ratio: 1; opacity: var(--branch-o, 0); transform: translateX(var(--win-x, 0)) skewX(var(--win-skew, 0deg)); transform-origin: 100% 0; filter: blur(5px); mix-blend-mode: multiply; }
.room-branch svg { width: 100%; height: 100%; display: block; }
.room-branch .branch { fill: #2a3140; transform-origin: 600px 30px; }
.room-branch .stem { fill: none; stroke: #2a3140; stroke-width: 7; stroke-linecap: round; }
.room-weather { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .room-branch .branch { animation: sway var(--sway-t, 7s) ease-in-out infinite alternate; }
  .room-light, .room-window, .room-branch { transition: opacity 3s ease, transform 3s ease; }
}
@keyframes sway { from { transform: rotate(calc(var(--sway-a, 1deg) * -1)); } to { transform: rotate(var(--sway-a, 1deg)); } }
.page { position: relative; z-index: 1; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; hanging-punctuation: first; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.6 var(--sans); font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: no-preference) {
  body { transition: background-color 3s ease; }
}
::selection { background: var(--acc); color: var(--bg); }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--line); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0; }

.page { max-width: 1200px; margin: 0 auto; padding: 24px 40px 48px; }
.page.narrow { max-width: 760px; }

/* Top strip */
.meta {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--line);
  font: 500 14px/1.4 var(--sans); color: var(--mute);
}
.meta .mark, .meta a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.meta svg { width: 26px; height: auto; display: block; }
#sky { font-variant-numeric: tabular-nums; text-align: right; }

.kicker { font: 500 14px/1.4 var(--sans); color: var(--mute); margin: 0 0 24px; }

h1 { font-family: var(--display); font-weight: 400; font-size: clamp(48px, 7vw, 86px); line-height: 1.02; letter-spacing: -0.02em; margin: 0; }
h1 .l1 { display: block; }
h1 i { font-style: italic; }
h2 { font-family: var(--display); font-weight: 500; font-size: 26.6px; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
h3 { font-family: var(--display); font-weight: 500; font-size: 33.2px; line-height: 1.1; letter-spacing: -0.012em; margin: 0; }
.lede { font-size: 21.3px; line-height: 1.5; letter-spacing: -0.003em; margin: 32px 0 0; max-width: 34em; }
.label { font: 600 14px/1.5 var(--sans); margin: 0; }

/* The grid */
.row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr) var(--rail); column-gap: var(--gutter); }

/* Status: muted, filled dot for live, hollow for anything else */
.status { font: 500 14px/1.5 var(--sans); color: var(--mute); display: flex; align-items: baseline; flex-wrap: wrap; margin: 0; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; align-self: center; margin-right: 8px; }
.status > * + *::before { content: "·"; display: inline-block; margin: 0 0.35em; color: var(--mute); }
.status .mono { font-size: 13px; }
[data-live] .status::before { background: currentColor; }
.status a { color: var(--ink); }

/* Product tiles: one mask, one size, one hairline */
.tile { position: relative; display: block; width: 56px; height: 56px; border-radius: 22.4%; overflow: hidden; flex: none; }
.tile img { display: block; width: 100%; height: 100%; }
.tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }

/* Home */
.hero { padding: 96px 0 80px; }
.hero h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; letter-spacing: -0.015em; max-width: 16em; }
.products { list-style: none; margin: 0; padding: 0; }
.product { grid-template-rows: auto auto 1fr; row-gap: 16px; padding: 40px 0; border-top: 1px solid var(--line); }
.product .tile { grid-column: 1; grid-row: 1 / 3; justify-self: end; }
.product h3 { grid-column: 2; grid-row: 1; }
.product .claim { grid-column: 2; grid-row: 2; margin: 0; max-width: 38em; }
.product .claim p { margin: 0; }
.product .claim p + p { margin-top: 12px; }
.product .disclaimer { font-weight: 600; }
.product .status { grid-column: 2; grid-row: 3; margin-top: 4px; align-self: start; }
.product .shot { grid-column: 3; grid-row: 1 / 4; justify-self: end; width: 168px; margin-top: 6px; }
.contact { padding: 32px 0 0; border-top: 1px solid var(--line); align-items: baseline; }
.contact .label { grid-column: 1; }
.contact p:not(.label) { grid-column: 2; margin: 0; }

.section-head { padding: 32px 0 0; border-top: 1px solid var(--line); }
.section-head + .products > .product:first-child, .section-head + .dev { border-top: 0; }
.products-wrap { margin-top: 8px; }

/* Screenshots: one frame, one aspect, everywhere */
.shot { display: block; aspect-ratio: 360 / 779; border-radius: 18px; overflow: hidden; background: var(--line); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent), 0 1px 2px rgba(0, 0, 0, 0.06); }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* In development */
.dev { list-style: none; margin: 0 0 0 calc(var(--label) + var(--gutter)); padding: 32px 0 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gutter); }
.dev .status { font-size: 13px; }
.dev .shot { width: 168px; max-width: 100%; }
.dev .shot.mac { width: 100%; max-width: 320px; aspect-ratio: 3 / 2; border-radius: 10px; }
.dev .shot.mac img { object-position: top left; }
.dev li { display: flex; flex-direction: column; gap: 12px; }
.dev .head { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.dev .tile { width: 36px; height: 36px; }
.dev h3 { font-size: 26.6px; }
.dev p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--mute); }
.dev p a { color: var(--ink); }

/* Document pages (privacy, terms) */
.doc .kicker { margin-top: 64px; }
.doc h1 { font-size: clamp(41.5px, 6vw, 64.8px); margin-bottom: 24px; }
.doc .lede { margin: 0 0 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); max-width: none; }
.doc h2 { margin: 48px 0 12px; }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 0; list-style-position: outside; }
.doc li { margin: 0 0 8px; }
.doc li strong { font-weight: 600; }
.updated { font: 500 14px var(--sans); color: var(--mute); margin-top: 48px; }

/* Footer */
footer {
  margin-top: 96px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font: 500 14px/1.5 var(--sans); color: var(--mute);
}
footer i { font-family: var(--display); font-size: 17px; font-style: italic; color: var(--ink); }

@media (max-width: 1000px) {
  :root { --label: 120px; --rail: 240px; --gutter: 32px; }
}
@media (max-width: 820px) {
  .row { grid-template-columns: minmax(0, 1fr); }
  .contact .label, .contact p:not(.label) { grid-column: 1; }
  .contact p:not(.label) { margin-top: 8px; }
  .dev { margin-left: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product { grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; grid-template-rows: none; }
  .product .tile { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; }
  .product h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .product .claim, .product .status { grid-column: 1 / -1; grid-row: auto; }
  .product .shot { grid-column: 1 / -1; grid-row: auto; justify-self: start; width: 168px; margin-top: 12px; }
}
@media (max-width: 600px) {
  .page { padding: 16px 16px 32px; }
  .meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  #sky { text-align: left; }
  .hero { padding: 56px 0 48px; }
  .lede { font-size: 19px; margin-top: 24px; }
  h3 { font-size: 26.6px; }
  .product { grid-template-columns: 44px minmax(0, 1fr); padding: 32px 0; }
  .tile { width: 44px; height: 44px; }
  .dev { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
  .dev .tile { width: 32px; height: 32px; }
  .dev h3 { font-size: 21.3px; }
}