:root {
  --paper: #f0eee7;
  --ink: #11110f;
  --muted: #6c6a62;
  --line: rgba(17,17,15,.18);
  --accent: #e75b37;
  --project-bg: #d8dfc7;
  --about-bg: #e9c8a9;
  --dark: #171714;
  --max: 1440px;
  --pad: clamp(1.2rem, 3.5vw, 4rem);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
.site-header { position: absolute; z-index: 20; top: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.5rem var(--pad); color: white; mix-blend-mode: difference; }
.brand { font-weight: 800; letter-spacing: -.03em; font-size: clamp(1rem,1.4vw,1.35rem); }
.main-nav { display: flex; gap: clamp(1.2rem,3vw,3rem); text-transform: uppercase; font-size: .76rem; letter-spacing: .13em; }
.main-nav a, .brand { transition: opacity .2s; }
.main-nav a:hover, .brand:hover { opacity: .6; }
.menu-toggle { display: none; background: none; color: inherit; border: 0; font: inherit; text-transform: uppercase; letter-spacing: .12em; }
.hero { position: relative; min-height: 92vh; height: 920px; max-height: 1000px; overflow: hidden; color: white; }
.hero-image { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.02) 38%, rgba(0,0,0,.42)); }
.hero-copy { position: absolute; left: var(--pad); bottom: clamp(4.5rem,10vh,8rem); max-width: 1000px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; margin: 0 0 1.2rem; }
.hero h1 { font-size: clamp(4.6rem, 13vw, 12rem); line-height: .75; letter-spacing: -.085em; margin: 0; font-weight: 900; }
.tagline { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: clamp(1.45rem,2.4vw,2.6rem); margin: 2rem 0 0 .25rem; }
.scroll-cue { position: absolute; right: var(--pad); bottom: 2.5rem; width: 28px; height: 50px; border-left: 1px solid rgba(255,255,255,.7); }
.scroll-cue span { display: block; width: 7px; height: 7px; border-right: 1px solid white; border-bottom: 1px solid white; transform: rotate(45deg); position: absolute; bottom: 0; left: -4px; }
.section { padding: clamp(6rem,12vw,12rem) max(var(--pad), calc((100vw - var(--max)) / 2 + var(--pad))); }
.section-number { display: none; }
.intro { background: var(--paper); }
.intro-grid { display: block; max-width: var(--max); margin: 0 auto; }
.intro h2 { max-width: 1100px; font-size: clamp(2.6rem,6vw,6.5rem); line-height: .95; letter-spacing: -.055em; margin: 0; font-weight: 700; }
.lead { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.35rem,2.2vw,2.25rem); max-width: 800px; margin: 4rem 0 0 auto; }
.projects { background: var(--project-bg); }
.section-heading { display: block; max-width: var(--max); margin: 0 auto 5rem; }
.section-heading h2, .about h2 { font-size: clamp(3.2rem,7vw,7.5rem); line-height: .85; letter-spacing: -.065em; margin: 0; text-transform: uppercase; }
.project-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,6vw,7rem); align-items: start; max-width: var(--max); margin: 0 auto; }
.project-card-offset { margin-top: 12vw; }
.project-image-link { display: block; overflow: hidden; background: #ccc; }
.project-image-link img { aspect-ratio: 4/3; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.project-card:nth-child(2) .project-image-link { background: #05070d; }
.project-card:nth-child(2) .project-image-link img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center; }
.project-image-link:hover img { transform: scale(1.025); }
.project-copy { padding-top: 1.6rem; border-top: 1px solid var(--ink); margin-top: 1.2rem; }
.project-type { color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: .67rem; margin: 0 0 .8rem; }
.project-copy h3 { font-size: clamp(2rem,3.6vw,4rem); letter-spacing: -.05em; line-height: .95; margin: 0 0 1rem; }
.project-copy > p:not(.project-type) { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.1rem,1.45vw,1.4rem); max-width: 34rem; }
.text-link { display: inline-block; margin-top: 1.3rem; padding-bottom: .15rem; border-bottom: 1px solid currentColor; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.text-link span { margin-left: .4rem; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem,8vw,9rem); align-items: center; background: var(--about-bg); }
.about-image-wrap { position: relative; overflow: hidden; max-height: 850px; margin: 0; }
.about-image-wrap img { height: min(75vw,850px); object-fit: cover; object-position: center 43%; }
.photo-credit { position: absolute; right: .8rem; bottom: .65rem; margin: 0; color: rgba(255,255,255,.78); font-size: .62rem; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.about-copy .section-number { margin-bottom: 2.5rem; }
.about-copy p:not(.section-number) { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.2rem,1.8vw,1.7rem); max-width: 39rem; margin-top: 3rem; }
.contact { background: var(--dark); color: var(--paper); display: grid; grid-template-columns: 6fr 2fr; gap: 2rem; align-items: start; }
.contact h2 { font-size: clamp(4rem,10vw,10rem); line-height: .78; letter-spacing: -.075em; margin: 0 0 3rem; text-transform: uppercase; }
.contact-main > p { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.25rem,1.8vw,1.7rem); max-width: 34rem; }
.email { display: inline-block; font-size: clamp(1.1rem,2.1vw,2rem); margin-top: 2.5rem; border-bottom: 1px solid currentColor; }
.contact-meta { padding-top: .4rem; font-size: .85rem; }
.contact-meta p { margin: 0 0 2rem; }
.contact-meta a { border-bottom: 1px solid transparent; }
.contact-meta a:hover { border-color: currentColor; }
.site-footer { background: var(--dark); color: var(--paper); border-top: 1px solid rgba(240,238,231,.22); margin: 0; padding: 1.4rem var(--pad) 2rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } .project-image-link img { transition: none; } }
@media (max-width: 760px) {
  .site-header { align-items: flex-start; }
  .menu-toggle { display: block; cursor: pointer; }
  .main-nav { display: none; position: absolute; top: 3.6rem; right: var(--pad); flex-direction: column; text-align: right; gap: .7rem; }
  .main-nav.open { display: flex; }
  .hero { height: 88svh; min-height: 620px; }
  .hero-image { object-position: 53% center; }
  .hero h1 { font-size: clamp(4.1rem,22vw,7rem); }
  .hero-copy { bottom: 4.5rem; }
  .scroll-cue { display: none; }
  .intro-grid, .section-heading { display: block; }
  .lead { margin-top: 3rem; }
  .project-grid { grid-template-columns: 1fr; gap: 5rem; }
  .project-card-offset { margin-top: 0; }
  .about { grid-template-columns: 1fr; }
  .about-image-wrap { order: 2; }
  .about-copy { order: 1; }
  .about-image-wrap img { height: 120vw; max-height: 760px; }
  .contact { grid-template-columns: 1fr; }
  .contact-main { margin-top: 1rem; }
  .contact-meta { margin-top: 3rem; display: grid; grid-template-columns: 1fr 1fr; }
  .site-footer { flex-direction: column; }
}


/* ===== V1.3 visual refinements ===== */
:root {
  --intro-bg: #f1c85b;
  --hero-accent: #f0b93f;
  --micro-accent: #a83d2f;
}

