/* Lola Cellan Jones — portfolio
   A framed cream page, fine guide lines, generous space.
   Colour comes only from the work (and a small accent per project). */

:root {
  --outer: #ebe3c0;          /* page around the frame */
  --cream: #f6efce;          /* the frame itself: a subtle pale yellow */
  --ink: #24211c;
  --muted: #7a7266;
  --rule: rgba(36, 33, 28, .15);
  --rule-strong: rgba(36, 33, 28, .32);
  --butter: #f2d675;
  --tile: #526a6b;           /* the teal of the Peel Paper tiles */
  --tile-pale: #d9e5e5;      /* a pale wash of the same blue, for the top bar */
  --accent: #b38c25;
  --soft: #f3e9c6;
  --on-accent: #fff;

  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;   /* headings */
  --sans: "EB Garamond", "Garamond", Georgia, serif;          /* text */
  --mono: "DM Mono", ui-monospace, monospace;

  --frame: none;             /* the page uses the full width of the screen */
  --edge: clamp(14px, 1.8vw, 24px);   /* slim, even margin from the screen edge for the bar, intro and tiles */
  --pad: clamp(14px, 1.8vw, 22px);   /* image inset from the frame edge */
  --g: clamp(28px, 5vw, 64px);       /* guide-line inset */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--outer);
  color: var(--ink);
  font: 400 17.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--butter); color: var(--ink); }
em { font-style: italic; }

/* Bodoni Moda thins its hairlines as it grows; keep the sturdier text cut. */
h1, h2, h3, .brand, .statement, .next .arrow {
  font-optical-sizing: none !important;
  font-variation-settings: "opsz" 11 !important;
}

.label, .mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.label { color: var(--muted); }
.star { font-family: var(--sans); font-style: normal; color: var(--accent); }

/* ---------- the frame ---------- */
.frame {
  max-width: var(--frame);
  margin: 0 auto;
  background: var(--cream);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  min-height: 100vh;
  box-shadow: 0 0 0 100vmax var(--outer);
}

