/* ============================================================
   ReWind® — Foundations: Color + Type
   A live cultural forum for Brazil's audiovisual professionals.
   Aesthetic: strictly monochrome, "xerox bold" — toner-black on
   paper-white, high contrast, photocopy grain, heavy display type.
   ============================================================ */

/* ---- Typeface ---- */
@font-face {
  font-family: "Acumin";
  src: url("./fonts/AcuminVariableConcept.otf") format("opentype");
  font-weight: 100 900;
  font-stretch: 50% 100%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     COLOR — monochrome only. No hue. Toner + paper + grey scale.
     ============================================================ */

  /* Core ink & paper */
  --rw-ink:        #0A0A0A;  /* toner black — primary foreground & fills   */
  --rw-ink-pure:   #000000;  /* absolute black — knockouts, logo, max ink  */
  --rw-paper:      #FFFFFF;  /* paper white — primary background           */
  --rw-paper-warm: #F4F2EC;  /* newsprint / photocopy paper, optional bg   */

  /* Grey scale — "toner densities", light → dark */
  --rw-grey-100: #ECECEC;  /* faint fill, hairline tints      */
  --rw-grey-200: #D6D6D6;  /* dividers on paper               */
  --rw-grey-300: #B4B4B4;  /* disabled / tertiary on paper    */
  --rw-grey-400: #8C8C8C;  /* muted text on paper             */
  --rw-grey-500: #5E5E5E;  /* secondary text on paper         */
  --rw-grey-600: #3A3A3A;  /* strong secondary / ink tint     */
  --rw-grey-700: #1F1F1F;  /* near-black panels               */

  /* Semantic foreground (on paper) */
  --rw-fg-1: var(--rw-ink);        /* primary text            */
  --rw-fg-2: var(--rw-grey-500);   /* secondary text          */
  --rw-fg-3: var(--rw-grey-400);   /* muted / captions        */
  --rw-fg-disabled: var(--rw-grey-300);

  /* Semantic foreground (on ink — inverted) */
  --rw-on-ink-1: var(--rw-paper);            /* primary on dark   */
  --rw-on-ink-2: rgba(255,255,255,0.66);     /* secondary on dark */
  --rw-on-ink-3: rgba(255,255,255,0.40);     /* muted on dark     */

  /* Surfaces */
  --rw-bg:        var(--rw-paper);
  --rw-bg-warm:   var(--rw-paper-warm);
  --rw-bg-invert: var(--rw-ink-pure);       /* true-black deck/dark canvas */
  --rw-surface:   var(--rw-paper);
  --rw-line:      var(--rw-ink);            /* structural rules are pure ink */
  --rw-line-soft: var(--rw-grey-200);

  /* Dark-mode surfaces — the brand lives mostly on true black.
     Cards sit just barely above the canvas with a hairline border. */
  --rw-canvas-dark:    #000000;  /* page background on dark         */
  --rw-surface-dark:   #0E0E0E;  /* card / panel on dark            */
  --rw-surface-dark-2: #161616;  /* nested / hover panel            */
  --rw-line-dark:      #2A2A2A;  /* hairline border on dark         */
  --rw-tab:            #FFFFFF;  /* the white top-tab on dark cards */

  /* ============================================================
     TYPE — Acumin Variable across the full weight range.
     Display is set heavy + UPPERCASE; body is regular sentence case.
     ============================================================ */
  --rw-font: "Acumin", "Helvetica Neue", Arial, sans-serif;

  /* Weight axis (variable) */
  --rw-w-thin:     200; /* @kind font */
  --rw-w-light:    300; /* @kind font */
  --rw-w-regular:  400; /* @kind font */
  --rw-w-medium:   500; /* @kind font */
  --rw-w-semibold: 600; /* @kind font */
  --rw-w-bold:     700; /* @kind font */
  --rw-w-black:    800; /* @kind font */
  --rw-w-heavy:    900; /* @kind font */

  /* Type scale (px) — editorial, large display steps */
  --rw-size-mega:   112px;  /* poster / hero headline   */
  --rw-size-xxl:    72px;   /* page title               */
  --rw-size-xl:     48px;   /* section header           */
  --rw-size-lg:     32px;   /* sub-header               */
  --rw-size-md:     24px;   /* large body / lead        */
  --rw-size-body:   18px;   /* body                     */
  --rw-size-sm:     15px;   /* small body / meta        */
  --rw-size-xs:     12px;   /* labels / kicker / caption*/

  /* Line heights */
  --rw-lh-tight:  0.92; /* @kind font */
  --rw-lh-snug:   1.05; /* @kind font */
  --rw-lh-head:   1.12; /* @kind font */
  --rw-lh-body:   1.5; /* @kind font */

  /* Tracking */
  --rw-track-mega:  -0.03em; /* @kind font */ /* tight display */
  --rw-track-head:  -0.01em; /* @kind font */
  --rw-track-body:   0em; /* @kind font */
  --rw-track-label:  0.18em; /* @kind font */ /* wide caps labels */

  /* Width axis (variable) — display type is CONDENSED */
  --rw-wdth-cond:    75; /* @kind font */ /* signature condensed display */
  --rw-wdth-xcond:   62; /* @kind font */ /* extra-condensed, big posters */
  --rw-wdth-normal:  100; /* @kind font */ /* logo & UI */

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --rw-space-1: 4px;
  --rw-space-2: 8px;
  --rw-space-3: 12px;
  --rw-space-4: 16px;
  --rw-space-5: 24px;
  --rw-space-6: 32px;
  --rw-space-7: 48px;
  --rw-space-8: 64px;
  --rw-space-9: 96px;
  --rw-space-10: 128px;

  /* ============================================================
     RADII — near-zero. The brand is hard-edged / photocopied.
     ============================================================ */
  --rw-radius-0: 0px;       /* default — everything is square */
  --rw-radius-1: 2px;       /* rare, inputs only              */
  --rw-radius-pill: 999px;  /* only for tags/avatars if ever  */

  /* ============================================================
     BORDERS — heavy ink rules are a signature.
     ============================================================ */
  --rw-border-hair: 1px solid var(--rw-line);
  --rw-border:      2px solid var(--rw-line);
  --rw-border-bold: 4px solid var(--rw-line);
  --rw-border-mega: 8px solid var(--rw-line);

  /* Shadows: the brand is FLAT. No soft drop shadows.
     The only "elevation" is a hard offset block (xerox stack). */
  --rw-shadow-hard: 6px 6px 0 var(--rw-ink);
  --rw-shadow-hard-sm: 3px 3px 0 var(--rw-ink);

  /* Motion */
  --rw-ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --rw-dur-fast: 120ms; /* @kind other */
  --rw-dur: 200ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use these classes (or copy the rules) to typeset content.
   ============================================================ */

.rw-mega {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-heavy);
  font-size: var(--rw-size-mega);
  line-height: var(--rw-lh-tight);
  letter-spacing: var(--rw-track-mega);
  text-transform: uppercase;
  color: var(--rw-fg-1);
}
.rw-h1 {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-black);
  font-size: var(--rw-size-xxl);
  line-height: var(--rw-lh-snug);
  letter-spacing: var(--rw-track-head);
  text-transform: uppercase;
  color: var(--rw-fg-1);
}
.rw-h2 {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-bold);
  font-size: var(--rw-size-xl);
  line-height: var(--rw-lh-head);
  letter-spacing: var(--rw-track-head);
  text-transform: uppercase;
  color: var(--rw-fg-1);
}
.rw-h3 {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-bold);
  font-size: var(--rw-size-lg);
  line-height: var(--rw-lh-head);
  letter-spacing: var(--rw-track-head);
  color: var(--rw-fg-1);
}
.rw-lead {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-regular);
  font-size: var(--rw-size-md);
  line-height: 1.35;
  color: var(--rw-fg-1);
}
.rw-body {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-regular);
  font-size: var(--rw-size-body);
  line-height: var(--rw-lh-body);
  color: var(--rw-fg-1);
}
.rw-small {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-regular);
  font-size: var(--rw-size-sm);
  line-height: 1.45;
  color: var(--rw-fg-2);
}
/* Kicker / label / meta — wide uppercase, the connective tissue */
.rw-label {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-semibold);
  font-size: var(--rw-size-xs);
  line-height: 1;
  letter-spacing: var(--rw-track-label);
  text-transform: uppercase;
  color: var(--rw-fg-1);
}

