/* The gunsmith's skin (10 Nov 2026). Jordan: "I want the website to have its own feel that would make sense for a
   gunsmith", then "the folders give off the same feel. Instead of manila folders and stuff, it should be more like a
   gunsmith". The engine's stylesheets are shared with the sister sites and draw a bound ledger with manila folder
   tabs; this file, loaded after them all, turns that into the gun shop's own things:

     - the papers lie in an open WALNUT GUN CASE lined with oxblood velvet, brass at its corners, the shop's name on
       an engraved brass plate on its head rail (not a book: no binding, no block of page edges);
     - the tabs are BRASS LABEL HOLDERS with typed cards, screwed along the head of the case, and the shop's name is
       on a brass plate at its foot: photographs of real ones (ChatGPT cut-outs in assets/sprites/), not shapes drawn
       here (not folder tabs);
     - the paper is plain ivory bond (no ledger rules down the margin);
     - cards and slips are box card with printed label borders (not manila);
     - the case lies in the clear baize of the gun shop's own bench (scene.js, plates.json), left of centre, with
       the lamp, the revolver and the cartridges down its right side (the mine's book lies to the right of its lamp).

   It changes looks and where the case lies, nothing else: every id, class and size a script measures stays in the
   engine's files, so the page turns, the phone layout and the checks are untouched. Rooms' own stylesheets load AFTER
   this file, so anything that must beat them is written with `:root` in front.

   The scrollwork (assets/art/scroll_*.png) is a ChatGPT drawing of gun engraving, used as a mask so it takes whatever
   ink or gilt it is given. */

:root {
  /* Lettering. The shop's name and the names of its forms: a fat-face roman, as on a gunmaker's catalogue or the
     label inside a gun case. Headings and labels: engraved roman capitals, as stamped along a barrel. The rubber
     stamps keep their stencil face (--font-stamp). */
  --font-deco: 'Abril Fatface', 'Playfair Display', Georgia, serif;
  --font-stencil: 'Cinzel', 'IM Fell English', Georgia, serif;
  --font-stamp: 'Stardos Stencil', 'Special Elite', monospace;

  --gilt: #ecd08a;
  --walnut: #4b2a17;
  --walnut-lo: #2a160b;
  --lining: #4a1513;        /* the case's velvet */
  --kraft: #b3905a;         /* box card */
  --label-paper: #efe2bd;   /* the printed label on a box */
  --lab-red: #7c1c15;
  --lab-green: #1f4a2e;
  --lab-blue: #1e3158;
  --lab-ochre: #6d4c10;

  /* Box card where the engine has manila. */
  --manila: #b3905a;
  --manila-2: #a17f49;
  --manila-edge: #5f4416;
}
html[data-theme='light'] {
  --manila: #cdae78;
  --manila-2: #bd9c64;
  --manila-edge: #7a5a22;
}

/* ---- the gun case ------------------------------------------------------------------------------ */

/* Where the case lies: DEAD CENTRE in the window (Jordan, 10 Nov 2026, of the first bench, whose clear baize was
   left of centre: "the paper on the gunsite is still on the left side of the window"). The bench (plates.json) is a
   3:2 picture made for that: a rifle along the top, the engraving tools down the left 12% and the lamp, a revolver,
   cartridges and oil down the right 12%, bare baize between. The picture hangs from the top of the window so the
   rifle is never cropped. On a wide window the side strips show whole beside the case; on a smaller one the paper
   keeps about 1000px and the case reaches a little over both strips alike, so it is centred at every size. */
@media (min-width: 901px) {
  .ledger-stage {
    padding-top: clamp(128px, 16.5vh, 186px);
    padding-bottom: 70px;
    padding-left: clamp(46px, calc(50vw - 500px), calc(11vw + 34px));
    padding-right: clamp(46px, calc(50vw - 500px), calc(11vw + 34px));
  }
  .ledger { justify-self: center; margin-left: 0; transform: rotate(0.25deg); }
}
html[data-plate-anchor='top'] .sc-counter.has-plate { background-position: center top; }

