/*
 * =====================================================================
 *   STEPHY PAK — PORTFOLIO STYLES
 * =====================================================================
 *
 *   This one file controls how EVERY page looks (colours, fonts,
 *   sizes, spacing, hover effects).
 *
 *   CONTENTS                                   (Cmd+F to jump to one)
 *   ---------------------------------------------------------------
 *   1. FONT + COLOURS ........ the whole look lives here ✏️
 *   2. BASICS ................ makes every browser start the same
 *   3. HOMEPAGE — TOP ROW .... your name, intro, links, the eye GIF
 *   4. HOMEPAGE — SLOGAN ..... "pretty smart." + the typewriter
 *   5. HOMEPAGE — ARROW ...... the floppy disk scroll arrow
 *   6. HOMEPAGE — WORK LIST .. "Selected work", star, project titles
 *   7. HOMEPAGE — BIGGER SCREENS (tablets + laptops)
 *   8. HOMEPAGE — MOUSE HOVER EFFECTS (laptops only)
 *   9. PROJECT PAGES ......... project-1.html … project-4.html
 *  10. PEEK PAGE ............. play.html
 *  11. REDUCED MOTION ........ calmer version for people who need it
 *
 *   ✏️  = a value you might want to change
 *
 *   ---------------------------------------------------------------
 *   HOW CSS WORKS (the 30-second version)
 *   ---------------------------------------------------------------
 *   .hero-name {            ← "selector": WHICH thing to style.
 *     font-size: 3rem;      ← "property: value;" = WHAT to change.
 *   }                         A dot (.) means a class name from the HTML,
 *                             e.g. class="hero-name" in index.html.
 *
 *   Handy units:
 *     px   = pixels (fixed size)
 *     rem  = relative to normal text size (1rem ≈ 16px)
 *     em   = relative to the text size of that element
 *     vw   = % of the screen width (10vw = 10% of the width)
 *     clamp(min, ideal, max) = grows with the screen but never goes
 *                              smaller than min or bigger than max
 *
 *   @media (min-width: 768px) { … }
 *     = "only apply these rules on screens 768px wide or more"
 *       (tablets and laptops). Everything outside is the phone version.
 * =====================================================================
 */


/* =====================================================================
   1. FONT + COLOURS  ✏️
   Change these and the whole site updates.
   ===================================================================== */

/* The font: Instrument Sans from Google Fonts.
   ✏️ To try another font, swap the link below AND the name in "body" (section 2). */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wdth,wght@75..100,400..700&display=swap");
/* A small typewriter-style font for labels (the Collection numbers + ticker). */
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");

/* Colour "variables" — nicknames you can reuse anywhere as var(--name). */
:root {
  --color-ink: #0c0a24;                  /* ✏️ blue-black */
  --color-paper: #fdfdfd;                /* ✏️ near-white */
  --color-pink: #d6338a;                 /* ✏️ the comma, typing cursor, hovers, PEEK pill */

  --color-page-bg: var(--color-paper);   /* page background */
  --color-page-text: var(--color-ink);   /* text colour */
                                         /* (swap these two to flip to a dark site) */

  --font-mono: "DM Mono", ui-monospace, monospace;   /* ✏️ the label font */

  --duration-fast: 0.15s;                /* speed of quick hover effects */
  --duration-normal: 0.3s;               /* speed of normal hover effects */
}


/* =====================================================================
   2. BASICS
   Removes the browser's built-in spacing and sets the default font,
   so every page starts from a clean slate. You won't need to touch this.
   ===================================================================== */

/* Makes width/height include padding — much easier to size things. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Removes default gaps around headings, paragraphs, lists, etc. */
html,
body,
h1, h2, h3, p, ul, ol, li, figure, figcaption, dl, dt, dd {
  margin: 0;
  padding: 0;
}

/* Smooth scrolling when you click the floppy arrow. */
html {
  scroll-behavior: smooth;
}