/* Hero: bring colour into the typography without weakening the main title */
.hero-kicker,
.hero .eyebrow,
.hero-meta,
.hero-topline {
  color: var(--hero-accent) !important;
}

/* Also colour the navigation/upper line when it sits over the hero */
.hero .site-nav a,
.hero .brand,
.hero header a {
  color: var(--hero-accent);
}

/* Intro becomes a graphic pause rather than an empty white section */
.intro {
  background: var(--intro-bg);
  position: relative;
  overflow: hidden;
}
.intro::after {
  content: "";
  position: absolute;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border: 2px solid rgba(20,20,18,.16);
  border-radius: 50%;
  right: -12vw;
  bottom: -60%;
  pointer-events: none;
}
.intro-grid {
  position: relative;
  z-index: 1;
}
.intro h2,
.intro .intro-lead {
  text-shadow: 3px 3px 0 rgba(255,255,255,.22);
}

/* Small typographic accents lower in the page */
.project-kicker,
.project-card .eyebrow,
.about .eyebrow,
.kicker {
  color: var(--micro-accent);
}

/* Project images: no underline, softer corners */
.project-image-link {
  border-bottom: 0 !important;
  border-radius: 15px;
  overflow: hidden;
}
.project-image-link::after {
  display: none !important;
}
.project-image-link img {
  border-radius: 15px;
}

/* Benoît supplied the Circus Spiral image already cropped square:
   display it as-is, without any browser-side reframing. */
.project-card:nth-child(2) .project-image-link img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: initial;
  object-position: initial;
  display: block;
}


/* ===== V1.3b — latest small corrections ===== */
:root {
  --intro-bg: #c9a6d8;       /* lilac instead of yellow */
  --hero-accent: #d7a8e8;
  --circle-light: rgba(86, 47, 105, .12);
  --circle-dark: rgba(201, 166, 216, .20);
}

/* Only the very top line of the hero is coloured:
   IDEAL CIRKUS + menu. Main hero name/title remains unchanged. */
.site-header .brand,
.site-header nav a,
.hero .site-header .brand,
.hero .site-header nav a {
  color: var(--hero-accent) !important;
}

/* Undo colour on other hero text that V1.3 may have targeted. */
.hero-kicker,
.hero .eyebrow,
.hero-meta,
.hero-topline {
  color: inherit !important;
}

/* Lilac intro */
.intro {
  background: var(--intro-bg);
}

/* Reusable subtle circular traces, only on flat-colour sections */
.intro,
.projects,
.about,
.contact {
  position: relative;
  overflow: hidden;
}

.intro::before,
.projects::before,
.projects::after,
.about::before,
.about::after,
.contact::before {
  content: "";
  position: absolute;
  border: 2px solid var(--circle-light);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.intro::before {
  width: 18rem;
  height: 18rem;
  left: -7rem;
  top: 18%;
}
.intro::after {
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border: 2px solid var(--circle-light);
  border-radius: 50%;
  right: -12vw;
  bottom: -60%;
}

.projects::before {
  width: 14rem;
  height: 14rem;
  right: -7rem;
  top: 8%;
}
.projects::after {
  width: 22rem;
  height: 22rem;
  left: -15rem;
  bottom: 4%;
}
.about::before {
  width: 16rem;
  height: 16rem;
  left: -10rem;
  top: 12%;
}
.about::after {
  width: 11rem;
  height: 11rem;
  right: -5rem;
  bottom: 8%;
}
.contact::before {
  width: 17rem;
  height: 17rem;
  right: -8rem;
  bottom: -8rem;
  border-color: var(--circle-dark);
}

/* Keep actual section content above decorative circles */
.intro > *,
.projects > *,
.about > *,
.contact > * {
  position: relative;
  z-index: 1;
}

/* Remove ALL rules/dividers between project image and its text */
.project-card,
.project-card > *,
.project-image-link,
.project-card .project-copy,
.project-card .project-info,
.project-card h3 {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.project-image-link {
  border: 0 !important;
  box-shadow: none !important;
}

/* Preserve rounded project photos */
.project-image-link,
.project-image-link img {
  border-radius: 15px;
}


/* ===== V1.3c — short arc decoration =====
   The circles from V1.3b are converted into arc fragments.
   Each visible stroke is deliberately shorter than a semicircle. */

.intro::before,
.intro::after,
.projects::before,
.projects::after,
.about::before,
.about::after,
.contact::before {
  border-style: solid !important;
  border-radius: 50% !important;
  background: transparent !important;
}

/* Two adjacent sides = quarter-ish arcs, never a half circle */
.intro::before {
  border-color: var(--circle-light) transparent transparent var(--circle-light) !important;
  transform: rotate(24deg);
}
.intro::after {
  border-color: transparent var(--circle-light) var(--circle-light) transparent !important;
  transform: rotate(-18deg);
}

.projects::before {
  border-color: var(--circle-light) var(--circle-light) transparent transparent !important;
  transform: rotate(38deg);
}
.projects::after {
  border-color: transparent transparent var(--circle-light) var(--circle-light) !important;
  transform: rotate(-31deg);
}

.about::before {
  border-color: var(--circle-light) transparent transparent var(--circle-light) !important;
  transform: rotate(-22deg);
}
.about::after {
  border-color: transparent var(--circle-light) var(--circle-light) transparent !important;
  transform: rotate(42deg);
}

.contact::before {
  border-color: var(--circle-dark) var(--circle-dark) transparent transparent !important;
  transform: rotate(-28deg);
}


/* ===== V1.3d — organic volutes ===== */
.intro::before, .intro::after,
.projects::before, .projects::after,
.about::before, .about::after,
.contact::before {
  display: none !important;
}

.volute {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  opacity: .34;
}
.volute path {
  fill: none;
  stroke: rgba(91, 50, 111, .62);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.contact .volute path {
  stroke: rgba(215, 168, 232, .52);
}
.volute-a { width: min(48vw, 620px); right: -8%; top: 7%; transform: rotate(-8deg); }
.volute-b { width: min(34vw, 430px); left: -8%; bottom: 2%; transform: rotate(16deg); }
.volute-c { width: min(40vw, 520px); right: -10%; bottom: -5%; transform: rotate(12deg); }
.volute-d { width: min(30vw, 390px); left: -6%; top: 4%; transform: rotate(-22deg); }
.volute-e { width: min(42vw, 540px); right: -9%; top: 18%; transform: rotate(25deg); }
.volute-f { width: min(36vw, 460px); left: -7%; bottom: -8%; transform: rotate(-10deg); }

.intro > :not(.volute),
.projects > :not(.volute),
.about > :not(.volute),
.contact > :not(.volute) {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .volute { opacity: .25; }
  .volute-a, .volute-c, .volute-e { width: 72vw; right: -28vw; }
  .volute-b, .volute-d, .volute-f { width: 62vw; left: -26vw; }
}

/* V1.3e visibility correction */
.volute { opacity: .52; }
.volute path { stroke-width: 2.8; }
.contact .volute { opacity: .46; }


/* ===== V1.3f — richer volute field + scroll drawing ===== */

/* Slightly varied scale and placement so the motifs feel drawn, not tiled. */
.volute-g { width: min(31vw, 410px); left: 35%; bottom: -15%; transform: rotate(18deg); opacity: .34; }
.volute-h { width: min(50vw, 680px); right: -17%; top: 34%; transform: rotate(-13deg); }
.volute-i { width: min(27vw, 360px); left: 22%; bottom: -8%; transform: rotate(31deg); opacity: .28; }
.volute-j { width: min(48vw, 650px); right: -16%; bottom: -12%; transform: rotate(9deg); }
.volute-k { width: min(25vw, 330px); left: 42%; top: -8%; transform: rotate(-34deg); opacity: .29; }
.volute-l { width: min(54vw, 720px); left: -15%; top: 5%; transform: rotate(17deg); }

/* The animated ones are a little clearer, but remain background elements. */
.scroll-draw { opacity: .48; }
.scroll-draw path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  will-change: stroke-dashoffset;
}

/* Respect accessibility preferences: show the line, don't animate it. */
@media (prefers-reduced-motion: reduce) {
  .scroll-draw path {
    stroke-dashoffset: 0 !important;
  }
}

@media (max-width: 760px) {
  .volute-g, .volute-i, .volute-k { width: 48vw; }
  .volute-h, .volute-j, .volute-l { width: 82vw; }
}


/* ===== V1.3g — make scroll-drawn volutes unmistakable ===== */
.scroll-draw {
  opacity: .72 !important;
}
.scroll-draw path {
  stroke-width: 3.4 !important;
}
.contact .scroll-draw path {
  stroke: rgba(215, 168, 232, .78) !important;
}


/* ===== V1.3h — denser movement, stronger line, tighter section openings ===== */

/* Slightly stronger line across ALL decorative volutes. */
.volute path {
  stroke-width: 3.15 !important;
}

/* Animated volutes remain just a touch stronger. */
.scroll-draw path {
  stroke-width: 3.55 !important;
}

/* Reduce the large empty area before the first text/title in flat sections.
   Keep generous breathing room below so the editorial rhythm survives. */
.intro,
.projects,
.about {
  padding-top: clamp(3.8rem, 7vw, 6.5rem) !important;
}

/* A little tighter again on smaller screens. */
@media (max-width: 760px) {
  .intro,
  .projects,
  .about {
    padding-top: clamp(3rem, 9vw, 4.5rem) !important;
  }
}


/* ===== V1.3i — correction du cadrage du Hero sur téléphone =====
   Desktop/tablette inchangés.
   Sur mobile : cadrage décalé vers la gauche pour conserver davantage
   du visage, et image descendue dans son cadrage afin d'éliminer
   approximativement 10 % de sa partie haute. */
@media (max-width: 600px) {
  .hero-image {
    object-position: 68% 60% !important;
  }
}

/* ===== Spiral Patchwork — project page V1 ===== */
.project-page .site-header { mix-blend-mode: normal; }
.patchwork-hero { position: relative; height: min(88vh, 900px); min-height: 650px; overflow: hidden; color: white; }
.patchwork-hero-image { position: absolute; inset: 0; height: 100%; object-fit: cover; object-position: center; }
.patchwork-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.02) 38%, rgba(0,0,0,.58)); }
.patchwork-hero-copy { position: absolute; z-index: 2; left: var(--pad); right: var(--pad); bottom: clamp(3.8rem,8vh,7rem); }
.patchwork-hero-copy .eyebrow { color: white !important; }
.patchwork-hero h1 { font-size: clamp(4.2rem, 11vw, 10.5rem); line-height: .77; letter-spacing: -.075em; margin: 0; font-weight: 900; }
.patchwork-tagline { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.2rem,2vw,2rem); max-width: 700px; margin: 2rem 0 0; }