/* ============================================================
   SIGNATURE DISPLAY — condensed, heavy, UPPERCASE, JUSTIFIED.
   This is the loudest brand voice: text fills the frame edge to
   edge, set in Acumin Condensed Black. Used for posters, hero
   statements, manifesto blocks. Always uppercase.
   ============================================================ */
.rw-display {
  font-family: var(--rw-font);
  font-weight: var(--rw-w-black);
  font-variation-settings: "wght" 800, "wdth" 75;
  font-size: var(--rw-size-xxl);
  line-height: 0.98;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: currentColor;
}
/* Justified manifesto block — words stretch to both margins */
.rw-justify {
  text-align: justify;
  text-align-last: justify;
  hyphens: none;
}
/* Extra-condensed for the very biggest poster type */
.rw-display-x { font-variation-settings: "wght" 800, "wdth" 62; }

/* ============================================================
   BRAND MOTIFS
   ============================================================ */

/* (1) HIGHLIGHT BOX — a hairline/solid outline around a keyword,
   often inside a justified line. Inverts on solid variant. */
.rw-box {
  box-shadow: inset 0 0 0 2px currentColor;
  padding: 0.04em 0.28em 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.rw-box-solid {
  background: currentColor;
  padding: 0.04em 0.28em 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.rw-box-solid > * { color: var(--rw-ink); } /* invert child text */

/* (2) UNDERLINE ACCENT — a heavy hand-struck underline under a
   single word. Sits slightly below the baseline. */
.rw-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.09em;
  padding-bottom: 0.06em;
}

/* (3) ANNOTATION TAG — small numbered chip used as a diagram
   callout, usually with a hairline leader line. */
.rw-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rw-font);
  font-weight: var(--rw-w-semibold);
  font-size: 11px;
  letter-spacing: 0.06em;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  background: var(--rw-paper);
  color: var(--rw-ink);
}
.rw-leader { /* a 1px hairline; rotate/scale inline where used */
  background: var(--rw-paper);
  height: 1px;
}

