/* Vinicius Souza de Oliveira — site styles.
   World: a player evaluation sheet. Printed form ink on bond paper,
   ballpoint notes, red marker, and one canary carbon copy. */

:root {
  --paper: #fbfbf9;
  --paper-2: #f1f1ed;
  --ink: #15171c;
  --ink-2: #4b4f58;
  --rule: rgb(21 23 28 / 0.2);
  --canary: #f6dd3c;
  --canary-ink: #3d3300;
  --pen: #1f3fa6;
  --marker: #d42a1f;

  --f-print: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Kalam", "Comic Sans MS", cursive;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  --gutter: clamp(16px, 4vw, 40px);
  --sheet: 1200px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--ink) var(--paper-2);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-print);
  font-size: 17px;
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--canary); color: var(--ink); }
input, textarea { caret-color: var(--pen); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 3px; }

h1, h2, h3, h4 { margin: 0; line-height: 1.05; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s-3) var(--s-4);
}
.skip:focus { top: var(--s-4); }

.wrap { max-width: var(--sheet); margin: 0 auto; padding-inline: var(--gutter); }

.hand { font-family: var(--f-hand); color: var(--pen); font-weight: 400; line-height: 1.25; }

/* ─── Header ─────────────────────────────────────────────── */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 2px solid var(--ink);
}
.site-head__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-5);
  min-height: 68px;
}
.brand {
  font-weight: 800; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase;
  font-variation-settings: "wdth" 72; text-decoration: none; white-space: nowrap;
}
.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__links { display: flex; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.nav__links a:hover { text-decoration: underline; }
.nav__links a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--marker);
  text-decoration-thickness: 3px; text-underline-offset: 7px; font-weight: 700;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5);
  font: 700 15px/1 var(--f-print); letter-spacing: 0.04em; text-transform: uppercase;
  font-variation-settings: "wdth" 85;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 0;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.btn:hover { background: var(--pen); border-color: var(--pen); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn svg { width: 16px; height: 16px; flex: none; }

.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 2px solid var(--ink); border-radius: 0; color: var(--ink); cursor: pointer;
}
.menu-btn svg { width: 20px; height: 20px; margin: auto; display: block; }
.mobile-nav { display: none; border-top: 1px solid var(--rule); padding: var(--s-3) 0 var(--s-5); }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--rule);
  font-weight: 600; text-decoration: none;
}
.mobile-nav a[aria-current="page"] { color: var(--marker); }
.site-head[data-open] .mobile-nav { display: block; }

@media (max-width: 1080px) {
  .nav__links { gap: var(--s-4); }
  .nav__links a { font-size: 13px; }
}
@media (max-width: 960px) {
  .nav__links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav { gap: var(--s-2); }
  .site-head .nav > .btn { padding: 0 var(--s-3); font-size: 13px; }
}
@media (max-width: 480px) {
  .site-head__row { gap: var(--s-2); }
  .site-head .brand { font-size: 13px; letter-spacing: 0.02em; line-height: 1.15; }
  .site-head .brand span { display: block; }
}

/* ─── Form primitives ─────────────────────────────────────── */

.field-label {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); line-height: 1.3;
}

/* A grid of boxes that share hairlines, like a printed form. */
.fields {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1.5px solid var(--ink); border-left: 1.5px solid var(--ink);
}
.fields > * {
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  padding: var(--s-2) var(--s-3) var(--s-3);
  min-width: 0;
}
.fields .value {
  display: block; margin-top: var(--s-1);
  font-size: 20px; font-weight: 700; line-height: 1.2; font-variation-settings: "wdth" 85;
}
.fields .span-2 { grid-column: span 2; }
.fields .span-4 { grid-column: 1 / -1; }

/* Section bar: the black band a printed form uses to open a section. */
.bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  background: var(--ink); color: var(--paper);
  padding: var(--s-3) var(--s-4);
}
/* A short colored index tab hangs under each bar, cycling red, blue, yellow
   down the page: the only color on the printed layer. */
.bar { position: relative; }
.bar::after {
  content: ""; position: absolute; left: 0; top: 100%;
  width: var(--s-8); height: 6px; background: var(--tab, var(--marker));
}
section:nth-of-type(3n+2) .bar { --tab: var(--pen); }
section:nth-of-type(3n) .bar { --tab: var(--canary); }
.bar h2 {
  font-size: clamp(22px, 3vw, 30px); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.01em; font-variation-settings: "wdth" 70;
}

/* Marker circle / check drawn in once. */
.marked { position: relative; display: inline-block; }
.marked > svg {
  position: absolute; inset: -10px -14px; width: calc(100% + 28px); height: calc(100% + 20px);
  overflow: visible; pointer-events: none;
}
.ink-stroke {
  fill: none; stroke: var(--marker); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.ink-stroke--pen { stroke: var(--pen); stroke-width: 1.8; }

@media (prefers-reduced-motion: no-preference) {
  .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 0.9s var(--ease-out) forwards; }
  .draw--late { animation-delay: 0.5s; }
  .draw--later { animation-delay: 0.9s; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ─── Footer ─────────────────────────────────────────────── */

.site-foot { border-top: 2px solid var(--ink); padding: var(--s-6) 0; }
.site-foot__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.site-foot .brand { font-size: 18px; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-foot nav a {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--ink-2);
}
.site-foot nav a:hover { color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}