/* Tattoo Unicorn - Candy Brutal
   Tokens, reset, typography and the seven signature components.
   Section layouts live in sections.css. */

:root {
  --ink: #0b0b0c;
  --paper: #f3efe6;
  --paper-pure: #ffffff;
  --candy: #ff1f8f;
  --candy-deep: #c1006b;
  --grape: #7b2e9e;
  --grape-deep: #40145a;
  --sour: #22c7d6;

  --rb-1: #e8342a;
  --rb-2: #f58220;
  --rb-3: #ffd400;
  --rb-4: #00a652;
  --rb-5: #0072bc;
  --rb-6: #6c3f99;

  --font-display: "Archivo Black", Impact, sans-serif;
  --font-body: Archivo, system-ui, -apple-system, sans-serif;
  --font-marker: Caveat, "Segoe Script", cursive;
  --font-label: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;

  --t-hero: clamp(38px, 9.2vw, 164px);
  --t-section: clamp(38px, 7.6vw, 124px);
  --t-sub: clamp(20px, 2.7vw, 44px);
  --t-lead: clamp(17px, 1.55vw, 25px);
  --t-body: clamp(14px, 1.05vw, 17px);
  --t-marker: clamp(15px, 1.85vw, 32px);

  --pad: clamp(18px, 4vw, 56px);
  --pad-y: clamp(56px, 8vw, 124px);
  --gap: clamp(12px, 2vw, 28px);
  --max: 1500px;
  --read: 1180px;

  --chaos: 1;
  --grain: 0.055;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `overflow-x: hidden` turns body into a scroll container,
     which breaks `position: sticky` on the header. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
  /* without this, a CSS width plus the intrinsic height attribute squashes the
     image. More specific rules (.shot img, .brand img) still override it. */
  height: auto;
}

a {
  color: var(--candy-deep);
  text-decoration: none;
}

::selection {
  background: var(--candy);
  color: var(--ink);
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--font-label);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.skip:focus {
  left: 0;
}

/* ---------------------------------------------------------------- type --- */

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

h1 {
  font-size: var(--t-hero);
  line-height: 0.8;
  letter-spacing: -0.045em;
}
h2 {
  font-size: var(--t-section);
  line-height: 0.82;
}
h3 {
  font-size: var(--t-sub);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: 1.45;
}

.label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.7;
}

.label--wide {
  letter-spacing: 0.3em;
  font-size: 12px;
}

.mono {
  font-family: var(--font-label);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.02em;
}

.marker {
  font-family: var(--font-marker);
  font-weight: 600;
  font-size: var(--t-marker);
  line-height: 1.15;
}

/* Display treatments. Rotate through them; never two neighbours alike. */
.fill-candy {
  color: var(--candy);
  -webkit-text-stroke: clamp(1px, 0.18vw, 3px) var(--ink);
}
.outline {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.18vw, 3px) var(--ink);
}
.on-dark .fill-candy,
.on-dark .outline {
  -webkit-text-stroke-color: var(--paper);
}
.t-candy {
  color: var(--candy);
}

/* ------------------------------------------------------------ structure --- */

/* keep anchor targets clear of the sticky bar */
[id] {
  scroll-margin-top: 104px;
}

.band {
  position: relative;
  padding: var(--pad-y) var(--pad);
  overflow: hidden;
}
.band--tight {
  padding-block: clamp(44px, 6vw, 92px);
}
.wrap {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
}
.wrap--read {
  max-width: var(--read);
}
.grid12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.band--ink {
  background: var(--ink);
  color: var(--paper);
}
.band--ink::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/textures/dark.webp") center / cover;
  opacity: 0.55;
  mix-blend-mode: screen;
  pointer-events: none;
}
.band--candy {
  background: var(--candy);
  color: var(--ink);
}
.band--candy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/textures/riso-pink.webp") center / cover;
  opacity: 0.26;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.band--grape {
  background: var(--grape);
  color: var(--paper);
}

.head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 4vw, 58px);
}
.head p {
  max-width: 42ch;
}

/* -------------------------------------------------------- 5.1 sticker --- */

.sticker {
  background: var(--paper-pure);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 14px 14px 0 var(--candy);
  padding: clamp(16px, 1.6vw, 22px);
}
.sticker--grape {
  box-shadow: 14px 14px 0 var(--grape);
}
.sticker--sour {
  box-shadow: 14px 14px 0 var(--sour);
}

/* --------------------------------------------------------- 5.2 button --- */

.btn {
  display: inline-block;
  background: var(--candy);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: 13px 22px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.05vw, 16px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: transform 90ms linear, box-shadow 90ms linear;
}
.btn:hover,
.btn:focus-visible {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(5px, 5px);
}

.btn--lg {
  border-width: 4px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(16px, 1.6vw, 22px) clamp(22px, 2.4vw, 38px);
  font-size: clamp(15px, 1.5vw, 23px);
}
.btn--lg:hover,
.btn--lg:focus-visible {
  transform: translate(8px, 8px);
}

.on-dark .btn {
  border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--paper);
}
.on-dark .btn--lg {
  box-shadow: 8px 8px 0 var(--paper);
}
.on-dark .btn:hover,
.on-dark .btn:focus-visible {
  background: var(--paper);
  box-shadow: 0 0 0 var(--paper);
}

/* ---------------------------------------------------- 5.3 rainbow rule --- */