.patchwork-directions { background: var(--intro-bg); position: relative; overflow: hidden; }
.patchwork-heading { max-width: var(--max); margin: 0 auto clamp(4rem,8vw,8rem); }
.patchwork-heading h2, .patchwork-performance h2, .patchwork-space h2 { font-size: clamp(3rem,7vw,7.2rem); line-height: .88; letter-spacing: -.06em; margin: 0; text-transform: uppercase; }
.patchwork-heading .lead { margin: clamp(2rem,5vw,4rem) 0 0 auto; max-width: 820px; }
.patchwork-overview { max-width: var(--max); margin: 0 auto clamp(2rem,4vw,4rem); overflow: hidden; border-radius: 15px; }
.patchwork-overview img { width: 100%; max-height: 850px; object-fit: cover; }
.six-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(.8rem,1.8vw,1.8rem); }
.six-card { margin: 0; }
.six-card img { aspect-ratio: 4/3; object-fit: cover; border-radius: 15px; }
.six-card figcaption { padding-top: .65rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .13em; }

.patchwork-performance { background: var(--project-bg); position: relative; overflow: hidden; }
.patchwork-split { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(3rem,8vw,9rem); align-items: end; }
.patchwork-body { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.2rem,1.8vw,1.7rem); max-width: 650px; }
.patchwork-body p { margin: 0 0 1.4rem; }

.patchwork-space { background: var(--about-bg); display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(3rem,7vw,8rem); align-items: center; }
.space-image-wrap { overflow: hidden; border-radius: 15px; }
.space-image-wrap img { min-height: 520px; height: 58vw; max-height: 780px; object-fit: cover; }
.space-copy { max-width: 650px; }
.space-copy h2 { font-size: clamp(2.8rem,5.5vw,6rem); }
.space-copy > p:not(.project-type) { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.15rem,1.65vw,1.55rem); margin: 2.2rem 0 0; }

@media (max-width: 760px) {
  .patchwork-hero { height: 82svh; min-height: 600px; }
  .patchwork-hero-image { object-position: 52% center; }
  .patchwork-hero h1 { font-size: clamp(4rem,20vw,6.5rem); }
  .patchwork-tagline { max-width: 92%; }
  .six-grid { grid-template-columns: 1fr 1fr; }
  .patchwork-split, .patchwork-space { grid-template-columns: 1fr; }
  .patchwork-body { margin-top: 1rem; }
  .space-image-wrap { order: 2; }
  .space-copy { order: 1; }
  .space-image-wrap img { min-height: 0; height: 118vw; max-height: 720px; }
}


