/* Marius Help, on the brand's tokens (brand/BRAND.md) and Meadow's (meadow/MEADOW.md): light
   and dark follow the device. A big sky to open each page, drawn by the engine; big serif
   headings; at the foot, big links, his name huge, and the field in his blue. Controls keep the brand's colours. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); letter-spacing: var(--tracking-heading); font-kerning: none; margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
strong { font-weight: var(--font-weight-strong); }
a { color: var(--color-brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* The bar */
.bar {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.home { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: var(--font-weight-strong); }
.home:hover { text-decoration: none; }
.home img { display: block; }

.ghost, .primary {
  display: inline-flex;
  align-items: center;
  height: var(--control-height-md);
  padding-inline: var(--space-4);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  transition: background-color var(--duration-fast) var(--ease-exit), transform var(--duration-fast) var(--ease-standard);
}
.ghost { color: var(--color-text); }
.ghost:hover { background: var(--color-surface-muted); text-decoration: none; }
.primary { background: var(--color-primary); color: var(--color-primary-fg); }
.primary:hover { background: var(--color-primary-hover); text-decoration: none; }
.ghost:active, .primary:active, .chip:active { transform: scale(var(--press-scale)); }

main { padding-bottom: var(--space-16); }

/* The sky: the page's one picture, edge to edge, on the page and not in a card */
.sky {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  min-height: min(82svh, calc(var(--space-24) * 8));
  background: var(--meadow-gradient-sky);
  color: var(--meadow-on-sky);
  text-align: center;
}
.sky-short { min-height: min(62svh, calc(var(--space-24) * 6)); }
.sky canvas.meadow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.sky-words {
  position: relative;
  width: 100%;
  max-width: calc(var(--space-24) * 8);
  padding: var(--space-20) var(--space-6) var(--space-12);
}
.sky-short .sky-words { padding-top: var(--space-16); }
.sky h1 {
  font-size: clamp(var(--text-5xl), 8.4vw, calc(var(--text-5xl) * 2));
  line-height: 1;
  letter-spacing: var(--meadow-display-tracking);
}
.sky-short h1 { font-size: clamp(var(--text-4xl), 6.4vw, calc(var(--text-5xl) * 1.6)); }
.logo { display: block; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-md); flex: none; object-fit: cover; }
.logo-blank {
  display: grid;
  place-items: center;
  background: var(--color-surface-muted);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
}
.sky .logo { width: var(--space-16); height: var(--space-16); margin: 0 auto var(--space-5); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lead { max-width: 60ch; margin: var(--space-4) auto 0; font-size: var(--text-lg); text-wrap: balance; }

/* The one field, sitting on the sky */
.find-wrap { position: relative; max-width: calc(var(--space-24) * 6.5); margin: var(--space-8) auto 0; color: var(--color-text-muted); }
.find-icon { position: absolute; left: var(--space-5); top: 50%; width: var(--icon-size); height: var(--icon-size); transform: translateY(-50%); pointer-events: none; }
.find {
  display: block;
  width: 100%;
  height: calc(var(--control-height-lg) + var(--space-3));
  padding: 0 var(--space-5) 0 var(--space-12);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-lg);
}
.find::placeholder { color: var(--color-text-muted); }
.find::-webkit-search-cancel-button { display: none; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-4); }
.chip {
  display: inline-flex;
  align-items: center;
  height: var(--control-height-md);
  padding-inline: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-full);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background-color var(--duration-fast) var(--ease-exit), transform var(--duration-fast) var(--ease-standard);
}
.chip:hover { background: var(--color-surface-muted); text-decoration: none; }

/* A part of a page, under a big heading */
.part { max-width: var(--container-max); margin-inline: auto; padding: var(--space-24) var(--page-margin) 0; scroll-margin-top: var(--space-4); }
.part > h2 {
  font-size: clamp(var(--text-3xl), 4.6vw, var(--text-5xl));
  line-height: 1.08;
  margin-bottom: var(--space-12);
}

