/* The two search pages, plus one shell rule.

   Kept out of site.css because these are new page types with their own
   furniture and site.css is shared ground. Loaded on every page rather than
   only these two, because the nav gained a second link and has to wrap on a
   phone — that rule has to travel with the shell.

   Everything here inherits the tokens declared in site.css: --paper, --sunk,
   --ink, --grey, --mute, --hair, --link, --alert, --u and the type sizes. No
   new colours, no new scale. */

/* ── shell ──────────────────────────────────────────────────────────────── */

/* At 390 the bar holds a wordmark, two links and a button, and they do not fit
   on one line. Wrapping is the honest collapse; shrinking the type is not. */
@media (max-width:620px){
  .bar{flex-wrap:wrap; row-gap:calc(var(--u)*1.5)}
  .bar nav{display:flex; align-items:center; gap:calc(var(--u)*2.5); width:100%}
  .bar nav a{margin-left:0}
  .bar nav .mode{margin-left:auto}
}

/* ── shared ─────────────────────────────────────────────────────────────── */

h2.plain{display:block; font-size:var(--t-body); font-weight:600;
  letter-spacing:-.01em; margin:calc(var(--u)*6) 0 calc(var(--u)*2);
  padding-bottom:calc(var(--u)*1.25); border-bottom:1px solid var(--hair)}

mark{background:var(--link); color:var(--paper); padding:0 3px;
  border-radius:2px}

.browse .sub.quoted{color:var(--mute); font-style:italic; max-width:70ch}

/* ── the identification search ──────────────────────────────────────────── */

.ident-head{padding:calc(var(--u)*5) 0 0}
.ident-head h1{font-size:clamp(34px,6vw,72px); line-height:.96; font-weight:600;
  letter-spacing:-.035em; margin:0; max-width:14ch}
.ident-lede{font-size:clamp(15px,1.6vw,19px); color:var(--grey); line-height:1.5;
  max-width:46ch; margin:calc(var(--u)*2) 0 0}

/* Four worked examples instead of a placeholder. A placeholder disappears the
   moment anyone types, and this input is the one place on the site where a
   person genuinely does not know what they are allowed to enter. */
.ident-eg dl,
.coverage dl{margin:0; max-width:64ch}
.ident-eg dl > div,
.coverage dl > div{display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:calc(var(--u)*2.5); padding:calc(var(--u)*1.35) 0;
  border-bottom:1px solid var(--hair)}
.ident-eg dt,
.coverage dt{color:var(--grey); font-size:var(--t-small)}
.ident-eg dd,
.coverage dd{margin:0; font-size:var(--t-small); line-height:1.5}
.ident-eg dd a{color:var(--link); text-decoration:none; font-weight:600;
  font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.01em}
.ident-eg dd a:hover{color:var(--ink)}

.objs{list-style:none; margin:0 0 calc(var(--u)*4); padding:0}
.objs li{display:grid; grid-template-columns:88px minmax(0,1fr);
  gap:calc(var(--u)*3); padding:calc(var(--u)*2.5) 0;
  border-bottom:1px solid var(--hair); align-items:start}
.obj-art{display:block; aspect-ratio:1; border:1px solid var(--hair);
  background:var(--sunk); position:relative; overflow:hidden}
.obj-art img{width:100%; height:100%; object-fit:cover; display:block}
.obj-art:hover{border-color:var(--ink)}
.no-art{position:absolute; inset:0; display:grid; place-content:center;
  text-align:center; font-size:11px; color:var(--mute); padding:4px}
.obj-body b{display:block; font-size:17px; font-weight:600; letter-spacing:-.012em;
  line-height:1.25}
.obj-body b a{color:var(--link); text-decoration:none}
.obj-body b a:hover{color:var(--ink)}
.obj-meta{margin:5px 0 0; font-size:var(--t-cap); color:var(--grey)}
.obj-meta a{color:var(--grey)}
.obj-meta a:hover{color:var(--ink)}
.obj-meta .sep{color:var(--mute); margin:0 6px}

/* The string as printed on the object, set apart from everything we inferred
   from it. This is the evidence; the line under it is the claim. */
.printed{margin:calc(var(--u)*1.25) 0 0; font-size:var(--t-small);
  font-family:ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.01em;
  line-height:1.5; word-break:break-word}
.obj-why{margin:4px 0 0; font-size:var(--t-cap); color:var(--mute)}

/* Why the picture is out of focus, and who took it. Set below the claim about
   the object and quieter than it — a fact about the photograph, not about the
   record. Never suppressed at any width: site-pages measured the rule, and no
   blurred image may appear without an explanation beside it. */
.obj-pic-note,
.scrap-note{margin:4px 0 0; font-size:11px; color:var(--mute); line-height:1.45}
.scrap-note:empty{display:none}

.ident-none{max-width:64ch; margin:calc(var(--u)*2) 0 calc(var(--u)*6)}
.ident-none p{font-size:var(--t-small); line-height:1.65; color:var(--grey);
  margin:0 0 calc(var(--u)*1.5)}
.held{list-style:none; margin:0 0 calc(var(--u)*2.5); padding:0}
.held li{display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--u); padding:calc(var(--u)*1.1) 0; border-bottom:1px solid var(--hair);
  font-size:var(--t-small)}
.held a{color:var(--link); text-decoration:none; font-weight:600}
.held a:hover{color:var(--ink)}

.scraps{list-style:none; margin:0 0 calc(var(--u)*4); padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:calc(var(--u)*3) calc(var(--u)*2.5)}
.scraps a{text-decoration:none; display:block}
.scraps img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border:1px solid var(--hair); background:var(--sunk)}
.scraps a:hover img{border-color:var(--ink)}
.scraps b{display:block; font-size:var(--t-cap); font-weight:600;
  color:var(--link); margin-top:6px; line-height:1.35}
.scraps a:hover b{color:var(--ink)}
.scraps span{display:block; font-size:11px; color:var(--mute); margin-top:2px}

/* Coverage sits at the foot of every state, including the successful one. A
   search that only admits its limits when it fails has told you nothing about
   the answer it just gave you. */
.coverage{border-top:2px solid var(--ink); padding-top:calc(var(--u)*3);
  margin-top:calc(var(--u)*7); max-width:72ch}
.coverage h2.plain{margin-top:0; border-bottom:0; padding-bottom:0}
.coverage dd{font-variant-numeric:tabular-nums}
.coverage p{font-size:var(--t-small); line-height:1.65; color:var(--grey);
  margin:calc(var(--u)*2.5) 0 0}
.coverage a{color:var(--link); text-decoration:none; font-weight:600}
.coverage a:hover{color:var(--ink)}

/* ── narrow ─────────────────────────────────────────────────────────────── */

/* The two-column definition rows collapse to stacked pairs rather than
   squeezing a 200px label column into a phone. */
@media (max-width:760px){
  .ident-eg dl > div,
  .coverage dl > div{grid-template-columns:1fr; gap:3px}
  .ident-eg dt,
  .coverage dt{font-size:var(--t-cap)}
}

@media (max-width:430px){
  .objs li{grid-template-columns:64px minmax(0,1fr); gap:calc(var(--u)*2);
    padding:calc(var(--u)*2) 0}
  .obj-body b{font-size:16px}
  .printed{font-size:var(--t-cap)}
  .scraps{grid-template-columns:repeat(2,minmax(0,1fr));
    gap:calc(var(--u)*2.5) calc(var(--u)*1.5)}
  .ident-head{padding-top:calc(var(--u)*3)}
}