/* ===== V1.5 — Circus Spiral ===== */
.spiral-page { --spiral-ink:#17201b; --spiral-paper:#e6e0d4; --spiral-green:#b9c6a4; --spiral-rust:#c98162; }
.spiral-hero{position:relative;min-height:100svh;background:#111;overflow:hidden;display:flex;align-items:flex-end}
.spiral-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 47%}
.spiral-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06) 25%,rgba(0,0,0,.65) 100%)}
.spiral-hero-copy{position:relative;z-index:2;width:min(1180px,calc(100% - 3rem));margin:0 auto;padding:0 0 clamp(3rem,7vw,6.5rem);color:#fff}
.spiral-hero-copy h1{font-family:var(--display);font-size:clamp(4.8rem,13vw,11rem);line-height:.78;letter-spacing:-.055em;margin:.2rem 0 1.7rem}
.spiral-tagline{font-size:clamp(1.15rem,2.1vw,1.75rem);line-height:1.25;max-width:760px;margin:0}
.spiral-origin{position:relative;background:var(--spiral-paper);color:var(--spiral-ink);overflow:hidden}
.spiral-copy-block{position:relative;z-index:2;width:min(880px,100%);margin-left:auto;margin-right:auto}
.spiral-copy-block .project-type{margin-bottom:2rem}
.spiral-copy-block p:not(.project-type){font-size:clamp(1.25rem,2.25vw,2rem);line-height:1.35;max-width:820px}
.spiral-apparatus-image{position:relative;z-index:2;width:min(1120px,100%);margin:clamp(3rem,7vw,7rem) auto 0}
.spiral-apparatus-image img{width:100%;max-height:82vh;object-fit:cover;border-radius:15px;display:block}
.spiral-practice{background:#f4f0e8;color:var(--spiral-ink);overflow:hidden}
.spiral-section-heading{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);gap:clamp(2rem,7vw,8rem);align-items:start}
.spiral-section-heading h2{font-family:var(--display);font-size:clamp(3.2rem,7vw,7rem);line-height:.88;letter-spacing:-.045em;margin:.45rem 0 0}
.spiral-section-text{padding-top:2rem;max-width:680px}
.spiral-section-text p{font-size:clamp(1.08rem,1.6vw,1.35rem);line-height:1.5}
.practice-strip{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:75px;gap:clamp(.7rem,1.5vw,1.3rem);margin-top:clamp(4rem,8vw,8rem)}
.practice-photo{margin:0;overflow:hidden;border-radius:12px}
.practice-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.practice-photo:hover img{transform:scale(1.025)}
.practice-photo-a{grid-column:1/7;grid-row:1/7}.practice-photo-b{grid-column:8/13;grid-row:2/6}
.practice-photo-c{grid-column:2/6;grid-row:7/12}.practice-photo-d{grid-column:6/13;grid-row:7/13}
.practice-photo-e{grid-column:1/6;grid-row:12/16}
.spiral-beyond{position:relative;background:var(--spiral-green);color:var(--spiral-ink);overflow:hidden}
.beyond-sequence{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,2vw,2rem);align-items:start;margin-top:clamp(4rem,9vw,9rem)}
.beyond-item{margin:0}.beyond-item img{display:block;width:100%;border-radius:14px;object-fit:cover}
.beyond-item figcaption{text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;margin-top:.7rem}
.beyond-music{grid-column:1/8}.beyond-music img{aspect-ratio:4/3}
.beyond-stool{grid-column:8/13;margin-top:clamp(5rem,10vw,11rem)}.beyond-stool img{aspect-ratio:4/5}
.beyond-vitruve{grid-column:3/11;margin-top:clamp(4rem,8vw,8rem)}.beyond-vitruve img{aspect-ratio:16/10;object-fit:contain;background:#eee8dc}
.spiral-performance{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,7rem);align-items:center;background:var(--spiral-rust);color:#171714}
.spiral-performance-image img{width:100%;height:min(72vh,760px);object-fit:cover;border-radius:15px;display:block}
.spiral-performance-copy h2{font-family:var(--display);font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.045em;margin:.6rem 0 2rem}
.spiral-performance-copy>p:not(.project-type){font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.5;max-width:590px}
.spiral-project-link{display:inline-block;margin-top:1.4rem;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.2rem}
@media(max-width:760px){
 .spiral-hero-copy{width:min(100% - 2rem,1180px)}
 .spiral-hero-copy h1{font-size:clamp(4rem,21vw,7rem)}
 .spiral-hero-image{object-position:56% center}
 .spiral-section-heading,.spiral-performance{grid-template-columns:1fr}
 .spiral-section-text{padding-top:0}
 .practice-strip{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto}
 .practice-photo-a,.practice-photo-b,.practice-photo-c,.practice-photo-d,.practice-photo-e{grid-column:auto;grid-row:auto}
 .practice-photo-a{grid-column:1/3}.practice-photo-d{grid-column:1/3}
 .practice-photo img{aspect-ratio:4/5}
 .practice-photo-a img,.practice-photo-d img{aspect-ratio:16/10}
 .beyond-sequence{grid-template-columns:1fr 1fr}
 .beyond-music{grid-column:1/3}.beyond-stool{grid-column:2/3;margin-top:1rem}
 .beyond-vitruve{grid-column:1/3;margin-top:2rem}
 .spiral-performance-image img{height:auto;aspect-ratio:4/5}
}


/* ===== V1.5a review adjustments ===== */
.spiral-page .project-type{
  font-size:clamp(1rem,1.45vw,1.28rem);
  line-height:1.2;
  font-weight:700;
  letter-spacing:.105em;
}
.spiral-apparatus-image img{
  max-height:none;
  aspect-ratio:auto;
  object-fit:contain;
  background:transparent;
}
.spiral-section-heading-with-image{
  grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr);
  align-items:center;
}
.spiral-heading-copy{max-width:660px}
.spiral-heading-copy .spiral-section-text{padding-top:1.2rem}
.spiral-heading-image{margin:0}
.spiral-heading-image img{
  width:100%;
  max-height:680px;
  object-fit:cover;
  border-radius:15px;
  display:block;
}
.spiral-heading-image figcaption{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  margin-top:.7rem;
}
.spiral-practice .practice-strip{
  margin-top:clamp(3rem,7vw,7rem);
}
.spiral-practice .practice-photo-b{grid-column:1/6;grid-row:1/5}
.spiral-practice .practice-photo-c{grid-column:6/10;grid-row:2/7}
.spiral-practice .practice-photo-d{grid-column:9/13;grid-row:1/5}
.spiral-practice .practice-photo-e{grid-column:2/8;grid-row:7/12}
.beyond-sequence-two{
  grid-template-columns:repeat(12,1fr);
  margin-top:clamp(3rem,7vw,7rem);
}
.beyond-sequence-two .beyond-stool{grid-column:1/6;margin-top:0}
.beyond-sequence-two .beyond-vitruve{grid-column:6/13;margin-top:clamp(5rem,10vw,10rem)}
@media(max-width:760px){
  .spiral-section-heading-with-image{grid-template-columns:1fr}
  .spiral-heading-image{margin-top:1.5rem}
  .spiral-heading-image img{max-height:none;aspect-ratio:4/3}
  .spiral-practice .practice-photo-b,
  .spiral-practice .practice-photo-c,
  .spiral-practice .practice-photo-d,
  .spiral-practice .practice-photo-e{grid-column:auto;grid-row:auto}
  .spiral-practice .practice-photo-d{grid-column:1/3}
  .beyond-sequence-two .beyond-stool{grid-column:1/2}
  .beyond-sequence-two .beyond-vitruve{grid-column:1/3;margin-top:2rem}
}


/* ===== V1.5b image framing corrections ===== */

/* New hero asset name prevents the previous hero from being held by browser cache. */
.spiral-hero-image{
  object-position:center center;
}

/* "équi urban rabbits" deliberately displayed as a landscape image. */
.spiral-apparatus-image{
  width:min(1120px,100%);
}
.spiral-apparatus-image img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center center;
}

/* THE PRACTICE — individual framing.
   The first image is St-Brieuc, used beside the text. */