/* ============================================================
   XEROX TEXTURE — the photocopy grain that defines the brand.
   Layer .rw-grain over any block as a pseudo-element, or apply
   the filter utilities. Keep it subtle; it should read as toner.
   ============================================================ */
.rw-grain { position: relative; }
.rw-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.10;
}
/* Stronger grain for inverted (ink) blocks — toner mottle */
.rw-grain-invert::after { mix-blend-mode: screen; opacity: 0.09; }

/* (4) THRESHOLD IMAGERY — all brand photography is high-contrast
   black-&-white, posterized to near pure b/w, with toner grain.
   Apply .rw-threshold to an <img> (or a wrapper's img). Tune with
   --rw-th-contrast / --rw-th-bright per image. Always pair with a
   .rw-grain overlay on the container for the photocopy finish. */
.rw-threshold {
  filter:
    grayscale(1)
    brightness(var(--rw-th-bright, 1.15))
    contrast(var(--rw-th-contrast, 2.6));
  -webkit-filter:
    grayscale(1)
    brightness(var(--rw-th-bright, 1.15))
    contrast(var(--rw-th-contrast, 2.6));
}
/* Harder, near-1-bit threshold for cutouts/fragments */
.rw-threshold-hard {
  filter: grayscale(1) brightness(1.1) contrast(6);
  -webkit-filter: grayscale(1) brightness(1.1) contrast(6);
}

/* ============================================================
   SIGNATURE COMPONENT — TAB CARD
   A dark panel on a black canvas with a solid white tab clipped
   to its top edge. Holds a number, title, an italic category, a
   hairline divider, then body copy. The core building block of
   ReWind's decks, lineups and newsletter sections.
   ============================================================ */
.rw-tabcard {
  position: relative;
  background: var(--rw-surface-dark);
  border: 1px solid var(--rw-line-dark);
  padding: 28px 24px 32px;
  margin-top: 8px;           /* room for the protruding tab */
}
.rw-tabcard::before {        /* the white top-tab */
  content: "";
  position: absolute;
  top: -8px; left: -1px; right: -1px;
  height: 8px;
  background: var(--rw-tab);
}
.rw-tabcard__num {
  font-family: var(--rw-font);
  font-variation-settings: "wght" 700, "wdth" 75;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--rw-grey-500);
}
.rw-tabcard__title {
  font-family: var(--rw-font);
  font-variation-settings: "wght" 800, "wdth" 75;
  font-size: 28px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--rw-paper);
  margin: 18px 0 0;
}
/* Italic category label — the only place italics appear */
.rw-cat {
  font-family: var(--rw-font);
  font-style: italic;
  font-variation-settings: "wght" 600, "wdth" 75;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--rw-grey-400);
  margin-top: 12px;
}
.rw-tabcard__divider {
  height: 1px;
  background: var(--rw-line-dark);
  margin: 18px 0;
}
.rw-tabcard__body {
  font-family: var(--rw-font);
  font-variation-settings: "wght" 500, "wdth" 75;
  font-size: 15px;
  line-height: 1.32;
  text-transform: uppercase;
  color: var(--rw-on-ink-1);
}