/* Stilltab site: the page is a Stilltab tab. Charcoal matte, a photo that follows the time of day,
   the same serif, glass pills and quiet one-line rows. Motion only marks a change. */
:root {
  --matte: #36353a;
  --ink: #f6f3ee;
  --ink-2: rgba(246, 243, 238, 0.78);
  --ink-3: rgba(246, 243, 238, 0.56);
  --glass: rgba(255, 255, 255, 0.1);
  --glass-edge: rgba(255, 255, 255, 0.16);
  --glass-hover: rgba(255, 255, 255, 0.16);
  --good: #8cc3a0;
  --glow: #f4c58a;
  --serif: "New York", ui-serif, "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --inset: 10px;
}
* { box-sizing: border-box; }
html { background: var(--matte); }
body { overflow: hidden; }
body {
  margin: 0; color: var(--ink);
  font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
}
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
code { font: 0.88em var(--mono); }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.025em; margin: 0; }

/* --- the sky: fixed inside the matte, like the tab --- */
.sky { position: fixed; inset: var(--inset); border-radius: 18px; overflow: hidden; z-index: -1; background: #241f24; }
.photo { position: absolute; inset: 0; background: center 60% / cover no-repeat; opacity: 0; transition: opacity 1600ms var(--ease); }
.photo[data-p="dawn"] { background-image: var(--dawn, url(img/sky/dawn-4.jpg)); }
.photo[data-p="day"] { background-image: url(img/sky/day.jpg); }
.photo[data-p="dusk"] { background-image: var(--dusk, url(img/sky/dusk-0.jpg)); }
.photo[data-p="night"] { background-image: url(img/sky/night.jpg); }
html[data-phase="dawn"] .photo[data-p="dawn"],
html[data-phase="day"] .photo[data-p="day"],
html[data-phase="dusk"] .photo[data-p="dusk"],
html[data-phase="night"] .photo[data-p="night"],
html:not([data-phase]) .photo[data-p="dusk"] { opacity: 1; }
/* A light veil at the top, deepening as you read down. */
.veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 14, 20, 0.22), rgba(18, 14, 20, 0.12) 40%, rgba(18, 14, 20, 0.4)); }
.frame { scroll-timeline: --page block; }
body { timeline-scope: --page; }
.veil::after { content: ""; position: absolute; inset: 0; background: rgba(18, 14, 20, 0.42); opacity: 0; }
@supports (animation-timeline: scroll()) {
  .veil::after { animation: deepen linear both; animation-timeline: --page; animation-range: 0 90vh; }
  @keyframes deepen { to { opacity: 1; } }
}

/* --- glass, as on the tab --- */
.glass, .ai, .search {
  background: var(--glass); border: 1px solid var(--glass-edge);
  backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}

/* --- corners --- */
.edges { position: fixed; left: var(--inset); right: var(--inset); z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; pointer-events: none; }
.edges > * { pointer-events: auto; }
.edges.top { top: calc(var(--inset) + 14px); }
.edges.bottom { bottom: calc(var(--inset) + 12px); font-size: 13px; color: var(--ink-3); }
.glass { display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 14px; transition: background 300ms var(--ease); }
.glass:hover { background: var(--glass-hover); }
.brand { font: 400 17px/1 var(--serif); letter-spacing: -0.01em; }
.mark { width: 20px; height: 20px; border-radius: 6px; }
.status { display: inline-flex; align-items: center; gap: 8px; }
.status a { text-decoration: none; }
.status a:hover { color: var(--ink); }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--good); animation: breathe 4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.35; } }
.hint-label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.hint em { font-family: var(--serif); font-size: 13px; }

/* --- hero: the tab itself --- */
/* The page scrolls inside the frame, so nothing slides over the matte. */
.frame {
  position: fixed; inset: var(--inset); border-radius: 18px; overflow-y: auto; scroll-behavior: smooth;
  padding: 0 28px; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(180deg, transparent, #000 72px, #000 calc(100% - 56px), transparent);
}
.hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 0 120px; }
.time { margin: 0; font: 500 13px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
h1 { margin-top: 18px; font-size: clamp(56px, 9vw, 112px); line-height: 1; }
.brief { margin: 18px auto 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); }
.search {
  display: flex; align-items: center; gap: 12px; width: min(100%, 560px); height: 56px; margin-top: 40px;
  padding: 0 8px 0 20px; border-radius: 999px; text-shadow: none;
}
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.search .lead { flex: 1; min-width: 0; text-align: left; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search .get { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; text-decoration: none; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #2a2629; font: 500 14px var(--sans); cursor: pointer; transition: background 300ms var(--ease); }
.search .get:hover { background: #fff; }
.next { width: min(100%, 560px); margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.next code { font-size: 12px; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.ai { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px; color: var(--ink); text-decoration: none; font: 14px var(--sans); cursor: pointer; transition: background 300ms var(--ease); }
.ai:hover { background: var(--glass-hover); }
.ai[aria-checked="true"] { background: rgba(255, 255, 255, 0.88); color: #2a2629; text-shadow: none; }
.ai.big { height: 50px; padding: 0 28px; font-size: 16px; margin-top: 30px; }

/* --- the column: one line each, open for more --- */
.column { max-width: 680px; margin: 0 auto; }
.group { margin-top: 44px; }
.group:first-child { margin-top: 0; }
.group-label { margin: 0 0 6px; padding: 0 14px; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.row { border-radius: 14px; transition: background 300ms var(--ease); }
.row:hover, .row[open] { background: rgba(255, 255, 255, 0.08); }
.row summary { display: flex; align-items: baseline; gap: 16px; padding: 12px 14px; cursor: pointer; list-style: none; border-radius: 14px; }
.row summary::-webkit-details-marker { display: none; }
.row summary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(244, 197, 138, 0.45); }
.row-title { flex: 1; min-width: 0; font-size: 17px; }
.group:last-child .row-title { color: var(--ink-2); }
.row-meta { font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chev { align-self: center; width: 7px; height: 7px; margin: 0 4px 0 2px; border-right: 1.6px solid var(--ink-3); border-top: 1.6px solid var(--ink-3); transform: rotate(45deg); transition: transform 350ms var(--ease); }
.row[open] .chev { transform: rotate(135deg); }
.more { padding: 0 14px 16px; }
.more p { margin: 0; color: var(--ink-2); font-size: 15px; max-width: 36em; }
.more a { color: var(--ink); }
.more pre { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: rgba(12, 10, 14, 0.5); overflow-x: auto; text-shadow: none; }
.more pre code { font-size: 12.5px; line-height: 1.7; color: #ece8e2; }

/* --- looks --- */
.light { text-align: center; padding-top: clamp(120px, 18vh, 200px); }
h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1.1; }
.light .pills { margin-top: 26px; }

/* --- end --- */
.end { min-height: 80svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-bottom: 60px; }

@media (max-width: 640px) {
  :root { --inset: 6px; }
  .frame { padding: 0 20px; }
  .hint { display: none; }
  .row-meta { display: none; }
  .search .lead { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame { scroll-behavior: auto; }
  .photo, .row, .chev, .ai, .glass { transition: none; }
  .pulse { animation: none; }
}