/* ==========================================================
   Amy Colin · site styles (all sections approved; other sections to come)
   An editorial page with digital marks on it: text selection,
   a text caret, a message. Physical details stay photographic
   (layered prints, a clip, a patch, a real signature).
   Design tokens first, then layout, then components.
   ========================================================== */

:root {
  /* Colour */
  --cream: #FBF6EE;
  --paper: #FFFDF8;
  --ink: #141114;
  --ink-soft: #3E3539;
  --rule: rgba(20, 17, 20, .22);
  --pink-soft: #F1D3DF;
  --pink-select: #F6B6D2;  /* iOS-style text selection, message bubble */
  --pink-bubble: #F7CCDD;  /* received-message bubble */
  --pink-hot: #CC2C77;     /* caret and selection handles only */

  /* Type */
  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Paper shadow for prints: soft and close, never offset blocks */
  --print-shadow:
    0 1px 2px rgba(40, 20, 30, .10),
    0 22px 36px -22px rgba(40, 20, 30, .42);

  /* Space */
  --gutter: clamp(20px, 5vw, 96px);
  --max: 1520px;
  --header-h: 77px; /* top bar height, used to size the first screen */

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --fast: 200ms;
}

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

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

main { overflow-x: clip; }

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

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--pink-hot);
  outline-offset: 4px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Top bar ---------- */

/* Sticky top bar, so the nav stays available while scrolling */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(251, 246, 238, .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

html { scroll-padding-top: var(--header-h); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.topbar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.wordmark {
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  line-height: 1;
}

.wordmark__first {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  margin-right: .12em;
}

.wordmark__last {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1.45rem;
  letter-spacing: -0.03em;
}

/* A static text caret */
.wordmark__caret {
  align-self: center;
  width: 2px;
  height: 1.35rem;
  margin-left: 3px;
  background: var(--pink-hot);
  border-radius: 1px;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
}

/* Uppercase labels with a hairline indicator */
.site-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: .13em; /* ignore the trailing letter-spacing */
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--fast) var(--ease);
}

.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }

.site-nav a:hover::after { background: var(--pink-hot); }

/* Language switcher: only the other language, as a small pill */
.site-nav__lang {
  display: flex;
  align-items: center;
}

.site-nav .site-nav__lang a {
  padding: 6px 10px 6px 12px; /* less on the right: trailing letter-spacing */
  border: 1px solid var(--rule);
  border-radius: 999px;
  line-height: 1;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.site-nav .site-nav__lang a::after { display: none; }

.site-nav .site-nav__lang a:hover,
.site-nav .site-nav__lang a:focus-visible {
  background: var(--pink-select);
  border-color: var(--pink-select);
}

@media (max-width: 900px) {
  .site-nav__lang { padding: 11px 0; }
}

.nav-toggle { display: none; }

/* Hero and ribbon together fill the first screen, so tall monitors don't
   leave the ribbon floating mid-page. Content is centred inside. */
.intro {
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
}

.intro .hero {
  flex: 1;
  width: 100%;
  align-content: center;
}

/* ---------- Hero grid ----------
   Two distinct columns: all text on the left, the collage on the right.
   Collage pieces overlap each other but stay inside their column. */

.hero {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(24px, 3.6vw, 56px) var(--gutter) clamp(40px, 4vw, 64px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 24px);
  align-items: center;
}

.hero__text {
  grid-column: 1 / 8;
  container-type: inline-size; /* headline sizes from this column's width */
  position: relative;
  z-index: 2;
}

.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 800;
  font-stretch: 80%;
  /* Sized from the column (cqi), so the three lines always fit it,
     whatever the screen width */
  font-size: clamp(2.4rem, 9.3cqi, 5.4rem);
  line-height: .94;
  letter-spacing: -0.035em;
}

.hero__title .line { display: block; white-space: nowrap; }

/* French: the lines are longer, so the same three lines need a slightly smaller size */
@media (min-width: 901px) {
  html[lang="fr"] .hero__title { font-size: clamp(2.1rem, 7.8cqi, 4.8rem); }
}

/* The serif italic phrase, inline with the sans so the sentence reads as one */
.hero__title .soft {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.1em;
  line-height: .92;
  letter-spacing: -0.015em;
  margin-right: .04em;
}

/* iOS text selection with handles at each end */
.hero__title .select {
  background: var(--pink-select);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}

/* Handles sit on the first and last word so they never wrap away from them */
.hero__title .select__start,
.hero__title .select__end { white-space: nowrap; }

.hero__title .select__start::before,
.hero__title .select__end::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 1.02em;
  margin: 0 -5px;
  vertical-align: -.13em;
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 4px, transparent 4.5px) center top / 10px 10px no-repeat;
}

.hero__title .select__end::after {
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 4px, transparent 4.5px) center bottom / 10px 10px no-repeat;
}

/* Positioning: the three keywords in the headline face, between hairlines */
.hero__strap {
  display: inline-block;
  margin: clamp(26px, 3vw, 38px) 0 0;
  padding: 12px 0 11px;
  border-block: 1px solid var(--rule);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  font-size: clamp(.98rem, .86rem + .4vw, 1.22rem);
  letter-spacing: .025em;
  line-height: 1.3;
}

