/************************************************************************************
CINEMAGRAPHE – CONSOLIDATED STYLESHEET – JULY 2026
Traditional, dignified visual direction VERSION F
*************************************************************************************/

/* Suggested font imports
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap" rel="stylesheet">
*/

:root{
  --bg-page: #e7e0d4;
  --bg-panel: #f7f2e8;
  --bg-panel-alt: #ede5d8;
  --bg-soft: #e4dbc9;
  --ink: #2f2a24;
  --ink-soft: #5e564b;
  --ink-muted: #7a7266;
  --navy: #243142;
  --navy-2: #314257;
  --navy-3: #1c2633;
  --accent: #8a6d46;
  --accent-soft: #b69a72;
  --accent-deep: #6e5638;
  --line: #cbbda7;
  --line-soft: #ddd3c3;
  --white: #ffffff;
  --shadow: 0 8px 24px rgba(0,0,0,.08);
  --radius: 8px;
}

/************************************************************************************
RESET
*************************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, i, img, ins, kbd, q, samp, small,
strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, legend, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, bottommenu,
button, map, object {
  margin: 0;
  padding: 0;
  border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, bottommenu {
  display: block;
}

img, fieldset {
  border: 0;
}

img{
  max-width: 100%;
  height: auto;
  display: block;
}

/************************************************************************************
BASE
*************************************************************************************/
body{
  background: var(--bg-page);
  color: var(--ink-soft);
  font-family: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  font-size: 120%;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p{
  margin: 0 0 1.2em;
  padding: 0;
}

ul, ol{
  margin: 1em 0 1.4em 24px;
  padding: 0;
  line-height: 1.5;
}

li{
  margin: 0 0 .5em 0;
  padding: 0;
}

a{
  color: var(--accent-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  outline: none;
  font-weight: 600;
}

a:hover{
  color: var(--ink);
  text-decoration: underline;
}

.floatright{
  float: right;
  margin-left: 5px;
}

.floatover{
  float: right;
}

.imggmin{
  margin-right: 10px;
}

.indentomake{
  margin-left: 15px;
}

.whitetext,
.whidedtext{
  color: var(--white);
}

#disclaimer,
#anouncement4 a{
  color: var(--white);
}

img.imagepad{
  margin: 5px;
}

/************************************************************************************
TYPOGRAPHY
*************************************************************************************/
h1, h2, h3, h4, .post-title, .widgettitle, .sitedescription {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: .02em;
}

h1{
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 600;
  margin-bottom: .5em;
}

h1 a{
  color: var(--ink);
  text-decoration: none;
}

h1 a:hover{
  color: var(--accent);
  text-decoration: none;
}

h2{
  font-size: 2rem;
  line-height: 1.2;
  margin-top: 10px;
  margin-bottom: 15px;
  font-weight: 600;
}

h2.monthlist{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  background-color: var(--navy);
  padding: 12px 14px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
}

h3{
  font-size: 1.45rem;
  line-height: 1.4em;
  margin: 20px 0 .4em;
  color: var(--ink);
}

h4{
  font-size: 1.2rem;
  line-height: 1.4em;
  margin: 20px 0 .4em;
  color: var(--ink-soft);
}

h5{
  font-size: .9rem;
  color: var(--ink-muted);
  margin-bottom: 30px;
}

h5 a{
  color: var(--ink-soft);
  font-size: 1rem;
}

h5 a:hover{
  color: var(--accent);
}

h6{
  font-size: .9rem;
  color: var(--ink-soft);
  margin-bottom: 15px;
}

.sitedescription{
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.35;
  margin-top: -10px;
  margin-bottom: 15px;
}

.gallery{
  font-size: 200%;
}

#site-description{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 120%;
  margin-top: 15px;
}

.calistoga{
  font-family: "Cormorant Garamond", Georgia, serif;
}

.ptmono{
  font-family: "Source Sans 3", Arial, sans-serif;
}

.comicbookbrain{
  margin-top: 10px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 220%;
  font-weight: 600;
  color: var(--accent-deep);
  line-height: 1.2;
}

/************************************************************************************
FILM TEXT ELEMENTS
*************************************************************************************/
.filmyear{
  font-size: 100%;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: -5px;
}

.filmtitle{
  font-size: 115%;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: -5px;
}

