/*
 * File: assets/css/base.css, the reset, type and band grounds of the Mammoth theme.
 * Purpose: sets the document defaults, the Bangers display type and the Rubik text type, the container, the 4 band
 * grounds with the text tokens each one sets, and the torn paper edge every band draws over the band before it.
 * Defines: nothing; rules for the elements, .container, .band, .ground-*, .surface-panel and the shared text classes
 * Doc: docs/notes/mammothcomics.com/assets/themes/mammoth/assets/css/base.css.md
 */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--s-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-3);
  font-weight: 400;
  line-height: var(--lh-body);
  overflow-x: clip;
}

img,
svg,
video,
iframe { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

p,
ul,
ol,
dl,
figure,
blockquote { margin: 0; }

ul[class],
ol[class] { padding: 0; list-style: none; }

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

h4 {
  margin: 0;
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: var(--lh-tight);
}

a {
  color: var(--text);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 3px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

address { font-style: normal; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -120px;
  left: var(--s-4);
  z-index: var(--layer-toast);
  padding: var(--s-3) var(--s-4);
  background: var(--inverse-bg);
  color: var(--inverse-text);
  border-radius: var(--r-sm);
  font-weight: 700;
}

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

.site-main:focus { outline: none; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container-narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

/* Grounds: each sets its fill, the text tokens read inside it and the fill its torn edge draws with. */
.ground-paper {
  --ground-fill: var(--color-ground-paper);
  background: var(--ground-fill);
  color: var(--text);
}

.ground-newsprint {
  --ground-fill: var(--color-ground-newsprint);
  background: var(--ground-fill);
  color: var(--text);
}

.ground-red {
  --ground-fill: var(--color-ground-red);
  --text: var(--color-text-on-ground);
  --text-2: var(--color-text-muted-red);
  --text-3: var(--color-text-muted-red);
  --focus: var(--color-text-on-ground);
  background: var(--ground-fill);
  color: var(--text);
}

.ground-ink {
  --ground-fill: var(--color-ground-ink);
  --text: var(--color-text-on-ground);
  --text-2: var(--color-text-muted-ink);
  --text-3: var(--color-text-muted-ink);
  --focus: var(--color-text-on-ground);
  background: var(--ground-fill);
  color: var(--text);
}

/* A panel inside a red or ink band takes the page text back. */
.surface-panel {
  --text: var(--text-panel);
  --text-2: var(--text-2-panel);
  --text-3: var(--text-3-panel);
  --focus: var(--text-panel);
  background: var(--panel);
  color: var(--text);
}

/* Display type on the red and ink grounds: white over a 2px ink stroke with a 3px ink shadow. */
:is(.ground-red, .ground-ink) :is(h1, h2, h3, .display-type) {
  color: var(--color-text-on-ground);
  -webkit-text-stroke: 2px var(--color-ink-950);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--color-ink-950);
}

.surface-panel :is(h1, h2, h3, .display-type) {
  color: var(--text);
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Bands and the torn paper edge. The 2 layers are placed above the band top, over the foot of the band before it. */
.band {
  position: relative;
  padding-top: var(--band-padding-block);
  padding-bottom: calc(var(--band-padding-block) + var(--tear-height));
}

.band::before,
.band::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  height: var(--tear-height);
  pointer-events: none;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--tear-tile) 100%;
  mask-size: var(--tear-tile) 100%;
}

.band::before {
  background: var(--tear-shadow);
  -webkit-mask-image: var(--tear-mask-shadow);
  mask-image: var(--tear-mask-shadow);
  transform: translateY(calc(-1 * var(--tear-shadow-offset)));
}

.band::after {
  background: var(--ground-fill);
  -webkit-mask-image: var(--tear-mask);
  mask-image: var(--tear-mask);
}

/* No tear between 2 bands of 1 ground; the skyline base and the footer count as ink. */
:is(.ground-paper + .band.ground-paper, .ground-newsprint + .band.ground-newsprint, .ground-red + .band.ground-red, .ground-ink + .band.ground-ink)::before,
:is(.ground-paper + .band.ground-paper, .ground-newsprint + .band.ground-newsprint, .ground-red + .band.ground-red, .ground-ink + .band.ground-ink)::after,
:is(.site-main > .ground-ink:first-child, .site-main > template:first-child + .ground-ink)::before,
:is(.site-main > .ground-ink:first-child, .site-main > template:first-child + .ground-ink)::after,
.site-main:has(> .ground-ink:last-child) + .site-footer::before,
.site-main:has(> .ground-ink:last-child) + .site-footer::after { display: none; }

/* 2 bands of 1 ground read as 1 ground, so the second drops the top padding the tear would have needed. */
:is(.ground-paper + .band.ground-paper, .ground-newsprint + .band.ground-newsprint, .ground-red + .band.ground-red, .ground-ink + .band.ground-ink),
.site-main:has(> .ground-ink:last-child) + .site-footer { padding-top: 0; }

@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .band::before,
  .band::after { display: none; }
}

/* Shared text pieces of the bands and pages. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-3) var(--s-5);
  margin-bottom: var(--s-5);
}

.section-head-stack {
  flex-direction: column;
  align-items: flex-start;
}

.section-title { max-width: 22ch; }

.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--target-min);
  color: var(--text);
  font-weight: 700;
}

.section-link i { font-size: 0.8em; }

.section-text,
.lead {
  max-width: 62ch;
  color: var(--text-2);
  font-size: var(--fs-4);
}

.section-text { margin-bottom: var(--s-5); }
.lead + * { margin-top: var(--s-4); }

.kicker,
.kind-line {
  color: var(--text-2);
  font-size: var(--fs-1);
  font-weight: 700;
  letter-spacing: var(--tracking-tag);
  line-height: var(--lh-tight);
  text-transform: uppercase;
}

.prose {
  max-width: 68ch;
  color: var(--text);
}

.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-h3); }
.prose h3 { font-size: var(--fs-5); }
.prose ul,
.prose ol { padding-left: var(--s-5); }

.prose li + li { margin-top: var(--s-2); }

.meta-sep { color: var(--text-3); }

.note-line {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  color: var(--text-2);
  font-size: var(--fs-2);
  line-height: var(--lh-meta);
}

.note-line i { margin-top: 3px; }

.result-count {
  margin-bottom: var(--s-4);
  color: var(--text-2);
  font-size: var(--fs-2);
  font-weight: 500;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

.empty-state {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5) 0;
}

.empty-line {
  color: var(--text);
  font-size: var(--fs-4);
  font-weight: 500;
}

.empty-state .button-row { margin-top: var(--s-3); }

.empty-note {
  padding: var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: 500;
}

.split {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}

@media (min-width: 768px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}