/*
 * Legacy mini baseline — loaded ONLY by minis with `layout: legacy` (see
 * Components::Mini::Legacy), never globally. Ported from the old site's
 * _reset / _base / _layout essentials: the primitives the ported markup assumes
 * (reset, body, .wrapper, section, .fill). Each mini's own stylesheet layers its
 * bespoke design on top and is free to override anything here.
 *
 * Wrapped in `@layer page` so it sits above Tailwind's `base` (its reset/body win over
 * Tailwind's chrome on a legacy page) but below `utilities` (the shared header's Tailwind
 * utilities still win). Layer order is declared in app/assets/tailwind/application.css.
 */

@layer page {

:root {
  --mini-content-width: 65rem;
  --mini-spacing-unit: 2rem;
  --mini-text-color: #111;
  --mini-background-color: #fdfdfd;
  --mini-grey-light: #e8e8e8;
  --mini-base-font-size: 15px;
  --mini-base-line-height: 1.5;
}

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu,
nav, section { display: block; }

html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }

body {
  font: var(--mini-base-font-size) / var(--mini-base-line-height)
        ui-sans-serif, system-ui, Helvetica, Arial, sans-serif;
  color: var(--mini-text-color);
  background-color: var(--mini-background-color);
  font-kerning: normal;
}

h1, h2, h3, h4, h5, h6 { font-weight: 400; }

/* Vertical rhythm — the old global base gave block elements a bottom margin
   (spacing-unit * 0.5 = 1rem). Without it, paragraphs collapse together. */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre, ul, ol, dl, figure { margin-bottom: 1rem; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; vertical-align: middle; }
figure > img { display: block; }

ul, ol { margin-left: var(--mini-spacing-unit); }

:focus, a:hover, a:active { outline: 0; }

table { border-collapse: collapse; border-spacing: 0; }

/* Layout primitives */
section {
  clear: both;
  padding-top: 2.5em;
  padding-bottom: 2.5em;
  border-top: 0.5px solid var(--mini-grey-light);
  border-bottom: 0.5px solid var(--mini-grey-light);
}
section:first-of-type { border-top: none; }
section:last-of-type { border-bottom: none; }

.wrapper {
  position: relative;
  max-width: calc(var(--mini-content-width) - (var(--mini-spacing-unit) * 2));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mini-spacing-unit);
  padding-right: var(--mini-spacing-unit);
}

main section, .font-entry { overflow: hidden; }

/* Bleed an image slightly past the wrapper edges. */
.optical-edge,
.fill {
  width: 114.5%;
  max-width: 114.5%;
  margin-left: -7.25%;
}

figcaption { font-size: 0.8rem; }

/* Minimal chrome: a quiet link back to the catalog. */
.mini-home {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  font: 700 0.75rem/1 ui-monospace, monospace;
  letter-spacing: 0.15em;
  padding: 0.35em 0.6em;
  mix-blend-mode: difference;
  color: #fff;
}

} /* @layer page */