/* The default font + colours for the whole site. */
body {
  font-family: "Instrument Sans", sans-serif;
  background: var(--color-page-bg);
  color: var(--color-page-text);
  -webkit-font-smoothing: antialiased;   /* crisper text on Macs */
}

/* Images never spill out of their box. */
img,
svg {
  max-width: 100%;
  height: auto;
}

/* No underlines on links. */
a {
  text-decoration: none;
}

/* Colour when you highlight text with your mouse. */
::selection {
  background: var(--color-pink);
  color: #ffffff;
}


/* =====================================================================
   3. HOMEPAGE — TOP ROW
   Your name, intro + contact on the left. Links + eye GIF on the right.
   (On phones everything stacks; see section 7 for the laptop layout.)
   ===================================================================== */

/* The whole homepage (the <body class="work-page"> in index.html). */
.work-page {
  background: var(--color-page-bg);
}

/* The outline you see when moving through links with the Tab key. */
.work-page a:focus {
  outline-color: var(--color-page-text);
}

/* The first screen ("hero"): stacks the top row, slogan and arrow. */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.hero-dark {
  /* ✏️ Slightly shorter than the screen (minus 7rem) so the first
     project title peeks up from the bottom. */
  min-height: calc(100vh - 7rem);
  min-height: calc(100svh - 7rem);
  justify-content: space-between;
  gap: 2.5rem;
  padding: 0.5rem clamp(1rem, 2.5vw, 2.25rem) 2.25rem;   /* ✏️ edge spacing (top is small because the floating name sits above) */
  background: var(--color-page-bg);
  color: var(--color-page-text);
}

/* Links in the hero: normal colour, pink on hover. */
.hero-dark a:link,
.hero-dark a:visited {
  color: var(--color-page-text);
}
.hero-dark a:hover,
.hero-dark a:focus-visible {
  color: var(--color-pink);
}

/* The top row (phone version: one column). */
.hero-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start;
}

/* Left side: name with the intro + contact stacked underneath. */
.hero-id {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}

/* "A designer working across print, digital and packaging." + location/email */
.hero-info-text {
  font-size: 0.8rem;   /* ✏️ size */
  line-height: 1.4;
  margin-bottom: 0;
}
.hero-info-contact {
  margin-top: 0.75rem;   /* gap between the intro and Vancouver/email */
}

/* BEHANCE · INSTAGRAM · LINKEDIN · CONTACT */
.hero-links,
.project-index-list {
  list-style: none;   /* removes the bullet points */
  margin: 0;
  padding: 0;
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;      /* ✏️ space between links */
  font-size: 0.9rem;       /* ✏️ size */
  font-weight: 400;
  letter-spacing: 0.06em;  /* a little extra space between letters */
  text-transform: uppercase;
}

/* 👁 The eye GIF that goes to the Peek page */
.play-door-item {
  position: relative;      /* lets the PEEK pill sit right under the eye */
}
.play-door {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;        /* big enough to tap with a finger */
}
.play-door-gif {
  display: block;
  width: 60px;                    /* ✏️ size of the eye */
  height: auto;
  image-rendering: pixelated;     /* keeps it crisp + low-res */
  transition: transform var(--duration-normal);
}
/* The pink "PEEK" pill */
.play-door-label {
  font-family: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border: 1.5px solid var(--color-pink);
  border-radius: 999px;           /* fully rounded ends */
  color: var(--color-pink);
  background: var(--color-page-bg);
}
/* On hover, the eye does a little hop up. */
.play-door:hover .play-door-gif,
.play-door:focus-visible .play-door-gif {
  transform: translateY(-4px);    /* ✏️ how high it hops */
}


/* =====================================================================
   4. HOMEPAGE — SLOGAN
   "pretty smart. / pretty, smart." and the typewriter effect.
   (The typing itself is the <script> at the bottom of index.html.)
   ===================================================================== */

/* Centres the slogan vertically in the space between the top row and the arrow. */
.hero-slogan-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
}

