/* jeffhann.com, draft v05
   Every token below has one job. The reasons are written up in why.html.

   PALETTE: the highland sky over coffee country, and the life of the crop beneath it. */
:root {
  --sky:         #C6D6DE; /* washed-out highland sky. Ground for pictures and for the big statements. */
  --parchment:   #EFE6D3; /* washed coffee drying on raised beds / paper. Ground for reading. */
  --roast:       #2B211B; /* roasted bean. The ink: all text. */
  --roast-soft:  #5E5044; /* secondary text (4.9:1 on sky, 6.9:1 on parchment) */
  --laterite:    #983F1D; /* red-earth hillsides. Means PLACE: contours, chapter numbers, where things happened. */
  --cherry:      #B8262F; /* ripe cherry. Means HARVEST: a win. */
  --seedling:    #A8C66C; /* new growth. Means BEGINNING: anything you can press. */

  /* TYPE: two faces, eight locked sizes. Nothing on the page uses any other. */
  --f-voice: "Fraunces", Georgia, serif;                      /* the storyteller: statements, names, quotes */
  --f-frame: "Jost", "Futura", "Century Gothic", sans-serif;  /* the frame: labels, facts, body */

  --gutter: clamp(16px, 5vw, 72px);
  --measure: 38rem;
  --gap: clamp(12px, 1.4vw, 20px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--sky); color: var(--roast);
  font-family: var(--f-frame); font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1.1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type scale (the only eight) ---------- */
.t-display, .t-heading, .t-statement, .t-stat {
  font-family: var(--f-voice); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 380; margin: 0;
}
.t-display   { font-size: clamp(3.2rem, 5.2vw, 5.6rem); line-height: .92; letter-spacing: -.025em; }
.t-heading   { font-size: clamp(2.2rem, 4.8vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }
.t-statement { font-size: clamp(1.5rem, 2.8vw, 2.35rem); line-height: 1.22; letter-spacing: -.01em; font-weight: 330; }
.t-stat      { font-size: clamp(2.8rem, 5.5vw, 4.6rem); line-height: 1; letter-spacing: -.02em; }
.t-lead      { font-family: var(--f-frame); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.55; font-weight: 400; }
.t-body      { font-family: var(--f-frame); font-size: 1.0625rem; line-height: 1.7; font-weight: 400; }
.t-label     { font-family: var(--f-frame); font-size: .78rem; line-height: 1.4; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.t-caption   { font-family: var(--f-frame); font-size: .875rem; line-height: 1.5; font-weight: 400; }
.t-display, .t-heading, .t-statement, .t-lead { text-wrap: balance; }
/* Film titles inside running text take the storyteller's face, never italics. */
em { font-style: normal; font-family: var(--f-voice); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 400; }

/* ---------- grounds: cool sky for pictures and statements, warm paper for reading ---------- */
.ground-sky       { background: var(--sky); }
.ground-parchment { background: var(--parchment); }
.soft  { color: var(--roast-soft); }
.place { color: var(--laterite); }

section { position: relative; isolation: isolate; }
.wrap { position: relative; z-index: 2; padding: clamp(88px, 12vw, 168px) var(--gutter); max-width: 1440px; margin: 0 auto; }

/* Paper: rough, random grain, never a straight line. */
.ground-parchment::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .28; mix-blend-mode: multiply;
}

/* Contour lines: the land, in its own earth colour. Drawn by main.js behind the words. */
.contours { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; color: rgba(152, 63, 29, .15); }
.ground-sky .contours { color: rgba(152, 63, 29, .12); }

/* Ridges: chapters meet on a hand-drawn ridge line, the way one field meets the next. */
.ridge { position: absolute; left: 0; right: 0; top: 1px; width: 100%; height: clamp(24px, 4vw, 56px); transform: translateY(-100%); z-index: 3; display: block; }
.ground-sky .ridge path       { fill: var(--sky); }
.ground-parchment .ridge path { fill: var(--parchment); }

/* ---------- chapter cards: centred and numbered (the Wes Anderson frame) ---------- */
.chapter { text-align: center; max-width: 52rem; margin: 0 auto clamp(48px, 7vw, 96px); }
.chapter .t-label { display: inline-flex; gap: .9em; align-items: center; margin-bottom: 1.4rem; }
.chapter .t-label .num { color: var(--laterite); }
.chapter .t-lead { margin: 1.4rem auto 0; max-width: 40rem; }

/* ---------- buttons: seedling = something you can start ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .7em; cursor: pointer;
  font-family: var(--f-frame); font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; padding: 1.05em 1.6em; border-radius: 999px; -webkit-appearance: none; appearance: none;
  border: 1.5px solid var(--seedling); transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn svg { width: 12px; height: 12px; }
.btn-fill { background: var(--seedling); color: var(--roast); }
.btn-fill:hover { background: var(--roast); border-color: var(--roast); color: var(--seedling); }
.btn-line { background: transparent; color: var(--roast); border-color: var(--roast); }
.btn-line:hover { background: var(--seedling); border-color: var(--seedling); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--roast); outline-offset: 4px; }

/* ---------- header: its own strip of sky, so nothing is ever set on the photograph ---------- */
.site-header {
  position: relative; z-index: 20; background: var(--sky);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--roast); }
.mark { width: 34px; height: 34px; color: var(--roast); flex: none; }
.site-nav { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.site-nav a { text-decoration: none; color: var(--roast); }
.site-nav a:hover { color: var(--laterite); }

/* ---------- hero: the photograph whole and green; the words on a contour island ---------- */
/* The island is the top of a hill as a map draws it: a closed contour with the rings of the slope
   stepping out around it. Reading land from its contour pattern is where permaculture design starts,
   so the words sit on the high point and the pattern radiates out from them. The rings bunch tight on
   his side (the steep face) and spread into the forest on the other (the gentle slope), so no line
   ever crosses him. */
.hero { position: relative; min-height: calc(100svh - 86px); display: grid; overflow: hidden; background: #1f2a1c; }
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 0% 45%;
  transform-origin: 42% 45%;                 /* his face: the push goes toward him */
  animation: kenburns 28s linear forwards;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .hero-photo img { animation: none; } }
/* The photo meets the sky strip on a ridge, not a ruled line. */
.ridge-top { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(18px, 3vw, 40px); z-index: 1; display: block; }
.ridge-top path { fill: var(--sky); }

.hero-copy {
  position: relative; z-index: 2; align-self: center; justify-self: end;
  width: min(24rem, 30vw); margin: 140px calc(var(--gutter) + 4.5vw) 140px 0; text-align: center;
}
.island { position: absolute; inset: -30% -27%; width: auto; height: auto; z-index: -1; overflow: visible; pointer-events: none; }
.island .land { fill: var(--sky); }
.island .ring { fill: none; stroke: var(--sky); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.island .r1 { stroke-opacity: .95; }
.island .r2 { stroke-opacity: .75; }
.island .r3 { stroke-opacity: .55; }
.hero-copy .t-label { color: var(--roast-soft); margin-bottom: 1.4rem; line-height: 1.9; }
.hero-copy .t-lead { margin: 1.5rem auto 2.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-caption { position: absolute; left: var(--gutter); bottom: 26px; z-index: 2; margin: 0; color: var(--parchment); text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* Below 1280px there isn't enough forest beside him for the island, so he sits above the words,
   whole, and the words sit on the sky below on a ridge. */
@media (max-width: 1279px) {
  .hero { display: block; min-height: 0; background: var(--sky); }
  .hero-photo { position: relative; inset: auto; height: 62svh; }
  .hero-photo img { object-position: 45% 45%; transform-origin: 50% 45%; }
  .hero-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(18px, 4vw, 40px);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0,48 L0,28 C180,6 360,40 560,24 C760,8 940,36 1140,20 C1260,11 1360,22 1440,14 L1440,48 Z' fill='%23C6D6DE'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }
  .hero-copy { width: auto; max-width: 34rem; margin: 0 auto; padding: 44px var(--gutter) 88px; }
  .island { display: none; }
  .hero-caption { display: none; }
}
@media (max-width: 820px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 12px; padding-bottom: 16px; }
  .site-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 20px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
}

/* ---------- 01 about ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.then-now { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.then-now figure { margin: 0; }
.then-now img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.then-now .then img { object-position: 50% 30%; filter: sepia(.12); }
.then-now .now img  { object-position: 48% 40%; }
.then-now figcaption { margin-top: .6rem; }
.then-now-note { grid-column: 1 / -1; margin-top: 1.2rem; }
.about-copy .t-body { max-width: var(--measure); }
.about-copy .t-statement { margin-bottom: 1.6rem; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: clamp(64px, 8vw, 112px); padding-top: 40px; position: relative; }
.stats::before { /* a contour, not a rule */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 8 C150 2 260 13 420 7 S700 1 860 8 1080 12 1200 5' fill='none' stroke='%23983F1D' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.stat .t-stat { display: block; margin-bottom: .5rem; }
.stat .t-caption { display: block; color: var(--roast-soft); max-width: 13rem; }

.field-note { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: center; margin-top: clamp(56px, 7vw, 96px); }
.field-note img { width: 180px; height: 180px; object-fit: cover; border-radius: 50%; }
.places { margin: .6rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .2em .9em; }
.places li { font-family: var(--f-voice); font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(1.5rem, 2.8vw, 2.35rem); line-height: 1.22; font-weight: 330; color: var(--laterite); }
.places li:not(:last-child)::after { content: " ·"; color: var(--roast-soft); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .field-note { grid-template-columns: 1fr; }
  .field-note img { width: 140px; height: 140px; }
}

/* ---------- 02 mission, and the valley ---------- */
.mission .wrap { max-width: 1100px; }
.mission .chapter { margin-bottom: 2.2rem; }
.mission .t-heading { max-width: 22ch; margin: 0 auto; text-align: center; }
.mission-body { max-width: var(--measure); margin: clamp(40px, 5vw, 64px) auto 0; }
.band { position: relative; margin: 0; height: clamp(360px, 72vh, 820px); overflow: hidden; }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; } /* keeps his whole head and the cherry in his hand */

/* ---------- 03 films ---------- */
.film { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 5vw, 88px); align-items: start; margin-bottom: clamp(96px, 12vw, 176px); }
.film.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.film.flip .film-poster { order: 2; }
/* The poster is the play button. */
button.film-poster { all: unset; cursor: pointer; display: block; position: relative; }
button.film-poster img { width: 100%; box-shadow: 0 30px 60px -30px rgba(43, 33, 27, .45); transition: transform .6s var(--ease); }
button.film-poster:hover img { transform: translateY(-4px); }
button.film-poster:focus-visible { outline: 2px solid var(--roast); outline-offset: 6px; }
.film-meta { color: var(--roast-soft); margin-bottom: 1rem; }
.film .t-heading { margin-bottom: 1.4rem; }
.film .t-lead { max-width: 36rem; }
.awards { list-style: none; margin: 2rem 0; padding: 0; display: grid; gap: .55rem; }
.awards li { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: baseline; }
.awards .kind { color: var(--roast-soft); }
.awards .win .kind { color: var(--roast); }
.awards .win .kind::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; background: var(--cherry); margin-right: .55em; transform: translateY(-.05em); }
.pull { margin: 2.2rem 0; padding: 0; }
.pull .t-statement { margin: 0 0 .7rem; }
.pull cite { font-style: normal; color: var(--roast-soft); }
.film-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2.2rem; }
.credits { color: var(--roast-soft); margin-top: 1.8rem; }
/* Choosing to watch opens the film at full width, the size it was made for, under its own row. */
.film .player { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 9; background: #000; }
.film .player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.reach { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.reach figure { margin: 0; }
.reach img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
.reach figcaption { margin-top: .7rem; color: var(--roast-soft); }
.reach blockquote { margin: 0; }
.reach blockquote + blockquote { margin-top: 2.2rem; }
.reach cite { display: block; font-style: normal; color: var(--roast-soft); margin-top: .6rem; }

@media (max-width: 900px) {
  .film, .film.flip { grid-template-columns: 1fr; }
  .film.flip .film-poster { order: 0; }
  button.film-poster { max-width: 420px; }
  .reach { grid-template-columns: 1fr; }
  .awards li { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- 04 photographs: beds of different heights, nothing cropped ---------- */
/* Each bed is one row. Every photo in a row shares a height and takes the width its own shape
   asks for (flex-grow = its aspect ratio), so no frame is cut to fit and every row ends flush. */
.sca { max-width: 40rem; margin: 1.6rem auto 0; }
.sca .t-label { color: var(--laterite); margin-right: .6em; }
.beds { display: grid; gap: var(--gap); }
.bed { display: flex; gap: var(--gap); }
.bed figure { flex: var(--ar) 1 0%; margin: 0; min-width: 0; }
.bed img { width: 100%; border-radius: 2px; }
.gallery-foot { text-align: center; margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 700px) {
  .bed { flex-direction: column; }
  .bed figure { flex: none; }
}

/* ---------- 05 coffee: farm and stage, one line between them ---------- */
.chain { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.chain figure { margin: 0; }
.chain img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.chain-caps { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 1.1rem; }
.chain-caps svg { width: 100%; height: 14px; overflow: visible; }
.chain-caps path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-dasharray: 1 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chain-caps circle { fill: currentColor; }
.coffee-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 88px); margin-top: clamp(56px, 7vw, 96px); }
.coffee-copy .t-body { max-width: var(--measure); }
.roles { list-style: none; margin: 0; padding: 0; }
.roles li { padding: 1rem 0; display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; align-items: baseline; }
.roles li + li { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 8' preserveAspectRatio='none'%3E%3Cpath d='M0 5 C120 1 220 7 330 4 S520 2 600 5' fill='none' stroke='%235E5044' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat top / 100% 8px; }
@media (max-width: 900px) { .chain, .coffee-copy { grid-template-columns: 1fr; } }

/* ---------- 06 how I work ---------- */
.why-line { max-width: 44rem; margin: 0 auto clamp(56px, 7vw, 96px); text-align: center; }
.ways { list-style: none; margin: 0 auto; padding: 0; max-width: 60rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px) clamp(32px, 5vw, 80px); }
.ways li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1.1rem; align-items: start; }
.ways .t-stat { color: var(--laterite); font-size: clamp(2.2rem, 3.4vw, 2.8rem); }
.ways h3 { margin: .2rem 0 .7rem; }
@media (max-width: 800px) { .ways { grid-template-columns: 1fr; } }

/* ---------- 07 contact: one way in ---------- */
.contact .wrap { text-align: center; }
.contact .t-heading { max-width: 16ch; margin: 0 auto; }
.contact .t-lead { max-width: 38rem; margin: 1.8rem auto 2.6rem; }
.offer { list-style: none; padding: 0; margin: 0 auto 3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 64rem; }
.offer li { border: 1px solid rgba(43, 33, 27, .28); border-radius: 999px; padding: .55em 1.15em; }
.email { display: inline-block; text-decoration: none; color: var(--roast); border-bottom: 4px solid var(--seedling); padding-bottom: .12em; transition: border-color .25s var(--ease); }
.email:hover { border-color: var(--roast); }

.site-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 36px var(--gutter) 44px; max-width: 1440px; margin: 0 auto; color: var(--roast-soft); }
.site-footer .brand, .site-footer .mark, .site-footer a { color: var(--roast-soft); }
.site-footer a:hover { color: var(--roast); }

/* ---------- archives: a montage of everything, uncropped ---------- */
/* Justified rows without cropping: each photo grows by its own aspect ratio, so every photo in a row
   shares one height and every row ends flush. The last row keeps its natural size. */
.archives .wrap { max-width: none; }
.archive-actions { margin: 1.8rem 0 0; }
.montage { --h: clamp(110px, 12.5vw, 210px); display: flex; flex-wrap: wrap; gap: 8px; }
.montage::after { content: ""; flex-grow: 1000000; }
.montage figure { margin: 0; flex-grow: calc(var(--ar) * 100); flex-basis: calc(var(--ar) * var(--h)); min-width: 0; overflow: hidden; border-radius: 2px; }
.montage .tile { all: unset; display: block; cursor: zoom-in; }
.montage img { width: 100%; height: auto; transition: transform .6s var(--ease); }
.montage .tile:hover img { transform: scale(1.04); }      /* leaning in to look closer */
.montage .tile:focus-visible { outline: 2px solid var(--roast); outline-offset: 2px; }
.archive-foot { text-align: center; padding-top: clamp(72px, 9vw, 120px); padding-bottom: 24px; }
.archive-foot .t-statement { margin-bottom: 1.2rem; }

/* The viewer: the photograph alone on dark roast, nothing else competing with it. */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(43, 33, 27, .95); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
.lb-btn { position: fixed; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; background: var(--seedling); color: var(--roast); font-size: 1.5rem; line-height: 1; display: grid; place-items: center; }
.lb-btn:hover { background: var(--parchment); }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-count { position: fixed; left: 0; right: 0; bottom: 18px; margin: 0; text-align: center; color: var(--parchment); }
@media (max-width: 700px) {
  .montage { --h: 110px; gap: 5px; }
  .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
  .lb-count { bottom: 28px; }
}

/* ---------- back to the top: seedling, because it's something you can press ---------- */
/* It waits until you've scrolled a screen down, then sits in the bottom corner. */
.to-top {
  position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px); z-index: 30;
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--seedling); color: var(--roast); display: grid; place-items: center;
  box-shadow: 0 10px 24px -10px rgba(43, 33, 27, .45);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), background .25s var(--ease);
}
.to-top svg { width: 18px; height: 18px; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--roast); color: var(--seedling); }
.to-top:focus-visible { outline: 2px solid var(--roast); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }