/* ---------- HERO (lit) ---------- */
.hero{
  padding-block:80px 64px;
  max-width:760px;
}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  font-weight:500;
  font-style:italic;
  line-height:1.18;
  margin-top:16px;
}
.hero h1 em{color:var(--ember);font-style:italic;}
.hero p.lede{
  margin-top:22px;
  font-size:1.1rem;
  color:var(--ink-dim);
  max-width:48ch;
}
.hero-actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- ROOM / WORKSHOP WALL (dark, flashlight) ---------- */
.room{
  position:relative;
  margin-inline:-22px;
  padding-inline:22px;
  padding-block:64px 90px;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, var(--wall), transparent 70%),
    var(--room);
  overflow:hidden;
  isolation:isolate;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.room-inner{position:relative;z-index:2;}
.room-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;
  margin-bottom:40px;
  position:relative;
}
.pin-string{display:block;margin-bottom:8px;}
.room-head h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:500;font-style:italic;margin-top:6px;}
.room-hint{font-size:.85rem;color:var(--ink-faint);max-width:28ch;text-align:right;}
.coffee-ring{
  position:absolute;top:-18px;right:6%;
  width:66px;height:66px;border-radius:50%;
  border:6px solid rgba(180,190,196,.14);
  pointer-events:none;
  transform:rotate(8deg);
}

.room-grain{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:var(--grain);
  background-size:140px 140px;
  opacity:.18;
  mix-blend-mode:overlay;
}
.dust-canvas{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  width:100%;height:100%;
  display:block;
}
.room-overlay{
  position:absolute;inset:0;z-index:5;pointer-events:none;
  background:
    radial-gradient(circle at var(--lx,50%) var(--ly,30%),
      rgba(127,224,232,.14) 0,
      rgba(5,7,9,0) 70px,
      rgba(5,7,9,0) 150px,
      rgba(5,7,9,.68) 270px,
      rgba(2,3,4,.95) 440px,
      rgba(2,3,4,.98) 100%);
}

.frames-row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  grid-auto-rows:min-content;
  gap:30px;
  position:relative;
  z-index:2;
  align-items:start;
}
.exhibit{
  display:flex;flex-direction:column;gap:0;
  --glow:0;
}
.frame{
  position:relative;
  aspect-ratio:4/3;
  border:9px solid var(--wall-soft);
  outline:1px solid var(--brass-soft);
  outline-offset:-5px;
  overflow:hidden;
  box-shadow:0 18px 34px var(--shadow);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
  filter:brightness(calc(1 + var(--glow,0) * .32)) saturate(calc(1 + var(--glow,0) * .25));
  transform:translateY(calc(var(--glow,0) * -3px));
}
.art{position:absolute;inset:0;}
.art--quest{background:
  radial-gradient(circle at 28% 72%, var(--ember) 0%, transparent 48%),
  radial-gradient(circle at 72% 26%, var(--brass) 0%, transparent 52%),
  var(--wall);}
.art--tally{background:repeating-radial-gradient(circle at 50% 50%, var(--brass) 0 5px, var(--wall) 5px 13px);}
.art--blocks{background:linear-gradient(135deg, var(--ember) 0 25%, var(--wall) 25% 50%, var(--brass) 50% 75%, var(--wall) 75% 100%);}
.art--muted{background:var(--wall-soft);}
.art--app{
  background:
    radial-gradient(circle at 50% 42%, rgba(127,224,232,.12) 0%, transparent 55%),
    var(--wall-soft);
}
.art-img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  padding:15%;
  image-rendering:pixelated;
}
.art-img--icon{
  inset:auto;
  top:50%;
  left:50%;
  width:42%;
  height:auto;
  max-width:96px;
  padding:0;
  object-fit:cover;
  border-radius:22%;
  image-rendering:auto;
  transform:translate(-50%,-50%);
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}

.plaque{
  padding:16px 4px 4px;
  border-top:2px solid var(--brass-soft);
  margin-top:14px;
  display:flex;flex-direction:column;gap:8px;
}
.plaque .row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.plaque h3{font-weight:600;font-size:1.15rem;letter-spacing:.01em;}
.plaque h3 a:hover{text-decoration:underline;}
.plaque p{font-size:.9rem;color:var(--ink-dim);}
.plaque .meta{
  font-family:'Pixelify Sans', 'Work Sans', sans-serif;
  font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-faint);
}

/* covered / hidden exhibits */
.sheet{
  position:absolute;
  inset:7% 5% 11% 5%;
  background:repeating-linear-gradient(102deg, var(--cover) 0 11px, var(--cover-dark) 11px 22px);
  border-radius:8px 14px 6px 10px;
  transform:rotate(-2.5deg);
  box-shadow:0 12px 22px rgba(0,0,0,.5);
}
.sheet::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(155deg, rgba(255,255,255,.16), transparent 45%);
}
.hang-tag{
  position:absolute;top:-6px;right:16%;z-index:3;
  background:var(--paper);color:var(--room-deep);
  font-family:'Caveat',cursive;font-size:1.15rem;font-weight:600;
  padding:3px 14px 6px;
  transform:rotate(7deg);
  box-shadow:2px 3px 0 rgba(0,0,0,.35);
}
.hang-tag::before{
  content:"";position:absolute;top:-13px;left:50%;width:1px;height:13px;
  background:rgba(0,0,0,.45);
}

/* pinned working notes among the frames */
.note, .sketch{
  --glow:0;
  position:relative;
  box-shadow:0 16px 28px rgba(0,0,0,.5);
  transition:transform .18s ease, filter .18s ease;
  filter:brightness(calc(1 + var(--glow,0) * .3));
  align-self:start;
}
.note{
  background:var(--paper);
  color:var(--room-deep);
  font-family:'Caveat',cursive;
  font-size:1.35rem;
  line-height:1.32;
  padding:26px 22px 30px;
  min-height:190px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  transform:rotate(var(--tilt,-3deg)) translateY(calc(var(--glow,0) * -3px));
}
.note::before{
  content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ded8ff, var(--ember) 60%, #2c2560 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.5);
}
.sketch{
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 18px),
    var(--blueprint);
  color:#dfeaf2;
  font-family:'Caveat',cursive;
  font-size:1.15rem;
  padding:20px;
  min-height:190px;
  display:flex;align-items:flex-end;
  transform:rotate(2deg) translateY(calc(var(--glow,0) * -3px));
  overflow:hidden;
}
.sketch::after{
  content:"";position:absolute;top:0;right:0;width:28px;height:28px;
  background:linear-gradient(135deg, transparent 50%, rgba(0,0,0,.4) 50%);
}

/* ---------- ABOUT (lit) ---------- */
.about{
  padding-block:70px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;
}
.about .eyebrow{grid-column:1/-1;margin-bottom:4px;}
.about h2{font-weight:500;font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:18px;}
.about p{color:var(--ink-dim);max-width:58ch;}
.about p + p{margin-top:14px;}
.about strong{color:var(--paper);font-weight:600;}
.about .col-a{border-right:1px solid var(--wall-soft);padding-right:40px;}
.about-cta{grid-column:1/-1;margin-top:8px;}

@media (max-width:760px){
  .about{grid-template-columns:1fr;}
  .about .col-a{border-right:none;border-bottom:1px solid var(--wall-soft);padding-right:0;padding-bottom:30px;}
  .room-head{flex-direction:column;align-items:flex-start;}
  .room-hint{text-align:left;}
  .coffee-ring{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .frame, .note, .sketch{transition:none;}
}