/* 4. Naturalist's Journal — a field notebook on ruled paper: handwritten notes
   in the margin, small prints held down with tape. */
:root {
  --paper: #fbf9f2;
  --ruled: rgba(78, 122, 178, .17);
  --margin-red: rgba(212, 88, 88, .5);
  --ink: #2b2d33;
  --pen: #1f3d7a;
  --pencil: #5f6168;
  --red-pen: #a33a2c;
  --print: #fffefb;
  --note: #fbeea0;
  --gold: #8a6512;
  --margin: 230px;       /* the margin column, left of the red line */
  --gutter: 48px;
  --pad: 40px;
  --viewer-bg: rgba(25, 27, 32, .96);
  --viewer-fg: #f3f0e6;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --serif: "Lora", Georgia, "Times New Roman", serif;
}
html {
  background-color: var(--paper);
  background-image: repeating-linear-gradient(to bottom, transparent 0 31px, var(--ruled) 31px 32px);
  background-position: 0 14px;
}
body { background: transparent; color: var(--ink); font: 16px/1.6 var(--serif); -webkit-font-smoothing: antialiased; }
.page {
  --line: calc(var(--pad) + var(--margin) + var(--gutter) / 2);
  max-width: 1400px; margin: 0 auto; padding: 0 var(--pad); min-height: 100vh; overflow-x: clip;
  background: linear-gradient(90deg, transparent var(--line), var(--margin-red) var(--line) calc(var(--line) + 1px),
              transparent calc(var(--line) + 1px) calc(var(--line) + 4px), var(--margin-red) calc(var(--line) + 4px) calc(var(--line) + 5px),
              transparent calc(var(--line) + 5px));
}
a:hover { color: var(--pen); }
:focus-visible { outline: 2px dashed var(--pen); outline-offset: 4px; }
::selection { background: rgba(251, 226, 120, .7); }

/* everything outside the species list sits right of the margin line */
.controls, .site-footer { margin-left: calc(var(--margin) + var(--gutter)); }

/* ---------- header ---------- */
.site-header { display: grid; grid-template-columns: var(--margin) minmax(0, 1fr); column-gap: var(--gutter); align-items: end; padding: 54px 0 18px; }
.brand { grid-column: 2; }
.site-title { font: 700 76px/1 var(--hand); color: var(--pen); letter-spacing: -.01em; transform: rotate(-1.2deg); transform-origin: left bottom; }
.site-title a { text-decoration: none; }
.site-subtitle { font: 500 26px/1.2 var(--hand); color: var(--pencil); margin-top: 6px; }
/* the totals, jotted in the margin */
.site-stats {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; text-align: right;
  font: 500 22px/1.25 var(--hand); color: var(--pencil); transform: rotate(-2deg); padding-bottom: 4px;
}
.stat-species { font-weight: 700; font-size: 25px; color: var(--red-pen); }

/* ---------- controls ---------- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; padding: 18px 0 6px; }
.search input {
  width: 260px; max-width: 100%; padding: 2px 4px; border: 0; border-bottom: 2px solid rgba(31, 61, 122, .45); border-radius: 0;
  background: transparent; color: var(--pen); font: 500 25px/1.3 var(--hand);
}
.search input::placeholder { color: var(--pencil); opacity: .9; }
.search input:focus { outline: none; border-bottom-color: var(--pen); }
.sort { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.sort button {
  background: none; border: 2px solid transparent; padding: 0 12px 2px; cursor: pointer; color: var(--pencil);
  font: 500 24px/1.4 var(--hand);
  border-radius: 46% 54% 50% 50% / 58% 46% 54% 42%;
}
.sort button:hover { color: var(--pen); }
.sort button[aria-pressed="true"] { color: var(--pen); font-weight: 700; border-color: rgba(163, 58, 44, .75); transform: rotate(-2deg); }

/* ---------- groups: a note in the margin, prints on the page ---------- */
.group { display: grid; grid-template-columns: var(--margin) minmax(0, 1fr); column-gap: var(--gutter); padding-top: 60px; }
.group-flat { padding-top: 44px; }
.group-flat .species-grid { grid-column: 2; }
.group-title {
  grid-column: 1; align-self: start; position: sticky; top: 22px; text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; padding-top: 4px; font-weight: 400;
}
.group-name {
  font: 700 32px/1.05 var(--hand); color: var(--pen); transform: rotate(-2deg);
  text-decoration: underline wavy rgba(163, 58, 44, .8); text-decoration-thickness: 1.5px; text-underline-offset: 7px;
  text-decoration-skip-ink: none;
}
.group-count { font: 500 21px/1.2 var(--hand); color: var(--pencil); margin-top: 10px; transform: rotate(-2deg); }
.species-grid { grid-column: 2; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 50px 34px; padding-top: 14px; align-items: start; }

