/* Layout & components. Colours and fonts come from variables.css —
   to change the look of the site, edit variables.css, not this file. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--color-link); text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }
::selection { background: var(--color-text); color: var(--color-bg); }

.u-line { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--speed) var(--ease), color .3s; }
.u-line:hover, .u-line:focus-visible { background-size: 100% 1px; }

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

/* ---------- Header / navigation ---------- */
.site-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px var(--gutter) 14px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  position: sticky; top: 0; z-index: 50;          /* menu stays at the top while scrolling */
  background: var(--color-bg);
  flex-wrap: wrap; row-gap: 6px; column-gap: 12px;
}
.mark { font-weight: 500; }
.nav { display: flex; gap: clamp(12px, 2.4vw, 36px); }
.nav a, .mark {
  display: inline-block; padding: 4px 0;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--speed) var(--ease), color .3s;
}
.nav a:hover, .nav a:focus-visible, .mark:hover { background-size: 100% 1px; }
.nav a[aria-current="page"] { background-size: 100% 1px; }
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: var(--gutter); background: var(--color-bg); padding: 6px 10px; z-index: 50; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Small shared typography ---------- */
.label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.num { font-variant-numeric: tabular-nums; color: var(--color-muted); }
.hand { font-family: var(--font-hand); font-weight: 400; letter-spacing: .01em; }
.wide {
  font-family: var(--font-wide);
  font-stretch: var(--wide-stretch);
  font-variation-settings: "wdth" 125;
  font-weight: var(--wide-weight);
  letter-spacing: -.02em; line-height: .78;
  text-transform: uppercase;
}

/* ---------- Giant word (PORTFOLIO / TEDUFASH) ---------- */
.bigword {
  overflow: hidden;
  color: var(--color-accent);
  padding-top: 4vw;
  user-select: none;
}
.bigword__text {
  display: block; width: max-content; white-space: nowrap;
  margin-left: -0.035em;
  transform: translateY(12%);   /* bottom slightly cropped by the page edge */
}

/* =========================================================
   ABOUT
   ========================================================= */
@font-face {                          /* thick marker handwriting for "About me" (SIL Open Font License) */
  font-family: "Shantell Sans";
  src: url("../../assets/fonts/ShantellSans-Variable.ttf") format("truetype");
  font-weight: 300 800; font-display: swap;
}

/* ABOUT page: white paper, black ink. The CV below keeps the dark look. */
body[data-page="about"] { background: var(--about-bg); }
body[data-page="about"] .cv { background: var(--color-bg); }
body[data-page="about"] .site-header {
  background: transparent;
  --color-link: #fff; color: #fff;
  mix-blend-mode: difference;       /* menu reads black on the white About part, white over the dark CV */
}
body[data-page="about"] .nav { gap: clamp(18px, 3vw, 56px); }
body[data-page="about"] .nav a { font-size: clamp(11px, .85vw, 15px); letter-spacing: .16em; }

