/* ==========================================================================
   Sketch Roam — roamed.pro
   Kraft-paper light theme. Graphite ink, one pale ink-blue, one brick accent.
   Square corners everywhere, hard offset shadows (no blur), dashed rules,
   rubber-stamp labels. Variable prefix: --sketch-
   ========================================================================== */

:root {
  --sketch-graphite: #3A3A3A;
  --sketch-ink: #4A6FA5;
  --sketch-kraft: #D9C7A7;
  --sketch-hatch: #B34A3E;
  --sketch-card: #EFE4CC;
  --sketch-deep: #2B2B2B;
  --sketch-mute: #6E6656;
  --sketch-rule: rgba(58, 58, 58, 0.35);
  --sketch-gutter: 22px;
  --sketch-max: 1240px;
  --sketch-face: 'Karla', 'Segoe UI', sans-serif;
  --sketch-disp: 'Archivo Black', 'Arial Black', sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sketch-face);
  font-size: 17px;
  line-height: 1.62;
  color: var(--sketch-graphite);
  background-color: var(--sketch-kraft);
  background-image:
    radial-gradient(rgba(58, 58, 58, 0.055) 1px, transparent 1px),
    radial-gradient(rgba(74, 111, 165, 0.05) 1px, transparent 1px),
    repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.14) 0 2px, transparent 2px 7px);
  background-size: 7px 7px, 11px 11px, auto;
  background-position: 0 0, 4px 5px, 0 0;
}

a { color: var(--sketch-ink); text-decoration: none; border-bottom: 1px solid rgba(74, 111, 165, 0.4); }
a:hover { color: var(--sketch-hatch); border-bottom-color: var(--sketch-hatch); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--sketch-disp); font-weight: 400; letter-spacing: 0.4px; line-height: 1.14; margin: 0 0 12px; }

.skipwire {
  position: absolute; left: -9999px; top: 0; background: var(--sketch-deep); color: #fff;
  padding: 10px 16px; z-index: 90; border: 0;
}
.skipwire:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- masthead */
.masthead {
  display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end;
  justify-content: space-between;
  max-width: var(--sketch-max); margin: 0 auto; padding: 26px var(--sketch-gutter) 14px;
  border-bottom: 3px solid var(--sketch-graphite);
}
.masthead__mark {
  font-family: var(--sketch-disp); font-size: 30px; line-height: 1;
  color: var(--sketch-graphite); border: 0; letter-spacing: 0.5px;
  display: inline-block; padding-bottom: 4px;
  box-shadow: inset 0 -9px 0 rgba(179, 74, 62, 0.22);
}
.masthead__mark:hover { color: var(--sketch-hatch); }
.masthead__tag {
  display: block; font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sketch-mute); margin-top: 7px;
}
.masthead__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.viewswitch { display: flex; border: 2px solid var(--sketch-graphite); background: var(--sketch-card); }
.viewswitch__btn {
  font-family: var(--sketch-face); font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; padding: 9px 15px; background: transparent; border: 0;
  border-right: 2px solid var(--sketch-graphite); color: var(--sketch-graphite); cursor: pointer;
}
.viewswitch__btn:last-child { border-right: 0; }
.viewswitch__btn.is-on { background: var(--sketch-graphite); color: var(--sketch-card); }
.viewswitch__btn:hover { background: var(--sketch-hatch); color: #fff; }

.citypick { display: flex; align-items: center; gap: 8px; border: 2px solid var(--sketch-graphite); padding: 2px 8px 2px 10px; background: var(--sketch-card); }
.citypick__lbl { font-size: 11.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--sketch-mute); }
.citypick__sel {
  font-family: var(--sketch-face); font-size: 15px; padding: 8px 4px; border: 0; background: transparent;
  color: var(--sketch-graphite); min-width: 150px;
}
.searchpull {
  font-family: var(--sketch-face); font-size: 13px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; padding: 10px 16px; cursor: pointer;
  background: var(--sketch-card); color: var(--sketch-graphite); border: 2px solid var(--sketch-graphite);
  box-shadow: 3px 3px 0 var(--sketch-graphite);
}
.searchpull:hover { background: var(--sketch-hatch); color: #fff; }

.crumbtrail {
  max-width: var(--sketch-max); margin: 0 auto; padding: 12px var(--sketch-gutter) 0;
  font-size: 13px; letter-spacing: 0.5px; color: var(--sketch-mute);
}
.crumbtrail a { color: var(--sketch-mute); border-bottom-color: var(--sketch-rule); }
.crumbtrail a:hover { color: var(--sketch-hatch); }

.roam-main { max-width: var(--sketch-max); margin: 0 auto; padding: 10px var(--sketch-gutter) 70px; }

/* -------------------------------------------------------------- atlas view */
.atlasview { margin: 18px 0 34px; }
.atlasplate {
  position: relative; border: 3px solid var(--sketch-graphite); background: var(--sketch-card);
  box-shadow: 8px 8px 0 rgba(58, 58, 58, 0.28);
}
.atlasplate__art { width: 100%; height: auto; }
.atlasplate__pins { position: absolute; inset: 0; }
.pin {
  position: absolute; left: var(--pin-x); top: var(--pin-y); transform: translate(-50%, -100%);
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--sketch-card); border: 2px solid var(--sketch-graphite);
  padding: 4px 8px; font-family: var(--sketch-face); font-size: 12.5px; color: var(--sketch-graphite);
  white-space: nowrap; box-shadow: 2px 2px 0 var(--sketch-hatch);
}
.pin:hover, .pin.is-lit { background: var(--sketch-graphite); color: var(--sketch-card); }
.pin__dot { width: 9px; height: 9px; background: var(--sketch-hatch); border: 1px solid var(--sketch-graphite); }
.pin__count { font-size: 11px; color: var(--sketch-hatch); }
.pin:hover .pin__count, .pin.is-lit .pin__count { color: var(--sketch-card); }
.atlasview__hint { font-size: 13.5px; color: var(--sketch-mute); margin: 12px 0 0; max-width: 720px; }

