/* ==========================================================================
   The Department of Feline Affairs.

   Another sheet from the gate's field book, and it loads the gate's
   styles.css first: the palette, the two themes, the daily wash, the top bar,
   the focus ring and the footer all come from there unchanged. This file only
   adds what an archive of photographs needs: a letterhead, a census card,
   mounted prints with catalogue labels, and a way to read them.

   The one new colour is catmint's. Like every other drawing colour on the
   gate it never carries text.
   ========================================================================== */

:root {
  --nepeta: #d9d0ee;
  --corner: color-mix(in srgb, var(--ink) 72%, var(--paper-raised-base));
  --card-rule: color-mix(in srgb, var(--blue) 16%, transparent);
  --card-margin: color-mix(in srgb, var(--plum) 34%, transparent);
}

[data-theme="night"] {
  --nepeta: #b6a8d9;
  --corner: color-mix(in srgb, var(--ink) 30%, var(--paper-base));
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.cat-sheet {
  width: min(100% - 44px, 1320px);
  margin: 0 auto;
  padding-bottom: clamp(40px, 7vh, 80px);
}

/* ==========================================================================
   Letterhead
   ========================================================================== */

.cat-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.95fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding: clamp(28px, 6vh, 72px) 0 clamp(34px, 6vh, 64px);
  /* Stationery rules: a heavy line and a hairline, the way an official
     letterhead is ruled off from the business below it. */
  border-bottom: 3px double color-mix(in srgb, var(--ink) 34%, transparent);
}

.letterhead .eyebrow {
  margin: 0 0 20px;
  font-size: 10.5px;
}

.letterhead .eyebrow span { color: var(--ink-muted); }

.cat-masthead h1 {
  margin: 0 0 24px;
  font-family: var(--display);
  font-size: clamp(50px, 8.4vw, 112px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.04em;
}

.cat-masthead h1 em {
  color: var(--blue);
  font-style: italic;
}

.letterhead .lede {
  max-width: 44ch;
  margin: 0 0 22px;
  color: var(--ink-muted);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.7;
  text-wrap: pretty;
}

.motto {
  display: inline-block;
  margin: 0;
  padding: 7px 12px 6px;
  border: 1px solid color-mix(in srgb, var(--plum) 45%, transparent);
  border-radius: 2px;
  color: var(--plum);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

/* The plant and the census card share one column: the sprig stands behind
   the card's left edge, as a pressed specimen would beside its paperwork. */
.masthead-side {
  position: relative;
  display: grid;
  grid-template-columns: clamp(110px, 12vw, 170px) minmax(0, 1fr);
  align-items: end;
  gap: 0 6px;
}

.catmint {
  grid-row: 1 / span 2;
  width: 100%;
  height: auto;
  overflow: visible;
  align-self: end;
}

.catmint-stem {
  fill: none;
  stroke: var(--leaf-stroke);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.catmint-label {
  position: absolute;
  left: 0;
  bottom: -30px;
  display: grid;
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.25;
}

.catmint-label span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------- the census */

.census {
  position: relative;
  padding: 24px 22px 20px 34px;
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 3px;
  /* An index card: pale ruled lines, and a margin rule down the left. */
  background:
    linear-gradient(90deg, transparent 22px, var(--card-margin) 22px 23px, transparent 23px),
    repeating-linear-gradient(180deg, transparent 0 33px, var(--card-rule) 33px 34px),
    var(--paper-raised);
  background-position: 0 0, 0 18px, 0 0;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 11%, transparent);
  transform: rotate(1deg);
}

.census h2 {
  margin: 0 0 12px;
  color: var(--plum);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.census dl { margin: 0; }

.census dl div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-height: 34px;
  padding: 4px 0;
}

.census dt {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.census dd {
  margin: 0;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.2;
  text-align: right;
}

.census dl div:last-child dd {
  color: var(--blue);
  font-style: italic;
}

.stamp {
  position: absolute;
  top: -44px;
  right: -18px;
  width: 104px;
  height: 104px;
  transform: rotate(-14deg);
  opacity: 0.8;
  pointer-events: none;
}

.stamp circle {
  fill: none;
  stroke: var(--plum);
  stroke-width: 1.6;
}

.stamp text {
  fill: var(--plum);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.stamp .stamp-core {
  font-size: 11px;
  letter-spacing: 0.14em;
}

/* ==========================================================================
   The archive
   ========================================================================== */

.archive {
  padding-top: clamp(40px, 7vh, 72px);
}

.archive:focus { outline: none; }

.archive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 28px;
  margin-bottom: 22px;
}

.archive h2,
.about h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
}

.archive-note {
  margin: 0;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ the tools */

.archive-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin: 0 0 clamp(28px, 4vh, 44px);
  padding: 16px 0;
  border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
}

.archive-tools[hidden] { display: none; }

/* The one playful control, drawn as one of the gate's specimen tags. */
.summon {
  position: relative;
  min-height: 48px;
  padding: 12px 18px 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: 3px;
  background: var(--paper-raised);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  transform: rotate(-1.2deg);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 220ms ease, border-color 200ms ease;
}

.summon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--glint);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 30%, transparent);
}