.rainbow {
  display: flex;
  height: 15px;
  margin-inline: calc(-1 * var(--pad));
}
.rainbow span {
  flex: 1;
}
.rainbow span:nth-child(1) { background: var(--rb-1); }
.rainbow span:nth-child(2) { background: var(--rb-2); }
.rainbow span:nth-child(3) { background: var(--rb-3); }
.rainbow span:nth-child(4) { background: var(--rb-4); }
.rainbow span:nth-child(5) { background: var(--rb-5); }
.rainbow span:nth-child(6) { background: var(--rb-6); }

/* -------------------------------------- 5.4/5.5/5.6 diamond, ring, dots --- */

.diamond {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.ring,
.sprinkle,
.deco {
  pointer-events: none;
  position: absolute;
}

.ring {
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: 0.13;
}
.ring::before,
.ring::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 34px;
  height: 34px;
  background: currentColor;
}
.ring::before {
  left: 0;
  transform: translate(-50%, -50%) rotate(45deg);
}
.ring::after {
  right: 0;
  transform: translate(50%, -50%) rotate(45deg);
}

.sprinkle {
  border-radius: 50%;
  background: radial-gradient(currentColor 1.7px, transparent 1.8px) 0 0 / 15px 15px;
  opacity: 0.45;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  background: radial-gradient(var(--ink) 0.7px, transparent 0.8px) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
}

/* ----------------------------------------------------- 5.7 annotations --- */

.note {
  display: inline-block;
  font-family: var(--font-marker);
  font-weight: 600;
  font-size: clamp(16px, 1.5vw, 26px);
  line-height: 1.15;
  border: 2px solid var(--ink);
  border-radius: 48% 52% 46% 54% / 56% 44% 58% 42%;
  padding: 9px 18px;
}
.note--candy {
  border: 3px solid var(--candy);
  border-radius: 50% 50% 48% 52% / 58% 42% 56% 44%;
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}
.note--plate {
  border: 0;
  border-radius: 0;
  background: var(--ink);
  color: var(--candy);
  padding: 12px 20px;
}

/* Cut-out marker sprites. Decorative only - always aria-hidden. */
.deco {
  z-index: 1;
  opacity: 0.9;
}
.deco--flat {
  position: static;
  display: block;
}

/* Real marker circle drawn round a phrase. Beats the CSS ellipse: an actual
   pen stroke has pressure and overshoot, which a border-radius cannot fake.
   The sprite is picked with a modifier class, not a custom property: a url()
   inside a custom property resolves against this stylesheet, not the page,
   so an inline `--circle: url(assets/...)` silently 404s. */
.circled {
  position: relative;
  display: inline-block;
  padding: 0.3em 1.15em 0.4em;
}
.circled::before {
  content: "";
  position: absolute;
  inset: -26% -9%;
  background: center / 100% 100% no-repeat;
  pointer-events: none;
}
.circled--1::before { background-image: url("../assets/marks/circle-01.webp"); }
.circled--2::before { background-image: url("../assets/marks/circle-02.webp"); }
.circled--3::before { background-image: url("../assets/marks/circle-03.webp"); }
.circled--4::before { background-image: url("../assets/marks/circle-04.webp"); }

/* Pink spray stroke sitting behind a word, like a highlighter. Painted as the
   element's own background so the text draws over it without any z-index games. */
.sprayed {
  display: inline-block;
  padding: 0 0.14em 0.12em;
  /* `auto` height keeps the drips in proportion; squashing it reads as a glitch */
  background: url("../assets/marks/spray-01.webp") center bottom 0.04em / 100% auto no-repeat;
}

/* Hand-drawn rule under a heading. */
.underline {
  display: block;
  width: min(100%, 230px);
  margin-top: 14px;
  opacity: 0.9;
}

/* Ink splatter used as section ground, never as a bullet. */
.splat {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
}

.spark {
  display: inline-block;
  width: clamp(15px, 1.7vw, 26px);
  vertical-align: -0.15em;
}

/* Paper stock under the light sections. Without it the flats read as vector. */
.hero::before,
.page-hero::before,
.band:not(.band--ink):not(.band--candy):not(.band--grape)::before {
  content: "";
  position: absolute;
  inset: 0;
  /* tiled, not cover: stretching one sheet over a tall section turns its
     speckle into blotches */
  background: url("../assets/textures/paper.webp") 0 0 / 820px auto repeat;
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.rot-a { transform: rotate(calc(var(--chaos) * -3deg)); }
.rot-b { transform: rotate(calc(var(--chaos) * 2.5deg)); }
.rot-c { transform: rotate(calc(var(--chaos) * -1.5deg)); }
.rot-d { transform: rotate(calc(var(--chaos) * 4deg)); }
.rot-e { transform: rotate(calc(var(--chaos) * -4.5deg)); }
.rot-f { transform: rotate(calc(var(--chaos) * 1.8deg)); }

/* ------------------------------------------------------------- figures --- */

.shot {
  border: 4px solid var(--ink);
  background: var(--ink);
  overflow: hidden;
}
.on-dark .shot,
.band--grape .shot {
  border-color: var(--paper);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sh-candy { box-shadow: 14px 14px 0 var(--candy); }
.sh-grape { box-shadow: 14px 14px 0 var(--grape); }
.sh-sour { box-shadow: 14px 14px 0 var(--sour); }
.sh-ink { box-shadow: 16px 16px 0 var(--ink); }

figure {
  margin: 0;
}
figcaption {
  display: flex;
  gap: 11px;
  align-items: center;
  margin-top: 13px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.chip {
  background: var(--candy);
  color: var(--ink);
  padding: 4px 9px;
  flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}