/* ============================================================
   beere.xyz — vinyl sticker, not portfolio
   Every colour below is pulled from the avatar.
   ============================================================ */

:root {
  --ink:        #0B0B16;
  --periwinkle: #7C8CF2;
  --visor:      #1E2450;
  --cyan:       #1FA5E5;
  --blush:      #FF4D9E;
  --petal:      #FFA0C4;
  --leaf:       #35C956;
  --ember:      #FF9F3C;
  --paper:      #FFFFFF;

  --font-display: 'Gabarito', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --block:  clamp(72px, 10vw, 128px);
  --max:    1120px;

  --shadow: 6px 6px 0 var(--ink);
  --shadow-lift: 8px 8px 0 var(--ink);
}

/* ---------- base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  background: var(--periwinkle);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; }
h1, h2, p, ul, figure, blockquote { margin: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- sticker chrome (the one shared class) ---------- */

.sticker {
  --lx: 0px;
  --ly: 0px;
  --tilt: 0deg;
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: translate(var(--lx), var(--ly)) rotate(var(--tilt));
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.sticker:hover {
  --lx: -2px;
  --ly: -2px;
  box-shadow: var(--shadow-lift);
}

/* label + inline chips use the same chrome at a smaller radius */
.chip {
  display: inline-block;
  border-radius: 10px;
  padding: 9px 14px 8px;
  color: var(--ink);
  background: var(--paper);
}
.chip--ember { background: var(--ember); }
.chip--petal { background: var(--petal); }
.chip--visor { background: var(--visor); color: var(--paper); }

.section__head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  margin-bottom: clamp(36px, 5vw, 56px);
}

/* ============================================================
   1 — Name
   ============================================================ */

.hero {
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: calc(var(--gutter) + 24px) var(--gutter) var(--gutter);
  background: var(--periwinkle);
}

.hero__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
}

.hero__text { min-width: 0; }

.hero__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 13vw, 168px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  margin-left: -.04em; /* optical: pull the B out to the margin */
}

.hero__meta {
  display: grid;
  gap: 6px;
  margin-top: 24px;
  color: var(--ink);
  opacity: .7;
}

.hero__avatar-wrap { justify-self: end; }

.hero__avatar {
  --tilt: -3deg;
  width: min(38vw, 400px);
  background: var(--periwinkle);
  overflow: hidden;
}
.hero__avatar img { width: 100%; aspect-ratio: 1 / 1; }

/* load sequence — one orchestrated moment, then still */
.hero__avatar-wrap { animation: pop 350ms cubic-bezier(.34, 1.56, .64, 1) both; }
.hero__text        { animation: rise 350ms ease-out 100ms both; }

@keyframes pop {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .hero { padding-top: calc(var(--gutter) + 32px); }
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero__avatar-wrap { order: -1; justify-self: start; }
  .hero__avatar { width: min(66vw, 300px); }
}

/* ============================================================
   2 — Bio
   ============================================================ */

.bio {
  background: var(--periwinkle);
  padding: clamp(40px, 6vw, 72px) var(--gutter) var(--block);
}

.bio__line {
  max-width: var(--max);
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.45;
}
.bio__line { max-width: min(24ch, var(--max)); margin-left: auto; margin-right: auto; }
@media (min-width: 721px) {
  .bio__line { margin-left: max(0px, calc((100% - var(--max)) / 2)); }
}

.bio__chip {
  display: inline-block;
  border-radius: 10px;
  padding: 0 .38em;
  margin: 0 10px 0 .08em; /* right margin clears the hard shadow so punctuation stays visible */
  line-height: 1.2;
  vertical-align: baseline;
  white-space: nowrap;
}
.bio__chip--cyan  { background: var(--cyan); }
.bio__chip--blush { background: var(--blush); }
.bio__chip--leaf  { background: var(--leaf); }

/* ============================================================
   3 — Build (marquee)
   ============================================================ */

.build {
  background: var(--paper);
  padding: var(--block) 0;
}

.marquee {
  overflow: hidden;
  padding: 12px 0 20px; /* room for tilt + shadow */
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-duration, 40s) linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-right: 28px; /* completes the gap between the two copies */
  flex-shrink: 0;
}

@keyframes marquee { to { transform: translateX(-50%); } }

.tile {
  height: 72px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}
.tile:nth-child(odd)  { --tilt: -1.5deg; }
.tile:nth-child(even) { --tilt:  1.5deg; }
.tile img { height: 36px; width: auto; }

/* ============================================================
   4 — Awards
   ============================================================ */

.awards {
  background: var(--visor);
  color: var(--paper);
  padding: var(--block) 0;
}

.awards__grid {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 32px;
}
@media (max-width: 960px) { .awards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; } }
@media (max-width: 560px) { .awards__grid { grid-template-columns: 1fr; gap: 40px; } }

.award {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--periwinkle);
  color: var(--ink);
}
.award:nth-child(odd)  { --tilt: -2deg; }
.award:nth-child(even) { --tilt:  1.5deg; }
.award:hover           { --tilt:  0deg; }

.award img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.award__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 11px 14px 10px;
  background: var(--ember);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   5 — Links
   ============================================================ */

.links {
  background: var(--cyan);
  padding: var(--block) 0;
}

.links__list {
  list-style: none;
  padding: 0 var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.row:hover {
  background: var(--blush);
  color: var(--paper);
}
.row__handle {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1;
  text-align: right;
  overflow-wrap: anywhere;
}

@media (max-width: 420px) {
  .row { padding: 18px 18px; }
  .row__handle { font-size: 18px; }
}

/* ============================================================
   6 — End
   ============================================================ */

.end {
  background: var(--petal);
  padding: calc(var(--block) * 1.2) var(--gutter);
  text-align: center;
}

.end__quote {
  max-width: 26ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1.3;
}
.end__quote p::before { content: '\201C'; }
.end__quote p::after  { content: '\201D'; }

.end__attr {
  margin-top: 22px;
  opacity: .6;
}

.end__avatar {
  --tilt: 4deg;
  width: 64px;
  height: 64px;
  margin: 48px auto 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--periwinkle);
}
.end__avatar img { width: 100%; height: 100%; }

/* ============================================================
   Reduced motion — kills the marquee and every transform
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  html { scroll-behavior: auto; }
  .marquee { overflow-x: auto; }
  .marquee__track { width: auto; }
  .marquee__group[aria-hidden="true"] { display: none; }
}