.filmcharacter{
  font-size: 90%;
  font-weight: 400;
  color: var(--ink-muted);
}

/************************************************************************************
LAYOUT
*************************************************************************************/
#pagewrap{
  width: 1080px;
  margin: 0 auto;
}

#header{
  position: relative;
  height: 195px;
}

#site-logo{
  position: absolute;
  top: 10px;
}

#site-logo a{
  font: 700 30px/100% "Source Sans 3", Arial, sans-serif;
  color: var(--white);
  text-decoration: none;
}

#content{
  background: var(--bg-panel);
  margin: 0 0 30px;
  padding: 22px 35px;
  width: 620px;
  float: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#sidebar{
  width: 380px;
  float: right;
  margin: 0 0 30px;
}

.post{
  margin-bottom: 40px;
}

.post-title{
  margin: 0 0 5px;
  padding: 0;
  font-size: 2rem;
  line-height: 1.2;
  font-weight: 600;
}

.post-title a{
  text-decoration: none;
  color: var(--ink);
}

.post-title a:hover{
  color: var(--accent);
}

.post-meta{
  margin: 0 0 10px;
  font-size: 90%;
  color: var(--ink-muted);
}

.post-image{
  margin: 0 0 15px;
}

#anothersidebartop{
  position: relative;
  width: 300px;
  height: 600px;
  float: right;
  margin: 25px 0 25px 0;
}

#newestsidebartop{
  position: relative;
  width: 300px;
  height: 50px;
  margin: 35px 0 0 0;
}

#adpeepstext{
  width: 300px;
  height: 50px;
  float: right;
}

#pushoverthebanner{
  float: right;
  margin-top: -80px;
}

/************************************************************************************
TOP MOBILE NAV
*************************************************************************************/
.topnav{
  overflow: hidden;
  background-color: var(--navy);
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
}

.topnav #myLinks{
  display: none;
}

.topnav a{
  color: var(--white);
  padding: 14px 16px;
  text-decoration: none;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  display: block;
}

.topnav a.icon{
  background: var(--navy-2);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover{
  background-color: var(--accent);
  color: var(--white);
}

.active{
  background-color: var(--navy-3);
  color: var(--white);
}

/************************************************************************************
MAIN NAV
*************************************************************************************/
#main-nav{
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16);
}

#main-nav li{
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
}

#main-nav li:first-child{
  margin-left: 10px;
}

#main-nav a{
  line-height: 100%;
  font-weight: 600;
  color: var(--white);
  display: block;
  padding: 14px 15px;
  text-decoration: none;
  text-shadow: none;
  font-family: "Source Sans 3", Arial, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .96rem;
}

#main-nav a:hover{
  color: var(--white);
  background: rgba(255,255,255,.08);
}

/************************************************************************************
SEARCH
*************************************************************************************/
#searchform{
  position: absolute;
  right: 10px;
  bottom: 6px;
  z-index: 100;
  width: 160px;
}

#searchform #s{
  width: 140px;
  float: right;
  background: #fff;
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
  transition: width .7s;
}

input[type=search]{
  -webkit-appearance: none;
  outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button{
  display: none;
}

#searching{
  margin-top: 0;
}

#searchforit{
  margin-top: 200px;
  background-color: var(--bg-panel);
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}


/************************************************************************************
PANELS / BOXES
*************************************************************************************/
#easyaccess{
  background-color: var(--bg-panel);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#whiteboxlarge{
  background-color: var(--bg-panel);
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
}

#mazebox{
  background-color: var(--bg-panel);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

#hopeitworks{}

.moviereview{
  background-color: var(--bg-panel-alt);
  padding: 12px 14px;
  border-left: 4px solid var(--accent);
  border-right: 0;
}

.release{
  background-color: var(--bg-soft);
  margin-top: 2px;
}

#release{
  line-height: 175%;
}

#release ul{
  color: var(--ink-soft);
}

#release a{
  color: var(--accent-deep);
  margin-left: 4px;
}

/************************************************************************************
GOLDEN / FEATURED BLOCKS
*************************************************************************************/
#golden{
  line-height: 200%;
  margin-top: 10px;
  width: 100%;
  font-size: 90%;
}

#golden strong{
  color: var(--navy);
  font-size: 125%;
}

#golden ul{
  margin: 0;
  padding: 0;
}