.hero-slogan {
  font-size: clamp(3.125rem, 11vw, 11rem);   /* ✏️ size */
  font-weight: 500;
  line-height: 0.98;                          /* ✏️ space between the two lines */
  letter-spacing: -0.03em;                    /* ✏️ space between letters (closer to 0 = looser) */
  margin-bottom: 0;
  color: var(--color-page-text);
}

/* Puts each line of the slogan on its own row. */
.hero-slogan-line {
  display: block;
}

/* Pushes the second line in, for the stagger (phone amount; laptop amount is in section 7). */
.hero-slogan-indent {
  padding-left: 0.6em;
}

/* The pink comma in "pretty, smart." */
.hero-comma {
  color: var(--color-pink);
}

/* --- Typewriter --- */

/* Hides the slogan for a split second before typing starts (no flash). */
.js-typing .hero-slogan:not(.is-ready) {
  visibility: hidden;
}
/* The not-yet-typed letters: invisible but still take up space, so nothing jumps around. */
.type-rest {
  visibility: hidden;
}
/* The blinking pink typing cursor */
.type-caret {
  position: relative;
}
.type-caret::after {
  content: "";
  position: absolute;
  bottom: 0.08em;
  left: 0.02em;
  width: 0.05em;                 /* ✏️ cursor thickness */
  height: 0.75em;                /* ✏️ cursor height */
  background: var(--color-pink);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}


/* =====================================================================
   5. HOMEPAGE — FLOPPY DISK ARROW
   The little pixel arrow at the bottom-left of the first screen.
   The image (scroll-arrow-sprite.png) has all 7 animation frames side
   by side, like a film strip — the animation slides through them.
   ===================================================================== */

.hero-scroll {
  align-self: flex-start;
  position: relative;
  top: 1.25rem;            /* ✏️ nudges it down, closer to "Selected work" */
  display: inline-flex;
  padding: 0.5rem;         /* bigger click area */
  margin-left: -0.5rem;    /* keeps it lined up with the left edge */
}
.hero-scroll-sprite {
  display: block;
  width: 37px;             /* one frame wide */
  height: 72px;
  background: url("../assets/branding-images/scroll-arrow-sprite.png") 0 0 / 259px 72px no-repeat;
  image-rendering: pixelated;
  animation: floppy-drop 0.7s steps(7) infinite;   /* ✏️ 0.7s = speed of one loop */
}
@keyframes floppy-drop {
  to {
    background-position: -259px 0;
  }
}


/* =====================================================================
   6. HOMEPAGE — WORK LIST
   "SELECTED WORK (4)" with the star, then the big project titles.
   On phones each cover image shows under its title.
   (On laptops the image appears on hover instead; see section 8.)
   ===================================================================== */

/* The whole work section */
.project-index {
  position: relative;      /* the hover images are placed inside this box */
  isolation: isolate;      /* lets the hover image sit behind the titles */
  padding: 1rem clamp(1rem, 2.5vw, 2.25rem) 3rem;
  color: var(--color-page-text);
}

/* "SELECTED WORK (4)" — kept small so it doesn't read as part of the slogan. */
.project-index-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.75rem;
  margin-bottom: 1.25rem;
  border-top: 1px solid var(--color-page-text);   /* the line above it */
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-page-text);
  cursor: default;
  scroll-margin-top: 4.5rem;   /* the floppy arrow stops here, just below the floating name */
}

/* ✦ The star: an outline that gently twinkles.
   On hover it spins, fills pink, and two tiny sparkles pop out. */
.star {
  flex-shrink: 0;
  overflow: visible;       /* lets the sparkles poke outside the box */
}
.star path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.star-main {
  transform-origin: 12px 10.5px;                          /* spins around its centre */
  animation: star-twinkle 2.4s ease-in-out infinite;      /* ✏️ 2.4s = twinkle speed */
  transition: fill var(--duration-normal), stroke var(--duration-normal);
}
.star-sparkle {
  fill: var(--color-pink) !important;
  stroke: none !important;
  opacity: 0;              /* hidden until hover */
  transform: scale(0.2);
  transition: opacity var(--duration-normal), transform var(--duration-normal);
}
.star-sparkle-1 { transform-origin: 20px 3.5px; }
.star-sparkle-2 { transform-origin: 19px 18px; transition-delay: 0.08s; }

