/* ------------------------------------------------------------------
   albertmajor.com
   Type, color and rhythm follow the Joss Fong reference:
   white ground, black type, Rubik 300/500, three sizes, no chrome.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/rubik-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: 'Rubik';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../assets/fonts/rubik-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #000;
  --paper: #fff;
  /* StillTabs brand, sampled from the app icon */
  --st-green: #2B4F3B;
  --st-cream: #EFECE7;
  --canvas: 980px;
  --gutter-w: 265px;
  --col-w: 450px;
  --measure-indent: 265px;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Rubik', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0 0 0.72em; }
b, strong { font-weight: 500; }
i, em { font-style: italic; }

a {
  color: inherit;                 /* links are black, underline only */
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* ---------- canvas grid: 265 | 450 | rest ---------- */

.canvas {
  display: grid;
  grid-template-columns: var(--gutter-w) var(--col-w) 1fr;
  max-width: var(--canvas);
  margin: 0 auto;
}
.col    { grid-column: 2; }
.gutter { grid-column: 1; justify-self: end; padding-right: 28px; }
#music .gutter { align-self: start; }
.gutter img { width: 190px; }
.gutter picture + picture img { margin-top: 14px; }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 28px;
  right: 32px;
  z-index: 10;
  display: flex;
  gap: 18px;
  font-size: 16px;
  mix-blend-mode: difference;     /* stays legible over photo or paper */
  color: #fff;
}
.nav a { text-decoration: none; }
.nav a[aria-current='true'] { text-decoration: underline; }

/* ---------- hero ---------- */

.hero { padding: 0; }
.hero__canvas { position: relative; }

.hero__photo { grid-column: 2; margin: 24px 0 0; }
.hero__photo img {
  width: var(--col-w);
  /* cropped into from the top so the frame is not so tall; the subject stays put */
  aspect-ratio: 1200 / 1310;
  object-fit: cover;
  object-position: 50% 100%;
}

.hero__text {
  position: absolute;
  left: 75px;
  top: 60px;
  /* 461px is the measure of the headline itself; the extra allows for the
     horizontal padding on the highlight so the first line still fits on one */
  width: 515px;
  z-index: 2;
  font-size: 28px;
  line-height: 1.5;
}
.hero__text p { margin: 0; }
.name { font-weight: 500; }

/* Each line carries its own block behind it, in the StillTabs green, so the
   photo underneath stays whole rather than being faded out.

   The blocks live in a copy of the headline that sits behind the real one with
   transparent type, so only they paint. That layer is blurred and then hard
   thresholded by #goo, which welds the two blocks into a single shape and
   rounds every corner -- including the inside of the step, which border-radius
   cannot do. The real type sits in front, unfiltered and crisp.

   z-index: -1 is what keeps the blocks behind the words: an absolutely
   positioned child would otherwise paint over its in-flow siblings. */
.hero__text { color: var(--st-cream); }

.hl-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  filter: url(#goo);
}

/* .hl sets the geometry on BOTH copies so they stay in lockstep; only the
   copy inside the layer actually paints a block. */
.hero__text .hl {
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding: 0.16em 0.5em;
}
.hl-layer .hl { background: var(--st-green); }
/* pull the second line up so the two blocks overlap by more than the corner
   radius: they merge into one shape with no notches where the corners meet */
.hero__squiggle + p { margin-top: -0.46em; }

/* the squiggle keeps its place under the name and draws over the blocks */
.hero__squiggle { position: relative; z-index: 1; margin: -6px 0 -2px 0.5em; }
.hero__squiggle svg { display: block; width: 170px; height: auto; color: var(--st-cream); }

/* ---------- sections ---------- */

.section { padding: 56px 0 0; }
.section--last { padding-bottom: 80px; }

.label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.72em;
}
.lede { margin-top: -0.5em; }

.entry { margin-bottom: 42px; }
.entry h3 {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  margin: 0 0 0.2em;
}
.meta { margin-bottom: 0.85em; }
.links { margin-bottom: 0; }

.cv p + .label { margin-top: 1.5em; }