.hero__strap span { white-space: nowrap; }

.hero__strap b {
  color: var(--pink-hot);
  font-weight: 800;
  margin: 0 .2em;
}

.hero__body {
  margin-top: clamp(20px, 2.4vw, 28px);
  max-width: 34rem;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: clamp(.98rem, .88rem + .25vw, 1.16rem);
  line-height: 1.66;
}

.hero__body p { margin: 0 0 .85em; }
.hero__body strong { color: var(--ink); font-weight: 700; }
.hero__body p:last-child { margin-bottom: 0; }

.hero__actions {
  margin-top: clamp(26px, 3vw, 36px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
}

/* ---------- CTAs ---------- */

/* Primary: the headline's selection mark, as a link.
   A partial highlight at rest; fully "selected" on hover. */
.cta-select {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 48px;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.cta-select__text {
  padding: .05em .12em;
  background: linear-gradient(var(--pink-select), var(--pink-select)) left 90% / 100% 42% no-repeat;
  transition: background-size var(--fast) var(--ease);
}

.cta-select__arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  transition: transform var(--fast) var(--ease);
}

.cta-select:hover .cta-select__text { background-size: 100% 100%; }
.cta-select:hover .cta-select__arrow { transform: translateX(5px); }

/* Secondary: a sent message */
.cta-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .62em 1.15em .66em;
  background: var(--ink);
  color: var(--cream);
  border-radius: 20px 20px 4px 20px;
  font-weight: 700;
  font-size: .98rem;
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.cta-bubble__tail {
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 20px;
  height: 20px;
  fill: var(--ink);
  transition: fill var(--fast) var(--ease);
}

.cta-bubble:hover { background: var(--pink-select); color: var(--ink); transform: translateY(-2px); }
.cta-bubble:hover .cta-bubble__tail { fill: var(--pink-select); }

/* ---------- Collage ----------
   One large portrait, framed as a quiet macOS-style window, anchors the
   column. A taped print overlaps its corner; the message and a photo
   caption are the only annotations. Positions are in % / cqi of the
   collage box, so the arrangement scales as one. */

.collage {
  grid-column: 8 / 13;
  position: relative;
  z-index: 1;
  margin: 0;
  width: 100%;
  max-width: 640px;
  justify-self: stretch;
  aspect-ratio: 1 / 1.18; /* matches the height of the text column */
  container-type: inline-size;
}

/* Main portrait in its window frame */
.portrait {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px var(--rule),
    0 34px 60px -34px rgba(40, 20, 30, .5);
}

.portrait__bar {
  flex: none;
  display: flex;
  gap: 1.4cqi;
  align-items: center;
  height: 6.5cqi;
  padding: 0 3cqi;
  border-bottom: 1px solid var(--rule);
}

.portrait__bar i {
  width: 1.9cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink-select);
}

.portrait__bar i:first-child { background: var(--pink-hot); }
.portrait__bar i:last-child { background: rgba(20, 17, 20, .18); }

.portrait img {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transform: scale(1.06);
  transform-origin: 50% 25%;
  transition: transform 600ms var(--ease);
}

.collage:hover .portrait img { transform: scale(1.09); }

/* Secondary print overlapping the portrait's lower-left corner */
.print {
  position: absolute;
  z-index: 2;
  left: 2.5%;
  top: 55%;
  width: 35%;
  padding: 2.2cqi 2.2cqi 8cqi;
  background: var(--paper);
  box-shadow: var(--print-shadow);
  transform: rotate(-5deg);
  transition: transform 280ms var(--ease);
}

.print img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
}

.collage:hover .print { transform: rotate(-6.5deg) translateY(-2%); }

/* A strip of translucent tape holding the print */
.print__tape {
  position: absolute;
  top: -3cqi;
  left: 50%;
  width: 48%;
  height: 6cqi;
  background: rgba(246, 182, 210, .7);
  transform: translateX(-50%) rotate(3deg);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 50%);
}

