@import url("fonts.css");

/* Chrome for the standalone landing pages (currently the workshop page).
   These carry their own self-contained design under .mdm, which assumes a
   16px root, so this file deliberately does NOT scale the root with the
   viewport the way site.css does. */

:root{
  --ink: #1A191E;
  --ink-faint: #6E6A76;
  --rule: rgba(26,25,30,.14);
  --accent: #8A6C2C;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html{ font-size: 16px; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
}

img{ display: block; max-width: 100%; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: 76rem;
  margin-inline: auto;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}

.topbar__home{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.125rem;
}
.topbar__home img{ width: 2rem; height: auto; }

.topbar__nav{
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.topbar__nav a{ text-decoration: none; }
.topbar__nav a:hover{ color: var(--accent); }

.sitefoot{
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  max-width: 76rem;
  margin-inline: auto;
  padding: 2rem var(--gutter) 3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sitefoot a{ text-decoration: none; }
.sitefoot a:hover{ color: var(--accent); }

/* The page's own design paints everything inside .mdm; give the figures that
   sit outside .wrap a sane max width so full-bleed plates stay full-bleed. */
.mdm > figure{ margin: 0; }

/* Fixed-ratio plates — these replace the striped placeholder blocks the page
   shipped with. The ratios are the ones the layout was designed around, and
   the images crop from the centre, so pick frames that survive that. */
.mdm .plate{ display: block; width: 100%; }
.mdm .plate img{ width: 100%; height: 100%; object-fit: cover; }
.mdm .plate--hero{ aspect-ratio: 21 / 9; }
.mdm .plate--wide{ aspect-ratio: 16 / 7; }
.mdm .plate--lead,
.mdm .plate--square{ aspect-ratio: 1 / 1; }

/* Very narrow screens: the 21:9 opening plate becomes a letterbox slot with
   nothing readable in it, so give it more height. */
@media (max-width: 40rem){
  .mdm .plate--hero{ aspect-ratio: 3 / 2; }
  .mdm .plate--wide{ aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}