.project-index-heading:hover .star-main {
  fill: var(--color-pink);
  stroke: var(--color-pink);
  animation: star-spin 0.6s ease-out;
}
.project-index-heading:hover .star-sparkle {
  opacity: 1;
  transform: scale(1);
}
@keyframes star-twinkle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.82); }
}
@keyframes star-spin {
  from { transform: rotate(0deg) scale(0.7); }
  to { transform: rotate(180deg) scale(1.1); }
}

/* Thin lines between the projects */
.project-index-item {
  border-top: 1px solid rgba(12, 10, 36, 0.2);
}
.project-index-item:last-child {
  border-bottom: 1px solid rgba(12, 10, 36, 0.2);
}

/* One row: title on the left, category on the right */
.project-index-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding: 1rem 0;         /* ✏️ space above/below each title */
  transition: opacity var(--duration-normal);
}
.project-index a:link,
.project-index a:visited {
  color: var(--color-page-text);
}

/* Big project titles (Booth Fest, Patches…) */
.project-index-title {
  font-size: clamp(2rem, 6vw, 5.5rem);   /* ✏️ size */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  transition: color var(--duration-fast);
}

/* Small category on the right (BRAND, CAMPAIGN…) */
.project-index-category {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Cover image — phone version: shows under its title. */
.project-index-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;    /* ✏️ image shape (16/9 = wide, 4/5 = tall) */
  object-fit: cover;       /* fills the shape without squishing */
}

/* Title turns pink on hover */
.project-index-link:hover .project-index-title,
.project-index-link:focus-visible .project-index-title {
  color: var(--color-pink);
}


/* =====================================================================
   7. HOMEPAGE — BIGGER SCREENS (768px wide and up: tablets + laptops)
   Changes the phone layout into the side-by-side layout.
   ===================================================================== */

@media (min-width: 768px) {

  /* Slogan moves to the right side… */
  .hero-slogan-wrapper {
    justify-content: flex-end;
  }
  /* …and its second line steps in further. */
  .hero-slogan-indent {
    padding-left: 1.1em;   /* ✏️ amount of stagger */
  }

  /* Top row: name + info on the left, links on the right. */
  .hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2.5rem;
  }
  .hero-nav {
    margin-top: -3.4rem;   /* ✏️ pulls the links up level with the floating name */
  }
  .hero-links {
    align-items: flex-start;
  }
  .play-door {
    margin-top: -1.2rem;   /* centres the eye on the row of links */
  }
  .hero-info {
    max-width: 22rem;      /* how wide the intro text can get */
  }
}


/* =====================================================================
   8. HOMEPAGE — MOUSE HOVER EFFECTS (laptops/desktops with a mouse)
   Phones can't hover, so these only switch on when there's a mouse.
   ===================================================================== */

@media (hover: hover) and (min-width: 768px) {

  /* "PEEK" pill: hidden until you hover the eye, then fades in underneath. */
  .play-door-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -0.25rem);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast), transform var(--duration-fast);
  }
  .play-door:hover .play-door-label,
  .play-door:focus-visible .play-door-label {
    opacity: 1;
    transform: translate(-50%, 0.25rem);
  }

  /* Work section fills the screen so the hover image has room. */
  .project-index {
    min-height: 100vh;
  }

  /* Cover images: hidden, centred BEHIND the titles, fade in on hover. */
  .project-index-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;                       /* behind the titles */
    width: min(70vw, 1100px);          /* ✏️ how big the hover image is */
    transform: translate(-50%, -50%);  /* centres it */
    opacity: 0;
    pointer-events: none;              /* never blocks clicks on the titles */
    transition: opacity var(--duration-normal);
  }
  .project-index-link:hover .project-index-preview,
  .project-index-link:focus-visible .project-index-preview {
    opacity: 1;
  }

  /* While you hover one title, the others fade back. */
  .project-index-list:hover .project-index-link {
    opacity: 0.35;   /* ✏️ how faded the others get (0 = invisible, 1 = normal) */
  }
  .project-index-list:hover .project-index-link:hover {
    opacity: 1;
  }
}


