/* ============================================================
   OFF DUTY — the camera wall
   Self-contained skin (no styles.css), so it carries its own reset.

   A security desk, not an archive and not a broadcast: green
   phosphor on grey, a wall of small pictures, a multiplexer that
   cycles them whether or not anybody is watching. The only
   decoration is the classification stamp on each tile, which is
   the joke, and which is why the stamps are the brightest thing
   on the page.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --od-desk:  #080b09;
  --od-panel: #0f1512;
  --od-panel2:#151d19;
  --od-rule:  #1f2b25;
  --od-rule-hi:#33473d;
  --od-ink:   #dce8e1;
  --od-dim:   #9db1a7;
  --od-low:   #6b8078;
  --od-green: #7dd3a0;
  --od-green-d:#3f7d5c;
  --od-amber: #f0b429;
  --od-red:   #e2483d;
  --od-mono: "Share Tech Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --od-disp: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --od-pad: clamp(1rem, 3vw, 2.2rem);
}

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

body.od-body {
  margin: 0;
  min-height: 100dvh;
  background: var(--od-desk);
  color: var(--od-ink);
  font-family: var(--od-disp);
  font-size: 17px;
  line-height: 1.5;
  background-image:
    radial-gradient(ellipse 110% 50% at 50% 0%, rgba(125, 211, 160, .05), transparent 62%);
}

.od-skip { position: absolute; left: -9999px; top: 0; background: var(--od-green); color: #06120c; padding: .6rem 1rem; z-index: 100; }
.od-skip:focus { left: 0; }

/* ------------------------------------------------------- top rail */
.od-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .7rem var(--od-pad);
  border-bottom: 1px solid var(--od-rule);
  background: linear-gradient(180deg, rgba(15, 21, 18, .96), rgba(8, 11, 9, .9));
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(6px);
}
.od-brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.od-brand img { display: block; border-radius: 4px; }
.od-brand strong { display: block; font-size: 1rem; letter-spacing: .1em; color: #fff; }
.od-brand em {
  display: block; font-style: normal; font-family: var(--od-mono);
  font-size: .63rem; letter-spacing: .2em; color: var(--od-green-d);
}
.od-top-right { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.od-clock {
  font-family: var(--od-mono); font-size: .76rem; color: var(--od-dim);
  font-variant-numeric: tabular-nums;
}
.od-rec {
  font-family: var(--od-mono); font-size: .62rem; letter-spacing: .16em;
  border: 1px solid var(--od-red); color: var(--od-red);
  padding: .25rem .5rem; border-radius: 2px;
  display: inline-flex; align-items: center; gap: .4em;
}
.od-rec::before {
  content: ""; width: .5em; height: .5em; border-radius: 50%;
  background: var(--od-red); animation: od-pip 1.6s steps(1, end) infinite;
}
@keyframes od-pip { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .2 } }

.od-wrap { max-width: 84rem; margin: 0 auto; padding: var(--od-pad) var(--od-pad) 5rem; }

/* --------------------------------------------------------- header */
.od-kicker {
  margin: 0 0 .5rem; font-family: var(--od-mono);
  font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--od-green);
}
.od-wrap h1 {
  margin: 0; font-size: clamp(2rem, 6.5vw, 3.7rem); line-height: 1;
  letter-spacing: .02em; color: #fff; text-wrap: balance;
}
.od-lead { margin: .8rem 0 0; max-width: 60ch; color: var(--od-dim); font-size: 1.05rem; }
.od-lead a { color: var(--od-green); }

.od-strip {
  display: grid; gap: .7rem; margin: 1.5rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  border-top: 1px solid var(--od-rule); border-bottom: 1px solid var(--od-rule);
  padding: .9rem 0;
}
.od-s b {
  display: block; font-family: var(--od-mono); font-size: 1.15rem;
  color: var(--od-green); line-height: 1.2;
}
.od-s span {
  font-family: var(--od-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--od-low);
}

