/* Site chrome and page layouts for krystalyz.news. Every colour, type role and spacing value
   comes from the site's own copy of the design system in theme/. */
@import "./theme/tokens.css";
@import "./theme/fonts.css";
@import "./theme/typography.css";

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--kb-canvas);
}

body {
  display: flex;
  justify-content: center;
  color: var(--kb-text);
  font-family: var(--font-sans), var(--fallback-sans);
}

/* The site column: cream on canvas, ruled on both sides, footer pinned on short pages. */
.site {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 880px;
  min-height: 100dvh;
  background: var(--kb-cream);
  border-right: var(--rule-thin) solid var(--kb-rule);
  border-left: var(--rule-thin) solid var(--kb-rule);
}

a {
  color: var(--kb-accent);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--kb-text);
}

:focus-visible {
  outline: var(--focus-outline-width) solid var(--kb-accent);
  outline-offset: var(--focus-outline-offset);
}

/* :focus, not :focus-visible — a keyboard user tabbing in must always reach it. */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  z-index: 10;
  padding: var(--space-2) var(--space-3);
  background: var(--kb-bg);
  color: var(--kb-text);
}

.skip-link:focus {
  top: var(--space-2);
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  background: var(--kb-bg);
  border-bottom: var(--rule-strong) solid var(--kb-text);
}

.wordmark {
  color: var(--kb-text);
  text-decoration: none;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-family: var(--font-brand), var(--fallback-sans);
  font-weight: 600;
  color: var(--kb-text);
  text-transform: uppercase;
  text-decoration: none;
}

.site-header .site-nav a {
  font-size: var(--t-dek-sm-size);
  letter-spacing: 0.06em;
}

.site-nav a:hover,
.site-nav a[aria-current] {
  color: var(--kb-accent);
}

/* Primary call to action -> app.krystalyz.news. Filled accent with --kb-on-accent text,
   the same pairing the app uses for its primary button. */
.cta {
  margin-left: auto;
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-md);
  background: var(--kb-accent);
  color: var(--kb-on-accent);
  font-family: var(--font-brand), var(--fallback-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}

.cta:hover {
  background: var(--kb-text);
  color: var(--kb-bg);
}

.cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Main ───────────────────────────────────────────────────────────────── */

.site-main {
  flex: 1 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
}

.reading {
  max-width: var(--read-max);
  margin: 0 auto;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  background: var(--kb-bg);
  border-top: var(--rule-thin) solid var(--kb-rule);
}

.site-footer .site-nav a {
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-track);
}

.colophon {
  margin: 0 0 0 auto;
}

/* ── Markdown prose ─────────────────────────────────────────────────────────
   Markdown cannot carry class names, so headings inside prose take the same
   serif ramp the designed screens apply as .t-title / --md / --xs. */

.prose h1 {
  margin: 0;
  font-family: var(--font-serif), var(--fallback-serif);
  font-weight: 500;
  font-size: var(--t-title-size);
  line-height: var(--t-title-leading);
  letter-spacing: var(--t-title-track);
  color: var(--kb-text);
  text-wrap: balance;
}

.prose h2,
.landing h2 {
  margin: var(--space-8) 0 0;
  font-family: var(--font-serif), var(--fallback-serif);
  font-weight: 500;
  font-size: var(--t-title-md-size);
  line-height: var(--t-title-md-leading);
  letter-spacing: var(--t-title-md-track);
  color: var(--kb-text);
  text-wrap: balance;
}

.prose h3 {
  margin: var(--space-6) 0 0;
  font-family: var(--font-serif), var(--fallback-serif);
  font-weight: 500;
  font-size: var(--t-title-xs-size);
  line-height: var(--t-title-xs-leading);
  letter-spacing: var(--t-title-xs-track);
  color: var(--kb-text);
}

.prose p,
.landing p {
  margin: 0;
}

.prose h1 + p,
.prose h2 + p,
.prose h3 + p,
.landing h2 + p {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
}