/* vertical guide lines, inset from the frame edges */
.guides { position: relative; }
.guides::before, .guides::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--rule); pointer-events: none;
}
.guides::before { left: var(--g); }
.guides::after { right: var(--g); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: stretch;
  --nav-gap: clamp(22px, 2.6vw, 34px);   /* half the space between name, Work and About */
  height: 48px;
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding-left: var(--pad); padding-right: var(--nav-gap);
  font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: .02em;
}
.brand .star { font-size: 13px; transition: transform .9s var(--ease); }
.brand:hover .star { transform: rotate(180deg); }
.nav { display: contents; }
.nav a {
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--nav-gap);
  border-left: 1px solid var(--rule);
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);   /* PROJECTS  PRINTS  ABOUT */
  transition: background .3s var(--ease);
}
.nav a:hover, .nav a[aria-current] { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.head-cta {
  display: flex; align-items: center; justify-content: flex-end;
  margin-left: auto; padding-right: var(--pad);
  border-left: 1px solid var(--rule);
}

/* top bar: a pale wash of the tile blue, with its name, links and button in the tile blue (dark version tried: --bar-bg: var(--tile); --bar-ink: #fff; plus the .brand-sig filter)
   */
.site-head {
  --bar-bg: var(--tile-pale); --bar-ink: var(--tile);
  /* inset: page-yellow either side so the blue lines up with the tiles' edges, and a thin strip of yellow above */
  --head-side: var(--edge); --head-top: 8px;
  height: calc(48px + var(--head-top));
  padding: var(--head-top) var(--head-side) 0;
  background: linear-gradient(var(--bar-bg), var(--bar-bg)) content-box, var(--cream);
  backdrop-filter: none;
  color: var(--bar-ink);
}
.site-head .brand, .site-head .nav a { color: var(--bar-ink); }
.site-head .brand .star { color: var(--bar-ink); }
/* Lola's own signature in place of the typed name */
.brand-sig { display: block; height: 36px; width: auto; aspect-ratio: 900 / 218; overflow: visible; transition: opacity .4s var(--ease);
  /* levelled (the hand rises ~2.6° left to right) and dropped so the body of the writing lines up with Work and About */
  transform: translateY(4px) rotate(2.6deg); transform-origin: 50% 50%;
  /* filter: brightness(0) invert(1);  -- turns the ink white, for a dark bar */ }
.brand:hover .brand-sig { opacity: .7; }
.site-head .nav a:hover, .site-head .nav a[aria-current] { background: color-mix(in srgb, var(--bar-ink) 14%, transparent); }
.site-head .pill { color: var(--bar-ink); border-color: color-mix(in srgb, var(--bar-ink) 55%, transparent); }
.site-head .pill .star { color: var(--bar-ink); }
.site-head .pill:hover { background: var(--bar-ink); border-color: var(--bar-ink); color: var(--bar-bg); }
.site-head .pill:hover .star { color: var(--bar-bg); }

/* ---------- pills ---------- */
.pill {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  height: 36px; padding: 0 14px 0 16px;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  font-size: 15px; line-height: 1; color: var(--ink);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.pill .star { font-size: 11px; transition: transform .6s var(--ease), color .35s; }
.pill:hover, a:hover > .pill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pill:hover .star, a:hover > .pill .star { color: var(--on-accent); transform: rotate(90deg); }
.pill.sm { height: 30px; font-size: 14px; padding: 0 12px 0 14px; }
.pill.wide { display: flex; width: 100%; }
.pill.muted { border-style: dashed; color: var(--muted); pointer-events: none; }

/* ---------- opening ---------- */
.lead-in { padding: clamp(30px, 3.6vw, 48px) var(--g) clamp(26px, 3vw, 40px); }
.statement {
  max-width: 470px; margin: 0 auto;
  font: 400 clamp(18px, 1.7vw, 21px)/1.36 var(--serif);
  text-align: justify; text-align-last: left; hyphens: none;
  letter-spacing: -.005em;
}
.statement.small { max-width: 420px; text-align: center; text-align-last: center; }
.opening { --hero-side: clamp(20px, 6vw, 80px); }   /* wider cream border either side of the hero */
.hero-wrap { position: relative; margin: var(--pad) var(--hero-side) 0; }
.opening .hero-cap { padding-left: var(--hero-side); padding-right: var(--hero-side); }
.hero-note {
  position: absolute; top: clamp(12px, 1.6vw, 20px); left: clamp(12px, 1.6vw, 20px);
  width: min(340px, 45%); margin: 0;
  padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  background: var(--cream); color: var(--ink);
  font: 400 15.5px/1.42 var(--sans);
}
.hero { display: block; margin: 0; overflow: hidden; aspect-ratio: 16 / 6; background: var(--soft); }
.hero img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.hero:hover img { transform: scale(1.015); }
.hero-cap {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px var(--pad) 0;
  font-size: 14.5px; color: var(--muted);
}
.hero-cap span:last-child { font-style: italic; }

/* ---------- work ---------- */
/* quiet cards: a fine rule, the title, the image, one line of detail */
.sec-mark { height: clamp(64px, 8vw, 100px); }
/* two columns, the right one dropped half a step: a slow, staggered walk through the work */
.cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 400px));
  justify-content: center; align-items: start;
  gap: clamp(72px, 9vw, 120px) clamp(40px, 9vw, 120px);
  padding: 0 var(--pad);
}
.card { display: block; }
.card:nth-child(even) { margin-top: clamp(90px, 14vw, 190px); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 14px; }
.card-n { color: var(--muted); transition: color .5s var(--ease); }
.card:hover .card-n { color: var(--accent); }
.card-title {
  margin: 0;
  font: 400 clamp(20px, 1.9vw, 24px)/1.2 var(--serif); letter-spacing: -.005em;
  transition: color .5s var(--ease);
}
.card:hover .card-title { color: var(--accent); }
/* hand-drawn underline beneath the title, drawn on hover */
.card-title .t { position: relative; display: inline-block; }
.card-title .uline {
  position: absolute; left: -3px; bottom: -1px;
  width: calc(100% + 6px); height: 8px;
  overflow: visible; pointer-events: none;
}
.card-title .uline path {
  fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .25s cubic-bezier(.4, 0, .2, 1);
}
/* one quick, sure stroke: fast off the mark, settling cleanly at the end */
.card:hover .card-title .uline path { stroke-dashoffset: 0; transition: stroke-dashoffset .52s cubic-bezier(.65, 0, .15, 1); }
.card-media { aspect-ratio: 4 / 5; overflow: hidden; position: relative; background: var(--soft); }
/* a light-blue square under each thumbnail, showing round it as a border (thin line version: outline 1.5px, offset 5-9px) */
.card-media { box-shadow: 0 0 0 clamp(8px, 1vw, 12px) #9fc0d6; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
/* a cut-out object (no background) is shown whole on the project's pastel, held in from the left edge as photographed */
.card-media.cutout img, .band-track .lift .under.cutout { object-fit: contain; object-position: 0% 50%; background: var(--card-bg, var(--soft)); }   /* cardBg in data.js picks a thumbnail-only colour */
.card-media.cutout { background: var(--card-bg, var(--soft)); }
.card:hover .card-media img { transform: scale(1.025); }
.card-meta {
  display: flex; justify-content: space-between; gap: 12px;
  padding-top: 4px; font-size: 15px; color: var(--muted);
  transition: color .5s var(--ease);
}
.card-meta span:first-child { font-style: italic; }
.card:hover .card-meta { color: var(--accent); }

.work-head {
  display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center;
  gap: 0 clamp(40px, 9vw, 120px); align-items: end;
  padding: 0 var(--pad) clamp(56px, 7vw, 96px);
}
.work-head h1 { margin: 0; font: 400 clamp(40px, 5vw, 64px)/1 var(--serif); letter-spacing: -.02em; }
.work-head p { margin: 0; max-width: 330px; font-size: 16px; line-height: 1.5; color: var(--muted); }

/* ---------- work: one still row of hero images ---------- */
/* the Projects composition (intro column + three whole images) sits centred with an even margin each side */
.work.page-top:has(.carousel) {
  --cgap: clamp(20px, 3vw, 44px);
  --intro-w: clamp(190px, 17vw, 260px);                        /* column for the intro line, left of the selected card */
  --side-min: clamp(24px, 6vw, 110px);                          /* never closer to the screen edge than this */
  /* card width: three whole cards (the two side ones drawn at 84%) beside the intro, and the row + arrows on one screen */
  --cw: clamp(190px, min(calc((100svh - 400px) * .8), calc((100vw - 18px - 2 * var(--side-min) - var(--intro-w) - 3 * var(--cgap)) / 2.84)), 380px);
  --side: max(var(--side-min), calc((100vw - 18px - var(--intro-w) - 3 * var(--cgap) - 2.84 * var(--cw)) / 2));
  --anchor: calc(var(--side) + var(--intro-w) + var(--cgap));  /* where the selected card rests */
}
.car-stage { position: relative; }
/* the intro line rests in the space left of the first card, level with the top of the image and lined up under the title;
   it stays put while the row moves, so the first card slides over it (and it fades as it's covered) */
.car-intro {
  position: absolute; z-index: 0; left: var(--edge); top: 28px; height: calc(var(--cw) * 1.25);
  width: calc(50% - var(--cw) / 2 - var(--cgap) - var(--edge));
  display: flex; align-items: flex-start; justify-content: flex-start; margin: 0;   /* top of the image, under the Projects title */
  font-size: 16px; line-height: 1.5; color: var(--muted); pointer-events: none;
}
.car-intro p { margin: 0; max-width: 250px; text-wrap: pretty; }
.carousel {
  position: relative; z-index: 1;
  display: flex; gap: var(--cgap); align-items: center;
  justify-content: flex-start;   /* not centred: centred overflow spills off the left where it can't be scrolled to */
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 28px calc(100% - var(--anchor) - var(--cw)) 20px var(--anchor);   /* selected card rests at the anchor; the last can reach it too */
  scroll-padding-left: var(--anchor);
  outline: none; cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel.dragging .card { pointer-events: none; }
.carousel .card {
  flex: 0 0 var(--cw); scroll-snap-align: start; margin-top: 0 !important;
  transform: scale(.75); transform-origin: 0% 55%; opacity: .62;   /* unselected: a quarter smaller */
  transition: transform .6s var(--ease), opacity .6s var(--ease);
  -webkit-user-drag: none; user-select: none;
}
.carousel .card.is-active { transform: scale(1); opacity: 1; }
.carousel .card.is-before { transform-origin: 100% 55%; }   /* cards left of the selected one shrink towards it, not away */
.carousel.no-anim .card, .carousel.no-anim .card * { transition: none !important; }
.carousel .card:not(.is-active) .card-meta, .carousel .card:not(.is-active) .card-n { opacity: 0; transition: opacity .4s; }
.carousel .card img { pointer-events: none; }
.carousel:focus-visible .card.is-active .card-media { outline: 2px solid var(--tile); outline-offset: 4px; }
.car-nav { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 6px var(--edge) 0; color: var(--tile); }
.car-btn {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tile) 50%, transparent); background: transparent; color: var(--tile);
  font: 18px/1 var(--serif); transition: background .3s var(--ease), color .3s var(--ease);
}
.car-btn:hover { background: var(--tile); color: var(--tile-pale); }
.car-count { min-width: 64px; text-align: center; }
.work.page-top:has(.carousel) { padding-top: clamp(28px, 4vw, 56px); }
.work.page-top:has(.carousel) .work-head { padding: 0 var(--side); display: block; }