/* The tagline as a received iMessage, on the portrait's upper-left edge */
.imessage {
  position: absolute;
  z-index: 3;
  top: 8%;
  left: 3%;
  margin: 0;
  padding: .58em 1em .62em;
  background: var(--pink-bubble);
  color: var(--ink);
  border-radius: 20px 20px 20px 4px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(.95rem, .88rem + .3vw, 1.12rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  white-space: nowrap;
  filter: drop-shadow(0 8px 14px rgba(40, 20, 30, .14));
}

.imessage em { font-style: normal; }

.imessage__tail {
  position: absolute;
  left: -8px;
  bottom: 0;
  width: 20px;
  height: 20px;
  fill: var(--pink-bubble);
}

/* Caption under the portrait, like a magazine photo credit */
.collage__caption {
  position: absolute;
  top: 88.5%;
  right: 0;
  width: 56%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.55;
  text-transform: uppercase;
}

.icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  fill: none;
  stroke: var(--pink-hot);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Ribbon ----------
   The band is one straight rectangle, rotated as a whole. It is wider
   than the screen so the tilted ends never show; the wrapper clips it
   and leaves room above and below for the tilt. */

.ribbon {
  overflow: hidden;
  padding: calc(1.6vw + 6px) 0;
}

.ribbon__band {
  width: 110%;
  margin-left: -5%;
  background: var(--ink);
  transform: rotate(-1.5deg);
}

/* Two identical groups; sliding by -50% lands exactly on the start
   of the second group, so the loop has no gap or jump */
.ribbon__track {
  display: flex;
  width: max-content;
  animation: ribbon-marquee 150s linear infinite;
}

.ribbon:hover .ribbon__track { animation-play-state: paused; }

.ribbon__group {
  display: flex;
  flex: none;
  align-items: center;
  gap: 1em;
  padding: .72em 1em .72em 0; /* right padding = gap, keeps the seam even */
  color: var(--cream);
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1rem, .85rem + .6vw, 1.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ribbon__group span { flex: none; }

.ribbon__group i {
  flex: none;
  color: var(--pink-select);
  font-style: normal;
  font-size: .75em;
}

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


/* ---------- Tablet: keep two columns, rebalance the split ---------- */

@media (max-width: 1100px) {
  .hero__text { grid-column: 1 / 8; }
  .collage { grid-column: 8 / 13; }
}

/* ---------- Stacked: text first, then the collage ---------- */

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .hero__text,
  .collage { grid-column: 1; }

  .collage {
    justify-self: center;
    width: min(100%, 480px);
  }

  .print { width: 31%; top: 52%; }
  .collage__caption { width: 62%; font-size: .64rem; letter-spacing: .07em; }
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .hero__title .line { display: inline; white-space: normal; }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
  }

  .nav-toggle__bars { position: relative; top: -3px; }
  .nav-toggle__bars::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; }

  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% - 6px);
    right: var(--gutter);
    width: min(250px, calc(100% - 2 * var(--gutter)));
    padding: 8px 18px;
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(40, 20, 30, .35), 0 0 0 1px var(--rule);
  }

  .site-nav.is-open { display: block; }

  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav li + li { border-top: 1px solid var(--rule); }
  .site-nav a { padding: 13px 0; font-size: .8rem; }
  .site-nav a::after { bottom: 9px; right: auto; width: 24px; }
}

@media (max-width: 420px) {
  .hero__strap { letter-spacing: .015em; }
}

/* ---------- Reduced motion: no marquee, no hover movement ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }

  .ribbon__track { animation: none; }

  .cta-select:hover .cta-select__arrow,
  .cta-bubble:hover { transform: none; }

  .collage:hover .portrait img { transform: scale(1.06); }
  .collage:hover .print { transform: rotate(-5deg); }
}


/* ==========================================================
   Sections after the first screen (What I Do approved 27 Oct)
   ========================================================== */

:root {
  --pink-wash: #F7E7EE;   /* section background for What I Do and About */
  --folder: #F2C5D8;
  --folder-dark: #E9A9C4;
}

/* ---------- Shared section scaffolding ---------- */

.section { padding: clamp(72px, 9vw, 128px) 0; }
.section--pink { background: var(--pink-wash); }

.section__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(2.1rem, 1rem + 3vw, 3.8rem);
  line-height: .98;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Same italic voice as the hero headline */
.section-title .soft {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.1em;
  letter-spacing: -0.015em;
}

/* iOS text selection with handles, as in the hero */
.section-title .select {
  background: var(--pink-select);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}

.section-title .select__start,
.section-title .select__end { white-space: nowrap; }

.section-title .select__start::before,
.section-title .select__end::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 1.02em;
  margin: 0 -4.5px;
  vertical-align: -.13em;
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center top / 9px 9px no-repeat;
}

.section-title .select__end::after {
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center bottom / 9px 9px no-repeat;
}

.lede {
  margin: 0;
  max-width: 30rem;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Skill tags, rendered from a "A · B · C" list by main.js */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
}

.chip {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--pink-wash);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
}

/* ---------- 02 What I Do ---------- */

/* The pale pink starts at the ribbon: the ribbon's wrapper is cream above
   and pink below a line at the same angle as the band (-1.5deg), so the
   section edge runs parallel to the ribbon at any width. */
.intro .ribbon {
  background: linear-gradient(178.5deg, var(--cream) 50%, var(--pink-wash) 50%);
}

.whatido { padding-top: clamp(48px, 6vw, 88px); }

/* More breathing room at laptop and phone widths. On large screens the
   centred content is narrower than the container, so this has no effect. */
.whatido .section__inner { padding-inline: clamp(28px, 7.5vw, 110px); }

/* Centred header: eyebrow, headline and intro as one composition */
.whatido__head {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}

/* Larger than other section titles, still below the hero */
.whatido__head .section-title {
  font-size: clamp(2.25rem, .9rem + 2.9vw, 3.75rem);
  line-height: 1.06;
  text-wrap: balance;
}

/* The bold phrase takes its own line, so the two type voices read as one
   sentence. It is set a little larger so it balances the italic line. */
.whatido__lead {
  display: block;
  font-size: 1.1em;
  margin-bottom: .04em;
}

