/* Waxcap
   Layout idea: a pocket field guide. A small wordmark and a place picker
   on one line, section toggles beneath, then plates in a grid. Each plate
   flips to a guide entry. Section colour lives only in the thumb tab on
   each plate's edge. The expand button on an entry opens the photo in a
   full-screen view. */

:root {
  color-scheme: light;
  --paper: #EADFC8;      /* buff paper */
  --leaf: #F3EBD9;       /* entry page, a shade lighter */
  --ink: #1F3A2B;        /* spruce ink */
  --ink-soft: #4A5F50;
  --rule: #CFC3A6;
  --gold: #C9921A;       /* spot colour. Gold type only ever sits on spruce. */
  --tab-fungi: #C9921A;
  --tab-moss: #6E8F3C;
  --tab-forest: #4B6E7C;
  --serif: "Alegreya", "Iowan Old Style", Georgia, serif;
  --sans: "Alegreya Sans", "Gill Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  position: relative;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
}
/* Map-contour texture. One SVG (img/contours.svg) used as a mask, so the
   line colour and strength are set here. Barely there on the paper pages,
   plain to see on the cover. Remake it with tools/make_contours.py. */
body::before,
.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url(img/contours.svg) center top / 1400px repeat;
  mask: url(img/contours.svg) center top / 1400px repeat;
}
/* Off on the paper pages for now: it competed with the photos. To bring it
   back, change "display: none" to "background: var(--ink); opacity: 0.09". */
body::before { display: none; }
.cover::before { background: #0C1A12; opacity: 0.75; }

/* Cover: the first screen, like the front of a pocket guide */
.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
  color: var(--gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 24px 36px;
  text-align: center;
}
.cover > * { position: relative; margin: 0; }
.cover-no,
.cover-sub,
.cover-open {
  font-family: var(--sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.cover-no { font-size: 15px; }
.cover-main {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vh, 56px);
}
.wordmark {
  display: block;
  aspect-ratio: 3888 / 649;
  background: currentColor;
  -webkit-mask: url(img/wordmark.svg) center / contain no-repeat;
  mask: url(img/wordmark.svg) center / contain no-repeat;
}
.cover .wordmark { width: min(100%, 640px); }
/* the print, tipped in like a bookplate */
.cover-plate {
  width: min(46vw, 28vh, 240px);
  background: var(--paper);
  padding: 7px;
  border-radius: 2px;
}
.cover-plate img { display: block; width: 100%; height: auto; }
.cover-sub { font-size: 14px; line-height: 1.6; max-width: 30ch; text-wrap: balance; }
.cover-open {
  font-size: 14px;
  color: var(--gold);
  text-decoration: none;
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  padding: 12px 22px;
}
.cover-open:hover { background: var(--gold); color: var(--ink); }
.cover a:focus-visible { outline-color: var(--gold); }

.page {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 20px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Top bar: wordmark and place picker */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { color: var(--ink); text-decoration: none; }
.logo .wordmark { height: 19px; }
.place { position: relative; }
.place select {
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 30px 5px 10px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.place::after {
  content: "";
  position: absolute;
  right: 12px; top: 50%;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* Section filters: quiet text toggles */
.sections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
}
.sections button {
  font: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border-bottom: 2px solid transparent;
}
.sections button .n { font-variant-numeric: tabular-nums; font-size: 14px; }
.sections button .swatch {
  width: 9px; height: 9px; border-radius: 2px; align-self: center;
  background: var(--tab, var(--ink-soft));
}
.sections button[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--ink);
}
.sections button:hover { color: var(--ink); }
button:focus-visible,
select:focus-visible,
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Plates */
.plates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 860px) { .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .plates { grid-template-columns: minmax(0, 1fr); } }

.plate { perspective: 1400px; }
.plate[hidden] { display: none; }
.plate[data-section="fungi"]  { --tab: var(--tab-fungi); }
.plate[data-section="moss"]   { --tab: var(--tab-moss); }
.plate[data-section="forest"] { --tab: var(--tab-forest); }

.flip {
  width: 100%;
  aspect-ratio: 3 / 4;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(.2,.7,.2,1);
}
.flip[data-open="true"] { transform: rotateY(180deg); }
.face {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  cursor: pointer;
}
.front {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
}
.front img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* thumb tab, as on the fore-edge of a field guide */
.face::after {
  content: "";
  position: absolute;
  right: 0; top: 18px;
  width: 7px; height: 44px;
  background: var(--tab);
  border-radius: 3px 0 0 3px;
}
.back {
  transform: rotateY(180deg);
  background: var(--leaf);
  border: 1px solid var(--rule);
  padding: 16px 26px 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
}
.expand {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
}
.expand:hover { border-color: var(--ink); }
/* keyboard-only way back to the photo; pointer users tap the entry */
.turn {
  position: absolute;
  left: 22px; bottom: 8px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--leaf);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: 2px 8px;
  opacity: 0;
  pointer-events: none;
}
.turn:focus-visible { opacity: 1; pointer-events: auto; }
.plate-no { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.names { display: flex; flex-direction: column; gap: 2px; }
.common {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.latin { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); }
.conf { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.conf i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: inline-block;
}
.conf[data-level="confident"] i { background: var(--ink); }
.conf[data-level="likely"] i { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.notes { font-family: var(--serif); font-size: 18px; line-height: 1.4; margin: 0; }
/* extra photos of the same find */
.angles { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb {
  width: 52px; height: 52px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}
.thumb:hover { border-color: var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facts {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  font-size: 15px;
}
.facts dt { color: var(--ink-soft); }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Larger view */
.viewer {
  --shade: #0E120F;
  --shade-ink: #E6E9DD;
  width: 100vw; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--shade);
  color: var(--shade-ink);
  cursor: zoom-out;
}
.viewer[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.viewer::backdrop { background: #0E120F; }
.viewer img {
  max-width: 100%;
  max-height: calc(100dvh - 44px);
  object-fit: contain;
  display: block;
}
.viewer-caption {
  margin: 0;
  height: 44px;
  display: flex;
  align-items: center;
  font-family: var(--serif);
  font-size: 17px;
}
.viewer-close,
.viewer-nav {
  position: absolute;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--shade-ink);
  background: rgba(14, 18, 15, 0.6);
  border: 1px solid rgba(230, 233, 221, 0.4);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.viewer-close { top: 12px; right: 12px; }
.viewer-nav { top: 50%; transform: translateY(-50%); }
.viewer-nav[hidden] { display: none; }
.viewer-prev { left: 12px; }
.viewer-next { right: 12px; }
.viewer-close:focus-visible,
.viewer-nav:focus-visible { outline-color: var(--shade-ink); }

.empty { margin: 0; color: var(--ink-soft); }
.empty[hidden] { display: none; }

.colophon {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 62ch;
}

@media (prefers-reduced-motion: reduce) {
  .flip { transition: none; }
}