/* =====================================================================
   Jeroen Wijne — portfolio styles
   =====================================================================
   HOW THIS FILE IS ORGANISED
     1. SPACING & TYPE CONTROLS  <- tune everything here
     2. Fonts
     3. Base / reset
     4. Header (logo, name, intro)
     5. Projects (the 3-column layout)
     6. Media (images, video, spotify embeds)
     7. Footer
     8. Responsive
   ===================================================================== */


/* =====================================================================
   1. SPACING & TYPE CONTROLS
   ---------------------------------------------------------------------
   Almost every gap on the site is driven by one of these variables.
   Change a number here and it updates everywhere consistently.
   All values are in rem (1rem = 16px) unless noted.
   ===================================================================== */
:root {
  /* ---- OUTER PAGE ---- */
  --page-padding: 2rem;       /* whitespace around the whole site            */
  --max-width: 1700px;        /* site stops getting wider past this          */

  /* ---- THE GRID ---- */
  --column-gap: 1.5rem;         /* horizontal space BETWEEN the 3 columns      */
  --project-gap: 4rem;      /* vertical space BETWEEN projects             */

  /* ---- INSIDE A COLUMN ---- */
  --media-gap: 1rem;          /* space between stacked images / embeds       */
  --text-gap: 1rem;           /* space between paragraphs / text blocks      */

  /* ---- TITLE + TAGS ---- */
  --title-gap: 0.45rem;       /* space below the black title banner          */
  --tag-gap: 0.2rem;          /* space between individual tags               */
  --tags-gap-below: 0.7rem;   /* space below the row of tags                 */

  /* ---- HEADER ---- */
  --header-gap: 1.5rem;       /* space between name / intro                  */
  --intro-gap: 2rem;          /* space below the whole intro block           */

  /* ---- TYPOGRAPHY (the "Times" feel) ----
     Times New Roman is naturally tight. These give it the airier,
     evenly-spaced look. Nudge them up for more space, down for less. */
  --font-size: 1.0625rem;     /* base body text size (~17px)                 */
  --line-height: 1.4;         /* vertical space between lines of text        */
  --letter-spacing: 0em;  /* space between letters                       */
  --word-spacing: 0em;     /* space between words                         */

  --title-size: 2rem;         /* size of the black ARIAL NARROW banners      */
  --tag-size: 1rem;           /* size of the small tag labels                */

  /* ---- LOOK ---- */
  --img-radius: 8px;          /* rounded corners on images / embeds          */
  --color-bg: #ffffff;
  --color-text: #000000;
  --color-muted: #000000;     /* description text / footer                   */
  --color-ink: #000000;       /* black banners                               */
  --color-on-ink: #ffffff;    /* text on the black banners                   */
  --color-link: #0000ee;      /* link colour                                 */

  /* ---- HEADLINE BANNERS (site title + project titles) ----
     Black box, white text, Arial Narrow. To experiment with other looks,
     change these (e.g. --headline-bg: #e6e6e6 + --headline-font: var(--font-body)). */
  --headline-bg: var(--color-ink);
  --headline-text: var(--color-on-ink);
  --headline-font: var(--font-display);

  /* ---- TYPE FAMILIES (defined once, used everywhere) ---- */
  --font-body: "TimesNewRoman", "Times New Roman", Times, serif;
  --font-display: "ArialNarrow", "Arial Narrow", Arial, sans-serif;
}


/* =====================================================================
   2. FONTS
   ===================================================================== */
@font-face {
  font-family: "TimesNewRoman";
  src: url("fonts/Times-New-Roman.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ArialNarrow";
  src: url("fonts/arialnarrow.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


/* =====================================================================
   3. BASE / RESET
   ===================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
  color: var(--color-text);
  background: var(--color-bg);
  padding: var(--page-padding);
  -webkit-font-smoothing: antialiased;
}

/* Centres the content and caps its width on very large screens */
.site {
  max-width: var(--max-width);
  margin: 0 auto;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* draw the underline continuously, including under the spaces */
  -webkit-text-decoration-skip: none;
  text-decoration-skip-ink: none;
}

img,
video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--img-radius);
}


/* =====================================================================
   4. HEADER  (logo · name · intro)
   ===================================================================== */
.site-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--header-gap);
  margin-bottom: var(--project-gap);
}