.about {
  position: relative; overflow: hidden;
  background: var(--about-bg); color: var(--about-ink);
  padding: 0 var(--gutter) clamp(24px, 2vw, 40px);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* portrait: top centre */
.about__portrait { position: relative; z-index: 1; width: 20.8vw; margin: 0 auto; }
.about__portrait img { width: 100%; height: auto; }
/* "helin" left, "ergin" right */
.about__tag {
  position: absolute; z-index: 2;
  font-size: clamp(30px, 3.9vw, 80px); line-height: 1; color: var(--about-ink);
}
.about__tag--l { left: 7vw;  top: 12.6vw; transform: rotate(-3deg); }
.about__tag--r { right: 11vw; top: 12vw;  transform: rotate(2deg); }
/* the giant handwritten "About me" */
.about__title {
  position: relative; z-index: 3;
  display: block; width: max-content; margin: -3.4vw auto 0;
  font-family: "Shantell Sans", var(--font-hand);
  font-weight: 700;
  font-variation-settings: "INFM" 100, "BNCE" 60, "SPAC" 0;   /* informal + bouncy = hand-drawn marker */
  line-height: .95; letter-spacing: .035em;
  color: var(--about-ink);
}
.about__title span {
  display: inline-block; white-space: nowrap;
  transform: scaleY(1.5); transform-origin: 50% 80%;   /* tall, narrow marker letters like the reference; they grow upward over the photo */
}
/* description: large centred intro + small staggered block */
.about__lead {
  position: relative; z-index: 3;
  width: min(44vw, 900px); margin: 2.4vw auto 0;
  font-size: clamp(16px, 1.62vw, 34px); line-height: 1.02; text-align: center; letter-spacing: -.005em;
}
.about__more { width: clamp(240px, 22vw, 460px); margin: 1vw 0 0 47.6vw; font-size: clamp(12px, .78vw, 16px); line-height: 1.04; }
.about__more p + p { margin-left: 5.7vw; }         /* the stepped indent from the reference */
.about__doodle {
  position: absolute; right: 4.2vw; bottom: .6vw; z-index: 1;
  height: 17.4vw; width: auto; mix-blend-mode: multiply;   /* white paper disappears, only the lines show */
}

/* small looping video in a coloured strip between ABOUT and CV */
.video-band {
  background: var(--video-band);
  height: clamp(110px, 11vw, 170px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.video-band__video {
  height: 92%; width: auto; aspect-ratio: 960 / 492; display: block;
  mix-blend-mode: lighten;   /* the video's dark background melts into the strip colour, only the horse shows */
}

@media (max-width: 700px) {
  body[data-page="about"] .nav { gap: 14px; }
  .about__portrait { width: 60vw; margin-top: 8px; }
  .about__tag { font-size: 8vw; }
  .about__tag--l { left: 1vw; top: 30vw; }
  .about__tag--r { right: 1vw; top: 50vw; }
  .about__title { margin-top: -6vw; }
  .about__lead { width: 100%; margin-top: 6px; font-size: 18px; line-height: 1.12; }
  .about__more { width: auto; margin: 18px 4vw 0 8vw; font-size: 13px; line-height: 1.2; }
  .about__more p + p { margin-left: 10vw; }
  .about__doodle { position: static; display: block; height: 40vw; margin: 18px 4vw 0 auto; }
}

/* =========================================================
   CV
   ========================================================= */
.cv { padding: 0 var(--gutter) clamp(80px, 10vw, 160px); border-top: 1px solid var(--color-border); scroll-margin-top: 58px; }
.cv__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  padding: 26px 0 22px; border-bottom: 1px solid var(--color-border);
}
.cv__title { font-size: 12px; letter-spacing: .42em; font-weight: 400; }
.cv__word { font-size: clamp(64px, 9vw, 150px); line-height: .8; padding: 40px 0 10px; }

.cv__grid {
  display: grid;
  grid-template-columns: minmax(0, .75fr) minmax(0, 1.45fr) minmax(0, 1.45fr);
}
.cv__col { padding: 36px clamp(16px, 2.4vw, 40px) 0; border-left: 1px solid var(--color-border); }
.cv__col:first-child { padding-left: 0; border-left: 0; }
.cv__col:last-child { padding-right: 0; }
.cv__block + .cv__block { margin-top: 36px; padding-top: 32px; border-top: 1px solid var(--color-border); }
.cv h3 { font-size: 12px; font-weight: 500; letter-spacing: .34em; margin-bottom: 18px; }
.cv p, .cv li { font-size: 14px; color: var(--color-text); }
.cv .muted { color: var(--color-muted); }
.cv__list li { padding: 3px 0; letter-spacing: .04em; }
.cv__contact li { display: flex; gap: 12px; padding: 4px 0; }
.cv__contact .k { width: 58px; flex: none; color: var(--color-muted); font-size: 11px; letter-spacing: .12em; padding-top: 3px; }
.cv__contact a:hover { color: var(--color-hover); }
.cv__summary { font-size: 16px !important; line-height: 1.6; color: var(--color-text); max-width: 52ch; }

.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 6px; width: 1px; background: var(--color-border); }
.timeline__item { position: relative; }
.timeline__item + .timeline__item { margin-top: 26px; }
.timeline__item::before { content: ""; position: absolute; left: -26px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-text); }
.timeline strong { font-weight: 600; display: block; }
.timeline ul { margin-top: 10px; }
.timeline ul li { position: relative; padding: 0 0 7px 16px; color: var(--color-muted); line-height: 1.5; }
.timeline ul li::before { content: "—"; position: absolute; left: 0; color: var(--color-border); }