/* a print: white border, a slight tilt, tape across the top. Each print keeps
   its photo's shape (between 3:4 and 2:1), and takes about the same area as a
   4:3 print filling the column: portraits are narrower and taller,
   panoramas full width and short. */
.species { --tilt: -1.4deg; --tape-x: 50%; --tape-r: -3deg; --shown: clamp(.75, var(--ar), 2); }
.species:nth-child(5n+2) { --tilt: 1.1deg; --tape-x: 36%; --tape-r: 4deg; }
.species:nth-child(5n+3) { --tilt: -.5deg; --tape-x: 62%; --tape-r: -5deg; }
.species:nth-child(5n+4) { --tilt: 1.7deg; --tape-x: 46%; --tape-r: 2deg; }
.species:nth-child(5n+5) { --tilt: -1deg; --tape-x: 56%; --tape-r: -2deg; }
.species-link {
  position: relative; display: block; padding: 9px 9px 12px; background: var(--print);
  width: min(100%, calc((100% - 18px) * sqrt(var(--shown) / 1.3333) + 18px)); margin-inline: auto;
  box-shadow: 0 1px 2px rgba(60, 45, 20, .16), 0 8px 16px -8px rgba(60, 45, 20, .32);
  transform: rotate(var(--tilt)); transition: transform .25s ease, box-shadow .25s ease;
}
.species-link:hover {
  color: inherit; transform: rotate(0) translateY(-3px);
  box-shadow: 0 2px 3px rgba(60, 45, 20, .14), 0 16px 26px -10px rgba(60, 45, 20, .38);
}
.species-link::before {   /* washi tape */
  content: ""; position: absolute; z-index: 1; top: -12px; left: var(--tape-x); width: 86px; height: 24px;
  transform: translateX(-50%) rotate(var(--tape-r));
  background: repeating-linear-gradient(135deg, hsl(var(--hue) 52% 74% / .78) 0 7px, hsl(var(--hue) 58% 81% / .78) 7px 14px);
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
}
.species-cover { background: #ece8dc; }
.species-cover img { width: 100%; aspect-ratio: 4 / 3; aspect-ratio: var(--shown); object-fit: cover; }
.species-text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 9px 3px 0; }
.species-num, .species-group { display: none; }
.species-name { flex-basis: 100%; font: 700 26px/1.02 var(--hand); color: var(--pen); }
.species-sci { flex-basis: 100%; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--pencil); margin-top: 3px; }
/* count and dates stay whole: on a narrow (portrait) print the dates drop under the count */
.species-count, .species-dates { font: 500 19px/1.2 var(--hand); color: var(--pencil); margin-top: 4px; white-space: nowrap; }
.species-dates { margin-left: auto; text-align: right; }
.group-flat .species-group { display: block; flex-basis: 100%; order: -1; font: 600 18px/1.2 var(--hand); color: var(--red-pen); margin-bottom: 2px; }
.no-results { margin-left: calc(var(--margin) + var(--gutter)); font: 500 26px var(--hand); color: var(--pencil); padding: 40px 0; }

/* ---------- species page ---------- */
.page-species .site-header { padding: 30px 0 4px; }
.page-species .site-title { font-size: 40px; transform: rotate(-1deg); }
.species-page { display: grid; grid-template-columns: var(--margin) minmax(0, 1fr); column-gap: var(--gutter); align-items: start; }
.crumbs { grid-column: 1; grid-row: 1; justify-self: end; position: relative; z-index: 1; padding-top: 30px; font: 500 22px/1.2 var(--hand); }   /* above the head, which shares its cell */
.crumbs a { color: var(--pencil); text-decoration: none; }
.crumbs a::before { content: "\2190\00a0"; }
.crumbs a:hover { color: var(--pen); }
.species-head { grid-column: 1 / -1; grid-row: 1; position: relative; display: grid; grid-template-columns: subgrid; align-items: start; padding: 22px 0 44px; }
.species-titles { grid-column: 2; grid-row: 1; }
.species-titles .species-group { font: 600 22px/1.2 var(--hand); color: var(--red-pen); }
.species-title { font: 700 84px/.95 var(--hand); color: var(--pen); transform: rotate(-1.5deg); transform-origin: left bottom; margin-top: 4px; }
.species-title .species-num { display: none; }
.species-head .species-sci { font-size: 22px; font-style: italic; color: var(--ink); margin-top: 18px; }
.species-family { font-size: 15px; color: var(--pencil); margin-top: 2px; }
.species-more { font: 500 21px/1.3 var(--hand); margin-top: 8px; }
.species-more a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.species-more a::after { content: "\00a0\2197"; }