/* ------------------------------------------------------ the desk */
.od-desk { margin: 2rem 0 0; display: grid; gap: 1.3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
  .od-desk { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; }
  .od-main { position: sticky; top: 5.4rem; }
}

.od-main { display: grid; gap: .8rem; max-width: 20rem; margin-inline: auto; width: 100%; }
@media (min-width: 62rem) { .od-main { margin-inline: 0; } }

.od-frame {
  position: relative;
  /* Most of the registry is 704x1280 portrait, but two captures were shot
     landscape. Cropping those into a portrait hole throws away most of the
     picture, so the frame takes its shape from whatever is loaded and the
     JS sets --od-ar per clip. */
  aspect-ratio: var(--od-ar, 704 / 1280);
  background: #040705;
  border: 1px solid var(--od-rule-hi);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.od-frame .cap { position: absolute; inset: 0; height: 100%; }
.od-frame .cap video { width: 100%; height: 100%; object-fit: cover; }

/* the burn-in every cheap recorder puts on the picture */
.od-burn {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  font-family: var(--od-mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .88); text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}
.od-burn span { position: absolute; padding: .45em .6em; }
.od-burn .od-b-tl { top: 0; left: 0; }
.od-burn .od-b-tr { top: 0; right: 0; }
.od-burn .od-b-bl { bottom: 0; left: 0; }

.od-idle {
  position: absolute; inset: 0; z-index: 8;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 1.2rem; text-align: center;
  background: radial-gradient(ellipse at center, #0d1712 0%, #050806 78%);
  font-family: var(--od-mono);
}
.od-idle b { font-size: 1rem; letter-spacing: .2em; color: var(--od-green); font-weight: 400; }
.od-idle span { font-size: .66rem; letter-spacing: .14em; color: var(--od-low); max-width: 26ch; line-height: 1.6; }

.od-controls { display: flex; flex-wrap: wrap; gap: .4rem; }
.od-key {
  flex: 1 1 auto; min-width: 5rem; min-height: 44px;
  font-family: var(--od-mono); font-size: .63rem; letter-spacing: .1em; text-transform: uppercase;
  background: linear-gradient(180deg, #16201b, #101814);
  color: var(--od-dim);
  border: 1px solid var(--od-rule-hi); border-radius: 4px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 2px 0 #060a08;
}
.od-key:hover { color: #fff; border-color: var(--od-green); }
.od-key[aria-pressed="true"] { color: #06120c; background: var(--od-green); border-color: var(--od-green); }
.od-key:active { transform: translateY(1px); box-shadow: none; }

.od-card {
  background: var(--od-panel); border: 1px solid var(--od-rule);
  border-left: 3px solid var(--od-green); padding: .85rem 1rem;
}
.od-card .od-cref {
  display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
  font-family: var(--od-mono); font-size: .62rem; letter-spacing: .1em; color: var(--od-low);
}
.od-card h2 { margin: .3rem 0 .35rem; font-size: 1.28rem; color: #fff; line-height: 1.15; }
.od-card p { margin: 0 0 .5rem; color: var(--od-dim); font-size: .95rem; }
.od-card .od-note {
  margin: 0; font-family: var(--od-mono); font-size: .72rem; line-height: 1.55;
  color: var(--od-green-d); border-left: 2px solid var(--od-rule-hi); padding-left: .55rem;
}
.od-card .od-note::before { content: "REGISTRY  "; color: var(--od-low); }

/* ---------------------------------------------------- the wall */
.od-wall { min-width: 0; }
.od-wall > h2 {
  margin: 0 0 .5rem; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--od-green); border-bottom: 1px solid var(--od-rule); padding-bottom: .45rem;
}

.od-rooms { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 .6rem; }
.od-room {
  font-family: var(--od-mono); font-size: .66rem; letter-spacing: .1em;
  background: transparent; color: var(--od-dim);
  border: 1px solid var(--od-rule); border-radius: 2px;
  padding: .5rem .7rem; min-height: 44px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: .05rem;
}
.od-room small { font-size: .84em; color: var(--od-low); }
.od-room:hover { border-color: var(--od-rule-hi); color: #fff; }
.od-room[aria-pressed="true"] { border-color: var(--od-green); color: var(--od-green); background: rgba(125, 211, 160, .1); }
.od-room[aria-pressed="true"] small { color: var(--od-green); }

.od-roomcard {
  background: var(--od-panel); border: 1px solid var(--od-rule);
  border-left: 3px solid var(--od-green-d); padding: .8rem 1rem; margin: 0 0 1.1rem;
}
.od-roomcard h3 {
  margin: 0; font-family: var(--od-mono); font-size: .76rem;
  letter-spacing: .16em; color: var(--od-green);
}
.od-roomcard p.od-rstrap {
  margin: .15rem 0 .4rem; font-family: var(--od-mono); font-size: .62rem;
  letter-spacing: .12em; color: var(--od-low);
}
.od-roomcard p { margin: 0; color: var(--od-dim); font-size: .95rem; max-width: 66ch; }

.od-tiles {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}
.od-tile { display: flex; flex-direction: column; }
.od-tile.is-hidden { display: none; }
.od-tilebtn {
  display: block; width: 100%; padding: 0; border: 1px solid var(--od-rule);
  background: var(--od-panel); cursor: pointer; color: inherit; font: inherit;
  -webkit-tap-highlight-color: transparent; text-align: left;
}
.od-tilebtn:hover { border-color: var(--od-rule-hi); }
.od-tile.is-on .od-tilebtn { border-color: var(--od-green); box-shadow: 0 0 0 1px var(--od-green); }
.od-tile .cap { border-bottom: 1px solid var(--od-rule); aspect-ratio: 704 / 1280; }
/* the wall stays a grid whatever shape the poster is - a thumbnail may be
   cropped, the main frame is where the whole picture lives */
.od-tile .cap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.od-tmeta { padding: .5rem .6rem .6rem; display: grid; gap: .25rem; }
.od-tref {
  display: flex; justify-content: space-between; gap: .4rem;
  font-family: var(--od-mono); font-size: .58rem; letter-spacing: .08em; color: var(--od-low);
}
.od-tile strong { font-family: var(--od-disp); font-size: .98rem; color: #fff; font-weight: 400; line-height: 1.2; }

/* the stamp is the joke, so it is the brightest thing here */
.od-stamp {
  justify-self: start; margin-top: .1rem;
  font-family: var(--od-mono); font-size: .58rem; letter-spacing: .12em;
  border: 1px solid currentColor; border-radius: 2px;
  padding: .1rem .32rem; transform: rotate(-1.6deg);
}
.od-stamp-PUBLIC       { color: var(--od-low) }
.od-stamp-CONFIDENTIAL { color: var(--od-green) }
.od-stamp-SECRET       { color: var(--od-amber) }
.od-stamp-TOP          { color: var(--od-red) }

/* ------------------------------------------------------- memo */
.od-memo { margin: 2.8rem 0 0; }
.od-memo h2 {
  margin: 0 0 .8rem; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--od-green); border-bottom: 1px solid var(--od-rule); padding-bottom: .45rem;
}
.od-memolist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.od-memolist li {
  font-family: var(--od-mono); font-size: .74rem; letter-spacing: .06em; color: var(--od-dim);
  border-left: 2px solid var(--od-rule-hi); padding: .45rem .8rem; background: var(--od-panel);
}

/* ------------------------------------------------------- footer */
.od-foot {
  margin-top: 3rem; padding-top: 1.1rem; border-top: 1px solid var(--od-rule);
  font-family: var(--od-mono); font-size: .74rem; color: var(--od-low);
}
.od-foot a { color: var(--od-green); }
.od-foot p { margin: 0 0 .4rem; max-width: 76ch; }

.od-key:focus-visible, .od-room:focus-visible, .od-tilebtn:focus-visible {
  outline: 2px solid var(--od-green); outline-offset: 2px;
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) { .od-rec::before { animation: none !important; } }