@import url('fonts.css');

/* ─────────────────────────────────────────────────────────────
   pawelos.com — shared stylesheet for / (EN) and /pl/ (PL).
   Both pages load this file, so the two languages cannot drift
   visually: the only difference between them should be words.
   ───────────────────────────────────────────────────────────── */

:root {
  --paper:  #FAF8F4;
  --panel:  #F4F1EA;
  --ink:    #171512;
  --body:   #2A2620;
  --muted:  #6E685E;
  --hair:   #DFD9CE;
  --accent: #9C2B32;
  --course: #CFC8BB;  /* the undrawn track and unpassed gates */
  --font: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gutter: 72px;
  --measure: 1440px;
  /* the record's race course, at the same scale as Yuki Hashimoto's site */
  --rail: 112px;      /* left lane that carries the racing line */
  --rc: 52px;         /* the line's centre within the lane */
  --swing: 16px;      /* how far the line weaves either side between gates */
  --g-sm: 42px;       /* gate width, ordinary result */
  --g-big: 60px;      /* gate width, world title */
  --drone: 40px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Grid and flex children default to min-width:auto, so a replaced element's
   intrinsic width (the photo is 1100px) can force its track wider than the
   viewport and drag the whole page sideways. Opt every track out of that. */
.hero > *, .cols > *, .gallery > *, .row > *, .hon-grid > *, .meta > * { min-width: 0; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
a:focus-visible,
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

.label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 10;
}
.skip:focus { left: 12px; top: 12px; color: var(--paper); }

/* ── header ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; min-height: 62px;
}
/* line-height:0 stops the inline image from adding a descender gap under
   the artwork, so the logo centres on the bar rather than sitting high. */
.brand { display: block; line-height: 0; }
/* The sygnet, at a footprint close to YC's 40x40 mark: 42px wide, 25px tall.
   What makes a header logo feel oversized is its width, not its height — a
   near-square mark occupies about one nav word and stops competing with the
   page. The bar is then only as tall as its contents need. */
.brand img { width: 42px; height: auto; }
/* The nav has to hold its own next to the logo, so it runs larger and tighter
   than the 11px eyebrow .label used in the body of the page. Sized so the
   logo reads as roughly twice the nav's cap height — enough for the artwork
   to lead without dwarfing the type beside it. */
.topbar .label { font-size: 13px; letter-spacing: 0.12em; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav > a { position: relative; padding: 6px 0; }
/* A hairline that grows from the left on hover — enough feedback for a
   nav this quiet, without adding colour or weight to the type. */
.nav > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms ease;
}
.nav > a:hover::after { transform: scaleX(1); }
.lang {
  display: flex; align-items: center; gap: 4px;
  padding-left: 14px; border-left: 1px solid var(--hair);
}
/* Language switch as flags, both in full colour. The current language is
   marked by a hairline under it; the other lifts slightly on hover. */
.flag-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; line-height: 0;
}
.flag {
  display: block; width: 22px; height: 14px; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(23, 21, 18, 0.14);
}
a.flag-link .flag { transition: transform 200ms ease, box-shadow 200ms ease; }
a.flag-link:hover .flag, a.flag-link:focus-visible .flag {
  transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(23, 21, 18, 0.14), 0 3px 8px rgba(23, 21, 18, 0.18);
}
.flag-link.on::after {
  content: ''; position: absolute; left: 7px; right: 7px; bottom: 6px; height: 1px; background: var(--ink);
}
.vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── hero ───────────────────────────────────────────────── */
.hero { padding-top: 56px; padding-bottom: 72px; }
.h1 {
  font-size: clamp(2.6rem, 6.6vw, 6.25rem);
  font-weight: 600;
  line-height: 0.96;
  letter-spacing: -0.04em;
  margin: 22px 0 0;
  max-width: 15ch;
  text-wrap: balance;
}

/* ── hero film ─────────────────────────────────────────────
   The onboard film opens the page, edge to edge. It is never cropped:
   it keeps its 16:9 frame, as wide as the window allows, and on a wide,
   short window it narrows (centred on the paper) so the whole frame
   fits under the header without scrolling. */
.hero-film {
  position: relative; margin: 0 auto; background: var(--ink);
  width: min(100%, calc((100vh - 63px) * 16 / 9));
  aspect-ratio: 16 / 9;
}
@supports (height: 100svh) {
  .hero-film { width: min(100%, calc((100svh - 63px) * 16 / 9)); }
}
.hero-film video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ── hero copy ─────────────────────────────────────────────
   Headline across the page under the film, then the lede and the
   facts on one line, divided by a hairline. */
