/* "1810" style: the engraved Old Series sheet. Scoped to body[data-style="os1810"].
   The graduated border, title, imprint and Scale of Statute Miles are engraved on the plate itself (heritage.js);
   this file frames the window onto that plate: a piano-key border, a title in the top border and paper grain. The
   interface panels stay the standard ones (app.css); IM Fell is loaded for the key's lettering samples. */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

body[data-style="os1810"] {
  --ink: #1F1B16; --paper: #F1ECDD; --margin: #E6E0CE;
  background: var(--margin);
}
/* the neat line: a fine rule just inside the key band; the top border is deeper, to carry the title */
body[data-style="os1810"] #map { inset: 26px 17px 17px 17px; outline: 1px solid var(--ink); outline-offset: 2px; }

/* piano-key border: an outer rule, a band of alternating keys, corner blocks */
body[data-style="os1810"]::after {
  content: ''; position: fixed; inset: 5px; pointer-events: none; z-index: 4;
  border: 1.5px solid var(--ink);
  background:
    linear-gradient(var(--ink), var(--ink)) top left / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) top right / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom left / 6px 6px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom right / 6px 6px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 24px, transparent 24px 48px) top 1.2px left 6px / calc(100% - 12px) 3.5px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 24px, transparent 24px 48px) bottom 1.2px left 6px / calc(100% - 12px) 3.5px no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 24px, transparent 24px 48px) left 1.2px top 6px / 3.5px calc(100% - 12px) no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 24px, transparent 24px 48px) right 1.2px top 6px / 3.5px calc(100% - 12px) no-repeat,
    linear-gradient(var(--ink), var(--ink)) top 5px left 0 / 100% .8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom 5px left 0 / 100% .8px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 5px top 0 / .8px 100% no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 5px top 0 / .8px 100% no-repeat;
}

/* the title, engraved in the top border on a plate that interrupts the keys */
body[data-style="os1810"]::before {
  content: 'Isle of Wight \2009\00B7\2009  after the engraved one-inch map of 1810';
  position: fixed; top: 3px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  padding: 1px 14px 0; background: var(--margin); color: var(--ink); white-space: nowrap;
  font: 13px/20px 'IM Fell English SC', 'IM Fell English', Georgia, serif; letter-spacing: .14em;
  border-left: 1px solid var(--ink); border-right: 1px solid var(--ink);
}
@media (max-width: 1000px) {
  body[data-style="os1810"]::before { content: 'Isle of Wight \2009\00B7\2009  1810'; font-size: 12px; }
}

/* paper: a faint fibrous grain over the plate, multiplied in so the ink stays black */
body[data-style="os1810"] #map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .075; mix-blend-mode: multiply;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .27 0 0 0 1.1 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(120, 96, 60, .35));
}