.cv__split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; }
.soft li span:first-child { white-space: nowrap; }
.cv__split > div + div { border-left: 1px solid var(--color-border); padding-left: clamp(14px, 2vw, 28px); }
.cv__split > div:first-child { padding-right: clamp(14px, 2vw, 28px); }
.soft li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 0; }
.dots { display: inline-flex; gap: 3px; flex: none; }
.dots i { width: 9px; height: 9px; border: 1px solid var(--color-text); display: block; }
.dots i.on { background: var(--color-text); }

@media (max-width: 1080px) {
  .cv__grid { grid-template-columns: 1fr 1fr; }
  .cv__col:nth-child(3) { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); margin-top: 40px; }
  .cv__col:nth-child(2) { padding-right: 0; }
}
@media (max-width: 700px) {
  .cv__grid { grid-template-columns: 1fr; }
  .cv__col { border-left: 0; padding-left: 0; padding-right: 0; }
  .cv__col + .cv__col { border-top: 1px solid var(--color-border); margin-top: 36px; }
  .cv__split { grid-template-columns: 1fr; }
  .cv__split > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-border); margin-top: 28px; padding-top: 28px; }
  .cv__split > div:first-child { padding-right: 0; }
  .cv__title { letter-spacing: .24em; font-size: 11px; }
}

/* ---------- Background texture (PORTFOLIO page) ---------- */
.textured::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--texture-image) center / cover no-repeat;
  opacity: var(--texture-opacity);
  filter: saturate(var(--texture-saturation));
}

/* =========================================================
   PORTFOLIO INDEX
   ========================================================= */
.board { padding: clamp(18px, 3vw, 48px) var(--gutter) clamp(60px, 8vw, 120px); }
.board__panel {
  background: var(--color-panel);
  color: var(--color-panel-text);
  padding: clamp(14px, 2.4vw, 40px) clamp(16px, 3.2vw, 56px) clamp(14px, 2vw, 32px);
  overflow: hidden;              /* thumbnails can lean but never leave the box */
}
.board__rows { list-style: none; }
.row { border-bottom: 1px solid var(--color-panel-line); position: relative; }
.row__link {
  display: flex; align-items: flex-start; gap: .6em;
  position: relative; color: inherit;
  height: clamp(70px, 8vw, 146px);
  padding-top: clamp(4px, .5vw, 8px);
}
.row__title {
  font-family: var(--font-tall);
  font-size: clamp(62px, 7.8vw, 142px);
  line-height: .8; letter-spacing: -.01em;
  text-transform: lowercase;
  transition: transform .5s var(--ease);
}
.row__num, .thumb__num { font-size: 10px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.row__num { padding-top: .6em; }
.row__link:hover .row__title, .row__link:focus-visible .row__title { transform: translateX(8px); }

.thumb {
  position: absolute; z-index: 2;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%);
  transform: rotate(calc(var(--r) * 1deg));
  transition: transform .5s var(--ease);
}
.thumb img, .thumb picture { width: 100%; height: auto; }
.thumb .spread { display: grid; grid-template-columns: 1fr 1fr; }
.thumb__num { position: absolute; top: 0; left: calc(100% + 8px); white-space: nowrap; }
.row__link:hover .thumb, .row__link:focus-visible .thumb { transform: rotate(calc(var(--r) * 1deg)) scale(1.04); }

.board__foot { padding-top: clamp(18px, 2.4vw, 40px); }
.board__word {
  color: var(--color-panel-text);
  display: block; white-space: nowrap; width: max-content;
  line-height: .74; margin-bottom: -.02em;
}

@media (max-width: 700px) {
  .board { padding-inline: 12px; }
  .row__link { height: 26vw; }
  .row__title { font-size: 17vw; }
  .thumb__num { display: none; }
  /* phones: thumbnails line up on the right so they never cover the names */
  .thumb { left: calc(56% + var(--x) * .28%); width: 15%; }
  .thumb:has(.spread) { width: 22%; }
}
@media (prefers-reduced-motion: reduce) { .thumb, .row__title { transition: none; } }