.spiral-practice .spiral-heading-image{
  overflow:hidden;
  border-radius:15px;
}
.spiral-practice .spiral-heading-image img{
  width:100%;
  height:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  /* more image above/below, less of the right side */
  object-position:38% 50%;
  transform:scale(.82);
  border-radius:0;
}

/* DSC_2388: reveal more of the right side. */
.practice-photo-c img{
  object-position:68% 50%;
}

/* MG_2972: reveal more of the bottom. */
.practice-photo-d img{
  object-position:50% 70%;
}

/* Separate DSC_2388 and MG_2972 so they no longer collide visually. */
.spiral-practice .practice-photo-c{
  grid-column:6/9;
  grid-row:2/7;
}
.spiral-practice .practice-photo-d{
  grid-column:10/13;
  grid-row:1/6;
}

/* Search for Godot: tighter frame on all sides, especially the bottom. */
.spiral-practice .practice-photo-e{
  grid-column:2/8;
  grid-row:7/12;
}
.practice-photo-e img{
  object-position:50% 43%;
  transform:scale(1.12);
}

/* Music research: tighter crop, more horizontal than the previous version. */
.spiral-beyond .spiral-heading-image{
  overflow:hidden;
  border-radius:15px;
}
.spiral-beyond .spiral-heading-image img{
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.22);
  border-radius:0;
}

/* With the display headline removed, keep the last section compact. */
.spiral-performance-copy .project-type{
  margin-bottom:1.6rem;
}

@media(max-width:760px){
  .spiral-practice .spiral-heading-image img{
    aspect-ratio:4/3;
    transform:scale(.88);
  }
  .spiral-practice .practice-photo-c,
  .spiral-practice .practice-photo-d,
  .spiral-practice .practice-photo-e{
    grid-column:auto;
    grid-row:auto;
  }
  .spiral-practice .practice-photo-d{
    grid-column:1/3;
  }
  .spiral-beyond .spiral-heading-image img{
    aspect-ratio:4/3;
    transform:scale(1.18);
  }
}


/* ===== V1.5c requested visual pass ===== */

/* Hero back to spirale hang; copy sits lower. */
.spiral-hero-copy{
  padding-bottom:clamp(1.35rem,3vw,2.6rem);
}

/* Portrait "équi en haut": square-ish portrait presentation with a 20% crop on all sides. */
.spiral-apparatus-image{
  width:min(760px,82%);
}
.spiral-apparatus-image img{
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.25);
  border-radius:15px;
}

/* Mini-titles temporarily use the same display face as the large editorial headings. */
.spiral-page .project-type{
  font-family:var(--display);
  font-size:clamp(2rem,3.7vw,3.5rem);
  line-height:.92;
  font-weight:400;
  letter-spacing:-.035em;
  text-transform:none;
}

/* Reduce "Where else can the Spiral lead?" so the mini-title can take more hierarchy. */
.spiral-beyond .spiral-heading-copy h2{
  font-size:clamp(2.25rem,4.6vw,4.5rem);
  line-height:.92;
}

/* New THE PRACTICE images: framing reset to zero/default. */
.spiral-practice .spiral-heading-image img{
  transform:none;
  object-position:center center;
  aspect-ratio:4/5;
}
.spiral-practice .practice-photo-c img{
  transform:none;
  object-position:center center;
}

/* Music research: show about 5% more at the top than V1.5b.
   Caption remains visible directly under the image. */
.spiral-beyond .spiral-heading-image{
  overflow:visible;
}
.spiral-beyond .spiral-heading-image img{
  transform:scale(1.15);
  transform-origin:center 55%;
  border-radius:15px;
}
.spiral-beyond .spiral-heading-image figcaption{
  display:block;
  position:relative;
  margin-top:1.15rem;
}

/* Human in Spiral is approximately square: make its frame match. */
.beyond-vitruve{
  grid-column:7/12;
}
.beyond-vitruve img{
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center center;
}

@media(max-width:760px){
  .spiral-apparatus-image{width:88%}
  .spiral-beyond .spiral-heading-copy h2{
    font-size:clamp(2rem,10vw,3.3rem);
  }
  .spiral-page .project-type{
    font-size:clamp(1.8rem,9vw,2.8rem);
  }
  .spiral-beyond .spiral-heading-image img{
    transform:scale(1.08);
    transform-origin:center 53%;
  }
  .beyond-vitruve{
    grid-column:1/3;
  }
}


/* ===== V1.5d — equi droit tighter crop ===== */
.spiral-apparatus-image img{
  transform:scale(2);
  object-position:center center;
}


/* ===== V1.5e — equi droit crop containment fix ===== */
.spiral-apparatus-image{
  width:min(760px,82%);
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:15px;
}
.spiral-apparatus-image img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.43);
  transform-origin:center center;
  border-radius:0;
}
@media(max-width:760px){
  .spiral-apparatus-image{
    width:88%;
    aspect-ratio:4/5;
  }
}


/* ===== V1.5f — typography and final image balance ===== */

/* Section mini-titles: black and slightly larger. */
.spiral-page .project-type{
  color:#000;
  font-size:clamp(2.3rem,4.25vw,4rem);
}

/* Secondary question: smaller and grey. */
.spiral-beyond .spiral-heading-copy h2{
  color:#62625e;
  font-size:clamp(1.85rem,3.6vw,3.5rem);
  line-height:.95;
}

/* Music research: keep caption outside the cropped visual frame. */
.spiral-beyond .spiral-heading-image{
  overflow:visible;
}
.spiral-beyond .spiral-heading-image img{
  display:block;
}
.spiral-beyond .spiral-heading-image figcaption{
  display:block;
  visibility:visible;
  color:var(--spiral-ink);
  margin-top:1.5rem;
  position:relative;
  z-index:5;
  transform:translateY(.35rem);
}

/* Human in Spiral: same whole image, simply smaller — no crop. */
.beyond-sequence-two .beyond-vitruve{
  grid-column:7/11;
  justify-self:center;
  width:100%;
}
.beyond-sequence-two .beyond-vitruve img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  transform:none;
}

/* Hero copy a touch higher than V1.5c/e. */
.spiral-hero-copy{
  padding-bottom:clamp(1.8rem,3.8vw,3.35rem);
}

@media(max-width:760px){
  .spiral-page .project-type{
    font-size:clamp(2rem,10vw,3.1rem);
  }
  .spiral-beyond .spiral-heading-copy h2{
    font-size:clamp(1.7rem,8vw,2.7rem);
  }
  .beyond-sequence-two .beyond-vitruve{
    grid-column:1/3;
    width:72%;
    justify-self:center;
  }
}


/* ===== V1.5g — typography, hero and practice spacing ===== */

/* Main section titles: bold. */
.spiral-page .project-type{
  font-weight:700;
}

/* Secondary question: explicitly light/regular. */
.spiral-beyond .spiral-heading-copy h2{
  font-weight:400;
}

/* Hero copy: move it another small step upward. */
.spiral-hero-copy{
  padding-bottom:clamp(2.5rem,5vw,4.5rem);
}