.summon:hover,
.summon:focus-visible {
  border-color: color-mix(in srgb, var(--plum) 60%, transparent);
  box-shadow: 0 14px 26px color-mix(in srgb, var(--ink) 14%, transparent);
  transform: rotate(-0.3deg) translateY(-2px);
}

.summon:active { transform: rotate(0deg) translateY(1px); }

.tool-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.tool-label {
  margin-right: 4px;
  color: var(--plum);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.tool-chip {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.tool-chip:hover { border-color: var(--plum); color: var(--ink); }

.tool-chip[aria-pressed="true"] {
  border-color: var(--plum);
  background: color-mix(in srgb, var(--blossom) 22%, transparent);
  color: var(--ink);
}

.tool-status {
  flex: 1 1 200px;
  min-height: 1.5em;
  margin: 0;
  color: var(--ink-muted);
  font-size: 13.5px;
  text-align: right;
}

/* ------------------------------------------------------------- the wall */

.wall {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 30px) clamp(16px, 2vw, 26px);
  align-items: start;
  /* A featured print spans two columns; without dense packing it can leave
     a hole at the end of a row that reads as a missing specimen. */
  grid-auto-flow: row dense;
}

@media (min-width: 600px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specimen-feature { grid-column: span 2; }
}

@media (min-width: 960px) {
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1340px) {
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Padding gives each print room to tilt inside its own box, which matters
   because content-visibility clips paint to that box. Offscreen prints skip
   layout and paint entirely, which is what keeps photograph number 400 as
   cheap as number 4. */
.specimen {
  padding: 12px 10px;
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
  scroll-margin: 24px;
}

.specimen:focus { outline: none; }

.mount {
  position: relative;
  margin: 0;
  padding: 11px 11px 14px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 2px;
  background: var(--paper-raised);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--ink) 10%, transparent);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 260ms ease;
}

/* The pin. */
.mount::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--glint) 40%, white), var(--glint) 60%);
  box-shadow: 0 2px 3px color-mix(in srgb, var(--ink) 30%, transparent);
}

.mount:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 18px 32px color-mix(in srgb, var(--ink) 15%, transparent);
}

.wall[data-order="chaos"] .mount { transform: rotate(calc(var(--tilt, 0deg) * 3.2)); }
.wall[data-order="chaos"] .mount:hover { transform: rotate(0deg) translateY(-3px); }

.photo-link {
  position: relative;
  display: block;
  color: inherit;
}

.photo-link img {
  display: block;
  width: 100%;
  height: auto;
  background: color-mix(in srgb, var(--ink) 7%, var(--paper-raised));
}

/* Archival photo corners: four small triangles holding the print to the
   mount, drawn as four backgrounds on one layer so they cost one box. */
.photo-link::after {
  content: "";
  position: absolute;
  inset: -4px;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--corner) 0 50%, transparent 50%) top left / 20px 20px no-repeat,
    linear-gradient(225deg, var(--corner) 0 50%, transparent 50%) top right / 20px 20px no-repeat,
    linear-gradient(45deg, var(--corner) 0 50%, transparent 50%) bottom left / 20px 20px no-repeat,
    linear-gradient(315deg, var(--corner) 0 50%, transparent 50%) bottom right / 20px 20px no-repeat;
  opacity: 0.86;
}

.photo-link:focus-visible { outline-offset: 5px; }

/* A featured print is wider, not taller. Two columns of a portrait phone
   photograph would be a tower a whole screen high, so its height is capped
   and the print sits centred on a wider mount, the way a gallery mounts a
   precious small thing on a big card. */
.specimen-feature .photo-link {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}

.specimen-feature .photo-link img {
  width: auto;
  max-height: min(76vh, 720px);
}

.label {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.label-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 24px tall at least: the permalink is small text, not a small target. */
.label-no {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--plum);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--plum) 50%, transparent);
}

.label-no:hover { border-bottom-style: solid; }

.label-cat {
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.label-title {
  font-family: var(--display);
  font-size: 18px;
  line-height: 1.25;
}

/* The keeper's hand: the site's own serif in italic, not a novelty font. */
.label-note {
  color: var(--ink);
  font-family: var(--display);
  font-size: 16.5px;
  font-style: italic;
  line-height: 1.4;
  text-wrap: pretty;
}

.label-tags {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* A linked or summoned print straightens and steps forward. :target works
   without any script at all, so a shared permalink always lands on
   something visibly chosen. */
.specimen:target .mount,
.specimen.is-summoned .mount {
  transform: rotate(0deg) scale(1.02);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blossom) 80%, transparent),
    0 22px 40px color-mix(in srgb, var(--ink) 18%, transparent);
}

