/* Set in Avenir: white paper, black ink, hairline rules, one warm accent for Strata.
   Logo on top, the lamp, maker info, painting; a thumbnail rail on inner pages. */

:root {
  --paper: #ffffff;
  --ink: #000000;
  --graphite: #66665f;
  --wash: #f3f3ef;
  --marker: #fff59e;
  --rule: #e2e2dc;

  /* Avenir is built into macOS and iOS; Nunito Sans is the closest free stand-in elsewhere. */
  --sans: "Avenir Next", Avenir, "Nunito Sans", system-ui, sans-serif;
  --type: var(--sans);

  --gutter: clamp(16px, 4vw, 48px);
  --board: 1080px;
  --rail: 128px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--marker); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
h1:focus { outline: none; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; padding: 8px 12px; background: var(--marker); }
.ext { margin-left: 3px; }

/* The logo is a JPEG on white; multiply keeps it clean on any light ground. */
.mark { display: block; width: 92px; }
.mark img { mix-blend-mode: multiply; }

.frame { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper); }
.frame img { width: 100%; height: 100%; object-fit: contain; }
.layer { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; }
.layer.is-on { opacity: 1; }

/* Home */

.home { max-width: calc(var(--board) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.home-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
  align-items: end;
  gap: 16px 48px;
  padding-block: clamp(14px, 1.8vw, 20px);
}
/* The logo file has white margins around the letters (ink box 44,55 to 352,333 of 394px).
   Crop to the letters so the logo can be larger in the same header height. */
.logo { margin: 0; width: clamp(100px, 10vw, 142px); aspect-ratio: 308 / 278; overflow: hidden; }
.logo a { display: block; }
.logo img { width: 127.92%; max-width: none; margin: -17.857% 0 0 -14.286%; }
.tag { margin: 0; font-size: 15px; font-weight: 500; color: var(--graphite); }

/* The top band: deep blue sinking towards black. It hands over to the top of the
   Strata section, which carries the same fall on down to full black. */
.top-band { background: linear-gradient(180deg, #0d2f45 0%, #0b293d 45%, #092130 75%, #071b28 100%); }
.top-band .tag { color: #b7c9d6; }
/* The motto under the logo, set quietly in Avenir. */
.top-motto {
  margin: 2px 0 0;
  font-family: var(--sans);
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #cfe2ee;
}
/* On the home page the logo sits in the middle, the line of text centred under it. */
.top-band .home-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: clamp(32px, 4vw, 56px); /* room for the logo to breathe */
  text-align: center;
}
/* A fine line as if lit from behind: a bright 1px core that dies out towards the edges,
   with a soft warm halo bleeding above and below it. Used under the logo and above
   the Painting section; it sits on the seam between two sections. */
.glow-line { position: relative; z-index: 3; height: 0; }
.glow-line::before, .glow-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.glow-line::after {
  width: min(1080px, calc(100% - 2 * var(--gutter)));
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 226, 180, 0.55) 18%, #fff3dc 50%, rgba(255, 226, 180, 0.55) 82%, transparent 100%);
}
.glow-line::before {
  width: min(900px, 80%);
  height: 28px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 166, 90, 0.28), rgba(242, 166, 90, 0) 70%);
  filter: blur(6px);
}

/* Inner pages */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 24px 3px 24px;
}
.thumbs { display: grid; gap: 10px; margin: 36px 0 0; padding: 0; list-style: none; }
.thumbs a { position: relative; display: block; width: 64px; padding: 3px; }
.thumbs .frame { border: 1px solid var(--rule); }
.thumbs a:hover { background: var(--wash); }
.thumbs a[aria-current="page"] { box-shadow: 0 0 0 1.5px var(--ink); }

