/************************************************************************************
CINEMAGRAPHE – CLEANED / REFINED STYLESHEET
Traditional, dignified visual direction
*************************************************************************************/

/* 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);
}

#searchnav{
  margin-left: 10px;
  margin-bottom: 50px;
}

#searchbottom{
  margin-left: 0;
  margin-bottom: 50px;
}

/************************************************************************************
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);
}

/************************************************************************************
BOTTOM MENU
*************************************************************************************/
#bottommenu{
  clear: both;
  margin-left: 0;
}

#bottommenuff ul li{
  list-style: none;
  display: inline;
  font-weight: 700;
  line-height: 300%;
  background-color: var(--bg-soft);
  padding: 5px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#bottommenuff li a{
  display: inline;
  background-color: var(--bg-soft);
  color: var(--ink);
}

#bottommenu li a:hover{
  background-color: var(--bg-soft);
  color: var(--accent);
}

/************************************************************************************
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;
}

a[title]{
  position: relative;
}

a[title]:hover:after{
  content: attr(title);
  padding: 4px 8px;
  color: var(--ink);
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0 0 4px rgba(0,0,0,.18);
  background: #f3ede3;
  border: 1px solid var(--line);
}

/************************************************************************************
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{
  background: #f4efe6;
  border: 1px solid #bfae90;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

#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;
}

#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 44px 14px 16px;
  background: #fbf8f2;
  color: #3b3127;
  text-decoration: none;
  font-family: "Source Sans 3", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, padding-left .2s ease;
}

/* small external-link arrow indicator */
#sequencialff li a::after{
  content: "↗";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #8a6d46;
  opacity: .9;
}

#sequencialff li a:hover{
  background: #e9dfcf;
  color: #2a241d;
  padding-left: 20px;
}

#sequencialff li a:hover::after{
  color: #5f4a2f;
}

/* =========================================================
   REMOVE TOOLTIP POPUPS
========================================================= */

/* turn off the custom tooltip */
a[title]:hover:after{
  content: none !important;
  display: none !important;
}

/* =========================================================
   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;
}