/* Token defaults. A design system in design/systems/ overrides any of these.
   Nothing below this block should invent a colour or a font. */

:root {
  --ds-paper: #DDD8D4;
  --ds-paper-2: #D2CCC7;
  --ds-ink: #12100E;
  --ds-ink-2: #6B635C;
  --ds-line: #B4ACA5;
  --ds-accent: #A8443A;

  --ds-cover-bg: #16140F;
  --ds-cover-ink: #EDE8E0;
  --ds-cover-ink-2: #8C857A;
  --ds-cover-line: #453E34;
  --ds-cover-accent: #E3BDB2;
  --ds-cover-frame: rgb(255 255 255 / 0.3);

  --ds-font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --ds-font-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ds-display-weight: 500;
  --ds-display-tracking: -0.025em;
  --ds-display-case: uppercase;
  --ds-display-italic: italic;
  --ds-caps-stretch: 70%;
  --ds-caps-weight: 700;
  --ds-ui-weight: 500;
  --ds-ui-tracking: 0.18em;
  --ds-ui-case: uppercase;

  --ds-img-filter: none;
  --ds-img-filter-hover: none;
  --ds-radius: 0px;
  --ds-grain: 0.05;

  --in-pad-x: clamp(18px, 4vw, 64px);
  --in-band-y: clamp(64px, 9vw, 160px);
  --in-gap: clamp(10px, 1.4vw, 22px);
  --in-rule: 1px;
  --in-measure: 40ch;

  --in-title-size: clamp(30px, 6vw, 96px);
  --in-num-size: clamp(40px, 8vw, 132px);
  --in-end-size: clamp(46px, 8.6vw, 124px);
  --in-label-size: clamp(11px, 0.16vw + 10.4px, 13px);
  --in-body-size: clamp(15px, 1.15vw, 18px);

  --in-cover-min: 100svh;
  --in-cover-frame: clamp(10px, 1.6vw, 26px);
  --in-cover-focus: 50% 50%;
  --in-cover-title-size: clamp(52px, 12vw, 210px);
  --in-scrim-top: 0.58;
  --in-scrim-mid: 0.14;
  --in-scrim-bottom: 0.72;

  --in-carousel-visible: 3;
  --in-card-w: min(78vw, 400px);
  --in-card-ar: 3 / 4;
  --in-card-title-size: clamp(20px, 2.4vw, 38px);

  --in-strip-h: clamp(240px, 42vh, 460px);
  --in-tile-ar: 2 / 3;
  --in-column: 1080px;

  --in-show-marquee: flex;
  --in-show-marks: block;
  --in-show-captions: block;

  --in-order-cover: 1;
  --in-order-ticker: 2;
  --in-order-work: 3;
  --in-order-colophon: 4;

  --mo-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  --mo-hover: 480ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ds-paper);
  color: var(--ds-ink);
  font-family: var(--ds-font-ui);
  font-size: var(--in-body-size);
  line-height: 1.5;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: var(--ds-grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--ds-ink); color: var(--ds-paper); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ds-line); }

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

.label {
  margin: 0;
  font-size: var(--in-label-size);
  font-weight: var(--ds-ui-weight);
  letter-spacing: var(--ds-ui-tracking);
  text-transform: var(--ds-ui-case);
  color: var(--ds-ink-2);
}

.display {
  margin: 0;
  font-family: var(--ds-font-display);
  font-weight: var(--ds-display-weight);
  letter-spacing: var(--ds-display-tracking);
  text-transform: var(--ds-display-case);
  line-height: 0.9;
}

.caps {
  font-family: var(--ds-font-ui);
  font-weight: var(--ds-caps-weight);
  font-stretch: var(--ds-caps-stretch);
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 0.84;
}

.serif {
  font-family: var(--ds-font-display);
  font-style: var(--ds-display-italic);
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
}

.rule {
  height: var(--in-rule);
  background: var(--ds-line);
  border: 0;
  margin: 0;
  transform-origin: left center;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}