.topbar { padding-block: 28px 0; }
.menu ul { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; padding: 0; list-style: none; font-size: 15px; font-weight: 500; line-height: 2; }
.menu a { text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.menu a:hover { text-decoration: underline; text-decoration-color: var(--rule); }
.menu a[aria-current="page"] { text-decoration: underline; }
.menu-btn {
  display: none;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 500 14px var(--type);
  cursor: pointer;
}

.page-head {
  padding-block: clamp(28px, 5vw, 64px) 24px;
  border-bottom: 1px solid var(--rule);
}
.crumb { margin: 0 0 12px; font-size: 15px; font-weight: 500; }
.crumb a { color: var(--graphite); text-decoration: none; }
.crumb a:hover { color: var(--ink); }
.title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.intro { max-width: 52ch; margin: 16px 0 0; color: var(--graphite); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 36px 24px;
  margin: 0;
  padding: 32px 0 80px;
  list-style: none;
}
.card a { display: block; text-decoration: none; }
.card .name { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 500; text-underline-offset: 5px; }
.card a:hover .name, .card a:focus-visible .name { text-decoration: underline; }

.card .frame { border: 1px solid var(--rule); }

/* Project images: a column for a few pieces, a masonry gallery for series. */
figure { margin: 0; }
.figures { display: grid; justify-items: start; gap: 40px; max-width: 1000px; padding-top: 40px; }
.gallery { columns: 3 240px; column-gap: 20px; padding-top: 40px; }
.gallery figure { break-inside: avoid; margin-bottom: 20px; }
.gallery img { width: 100%; }
.zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom:hover img { opacity: 0.88; }

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 56px var(--gutter);
  border: 0;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; object-fit: contain; }
.lightbox button {
  position: absolute;
  padding: 6px 12px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 500 14px var(--type);
  cursor: pointer;
}
.lightbox button:hover, .menu-btn:hover { background: var(--ink); color: var(--paper); }
.lb-close { top: 14px; right: var(--gutter); }
.lb-prev, .lb-next { width: 44px; height: 44px; padding: 0; font-size: 24px; line-height: 1; }
.lb-prev { left: var(--gutter); top: 50%; translate: 0 -50%; }
.lb-next { right: var(--gutter); top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; top: 18px; left: var(--gutter); margin: 0; font-size: 14px; font-weight: 500; color: var(--graphite); }
.lightbox.single .lb-prev, .lightbox.single .lb-next, .lightbox.single .lb-count { display: none; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 1000px;
  margin: 48px 0 80px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
}
.pager a { text-decoration: none; }
.pager a[rel="next"] { text-align: right; }
.pager a:hover { text-decoration: underline; text-underline-offset: 6px; }
.pager .dir { display: block; margin-bottom: 2px; font-size: 14px; font-weight: 500; color: var(--graphite); }

.letter { max-width: 60ch; padding: 32px 0 96px; }
.letter p { margin: 0 0 16px; }
.email {
  display: inline-block;
  margin: 24px 0 32px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--marker), var(--marker)) 0 85% / 0% 42% no-repeat;
  transition: background-size 0.35s ease;
}
.email:hover, .email:focus-visible { background-size: 100% 42%; }
.links { display: flex; gap: 24px; margin: 0; padding: 0; list-style: none; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 5px; }

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px 28px;
  font-size: 13px;
  color: var(--graphite);
}

/* Strata: the lamp's own palette, black ground and the amber of its light. */