/* ---------- prints: a calm wall of prints at their own proportions ---------- */
.prints.page-top { padding-top: clamp(28px, 4vw, 56px); }
.prints .work-head { padding-bottom: clamp(36px, 5vw, 64px); }
.print-wall { columns: 3 300px; column-gap: clamp(18px, 2.4vw, 32px); padding: 0 var(--edge); }
.print { break-inside: avoid; margin: 0 0 clamp(28px, 3.4vw, 44px); }
.print-img { display: block; width: 100%; padding: 0; border: 0; background: var(--soft); cursor: zoom-in; overflow: hidden; }
.print-img img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.print-img:hover img { transform: scale(1.02); }
.print figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 9px; }
.print-t { font: 400 17px/1.3 var(--serif); }
.print-d { font-size: 14.5px; font-style: italic; color: var(--muted); text-align: right; }
.print-d a { color: var(--accent); transition: opacity .3s; }
.print-d a:hover { opacity: .7; }

/* ---------- home index ---------- */
.index { padding: clamp(110px, 13vw, 170px) clamp(20px, 6vw, 80px) 0; }
.index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 18px; }
.index-head h2 { margin: 0; font-weight: 400; }
.index-all { font-size: 15px; color: var(--muted); transition: color .4s var(--ease); }
.index-all:hover { color: var(--ink); }
.index-list { list-style: none; margin: 0; padding: 0; }
.index-list a {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 20px;
  padding: clamp(14px, 1.6vw, 20px) 0;
}
.ix-n { color: var(--muted); transition: color .5s var(--ease); }
.ix-t { font: 400 clamp(24px, 2.8vw, 36px)/1.1 var(--serif); letter-spacing: -.015em; transition: color .5s var(--ease); }
.ix-t .t { position: relative; display: inline-block; }
.ix-d { font-size: 15px; color: var(--muted); text-align: right; transition: color .5s var(--ease); }
.index-list a:hover .ix-t, .index-list a:hover .ix-n, .index-list a:hover .ix-d { color: var(--accent); }
/* a small glimpse of the project, floating in the space beside the title */
.ix-peek {
  position: absolute; z-index: 2; left: 46%; top: 50%; width: clamp(110px, 11vw, 150px); aspect-ratio: 4 / 5;
  overflow: hidden; pointer-events: none;
  opacity: 0; transform: translate(-50%, -46%) rotate(-1.5deg);
  transition: opacity .45s var(--ease), transform .7s var(--ease);
}
.ix-peek img { width: 100%; height: 100%; object-fit: cover; }
.index-list a:hover .ix-peek { opacity: 1; transform: translate(-50%, -50%) rotate(-1.5deg); }

/* shared underline for index titles */
.ix-t .uline { position: absolute; left: -3px; bottom: -2px; width: calc(100% + 6px); height: 8px; overflow: visible; pointer-events: none; }
.ix-t .uline path {
  fill: none; stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .25s cubic-bezier(.4, 0, .2, 1);
}
.index-list a:hover .uline path { stroke-dashoffset: 0; transition: stroke-dashoffset .52s cubic-bezier(.65, 0, .15, 1); }

/* ---------- approach ---------- */
.approach { padding: clamp(100px, 12vw, 160px) var(--g) 0; }
.values {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(18px, 2.6vw, 34px); margin-top: clamp(48px, 6vw, 72px);
}
.v-head { display: flex; align-items: baseline; gap: 10px; }
.value { border-top: 1px solid var(--rule-strong); padding-top: 12px; }
.value .star { color: var(--c); font-size: 12px; }
.value h3 { margin: 0; font: 400 17px/1.25 var(--serif); }
.value p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

