/* Kusog — kusog.pastelero.ph
   Drenched-ink strategy. The app is used at 6am under fluorescent strip lights,
   so the site is dark and the only warm light on the page comes from the same
   ember the app uses. Identity is inherited from the app's own tokens; nothing
   here invents a second brand. */

@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("fonts/ClashDisplay-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink:        oklch(0.16 0.018 268);
  --ink-deep:   oklch(0.12 0.016 268);
  --surface:    oklch(0.21 0.020 268);
  --surface-2:  oklch(0.26 0.022 268);
  --line:       oklch(0.31 0.022 268);

  --ember:      oklch(0.71 0.176 44);
  --ember-lift: oklch(0.80 0.150 66);
  --ember-deep: oklch(0.58 0.190 33);

  --text:       oklch(0.97 0.006 268);
  --text-2:     oklch(0.79 0.014 268);
  --text-3:     oklch(0.65 0.016 268);

  --ok:         oklch(0.80 0.163 148);

  --step--1: clamp(0.86rem, 0.83rem + 0.14vw, 0.94rem);
  --step-0:  clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem);
  --step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-3:  clamp(2.3rem, 1.9rem + 2vw, 3.4rem);
  --step-4:  clamp(2.6rem, 2rem + 2.9vw, 4.4rem);

  --gap:  1rem;
  --pad:  clamp(1.25rem, 4vw, 2.5rem);
  --rail: 68rem;

  --z-nav: 100;
}

* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: Archivo, ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: "Clash Display", Archivo, sans-serif;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.015em; }

p { margin: 0; color: var(--text-2); max-width: min(62ch, 100%); text-wrap: pretty; }
a { color: var(--ember-lift); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ember-lift);
  outline-offset: 3px;
  border-radius: 4px;
}

.rail { width: min(100% - 2 * var(--pad), var(--rail)); margin-inline: auto; }

/* Grid/flex children default to min-width:auto, which lets a long line push the
   track wider than the viewport. Every layout child opts out. */
header.hero .rail > *,
.split > *,
nav .rail > *,
footer .rail > * { min-width: 0; }

/* ---------- nav ---------- */

nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in oklch, var(--ink) 82%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
nav.stuck { border-bottom-color: var(--line); }
nav .rail { display: flex; align-items: center; gap: var(--gap); min-height: 68px; }
nav img { width: 30px; height: 30px; border-radius: 8px; }
nav .name {
  font-family: "Clash Display", sans-serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: -0.02em; margin-right: auto;
}
nav a.link { color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
nav a.link:hover { color: var(--text); }

/* ---------- hero ---------- */

/* `overflow: clip` contains the glow below, which is inset past the right edge
   on purpose. Without it the pseudo-element widened the document by 10vw and
   pushed the nav and the lede off-screen. */
header.hero {
  position: relative;
  overflow: clip;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem);
}

/* The one light source on the page. */
header.hero::before {
  content: "";
  position: absolute; inset: -30% -10% auto 30%;
  height: 90vh; pointer-events: none;
  background: radial-gradient(closest-side,
    oklch(0.71 0.176 44 / 0.30), oklch(0.71 0.176 44 / 0.08) 55%, transparent 75%);
  filter: blur(20px);
}
header.hero .rail {
  position: relative;
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  header.hero .rail { grid-template-columns: 1.05fr 0.95fr; }
}

.lede { display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-start; max-width: 100%; }
.lede p { font-size: var(--step-1); color: var(--text-2); line-height: 1.45; max-width: min(34ch, 100%); }
.cebuano { color: var(--text-3); font-size: var(--step--1); letter-spacing: 0.01em; }

.cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--ember-deep);
  color: oklch(0.99 0 0);
  font-weight: 600; font-size: var(--step-0);
  padding: 0.85rem 1.5rem; border-radius: 999px;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s;
}
.cta:hover { background: var(--ember); transform: translateY(-2px); }
.cta .meta { color: oklch(0.99 0 0 / 0.72); font-weight: 400; font-size: var(--step--1); }