#golden ul li{
  margin-left: 0;
  margin-top: 10px;
  list-style-type: none;
  padding: 6px 10px;
  background-color: #d8c5a0;
  border: 1px solid #d8c5a0;
}

.goldentan{
  background-color: var(--bg-panel-alt);
  border: 1px solid var(--bg-panel-alt);
}

#goldenblock{
  width: 70%;
  line-height: 200%;
  margin-left: 55px;
  margin-top: 10px;
  font-size: 90%;
  color: var(--white);
}

#goldenblock strong{
  color: var(--white);
}

#goldenblock ul li{
  margin-left: 0;
  margin-top: 10px;
  list-style-type: none;
  padding: 6px 10px;
  background-color: var(--navy);
  border: 1px solid var(--navy);
}

#keybox0{
  margin-top: 0;
  width: 200px;
  height: 70px;
  float: right;
}

#keybox1{
  width: 200px;
  height: 30px;
  padding-left: 10px;
  background-color: #d8c5a0;
  font-weight: 700;
}

#keybox2{
  width: 200px;
  height: 30px;
  padding-left: 10px;
  background-color: var(--navy);
  font-weight: 700;
  color: var(--white);
}

.herolistff2orange{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ink);
  background-color: #cba36b;
  padding-left: 10px;
  padding-top: 12px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}

/************************************************************************************
WIDGETS
*************************************************************************************/
.widget,
.widget2{
  background: var(--bg-panel);
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.widget{
  margin: 0 0 50px;
}

.widget2{
  margin: 20px 0 50px;
}

.widgettitle{
  margin: 0 0 5px;
  padding: 0;
}

.widget ul{
  margin: 0;
  padding: 0;
}

.widget li{
  margin: 0;
  padding: 6px 0;
  list-style: none;
  clear: both;
  border-top: solid 1px var(--line-soft);
}

.widget5{
  background: var(--ink-soft);
  width: 100%;
}

.widget5 li{
  margin: 0;
  list-style: none;
  clear: both;
  background: var(--bg-soft);
  border-top: solid 1px var(--line);
}

.widget .flickr_badge_image{
  margin-top: 10px;
}

.widget .flickr_badge_image img{
  width: 48px;
  height: 48px;
  margin-right: 12px;
  margin-bottom: 12px;
  float: left;
}

/************************************************************************************
SIDEBAR LIST MODULES
*************************************************************************************/
body #sidebarlistff a,
body #herolist a,
body #herolist6 a,
body #greenlist a,
body #sequencial a{
  width: auto;
}

#frazetta210{
  float: right;
  width: 270px;
  margin-left: 10px;
}

#sidebarlistff,
#herolistff,
#sequencialff,
#bluebell,
#greenlistff,
#herolistff6{
  width: 100%;
  padding: 0;
  margin-bottom: 10px;
  background-color: var(--bg-panel);
  border: 1px solid var(--line);
}

#sidebarlistff{
  width: 200px;
  margin-top: 10px;
}

#herolist,
#sequencial,
#greenlist{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#herolist{
  margin-top: 15px;
}

#herolist6{
  margin-left: 0;
  margin-right: 0;
  margin-top: 15px;
}

#herolistff{
  margin-top: 10px;
  font-weight: 700;
}

#sequencialff,
#bluebell{
  margin-top: 0;
  font-weight: 700;
}

#greenlistff{
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
}

#herolistff6{
  margin-top: 10px;
  font-size: 160%;
  font-weight: 700;
}

#herolistff h4,
#sequencialff h4,
#bluebell h4{
  color: var(--white);
  font-size: 1.08rem;
  font-family: "Source Sans 3", Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  padding: 12px 14px;
  margin: 0;
}

#sidebarlistff ul,
#herolistff ul,
#sequencial ul,
#bluebell ul,
#herolistff6 ul,
#greenlistff ul{
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

#sidebarlistff li,
#herolistff li,
#sequencialff li,
#bluebellff li,
#herolistff6 li,
#greenlistff li{
  border-bottom: 1px solid var(--line-soft);
  margin: 0;
}

#sidebarlistff li a,
#herolistff li a,
#sequencialff li a,
#bluebellff li a,
#herolistff6 li a,
#greenlistff li a{
  display: block;
  padding: 8px 12px;
  background-color: transparent;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  font-weight: 600;
}