/* ---------- about ---------- */
.about {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 6vw, 88px);
  padding: clamp(110px, 13vw, 170px) var(--pad) 0;
  align-items: start;
}
.about-media { position: sticky; top: 72px; }   /* the image stays with you while you read */
.about-media img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 0; }   /* square; any crop comes off the bottom (was 4 / 5) */
.about-media .hero-cap em { color: var(--ink); }
.about-next { margin-top: clamp(44px, 5vw, 64px); }
.about-media .hero-cap { padding-left: 0; padding-right: 0; }
.about-body { padding-right: calc(var(--g) - var(--pad)); padding-top: 4px; }
.about-body .v-head { border-top: 1px solid var(--rule-strong); padding-top: 12px; }
.about h1, .about h2 { font: 400 clamp(26px, 2.8vw, 36px)/1.15 var(--serif); margin: 30px 0 22px; letter-spacing: -.01em; }
.about-body p { font-size: 18px; line-height: 1.62; margin: 0 0 16px; max-width: 560px; }
.about-body p.lead { font-style: italic; font-size: 21px; line-height: 1.45; }
.skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 14px; max-width: 560px; }
.skills div { border-top: 1px solid var(--rule); padding-top: 10px; }
.skills ul { list-style: none; padding: 0; margin: 8px 0 0; font-size: 16px; line-height: 1.7; }

/* ---------- home intro: one large image, set asymmetrically ---------- */
.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.3fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(20px, 3vw, 40px); row-gap: clamp(22px, 2.6vw, 34px);
  padding: clamp(36px, 4.5vw, 60px) var(--edge) 0;
}
.intro-label { grid-column: 1; grid-row: 1; padding-top: 4px; }
.intro-meta { grid-column: 2; grid-row: 1; font-size: 15px; line-height: 1.35; color: var(--muted); }
/* a small, quiet block: narrow measure, open leading, two short paragraphs */
.intro-text { grid-column: 3; grid-row: 1; max-width: 330px; font-size: 15px; line-height: 1.55; letter-spacing: .005em; }
.intro-text p { margin: 0; text-wrap: pretty; hyphens: none; }
.intro-text p + p { margin-top: .7em; color: var(--muted); font-style: italic; }
.intro { grid-template-rows: auto; padding-bottom: 48px; }
/* the home page is one screen: words at the top, the squares and their caption resting at the base */
.home { display: flex; flex-direction: column; min-height: calc(100vh - 48px); min-height: calc(100svh - 48px); padding-bottom: clamp(22px, 3vw, 36px); }
.home .band { margin-top: auto; }
/* the intro shares the tiles' nine columns: words on the left, the print-bed photo over the last five tiles,
   filling the space down to the band */
.home .intro {
  flex: 1; min-height: 0;
  grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: 1fr;
  column-gap: clamp(5px, .6vw, 8px);
  padding-bottom: clamp(5px, .6vw, 8px);
}
.home .intro-text { grid-column: 1 / 5; grid-row: 1; align-self: start; }
.home .intro:not(:has(.intro-photo)) .intro-text { grid-column: 1 / 5; }   /* no photo: the words sit top left */
.intro-h { margin: 0 0 18px; font: 400 clamp(34px, 3.6vw, 50px)/1.05 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.intro-cta { margin-top: 22px; }   /* See projects, just under the intro */
.band-cta { padding: 0 var(--edge) clamp(16px, 1.8vw, 24px); }   /* See projects, resting just above the squares */
.band-cta .intro-cta { margin-top: 0; }
/* a fine pen ellipse instead of a clean oval: drawn round about one and a quarter times,
   so the line doubles up over the top and left (after Harvey's reference). */
.intro-cta { position: relative; border-color: transparent; }
.intro-cta .loop {
  position: absolute; left: -6%; top: -14%; width: 112%; height: 128%;   /* a slim oval, hugging the words */
  overflow: visible; pointer-events: none; z-index: -1; transform: rotate(-1deg);
}
.intro-cta .loop-ring {
  fill: #9fc0d6; fill-opacity: 0; stroke: var(--ink); stroke-opacity: 0;   /* no outline at rest (was .8); fills light blue on hover (was gold) */
  stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke .35s var(--ease), fill-opacity .35s var(--ease);
}
/* hover: gold, filling the drawn ellipse rather than a neat pill; the pen draws it again in one go */
.intro-cta:hover, a:hover > .intro-cta { background: transparent; border-color: transparent; color: var(--ink); }
.intro-cta:hover .star { color: var(--ink); }
.intro-cta:hover .loop-ring { fill-opacity: 1; animation: loop-draw .55s cubic-bezier(.55, 0, .2, 1) both; }
@keyframes loop-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.intro-cta { isolation: isolate; }   /* keeps the loop behind the words */
.intro-photo { grid-column: 5 / -1; grid-row: 1; position: relative; display: block; overflow: hidden; min-height: 240px; background: var(--soft); }
.intro-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.intro-photo:hover img { transform: scale(1.02); }
.home + .contact { padding-top: clamp(80px, 10vw, 130px); }

/* nine printed squares, still, in one horizontal row */
.band { display: block; padding: 0 var(--edge); }
.band-track { display: grid; grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));   /* --cols set by site.js: 9 to 14, squares ~128px */ gap: clamp(5px, .6vw, 8px); }
.band-track img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.band { cursor: pointer; }
/* the first squares of the top row cover the projects: on hover the square of paper lifts one space up,
   with a soft shadow beneath it, showing the project's photo where it lay */
.band-track .lift { position: relative; display: block; aspect-ratio: 1; }
.band-track .lift .under { position: absolute; inset: 0; height: 100%; display: block; }
/* gliding along the row makes a wave: each square rises at once with a soft ease-out, then floats back down
   more slowly, so the ones behind the pointer are still settling as the next one lifts */
