/* lookgoodinpictures.com — darkroom contact sheet */
:root{
  --bg:#1c1916;        /* warm charcoal */
  --film:#2a2420;      /* film base */
  --hole:#0d0b0a;      /* sprocket holes */
  --paper:#24201c;     /* frame interior */
  --ink:#efe7dc;       /* main text */
  --muted:#c3b6a6;
  --orange:#ff9a3c;    /* film-edge orange */
  --orange-d:#d9731a;
  --line:#40372f;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.06rem/1.68 var(--sans)}
a{color:var(--orange);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#ffc48a}
.sprockets,.strip{
  background-color:var(--film);
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,var(--hole) 9px 21px,transparent 21px 30px),
                   repeating-linear-gradient(90deg,transparent 0 9px,var(--hole) 9px 21px,transparent 21px 30px);
  background-size:100% 7px,100% 7px;background-position:0 4px,0 calc(100% - 4px);background-repeat:repeat-x;
}
.strip{padding:15px 16px;text-align:center}
.strip p{margin:0;font:500 .78rem/1.3 var(--mono);color:var(--muted);letter-spacing:.02em}
.masthead{max-width:1080px;margin:0 auto;padding:18px 16px 8px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.25rem;letter-spacing:-.01em}
.brand svg{color:var(--muted);flex:none}
nav{display:flex;flex-wrap:wrap;gap:6px 6px}
nav a{font:500 .82rem/1 var(--mono);color:var(--ink);text-decoration:none;padding:8px 10px;border:1px solid var(--line);border-radius:2px;text-transform:uppercase;letter-spacing:.04em}
nav a:hover{border-color:var(--orange);color:var(--orange)}
.sheet{max-width:1080px;margin:18px auto 40px;padding:0 16px}
.frame{position:relative;background:var(--paper);border:1px solid var(--line);padding:40px clamp(18px,5vw,64px) 36px;max-width:820px;margin:0 auto}
.frame::before,.frame::after{content:"";position:absolute;left:0;right:0;height:16px;background-color:var(--film);
  background-image:repeating-linear-gradient(90deg,transparent 0 9px,var(--hole) 9px 21px,transparent 21px 30px);
  background-size:100% 8px;background-position:0 50%;background-repeat:repeat-x}
.frame::before{top:0}.frame::after{bottom:0}
.sheet--home .frame{max-width:1080px}
.frameno{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 10px;font:500 .8rem/1.2 var(--mono);color:var(--orange);text-transform:uppercase;letter-spacing:.08em}
h1{font-size:clamp(1.8rem,5.4vw,2.7rem);line-height:1.1;letter-spacing:-.02em;margin:.1em 0 .45em;font-weight:700}
.lede{font-size:1.18rem;color:var(--muted);margin-top:0}
h2{font-size:1.4rem;line-height:1.25;margin:2em 0 .5em;padding-top:.6em;border-top:1px dashed var(--line)}
h3{font-size:1.1rem;margin:1.6em 0 .3em}
.body ul,.body ol{padding-left:1.25em}
.body li{margin:.3em 0}
.body li::marker{color:var(--orange)}
table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{text-align:left;vertical-align:top;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font:500 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--orange);border-bottom:2px solid var(--orange-d)}
blockquote{margin:1.2em 0;padding:.6em 1em;border-left:4px solid var(--orange);background:#2d2723}
.note{font:400 .92rem/1.5 var(--mono);color:var(--muted);border:1px dashed var(--line);padding:12px 14px}
#sources + ul, #sources + ol{font-size:.9rem;color:var(--muted)}
#sources + ul a{word-break:break-word}
.reviewed{margin-top:2.4em;font:500 .78rem/1 var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* contact-sheet grid (home, hubs) */
.grid{list-style:none;padding:0 !important;margin:1.6em 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;counter-reset:frame}
.grid li{counter-increment:frame;margin:0;background:var(--bg);border:1px solid var(--line);padding:30px 16px 16px;position:relative}
.grid li::before{content:counter(frame,decimal-leading-zero) "A";position:absolute;top:8px;left:16px;font:500 .74rem/1 var(--mono);color:var(--orange);letter-spacing:.08em}
.grid li::after{content:"";position:absolute;top:10px;right:14px;width:34px;height:6px;background:repeating-linear-gradient(90deg,var(--hole) 0 6px,transparent 6px 10px)}
.grid a{font-weight:700;font-size:1.06rem;display:block;margin-bottom:.3em}
.grid p{margin:0;font-size:.93rem;color:var(--muted)}
.foot{border-top:1px solid var(--line);margin-top:30px;padding:22px 16px 34px}
.foot p{max-width:820px;margin:0 auto;font-size:.88rem;color:var(--muted);text-align:center}
@media (max-width:520px){
  body{font-size:1rem}
  .frame{padding:34px 16px 30px}
  nav a{font-size:.74rem;padding:7px 8px}
}