/* ==============================================================
   dean-horvath.com : shared styles
   ==============================================================
   Everything every page shares lives here: fonts, colors, the
   four text styles carried over from the Showit site, the header,
   the pop-out menu, the footer, and the fade-in on scroll.
   Page-specific layout lives in a <style> block on that page.
   ============================================================== */

/* ---------- fonts ----------
   Free fonts, hosted with the site. They replace the Showit library fonts,
   which were licensed for Showit sites only:
     Newsreader     replaces Editors Note (headings, set at weight 450 and
                    a little tighter) and Times Now / Times Neutra (light
                    serif text and italics, weight 300; 200 for big numbers)
     Gilda Display  replaces Kudryashev Headline
     Marcellus SC   replaces Copperplate (small capital labels) */
@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader.woff2') format('woff2');font-weight:200 600;font-display:swap}
@font-face{font-family:'Newsreader';font-style:italic;src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');font-weight:200 600;font-display:swap}
@font-face{font-family:'Gilda Display';src:url('/assets/fonts/gilda-display.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Marcellus SC';src:url('/assets/fonts/marcellus-sc.woff2') format('woff2');font-display:swap}
/* Inter and Oswald come from Google Fonts, linked in each page's head. */

/* ---------- colors ---------- */
:root{
  --paper:#F6F4EE;      /* page background */
  --cream:#F5F0E1;      /* warm section bands */
  --ink:#1A1B1D;        /* headings and body text */
  --ink-80:rgba(26,27,29,.8);
  --navy:#00205B;       /* navy bands, buttons, pop-out menu */
  --link:#003EB1;       /* links in paragraphs */
  --green:#00843D;      /* link hover */
  --charcoal:#1A1B1D;
  --white:#fff;

  --serif:'Newsreader', Georgia, serif;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --display:'Oswald', 'Arial Narrow', sans-serif;

  --nav-h:103px;
  --wrap:1200px;
}
@media (max-width:767px){ :root{ --nav-h:54px } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Never scroll sideways: anything wider than the window (like the spare end
   of a text box) is trimmed, as Showit did. 'clip' keeps the sticky header working. */
html,body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink-80);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p{margin:0}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- the four Showit text styles ----------
   Desktop sizes first, phone sizes below 768px, exactly as Showit had them. */
.t-heading{font-family:var(--serif);font-weight:450;letter-spacing:-.035em;color:var(--ink);line-height:1.1;font-size:95px}
.t-sub{font-family:var(--sans);font-weight:300;color:var(--ink);line-height:1.3;letter-spacing:-.02em;font-size:28px}
.t-body{font-family:var(--sans);font-weight:300;color:var(--ink-80);line-height:1.6;font-size:17px}
.t-title{font-family:var(--display);font-weight:500;color:var(--ink);line-height:1.1;text-transform:uppercase;font-size:95px}
.t-body a,.t-sub a{color:var(--link);text-decoration:underline}
.t-body a:hover,.t-sub a:hover{color:var(--green);text-decoration:none}
@media (max-width:767px){
  /* Showit stretched its 320px phone design to the phone's width, so
     sizes scale with the screen. --u is defined further down. */
  .t-heading{font-size:calc(30*var(--u))}
  .t-sub{font-size:calc(18*var(--u))}
  .t-body{font-size:calc(14*var(--u))}
  .t-title{font-size:calc(30*var(--u))}
}

/* ---------- buttons ---------- */
.btn{display:inline-block;border-radius:10px;padding:10px 14px;font-family:var(--sans);font-weight:300;letter-spacing:-.02em;line-height:1.3;text-decoration:none;transition:.5s}
.btn-primary{background:var(--navy);color:#fff}
.btn-secondary{border:2px solid var(--navy);color:var(--navy)}
.btn-secondary:hover{opacity:.7}

/* ---------- fade in on scroll ----------
   Showit faded most blocks in as they came into view. Anything with
   class="reveal" does the same. Hidden only when JavaScript is running
   (html.js), so with no JavaScript everything is simply visible. */
html.js .reveal{opacity:0;transition:opacity 1s ease}
html.js .reveal.in{opacity:1}
@media (prefers-reduced-motion:reduce){ html.js .reveal{opacity:1;transition:none} }

/* Header, pop-out menu and footer styles are appended below by the
   shared-parts build. */

/* ---------- phone sizing helper ----------
   Showit drew the phone layout on a 320px-wide canvas and stretched it
   to fill the phone, so on a 390px phone everything is 1.22x bigger.
   --u is "one Showit phone pixel": write 14px as calc(14*var(--u)). */
:root{--u:1px}
@media (max-width:767px){ :root{ --u:calc(100vw / 320) } }

/* show-on-desktop-only / show-on-phone-only */
@media (min-width:768px){ .m-only{display:none!important} }
@media (max-width:767px){ .d-only{display:none!important} }

/* ==============================================================
   HEADER (the top bar)
   ============================================================== */
.site-header{position:relative;z-index:12;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:103px;background:var(--paper)}
.hdr-nav{display:flex;align-items:center}
.hdr-nav a{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.6;color:var(--ink);text-decoration:none;transition:opacity .5s}
.hdr-nav a:hover{opacity:.7}
.hdr-left{gap:30px;padding-left:60px}
.hdr-right{display:flex;justify-content:flex-end;align-items:center;padding-right:15px}
.hdr-right .hdr-nav{gap:35px;margin-right:34px;margin-top:-4px}
.hdr-logo{position:relative;top:3px;font-family:var(--display);font-weight:400;font-size:52px;line-height:1;letter-spacing:-.05em;color:#070707;text-decoration:none;white-space:nowrap;transition:color .5s}
.hdr-logo:hover{color:#405884}
.hdr-burger{display:block;width:40px;height:32px;padding:0;border:0;background:none;cursor:pointer;transition:opacity .5s}
.hdr-burger:hover{opacity:.7}
.hdr-burger svg{display:block;width:100%;height:100%;fill:#070707}
/* the inline links get tight on small laptops: hide them before they collide */
@media (min-width:768px) and (max-width:1099px){
  .hdr-nav a{font-size:12px}
  .hdr-left{gap:16px;padding-left:24px}
  .hdr-right .hdr-nav{gap:16px;margin-right:16px}
  .hdr-logo{font-size:40px}
}
/* phone: just the name and the menu button, stuck to the top while scrolling */
@media (max-width:767px){
  .site-header{position:sticky;top:0;display:flex;justify-content:center;height:calc(54*var(--u))}
  .hdr-nav{display:none}
  .hdr-logo{top:calc(2.5*var(--u));font-size:calc(28*var(--u));line-height:1.1}
  .hdr-right{position:absolute;top:calc(9*var(--u));right:calc(17*var(--u));padding:0}
  .hdr-burger{width:calc(28*var(--u));height:calc(37*var(--u))}
  .hdr-burger svg{fill:var(--ink)}
}

/* ==============================================================
   POP-OUT MENU (full screen, navy). Hidden until the menu button
   adds class="open". Fades in, fades out (slides up on phones).
   ============================================================== */
.site-menu{position:fixed;inset:0;z-index:100;display:flex;overflow-y:auto;background:var(--navy);color:#fff;
  opacity:0;visibility:hidden;transition:opacity .6s,visibility 0s .6s}
.site-menu.open{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s}
.menu-in{margin:auto;display:flex;justify-content:space-between;width:100%;max-width:1200px;height:877px;flex:none;padding:145px 97px 0 87px}
.menu-photo{margin:0;width:375px}
.menu-photo img{width:358px;height:459px;margin-left:auto;object-fit:cover;object-position:80% 80%}
.menu-photo figcaption{margin-top:23px;font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;text-align:right;color:#fff}
.menu-links{display:flex;flex-direction:column;align-items:flex-end;padding-top:15px}
.menu-links a{font-family:var(--display);font-weight:500;font-size:65px;line-height:74px;text-transform:uppercase;color:#fff;text-decoration:none;transition:color .5s}
.menu-links a:hover{color:var(--green)}
.menu-close{position:absolute;top:30px;right:35px;width:34px;height:52px;padding:0;border:0;background:none;cursor:pointer}
.menu-close svg{display:block;width:100%;height:100%;fill:#fff;transition:fill .5s}
.menu-close:hover svg{fill:var(--cream)}
@media (max-width:767px){
  .site-menu{transform:translateY(-100%);transition:transform .5s,opacity 0s .5s,visibility 0s .5s}
  .site-menu.open{transform:none;transition:opacity .5s,transform 0s,visibility 0s}
  .menu-in{height:auto;min-height:100%;flex-direction:column;justify-content:flex-end;padding:calc(60*var(--u)) calc(16*var(--u)) calc(138*var(--u))}
  .menu-photo{display:none}
  .menu-links{padding:0}
  .menu-links a{font-size:calc(30*var(--u));line-height:calc(39.5*var(--u))}
  .menu-links .menu-blog{order:1}   /* on phones Blog sits last, as on the old site */
  .menu-close{top:calc(13*var(--u));right:calc(10*var(--u));width:calc(35*var(--u));height:calc(31*var(--u))}
}

/* ==============================================================
   FOOTER (dark)
   ============================================================== */
.site-footer{background:var(--charcoal);color:rgba(255,255,255,.8);font-family:var(--sans);font-weight:300}
.site-footer a{color:inherit;text-decoration:none}
.ftr-in{display:grid;grid-template-columns:400px 359px 255px 1fr;max-width:1200px;height:441px;margin:0 auto;padding-top:84px}
.ftr-brand{text-align:right}
.ftr-logo{display:block;font-family:var(--display);font-weight:400;font-size:71px;line-height:1;letter-spacing:-.05em;color:#CDCDCD!important;transition:color .5s}
.ftr-logo:hover{color:#405884!important}
.ftr-brand p{margin-top:13px;font-size:18px;line-height:1.5}
.ftr-around{grid-column:3}
.ftr-col{display:flex;flex-direction:column;align-items:flex-start;font-size:17px;line-height:1.6}
.ftr-h{font-weight:700}
.ftr-around a{margin-top:6px}
.ftr-around .ftr-h + a{margin-top:5px}
.ftr-links .ftr-h + a{margin-top:9px}
.ftr-icons{display:flex;align-items:center;gap:7px;margin:4px 0 18px}
.ftr-icons img{width:20px;height:20px;object-fit:contain}
.ftr-icons-2{margin-bottom:17px}
.ftr-links .ftr-gap{margin-top:16px;margin-left:2px}
.ftr-bar{background:#262626;height:27px;display:flex;align-items:center;justify-content:center}
.ftr-bar p{font-size:11px;line-height:1.6;color:#929292;text-align:center}
.ftr-bar a{color:#A6A6A6;text-decoration:underline}
.ftr-bar a:hover{color:#9F9F9F;opacity:.76}
@media (min-width:768px) and (max-width:1199px){
  .ftr-in{grid-template-columns:1.6fr 1fr 1fr 1fr;padding-left:24px;padding-right:24px}
  .ftr-logo{font-size:56px}
}
@media (max-width:767px){
  .ftr-in{display:flex;flex-direction:column;align-items:center;height:calc(567*var(--u));padding-top:calc(43*var(--u));text-align:center}
  .ftr-brand{text-align:center}
  .ftr-logo{font-size:calc(28*var(--u));line-height:1.1}
  .ftr-brand p{margin-top:calc(14*var(--u));font-size:calc(14*var(--u));line-height:1.6}
  .ftr-around{display:none}
  .ftr-col{align-items:center;font-size:calc(14*var(--u))}
  .ftr-links{margin-top:calc(70*var(--u))}
  .ftr-links .ftr-h + a{margin-top:calc(11.6*var(--u))}
  .ftr-icons{gap:calc(20*var(--u));margin:calc(3.6*var(--u)) 0 calc(16*var(--u))}
  .ftr-icons img{width:calc(20*var(--u));height:calc(20*var(--u))}
  .ftr-icons-2{margin-bottom:calc(21*var(--u))}
  .ftr-links .ftr-gap{margin:calc(11.6*var(--u)) 0 0}
  .ftr-bar{height:calc(25*var(--u))}
  .ftr-bar p{font-size:calc(8*var(--u))}
}

/* ---------- italics ----------
   Showit set every italic in a light serif italic, site-wide. */
main i, main em { font-family:'Newsreader', Georgia, serif; font-style:italic;font-weight:300}