/* ============================================================================ site.css -- The Popcorn Isn't Real, site-wide styles (Track A). Consumes the design tokens in site-tokens.css (load order: fonts -> site-tokens.css -> site.css). No vendor CSS underneath (A-6): Bootstrap, jQuery and the Twitter widget are gone. ============================================================================ */ /* ============================================================================ A-2 CHROME -- the investigator's office. Materials only (site-tokens.css): void room, wood desk, cork, paper, ink, yarn accent. Texture lives INSIDE elements (per-element grain layers), never as viewport-sized blend/filter overlays -- scroll-safe by construction. ============================================================================ */ /* --- the room ------------------------------------------------------------ */ body.office{margin:0; min-height:100vh; font-family:var(--font-news); font-size:18px; line-height:1.55; color:var(--paper); background-color:var(--void-2); /* the TV somewhere above the fold throws its glow down the wall (was a warm candle-brown; now the artwork's blue -- see the token block) */ background-image:radial-gradient(120% 700px at 50% 0, var(--tv-2) 0%, var(--tv-3) 55%, rgba(4,6,15,0) 100%); background-repeat:no-repeat;} .office a{color:inherit} .office :focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px} .office ::selection{background:var(--yarn); color:var(--paper)} /* one shared paper-grain layer, used by every paper surface (same recipe as the board's .clipping): small, cheap, per-element */ .paper-grain{position:absolute; inset:0; background:var(--grain); background-size:150px; opacity:.38; mix-blend-mode:multiply; pointer-events:none} /* --- nameplate masthead (newspaper front page) ----------------------------- */ .masthead{max-width:1080px; margin:28px auto 0; padding:0 16px} .masthead-paper{position:relative; background:var(--paper); color:var(--ink); padding:20px 28px 0; border-top:4px solid var(--ink); /* last term: the TV's rim light bleeding around the page it's behind */ box-shadow:0 1px 1px rgba(0,0,0,.3), 0 18px 40px -12px rgba(0,0,0,.65), 0 0 110px -12px rgba(46,100,216,.4);} .masthead-paper::after{content:""; position:absolute; left:0; right:0; top:5px; border-top:1.5px solid var(--ink)} /* thick/thin double rule */ .masthead-paper > *{position:relative} /* the show seal: the cover art taped up beside the wordmark. The ONE place the artwork itself appears on the page -- the room's blue light does the rest. ABSOLUTE on purpose (learned the hard way): flex-centering seal+title shifted the wordmark ~75px off center. Floating the seal keeps the title typeset dead center; the constant puts the seal's edge just left of the 676px-wide wordmark (half=338 + gap 26 + seal 130 = 494), and the max() stops it at the corner on narrower windows. Taller than the title band, it crosses the rules above (tape) and the divider below (accepted: it's taped over the printed page). */ .masthead-brand{position:relative} .masthead-seal{position:absolute; top:50%; left:max(12px, calc(50% - 494px)); display:block; padding:6px; background:#f6f1e4; z-index:3; transform:translateY(-50%) rotate(-2.4deg); /* z-index: taped OVER the printed rules, not under them */ box-shadow:0 1px 1px rgba(0,0,0,.3), 0 12px 22px -8px rgba(0,0,0,.5);} .masthead-seal::before{content:""; position:absolute; top:-10px; left:50%; width:72px; height:22px; transform:translateX(-50%) rotate(2deg); z-index:2; background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(228,224,205,.35)); box-shadow:0 1px 3px rgba(0,0,0,.25);} .masthead-seal img{display:block; width:118px; height:118px} @media (max-width:1060px){.masthead-seal{display:none}} /* below this the seal would crowd the centered wordmark */ .nameplate{margin:10px 0 2px; text-align:center; font-family:var(--font-head); font-weight:700; font-size:clamp(38px,7vw,64px); line-height:.98; text-transform:uppercase; letter-spacing:.01em} .nameplate a{color:inherit; text-decoration:none} .tagline{margin:2px 0 14px; text-align:center; font-family:var(--font-type); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)} .dateline-row{display:flex; flex-wrap:wrap; gap:4px 22px; justify-content:center; margin:0; padding:7px 4px; border-top:1.5px solid var(--ink); font-family:var(--font-type); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)} /* --- evidence tabs + typewriter search (under the masthead rule) ----------- */ .deskline{display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 10px; padding:0 12px} .tabs{display:flex; flex-wrap:wrap; gap:6px} .tabs a{display:inline-block; padding:10px 20px 8px; background:linear-gradient(#d5c28c,#c6b076); color:var(--ink); font-family:var(--font-type); font-size:12px; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; border-radius:0 0 7px 7px; box-shadow:0 8px 12px -6px rgba(0,0,0,.55), 0 -3px 4px -3px rgba(0,0,0,.3) inset;} .tabs a:hover{background:linear-gradient(#e2d2a2,#d5c28c)} .tabs a[aria-current="page"]{background:linear-gradient(#ece3cf,#e0d4b4); box-shadow:0 8px 12px -6px rgba(0,0,0,.55)} .findline{margin-left:auto; display:flex; align-items:center; gap:8px; background:linear-gradient(#d5c28c,#c6b076); padding:8px 14px 9px; border-radius:0 0 7px 7px; box-shadow:0 8px 12px -6px rgba(0,0,0,.55), 0 -3px 4px -3px rgba(0,0,0,.3) inset;} .findline input{border:0; border-bottom:2px solid var(--ink); border-radius:0; background:transparent; -webkit-appearance:none; font-family:var(--font-type); font-size:13px; color:var(--ink); padding:2px; width:min(220px,52vw)} .findline input::placeholder{color:var(--ink-soft); opacity:1} .findline button{border:0; background:var(--ink); color:var(--paper); font-family:var(--font-type); font-size:11px; letter-spacing:.15em; text-transform:uppercase; padding:6px 12px 5px; cursor:pointer} .findline button:hover{background:#3a3026} /* --- main column ----------------------------------------------------------- */ .case-room{max-width:1080px; margin:0 auto; padding:8px 16px 0} .section-head{margin:46px 0 18px; font-family:var(--font-head); font-weight:500; font-size:20px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); display:flex; align-items:center; gap:14px} .section-head::after{content:""; flex:1; border-top:1px solid rgba(236,227,207,.28)} /* --- paper card base (shared by dossier files, press clipping, ...) -------- */ .paper-card{position:relative; background:var(--paper); color:var(--ink); box-shadow:0 1px 1px rgba(0,0,0,.3), 0 16px 34px -10px rgba(0,0,0,.62), 0 3px 8px rgba(0,0,0,.35)} .paper-card > *{position:relative} .paper-card p{font-size:17px} /* --- footer: the desk edge ------------------------------------------------- */ .desk-edge{margin-top:72px; padding:30px 16px 36px; color:var(--paper); background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 60%,#1a1009); box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 -16px 36px rgba(0,0,0,.5);} .desk-edge-inner{max-width:1080px; margin:0 auto} .footer-lead{margin:0 0 14px; font-family:var(--font-type); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(236,227,207,.75)} .stamps{display:flex; flex-wrap:wrap; gap:10px 12px; margin:0 0 20px; padding:0; list-style:none} .stamp{display:inline-block; padding:7px 13px 6px; border:2px solid rgba(236,227,207,.75); border-radius:3px; color:var(--paper); font-family:var(--font-type); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; opacity:.85} .stamps li:nth-child(odd) > .stamp{transform:rotate(-1.2deg)} /* deterministic tilt, no randomness */ .stamps li:nth-child(even) > .stamp{transform:rotate(.8deg)} .stamp:hover{opacity:1; border-color:var(--paper); background:rgba(236,227,207,.08)} .footer-meta{margin:0; font-family:var(--font-type); font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:rgba(236,227,207,.6)} .footer-meta a{color:rgba(236,227,207,.8)} /* --- 404 / 500: DEAD END ---------------------------------------------------- */ .deadend{display:grid; place-items:center; padding:56px 0 20px} /* framed like the evidence wall: the panel is wood, ::before is the cork (children all position:relative, so they paint above it) */ .cork-panel{position:relative; width:min(680px,100%); border-radius:8px; padding:78px 46px 86px; text-align:center; background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 60%,#1a1009); box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 24px 60px -18px rgba(0,0,0,.8);} .cork-panel::before{content:""; position:absolute; inset:20px; border-radius:3px; background: radial-gradient(140% 120% at 30% 20%, rgba(255,226,170,.18), rgba(0,0,0,0) 42%, rgba(24,12,4,.45) 100%), url(../theoryboard/img/cork.jpg); background-size:auto, 512px; box-shadow:0 0 60px rgba(0,0,0,.5) inset, 0 0 0 1px rgba(0,0,0,.45);} .scrap-wrap{position:relative; display:inline-block; transform:rotate(-1.2deg)} /* D-1: pin lives here, outside the clipped scrap */ .scrap{position:relative; display:inline-block; background:var(--paper); color:var(--ink); padding:32px 34px 28px; max-width:430px; box-shadow:0 1px 1px rgba(0,0,0,.3), 0 16px 34px -10px rgba(0,0,0,.62); clip-path:polygon(0 2%,4% 0,30% 1.5%,55% 0,78% 1.5%,100% 0,99% 35%,100% 70%,98.5% 100%,60% 98.5%,32% 100%,6% 99%,0 97%);} .scrap > *{position:relative} .pin-dot{position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; z-index:2; background:radial-gradient(circle at 35% 30%, #fff7, #d23b34 38%, #8c211c 75%); box-shadow:0 4px 5px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.4) inset;} .verdict{margin:4px 0 10px; font-family:var(--font-marker); font-size:46px; line-height:1; color:var(--yarn)} .scrap p{margin:0; font-size:18px} .yarn-strand{position:absolute; left:50%; bottom:78px; width:150px; height:3px; background:var(--yarn); border-radius:2px; transform:translateX(-88%) rotate(26deg); box-shadow:0 1px 2px rgba(0,0,0,.4)} .deadend-tab{display:inline-block; margin-top:40px; padding:10px 22px 8px; background:linear-gradient(#d5c28c,#c6b076); color:var(--ink); font-family:var(--font-type); font-size:12px; letter-spacing:.15em; text-transform:uppercase; text-decoration:none; border-radius:3px; box-shadow:0 8px 14px -6px rgba(0,0,0,.6); transform:rotate(.6deg)} .deadend-tab:hover{background:linear-gradient(#e2d2a2,#d5c28c)} /* --- about: the dossier ------------------------------------------------------ */ .page-title{margin:34px 0 6px; font-family:var(--font-head); font-weight:700; font-size:clamp(26px,4vw,38px); line-height:1.02; text-transform:uppercase; color:var(--paper)} .page-standfirst{margin:0 0 8px; max-width:70ch; color:rgba(236,227,207,.85)} .files{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:28px; margin:24px 0 0} .file-card{padding:26px 28px 22px; transform:rotate(-.4deg)} .file-card:nth-child(even){transform:rotate(.5deg)} .file-card h2{margin:0 0 2px; font-family:var(--font-head); font-weight:700; font-size:24px; text-transform:uppercase; line-height:1.05} .meta-row{margin:2px 0; font-family:var(--font-type); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)} .file-card .meta-row:last-of-type{margin-bottom:12px} .clip-strip{position:absolute; top:-11px; left:26px; width:78px; height:24px; opacity:.78; transform:rotate(-3deg); z-index:2; background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(228,224,205,.35)); box-shadow:0 1px 3px rgba(0,0,0,.25)} /* press clipping (C-4): the Atlantic mention, literally a pinned clipping */ .press-clipping{margin:26px auto 0; padding:22px 26px 18px; max-width:560px; text-align:center; transform:rotate(.5deg); clip-path:polygon(0 3%,5% 0,32% 2%,58% 0,80% 2%,100% 0,99.5% 40%,100% 72%,98% 100%,58% 98%,30% 100%,5% 98.5%,0 96%);} .press-clipping .kicker{margin:0 0 4px; font-family:var(--font-type); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); border-bottom:1.5px solid var(--ink); padding-bottom:6px} .press-clipping .quote{margin:10px 0 2px; font-family:var(--font-head); font-weight:700; font-size:22px; text-transform:uppercase; line-height:1.1} .press-clipping .quote a{color:inherit; text-decoration:none; border-bottom:2px solid rgba(184,48,42,.45)} /* clipping, not hyperlink-blue */ .press-clipping .quote a:hover{color:var(--yarn); border-color:var(--yarn)} /* known associates (C-4): the guest ledger */ .associates{margin:16px 0 0; padding:0; list-style:none; columns:2; column-gap:40px} @media (max-width:640px){.associates{columns:1}} .associates li{break-inside:avoid; margin:0 0 10px; font-family:var(--font-type); font-size:14px; letter-spacing:.06em; color:rgba(236,227,207,.9)} .associates li b{display:block; font-weight:400; text-transform:uppercase; letter-spacing:.12em; color:var(--paper)} .associates li span{color:rgba(236,227,207,.6); font-size:12px} /* --- motion discipline ------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .office *, .office *::before, .office *::after{transition:none!important; animation:none!important} } /* ============================================================================ A-3 CASE FILES -- the episode unit (used by /episode/ and the homepage). ============================================================================ */ /* D-1: the wrapper is unclipped and owns the pin; the card's torn-edge clip-path would otherwise shear the pin's top off (same law as the board's .note-wrap). */ .case-file-wrap{position:relative; margin-top:30px} .case-file-wrap > .pin-dot{top:-9px} .case-file{padding:24px 28px 26px; clip-path:polygon(0 .6%,4% 0,30% .45%,55% 0,78% .45%,100% 0,99.6% 35%,100% 70%,99.4% 100%,60% 99.55%,32% 100%,6% 99.7%,0 99.1%);} .case-file-page{transform:rotate(-.25deg)} .case-head{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 18px; padding-bottom:7px; margin-bottom:10px; border-bottom:1.5px solid var(--ink); font-family:var(--font-type); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft)} .case-title{margin:0 0 14px; font-family:var(--font-head); font-weight:700; font-size:clamp(24px,3.4vw,34px); line-height:1.02; text-transform:uppercase} .case-body{display:grid; grid-template-columns:minmax(220px,320px) 1fr; gap:26px; align-items:start} @media (max-width:700px){.case-body{grid-template-columns:1fr}} .case-text p{margin:0 0 12px; font-size:17.5px; max-width:70ch} .case-cite{font-family:var(--font-type); font-size:13px; letter-spacing:.04em; color:var(--ink-soft)} .case-cite a{color:var(--yarn)} /* polaroid frame for episode art */ .polaroid{position:relative; margin:4px 0 0; padding:10px 10px 36px; background:#f6f1e4; transform:rotate(-1.4deg); box-shadow:0 1px 1px rgba(0,0,0,.3), 0 12px 26px -8px rgba(0,0,0,.5)} /* tape CENTERED on the top edge (was right:14px corner tape, which read as badly off-center at hero-polaroid size); slight rotation keeps it hand-placed */ .polaroid::before{content:""; position:absolute; top:-9px; left:50%; width:64px; height:22px; transform:translateX(-50%) rotate(4deg); z-index:2; background:linear-gradient(160deg, rgba(255,255,255,.55), rgba(228,224,205,.35)); box-shadow:0 1px 3px rgba(0,0,0,.25)} .polaroid img{display:block; width:100%; height:auto; background:#c9bda4} .polaroid figcaption{position:absolute; left:0; right:0; bottom:6px; text-align:center; font-family:var(--font-hand); font-size:20px; color:var(--ink-soft)} /* the tape deck: native audio in a wood strip with a paper label */ .tape-deck{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:22px; padding:10px 14px; border-radius:6px; background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 70%); box-shadow:0 0 14px rgba(0,0,0,.45) inset, 0 2px 6px rgba(0,0,0,.3)} .deck-label{padding:3px 10px 2px; background:var(--paper); color:var(--ink); font-family:var(--font-type); font-size:11px; letter-spacing:.15em; text-transform:uppercase; transform:rotate(-.6deg); box-shadow:0 1px 2px rgba(0,0,0,.4)} .tape-deck audio{flex:1; min-width:220px; height:38px} /* the board CTA: the loudest element on any card that has one (marker budget) */ .board-cta{display:block; width:fit-content; margin:22px auto 2px; padding:12px 26px 10px; background:var(--yarn); color:var(--paper); font-family:var(--font-marker); font-size:21px; line-height:1.15; text-decoration:none; text-align:center; transform:rotate(-.8deg); box-shadow:0 1px 1px rgba(0,0,0,.35), 0 12px 24px -8px rgba(0,0,0,.6)} .board-cta::before{content:""; position:absolute} /* keep layout simple; pin omitted on purpose */ .board-cta:hover{transform:rotate(0deg); background:#a12722} /* transcript (C-3): collapsed by default, in the DOM and indexable */ .transcript{margin-top:26px; border-top:1.5px solid var(--ink); padding-top:12px} .transcript summary{cursor:pointer; font-family:var(--font-type); font-size:12px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-soft)} .transcript summary:hover{color:var(--ink)} .transcript p{margin:12px 0 0; font-size:16.5px; max-width:72ch} /* older/newer case navigation */ .case-nav{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; margin-top:26px} .case-nav a{font-family:var(--font-type); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,227,207,.8); text-decoration:none; border-bottom:1px solid rgba(236,227,207,.3); padding-bottom:2px} .case-nav a:hover{color:var(--paper); border-color:var(--paper)} /* ============================================================================ A-4 FRONT PAGE -- hero, evidence wall, case archive, search states. ============================================================================ */ .section-lede{margin:-8px 0 16px; color:rgba(236,227,207,.75); font-size:16.5px} /* --- the evidence wall: a cork strip of board polaroids --------------------- */ /* a real corkboard hangs in a WOOD FRAME (same recipe as the boards' .board-frame): the section is the frame, the list inside is the cork -- the boards' photo tile (baked cork.jpg) under a translucent radial wash (lamp-lit center, shaded edges). No board floats frameless in space. */ .evidence-wall{position:relative; padding:20px; border-radius:8px; background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 60%,#1a1009); box-shadow:0 2px 0 rgba(255,255,255,.05) inset, 0 24px 60px -16px rgba(0,0,0,.8), 0 8px 24px rgba(0,0,0,.6);} .evidence-wall::after{content:""; position:absolute; inset:14px; border-radius:4px; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5) inset;} /* the frame's inner lip */ .wall{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:24px 20px; margin:0; list-style:none; padding:26px 22px 24px; border-radius:3px; background: radial-gradient(140% 120% at 30% 20%, rgba(255,226,170,.18), rgba(0,0,0,0) 42%, rgba(24,12,4,.45) 100%), url(../theoryboard/img/cork.jpg); background-size:auto, 512px; box-shadow:0 0 60px rgba(0,0,0,.5) inset;} .wall-polaroid{position:relative; display:block; background:#f6f1e4; padding:8px 8px 32px; text-decoration:none; color:var(--ink); box-shadow:0 1px 1px rgba(0,0,0,.35), 0 12px 26px -8px rgba(0,0,0,.55)} .wall-polaroid img{display:block; width:100%; height:110px; object-fit:cover; background:#c9bda4} .wall-noimg{display:grid; place-items:center; height:110px; background:repeating-linear-gradient(45deg,#cfc4ac,#cfc4ac 6px,#c4b8a0 6px,#c4b8a0 12px); font-family:var(--font-type); font-size:11px; letter-spacing:.18em; color:#6a5d48} .wall-caption{position:absolute; left:0; right:0; bottom:5px; text-align:center; font-family:var(--font-hand); font-size:19px; line-height:1.1; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 6px} /* five fixed angles, picked by slug hash server-side (deterministic law) */ .tilt-0{transform:rotate(-2.2deg)} .tilt-1{transform:rotate(1.4deg)} .tilt-2{transform:rotate(-.8deg)} .tilt-3{transform:rotate(2deg)} .tilt-4{transform:rotate(.4deg)} @media (prefers-reduced-motion: no-preference){ .wall-item{transition:transform .18s ease} .wall-item:hover{transform:rotate(0deg) translateY(-3px)} } /* --- the case archive: full case cards, one selected at a time -------------- Every card is fully rendered, always (no
: a closed details never renders its body, which killed the physical-card look). Selection = a visually-hidden radio per card -- exclusive by construction, zero JS; the body is display-gated by :checked outside drawer mode, and genuinely layered/overlapped in drawer mode. */ .archive{margin:0; padding:0; list-style:none} .archive > li{position:relative; margin:0 0 10px} .case-toggle{position:absolute; width:1px; height:1px; opacity:0; margin:0} .case-toggle:focus-visible + .case-row{outline:2px solid var(--focus-ring); outline-offset:2px} .case-row{position:relative; background:var(--paper); color:var(--ink); box-shadow:0 1px 1px rgba(0,0,0,.3), 0 8px 18px -8px rgba(0,0,0,.5)} .case-peek{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:11px 16px 9px; cursor:pointer} .case-peek::after{content:"+"; margin-left:auto; font-family:var(--font-type); font-size:15px; color:var(--ink-soft)} .case-toggle:checked + .case-row .case-peek::after{content:"\2212"} .case-peek:hover{background:#e4d9c1} .row-num{font-family:var(--font-type); font-size:12px; letter-spacing:.14em; color:var(--ink-soft)} .row-title{font-family:var(--font-head); font-weight:500; font-size:17px; text-transform:uppercase; letter-spacing:.02em} .row-title a{color:inherit; text-decoration:none} .row-title a:hover{color:var(--yarn)} .row-hook{font-style:italic; font-size:15px; color:var(--ink-soft)} .row-body{display:none; padding:8px 16px 16px; border-top:1px dashed rgba(27,22,17,.3)} .case-toggle:checked + .case-row .row-body{display:block} .row-thumb{float:right; width:96px; height:96px; object-fit:cover; margin:4px 0 10px 14px; background:#c9bda4; border:6px solid #f6f1e4; box-shadow:0 2px 8px rgba(0,0,0,.3); transform:rotate(1.2deg)} .row-body p{margin:6px 0 10px; font-size:16.5px; max-width:75ch} .row-body audio{display:block; width:100%; max-width:520px; height:36px; margin:2px 0 10px} .row-body .case-cite{margin:0} /* --- search states ----------------------------------------------------------- */ .search-state{margin:36px 0 6px; font-family:var(--font-head); font-weight:700; font-size:clamp(22px,3.4vw,30px); line-height:1.1; text-transform:uppercase; color:var(--paper)} .search-back{margin:0 0 8px} .search-back a{font-family:var(--font-type); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(236,227,207,.8); text-decoration:none; border-bottom:1px solid rgba(236,227,207,.3); padding-bottom:2px} .search-back a:hover{color:var(--paper); border-color:var(--paper)} /* ============================================================================ D-2 ARCHIVE TREATMENTS -- three stackable filing-system variants, selected by /?archive=cards|leaders|drawer|all (comparison switch; hard-wire the winner later and delete the losers). Everything deterministic, zero JS. ============================================================================ */ /* drawer-only markup, inert unless .style-drawer is active */ .drawer-plate{display:none} .drawer-divider{display:none} /* the leaders-only span, inert unless .style-leaders is active */ .leader{display:none} /* --- variant 1: INDEX CARDS ------------------------------------------------- Material: smooth paper tooth (--paper-tooth, alpha .06 -- NOT the aged --grain, which reads filthy at row scale), red header rule (the classic index-card top line), blue baseline rules on the body, the case number as a manila tab chip, deterministic tone/tilt wear. */ .style-cards .case-row{background-color:var(--paper); background-image:var(--paper-tooth); background-size:180px} .style-cards .archive>li:nth-child(3n+2) .case-row{background-color:#e8ddc5; transform:rotate(.25deg)} .style-cards .archive>li:nth-child(3n) .case-row{background-color:#f0e8d6; transform:rotate(-.2deg)} .style-cards .case-peek{border-bottom:2px solid rgba(184,48,42,.5); padding-bottom:9px} .style-cards .case-peek:hover{background-color:#e4d9c1} .style-cards .row-num{background:linear-gradient(#d5c28c,#c6b076); color:var(--ink); padding:2px 9px 1px; border-radius:2px; box-shadow:0 1px 2px rgba(0,0,0,.3)} .style-cards .row-body{border-top:0; padding-top:2px; background-image:repeating-linear-gradient(to bottom, transparent 0 25px, rgba(96,125,160,.3) 25px 26px)} /* the open card is PULLED from the stack: offset + deeper shadow, tilt zeroed */ .style-cards .archive>li>.case-toggle:checked + .case-row{transform:translateX(8px); box-shadow:0 2px 2px rgba(0,0,0,.3), 0 18px 34px -10px rgba(0,0,0,.65)} /* --- variant 2: DOT LEADERS ------------------------------------------------- The typed filing index: dots fill the gap between title and hook, and the hook goes typewriter to match. */ .style-leaders .leader{display:block; flex:1 1 30px; min-width:26px; height:1px; align-self:center; border-bottom:2px dotted rgba(87,74,57,.6); transform:translateY(3px)} .style-leaders .row-hook{font-style:normal; font-family:var(--font-type); font-size:12.5px; letter-spacing:.05em} .style-leaders .case-peek::after{margin-left:12px} /* --- variant 3: CARD CATALOG DRAWER ------------------------------------------ A LONG OPEN DRAWER seen from above (D-2 feedback: not a clipboard). Wood frame = the drawer walls; inside is a dark interior well where the cards stand packed tight, each closed row reading as a card's top edge catching the light; manila divider guides (with their bookmark tabs) sit BETWEEN the cards; the front rail below carries the brass label plate and a cup pull. An opened card rises up out of the drawer. */ .style-drawer{padding:16px 18px 0; border-radius:10px 10px 7px 7px; background:linear-gradient(135deg,var(--wood-1),var(--wood-2) 60%,#1a1009); box-shadow:0 2px 0 rgba(255,255,255,.06) inset, 0 22px 52px -16px rgba(0,0,0,.8)} /* the interior well ALL the packs stand in */ .style-drawer .drawer-well{padding:14px 12px 18px; border-radius:3px; background:linear-gradient(180deg,#150d07, #231710 10%, #291b11 90%, #150d07); box-shadow:0 12px 18px -8px rgba(0,0,0,.9) inset, 0 -8px 14px -8px rgba(0,0,0,.8) inset, 0 0 0 1px rgba(0,0,0,.65)} /* THE PACK: every card is a real, fully rendered card. Closed cards are held at a fixed pack height (overflow clipped) and each li pulls the next card up over its face (negative margin + natural DOM paint order: later = nearer the viewer). What peeks out the top IS the top of the actual card, body text and all. */ .style-drawer .case-row{max-height:150px; overflow:hidden; box-shadow:0 1.5px 0 rgba(255,255,255,.45) inset, 0 -10px 14px -7px rgba(0,0,0,.65)} /* shadow falls on the card BEHIND */ .style-drawer .row-body{display:block} /* the card face is always visible in a drawer */ .style-drawer .archive>li{margin:0 0 -96px} /* peek = 150 - 96 = 54px */ .style-drawer .archive>li:last-child{margin-bottom:0} /* cards stand ALIGNED in a drawer: neutralize the index-card tilts when combined */ .style-drawer .archive>li:nth-child(n) .case-row{transform:none} /* TUG: hovering (or keyboard-focusing) a closed card PULLS it up 14px: the top edge rises (transform) while max-height grows by the same amount, so the bottom edge stays planted in the drawer and 14px MORE of the card's face emerges -- including the pack's front card, which has nothing covering it */ .style-drawer .archive>li:nth-child(n) .case-toggle:not(:checked) + .case-row:hover, .style-drawer .archive>li:nth-child(n) .case-toggle:not(:checked):focus-visible + .case-row{ transform:translateY(-14px); max-height:164px; box-shadow:0 1.5px 0 rgba(255,255,255,.55) inset, 0 -14px 18px -8px rgba(0,0,0,.75)} /* PULLED OUT: the selected card RISES (transform up, no top margin pushing it down) while its clip opens; the li stops overlapping so the cards below make room. max-height (not height:auto) so the whole thing can animate. z-index lifts it above LATER siblings too, or its downward shadow would be painted over by the next card in the pack (DOM order = paint order). */ .style-drawer .archive>li:has(> .case-toggle:checked){margin:0 0 10px} /* shadow contrast rule: black shadow on the near-black well is invisible, so the pulled card's shadow must LAND ON PAPER -- an upward component falls on the exposed peek of the card above, and the small gap below (10px) lets the downward component reach the next card's face */ .style-drawer .archive>li:nth-child(n) .case-toggle:checked + .case-row{max-height:760px; transform:translateY(-12px); z-index:2; box-shadow:0 1.5px 0 rgba(255,255,255,.4) inset, 0 -12px 18px -6px rgba(0,0,0,.65), 0 16px 22px -4px rgba(0,0,0,.85), 0 4px 8px rgba(0,0,0,.6)} /* a clipped card's cut edge fades into the paper (visible on the pack's front card, whose whole face shows) */ .style-drawer .case-toggle:not(:checked) + .case-row::after{content:""; position:absolute; left:0; right:0; bottom:0; height:48px; background:linear-gradient(rgba(236,227,207,0), var(--paper)); pointer-events:none} @media (prefers-reduced-motion: no-preference){ .style-drawer .case-row{transition:transform .2s ease, box-shadow .2s ease, max-height .38s cubic-bezier(.2,.7,.3,1)} .style-drawer .archive>li{transition:margin .3s ease} /* the room-making below animates too */ } /* narrow screens: the header line wraps taller than the peek, so the riffling pack degrades to a plain list (the drawer chrome stays) */ @media (max-width:640px){ .style-drawer .case-row{max-height:none; overflow:visible; transform:none!important} .style-drawer .archive>li{margin:0 0 6px} .style-drawer .case-toggle:not(:checked) + .case-row::after{display:none} .style-drawer .row-body{display:none} .style-drawer .case-toggle:checked + .case-row .row-body{display:block} } /* divider guides: manila tabs BETWEEN the packs (one