.strata {
  --night: #000000;
  --glow: #f2a65a;
  --cream: #f4efe6;
  --dim: #a8a196;
  /* deep blue at the top sinks into the night on an eased curve; the black then carries on
     through the maker section below */
  --fade: clamp(260px, 30vw, 420px);
  --abyss: #0d2f45;
  background: linear-gradient(180deg,
    #071b28 0,
    #061724 calc(var(--fade) * 0.15),
    #04111b calc(var(--fade) * 0.32),
    #030c12 calc(var(--fade) * 0.5),
    #010407 calc(var(--fade) * 0.75),
    #000 var(--fade), #000 100%);
  color: var(--cream);
}
.strata :focus-visible { outline-color: var(--cream); }
/* The wooden mark sits small and centred at the top, the photograph and the words side by side below it. */
.strata-title { position: relative; margin: 0; padding: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.strata-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
  max-width: calc(var(--board) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(32px, 5vw, 64px) var(--gutter) clamp(28px, 4vw, 48px);
}
.strata-kind { margin: 0 0 16px; font-size: 15px; font-weight: 500; color: var(--dim); }
/* The lamp with its name below it: see lampMark() in app.js. The lamp switches on
   once, then the name appears in its light. */
.lamp-mark { display: block; width: clamp(150px, 16vw, 220px); height: auto; margin: 0 auto; }
.lamp-mark--word { width: clamp(180px, 20vw, 280px); }
.lamp-mark--word .lamp-word { animation-delay: 0.3s; }
.lamp-motto { opacity: 0.88; animation: word-in 1.6s ease-out 0.9s both; }
.lamp-light { animation: lamp-on 1.8s ease-out 0.4s both; }
.lamp-word { animation: word-in 1.2s ease-out 1.6s both; }
@keyframes word-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lamp-on {
  0% { opacity: 0; }
  12% { opacity: 0.55; }
  18% { opacity: 0.2; }
  100% { opacity: 1; }
}
/* Adèle's text: the first paragraph large, the rest as body, and the last three
   short sentences set apart, one per line, in the warm light of the lamp. */
.strata-copy { text-align: center; } /* from Table lamp down to the button */
.strata-copy p { text-wrap: pretty; } /* no single word left alone on a centred line */
.strata-story { max-width: 46ch; margin-inline: auto; }
.strata-lede {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.5;
}
.strata-body { margin: 18px 0 0; font-size: 16px; line-height: 1.7; color: var(--dim); }
.strata-coda {
  margin: 26px 0 0;
  font-size: 16px; /* the same size as the paragraphs above it */
  font-weight: 500;
  line-height: 1.7;
  color: #3a78a6; /* the same deep blue family as the STRATA word and the button */
}
.strata-cta {
  display: inline-block;
  margin-top: 32px;
  /* a fine white frame with a small square cut out of each corner, like the stepped
     corners of the lamp: drawn stroke by stroke (four sides, then the two strokes of
     each notch), as a border cannot take that shape. The right padding is short by the
     letter-spacing the last letter carries, so the words sit in the middle. */
  --frame: rgba(255, 255, 255, 0.85);
  --notch: 7px;
  padding: 14px calc(18px - 0.16em) 14px 18px;
  border: 0;
  background:
    linear-gradient(var(--frame), var(--frame)) var(--notch) 0 / calc(100% - 2 * var(--notch)) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) var(--notch) 100% / calc(100% - 2 * var(--notch)) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) 0 var(--notch) / 1px calc(100% - 2 * var(--notch)) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 100% var(--notch) / 1px calc(100% - 2 * var(--notch)) no-repeat,
    linear-gradient(var(--frame), var(--frame)) var(--notch) 0 / 1px calc(var(--notch) + 1px) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 0 var(--notch) / calc(var(--notch) + 1px) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) calc(100% - var(--notch)) 0 / 1px calc(var(--notch) + 1px) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 100% var(--notch) / calc(var(--notch) + 1px) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) var(--notch) 100% / 1px calc(var(--notch) + 1px) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 0 calc(100% - var(--notch)) / calc(var(--notch) + 1px) 1px no-repeat,
    linear-gradient(var(--frame), var(--frame)) calc(100% - var(--notch)) 100% / 1px calc(var(--notch) + 1px) no-repeat,
    linear-gradient(var(--frame), var(--frame)) 100% calc(100% - var(--notch)) / calc(var(--notch) + 1px) 1px no-repeat;
  color: #3a78a6; /* the coda's deep blue */
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--sans);
  cursor: pointer;
  /* The letters themselves are the button, lit from behind with the fine line's warm halo. */
  text-shadow: 0 0 4px rgba(242, 166, 90, 0.95), 0 0 14px rgba(242, 166, 90, 0.8), 0 0 32px rgba(242, 166, 90, 0.55), 0 0 60px rgba(242, 166, 90, 0.3);
  transition: text-shadow 0.3s ease;
}
.strata-cta:hover, .strata-cta:focus-visible {
  --frame: #fff;
  text-shadow: 0 0 4px rgba(242, 166, 90, 1), 0 0 16px rgba(242, 166, 90, 0.95), 0 0 38px rgba(242, 166, 90, 0.7), 0 0 72px rgba(242, 166, 90, 0.4);
}