#sidebarlistff li a:hover,
#herolistff li a:hover,
#sequencialff li a:hover,
#bluebellff li a:hover,
#herolistff6 li a:hover,
#greenlistff li a:hover{
  background-color: #efe7da;
  color: var(--accent);
}

#sequencialcc{
  background-color: var(--accent);
  padding-left: 10px;
}

#sequenciaccl a{
  color: var(--white);
  background-color: var(--accent-deep);
}

/************************************************************************************
SPECIAL ITEMS
*************************************************************************************/
#amalama ul li{
  list-style: none;
  display: inline;
  font-weight: 700;
  line-height: 300%;
  background-color: var(--accent);
  padding: 5px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#amalama li a{
  display: inline;
  background-color: var(--accent);
  color: var(--white);
}

#amalama li a:hover{
  background-color: var(--accent-deep);
  color: var(--white);
}

#terms{
  width: 400px;
  text-align: left;
}

#erikweems{
  width: 400px;
  background-color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 30px;
  margin-top: 70px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 25px;
  text-align: center;
  color: #d8d4cd;
  padding-top: 5px;
  padding-bottom: 8px;
}

#erikweems a{
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--white);
  font-size: 25px;
  line-height: 26px;
  text-decoration: none;
}

#erikweems a:hover{
  color: var(--white);
  background-color: var(--accent);
}

/************************************************************************************
BLOCKQUOTE / HR / TOOLTIPS
*************************************************************************************/
blockquote{
  background: #f3ede3;
  border-left: 4px solid var(--accent-soft);
  margin: 1.5em 10px;
  padding: 0.9em 1em;
  font-size: 120%;
  line-height: 175%;
  color: var(--ink);
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before{
  color: var(--accent-soft);
  content: open-quote;
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.18em;
  vertical-align: -0.35em;
}

blockquote p{
  display: inline;
}

hr{
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin-top: 35px;
  margin-bottom: 35px;
}

/************************************************************************************
MEDIA / VIDEO
*************************************************************************************/
.video-container{
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/************************************************************************************
MISC FIXED SIZES FROM ORIGINAL
*************************************************************************************/
#monkey{
  height: 300px;
}

#monkey600{
  height: 620px;
}

/************************************************************************************
FOOTER
*************************************************************************************/
#footer{
  clear: both;
  color: #6f675c;
  font-size: 85%;
  margin-left: 0;
}

#footer a{
  color: var(--accent-deep);
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

.clearfix{
  display: block;
  zoom: 1;
}

/************************************************************************************
RESPONSIVE
*************************************************************************************/
@media screen and (max-width: 1100px){
  #pagewrap{
    width: calc(100% - 30px);
  }

  #content,
  #sidebar{
    width: 100%;
    float: none;
  }

  #sidebarlistff{
    width: 100%;
  }

  #header{
    height: auto;
    min-height: 170px;
  }

  #main-nav{
    position: relative;
    margin-top: 20px;
  }
}

/************************************************************************************
EXTERNAL RESOURCE LINK BOX
*************************************************************************************/
.external-links-box{
  margin: 20px 0;
}

#sequencialff h4{
  margin: 0;
  padding: 14px 16px;
  background: #5f4a2f;
  color: #ffffff;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* =========================================================
   REFINED LINK TREATMENT FOR #sequencialff
   subtle movement instead of popup labels
========================================================= */

#sequencialff{
  background: #f4efe6;
  border: 1px solid #bfae90;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

#sequencialff ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

#sequencialff li{
  margin: 0;
  border-top: 1px solid #d8cbb7;
}

#sequencialff li:first-child{
  border-top: 0;
}

#sequencialff li a{
  display: block;
  position: relative;
  padding: 14px 48px 14px 16px;
  background: #fbf8f2;
  color: #3b3127;
  text-decoration: none;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  transition:
    background-color .22s ease,
    color .22s ease,
    transform .22s ease,
    padding-left .22s ease;
}

/* right-side arrow indicator */
#sequencialff li a::after{
  content: "↗";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #8a6d46;
  opacity: .82;
  transition:
    transform .22s ease,
    opacity .22s ease,
    color .22s ease;
}

/* subtle underline bar */
#sequencialff li a::before{
  content: "";
  position: absolute;
  left: 16px;
  bottom: 8px;
  width: 0;
  height: 1px;
  background: #8a6d46;
  transition: width .22s ease;
  opacity: .9;
}