/* Music research: crop 20% from left and right inside its existing frame. */
.spiral-beyond .spiral-heading-image{
  overflow:visible;
}
.spiral-beyond .spiral-heading-image img{
  transform:scaleX(1.67) scaleY(1.15);
  transform-origin:center 55%;
}

/* DSCF2763: crop roughly 25% from the top. */
.spiral-practice .spiral-heading-image{
  overflow:hidden;
}
.spiral-practice .spiral-heading-image img{
  transform:scale(1.33);
  transform-origin:center bottom;
  object-position:center bottom;
}

/* Keep the same visual gutter between the practice images.
   The heading image and archive mosaic now use the same gap value. */
.spiral-practice{
  --practice-gap:clamp(.7rem,1.5vw,1.3rem);
}
.spiral-practice .spiral-section-heading-with-image{
  column-gap:var(--practice-gap);
}
.spiral-practice .practice-strip{
  gap:var(--practice-gap);
}
.spiral-practice .practice-photo-c,
.spiral-practice .practice-photo-d{
  margin:0;
}

@media(max-width:760px){
  .spiral-beyond .spiral-heading-image img{
    transform:scaleX(1.45) scaleY(1.08);
  }
  .spiral-practice .spiral-heading-image img{
    transform:scale(1.2);
    transform-origin:center bottom;
  }
}


/* ===== V1.5h — screenshot-based layout fixes ===== */

/* MUSIC RESEARCH
   Keep the crop INSIDE its column. Never enlarge the <img> beyond the text/image grid. */
.spiral-beyond .spiral-heading-image{
  position:relative;
  overflow:hidden;
  border-radius:15px;
  aspect-ratio:16/10;
}
.spiral-beyond .spiral-heading-image img{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  object-position:center 45%;
  transform:none;
  border-radius:0;
}
.spiral-beyond .spiral-heading-image figcaption{
  position:absolute;
  left:0;
  bottom:-1.7rem;
}
.spiral-beyond .spiral-section-heading-with-image{
  margin-bottom:2rem;
}
/* Put caption back outside without letting the image escape its column */
.spiral-beyond .spiral-heading-image{
  margin-bottom:1.8rem;
  overflow:hidden;
}
.spiral-beyond .spiral-heading-image figcaption{display:none;}
.spiral-beyond .spiral-heading-image::after{
  content:"MUSIC RESEARCH";
  position:absolute;
  left:0;
  bottom:.55rem;
  padding:.22rem .45rem;
  background:rgba(185,198,164,.9);
  color:var(--spiral-ink);
  font-size:.72rem;
  letter-spacing:.12em;
  line-height:1;
}

/* DSCF2763 — keep the same frame, but move the source image rightward
   so the Spiral sits more centrally in the visible crop. */
.spiral-practice .spiral-heading-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:32% 100%;
  transform:scale(1.33);
  transform-origin:32% 100%;
}

/* PRACTICE MOSAIC
   The previous grid positions created the huge vertical hole seen in the screenshot.
   Use a simple aligned three-image first row and a second row below, all with one gutter. */
.spiral-practice .practice-strip{
  --practice-gap:clamp(.9rem,1.5vw,1.35rem);
  display:grid;
  grid-template-columns:1.18fr .92fr .92fr;
  grid-auto-rows:auto;
  gap:var(--practice-gap);
  align-items:start;
}
.spiral-practice .practice-photo-b,
.spiral-practice .practice-photo-c,
.spiral-practice .practice-photo-d,
.spiral-practice .practice-photo-e{
  grid-column:auto;
  grid-row:auto;
  margin:0;
}
.spiral-practice .practice-photo-b img,
.spiral-practice .practice-photo-c img,
.spiral-practice .practice-photo-d img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  transform:none;
}
.spiral-practice .practice-photo-e{
  grid-column:1/3;
}
.spiral-practice .practice-photo-e img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}

/* Keep the first row visually aligned despite different source proportions. */
.spiral-practice .practice-photo-b,
.spiral-practice .practice-photo-c,
.spiral-practice .practice-photo-d{
  align-self:start;
}

@media(max-width:760px){
  .spiral-practice .practice-strip{
    grid-template-columns:1fr 1fr;
  }
  .spiral-practice .practice-photo-e{
    grid-column:1/3;
  }
  .spiral-practice .spiral-heading-image img{
    object-position:32% 100%;
    transform:scale(1.2);
    transform-origin:32% 100%;
  }
}


/* ===== V1.5i — pre-cropped replacement images ===== */

/* DSCF2763 square: use the supplied crop as-is. */
.spiral-practice .spiral-heading-image{
  aspect-ratio:auto;
  overflow:hidden;
}
.spiral-practice .spiral-heading-image img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  transform:none;
}

/* MG_2972 cropped + Search for Godot cropped: use supplied framing as-is. */
.spiral-practice .practice-photo-d img,
.spiral-practice .practice-photo-e img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  transform:none;
}

/* Music research square: use the supplied square crop as-is and keep it inside its column. */
.spiral-beyond .spiral-heading-image{
  aspect-ratio:auto;
  overflow:visible;
  border-radius:0;
}
.spiral-beyond .spiral-heading-image img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  transform:none;
  border-radius:15px;
}
.spiral-beyond .spiral-heading-image::after{
  content:none;
}
.spiral-beyond .spiral-heading-image figcaption{
  display:block;
  position:static;
  visibility:visible;
  margin-top:.75rem;
  padding:0;
  background:none;
  color:var(--spiral-ink);
  font-size:.72rem;
  letter-spacing:.12em;
  line-height:1.2;
  transform:none;
}

@media(max-width:760px){
  .spiral-practice .spiral-heading-image img,
  .spiral-beyond .spiral-heading-image img{
    transform:none;
    aspect-ratio:auto;
  }
}


/* ===== V1.5j — Spiral Roll square replacement ===== */
.spiral-practice .practice-photo-e img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
  object-position:center center;
  transform:none;
}