/* The story of the lamps: a dim room in the night blue of the page. It rises out of the
   black around it and sinks back.
   Opening it, a bubble of smoke swells from under the button (the mask grows from
   --ox); the parts then clear out of a blur one after the other. */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.strata-world {
  --cream: #f4efe6;
  --mist: #b9c9d4;
  --brass: #d9a066;
  --steel: #3a78a6;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: linear-gradient(180deg, #000 0, #061724 180px, #0a2638 45%, #0a2638 60%, #061724 calc(100% - 200px), #000 100%);
  color: var(--mist);
}
.strata-world.is-opening {
  -webkit-mask-image: radial-gradient(circle at var(--ox, 50%) 0, #000 var(--r), transparent calc(var(--r) + 30vmax));
  mask-image: radial-gradient(circle at var(--ox, 50%) 0, #000 var(--r), transparent calc(var(--r) + 30vmax));
  animation: world-open 2.6s cubic-bezier(0.3, 0.1, 0.3, 1) both;
}
@keyframes world-open {
  from { --r: 0px; }
  to { --r: 240vmax; }
}
.world-smoke { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.world-smoke span {
  position: absolute;
  top: 0;
  left: var(--ox, 50%);
  width: 70vmax;
  height: 70vmax;
  margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  /* a dim, warm smoke, like lamplight through it */
  background: radial-gradient(circle, rgba(228, 196, 140, 0.14), rgba(228, 196, 140, 0.05) 40%, rgba(228, 196, 140, 0) 68%);
  filter: blur(34px);
  opacity: 0;
}
.is-opening .world-smoke span { animation: puff 2.8s ease-out var(--delay, 0s) both; }
.world-smoke span:nth-child(2) { --dx: -9vmax; --dy: 5vmax; --rot: -24deg; --delay: 0.12s; }
.world-smoke span:nth-child(3) { --dx: 10vmax; --dy: 7vmax; --rot: 30deg; --delay: 0.24s; }
.world-smoke span:nth-child(4) { --dx: -3vmax; --dy: 14vmax; --rot: 12deg; --delay: 0.38s; }
.world-smoke span:nth-child(5) { --dx: 5vmax; --dy: 3vmax; --rot: -10deg; --delay: 0.52s; width: 46vmax; height: 46vmax; margin: -23vmax 0 0 -23vmax; }
@keyframes puff {
  0% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.08); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(var(--dx, 0px) * 3), calc(var(--dy, 0px) * 3 + 30vmax)) scale(1.7) rotate(var(--rot, 0deg)); }
}
/* each part clears out of a blur, like smoke lifting, every time it scrolls into view */
.strata-world .reveal {
  position: relative;
  opacity: 0;
  filter: blur(10px);
  transform: translateY(16px);
  transition: opacity 1.2s ease var(--d, 0s), filter 1.4s ease var(--d, 0s), transform 1.2s ease var(--d, 0s);
}
.strata-world .reveal.is-in { opacity: 1; filter: none; transform: none; }

.world-inner {
  position: relative;
  max-width: calc(var(--board) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(96px, 12vw, 160px) var(--gutter) clamp(96px, 12vw, 160px);
  text-align: center;
}
.world-title {
  margin: 0 0 clamp(36px, 5vw, 56px);
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
}
.world-title:focus { outline: none; }
.world-line::after { width: min(560px, 70%); }
.world-line::before { display: none; } /* the line alone, without its halo */
.world-chapter { padding-top: clamp(64px, 9vw, 112px); }
.world-chapter + .world-line { margin-top: clamp(80px, 11vw, 140px); }

/* the chapter opens on its drawing, its letter and one sentence set large */
.world-motif { display: block; width: clamp(84px, 9vw, 112px); height: auto; margin: 0 auto 18px; overflow: visible; fill: none; stroke: var(--brass); stroke-width: 1.1; stroke-linecap: round; }
.world-mark {
  display: block;
  font-size: clamp(88px, 11vw, 150px);
  font-weight: 200;
  line-height: 0.9;
  color: var(--steel);
}
.world-head h4 { margin: 18px 0 0; font-size: 13px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream); }
.world-lead {
  max-width: 24ch;
  margin: clamp(32px, 4vw, 48px) auto clamp(56px, 8vw, 96px);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 300;
  line-height: 1.25;
  color: var(--cream);
  text-wrap: balance;
}