#sequencialff li a:hover,
#sequencialff li a:focus-visible{
  background: #e9dfcf;
  color: #2a241d;
  padding-left: 20px;
  transform: translateX(2px);
}

#sequencialff li a:hover::after,
#sequencialff li a:focus-visible::after{
  color: #5f4a2f;
  opacity: 1;
  transform: translateY(-50%) translateX(3px);
}

#sequencialff li a:hover::before,
#sequencialff li a:focus-visible::before{
  width: calc(100% - 52px);
}

#sequencialff li a:focus-visible{
  outline: 2px solid #8a6d46;
  outline-offset: -2px;
}


.news-title{
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  color: var(--ink);
  letter-spacing: .02em;
}

.news-feed{
  margin: 0 0 44px;
}

.news-item{
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  padding: 16px 18px;
  margin: 0 0 18px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

.news-item:hover{
  background: #e9dfcf;
}

.news-title{
  font-size: 1.25rem;
  line-height: 1.25;
  margin: 0 0 7px;
  color: var(--ink);
}

.news-meta{
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: .9rem;
  color: var(--ink-muted);
  margin: 0 0 9px;
  font-style: italic;
  line-height: 1.45;
}

.news-item p{
  margin: 0 0 9px;
  line-height: 1.55;
}

.news-item p:last-child{
  margin-bottom: 0;
}

.news-link a{
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(110,86,56,.35);
}

.news-link a:hover{
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.news-item.compact{
  padding: 13px 15px;
}

.news-item.compact .news-title{
  font-size: 1.12rem;
}

/* ---------------------------------------
   CINEMAGRAPHE SIDEBAR JULY 2026 b
--------------------------------------- */

#sidebar {
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  margin: 0;
  padding: 0;
}

#sidebar *,
#sidebar *::before,
#sidebar *::after {
  box-sizing: border-box;
}

/* Sidebar image blocks */

#sidebar .sidebar-image {
  display: block;
  width: 100%;
  margin: 0 0 22px;
  padding: 0;
}

#sidebar .sidebar-image a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

#sidebar .sidebar-image img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

/* Section headings */

#sidebar .sidebar-heading {
  margin: 0 0 12px;
  padding: 10px 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  line-height: 1.25;
  color: #ffffff;
  background: #202833;
  border-left: 5px solid #a99152;
}

/* Interior page links */

#sidebar .sidebar-links {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

#sidebar .sidebar-links li {
  display: block;
  margin: 0 0 8px;
  padding: 0;
}

#sidebar .sidebar-links a {
  display: block;
  position: relative;
  width: 100%;
  padding: 11px 34px 11px 13px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1f3f68;
  text-decoration: none;
  background: #f3f0e9;
  border: 1px solid #d5cec1;
  border-left: 5px solid #7e8b99;
  border-radius: 3px;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

#sidebar .sidebar-links a::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-52%);
  font-size: 1.35rem;
  font-weight: normal;
  color: #7a6a43;
}

#sidebar .sidebar-links a:hover,
#sidebar .sidebar-links a:focus {
  color: #ffffff;
  background: #284d78;
  border-color: #284d78;
  border-left-color: #c6aa62;
  transform: translateX(2px);
}

#sidebar .sidebar-links a:hover::after,
#sidebar .sidebar-links a:focus::after {
  color: #ffffff;
}

/* Featured text link */

#sidebar .sidebar-feature-link {
  display: block;
  position: relative;
  margin: 0 0 22px;
  padding: 14px 38px 14px 15px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.02rem;
  font-weight: bold;
  line-height: 1.4;
  color: #ffffff;
  text-decoration: none;
  background: #384453;
  border-left: 6px solid #b49a5a;
}

#sidebar .sidebar-feature-link::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-52%);
  font-size: 1.5rem;
}

#sidebar .sidebar-feature-link:hover,
#sidebar .sidebar-feature-link:focus {
  background: #24364d;
}

/* Sidebar dividers */

#sidebar .sidebar-divider {
  height: 1px;
  margin: 22px 0;
  border: 0;
  background: #cfc7ba;
}

/* Existing external-links section */

#sidebar .external-links-box {
  width: 100%;
  margin: 24px 0;
}

/* Mobile and narrower layouts */

@media screen and (max-width: 800px) {
  #sidebar {
    max-width: none;
    width: 100%;
  }

  #sidebar .sidebar-links a {
    font-size: 1rem;
  }
}

