/* =====================================================================
   OUT OF NOWHERE — look of the gallery
   Colours and fonts are set once here at the top.
   ===================================================================== */
:root{
  --wall:   #ECECE7;   /* background */
  --ink:    #18181A;   /* main text */
  --soft:   #626267;   /* softer text */
  --faint:  #8E8E92;   /* small labels */
  --line:   #D4D4CD;   /* thin lines */
  --mat:    #FBFBF8;   /* the white frame around each picture */
  --edge:   rgba(0,0,0,.07);
  --shadow: 0 22px 34px -22px rgba(20,20,22,.45);
  --accent: #B8323F;   /* the red "new" dot */
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
/* Night version: follows the device's dark mode */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --wall:#131315; --ink:#ECECE8; --soft:#A3A3A8; --faint:#77777C; --line:#2C2C30; --mat:#1E1E21; --edge:rgba(255,255,255,.08); --shadow:0 22px 34px -20px rgba(0,0,0,.8); --accent:#E0606C;}}
:root[data-theme="dark"]{color-scheme:dark;
  --wall:#131315; --ink:#ECECE8; --soft:#A3A3A8; --faint:#77777C; --line:#2C2C30; --mat:#1E1E21; --edge:rgba(255,255,255,.08); --shadow:0 22px 34px -20px rgba(0,0,0,.8); --accent:#E0606C;}

*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font:400 16px/1.55 var(--sans);padding-inline:20px}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* heading */
header{padding-block:64px 36px;display:grid;gap:16px}
.eyebrow{font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0}
h1{font:400 clamp(66px,12vw,150px)/.88 var(--display);font-style:italic;letter-spacing:-.025em;margin:0}
h1 span{font-style:normal}
.intro{font-size:clamp(17px,1.8vw,19px);color:var(--soft);max-width:50ch;margin:4px 0 0}
.stats{display:flex;gap:28px;flex-wrap:wrap;margin:10px 0 0;font:400 13px var(--mono);color:var(--faint);font-variant-numeric:tabular-nums}
.stats b{color:var(--ink);font-weight:500}

/* the wall of frames */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:60px 44px;padding-block:44px 90px;border-top:1px solid var(--line)}
.work{display:grid;gap:20px;align-content:start;text-decoration:none;color:inherit}
.frame{background:var(--mat);padding:18px;border:1px solid var(--edge);box-shadow:var(--shadow);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.thumb{aspect-ratio:4/5;max-width:100%;overflow:hidden;background:#141416;position:relative}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
a.work:hover .frame,a.work:focus-visible .frame{transform:translateY(-6px)}
a.work:focus-visible{outline:none}
a.work:focus-visible .frame{outline:2px solid var(--accent);outline-offset:6px}

/* museum label under each frame */
.label{display:grid;gap:4px;padding-inline:2px}
.no{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--faint);margin:0}
.dot{display:inline-flex;align-items:center;gap:6px;color:var(--accent)}
.dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent)}
.pin{display:inline-flex;align-items:center;gap:5px;color:var(--ink)}
/* a little push pin holding the pinned frame to the wall */
.pinned .frame{position:relative}
.pinned .frame::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55) 0 2px,transparent 3.5px),var(--ink);box-shadow:0 4px 5px -1px rgba(0,0,0,.4)}
.label h2{font:400 30px/1.05 var(--display);margin:4px 0 2px;letter-spacing:-.01em}
.medium{font-style:italic;color:var(--soft);margin:0}
.facts{font:400 13px var(--mono);color:var(--faint);margin:2px 0 0}
.line{margin:10px 0 0;padding-left:12px;border-left:2px solid var(--line);color:var(--soft);font-size:15px}
.read{margin-top:12px;font:500 14px var(--sans);display:inline-flex;gap:6px;align-items:center}
.read i{font-style:normal;transition:transform .3s}
a.work:hover .read i{transform:translateX(4px)}

/* empty frames waiting for the next thought */
.empty .frame{background:transparent;border:1.5px dashed var(--line);box-shadow:none}
.empty .thumb{background:transparent;display:grid;place-items:center}
.empty .thumb p{font:400 22px/1.3 var(--display);font-style:italic;color:var(--faint);text-align:center;margin:0;padding:0 20px}
.empty .label h2{color:var(--faint)}

footer{border-top:1px solid var(--line);padding-block:26px 50px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 13px var(--mono);color:var(--faint)}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}