/* =========================================================
   PROJECT PAGES — shared
   ========================================================= */
.project { padding: clamp(40px, 6vw, 90px) 0 0; }
.project__head {
  display: flex; gap: 18px; align-items: baseline;
  padding: 0 var(--gutter); margin-bottom: clamp(40px, 7vw, 110px);
  font-size: 11px; letter-spacing: .16em;
}
.project__head h1 { font-size: 11px; font-weight: 500; letter-spacing: .16em; }

.spread { display: grid; grid-template-columns: 1fr 1fr; }
.spread picture, .spread img { width: 100%; height: auto; }

.sec { padding: 0 var(--gutter); margin-bottom: clamp(90px, 14vw, 240px); position: relative; }
.sec--full { padding: 0; }
.w-full   { width: 100%; }
.w-large  { width: 78%; }
.w-medium { width: 58%; }
.w-small  { width: 40%; }
.a-left   { margin-right: auto; }
.a-center { margin-inline: auto; }
.a-right  { margin-left: auto; }

/* MAGAZINE page only: burgundy background (colour set in variables.css) */
body[data-render="magazine"] { --color-bg: var(--magazine-bg); }

.overlap { position: relative; padding-bottom: 16%; }
.overlap__main { width: 82%; }
.overlap__inset {
  position: absolute; right: 0; bottom: 0; width: 44%;
  box-shadow: 0 0 0 10px var(--color-bg);  /* thin black cut around the overlapping image */
  z-index: 2;
}
.pair { display: flex; gap: clamp(14px, 3vw, 50px); align-items: flex-end; }
.pair > :first-child { width: 58%; }
.pair > :last-child { width: 34%; margin-bottom: 12%; }
.solo { width: 52%; }

.next {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 28px var(--gutter) 40px; border-top: 1px solid var(--color-border);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.next a { transition: color .3s; }
.next a:hover, .next a:focus-visible { color: var(--color-hover); }

@media (max-width: 1080px) {
  .w-large { width: 90%; }
  .w-medium { width: 76%; }
  .w-small { width: 56%; }
}
@media (max-width: 700px) {
  .sec { margin-bottom: 80px; }
  .w-large, .w-medium { width: 100%; }
  .w-small { width: 72%; }
  .overlap { padding-bottom: 0; }
  .overlap__main { width: 100%; }
  /* small spread only overlaps the right half, so the caption at the bottom-left stays readable */
  .overlap__inset { position: relative; width: 52%; margin: -3% 0 0 auto; box-shadow: 0 0 0 6px var(--color-bg); }
  .pair { flex-direction: column; align-items: stretch; }
  .pair > :first-child, .pair > :last-child { width: 100%; margin: 0; }
  .solo { width: 100%; }
}

/* MAGAZINE: opening cover — black & white background, giant word, colour image on top */
.cover { position: relative; overflow: hidden; margin-top: clamp(30px, 5vw, 80px); color: var(--color-text); }
.cover__bg { filter: var(--cover-filter); }
.cover__corner, .cover__line, .cover__tag {
  position: absolute; z-index: 4; margin: 0;
  font-size: clamp(9px, 1vw, 15px); letter-spacing: .06em; font-weight: 500; text-transform: uppercase;
}
.cover__corner { right: 6%; top: 5%; }
.cover__word {
  position: absolute; z-index: 2; left: 50%; top: 20%;
  transform: translateX(-50%);
  color: var(--color-text); line-height: .72; white-space: nowrap;
}
.cover__word span { display: block; width: max-content; }
.cover__img {
  position: absolute; z-index: 3;
  left: 8%; top: 8%; width: 84%;         /* colour image, centred on the black & white one */
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.cover__line { left: 60%; top: 88%; display: flex; gap: 7vw; white-space: nowrap; }
.cover__tag { left: 46%; top: 95%; }

/* MAGAZINE: horizontal WebGL gallery */
.mgallery {
  position: relative; outline: none;
  margin-top: clamp(10px, 3vw, 40px); margin-bottom: clamp(60px, 8vw, 120px);
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;                     /* vertical page scroll still works, horizontal swipes move the gallery */
}
.mgallery__canvas { display: block; width: 100%; height: min(78vh, 46vw); }
.mgallery.has-gl .mgallery__fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mgallery.no-gl .mgallery__canvas { display: none; }
.mgallery.no-gl .mgallery__fallback {
  display: flex; gap: 4vw; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 20vw;
}
.mgallery.no-gl .mgallery__item { flex: 0 0 60vw; scroll-snap-align: center; margin: 0; }
.mgallery__count {
  text-align: center; margin-top: clamp(14px, 2vw, 28px);
  font-size: 11px; letter-spacing: .16em; font-variant-numeric: tabular-nums;
}
/* small white dot that follows the mouse (like the reference) */
.mgallery__dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--color-text); pointer-events: none; opacity: 0; transition: opacity .3s;
}
@media (hover: hover) and (pointer: fine) {
  .mgallery.has-gl { cursor: none; }
  .mgallery.is-hover .mgallery__dot { opacity: 1; }
}
.mgallery:focus-visible { outline: 1px solid var(--color-focus); outline-offset: -1px; }
@media (max-width: 700px) { .mgallery__canvas { height: 64vw; } }

