:root {
  --bg: #000;
  --fg: #fff;
  --muted: #9a9894;
  --line: #262626;
  --card: #0e0e0e;
  --todo: #ff3b30;
  --title: "Pirata One", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }

/* Phone: stacked in HTML order. Desktop: reel left, sections in the middle, profile photo hangs in the right column. */
.page { max-width: 1280px; margin: 0 auto; padding: 32px 16px 72px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; text-align: center; }
@media (min-width: 860px) {
  .page { grid-template-columns: 280px minmax(0, 1fr) 280px; column-gap: 48px; align-items: start; }
  .page > section { grid-column: 2; }
  .reel { grid-column: 1; grid-row: 1 / span 10; position: sticky; top: 32px; }
}

h1, h2 { font-family: var(--title); font-weight: 400; margin: 0; }
h1 { font-size: clamp(56px, 10vw, 96px); line-height: 1; margin-bottom: 32px; }
h2 { font-size: 40px; line-height: 1.1; margin-bottom: 16px; }
#about p { max-width: 34em; margin: 0 auto 1em; }
/* The bio on one line, scaled to fit the middle column so it never slides under the reel. Too narrow (phone) = normal wrapping. */
#about { container-type: inline-size; }
@container (min-width: 520px) {
  #about p { max-width: none; white-space: nowrap; font-size: calc(100cqi / 48); }
}

/* Thick white frame, as in Florian's sketch */
.cover { width: 240px; height: auto; margin: 0 auto 20px; border: 5px solid var(--fg); border-radius: 6px; }
.reel video { object-fit: cover; }
.reel video, .reel .todo { width: 100%; max-width: 280px; margin: 0 auto; aspect-ratio: 9 / 16; display: grid; place-items: center; border: 6px solid var(--fg); border-radius: 8px; outline: none; }

/* Icons: SVG as mask so they take the text colour */
.icon { width: 16px; height: 16px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

/* Social buttons (pill style from the NGC site) */
.services, .listen { list-style: none; padding: 0; margin: 0; }
.services { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.services a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: 13px; text-decoration: none; }

/* Listen buttons: all services on one row, icon above the name */
.listen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.listen a { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 12px; line-height: 1.3; text-decoration: none; }
.listen .icon { width: 22px; height: 22px; }

.services a:hover, .listen a:hover { border-color: var(--fg); }
/* Hover: icon takes the brand colour (--c), like on the NGC site */
.services a:hover .icon, .listen a:hover .icon { background: var(--c, currentColor); }

/* Round profile photo with a white frame. Phone: above "Find Just Jack". Desktop: right of the socials, arrow pointing at them. */
#social { position: relative; }
.profile { width: 200px; margin: 0 auto 24px; }
.avatar { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border: 6px solid var(--fg); border-radius: 50%; position: relative; z-index: 1; background: var(--bg); }
.pointer { display: none; }
@media (min-width: 860px) {
  .profile { position: absolute; left: calc(100% + 40px); bottom: 100px; margin: 0; }
  .pointer { display: block; position: absolute; right: 70%; top: 85%; width: 170px; fill: none; stroke: var(--fg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
}

/* Red placeholder: something Florian still delivers. Nothing red may remain before going live. */
.todo { outline: 1px dashed var(--todo); color: var(--todo); padding: 8px; }