/* --------------------------------------------------------- film slate rows */
.strips { display: grid; gap: 30px; }
.filmslate { border-top: 2px dashed var(--sketch-rule); padding-top: 14px; }
.filmslate__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.filmslate__head h2 { font-size: 21px; margin: 0; }
.filmslate__meta { font-size: 12.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--sketch-mute); }
.filmslate__track {
  display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 14px;
  scroll-snap-type: x mandatory; border-bottom: 1px solid var(--sketch-rule);
}
.filmslate__track::-webkit-scrollbar { height: 9px; }
.filmslate__track::-webkit-scrollbar-thumb { background: var(--sketch-graphite); }

.frame {
  flex: 0 0 auto; width: 300px; scroll-snap-align: start; display: block;
  border: 2px solid var(--sketch-graphite); background: var(--sketch-card); color: var(--sketch-graphite);
  padding: 0 0 10px; text-decoration: none;
}
.frame:hover { color: var(--sketch-graphite); box-shadow: 5px 5px 0 rgba(58, 58, 58, 0.3); }
.frame__imgwrap { display: block; border-bottom: 2px solid var(--sketch-graphite); background: var(--sketch-kraft); }
.frame__imgwrap img { width: 100%; height: auto; }
.frame__type {
  display: inline-block; margin: 10px 10px 4px; font-size: 10.5px; letter-spacing: 1.3px;
  text-transform: uppercase; background: var(--sketch-graphite); color: var(--sketch-card); padding: 2px 7px;
}
.frame__title { display: block; margin: 0 10px 6px; font-family: var(--sketch-disp); font-size: 16px; line-height: 1.25; }
.frame__stamp { display: block; margin: 0 10px; font-size: 12.5px; color: var(--sketch-mute); }

/* ledger (list) view: the very same frames, restyled as ruled rows */
body[data-view="list"] .atlasview { display: none; }
body[data-view="list"] .filmslate__track { display: block; overflow: visible; padding-bottom: 0; }
body[data-view="list"] .frame {
  width: auto; display: grid; grid-template-columns: 112px 1fr 190px; align-items: center;
  gap: 12px; border-width: 0 0 1px 0; padding: 8px 6px; background: transparent;
}
body[data-view="list"] .frame:hover { box-shadow: none; background: rgba(239, 228, 204, 0.7); }
body[data-view="list"] .frame__imgwrap { display: none; }
body[data-view="list"] .frame__type { margin: 0; }
body[data-view="list"] .frame__title { margin: 0; font-size: 15.5px; }
body[data-view="list"] .frame__stamp { margin: 0; text-align: right; }
@media (max-width: 720px) {
  body[data-view="list"] .frame { grid-template-columns: 1fr auto; }
  body[data-view="list"] .frame__stamp { display: none; }
}