/* TEDUFASH: 3D card stack (tilted pile that spreads on hover / tap) */
.stack3d-sec {
  position: relative;
  display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center;
  padding: 0 var(--gutter);
}
.stack3d__side { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); }
.stack3d__side--r { text-align: right; }
.stack3d {
  --w: min(62vw, 820px);                       /* card width */
  position: relative;
  width: var(--w);
  height: calc(var(--w) / 1.414 * 1.75);       /* room for the cards to spread */
  perspective: 1800px;
  perspective-origin: 50% 10%;                 /* seen slightly from above, like the reference */
  /* no preserve-3d: cards are painted in order (front card on top), so tilted cards never cut into each other */
  outline: none;
}
.stack3d__card {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); padding: 0; border: 0; margin: 0;
  background: #111; cursor: pointer;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) rotateX(58deg);
  transition: transform .8s cubic-bezier(.22, .8, .22, 1), box-shadow .8s ease;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.stack3d__card .spread { pointer-events: none; }
.stack3d__card.is-active { box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); }
.stack3d__card:focus-visible { outline: 1px solid var(--color-focus); outline-offset: 4px; }
@media (max-width: 700px) {
  .stack3d-sec { grid-template-columns: 1fr 1fr; row-gap: 20px; }
  .stack3d { --w: 88vw; grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .stack3d__side--l { grid-row: 1; } .stack3d__side--r { grid-row: 1; }
}
@media (prefers-reduced-motion: reduce) { .stack3d__card { transition-duration: .01s; } }
/* keep the giant TEDUFASH word clear of the spread-out cards */
.stack3d-sec { margin-bottom: 0; }
.stack3d-sec + .sec--bigword { margin-top: clamp(40px, 6vw, 100px); }

/* TEDUFASH: giant word overlapping the end of the last image */
.sec--bigword { padding: 0; margin-top: calc(clamp(90px, 14vw, 240px) * -1 - 0.5vw); margin-bottom: 0; }
.sec--bigword .bigword { padding-top: 0; }

/* =========================================================
   POSTERS — flipbook
   ========================================================= */
.book-page { min-height: 100svh; display: flex; flex-direction: column; }
.book-page .project { flex: 1; display: flex; flex-direction: column; padding-top: 28px; }
.book-page .project__head { margin-bottom: 20px; }
.stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 var(--gutter) 10px; background: var(--color-bg);
}
/* POSTERS page background: the cover spread, darkened a little so the white text stays readable */
.posters-bg::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(rgba(0,0,0,var(--posters-bg-dim)), rgba(0,0,0,var(--posters-bg-dim))),
    var(--posters-bg) center / cover no-repeat;
}
.posters-bg .stage { background: transparent; }
.posters-bg .site-header { background: transparent; }
.posters-bg .stage:fullscreen, .posters-bg .stage.is-full { background: var(--color-bg); }
.stage:fullscreen, .stage.is-full { padding: 20px; }
.stage.is-full { position: fixed; inset: 0; z-index: 100; }
.book-wrap {
  /* two A4 pages side by side, as large as the screen allows */
  width: min(100%, calc((100svh - 200px) * 1.4142));
  position: relative;
}
.stage:fullscreen .book-wrap, .stage.is-full .book-wrap { width: min(100%, calc((100vh - 110px) * 1.4142)); }
.book { margin: 0 auto; }
.book .page { background: var(--color-bg); overflow: hidden; }
.book .page picture, .book .page img { width: 100%; height: 100%; object-fit: contain; }
.book-controls {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px);
  padding: 18px 0 8px; font-size: 11px; letter-spacing: .16em; color: var(--color-muted);
}
.book-controls button {
  background: none; border: 0; color: var(--color-text); font: inherit; letter-spacing: inherit;
  padding: 8px 4px; cursor: pointer; text-transform: uppercase;
  background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-size: 0 1px; background-repeat: no-repeat;
  transition: background-size var(--speed) var(--ease), opacity .3s;
}
.book-controls button:hover, .book-controls button:focus-visible { background-size: 100% 1px; }
.book-controls button:disabled { opacity: .25; cursor: default; background-size: 0 1px; }
.book-count { min-width: 9ch; text-align: center; font-variant-numeric: tabular-nums; color: var(--color-text); }
.book-hint { font-size: 10px; letter-spacing: .14em; color: var(--color-muted); text-align: center; padding-bottom: 14px; }
@media (max-width: 700px) {
  /* phones: still a two-page spread, as wide as the screen allows */
  .stage { padding-inline: 6px; }
  .book-wrap { width: min(100%, calc((100svh - 230px) * 1.4142)); }
  .stage:fullscreen .book-wrap, .stage.is-full .book-wrap { width: min(100%, calc((100vh - 120px) * 1.4142)); }
}

