/* Lambscaping — site styles. No build step; edit directly. */

:root {
  /* Brand: blue & white, Raleway (matches the LambscapingRI business cards). */
  --cream: #ffffff;       /* page background */
  --wool: #ffffff;        /* card surfaces */
  --paper: #f4f8fd;       /* alternate section band */
  --ink: #0f1b2d;
  --ink-soft: #4a5d75;
  --pasture: #1d5fa8;     /* primary blue */
  --pasture-deep: #0b2545;/* navy */
  --moss: #1d5fa8;        /* eyebrows, small accents */
  --clover: #9cc3f0;      /* focus ring, on-dark accent */
  --bark: #0b2545;
  --brush: #c2571a;       /* Brush Crew accent */
  --brush-soft: #fce9d8;
  --meadow: #1d5fa8;      /* Meadow Crew accent */
  --meadow-soft: #dceafa;
  --sun: #1d5fa8;
  --line: #d5e2f0;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(11, 37, 69, .05), 0 8px 24px rgba(11, 37, 69, .07);
  --display: "Raleway", "Segoe UI", system-ui, sans-serif;
  --body: "Raleway", "Segoe UI", system-ui, sans-serif;
  --wrap: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 500 17px/1.65 var(--body);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--pasture); text-underline-offset: 3px; }