.whatido__head .lede {
  max-width: 46rem;
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  text-wrap: balance; /* even line lengths, no orphaned last line */
}

/* Keywords that punctuate the reading */
.whatido__head .lede strong {
  color: var(--ink);
  font-weight: 700;
}

/* One interactive component: a 2 x 2 folder grid on the left (third folder
   under the first), the selected folder's panel on the right */
.folders {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: stretch;
  max-width: 1180px;
  margin: clamp(44px, 5vw, 64px) auto 0;
}

.folders__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(20px, 3vw, 40px);
  align-content: center;
}

.folder-tab {
  display: grid;
  gap: 12px;
  justify-items: start;
  padding: 0;
  background: none;
  border: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Mac-style folder, drawn in CSS */
.folder-icon {
  position: relative;
  width: min(100%, 150px);
  aspect-ratio: 1.32;
  margin-top: 14px;
  background: var(--folder);
  border-radius: 10px;
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease);
}

.folder-icon::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 0;
  width: 42%;
  height: 22px;
  background: var(--folder-dark);
  border-radius: 9px 9px 0 0;
}

/* Front flap; it tilts open when the folder is selected */
.folder-icon::after {
  content: "";
  position: absolute;
  inset: 16% 0 0;
  background: linear-gradient(180deg, #F6D4E2, var(--folder));
  border-radius: 8px 8px 10px 10px;
  transform-origin: bottom;
  transition: transform var(--fast) var(--ease);
}

.folder-tab:hover .folder-icon { transform: translateY(-3px); }

.folder-tab[aria-selected="true"] .folder-icon { background: var(--paper); box-shadow: inset 0 0 0 2px var(--folder-dark); }
.folder-tab[aria-selected="true"] .folder-icon::after { transform: perspective(300px) rotateX(-28deg); }

/* Folder names use the "Explore my work" highlight: an offset marker
   that draws in on hover, sits under the selected folder's name, and
   fills the whole name when hovered */
.folder-tab__label {
  margin-left: -.12em;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1.08rem, .95rem + .4vw, 1.32rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* The marker sits on an inline span so it follows each line of a wrapped name */
.folder-tab__label > span {
  padding: .05em .12em;
  background: linear-gradient(var(--pink-select), var(--pink-select)) left 90% / 0 42% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--fast) var(--ease);
}

.folder-tab:hover .folder-tab__label > span,
.folder-tab:focus-visible .folder-tab__label > span { background-size: 100% 42%; }

.folder-tab[aria-selected="true"] .folder-tab__label > span { background-size: 100% 42%; }
.folder-tab[aria-selected="true"]:hover .folder-tab__label > span { background-size: 100% 100%; }

/* All panels share one grid cell, so the column keeps the height of the
   longest one and nothing below jumps when switching folders */
.folders__panels { display: grid; }

/* Content sits in the vertical centre of the panel */
.folder-panel {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px);
  background: var(--paper);
  border-radius: 14px;
  box-shadow: var(--print-shadow);
}

.folder-panel[hidden] { display: flex; visibility: hidden; }

.folder-panel__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  letter-spacing: -0.02em;
}

.folder-panel p:not(.chips) {
  margin: 0;
  max-width: 44rem;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* Stacked: folders above, the selected content underneath. Folders form a
   centred group, Finder-style, with the name centred under each one:
   three across on tablets, two across (third centred below) on phones. */
@media (max-width: 900px) {
  .folders { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  .folders__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 24px;
  }

  .folder-tab {
    flex: 0 1 190px;
    justify-items: center;
    text-align: center;
  }

  .folder-tab__label { margin-left: 0; }
  .folder-icon { width: min(100%, 120px); }
}

@media (max-width: 560px) {
  .folder-tab { flex-basis: calc(50% - 12px); }
  .folder-tab__label { font-size: 1.02rem; }
  .folder-icon { width: min(100%, 108px); }
}

/* Very narrow screens: a single-column list (small folder beside its
   title) so titles stay legible */
@media (max-width: 379px) {
  .folders__tabs { gap: 14px; }
  .folder-tab { flex-basis: 100%; grid-template-columns: 64px minmax(0, 1fr); justify-items: start; align-items: center; gap: 14px; text-align: left; }
  .folder-icon { width: 64px; margin-top: 10px; }
  .folder-icon::before { top: -8px; height: 14px; border-radius: 6px 6px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .folder-tab:hover .folder-icon { transform: none; }
}

/* ---------- 03 Selected Work ---------- */

/* Title on the left, a short intro on the right, sharing a baseline */
.work-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 24px);
  align-items: end;
}

.work-head__title { grid-column: 1 / 8; }

/* The two type voices of the hero, at What I Do's scale */
.work .section-title {
  font-size: clamp(2.5rem, 1rem + 3.4vw, 4.25rem);
  line-height: 1.02;
}