/* =========================================================
   CTLAB — photo frames on a beige surface
   ========================================================= */
/* this page only: beige background, black text (colours in variables.css) */
body[data-render="ctlab"] {
  --color-bg: var(--ctlab-bg);
  --color-text: var(--ctlab-ink);
  --color-link: var(--ctlab-ink);
  --color-muted: var(--ctlab-muted);
  --color-border: var(--ctlab-line);
  --color-hover: var(--ctlab-muted);
  --color-focus: var(--ctlab-ink);
}
.ctlab { padding-top: clamp(20px, 3vw, 40px); }
/* texture behind the CTLAB page — white melts into the background, only the dark marks show */
body[data-render="ctlab"]::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    var(--ctlab-texture-left) left bottom / auto 100% no-repeat,     /* stems, left corner */
    var(--ctlab-texture) right center / auto 100% no-repeat;         /* dragonfly, right   */
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(1.12) contrast(1.35);   /* pure white paper, crisp black marks */
  opacity: var(--ctlab-texture-opacity);
}
.ctlab__bar {
  margin: 0 var(--gutter);
  display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 20px 40px; align-items: start;
  border-top: 1px solid var(--color-text); border-bottom: 1px solid var(--color-text);
  padding: 14px 0 16px;
}
.ctlab__title { font-size: clamp(28px, 3vw, 48px); font-weight: 400; letter-spacing: .01em; line-height: 1; }
.ctlab__meta, .ctlab__tags { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; }
.ctlab__meta span { display: block; }
.ctlab__tags { border-left: 1px solid var(--color-text); padding-left: 14px; }

.ctlab__board { position: relative; margin: 0 var(--gutter); padding: clamp(40px, 5vw, 80px) 0 clamp(80px, 9vw, 140px); }
.ctlab__scribble {
  position: absolute; z-index: 1; pointer-events: none;
  right: 3%; top: 31vw;
  font-size: clamp(120px, 21vw, 380px); line-height: .8;
  color: var(--color-text); transform: rotate(-6deg);
}
.ctlab__frames {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);             /* same space between rows and columns */
  max-width: 1080px; margin: 0 auto;
}
.polaroid {
  position: relative; margin: 0;
  background: #fff; padding: 9px 9px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 14px 30px rgba(0,0,0,.14);
  transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rot) * 1deg));
  transition: transform .6s var(--ease);
}
.polaroid:hover { transform: translate(calc(var(--x) * 1%), calc(var(--y) * 1%)) rotate(calc(var(--rot) * .6deg)) scale(1.03); z-index: 9 !important; }
.polaroid img { width: 100%; height: auto; }
.polaroid figcaption {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 12px 2px 16px;
  font-size: clamp(8px, .7vw, 10px); letter-spacing: .06em; text-transform: uppercase; color: #111;
}