.roam-list { margin: 0 0 14px 0; padding-left: 20px; }
.roam-list li { margin-bottom: 5px; }
.roam-steps { margin: 0 0 14px 0; padding-left: 24px; }
.roam-steps li { margin-bottom: 7px; }

/* -------------------------------------------------------------- city page */
.cityplate { border: 3px solid var(--sketch-graphite); background: var(--sketch-card); margin: 18px 0 24px; }
.cityplate img { width: 100%; height: auto; }
.cityledger { width: 100%; border-collapse: collapse; margin: 0 0 30px; font-size: 15.5px; }
.cityledger th, .cityledger td { border-bottom: 1px solid var(--sketch-rule); padding: 9px 10px; text-align: left; }
.cityledger th {
  font-family: var(--sketch-face); font-size: 11.5px; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--sketch-mute); border-bottom: 2px solid var(--sketch-graphite);
}
.cityledger td a { border-bottom-color: rgba(74, 111, 165, 0.35); }

.blurbrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-bottom: 30px; }
.blurbcard { border: 2px solid var(--sketch-graphite); background: var(--sketch-card); padding: 14px 16px; }
.blurbcard h3 { font-size: 16px; margin-bottom: 6px; }
.blurbcard p { margin: 0; font-size: 15px; }

/* ----------------------------------------------------------- detail layout */
.plot { margin-top: 16px; }
.plot__hero { margin: 0 0 0; border-top: 3px solid var(--sketch-graphite); border-bottom: 3px solid var(--sketch-graphite); background: var(--sketch-card); }
.plot__hero img { width: 100%; height: auto; }
.plot__hero figcaption { font-size: 13px; color: var(--sketch-mute); padding: 8px var(--sketch-gutter); border-top: 1px dashed var(--sketch-rule); }
.plot__head { max-width: 820px; margin: 26px auto 0; }
.plot__kind {
  display: inline-block; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
  border: 2px solid var(--sketch-hatch); color: var(--sketch-hatch); padding: 2px 8px; margin-bottom: 12px;
}
.plot__head h1 { font-size: clamp(27px, 4vw, 42px); }
.plot__byline {
  margin: 8px 0 10px; font-size: 13px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--sketch-mute); border-left: 3px solid var(--sketch-hatch); padding-left: 9px;
}
.plot__lede { font-size: 18.5px; color: #4a4438; margin: 0; }

.placecard { max-width: 820px; margin: 26px auto; border: 2px solid var(--sketch-graphite); background: var(--sketch-card); }
.placecard__cap {
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--sketch-mute);
  padding: 9px 14px; border-bottom: 2px solid var(--sketch-graphite);
}
.placecard table { width: 100%; border-collapse: collapse; }
.placecard th, .placecard td { padding: 8px 14px; border-bottom: 1px solid var(--sketch-rule); vertical-align: top; text-align: left; }
.placecard tr:last-child th, .placecard tr:last-child td { border-bottom: 0; }
.placecard th { width: 200px; font-size: 13px; letter-spacing: 0.6px; color: var(--sketch-mute); font-weight: 500; }
.placecard td { font-size: 15.5px; }
.placecard code { font-family: 'Courier New', monospace; font-size: 14px; }

.plot__body { max-width: 820px; margin: 0 auto 40px; }
.plot__body h1 { font-size: clamp(25px, 3.4vw, 36px); }
.stepblock { margin: 30px 0 0; }
.stepblock h2 { font-size: 22px; display: flex; align-items: flex-start; gap: 12px; }
.stepdot {
  flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--sketch-graphite); background: var(--sketch-card);
  font-family: var(--sketch-disp); font-size: 14px; transform: rotate(-3.5deg); margin-top: 2px;
  box-shadow: 2px 2px 0 rgba(179, 74, 62, 0.45);
}
.stepblock:nth-child(even) .stepdot { transform: rotate(2.5deg); }
.stepblock p { margin: 0 0 12px; }

.roam-tablewrap { overflow-x: auto; margin: 16px 0 20px; }
.roam-table { border-collapse: collapse; width: 100%; font-size: 15px; background: var(--sketch-card); }
.roam-table th, .roam-table td { border: 1px solid var(--sketch-rule); padding: 8px 11px; text-align: left; }
.roam-table th { background: rgba(58, 58, 58, 0.08); font-size: 12.5px; letter-spacing: 0.9px; text-transform: uppercase; }