.work-head__intro {
  grid-column: 8 / 13;
  justify-self: end;
  max-width: 33rem;
  margin: 0 0 .35em;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* Key phrases that punctuate the reading, as in What I Do */
.work-head__intro strong {
  color: var(--ink);
  font-weight: 700;
}

/* The list is one grid; each row is a subgrid of it, so stars, titles,
   categories and cues line up down the whole list */
.index {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  column-gap: clamp(18px, 2.6vw, 44px);
  list-style: none;
  margin: clamp(44px, 5vw, 72px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}

.index li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.index__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  padding: clamp(18px, 1.7vw, 26px) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.index__row:focus-visible {
  outline: 2px solid var(--pink-hot);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Hand-drawn star in place of a number, each set at a slightly
   different angle, as if drawn down the margin */
.index__star {
  width: clamp(26px, 2.3vw, 36px);
  height: auto;
  transform: rotate(-8deg);
  transition: transform var(--fast) var(--ease);
}

.index li:nth-child(3n + 2) .index__star { transform: rotate(7deg); }
.index li:nth-child(3n) .index__star { transform: rotate(-2deg); }

.index__title {
  justify-self: start;
  padding: 0 .06em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.7rem, 1rem + 1.95vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
  background: linear-gradient(var(--pink-select), var(--pink-select)) left 88% / 0 40% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--fast) var(--ease);
}

.index__cat {
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--fast) var(--ease);
}

.index__cue {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}

.index__cue-arrow { display: inline-block; transition: transform var(--fast) var(--ease); }

/* Hover / focus: the title is marked, the star turns, the arrow nudges */
.index__row:hover .index__title,
.index__row:focus-visible .index__title { background-size: 100% 40%; }
.index__row:hover .index__cat { color: var(--ink); }
.index__row:hover .index__star,
.index__row:focus-visible .index__star { transform: rotate(16deg) scale(1.12); }
.index__row:hover .index__cue-arrow { transform: translateX(5px); }

/* Below laptop width: title and cue on the first line, category under the title */
@media (max-width: 1100px) {
  .index { grid-template-columns: auto minmax(0, 1fr) max-content; row-gap: 0; }
  .index__row { row-gap: 6px; }
  .index__star { grid-row: 1; }
  .index__title { grid-column: 2; grid-row: 1; }
  .index__cue { grid-column: 3; grid-row: 1; }
  .index__cat { grid-column: 2; grid-row: 2; }
}

/* Phones: titles may wrap; the cue becomes an arrow alone */
@media (max-width: 560px) {
  .index__title { white-space: normal; text-wrap: balance; }
  .index__cat { white-space: normal; line-height: 1.5; font-size: .68rem; letter-spacing: .1em; }
  .index__cue-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .index__cue { font-size: 1.1rem; }
}

/* ---------- Project modal ---------- */

.modal {
  width: min(880px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.modal::backdrop {
  background: rgba(20, 17, 20, .45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* The page behind stays put while a project is open */
html:has(.modal[open]) { overflow: hidden; }

.modal[open] { animation: modal-in 220ms var(--ease); }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px); }
}

.modal__sheet {
  position: relative;
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: clamp(28px, 5vw, 56px);
  background: var(--paper);
  border-radius: 18px;
}

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.6rem/1 var(--font-body);
  cursor: pointer;
}

.modal__close:hover { background: var(--pink-select); }

.modal__content > p:not(.chips):not(.modal__summary) {
  max-width: 42rem;
  margin: 0 0 .9em;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.7;
}

/* Title area: the brand's logo as a round profile picture, then category and title */
.modal__head {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
  margin: 0 3.5rem 18px 0;
}

/* Profile-picture badge: a thin pink ring around a neutral disc. A real logo
   goes inside as an <img>, contained so its proportions are kept. */
.modal__logo {
  flex: none;
  width: clamp(60px, 7vw, 78px);
  aspect-ratio: 1;
  padding: 3px;
  border: 2px solid var(--pink-select);
  border-radius: 50%;
}

/* The logos are square, each with its own background, so they fill the
   disc like a profile picture */
.modal__logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--cream);
  object-fit: cover;
}

.modal__cat {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.modal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(2rem, 1rem + 3vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.modal__summary {
  max-width: 40rem;
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem);
  line-height: 1.3;
}

.modal__label {
  margin: 28px 0 10px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.modal__content .chips { margin-top: 0; }

.modal__images {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}

/* Two images per row, same height, nothing cropped: each image's flex-grow
   (set inline) is its width / height ratio */
.modal__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.modal__row img {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--rule);
}

/* Phones: the badge sits on its own line, beside the close button,
   so the title gets the full width */
@media (max-width: 560px) {
  .modal__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-right: 0; }
  .modal__row { flex-direction: column; }
  .modal__row img { flex-basis: auto; width: 100%; }
}

/* Stacked: title, then the intro underneath */
@media (max-width: 900px) {
  .work-head__title,
  .work-head__intro { grid-column: 1 / -1; }

  .work-head__intro { justify-self: start; margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open] { animation: none; }
}

/* ---------- 04 How I Work ---------- */

/* Colours the section uses (pale pink, as What I Do) */
.how {
  --how-bg: var(--pink-wash);
  --how-ink: var(--ink);
  --how-soft: var(--ink-soft);
  --how-line: rgba(204, 44, 119, .55);
  background: var(--how-bg);
  color: var(--how-ink);
}