/* ===== V1.6 — About page ===== */
.about-page{--about-paper:#f0eee7;--about-peach:#e9c8a9;--about-green:#d8dfc7;}
.about-hero{position:relative;height:min(92vh,920px);min-height:680px;overflow:hidden;color:#fff;background:#241f1b;}
.about-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.about-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.02) 40%,rgba(0,0,0,.48));}
.about-hero-copy{position:absolute;left:var(--pad);bottom:clamp(3.5rem,8vh,6.5rem);max-width:1100px;}
.about-hero h1{margin:0;font-size:clamp(4.4rem,11.5vw,11rem);line-height:.77;letter-spacing:-.08em;font-weight:900;}
.about-hero-copy p{margin:1.8rem 0 0 .2rem;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(1.35rem,2.3vw,2.35rem);}
.about-page .about-section-title{font-family:Arial,Helvetica,sans-serif!important;font-size:clamp(2.7rem,5vw,5.7rem)!important;line-height:.9!important;font-weight:800;letter-spacing:-.055em;text-transform:uppercase;margin:0 0 clamp(2.5rem,5vw,4.5rem)!important;}
.about-page .about-text>p:not(.about-section-title){font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.1rem,1.55vw,1.48rem);line-height:1.55;max-width:42rem;margin:0 0 1.35rem;}
.about-life{background:var(--about-paper);display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(3rem,7vw,8rem);align-items:start;}
.about-life-images{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.5vw,1.4rem);align-items:start;padding-top:clamp(2rem,6vw,7rem);}
.about-archive{margin:0;overflow:hidden;border-radius:15px;}
.about-archive-wide{grid-column:1/3;}
.about-archive img{width:100%;height:auto;object-fit:contain;}
.about-archive-small{grid-column:2/3;width:88%;justify-self:end;}
.about-curiosity{background:var(--about-peach);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(3rem,7vw,8rem);align-items:center;}
.about-curiosity-images{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.9rem,1.5vw,1.4rem);align-items:end;}
.about-curiosity-images figure{margin:0;}
.about-making-image{grid-column:1/3;width:88%;}
.about-making-image img,.about-music-image img{border-radius:15px;}
.about-music-image{grid-column:2/3;margin-top:-12%!important;}
.about-music-image figcaption,.about-stool figcaption{margin-top:.7rem;font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:rgba(17,17,15,.62);}
.about-ideal{background:var(--about-green);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(3rem,8vw,9rem);align-items:center;}
.about-stool{margin:0;justify-self:end;width:min(100%,760px);}
.about-stool img{width:100%;height:auto;border-radius:15px;}
.about-page .contact{position:relative;}
@media(max-width:760px){
 .about-hero{height:82svh;min-height:620px;}
 .about-hero-image{object-position:center center;}
 .about-hero h1{font-size:clamp(4rem,20vw,6.8rem);}
 .about-life,.about-curiosity,.about-ideal{grid-template-columns:1fr;}
 .about-life-images{padding-top:1rem;}
 .about-curiosity-images{order:2;}
 .about-curiosity-copy{order:1;}
 .about-making-image{width:100%;}
 .about-music-image{margin-top:0!important;}
 .about-stool{justify-self:start;width:100%;}
}

/* ABOUT V1.7 — richer life archive + separated curiosity images */
.about-life-images{
  grid-template-columns:1.15fr .85fr;
  gap:clamp(.9rem,1.5vw,1.4rem);
}
.about-life-images figcaption{
  margin-top:.65rem;
  font-size:.66rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(17,17,15,.58);
}
.about-cily-documentary{
  grid-column:1/2;
  width:100%;
  align-self:start;
}
.about-cily-bass{
  grid-column:2/3;
  width:82%;
  justify-self:end;
  align-self:start;
}
.about-curiosity-images{
  gap:clamp(1.25rem,2.4vw,2.2rem);
  align-items:start;
}
.about-making-image{
  grid-column:1/3;
  width:88%;
  margin:0;
}
.about-music-image{
  grid-column:2/3;
  margin:0!important;
  width:100%;
}
@media(max-width:760px){
  .about-cily-documentary,
  .about-cily-bass{
    grid-column:auto;
    width:100%;
    justify-self:stretch;
  }
  .about-making-image,
  .about-music-image{
    grid-column:1/3;
    width:100%;
    margin:0!important;
  }
}

/* ABOUT V1.8 — looser life collage + curiosity image rebalance */
.about-life-images{
  grid-template-columns:1fr 1fr;
  gap:clamp(1.15rem,2vw,2rem);
  align-items:start;
}
.about-life-images .about-archive-wide{
  grid-column:1/2;
  width:100%;
  margin-top:clamp(1rem,3vw,3rem);
}
.about-life-images .about-archive-small{
  grid-column:2/3;
  width:82%;
  justify-self:end;
  margin-top:0;
}
.about-life-images .about-cily-documentary{
  grid-column:2/3;
  width:100%;
  margin-top:clamp(1rem,2vw,2rem);
}
.about-life-images .about-cily-bass{
  grid-column:1/2;
  width:88%;
  justify-self:start;
  margin-top:clamp(-1rem,-1vw,0rem);
}
.about-curiosity-images{
  grid-template-columns:.82fr 1.18fr;
  gap:clamp(1.5rem,2.8vw,2.7rem);
  align-items:center;
}
.about-making-image{
  grid-column:1/2;
  width:88%;
  justify-self:start;
  margin:0;
}
.about-music-image{
  grid-column:2/3;
  width:100%;
  justify-self:end;
  margin:0!important;
}
@media(max-width:760px){
  .about-life-images .about-archive-wide,
  .about-life-images .about-archive-small,
  .about-life-images .about-cily-documentary,
  .about-life-images .about-cily-bass{
    grid-column:auto;
    width:100%;
    margin-top:0;
    justify-self:stretch;
  }
  .about-curiosity-images{
    grid-template-columns:1fr 1.18fr;
  }
  .about-making-image{
    grid-column:1/2;
    width:92%;
  }
  .about-music-image{
    grid-column:2/3;
    width:100%;
  }
}

/* ABOUT V1.9 — swap collective/documentary positions + enlarge conception */
.about-life-images .about-archive-wide{
  grid-column:1/2;
  grid-row:1;
}
.about-life-images .about-cily-documentary{
  grid-column:2/3;
  grid-row:1;
  width:82%;
  justify-self:end;
  margin-top:0;
}
.about-life-images .about-cily-bass{
  grid-column:1/2;
  grid-row:2;
}
.about-life-images .about-archive-small{
  grid-column:2/3;
  grid-row:2;
  width:100%;
  justify-self:stretch;
  margin-top:clamp(1rem,2vw,2rem);
}
.about-making-image{
  width:100%;
}
@media(max-width:760px){
  .about-life-images .about-archive-wide,
  .about-life-images .about-archive-small,
  .about-life-images .about-cily-documentary,
  .about-life-images .about-cily-bass{
    grid-row:auto;
  }
  .about-making-image{width:100%;}
}

/* ABOUT V1.10 — fine-tune image scale */
.about-life-images .about-archive-wide{
  width:108%;
  max-width:none;
}
.about-curiosity-images{
  grid-template-columns:1fr 1fr;
}
.about-making-image,
.about-music-image{
  width:100%;
}
@media(max-width:760px){
  .about-life-images .about-archive-wide{width:100%;}
  .about-curiosity-images{grid-template-columns:1fr 1fr;}
}

/* ABOUT V1.11 — photo credits on-image + curiosity vertical rhythm */
.about-cily-documentary,
.about-cily-bass,
.about-music-image{
  position:relative;
}
.about-cily-documentary figcaption,
.about-cily-bass figcaption,
.about-music-image figcaption{
  position:absolute;
  right:.55rem;
  bottom:.45rem;
  z-index:2;
  margin:0;
  padding:.18rem .3rem;
  font-size:.52rem;
  line-height:1.15;
  letter-spacing:.055em;
  text-transform:none;
  color:rgba(255,255,255,.82);
  text-shadow:0 1px 3px rgba(0,0,0,.72);
  background:rgba(0,0,0,.08);
  border-radius:3px;
}
.about-curiosity-images{
  align-items:start;
}
.about-making-image{
  transform:translateY(clamp(-2.8rem,-4vw,-1.25rem));
}
.about-music-image{
  transform:translateY(clamp(1.5rem,3vw,3rem));
}
@media(max-width:760px){
  .about-making-image{transform:translateY(-.65rem);}
  .about-music-image{transform:translateY(.65rem);}
}