.band-track .lift .paper {
  position: relative; z-index: 1; display: block;
  will-change: transform;
  box-shadow: 0 0 0 rgba(30, 40, 40, 0);
  transition: transform 1.1s cubic-bezier(.45, 0, .2, 1), box-shadow 1.1s cubic-bezier(.45, 0, .2, 1);   /* down: gentle, unhurried */
}
.band-track .lift.up .paper {
  transform: translateY(calc(-100% - clamp(5px, .6vw, 8px)));
  box-shadow: 0 16px 24px -14px rgba(30, 40, 40, .4);
  transition: transform .75s cubic-bezier(.16, 1, .3, 1), box-shadow .75s cubic-bezier(.16, 1, .3, 1);   /* up: quick start, long soft finish */
}
/* the welcome ripple (once per visit, site.js): each square rises a touch and settles */
/* each rises halfway, showing the top half of its project, holds a breath, then settles */
.band-track .lift.nudge:not(.up) .paper { animation: lift-nudge 2.2s cubic-bezier(.45, 0, .25, 1) both; }
.band-track .lift.nudge:not(.up) .under { animation: lift-peek 2.2s ease both; }
@keyframes lift-nudge {
  0%   { transform: translateY(0);    box-shadow: 0 0 0 rgba(30, 40, 40, 0); }
  35%  { transform: translateY(-50%); box-shadow: 0 14px 22px -14px rgba(30, 40, 40, .38); }
  55%  { transform: translateY(-50%); box-shadow: 0 14px 22px -14px rgba(30, 40, 40, .38); }
  100% { transform: translateY(0);    box-shadow: 0 0 0 rgba(30, 40, 40, 0); }
}
@keyframes lift-peek { 0% { opacity: 0; } 25%, 60% { opacity: 1; } 100% { opacity: 0; } }
.band-track .lift .under { opacity: 0; transition: opacity .9s ease; }
.band-track .lift.up .under { opacity: 1; transition: opacity .6s ease; }
.band-track .lift:focus-visible { outline: 2px solid var(--tile); outline-offset: 3px; }
.intro-cap { transition: opacity .16s ease; }
.intro-cap.swap { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .band-track .lift .paper { transition: none; } }
/* no gap: each print keeps half a gutter at its edge, so side by side they read as one continuous sheet */
.band-track.prints { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.band-foot {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px 24px;
  padding: clamp(18px, 2vw, 26px) var(--edge) 0;
}
.intro-foot {
  grid-column: 1 / 3; grid-row: 2; align-self: end;
  display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.intro-cap { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.intro-cap em { color: var(--ink); }
.intro-links { display: flex; flex-wrap: wrap; gap: 10px; }
.intro-media { grid-column: 3; grid-row: 2; display: block; overflow: hidden; aspect-ratio: 1600 / 1631; background: var(--soft); }
.intro-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.intro-media:hover img { transform: scale(1.02); }

/* ---------- separate pages ---------- */
.onward { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: clamp(72px, 9vw, 120px); }
.work.page-top { padding-top: clamp(56px, 7vw, 96px); }
.about.page-top { padding-top: clamp(48px, 6vw, 80px); }

/* ---------- contact ---------- */
.contact { padding: clamp(120px, 14vw, 190px) var(--pad) 22px; text-align: center; }
.contact .statement { max-width: none; text-align: center; text-align-last: center; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; margin-bottom: 28px; }
.contact .statement em { color: var(--accent); }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.foot {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: clamp(80px, 10vw, 130px); padding-top: 14px;
  border-top: 1px solid var(--rule);
}

/* ---------- project page ---------- */
/* opening panel: the words on the left, one image on the right */
.p-head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px);
  margin: var(--pad); padding: clamp(28px, 4vw, 56px);
  background: color-mix(in srgb, var(--accent) 20%, var(--cream)); color: var(--ink);   /* pastel tint */
}
.p-intro { display: flex; flex-direction: column; min-width: 0; }
.p-num { opacity: .8; }
.p-num span { opacity: .6; }
.p-title {
  font: 400 clamp(38px, 5vw, 68px)/1.02 var(--serif); letter-spacing: -.02em;
  margin: auto 0 0; padding-top: clamp(48px, 7vw, 96px);
}
.p-title small { display: block; font: italic 400 clamp(19px, 1.8vw, 23px)/1.25 var(--sans); margin-top: 14px; opacity: .9; letter-spacing: 0; }
.p-sum { margin: clamp(22px, 2.6vw, 32px) 0 0; max-width: 420px; font-size: 17.5px; line-height: 1.55; }
.p-meta { margin: clamp(26px, 3vw, 40px) 0 0; display: grid; gap: 8px; max-width: 420px; }
.p-meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.p-meta dt { opacity: .7; }
.p-meta dd { margin: 0; font-size: 15px; line-height: 1.4; }
.p-hero { aspect-ratio: 1; max-height: calc(100vh - 160px); overflow: hidden; }
.p-hero img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.p-hero.scaled { display: flex; align-items: flex-end; justify-content: flex-end; }   /* heroScale in data.js: smaller, in the bottom-right corner on the panel's own margin (level with the foot of the text) */
.p-hero.scaled img { width: calc(var(--hero-scale) * 100%); height: calc(var(--hero-scale) * 100%); }
.p-hero.cutout img { object-fit: contain; }   /* cut-out objects sit straight on the pastel panel */

/* the story, in short chapters, each leading into its own images */
.p-story { padding: clamp(90px, 11vw, 150px) 0 clamp(90px, 11vw, 150px); }
.p-story .credit { max-width: 520px; margin: 0 auto clamp(70px, 8vw, 110px); padding: 0 var(--pad); font: italic 400 18px/1.5 var(--sans); color: var(--muted); text-align: center; }
.p-sec {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 56px);
  max-width: 860px; margin: 0 auto clamp(48px, 6vw, 80px); padding: 0 var(--g);
}
.p-sec-k .mono { color: var(--accent); }
.p-sec h2 { margin: 8px 0 0; font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--serif); letter-spacing: -.01em; }
.p-sec p { margin: 0; max-width: 520px; font-size: 18.5px; line-height: 1.62; }

