/*
Theme Name: ROAR V2
Theme URI: https://zackhill.dev/roar
Author: Zack Hill
Author URI: https://zackhill.dev
Description: The Lion Herald newsroom, built to the approved design set screen by screen — broadsheet front page with four hero variants, metered paywall, live desk, Herald Film, podcast, e-paper, briefings, events, quiz and a nine-screen reader account. Pairs with the Lion Herald Newsroom plugin, which holds the content types, the money and the back of house.
Version: 2.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roar-v2
Domain Path: /languages
Tags: news, magazine, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, footer-widgets, full-width-template
*/

/* ------------------------------------------------------------------ *
 * Tokens. Every value here is transcribed from the design set; nothing
 * in a template invents a colour or a face outside this block.
 * ------------------------------------------------------------------ */
:root{
  --paper:#fcfbf8;
  --ink:#16120e;
  --sub:#6f665b;
  --rule:#e3ded4;
  --surface:#efece4;
  --tint:#fbf1ee;
  --accent:#8f2118;
  --accent-dark:#6d1811;
  --yellow:#f5c518;
  --bar:#16120e;
  --meter:#b3261c;
  --panel:#1a1a1a;
  --panel-2:#131313;
  --wrap:1400px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html[data-lh-dark]{
  --paper:#14110e;
  --ink:#f3efe7;
  --sub:#a8a096;
  --rule:#332d26;
  --surface:#201b16;
  --tint:#241b19;
  --bar:#0d0b09;
}

html,body{margin:0;padding:0;background:var(--paper)}
*{box-sizing:border-box}
body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark);text-decoration:underline}
button{font:inherit;cursor:pointer;color:inherit}
img{max-width:100%;height:auto}
input,textarea,select{max-width:100%;font-family:var(--sans)}
h1,h2,h3,h4{font-weight:600;text-wrap:pretty}

/* The two animations the design uses, and nothing else. */
@keyframes lhp{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes lhin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.screen-reader-text:focus{
  position:fixed!important;top:10px;left:10px;width:auto;height:auto;clip:auto;
  background:var(--paper);color:var(--ink);padding:12px 18px;z-index:100000;
  font-family:var(--sans);font-size:14px;font-weight:600;border:1px solid var(--ink);
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

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