:root{
    --paper:#FFFFFF; --ink:#111111; --ink-2:#3D3D3D; --mute:#909090;
    --rule:#111111; --hair:#D2D2D2; --fill:#F2F2F2; --fill-2:#EAEAEA;
    --accent:#3B7A52; --btn:#111111; --btn-ink:#FFFFFF;
    --meter:#E2E2E2; --match:#3B7DF5; --ok:#1E8E4E;
    --nav:#F6F6F6; --nav-hover:#E4E4E4;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0E0E0F; --ink:#F2F1EF; --ink-2:#C9C7C3; --mute:#7E7C79;
      --rule:#F2F1EF; --hair:#333335; --fill:#191919; --fill-2:#212121;
      --accent:#A3D0AF; --btn:#F2F1EF; --btn-ink:#0E0E0F;
      --meter:#333335; --match:#6C9DFF; --ok:#4CC486;
    --nav:#161617; --nav-hover:#2A2A2C;
    }
  }
  :root[data-theme="dark"]{
    --paper:#0E0E0F; --ink:#F2F1EF; --ink-2:#C9C7C3; --mute:#7E7C79;
    --rule:#F2F1EF; --hair:#333335; --fill:#191919; --fill-2:#212121;
    --accent:#A3D0AF; --btn:#F2F1EF; --btn-ink:#0E0E0F;
    --meter:#333335; --match:#6C9DFF; --ok:#4CC486;
    --nav:#161617; --nav-hover:#2A2A2C;
  }

  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
  }
  .serif{font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",Times,serif;}
  a{color:inherit;}
  a:focus-visible,button:focus-visible,input:focus-visible{
    outline:2px solid var(--accent); outline-offset:2px;}

  /* ---------- nav: one light grey bar; each link gets a darker block on hover ---------- */
  nav{position:sticky; top:0; z-index:40; background:var(--paper); padding:10px 22px 0;}
  nav .navbar{display:flex; align-items:center; gap:2px; padding:3px; background:var(--nav);}
  nav .grp{display:flex; gap:2px;}
  nav .fill{flex:1; min-width:8px;}
  nav a{display:block; font-size:13px; line-height:1.5; text-decoration:none; color:var(--mute);
        padding:6px 14px; white-space:nowrap; transition:background-color .15s, color .15s;}
  nav a.on, nav .grp.right a{color:var(--ink);}
  nav a:hover, nav a:focus-visible{background:var(--nav-hover); color:var(--ink);}

  /* ---------- landing: exactly one viewport, no scroll ---------- */
  body[data-route="search"]{overflow:hidden;}
  .land{display:flex; flex-direction:column; height:calc(100dvh - 48px);}
  .land .top{flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
             align-items:center; justify-content:center; padding:20px 22px; text-align:center;}
  h1.hero{margin:0; font-size:clamp(22px,2.8vw,37px); font-weight:400; line-height:1.22;
          letter-spacing:-.005em; text-wrap:balance; max-width:920px;}
  h1.hero em{font-style:italic;}
  .searchwrap{margin-top:clamp(14px,3vh,30px); width:100%; max-width:720px; text-align:left;}
  .field{background:var(--fill); position:relative; padding:17px 19px 0;}
  .field .row{display:flex; gap:14px; align-items:flex-start;}
  .field textarea{flex:1; min-width:0; background:transparent; border:0; resize:none; color:var(--ink);
    font-family:inherit; font-size:14.5px; line-height:1.45; min-height:64px; outline:none;}
  .field textarea::placeholder{color:var(--mute);}
  .go{flex:0 0 auto; background:var(--btn); color:var(--btn-ink);
      border:0; font-size:12.5px; padding:8px 13px; cursor:pointer; font-family:inherit;}
  .go:hover{background:var(--accent); color:var(--btn-ink);}
  .go:disabled{background:var(--fill-2); color:var(--mute); cursor:default;}
  .checks{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:12px; padding:12px 0 14px;
          border-top:1px dashed var(--hair); list-style:none; margin-bottom:0; padding-left:0;}
  .checks li{font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:6px;
             transition:color .2s;}
  .checks li .tick{width:11px; height:11px; position:relative; flex:0 0 11px;}
  .checks li .tick::before{content:""; position:absolute; left:2px; top:0; width:4px; height:8px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg); opacity:.45; transition:opacity .2s;}
  .checks li.on{color:var(--ink);}
  .checks li.on .tick{color:var(--ok);}
  .checks li.on .tick::before{opacity:1;}
  .or{font-size:12px; color:var(--mute); text-align:center; margin:16px 0 10px;}
  .browse{display:block; margin:0 auto; font:inherit; font-size:13px; color:var(--ink);
          background:none; border:1px solid var(--hair); padding:8px 16px; cursor:pointer;
          text-decoration:none; width:max-content;}
  .browse:hover{border-color:var(--ink); color:var(--accent);}
  .plate{position:relative; background:var(--fill-2); overflow:hidden;
         flex:0 0 clamp(170px,30vh,330px);}
  .plate img{width:100%; height:100%; object-fit:cover; object-position:center 43%; display:block;}
  .cap{position:absolute; right:14px; bottom:12px; text-align:right; color:#fff;
       font-size:11px; line-height:1.35; text-shadow:0 1px 5px rgba(0,0,0,.55);}
  .madeby{position:absolute; left:14px; bottom:12px; font-size:11px; color:#fff;
          text-shadow:0 1px 5px rgba(0,0,0,.55);}
  .madeby a{color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.6);}
  .madeby a:hover{border-bottom-color:#fff;}

  /* ---------- shell ---------- */
  .page{padding:36px 22px 20px;}
  .page.narrow{max-width:760px;}
  h2.big{font-size:clamp(21px,2.4vw,31px); font-weight:400; line-height:1.28; margin:0 0 6px;
         letter-spacing:-.005em; text-wrap:balance;}
  h2.big em{font-style:italic;}
  .lede{color:var(--ink-2); max-width:70ch;}
  .resultcount{font-size:13px; font-weight:600; margin:0 0 22px;}

  /* ---------- controls ---------- */
  .bar{display:flex; flex-wrap:wrap; gap:9px; align-items:stretch; margin-bottom:14px;}
  .bar input[type=search]{
    font:inherit; font-size:13.5px; color:var(--ink); background:var(--fill);
    border:1px solid var(--hair); padding:10px 12px; flex:1 1 280px; min-width:0;}
  .bar input[type=search]::placeholder{color:var(--mute);}
  .sel{position:relative; flex:0 0 auto;}
  .selbtn{display:flex; align-items:center; gap:10px; justify-content:space-between;
    font:inherit; font-size:13.5px; color:var(--ink); background:var(--fill);
    border:1px solid var(--hair); padding:10px 12px; cursor:pointer; min-width:158px;
    text-align:left; height:100%;}
  .selbtn:hover, .selbtn[aria-expanded="true"]{border-color:var(--ink);}
  .selbtn .chev{width:8px; height:8px; flex:0 0 8px; border-right:1px solid currentColor;
    border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-2px,-2px); opacity:.55;}
  .selbtn[aria-expanded="true"] .chev{transform:rotate(225deg) translate(-2px,-2px);}
  .selpop{position:absolute; z-index:50; top:calc(100% + 4px); left:0; min-width:100%;
    background:var(--paper); border:1px solid var(--ink); padding:4px 0;
    max-height:320px; overflow-y:auto; box-shadow:0 8px 26px rgba(0,0,0,.10);}
  .selpop[hidden]{display:none;}
  .opt{padding:7px 13px; font-size:13.5px; cursor:pointer; white-space:nowrap; color:var(--ink-2);}
  .opt:hover, .opt.cur{background:var(--fill); color:var(--ink);}
  .opt[aria-selected="true"]{color:var(--accent);}

  .readout{font-size:12px; color:var(--mute); margin:0 0 16px; display:flex;
           flex-wrap:wrap; gap:6px; align-items:center;}
  .tok{border:1px solid var(--accent); color:var(--accent); padding:2px 7px; font-size:11px;}
  .tok.b{border-color:var(--hair); color:var(--ink-2);}
  .tok{display:inline-flex; align-items:center; gap:6px;}
  .tokx{background:none; border:0; padding:0; margin:0; font:inherit; font-size:13px;
        line-height:1; color:inherit; cursor:pointer; opacity:.6;}
  .tokx:hover, .tokx:focus-visible{opacity:1;}
  .readnote{font-size:12px; color:var(--mute); margin:-8px 0 16px;}
  .heard{font-size:12px; color:var(--mute); padding:0 0 12px; margin-top:-4px;}
  .heard:empty{display:none;}
  .szsrc{font-size:11.5px; color:var(--mute); margin-top:3px;}
  dd .n{color:var(--mute); font-size:12px;}

  /* ---------- results table ---------- */
  .tablewrap{overflow-x:auto; padding-bottom:4px;}
  .tbl{min-width:1180px;}
  .trow{display:grid;
    grid-template-columns:200px minmax(230px,1.2fr) 128px 132px 170px minmax(230px,1fr);
    gap:15px;}
  .thead{font-size:13.5px;}
  .thead > div{border-bottom:1px solid var(--rule); padding:0 0 9px;}
  .tr{position:relative;}
  .tr > div{border-bottom:1px solid var(--hair); padding:15px 0; min-height:0;}
  .tr:hover{background:var(--fill);}
  /* the name link covers the whole row; Website and Email sit above it */
  a.rowlink{color:inherit; text-decoration:none;}
  a.rowlink::after{content:""; position:absolute; inset:0;}
  .c-thumb img{width:100%; height:132px; object-fit:cover; object-position:top center;
               background:var(--fill-2); display:block;}
  .c-thumb .none{width:100%; height:132px; background:var(--fill-2); display:flex;
    align-items:center; justify-content:center; font-size:10.5px; color:var(--mute);}
  .c-name{font-size:16.5px; line-height:1.25;}
  .c-name small{display:block; font-size:12px; color:var(--mute); margin-top:4px;
                font-family:inherit;}
  .pct{font-size:14px; margin-bottom:7px;}
  .meter{height:5px; background:var(--meter); width:100%;}
  .meter i{display:block; height:5px; background:var(--match);}
  .c-links a{position:relative; z-index:1; display:table; font-size:12.5px; margin-bottom:6px;
    color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--hair);
    transition:color .15s, border-color .15s;}
  .c-links a:hover, .c-links a:focus-visible{color:var(--accent); border-bottom-color:var(--accent);}
  .c-loc{font-size:12.5px;}
  .c-loc small{display:block; color:var(--mute); font-size:11.5px; margin-top:3px;}
  .c-small{font-size:12.5px; color:var(--ink-2);}
  .c-type{font-size:12.5px; color:var(--ink-2);}
  .c-type small{display:block; color:var(--mute); font-size:11.5px; margin-top:3px;}
  .szline{margin:4px 0 0; font-size:13px;}
  .alsonote{padding:18px 2px 14px; font-size:13px; color:var(--mute);
            border-bottom:1px solid var(--hair); margin-bottom:2px;}

  /* ---------- record ---------- */
  .rec{display:grid; grid-template-columns:1fr 1.3fr; gap:52px; align-items:start;
       max-width:1180px;}
  .shot{width:100%; aspect-ratio:16/11; object-fit:cover; object-position:top center;
        border:1px solid var(--hair); background:var(--fill-2); display:block;}
  .recplate{aspect-ratio:16/11; background:var(--fill-2); display:flex; align-items:center;
            justify-content:center; padding:24px; text-align:center; border:1px solid var(--hair);}
  .recplate span{font-size:clamp(17px,2.2vw,27px); line-height:1.2;}
  .shotcap{font-size:11px; color:var(--mute); margin-top:7px;}
  dl{margin:0; display:grid; grid-template-columns:132px 1fr; gap:0;}
  dt{font-size:11.5px; color:var(--mute); padding:11px 0; border-top:1px solid var(--hair);}
  dd{margin:0; font-size:13.5px; padding:11px 0; border-top:1px solid var(--hair);}
  dd a{color:var(--accent);}
  .pill{display:inline-block; border:1px solid var(--hair); padding:2px 8px;
        font-size:11.5px; margin:0 5px 5px 0;}
  .pill.hi{border-color:var(--accent); color:var(--accent);}
  dt .n{color:var(--ink-2);}
  .clg{margin:0 0 10px; line-height:1.55;}
  .clg:last-child{margin-bottom:0;}
  .clh{font-size:11.5px; color:var(--mute); margin-bottom:2px;}
  .clh span{color:var(--ink-2);}
  a.cln{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hair);}
  a.cln:hover{color:var(--accent); border-bottom-color:var(--accent);}
  .cld summary{cursor:pointer; color:var(--accent); margin-bottom:10px;}
  .back{font-size:12.5px; color:var(--mute); text-decoration:none; display:inline-block;
        margin-bottom:22px;}
  .back:hover{color:var(--ink);}

  /* ---------- about ---------- */
  .about h3{font-size:15px; font-weight:600; margin:38px 0 10px;}
  .about p{color:var(--ink-2); max-width:70ch;}
  .about ul{color:var(--ink-2); padding-left:18px;}
  .about li{margin:4px 0;}
  .about a{color:var(--accent);}
  .about .updated{margin-top:34px; color:var(--mute); font-size:12.5px;}

  /* ---------- footer ---------- */
  footer.site{padding:26px 22px 40px; border-top:1px solid var(--hair);
              margin-top:44px; font-size:12px; color:var(--mute);
              display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline;}
  footer.site a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--hair);
                transition:color .15s, border-color .15s;}
  footer.site a:hover, footer.site a:focus-visible{color:var(--accent); border-bottom-color:var(--accent);}

  @media (max-width:900px){
    body[data-route="search"]{overflow:auto;}
    .land{height:auto; min-height:calc(100dvh - 48px);}
    .land .top{padding:34px 16px 30px;}
    .field{padding:14px 14px 0;}
    .plate{flex-basis:36vh;}
    .rec{grid-template-columns:1fr; gap:26px;}
    nav{padding:8px 12px 0;}
    nav a{padding:6px 10px;}
  }

  h1.big{font-size:clamp(21px,2.4vw,31px); font-weight:400; line-height:1.28; margin:0 0 6px;
         letter-spacing:-.005em; text-wrap:balance;}
  h1.big em{font-style:italic;}
  .about h2.q{font-size:15px; font-weight:600; margin:38px 0 10px; font-family:inherit;}
  .about .updated{margin-top:34px; color:var(--mute); font-size:12.5px;}
  .intro{color:var(--ink-2); max-width:70ch; margin:0 0 22px;}
  .crumbs{font-size:12.5px; color:var(--mute); margin-bottom:22px;}
  .crumbs a{color:var(--mute); text-decoration:none;}
  .crumbs a:hover{color:var(--ink);}
  .browseby{flex-basis:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px 40px;
            margin-top:8px; padding-top:18px; border-top:1px solid var(--hair);}
  .browseby h2{font-size:12px; font-weight:600; color:var(--ink-2); margin:0 0 8px;}
  .browseby ul{list-style:none; margin:0; padding:0; columns:3 150px; column-gap:22px;}
  .browseby li{margin:0 0 5px; break-inside:avoid;}
  footer.site .browseby a{border-bottom:1px solid transparent; color:var(--ink-2);}
  footer.site .browseby a:hover, footer.site .browseby a:focus-visible{color:var(--accent); border-bottom-color:var(--accent);}
  @media (max-width:700px){ .browseby{grid-template-columns:1fr;} }