/* the parts step from one side to the other; their pictograms float in the margin beside them */
.world-body { max-width: 940px; margin-inline: auto; text-align: left; }
.world-part { position: relative; max-width: 46ch; }
.world-part.is-left { margin-right: auto; }
.world-part.is-right { margin-left: auto; }
.world-body > * + * { margin-top: clamp(48px, 7vw, 88px); }
.world-part h5 { margin: 0 0 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); }
.world-part p { margin: 0 0 16px; font-size: 17px; line-height: 1.8; text-wrap: pretty; }
.world-icon { fill: none; stroke: var(--brass); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.world-icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s ease calc(var(--d, 0s) + 0.5s); }
.is-in .world-icon * { stroke-dashoffset: 0; }
.world-part h5 .world-icon {
  position: absolute;
  top: -6px;
  width: 64px;
  height: 64px;
  animation: drift 9s ease-in-out infinite;
}
.world-part.is-left h5 .world-icon { left: calc(100% + clamp(40px, 8vw, 120px)); }
.world-part.is-right h5 .world-icon { right: calc(100% + clamp(40px, 8vw, 120px)); animation-delay: -4s; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

.world-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 48px);
  max-width: 820px;
  margin-inline: auto;
}
.world-notes.is-single { max-width: 520px; text-align: center; }
.world-notes div { position: relative; padding-top: 26px; border-top: 1px solid rgba(217, 160, 102, 0.45); }
.world-notes dt { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brass); }
.world-notes dd { margin: 0; font-size: 16px; line-height: 1.75; }
.world-notes dt .world-icon {
  position: absolute;
  top: -58px;
  right: 0;
  width: 42px;
  height: 42px;
  animation: drift 8s ease-in-out infinite;
}
.world-notes.is-single dt .world-icon { right: calc(50% - 21px); }
.world-notes div + div dt .world-icon { animation-delay: -3s; }

.world-quote { max-width: 760px; margin-inline: auto; text-align: center; }
.world-quote blockquote { margin: 0; }
.world-quote blockquote p {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 54px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.2;
  color: var(--cream);
  text-wrap: balance;
}
.world-quote blockquote p::before { content: "\201C"; }
.world-quote blockquote p::after { content: "\201D"; }
.world-quote figcaption { margin-top: 22px; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--brass); }
.world-quote > p { max-width: 44ch; margin: 22px auto 0; font-size: 17px; line-height: 1.8; }

/* the hours, set large */
.world-figure { display: flex; flex-direction: column; align-items: center; margin-inline: auto; text-align: center; }
.world-figure span { font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--cream); }
.world-figure .world-num {
  margin: 4px 0 8px;
  font-size: clamp(110px, 16vw, 220px);
  font-weight: 200;
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--steel);
}

.world-close {
  display: block;
  margin: clamp(80px, 11vw, 140px) auto 0;
  padding: 10px 0;
  border: 0;
  background: none;
  color: var(--cream);
  font: 500 13px var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
}
.world-close:hover, .world-close:focus-visible { text-decoration: underline; text-underline-offset: 6px; }