.samecity { border-top: 2px dashed var(--sketch-rule); padding-top: 16px; margin-top: 10px; }
.samecity h2 { font-size: 18px; }
.samecity__track { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; }
.samecity__track .frame { width: 240px; }

.verdict { max-width: 820px; margin: 0 auto 30px; border-left: 5px solid var(--sketch-hatch); background: rgba(239, 228, 204, 0.85); padding: 14px 18px; }
.verdict h2 { font-size: 17px; margin-bottom: 6px; }
.verdict p { margin: 0; font-size: 15.5px; }

/* ------------------------------------------------------------ legal pages */
.dossier { max-width: 780px; margin: 20px auto; }
.dossier h1 { font-size: clamp(24px, 3.6vw, 36px); }
.dossier h2 { font-size: 19px; margin-top: 30px; }
.dossier .stamp { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--sketch-hatch); }
.dossier ul { padding-left: 20px; }

/* ----------------------------------------------------------- search veil */
.searchveil {
  position: fixed; inset: 0; background: rgba(43, 43, 43, 0.86); z-index: 70;
  display: flex; align-items: flex-start; justify-content: center; padding: 90px 18px;
}
.searchveil[hidden] { display: none; }
.searchveil__inner { width: 100%; max-width: 680px; background: var(--sketch-kraft); border: 3px solid var(--sketch-graphite); padding: 20px; }
.searchveil input {
  width: 100%; font-family: var(--sketch-face); font-size: 20px; padding: 12px 14px;
  border: 2px solid var(--sketch-graphite); background: var(--sketch-card); color: var(--sketch-graphite);
}
.searchveil__out { margin: 14px 0 0; max-height: 52vh; overflow-y: auto; }
.searchveil__out a { display: block; padding: 8px 4px; border-bottom: 1px dashed var(--sketch-rule); }
.searchveil__close { margin-top: 14px; }

/* ------------------------------------------------------------ thumb nav */
.thumbnav { display: none; }
.colophon {
  border-top: 3px solid var(--sketch-graphite); background: var(--sketch-card);
  padding: 28px var(--sketch-gutter) 40px; margin-top: 30px;
}
.colophon__inner {
  max-width: var(--sketch-max); margin: 0 auto; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.colophon h2 { font-size: 13px; letter-spacing: 1.3px; text-transform: uppercase; color: var(--sketch-mute); margin-bottom: 8px; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: 5px; font-size: 14.5px; }
.colophon__note { max-width: var(--sketch-max); margin: 18px auto 0; font-size: 13px; color: var(--sketch-mute); border-top: 1px dashed var(--sketch-rule); padding-top: 12px; }
.colophon__disclaimer { max-width: var(--sketch-max); margin: 18px auto 0; font-size: 13px; line-height: 1.5; color: var(--sketch-mute); border-top: 1px dashed var(--sketch-rule); padding-top: 12px; }
.colophon__disclaimer + .colophon__note { margin-top: 8px; border-top: 0; padding-top: 0; }
.gapbar { height: 1px; background: var(--sketch-rule); border: 0; margin: 26px 0; }
.rolodex { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.rolodex__cell { border: 2px solid var(--sketch-graphite); background: var(--sketch-card); padding: 12px 14px; }
.rolodex__cell h3 { margin-bottom: 4px; font-size: 17px; }
.rolodex__cell p { margin: 0; font-size: 14.5px; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .masthead { padding-top: 18px; }
  .masthead__nav { width: 100%; }
  .atlasplate { box-shadow: 5px 5px 0 rgba(58, 58, 58, 0.28); }
  .pin { font-size: 11px; padding: 3px 5px; }
  .pin__label { display: none; }
  .plot__head, .plot__body, .placecard, .verdict, .dossier { max-width: 100%; }
  .thumbnav {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--sketch-card); border-top: 3px solid var(--sketch-graphite); z-index: 60;
  }
  .thumbnav button {
    font-family: var(--sketch-face); font-size: 12px; letter-spacing: 1.1px; text-transform: uppercase;
    padding: 13px 4px; background: transparent; border: 0; border-right: 2px solid var(--sketch-graphite);
    color: var(--sketch-graphite); cursor: pointer;
  }
  .thumbnav button:last-child { border-right: 0; }
  .thumbnav button.is-on { background: var(--sketch-graphite); color: var(--sketch-card); }
  .colophon { padding-bottom: 78px; }
}