/************************************************************************************
BOTTOM NAVIGATION, SEARCH, AND FOOTER
*************************************************************************************/
#bottommenu{
  clear: both;
  width: 100%;
  margin: 40px 0 20px;
  padding: 0;
  background: transparent;
  border: 0;
}

#bottommenu *,
#bottommenu *::before,
#bottommenu *::after{
  box-sizing: border-box;
}

#bottommenuff{
  width: 100%;
  margin: 0 0 24px;
}

#bottommenuff .bottom-menu-links{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#bottommenuff .bottom-menu-links li{
  margin: 0;
  padding: 0;
  list-style: none;
}

#bottommenuff .bottom-menu-links a{
  display: block;
  min-width: 92px;
  padding: 11px 20px;
  color: #ffffff;
  background: linear-gradient(to bottom, #4a5d76 0%, #344253 55%, #263241 100%);
  border: 1px solid #667383;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(0,0,0,.22);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#bottommenuff .bottom-menu-links a:hover,
#bottommenuff .bottom-menu-links a:focus{
  color: #ffffff;
  background: linear-gradient(to bottom, #3b6ca1, #284d78);
  border-color: #284d78;
  box-shadow: 0 4px 9px rgba(0,0,0,.24);
  text-decoration: none;
  transform: translateY(-2px);
}

#bottommenuff .bottom-menu-links a:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

#searchnav{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

#searchnav .bottom-search-form{
  width: 100%;
  margin: 0;
  padding: 8px 0 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

#searchnav .bottom-search-form label{
  display: block;
  margin: 0 0 9px;
  color: var(--ink);
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
}

#searchnav .bottom-search-row{
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

#searchnav input[type="search"]{
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  margin: 0;
  padding: 0 22px;
  color: #222222;
  background: #ffffff;
  border: 2px solid #9aa4b2;
  border-radius: 999px;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.08rem;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

#searchnav input[type="search"]::placeholder{
  color: #6d737b;
  opacity: 1;
}

#searchnav input[type="search"]:focus{
  border-color: #284d78;
  box-shadow: 0 0 0 4px rgba(40,77,120,.18);
}

#searchnav button[type="submit"]{
  flex: 0 0 auto;
  min-width: 125px;
  height: 54px;
  margin: 0;
  padding: 0 24px;
  color: #ffffff;
  background: #2b4e77;
  border: 2px solid #2b4e77;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
  cursor: pointer;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#searchnav button[type="submit"]:hover,
#searchnav button[type="submit"]:focus{
  background: #203b5a;
  border-color: #203b5a;
  box-shadow: 0 4px 9px rgba(0,0,0,.22);
  transform: translateY(-1px);
}

#searchnav button[type="submit"]:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

#footer{
  clear: both;
  margin: 25px 0;
  color: #6f675c;
  font-size: .9rem;
  text-align: left;
}

#footer p{
  margin: 0;
}

#footer .footer-pill{
  display: inline-block;
  margin-left: 6px;
  padding: 8px 18px;
  color: #ffffff;
  background: #7d2534;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#footer .footer-pill:hover,
#footer .footer-pill:focus{
  color: #ffffff;
  background: #5f1b28;
  box-shadow: 0 4px 8px rgba(0,0,0,.22);
  text-decoration: none;
  transform: translateY(-1px);
}

#footer .footer-pill:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/************************************************************************************
BOTTOM NAVIGATION RESPONSIVE RULES
*************************************************************************************/
@media screen and (max-width: 800px){
  #bottommenuff .bottom-menu-links li{
    flex: 1 1 calc(25% - 10px);
  }

  #bottommenuff .bottom-menu-links a{
    width: 100%;
    min-width: 0;
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media screen and (max-width: 560px){
  #bottommenu{
    margin-top: 26px;
  }

  #bottommenuff .bottom-menu-links li{
    flex: 1 1 calc(50% - 10px);
  }

  #searchnav .bottom-search-row{
    display: block;
  }

  #searchnav input[type="search"]{
    width: 100%;
    margin-bottom: 10px;
  }

  #searchnav button[type="submit"]{
    width: 100%;
  }

  #footer{
    text-align: center;
  }

  #footer .footer-pill{
    margin-top: 8px;
    margin-left: 0;
  }
}