/* ============================================================
   MERIDIAN PhotoPak 340c — showcase page + camera device
   1998-computing-desk aesthetic; serif broadsheet manual.
   ============================================================ */
:root {
  --ink: #26241f;
  --paper: #efe9dc;
  --paper-deep: #e6dfcf;
  --accent: #a33327;
  --desk: #4b5568;
  --plastic-lo: #b8b2a4;
  --plastic-hi: #d9d3c6;
  --plastic-mid: #c7c1b3;
  --plastic-dark: #8f887a;
  --lcd-glow: #cfd8bd;
  --mono: "Courier New", Courier, monospace;
  --serif: Georgia, "Times New Roman", Times, serif;
  --display: "Haettenschweiler", "Arial Narrow", Impact, Georgia, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 50% -140px, #6d7891 0%, var(--desk) 58%, #3c4454 100%);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
}
.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--accent); color: #fff; padding: .5rem 1rem; z-index: 300;
}
.skip-link:focus { left: .5rem; }

/* ---------------- top nav ---------------- */
.topnav {
  position: sticky; top: 0; z-index: 90;
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: baseline; justify-content: space-between;
  padding: .45rem 1.1rem;
  background: linear-gradient(#2e3442, #232837);
  border-bottom: 3px double #14171f;
}
.brandmark {
  font-family: var(--display); letter-spacing: .16em; color: #f0ead9; font-size: 1.05rem;
}
.brandsub { font-family: var(--serif); font-style: italic; letter-spacing: .02em; color: #aeb6c6; font-size: .8rem; text-transform: none; }
.toplinks a {
  color: #dfe5f0; text-decoration: none; font-variant: small-caps; letter-spacing: .09em;
  padding: .15rem .35rem; border-bottom: 2px solid transparent;
}
.toplinks a:hover { border-bottom-color: var(--accent); color: #fff; }

/* ---------------- masthead ---------------- */
.masthead { max-width: 1180px; margin: 0 auto; padding: 2.2rem 1.2rem 1rem; text-align: center; }
.issue-line {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; color: #c6cee0;
  border-top: 1px solid #7d8699; border-bottom: 1px solid #7d8699; display: inline-block; padding: .25rem .9rem;
}
.display-head {
  margin: 1.1rem 0 .4rem; color: #f3edda;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.6rem, 8.4vw, 6.4rem); line-height: .92; letter-spacing: .045em; text-transform: uppercase;
  text-shadow: 0 2px 0 #1a1e29, 0 10px 24px rgba(0,0,0,.35);
}
.head-340 { color: var(--accent); }
.standfirst {
  max-width: 62ch; margin: .6rem auto 0; color: #ccd4e4; font-size: clamp(.95rem, 2vw, 1.06rem); line-height: 1.55;
}

/* ---------------- device frame / desk ---------------- */
.device-frame { max-width: 1240px; margin: 1.4rem auto 3rem; padding: 0 1rem; position: relative; }
.deskrow {
  display: flex; gap: 1.4rem; align-items: stretch; justify-content: center;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18));
  border-radius: 14px; padding: 1.4rem 1.1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.4);
}

.camera-housing {
  flex: 0 1 980px; min-width: 300px;
  background:
    linear-gradient(160deg,
      var(--plastic-hi) 0%, var(--plastic-mid) 30%,
      var(--plastic-lo) 62%, #a49d8f 84%, #96907f 100%);
  border-radius: 26px 26px 18px 18px;
  padding: .85rem .95rem 0.6rem;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 -3px 8px rgba(60,50,35,.28),
    0 24px 42px rgba(0,0,0,.5),
    0 3px 0 #6d6759;
  position: relative;
}
.camera-housing::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.032) 0 2px, transparent 2px 5px);
}