.prose li + li {
  margin-top: var(--space-1);
}

.prose strong {
  font-weight: 700;
}

.prose table {
  width: 100%;
  margin-top: var(--space-4);
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--rule-thin) solid var(--kb-rule);
  text-align: left;
  vertical-align: top;
}

.prose th {
  font-family: var(--font-brand), var(--fallback-sans);
  font-weight: 600;
  font-size: var(--t-label-size);
  letter-spacing: var(--t-label-track);
  text-transform: uppercase;
  color: var(--kb-muted);
}

.prose hr,
.divider {
  height: 0;
  margin: var(--space-6) 0;
  border: 0;
  border-top: var(--rule-thin) solid var(--kb-rule);
}

/* ── Designed page furniture ────────────────────────────────────────────── */

.page-title {
  margin: var(--space-4) 0 0;
}

.back-link + .page-title {
  margin-top: var(--space-5);
}

.page-dek {
  margin: var(--space-3) 0 0;
}

.reading > .t-kicker,
.hub-note p {
  margin: 0;
}

.back-link {
  display: inline-block;
  color: var(--kb-accent);
  text-decoration: none;
}

.back-link:hover {
  color: var(--kb-text);
}

/* Post byline: date · dot · author, the app's Meta separator. */
.byline {
  display: flex;
  gap: var(--meta-gap);
  align-items: center;
  margin: var(--space-3) 0 0;
}

.byline__dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-circle);
  background: var(--kb-rule);
}

/* The post's opening paragraph is its standfirst. */
.prose--post > p:first-child {
  font-size: var(--t-ui-size);
  line-height: 1.65;
  color: var(--kb-muted);
}

.prose--post > p:first-child + p {
  margin-top: var(--space-5);
}

/* Hub lists: a strong rule opens the list, each row is a full-width link. */
.row-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  border-top: var(--rule-strong) solid var(--kb-text);
  list-style: none;
}

.row-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  background: var(--kb-bg);
  border-bottom: var(--rule-thin) solid var(--kb-rule);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}

.row-link:hover {
  background: var(--kb-accent-soft);
  color: inherit;
}

.row-link h2 {
  margin: 0;
}

.row-link__dek {
  color: var(--kb-muted);
}

.row-link--compact {
  flex-direction: row;
  gap: var(--space-4);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--space-4);
}

.row-link__cue {
  color: var(--kb-accent);
}

.hub-note {
  margin-top: var(--space-6);
}

/* The app's Callout, info variant. */
.callout {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--btn-pad-x-sm);
  border: var(--rule-thin) solid color-mix(in srgb, var(--kb-accent) 40%, transparent);
  border-radius: var(--radius-md);
  background: var(--kb-accent-soft);
}

.callout p {
  margin: 0;
}

.callout .callout__title {
  margin-bottom: var(--space-1);
  font-weight: 700;
  font-size: var(--t-member-size);
  color: var(--kb-accent);
}

.callout__body {
  font-size: var(--t-dense-size);
  line-height: 1.45;
  color: var(--kb-text);
}

/* ── Landing page ───────────────────────────────────────────────────────── */

.landing .t-masthead {
  margin: var(--space-4) 0 0;
  text-wrap: balance;
}

.landing .standfirst {
  margin-top: var(--space-4);
  font-size: var(--t-ui-size);
  line-height: 1.6;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-6);
}

.actions .cta {
  margin-left: 0;
  padding: var(--btn-pad-y) var(--space-5);
}

/* Secondary links in the actions row are crimson text; the primary .cta is a filled
   button and keeps its own --kb-on-accent text, so exclude it here. */
.actions a:not(.cta) {
  color: var(--kb-accent);
}

.actions a:not(.cta):hover {
  color: var(--kb-text);
}

/* Screenshot frame: hairline on white, a whisker of padding, caption below. */
.frame {
  margin: var(--space-6) 0 0;
  padding: var(--space-1);
  background: var(--kb-bg);
  border: var(--rule-thin) solid var(--kb-rule);
  border-radius: var(--radius-card);
}