/* The guides: one of a grid of like things to pick */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.tiles li { display: grid; }
.tile {
  display: block;
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: var(--color-text);
  transition: border-color var(--duration-fast) var(--ease-exit), transform var(--duration-base) var(--ease-standard);
}
.tile:hover { border-color: var(--color-border-strong); transform: translateY(calc(var(--space-1) * -1)); text-decoration: none; }
.tile h3 { margin-top: var(--space-6); font-size: var(--text-xl); line-height: 1.36; }
.tile p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }

/* The tips */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12) var(--space-10); }
.tip { padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); }
.tip h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xl); line-height: 1.36; }
.tip p { margin-top: var(--space-2); color: var(--color-text-muted); }
.try {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background-color var(--duration-fast) var(--ease-exit);
}
.try:hover { background: var(--color-brand-subtle); text-decoration: none; }
.try strong { color: var(--color-brand-text); }
.try::after { content: " →"; color: var(--color-text-muted); }
.more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-sm); }
.more::after { content: " →"; }
.keys { display: inline-flex; gap: var(--space-1); }
kbd {
  display: inline-flex;
  align-items: center;
  height: var(--space-6);
  padding-inline: var(--space-1_5);
  background: var(--color-surface-muted);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: normal;
  color: var(--color-text-muted);
}

/* A guide's steps, one card each, a number in a circle */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps li {
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.n {
  display: grid;
  place-items: center;
  width: var(--space-10);
  height: var(--space-10);
  border-radius: var(--radius-full);
  background: var(--color-brand-subtle);
  color: var(--color-brand-text);
  font-weight: var(--font-weight-strong);
  font-variant-numeric: tabular-nums;
}
.steps h3 { margin-top: var(--space-5); font-size: var(--text-xl); line-height: 1.36; }
.steps p { margin-top: var(--space-3); color: var(--color-text-muted); }
.steps strong { color: var(--color-text); }

/* What to have first, what to expect after: columns under a line */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-10); }
.facts li { padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); color: var(--color-text-muted); }
.facts strong { color: var(--color-text); }

.go { margin-top: var(--space-10); text-align: center; }
.go-alone { margin-top: var(--space-16); }
.none { text-align: center; }
.none > h2 { margin-bottom: var(--space-8); }
.none .go { margin-top: 0; }

/* The foot: big links, the small print, his name across the whole page, and the field in his
   blue, growing up in front of the name and running to the very bottom. */
.foot { overflow: hidden; padding-top: var(--space-16); }
.foot-links { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-inline: var(--page-margin); }
.foot-links a {
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: clamp(var(--text-3xl), 4.4vw, calc(var(--text-5xl) * 1.2));
  line-height: 1.12;
  letter-spacing: var(--tracking-heading);
  font-kerning: none;
  transition: color var(--duration-fast) var(--ease-exit);
}
.foot-links a:hover { color: var(--color-brand-text); text-decoration: none; }
.foot-small {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-12);
  padding-inline: var(--page-margin);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.foot-small a { color: var(--color-text-muted); }
.foot-small a:hover { color: var(--color-text); }
.foot-word {
  margin-top: var(--space-12);
  color: var(--color-brand);
  font-family: var(--font-heading);
  font-size: 30vw;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-kerning: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.foot-field { position: relative; height: calc(var(--space-24) * 3); margin-top: -7vw; }
.foot-field canvas.meadow { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid, .facts, .steps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sky { min-height: min(78svh, calc(var(--space-24) * 7)); }
  .sky-short { min-height: min(62svh, calc(var(--space-24) * 5.5)); }
  .sky-words { padding: var(--space-16) var(--space-4) var(--space-10); }
  .part { padding-top: var(--space-16); }
  .part > h2 { margin-bottom: var(--space-8); }
  .grid, .facts, .steps, .steps-3, .tiles { grid-template-columns: minmax(0, 1fr); }
  .foot-field { height: calc(var(--space-24) * 1.75); }
}
@media (prefers-reduced-motion: reduce) {
  .ghost:active, .primary:active, .chip:active { transform: none; }
  .tile:hover { transform: none; }
}