/* Program pages: one template, the home page's tokens and type. */
@font-face { font-family: "Archivo"; src: url(/fonts/Archivo-Medium.woff2) format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/fonts/Archivo-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/fonts/Archivo-ExtraBold.woff2) format("woff2"); font-weight: 800 900; font-display: swap; }
@font-face { font-family: "JBM"; src: url(/fonts/JetBrainsMono-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JBM"; src: url(/fonts/JetBrainsMono-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --bg: #0B0C0E;
  --card: #17191C;
  --hi: #F2F3F4;
  --mid: #A2A7AC;
  --low: #8B9096;
  --faint: #686E74;
  --stroke: #2A2E33;
  --hair: rgba(255,255,255,.07);
  --accent: #E8622A;
  --tint: rgba(232,98,42,.08);
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JBM", ui-monospace, "SF Mono", Menlo, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--hi);
  font: 500 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

main { max-width: 44rem; margin: 0 auto; padding: 3.5rem 20px 5rem; }

.kicker {
  font: 600 12px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2rem;
}
.kicker a { color: var(--faint); }
.kicker a:hover { color: var(--accent); text-decoration: none; }

h1 {
  font-size: clamp(36px, 7vw, 56px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.04;
  text-wrap: balance;
}
h2 {
  font-size: clamp(24px, 4vw, 30px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 3.2rem 0 1rem;
}
h3 { font-size: 18px; font-weight: 700; margin: 1.6rem 0 .4rem; }
p, ul { margin-bottom: 1rem; text-wrap: pretty; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--accent); }
.lede { font-size: clamp(18px, 2.4vw, 20px); color: var(--mid); margin-top: 1.2rem; }
.small { font-size: 15px; color: var(--low); }
.mono { font-family: var(--mono); font-size: .92em; }

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin: 2rem 0 0; }
.cta img { width: 150px; }
.cta p { margin: 0; font-size: 15px; color: var(--low); max-width: 24rem; }

/* The day layout, as the app's detail page lays it out. */
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 1.2rem 0; }
.day { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; }
.day b { display: block; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.day span { display: block; font: 400 14px/1.5 var(--mono); color: var(--mid); }

/* A change card: the exact sentence the app shows after a session. */
.change {
  border: 1px solid rgba(232,98,42,.38);
  background: linear-gradient(180deg, var(--tint), var(--card) 60%);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0;
}
.change .lift { font-weight: 700; margin-bottom: 4px; }
.change .lift small { font: 500 12px/1 var(--mono); letter-spacing: .12em; color: var(--faint); margin-left: 8px; text-transform: uppercase; }
.change p { margin: 0; font: 400 14px/1.55 var(--mono); color: var(--mid); }

table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font: 400 14px/1.4 var(--mono); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--stroke); }
th { color: var(--faint); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
td { color: var(--mid); }
td:first-child { color: var(--hi); }
.scroll { overflow-x: auto; }

.shots { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; margin: 1.6rem 0; }
.shots figure { flex: 1 1 200px; max-width: 300px; }
.shots figure.watch { flex: 0 1 180px; }
figcaption { font-size: 14px; color: var(--low); margin-top: 8px; }

.qa h3 { margin-top: 1.4rem; }
.others { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; padding: 0; list-style: none; }
.others li { margin: 0; }
.others a { display: inline-block; border: 1px solid var(--stroke); border-radius: 99px; padding: 8px 14px; font-size: 15px; color: var(--hi); }
.others a:hover { border-color: var(--accent); text-decoration: none; }

.cards { display: grid; gap: 12px; margin: 1.4rem 0; }
.cards a { display: block; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 16px 18px; color: var(--hi); }
.cards a:hover { border-color: rgba(232,98,42,.5); text-decoration: none; }
.cards b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.cards span { display: block; color: var(--mid); font-size: 15px; margin-top: 4px; }

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stroke);
  font-size: 14px;
  color: var(--faint);
}
footer a { color: var(--low); }
footer p { margin-bottom: .6rem; }