.frame--hero {
  margin-top: var(--space-8);
}

.frame__image {
  display: block;
  width: 100%;
  height: auto;
}

.frame__placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
}

.frame--wide .frame__placeholder {
  aspect-ratio: 16 / 9;
}

.frame__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: var(--kb-cream);
  text-align: center;
}

.section {
  margin-top: var(--space-10);
}

.section--first {
  margin-top: var(--space-12);
}

/* The app's SectionLabel: crimson tick, tracked label, hairline to the edge. */
.section-label {
  display: flex;
  gap: var(--btn-pad-y);
  align-items: center;
}

.section-label::before {
  content: "";
  width: 18px;
  height: var(--rule-strong);
  background: var(--kb-accent);
}

.section-label::after {
  content: "";
  flex: 1;
  height: var(--rule-thin);
  background: var(--kb-rule);
}

.section h2 {
  margin-top: var(--space-4);
}

/* The app's ProvMark, reproduced: spark glyph plus the word, in crimson. */
.explainer {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--kb-bg);
  border: var(--rule-thin) solid var(--kb-rule);
  border-left: var(--rule-strong) solid var(--kb-accent);
}

/* Two classes deep on purpose: typography.css sets `.t-read p + p`, which would otherwise win. */
.landing .explainer > p + p {
  margin-top: var(--space-2);
}

.prov-mark {
  display: inline-flex;
  gap: var(--space-1);
  align-items: center;
  margin: 0;
  font-weight: 700;
  font-size: var(--t-chip-size);
  line-height: 1;
  color: var(--kb-accent);
}

.prov-mark svg {
  width: 13px;
  height: 13px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.card {
  padding: var(--space-4) var(--space-5);
  background: var(--kb-bg);
  border: var(--rule-thin) solid var(--kb-rule);
  border-radius: var(--radius-card);
}

.card p + p {
  margin-top: var(--space-2);
}

.cards + p {
  margin-top: var(--space-4);
}

.pricing {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  background: var(--kb-bg);
  border: var(--rule-thin) solid var(--kb-rule);
  border-top: var(--rule-strong) solid var(--kb-text);
}

.landing .pricing > .pricing__baseline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin-top: var(--space-3);
}

.pricing__baseline .t-numeral {
  font-size: var(--t-title-lg-size);
}

.pricing__baseline .pricing__cadence {
  color: var(--kb-muted);
}

.landing .pricing > p {
  margin-top: var(--space-4);
}

.landing .pricing > .pricing__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--rule-thin) solid var(--kb-rule);
}

.pricing__foot a {
  color: var(--kb-accent);
}

.pricing__foot a:hover {
  color: var(--kb-text);
}

/* Desktop: the column is a broadsheet, not a phone. Scale the whole sheet — type, spacing,
   rules, images — so the 880px design reads at 1.5× on a wide screen. Mobile is untouched. */
@media (min-width: 1440px) {
  .site { zoom: 1.5; }   /* 880 → 1320px column */
}
@media (min-width: 1120px) and (max-width: 1439.98px) {
  .site { zoom: 1.25; }  /* 880 → 1100px, so a laptop gets a step too */
}

/* Narrow screens: wordmark and CTA share the top row; the nav becomes a ruled strip
   beneath, spread edge to edge. Flex order does the restack, so the DOM stays as is. */
@media (max-width: 639.98px) {   /* --bp-sm */
  .site-header { gap: 0; padding: 0; }
  .site-header .wordmark { order: 1; padding: var(--space-3) var(--space-4); }
  .site-header .cta { order: 2; margin-right: var(--space-4); }
  .site-header .site-nav {
    order: 3;
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border-top: var(--rule-thin) solid var(--kb-rule);
  }
  .site-header .site-nav ul { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-3); }
  .site-header .site-nav a { white-space: nowrap; }
}