/* Centred heading and intro, as in What I Do */
.how-head {
  max-width: 62rem;
  margin: 0 auto;
  text-align: center;
}

.how-head .section-title {
  font-size: clamp(2.25rem, .9rem + 2.9vw, 3.75rem);
  line-height: 1.06;
  text-wrap: balance;
}

.how-head__lead {
  display: block;
  font-size: 1.1em;
  margin-bottom: .04em;
}

.how-head .lede {
  max-width: 52rem;
  margin: clamp(20px, 2.4vw, 28px) auto 0;
  color: var(--how-soft);
  text-wrap: pretty;
}

/* The intro is two short paragraphs */
.how-head .lede + .lede { margin-top: 1em; }

.how strong {
  color: var(--how-ink);
  font-weight: 700;
}

.steps-wrap {
  position: relative;
  margin-top: clamp(40px, 5vw, 72px);
}

/* Connector following the diagonal stagger. main.js draws its curve through
   the centre of each number and sizes it to end at 03. The curve always
   moves left to right, so revealing it from the left draws it along its
   path; main.js sets --how-progress from 0 to 1 as the visitor scrolls. */
.steps__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--how-line);
  pointer-events: none;
  clip-path: inset(0 calc((1 - var(--how-progress, 1)) * 100%) 0 0);
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 7.5vw, 128px);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A gentler stagger, so step 3 starts closer to the heading */
.step--2 { margin-top: 84px; }
.step--3 { margin-top: 168px; }

.step__num {
  position: relative;
  display: inline-block;
  padding-right: .12em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(4rem, 2rem + 4.5vw, 7rem);
  line-height: .85;
}

/* Reading order: title, then the italic lead-in, then the body */
.step__title {
  margin: 16px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.step__sub {
  margin: 0 0 16px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 1.15rem + .45vw, 1.55rem);
  line-height: 1.25;
  text-wrap: balance;
}

.step p:not(.step__sub):not(.step__goal) {
  margin: 0 0 .8em;
  color: var(--how-soft);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.7;
}

.step__goal { margin: 22px 0 0; }

.step__goal > strong {
  display: block;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The payoff of each step wears the site's iOS selection, handles included
   (same values as .section-title .select) */
.step__goal .select {
  background: var(--pink-select);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: 1.2rem;
  line-height: 1.5;
}

.step__goal .select__start,
.step__goal .select__end { white-space: nowrap; }

.step__goal .select__start::before,
.step__goal .select__end::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 1.02em;
  margin: 0 -4.5px;
  vertical-align: -.13em;
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center top / 9px 9px no-repeat;
}

.step__goal .select__end::after {
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center bottom / 9px 9px no-repeat;
}

/* Scroll reveal. main.js adds .is-animated only when motion is allowed, so
   without it (or without JavaScript) everything is simply shown. Steps fade
   and rise a little; nothing changes size, so the layout never shifts. */
.is-animated .step > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}

.is-animated .step > :nth-child(2) { transition-delay: 100ms; }
.is-animated .step > :nth-child(n + 3) { transition-delay: 200ms; }

.is-animated .step.is-in > * { opacity: 1; transform: none; }

/* Stacked: a vertical timeline; the line runs down the left edge and draws
   downward with the same scroll progress */
@media (max-width: 900px) {
  .steps__line { display: none; }

  .steps { grid-template-columns: 1fr; gap: 48px; padding-left: 24px; }

  .steps::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--how-line);
    transform-origin: top;
    transform: scaleY(var(--how-progress, 1));
  }

  .step--2, .step--3 { margin-top: 0; }
}


/* ---------- 05 About ---------- */

.about {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 24px);
  align-items: start;
}

.about__photos {
  grid-column: 1 / 6;
  position: sticky;
  top: 110px;
}

/* Digital collage, in the hero's language: macOS-style windows, a taped
   print, a Finder thumbnail and one patch. Positions are in % / cqi of the
   collage box, so the arrangement scales as one. */
.about__collage {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1.12;
  container-type: inline-size;
}

/* The photos fill their frames, cropped to fit */
.ab-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ab-photo--portrait { object-position: 50% 30%; }

/* Window frame, as on the hero portrait */
.ab-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-radius: 2.4cqi;
  box-shadow:
    0 0 0 1px var(--rule),
    0 30px 54px -30px rgba(40, 20, 30, .5);
}

.ab-window__bar {
  flex: none;
  display: flex;
  gap: 1.3cqi;
  align-items: center;
  height: 6cqi;
  padding: 0 2.8cqi;
  border-bottom: 1px solid var(--rule);
}

.ab-window__bar i {
  width: 1.8cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink-select);
}

.ab-window__bar i:first-child { background: var(--pink-hot); }
.ab-window__bar i:last-child { background: rgba(20, 17, 20, .18); }

.ab-window .ab-photo { flex: 1; min-height: 0; }

.ab-window--main {
  top: 6%;
  left: 0;
  width: 62%;
  aspect-ratio: 4 / 5.2;
}