/* The case: a walnut tray with brass corners and a broad rail along its head; inside it a lining of oxblood velvet,
   and the paper lying on the velvet. (The bench is green; the lining is red so the case reads as a thing on it.) */
.ledger-cover {
  --rail: 15px;      /* the walnut rim */
  --rail-top: 15px;  /* the rail along the head (broad on a wide window: the label holders are screwed to it) */
  --rail-foot: 15px; /* the rail along the foot (broad on a wide window: the nameplate) */
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(255, 220, 170, 0.16), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.14)),
    var(--img-desk-wood, none),
    linear-gradient(160deg, #5a321b, #3d2212 72%);
  background-size: auto, 900px 450px, auto;
  background-blend-mode: normal, soft-light, normal;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.7), 0 6px 14px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 2px 0 rgba(255, 220, 170, 0.14);
}
/* the velvet lining, sunk inside the walnut */
.ledger-cover::before {
  content: '';
  position: absolute;
  inset: var(--rail-top) var(--rail) var(--rail-foot) var(--rail);
  border-radius: 4px;
  border: 0;
  background-color: var(--lining);
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255, 190, 170, 0.07), transparent 60%, rgba(0, 0, 0, 0.3)),
    var(--tex-noise, none);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 220, 170, 0.16);
  pointer-events: none;
}
.ledger-cover::after { display: none; }
@media (min-width: 641px) { .ledger-cover { inset: -34px -34px -34px -34px; } }
@media (min-width: 901px) {
  .ledger-cover { --rail-top: 44px; --rail-foot: 36px; inset: -68px -34px -56px -34px; }
}
@media (max-width: 640px) {
  .ledger-cover { --rail: 3px; --rail-top: 3px; --rail-foot: 3px; inset: -8px -5px -9px -5px; border-radius: 6px; }
}

/* One sheet lying on the baize, not a book: no block of page edges under it, no rules down the margin. */
.ledger-block { display: none; }
.lpage .sheet {
  --m: clamp(26px, 3.4vw, 54px);
  border-radius: 2px;
  background-image:
    linear-gradient(170deg, rgba(255, 252, 242, 0.18), transparent 35%, transparent 70%, rgba(90, 65, 30, 0.1)),
    var(--img-paper, none);
  background-size: auto, 700px 700px;
  background-blend-mode: normal, multiply;
  box-shadow: 0 0 0 0.5px rgba(70, 55, 35, 0.4), 0 2px 3px rgba(0, 0, 0, 0.35), 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* The shop's name: engraved on a brass plate screwed to the foot of the case. The plate is a photograph of a real
   blank one (assets/sprites/nameplate.webp, a ChatGPT cut-out) stretched between its two screws; only the lettering
   is the page's. */
.ledger-band {
  left: 50%;
  right: auto;
  top: auto;
  bottom: -51px;
  height: 27px;
  transform: translateX(-50%);
  width: max-content;
  max-width: 70%;
  gap: 0;
  padding: 0 8px;
  border-style: solid;
  border-color: transparent;
  border-width: 0 30px;
  border-image: url('/assets/sprites/nameplate.webp?v=10f9413ce2') 0 96 0 96 fill / 0 30px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
  color: #2a1c08;
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: clamp(0.66rem, 0.8vw, 0.78rem);
  letter-spacing: 0.24em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.45); /* cut into the brass: the lower edge of each stroke catches light */
}
.ledger-kind, .ledger-band::before, .ledger-band::after { display: none; }

/* ---- the tabs: brass label holders on the head of the case --------------------------------------- */

/* Each tab is a brass card-holder of the kind screwed to drawer fronts and parts cabinets, with a typed card in it,
   fixed along the rail at the head of the case. The holders are photographs of three real ones
   (assets/sprites/holder_1..3.webp, ChatGPT cut-outs: each has its own tarnish), stretched between their screws to
   the width of the tab; only the typing on the card is the page's. The open room's card is typed in red, as from the
   red half of the ribbon. (A first try drew cartridge-box labels in CSS; Jordan: it "looks like a website ... this is
   supposed to feel like a realistic immersive in character thing".) */
