/* OakVISION: fictional 1980s community television wrapped around The Epic Gazette. */
:root{--ov-edge:22px;--ov-console:94px;--ov-walnut:#4d260f;--ov-gold:#d9a64d}
html{background:#261307}
body{
  padding:var(--ov-edge) var(--ov-edge) var(--ov-console);
  background-image:
    linear-gradient(rgba(236,222,188,.14),rgba(236,222,188,.14)),
    url('/free-help/assets/oakvision-newsroom-collage.png');
  background-size:cover;
  background-position:center top;
  background-attachment:fixed;
}
body>.wrap{
  position:relative;
  z-index:1;
  width:min(1660px,calc(100vw - 86px));
  padding:0 clamp(18px,3.4vw,58px) 42px;
  background-image:
    linear-gradient(rgba(224,207,173,.73),rgba(224,207,173,.81)),
    url('/free-help/assets/oakvision-newsroom-collage.png');
  background-size:auto,cover;
  background-position:center top;
  background-attachment:scroll,fixed;
  background-blend-mode:normal,multiply;
  border-inline:1px solid rgba(71,50,28,.42);
  box-shadow:0 0 90px rgba(27,13,4,.58),inset 0 0 90px rgba(113,75,34,.08);
}

.oakvision-set{position:fixed;inset:0;z-index:200;pointer-events:none;font-family:"Courier New",monospace;color:#f4d89e}
.oakvision-rail,.oakvision-console{
  position:absolute;
  background-color:#311506;
  background-image:
    linear-gradient(90deg,#0c030188,#cb7a302e 9%,#220b0488 25%,#d9913b27 44%,#17080399 63%,#9f572b3b 82%,#10040199),
    repeating-linear-gradient(2deg,#271005 0 3px,#54260c 4px 7px,#774019 8px 10px,#2d1106 11px 15px);
  box-shadow:inset 0 0 0 1px #d5a05a55,inset 0 0 20px #090200,0 4px 24px #000;
}
.oakvision-top{inset:0 0 auto;height:var(--ov-edge);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:0 34px;font-size:7px;letter-spacing:.2em;text-shadow:0 1px #000}
  .oakvision-top strong{font:italic 900 12px/1 Georgia,serif;color:#e4bb65;letter-spacing:-.02em;text-shadow:1px 1px #120601}
.oakvision-top span{text-align:center;color:#d6b67eaa}
.oakvision-top b{font-size:7px;color:#d6b67eaa}
.oakvision-left{inset:var(--ov-edge) auto var(--ov-console) 0;width:var(--ov-edge)}
.oakvision-right{inset:var(--ov-edge) 0 var(--ov-console) auto;width:var(--ov-edge)}
.oakvision-glass{position:absolute;inset:var(--ov-edge) var(--ov-edge) var(--ov-console);border-radius:28px;overflow:hidden;box-shadow:inset 0 0 0 5px #090807,inset 0 0 34px 10px #0009,0 0 0 2px #b782444f}
.oakvision-glass:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(21,15,10,.14) 4px 5px);mix-blend-mode:multiply;opacity:.58}
.oakvision-glass:after{content:"";position:absolute;inset:-16% 44% 58% -18%;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.18),transparent 68%);transform:rotate(-7deg)}

.oakvision-console{inset:auto 0 0;height:var(--ov-console);display:grid;grid-template-columns:minmax(180px,1fr) 220px 126px 150px;align-items:center;gap:24px;padding:11px 34px;border-top:5px solid #130805}
.oakvision-speaker{display:grid;grid-template-columns:repeat(8,7px);gap:12px;justify-content:start}
.oakvision-speaker i{height:48px;border-radius:6px;background:#0e0804;box-shadow:inset 1px 0 #c48a4b2b}
.oakvision-badge{height:58px;border:1px solid #d2a45a77;padding:7px 12px;display:grid;grid-template-columns:1fr auto;background:#221207b8;box-shadow:inset 0 0 14px #000}
.oakvision-badge small,.oakvision-badge span{font-size:6px;letter-spacing:.16em;color:#baa170}
.oakvision-badge strong{grid-column:1/-1;align-self:center;font:italic 900 21px/1 Georgia,serif;color:#edc66f;letter-spacing:-.04em}
.oakvision-badge span{grid-column:2;grid-row:1;text-align:right}
.oakvision-readout{height:58px;padding:5px 9px;display:grid;grid-template-columns:1fr auto;grid-template-rows:17px 1fr;border:3px solid #15110c;border-radius:5px;background:#100e09;box-shadow:inset 0 0 14px #000,0 0 0 1px #c58a3c55}
.oakvision-readout small{font-size:6px;letter-spacing:.18em;color:#ad9567}.oakvision-readout strong{grid-column:2;grid-row:1/3;align-self:center;color:#ffb52d;font:900 28px/1 ui-monospace,monospace;text-shadow:0 0 9px #ff9d00}.oakvision-readout span{align-self:end;color:#9bd159;font-size:7px;letter-spacing:.16em}
.oakvision-dials{display:flex;justify-content:end;gap:18px}.oakvision-dials i{position:relative;width:54px;height:54px;border:4px solid #111;border-radius:50%;background:repeating-conic-gradient(#171513 0 7deg,#68615a 8deg 12deg);box-shadow:inset 0 0 0 5px #403c37,inset 0 0 0 7px #111,0 2px 0 #bd8546,0 6px 12px #000}.oakvision-dials i:last-child{width:42px;height:42px}.oakvision-dials i:after{content:"";position:absolute;left:50%;top:7px;width:2px;height:15px;background:#efd895;transform-origin:50% 19px;transform:rotate(32deg);box-shadow:0 0 4px #fff}.oakvision-dials i:last-child:after{height:11px;top:5px;transform-origin:50% 15px;transform:rotate(-27deg)}

@media(prefers-reduced-motion:no-preference){.oakvision-glass:before{animation:oakvisionScan 8s linear infinite}@keyframes oakvisionScan{to{transform:translateY(5px)}}}
@media(max-width:900px){
  :root{--ov-edge:8px;--ov-console:8px}
  body{padding:var(--ov-edge)}
  body>.wrap{width:calc(100vw - 24px);padding-inline:14px;background-image:linear-gradient(rgba(247,241,227,.86),rgba(247,241,227,.9)),url('/free-help/assets/oakvision-newsroom-collage.png');background-attachment:scroll}
  .oakvision-top{height:var(--ov-edge);padding:0}.oakvision-top>*{display:none}
  .oakvision-left,.oakvision-right{bottom:0}
  .oakvision-console{display:none}
  .oakvision-glass{inset:var(--ov-edge);border-radius:16px;box-shadow:inset 0 0 0 3px #090807,inset 0 0 22px 6px #0008}
  body{background-size:auto 100vh;background-attachment:scroll}
}
@media(max-width:540px){body>.wrap{width:calc(100vw - 18px);padding-inline:10px}.oakvision-glass:before{opacity:.32}}