/*
 * Lucas Munzlinger Photography — original 2012 storm-media portal treatment.
 * Inspired by the information density and modular chrome of early storm-video
 * websites. No TornadoVideos.net artwork, branding, text, or code is reused.
 */
body.tvn-2012-portal{
  --tvn-bg:#020807;
  --tvn-shell:#07100c;
  --tvn-panel:#101913;
  --tvn-panel-deep:#07100a;
  --tvn-panel-raised:#18231b;
  --tvn-header-top:#4a534d;
  --tvn-header-bottom:#151a17;
  --tvn-line:#4b5d50;
  --tvn-line-soft:#28372d;
  --tvn-green:#2f9255;
  --tvn-green-bright:#7be39c;
  --tvn-green-dark:#0c3a1e;
  --tvn-yellow:#f1d27a;
  --tvn-orange:#e88a3d;
  --tvn-white:#f7faf7;
  --tvn-text:#e4e9e4;
  --tvn-muted:#b2bcb4;
  --tvn-dim:#829087;
  --tvn-danger:#ff9b8d;
  --tvn-font:Verdana,Arial,Helvetica,sans-serif;
  --tvn-display:"Trebuchet MS",Verdana,Arial,sans-serif;
  color:var(--tvn-text);
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% -10%,#15261b 0,#050b08 42rem,#010403 100%);
  font-family:var(--tvn-font);
  font-size:14px;
}