/* =====================================================================
   9. PROJECT PAGES  (project-1.html … project-4.html)
   Order on the page: floating name → image 1 → brief + credits →
   more images → "Next" project.
   ===================================================================== */

/* The whole project page */
.project-page {
  background: var(--color-page-bg);
  color: var(--color-page-text);
}
.project-page a:link,
.project-page a:visited {
  color: var(--color-page-text);
}
.project-page a:hover,
.project-page a:focus-visible {
  color: var(--color-pink);
}
.project-page a:focus {
  outline-color: var(--color-page-text);
}

/* Floating "Stephy Pak" in the corner — on EVERY page (homepage too).
   No background — it stays pinned as you scroll and floats over the
   images. "difference" flips its colour so it's readable on white,
   dark and light images. Clicking it goes back to the homepage. */
.project-header {
  position: sticky;          /* stays at the top while scrolling */
  top: 0;
  z-index: 10;               /* sits on top of everything */
  padding: 1.25rem clamp(1rem, 2.5vw, 2.25rem);
  background: transparent;
  pointer-events: none;      /* only the name itself is clickable */
  mix-blend-mode: difference;
}
.project-header-name {
  pointer-events: auto;
  font-size: 1.5rem;         /* ✏️ size */
  font-weight: 500;
  letter-spacing: -0.01em;
}
.project-page .project-header-name:link,
.project-page .project-header-name:visited,
.project-page .project-header-name:hover,
.work-page .project-header-name:link,
.work-page .project-header-name:visited,
.work-page .project-header-name:hover {
  color: #ffffff;            /* shows up as near-black on the white page because of "difference" */
}
.project-header-name:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Space around the project content */
.project {
  padding: 0.5rem clamp(1rem, 2.5vw, 2.25rem) 0;
}