/* device */
.device { position: relative; justify-self: center; width: min(100%, 268px); }
/* Without `height: auto` the HTML height attribute wins over the intrinsic
   ratio, and the phone rendered at its full 1348px, making the hero 1500px tall. */
.device img {
  width: 100%; height: auto; display: block;
  border-radius: 34px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -30px oklch(0 0 0 / 0.9), 0 0 60px -20px oklch(0.71 0.176 44 / 0.35);
}

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
section + section { border-top: 1px solid var(--line); }
.head { display: flex; flex-direction: column; gap: 0.9rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* the set-table feature: the thing the app is actually for */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) { .split { grid-template-columns: 0.9fr 1.1fr; } }
.split.flip > :first-child { order: 2; }
@media (max-width: 859px) { .split.flip > :first-child { order: 0; } }

/* a real set table, built in CSS, not a screenshot */
.settable {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.1rem; font-size: var(--step--1);
}
.settable .caption { color: var(--text-3); margin-bottom: 0.85rem; font-size: var(--step--1); }
.settable table { width: 100%; border-collapse: collapse; }
.settable th {
  text-align: left; color: var(--text-3); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding-bottom: 0.6rem;
}
.settable td { padding: 0.55rem 0; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.settable td.n { color: var(--text-3); width: 2.4rem; }
.settable td.prev { color: var(--text-3); }
.settable tr.done td { color: var(--ok); }
.settable .tag {
  display: inline-block; min-width: 1.5rem; text-align: center;
  border-radius: 6px; background: var(--surface-2); color: var(--text-2);
  font-size: 0.7rem; padding: 0.1rem 0.35rem;
}
.settable .tick { color: var(--ok); }
.settable .tick.off { color: var(--text-3); }

/* feature list: deliberately a list, not a card grid */
ul.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
ul.facts li { padding: 1.1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.35rem; }
ul.facts li:last-child { border-bottom: 1px solid var(--line); }
ul.facts b { font-family: "Clash Display", sans-serif; font-weight: 600; font-size: var(--step-0); letter-spacing: -0.01em; }
ul.facts span { color: var(--text-2); font-size: var(--step--1); }

/* the free claim */
.free { display: grid; gap: 1.4rem; }
.free .rows { display: grid; gap: 0; }
.free .row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: 0.9rem 0; border-top: 1px solid var(--line); align-items: baseline;
}
.free .row:last-child { border-bottom: 1px solid var(--line); }
.free .row span { color: var(--text-2); font-size: var(--step--1); }
.free .row b { color: var(--ok); font-weight: 600; font-size: var(--step--1); }

/* ---------- prose pages ---------- */

main.prose { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); }
main.prose { max-width: min(100% - 2 * var(--pad), 46rem); }
main.prose h1 { font-size: var(--step-3); margin-bottom: 0.4rem; }
main.prose h2 { font-size: var(--step-1); margin: 2.6rem 0 0.6rem; letter-spacing: -0.015em; font-weight: 600; }
main.prose p + p { margin-top: 0.9rem; }
main.prose ul { color: var(--text-2); padding-left: 1.15rem; margin: 0.6rem 0; }
main.prose li { margin-bottom: 0.35rem; }
main.prose .updated { color: var(--text-3); font-size: var(--step--1); }
main.prose strong { color: var(--text); }

/* ---------- footer ---------- */

footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3.5rem; }
footer .rail { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer a { color: var(--text-2); text-decoration: none; font-size: var(--step--1); }
footer a:hover { color: var(--text); }
footer .sig { margin-left: auto; color: var(--text-3); font-size: var(--step--1); }

/* ---------- motion ---------- */
/* Content is visible by default; the reveal only enhances it, so a headless
   render or a background tab never ships a blank section. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
  .reveal.in { opacity: 1; transform: none; }
  ul.facts li { transition-delay: calc(var(--i, 0) * 60ms); }
}