.ab-window--small {
  z-index: 2;
  top: 47%;
  right: 3%;
  width: 46%;
  aspect-ratio: 4 / 3.4;
  transform: rotate(2deg);
}

/* Taped print, as in the hero collage */
.ab-print {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 4%;
  width: 34%;
  padding: 2cqi 2cqi 7cqi;
  background: var(--paper);
  box-shadow: var(--print-shadow);
  transform: rotate(4deg);
  transition: transform 280ms var(--ease);
}

.ab-print .ab-photo { height: auto; aspect-ratio: 4 / 5; }

.ab-print__tape {
  position: absolute;
  z-index: 1;
  top: -3cqi;
  left: 50%;
  width: 50%;
  height: 5.5cqi;
  background: rgba(246, 182, 210, .7);
  transform: translateX(-50%) rotate(-3deg);
  clip-path: polygon(2% 0, 98% 6%, 100% 50%, 97% 100%, 1% 94%, 0 50%);
}

/* Thumbnail photo, like a file icon in the Finder */
.ab-thumb {
  position: absolute;
  z-index: 3;
  left: 4%;
  bottom: 0;
  width: 25%;
  transform: rotate(-2deg);
  display: grid;
  justify-items: center;
  gap: 1.6cqi;
}

.ab-thumb .ab-photo {
  height: auto;
  aspect-ratio: 1;
  border-radius: 1.6cqi;
  box-shadow: 0 0 0 1px var(--rule), 0 14px 24px -16px rgba(40, 20, 30, .45);
}

/* The patch: "no desire to fit in", sewn on beside the thumbnail */
.ab-sticker {
  position: absolute;
  z-index: 4;
  left: 27%;
  bottom: -3%;
  width: 32%;
  height: auto;
  transform: rotate(-7deg);
  filter: drop-shadow(0 10px 14px rgba(40, 20, 30, .22));
  transition: transform 280ms var(--ease);
}

/* On hover the print and the patch tilt in opposite directions */
.about__collage:hover .ab-print { transform: rotate(1.5deg); }
.about__collage:hover .ab-sticker { transform: rotate(-11deg) translateY(-3%); }

/* Signature in the space under the small window, beside the patch */
.about__signature {
  position: absolute;
  z-index: 3;
  right: 9%;
  top: 86%;
  width: 24%;
  height: auto;
  transform: rotate(-4deg);
}

.about__story { grid-column: 7 / 13; }

.about__text {
  margin-top: 28px;
  max-width: 38rem;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.75;
}

.about__text p { margin: 0 0 1em; }

/* The italic line on its own line, a touch smaller so it balances the bold one */
.about .section-title .soft { display: block; font-size: .92em; margin-top: .04em; }

/* Key phrases that punctuate the reading */
.about__text strong {
  color: var(--ink);
  font-weight: 700;
}

/* Closing line: one sentence that flows across both voices, the lead in
   the headline face and the payoff in the serif with the iOS selection */
.about__closing {
  max-width: 38rem;
  margin: 1.4em 0 0;
  color: var(--ink);
  line-height: 1.3;
  text-wrap: pretty;
}

.about__closing-lead {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.3rem, 1.15rem + .4vw, 1.55rem);
  letter-spacing: -0.02em;
}

.about__closing-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.1rem + .55vw, 1.85rem);
  letter-spacing: -0.01em;
}

/* Same values as .section-title .select */
.about__closing .select {
  background: var(--pink-select);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}

.about__closing .select__start,
.about__closing .select__end { white-space: nowrap; }

.about__closing .select__start::before,
.about__closing .select__end::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 1.02em;
  margin: 0 -4.5px;
  vertical-align: -.13em;
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center top / 9px 9px no-repeat;
}

.about__closing .select__end::after {
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center bottom / 9px 9px no-repeat;
}

.about__actions { margin-top: 28px; }

/* Stacked: the collage above the story */
@media (max-width: 900px) {
  .about__photos,
  .about__story { grid-column: 1 / -1; }

  .about__photos { position: static; width: min(100%, 420px); margin: 0 auto 56px; }
}

/* Dark sections (Contact, footer) */
.section--ink { background: var(--ink); color: var(--cream); }
.eyebrow--light { color: var(--pink-select); }

/* ---------- 06 Contact ---------- */

.contact {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 2vw, 24px);
}

/* The eyebrow sits on its own row, so the paragraphs can be centred on the
   conversation itself (the two bubbles) at any bubble size */
.contact__thread { display: contents; }
.contact__thread .eyebrow { grid-column: 1 / 8; grid-row: 1; }
.contact__bubbles { grid-column: 1 / 8; grid-row: 2; }

/* The question and the reply share a column as wide as the question, so the
   reply's right edge lines up with the question's */
.contact__bubbles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: fit-content;
  max-width: min(100%, 13.5em);
  font-size: clamp(2rem, 1rem + 3.2vw, 4rem); /* the question's size, so 13.5em is its measure */
}

/* The section headline is the received message: an iMessage bubble with
   evenly rounded corners and a tail curling from the bottom-left */