/* Small caps labels: ROLE, CONTEXT, NEXT, captions */
.project-credit dt,
.project-next-label,
.project-figure figcaption {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Images */
.project-figure {
  margin: 0 0 1rem;          /* ✏️ 1rem = gap under each image */
}
.project-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: #ecebe8;       /* grey that shows while an image loads */
}
.project-figure figcaption {
  margin-top: 0.5rem;
}
/* Two images side by side (phones: stacked; laptops: see bottom of this section) */
.project-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Brief (left) + credits list (right) */
.project-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 0 4rem;
}
.project-brief {
  max-width: 34ch;           /* about 34 characters per line — easy to read */
  font-size: clamp(1.25rem, 2.2vw, 1.875rem);   /* ✏️ size */
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.project-credits {
  display: grid;
  gap: 0;
  align-content: start;
}
/* One credit row: label on the left (ROLE), answer on the right (Designer) */
.project-credit {
  display: grid;
  grid-template-columns: 7rem 1fr;   /* ✏️ 7rem = width of the label column */
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(12, 10, 36, 0.2);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.project-credit:last-child {
  border-bottom: 1px solid rgba(12, 10, 36, 0.2);
}

/* Bottom of the page: "← ALL WORK" and "NEXT  Patches →" */
.project-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-top: 4rem;
  padding: 2rem clamp(1rem, 2.5vw, 2.25rem) 3rem;
  border-top: 1px solid var(--color-page-text);
}
.project-back {
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-next {
  display: grid;
  justify-items: start;
  gap: 0.5rem;
}
.project-next-title {
  font-size: clamp(2rem, 6vw, 5rem);   /* ✏️ size of the next project's name */
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Project pages on bigger screens (768px and up) */
@media (min-width: 768px) {
  .project-pair {
    grid-template-columns: 1fr 1fr;      /* two images side by side */
  }
  .project-next {
    justify-items: end;                  /* "Next" sits on the right */
    text-align: right;
  }
  .project-about {
    grid-template-columns: 3fr 2fr;      /* ✏️ brief gets 3 parts, credits get 2 */
    gap: 4rem;
  }
}


/* =====================================================================
   10. PEEK PAGE  (play.html)
   About me at the top, then Collection → Feed.
   Re-uses the project page styles (floating name, credits list, footer).
   ===================================================================== */

/* Space around everything on the Peek page */
.peek {
  padding: 0.5rem clamp(1rem, 2.5vw, 2.25rem) 0;
}

/* --- ABOUT --- */

/* Phones: statement → photo → bio, stacked. (Laptop layout is at the bottom.) */
/* Everything in one narrow, centred column (statement → photo → bio) */
.peek-about {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 2.5rem;
  max-width: 40rem;          /* ✏️ how wide the centred column gets */
  margin: 0 auto;
  padding: 3rem 0 7rem;      /* ✏️ space above / below the About section */
  text-align: center;
}

/* "I always end up in cool places doing cool things." */
.peek-statement {
  max-width: 14ch;                             /* ✏️ how many letters per line (smaller = more lines) */
  font-size: clamp(2.25rem, 4.2vw, 4.25rem);   /* ✏️ size */
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

/* Your photo */
.peek-portrait {
  width: 100%;
  max-width: 15rem;          /* ✏️ how big the photo gets */
}
.peek-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;       /* ✏️ photo shape (4/5 = portrait, 1/1 = square) */
  object-fit: cover;
  background: #ecebe8;
}

/* Bio column */
.peek-bio {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  align-content: start;
}
/* "Hi, I'm Stephy…" — a bit smaller here than the project briefs */
.peek-bio .project-brief {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);   /* ✏️ size */
}
.peek-bio-text {
  max-width: 46ch;
  font-size: 0.9375rem;      /* ✏️ size of the rest of the bio */
  line-height: 1.5;
}
/* Quick facts — smaller and narrower than on project pages */
.peek-facts {
  width: 100%;
  max-width: 30rem;          /* ✏️ how wide the facts list gets */
  margin-top: 1rem;
  text-align: left;          /* rows read left to right, the list itself is centred */
}
.peek-facts .project-credit {
  grid-template-columns: 6.5rem 1fr;
  padding: 0.45rem 0;
  font-size: 0.8125rem;      /* ✏️ size */
}
.peek-facts .project-credit dt {
  font-size: 0.6875rem;
}

/* EMAIL · INSTAGRAM · LINKEDIN · RÉSUMÉ */
.peek-links {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- SECTION HEADINGS: "(01) COLLECTION   Things I keep" --- */

.peek-section {
  padding-bottom: 6rem;      /* ✏️ space between sections */
}
.peek-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding-top: 0.75rem;
  margin-bottom: 2rem;
  border-top: 1px solid var(--color-page-text);   /* same line as "Selected work" */
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.peek-heading-note {
  margin-left: auto;         /* pushes the little note to the right */
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.6;
}

/* --- COLLECTION (floating objects) --- */

/* Phones: a tidy 2-column grid */
.peek-collection {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
}
.peek-object {
  position: relative;
}
.peek-object img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--duration-normal);
}
/* The little "01." next to each object */
.peek-object-num {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%);
  z-index: 1;                /* keeps the number on top while the object moves */
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
/* "— drag them around" and "Tidy up" only make sense on laptops */
.peek-drag-hint,
.peek-tidy {
  display: none;
}

/* The list explaining each object — a looping ticker, centred */
.peek-marquee {
  display: flex;
  overflow: hidden;
  margin-top: 2.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(12, 10, 36, 0.2);
  border-bottom: 1px solid rgba(12, 10, 36, 0.2);
  /* soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.peek-legend {
  list-style: none;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;               /* ✏️ space between items */
  padding-right: 2.5rem;     /* same as the gap, so the loop is even */
  font-family: var(--font-mono);
  font-size: 0.6875rem;      /* ✏️ size */
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  animation: peek-ticker 30s linear infinite;   /* ✏️ 30s = speed (bigger = slower) */
}
/* Hovering pauses it so people can read */
.peek-marquee:hover .peek-legend {
  animation-play-state: paused;
}
@keyframes peek-ticker {
  to { transform: translateX(-100%); }
}

/* "Tidy up" sits centred under the ticker */
.peek-tidy-row {
  display: flex;
  justify-content: center;
}

/* Feed captions */
.peek-feed figcaption {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- FEED (loose photo grid) --- */

/* "columns" makes a masonry grid: images keep their own shape */
.peek-feed {
  columns: 2;                /* ✏️ phones: 2 columns */
  column-gap: 1rem;
}
.peek-feed figure {
  break-inside: avoid;       /* never splits an image between columns */
  margin-bottom: 1.25rem;
}
.peek-feed img {
  display: block;
  width: 100%;
  height: auto;
  background: #ecebe8;
  transition: opacity var(--duration-normal);
}
.peek-feed figcaption {
  margin-top: 0.4rem;
}
.peek-feed figure:hover img {
  opacity: 0.85;
}

/* --- Bigger screens (768px and up) --- */
@media (min-width: 768px) {

  .peek-about {
    gap: 3.5rem;
    padding-top: 5rem;
  }

  /* Collection: objects float at their --x / --y spots */
  .peek-collection {
    display: block;
    position: relative;
    height: clamp(32rem, 55vw, 48rem);   /* ✏️ height of the floating area */
  }
  .peek-object {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--w);
    cursor: grab;
    touch-action: none;      /* lets fingers drag on tablets */
    user-select: none;
  }

  /* Hover: a little wiggle that says "pick me up" */
  .peek-object:hover img {
    animation: peek-wiggle 0.9s ease-in-out infinite;   /* ✏️ 0.9s = wiggle speed */
  }

  /* While being dragged: lifted up with a slight tilt (no shadow —
     shadows left smeary trails behind the object in some browsers) */
  .peek-object.is-dragging {
    cursor: grabbing;
  }
  .peek-object.is-dragging img {
    animation: none;
    transform: rotate(-3deg) scale(1.08);
  }

  /* "Tidy up": objects glide back instead of jumping */
  .peek-collection.is-tidying .peek-object {
    transition: left 0.5s ease, top 0.5s ease;
  }

  .peek-drag-hint {
    display: inline;
  }
  /* The "TIDY UP ↺" button */
  .peek-tidy {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.3rem 0.8rem;
    border: 1.5px solid var(--color-page-text);
    border-radius: 999px;
    background: transparent;
    color: var(--color-page-text);
    font: inherit;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-fast), border-color var(--duration-fast);
  }
  .peek-tidy:hover,
  .peek-tidy:focus-visible {
    color: var(--color-pink);
    border-color: var(--color-pink);
  }

  .peek-feed {
    columns: 3;              /* ✏️ tablets: 3 columns */
  }
}

@media (min-width: 1200px) {
  .peek-feed {
    columns: 4;              /* ✏️ big screens: 4 columns */
  }
}

@keyframes peek-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-4deg) scale(1.03); }   /* ✏️ how far it tips */
  75% { transform: rotate(3deg) scale(1.03); }
}


/* =====================================================================
   11. REDUCED MOTION
   Some people turn on "Reduce motion" on their computer (it can help
   with dizziness or focus). For them, animations stop and hovers
   change instantly. Keep this at the very bottom of the file.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-sprite,
  .star-main,
  .peek-object img,
  .peek-legend {
    animation: none !important;
  }
  /* No ticker: show the list once, centred and wrapping */
  .peek-marquee {
    justify-content: center;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .peek-legend {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
    gap: 0.5rem 2rem;
    padding-right: 0;
  }
  .peek-legend[aria-hidden="true"] {
    display: none;
  }
  .play-door-gif,
  .play-door-label,
  .star path,
  .project-index-link,
  .project-index-title,
  .project-index-preview,
  .peek-object img,
  .peek-feed img {
    transition: none;
  }
}