.ltab-row { gap: 6px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65)); }
.ltab {
  clip-path: none;
  padding: 0 1px;
  border-style: solid;
  border-color: transparent;
  border-width: 7px 21px;
  border-image: url('/assets/sprites/holder_1.webp?v=763a020db2') 27 80 27 80 fill / 7px 21px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: brightness(0.9);
}
.ltab:nth-child(3n + 2) { border-image-source: url('/assets/sprites/holder_2.webp?v=b3eef493f6'); }
.ltab:nth-child(3n + 3) { border-image-source: url('/assets/sprites/holder_3.webp?v=35fb1f5f14'); }
.ltab span {
  margin: 0 auto;
  padding: 0;
  -webkit-text-stroke: 0.3px currentColor;
  font-family: var(--font-type);
  font-weight: 400;
  font-size: clamp(0.68rem, 0.8vw, 0.86rem);
  line-height: 24px;
  letter-spacing: 0.08em;
  text-overflow: clip;
  color: #2a2219;
  background: none;
  box-shadow: none;
  opacity: 0.9;
  mix-blend-mode: multiply; /* typed on the card */
}
.ltab:hover { filter: brightness(1.04); }
.ltab.active { filter: none; box-shadow: none; }
.ltab.active span { color: #8c1a13; background: none; }
.ltab:focus-visible { outline: 2px dashed #f6e3a6; outline-offset: 2px; }

@media (min-width: 901px) {
  /* screwed down along the head rail: they do not move under the hand */
  .ledger-tabs { left: -12px; right: -12px; height: 38px; bottom: calc(100% + 27px); }
  .ltab-row { height: 38px; align-items: center; padding: 0; }
  .ltab, .ltab.active, .ltab:hover { height: 38px; max-width: none; transform: none; }
}
@media (max-width: 900px) {
  .ltab, .ltab.active {
    clip-path: none;
    min-width: 104px;
    height: 34px;
    padding: 0 1px;
    border-width: 6px 19px;
    border-image-width: 6px 19px;
    border-radius: 0;
    background: none;
    filter: brightness(0.9);
    transform: translateY(5px);
  }
  .ltab span { font-size: 0.66rem; letter-spacing: 0.05em; line-height: 22px; padding: 0; margin: 0 auto; }
  .ltab:hover { filter: brightness(0.9); transform: translateY(5px); }
  .ltab.active, .ltab.active:hover { filter: none; }
}

/* ---- lettering on the pages -------------------------------------------------------------------- */

/* Headings cut like a barrel address. */
.sheet-head h1 { font-family: var(--font-stencil); font-weight: 700; letter-spacing: 0.12em; color: #241a10; }

/* Rubber stamps and the punch stamp stay rubber stamps. */
/* (:root lifts these over the rooms' own stylesheets, which load after this file.) */
:root .bl-stamp, :root .btn.stampish, :root .td-punch { font-family: var(--font-stamp); }

/* A printed form's name (Bill of Sale, Supply Order) with a cut of scrollwork under it, in the form's own ink. */
.od-paper .od-kindname::after {
  content: '';
  display: block;
  width: min(300px, 70%);
  height: 16px;
  margin: 4px auto 0;
  background: currentColor;
  opacity: 0.8;
  -webkit-mask: url('/assets/art/scroll_divider.png?v=2f155dc4d2') center / contain no-repeat;
  mask: url('/assets/art/scroll_divider.png?v=2f155dc4d2') center / contain no-repeat;
}

/* The shop's name at the head of the day book, with a cut of scrollwork under it. */
.td-name { letter-spacing: 0.02em; }
.td-mast .td-name::after {
  content: '';
  display: block;
  width: min(320px, 60%);
  height: 18px;
  margin: 6px auto 0;
  background: #2a2117;
  opacity: 0.78;
  -webkit-mask: url('/assets/art/scroll_divider.png?v=2f155dc4d2') center / contain no-repeat;
  mask: url('/assets/art/scroll_divider.png?v=2f155dc4d2') center / contain no-repeat;
}