/* ==========================================================================
   Como Vamos? Padel Score — "How to Use" page
   Layer order: fonts → reset/base → header → labels → steps → responsive
   ========================================================================== */

/* Fonts (self-hosted, SIL OFL 1.1) ---------------------------------------- */
@font-face {
  font-family: "Jersey 10";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jersey-10-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jersey 10";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jersey-10-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jersey 15";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jersey-15-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jersey 15";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/jersey-15-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

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

body {
  margin: 0;
  overflow-x: hidden;
  background-color: var(--bg);
  /* Static dot grid — replaced by the canvas only when JS upgrades it. */
  background-image: radial-gradient(
    circle,
    var(--dot) calc(var(--dot-size) / 2),
    transparent calc(var(--dot-size) / 2)
  );
  background-size: var(--dot-pitch) var(--dot-pitch);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 400;
}

body.dots-canvas {
  background-image: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--surface);
  color: var(--ink);
  border: var(--label-border) solid var(--line);
  padding: 8px 16px;
  font-size: var(--fs-body);
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* Canvas layer (added by js/dot-grid.js) ---------------------------------- */
#dot-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Page shell -------------------------------------------------------------- */
.page {
  position: relative;
  z-index: 1;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header ------------------------------------------------------------------ */
.header {
  position: relative;
  z-index: 1;
  height: var(--header-height);
  /* Padding (not the plate's margin) holds the plate down, so the plate
     margin cannot collapse out of the header and shift the page. */
  padding-top: var(--plate-offset-y);
}

/* The header is anchored to the viewport's left edge on every width (as in the
   desktop Penpot board), while the article column below stays centred. */
.header__inner {
  position: relative;
  padding-left: calc(var(--gutter) + var(--plate-offset-x)); /* 25px */
}

/* Pink diagonal hatch: a fixed band anchored to the left edge, not a
   full-bleed background. It stops short of the plate's right edge, so the
   plate overhangs it exactly like in the design. */
.header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: min(var(--hatch-width), calc(100% - var(--gutter)));
  height: var(--hatch-height);
  z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--brand) 0 var(--stripe-width),
    transparent var(--stripe-width) var(--stripe-period)
  );
}

.brand {
  position: relative;
  width: min(var(--plate-width), calc(100% - var(--gutter)));
  height: var(--plate-height);
  margin: 0;
  /* Design: logo starts 20px inside the plate, text 24px after the logo. */
  padding: 0 var(--plate-inset-x);
  background: var(--surface);
  border: var(--plate-border) solid var(--line);
  box-shadow: var(--plate-shadow);
  display: flex;
  align-items: center;
  gap: var(--plate-gap);
  container-type: inline-size;
}

.brand__logo {
  width: 64px;
  height: 64px;
  flex: none;
  /* The design clips the square artwork to a circle and draws a 1px ring. */
  border-radius: 50%;
  outline: 1px solid var(--ink);
  outline-offset: -1px;
}

.brand__text {
  min-width: 0;
}

.brand__name {
  margin: 0;
  font-family: var(--font-display);
  /* 48px at the 389px plate width (12.34cqw), scaling with the plate. */
  font-size: clamp(28px, 12.34cqw, var(--fs-wordmark));
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: 0;
}

.brand__tagline {
  margin: 2px 0 0;
  font-family: var(--font-sub);
  font-size: clamp(18px, 7.71cqw, var(--fs-subtitle));
  font-weight: 400;
  line-height: 1;
}

/* Content ----------------------------------------------------------------- */
.main {
  padding-top: 50px;
  padding-bottom: 96px;
}

/* Hand-drawn label boxes (design: 2px/3px black border + hard offset shadow) */
.label {
  /* flex, not inline-flex: an inline-level box would add a line box and push
     the figure below it down by ~16px. */
  display: flex;
  align-items: center;
  width: fit-content;
  height: var(--label-height);
  margin: 0;
  padding: 0 var(--label-inset);
  border: var(--label-border) solid var(--line);
  background: var(--surface);
  box-shadow: var(--label-shadow);
  transform: rotate(var(--label-rotation));
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 400;
  line-height: 1;
}

.label--wide {
  display: flex;
  justify-content: center;
  width: 100%;
  /* The wide "How to Use" bar carries a deeper shadow in the design. */
  box-shadow: var(--label-shadow-wide);
}

/* Steps ------------------------------------------------------------------- */
.step {
  margin-top: var(--step-gap);
}

.label--wide + .step {
  margin-top: var(--intro-gap);
}

.step__figure {
  margin: 0;
  display: grid;
  place-items: center;
}

.step__figure img {
  width: 400px;
  height: auto;
}

/* Keys figure: the design places the key names around the watch as separate
   text nodes. Geometry is expressed in em against the 30px key font so the
   whole group scales down on narrow screens without breaking the layout.
   Design coords (408×344 board): image 56,0 295×344; Up 21,150; Down 28,256;
   Back 337,260; Enter 342,46. */
.step__figure--keys {
  position: relative;
  width: 13.6em; /* 408 / 30 */
  height: 11.4667em; /* 344 / 30 */
  margin: 16px auto 0;
  font-size: min(30px, calc((100vw - 32px) / 13.6));
}

.step__figure--keys img {
  position: absolute;
  left: 1.8667em; /* 56 / 30 */
  top: 0;
  width: 9.8333em; /* 295 / 30 */
  height: 11.4667em;
}

.key {
  position: absolute;
  font-size: 1em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

.key--up {
  left: 0.7em;
  top: 5em;
}

.key--down {
  left: 0.9333em;
  top: 8.5333em;
}

.key--back {
  left: 11.2333em;
  top: 8.6667em;
}

.key--enter {
  left: 11.4em;
  top: 1.5333em;
}

.step__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  white-space: pre-line;
}

/* Wide screens: the desktop board keeps the 440px column, so only the
   full-bleed layers change. Widen --page-width if the design adds one. */
@media (min-width: 1024px) {
  .main {
    padding-bottom: 140px;
  }
}

/* Reduced motion is handled by js/dot-grid.js (it never starts). The static
   label rotation is a design property, not an animation, so it stays. */