/* The black "JEROEN WIJNE" banner */
.site-title {
  font-family: var(--headline-font);
  font-weight: bold;
  font-size: var(--title-size);
  text-transform: uppercase;
  line-height: 1.15;
  color: var(--headline-text);
  background: var(--headline-bg);
  padding: 0.1rem 0.3rem;
  /* keeps the black background on every line if it ever wraps */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Intro = portrait image + bio text */
.intro {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* image | text */
  gap: var(--column-gap);
  align-items: start;
  width: 100%;
}

.intro p {
  max-width: 60ch;   /* keeps the bio comfortably readable */
}

/* space between paragraphs inside the intro / descriptions */
.intro p + p,
.project-description p + p {
  margin-top: var(--text-gap);
}


/* =====================================================================
   5. PROJECTS  (3-column layout)
   ---------------------------------------------------------------------
   Each project is a 3-column grid:
       description  |  media  |  embed
   Spacing between columns  -> --column-gap
   Spacing between projects -> --project-gap
   ===================================================================== */
.project {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--column-gap);
  align-items: start;
  margin-bottom: var(--project-gap);
}
.project:last-child {
  margin-bottom: 0;
}

.project-description {
  color: var(--color-muted);
}

/* The black ARIAL NARROW project title banner */
.project-title {
  display: inline;
  font-family: var(--headline-font);
  font-weight: bold;
  font-size: var(--title-size);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--headline-text);
  background: var(--headline-bg);
  padding: 0.1rem 0.3rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Tag row sits between the title and the description text */
.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tag-gap);
  margin-top: var(--title-gap);
  margin-bottom: var(--tags-gap-below);
}

.tag {
  font-family: var(--font-display);
  font-weight: bold;
  font-size: var(--tag-size);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--color-on-ink);
  background: var(--color-ink);
  padding: 0.05rem 0.25rem;
}

/* Media + embed columns stack their items with --media-gap between them */
.project-media,
.project-embed {
  display: flex;
  flex-direction: column;
  gap: var(--media-gap);
}


/* =====================================================================
   6. MEDIA  (video + spotify embeds)
   ===================================================================== */

/* Responsive 16:9 frame for YouTube */
.video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--img-radius);
  overflow: hidden;
}
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Self-hosted looping reel. The wrapper clips the video to rounded
   corners — Safari ignores border-radius on a bare <video>, so we round
   the wrapper, hide overflow, and force a compositing layer to make the
   clip actually apply. */
.reel {
  border-radius: var(--img-radius);
  overflow: hidden;
  transform: translateZ(0);
}
.reel video {
  display: block;
  width: 100%;
  height: auto;
}

/* Spotify player — height is set per-embed on the iframe tag itself,
   because albums / tracks / playlists need different heights */
.spotify iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--img-radius);
}


/* =====================================================================
   7. FOOTER
   ===================================================================== */
.site-footer {
  margin-top: var(--project-gap);
  color: var(--color-muted);
}


/* =====================================================================
   8. RESPONSIVE
   ---------------------------------------------------------------------
   On narrow screens we tighten the global spacing variables (so the
   whole site reflows consistently) and collapse to a single column.
   ===================================================================== */
@media (max-width: 768px) {
  :root {
    --page-padding: 1rem;
    --project-gap: 3rem;
    --column-gap: 1.5rem;
    --title-size: 1.5rem;
  }

  .intro,
  .project {
    grid-template-columns: 1fr;   /* everything stacks vertically */
  }

  .intro p {
    max-width: none;
  }
}