.hero { padding-top: 64px; padding-bottom: 72px; }
.hero-copy {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 72px;
  align-items: end; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--hair);
}
.lede { font-size: 19px; line-height: 1.62; margin: 0; max-width: 52ch; }
.meta { display: flex; flex-wrap: wrap; gap: 44px; }
.meta div div:last-child { font-size: 16px; margin-top: 7px; }
.caption { font-size: 13.5px; color: var(--muted); line-height: 1.5; margin-top: 14px; }

/* ── honours ────────────────────────────────────────────── */
.honours { padding-top: 52px; padding-bottom: 56px; }
.hon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 26px; }
.hon { border-top: 2px solid var(--ink); padding-top: 18px; }
.hon-big {
  font-size: clamp(1.75rem, 2.9vw, 2.375rem);
  font-weight: 600; line-height: 1.05; letter-spacing: -0.03em;
}
.hon-cap { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 13px; }

/* ── the record ─────────────────────────────────────────── */
.record {
  overflow-x: clip;
  background: var(--panel);
  padding: 92px 0 100px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.sechead-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 46px; }
.sechead {
  font-size: clamp(2rem, 4.2vw, 3.375rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin: 0;
}
.row {
  display: grid;
  grid-template-columns: 128px 1fr 196px 200px;
  grid-template-areas: 'yr ev loc res';
  gap: 26px;
  align-items: start;
  padding: 28px 0;
  border-top: 1px solid var(--hair);
}
.row:last-of-type { border-bottom: 1px solid var(--hair); }
.yr  { grid-area: yr;  font-size: 30px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
.ev  { grid-area: ev;  font-size: 20px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.3; }
.note { font-size: 14.5px; line-height: 1.55; color: var(--muted); margin-top: 9px; max-width: 46ch; }
.loc { grid-area: loc; font-size: 14.5px; line-height: 1.5; color: var(--muted); padding-top: 4px; }
.res {
  grid-area: res; text-align: right;
  font-size: 25px; font-weight: 500; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.res-win { font-weight: 600; font-size: 23px; }
.res-sm  { font-size: 20px; }
.res-dash { color: var(--muted); }

/* ── medal metals ──────────────────────────────────────────
   Gold, silver and bronze results are set in their metal. Two layers are
   clipped to the type: a vertical polish (light band high, dark band low,
   like a struck medal catching overhead light) and, over it, a narrow
   glint that sweeps across every few seconds. */
.metal { color: var(--m3); }
.metal-gold   { --m1: #B98B2C; --m2: #E4C065; --m3: #8E6614; --m4: #B5862C; --glint: rgba(255, 247, 214, 0.95); }
.metal-silver { --m1: #8B929C; --m2: #C4CAD2; --m3: #575D66; --m4: #858C96; --glint: rgba(255, 255, 255, 0.9); }
.metal-bronze { --m1: #A6683A; --m2: #D59A69; --m3: #713E1B; --m4: #9E623A; --glint: rgba(255, 228, 204, 0.95); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .metal {
    background-image:
      linear-gradient(105deg, transparent 44%, var(--glint) 50%, transparent 56%),
      linear-gradient(180deg, var(--m1) 0%, var(--m2) 34%, var(--m3) 58%, var(--m4) 100%);
    background-size: 300% 100%, 100% 100%;
    background-position: 100% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: metal-shine 7s ease-in-out infinite;
  }
  /* stagger the sweeps so the column doesn't flash in unison */
  .row:nth-child(3n+1) .metal { animation-delay: -2.3s; }
  .row:nth-child(3n+2) .metal { animation-delay: -4.6s; }
  .hon:nth-child(2) .metal { animation-delay: -3.5s; }
}
@keyframes metal-shine {
  0%, 60% { background-position: 100% 0, 0 0; }
  85%, 100% { background-position: 0% 0, 0 0; }
}
.res.metal { font-weight: 600; }

/* The record is a race course: one line in the accent colour runs down the
   left lane through a gate at every result, 2016 at the start and the 2024
   world title at the finish, drawn as you scroll.
   site.js builds the line, gates and drone; without it the rows read as before. */
.course { position: relative; padding-left: var(--rail); }
.course-line {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.course-line path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.course-line .track { stroke: var(--course); stroke-width: 2; stroke-dasharray: 2 7; }
.course-line .run { stroke: #E10600; stroke-width: 3; opacity: 0.16; }
.course-line .heat { stroke-width: 13; opacity: 0.6; }
.course-line .heat-core { stroke-width: 4; }
/* Gates are a real gate photograph; the line threads the centre of its
   opening, 61% down the picture. Unpassed gates are greyed out and light up
   as the drone flies through. */
.gate {
  position: absolute; left: 0; top: 0; z-index: 1; height: auto;
  width: var(--g-sm); pointer-events: none;
  opacity: 0.38; filter: grayscale(1);
  transition: opacity 350ms ease, filter 350ms ease;
}
.gate.big { width: var(--g-big); }
.gate.hit { opacity: 1; filter: none; }
.drone {
  position: absolute; left: 0; top: 0; z-index: 2; height: auto;
  width: var(--drone); pointer-events: none; will-change: transform;
  filter: drop-shadow(0 10px 8px rgba(23, 21, 18, 0.22));
  opacity: 0; transition: opacity 400ms ease;
}
.drone.on { opacity: 1; }

/* ── story ──────────────────────────────────────────────── */
.story { padding-top: 92px; padding-bottom: 88px; }
.pull {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  font-weight: 500; line-height: 1.3; letter-spacing: -0.025em;
  margin: 44px 0 52px; max-width: 24ch;
}
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.cols p { font-size: 16.5px; line-height: 1.75; color: var(--body); margin: 0 0 20px; }
.cols p:last-child { margin-bottom: 0; }

/* ── gallery ────────────────────────────────────────────── */
.gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.gallery > * { grid-column: span 6; }
.g-7 { grid-column: span 7 !important; }
.g-5 { grid-column: span 5 !important; }
.ph {
  display: flex; align-items: center; justify-content: center;
  background: #F1EDE5; border: 1px solid var(--hair); color: var(--muted);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; padding: 24px;
  min-height: 340px;
}
.ph.tall { min-height: 440px; }
.shot { margin: 0; }
.shot img { width: 100%; height: 340px; object-fit: cover; object-position: 50% 28%; }
.shot.tall img { height: 474px; object-position: 50% 55%; }
.shot.wide { grid-column: span 12; }
.shot.wide img { height: 560px; object-position: 50% 45%; }
.shot .credit { display: block; font-size: 12px; margin-top: 4px; color: var(--muted); }
.shot .credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair); }
.shot .credit a:hover { color: var(--accent); text-decoration-color: currentColor; }
.gallery-note { font-size: 13px; color: var(--muted); margin-top: 16px; line-height: 1.5; }

/* ── sources ────────────────────────────────────────────── */
.sources { border-top: 1px solid var(--hair); background: var(--panel); }
.sources .wrap { padding-top: 56px; padding-bottom: 56px; }
.source-list { display: flex; flex-wrap: wrap; gap: 14px 46px; font-size: 17px; margin-top: 30px; }

/* ── contact ────────────────────────────────────────────── */
.contact { border-top: 1px solid var(--hair); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 72px;
  padding-top: 92px; padding-bottom: 96px; align-items: start;
}
.contact-intro p { font-size: 17px; line-height: 1.65; color: var(--body); margin: 22px 0 0; max-width: 34ch; }
.contact-intro .contact-direct { font-size: 15px; color: var(--muted); margin-top: 18px; }
.contact-intro .contact-direct a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hair); }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 28px; }
.contact-form .field { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.contact-form .field-wide { grid-column: 1 / -1; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea {
  font: inherit; font-size: 17px; color: var(--ink); width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0; padding: 8px 0 10px; outline: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.contact-form textarea { resize: vertical; min-height: 150px; line-height: 1.6; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--accent); box-shadow: 0 1px 0 0 var(--accent); }
.contact-form .field.bad input, .contact-form .field.bad textarea { border-bottom-color: #B3261E; }
.form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 4px; }
.send {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 0; padding: 16px 26px; min-height: 48px; cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}
.send:hover { background: var(--accent); }
.send:active { transform: translateY(1px); }
.send[disabled] { opacity: 0.6; cursor: progress; }
.form-note { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.form-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.form-status { grid-column: 1 / -1; margin: 0; font-size: 15px; line-height: 1.5; min-height: 1.5em; }
.form-status.ok { color: #1E6B3A; }
.form-status.err { color: #B3261E; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── footer ─────────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); }
.foot .wrap {
  padding-top: 56px; padding-bottom: 56px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 48px; flex-wrap: wrap;
}
.foot-name { font-size: 26px; font-weight: 600; line-height: 1; }
.foot-meta { font-size: 14.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.social { display: flex; gap: 6px; padding-top: 0; margin-right: -10px; }
/* platform logos in ink; each takes its own brand colour on hover */
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: var(--ink); transition: color 200ms ease, transform 200ms ease;
}
.social a:hover { transform: translateY(-1px); }
.social a[aria-label="Instagram"]:hover { color: #E4405F; }
.social a[aria-label="YouTube"]:hover { color: #FF0000; }
.social a[aria-label="Facebook"]:hover { color: #0866FF; }

/* ── legal pages ────────────────────────────────────────── */
.legal { padding-top: 72px; padding-bottom: 96px; }
.legal-body { max-width: 68ch; }
.legal .sechead { margin-bottom: 14px; }
.legal .updated { margin: 0 0 40px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.legal h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; margin: 44px 0 12px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.72; color: var(--body); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 1.2em; }
.legal li { margin-bottom: 6px; }
.legal a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--hair); }
.legal a:hover { text-decoration-color: currentColor; }
.legal .summary { background: var(--panel); border: 1px solid var(--hair); padding: 22px 24px; margin: 0 0 8px; }
.legal .summary p:last-child { margin-bottom: 0; }

/* placeholder marker — every one of these is a real gap to fill */
.todo {
  font-size: 14px; font-weight: 500; color: var(--muted);
  border-bottom: 1px dotted var(--muted); padding-bottom: 1px;
}

/* ── scroll reveal ──────────────────────────────────────── */
/* Scoped to .js so the page is fully visible if the script never runs. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity 600ms ease, transform 600ms ease; }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  :root { --gutter: 48px; }
  .hero { gap: 48px; }
  .hon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
  .row { grid-template-columns: 104px 1fr 160px 168px; gap: 20px; }
}

@media (max-width: 900px) {
  .hero { padding-top: 52px; padding-bottom: 56px; }
  .hero { padding-top: 44px; padding-bottom: 56px; }
  .hero-copy { grid-template-columns: 1fr; margin-top: 36px; }
  .meta { margin-top: 28px; }
  .cols { grid-template-columns: 1fr; gap: 0; }
  .cols > div:first-child p:last-child { margin-bottom: 20px; }
  .gallery > *, .g-7, .g-5 { grid-column: span 12 !important; }
  .ph, .ph.tall { min-height: 300px; }
  /* one column: every photo at its own shape, nothing cropped */
  .shot img, .shot.tall img, .shot.wide img { height: auto; }
  .record { padding: 64px 0 72px; }
  .story { padding-top: 64px; padding-bottom: 64px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 72px; }
}

@media (max-width: 680px) {
  :root { --gutter: 24px; --rail: 54px; --rc: 20px; --swing: 4px; --g-sm: 28px; --g-big: 38px; --drone: 24px; }
  .brand img { width: 36px; }
  .topbar { min-height: 54px; gap: 16px; }
  .topbar .label { font-size: 12px; }
  .nav { gap: 0; }
  /* Section anchors are redundant once the page is one column. Direct children
     only — the language link lives inside .lang and must survive. */
  .nav > a { display: none; }
  .lang { border-left: 0; padding-left: 0; min-height: 44px; }
  .hero { padding-top: 32px; padding-bottom: 44px; }
  .h1 { margin-top: 16px; }
  .hero-copy { margin-top: 28px; padding-top: 22px; }
  .course-line .run { stroke-width: 2.5; }
  .course-line .heat { stroke-width: 9; }
  .course-line .heat-core { stroke-width: 3; }
  .lede { font-size: 16.5px; }
  .meta { gap: 28px; }
  .honours { padding-top: 32px; padding-bottom: 36px; }
  .hon-grid { grid-template-columns: 1fr; gap: 22px; margin-top: 22px; }
  .sechead-row { margin-bottom: 24px; }
  /* the four-column table becomes a stacked card: year and result on one line */
  .row {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'yr res' 'ev ev' 'loc loc';
    gap: 0; padding: 22px 0;
  }
  .yr { font-size: 24px; }
  .res { font-size: 20px; align-self: baseline; }
  .res-win { font-size: 19px; }
  .res-sm { font-size: 16px; }
  .ev { font-size: 16.5px; margin-top: 10px; }
  .note { font-size: 13.5px; }
  .loc { font-size: 12.5px; padding-top: 4px; }
  .source-list { gap: 12px 28px; font-size: 16px; }
  .contact-form { grid-template-columns: 1fr; gap: 24px; }
  .foot .wrap { gap: 28px; }
  .social { margin-left: -10px; margin-right: 0; }
  .legal { padding-top: 44px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.in { transition: none; }
  .metal { animation: none !important; }
  * { scroll-behavior: auto !important; }
}