:root{--bg:#15110d;--bg2:#1d1812;--panel:#241d15;--line:#3a2e22;--ink:#ece2d3;--mut:#9c8b76;
 --amber:#BA7517;--green:#639922;--keep:#639922;--cut:#B0463E;
 --hd:'Fraunces',Georgia,serif;--bd:'Newsreader',Georgia,serif;--mo:'JetBrains Mono',ui-monospace,monospace;
 --gbar-h:64px}   /* persistent global header height; JS overwrites with the measured #top.offsetHeight */
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--bd)}
a{color:var(--amber)}
header#top{position:fixed;top:0;left:0;right:0;z-index:48;background:linear-gradient(#1d1812,#15110d);border-bottom:1px solid var(--line);padding:7px 28px 8px;display:flex;flex-direction:column;gap:6px}
.crumb{font-family:var(--hd);font-size:16px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;line-height:1}
.crumb a,.crumb .cur{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border-radius:8px;text-decoration:none;white-space:nowrap}
.crumb a{cursor:pointer;color:var(--mut);transition:background .12s,color .12s}
.crumb a:hover{color:var(--ink);background:var(--panel)}
.crumb .cur{color:var(--ink);font-weight:500;background:#2a2015;border:1px solid var(--line)}   /* current level */
.crumb .sep{color:#5e4d3a;font-family:var(--mo);font-size:13px}                                  /* chevron */
.crumb .sub{font-family:var(--mo);font-size:10.5px;color:var(--mut);font-weight:400}
.brandrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{cursor:pointer;flex:none;line-height:0;text-decoration:none;border-radius:9px;transition:transform .12s,filter .12s}
.logo:hover{transform:translateY(-1px);filter:brightness(1.13)}      /* the home button — prominent + responsive */
.logo:active{transform:translateY(0)}
.logo svg{height:58px;width:auto;display:block}
/* under-wordmark tagline — calm, lowercase, on the charcoal ground; never out-shouts the wordmark */
.brand{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:0}
.brandtag{font-family:var(--mo);font-size:10px;letter-spacing:.18em;color:#766C5A;margin:0;line-height:1;white-space:nowrap;align-self:center;width:0;overflow:visible;display:flex;justify-content:center}  /* centered under the wordmark. The tagline is WIDER than the wordmark, so width:0 keeps it out of the brand column's width calc → the column shrink-wraps to the wordmark; align-self:center puts the 0-width box at the wordmark's centre, and display:flex+justify-content:center overflows the text symmetrically both sides of that centre (text-align:center would overflow right-only). Stays in flow (gap + header height unaffected); .brand's flex-start and the wordmark are untouched */
.ph svg{opacity:.92}
.strip{font-family:var(--mo);font-size:11px;color:var(--mut);margin-top:6px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
header#top .strip{min-height:0;background:none;border:1px solid var(--line);border-radius:8px;padding:6px 12px;margin:0;position:static;flex:0 0 auto;margin-left:auto}  /* hard-right stats box. flex:0 0 auto = natural width, no shrink — the inner #strip is a fixed 2-col grid (6 stats → 2×3), so the box is a stable ~300px block well within the wordmark height (header never grows taller). margin-left:auto keeps it right-anchored on whichever row it lands. When it can't fit beside brand+nav, .hrow1's flex-wrap drops it to its own row, still flush right. Overrides the film-rail .strip (:484) that also matches this element */
.strip .declink{color:inherit;text-decoration:none;cursor:pointer}
.strip .declink:hover,.strip .declink:focus-visible{color:#E2902A;text-decoration:underline;text-underline-offset:2px;outline:none}
.hrow1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}   /* anchored fluid row [brand][nav][stats]: brand hard-left, nav grows to fill+center, box hard-right (shrinks). flex-wrap is the safety valve — at wide it's one row (box inline); as it narrows the box reflows then, when it can't fit beside brand+nav, wraps to its own right-aligned row instead of clipping */
.hbtns{flex:1 0 auto;display:flex;align-items:center;gap:4px;flex-wrap:nowrap;justify-content:center}   /* grows to fill the middle and center the buttons; never shrinks/wraps (the box absorbs the squeeze) */
.hcrumb{display:flex;justify-content:flex-start}
.hcrumb .crumb{justify-content:flex-start;font-size:14px}
.hcrumb .crumb a,.hcrumb .crumb .cur{padding:2px 9px}
#strip{display:grid;grid-template-columns:auto auto;gap:2px 10px;justify-content:end;align-items:center}
#strip .stat{flex:0 0 auto;white-space:nowrap}
/* reflow JS-emitted stats (DOM: library,reviewed,cut,kept,remaining,reclaim) into row-major
   grid order — row1: library | remaining | reclaim, row2: reviewed | cut | kept */
#strip .stat:nth-child(1){order:1}  /* library */
#strip .stat:nth-child(5){order:2}  /* remaining */
#strip .stat:nth-child(6){order:3}  /* reclaim */
#strip .stat:nth-child(2){order:4}  /* reviewed */
#strip .stat:nth-child(3){order:5}  /* cut */
#strip .stat:nth-child(4){order:6}  /* kept */
@media (min-width:721px) and (max-width:1199px){
  /* fold zone: the box can't sit inline, so make it a full-width flat strip under the nav
     instead of the rigid right-hugging block that leaves dead space */
  header#top .strip{ flex:1 1 100%; width:100%; margin:0; }   /* claims its own full row */
  #strip{ display:flex; flex:1; flex-wrap:wrap; justify-content:space-between; gap:4px 16px; }
                                        /* flat spread row(s); display:flex overrides the
                                           wide-mode display:grid 2-col block. flex:1 makes
                                           #strip fill the full-width box (it's a flex ITEM of
                                           the display:flex .strip) so the stats truly spread
                                           edge-to-edge instead of left-hugging with dead space */
}
@media (max-width:720px){header#top{padding:10px 14px 12px}.hrow1{flex-direction:column;align-items:center;gap:9px}.hbtns{justify-content:center}
  header#top .hbtns{ flex-wrap:wrap; justify-content:center; width:100%; }
                                          /* re-enable wrap (override the desktop flex-wrap:nowrap that
                                             leaks in) + constrain to the column width, so all 8 nav
                                             buttons wrap to centered rows instead of running ~649px off
                                             the right edge. This is also the root cause of the brand
                                             mis-centering: once the nav no longer overflows, the row's
                                             width is the viewport, so .brand can center true (below). */
  /* smallest band: the box is in a stacked column, so kill the wide-mode right-push +
     2-col grid (too wide → clips off the right edge). Make it a flat, full-width, centered
     wrapping strip that fits the narrow column. */
  header#top .strip{ width:100%; margin:0; flex:0 0 auto; align-self:flex-start; }
                                          /* full width of the stacked column, no right-shove.
                                             align-self:flex-start overrides .hrow1's align-items:center
                                             so the box anchors to the column's left edge instead of being
                                             centered against the (nowrap) nav's horizontal overflow, which
                                             would otherwise drag it off the right edge at phone widths */
  #strip{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; }
                                          /* flat wrapping strip (display:flex kills the 2-col grid),
                                             centered, wraps to fit the narrow width — no clip */
  header#top .brand{ align-self:center; align-items:center; max-width:100%; }
                                          /* center the brand block in the column. Now that the nav
                                             wraps (above) instead of overflowing, the column's cross-size
                                             is the viewport width, so align-self:center lands the brand
                                             at the true centre (was flex-start, needed only to escape the
                                             old nav-overflow width). align-items:center stacks the
                                             wordmark centered over the (wider) tagline so both are fully
                                             visible and share a centre axis. */
  header#top .brandtag{ width:auto; display:block; }
                                          /* revert the desktop width:0 + flex-centre hack: at mobile
                                             the tagline (wider than the wordmark) takes its natural
                                             width so it's fully visible and defines the lockup width;
                                             .brand's align-items:center then centres the wordmark over
                                             it. (width:0 here would let the centred tagline overhang
                                             past the left edge and clip ~7px.) */
  header#top .logo svg{ max-width:100%; }   /* wordmark never wider than the column. NOT height:auto:
       this inline svg is sized by height:58/52px + width:auto with no intrinsic dims (viewBox only),
       so height:auto collapses it to 0x0. max-width:100% alone is an inert clip guard (the wordmark
       is ~97px, far under the column) that preserves the height-driven sizing. */
}
.dechead{font-family:var(--hd);font-size:20px;color:var(--ink);margin:16px 2px 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.dechead .deccount{font-family:var(--mo);font-size:12px;color:var(--mut)}
.decempty{font-family:var(--mo);font-size:13px;color:var(--mut);padding:30px 4px;line-height:1.5}
.strip b{color:var(--ink)} .strip .amber{color:var(--amber)} .strip .g{color:var(--green)} .strip .r{color:var(--cut)}
.bar{height:6px;background:#0c0a07;border-radius:3px;overflow:hidden;border:1px solid var(--line)}
.bar>i{display:block;height:100%;background:var(--amber)} .bar.done>i{background:var(--green)}
button{font-family:var(--mo);font-size:12px;background:#221b13;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:7px 10px;cursor:pointer}
button:hover{border-color:var(--amber)}
button.amber{background:var(--amber);color:#1a1207;border-color:var(--amber);font-weight:600}
button.green{background:var(--green);color:#04240f;border-color:var(--green);font-weight:600}
/* header action buttons — refined ghost pills matching the nav (radius/hover language) */
.strip button,.hbtns button{background:transparent;color:var(--mut);border:1px solid var(--line);border-radius:8px;padding:5px 7px;font-size:11px;transition:background .12s,color .12s,border-color .12s,transform .1s}
.strip button:hover,.hbtns button:hover{color:var(--ink);background:var(--panel);border-color:var(--amber)}
.strip button:active,.hbtns button:active{transform:translateY(1px)}
#jumpbtn{color:var(--amber);border-color:#5a3f1e}                                  /* the key nav action: jump to work */
#jumpbtn:hover{color:var(--amber);background:#2a2015;border-color:var(--amber)}
/* unified inline-SVG nav glyphs — strokes inherit the button's text color (currentColor:
   dim default → amber when active); the one #E2902A accent fill per icon is fixed. */
.hbtns button{display:inline-flex;align-items:center;gap:4px;line-height:1}
.navico{width:18px;height:18px;flex:none}
.hbtns button.navon{color:var(--amber);border-color:#5a3f1e}        /* active view: glyph + label recolor amber */
@media (prefers-reduced-motion:reduce){.hbtns button{transition:none}}
select{font-family:var(--mo);font-size:12px;background:#221b13;color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:6px 8px}
.spacer{flex:1}
main{padding:14px;max-width:1280px;margin:0 auto;padding-top:var(--gbar-h)}
.year{margin:18px 0 8px;font-family:var(--hd);font-size:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.year .yp{font-family:var(--mo);font-size:12px;color:var(--mut)}
/* ===== Overview redesign: per-year scrubbable carousels + swappable month tiles ===== */
/* quiet B/C treatment toggle */
.ttoggle{font-family:var(--mo);font-size:11px;color:var(--mut);display:flex;justify-content:flex-end;align-items:center;gap:3px;margin:0 2px 10px}
.ttoggle a{color:var(--mut);cursor:pointer;text-decoration:none;padding:2px 6px;border-radius:5px}
.ttoggle a:hover{color:var(--ink)}
.ttoggle a.on{color:var(--ink);background:var(--panel)}
/* per-year carousel row (user-driven: arrows + drag/swipe + arrow-keys; never auto-animates) */
.yrow{position:relative;margin-bottom:6px}
.yscroll{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:2px 0 8px;outline:none}
.yscroll::-webkit-scrollbar{display:none}
.yscroll>.ytile{scroll-snap-align:start}
.yarrow{position:absolute;top:0;bottom:10px;width:40px;z-index:5;display:none;align-items:center;justify-content:center;
  cursor:pointer;border:none;font-family:var(--hd);font-size:24px;color:var(--ink)}
.yarrow.show{display:flex}
.yprev{left:0;background:linear-gradient(to right,color-mix(in srgb,var(--bg) 85%,transparent),transparent)}
.ynext{right:0;background:linear-gradient(to left,color-mix(in srgb,var(--bg) 85%,transparent),transparent)}
.yarrow:hover{color:var(--amber)}
/* month tile — ONE block, two crisp treatments switched by a body class (no blur ever) */
.ytile{position:relative;flex:none;width:clamp(190px,22vw,272px);aspect-ratio:4/5;border-radius:11px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;transition:border-color .12s,transform .12s}
.ytile:hover{border-color:var(--amber);transform:translateY(-2px)}
.ytile.cur{border-color:var(--amber)}                                   /* the one safelight: current in-progress month */
.ytile .hero{position:absolute;inset:0;z-index:0}
.ytile .hero img{width:100%;height:100%;object-fit:cover;display:block}
/* photobook spread: two portrait pages hinged at a center spine (book gutter) */
.ytile .spread{position:absolute;left:0;right:0;top:0;height:56%;z-index:0;background:var(--panel);perspective:1100px}
.ytile .spread .pgL{position:absolute;left:0;top:0;bottom:0;width:calc(50% - 1px);overflow:hidden;background:#0a0805;z-index:0}     /* static left page — does NOT animate */
.ytile .spread .under{position:absolute;right:0;top:0;bottom:0;width:calc(50% - 1px);overflow:hidden;background:#0a0805;z-index:1} /* next-right, revealed beneath the leaf */
.ytile .spread .leaf{position:absolute;left:50%;top:0;bottom:0;width:50%;z-index:2;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(0deg);will-change:transform}  /* the single turning right leaf, hinged at the spine */
.ytile .spread .leaf .face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0a0805}
.ytile .spread .leaf .back{transform:rotateY(180deg)}                       /* BACK = next-left, readable when the leaf lands face-down on the left */
.ytile .spread .pgL img,.ytile .spread .under img,.ytile .spread .leaf .face img{width:100%;height:100%;object-fit:cover;display:block}
.ytile .spread .spine{position:absolute;left:calc(50% - 1px);top:0;bottom:0;width:2px;z-index:4;background:color-mix(in srgb,var(--bg) 40%,#000);box-shadow:0 0 7px 2px rgba(0,0,0,.55)}
.ytile .spread .pgL::after{content:"";position:absolute;top:0;bottom:0;right:0;width:16px;pointer-events:none;background:linear-gradient(to right,transparent,rgba(0,0,0,.4))}   /* gutter shadow */
.ytile .spread .under::after{content:"";position:absolute;top:0;bottom:0;left:0;width:16px;pointer-events:none;background:linear-gradient(to left,transparent,rgba(0,0,0,.4))}
.ytile .spread.single .spine,.ytile .spread.single .under,.ytile .spread.single .leaf{display:none}   /* 1 good frame -> one full-width page */
.ytile .spread.single .pgL{width:100%}
.ytile .spread.single .pgL::after{display:none}
.ytile .tscrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.ytile .tbody{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:11px}
.ytile .mn{font-family:var(--hd);font-size:18px;color:var(--ink);line-height:1.05}
.ytile.cur .mn{color:var(--amber)}
.ytile .mprose{font-family:var(--bd);font-style:italic;font-size:12px;line-height:1.34;color:var(--ink);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* Newsreader italic, 2-line clamp */
.ytile .mmeta{font-family:var(--mo);font-size:10px;letter-spacing:.03em;color:var(--mut);margin-top:5px}
.ytile.cur .mmeta .pct{color:var(--amber)}
/* treatment B (default): full-bleed hero + directional bottom scrim */
body.t-hero .ytile .spread{display:none}
body.t-hero .ytile .tscrim{background:linear-gradient(to bottom,
   transparent 0%,color-mix(in srgb,var(--bg) 10%,transparent) 36%,
   color-mix(in srgb,var(--bg) 70%,transparent) 68%,color-mix(in srgb,var(--bg) 95%,transparent) 100%)}
/* treatment C: crisp 2x2 mosaic up top + SOLID charcoal band below (text fully on ground) */
body.t-mosaic .ytile .hero{display:none}
body.t-mosaic .ytile .tscrim{display:none}
body.t-mosaic .ytile .tbody{top:56%;background:var(--bg);border-top:1px solid var(--line)}
/* discovery carousel as a 35mm FILM STRIP (presentation only; selection/cycling/marquee/click/reduced-motion unchanged) */
.carousel{position:relative;overflow:hidden;margin:6px 0 26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}   /* soft edge-fade L/R */
/* the track carries a warm film base + sprocket bands so perforations scroll with it and stay
   continuous across frames AND across the -50% loop seam (each 210px frame = exactly 7 perfs) */
.marquee{display:flex;gap:0;width:max-content;will-change:transform;animation:marq 120s linear infinite;
  background-color:color-mix(in srgb,var(--bg) 66%,var(--line));
  background-image:
    radial-gradient(ellipse 10px 5px at 15px 7px,color-mix(in srgb,var(--mut) 28%,var(--bg)) 60%,transparent 64%),
    radial-gradient(ellipse 10px 5px at 15px 7px,color-mix(in srgb,var(--mut) 28%,var(--bg)) 60%,transparent 64%);
  background-repeat:repeat-x,repeat-x;background-position:left top,left bottom;background-size:30px 14px,30px 14px}
.marquee:hover{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ctile{flex:none;display:flex;flex-direction:column;width:210px;height:175px;padding:14px 7px;cursor:pointer;background:transparent}
.ctile .cframe{position:relative;flex:0 0 131px;overflow:hidden;border-radius:2px;background:color-mix(in srgb,var(--bg) 66%,var(--line))}  /* window bg = film base, so portrait gutters read as film */
.ctile .cframe .bg{border-radius:2px}
.ctile .cframe .bg.port{width:auto;height:100%;left:50%;right:auto;transform:translateX(-50%);object-fit:contain;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line) 55%,transparent)}   /* portrait: true aspect, pillarboxed on film base, hairline edge */
.ctile .crebate{flex:1;display:flex;align-items:center;gap:7px;padding:0 1px;font-family:var(--mo);font-size:8px;letter-spacing:.06em;line-height:1;white-space:nowrap;overflow:hidden}
.ctile .cep{color:color-mix(in srgb,var(--mut) 80%,var(--bg))}            /* month — faint edge print */
.ctile .cnum{color:color-mix(in srgb,var(--mut) 52%,var(--bg))}          /* decorative frame-number tick */
.ctile .cstock{margin-left:auto;color:color-mix(in srgb,var(--mut) 36%,var(--bg))}  /* recurring film-stock mark, faintest */
.ctile:hover .cframe,.ctile:focus-within .cframe{box-shadow:0 0 0 2px var(--amber)}  /* the ONE safelight: loupe focus ring */
@media (prefers-reduced-motion:reduce){.marquee{animation:none}}
/* month view: each week's summary is a HEADER above its own row of day-tiles */
.wblock{margin:22px 0 4px}
.whead{border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:9px}
.wlabel{font-family:var(--mo);font-size:12px;color:var(--amber);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.wlabel .wc{color:var(--mut)}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
.dcell{background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px;cursor:pointer;transition:.1s}
.dcell:hover{border-color:var(--amber);transform:translateY(-1px)}
.dcell.untouched{opacity:.62} .dcell.complete{border-color:var(--green)}
.dcell .dn{font-family:var(--hd);font-size:16px}
.dcell .dc{font-family:var(--mo);font-size:10.5px;color:var(--mut);margin:5px 0 7px}.dcell .dc b{color:var(--ink)}
/* living contact-sheet card backdrops — iPhone-ish portrait tiles */
.mcell,.dcell{position:relative;overflow:hidden;padding:0;aspect-ratio:9/16}
.mcell .cardbody,.dcell .cardbody{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end}
.mcell .cardbody{padding:12px} .dcell .cardbody{padding:10px}
.bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease;pointer-events:none}
.bg.show{opacity:1}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top right,rgba(20,17,12,.92) 0%,rgba(20,17,12,.62) 45%,rgba(20,17,12,.15) 100%)}
@media (prefers-reduced-motion:reduce){.bg{transition:none}}
/* contact-sheet day cards: each week is a film strip on a film base, days are frames */
.csheet{background:linear-gradient(#241a10,#1b1308);border:1px solid #3a2c1a;border-radius:8px;padding:16px 14px 12px}
.csperf{display:flex;justify-content:space-between;align-items:center;gap:6px;height:7px;overflow:hidden}
.csperf i{flex:0 0 13px;height:7px;border-radius:2px;background:#0f0b06}
.csrow{display:flex;gap:10px;overflow-x:auto;padding:11px 1px;scrollbar-width:thin}
.dframe{flex:1 0 112px;min-width:112px;max-width:168px;cursor:pointer;border-radius:3px;transition:transform .1s}
.dframe:hover{transform:translateY(-2px)}
.dframe.untouched{opacity:.6}
.dwin{position:relative;aspect-ratio:4/5;border-radius:2px;overflow:hidden;background:#0f0b06;box-shadow:inset 0 0 0 1px rgba(233,228,214,.10)}
.dframe.complete .dwin{box-shadow:inset 0 0 0 1px rgba(99,153,34,.55)}
.dframe.amber{box-shadow:0 0 0 2px #ba7517}
.dreb{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px;padding:0 1px}
.dreb .dlab{font-family:var(--mo);font-size:11px;letter-spacing:.08em;color:#cbb48c}
.dframe.amber .dreb .dlab{color:#e2902a}
.dreb .dct{font-family:var(--mo);font-size:10px;color:#7d6f54}
.dnotch{height:2px;margin-top:5px;background:#4a3a22;border-radius:1px;overflow:hidden}
.dnotch i{display:block;height:100%;background:#8a6a3a}
.dframe.amber .dnotch i{background:#ba7517}
@media (prefers-reduced-motion:reduce){.dframe{transition:none}}
/* overview: month card = CLEAN photo tile, with the summary as a CAPTION below it on the charcoal ground (never over the image) */
.mitem{display:flex;flex-direction:column;gap:6px}
.mcell{aspect-ratio:4/5}                       /* shorter than the day tiles now that overview cards are wider */
.mcap{padding:0 3px 2px;min-height:42px}
.mcap .sum-prose.ov{font-size:12px;line-height:1.36;margin-top:0;color:var(--ink)}   /* Newsreader italic, clamped 2 lines (clamp from .sum-prose.ov) */
.mcap .msum{font-size:10px;line-height:1.32;margin-top:4px;color:var(--mut)}          /* JetBrains-Mono facts/venue strip, amber standout */
/* AI-polished period summaries */
.sum-prose{font-family:var(--bd);font-style:italic;font-size:13.5px;color:var(--ink);line-height:1.36}
.sum-facts{font-family:var(--mo);font-size:11px;color:var(--mut);margin-top:3px}
.sum-facts .amber,.msum .amber{color:var(--amber)}
.daysum{padding:8px 2px 6px;border-bottom:1px solid var(--line)}
.whead .wsum{display:block;margin-top:5px}                                  /* full prose, left-aligned, on charcoal — belongs to its week */
.whead .wsum .sum-prose{font-size:13.5px;color:var(--ink)}                  /* Newsreader italic (from .sum-prose) */
.whead .wsum .sum-facts{font-size:11px;margin-top:3px}                      /* JetBrains-Mono facts/venue strip */
.msum{font-family:var(--mo);font-size:9.5px;color:var(--mut);margin-top:5px;line-height:1.3}
.sum-prose.ov{font-size:10.5px;line-height:1.3;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.toolbar{position:sticky;top:var(--gbar-h);z-index:20;background:rgba(21,17,13,.92);backdrop-filter:blur(4px);padding:8px 0;display:flex;gap:7px;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
/* relocated temporal trail living in the Month/Day toolbar — compact, mirrors the header crumb;
   glass pill on the .cur node comes from the shared .crumb .cur rules (incl. html.loupe-glass) */
.toolbar .crumb{font-size:14px}
.toolbar .crumb a,.toolbar .crumb .cur{padding:2px 9px}
/* the two colored action buttons stay together and right-aligned even when the wide day trail
   forces the toolbar to wrap (margin-left:auto replaces the old spacer; works per wrapped line) */
.toolbar .tbactions{margin-left:auto;display:flex;gap:7px;align-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:8px 0}
.tile{position:relative;background:#0c0a07;border:2px solid #2a2218;border-radius:8px;overflow:hidden;cursor:pointer}
.tile.keep{border-color:var(--keep)} .tile.cut{border-color:var(--cut);opacity:.45}
.tile img{width:100%;height:150px;object-fit:contain;background:#000;display:block}
.tile .ph{height:150px;display:flex;align-items:center;justify-content:center;color:#6b5b46;font-family:var(--mo);font-size:10px;background:#100d09}
.tcap{font-family:var(--mo);font-size:10px;color:var(--mut);padding:4px 5px}
.badge2{position:absolute;font-family:var(--mo);font-size:9px;padding:1px 4px;border-radius:3px}
.rb{position:absolute;top:4px;left:4px;font-family:var(--mo);font-size:9px;font-weight:600;padding:1px 5px;border-radius:3px;color:#160f06}
.b-fp{top:24px;left:4px;background:#ffd479;color:#222}
.b-pip{top:4px;right:4px;background:#000b;font-weight:600;border:1px solid}
.b-live{bottom:4px;left:4px;background:#000b;color:var(--amber);border:1px solid var(--amber)}
#flive.on{background:var(--amber);color:#160f06;border-color:var(--amber)}
.tile.prot{box-shadow:inset 0 0 0 2px var(--amber)}
.chip{font-family:var(--mo);font-size:11px;padding:5px 9px;border:1px solid var(--line);border-radius:14px;cursor:pointer;color:var(--mut)}
.chip.on{border-color:var(--amber);color:var(--ink);background:#2a2015}
.candbar{display:flex;gap:7px;flex-wrap:wrap;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.drv{font-family:var(--mo);font-size:12.5px;padding:6px 9px;border-radius:6px;margin-bottom:8px;color:#160f06;font-weight:600;line-height:1.35}
#modetog.on{background:var(--amber);color:#1a1207;border-color:var(--amber);font-weight:600}
.b-play{bottom:4px;left:4px;background:#000a;color:#fff;border:1px solid #fff6}
.b-st{bottom:4px;right:4px} .st-keep{background:var(--keep);color:#04240f} .st-cut{background:var(--cut);color:#fff}
.focus{position:fixed;inset:0;z-index:50;background:#0b0907;display:none;flex-direction:column}
.focus.on{display:flex}
.fhead{font-family:var(--mo);font-size:12px;color:var(--mut);padding:8px 12px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line)}
.stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#000;position:relative;touch-action:pan-y}
.stage img,.stage video{max-width:100%;max-height:100%;object-fit:contain}
/* focus body: photo (brightest) at left, the vertical signal panel at right */
.fbody{flex:1;display:flex;min-height:0;position:relative}
.meta{flex:0 0 336px;width:336px;background:var(--bg2);border-left:1px solid var(--line);overflow:auto;padding:12px 14px}
.focus.nosig .meta{display:none}
/* relocated focus controls (committed, class-independent): viewing cluster top-right of the stage, nav top-left.
   Anchored to .fbody (never regenerated) — not #fstage, whose innerHTML is rebuilt every frame. */
#fviewbar{position:absolute;top:10px;right:calc(336px + 12px);z-index:6;display:flex;gap:8px;pointer-events:none}
#fnav{position:absolute;top:50%;left:12px;transform:translateY(-50%);z-index:6;display:flex;gap:8px;pointer-events:none}
#fnext{position:absolute;top:50%;right:calc(336px + 12px);transform:translateY(-50%);z-index:6;display:flex;gap:8px;pointer-events:none}
#fviewbar button,#fnav button,#fnext button{pointer-events:auto}
@media (max-width:680px){#fviewbar{right:12px}#fnav{top:10px;transform:none}#fnext{top:48px;right:12px;transform:none}}  /* narrow: .meta drops below the stage, so hug the right gutter */
.sigtog{display:none}
/* signal panel — EXIF-style mono readout, hairline-grouped */
.sig{margin:0 0 13px}
.sig-h{font-family:var(--mo);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);border-bottom:1px solid var(--line);padding-bottom:3px;margin-bottom:7px}
.srow{display:grid;grid-template-columns:auto 1fr;font-family:var(--mo);font-size:11.5px;gap:2px 12px;align-items:baseline}
.srow .k{color:var(--mut)} .srow .v{color:var(--ink);text-align:right;word-break:break-word}
.na{color:var(--mut);font-style:italic}
/* score = value + library-relative percentile bar (amber, tints at extremes) */
.score{margin:9px 0}
.score .top{display:flex;justify-content:space-between;font-family:var(--mo);font-size:11px}
.score .top .nm{color:var(--mut)} .score .top .vl{color:var(--ink)} .score .top .pc{background:none;border:0;border-radius:0;padding:0;box-shadow:none;cursor:default;font-family:var(--mo);font-size:11px;color:rgba(233,228,214,.55);margin-left:6px}  /* quiet: reset the bled-through trip-postcard .pc (:301) fill/pill */
.pbar{height:6px;background:#241d15;border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:4px}
.pbar i{display:block;height:100%;background:var(--amber);transition:width .35s ease}
/* content labels = chips with confidence; the screenshot/doc cull-tell stands apart */
.sdtag{display:inline-block;font-family:var(--mo);font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px;background:#21343a;color:#a7d7df;border:1px solid #7fb0b8;margin-bottom:7px}
.lchip{display:inline-block;font-family:var(--mo);font-size:11px;padding:2px 8px;margin:0 4px 4px 0;border:1px solid var(--line);border-radius:12px;color:var(--ink);white-space:nowrap}
.lchip b{color:var(--mut);font-weight:400;margin-left:5px}
.lgrp{font-family:var(--mo);font-size:10.5px;color:var(--mut);margin:5px 0 2px}
/* people chips; protected people get the amber ring */
.pchip{display:inline-block;font-family:var(--mo);font-size:11px;padding:3px 9px;margin:0 5px 5px 0;border-radius:13px;background:#241d15;border:1px solid var(--line);color:var(--ink)}
.pchip.prot{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber);color:#f0d9b3}
.pchip.prot::before{content:'●';color:var(--amber);margin-right:5px;font-size:8px;vertical-align:1px}
.ctx{font-family:var(--hd);font-size:16px;color:var(--ink);margin-bottom:3px}
.ctx .wd{color:var(--amber)}
.ctx .pl{font-family:var(--bd);font-size:14px;color:var(--mut);display:block;margin-top:2px}
.exif{font-family:var(--mo);font-size:11.5px;color:var(--ink);display:grid;grid-template-columns:auto 1fr;gap:2px 12px;margin-top:8px}
.exif .k{color:var(--mut)}
.hints{font-family:var(--mo);font-size:11px;color:var(--mut);margin-top:6px}
.gps{font-family:var(--mo);font-size:11.5px;margin-top:8px} .gps .coord{color:var(--mut)}
.exp{margin-top:8px} .exp summary{font-family:var(--mo);font-size:11px;color:var(--amber);cursor:pointer}
.acts{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#15110d}
.acts button{flex:1;padding:14px 8px;font-size:14px}
.bcut{background:#3a1d1a;border-color:var(--cut);color:#ff9a8f}
.bkeep{background:#15301f;border-color:var(--keep);color:#9be8b6}
.fr{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--hd);font-size:64px;opacity:0;transition:.12s}
.fr.show{opacity:.92} .fr.cut{color:var(--cut)} .fr.keep{color:var(--green)} .fr.skip{color:var(--mut)}
#toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:#2a2015;border:1px solid var(--amber);color:var(--ink);font-family:var(--mo);font-size:12px;padding:8px 14px;border-radius:8px;z-index:70;display:none}
@media (max-width:680px){main{padding:8px;padding-top:var(--gbar-h)}.logo svg{height:52px}.crumb{font-size:14px}.dgrid{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}
 .tile img,.tile .ph{height:34vw}.toolbar{top:var(--gbar-h)}.acts button{padding:16px 6px;font-size:15px}
 /* narrow: panel collapses BELOW the frame, toggleable from the header */
 .fbody{flex-direction:column}
 .meta{flex:none;width:auto;border-left:none;border-top:1px solid var(--line);max-height:44vh}
 .sigtog{display:inline-block}}
@media (max-width:380px){.grid{grid-template-columns:1fr}.tile img,.tile .ph{height:60vw}}
@media (prefers-reduced-motion:reduce){.pbar i{transition:none}.fr{transition:none}}
/* ---- Places (spatial peer to Overview) ---- */
#placesview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:45;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#placesview.on{display:flex}
.plbar{display:flex;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);font-family:var(--mo);font-size:12px;color:var(--mut)}
.plback{font-family:var(--mo);font-size:12px}
.pltitle{font-family:var(--hd);font-size:17px;color:var(--ink)}
.plcov{color:var(--mut)}
.pltoggle{display:flex;gap:6px;align-items:center;color:var(--ink);cursor:pointer}
.pltabs{display:flex;gap:6px}
.plmain{flex:1;display:flex;min-height:0}
/* --- postcard gallery (primary surface): cream prints on the charcoal bench --- */
#plgallery{flex:1;overflow:auto;padding:22px;display:grid;gap:22px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));background:var(--bg)}
.pc{position:relative;background:#efe7d6;border-radius:3px;padding:11px 11px 0;cursor:pointer;
  box-shadow:0 2px 5px #0007,0 0 0 1px #0004;transition:transform .14s ease,box-shadow .14s ease;outline:none}
.pc:hover,.pc:focus-visible{transform:translateY(-3px);box-shadow:0 10px 22px #0009,0 0 0 1px #0006}
.pc:focus-visible{box-shadow:0 10px 22px #0009,0 0 0 2px var(--amber)}
.pc .stripe{position:absolute;top:0;left:0;right:0;height:5px;border-radius:3px 3px 0 0;
  background:repeating-linear-gradient(-45deg,#B0463E 0 7px,transparent 7px 14px,#2e5a86 14px 21px,transparent 21px 28px)}
.pc .hero{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#cabfa9;border:1px solid #0002}
.pc .well{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;background:#cabfa9;color:#6b5f4a;font-family:var(--mo);font-size:11px;border:1px solid #0002}
.pc .pm{position:absolute;top:20px;right:18px;width:62px;height:62px;border:2px solid #9c2f28;border-radius:50%;
  color:#9c2f28;transform:rotate(-13deg);font-family:var(--mo);text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.82;background:#efe7d6aa}
.pc .pm b{font-size:15px;font-weight:700;letter-spacing:.5px}.pc .pm i{font-size:9px;font-style:normal}
.pc .cap{padding:9px 2px 4px}
.pc .city{font-family:var(--hd);font-size:21px;color:#241d15;line-height:1.05}
.pc .reg{font-family:var(--bd);font-size:13px;color:#5e533f;margin-top:1px}
.pc .dr{font-family:var(--mo);font-size:11px;color:#7a6c50;margin-top:5px}
.pc .foot{border-top:1px solid #cabfa9;margin-top:8px;padding:6px 2px 9px;font-family:var(--mo);font-size:10.5px;color:#6b5f4a;
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pc .rev{position:absolute;left:11px;bottom:64px;font-family:var(--mo);font-size:12px;font-weight:600;color:#160f06;
  background:var(--amber);border-radius:4px;padding:4px 9px;opacity:0;transform:translateY(4px);transition:.14s;pointer-events:none}
.pc:hover .rev,.pc:focus-visible .rev{opacity:1;transform:translateY(0)}
.plcl{background:rgba(186,117,23,.86);color:#160f06;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--mo);font-weight:600;border:2px solid #f0d9b3;box-shadow:0 0 0 4px rgba(186,117,23,.18)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--panel);color:var(--ink)}
.leaflet-bar a{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
.leaflet-container{background:transparent}   /* the warm field comes from #lmap's gradient, not tiles */
@media (prefers-reduced-motion:reduce){.pc,.pc .rev{transition:none}.pc:hover,.pc:focus-visible{transform:none}}
@media (max-width:680px){#plgallery{padding:12px;gap:14px;grid-template-columns:1fr}}
.plmaplink{font-family:var(--mo);font-size:12px;color:var(--amber);background:transparent;
  border:1px solid #5a3f1e;border-radius:8px;padding:6px 12px;cursor:pointer;text-decoration:none;transition:.12s}
.plmaplink:hover{background:#2a2015;border-color:var(--amber);color:var(--lit,#E2902A)}
.pc .foot .vmap{color:#8a5a1e;cursor:pointer;text-decoration:none;font-weight:600}
.pc .foot .vmap:hover{color:#9c2f28;text-decoration:underline}
/* ===================== Map: the dark light-table place browser ===================== */
#mapview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:45;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#mapview.on{display:flex}
.mapbar{display:flex;gap:12px;align-items:center;padding:9px 14px;border-bottom:1px solid var(--line);
  font-family:var(--mo);font-size:12px;color:var(--mut)}
.mapmain{flex:1;position:relative;min-height:0}
#lmap{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 30%,#1b1610 0%,#14110C 70%)}  /* warm "light-table" field (no tiles) */
/* Layers panel — the chrome card, top-left, over the map */
.mappanel{position:absolute;top:14px;left:14px;z-index:600;width:228px;
  background:rgba(29,24,18,.93);backdrop-filter:blur(7px);border:1px solid var(--line);border-radius:12px;
  padding:13px 14px;box-shadow:0 12px 34px -10px #000c}
.mpsec{margin:0 0 13px}.mpsec:last-child{margin:0}
.mphead{font-family:var(--mo);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  margin:0 0 9px;display:flex;align-items:baseline;gap:8px}
.mphint{margin-left:auto;color:var(--mut);letter-spacing:.02em;text-transform:none;font-size:11px}
.mprow{display:flex;align-items:center;gap:9px;padding:5px 0;font-family:var(--bd);font-size:14px;color:var(--ink);cursor:pointer}
.mprow input{accent-color:var(--amber);width:15px;height:15px;flex:none;cursor:pointer}
.mprow input:disabled{cursor:default}
.mprow .mpname{flex:1}
.mprow i{font-family:var(--mo);font-style:normal;font-size:10px;color:var(--faint,#766c5a)}
/* time scrubber — dual handle over the library span */
.scrub{position:relative;height:30px;margin-top:2px}
.scrubtrack{position:absolute;top:13px;left:3px;right:3px;height:4px;border-radius:2px;background:#0c0a07;border:1px solid var(--line)}
.scrubfill{position:absolute;top:0;bottom:0;background:var(--amber);border-radius:2px;opacity:.85}
.scrub input[type=range]{position:absolute;top:6px;left:0;width:100%;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;height:18px}
.scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:var(--lit,#E2902A);border:2px solid #1a1207;cursor:grab;box-shadow:0 0 7px 1px rgba(186,117,23,.6)}
.scrub input[type=range]::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;
  background:var(--lit,#E2902A);border:2px solid #1a1207;cursor:grab}
.scrub input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--ink);outline-offset:2px}
.mpleg{display:flex;align-items:center;gap:9px;font-family:var(--mo);font-size:11px;color:var(--mut);padding:3px 0}
.lgdot{width:14px;height:14px;border-radius:50%;flex:none;background:rgba(186,117,23,.86);border:2px solid #f0d9b3;box-shadow:0 0 0 3px rgba(186,117,23,.18)}
.lgzone{width:15px;height:15px;border-radius:50%;flex:none;border:1.5px dashed var(--amber);background:rgba(186,117,23,.1)}
.lgtrip{width:16px;height:0;flex:none;border-top:2px dashed #cdb389}
/* un-geotagged honesty note, bottom-right (the card takes the left) */
.mapnote{position:absolute;right:14px;bottom:14px;z-index:600;max-width:280px;
  background:rgba(20,17,12,.88);border:1px solid var(--line);border-radius:9px;padding:8px 12px;
  font-family:var(--mo);font-size:11px;color:var(--mut);line-height:1.5}
.mapnote b{color:var(--ink)}.mapnote a{color:var(--amber);cursor:pointer}
/* selected-place preview card — floats lower-left on desktop, slides up on appear */
.mapcard{position:absolute;left:14px;bottom:14px;z-index:650;width:286px;display:none;
  background:#efe7d6;color:#241d15;border-radius:6px;padding:15px 16px 16px;box-shadow:0 18px 44px -12px #000e,0 0 0 1px #0006;
  opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease}
.mapcard.on{display:block}
.mapcard.show{opacity:1;transform:none}
.mapcard .mcclose{position:absolute;top:8px;right:9px;width:22px;height:22px;padding:0;border-radius:50%;
  background:#0000;border:1px solid #00000022;color:#6b5f4a;font-size:12px;cursor:pointer;line-height:1}
.mapcard .mcclose:hover{background:#0000000d;border-color:#0003}
.mceyebrow{font-family:var(--mo);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#9c6512}
.mctitle{font-family:var(--hd);font-weight:500;font-size:23px;line-height:1.04;color:#241d15;padding-right:20px;margin-top:5px}
.mcsub{font-family:var(--mo);font-size:11px;color:#6b5f4a;margin-top:5px}
.mcthumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0 13px}
.mcthumbs img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:#cabfa9;display:block}
.mapcard .mcopen{width:100%;font-family:var(--mo);font-size:12px;padding:10px;border-radius:6px;
  background:var(--amber);color:#160f06;border:1px solid var(--amber);font-weight:600;cursor:pointer}
.mapcard .mcopen:hover{background:var(--lit,#E2902A)}
/* cluster marker: warm GLOWING dot (soft amber halo → transparent + warm core) + Fraunces paper label */
.mcl{position:relative;display:flex;align-items:center;justify-content:center;border-radius:50%;
  font-family:var(--mo);font-weight:600;color:#1a1207;cursor:pointer;transition:transform .12s;
  background:radial-gradient(circle at 50% 42%,#f3bd5f 0%,#E0962B 42%,rgba(200,128,28,.55) 66%,rgba(186,117,23,0) 100%);
  box-shadow:0 0 18px 7px rgba(224,150,43,.42)}
.mcl:hover{transform:scale(1.08)}
.mcl.sel{color:#1a1207;                                                    /* the one selection-state exception: white */
  background:radial-gradient(circle at 50% 42%,#ffffff 0%,#f3ede1 40%,rgba(255,255,255,.55) 66%,rgba(255,255,255,0) 100%);
  box-shadow:0 0 0 2px #fff,0 0 20px 7px rgba(255,255,255,.5)}
.mcl-lbl{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:5px;white-space:nowrap;
  font-family:var(--hd);font-weight:500;font-size:12px;color:#241d15;background:#efe7d6;border:1px solid #00000022;border-radius:2px;
  padding:1px 7px;box-shadow:0 2px 6px #0007;pointer-events:none}
.mpt{cursor:pointer}                                                       /* lone-frame marker */
.mptglow{width:14px;height:14px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,#f3bd5f 0%,#E0962B 50%,rgba(186,117,23,0) 100%);
  box-shadow:0 0 11px 4px rgba(224,150,43,.4)}
.mptglow.sel{background:radial-gradient(circle at 50% 42%,#fff 0%,#f3ede1 50%,rgba(255,255,255,0) 100%);box-shadow:0 0 0 2px #fff,0 0 12px 4px rgba(255,255,255,.5)}
/* Leaflet zoom control, dark to match (base overrides already set below) */
.leaflet-control-zoom{border:1px solid var(--line)!important;box-shadow:0 6px 18px -6px #000a!important;margin:14px!important}
.leaflet-control-attribution{background:rgba(20,17,12,.7)!important;color:var(--faint,#766c5a)!important;font-family:var(--mo);font-size:9px}
.leaflet-control-attribution a{color:var(--mut)!important}
@media (prefers-reduced-motion:reduce){.mcl,.mcl:hover,.plmaplink{transition:none;transform:none}
  .mapcard{transition:none;transform:none}}
@media (max-width:680px){.mappanel{width:200px;top:10px;left:10px;padding:11px}.mapnote{display:none}}
@media (max-width:620px){.mapcard{width:auto;left:8px;right:8px;bottom:8px}.mapcard.show{transform:none}
  .mapcard{transform:translateY(20px)} .mcthumbs{grid-template-columns:repeat(6,1fr)}}
/* ===================== The Cutting Room — explained cut overview ===================== */
#cuttingview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:45;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#cuttingview.on{display:flex}
.crscroll{flex:1;overflow:auto;background:radial-gradient(120% 70% at 50% -8%,#1d1810,var(--bg) 60%)}
.crwrap{max-width:1180px;margin:0 auto;padding:30px 24px 60px}
.crhead{max-width:74ch;margin:0 0 30px}
.creyebrow{font-family:var(--mo);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;align-items:center;gap:9px;margin:0 0 16px}
.creyebrow::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 2px rgba(186,117,23,.5)}
.crh1{font-family:var(--hd);font-weight:500;font-size:clamp(30px,5vw,46px);line-height:1.04;letter-spacing:-.01em;margin:0 0 16px;color:var(--ink)}
.crh1 em{font-style:italic;color:var(--keep,#639922)}                  /* reassurance, in keep-green */
.crintro{font-family:var(--bd);font-size:17px;line-height:1.6;color:var(--mut);margin:0}
.crstats{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--mo);font-size:13px;color:var(--mut)}
.crstats .v{color:var(--ink);font-weight:500}.crstats .amber{color:var(--amber)}.crstats .g{color:var(--keep,#639922)}
.crstats .st{white-space:nowrap}
/* category cards */
.crgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px}
.crcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:17px 18px 16px;transition:border-color .15s}
.crcard:hover{border-color:#4a3a24}
.crcard.amber{border-color:#5a3f1e;background:linear-gradient(#27201400,#2a201580),var(--panel);box-shadow:0 0 0 1px rgba(186,117,23,.25),0 14px 34px -16px rgba(186,117,23,.4)}
.crtop{display:flex;align-items:center;gap:10px}
.crbadge{font-family:var(--mo);font-size:12px;font-weight:600;color:var(--mut);background:#1a140d;border:1px solid var(--line);
  border-radius:7px;padding:4px 9px;letter-spacing:.04em;flex:none}
.crcard.amber .crbadge{color:#1a1207;background:var(--amber);border-color:var(--amber)}
.crtitle{font-family:var(--hd);font-size:21px;color:var(--ink);line-height:1.05;flex:1;min-width:0}
.crchip{font-family:var(--mo);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:11px;
  border:1px solid var(--line);color:var(--mut);white-space:nowrap;flex:none}
.crchip.high{color:#9be8b6;border-color:#2f5a3a;background:#15301f}      /* High confidence */
.crchip.review{color:#f0d09a;border-color:#5a3f1e;background:#2a2015}     /* Review */
.crcount{display:flex;align-items:baseline;gap:9px;margin:13px 0 9px;font-family:var(--mo)}
.crcount b{font-family:var(--hd);font-weight:500;font-size:30px;color:var(--ink);line-height:1}
.crcard.amber .crcount b{color:var(--lit,#E2902A)}
.crcount .rc{font-size:12px;color:var(--mut)}
.crexplain{font-family:var(--bd);font-style:italic;font-size:14.5px;line-height:1.5;color:var(--dim,#A79E8C);margin:0 0 13px}
/* nomination slip — the mono evidence block */
.crslip{font-family:var(--mo);font-size:11px;line-height:1.5;color:var(--mut);background:#100d09;border:1px solid var(--line);
  border-radius:8px;padding:10px 11px;margin:0 0 13px}
.crslip .k{color:var(--faint,#766c5a);letter-spacing:.1em;font-size:9px;text-transform:uppercase;display:block;margin-bottom:2px}
.crslip .r{color:var(--ink);display:block;margin-bottom:8px}.crslip .r:last-child{margin-bottom:0}
/* contact-sheet preview strip */
.crsheet{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0 0 14px}
.crsheet img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:2px;background:#0c0a07;display:block}
.crrev{margin-top:auto;font-family:var(--mo);font-size:12.5px;color:var(--mut);background:transparent;border:1px solid var(--line);
  border-radius:8px;padding:10px;text-align:center;cursor:pointer;text-decoration:none;transition:.13s}
.crrev:hover{color:var(--ink);background:#221b13;border-color:var(--amber)}
.crcard.amber .crrev{color:#caa56a;border-color:#5a3f1e}.crcard.amber .crrev:hover{color:var(--lit,#E2902A);background:#2a2015;border-color:var(--amber)}
@media (prefers-reduced-motion:reduce){.crcard,.crrev{transition:none}}
@media (max-width:680px){.crwrap{padding:20px 14px 44px}.crgrid{grid-template-columns:1fr;gap:14px}.crstats{gap:6px 16px}}
/* ---- Trip overview: travel-wrapped contact sheet ---- */
#tripsheet{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:46;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#tripsheet.on{display:flex}
.tsbar{display:flex;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.tsbar .plback{font-family:var(--mo);font-size:12px}
#tsreview{font-family:var(--mo);font-size:12px}
/* masthead = the cream travel wrapper */
.tsmast{background:#efe7d6;color:#241d15;margin:14px;border-radius:4px;padding:16px 18px;position:relative;
  box-shadow:0 2px 6px #0007,0 0 0 1px #0004}
.tsmast .pm{position:absolute;top:14px;right:18px;width:64px;height:64px;border:2px solid #9c2f28;border-radius:50%;
  color:#9c2f28;transform:rotate(-12deg);font-family:var(--mo);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.82}
.tsmast .pm b{font-size:16px;font-weight:700}.tsmast .pm i{font-size:9px;font-style:normal}
.tsmast .city{font-family:var(--hd);font-size:30px;line-height:1.02}
.tsmast .reg{font-family:var(--bd);font-size:15px;color:#5e533f;margin-top:1px}
.tsmast .exif{font-family:var(--mo);font-size:11.5px;color:#6b5f4a;margin-top:11px;border-top:1px solid #cabfa9;padding-top:8px;display:flex;flex-wrap:wrap;gap:4px 14px}
.tsmast .exif b{color:#241d15;font-weight:600}
.tsmast .prog b.k{color:#3f7d4f}.tsmast .prog b.c{color:#a23a31}
/* the contact sheet bench */
.tssheet{flex:1;overflow:auto;padding:6px 14px 26px;background:var(--bg)}
.strip{position:relative;margin:14px 0;background:#161210;border:1px solid #2a2118;border-radius:3px;
  padding:14px 0;display:flex;align-items:center;min-height:122px}
.strip .rail{position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,transparent 0 7px,#000 7px 9px,transparent 9px 18px);
  /* sprocket holes */}
.strip .rail.t{top:2px}.strip .rail.b{bottom:2px}
.strip .rail::before{content:'';position:absolute;left:0;right:0;top:0;height:9px;
  background:repeating-linear-gradient(90deg,#0000 0 4px,#3a2e22 4px 8px,#0000 8px 18px);opacity:.5}
.strip .edge{position:absolute;top:1px;left:9px;font-family:var(--mo);font-size:8px;letter-spacing:.5px;color:var(--amber);opacity:.7}
.strip .frames{display:flex;gap:6px;padding:0 10px;width:100%;justify-content:flex-start}
.fcell{position:relative;flex:0 0 auto;cursor:pointer;background:#000;border-radius:2px;overflow:hidden;line-height:0}
.fcell img{display:block;width:100%;height:100%;object-fit:cover}
.fcell .fn{position:absolute;bottom:1px;right:3px;font-family:var(--mo);font-size:8px;color:#ffdca6;text-shadow:0 0 3px #000;line-height:1}
.fcell.sel{box-shadow:inset 0 0 0 2px var(--amber)}
.gmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.gmark.keep::before{content:'';width:76%;height:84%;border:3px solid #6ad08e;border-radius:50%;transform:rotate(-7deg);opacity:.92;box-shadow:0 0 4px #6ad08e77}
.gmark.cut::before{content:'✕';color:#ef6a60;font-family:var(--hd);font-size:34px;font-weight:600;opacity:.95;text-shadow:0 0 5px #ef6a6066}
/* the loupe */
#tloupe{position:fixed;width:168px;height:168px;border-radius:50%;border:3px solid var(--amber);
  box-shadow:0 0 0 1px #000,0 0 22px 6px rgba(186,117,23,.35),inset 0 0 18px #000a;
  background-repeat:no-repeat;pointer-events:none;z-index:60;display:none}
#tloupechip{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mo);font-size:10.5px;color:var(--ink);background:#15110dcc;border:1px solid var(--amber);border-radius:10px;padding:2px 8px}
@media (prefers-reduced-motion:reduce){#tloupe{box-shadow:0 0 0 1px #000,0 0 10px 3px rgba(186,117,23,.3),inset 0 0 18px #000a}}
@media (max-width:680px){.tsmast{margin:8px}.tssheet{padding:4px 8px 20px}#tloupe{display:none!important}}
/* ---- Settings + Residences ---- */
#settingsview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:47;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#settingsview.on{display:flex}
.setbar{display:flex;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--line)}
.setmain{flex:1;display:flex;min-height:0}
.setnav{width:208px;flex:none;border-right:1px solid var(--line);background:var(--bg2);padding:10px 0;display:flex;flex-direction:column}
.setnav-i{font-family:var(--bd);font-size:15px;color:var(--mut);padding:10px 18px;cursor:pointer;border-left:3px solid transparent}
.setnav-i.on{color:var(--ink);border-left-color:var(--amber);background:#241d15}
.setnav-i.dis{opacity:.45;cursor:default;display:flex;justify-content:space-between;align-items:center}
.setnav-i.dis i{font-family:var(--mo);font-size:9px;font-style:normal;border:1px solid var(--line);border-radius:8px;padding:0 5px;color:var(--mut)}
.setcontent{flex:1;overflow:auto;padding:24px 28px}
.seth{font-family:var(--hd);font-size:24px;color:var(--ink)}
.setsub{font-family:var(--bd);font-size:14px;color:var(--mut);margin:4px 0 18px}
/* Nudity-screening settings section — muted; keeps the view's single amber on "Add residence" */
.nsfwset{font-family:var(--mo);font-size:13px;color:var(--mut);max-width:640px;display:flex;flex-direction:column;gap:11px}
.nsfwtoggle{display:flex;align-items:center;gap:9px;color:var(--ink);cursor:pointer}
.nsfwtoggle input{accent-color:var(--mut);width:16px;height:16px;cursor:pointer}
.nsfwsetsub{font-size:11.5px;color:var(--faint);line-height:1.45}
.nsfwsetsub b{color:var(--ink);font-weight:500}
.nsfwthrrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nsfwthrrow input[type=range]{accent-color:var(--mut);flex:1;min-width:200px;max-width:440px;cursor:pointer}
.nsfwsetlbl{color:var(--mut)} .nsfwsetlbl b{color:var(--ink)}
.nsfwreviewlink{color:var(--ink);text-decoration:none;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:7px 11px;align-self:flex-start;background:var(--panel)}
.nsfwreviewlink:hover{border-color:#5a3f1e;color:var(--ink)}
/* era timeline */
.tl{position:relative;height:58px;background:var(--bg2);border:1px solid var(--line);border-radius:5px;margin:0 0 22px;overflow:hidden}
.tl .seg{position:absolute;top:10px;height:24px;border-radius:3px;display:flex;align-items:center;padding:0 8px;
  font-family:var(--mo);font-size:10.5px;color:#160f06;font-weight:600;white-space:nowrap;overflow:hidden}
.tl .yr{position:absolute;bottom:3px;font-family:var(--mo);font-size:9px;color:var(--mut)}
.tl .gap{position:absolute;top:10px;height:24px;background:repeating-linear-gradient(45deg,#0000 0 5px,#2a2118 5px 10px);border:1px dashed var(--line);border-radius:3px}
/* residence cards */
.rescards{display:flex;flex-direction:column;gap:12px;max-width:760px}
.rescard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:13px 15px;display:flex;align-items:flex-start;gap:13px}
.rescard .sw{width:14px;height:14px;border-radius:3px;flex:none;margin-top:4px}
.rescard .body{flex:1}
.rescard .rl{font-family:var(--hd);font-size:18px;color:var(--ink)}
.rescard .rd{font-family:var(--mo);font-size:11.5px;color:var(--mut);margin-top:2px}
.rescard .chips{margin-top:8px;display:flex;flex-wrap:wrap;gap:5px}
.rchip{font-family:var(--mo);font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:11px;color:var(--ink);background:#241d15}
.rescard .acts{display:flex;gap:8px}.rescard .acts button{font-family:var(--mo);font-size:11px;padding:4px 9px}
.addres{margin-top:16px}
/* edit modal */
#resmodal{position:fixed;inset:0;z-index:55;background:#0009;display:none;align-items:center;justify-content:center}
#resmodal.on{display:flex}
.resform{background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:20px 22px;width:min(540px,92vw);max-height:88vh;overflow:auto}
.resform h3{font-family:var(--hd);font-size:20px;color:var(--ink);margin:0 0 14px}
.resform label{display:block;font-family:var(--mo);font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.06em;margin:13px 0 5px}
.resform input[type=text],.resform input[type=month],.resform input[type=number]{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);font-family:var(--bd);font-size:14px;padding:7px 9px;border-radius:4px;box-sizing:border-box}
.resrow{display:flex;gap:14px}.resrow>div{flex:1}
.resform .present{display:flex;gap:6px;align-items:center;font-family:var(--mo);font-size:12px;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:8px}
.atype{position:relative}
.achips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px}
.achip{font-family:var(--mo);font-size:11px;padding:2px 6px 2px 8px;border:1px solid var(--amber);border-radius:11px;color:#f0d9b3;background:#2a2015;display:flex;gap:5px;align-items:center}
.achip b{cursor:pointer;color:var(--mut);font-weight:400}
.adrop{position:absolute;left:0;right:0;top:100%;background:var(--panel);border:1px solid var(--line);border-radius:4px;max-height:200px;overflow:auto;z-index:5;display:none}
.adrop.on{display:block}
.adrop div{font-family:var(--mo);font-size:12px;padding:6px 9px;cursor:pointer;color:var(--ink);display:flex;justify-content:space-between}
.adrop div:hover{background:#241d15}.adrop div .ct{color:var(--mut)}
.resfoot{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
@media (max-width:680px){.setnav{width:130px}.resrow{flex-direction:column;gap:0}}
/* ---- Vault (lock/safe identity; distinct from keep/cut) ---- */
.bvault{background:#1c2630;border-color:#5e7790;color:#a8c6dc}
#fvault.on{background:#3a2f12;border-color:var(--amber);color:#f0d9b3}
#vaultview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:47;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#vaultview.on{display:flex}
#vaultgrid{flex:1;overflow:auto;padding:16px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;align-content:start}
#vaultgrid .tile .unvault{position:absolute;top:5px;right:5px;font-family:var(--mo);font-size:10px;padding:3px 7px;background:#000b;border:1px solid #5e7790;color:#a8c6dc;border-radius:4px;cursor:pointer}
.vempty{color:var(--mut);font-family:var(--bd);font-size:15px;padding:40px;max-width:540px;line-height:1.5}
.vempty b{color:var(--amber)}
/* ---- NSFW owner review console (calibration surface; one amber accent = the slider) ---- */
#nsfwview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:47;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#nsfwview.on{display:flex}
.nsfwctl{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nsfwctl input[type=range]{accent-color:var(--amber);flex:1;min-width:200px;max-width:440px;cursor:pointer}
.nsfwthrlbl{font-family:var(--mo);font-size:12px;color:var(--mut)}
.nsfwthrlbl b{color:var(--ink)}
.nsfwsummary{font-family:var(--mo);font-size:12px;color:var(--mut)}
#nsfwgrid{padding:10px}
#nsfwgrid .tile .nsfwclear{position:absolute;top:5px;right:5px;font-family:var(--mo);font-size:10px;padding:3px 7px;background:#000b;border:1px solid #5e7790;color:#a8c6dc;border-radius:4px;cursor:pointer}
#nsfwgrid .tile .nsfwscore{position:absolute;top:5px;left:5px;font-family:var(--mo);font-size:10px;padding:3px 7px;background:#000b;border:1px solid var(--line);color:var(--ink);border-radius:4px}
/* Closed Set reveal-gate: the grid region blurs (unreadable + non-interactive) behind a centered
   explainer until the owner clicks Reveal. Back-bar + threshold control stay clear above the gate. */
#nsfwstage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
#nsfwstage>#nsfwgrid{flex:1;min-height:0;overflow:auto}
#nsfwgrid.blurred{filter:blur(24px);pointer-events:none;user-select:none;-webkit-user-select:none}
#nsfwgate{position:absolute;inset:0;z-index:5;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(11,9,7,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
#nsfwgate.on{display:flex}
.nsfwgatecard{max-width:460px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px 26px;box-shadow:0 18px 48px rgba(0,0,0,.55)}
.nsfwgatetitle{font-family:var(--hd);font-size:22px;color:var(--ink);margin-bottom:10px}
.nsfwgatebody{font-family:var(--bd);font-size:14px;line-height:1.55;color:var(--mut);margin:0 0 18px}
.nsfwgatebtns{display:flex;gap:10px;align-items:center}
.nsfwgatereveal{background:var(--amber);color:#1a1207;border:1px solid var(--amber);font-weight:600;font-family:var(--mo);font-size:13px;padding:9px 16px;border-radius:8px;cursor:pointer}
.nsfwgatereveal:hover{background:var(--lit,#E2902A);border-color:var(--lit,#E2902A)}
.nsfwgateback{background:transparent;color:var(--mut);border:1px solid var(--line);font-family:var(--mo);font-size:13px;padding:9px 16px;border-radius:8px;cursor:pointer}
.nsfwgateback:hover{color:var(--ink);border-color:var(--mut)}
/* ===================== People (Faces, phase 1) ===================== */
#peopleview{position:fixed;top:var(--gbar-h);left:0;right:0;bottom:0;z-index:45;background:var(--bg);display:none;flex-direction:column;overflow-y:auto}
#peopleview.on{display:flex}
#peoplebody{flex:1;overflow:auto;padding:16px}
.pplgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;align-content:start;padding:4px 2px}
.pcard{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 6px;border:1px solid #2a2218;border-radius:9px;background:#16120c;transition:border-color .15s,transform .1s}
.pcard:hover{border-color:var(--amber);transform:translateY(-1px)}
.pcard .pava{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#0a0805;border:1px solid #3a3024}
.pcard .pava.none{display:flex;align-items:center;justify-content:center;color:#5e5240;font-family:var(--mo);font-size:24px}
.pcard .pname{font-family:var(--bd);font-size:14px;color:#e6e2d5;text-align:center;line-height:1.2}
.pcard .pmeta{font-family:var(--mo);font-size:10.5px;color:var(--mut)}
.pcard .pmeta b{color:var(--amber)}
#persondetail{display:none;margin-top:8px}#persondetail.on{display:block}
.pdsection{margin:14px 0 6px}
.pdhdr{font-family:var(--bd);font-size:14px;color:#e6e2d5;margin:8px 2px 10px;display:flex;align-items:baseline;gap:9px}
.pdhdr i{font-family:var(--mo);font-size:10.5px;color:var(--mut);font-style:normal}
.facegrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;align-content:start;padding:2px}
.fcell{position:relative;border-radius:7px;overflow:hidden;background:#0a0805;border:1px solid #2a2218;aspect-ratio:1}
.fcell img{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.fcell .fsc{position:absolute;left:0;right:0;bottom:0;font-family:var(--mo);font-size:10px;padding:2px 4px;background:linear-gradient(transparent,#000c);color:#dfe9c8;text-align:center}
.fcell .fsc.hi{color:#9fe0a0}.fcell .fsc.lo{color:#e0a06f}
.pdcap{color:var(--mut);font-family:var(--bd);font-size:14px;padding:18px 6px;max-width:560px;line-height:1.5}
.pdsugctl{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 2px 12px;font-family:var(--mo);font-size:12px;color:var(--mut)}
.pdsugctl input{background:#0a0805;border:1px solid #3a3024;color:#e6e2d5;border-radius:4px;padding:3px 5px;font-family:var(--mo)}
.pdsugctl button{font-family:var(--mo);font-size:11.5px;padding:4px 9px;background:#1a1510;border:1px solid #3a3024;color:#cfc7b6;border-radius:5px;cursor:pointer}
.pdsugctl button:hover{border-color:var(--amber);color:#f0d9b3}
.pdsugctl button.sugbulk{background:#24320f;border-color:#5a7a2a;color:#cfe0a0}
.pdsugctl button.sugbulk:hover{background:#2e3f14;border-color:#7fae3a}
.fcell .facts{position:absolute;top:0;right:0;display:flex;gap:2px;padding:3px;opacity:0;transition:opacity .12s}
.fcell:hover .facts{opacity:1}
.fcell .facts button{width:24px;height:24px;border-radius:5px;border:1px solid #0008;font-size:13px;line-height:1;cursor:pointer;padding:0}
.fcell .facts .fy{background:#2f7d32cc;color:#eaffea}
.fcell .facts .fn{background:#a23b3bcc;color:#ffeaea}
.fcell.confirmed{outline:2px solid var(--amber);outline-offset:-2px}
.fcell.confirmed .fsc{color:#f0d9b3}

/* ============================================================
   LOUPE · LIQUID GLASS + WARM LIGHT TABLE — CULLING APP
   ------------------------------------------------------------
   A MATERIAL-ONLY layer. No markup, structure, copy, or color
   tokens change — only the material of the chrome + working
   surfaces. Everything is gated behind `html.loupe-glass`.

   APPLY:   add class "loupe-glass" to the <html> element, and
            load this file AFTER the host stylesheet.
   REVERT:  remove the "loupe-glass" class (this layer goes
            dormant instantly — zero effect, nothing to undo).
   INTENSITY (optional): set data-glass="subtle" | "full" on
            <html>; default (unset) = balanced.
   ============================================================ */

/* Token fallbacks — so this layer is self-contained even if the host
   stylesheet names its tokens differently. Values are the canonical
   Darkroom palette; safe to delete any the host already defines. */
html.loupe-glass{
  --amber:#BA7517; --lit:#E2902A; --ink:#E9E4D6; --dim:#A79E8C;
  --faint:#766C5A; --keep:#639922; --cut:#B0463E;
  --surface-hover:#2A2015; --line:#3A3024;
  --mo:'JetBrains Mono',ui-monospace,monospace;
}

/* ============================================================
   LIQUID GLASS CHROME LAYER
   Floating chrome (header, toolbars, sidebars, focus panel, bars,
   badges) is rematerialised as translucent refracting glass while
   the photograph stays the brightest thing on screen. Colors,
   structure, and the one-amber-per-view rule are unchanged — only
   the MATERIAL of the chrome changes. Three live intensity presets
   are selectable via html[data-glass]. Default = balanced.
   ============================================================ */
html.loupe-glass{
  /* balanced preset (default) */
  --g-blur:18px; --g-sat:1.45;
  --g-bg:rgba(28,22,15,0.56);
  --g-bg-2:rgba(34,27,18,0.62);
  --g-bg-deep:rgba(18,14,9,0.66);
  --g-border:rgba(247,240,224,0.13);
  --g-rim:inset 0 1px 0 rgba(251,246,234,0.16), inset 0 -1px 0 rgba(0,0,0,0.34);
  --g-shadow:0 12px 34px rgba(0,0,0,0.5);
  --g-sheen:linear-gradient(180deg,rgba(251,246,234,0.07) 0%,rgba(251,246,234,0.015) 16%,transparent 60%);
  /* amber as a glowing liquid-glass element */
  --g-amber-bg:rgba(186,117,23,0.30);
  --g-amber-border:rgba(232,165,70,0.62);
  --g-amber-rim:inset 0 1px 0 rgba(255,224,166,0.45), inset 0 -1px 0 rgba(120,70,8,0.5);
  --g-amber-glow:0 0 0 1px rgba(232,165,70,0.32), 0 0 22px rgba(226,144,42,0.42), 0 8px 24px rgba(0,0,0,0.45);
}

html.loupe-glass[data-glass="subtle"]{
  --g-blur:9px; --g-sat:1.2;
  --g-bg:rgba(26,21,15,0.74);
  --g-bg-2:rgba(32,26,18,0.78);
  --g-bg-deep:rgba(18,14,9,0.8);
  --g-border:rgba(247,240,224,0.09);
  --g-rim:inset 0 1px 0 rgba(251,246,234,0.10), inset 0 -1px 0 rgba(0,0,0,0.26);
  --g-shadow:0 8px 22px rgba(0,0,0,0.44);
  --g-sheen:linear-gradient(180deg,rgba(251,246,234,0.035) 0%,transparent 50%);
  --g-amber-bg:rgba(186,117,23,0.22);
  --g-amber-border:rgba(232,165,70,0.5);
  --g-amber-rim:inset 0 1px 0 rgba(255,224,166,0.28);
  --g-amber-glow:0 0 0 1px rgba(232,165,70,0.26), 0 0 12px rgba(226,144,42,0.26), 0 6px 18px rgba(0,0,0,0.4);
}

html.loupe-glass[data-glass="full"]{
  --g-blur:32px; --g-sat:1.8;
  --g-bg:rgba(30,24,16,0.40);
  --g-bg-2:rgba(38,30,20,0.46);
  --g-bg-deep:rgba(18,14,9,0.5);
  --g-border:rgba(247,240,224,0.20);
  --g-rim:inset 0 1.5px 0 rgba(251,246,234,0.26), inset 0 0 0 1px rgba(251,246,234,0.05), inset 0 -1px 0 rgba(0,0,0,0.4);
  --g-shadow:0 18px 48px rgba(0,0,0,0.58);
  --g-sheen:linear-gradient(180deg,rgba(251,246,234,0.12) 0%,rgba(251,246,234,0.03) 22%,transparent 55%,rgba(0,0,0,0.05) 100%);
  --g-amber-bg:rgba(186,117,23,0.34);
  --g-amber-border:rgba(232,165,70,0.78);
  --g-amber-rim:inset 0 1.5px 0 rgba(255,228,176,0.6), inset 0 -1px 0 rgba(120,70,8,0.55);
  --g-amber-glow:0 0 0 1px rgba(232,165,70,0.4), 0 0 34px rgba(226,144,42,0.55), 0 10px 30px rgba(0,0,0,0.5);
}


/* reusable glass surface mixin via a custom class hook + direct overrides */
html.loupe-glass .gl{
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border:1px solid var(--g-border);
  box-shadow:var(--g-rim),var(--g-shadow);
}


/* ---------- header ---------- */
html.loupe-glass header#top{
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-bottom:1px solid var(--g-border);
  box-shadow:var(--g-rim),0 8px 28px rgba(0,0,0,0.42);
  position:fixed;   /* must match the base header#top rule; this more-specific glass rule otherwise re-asserts sticky */
}

html.loupe-glass header#top::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--g-sheen)}

html.loupe-glass header#top>*{position:relative}


/* nav buttons → glass pills; active = glowing amber glass */
html.loupe-glass .navbtn{
  background:var(--g-bg-2);
  -webkit-backdrop-filter:blur(calc(var(--g-blur) * .7)) saturate(var(--g-sat));
  backdrop-filter:blur(calc(var(--g-blur) * .7)) saturate(var(--g-sat));
  border:1px solid var(--g-border);
  border-radius:999px;
  box-shadow:var(--g-rim);
}

html.loupe-glass .navbtn:hover{background:var(--surface-hover);border-color:var(--g-amber-border);color:var(--ink)}

html.loupe-glass .navbtn.navon{
  color:#ffdca6;
  background:var(--g-amber-bg);
  border:1px solid var(--g-amber-border);
  box-shadow:var(--g-amber-rim),var(--g-amber-glow);
}


/* breadcrumb current = glass lozenge */
html.loupe-glass .crumb .cur{
  background:var(--g-bg-2);
  -webkit-backdrop-filter:blur(10px) saturate(var(--g-sat));
  backdrop-filter:blur(10px) saturate(var(--g-sat));
  border:1px solid var(--g-border);
  border-radius:999px;
  box-shadow:var(--g-rim);
}

html.loupe-glass .crumb a:hover{background:var(--g-bg-2)}


/* ---------- shared toolbar ---------- */
html.loupe-glass .tb,
html.loupe-glass .tbsel,
html.loupe-glass .chip{
  background:var(--g-bg-2);
  -webkit-backdrop-filter:blur(calc(var(--g-blur) * .7)) saturate(var(--g-sat));
  backdrop-filter:blur(calc(var(--g-blur) * .7)) saturate(var(--g-sat));
  border:1px solid var(--g-border);
  border-radius:999px;
  box-shadow:var(--g-rim);
}

html.loupe-glass .tb:hover,
html.loupe-glass .chip:hover{border-color:var(--g-amber-border)}

html.loupe-glass .tb.amber{
  color:#ffdca6;
  background:var(--g-amber-bg);
  border:1px solid var(--g-amber-border);
  box-shadow:var(--g-amber-rim),var(--g-amber-glow);
}

html.loupe-glass .tb.green{
  color:#bdf3cf;
  background:rgba(99,153,34,0.24);
  border:1px solid rgba(124,181,52,0.6);
  box-shadow:inset 0 1px 0 rgba(190,240,170,0.4),0 0 18px rgba(99,153,34,0.32),0 8px 22px rgba(0,0,0,0.4);
}


/* ---------- focus panel ---------- */
html.loupe-glass .focus{background:rgba(8,7,5,0.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

html.loupe-glass .fhead{
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-bottom:1px solid var(--g-border);
  box-shadow:var(--g-rim);
}

html.loupe-glass .fhead button{background:var(--g-bg-2);border:1px solid var(--g-border);border-radius:999px;box-shadow:var(--g-rim)}

html.loupe-glass .fhead button:hover{border-color:var(--g-amber-border)}

html.loupe-glass .meta{
  position:relative;
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-left:1px solid var(--g-border);
  box-shadow:var(--g-rim);
}

html.loupe-glass .meta::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--g-sheen)}

html.loupe-glass .meta>*{position:relative}

html.loupe-glass .acts{
  background:var(--g-bg-deep);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-top:1px solid var(--g-border);
  box-shadow:var(--g-rim);
}

html.loupe-glass .acts button{background:var(--g-bg-2);border:1px solid var(--g-border);border-radius:12px;box-shadow:var(--g-rim)}

html.loupe-glass .acts button:hover{border-color:var(--g-amber-border)}

html.loupe-glass .bcut{background:rgba(176,70,62,0.26);border:1px solid rgba(214,110,100,0.62);color:#ff9a8f;box-shadow:inset 0 1px 0 rgba(255,180,170,0.35),0 0 16px rgba(176,70,62,0.3)}

html.loupe-glass .bkeep{background:rgba(99,153,34,0.26);border:1px solid rgba(124,181,52,0.62);color:#9be8b6;box-shadow:inset 0 1px 0 rgba(190,240,170,0.4),0 0 16px rgba(99,153,34,0.3)}

html.loupe-glass .pctbox{background:var(--g-bg-deep);border:1px solid var(--g-border);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}


/* ---------- overlay bars + side panels (cutting/map/trips/people/settings) ---------- */
html.loupe-glass .mapbar,
html.loupe-glass .plbar,
html.loupe-glass .setbar,
html.loupe-glass .setbar.top{
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-bottom:1px solid var(--g-border);
  box-shadow:var(--g-rim);
}

html.loupe-glass .mappanel,
html.loupe-glass .setnav{
  background:var(--g-bg);
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border-left:1px solid var(--g-border);
  box-shadow:var(--g-rim);
}

html.loupe-glass .setnav{border-left:none;border-right:1px solid var(--g-border)}

html.loupe-glass .plback{
  background:var(--g-bg-2);
  -webkit-backdrop-filter:blur(10px) saturate(var(--g-sat));
  backdrop-filter:blur(10px) saturate(var(--g-sat));
  border:1px solid var(--g-border);border-radius:999px;box-shadow:var(--g-rim);
}

html.loupe-glass .plback:hover{border-color:var(--g-amber-border)}

html.loupe-glass .plmaplink{
  background:var(--g-amber-bg);border:1px solid var(--g-amber-border);border-radius:999px;
  box-shadow:var(--g-amber-rim),var(--g-amber-glow);color:#ffdca6;
}

html.loupe-glass .setnav-i.on{
  background:var(--g-amber-bg);border-left:2px solid var(--g-amber-border);border-radius:8px;
  box-shadow:var(--g-amber-rim),0 0 16px rgba(226,144,42,0.3);color:#ffdca6;
}

html.loupe-glass .resbtn,
html.loupe-glass .pdsugctl button{
  background:var(--g-bg-2);
  -webkit-backdrop-filter:blur(8px) saturate(var(--g-sat));
  backdrop-filter:blur(8px) saturate(var(--g-sat));
  border:1px solid var(--g-border);border-radius:999px;box-shadow:var(--g-rim);
}

html.loupe-glass .resbtn:hover,
html.loupe-glass .pdsugctl button:hover{border-color:var(--g-amber-border)}


/* primary amber CTAs → solid glowing amber glass */
html.loupe-glass .resadd,
html.loupe-glass .mcopen,
html.loupe-glass .tb.amber{position:relative}

html.loupe-glass .resadd,
html.loupe-glass .mcopen{
  background:var(--g-amber-bg);color:#ffdca6;
  border:1px solid var(--g-amber-border);
  -webkit-backdrop-filter:blur(10px) saturate(1.5);
  backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:var(--g-amber-rim),var(--g-amber-glow);
}

html.loupe-glass .resadd:hover,
html.loupe-glass .mcopen:hover{background:rgba(226,144,42,0.4)}


/* ---------- badges → frosted chips ---------- */
html.loupe-glass .b-pip{
  background:var(--g-bg-deep);
  -webkit-backdrop-filter:blur(7px) saturate(var(--g-sat));
  backdrop-filter:blur(7px) saturate(var(--g-sat));
  box-shadow:var(--g-rim);
}

html.loupe-glass .b-live{
  background:var(--g-amber-bg);
  -webkit-backdrop-filter:blur(7px) saturate(var(--g-sat));
  backdrop-filter:blur(7px) saturate(var(--g-sat));
  border:1px solid var(--g-amber-border);
  box-shadow:var(--g-amber-rim),0 0 14px rgba(226,144,42,0.32);
  color:#ffdca6;
}

html.loupe-glass .crbadge{
  background:var(--g-bg-deep);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid var(--g-border);box-shadow:var(--g-rim);
}

html.loupe-glass .crchip{
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  border:1px solid var(--g-border);box-shadow:var(--g-rim);
}


/* ============================================================
   LIGHT TABLE — the working surface (Day grid + Focus stage)
   The surface itself becomes a luminous warm frosted panel; frames
   sit on it as backlit slides; the glass apparatus (toolbars, meta
   panel, decision buttons) rests on top. Warm, in-palette only.
   Scoped to .grid/.tile (Day) and .focus .stage (Focus) so Overview,
   Month/Week, and the overlays stay grounded in charcoal.
   ============================================================ */

/* the table slab */
html.loupe-glass .grid{
  background:linear-gradient(180deg,#f8efda 0%,#efe2c7 52%,#e4d6b8 100%);
  border:1px solid rgba(255,250,240,0.5);
  border-radius:16px;
  padding:18px;
  gap:14px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.7),inset 0 0 0 1px rgba(255,250,238,0.32),inset 0 -34px 70px rgba(120,100,66,0.1),0 30px 70px rgba(0,0,0,0.5);
}

/* frames become backlit slides — thin cream mount, photo stays the hero */
html.loupe-glass .tile{
  background:#fbf6ea;
  border:1px solid rgba(40,30,16,0.16);
  border-radius:4px;
  padding:5px 5px 0;
  box-shadow:0 9px 20px rgba(40,28,12,0.28),0 1px 0 rgba(255,255,255,0.7);
  overflow:visible;
}

html.loupe-glass .tile img{border-radius:2px;height:140px}

html.loupe-glass .tile:hover{border-color:var(--amber);box-shadow:0 12px 26px rgba(40,28,12,0.34),0 0 0 1px var(--amber)}

html.loupe-glass .tile.keep{border-color:var(--keep);box-shadow:0 9px 20px rgba(40,28,12,0.28),0 0 0 1px var(--keep)}

html.loupe-glass .tile.cut{opacity:1;border-color:rgba(176,70,62,0.55)}

html.loupe-glass .tile.cut img{filter:grayscale(0.55) brightness(0.74)}

html.loupe-glass .tcap{color:#5e533f}

/* keep the dark-chip badges legible as instruments resting on bright slides */
html.loupe-glass .b-pip{background:rgba(20,15,8,0.82)}


/* focus stage = a lit table; the photo is a mounted slide on it */
html.loupe-glass .focus{background:radial-gradient(120% 90% at 50% 0%,#161009 0%,#0c0906 60%,#0b0805 100%)}

html.loupe-glass .stage{
  background:radial-gradient(70% 76% at 50% 44%,#e8d9ba 0%,#d6c49f 58%,#c0ad87 100%);
}

html.loupe-glass .stage img{
  border:11px solid #fdfbf4;
  border-radius:3px;
  background:#fdfbf4;
  box-shadow:0 32px 72px rgba(0,0,0,0.62),0 0 0 1px rgba(40,30,16,0.26);
}


/* ---------- intensity switcher (floating, the app's lone control chrome) ---------- */






/* ============================================================================
   Focus controls — glass pills, vault identity, active states, relocated overlays
   Gated additions/overrides (appended after the base layer so they win on order).
   ============================================================================ */

/* A1 — true pills for the decision bar (override the layer's 12px) */
html.loupe-glass .acts button{border-radius:999px}

/* A2 — vault identity: a quiet cool lock/private glass, distinct from the neutral
   skip glass. NOT amber, NOT keep-green / cut-red. */
html.loupe-glass #fvault,
html.loupe-glass .bvault{
  background:rgba(44,60,76,0.30);
  border:1px solid rgba(126,156,182,0.52);
  color:#bcd6e8;
  box-shadow:inset 0 1px 0 rgba(190,214,232,0.30),0 0 14px rgba(44,60,76,0.34);
}
html.loupe-glass #fvault:hover,
html.loupe-glass .bvault:hover{border-color:rgba(150,182,208,0.7)}

/* A3 — active states (override the base ID rules: specificity must beat #flive.on etc.) */
/* the Focus view's single GLOWING AMBER GLASS accent */
html.loupe-glass #flive.on{
  background:var(--g-amber-bg);
  border:1px solid var(--g-amber-border);
  box-shadow:var(--g-amber-rim),var(--g-amber-glow);
  color:#ffdca6;
}
/* engaged vault → brighter cool glass, still glass-aware (no solid fill, no amber) */
html.loupe-glass #fvault.on{
  background:rgba(58,78,98,0.42);
  border:1px solid rgba(150,182,208,0.74);
  box-shadow:inset 0 1px 0 rgba(200,222,240,0.4),0 0 18px rgba(58,78,98,0.42);
  color:#dcecf6;
}

/* B5 — relocated overlay buttons mirror the glass-pill look (class-on = glass,
   class-off = plain). Resting #flive / #ffull stay NEUTRAL glass; #flive.on amber
   from A3 still wins (id+class beats this id+element rule). */
html.loupe-glass #fviewbar button,
html.loupe-glass #fnav button,
html.loupe-glass #fnext button{
  background:var(--g-bg-2);
  border:1px solid var(--g-border);
  border-radius:999px;
  box-shadow:var(--g-rim);
}
html.loupe-glass #fviewbar button:hover,
html.loupe-glass #fnav button:hover,
html.loupe-glass #fnext button:hover{border-color:var(--g-amber-border)}