.specimen.is-summoned .mount::after {
  content: "Summoned";
  position: absolute;
  z-index: 3;
  top: 18px;
  right: -8px;
  padding: 4px 8px 3px;
  border: 1.5px solid var(--plum);
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper-raised) 88%, transparent);
  color: var(--plum);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(8deg);
}

.specimen:focus-visible .mount {
  outline: 2px solid var(--plum);
  outline-offset: 5px;
}

/* ----------------------------------------------------- an empty archive */

.wall-empty {
  padding: clamp(10px, 3vh, 30px) 0 clamp(20px, 4vh, 40px);
  text-align: center;
}

.empty-mounts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 4vw, 44px);
  margin-bottom: 26px;
}

.empty-mount {
  position: relative;
  width: clamp(150px, 20vw, 220px);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: end center;
  padding: 14px;
  border: 1px dashed color-mix(in srgb, var(--ink) 34%, transparent);
  border-radius: 2px;
  background: color-mix(in srgb, var(--paper-raised) 60%, transparent);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1.4deg);
}

.empty-mount:nth-child(2) { aspect-ratio: 1; transform: rotate(1.2deg); align-self: center; }
.empty-mount:nth-child(3) { aspect-ratio: 3 / 4; transform: rotate(-0.5deg); }

.empty-mount::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--glint);
}

.wall-empty p {
  max-width: 42ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(19px, 2vw, 24px);
  font-style: italic;
  line-height: 1.4;
}

/* ==========================================================================
   About
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
  gap: clamp(30px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(56px, 10vh, 110px);
  padding-top: clamp(30px, 5vh, 52px);
  border-top: 3px double color-mix(in srgb, var(--ink) 34%, transparent);
}

.about-text h2 { margin-bottom: 22px; }

.about-text p {
  max-width: 62ch;
  margin: 0 0 16px;
  color: var(--ink-muted);
  line-height: 1.8;
  text-wrap: pretty;
}

.label-guide {
  padding: 22px 22px 8px;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 3px;
  background: var(--paper-raised);
  transform: rotate(-0.6deg);
}

.label-guide h3 {
  margin: 0 0 14px;
  color: var(--plum);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.label-guide dl { margin: 0; }

.label-guide dl div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.label-guide dt {
  color: var(--plum);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.label-guide .guide-name {
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.label-guide .guide-note {
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.label-guide dd {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   Narrower screens
   ========================================================================== */

@media (max-width: 900px) {
  .cat-masthead { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .masthead-side { max-width: 560px; }
  .about { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 780px) {
  .cat-sheet { width: min(100% - 32px, 1320px); }
}

@media (max-width: 599px) {
  .cat-masthead { padding-top: 18px; }
  .masthead-side { grid-template-columns: 84px minmax(0, 1fr); margin-top: 20px; }
  .catmint-label { display: none; }
  .census { padding: 22px 16px 16px 30px; }
  .census dl div { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 0; padding: 5px 0; }
  .census dd { text-align: left; font-size: 18px; }
  .stamp { top: -40px; right: -6px; width: 86px; height: 86px; }

  .archive-tools { gap: 12px; }
  .summon { width: 100%; }
  .tool-status { text-align: left; }

  .specimen { padding: 10px 6px; }

  .empty-mount { width: min(42vw, 180px); }
  .empty-mount:nth-child(3) { display: none; }

  .label-guide { padding: 18px 16px 6px; }
  .label-guide dl div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 380px) {
  .topbar-nav .topbar-link:first-child { display: none; }
  .masthead-side { grid-template-columns: minmax(0, 1fr); }
  .catmint { display: none; }
}

/* ==========================================================================
   Reduced motion: the prints are still pinned at their angles, because an
   angle is a state rather than a movement. They simply stop travelling.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mount,
  .summon,
  .tool-chip { transition: none; }

  .mount:hover,
  .wall[data-order="chaos"] .mount:hover { transform: rotate(var(--tilt, 0deg)); }
  .specimen:target .mount,
  .specimen.is-summoned .mount { transform: rotate(0deg); }
  .summon:hover,
  .summon:focus-visible,
  .summon:active { transform: rotate(-1.2deg); }
}

@media (forced-colors: active) {
  .catmint, .stamp { forced-color-adjust: none; }
  .census { background: Canvas; }
  .photo-link::after { display: none; }
  .tool-chip[aria-pressed="true"] { border-width: 3px; }
}

@media print {
  .archive-tools, .topbar-nav, .skip-link { display: none; }
  .mount { transform: none; box-shadow: none; break-inside: avoid; }
  .specimen { content-visibility: visible; }
}