/* luxmetered — "Incident dome" design system.
   Handheld-meter charcoal, amber LCD digits, dome-white accents.
   Instrument Sans display + Sometype Mono readouts. */

:root{
  --body-chassis:#1a1b1e;
  --pocket:#222327;
  --pocket2:#2a2b30;
  --hairline:#37383e;
  --domewhite:#ecedee;
  --graphite:#9a9ca3;
  --lcd:#ffb454;
  --lcd-deep:#d98f2b;
  --leaf:#8fd0a0;
  --sans:'Instrument Sans',-apple-system,'Segoe UI',sans-serif;
  --digits:'Sometype Mono',ui-monospace,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--body-chassis);color:var(--domewhite);font-family:var(--sans);
  font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
a{color:var(--lcd)}
h1,h2,h3{line-height:1.12;font-weight:600;letter-spacing:-.01em}
b,strong{font-weight:600;color:var(--domewhite)}

/* strap bar */
.strapbar{display:flex;align-items:center;gap:14px;padding:13px 20px;
  border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.strapbar .badge{display:flex;align-items:center;gap:8px;font-weight:700;
  font-size:1.1rem;color:var(--domewhite);text-decoration:none}
.strapbar .badge em{font-style:normal;color:var(--lcd)}
.strapbar .whisper{font-size:.74rem;color:var(--graphite);margin-right:auto}
.strapbar nav{display:flex;gap:16px;font-size:.88rem}
.strapbar nav a{text-decoration:none;color:var(--domewhite);opacity:.8}
.strapbar nav a.here{color:var(--lcd);opacity:1}

/* opening */
.viewfinder{max-width:880px;margin:0 auto;padding:30px 20px 6px}
.viewfinder h1{font-size:clamp(1.7rem,5.2vw,2.6rem)}
.viewfinder h1 em{font-style:normal;color:var(--lcd)}
.viewfinder .lede{margin-top:10px;max-width:640px;color:var(--graphite);font-size:.98rem}
.viewfinder .lede b{color:var(--domewhite)}

/* the meter */
.meterdeck{max-width:880px;margin:16px auto 0;padding:0 20px}
.meterbody{background:var(--pocket);border:1px solid var(--hairline);border-radius:12px;overflow:hidden}

.scene{position:relative;background:#000;min-height:190px}
.scene video{display:none}
.scene canvas{display:block;width:100%;height:auto;cursor:crosshair}
.scene .lenscap{position:absolute;inset:0;display:flex;flex-direction:column;gap:14px;
  align-items:center;justify-content:center;text-align:center;padding:26px;background:#0c0c0e}
.scene .lenscap[hidden]{display:none}
.scene .lenscap p{max-width:440px;font-size:.9rem;color:var(--graphite)}
.scene .spotring{position:absolute;border:2px solid var(--lcd);border-radius:50%;
  width:56px;height:56px;pointer-events:none;transform:translate(-50%,-50%);display:none}

.shutterbtn{font-family:var(--sans);font-weight:600;font-size:.95rem;border-radius:10px;
  border:1px solid var(--lcd-deep);background:var(--lcd);color:#231903;
  padding:10px 22px;cursor:pointer}
.shutterbtn:hover{background:#ffc272}
.shutterbtn.matte{background:transparent;color:var(--lcd);border-color:var(--hairline)}
.shutterbtn.matte:hover{border-color:var(--lcd)}
.shutterbtn.small{font-size:.8rem;padding:7px 14px}
.shutterbtn[disabled]{opacity:.4;cursor:default}

/* LCD panel */
.lcdpanel{display:flex;gap:1px;background:var(--hairline);border-top:1px solid var(--hairline);flex-wrap:wrap}
.lcdpanel .cell{flex:1;min-width:130px;background:var(--pocket2);padding:14px 16px}
.lcdpanel .cell b{display:block;font-family:var(--digits);font-size:1.6rem;color:var(--lcd);font-variant-numeric:tabular-nums}
.lcdpanel .cell span{font-size:.68rem;color:var(--graphite);text-transform:uppercase;letter-spacing:.09em}
.lcdpanel .cell .mode-tag{font-size:.66rem;color:var(--leaf)}

/* controls */
.dials{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--hairline)}
.dials label{font-size:.72rem;color:var(--graphite);text-transform:uppercase;letter-spacing:.08em}
.dials select{font-family:var(--digits);font-size:.85rem;background:var(--pocket2);color:var(--domewhite);
  border:1px solid var(--hairline);border-radius:6px;padding:7px 9px}
.dials .stretch{flex:1}

/* calculator */
.calcbench{padding:16px;border-top:1px solid var(--hairline);background:var(--pocket2)}
.calcbench h3{font-size:.95rem;margin-bottom:10px;color:var(--domewhite)}
.calcbench .triangle{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.calcbench .knob label{display:block;font-size:.7rem;color:var(--graphite);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.calcbench .knob select,.calcbench .knob input{width:100%;font-family:var(--digits);
  background:var(--pocket);color:var(--domewhite);border:1px solid var(--hairline);
  border-radius:6px;padding:8px;font-size:.95rem}
.calcbench .answer{grid-column:1/-1;background:var(--pocket);border:1px solid var(--lcd-deep);
  border-radius:8px;padding:12px 14px;font-family:var(--digits);font-size:1.1rem;color:var(--lcd)}
.calcbench .answer small{display:block;font-family:var(--sans);font-size:.75rem;color:var(--graphite);margin-top:4px}

.calcbench .knob select[disabled]{opacity:.4;cursor:default}
.calcbench p a{color:var(--lcd)}

/* the notebook */
.notebook{padding:16px;border-top:1px solid var(--hairline)}
.notebook h3{font-size:.95rem;margin-bottom:4px;color:var(--domewhite)}
.nbhint{font-size:.74rem;color:var(--graphite);margin-top:8px}
.nbrow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.nbrow input{flex:1;min-width:180px;font-family:var(--digits);font-size:.85rem;
  background:var(--pocket2);color:var(--domewhite);border:1px solid var(--hairline);
  border-radius:6px;padding:8px}
.nbscroll{overflow-x:auto;margin-top:8px}
.notebook table{width:100%;border-collapse:collapse;font-size:.79rem;min-width:560px}
.notebook th{text-align:left;font-size:.66rem;color:var(--graphite);text-transform:uppercase;
  letter-spacing:.08em;padding:6px 10px 6px 0;border-bottom:1px solid var(--hairline)}
.notebook td{padding:7px 10px 7px 0;border-bottom:1px solid var(--hairline);color:#cfd1d5;vertical-align:top}
.notebook td:nth-child(3){font-family:var(--digits);color:var(--lcd);white-space:nowrap}
.notebook .nbkill{background:none;border:none;color:var(--graphite);cursor:pointer;font-size:.85rem;padding:2px 6px}
.notebook .nbkill:hover{color:#ff8a6b}

/* reciprocity table */
table.rctable{border-collapse:collapse;font-size:.84rem;width:100%}
table.rctable th{text-align:left;font-size:.66rem;color:var(--graphite);text-transform:uppercase;
  letter-spacing:.08em;padding:6px 14px 6px 0;border-bottom:1px solid var(--hairline)}
table.rctable td{padding:7px 14px 7px 0;border-bottom:1px solid var(--hairline);color:#cfd1d5}
table.rctable td:nth-child(n+2){font-family:var(--digits);color:var(--lcd)}

/* calibration strip */
.calstrip{padding:12px 16px;border-top:1px solid var(--hairline);font-size:.82rem;color:var(--graphite)}
.calstrip input[type=range]{width:min(280px,60%);vertical-align:middle;accent-color:var(--lcd)}
.calstrip b{color:var(--lcd)}

/* content */
.contactsheet{max-width:880px;margin:0 auto;padding:24px 20px 40px}
.contactsheet h2{font-size:1.4rem;margin:44px 0 4px}
.contactsheet .grain{color:var(--graphite);font-size:.86rem;margin-bottom:14px}
.contactsheet p{margin:12px 0;max-width:690px;color:#cfd1d5}
.contactsheet ol,.contactsheet ul{margin:12px 0 12px 22px;max-width:670px;color:#cfd1d5}
.contactsheet li{margin:8px 0}

.lightbox-note{background:var(--pocket);border:1px solid var(--hairline);border-left:4px solid var(--lcd);
  border-radius:8px;padding:18px 20px;margin:30px 0}
.lightbox-note .sig{color:var(--graphite);font-size:.82rem;margin-top:10px}

.fstoplist{list-style:none;margin-left:0!important}
.fstoplist li{padding-left:26px;position:relative}
.fstoplist li::before{content:"ƒ";position:absolute;left:4px;color:var(--lcd);font-style:italic}

.qa h3{font-size:1.02rem;margin:22px 0 6px;color:var(--domewhite)}
.qa p{margin-top:4px}

.negatives{display:grid;gap:12px;margin-top:16px}
.negatives a{display:block;background:var(--pocket);border:1px solid var(--hairline);border-radius:8px;
  padding:14px 16px;text-decoration:none;color:var(--domewhite)}
.negatives a:hover{border-color:var(--lcd)}
.negatives b{font-size:1rem}
.negatives span{display:block;font-size:.85rem;color:var(--graphite);margin-top:3px}
.negatives time{display:block;font-size:.68rem;color:var(--graphite);margin-top:8px;text-transform:uppercase;letter-spacing:.08em}

dl.rolllog{max-width:670px}
dl.rolllog dt{font-family:var(--digits);font-weight:700;margin-top:14px;color:var(--lcd)}
dl.rolllog dd{margin-left:0;color:#cfd1d5}

/* articles */
article.darkroom{max-width:720px;margin:0 auto;padding:30px 20px 50px}
article.darkroom h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin-bottom:6px}
article.darkroom .byline{color:var(--graphite);font-size:.82rem;margin-bottom:22px}
article.darkroom h2{font-size:1.2rem;margin:30px 0 8px}
article.darkroom p{margin:13px 0;color:#cfd1d5}
article.darkroom ol{margin:12px 0 12px 22px;color:#cfd1d5}
article.darkroom li{margin:9px 0}
article.darkroom figure{margin:26px 0;text-align:center}
article.darkroom figure svg{max-width:100%;height:auto}
article.darkroom figcaption{font-size:.78rem;color:var(--graphite);margin-top:8px}

/* footer */
footer.camerabag{border-top:1px solid var(--hairline);margin-top:30px;padding:22px 20px;
  max-width:880px;margin-left:auto;margin-right:auto}
footer.camerabag .links{display:flex;gap:16px;font-size:.85rem;margin-bottom:10px;flex-wrap:wrap}
footer.camerabag p{font-size:.76rem;color:var(--graphite)}

@media (max-width:560px){
  .strapbar .whisper{display:none}
  .lcdpanel .cell b{font-size:1.2rem}
}