@media (max-width: 700px) {
  .ctlab__bar { grid-template-columns: 1fr 1fr; }
  .ctlab__title { grid-column: 1 / -1; }
  .ctlab__frames { grid-template-columns: 1fr 1fr; gap: 22px; }
  .polaroid { transform: rotate(calc(var(--rot) * .5deg)); }
  .polaroid:hover { transform: rotate(calc(var(--rot) * .5deg)); }
  .ctlab__scribble { top: 38%; right: -4%; font-size: 40vw; }
}
@media (prefers-reduced-motion: reduce) { .polaroid { transition: none; } }

/* =========================================================
   CONTACT
   ========================================================= */
.contact { padding: clamp(24px, 5vw, 80px) var(--gutter) clamp(40px, 6vw, 90px); }
.contact__panel {
  position: relative;
  background: var(--contact-panel); color: var(--contact-ink);
  min-height: min(78vh, 58vw);
  padding: clamp(16px, 2vw, 30px) clamp(18px, 2.4vw, 40px);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto 1fr auto;
  column-gap: 40px;
}
.contact__name, .contact__foot, .contact__side { font-size: clamp(9px, .8vw, 11px); letter-spacing: .04em; text-transform: uppercase; }
.contact__name { grid-column: 1 / -1; font-weight: 600; }
.contact__title {
  grid-column: 1; margin-top: clamp(4px, 1vw, 14px);
  font-family: var(--font-tall); font-weight: 400;
  font-size: clamp(90px, 15vw, 260px); line-height: .82; letter-spacing: -.005em;
  display: flex; align-items: baseline;
}
.contact__o {                      /* the hand-drawn O: a thin pen loop */
  display: inline-block; width: .74em; height: 1.18em; margin: 0 -.1em 0 -.06em;
  transform: rotate(-14deg) translateY(.2em);
}
.contact__o svg { width: 100%; height: 100%; overflow: visible; }
.contact__tagline {
  grid-column: 1; margin-top: clamp(14px, 2vw, 30px);
  font-size: clamp(24px, 3vw, 50px); letter-spacing: .04em; font-weight: 500; line-height: 1.05;
}
.contact__side { grid-column: 2; grid-row: 2 / 5; align-self: start; margin-top: clamp(40px, 6vw, 100px); width: clamp(170px, 14vw, 230px); }
.contact__photo { margin: 0; }
.contact__photo img { width: 100%; height: auto; }
.contact__photo figcaption { margin-top: 6px; }
.contact__info { margin-top: clamp(40px, 6vw, 90px); line-height: 1.5; }
.contact__label { margin-top: 12px; }
.contact__mail {
  color: inherit; text-transform: none; font-size: clamp(11px, .9vw, 13px);
  text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s; white-space: nowrap;
}
.contact__mail:hover, .contact__mail:focus-visible { opacity: .6; }
.contact__alt { display: flex; gap: 14px; margin-top: 8px; }
.contact__alt a, .contact__alt button {
  font: inherit; font-size: clamp(9px, .75vw, 11px); letter-spacing: .08em; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: opacity .3s;
}
.contact__alt a:hover, .contact__alt button:hover, .contact__alt a:focus-visible, .contact__alt button:focus-visible { opacity: .6; }
.contact__foot { grid-row: 5; align-self: end; margin-top: 40px; }
.contact__foot--l { grid-column: 1; }
.contact__foot--r { grid-column: 2; text-align: right; }
@media (max-width: 700px) {
  .contact__panel { grid-template-columns: 1fr; min-height: auto; }
  .contact__title { font-size: 27vw; }
  .contact__side { grid-column: 1; grid-row: auto; width: 56%; margin-top: 40px; }
  .contact__foot--l, .contact__foot--r { grid-column: 1; grid-row: auto; text-align: left; }
  .contact__foot--r { margin-top: 6px; }
}