/* Nesteia marketing site — the press kit (/press) and the beta changelog (/changelog).
   Loaded after styles.css, whose tokens and .legal page layout both pages build on. Nothing here is inline
   (the CSP allows no style attribute or <style> element), and nothing here overrides the shared chrome.
   The specimen tiles and colour chips use literal hex values on purpose: they show an asset or a token's value as it is,
   whichever theme the page is in. Every other colour is a token. */

/* ---------- Shared by both pages ---------- */
.press-status { margin-top: 1rem; }

/* ---------- Press kit ---------- */
/* The kit's image grids run to 52rem; its text keeps the legal pages' 44rem measure. */
.legal.press { max-width: var(--wrap); }
.press > h2, .press > h3, .press > .keyfacts, .press > .press-note, .press > .donts { max-width: 44rem; }
.press h3.press-sub { margin-top: 1.5rem; font-size: 1rem; }
.press h3.press-sub + p, .press h3.press-sub + ul { margin-top: 0.5rem; }

.legal .one-liner {
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  line-height: 1.25;
  max-width: 34ch;
  text-wrap: balance;
}

/* Key facts: a label column and a value column with hairlines between rows; one column on a phone. */
.keyfacts { margin: 0.75rem 0 0; border-top: 1px solid var(--hairline); }
.keyfacts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.25rem 1.5rem; padding: 0.625rem 0; border-bottom: 1px solid var(--hairline); }
.keyfacts dt { padding-top: 0.2rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); }
.keyfacts dd { margin: 0; font-size: 0.95rem; }
.keyfacts dd b { font-weight: 500; }
@media (max-width: 560px) {
  .keyfacts div { grid-template-columns: minmax(0, 1fr); }
  .keyfacts dt { padding-top: 0; }
}

/* A plain note, not the ember stop card: this states what the app is, it is not a sign to stop. */
.press-note { margin-top: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--hairline); border-radius: 12px; background: var(--raise); }
.legal .press-note h2 { margin-top: 0; }

/* Asset tiles: each asset on the background it is made for. */
.assets, .shots, .swatches { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; }
.assets li + li, .shots li + li, .swatches li + li { margin-top: 0; }
/* Two across on a phone, four across from 700 px, never wider than 52rem so a screenshot stays a readable size. */
.assets, .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
@media (min-width: 700px) { .assets, .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.assets { gap: 1.5rem 1.25rem; }
.asset p { margin-top: 0.5rem; }
.asset p + p { margin-top: 0.125rem; }
.asset b, .shots b, .swatches b { font-weight: 500; }
.tile { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--hairline); border-radius: 12px; }
.tile-light { background: #F4F3EE; }
.tile-dark { background: #0E1315; }
.tile img { display: block; }
.app-icon { width: 96px; height: 96px; border-radius: 22%; }
.tile-light .app-icon { box-shadow: 0 0 0 1px #DDDBD3; }
.mark { width: 72px; height: 72px; }
.assets + p { margin-top: 1rem; }

/* Screenshots: the grid is shared with the asset tiles above. */
.shots { gap: 1.5rem 1.25rem; align-items: start; }
.shots a:has(img) { display: block; border-radius: 14px; }
.shots img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 14px; background: #F4F3EE; }
.shots p { margin-top: 0.5rem; font-size: 0.9rem; line-height: 1.35; }
.shots p + p { margin-top: 0.125rem; }
.legal .shots p.small { font-size: 0.85rem; }

/* Brand colours: the light value then the dark value, as two chips beside the name. */
.swatches { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 0.875rem 1.5rem; max-width: 52rem; }
.swatches li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 0.375rem; align-items: center; }
.swatches .chip { grid-row: 1 / span 2; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--hairline); }
.swatches li > .chip + .chip { margin-right: 0.375rem; }
.swatches b, .swatches .small { grid-column: 3; }
.swatches .small { font-size: 0.8rem; }
.swatches + p { margin-top: 1rem; }
.c-surface-l { background: #F4F3EE; } .c-surface-d { background: #0E1315; }
.c-ink-l { background: #171B1D; }     .c-ink-d { background: #E9E7E0; }
.c-stone-l { background: #666E72; }   .c-stone-d { background: #8C9498; }
.c-tide-l { background: #236A76; }    .c-tide-d { background: #5CB5C1; }
.c-sand-l { background: #775F31; }    .c-sand-d { background: #D1B07A; }
.c-dusk-l { background: #585E8E; }    .c-dusk-d { background: #A3A9E0; }
.c-ember-l { background: #AC5335; }   .c-ember-d { background: #E38A66; }

/* ---------- Changelog ---------- */
.release { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline); }
.legal .release-when { font-size: 0.82rem; color: var(--stone); }
.release .kind { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tide); }
.release .kind.site { color: var(--ink); }
.legal .release h2 { margin-top: 0.25rem; }
.legal .release h2 + ul { margin-top: 0.625rem; }
.release + h2 { padding-top: 1.25rem; border-top: 1px solid var(--hairline); }

@media (forced-colors: active) {
  .swatches .chip, .tile { forced-color-adjust: none; }
}