a:hover { color: var(--brush); }
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  color: var(--pasture-deep);
}
h1 { font-size: clamp(2.3rem, 5.6vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 42em; }
.eyebrow {
  display: inline-block;
  font: 600 .78rem/1 var(--body);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 1rem;
}
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.section { padding: 72px 0; }
.section.tight { padding: 48px 0; }
.section.paper { background: var(--paper); }
.section.dark { background: var(--pasture-deep); color: #e3eefb; }
.section.dark h2, .section.dark h3 { color: var(--wool); }
.section.dark .lede { color: #c7d6e8; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--wool); padding: 8px 12px; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--pasture-deep); }
.brand svg { width: 38px; height: 38px; flex-shrink: 0; }
.brand b { display: block; font: 400 1.75rem/1 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.brand small { display: block; white-space: nowrap; margin-top: 3px; font: 600 .7rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  text-decoration: none; color: var(--ink); font-weight: 500; font-size: .95rem;
  padding: 8px 12px; border-radius: 999px;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--paper); color: var(--pasture-deep); }
.nav a { white-space: nowrap; }
.nav a.btn, .nav a.btn:hover { margin-left: 8px; color: var(--wool); background: var(--pasture); }
.nav a.btn:hover { background: var(--pasture-deep); }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 10px; font: inherit; color: var(--ink); cursor: pointer;
}
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line); padding: 8px 16px 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px; border-radius: 10px; }
  .nav .btn { margin: 8px 0 0; text-align: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px;
  font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  padding: 14px 22px; border-radius: 8px; border: 2px solid transparent;
  background: var(--pasture); color: var(--wool);
  transition: transform .15s ease, background .15s ease;
}
.btn:hover { background: var(--pasture-deep); color: var(--wool); transform: translateY(-1px); }
.btn.sm { padding: 10px 16px; font-size: .92rem; }
.btn.ghost { background: transparent; color: var(--pasture-deep); border-color: var(--pasture); }
.btn.ghost:hover { background: var(--pasture); color: var(--wool); }
.btn.sun { background: #fff; color: var(--pasture-deep); }
.btn.sun:hover { background: var(--meadow-soft); color: var(--pasture-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 64px 0 0; }
.hero-grid { display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero h1 em { font-style: normal; color: var(--pasture); }
.hero .lede { margin-bottom: 28px; }
.hero-art { position: relative; }
.hero-drawing { position: relative; display: grid; place-items: center; }
.hero-drawing img { width: min(440px, 100%); height: auto; mix-blend-mode: multiply; }
.hero-drawing .pill {
  position: absolute; background: #fff; color: var(--pasture-deep); border: 1px solid var(--line); border-radius: 999px;
  font: 700 .82rem/1 var(--body); padding: 9px 14px; box-shadow: var(--shadow); white-space: nowrap;
}
.hero-drawing .pill::before { content: "●"; margin-right: 6px; }
.hero-drawing .pill.b { left: 0; top: 18%; } .hero-drawing .pill.b::before { color: var(--brush); }
.hero-drawing .pill.m { right: 0; top: 58%; } .hero-drawing .pill.m::before { color: var(--meadow); }
.no-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.no-list .no { display: inline-grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; }
.no-list span { font-weight: 700; color: var(--ink); }
.trust-unused {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .92rem;
}
.trust span::before { content: "✓"; color: var(--moss); font-weight: 700; margin-right: 8px; }

/* ---------- crews split ---------- */
.crews { display: grid; gap: 24px; }
@media (min-width: 860px) { .crews { grid-template-columns: 1fr 1fr; } }
.crew-card {
  position: relative; border-radius: 22px; padding: 32px; overflow: hidden;
  display: flex; flex-direction: column; min-height: 100%;
}
.crew-card.brush { background: var(--brush-soft); }
.crew-card.meadow { background: var(--meadow-soft); }
.crew-card .tag {
  align-self: flex-start; font: 600 .75rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px; color: var(--wool); margin-bottom: 18px;
}
.crew-card.brush .tag { background: var(--brush); }
.crew-card.meadow .tag { background: var(--meadow); }
.crew-card h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.crew-card .portrait-row { display: flex; gap: 6px; margin: 8px 0 20px; }
.crew-card .portrait-row svg { width: 64px; height: 64px; }
.crew-card ul { padding: 0; margin: 0 0 24px; list-style: none; }
.crew-card li { padding: 8px 0; border-top: 1px solid rgba(31, 42, 28, .1); }
.crew-card li b { color: var(--pasture-deep); }
.crew-card .btn { margin-top: auto; align-self: flex-start; }
.crew-card.brush .btn { background: var(--brush); }
.crew-card.meadow .btn { background: var(--meadow); }

/* ---------- generic grids / cards ---------- */
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: 1fr; }
.grid.three, .grid.four { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid.three, .grid.four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) {
  .grid.two { grid-template-columns: 1fr 1fr; }
  .grid.three { grid-template-columns: repeat(3, 1fr); }
  .grid.four { grid-template-columns: repeat(4, 1fr); }
}
.card {
  background: var(--wool); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.icon-dot {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--meadow-soft); color: var(--pasture); font-size: 1.3rem; margin-bottom: 14px;
}

/* ---------- proof / case study ---------- */
.proof { display: grid; gap: 32px; align-items: center; }
@media (min-width: 860px) { .proof { grid-template-columns: 1fr 1fr; } }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.stat b { display: block; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--display); color: #fff; }
.stat span { font-size: .88rem; color: #c7d6e8; }
.section:not(.dark) .stat b { color: var(--pasture); }
.section:not(.dark) .stat span { color: var(--ink-soft); }
blockquote {
  margin: 0; padding: 24px 28px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px;
  font: 500 italic 1.2rem/1.55 var(--display); background: rgba(255, 255, 255, .06);
}
blockquote cite { display: block; margin-top: 12px; font: 500 normal .9rem/1.4 var(--body); color: #c7d6e8; }
.photo-slot {
  aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; position: relative;
  background: #13345c; border: 2px dashed #3e6593;
  display: grid; place-items: center; color: #c7d6e8; text-align: center; font-size: .9rem;
}
.photo-slot img { width: 100%; height: 100%; object-fit: cover; }
.photo-slot .note { position: absolute; bottom: 12px; left: 12px; right: 12px; opacity: .8; }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba .photo-slot { aspect-ratio: 3 / 4; }
.ba .label {
  position: absolute; top: 10px; left: 10px; background: var(--wool); color: var(--ink);
  font: 600 .72rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px;
}

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 16px; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding: 22px 20px 20px; background: var(--wool); border: 1px solid var(--line); border-radius: var(--radius); }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pasture); color: var(--wool); font: 700 1rem/1 var(--display); margin-bottom: 12px;
}
.step h3 { font-size: 1.1rem; }
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

/* ---------- roster ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.chip {
  font: 500 .92rem/1 var(--body); padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--wool); color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--pasture); color: var(--wool); border-color: var(--pasture); }
.roster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.animal {
  background: var(--wool); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow); display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.animal:hover { transform: translateY(-3px) rotate(-.3deg); }
/* overflow: hidden is what holds the square: without it an aspect-ratio box grows to fit a portrait photo. */
.animal .pic { aspect-ratio: 1 / 1; background: var(--paper); position: relative; overflow: hidden; }
.animal .pic img, .animal .pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.animal .pic-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: rgba(11, 37, 69, .55); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
}
.animal .pic-nav.prev { left: 8px; }
.animal .pic-nav.next { right: 8px; }
/* The whole picture opens the animal; the arrows sit above it. */
.animal .pic-open { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.animal .pic-open:focus-visible { outline: 3px solid var(--clover); outline-offset: -3px; }
.animal .pic-nav { z-index: 2; }
.animal .crew-flag, .animal .pic-count { z-index: 2; pointer-events: none; }
.animal .pic-count {
  position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; background: rgba(11, 37, 69, .6); color: #fff;
}
.animal .crew-flag {
  position: absolute; top: 12px; left: 12px; color: var(--wool);
  font: 600 .7rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px;
}
.crew-flag.brush { background: var(--brush); }
.crew-flag.meadow { background: var(--meadow); }
.crew-flag.home { background: var(--bark); }
.animal .body { padding: 16px 18px 20px; }
.animal h3 { margin: 0 0 2px; font-size: 1.4rem; }
.animal .meta { font-size: .85rem; color: var(--ink-soft); margin-bottom: 8px; }
.animal .role { font-weight: 600; color: var(--pasture); font-size: .92rem; margin-bottom: 6px; }
.animal p { font-size: .94rem; margin: 0; }
.animal .fact { margin-top: 10px; font-size: .85rem; color: var(--bark); }
.animal .fact::before { content: "Fun fact · "; font-weight: 600; }
.empty { padding: 40px; text-align: center; color: var(--ink-soft); border: 2px dashed var(--line); border-radius: 18px; }

/* ---------- team ---------- */
.person { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: start; }
.person .avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--paper); }
.person .avatar img, .person .avatar svg { width: 100%; height: 100%; object-fit: cover; }
.person h3 { margin: 0; }
.person .role { color: var(--moss); font-weight: 600; font-size: .92rem; margin-bottom: 8px; }