/* the facts: a sticky note in the margin, free to hang down beside the prints */
.species-facts {
  grid-column: 1; grid-row: 1; position: absolute; width: var(--margin); margin-top: 64px;
  padding: 26px 20px 18px; background: var(--note);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, .35), transparent 30%);
  box-shadow: 0 1px 1px rgba(80, 60, 0, .12), 0 12px 18px -10px rgba(80, 60, 0, .35);
  transform: rotate(-2.2deg);
}
.species-facts::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%) rotate(3deg);
  background: repeating-linear-gradient(135deg, rgba(190, 210, 230, .75) 0 7px, rgba(214, 228, 242, .75) 7px 14px);
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
}
.species-facts > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.species-facts > div + div { margin-top: 6px; border-top: 1px dashed rgba(107, 90, 16, .3); padding-top: 4px; }
.species-facts dt { font: 500 20px/1.25 var(--hand); color: #6b5a10; }
.species-facts dd { font: 700 22px/1.25 var(--hand); color: var(--pen); }

/* the scrapbook reads left to right. Every print keeps its photo's own shape
   and takes about the same area as a 3:2 print filling its column, so a
   portrait is a narrower, taller print and a square one sits in between;
   panoramas (2:1 and wider) get two columns. */
.gallery {
  --cols: 3; --gap: 38px; --col: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
  grid-column: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 50px var(--gap);
  grid-auto-flow: row dense; align-items: start; padding-top: 10px; container-type: inline-size;
}
.photo {
  --tilt: -1.2deg; position: relative; justify-self: center;
  width: min(100%, calc((var(--col) - 20px) / 1.5 * var(--ar) + 20px));   /* without sqrt(): same height as a 3:2 print */
  width: min(100%, calc((var(--col) - 20px) * sqrt(var(--ar) / 1.5) + 20px));
  padding: 10px 10px 12px; background: var(--print);
  box-shadow: 0 1px 2px rgba(60, 45, 20, .16), 0 10px 18px -10px rgba(60, 45, 20, .34);
  transform: rotate(var(--tilt));
}
.photo:nth-child(4n+2) { --tilt: 1deg; margin-top: 16px; }
.photo:nth-child(4n+3) { --tilt: -.4deg; }
.photo:nth-child(4n+4) { --tilt: 1.5deg; }
.photo::before {   /* one strip of tape across the top… */
  content: ""; position: absolute; z-index: 1; top: -12px; left: 50%; width: 96px; height: 25px;
  transform: translateX(-50%) rotate(-3deg);
  background: repeating-linear-gradient(135deg, rgba(232, 178, 160, .72) 0 7px, rgba(240, 198, 182, .72) 7px 14px);
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
}
.photo:nth-child(3n+2)::before { background: repeating-linear-gradient(135deg, rgba(168, 204, 186, .75) 0 7px, rgba(190, 220, 204, .75) 7px 14px); transform: translateX(-50%) rotate(4deg); left: 38%; }
.photo:nth-child(3n)::before { background: repeating-linear-gradient(135deg, rgba(176, 196, 230, .72) 0 7px, rgba(200, 214, 240, .72) 7px 14px); transform: translateX(-50%) rotate(-5deg); left: 63%; }
.photo[data-shape="panorama"] { grid-column: span 2; width: 100%; }
.photo-link { display: block; background: #ece8dc; }
.photo-link img { width: 100%; aspect-ratio: var(--ar); object-fit: cover; }
.photo-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 9px 3px 0; }
.photo-caption .photo-num, .photo-caption .photo-gear { display: none; }
.photo-caption time { font: 700 23px/1.1 var(--hand); color: var(--pen); white-space: nowrap; }
.photo-caption .photo-settings { flex-basis: 100%; font-size: 12px; line-height: 1.5; color: var(--pencil); margin-top: 2px; }
/* unedited: a faint pencilled note (on the date line of a print, under a species' count) and gold tape */
.photo-caption .photo-badge,
.species.unedited .species-text::after { font: 500 17px/1.1 var(--hand); color: var(--pencil); opacity: .7; text-transform: lowercase; white-space: nowrap; }
.photo-caption .photo-badge { order: 1; margin-left: auto; }
.photo-caption .photo-settings { order: 2; }
.species.unedited .species-text::after { content: "unedited"; flex-basis: 100%; margin-top: 2px; font-size: 16px; }
.photo.unedited::before { background: repeating-linear-gradient(135deg, rgba(230, 196, 110, .78) 0 7px, rgba(242, 214, 140, .78) 7px 14px); }

/* ---------- pager & footer ---------- */
.pager { grid-column: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 16px; margin-top: 40px; padding: 26px 0 8px; border-top: 2px dashed rgba(31, 61, 122, .25); }
.pager a { text-decoration: none; }
.pager-prev { grid-column: 1; grid-row: 1; }
.pager-all { grid-column: 2; grid-row: 1; font: 500 22px/1.3 var(--hand); color: var(--pencil); }
.pager-next { grid-column: 3; grid-row: 1; text-align: right; }
.pager-dir { display: block; font-size: 13px; font-style: italic; color: var(--pencil); }
.pager-name { font: 700 28px/1.1 var(--hand); color: var(--pen); }
.pager-prev .pager-name::before { content: "\2190\00a0"; }
.pager-next .pager-name::after { content: "\00a0\2192"; }
.pager a:hover .pager-name { color: var(--red-pen); }

.site-footer { padding: 70px 0 48px; font: 500 21px/1.3 var(--hand); color: var(--pencil); }
.page-species .site-footer { padding-top: 48px; }

/* ---------- small screens ---------- */
@media (max-width: 1000px) {
  :root { --margin: 170px; --gutter: 36px; --pad: 24px; }
  .group-name { font-size: 27px; }
  .species-title { font-size: 66px; }
}
@media (max-width: 1100px) {
  .gallery { --cols: 2; --gap: 30px; }
}
@media (max-width: 720px) {
  :root { --pad: 16px; }
  .page { --line: 10px; padding-left: 24px; }
  .controls, .site-footer, .no-results { margin-left: 0; }
  .site-header { display: block; padding: 34px 0 10px; }
  .site-stats { flex-direction: row; flex-wrap: wrap; gap: 0 14px; transform: none; font-size: 21px; margin-top: 12px; }
  .stat-species { font-size: 21px; }
  .site-title { font-size: 52px; }
  .controls { gap: 8px 14px; padding-top: 12px; }
  .search { flex-basis: 100%; }
  .search input { width: 100%; font-size: 24px; }
  .sort { gap: 2px; margin-left: -10px; }
  .sort button { font-size: 22px; padding: 2px 10px 4px; }
  .group { display: block; padding-top: 44px; }
  .group-title { position: static; text-align: left; align-items: flex-start; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 18px; }
  .group-name { font-size: 30px; }
  .group-count { margin-top: 0; font-size: 20px; }
  .species-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 18px; }
  .species-link { padding: 6px 6px 9px; }
  .species-link::before { width: 64px; height: 20px; top: -10px; }
  .species-text { padding: 7px 2px 0; }
  .species-name { font-size: 22px; }
  .species-sci { font-size: 12px; }
  .species-count, .species-dates { font-size: 17px; }
  .species-dates { display: none; }
  .page-species .site-header { padding-top: 22px; }
  .page-species .site-title { font-size: 32px; }
  .species-page { display: block; }
  .crumbs { padding-top: 10px; justify-self: start; }
  .species-head { display: block; padding: 10px 0 36px; }
  .species-title { font-size: 56px; }
  .species-head .species-sci { font-size: 19px; margin-top: 12px; }
  .species-facts { position: relative; width: auto; margin: 30px 8px 0; padding: 22px 18px 14px; transform: rotate(-1.2deg); display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .species-facts > div { display: block; }
  .species-facts > div + div { margin-top: 0; padding-top: 0; border-top: 0; }
  .species-facts > div:nth-child(n+3) { margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(107, 90, 16, .3); }
  .species-facts dt { font-size: 18px; }
  .species-facts dd { font-size: 21px; }
  .gallery { --cols: 1; gap: 40px; padding: 6px 6px 0; }
  .photo[data-shape="panorama"] { grid-column: auto; }
  .photo:nth-child(4n+2) { margin-top: 0; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .pager-next { grid-column: 2; }
  .pager-name { font-size: 24px; }
  .site-footer { padding: 48px 0 36px; }
}

.viewer :focus-visible { outline: 2px solid var(--viewer-fg); outline-offset: 2px; }