.contact__question {
  position: relative;
  align-self: stretch;
  margin: 0;
  padding: .5em .78em .55em;
  background: var(--pink-bubble);
  color: var(--ink);
  border-radius: .72em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 1em;
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* The second half in the italic serif, as in the other headings */
.contact__question .soft {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 1.08em;
  letter-spacing: -0.015em;
}

/* The site's iOS selection, handles included (same values as .section-title .select) */
/* French: the question breaks before "ou", so the soft line stays whole */
@media (min-width: 561px) {
  html[lang="fr"] .contact__question .soft { display: block; }
}

.contact__question .select {
  background: var(--pink-select);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .04em;
}

.contact__question .select__start,
.contact__question .select__end { white-space: nowrap; }

.contact__question .select__start::before,
.contact__question .select__end::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 1.02em;
  margin: 0 -4.5px;
  vertical-align: -.13em;
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center top / 9px 9px no-repeat;
}

.contact__question .select__end::after {
  background:
    linear-gradient(var(--pink-hot), var(--pink-hot)) center / 2px 100% no-repeat,
    radial-gradient(circle, var(--pink-hot) 3.5px, transparent 4px) center bottom / 9px 9px no-repeat;
}

/* Tail: covers the bubble's rounded bottom-left corner, then curves out to
   a softly rounded tip, as in iMessage. Sized in em, so it scales with the
   bubble (its edge sits .375em in from the left of the drawing). */
.contact__tail {
  position: absolute;
  left: -.375em;
  bottom: 0;
  width: 1.25em;
  height: .75em;
  fill: var(--pink-bubble);
}

/* ...and "Shoot me an email" is the reply: a sent message in cream */
.contact__reply {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 48px;
  margin-top: 22px;
  padding: .58em 1.05em .62em;
  background: var(--cream);
  color: var(--ink);
  border-radius: .95em;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 85%;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.6rem);
  line-height: 1.1;
  text-decoration: none;
  transition: background-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.contact__reply-icon {
  font-size: 1.05em;
  line-height: 1;
}

/* Same tail, mirrored (its edge sits .475em in from the right of the drawing) */
.contact__reply-tail {
  position: absolute;
  right: -.475em;
  bottom: 0;
  width: 1.583em;
  height: .95em;
  fill: var(--cream);
  transition: fill var(--fast) var(--ease);
}

.contact__reply:hover { background: var(--pink-select); transform: translateY(-2px); }
.contact__reply:hover .contact__reply-tail { fill: var(--pink-select); }

.contact__reply:focus-visible {
  outline: 2px solid var(--pink-select);
  outline-offset: 5px;
}

.contact__details {
  grid-column: 9 / 13;
  grid-row: 2;
  align-self: center;
  color: rgba(251, 246, 238, .82);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.7;
}

.contact__details p { margin: 0 0 .9em; max-width: 30rem; }

.contact__details strong {
  color: var(--cream);
  font-weight: 700;
}


/* Contact, stacked: eyebrow, conversation, then the paragraphs */

@media (max-width: 900px) {
  .contact__thread .eyebrow,
  .contact__bubbles,
  .contact__details { grid-column: 1 / -1; grid-row: auto; }

  .contact__details { margin-top: 48px; }
}

/* Tablets: the stacked Contact composition is narrower than the page, so it
   is centred as a group (eyebrow, conversation, paragraphs). Phones keep
   it full width and left-aligned. */
@media (min-width: 561px) and (max-width: 900px) {
  .contact__thread .eyebrow { text-align: center; }
  .contact__bubbles { justify-self: center; }

  .contact__details {
    justify-self: center;
    max-width: 30rem;
    text-align: center;
  }
}

/* ---------- Footer ----------
   A quiet ending: the signature on the left; the links on the right, with
   the copyright directly under them */

.footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid rgba(251, 246, 238, .14);
  padding: clamp(22px, 2.4vw, 30px) 0 clamp(18px, 2vw, 24px);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 40px;
}

.footer__sign { grid-row: 1 / 3; align-self: center; }

.footer p { margin: 0; }

.footer__line {
  font-family: var(--font-display);
  font-stretch: 85%;
  font-size: 1.2rem;
  line-height: 1.2;
}

.footer__tagline {
  margin-top: 7px !important;
  font-family: var(--font-serif);
  font-size: .98rem;
  line-height: 1.3;
  opacity: .62;
}

.footer__links {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  align-self: end;
  font-size: .85rem;
  font-weight: 600;
}

.footer__links a {
  color: var(--cream);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--fast) var(--ease);
}

.footer__links a:hover { color: var(--pink-select); }

.footer__links a:focus-visible {
  outline: 2px solid var(--pink-select);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer__sep { opacity: .5; }

.footer__copy {
  justify-self: end;
  align-self: start;
  font-size: .72rem;
  opacity: .5;
}

/* Phones: signature, links and copyright stack, centred, with little extra height */
@media (max-width: 560px) {
  .footer__inner { grid-template-columns: minmax(0, 1fr); gap: 12px; text-align: center; }
  .footer__sign { grid-row: auto; }
  .footer__links { justify-content: center; margin-top: 4px; }
  .footer__copy { justify-self: center; margin-top: -4px; }
}