/* ---------- forms ---------- */
form.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: .92rem; }
.field .hint { font-size: .82rem; color: var(--ink-soft); }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  font: inherit; color: var(--ink); background: var(--wool);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; width: 100%;
}
input:focus, select:focus, textarea:focus, .chip:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--clover); outline-offset: 1px;
}
textarea { min-height: 130px; resize: vertical; }
.row2 { display: grid; gap: 16px; }
@media (min-width: 640px) { .row2 { grid-template-columns: 1fr 1fr; } }
.radio-cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .radio-cards { grid-template-columns: repeat(3, 1fr); } }
.radio-cards label {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--line); background: var(--wool); border-radius: 12px; padding: 14px; font-weight: 500;
}
.radio-cards input { margin-top: 4px; accent-color: var(--pasture); }
.radio-cards small { display: block; font-weight: 400; color: var(--ink-soft); font-size: .82rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 14px 16px; border-radius: 10px; font-weight: 500; }
.notice.ok { background: var(--meadow-soft); color: var(--pasture-deep); }
.notice.err { background: var(--brush-soft); color: #8a3a0e; }

/* ---------- job lookup ---------- */
.job-code-form { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.job-code-form input { flex: 1 1 220px; font: 600 1.1rem/1 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.job-head { display: grid; gap: 20px; margin-bottom: 32px; }
@media (min-width: 860px) { .job-head { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.job-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.job-facts div { background: var(--wool); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.job-facts dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.job-facts dd { margin: 4px 0 0; font-weight: 600; }
/* Who is on the site, as faces near the top of a job page (site.js onSiteStrip). */
.onsite { margin: -8px 0 32px; }
.onsite-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.onsite-head h3 { margin: 0; }
.onsite-head small { color: var(--ink-soft); font-weight: 500; }
.onsite-head a { font-weight: 600; font-size: .92rem; white-space: nowrap; }
.faces { display: flex; flex-wrap: wrap; gap: 14px 10px; }
.face { display: flex; flex-direction: column; align-items: center; width: 84px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.face-pic { display: block; width: 68px; height: 68px; border-radius: 50%; overflow: hidden; border: 3px solid var(--wool); box-shadow: 0 0 0 1px var(--line), var(--shadow); background: var(--paper); transition: transform .15s; }
.face-pic img, .face-pic svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-name { margin-top: 6px; font-size: .82rem; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.face:hover .face-pic, .face:focus-visible .face-pic { transform: scale(1.06); }
.face:focus-visible { outline: none; }
.face:focus-visible .face-pic { box-shadow: 0 0 0 3px var(--clover); }
#crew-cards { scroll-margin-top: 90px; }
@media (max-width: 480px) { .face { width: 70px; } .face-pic { width: 56px; height: 56px; } }
.status { display: inline-block; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: .85rem; background: var(--meadow-soft); color: var(--pasture-deep); }
.status.scheduled { background: #fbeccd; color: #7a4d06; }
.status.complete { background: var(--paper); color: var(--ink-soft); }

/* ---------- FAQ ---------- */
details { border-bottom: 1px solid var(--line); padding: 16px 0; }
details summary { cursor: pointer; font: 600 1.1rem/1.4 var(--display); color: var(--pasture-deep); list-style: none; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; float: right; font-family: var(--body); color: var(--moss); }
details[open] summary::after { content: "−"; }
details p { margin: 12px 0 0; color: var(--ink-soft); }

/* ---------- CTA band + footer ---------- */
.cta-band { background: var(--pasture); color: #fff; border-radius: 24px; padding: 40px 32px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 860px) { .cta-band { grid-template-columns: 1fr auto; padding: 48px; } }
.cta-band h2 { margin: 0 0 6px; }
.cta-band p { margin: 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #e3eefb; }
.cta-band .btn { background: #fff; color: var(--pasture-deep); }
.cta-band .btn:hover { background: var(--paper); color: var(--pasture-deep); }
.site-footer { background: var(--pasture-deep); color: #c7d6e8; padding: 56px 0 28px; margin-top: 72px; font-size: .95rem; }
.site-footer a { color: var(--wool); }
.site-footer .cols { display: grid; gap: 32px; }
@media (min-width: 760px) { .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4 { color: var(--wool); font-size: 1.05rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer .legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.page-head { padding: 56px 0 24px; }
.page-head .lede { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- the working map on a job page ---------- */
.site-map { margin: 8px 0 40px; }
.map-frame { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: #243b24; box-shadow: var(--shadow); }
.map-frame img, .map-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-frame img { object-fit: fill; }
.map-frame .fence-shadow { fill: none; stroke: rgba(0, 0, 0, .55); stroke-width: 5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-frame .fence { fill: none; stroke: #ffffff; stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.map-frame .fence.hot { stroke: #ffd23f; stroke-dasharray: 8 4; }
.map-frame .gate { fill: #ffffff; stroke: #0b2545; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.map-frame .water { fill: #3fa9f5; stroke: #fff; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.map-frame .pen-name { fill: #fff; font-weight: 700; text-anchor: middle; paint-order: stroke; stroke: rgba(11, 37, 69, .85); stroke-width: 3px; stroke-linejoin: round; font-family: var(--body); }
.map-frame .beast { stroke: #0b2545; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.map-time { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.map-time input[type=range] { flex: 1; accent-color: var(--pasture); }
.map-time output { min-width: 7.5em; font-weight: 600; color: var(--pasture-deep); }
.map-status { margin: 10px 0 4px; font-weight: 600; }
.map-pens { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-soft); font-size: .95rem; }
.map-key { font-size: .85rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.map-key .k { display: inline-block; width: 18px; height: 4px; border-radius: 2px; background: #fff; border: 1px solid var(--line); }
.map-key .k.hot { background: #ffd23f; }
.map-key .k.water, .map-key .k.gate { width: 10px; height: 10px; border-radius: 50%; }
.map-key .k.water { background: #3fa9f5; }
/* Russ: the animals' movement is simulated, and the page says so wherever the
   movie is seen: under the map, in Full screen, and in the board backups. Plain
   text, never a pop-up, so a still frame carries it too. */
.map-key .mv-note { flex-basis: 100%; font-style: italic; }
@media (max-width: 560px) { .map-time { flex-wrap: wrap; } .map-time input[type=range] { order: 3; flex-basis: 100%; } }

/* ---------- the job, played on its map (assets/js/jobmovie.js) ---------- */
.mv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.mv-head h3 { margin: 0; }
.mv-stage { display: grid; gap: 20px; align-items: start; }
@media (min-width: 960px) { .mv-stage { grid-template-columns: minmax(0, 1fr) 340px; } }
.mv-frame { width: min(100%, calc(72vh * var(--arn, 1.5))); margin: 0 auto; }
.mv-frame svg [data-kind] { cursor: pointer; }
.mv-frame .pen-area { fill: rgba(255, 255, 255, 0); stroke: none; transition: fill .4s; }
.mv-frame .pen-area.grazed { fill: rgba(255, 210, 63, .24); }
.mv-frame .pen-area.sel, .mv-frame .pen-area:hover { stroke: #fff; stroke-width: 2px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.mv-frame .charger { fill: #ffd23f; stroke: #0b2545; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mv-frame .hit { fill: transparent; }
.mv-frame .beast.brush { stroke: var(--brush); }
.mv-frame .beast-g.sel .beast, .mv-frame .beast-g:focus-visible .beast { stroke: #ffd23f; stroke-width: 3px; }
/* An animal's head and a goat's horns; the trailer and the person walking the animals over. */
.mv-frame .beast-head { stroke: #0b2545; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mv-frame .beast-horns { fill: none; stroke: #5a4632; stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mv-frame .mv-trailer * { vector-effect: non-scaling-stroke; }
.mv-frame .mv-trailer .box { fill: #dfe6ee; stroke: #0b2545; stroke-width: 2px; }
.mv-frame .mv-trailer .slat { stroke: #8fa3b8; stroke-width: 1.5px; }
.mv-frame .mv-trailer .gate-line { stroke: #0b2545; stroke-width: 4px; }
.mv-frame .mv-trailer .wheel { fill: #1c2430; }
.mv-frame .mv-trailer .tongue { fill: none; stroke: #0b2545; stroke-width: 3px; stroke-linejoin: round; }
.mv-frame .mv-trailer .hitch { fill: #0b2545; }
.mv-frame .mv-handler .shoulders, .mv-frame .mv-worker .shoulders { fill: #1d5fa8; stroke: #0b2545; stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.mv-frame .mv-handler .head, .mv-frame .mv-worker .head { fill: #e9c3a0; stroke: #0b2545; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mv-frame svg [data-kind]:focus { outline: none; }
.mv-frame svg [data-kind]:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; }
/* Where a photo was taken and the way it looked: only for the photo chosen or pointed at. */
.mv-frame .snap { display: none; }
.mv-frame .snap.shown.hover, .mv-frame .snap.shown.sel { display: inline; }
.mv-frame .snap .cone { fill: rgba(255, 255, 255, .42); stroke: rgba(11, 37, 69, .55); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.mv-frame .snap .spot { fill: #fff; stroke: #0b2545; stroke-width: 2px; vector-effect: non-scaling-stroke; }
/* People with the animals: the engagement, in the Brush Crew's warm colour. */
.mv-rail .mark.snap.people { background: var(--brush); }
.stage.people { background: var(--brush-soft); color: #8a3a0e; }
.map-key .k.snap.people { background: var(--brush); }
.mv-frame .visit-pulse { fill: none; stroke: #fff; stroke-width: 3px; vector-effect: non-scaling-stroke; }
.mv-banner { position: absolute; z-index: 4; left: 10px; right: 10px; top: 10px; padding: 8px 12px; border-radius: 12px; background: rgba(11, 37, 69, .84);
  color: #fff; font-size: .95rem; line-height: 1.4; pointer-events: none; }
.mv-banner span { color: #dceafa; }

/* The photos on the map (Russ, 2026-09-25: "a small thumbnail should show on the
   map, clicking on it opens the photo"): little prints that land on their spot
   at the moment they were taken, a stack where several were taken together.
   Above the herd and the trailer, below the banner and the controls. */
.mv-shots { position: absolute; inset: 0; z-index: 2; pointer-events: none; --shot: 46px; }
.mv.presenting .mv-shots { --shot: 68px; }
@media (max-width: 600px) { .mv-shots { --shot: 38px; } }
.mv-shot { position: absolute; width: var(--shot); height: var(--shot); padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in;
  pointer-events: none; opacity: 0; transform-origin: 50% 100%; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 9px)) scale(.35);
  transition: opacity .3s ease, transform .5s cubic-bezier(.2, 1.4, .35, 1); }
.mv-shot.below { transform-origin: 50% 0; transform: translate(calc(-50% + var(--dx, 0px)), 9px) scale(.35); }
.mv-shot.on { opacity: 1; pointer-events: auto; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 9px)); }
.mv-shot.below.on { transform: translate(calc(-50% + var(--dx, 0px)), 9px); }
.mv-shot.on:hover, .mv-shot.on:focus-visible { z-index: 1; transform: translate(calc(-50% + var(--dx, 0px)), calc(-100% - 13px)) scale(1.14); }
.mv-shot.below.on:hover, .mv-shot.below.on:focus-visible { transform: translate(calc(-50% + var(--dx, 0px)), 13px) scale(1.14); }
.mv-shot:focus { outline: none; }
.mv-shot:focus-visible .c1 { outline: 3px solid #ffd23f; outline-offset: 1px; }
.shot-card { position: absolute; inset: 0; border: 2.5px solid #fff; border-radius: 8px; overflow: hidden; background: #dfe8f2;
  box-shadow: 0 3px 10px rgba(11, 37, 69, .45); }
.shot-card[hidden] { display: none; }
.mv-frame .shot-card img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-card.c2 { transform: rotate(-8deg) translate(-3px, 2px); }
.shot-card.c3 { transform: rotate(7deg) translate(3px, 1px); }
/* The corner says what it is: before, after, or people with the animals. */
.mv-shot .c1::after { content: ""; position: absolute; left: 3px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #fff; display: none; }
.mv-shot[data-stage="before"] .c1::after { display: block; background: #d98a12; }
.mv-shot[data-stage="after"] .c1::after { display: block; background: #2f8f46; }
.mv-shot[data-stage="people"] .c1::after { display: block; background: var(--brush); }
/* The tail, pointing at the spot it was taken. */
.mv-shot::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; margin-left: -7px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid #fff; filter: drop-shadow(0 2px 1px rgba(11, 37, 69, .4)); }
.mv-shot.below::after { top: auto; bottom: 100%; border-top: 0; border-bottom: 8px solid #fff; }
.shot-count { position: absolute; right: -8px; top: -8px; min-width: 21px; height: 21px; padding: 0 5px; border-radius: 999px;
  background: #0b2545; color: #fff; font: 700 .72rem/21px var(--body); text-align: center; box-shadow: 0 0 0 2px #fff; }
.shot-count:empty { display: none; }
.mv-shot.sel .c1 { border-color: #ffd23f; box-shadow: 0 0 0 3px rgba(255, 210, 63, .5), 0 3px 10px rgba(11, 37, 69, .45); }
/* Another photo taken at the same spot drops onto the stack while it plays. */
.mv-shot.drop .c1 { animation: shot-drop .55s cubic-bezier(.2, 1.3, .35, 1); }
@keyframes shot-drop { from { transform: translateY(-16px) scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mv-shot, .mv-shot.drop .c1 { transition: none; animation: none; } }
.mv-photo-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.mv-bigplay { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 14px 26px; border: 0; border-radius: 999px;
  font: 700 1.15rem/1 var(--body); background: rgba(255, 255, 255, .94); color: var(--pasture-deep); box-shadow: var(--shadow); cursor: pointer; }
.mv-bigplay:hover { background: #fff; }
.mv-controls { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mv-date { display: flex; flex-direction: column; margin: 0 6px; min-width: 8.5em; line-height: 1.15; }
.mv-date b { color: var(--pasture-deep); font-size: 1.15rem; }
.mv-date span { color: var(--ink-soft); font-size: .85rem; }
.mv-speed { margin-left: auto; }
.mv-scrub { margin: 10px 0 6px; }
.mv-slider { width: 100%; accent-color: var(--pasture); margin: 0; }
.mv-rail { position: relative; height: 18px; margin: 2px 8px 0; }
.mv-rail .mark { position: absolute; top: 3px; width: 11px; height: 11px; padding: 0; border: 2px solid #fff; border-radius: 50%;
  transform: translateX(-50%); background: var(--pasture-deep); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.mv-rail .mark.snap { border-radius: 3px; background: var(--pasture); }
.mv-rail .mark.snap.before { background: #d98a12; }
.mv-rail .mark.snap.after { background: #2f8f46; }
.mv-rail .mark.move { background: #9cc3f0; border-radius: 2px; transform: translateX(-50%) rotate(45deg); width: 9px; height: 9px; }
.mv-rail .mark:hover, .mv-rail .mark:focus-visible { transform: translateX(-50%) scale(1.4); z-index: 1; }
.map-key .k.pen { width: 14px; height: 10px; background: rgba(255, 210, 63, .5); }
.map-key .k.snap { width: 10px; height: 10px; border-radius: 3px; }
.map-key .k.snap.during { background: #fff; border: 2px solid var(--pasture); }
.map-key .k.snap.before { background: #d98a12; }
.map-key .k.snap.after { background: #2f8f46; }
.mv-detail { background: var(--wool); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); min-height: 120px; }
@media (min-width: 960px) { .mv-detail { max-height: calc(72vh + 110px); overflow: auto; } }
.mv-detail h4 { margin: 8px 0 6px; font-size: 1.05rem; }
.mv-detail p { margin: 6px 0; }
.mv-detail .animal { box-shadow: none; }
.mv-when { font-weight: 700; color: var(--pasture-deep); }
.mv-now { font-weight: 600; }
.mv-hint { color: var(--ink-soft); font-size: .92rem; }
.mv-visit { border-left: 3px solid var(--pasture); padding: 4px 0 4px 10px; margin: 10px 0; }
.mv-visit p { color: var(--ink-soft); }
.mv-moves, .mv-stays { margin: 8px 0; padding-left: 18px; color: var(--ink-soft); }
.mv-moves li, .mv-stays li { margin: 3px 0; }
.mv-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 10px; }
.mv-thumbs button { padding: 0; border: 0; border-radius: 8px; overflow: hidden; cursor: pointer; aspect-ratio: 1; }
.mv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-photo { width: 100%; border-radius: 10px; display: block; }
.mv-back { padding: 0; border: 0; background: none; color: var(--pasture); font: 600 .92rem/1.4 var(--body); cursor: pointer; margin-bottom: 6px; }
.stage { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--meadow-soft); color: var(--pasture-deep); }
.stage.before { background: #fbeccd; color: #7a4d06; }
.stage.after { background: #dcefdf; color: #1f5f2e; }
.stage:empty { display: none; }
.planned { font-weight: 500; color: var(--ink-soft); }

/* Before and after: one photo over the other, the divider dragged across. */
.compare { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #0b2545; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare img.before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); width: 3px; margin-left: -1.5px; background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .5); pointer-events: none; }
.compare input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare .tag { position: absolute; bottom: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(11, 37, 69, .8); color: #fff;
  font-size: .78rem; font-weight: 600; pointer-events: none; }
.compare .tag.b { left: 8px; }
.compare .tag.a { right: 8px; }
.job-photos-sec { margin-top: 32px; }
.pairs { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 24px; }
.pairs figure { margin: 0; }
.pairs figcaption { margin-top: 6px; color: var(--ink-soft); font-size: .92rem; }
.snap-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.snap-tile { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 1; cursor: pointer; background: var(--paper); }
.snap-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.snap-tile .stage { position: absolute; left: 6px; top: 6px; }
.snap-tile .when { position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(11, 37, 69, .8); color: #fff; font-size: .75rem; }
.visit-log { margin-top: 20px; }
.visit-log ol { margin: 10px 0 0; padding-left: 20px; }
.visit-log li { margin: 6px 0; }
.visit-log li p { margin: 2px 0 0; color: var(--ink-soft); }
.mv-lightbox { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; background: rgba(6, 22, 43, .95); color: #fff; }
.mv-lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: 8px; }

/* Presenting to a room: the whole screen, the map as big as it goes, a date read from the back. */
html.mv-presenting, html.mv-presenting body { overflow: hidden; }
.mv.presenting { position: fixed; inset: 0; z-index: 150; margin: 0; padding: 14px 18px; overflow: auto; background: #0b2545; color: #fff; }
.mv.presenting .mv-head h3 { color: #fff; }
.mv.presenting .mv-present { background: #fff; color: var(--pasture-deep); }
.mv.presenting .mv-stage { grid-template-columns: minmax(0, 1fr) minmax(280px, 28vw); gap: 18px; }
.mv.presenting .mv-frame { width: min(100%, calc((100vh - 200px) * var(--arn, 1.5))); }
.mv.presenting .mv-date b { color: #fff; font-size: clamp(1.6rem, 3.2vw, 3rem); }
.mv.presenting .mv-date span { color: #9cc3f0; font-size: 1rem; }
.mv.presenting .mv-controls .btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .5); }
.mv.presenting .mv-detail { color: var(--ink); max-height: calc(100vh - 120px); font-size: 1.05rem; }
.mv.presenting .mv-banner { font-size: clamp(1rem, 1.6vw, 1.4rem); }
.mv.presenting .map-key { color: #c7d6e8; }
.mv.presenting .job-photos-sec, .mv.presenting .visit-log { display: none; }
@media (max-width: 760px) { .mv.presenting .mv-stage { grid-template-columns: 1fr; } }

/* The play controls sit centred under the map, on the page and in full screen. */
.mv-bar { justify-content: center; }
/* The second set of controls exists only while presenting. */
.mv-side-controls { display: none; }

/* The corner icon: expand to full screen, and shrink back. */
.mv-corner { position: absolute; bottom: 10px; right: 10px; z-index: 6; width: 40px; height: 40px; padding: 8px; border: 0; border-radius: 10px;
  background: rgba(11, 37, 69, .72); color: #fff; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.mv-corner:hover { background: rgba(11, 37, 69, .92); transform: scale(1.06); }
.mv-corner:focus-visible { outline: 3px solid var(--clover); outline-offset: 2px; }
.mv-corner svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mv-corner .shrink, .mv.presenting .mv-corner .grow { display: none; }
.mv.presenting .mv-corner .shrink { display: inline; }

/* The filmstrip: the job's photos under the timeline. Only while presenting. */
.mv-film { display: none; }
.mv.presenting .mv-film { display: block; position: relative; height: 104px; margin: 0 9px; }
.film-shot { position: absolute; top: 0; width: 64px; height: 64px; padding: 0; transform: translateX(-50%); border: 3px solid #fff; border-radius: 8px;
  background: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); transition: transform .15s ease, opacity .2s ease; }
.film-shot.low { top: 36px; }
.film-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; display: block; }
.film-shot.later { opacity: .45; }
.film-shot.now { border-color: #ffd23f; z-index: 2; }
.film-shot:hover, .film-shot:focus-visible { transform: translateX(-50%) scale(1.25); z-index: 3; opacity: 1; }
.film-count { position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; background: var(--pasture);
  color: #fff; font: 700 .75rem/22px var(--body); text-align: center; }

/* Presenting, wide enough to lay it out properly: the map as tall as the
   screen allows, the play controls and the day's story beside it, and the
   timeline, the photos along it and the key across the whole width. A tall map
   (Win Dodge) leaves a wide panel, a wide one (the Garden) a narrow panel, so
   the panel's own sections flow into columns when there is room. */
@media (min-width: 761px) {
  .mv.presenting { display: flex; flex-direction: column; overflow: hidden; }
  .mv.presenting .mv-head { flex: none; margin-bottom: 8px; }
  .mv.presenting .mv-stage {
    --maph: calc(100vh - 345px);
    --mapw: min(calc(var(--maph) * var(--arn, 1.5)), calc(100vw - 440px));
    flex: 1; min-height: 0; display: grid; gap: 10px 22px; align-items: start;
    grid-template-columns: var(--mapw) minmax(360px, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "map head" "map side" "bar side" "scrub scrub" "film film" "key key";
  }
  .mv.presenting .mv-frame-wrap { display: contents; }
  .mv.presenting .mv-frame { grid-area: map; width: var(--mapw); max-height: var(--maph); }
  /* The usual controls stay at the bottom, where they always are; a second set
     with the big date sits beside the map for whoever is presenting. */
  .mv.presenting .mv-side-controls { display: flex; grid-area: head; margin: 0; }
  .mv.presenting .mv-bar { grid-area: bar; margin: 0; }
  .mv.presenting .mv-bar .mv-date b { font-size: 1.3rem; }
  .mv.presenting .mv-scrub { grid-area: scrub; margin: 0; }
  .mv.presenting .mv-film { grid-area: film; }
  .mv.presenting .map-key { grid-area: key; margin: 0; }
  .mv.presenting .mv-detail { grid-area: side; align-self: stretch; max-height: none; min-height: 0; overflow: auto; container-type: inline-size; }
}

/* The panel while presenting (panelPresent), sized to be read across a room. */
.pp { display: grid; gap: 18px; font-size: 1.1rem; }
.pp h5 { margin: 0 0 8px; font: 700 .78rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--moss); }
.pp-count { margin: 0; font: 700 .85rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.pp-now { margin: 6px 0 0; font-size: clamp(1.2rem, 1.6vw, 1.6rem); font-weight: 700; color: var(--pasture-deep); line-height: 1.3; }
.pp-visit { margin-top: 10px; padding: 10px 12px; border-left: 4px solid var(--pasture); background: var(--paper); border-radius: 0 10px 10px 0; }
.pp-visit b { font-size: 1.15rem; }
.pp-visit p { margin: 4px 0 0; }
.pp-moves { margin: 10px 0 0; padding-left: 20px; }
.pp-pens { display: grid; gap: 8px; }
.pp-pen { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline; text-align: left; font: inherit; color: inherit;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.pp-pen:hover { border-color: var(--pasture); }
.pp-pen span { color: var(--pasture); font-weight: 700; }
.pp-pen small { grid-column: 1 / -1; color: var(--ink-soft); font-size: .85rem; }
.pp-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.pp-photo { position: relative; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: #0b2545; }
.pp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.pp-photo:hover img { transform: scale(1.04); }
.pp-photo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; color: #fff; font-size: .8rem; font-weight: 600; text-align: left;
  background: linear-gradient(transparent, rgba(6, 22, 43, .8)); }
.pp-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pp-chip { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: .9rem;
  font-weight: 600; color: var(--pasture-deep); cursor: pointer; text-align: center; }
.pp-chip:hover { background: var(--paper); }
.pp-face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; background: var(--paper); display: grid; place-items: center; }
.pp-face img, .pp-face svg { width: 100%; height: 100%; object-fit: cover; }
/* A wide panel (a tall map beside it): the day across the top, then photos,
   pens and the herd side by side. */
@container (min-width: 820px) {
  .pp { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .pp-day { grid-column: 1 / -1; }
  .pp-photos { grid-row: span 2; }
  .pp-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

/* ---------- the dialog: an animal's detail, or a photo shown big (site.js openDialog) ---------- */
html.dlg-open, html.dlg-open body { overflow: hidden; }
.dlg-back { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(6, 22, 43, .78); }
.dlg { position: relative; width: min(100%, 560px); max-height: calc(100vh - 32px); overflow: auto; background: var(--wool); color: var(--ink);
  border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.dlg:focus { outline: none; }
.dlg-wide { width: min(100%, 980px); }
.dlg-close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(11, 37, 69, .7); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.dlg-close:focus-visible { outline: 3px solid var(--clover); outline-offset: 2px; }
.dlg-animal { display: grid; }
@media (min-width: 820px) { .dlg-animal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.dlg-pics { background: #0b2545; }
.dlg-body { padding: 22px 24px 26px; }
.dlg-body h2 { margin: 12px 0 4px; }
.dlg-body .crew-flag { display: inline-block; color: var(--wool); font: 600 .7rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; }
.dlg-body .meta { color: var(--ink-soft); margin: 0 0 10px; }
.dlg-body .role { font-weight: 600; color: var(--pasture); margin: 0 0 10px; }
.dlg-body p { margin: 0 0 12px; }
.dlg-body .awards { margin: 0 0 12px; padding-left: 20px; }
.dlg-body .awards-head { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0 6px; }
.dlg-body .registered { font-weight: 600; color: var(--ink-soft); margin: -4px 0 10px; }
.dlg-body .family { display: grid; gap: 6px; margin: 4px 0 16px; }
.dlg-body .family div { display: flex; gap: 10px; }
.dlg-body .family dt { min-width: 5.5em; color: var(--ink-soft); }
.dlg-body .family dd { margin: 0; font-weight: 600; }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--pasture); text-decoration: underline; cursor: pointer; }
.viewer { position: relative; display: flex; align-items: center; justify-content: center; min-height: 260px; height: min(70vh, 620px); background: #0b2545; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.viewer.portrait { height: auto; min-height: 0; }
.viewer.portrait svg { width: 100%; height: auto; display: block; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .88); color: var(--pasture-deep); font-size: 30px; line-height: 1; cursor: pointer; }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }
.viewer-nav:focus-visible { outline: 3px solid var(--clover); }
.viewer-count { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px;
  background: rgba(11, 37, 69, .75); color: #fff; font-size: .85rem; }
.dlg-photo { width: min(100%, 1200px); background: #0b2545; color: #fff; }
.dlg-photo .viewer { height: min(84vh, 900px); }
.dlg-caption { margin: 0; padding: 12px 18px 16px; color: #dceafa; }
@media (max-width: 560px) {
  .dlg-back { padding: 0; }
  .dlg { max-height: 100vh; height: 100%; border-radius: 0; }
  .viewer { height: 56vh; }
}