body.tvn-2012-portal *{scrollbar-color:#3c6f4b #07100a}
body.tvn-2012-portal .site-shell{
  width:min(1440px,calc(100% - 24px));
  max-width:none;
  margin:8px auto 24px;
  overflow:clip;
  background:var(--tvn-shell);
  border:1px solid #657268;
  border-top:4px solid var(--tvn-green);
  border-radius:0;
  box-shadow:0 0 0 1px #000,0 18px 70px #000;
}

body.tvn-2012-portal .main-nav{
  min-height:42px;
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  border-bottom:1px solid #000;
  background:linear-gradient(#69716c 0,#323834 43%,#171b18 47%,#080b09 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.28),inset 0 -1px #000;
}
body.tvn-2012-portal .main-nav a{
  min-width:0;
  min-height:42px;
  padding:6px;
  justify-content:center;
  gap:6px;
  color:#fff;
  border-right:1px solid #050706;
  border-left:1px solid rgba(255,255,255,.08);
  font:800 11px/1.08 var(--tvn-font);
  text-align:center;
  text-shadow:0 1px #000;
}
body.tvn-2012-portal .main-nav a span{color:var(--tvn-green-bright);font:700 9px var(--tvn-font)}
body.tvn-2012-portal .main-nav a:hover,
body.tvn-2012-portal .main-nav a.active{
  color:#fff;
  background:linear-gradient(#3ca763,#1b713c 47%,#0c3e20 49%,#071a0e 100%);
  box-shadow:inset 0 -3px var(--tvn-green-bright),inset 0 1px rgba(255,255,255,.24);
}
body.tvn-2012-portal .mobile-nav-tools{display:none}

body.tvn-2012-portal .utility-bar{
  min-height:34px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:#dce7df;
  background:#0b100d;
  border-bottom:1px solid #38463c;
  font:10px/1.4 var(--tvn-font);
  letter-spacing:.03em;
}
body.tvn-2012-portal .portal-subnav{display:flex;align-items:center;gap:0;flex-wrap:wrap}
body.tvn-2012-portal .portal-subnav a{
  min-height:33px;
  display:inline-flex;
  align-items:center;
  padding:0 11px;
  color:#dbe6de;
  border-right:1px solid #303a33;
  text-decoration:none;
}
body.tvn-2012-portal .portal-subnav a:hover,
body.tvn-2012-portal .portal-subnav a:focus-visible{color:var(--tvn-green-bright);background:#131c16}

body.tvn-2012-portal .portal-layout{
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  gap:16px;
  padding:16px 14px 24px;
  background:linear-gradient(90deg,#0a100c 0 214px,#0c130e 214px 100%);
}
body.tvn-2012-portal .portal-sidebar{display:grid;align-content:start;gap:12px}
body.tvn-2012-portal main{min-width:0}

body.tvn-2012-portal .portal-box,
body.tvn-2012-portal .panel,
body.tvn-2012-portal .album-card,
body.tvn-2012-portal .blog-card,
body.tvn-2012-portal .video-card,
body.tvn-2012-portal .featured-media{
  border:1px solid var(--tvn-line);
  border-top:3px solid var(--tvn-green);
  border-radius:0;
  color:var(--tvn-text);
  background:linear-gradient(135deg,var(--tvn-panel-raised),var(--tvn-panel));
  box-shadow:inset 0 0 0 1px #030604,0 3px 10px rgba(0,0,0,.38);
}
body.tvn-2012-portal .portal-box h2,
body.tvn-2012-portal .store-box>h3,
body.tvn-2012-portal .featured-media__bar{
  margin:0;
  color:#fff;
  background:linear-gradient(#545c56 0,#2b302d 47%,#171a18 50%,#0b0e0c 100%);
  border-bottom:1px solid #000;
  font:800 12px/1.25 var(--tvn-font);
  text-shadow:0 1px #000;
}
body.tvn-2012-portal .portal-box h2{padding:7px 9px;text-align:center}
body.tvn-2012-portal .portal-box__content{padding:10px;font-size:11px;line-height:1.55}
body.tvn-2012-portal .portal-directory a,
body.tvn-2012-portal .portal-hazard-list a{
  min-height:34px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  color:#eff5f0;
  border-bottom:1px dotted #35453a;
  font-size:11px;
  text-decoration:none;
}
body.tvn-2012-portal .portal-directory a:hover,
body.tvn-2012-portal .portal-hazard-list a:hover{color:var(--tvn-green-bright);background:#152019;padding-left:13px}
body.tvn-2012-portal .portal-hazard-list{display:grid}
body.tvn-2012-portal .portal-hazard-list a::before{content:"›";color:var(--tvn-green-bright);font-weight:900}

body.tvn-2012-portal .page{min-width:0}
body.tvn-2012-portal .page-heading{
  margin:0 0 14px;
  padding:3px 4px 12px;
  border-bottom:1px solid var(--tvn-line);
}
body.tvn-2012-portal .page-heading h2,
body.tvn-2012-portal .editorial-hero h2{
  color:#fff;
  font:900 clamp(25px,4vw,38px)/1.05 var(--tvn-display);
  letter-spacing:-.025em;
  text-shadow:0 1px #000;
}
body.tvn-2012-portal .section-label,
body.tvn-2012-portal .eyebrow,
body.tvn-2012-portal .blog-subject{
  color:var(--tvn-green-bright);
  font:800 9px/1.4 var(--tvn-font);
  letter-spacing:.13em;
}
body.tvn-2012-portal .smallprint,
body.tvn-2012-portal small{color:var(--tvn-dim)}

body.tvn-2012-portal :where(button,.bevel-button,.admin-small,.purchase-button,.video-license-button,.store-small-button){
  min-height:42px;
  border:1px solid #76c18b;
  border-radius:0;
  color:#fff;
  background:linear-gradient(#3ea861,#1b743c 50%,#0d4e27 51%,#082f18);
  box-shadow:inset 0 1px rgba(255,255,255,.23),2px 2px 0 #020503;
  font:800 10px/1.2 var(--tvn-font);
  letter-spacing:.025em;
  text-transform:uppercase;
  text-shadow:0 1px #000;
}
body.tvn-2012-portal :where(button,.bevel-button,.admin-small,.purchase-button,.video-license-button,.store-small-button):hover{
  color:#fff;
  background:linear-gradient(#55bd75,#238347 50%,#126332 51%,#0a4020);
}
body.tvn-2012-portal :where(button,.bevel-button,.admin-small):disabled{filter:grayscale(.7);opacity:.58}
body.tvn-2012-portal :where(input,select,textarea){
  min-height:42px;
  border:1px solid #536258;
  border-radius:0;
  color:#f5f8f5;
  background:#050a07;
  box-shadow:inset 1px 1px 3px #000;
  font:13px/1.4 var(--tvn-font);
}
body.tvn-2012-portal textarea{min-height:96px}
body.tvn-2012-portal label{color:#d8e1da;font:700 10px/1.5 var(--tvn-font);letter-spacing:.035em}
body.tvn-2012-portal fieldset{border-color:#45564a;border-radius:0}

body.tvn-2012-portal .featured-media__tabs,
body.tvn-2012-portal [role="tablist"]{background:#070b08}
body.tvn-2012-portal :where(.featured-media__tab,[role="tab"]){border-radius:0}
body.tvn-2012-portal :where(.featured-media__tab,[role="tab"])[aria-selected="true"]{
  color:#fff;
  border-color:#77d093;
  background:linear-gradient(#3ca45e,#145e30);
}

body.tvn-2012-portal table{border-collapse:collapse;background:#09100c}
body.tvn-2012-portal :where(th,td){border:1px solid #34463a;padding:8px}
body.tvn-2012-portal th{color:#fff;background:linear-gradient(#343c36,#171c18);font-size:10px;text-transform:uppercase}
body.tvn-2012-portal tr:nth-child(even) td{background:#0e1711}

body.tvn-2012-portal footer{
  border-top:3px solid var(--tvn-green);
  color:#b8c3bb;
  background:linear-gradient(#171c18,#080b09 55%,#030403);
  box-shadow:inset 0 1px rgba(255,255,255,.1);
  font-size:10px;
}
body.tvn-2012-portal .footer-links{gap:0}
body.tvn-2012-portal .footer-links a{padding:4px 8px;border-right:1px solid #354138;color:#bde4c8}
body.tvn-2012-portal .counter b{color:var(--tvn-green-bright);border-radius:0;background:#020403}

/* Admin keeps the same portal language without shrinking working controls. */
body.tvn-2012-portal #admin-dashboard :where(.admin-toolbar,.cs-header,.professional-heading,.growth-dashboard-heading){border-radius:0}
body.tvn-2012-portal #admin-dashboard :where(.panel,.cs-shell,.professional-desk){box-shadow:inset 0 0 0 1px #020503,0 3px 12px rgba(0,0,0,.45)}
body.tvn-2012-portal #admin-dashboard h3{font-family:var(--tvn-display)}

/* Public hazard directories and permanent newsroom identifiers. */
body.tvn-2012-portal .hazard-index-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 14px;
}
body.tvn-2012-portal .hazard-index-card{
  position:relative;
  min-height:170px;
  padding:16px;
  color:var(--tvn-text);
  border:1px solid var(--tvn-line);
  border-top:3px solid var(--tvn-green);
  background:linear-gradient(145deg,var(--tvn-panel-raised),var(--tvn-panel-deep));
  box-shadow:inset 0 1px rgba(255,255,255,.08),2px 2px 0 #020503;
}
body.tvn-2012-portal .hazard-index-card:hover{border-color:var(--tvn-green-bright);background:#17251b}
body.tvn-2012-portal .hazard-index-card h3{margin:18px 0 6px;color:#fff;font:900 18px/1.1 var(--tvn-display)}
body.tvn-2012-portal .hazard-index-card p{margin:0 0 12px;color:var(--tvn-muted);font-size:12px}
body.tvn-2012-portal .hazard-index-card strong{color:var(--tvn-green-bright);font-size:9px;letter-spacing:.08em}
body.tvn-2012-portal .hazard-index-count{
  position:absolute;
  top:9px;
  right:9px;
  min-width:29px;
  padding:4px 6px;
  color:#06140b;
  background:var(--tvn-green-bright);
  border:1px solid #d8ffe2;
  font:900 11px/1 var(--tvn-font);
  text-align:center;
}
body.tvn-2012-portal .hazard-sibling-links{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}
body.tvn-2012-portal .hazard-sibling-links a{padding:6px 8px;border:1px solid #435448;color:#bde4c8;background:#080e0a;font-size:10px}
body.tvn-2012-portal .hazard-sibling-links a[aria-current="page"]{color:#041208;border-color:#b1f2c5;background:var(--tvn-green-bright)}
body.tvn-2012-portal .hazard-media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
body.tvn-2012-portal .hazard-media-card{display:grid;grid-template-columns:140px 1fr;min-width:0;border:1px solid var(--tvn-line);border-top:2px solid var(--tvn-green);background:var(--tvn-panel)}
body.tvn-2012-portal .hazard-media-card>div{padding:12px}
body.tvn-2012-portal .hazard-media-card h3{margin:2px 0 7px;font:900 15px/1.2 var(--tvn-display)}
body.tvn-2012-portal .hazard-media-card p{margin:0 0 8px;color:var(--tvn-muted);font-size:12px}
body.tvn-2012-portal .hazard-media-card small{color:var(--tvn-green-bright);font:700 9px/1.5 "Courier New",monospace}
body.tvn-2012-portal .hazard-media-image{min-height:130px;background:#020403}
body.tvn-2012-portal .hazard-media-image img{width:100%;height:100%;object-fit:cover}
body.tvn-2012-portal .public-media-id{margin:8px 0;color:#c0cabf;font:700 10px/1.5 "Courier New",monospace;letter-spacing:.04em}
body.tvn-2012-portal .public-media-id code{display:inline-block;padding:2px 5px;color:var(--tvn-green-bright);border:1px solid #3e654b;background:#030705}

/* New newsroom tools inherit the compact square-cornered 2012 module chrome. */
body.tvn-2012-portal :where(.video-field-tools,.video-media-editor,.licensing-portal>*,.license-portal-layout>*,.story-package-card,.footage-bundle-list label){border-radius:0}
body.tvn-2012-portal :where(.video-field-tools,.video-media-editor,.license-portal-heading,.license-calculator,.license-terms-note,.license-rights,.footage-bundle,.story-packages,.license-inquiry-summary){border-color:var(--tvn-line);border-top-color:var(--tvn-green);background:linear-gradient(var(--tvn-panel-raised),var(--tvn-panel))}
body.tvn-2012-portal .licensing-portal{margin-top:16px;font-family:var(--tvn-font)}
body.tvn-2012-portal .license-portal-heading h2{font:900 27px/1.05 var(--tvn-display)}
body.tvn-2012-portal .video-media-tools-mount{margin-top:16px}
body.tvn-2012-portal .video-field-tools__heading h3,
body.tvn-2012-portal .licensing-portal h3{font-family:var(--tvn-display)}
body.tvn-2012-portal .storm-lifecycle ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;list-style:none}
body.tvn-2012-portal .storm-lifecycle ol li{padding:10px;border:1px solid #415348;background:#09100c}
body.tvn-2012-portal .licensing-fallback{margin-top:16px}

@media(max-width:900px){
  body.tvn-2012-portal .site-shell{width:100%;margin:0;border-left:0;border-right:0}
  body.tvn-2012-portal .mobile-nav-bar{
    position:sticky;
    top:0;
    z-index:120;
    min-height:54px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    background:linear-gradient(#53605a 0,#28312c 44%,#121713 47%,#060a07 100%);
    border-top:2px solid var(--tvn-green);
    border-bottom:1px solid #000;
    box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.2);
  }
  body.tvn-2012-portal .mobile-nav-bar a,
  body.tvn-2012-portal .mobile-nav-bar button{
    min-width:0;
    min-height:54px;
    display:flex;
    align-items:center;
    padding:0 16px;
    color:#fff;
    background:transparent;
    border:0;
    font:800 13px/1 var(--tvn-font);
    letter-spacing:.035em;
    text-decoration:none;
    text-shadow:0 1px 2px #000;
  }
  body.tvn-2012-portal .mobile-nav-bar a{
    justify-content:flex-start;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    border-right:1px solid #050706;
  }
  body.tvn-2012-portal .mobile-nav-bar button{
    min-width:104px;
    justify-content:center;
    gap:8px;
    border-left:1px solid rgba(255,255,255,.16);
    cursor:pointer;
  }
  body.tvn-2012-portal .mobile-nav-bar button[aria-expanded="true"]{
    background:linear-gradient(#318f52,#155e33 48%,#0b3c1f 50%,#071b0e);
    box-shadow:inset 0 -3px var(--tvn-green-bright);
  }
  body.tvn-2012-portal .main-nav{
    position:sticky;
    top:54px;
    z-index:119;
    display:none;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-height:70vh;
    max-height:min(70dvh,620px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0;
    background:#0a0f0c;
    border-bottom:2px solid var(--tvn-green);
    box-shadow:0 10px 22px rgba(0,0,0,.65);
  }
  body.tvn-2012-portal .main-nav.is-open{display:grid}
  body.tvn-2012-portal .main-nav>a{min-height:48px;justify-content:flex-start;padding:10px 14px;text-align:left}
  body.tvn-2012-portal .main-nav>a .store-cart-badge{display:inline-flex}
  body.tvn-2012-portal .mobile-nav-tools{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1px;
    padding:9px 10px 11px;
    background:#070c09;
    border-top:1px solid #405246;
  }
  body.tvn-2012-portal .mobile-nav-tools__label{
    grid-column:1/-1;
    padding:2px 4px 8px;
    color:var(--tvn-green-bright);
    font:800 9px/1 var(--tvn-font);
    letter-spacing:.14em;
  }
  body.tvn-2012-portal .mobile-nav-tools a{
    min-height:44px;
    justify-content:flex-start;
    padding:0 13px;
    color:#dce7df;
    background:#111a14;
    border:1px solid #27372c;
    font:700 11px/1.2 var(--tvn-font);
    text-align:left;
  }
  body.tvn-2012-portal .mobile-nav-tools a:hover,
  body.tvn-2012-portal .mobile-nav-tools a:focus-visible{color:#fff;background:#173222;border-color:#4a7758}
  body.tvn-2012-portal .portal-layout{grid-template-columns:1fr;padding:12px;background:#0c130e}
  body.tvn-2012-portal .portal-sidebar{grid-template-columns:repeat(2,minmax(0,1fr));order:2}
  body.tvn-2012-portal .portal-directory{grid-column:1/-1}
  body.tvn-2012-portal .portal-directory nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.tvn-2012-portal .utility-bar{display:none}
  body.tvn-2012-portal .hazard-index-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.tvn-2012-portal .hazard-media-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  body.tvn-2012-portal .mobile-nav-bar a,
  body.tvn-2012-portal .mobile-nav-bar button{padding-inline:12px;font-size:12px}
  body.tvn-2012-portal .mobile-nav-bar button{min-width:92px}
  body.tvn-2012-portal .main-nav{grid-template-columns:1fr;max-height:calc(100dvh - 54px)}
  body.tvn-2012-portal .mobile-nav-tools{grid-template-columns:1fr}
  body.tvn-2012-portal .mobile-nav-tools__label{grid-column:1}
}

@media(max-width:600px){
  body.tvn-2012-portal{font-size:14px;background:#050a07}
  body.tvn-2012-portal .portal-sidebar{grid-template-columns:1fr}
  body.tvn-2012-portal .portal-directory{grid-column:auto}
  body.tvn-2012-portal .portal-directory nav{grid-template-columns:1fr 1fr}
  body.tvn-2012-portal .portal-box__content{font-size:12px}
  body.tvn-2012-portal :where(button,.bevel-button,.admin-small,.purchase-button,.video-license-button,.store-small-button){min-height:46px}
  body.tvn-2012-portal .hazard-index-grid{grid-template-columns:1fr}
  body.tvn-2012-portal .hazard-media-card{grid-template-columns:1fr}
  body.tvn-2012-portal .hazard-media-image{min-height:180px}
  body.tvn-2012-portal .storm-lifecycle ol{grid-template-columns:1fr}
}

@media(max-width:360px){
  body.tvn-2012-portal .portal-directory nav{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  body.tvn-2012-portal *,body.tvn-2012-portal *::before,body.tvn-2012-portal *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