/* the chapter drawings: light rising through the slats, bamboo in the wind, the hours going round */
.m-light line { stroke-width: 2.2; opacity: 0.28; animation: slat 4.8s ease-in-out calc(var(--i) * 0.32s) infinite; }
@keyframes slat {
  0%, 60%, 100% { opacity: 0.28; }
  20% { opacity: 1; }
}
.m-light .m-base { fill: var(--brass); stroke: none; animation: breathe 4.8s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { opacity: 0.5; }
  10% { opacity: 1; }
}
.m-cane { transform-origin: var(--x) 114px; animation: bend 6.5s ease-in-out var(--delay) infinite; }
@keyframes bend {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(5deg); }
}
.m-ring { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-ring 12s ease-in-out infinite; }
@keyframes draw-ring {
  0% { stroke-dashoffset: 100; opacity: 1; }
  70% { stroke-dashoffset: 0; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
.m-hand { transform-origin: 60px 60px; animation: go-round 12s ease-in-out infinite; }
.m-hand circle { fill: var(--brass); stroke: none; }
@keyframes go-round {
  0% { transform: rotate(0deg); opacity: 1; }
  70% { transform: rotate(360deg); opacity: 1; }
  90%, 100% { transform: rotate(360deg); opacity: 0; }
}
.strata-hero { margin: 0; order: 2; } /* the photograph on the right, the words on the left */
.strata .zoom { width: 100%; }
.strata .zoom:hover img { opacity: 0.85; }
.strata-hero img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

/* The rest of the shoot, laid in strata like the slats of the lamp: one thin band per
   photo, the full width of the screen, showing a detail cut from the original photo
   (assets/strata/bands, made by tools/make_bands.py). Its own photo stays in the band,
   hidden, for the lightbox. */
.strata { overflow-x: clip; display: flow-root; } /* flow-root keeps the bands' bottom margin inside the section */
.strata-layers {
  display: grid;
  gap: 2px; /* a fine black line between the bands */
  margin: clamp(48px, 7vw, 96px) 0 clamp(60px, 9vw, 160px);
  padding: 0;
  list-style: none;
}
.stratum {
  position: relative;
  width: 100%;
  height: 34px; /* about two lines of text */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: brightness(0.92);
  transition: filter 0.3s ease;
}
.stratum:hover, .stratum:focus-visible { filter: brightness(1.15); }
.stratum img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* The photo of the band under the pointer, brought up in front of the page. It never
   takes the pointer, so moving down the bands leafs through the photos. */
.peek {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 6vh 6vw;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.peek.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.peek img {
  max-width: min(88vw, 1100px);
  max-height: 84vh;
  width: auto;
  height: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.peek.is-on img { transform: none; }
/* About the maker: the black the Strata section sinks into rises into deep blue here. */
.maker-band {
  --abyss: #0d2f45;
  --ice: #eef5f9;
  --mist: #b7c9d6;
  --line: rgba(238, 245, 249, 0.22);
  background: linear-gradient(180deg, #000 0%, #010509 15%, #03101a 32%, #061a28 50%,
    #092333 68%, #0b2a3e 84%, var(--abyss) 100%);
  color: var(--ice);
  padding: clamp(8px, 2vw, 24px) 0 clamp(16px, 3vw, 32px);
}
.maker-band :focus-visible { outline-color: var(--ice); }
.maker-band .maker > div { border-top-color: var(--ice); }
.maker-band .maker p, .maker-band .bio-media dd, .maker-band .maker .dim, .maker-band .maker-more h3 { color: var(--mist); }
.maker-band .maker strong, .maker-band .maker h2, .maker-band .bio-lede, .maker-band .bio-media dt, .maker-band .maker a, .maker-band .more-btn { color: var(--ice); }
.maker-band .maker-more { border-top-color: var(--line); }
.maker-band .bio-media div { border-top-color: var(--ice); }

/* About the maker, contact, Instagram, location: four quiet columns. */

.maker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px clamp(20px, 3vw, 40px);
  padding-bottom: clamp(48px, 6vw, 72px);
}
.maker > div { padding-top: 18px; border-top: 1px solid var(--ink); }
.maker h2 {
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.maker p { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.maker a { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.maker a:hover { text-decoration-thickness: 2px; }
.maker .dim { color: var(--graphite); }

/* Announcement bar */

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px var(--gutter);
  background: var(--marker);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.notice p { margin: 0; }
.notice button {
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
.notice-go { padding: 0; box-shadow: inset 0 -1px var(--ink); }
.notice-go:hover { box-shadow: inset 0 -2px var(--ink); }
.notice-close { padding: 0 6px; font-size: 18px; line-height: 1; }
#where { scroll-margin-top: 24px; }
.maker strong { font-weight: 600; }
.maker-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }

/* Painting: the end of the page. Her painting, edge to edge: it rises out of the blue of
   the maker section, sinks into the black at the bottom, and drifts very slowly. A dark
   veil on the left carries the words. */

.painter {
  --ice: #eef5f9;
  --frost: #c3d3de;
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(520px, 64vw, 820px);
  overflow: hidden;
  /* behind the painting the section itself carries on the deep blue above, and opens up to
     white at the bottom, where the footer carries on */
  background: linear-gradient(180deg, #0d2f45 0%, #0d2f45 44%,
    #164260 56%, #2f6080 66%, #6b90a8 76%, #b6cbd8 86%, #e6eef3 94%, var(--paper) 100%);
  color: var(--ice);
  /* the painting, its colours and shapes fade in and out on an eased curve, so there is no edge */
  --emerge: linear-gradient(180deg,
    transparent 0%, transparent 3%, rgba(0, 0, 0, 0.03) 8%, rgba(0, 0, 0, 0.1) 15%, rgba(0, 0, 0, 0.22) 22%,
    rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.62) 38%, rgba(0, 0, 0, 0.82) 46%, #000 54%,
    #000 60%, rgba(0, 0, 0, 0.84) 68%, rgba(0, 0, 0, 0.6) 76%, rgba(0, 0, 0, 0.34) 84%,
    rgba(0, 0, 0, 0.14) 91%, transparent 98%);
}
.painter-bg, .painter-fields { -webkit-mask-image: var(--emerge); mask-image: var(--emerge); }
.painter :focus-visible { outline-color: var(--ice); }
.painter-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 55% 62%;
  filter: saturate(1.08) contrast(1.06);
  transform-origin: 60% 55%;
  animation: tide 38s ease-in-out infinite alternate;
}
@keyframes tide {
  from { transform: scale(1.04) translateX(0); }
  to { transform: scale(1.12) translateX(-2%); }
}
/* Bold colour mixed into the painting: soft fields of ultramarine, electric cyan,
   vermilion and saffron blended into the brushwork. */
.painter-fields {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(34% 46% at 80% 28%, rgba(29, 60, 255, 0.9), transparent 70%),
    radial-gradient(26% 36% at 94% 74%, rgba(255, 75, 43, 0.85), transparent 70%),
    radial-gradient(24% 30% at 60% 86%, rgba(255, 180, 0, 0.8), transparent 70%),
    radial-gradient(30% 40% at 46% 14%, rgba(0, 210, 230, 0.75), transparent 70%);
  mix-blend-mode: hard-light;
  opacity: 0.7;
  filter: blur(20px);
  animation: fields 30s ease-in-out infinite alternate;
}
@keyframes fields {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(-3%, 2%) rotate(3deg); }
}
/* out of the blue above, into the black below, a veil behind the words */
.painter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 14, 24, 0.82) 0%, rgba(2, 14, 24, 0.58) 34%, rgba(2, 14, 24, 0) 62%);
  /* the veil grows in and dies out with the painting, so it adds no edge of its own
     at the top or against the footer */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 62%, transparent 86%);
  pointer-events: none;
}
.painter-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--board) + 2 * var(--gutter));
  margin-inline: auto;
  padding: clamp(72px, 10vw, 140px) var(--gutter);
}
.painter-copy { max-width: 34rem; }
.painter-label { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--frost); }
.painter-title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.painter-text { max-width: 40ch; margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: var(--frost); }
.painter-cta {
  display: inline-block;
  margin-top: 26px;
  padding: 12px 24px;
  border: 1px solid rgba(238, 245, 249, 0.7);
  border-radius: 999px;
  color: var(--ice);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.painter-cta:hover, .painter-cta:focus-visible { background: var(--ice); border-color: var(--ice); color: #0d2f45; }
.painter-caption {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(18px, 3vw, 32px);
  z-index: 2;
  margin: 0;
  font-size: 13px;
  font-style: italic;
  color: var(--graphite); /* sits on the white the section opens into */
}

/* The page ends on white, including below the footer and in the overscroll. */
.page-end { background: var(--paper); }
html:has(.page-end) { background: var(--paper); }
.page-end .site-footer { padding-top: 8px; }

/* The typefaces' "a", running past in a loop above the footer; still for reduced motion. */
.type-strip {
  overflow: hidden;
  padding: 10px 0 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.type-strip-track {
  display: flex;
  width: max-content;
  animation: type-run 60s linear infinite reverse; /* the letters travel to the right */
}
.type-strip ul { display: flex; margin: 0; padding: 0; list-style: none; }
.type-strip li { flex: none; padding: 0 clamp(10px, 1.6vw, 22px); }
.type-strip img { width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
@keyframes type-run {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); } /* one set of the four */
}

/* The artist's full text, revealed under the four columns. */

.more-btn {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 15px var(--sans);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.more-btn::after { content: " +"; }
.more-btn[aria-expanded="true"]::after { content: " \2212"; }
.more-btn:hover { text-decoration-thickness: 2px; }

.maker-more {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 16px clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4vw, 48px) 0 8px;
  border-top: 1px solid var(--rule);
}
.maker-more[hidden] { display: none; }
.maker-more { align-items: start; }
.maker-more h3 { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--graphite); }
.maker-more h3:focus { outline: none; }
.maker .bio-lede {
  max-width: 22ch;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.bio-body { max-width: 62ch; }
.maker .bio-body p { margin: 0 0 16px; font-size: 16px; line-height: 1.65; }
.bio-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 28px 0 0;
}
.bio-media div { padding-top: 14px; border-top: 1px solid var(--ink); }
.bio-media dt { font-weight: 600; margin-bottom: 6px; }
.bio-media dd { margin: 0; font-size: 15px; line-height: 1.6; color: var(--graphite); }

/* Responsive */

@media (max-width: 1180px) {
}

@media (max-width: 1000px) {
  .world-part.is-left, .world-part.is-right { margin-inline: 0; }
  /* no margin to float in: the pictogram sits before its heading */
  .world-part h5 .world-icon { position: static; display: block; width: 44px; height: 44px; margin-bottom: 12px; }
  .world-notes dt .world-icon { position: static; display: block; width: 36px; height: 36px; margin: 0 0 10px; }
  .world-notes.is-single dt .world-icon { margin-inline: auto; }
  .topbar { display: flex; justify-content: flex-end; position: relative; }
  .menu-btn { display: block; }
  .menu { display: none; }
  .menu.is-open {
    display: block;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 5;
    width: min(280px, calc(100vw - 2 * var(--gutter)));
    padding: 8px 16px;
    background: var(--paper);
    border: 1px solid var(--ink);
  }
  .menu ul { flex-direction: column; gap: 0; font-size: 16px; line-height: 2.6; }
  .menu li:not(:last-child)::after { content: none; }
  .menu li + li { border-top: 1px solid var(--rule); }
}

@media (max-width: 760px) {
  .home-head { grid-template-columns: minmax(0, 1fr); }
  .strata-inner { grid-template-columns: minmax(0, 1fr); }
  .strata-hero { order: 0; }
  .maker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .maker-more { grid-template-columns: minmax(0, 1fr); }
  .bio-media { grid-template-columns: minmax(0, 1fr); }

  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-height: none;
    overflow: visible;
    padding: 20px 0 0;
  }
  .mark { width: 72px; }
  .lb-prev, .lb-next { top: auto; bottom: 14px; translate: none; }
  .thumbs { order: 3; display: flex; width: 100%; gap: 6px; margin: 16px 0 0; overflow-x: auto; padding-bottom: 4px; }
  .thumbs li { flex: none; }
  .thumbs a { width: 56px; }

  .topbar { position: absolute; top: 20px; right: var(--gutter); padding: 0; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .pager { font-size: 17px; }
}

@media (max-width: 480px) {
  .maker { grid-template-columns: minmax(0, 1fr); }
  .painter { align-items: flex-end; min-height: 640px; }
  .painter-bg { background-position: 62% 50%; }
  .painter::before { background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.55) 34%, rgba(0, 0, 0, 0) 66%); }
  .painter-caption { top: 22px; bottom: auto; color: rgba(238, 245, 249, 0.6); } /* on the black at the top */
}

@media (prefers-reduced-motion: reduce) {
  .world-smoke { display: none; }
  .strata-world.is-opening { animation: none; -webkit-mask-image: none; mask-image: none; }
  .strata-world .reveal { opacity: 1; filter: none; transform: none; transition: none; }
  .world-icon * { stroke-dashoffset: 0; transition: none; }
  .world-icon, .m-light line, .m-light .m-base, .m-cane, .m-ring, .m-hand { animation: none; }
  .m-light line { opacity: 0.8; }
  .m-ring { stroke-dashoffset: 0; }
  .type-strip-track { animation: none; }
  .layer, .email { transition: none; }
  .lamp-light, .lamp-word, .lamp-motto { animation: none; }
  .stratum, .peek, .peek img { transition: none; }
  .painter-bg, .painter-fields { animation: none; }
}