/* top deck */
.cam-topdeck {
  display: grid; grid-template-columns: minmax(200px,1.3fr) auto auto auto auto;
  gap: .8rem; align-items: start; margin-bottom: .8rem; position: relative; z-index: 2;
}
.grip-face {
  display:none;
}
.top-lcd {
  background: #20241d; border-radius: 8px; padding: .42rem .55rem;
  border: 2px solid #55503f; box-shadow: inset 0 0 14px #000a, inset 0 1px 2px #ffffff22;
  color: var(--lcd-glow); font-family: var(--mono); user-select: none;
}
.tl-row { display:flex; align-items:center; gap:.55rem; white-space:nowrap; }
.tl-row-main { font-size: .92rem; justify-content: space-between; letter-spacing:.04em; text-shadow: 0 0 6px #ccdbaa66;}
.tl-row-sub { font-size: .62rem; gap:.38rem; margin-top:.22rem; opacity:.82; }
.tl-cell em { font-style:normal; font-size:.6rem; letter-spacing:.14em; opacity:.75; display:block; }
.tl-cell b { font-weight:700; font-size:1.05em; }
.tl-mode { border:1px solid #aab89466; border-radius:3px; padding:0 .3rem; }
.tl-flag { border:1px solid #6c735f66; border-radius:2px; padding:0 .22rem; }
.tl-card.low { color:#ffb46a; border-color:#ffb46a; }
.bat-shell { display:inline-block; width:26px; height:11px; border:1px solid #aab894; border-radius:2px; padding:1px; position:relative; vertical-align:-1px;}
.bat-shell::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:#aab894; }
#tlBattBars { display:block; height:100%; width:87%; background:var(--lcd-glow); box-shadow:0 0 4px #ccdbaa88; }
.blink { animation: blinky 1s steps(2,end) infinite; }
@keyframes blinky { 50% { opacity:.15; } }

.flash-rig { display:flex; flex-direction:column; align-items:center; gap:.35rem; }
.flash-housing {
  background: linear-gradient(#777165,#5d574c); border-radius:8px 8px 4px 4px; padding:4px;
  border:1px solid #47423a; box-shadow: inset 0 1px 0 #fff5;
}
.flash-lamp {
  width:52px; height:30px; border-radius:5px;
  background: radial-gradient(circle at 50% 40%, #fdf6e2, #cdc7b4 70%, #aaa48f);
  border:1px solid #55503f; box-shadow: inset 0 0 6px #0004;
}
.flash-label, .shutter-label, .dial-label, .led-strip label {
  font-family:var(--mono); font-size:.52rem; letter-spacing:.18em; color:#6b6557; user-select:none;
}
.btn-flash {
  border-radius:999px; border:1px solid #47423a; background:linear-gradient(#ded8ca,#b3ac9c);
  cursor:pointer; font-size:.8rem; line-height:1; padding:.3rem .55rem; color:#3c382f;
  box-shadow: 0 1px 0 #fff8, inset 0 -2px 3px #0002;
}
.btn-flash:hover{ filter:brightness(1.06);}
.btn-flash:active{ transform:translateY(1px); }

.shutter-rig { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.shutter-btn {
  position:relative; width:64px; height:64px; border-radius:999px; cursor:pointer;
  border:none; background:transparent; padding:0;
}
.shutter-ring{
  position:absolute; inset:2px; border-radius:999px;
  background: conic-gradient(from 210deg, #eae4d6, #b9b2a2 30%, #efe9dc 55%, #aaa393 85%, #eae4d6);
  box-shadow: 0 3px 6px #0005, inset 0 2px 2px #fff9, inset 0 -3px 5px #0004;
}
.shutter-cap{
  position:absolute; inset:13px; border-radius:999px;
  background: radial-gradient(circle at 36% 30%, #ff7f6e, #d43a27 58%, #a02013);
  border:1px solid #7c1810; box-shadow: inset 0 -4px 8px #6e12079e, inset 0 3px 5px #ffd2c38c;
  transition: transform .06s ease;
}
.shutter-btn:active .shutter-cap, .shutter-cap.pressed { transform: translateY(2px) scale(.97); }

.dial-rig{ display:flex; flex-direction:column; align-items:center; gap:.2rem;}
.mode-dial{
  position:relative; width:112px; height:112px; border-radius:999px;
  background:
    radial-gradient(circle at 38% 32%, #efeadc, #beb8a8 58%, #98917f);
  border:3px solid #7d7666; box-shadow: 0 4px 10px #0004, inset 0 2px 2px #fffa, inset 0 -4px 8px #0003;
  display:grid; place-items:center; row-gap:0;
}
.dial-stop{
  position:absolute; width:52px; height:33px; border:none; background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; color:#4c473b;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:6px; transition: background .15s;
}
.dial-stop small{ font-size:.5rem; opacity:.7; letter-spacing:.2em;}
.dial-stop[data-active]{ background:#5c5748; color:#f4eeda; text-shadow:0 0 4px #ffe9a977; }
.dial-off{ top:4px; } .dial-capture{ right:-2px; top:50%; transform:translateY(-50%);} 
.dial-play{ bottom:4px;} .dial-menu{ left:-2px; top:50%; transform:translateY(-50%);}
.dial-pointer{
  width:14px;height:14px;border-radius:999px;margin-top:auto;margin-bottom:auto;
  background:radial-gradient(circle at 35% 30%,#fdfaf0,#cfc8b6 70%);border:1px solid #8a8371;
  position:absolute; z-index:2; box-shadow:0 1px 2px #0006;
}
.power-switch{
  align-self:center; height:64px; min-width:34px; border:2px solid #5d5748; border-radius:7px; cursor:pointer;
  background: linear-gradient(90deg,#cac4b4 55%, #a8a190); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.16em; color:#3d392e; writing-mode:vertical-rl; padding:.3rem .12rem;
  box-shadow: 0 2px 4px #0004, inset 0 1px 0 #fff8;
}
.power-switch[aria-pressed="true"]{ background:linear-gradient(90deg,#8fae74 30%, #6f9455); color:#102407; text-shadow:0 0 4px #dfffb0;}

/* mid deck */
.cam-middeck{
  display:grid; grid-template-columns: 168px minmax(280px,1fr) 172px; gap:1rem; align-items:start;
  background: linear-gradient(180deg,#948d7d,#a49d8d 30%, #b1ab9c);
  border-radius: 14px; border:1px solid #6e6857; box-shadow: inset 0 2px 6px #0002, inset 0 -2px 6px #fff4;
  padding: 1rem .9rem; margin-bottom: .8rem; position:relative; z-index:2;
}
.lens-column{ display:flex; flex-direction:column; gap:.55rem; align-items:center;}
.lens-barrel{
  width:150px; padding:.5rem .5rem .4rem; border-radius: 999px 999px 12px 12px;
  background:
    repeating-conic-gradient(from 0deg, #6e685b 0deg 9deg, #5d574c 9deg 18deg);
  box-shadow: inset 0 3px 6px #0006, inset 0 -2px 4px #fff3, 0 6px 12px #0005;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.lens-glass{
  width:108px;height:108px;border-radius:999px;position:relative;overflow:hidden;cursor:pointer;
  background:
    radial-gradient(circle at 36% 30%, #3f4a63 0 18%, #232a3d 32%, #10131f 60%, #05060b 100%);
  box-shadow: inset 0 0 0 4px #17151b, inset 0 0 22px #000, 0 0 0 5px #4b463c;
}
.lens-coating{
  position:absolute; inset:18%; border-radius:999px;
  background: conic-gradient(from 20deg, #7fd8ff33, #ff8de133, #c0ff8d22, #7fd8ff11, #7fd8ff44);
  filter: blur(1px); mix-blend-mode: screen;
}
.lens-aperture{
  position:absolute; inset:38%; border-radius:999px; background:#02020799;
  box-shadow: inset 0 0 6px #000; transition: box-shadow .4s, transform .4s;
}
.lens-barrel.zooming .lens-aperture{ transform:scale(.72);}
.zoom-rocker{
  display:flex; align-items:center; gap:.3rem; width:100%;
}
.zoom-rocker button{
  flex:1; border:1px solid #3f3b31; border-radius:5px; cursor:pointer;
  background:linear-gradient(#ccc5b4,#a29b8a); font-family:var(--mono); font-size:.6rem; color:#2f2c24;
  box-shadow: 0 1px 0 #fff8, inset 0 -2px 3px #0002; padding:.22rem .1rem;
}
.zoom-scale{ display:flex; flex:1.1; flex-direction:column-reverse; gap:2px; }
.zoom-scale i{ height:3px; background:#8b8474; border-radius:2px;}
.zoom-scale i.on{ background:#ffd77e; box-shadow:0 0 4px #ffb30099;}
.lenstext{ font-family:var(--mono); font-size:.46rem; letter-spacing:.08em; color:#e8e2d0; text-align:center; opacity:.85;}
.led-strip{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; justify-content:center;}
.led{ width:9px;height:9px;border-radius:999px;background:#3a382f;border:1px solid #24221b; box-shadow:inset 0 1px 2px #000;}
.led.on-red{ background:#ff4030; box-shadow:0 0 8px #ff2417, 0 0 2px #ffb1a8; }
.led.on-green{ background:#54ff5e; box-shadow:0 0 8px #2bff3b; }

/* LCD bay */
.lcd-bay{ min-width:0; display:flex; flex-direction:column; gap:.4rem; align-items:center;}
.lcd-bezel{
  position:relative; width:100%; aspect-ratio: 4/3; border-radius:10px; overflow:hidden;
  background:#151310; border:10px solid #55503f;
  box-shadow: inset 0 0 0 2px #302c22, 0 0 0 3px #7d7666, inset 0 2px 10px #000, 0 8px 18px #0004;
}
.lcd-bezel::after{ /* glass sheen */ content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, rgba(255,255,255,.14), rgba(255,255,255,0) 34%),
              linear-gradient(300deg, rgba(120,180,255,.05), transparent 40%);
  mix-blend-mode: screen; }
#lcd{
  display:block; width:100%; height:100%;
  image-rendering: pixelated;
  background:#0b0d0a;
}
#hud{
  position:absolute; inset:0; width:100%; height:100%;
  image-rendering: pixelated; pointer-events:none; z-index:2;
}
.lcd-off-cover{
  position:absolute; inset:0; background:
    radial-gradient(120% 120% at 30% 20%, #3c3f3a, #22241f 55%, #191b17);
  transition: opacity .35s ease; z-index:3; pointer-events:none;
}
.lcd-off-cover.off { opacity:0; }
.lcd-tap-layer{ position:absolute; inset:0; z-index:4; background:transparent; border:none; cursor:crosshair; touch-action:none;}
.lcd-caption{ font-family:var(--mono); font-size:.62rem; color:#5c5748; letter-spacing:.06em; margin:0; text-align:center;}

/* keypad column */
.keypad-column{ display:flex; flex-direction:column; gap:.7rem; align-items:center;}
.keycluster{
  display:grid; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,34px); gap:4px;
  background:linear-gradient(#7f7969,#948d7d); padding:8px; border-radius:12px; border:1px solid #57523f;
  box-shadow: inset 0 2px 4px #0003;
}
.kbtn{
  border:none; border-radius:7px; cursor:pointer; font-family:var(--mono); font-size:.6rem; color:#3a372c;
  background:linear-gradient(#ddd7c8,#a9a292);
  box-shadow: 0 2px 0 #6e6858, inset 0 1px 0 #fffa;
}
.kbtn:active{ box-shadow:0 0 0 #000, inset 0 2px 3px #0004; transform:translateY(1px);}
.k-up{grid-area:1/2}.k-left{grid-area:2/1}.k-ok{grid-area:2/2;font-size:.5rem;font-weight:bold;color:#6d301f}
.k-right{grid-area:2/3}.k-down{grid-area:3/2}
.auxkeys{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center;}
.abtn{
  border:1px solid #4c4738; border-radius:6px; padding:.34rem .5rem; cursor:pointer;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.1em; color:#312e24;
  background:linear-gradient(#d6d0c0,#a59e8d); box-shadow:0 1px 0 #6e6858, inset 0 1px 0 #fffa;
}
.abtn:active{transform:translateY(1px); box-shadow:inset 0 2px 3px #0004;}
.abtn-del{ color:#7c1d10; }
.abtn[aria-pressed="true"]{ background:linear-gradient(#88a86a,#657f4c); color:#0e2405; }
.kbd-note{ font-family:var(--mono); font-size:.55rem; line-height:1.5; color:#59544a; text-align:center; margin:.2rem 0 0; max-width:200px;}

/* base deck */
.cam-basedeck{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.4rem .6rem .55rem; position:relative; z-index:2;
}
.slotbay{ display:flex; align-items:center; }
.slot-flap{
  font-family:var(--mono); font-size:.5rem; letter-spacing:.2em; color:#4c473b;
  border:1px solid #6e6857; border-radius:4px; padding:.28rem .5rem;
  background:repeating-linear-gradient(90deg,#b6b0a1 0 6px,#aca697 6px 12px); display:inline-flex; align-items:center; gap:.6rem;
  box-shadow: inset 0 -2px 3px #0002;
}
.slot-eject{ cursor:pointer; padding:0 .15rem; color:#5c2119;}
.cardwrite-flicker .led-card{ animation: blinky .18s steps(2,end) infinite; }
.brandplate{ font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:#4c473b;}
.brandplate b{ font-size:.72rem; letter-spacing:.3em;}
.tripodscrew{ width:22px;height:22px;border-radius:999px;background:radial-gradient(circle at 35% 30%,#8b8474,#5d574c);box-shadow:inset 0 0 0 2px #45413431, 0 1px 0 #fff5;}

/* desk notes aside */
.desk-notes{
  flex: 0 1 250px; min-width:230px; color:#e8ecf6; align-self:center;
}
.desk-notes h3{
  font-family:var(--display); letter-spacing:.12em; text-transform:uppercase; color:#ffd77e;
  font-size:1.05rem; margin:0 0 .5rem; border-bottom:2px solid #ffd77e55; padding-bottom:.25rem;
}
.desk-notes ul{ list-style:square; padding-left:1.1rem; margin:.3rem 0 .8rem; font-size:.83rem; line-height:1.5; color:#cdd5e6;}
.deskhint{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:#ffd77e;
  border:1px dashed #ffd77e66; border-radius:6px; padding:.5rem .6rem; min-height:2.2em;
  transition: color .3s, border-color .3s;
}

/* ------------- paper sections (broadsheet manual) ------------- */
.paper-section{ background:var(--paper); margin:0 auto; padding:2.4rem clamp(1rem,4vw,3rem); }
.paper-manual{ background:var(--paper-deep); }
#controlsref{ max-width:1180px; }
#specsheet, #colophon{ max-width:1180px; }
.paper-manual{ max-width:1240px; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); }
.section-head{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.06em;
  font-size:clamp(1.6rem, 4vw, 2.6rem); margin:0 0 1.2rem; border-bottom:4px double var(--ink); padding-bottom:.35rem;
}
.manual-mast{ text-align:center; margin-bottom:1.6rem; }
.manual-rule{ font-family:var(--mono); font-size:.62rem; letter-spacing:.28em; color:#5d5647; margin:.2rem 0 .8rem; }
.manual-title{
  font-family:var(--display); font-size:clamp(2.4rem,7vw,5rem); margin:.1em 0; letter-spacing:.03em; line-height:.95;
}
.manual-sub{ font-style:italic; font-size:.98rem; color:#4c463a; margin:.2rem 0 0; }
.broadsheet{ columns: 320px; column-gap: 2.4rem; column-rule: 1px solid #b8ad97; max-width:1180px; margin:0 auto;}
.cols-3{ max-width:1100px; }
.cols-2{ max-width:1020px; }
.col-item{ break-inside: avoid; margin: 0 0 1.4rem; }
.serifbody p{ font-size:.94rem; line-height:1.62; hyphens:auto; text-align:justify; }
.col-crosshead{
  font-family:var(--display); letter-spacing:.08em; text-transform:uppercase; font-size:1.02rem;
  border-top:2px solid var(--ink); padding-top:.3rem; margin:0 0 .5rem; font-weight:400;
}
.ctl-table{ width:100%; border-collapse:collapse; font-size:.9rem; column-span:all; }
.ctl-table th, .ctl-table td{ border:1px solid #b6ab93; padding:.4rem .55rem; text-align:left; vertical-align:top;}
.ctl-table th{ background:var(--paper-deep); font-variant:small-caps; letter-spacing:.06em;}
.speclist dt{ font-weight:bold; font-variant:small-caps; letter-spacing:.05em; margin-top:.6rem;}
.speclist dd{ margin:.1rem 0 0 .9rem; font-size:.92rem;}
.spec-grid{ display:block; }

.pagefoot{
  background:#1d212c; color:#9aa4bb; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding: .9rem 1.2rem 2.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
}

/* ------------- PC overlay ------------- */
.overlay{
  position:fixed; inset:0; z-index:200; background:rgba(14,16,24,.72); backdrop-filter: blur(2px);
  display:flex; align-items:center; justify-content:center; padding:1rem;
}
.overlay.hidden{ display:none; }
.overlay-panel{
  background:var(--paper); border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  width:min(1060px, 100%); max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
  border:3px solid #2c2822;
}
.panel-slide{ animation: slidefade .38s cubic-bezier(.2,.7,.3,1) both; }
@keyframes slidefade{ from{ opacity:0; transform: translateY(26px) scale(.985);} to{opacity:1; transform:none;} }
.overlay.hidden .panel-slide{ animation:none; }
.overlay-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  background:#2c2822; color:#f2ecd9; padding:.7rem 1rem;
}
.overlay-head h2{ font-family:var(--display); font-weight:400; letter-spacing:.05em; margin:0; font-size:1.3rem; text-transform:uppercase;}
.overlay-head small{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; color:#cfc7ae;}
.ov-close{ background:none;border:none;color:#f2ecd9; font-size:1.5rem; cursor:pointer; line-height:1;}
.pc-statusbar{
  display:flex; gap:.8rem; align-items:center; padding:.5rem .9rem; background:#ded6c2; border-bottom:1px solid #b3a88d;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; flex-wrap:wrap;
}
.ov-btn{
  border:1px solid #4c4738; background:linear-gradient(#d8d2c1,#a9a292); border-radius:5px; cursor:pointer;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; padding:.32rem .6rem; color:#312e24;
  box-shadow:0 1px 0 #6e6858, inset 0 1px 0 #fffa;
}
.ov-btn:hover{ filter:brightness(1.05); }
.ov-btn:active{ transform:translateY(1px);}
.pc-thumbgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.9rem; padding:1rem; overflow-y:auto;
}
.pcthumb{ background:#f6f1e4; border:1px solid #bdb298; border-radius:6px; padding:.45rem; box-shadow:0 2px 5px rgba(0,0,0,.12); }
.pcthumb canvas{ width:100%; image-rendering:pixelated; border:1px solid #9c917a; background:#111; display:block;}
.pcthumb .pt-meta{ font-family:var(--mono); font-size:.58rem; color:#59544a; margin:.35rem 0; letter-spacing:.04em; line-height:1.5;}
.pcthumb .pt-actions{ display:flex; gap:.4rem; flex-wrap:wrap;}
.empty-grid{ grid-column:1/-1; text-align:center; font-family:var(--mono); color:#59544a; padding:2.4rem 1rem; letter-spacing:.1em;}
.exif-detail{ padding: .9rem 1rem 1.1rem; border-top:3px double #4c463a; background:#ece5d3; overflow-y:auto; max-height:44vh;}
.exif-pre{
  font-family:var(--mono); font-size:.66rem; line-height:1.5; background:#24221b; color:#d8e6bd;
  padding:.8rem .9rem; border-radius:6px; overflow-x:auto; margin:.4rem 0 .8rem; white-space:pre;
}
.exif-detail.hidden{ display:none; }

.download-dotpulse::after{
  content:"· · ·"; margin-left:.4rem; letter-spacing:.2em; animation: blinky .7s steps(2,end) infinite;
}

/* toast for page-level notices */
.toast{
  position:fixed; left:50%; bottom:2.2vh; transform:translateX(-50%);
  background:#24221b; color:#ffd77e; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em;
  padding:.55rem .95rem; border-radius:6px; border:1px solid #ffd77e55; z-index:260;
  box-shadow:0 8px 22px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition: opacity .25s, transform .25s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(-6px); }

/* ---------------- responsive ---------------- */
@media (max-width: 1020px){
  .cam-middeck{ grid-template-columns: 150px 1fr; }
  .keypad-column{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .kbd-note{ display:none; }
  .deskrow{ flex-direction:column; }
  .desk-notes{ max-width:640px; }
}
@media (max-width: 760px){
  .topnav{ justify-content:center; }
  .brandsub{ display:none; }
  .cam-topdeck{
    grid-template-columns: repeat(2, auto);
    grid-template-areas: "lcd lcd" "flash shutter" "dial power";
    justify-content:center; row-gap:.9rem;
  }
  .top-lcd{ grid-area:lcd; width:min(420px, 100%); }
  .tl-row-main{ font-size:.8rem; gap:.4rem;}
  .tl-row-sub{ flex-wrap:wrap; }
  .flash-rig{ grid-area:flash; } .shutter-rig{ grid-area:shutter; } .dial-rig{ grid-area:dial; }
  .power-switch{ grid-area:power; writing-mode:horizontal-tb; height:auto; padding:.45rem .9rem; letter-spacing:.12em; justify-self:center; min-width:0; }
  .mode-dial{ width:104px;height:104px;}
  .cam-middeck{ grid-template-columns: 1fr; justify-items:center; padding:.8rem .6rem;}
  .lens-column{ order:2; } .lcd-bay{ order:1; width:100%;} .keypad-column{ order:0; }
  .kbtn{ width:44px; }
  .camera-housing{ padding:.6rem .5rem .4rem; border-radius:18px;}
  .deskhint{ font-size:.62rem;}
}
@media (max-width: 420px){
  .shutter-btn{ width:56px;height:56px;}
  .display-head{ letter-spacing:.02em; }
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .panel-slide{ animation:none; }
  .blink, .download-dotpulse::after{ animation:none; }
}