/* ABOUT V1.12 — stronger curiosity offset + unified photo credits */
.about-making-image{transform:translateY(clamp(-5.2rem,-7vw,-2.8rem));}
.about-music-image{transform:translateY(clamp(3.2rem,5vw,5.2rem));}
.image-credit{
  position:absolute; right:.5rem; bottom:.4rem; z-index:5; margin:0;
  padding:.14rem .26rem; font-size:.48rem; line-height:1.1; letter-spacing:.045em;
  color:rgba(255,255,255,.86); text-shadow:0 1px 3px rgba(0,0,0,.78);
  background:rgba(0,0,0,.10); border-radius:3px;
}
.about-archive, .about-stool, .spiral-apparatus-image, .spiral-heading-image, .practice-photo, .beyond-item{position:relative;}
.spiral-hero{position:relative;}
.spiral-hero-credit{bottom:.55rem; right:.65rem;}
.about-stool > .image-credit, .beyond-stool > .image-credit{bottom:2.1rem;}
@media(max-width:760px){
  .about-making-image{transform:translateY(-1.25rem);}
  .about-music-image{transform:translateY(1.25rem);}
}


/* ABOUT V1.13 — stronger curiosity offset + one credit style everywhere */
.about-making-image{transform:translateY(clamp(-7.4rem,-10vw,-4.6rem));}
.about-music-image{transform:translateY(clamp(5.1rem,7.5vw,7.4rem));}
.image-credit,
.about-cily-documentary figcaption,
.about-cily-bass figcaption,
.about-music-image figcaption{
  position:absolute; right:.5rem; bottom:.4rem; z-index:5; margin:0;
  padding:.14rem .26rem; font-family:var(--sans); font-size:.48rem; font-weight:400;
  line-height:1.1; letter-spacing:.045em; text-transform:none;
  color:rgba(255,255,255,.86); text-shadow:0 1px 3px rgba(0,0,0,.78);
  background:rgba(0,0,0,.10); border-radius:3px;
}
@media(max-width:760px){
  .about-making-image{transform:translateY(-2rem);}
  .about-music-image{transform:translateY(2rem);}
}


/* ABOUT V1.14 — explicit credit specificity + stronger curiosity stagger */
/* The older .about-life-images figcaption rule was more specific than
   .image-credit, which made the François Alaitru credits larger. */
.about-life-images figcaption.image-credit,
.about-cily-documentary figcaption.image-credit,
.about-cily-bass figcaption.image-credit,
.about-music-image figcaption.image-credit,
.image-credit{
  position:absolute;
  right:.5rem;
  bottom:.4rem;
  z-index:5;
  margin:0;
  padding:.14rem .26rem;
  font-family:var(--sans);
  font-size:.48rem;
  font-weight:400;
  line-height:1.1;
  letter-spacing:.045em;
  text-transform:none;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 3px rgba(0,0,0,.78);
  background:rgba(0,0,0,.10);
  border-radius:3px;
}

/* Make the two Curiosity images clearly start at different heights. */
.about-making-image{
  transform:translateY(clamp(-9.5rem,-12vw,-6.2rem));
}
.about-music-image{
  transform:translateY(clamp(6.5rem,9vw,9rem));
}

@media(max-width:760px){
  .about-making-image{transform:translateY(-2.75rem);}
  .about-music-image{transform:translateY(2rem);}
}


/* ===== V1.15 — fix Spiral credit specificity + Curiosity stagger ===== */

/* Some older Circus Spiral figcaption selectors were more specific than
   the shared .image-credit rule. Force every on-image credit to the same type. */
.spiral-page .spiral-heading-image figcaption.image-credit,
.spiral-page .practice-photo figcaption.image-credit,
.spiral-page .spiral-apparatus-image figcaption.image-credit,
.spiral-page .beyond-item .image-credit,
.spiral-page .image-credit{
  position:absolute;
  right:.5rem;
  bottom:.4rem;
  z-index:5;
  margin:0;
  padding:.14rem .26rem;
  font-family:var(--sans);
  font-size:.48rem;
  font-weight:400;
  line-height:1.1;
  letter-spacing:.045em;
  text-transform:none;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 3px rgba(0,0,0,.78);
  background:rgba(0,0,0,.10);
  border-radius:3px;
}

/* Do not use transform here: .reveal/.visible also controls transform,
   which was cancelling the previous vertical positioning. */
.about-curiosity-images{
  align-items:start;
}
.about-making-image{
  position:relative;
  top:clamp(-9.5rem,-12vw,-6.2rem);
  transform:none;
}
.about-music-image{
  position:relative;
  top:clamp(6.5rem,9vw,9rem);
  transform:none;
}
.about-making-image.reveal,
.about-making-image.reveal.visible,
.about-music-image.reveal,
.about-music-image.reveal.visible{
  transform:none;
}

@media(max-width:760px){
  .about-making-image{top:-2.75rem;}
  .about-music-image{top:2rem;}
}

/* ===== V1.21 — consolidated final responsive fixes ===== */

/* Photo credits that belong to a figure with a separate text caption
   are positioned relative to the photo itself. */
.spiral-page .beyond-photo-wrap{
  position:relative;
}
.spiral-page .beyond-photo-wrap > img{
  display:block;
  width:100%;
}
.spiral-page .beyond-photo-wrap .image-credit{
  right:.5rem;
  bottom:.4rem;
}

/* Accepted V1.20 mobile layout, consolidated here instead of duplicated
   across inline HTML and successive patch blocks. */
@media (max-width:760px){
  .site-header .menu-toggle{
    color:#d7a8e8 !important;
  }

  .spiral-page .beyond-sequence-two{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:3.5rem !important;
    padding-inline:2.4rem !important;
  }
  .spiral-page .beyond-sequence-two .beyond-stool,
  .spiral-page .beyond-sequence-two .beyond-vitruve{
    grid-column:1 !important;
    width:68vw !important;
    max-width:420px !important;
    margin:0 !important;
  }
  .spiral-page .beyond-sequence-two .beyond-stool{
    justify-self:start !important;
  }
  .spiral-page .beyond-sequence-two .beyond-vitruve{
    justify-self:end !important;
  }
  .spiral-page .beyond-sequence-two img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }

  .about-page .about-life-images{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:1.15rem 1rem !important;
    padding:1.5rem 2.2rem 0 !important;
  }
  .about-page .about-life-images > figure{
    position:relative !important;
    inset:auto !important;
    width:100% !important;
    max-width:none !important;
    transform:none !important;
    justify-self:stretch !important;
  }
  .about-page .about-life-images .about-archive-wide{
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 !important;
  }
  .about-page .about-life-images .about-archive-small{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:2.2rem 0 0 !important;
  }
  .about-page .about-life-images .about-cily-documentary{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
  }
  .about-page .about-life-images .about-cily-bass{
    grid-column:1 !important;
    grid-row:2 / span 2 !important;
    margin:1.2rem 0 0 !important;
  }
  .about-page .about-life-images img{
    display:block !important;
    width:100% !important;
    height:auto !important;
  }
}