/* Sentiyo — exploration tokens
   Two voices: the customer speaks in Instrument Serif italic, inside quotes.
   The machine answers in Archivo (width axis 62–125 does the expressive work). */

@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Instrument+Serif:ital@0;1&display=swap");

:root {
  /* colour */
  --paper: #ffffff;
  --ink: #000000;
  --signal: #ff4f00;      /* international orange — the brand */
  --heat: #ff1f6d;        /* frustration end of the sentiment scale */
  --calm: #5b2bff;        /* calm end of the sentiment scale */
  --caution: #ffd400;     /* reserved for escalation only */
  --fog: #8c8c8c;
  --hair: rgba(0, 0, 0, 0.14);

  --mood: linear-gradient(100deg, var(--calm) 0%, var(--heat) 55%, var(--signal) 80%, var(--caution) 100%);

  /* type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;

  /* scale — 1.333 (perfect fourth), body 17px */
  --t-6: clamp(4.5rem, 13vw, 13rem);
  --t-5: clamp(3rem, 7vw, 6.5rem);
  --t-4: clamp(2.2rem, 4.2vw, 3.8rem);
  --t-3: 1.777rem;
  --t-2: 1.333rem;
  --t-1: 1.0625rem;
  --t-0: 0.8125rem;

  --gutter: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-family: var(--sans); font-size: var(--t-1); line-height: 1.5; color: var(--ink); background: var(--paper); }
img, svg, canvas { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* the customer's voice */
.said { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.said::before { content: "\201C"; }
.said::after { content: "\201D"; }

/* Abloh label: literal, quoted, factual */
.tag {
  font-family: var(--sans); font-stretch: 75%; font-weight: 600;
  font-size: var(--t-0); letter-spacing: 0.04em; text-transform: uppercase;
}
.tag::before { content: "\0022"; }
.tag::after { content: "\0022"; }

/* caution tape — escalation only */
.tape {
  background: repeating-linear-gradient(-45deg, var(--caution) 0 18px, var(--ink) 18px 36px);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}