/* award credit line: italic, indented, as in the reference */
.cv i { display: block; margin-left: 40px; }

/* contact portrait, cropped into from the top for the same reason as the hero */
#contact .gutter img {
  aspect-ratio: 1200 / 1690;
  object-fit: cover;
  object-position: 50% 100%;
}

/* team photo, sitting in the text column at its full measure */
.team { margin: 0 0 0.72em; }
.team img { width: 100%; }

/* ---------- StillTabs collage ----------
   The four App Store carousel panels plus the app icon, laid out across both
   margins of the 980px canvas as two diagonal cascades. Each panel carries its
   caption along the top, so the lower panel of a pair sits in front: an overlap
   only ever covers the bottom of the panel behind it, never a caption. */

.entry--st { position: relative; min-height: 620px; }

.st-collage {
  grid-area: 1 / 1 / 2 / 4;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.st-piece { position: absolute; margin: 0; }
.st-piece img { width: 100%; }
.st-piece:not(.st-piece--icon) img { border-radius: 10px; }

.st-piece--p1   { left: 0;      top: 24px;  width: 140px; z-index: 2; }
.st-piece--p2   { left: 100px;  top: 300px; width: 140px; z-index: 3; }
.st-piece--icon { left: 4px;    top: 352px; width: 72px;  z-index: 4; }
.st-piece--p3   { right: 100px; top: 300px; width: 140px; z-index: 3; }
.st-piece--p4   { right: 0;     top: 24px;  width: 140px; z-index: 2; }

/* ---------- music: shared video pane + track list ---------- */

.player { position: sticky; top: 96px; }
.player video {
  display: block;
  width: 170px;
  aspect-ratio: 480 / 854;
  background: #000;          /* before the poster loads */
  object-fit: cover;
}
.player__caption { margin: 8px 0 0; }

/* ---------- tracks ---------- */

.tracks { margin-top: 4px; }

.track { border-top: 1px solid #000; }
.track:last-child { border-bottom: 1px solid #000; }

.track__btn {
  display: grid;
  grid-template-columns: 122px 1fr 46px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 11px 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.track__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track[data-state='playing'] .track__title { font-weight: 500; }
.track[data-state='loading'] .track__title { font-weight: 500; }
.track__time { text-align: right; font-variant-numeric: tabular-nums; }
.track__wave { display: block; height: 26px; }
.track__wave svg { display: block; width: 100%; height: 26px; }
.track__wave rect { fill: #c9c9c9; }
.track__wave rect.on { fill: #000; }

/* ---------- responsive: the reference has no breakpoints, this does ----------
   Desktop grid needs 980px canvas + breathing room, so it starts at 1040px. */

@media (max-width: 1039px) {
  .canvas {
    display: block;
    max-width: 560px;
    padding: 0 24px;
  }
  .hero__photo { margin: 0; }
  .hero__photo img { width: 100%; }
  .hero__text {
    left: 24px;
    right: 24px;
    width: auto;
    top: 7%;
  }
  .gutter { padding: 0 0 18px; }
  .player { position: static; }
  .player video { width: 190px; }
  .gutter img { width: 150px; }
  .gutter picture { display: inline-block; margin-right: 10px; }
  .gutter picture + picture img { margin-top: 0; }
  .nav { top: 18px; right: 20px; gap: 14px; }

  /* collage becomes a 2 x 2 grid above the text, icon pinned top-left */
  .entry--st { min-height: 0; }
  .st-collage {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-top: 46px;
    margin-bottom: 22px;
  }
  .st-piece {
    position: static;
    left: auto; right: auto; top: auto;
    width: auto;
  }
  .st-piece--p1 { order: 1; }
  .st-piece--p2 { order: 2; }
  .st-piece--p3 { order: 3; }
  .st-piece--p4 { order: 4; }
  .st-piece--icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
  }
}

@media (max-width: 620px) {
  .hero__text { font-size: 22px; }
  .hero__squiggle svg { width: 132px; }
  .track__btn { grid-template-columns: 92px 1fr 42px; gap: 10px; }
  .nav { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__squiggle svg animate { display: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}