/* ============ case drawer: folders on a desk blotter ============ */
  .drawer { margin-top: 40px; }

  /* the rail the folders hang from */
  .rail {
    display: flex; gap: 6px; align-items: flex-end; overflow-x: auto; overscroll-behavior-x: contain;
    padding: 10px 12px 0; background: var(--panel); border: 1px solid var(--line); border-bottom: 0;
    box-shadow: inset 0 -8px 12px -10px rgba(0,0,0,.9);
    scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  }
  .rail::-webkit-scrollbar { height: 6px; }
  .rail::-webkit-scrollbar-thumb { background: var(--line); }
  .rail::-webkit-scrollbar-track { background: transparent; }
  .tab {
    flex: 0 0 auto; display: grid; gap: 4px; justify-items: start;
    padding: 9px 15px 10px; background: var(--bg); border: 1px solid var(--line); border-bottom: 0;
    color: var(--ink); font: 12px/1 var(--mono); letter-spacing: .06em; cursor: pointer;
    transition: background .18s var(--ease-out, ease-out), color .18s var(--ease-out, ease-out), transform .18s var(--ease-out, ease-out);
  }
  .tab-code { font-variant-numeric: tabular-nums; }
  .tab-place { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
  .tab:hover { border-color: var(--glow); }
  .tab[aria-selected="true"] {
    background: var(--paper); border-color: var(--paper-line); color: var(--paper-ink);
    transform: translateY(-3px); padding-bottom: 13px;
  }
  .tab[aria-selected="true"] .tab-code { font-weight: 700; }
  .tab[aria-selected="true"] .tab-place { color: var(--paper-ink-dim); }

  /* the blotter: a photograph of dark leather, blended into the palette */
  .desk {
    position: relative;
    padding: clamp(20px, 3vw, 42px) clamp(18px, 3vw, 42px) clamp(62px, 8vw, 118px);
    background: var(--blotter) url("tex-blotter.jpg") center / cover no-repeat;
    background-blend-mode: soft-light; border: 1px solid var(--line);
  }
  .desk::before {
    content: ""; position: absolute; inset: 11px; border: 1px dashed rgba(198,183,143,.14); pointer-events: none;
  }
  /* desk furniture, photographed and cut out (see postprocess.py). Sized and placed to sit in
     the blotter's margins: they may touch the sheet's edge, never its content.
     Every prop is drawn at one desk scale, 32px to the inch, measured on the object inside its
     frame (each PNG is trimmed to the alpha bbox + an 8px margin, so the CSS width is the frame,
     not the object): pencil 7in long, stamp 1.9in across the base, mug 3.6in across the body.
     Change one width and you break the agreement -- rescale from the inch figure, not by eye.
     The sheet itself is drawn at ~127px to the inch; the props are a deliberate miniature. */
  .pencil {
    position: absolute; left: 24%; bottom: 14px; z-index: 4; width: 154px; height: auto; rotate: -12deg;
    pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.55));
  }
  .stampblock {
    position: absolute; left: 3.5%; bottom: 12px; z-index: 4; width: 106px; height: auto; rotate: -7deg;
    pointer-events: none; filter: drop-shadow(0 7px 9px rgba(0,0,0,.6));
  }
  .mug {
    position: absolute; right: 3.5%; bottom: 10px; z-index: 4; width: 159px; height: auto;
    pointer-events: none; filter: drop-shadow(0 9px 12px rgba(0,0,0,.65));
  }
  /* "while you were out" slip — lies on the sheet's reserved lower area, so it can never
     cover a line of the report, however short the case is */
  .slip {
    position: absolute; left: 30%; bottom: 18px; width: min(250px, 34%); z-index: 5; rotate: 2.5deg;
    background: var(--paper-2); color: var(--paper-ink); padding: 14px 16px 16px;
    box-shadow: 0 10px 16px -8px rgba(0,0,0,.62);
  }
  .slip h3 { font: 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink-dim); margin-bottom: 10px; }
  .slip p { font: 20px/1.3 var(--hand); color: #1e2c47; }
  .pin {
    position: absolute; top: -15px; left: 14px; width: 26px; height: auto; z-index: 6; rotate: 8deg;
    pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6));
  }

  /* the open folder */
  .folder {
    position: relative; z-index: 2; display: grid; align-items: start;
    grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr) minmax(0, 19rem);
    gap: clamp(22px, 2.6vw, 44px);
    background: var(--paper-2) url("prop-ring.jpg") no-repeat left 6px bottom 6px / 195px;
    background-blend-mode: multiply; color: var(--paper-ink);
    border: 1px solid var(--paper-line); padding: clamp(24px, 2.6vw, 38px);
    padding-bottom: clamp(80px, 13vw, 210px);   /* room for the slip lying on the sheet */
    box-shadow: 0 10px 14px -10px rgba(0,0,0,.85), 0 2px 0 rgba(0,0,0,.45);
  }
  .folder::before {
    content: attr(data-tab); position: absolute; top: -23px; left: clamp(24px, 2.6vw, 38px);
    padding: 6px 16px 5px; background: var(--paper); border: 1px solid var(--paper-line); border-bottom: 0;
    font: 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-ink);
  }
  .folder .stamp {
    position: absolute; top: 12px; right: 14px; z-index: 3; rotate: 8deg; padding: 4px 11px;
    border: 2px solid var(--stamp); color: var(--stamp); background: rgba(213,200,165,.5);
    font: 700 12px/1 var(--mono); letter-spacing: .2em; mix-blend-mode: multiply;
  }

  .docket { display: grid; gap: 9px; margin: 0; }
  .docket > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 10px; padding-bottom: 8px;
    border-bottom: 1px dotted rgba(36,39,31,.3); }
  .docket dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-ink-dim); }
  .docket dd { margin: 0; font-size: 12.5px; line-height: 1.5; font-variant-numeric: tabular-nums; }

  .sheet-body h3 { font: 400 clamp(1.3rem, 2.3vw, 1.8rem)/1.2 Georgia, serif; margin-bottom: 14px; }
  .sheet-body p { font-size: 15px; line-height: 1.62; max-width: 70ch; }
  .margin-note {
    margin-top: 20px; font: 18px/1.4 var(--hand); color: #24314f; rotate: -.7deg; max-width: 42ch;
  }
  .sourcing { margin-top: 22px; font-size: 11px; letter-spacing: .04em; color: var(--paper-ink-dim); }
  .sourcing a { color: #1c3a2c; text-underline-offset: 3px; }

  /* evidence print, clipped to the folder */
  .print { position: relative; margin: 0; }
  .print img:not(.clip) { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; border: 9px solid #0a0f10; filter: saturate(.72) contrast(1.06); }
  /* author display rules beat the hidden attribute — keep these two honest */
  .print img[hidden], .print figcaption[hidden] { display: none; }
  .no-frame[hidden] { display: none; }
  .print figcaption { margin-top: 9px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--paper-ink-dim); }
  /* the clip is the one prop not on the desk scale: it is read against the print it holds
     (~1.3in at the print's own scale), so it looks right on the photo and large next to the mug */
  .clip { position: absolute; top: -11px; left: -15px; z-index: 4; width: 66px; height: auto; rotate: 14deg;
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }
  .no-frame {
    aspect-ratio: 4/3; display: grid; place-content: center; gap: 10px; padding: 22px; text-align: center;
    border: 1px dashed rgba(74,76,58,.5); background: rgba(36,39,31,.05);
  }
  .no-frame b { font: 700 11px/1 var(--mono); letter-spacing: .2em; }
  .no-frame span { font-size: 11px; line-height: 1.5; color: var(--paper-ink-dim); max-width: 24ch; }

  /* redaction bars: the paper version — ink lifts on hover or focus */
  .redact { background: var(--paper-ink); color: transparent; padding: 0 3px; cursor: help; border-radius: 1px;
    transition: background .22s ease-out, color .22s ease-out; }
  .redact:hover, .redact:focus { background: rgba(36,39,31,.1); color: var(--paper-ink); }
  .folder :focus-visible, .rail :focus-visible { outline: 2px solid #1c2a44; outline-offset: 2px; }
  .rail :focus-visible { outline-color: var(--glow); }

  @keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes press { from { opacity: 0; transform: scale(1.16) rotate(8deg); } to { opacity: 1; transform: scale(1) rotate(8deg); } }
  .folder > * { animation: settle .5s cubic-bezier(.16,1,.3,1) both; }
  .folder .stamp { animation: press .38s cubic-bezier(.16,1,.3,1) .1s both; }
  .folder.swap > *, .folder.swap .stamp { animation: none; }
  .folder.swap { animation: settle .42s cubic-bezier(.16,1,.3,1) both; }