.gallery { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad) clamp(110px, 13vw, 170px); }
.gallery:last-child { padding-bottom: 0; }
.g-row { display: flex; gap: clamp(12px, 1.6vw, 20px); margin-top: clamp(36px, 4.5vw, 64px); }
.g-row:first-child { margin-top: 0; }
/* four colourways joined edge to edge: one continuous sheet */
.g-strip { margin: clamp(36px, 4.5vw, 64px) 0 0; }
.g-strip:first-child { margin-top: 0; }
.g-strip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.g-strip-row img { width: 100%; aspect-ratio: 1; object-fit: cover; cursor: zoom-in; }
.g-strip figcaption { padding-top: 9px; font-size: 14.5px; font-style: italic; color: var(--muted); }
@media (max-width: 640px) { .g-strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* booklet-style collages (rows with grid: in data.js): tiles placed by js/site.js so every edge lines up */
.g-mosaic { margin: clamp(36px, 4.5vw, 64px) auto 0; }
.g-mosaic:first-child { margin-top: 0; }
.g-box { position: relative; }
.g-box .ph { position: absolute; overflow: hidden; background: var(--soft); cursor: zoom-in; }
.g-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.g-box .ph:hover img { transform: scale(1.015); }
.g-mosaic figcaption { padding-top: 9px; font-size: 14.5px; font-style: italic; color: var(--muted); min-height: 30px; }
.g-row figure { margin: 0; min-width: 0; }
.g-row.single { justify-content: center; }
.g-row .ph { overflow: hidden; background: var(--soft); cursor: zoom-in; }
.g-row img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.g-row .ph:hover img { transform: scale(1.015); }
.g-row figcaption { padding-top: 9px; font-size: 14.5px; font-style: italic; color: var(--muted); min-height: 30px; }

/* next project: a pastel panel in the next project's colour, with a glimpse of it */
.next {
  display: flex; justify-content: space-between; align-items: stretch; gap: 24px;
  margin: 0 var(--pad); padding: clamp(28px, 4vw, 48px);
  background: color-mix(in srgb, var(--accent) 20%, var(--cream)); color: var(--ink);   /* pastel tint */
}
.next-txt { display: flex; flex-direction: column; }
.next h2 { font: 400 clamp(34px, 4.6vw, 62px)/1.05 var(--serif); margin: auto 0 0; padding-top: 40px; letter-spacing: -.02em; transition: transform .7s var(--ease); }
.next-sub { margin-top: 10px; font-size: 17px; font-style: italic; transition: transform .7s var(--ease); }
.next .arrow { display: inline-block; font-style: normal; transition: transform .7s var(--ease); }
.next:hover h2, .next:hover .next-sub { transform: translateX(10px); }
.next:hover .arrow { transform: translateX(6px); }
.next-img { width: clamp(120px, 16vw, 200px); aspect-ratio: 4 / 5; overflow: hidden; flex: none; }
.next-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.next:hover .next-img img { transform: scale(1.04); }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(246, 239, 206, .97);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; pointer-events: none; transition: opacity .35s var(--ease);
}
.lb.open { opacity: 1; pointer-events: auto; }
.lb-top, .lb-bot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--g); }
.lb-stage { display: grid; place-items: center; padding: 0 var(--g); min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-title { text-transform: none; letter-spacing: 0; font: italic 15px var(--sans); }
.lb button {
  background: none; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer;
  font: 14px var(--sans); padding: 7px 16px; color: var(--ink);
}
.lb button:hover { background: var(--ink); color: var(--cream); }

/* ---------- no lines: frame edges, guides, header cells and rules all off ---------- */
.frame { border-left: 0; border-right: 0; }
.guides::before, .guides::after { display: none; }
.site-head { border-bottom: 0; }
.nav a, .head-cta { border-left: 0; }
.card-title, .value, .about-body .v-head, .skills div, .p-sec, .foot { border-top: 0; }
.card-title, .about-body .v-head, .p-sec { padding-top: 0; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } * { scroll-behavior: auto !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 860px) {
  .about { grid-template-columns: 1fr; }
  .about-media { position: static; }
  .about-media img { aspect-ratio: 1; }
  .about-body { padding-right: 0; }
  .p-head { grid-template-columns: 1fr; }
  .p-title { padding-top: 40px; }
  .p-hero { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .frame { border: 0; }
  .site-head { --nav-gap: 11px; --head-side: var(--pad); --head-top: 6px; }
  .head-cta { display: none; }
  .nav a { font-size: 14px; }
  .nav a:last-child { padding-right: var(--pad); }
  .brand { font-size: 15px; margin-right: auto; }
  .opening { --hero-side: var(--pad); }
  .intro { grid-template-columns: 1fr 1fr; padding: 28px var(--pad) 0; }
  .intro-text { grid-column: 1 / -1; grid-row: 2; }
  .intro-media { grid-column: 1 / -1; grid-row: 3; }
  .intro { padding-bottom: 40px; }
  .band { padding: 0 var(--pad); }
  .band-track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .band-track img.rev, .band-track .lift { display: none; }   /* phones keep a single 3 × 3 block */
  .home .intro { grid-template-columns: 1fr; grid-template-rows: auto auto; row-gap: 28px; column-gap: 0; padding-bottom: 6px; }
  .home .intro-text { grid-column: 1; grid-row: 1; }
  .intro-photo { grid-column: 1; grid-row: 2; position: static; min-height: 0; aspect-ratio: 4 / 3; }
  .intro-photo img { position: static; }
  .band-track.prints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .band-foot { padding: 16px var(--pad) 0; }
  .intro-foot { grid-column: 1 / -1; grid-row: 4; }
  .guides::before, .guides::after { display: none; }
  .statement { text-align: left; }
  .hero { aspect-ratio: 4 / 3; }
  .hero-note { position: static; width: auto; padding: 14px 0 0; background: none; }
  .hero-cap { flex-direction: column; gap: 0; }
  .values { grid-template-columns: 1fr; }
  .cards { grid-template-columns: minmax(0, 340px); gap: 64px; }
  .card:nth-child(even) { margin-top: 0; }
  .car-stage { --cw: 72vw; --cgap: 14px; --anchor: calc((100vw - var(--cw)) / 2); }
  .carousel .card, .carousel .card.is-before { transform-origin: 50% 55%; }
  .car-intro { position: static; width: auto; height: auto; display: block; padding: 0 var(--edge); max-width: 360px; opacity: 1 !important; }
  .work-head { grid-template-columns: minmax(0, 340px); gap: 14px; }
  .index { padding: 96px var(--pad) 0; }
  .index-list a { grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
  .ix-d { grid-column: 2; text-align: left; font-size: 14.5px; }
  .ix-peek { display: none; }
  .index-all { font-size: 14px; }
  .p-sec { grid-template-columns: 1fr; gap: 12px; padding: 0 var(--pad); }
  .next { align-items: flex-end; }
  .next-img { width: 96px; }
  .skills { grid-template-columns: 1fr; gap: 20px; }
  .g-row { flex-wrap: wrap; }
  .g-row figure { flex: 1 1 100% !important; max-width: none !important; }
  .next .arrow { display: none; }
  .foot { justify-content: center; text-align: center; }
}

/* ---------- paper texture ----------
   A fine grain plus soft, slow mottling, laid over the whole site (images included)
   so everything reads as printed on one sheet. Purely visual: it never takes clicks. */
body { position: relative; }
body::after {
  /* absolute, not fixed: the texture belongs to the sheet and scrolls with it */
  content: ""; position: absolute; inset: 0; z-index: 200; pointer-events: none;
  /* one seamless 1024px tile (fine cold-press tooth: small, low bumps lit from the top left; light and shadow only, no colour patches),
     mid-grey based so soft-light both lightens and darkens the page; made by a script, so it wraps without seams */
  background: url("../img/site/paper.webp?v=4") repeat 0 0 / 1024px 1024px;
  mix-blend-mode: soft-light;
  opacity: 1;
}

/* PAUSED: dappled light on the home page. To bring it back, remove this wrapper.
/* home page only: soft dappled light falling across the sheet.
   The dappling is one large sheet stretched over the screen (no repeat, so no seams);
   only the fine grain repeats, which tiles invisibly. * /
body:has(main.home)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .16 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cfilter id='m' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .01' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .3 0 0 0 0 .18 0 0 0 1 -.42'/%3E%3C/filter%3E%3Crect width='1600' height='1000' filter='url(%23m)'/%3E%3C/svg%3E");
  background-size: 360px 360px, 100% 100%;
  background-repeat: repeat, no-repeat;
  opacity: .44;
}
*/
@media print { body::after { display: none; } }

/* the floral border under the top bar: Lola's motif stretched 10% and mirrored, in the pale blue (img/site/motif-band.png; also motif-band-tile.png, motif-band-white.png) */
:root { --motif-gap: 0px; --motif-h: calc((100vw - 2 * var(--edge)) / 14.4375); }
.head-motif {
  margin: var(--motif-gap) var(--edge) 0;
  aspect-ratio: 4158 / 288;   /* 1.33x the original strip's thickness */
  background: url("../img/site/motif-band.png?v=1") center / cover no-repeat;   /* the motif fills the full depth, cropped at the sides */
}
.home { min-height: calc(100vh - 48px - var(--head-top, 8px) - var(--motif-gap) - var(--motif-h)); min-height: calc(100svh - 56px - var(--motif-gap) - var(--motif-h)); }

/* the motif cut out of the bar itself: butter shapes in the pale blue, from after About up to Get in touch
   (img/site/motif-band-cut.png). The strip under the bar is switched off. */
.head-motif { display: none; }
:root { --motif-h: 0px; }
/* PAUSED: cut-out motif in the bar
.site-head .head-cta { order: 2; }
.site-head::after {
  content: ""; order: 1; flex: 1 1 0; min-width: 0;
  margin-right: 14px;
  background: url("../img/site/motif-band-cut.png?v=1") left center / max(266.67%, calc(64px * 4158 / 216)) auto no-repeat;   -- the left half of the motif, a third larger
}
*/

/* home: the letter-papers photo on the right, at its own tall shape, filling the height down to the tiles
   and lining up with the tiles' right-hand edge */
.home .intro-photo--tall {
  grid-column: 5 / -1; justify-self: end; align-self: stretch;
  margin: 0; height: 100%; min-height: 0; aspect-ratio: 418 / 821; background: none;
}
@media (max-width: 760px) {
  .home .intro-photo--tall { grid-column: 1; justify-self: start; width: min(70%, 260px); height: auto; aspect-ratio: 418 / 821; }
}

/* home: the letter papers turned on their side, a full-width strip straight under the banner
   (the upright version on the right was tried first: .intro-photo--tall, img/home/letter-papers.webp) */
.home { --strip-h: clamp(90px, 11vw, 150px); }
.home-strip { margin: 0 var(--edge); height: var(--strip-h); overflow: hidden; }
.home-strip img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }

/* ---------- home: a smaller Projects carousel, centred, the selected card in the middle ---------- */
.home-car {
  --cgap: clamp(16px, 2vw, 30px);
  --cw: clamp(140px, min(13vw, calc((100svh - 470px) * .8)), 220px);
  --anchor: calc(50% - var(--cw) / 2);
  margin: auto 0; padding: clamp(10px, 2vw, 24px) 0;
}
.home-car .carousel { padding-top: 18px; padding-bottom: 14px; }
.home-car .card-title { font-size: clamp(17px, 1.4vw, 21px); }
.home-car .carousel .card.is-before { transform-origin: 100% 55%; }
.home .home-car + .band-cta { margin-top: 0; }
.home .band { margin-top: 0; }
.home-car .card-meta { display: none; }   /* too narrow for the subtitle line at this size */

/* until the viewer moves it, no card is picked out: all the same size, all full strength */
.home-car .carousel.idle .card, .home-car .carousel.idle .card.is-active, .home-car .carousel.idle .card.is-before { transform: scale(.8); transform-origin: 50% 55%; opacity: 1; }
.home-car .carousel.idle .card.is-active .card-n { opacity: 0; }
.home-car .carousel.idle .card.is-active .card-media { box-shadow: 0 0 0 clamp(8px, 1vw, 12px) #9fc0d6; }
/* arrows: just the arrow, no circle */
.car-btn { border: 0 !important; background: none !important; }
.car-btn:hover { color: var(--ink); background: none !important; }
/* a little lower on the page */


/* ---------- home, centred (after the reference): words in the middle, projects below, plenty of air ---------- */
.home .intro.intro-centred { flex: 1 1 auto; display: flex; align-items: flex-end; justify-content: center; padding: clamp(60px, 9vh, 120px) var(--edge) 0; }
.intro-centred .intro-text { max-width: 560px; text-align: center; font-size: 16px; line-height: 1.32; }   /* tighter leading */
.intro-centred .intro-h { margin-bottom: 12px; }
.intro-centred .intro-text p + p { margin-top: .35em; }
.home .home-car { margin: clamp(56px, 9vh, 110px) 0 0; padding: 0; }   /* lower, under the words */
.home-links { display: flex; justify-content: center; gap: 14px; padding: clamp(18px, 2.4vw, 30px) var(--edge) 0; margin-bottom: auto; }
.home { padding-bottom: clamp(60px, 10vh, 120px); }
/* About: the Peel squares along the foot of the page */
.about-tiles { padding: clamp(60px, 8vw, 110px) 0 0; }
/* balance: the words sit in the middle of the space above, the projects lower down, the links just under them */
.home .intro.intro-centred { align-items: center; padding-top: clamp(40px, 7vh, 90px); }
.intro-centred .intro-text { max-width: 470px; }
.home .home-car { margin-top: 0; }
.home-links { align-items: center; margin-bottom: 0; }
.home-links .intro-cta { margin-top: 0; }
.home { padding-bottom: clamp(70px, 13vh, 150px); }
/* the words sit halfway between the top bar and the carousel */
.home .intro.intro-centred { padding: clamp(24px, 4vh, 48px) var(--edge); }
.home .intro-centred .intro-text { align-self: center; }
.home .intro-centred .intro-text { position: relative; top: clamp(18px, 2.2vw, 30px); }   /* allow for the carousel's own top padding, so the gaps above and below look equal */
/* home words in small capitals, like the reference; the greeting stays as it is */
.intro-centred .intro-text p { text-transform: uppercase; font-size: 14.5px; letter-spacing: .04em; line-height: 1.35; }
.about-body p:empty { display: none; }   /* paragraphs emptied with Edit text leave no gap */
/* About: the label sits at the top left of the page; the words run from the top of the photo to its foot */
@media (min-width: 1001px) {
  .about, .about.page-top { position: relative; padding-top: calc(clamp(48px, 6vw, 80px) + 40px); align-items: stretch; }
  .about-body .v-head { position: absolute; top: clamp(30px, 3.6vw, 48px); left: var(--pad); }
  .about-body { display: flex; flex-direction: column; padding-top: 0; padding-bottom: var(--cap-h, 32px); position: static; }
  .about-body h1 { margin-top: -.18em; }   /* cap height level with the photo's top edge */
  .about-body .skills { margin-top: auto; padding-top: 14px; }
  .about-body p { font-size: 17px; line-height: 1.5; margin-bottom: 12px; }
  .about-body h1 { margin-bottom: 14px; }
  .about-body .skills ul { line-height: 1.55; }
  .about-body .about-next { height: 0; margin-top: 0; padding-top: 0; transform: translateY(28px); }   /* See the work hangs just below, outside the line-up */
}
/* About, refined: no label; the words share out the photo's full depth with even spaces between them;
   the top tightened so the Peel squares show at the foot of the first screen */
@media (min-width: 1001px) {
  .about-body .v-head { display: none; }
  .about, .about.page-top { padding-top: clamp(28px, 3.2vw, 44px); }
  .about-body { justify-content: space-between; }
  .about-body .skills { margin-top: 0; padding-top: 0; }
  .about-body h1, .about-body p { margin-bottom: 0; }
  .about-tiles { padding-top: clamp(26px, 3vw, 40px); }
}
@media (min-width: 1001px) {
  .about-body { position: relative; }
  .about-body .about-next { position: absolute; left: 0; bottom: -6px; height: auto; transform: none; margin: 0; }   /* level with the photo caption */
}
@media (min-width: 1001px) {
  /* See the work sits on the heading's line, at the right */
  .about-body .about-next { top: 0; bottom: auto; left: auto; right: calc(var(--g) - var(--pad)); }
  /* a little more room below: the photo never taller than the screen allows, so the squares and a strip of paper show beneath */
  .about-media { width: min(100%, calc(100svh - 350px)); }
  .about, .about.page-top { padding-top: clamp(20px, 2.4vw, 34px); }
  .about-tiles { padding-top: clamp(22px, 2.6vw, 34px); }
}
/* home words in navy (the second line keeps its softer tint of the same) */
.home { --navy: #1f2e4d; }
.intro-centred .intro-h, .intro-centred .intro-text p { color: var(--navy); }
.intro-centred .intro-text p + p { color: color-mix(in srgb, var(--navy) 72%, var(--bg, #f6efce)); }
.p-hero.fit img { object-fit: contain; }   /* heroFit in data.js: the whole image, on its own colour */
/* heroNatural in data.js: the top image keeps its own proportions */
.p-hero.natural { aspect-ratio: auto; max-height: none; align-self: center; margin-top: clamp(20px, 2.6vw, 36px); }
.p-hero.natural img { height: auto; object-fit: initial; }