html,
body {
  height: 100%;
}

.skip-link {
  background: var(--blue);
  clip: rect(0 0 0 0);
  color: #fff;
  left: 0;
  padding: 0.75em 1.5em;
  position: absolute;
  top: 0;
  z-index: 10000;
}

.skip-link:focus {
  clip: auto;
}

body.tag-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.tag-page > main {
  flex: 1;
  overflow: visible;
}

body > footer {
  bottom: 0;
  position: relative;
  z-index: 3;
}

.footer-card-anchor {
  display: none;
}

.horizontal-gallery-page .mail-signup-card-inline {
  display: none;
}

.mail-signup-card-inline {
  display: none;
}

.footer-card-anchor .mail-signup-container {
  bottom: 100%;
  position: absolute;
  right: -10rem;
}

body > header {
  grid-area: header;
}

body > main {
  grid-area: main;
  overflow: auto;
  padding-top: 100px;
  padding-bottom: 150px;
}

body > footer {
  grid-area: footer;
}

body > header {
  display: flex;
  background: var(--lightblue);
  border-bottom: 1px solid #efefef;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  width: 100vw;
  z-index: 5;
}

:root {
  --black: black;
  --white: #fff;
  --offwhite: #efefef;
  --blue: #7bb4fb;
  --lightblue: #bddafd;
  --darkblue: #3e517a;
  --magenta: magenta;
  --orangered: orangered;
  --gray: rgb(0 0 0 / 50%);
  --lightgray: #f5f5f5;
  --font-primary: "Source Serif Pro", serif;
  --font-secondary: "Libre Franklin", "Helvetica Neue", sans-serif;
  --font-decorative: "ShadowGrotesque", "Libre Franklin", sans-serif;
  --font-decorative-cooper: "Cooper Black", "ShadowGrotesque", "Libre Franklin", sans-serif;
  --dropdown: rgb(247, 255, 0);
}

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

.clear {
  clear: both;
}

.hidden {
  display: none;
}

.float-left {
  float: left;
  height: 32px;
  width: 32px;
  overflow: hidden;
}

img[src*="half-width"] {
   width:350px;
}

img[src*="full-width"] {
   width:100%;
}

.inline-block {
  display: inline-block;
}

.side-by-side {
  display: block;
}

.section-divider {
  border-top: 1px solid #e5e5e5;
  margin-top: 0;
  padding: 3em 0;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  background-color: var(--white);
  font-family: var(--font-primary);
}

.header-spacer {
  height: 6rem;
  width: 100%;
}

/* Article layout - 1120px outer container */
.latest-post-article {
  margin-left: auto;
  margin-right: auto;
  max-width: 1120px;
  padding: 0 1em;
}

.latest-post-article nav {
  margin-bottom: 1rem;
}

article {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

article img {
  display: block;
  height: auto;
  /*margin: 2em auto;*/
  max-width: 768px;
  width: 100%;
}

article video {
  max-width: 100%;
  text-align: center;
}

/* Content width - 768px for readable text */
.latest-post-content {
  color: var(--black);
  font-family: var(--font-primary);
  font-size: 1.1rem;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 768px;
}

.latest-post-content p {
  margin: 1.5em 0;
}

.latest-post-content img {
  height: auto;
  max-width: 100%;
  margin: 2em 0;
}

.latest-post-content h2,
.latest-post-content h3 {
  margin-top: 2em;
  margin-bottom: 1em;
}

h1 {
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0.5em 0;
}

/* Timeline index section */
.timeline section {
  margin: 0 auto;
}

.text-timeline-entry {
  display: flex;
  gap: 1em;
  margin-bottom: 0.5em;
}

.entry-date {
  flex-shrink: 0;
  width: 100px;
  text-align: right;
}

.entry-content {
  flex-grow: 1;
}

/* Latest post article layout styles */
.latest-post-header {
  margin-bottom: 2em;
  text-align: left;
}

.latest-post-title {
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.latest-post-excerpt {
  color: var(--gray);
  font-family: var(--font-secondary);
  font-size: 1.25rem;
  line-height: 1.5;
  margin: 0.25em 0 2em;
}

.latest-post-image {
  margin: 2em 0;
  text-align: center;
}

.latest-post-image img {
  border-radius: 0.5em;
  height: auto;
  max-width: 768px;
  width: 100%;
}

.latest-post-tags {
  margin-bottom: 1em;
}

.latest-post-tag {
  background-color: transparent;
  border: 1px solid var(--blue);
  border-radius: 0.25em;
  color: var(--blue);
  display: inline-block;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  margin-right: 0.5em;
  padding: 0.4em 0.8em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.latest-post-tag:hover {
  background-color: var(--blue);
  color: var(--white);
}

h2 {
  font-family: var(--font-secondary);
  font-weight: 200;
  font-size: 2em;
}

h3 {
  clear: both;
  font-family: var(--font-secondary);
  font-size: 2em;
}

header {
  overflow: visible;
}

header .flex-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 0.5em;
  overflow: visible;
}

header .search-container {
  margin-left: auto;
  position: relative;
  overflow: visible;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mail-signup-container .section-divider {
  border-top: 0;
  margin-top: 0;
  padding: 0;
}

.mail-signup-container p {
  margin-bottom: 0.4em;
  margin-top: 0;
}

.mail-signup-container p:last-child,
.mail-signup-container section > p:last-of-type {
  margin-bottom: 0;
}

.mail-signup-container {
  background-color: #fffff8;
  backface-visibility: hidden;
  box-shadow: 8px 6px 5px 0px rgba(0, 0, 0, 0.20);
  cursor: grab;
  font-family: var(--font-primary);
  -moz-box-shadow: 8px 6px 5px 0px rgba(199,199,123,0.20);
  padding: 1rem;
  position: relative;
  transform: rotate(2deg) translateZ(0);
  transform-style: preserve-3d;
  -webkit-box-shadow: 8px 6px 5px 0px rgba(0, 0, 0, 0.20);
  width: 300px;
  will-change: transform;
}

.mail-signup-container.is-dragging {
  cursor: grabbing;
  transform: rotate(0deg) translateZ(0);
  transition: none;
}

.mail-signup-container--modal {
  cursor: auto;
  max-width: 90vw;
  transform: none;
}

#modal-onetalker .modal__overlay {
  align-items: center;
  padding: 20px 0;
}

.mail-signup-container input,
.mail-signup-container textarea,
.mail-signup-container button,
.mail-signup-container label,
.mail-signup-container a {
  cursor: auto;
}

.mail-signup-container button {
  cursor: pointer;
}

.mail-signup-container .uppercase {
  text-transform: uppercase;
  text-align: justify;
}

.mail-signup-container button.mail-signup-close {
  background-color: white;
  border: 1px solid var(--blue);
  color: var(--blue);
  cursor: pointer;
  height: 1.5rem;
  padding: 0;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  width: 1.5rem;
  z-index: 11;
}

.mail-signup-close svg {
  pointer-events: none;
}

.mail-signup-container button.mail-signup-close:hover {
  background-color: white;
  border-color: var(--orangered);
  color: var(--orangered);
  transform: scale(1.1);
}

.mail-signup-container input, .mail-signup-container textarea, .mail-signup-container button {
  font-size: .7rem;
}

.mail-signup-container input, .mail-signup-container textarea {
  border: 1px solid gray;
}

.mail-signup-border {
  font-size: .7em;
  padding: 1rem;
  position: relative;
  width: 100%;
}

.dotted-border-svg {
  height: calc(100% + 4px);
  inset: -2px;
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: calc(100% + 4px);
}

.dotted-rect-a {
  animation: dot-border-swap-a 1s steps(1) infinite;
  stroke: #e6c800;
}

.dotted-rect-b {
  animation: dot-border-swap-b 1s steps(1) infinite;
  stroke: hotpink;
}

@keyframes dot-border-swap-a {
  0%, 100% { stroke: #e6c800; }
  50% { stroke: hotpink; }
}

@keyframes dot-border-swap-b {
  0%, 100% { stroke: hotpink; }
  50% { stroke: #e6c800; }
}

/* Mobile nav: hidden by default, shown when hamburger is clicked */
.nav-mobile {
  display: block;
  max-height: 0;
  opacity: 0;
  position: relative;
  z-index: 10;
  overflow: hidden;
  transform: translateY(-20px);
  transition: max-height 0.4s ease-out, transform 0.4s ease-out, opacity 0.4s ease-out;
}

.nav-mobile.is-active {
  max-height: 100vh;
  opacity: 1;
  transform: translateY(0);
}

/* Desktop nav: hidden on mobile */
.nav-desktop {
  display: none;
}

.nav-link-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0 1rem 0 0;
  width: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  color: black;  /* icon default color via currentColor */
  transition: color 0.25s ease, transform 0.25s ease;
  transform-origin: center center;
}
.nav-link-search__icon {
  width: 36px;
  height: 36px;
  display: block;
  fill: currentColor; /* key: takes color from .nav-link-search */
}
.nav-link-search:hover {
  color: var(--orangered);
}

p,
pre,
code {
  line-height: 1.5;
}

a[href],
a[href]:visited {
  color: var(--blue);
  transition: color 0.3s ease;
}

a[href]:hover,
a[href]:active {
  color: var(--orangered);
}

footer a[href],
footer a[href]:visited {
  color: var(--white);
  transition: color 0.3s ease;
}

footer a[href]:hover,
footer a[href]:active {
  color: var(--black);
}

a[href]:not(:hover) {
  text-decoration: none;
}

a.main-link[href],
a.main-link[href]:visited {
  color: var(--white);
  font-family: var(--font-secondary);
  font-size: 1.7rem;
  font-weight: 700;
  padding: 0.5em 0.25em 0.25em;
  text-decoration: none;
  transition: color 0.3s ease;
}

a.main-link[href]:hover,
a.main-link[href]:active {
  color: var(--orangered);
}

a.active {
  color: var(--orangered);
}

body > header,
body >main,
body > footer {
  padding: 1em;
}

body > footer {
  background: var(--orangered);
  clear: both;
  margin: 1em 0 auto;

  /*  width: calc(100% - 2em); */
}

body > footer > * {
  pointer-events: auto;
}

.error-404 > footer {
  bottom: 0;
  position: fixed;
  width: calc(100% - 2em);
}

figcaption {
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.9em;
  font-style: italic;
  margin-bottom: 1.5rem;
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

hr {
  border: none;
  border-top: 2px solid var(--lightblue);
  margin: 2rem 0;
  opacity: 0.5;
}

body > main {
  margin: 7em auto 0;
}

main > section > article > * {
  margin-top: 0;
  margin-bottom: 0.5em;
}

small {
  font-size: 0.7em;
}

small.timeline-footnote {
  display: block;
  margin-top: 1em;
  padding: 1em 0;
  line-height: 1.5;
}

.container-wide {
  margin: 0 1em;
}

.disabled {
  color: lightgray;
}

.full-width {
  background: black;
  color: white;
  margin-top: 6em;
  width: 100vw;
}

.pagination {
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0;
}

.pagination li {
  float: left;
  padding: 0 0.5em 0 0;
}

.page-numbers {
  display: block;
  margin: 0.5em 0;
}

.tags main nav {
  margin-top: 1em;
}

.tagslist a span {
  display: block;
  margin-top: 0.5em;
}

.tagslist-flat {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tagslist-flat-entry {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  padding: 1.5em 0;
}

.tagslist-flat-date {
  color: var(--gray);
  font-size: 0.6rem;
  margin: 0;
  order: -1;
}

.tagslist-flat-image {
  width: 100%;
}

.tagslist-flat-image img {
  display: block;
  height: auto;
  margin: 0 auto;
  object-fit: cover;
  width: 90%;
}

.tagslist-flat-content {
  flex: 1;
}

.tagslist-flat-title {
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.25em;
}

@media screen and (min-width: 600px) {
  .tagslist-flat-entry {
    column-gap: 1.5em;
    display: grid;
    grid-template-areas:
      "date date"
      "image content";
    grid-template-columns: 12rem 1fr;
    row-gap: 0.5em;
  }

  .tagslist-flat-date {
    grid-area: date;
    order: 0;
  }

  .tagslist-flat-image {
    grid-area: image;
    width: auto;
  }

  .tagslist-flat-image img {
    margin: 0;
    width: 100%;
  }

  .tagslist-flat-content {
    grid-area: content;
  }

  .tagslist-flat-title {
    font-size: 2rem;
  }
}

.tagslist-flat-title a {
  color: var(--black);
  text-decoration: none;
}

.tagslist-flat-title a:hover {
  color: var(--orangered);
}

.tagslist-flat-excerpt {
  color: var(--gray);
  margin: 0.5em 0;
}

.tagslist-flat-tags {
  font-size: 0.875rem;
  margin: 0.5em 0 0;
}

.tagslist-flat-divider {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 0;
}

.explanation {
  box-sizing: border-box;
  max-width: 100%;
}

.explanation p.header {
  color: var(--orangered);
  font-family: var(--font-decorative-cooper);
  font-size: 2em;
  line-height: 1;
}

.embeddable-buttondown-form {
  box-sizing: border-box;
  max-width: 100%;
  overflow: hidden;
}

@media screen and (width >=600px) {
  body > footer {
    width: 100%;
  }
}

/* Mobile Navigation */
.nav-mobile .nav-columns {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  width: 100vw;
}

.nav-mobile .nav-column {
  min-width: 0;
}

.nav-mobile ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-mobile li {
  display: block;
  margin: .2em 0;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transition-delay: 0s;
}

.nav-mobile.is-active li {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays - items animate in sequence with overlap */
.nav-mobile.is-active li:nth-child(1) { transition-delay: 0.2s; }
.nav-mobile.is-active li:nth-child(2) { transition-delay: 0.28s; }
.nav-mobile.is-active li:nth-child(3) { transition-delay: 0.36s; }
.nav-mobile.is-active li:nth-child(4) { transition-delay: 0.44s; }
.nav-mobile.is-active li:nth-child(5) { transition-delay: 0.52s; }
.nav-mobile.is-active li:nth-child(6) { transition-delay: 0.6s; }
.nav-mobile.is-active li:nth-child(7) { transition-delay: 0.68s; }
.nav-mobile.is-active li:nth-child(8) { transition-delay: 0.76s; }
.nav-mobile.is-active li:nth-child(9) { transition-delay: 0.84s; }
.nav-mobile.is-active li:nth-child(10) { transition-delay: 0.92s; }
.nav-mobile.is-active li:nth-child(11) { transition-delay: 1s; }
.nav-mobile.is-active li:nth-child(12) { transition-delay: 1.08s; }
.nav-mobile.is-active li:nth-child(13) { transition-delay: 1.16s; }
.nav-mobile.is-active li:nth-child(14) { transition-delay: 1.24s; }
.nav-mobile.is-active li:nth-child(15) { transition-delay: 1.32s; }

.nav-mobile li a {
  font-family: var(--font-secondary);
  font-size: 1.575rem;
}

.nav-mobile li a[href],
.nav-mobile li a[href]:visited {
  color: var(--white);
}

.nav-mobile li a[href]:not(:hover) {
  text-decoration: none;
}

.nav-mobile li a[href]:hover {
  color: var(--orangered);
}

.nav-mobile li a[data-current="current item"] {
  color: var(--orangered);
  font-weight: 700;
  text-decoration: none;
}

.nav-mobile li.menu-header {
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 1.575rem;
  font-weight: 600;
  margin-top: 0.3em;
}

.home {
  overflow-x: hidden;
}

.home .footnote {
  font-size: 0.75rem;
  margin-bottom: 2rem;
}

.home h2 {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 2em;
  margin: 0;
}

body > .home main {
  background: white;
  position: relative;
  margin: 0 auto;
  width: 100%;
}

.home .intro-home {
  font-size: 1.5rem;
  text-align: left;
  display: block;
}

.home .intro-home p {
  line-height: 1.25;
}

.home .intro-home a {
  color: white;
}

.mobile-menu {
  display: flex;
  align-items: center;
}


.self-portrait {
  border-radius: 2em;
  height: auto;
  width: 100%;
}

/* Posts List */

a.tiny-thumbnail {
  display: block;
  height: 128px;
  position: relative;
  width: 128px;
}

a.tiny-thumbnail.text-timeline {
  color: black;
  display: block;
  height: auto;
  position: relative;
  width: auto;
}

/* Post Tags */
a[rel="tag"],
a[rel="tag"]:visited,
span.tag {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.625em;
  padding: 0 0.5em;
  line-height: 2em;
  height: 2em;
  border: 1px solid var(--white);
  background-color: var(--white);
  color: var(--blue);
  border-radius: 0.25em;
  text-decoration: none;
  margin: 0 0.5em 0.5em 0;
}

a[rel="tag"]:hover {
  border: 1px solid var(--blue);
  background-color: var(--blue);
  color: var(--white);
}

a[rel="tag"]:last-child {
  margin-right: 0;
}

a.post-tag {
  display: inline-block;
  margin: 0.5em 0;
  background: var(--blue);
  padding: 0.5em;
  border-radius: 0.5em;
  font-size: 0.8em;
  color: white;
}

.bullet {
  display: none;
}

/* Contact Form */

.join-my-mailing-list-form {
  background-color: var(--off-white);
  width: 90%;
}
form {
  display: grid;
  padding: 2em 0 1em;
}

form.gsc-search-box {
  padding: 0;
}

.gsc-control-cse {
  padding: 0;
}

form label {
/*  display: none;*/
  box-sizing: border-box;
  font-family: var(--font-secondary), sans-serif;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

input,
textarea,
button {
  box-sizing: border-box;
  font-family: var(--font-secondary), sans-serif;
  font-size: 1rem;
  margin-bottom: 1em;
  max-width: 100%;
  padding: 1em;
  width: 100%;
}

input,
textarea {
  border: 1px solid black;
}

#subscribe-to-buttondown-list {
  background-color: var(--blue);
  border: 1px solid var(--blue);
  box-sizing: border-box;
  color: var(--white);
  cursor: pointer;
  overflow-wrap: break-word;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  white-space: normal;
  word-break: break-word;
}

#subscribe-to-buttondown-list:hover {
  background-color: var(--orangered);
  border-color: var(--orangered);
}

button,
button[type="submit"],
input[type="submit"],
.button {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

button[type="submit"]:hover,
input[type="submit"]:hover,
.button:hover {
  background-color: var(--orangered);
  border-color: var(--orangered);
}

.order-form input {
  padding: .15em;
}

footer small {
  display: block; /* for line-height reasons! */
  font-size: 0.7em;
  text-transform: uppercase;
}

ol {
  clear: both;
  list-style: none;
  padding: 0;
}

ol li {
  margin: 2em 0;
  display: block;
  position: relative;
  counter-increment: inst;
}

/* Paintings and Designs pages - square images */
.column.right ol li img,
.column.right ul li img {
  display: block;
  height: 300px;
  object-fit: cover;
  width: 300px;
}

.animation-individual,
.animation-individual video {
  text-align: center;
  max-width: 100%;
}

.animations article p,
.animations article p img {
  text-align: center;
  max-width: 100%;
}

.postslist h3 {
  margin-top: 0;
}

p.postdate h3 {
  margin-bottom: 0;
}

.tiny-thumbnail img {
  min-height: 128px;
  width: auto;
}

/******* BEGIN PHOTO-TIMELINE *******/

.photo-timeline {
  flex-wrap: wrap;
  margin: 1em auto;
}

.photo-timeline-link {
  display: inline-block;
  height: 32px;
  margin: 6px 8px 0 0;
  overflow: hidden;
  width: 32px;
}

.photo-timeline-link:nth-of-type(odd) {
  background-color: var(--orangered);
}

.photo-timeline-link:nth-of-type(even) {
  background-color: var(--blue);
}

.post-year {
  display: grid;
  padding: 0.5em 0;
  font-family: var(--font-secondary);
  font-size: 0.75em;
  font-weight: 600;
}

/* #timeline-detail display handled in timeline-two-sections.css */

.tabs {
  position: relative;
}

.tabs ul {
  display: flex;
}

.tabs ul li {
  border: 1px solid black;
  border-bottom: 1px solid white;
  border-radius: 0.5em 0 0 0.5em;
  display: inline-block;
}

.tab {
  background: white;
  display: none;
}

.tab.active {
  display: block;
}

.tags-list {
  background: white;
  display: none;
  margin-bottom: 2em;
}

.tags-list.active {
  display: block;
}

.animation-demo {
  overflow-x: hidden;
}

.banner-container {
  display: flex;
  padding: 1em 0;
  justify-content: center;
}

.banner-container div {
  margin: 1em auto;
}

.banner-container iframe {
  margin: 0 0.5em;
}

.word-scrolling {
  color: yellow;
  font-family: Ultra, sans-serif;
  font-size: 40vh;
  text-align: center;
}

#scrolling-car {
  height: auto;
  width: 15vw;
}

span.fade {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

span.fade:hover {
  opacity: 1;
}

/******* END PHOTO-TIMELINE *******/

/******* BEGIN HOME TIMELINE SECTION *******/

.timeline-section {
  margin-bottom: 3em;
}

.timeline-section h2 {
  color: var(--orangered);
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 2em;
  margin-bottom: 1.5em;
}

.timeline-item {
  margin-bottom: 2em;
  overflow: hidden;
  background: var(--offwhite);
}

.timeline-item.pinned {
  border-color: var(--orangered);
  border-width: 3px;
}

.timeline-item-image {
  width: 100%;
  line-height: 0;
}

.timeline-item-image img {
  width: 100%;
  height: auto;
  display: block;
}

.timeline-item-content {
  padding: 1.5em;
}

.timeline-item h1,
.timeline-item h3 {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 1.8em;
  margin-top: 0;
  margin-bottom: 0.5em;
  line-height: 1.2;
}

.timeline-item h1 {
  font-size: 2em;
}

.timeline-item h3 a {
  color: var(--black);
  text-decoration: none;
}

.timeline-item h3 a:hover {
  color: var(--orangered);
}

.timeline-item-images {
  line-height: 0;
}

.timeline-item-images > *:first-child {
  margin-top: 0;
  padding-top: 0;
}

.timeline-item-images > *:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.timeline-item-images img {
  width: 100%;
  height: auto;
  display: block;
}

.timeline-item-images p {
  margin-bottom: 1em;
}

.pinned-badge {
  display: inline-block;
  font-size: 0.6em;
  margin-left: 0.5em;
  opacity: 0.8;
  vertical-align: middle;
}

.pinned-badge:before {
  content: "Pinned Post ";
  text-transform: uppercase;
}

.timeline-item time {
  color: var(--gray);
  font-style: italic;
}

.timeline-item p {
  margin-bottom: 0.75em;
}

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

.ctr {
  font-size: .8em;
}

@media screen and (width >= 960px) {

  a.main-link[href] {
    font-size: 2rem;
  }

  .timeline-item {
    display: flex;
    flex-direction: row-reverse;
  }

  .timeline-item-content {
    max-width: 768px;
    flex-shrink: 0;
    padding: 1em 2em;
  }

    /* For Sale page specific styles */
  .forsale .container {
    max-width: 1120px;
    margin: 0 auto;
  }

  .forsale .timeline-item {
    flex-direction: row;
  }

  .forsale img {
    width: 768px;
    height: auto;
  }

  /* Animations page specific styles */
  .animations .container {
    max-width: 1120px;
    margin: 0 auto;
  }

  .animations .timeline-item {
    flex-direction: row;
  }

  .animations img, .animations video {
    width: 768px;
    height: auto;
  }

  /* Rock Music page specific styles */
  .rock .container {
    max-width: 1120px;
    margin: 0 auto;
  }

  .rock .timeline-item {
    flex-direction: row;
  }

   .rock audio {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
  }

/* Press page specific styles */
  .press .container {
    max-width: 1120px;
    margin: 0 auto;
  }

  .press .timeline-item {
    flex-direction: row;
  }

  .press img, .press video {
    width: 768px;
    height: auto;
  }

  /* When there's no image, let content take full width */
  .timeline-item:not(:has(.timeline-item-image)):not(:has(.timeline-item-images)) .timeline-item-content {
    max-width: 100%;
  }

  .timeline-item-content {
    width: 600px;
  }

  .timeline-item-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    min-width: 0;
  }

  .timeline-item-image img {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: cover;
  }

  .timeline-item-images {
    background: #f5f5f5;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .timeline-item-images img {
    max-width: 960px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
  }
}

/******* END HOME TIMELINE SECTION *******/

.newspaper {
  background: url("/static/img/timeline/paper-light.jpg") center center
    no-repeat;
  background-size: cover;
  font-family: "Times New Roman", serif;
  padding: 3em;
}

.resume .cover-letter {
  background-color: #fafaf8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'BentonSans Regular', sans-serif;
  font-size: .8rem;
  margin: 2rem auto;
  max-width: 80%;
  padding: 2rem;
}

.resume .cover-letter-header {
  margin-bottom: 2rem;
}

.resume .cover-letter-header span {
  display: inline-block;
  font-size: 0.8rem;
  margin-right: 1rem;
}

.resume .cover-letter-header p {
  margin: 0.25rem 0;
}

.resume .cover-letter-body {
  line-height: 1.6;
}

.resume .cover-letter-body p {
  margin-bottom: 1rem;
  margin-top: 0;
}

.resume .cover-letter-closing {
  margin-top: 2rem;
}

.resume .resume {
  background-color: #fafaf8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  font-family: 'BentonSans Regular', sans-serif;
  font-size: .8rem;
  margin: 2rem auto;
  max-width: 80%;
  padding: 2rem;
}

.resume p.date {
  color: var(--gray);
  font-size: 0.7rem;
  margin-bottom: 0;
}

.resume p.position {
  font-weight: 600;
  margin-top: 0;
}

.resume .resume-header {
  margin-bottom: 2rem;
}

.resume .resume-header span {
  display: inline-block;
  font-size: 0.8rem;
  margin-right: 1rem;
}

.resume .resume-header p {
  margin: 0.25rem 0;
}

.resume .resume-two-column {
  display: block;
}

.resume .resume-main {
  margin-bottom: 2rem;
}

.resume .resume-sidebar {
  padding: 1.5rem;
}

.resume .resume-sidebar h3 {
  color: var(--black);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  margin-top: 1.5rem;
}

.resume .resume-sidebar h3:first-child {
  margin-top: 0;
}

.resume .resume-sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resume .resume-sidebar li {
  font-size: 0.85em;
  margin-bottom: 0.25rem;
}

.resume ul.highlights {
  margin-left: -2em;
  margin-top: 0.5rem;
}

.resume ul.highlights li {
  margin-bottom: 0.5rem;
}

@media screen and (width >= 768px) {
  .resume .cover-letter {
    max-width: 816px;
    padding: 4rem;
  }

  .resume .resume {
    max-width: 816px;
    padding: 4rem;
  }

  .resume .resume-two-column {
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr;
  }

  .resume .resume-main {
    margin-bottom: 0;
  }
}

.tech {
  color: var(--gray);
  font-size: 0.8rem;
}

@media screen and (width >=768px) {
  a.post-tag,
  a.post-tag:visited {
    display: inline;
    margin: 0;
    background: var(--white);
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    color: var(--blue);
  }

  .bullet {
    display: inline;
  }
}

/* About page layout */
.about-intro {
  margin-bottom: 2rem;
}

.about-gallery-wrapper {
  display: block;
  margin: 2rem 0;
}

.about-gallery-wrapper .carousel-btn {
  display: none;
}

.about-gallery {
  display: block;
}

.about-slide {
  inline-size: fit-content;
  margin: 0 0 2rem;
  margin-inline: auto;
  width: auto;
}

.about-slide:last-child {
  margin-bottom: 0;
}

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

.about-slide figcaption {
  color: var(--gray);
  contain: inline-size;
  line-height: 1.4;
  margin-top: 0.5rem;
  margin-left: 0;
  overflow-wrap: break-word;
  width: 100%;
}

@media screen and (width >= 960px) {
  .about-gallery {
    display: block;
    max-width: 1000px;
    padding: 0 2rem;
  }

  .about-slide {
    margin: 0 0 3rem;
    margin-inline: auto;
    max-width: 900px;
  }

  .about-slide.portrait {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    max-width: 960px;
  }

  .about-slide.portrait img {
    flex: 0 0 50%;
    height: auto;
    max-width: 50%;
    width: 50%;
  }

  .about-slide.portrait figcaption {
    flex: 1;
    margin-top: 0;
    width: 50%;
  }

  .about-slide.landscape {
    inline-size: 100%;
    max-width: 100%;
  }

  .about-slide.landscape img {
    height: auto;
    width: 100%;
  }
}


.press.flex {
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
}

.press .left {
  order: 2;
}

.press .right {
  order: 1;
  margin-bottom: 1rem;
}

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

@media screen and (width >=960px) {
  :root {
    font-size: 1.1rem;
  }

  /* Hide hamburger menu on desktop */
  .mobile-menu {
    display: none;
  }

  /* Hide mobile nav on desktop */
  .nav-mobile {
    display: none;
  }

  /* Show desktop horizontal nav */
  .nav-desktop {
    display: block;
  }

  .nav-desktop > ul {
    align-items: center;
    display: flex;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .nav-desktop .nav-item {
    position: relative;
  }

  .nav-desktop .nav-label {
    color: var(--black);
    cursor: pointer;
    display: block;
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.5em .25em .25em;
    transition: color 0.25s ease;
  }

  .nav-desktop .nav-label:hover,
  .nav-desktop .nav-item:hover > .nav-label {
    color: var(--orangered);
  }

  /* Dropdown menu */
  .nav-desktop .nav-dropdown {
    background: var(--dropdown);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 1000px;
    padding: 0.5em 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
  }

  /* Show dropdown on hover */
  .nav-desktop .nav-item:hover > .nav-dropdown,
  .nav-desktop .nav-item:focus-within > .nav-dropdown {
    display: block;
  }

  .nav-desktop .nav-dropdown li {
    margin: 0;
    padding: 0;
  }

  .nav-desktop .nav-dropdown a {
    align-items: center;
    color: var(--blue);
    display: flex;
    font-family: var(--font-secondary);
    font-size: 2rem;
    font-weight: 600;
    padding: .25em 1em;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .nav-desktop .nav-dropdown a:hover {
    background-color: var(--lightgray);
    color: var(--orangered);
  }

  /* Link text - prevent line breaks */
  .nav-desktop .nav-link-text {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Tooltips */
  .nav-desktop .nav-tooltip {
    color: var(--black);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4;
    margin-left: 2em;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: normal;
  }

  .nav-desktop .nav-dropdown a:hover .nav-tooltip {
    opacity: 1;
  }

  body > footer {
    padding: 2em 2em 1em;
  }

  footer.home {
    width: 100%;
    padding: 0;
  }

  footer .search-box-container {
    margin-top: 0.5em;
    width: 40vw;
  }

  article video {
    width: auto;
  }

  .animation-individual,
  .animation-individual video {
    text-align: center;
    max-width: 768px;
  }

  .animations article p,
  .animations article p img {
    text-align: center;
    max-width: 768px;
  }

  .container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1120px;
  }

  .container-wide {
    margin-left: auto;
    margin-right: auto;
    width: 90vw;
  }

  .flex {
    display: flex;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .align-items-center {
    align-items: center;
  }

  .row-reverse {
    flex-direction: row-reverse;
  }

  .space-around {
    justify-content: space-around;
  }

  .space-between {
    justify-content: space-between;
  }

  .left {
    margin-right: 1em;
  }

  /* About page desktop layout */
  .about-intro {
    max-width: 768px;
  }

  .press.flex {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: 2fr 1fr;
    margin-bottom: 3rem;
    max-width: 1120px;
  }

  .press .left {
    order: 0;
  }

  .press .right {
    margin-bottom: 0;
    order: 0;
  }

  .image {
    flex-basis: 50%;
  }

  .home main {
    overflow: visible;
  }

  .home .intro-home {
    display: flex;
    font-size: 2em;
    height: 75vh;
    margin-bottom: 5rem;
    position: relative;
  }

  .home .footnote {
    font-size: 1rem;
    margin-top: 10vh;
  }

  .home .footnote a {
    color: white;
  }

  .home .intro-home p {
    line-height: 1.5;
  }

  .chevron {
    margin-top: 20px;
    display: block;
    animation: pulse 2s infinite;
    color: var(--orangered);
  }

  .chevron::before {
    border-style: solid;
    border-width: 0.25em 0.25em 0 0;
    content: "";
    display: inline-block;
    height: 20px;
    position: relative;
    transform: rotate(135deg);
    vertical-align: top;
    width: 20px;
  }

  @keyframes pulse {
    0% {
      transform: translate(0, 0);
    }

    50% {
      transform: translate(0, 10px);
    }

    100% {
      transform: translate(0, 0);
    }
  }

  .page-numbers {
    display: inline;
  }

  .page__sketchbook .container {
    width: 100%;
  }

  .page__sketchbook .container main p {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    gap: 0 0;
    place-items: center;
  }

  .page__sketchbook .container main img {
    margin: 0 auto;
    max-height: 300px;
    max-width: 100%;
    width: auto;
  }

  .page__sketchbook .container main p br {
    display: none;
  }

  .photo-timeline-link {
    display: inline-block;
    height: 128px;
    margin: 2px;
    overflow: hidden;
    width: 128px;
  }

  .self-portrait {
    border-radius: 1em;
    height: 80vh;
    margin: 0 2em;
    width: auto;
  }

  a.post-tag {
    display: inline;
    margin: 0;
    background: var(--white);
    padding: 0;
    border-radius: 0;
    font-size: 1em;
    color: var(--blue);
  }

  .bullet {
    display: inline;
  }

  .side-by-side {
    display: flex;
  }
  .tagslist a {
    color: black;
    position: relative;
  }

  .tagslist a span img {
    width: 240px;
  }
  .tagslist a:hover {
    text-decoration: none;
  }
  .tagslist a:hover span {
    display: block;
  }

  .tagslist-image-container {
    height: 240px;
    overflow: hidden;
    text-align: center;
  }

  .grid-4-across {
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    grid-template-rows: repeat(5, 1fr);
    gap: 5px;
  }

  .join-my-mailing-list-form {
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
}

/* Onetalker mailing list trigger */
.onetalker-trigger {
  position: fixed;
  bottom: 0;
  right: 10px;
  width: 50px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 100;
  pointer-events: auto;
}

.onetalker-image {
  width: 100%;
  height: 0;
  padding-bottom: 200%;
  background-image: url('/static/img/site/onetalker-quiet.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  transition: opacity 0.2s ease;
  position: relative;
}

@keyframes talking {
  0%, 6% { opacity: 0; }
  8%, 14% { opacity: 1; }
  16%, 22% { opacity: 0; }
  24%, 30% { opacity: 1; }
  32%, 38% { opacity: 0; }
  40%, 46% { opacity: 1; }
  48%, 54% { opacity: 0; }
  56%, 62% { opacity: 1; }
  64%, 70% { opacity: 0; }
  72%, 78% { opacity: 1; }
  80%, 86% { opacity: 0; }
  88%, 94% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

.onetalker-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/static/img/site/onetalker-talking.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  opacity: 0;
}

.onetalker-trigger:hover .onetalker-image::after {
  opacity: 1;
}

.onetalker-bubble {
  align-items: center;
  background-image: url('/static/img/site/onetalker-speech-bubble-var-blue.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  bottom: 65%;
  display: flex;
  height: 133px;
  justify-content: center;
  margin-bottom: 0.5rem;
  opacity: 0;
  padding: 1rem;
  position: absolute;
  right: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  visibility: hidden;
  width: 200px;
}

.onetalker-bubble-text {
  color: white;
  font-size: calc(1.1rem + 2px);
  font-weight: 600;
  line-height: 1;
  margin: 0;
  margin-top:-1rem;
  text-align: center;
  white-space: normal;
}

.onetalker-trigger.modal-open .onetalker-bubble {
  opacity: 0;
  visibility: hidden;
}

/* Desktop: hover shows bubble and talking animation */
@media screen and (min-width: 768px) {
  .onetalker-trigger:hover .onetalker-bubble {
    opacity: 1;
    visibility: visible;
  }

  .onetalker-trigger:hover .onetalker-image::after {
    animation: talking 1s ease-in-out forwards;
  }
}

@media screen and (max-width: 767px) {
  .onetalker-trigger {
    width: 50px;
  }

  .onetalker-image {
    height: 100px;
    padding-bottom: 0;
  }

  .onetalker-bubble {
    width: 180px;
    height: 120px;
    font-size: 1.3rem;
    padding: 1.5rem 0.75rem 0.5rem 0.75rem;
  }

  /* Mobile: disable hover */
  .onetalker-trigger:hover .onetalker-bubble {
    opacity: 0;
    visibility: hidden;
  }

  .onetalker-trigger:hover .onetalker-image::after {
    opacity: 0;
  }

  /* Mobile: first click shows bubble and talking animation */
  .onetalker-trigger.active .onetalker-bubble {
    opacity: 1;
    visibility: visible;
  }

  .onetalker-trigger.active .onetalker-image::after {
    animation: talking 1s ease-in-out forwards;
  }

  /* Mobile: modal open hides bubble and shows quiet state */
  .onetalker-trigger.modal-open .onetalker-image::after {
    opacity: 0;
  }
}

/* ============================================
   YOUTUBE FACADE
   ============================================ */

.youtube-facade {
  background: #000;
  cursor: pointer;
  display: block;
  max-width: 100%;
  position: relative;
}

.youtube-facade img {
  display: block;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
  width: 100%;
}

.youtube-facade:hover img {
  opacity: 1;
}

.youtube-play-btn {
  background: rgba(180, 0, 0, 0.9);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 48px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
}

.youtube-play-btn::after {
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  border-width: 10px 0 10px 18px;
  content: '';
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-30%, -50%);
}

.youtube-facade:hover .youtube-play-btn {
  background: #c00;
}

/* ============================================
   PSYCH SWAP (hover/tap image reveal)
   ============================================ */

.psych-swap {
  cursor: pointer;
  display: block;
  position: relative;
}

.psych-after,
.psych-text {
  display: none;
}

.psych-swap:hover .psych-before,
.psych-swap.is-revealed .psych-before {
  display: none;
}

.psych-swap:hover .psych-after,
.psych-swap.is-revealed .psych-after {
  display: block;
}

.psych-swap:hover .psych-text,
.psych-swap.is-revealed .psych-text {
  display: block;
  font-size: 36px;
  font-weight: bold;
}

#viewport button#buttonNext,
#viewport button#buttonPrevious {
  display: none;
}

@media screen and (width >=768px) {
  #viewport {
    height: 75vh;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    width: 768px;
  }

  #viewport p,
  #viewport li {
    align-items: center;
    display: flex;
    height: 65vh;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  }

  #viewport p img,
  #viewport li img {
    display: block;
    max-width: 300px;
    opacity: 0;
    transition: opacity 1s ease-in-out;
  }

  #viewport p img.fadedIn,
  #viewport li img.fadedIn {
    opacity: 1;
  }

  #viewport button:not(.gsc-search-button, .hamburger, .submit),
  #viewport button#buttonNext,
  #viewport button#buttonPrevious {
    align-items: center;
    background: var(--lightblue);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    height: 36px;
    justify-content: center;
    margin-top: -18px;
    padding: 0;
    place-items: center;
    position: absolute;
    top: 50%;
    transition: background-color 0.15s ease;
    width: 36px;
    z-index: 2;
  }

  #viewport button#buttonNext img,
  #viewport button#buttonPrevious img {
    display: block;
    filter: brightness(0) invert(1);
    height: 1em;
    width: 1.25em;
  }

  #viewport button#buttonPrevious img {
    transform: translateX(-1px);
  }

  #viewport button#buttonNext img {
    transform: translateX(1px);
  }

  #viewport button#buttonNext:hover,
  #viewport button#buttonPrevious:hover {
    background: var(--orangered);
  }

  #viewport button#buttonNext {
    right: 0;
  }

  #caption {
    padding: 1em 0;
    text-align: center;
  }

  #viewport {
    height: 70vh;
  }

  #viewport p img,
  #viewport li img {
    /*    height: 100%;
    max-width: 100%; */
    height: 550px;
    max-width: 768px;
    width: auto;
  }

  #buttonNext {
    right: 0;
  }
}

/* Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */

button.hamburger {
  align-items: center;
  border: 0 solid var(--white);
  background-color: var(--lightblue);
  display: flex;
  margin: 0 0 0 1em;
  width: 40px;
}

.hamburger {
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.hamburger:hover .hamburger-inner,
.hamburger:hover .hamburger-inner::before,
.hamburger:hover .hamburger-inner::after {
  background-color: var(--orangered);
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--orangered);
}

.hamburger:focus {
  outline: 0 solid white;
}

.hamburger-box {
  width: 40px;
  height: 24px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
  width: 40px;
  height: 4px;
  background-color: var(--blue);
  border-radius: 4px;
  position: absolute;
  transition-property: transform, background-color;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -10px;
}

.hamburger-inner::after {
  bottom: -10px;
}

/*
   * Squeeze
   */
.hamburger--squeeze .hamburger-inner {
  transition-duration: 0.075s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze .hamburger-inner::before {
  transition:
    top 0.075s 0.12s ease,
    opacity 0.075s ease;
}

.hamburger--squeeze .hamburger-inner::after {
  transition:
    bottom 0.075s 0.12s ease,
    transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger--squeeze.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.12s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger--squeeze.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition:
    top 0.075s ease,
    opacity 0.075s 0.12s ease;
}

.hamburger--squeeze.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition:
    bottom 0.075s ease,
    transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}

@media screen and (width >=960px) {
  button.hamburger {
    margin: 0 1em;
  }
}

.demo-container {
  margin: 0 auto;
  width: 90vw;
}

#svg-overlay-container {
  background: url("/static/img/web/iStock-453310465-2800.jpg") center center
    no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
}

#svg-overlay-container #background-image {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
}

#svg-overlay-container #product-svg {
  position: relative;
  z-index: 2;
  mix-blend-mode: multiply;
}

#svg-overlay-container #product-shape {
  fill: #fff;
}

#svg-overlay-container .colors {
  display: flex;
  position: absolute;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

#svg-overlay-container .colors .color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 30%);
  border: 2px solid #aaa;
  cursor: pointer;
}

@media screen and (width >=960px) {
  .demo-container {
    width: 50vw;
  }
}

.glightbox-container{width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999!important;overflow:hidden;-ms-touch-action:none;touch-action:none;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;outline:0}.glightbox-container.inactive{display:none}.glightbox-container .gcontainer{position:relative;width:100%;height:100%;z-index:9999;overflow:hidden}.glightbox-container .gslider{-webkit-transition:-webkit-transform .4s ease;transition:-webkit-transform .4s ease;transition:transform .4s ease;transition:transform .4s ease,-webkit-transform .4s ease;height:100%;left:0;top:0;width:100%;position:relative;overflow:hidden;display:-webkit-box!important;display:-ms-flexbox!important;display:flex!important;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.glightbox-container .gslide{width:100%;position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;opacity:0}.glightbox-container .gslide.current{opacity:1;z-index:99999;position:relative}.glightbox-container .gslide.prev{opacity:1;z-index:9999}.glightbox-container .gslide-inner-content{width:100%}.glightbox-container .ginner-container{position:relative;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-width:100%;margin:auto;height:100vh}.glightbox-container .ginner-container.gvideo-container{width:100%}.glightbox-container .ginner-container.desc-bottom,.glightbox-container .ginner-container.desc-top{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.glightbox-container .ginner-container.desc-left,.glightbox-container .ginner-container.desc-right{max-width:100%!important}.gslide iframe,.gslide video{outline:0!important;border:none;min-height:165px;-webkit-overflow-scrolling:touch;-ms-touch-action:auto;touch-action:auto}.gslide:not(.current){pointer-events:none}.gslide-image{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.gslide-image img{max-height:100vh;display:block;padding:0;float:none;outline:0;border:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100vw;width:auto;height:auto;-o-object-fit:cover;object-fit:cover;-ms-touch-action:none;touch-action:none;margin:auto;min-width:200px}.desc-bottom .gslide-image img,.desc-top .gslide-image img{width:auto}.desc-left .gslide-image img,.desc-right .gslide-image img{width:auto;max-width:100%}.gslide-image img.zoomable{position:relative}.gslide-image img.dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.gslide-video{position:relative;max-width:100vh;width:100%!important}.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster{display:none}.gslide-video .gvideo-wrapper{width:100%;margin:auto}.gslide-video::before{content:'';position:absolute;width:100%;height:100%;background:rgba(255,0,0,.34);display:none}.gslide-video.playing::before{display:none}.gslide-video.fullscreen{max-width:100%!important;min-width:100%;height:75vh}.gslide-video.fullscreen video{max-width:100%!important;width:100%!important}.gslide-inline{background:#fff;text-align:left;max-height:calc(100vh - 40px);overflow:auto;max-width:100%;margin:auto}.gslide-inline .ginlined-content{padding:20px;width:100%}.gslide-inline .dragging{cursor:-webkit-grabbing!important;cursor:grabbing!important;-webkit-transition:none;transition:none}.ginlined-content{overflow:auto;display:block!important;opacity:1}.gslide-external{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;min-width:100%;background:#fff;padding:0;overflow:auto;max-height:75vh;height:100%}.gslide-media{display:-webkit-box;display:-ms-flexbox;display:flex;width:auto}.zoomed .gslide-media{-webkit-box-shadow:none!important;box-shadow:none!important}.desc-bottom .gslide-media,.desc-top .gslide-media{margin:0 auto;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gslide-description{position:relative;-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%}.gslide-description.description-left,.gslide-description.description-right{max-width:100%}.gslide-description.description-bottom,.gslide-description.description-top{margin:0 auto;width:100%}.gslide-description p{margin-bottom:12px}.gslide-description p:last-child{margin-bottom:0}.zoomed .gslide-description{display:none}.glightbox-button-hidden{display:none}.glightbox-mobile .glightbox-container .gslide-description{height:auto!important;width:100%;position:absolute;bottom:0;padding:19px 11px;max-width:100vw!important;-webkit-box-ordinal-group:3!important;-ms-flex-order:2!important;order:2!important;max-height:78vh;overflow:auto!important;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));background:linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%);-webkit-transition:opacity .3s linear;transition:opacity .3s linear;padding-bottom:50px}.glightbox-mobile .glightbox-container .gslide-title{color:#fff;font-size:1em}.glightbox-mobile .glightbox-container .gslide-desc{color:#a1a1a1}.glightbox-mobile .glightbox-container .gslide-desc a{color:#fff;font-weight:700}.glightbox-mobile .glightbox-container .gslide-desc *{color:inherit}.glightbox-mobile .glightbox-container .gslide-desc .desc-more{color:#fff;opacity:.4}.gdesc-open .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:.4}.gdesc-open .gdesc-inner{padding-bottom:30px}.gdesc-closed .gslide-media{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:1}.greset{-webkit-transition:all .3s ease;transition:all .3s ease}.gabsolute{position:absolute}.grelative{position:relative}.glightbox-desc{display:none!important}.glightbox-open{overflow:hidden}.gloader{height:25px;width:25px;-webkit-animation:lightboxLoader .8s infinite linear;animation:lightboxLoader .8s infinite linear;border:2px solid #fff;border-right-color:transparent;border-radius:50%;position:absolute;display:block;z-index:9999;left:0;right:0;margin:0 auto;top:47%}.goverlay{width:100%;height:calc(100vh + 1px);position:fixed;top:-1px;left:0;background:#000;will-change:opacity}.glightbox-mobile .goverlay{background:#000}.gclose,.gnext,.gprev{z-index:99999;cursor:pointer;width:26px;height:44px;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.gclose svg,.gnext svg,.gprev svg{display:block;width:25px;height:auto;margin:0;padding:0}.gclose.disabled,.gnext.disabled,.gprev.disabled{opacity:.1}.gclose .garrow,.gnext .garrow,.gprev .garrow{stroke:#fff}.gbtn.focused{outline:2px solid #0f3d81}iframe.wait-autoplay{opacity:0}.glightbox-closing .gclose,.glightbox-closing .gnext,.glightbox-closing .gprev{opacity:0!important}.glightbox-clean .gslide-description{background:#fff}.glightbox-clean .gdesc-inner{padding:22px 20px}.glightbox-clean .gslide-title{font-size:1em;font-weight:400;font-family:arial;color:#000;margin-bottom:19px;line-height:1.4em}.glightbox-clean .gslide-desc{font-size:.86em;margin-bottom:0;font-family:arial;line-height:1.4em}.glightbox-clean .gslide-video{background:#000}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.75);border-radius:4px}.glightbox-clean .gclose path,.glightbox-clean .gnext path,.glightbox-clean .gprev path{fill:#fff}.glightbox-clean .gprev{position:absolute;top:-100%;left:30px;width:40px;height:50px}.glightbox-clean .gnext{position:absolute;top:-100%;right:30px;width:40px;height:50px}.glightbox-clean .gclose{width:35px;height:35px;top:15px;right:10px;position:absolute}.glightbox-clean .gclose svg{width:18px;height:auto}.glightbox-clean .gclose:hover{opacity:1}.gfadeIn{-webkit-animation:gfadeIn .5s ease;animation:gfadeIn .5s ease}.gfadeOut{-webkit-animation:gfadeOut .5s ease;animation:gfadeOut .5s ease}.gslideOutLeft{-webkit-animation:gslideOutLeft .3s ease;animation:gslideOutLeft .3s ease}.gslideInLeft{-webkit-animation:gslideInLeft .3s ease;animation:gslideInLeft .3s ease}.gslideOutRight{-webkit-animation:gslideOutRight .3s ease;animation:gslideOutRight .3s ease}.gslideInRight{-webkit-animation:gslideInRight .3s ease;animation:gslideInRight .3s ease}.gzoomIn{-webkit-animation:gzoomIn .5s ease;animation:gzoomIn .5s ease}.gzoomOut{-webkit-animation:gzoomOut .5s ease;animation:gzoomOut .5s ease}@-webkit-keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes lightboxLoader{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes gfadeIn{from{opacity:0}to{opacity:1}}@keyframes gfadeIn{from{opacity:0}to{opacity:1}}@-webkit-keyframes gfadeOut{from{opacity:1}to{opacity:0}}@keyframes gfadeOut{from{opacity:1}to{opacity:0}}@-webkit-keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInLeft{from{opacity:0;-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0)}to{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@keyframes gslideOutLeft{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(-60%,0,0);transform:translate3d(-60%,0,0);opacity:0;visibility:hidden}}@-webkit-keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes gslideInRight{from{opacity:0;visibility:visible;-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0)}to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@keyframes gslideOutRight{from{opacity:1;visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}to{-webkit-transform:translate3d(60%,0,0);transform:translate3d(60%,0,0);opacity:0}}@-webkit-keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@keyframes gzoomIn{from{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:1}}@-webkit-keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes gzoomOut{from{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@media (min-width:769px){.glightbox-container .ginner-container{width:auto;height:auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.glightbox-container .ginner-container.desc-top .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-top .gslide-image,.glightbox-container .ginner-container.desc-top .gslide-image img{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.glightbox-container .ginner-container.desc-left .gslide-description{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.glightbox-container .ginner-container.desc-left .gslide-image{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.gslide-image img{max-height:97vh;max-width:100%}.gslide-image img.zoomable{cursor:-webkit-zoom-in;cursor:zoom-in}.zoomed .gslide-image img.zoomable{cursor:-webkit-grab;cursor:grab}.gslide-inline{max-height:95vh}.gslide-external{max-height:100vh}.gslide-description.description-left,.gslide-description.description-right{max-width:275px}.glightbox-open{height:auto}.goverlay{background:rgba(0,0,0,.92)}.glightbox-clean .gslide-media{-webkit-box-shadow:1px 2px 9px 0 rgba(0,0,0,.65);box-shadow:1px 2px 9px 0 rgba(0,0,0,.65)}.glightbox-clean .description-left .gdesc-inner,.glightbox-clean .description-right .gdesc-inner{position:absolute;height:100%;overflow-y:auto}.glightbox-clean .gclose,.glightbox-clean .gnext,.glightbox-clean .gprev{background-color:rgba(0,0,0,.32)}.glightbox-clean .gclose:hover,.glightbox-clean .gnext:hover,.glightbox-clean .gprev:hover{background-color:rgba(0,0,0,.7)}.glightbox-clean .gprev{top:45%}.glightbox-clean .gnext{top:45%}}@media (min-width:992px){.glightbox-clean .gclose{opacity:.7;right:20px}}@media screen and (max-height:420px){.goverlay{background:#000}}
#timeline-list a[href],
#timeline-list a[href]:visited {
  color: var(--blue);
  transition: all 0.3s ease;
}

#timeline-list a[href]:hover,
#timeline-list a[href]:active {
  color: var(--orangered);
  text-decoration: none;
}

/* Hide timeline-detail on mobile */
#timeline-detail {
  display: none;
}

@media screen and (width >=960px) {
  #text-timeline {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "timeline-list"
      "timeline-detail";
  }

  #timeline-detail {
    display: block;
    grid-area: timeline-detail;
    height: auto;
    margin: 0 auto;
    padding: 1em;
    position: fixed;
    right: 2em;
    top: 10em;
    width: 45%;
  }

  #timeline-detail .thumbnail-container {
    align-items: center;
    display: flex;
    grid-area: thumbnail-container;
    justify-content: center;
  }

  #timeline-detail .thumbnail-container a {
    display: block;
    line-height: 0;
  }

  #timeline-detail .thumbnail-container img {
    display: block;
    height: 500px;
    margin: 0 auto;
    max-width: 100%;
    object-fit: contain;
  }

  #timeline-detail .summary {
    margin-left: 1em;
    grid-area: summary;
  }

  #timeline-detail .timeline-text-preview {
    font-size: 1.2em;
    line-height: 1.6;
    padding: 1em;
  }

  #timeline-list {
    grid-area: timeline-list;
  }
}

/**************************\
  Basic Modal Styles
\**************************/

.modal {
  font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: flex-start;  /* top-align vertically (default for search modal) */
  padding: 120px 0 20px 0;  /* top padding for search modal */
  justify-content: center;
  overflow-y: auto;
  z-index: 999;
}

/* Onetalker modal specific bottom-alignment */
.micromodal-slide-up .modal__overlay {
  align-items: flex-end;  /* bottom-align for onetalker modal */
  padding: 20px 0 70px 0;  /* space at bottom for fixed onetalker */
}

@media screen and (max-width: 767px) {
  .modal__overlay {
    padding: 60px 0 20px 0;  /* reduce top padding on mobile for search modal */
  }
  
  .micromodal-slide-up .modal__overlay {
    padding: 20px 0 70px 0;  /* same bottom padding on mobile for onetalker */
  }
}

.modal__container {
  background-color: #fff;
  padding: 0 30px;
  max-width: 900px;    /* wider */
  width: 90vw;         /* scale with viewport, but capped by max-width */
  max-height: calc(100vh - 140px); /* leave room above and below */
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0 -30px;
  padding: 12px 30px;
  background: var(--blue);
  color: #fff;
  border-radius: 4px 4px 0 0;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before { content: "\2715"; }

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0,0,0,.8);
}

.modal__btn {
  font-size: .875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: .5rem;
  padding-bottom: .5rem;
  background-color: var(--blue);
  /*color: rgba(0,0,0,.8);*/
  color: var(--darkblue);
  border-radius: .25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  width: auto;
  display: inline-flex;
  align-items: center;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform .25s ease-out;
  transition: transform .25s ease-out;
  transition: transform .25s ease-out,-webkit-transform .25s ease-out;
}

.modal__btn:focus, .modal__btn:hover {
  background-color: var(--orangered);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-close {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--lightblue);
  cursor: pointer;
  font-size: 0.875rem;
  margin-left: 1rem;
  padding: 0;
  width: auto;
}

.modal__btn-close svg {
  pointer-events: none;
}

.modal__btn-close:focus,
.modal__btn-close:hover,
.modal__btn-close:active {
  background: transparent;
  color: var(--orangered);
  transform: scale(1.1);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

.modal__btn {
  width: auto;            /* don't stretch full width */
  display: inline-flex;   /* optional: nicer alignment */
  align-items: center;    /* optional */
}



/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
      to { opacity: 0; }
}

@keyframes mmslideIn {
  from { transform: translateY(15%); }
    to { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

#dialog {
  display: none;
}

#dialog.is-open {
  display: block;
}

/* Onetalker modal slide-up animation */
@keyframes mmslideInFromBottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes mmslideOutToBottom {
  from { transform: translateY(0); }
  to { transform: translateY(100%); }
}

.micromodal-slide-up[aria-hidden="false"] .modal__container {
  animation: mmslideInFromBottom .4s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide-up[aria-hidden="true"] .modal__container {
  animation: mmslideOutToBottom .4s cubic-bezier(0, 0, .2, 1);
}

/* Onetalker modal container sizing */
.onetalker-modal-container {
  max-width: 90vw;
  width: 90vw;
  margin: 0;
  font-size: calc(1em - 1px);
}

@media screen and (min-width: 768px) {
  .onetalker-modal-container {
    max-width: 50vw;
    width: 50vw;
    font-size: 1em;
  }
}

/* ============================================
   HOMEPAGE.CSS - Component-specific styles
   ============================================
   Styles for homepage components (grids, newsletter).
   Global article layout styles are in inline.css.
   ============================================ */

/* ============================================
   RECENT POSTS GRID SECTION
   ============================================ */

.recent-posts-section {
  background-color: var(--white);
  border-top: 1px solid #e5e5e5;
  margin-top: 2em;
  padding: 3em 0 1em 0;
}

.recent-posts-container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1em;
}

/* Section labels for homepage sections */
.section-label {
  color: var(--black);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  font-weight: 700;
  margin: 0 auto 1.5em auto;
  max-width: 1120px;
  padding: 0 1em;
  text-align: left;
}

.section-label a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.section-label a:hover {
  color: var(--orangered);
}

@media (min-width: 768px) {
  .recent-posts-container .section-label {
    padding: 0;
  }
}

.recent-posts-carousel {
  align-items: center;
  display: flex;
  gap: 0.5em;
}

.recent-posts-viewport {
  container-type: inline-size;
  flex: 1;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.recent-posts-viewport::-webkit-scrollbar {
  display: none;
}

.recent-posts-track {
  display: flex;
  gap: 2em;
}

.carousel-btn {
  align-items: center;
  background: var(--lightblue);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  font-size: 1rem;
  height: 2.5em;
  justify-content: center;
  transition: background-color 0.15s ease;
  width: 2.5em;
}

.carousel-btn img {
  display: block;
  filter: brightness(0) invert(1);
  height: 1em;
  width: 1.25em;
}

.carousel-btn-prev img {
  transform: translateX(-1px);
}

.carousel-btn-next img {
  transform: translateX(1px);
}

.carousel-btn:hover {
  background: var(--orangered);
}

.carousel-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

.recent-post-card {
  background-color: var(--white);
  border-radius: 0.5em;
  contain-intrinsic-size: 0 420px;
  content-visibility: auto;
  flex: none;
  overflow: hidden;
  scroll-snap-align: start;
  width: 100cqi;
}

.post-type-label {
  border-bottom: 1px solid var(--black);
  font-family: var(--font-secondary);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0.5em 0 0;
  padding-bottom: 0.25em;
  text-transform: uppercase;
}

.recent-post-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.recent-post-image {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1/1;
}

.recent-post-image img {
  height: 100%;
  margin: 0;
  object-fit: contain;
  width: 100%;
}

.recent-post-content {
  padding: 1.5em;
}

.recent-post-title {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
  color: var(--black);
}

.recent-post-excerpt {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0 0 1em 0;
}

.recent-post-meta {
  margin-top: 1em;
}

.recent-post-date {
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================
   NEWSLETTER SIGNUP SECTION
   ============================================ */

.newsletter-signup-section {
  background-color: #f9f9f9;
  padding: 3em 0;
  margin-top: 3em;
  border-top: 1px solid #e5e5e5;
}

.newsletter-signup-container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1em;
}

.newsletter-signup-content {
  text-align: center;
}

.newsletter-signup-heading {
  font-family: var(--font-secondary);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.3;
  margin: 0 0 0.5em 0;
  color: var(--black);
}

.newsletter-signup-subheading {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0 0 2em 0;
}

/* OVERRIDE: inline.css:531-534 - form styling */
/* Original: form { display: grid; padding: 2em 0 1em; } */
.newsletter-signup-form {
  display: block;
  padding: 0;
  margin: 0;
}

.newsletter-signup-fields {
  display: flex;
  gap: 0.5em;
  max-width: 500px;
  margin: 0 auto 1em auto;
}

/* OVERRIDE: inline.css:549-557 - input/button width */
/* Original: input, textarea, button { width: 100%; padding: 1em; margin-bottom: 1em; ... } */
.newsletter-signup-input {
  flex: 1;
  padding: 0.875em 1em;
  margin: 0;
  font-size: 1rem;
  font-family: var(--font-primary);
  border: 1px solid #ddd;
  border-radius: 0.25em;
  background-color: var(--white);
  transition: border-color 0.3s ease;
}

.newsletter-signup-input:focus {
  outline: none;
  border-color: var(--blue);
}

.newsletter-signup-disclaimer {
  font-family: var(--font-primary);
  font-size: 0.875rem;
  color: var(--gray);
  margin: 1em 0 0 0;
}

/* ============================================
   RESPONSIVE DESIGN - TABLET
   ============================================ */

@container (min-width: 600px) {
  .recent-post-card {
    width: calc(50cqi - 1em);
  }
}

@media screen and (min-width: 600px) {
  
  .latest-post-title {
    font-size: 3rem;
  }
  
  .newsletter-signup-heading {
    font-size: 2rem;
  }
}

/* ============================================
   RESPONSIVE DESIGN - DESKTOP
   ============================================ */

@container (min-width: 900px) {
  .recent-post-card {
    width: calc(33.333cqi - 1.334em);
  }
}

@media screen and (min-width: 900px) {
  
  .latest-post-title {
    font-size: 3rem;
  }
  
  .latest-post-excerpt {
    font-size: 1.5rem;
  }
  
  .newsletter-signup-fields {
    flex-direction: row;
  }
}

/* ============================================
   ANNOUNCEMENT MODAL
   ============================================ */

.modal__overlay--centered {
  align-items: center;
  padding: 20px;
}

.modal__container--announcement {
  max-width: 860px;
  width: 90vw;
}

.modal__header--announcement {
  background: var(--orangered);
}

.modal__title--announcement {
  color: #fff;
  font-family: var(--font-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.modal__header--announcement .modal__btn-close {
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--lightblue);
  cursor: pointer;
  padding: 0;
  width: auto;
}

.modal__header--announcement .modal__btn-close svg {
  pointer-events: none;
}

.modal__header--announcement .modal__btn-close:focus,
.modal__header--announcement .modal__btn-close:hover,
.modal__header--announcement .modal__btn-close:active {
  background: transparent;
  color: var(--orangered);
  transform: scale(1.1);
}

.announcement-layout {
  display: flex;
  gap: 2em;
}

.announcement-text {
  flex: 0 0 60%;
  min-width: 0;
}

.announcement-image {
  flex: 0 0 calc(40% - 2em);
  min-width: 0;
}

.announcement-image a {
  display: block;
}

.announcement-image img {
  display: block;
  height: auto;
  width: 100%;
}

.announcement-date {
  color: var(--gray);
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  margin: 0 0 0.5em 0;
  text-transform: uppercase;
}

.announcement-title {
  font-family: var(--font-secondary);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.75em 0;
}

.announcement-title a {
  color: inherit;
  text-decoration: none;
}

.announcement-title a:hover {
  color: var(--orangered);
}

.announcement-excerpt {
  color: var(--gray);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 1.5em 0;
}

.announcement-interest {
  border-top: 1px solid #e5e5e5;
  margin-top: 1.5em;
  padding-top: 1.5em;
}

.announcement-interest-label {
  align-items: flex-start;
  cursor: pointer;
  display: flex;
  font-family: var(--font-secondary);
  font-size: 1rem;
  font-weight: 700;
  gap: 0.6em;
  line-height: 1.4;
}

.announcement-interest input[type="checkbox"] {
  cursor: pointer;
  flex-shrink: 0;
  height: 1.2em;
  margin-bottom: 0;
  margin-top: 0.1em;
  padding: 0;
  width: 1.2em;
}

.announcement-interest {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.announcement-declined {
  padding: 2em 0;
  text-align: center;
}

.announcement-declined p {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 0.5em 0;
}

.announcement-countdown {
  font-family: var(--font-secondary);
  font-size: 3rem;
  font-weight: 700;
  margin: 0.5em 0;
}

.announcement-granted {
  color: var(--orangered);
  font-family: var(--font-secondary);
  font-size: 1.5rem;
  font-weight: 700;
}

@media screen and (max-width: 599px) {
  .announcement-layout {
    flex-direction: column-reverse;
  }

  .announcement-text,
  .announcement-image {
    flex: none;
    width: 100%;
  }

  .announcement-title {
    font-size: 1.375rem;
  }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media screen and (max-width: 599px) {
  .newsletter-signup-fields {
    flex-direction: column;
    gap: 0.75em;
  }
  
  .newsletter-signup-button {
    width: 100%;
  }
  
  .latest-post-title {
    font-size: 2rem;
  }
  
  .latest-post-excerpt {
    font-size: 1.125rem;
  }
}

/* ============================================
   HORIZONTAL GALLERY LAYOUT
   ============================================
   Horizontal scrolling portfolio gallery with
   smooth scroll wheel navigation. Arrow buttons
   snap images to center. Arrows hide at ends.
   ============================================ */

/* Main container */
.horizontal-gallery-page {
  overflow: hidden;
}

.horizontal-gallery-page main {
  margin-top: 0;
}

.horizontal-gallery-main {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.horizontal-gallery-container {
  align-items: center;
  display: flex;
  height: 100vh;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Ensure scrollbar is visible */
.horizontal-gallery-container::-webkit-scrollbar {
  height: 12px;
}

.horizontal-gallery-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.horizontal-gallery-container::-webkit-scrollbar-thumb {
  background: #888;
}

.horizontal-gallery-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.horizontal-gallery-container {
  scrollbar-width: auto;
}

/* Gallery items (converted from markdown list items) */
.horizontal-gallery-container ul,
.horizontal-gallery-container ol {
  align-items: center;
  display: flex;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 calc(50vw - 500px) 0 calc(50vw - 500px);
}

.horizontal-gallery-container li {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
}

.horizontal-gallery-container li.gallery-spacer {
  flex: 0 0 calc(50vw - 500px);
  min-height: 1px;
  padding: 0;
}

/* Handle text content before list (like intro text) */
.horizontal-gallery-container > div:not(.gallery-end-marker),
.horizontal-gallery-container > p {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: 0 50px;
}

/* Images */
.horizontal-gallery-container img {
  height: auto;
  max-height: 60vh;
  max-width: 80vw;
  object-fit: contain;
  width: auto;
}

/* Videos */
.horizontal-gallery-container video {
  height: auto;
  max-height: 60vh;
  max-width: 80vw;
  object-fit: contain;
  width: auto;
}

/* Iframes */
.horizontal-gallery-container iframe {
  max-height: 60vh;
  max-width: 80vw;
}

/* Links around images */
.horizontal-gallery-container a {
/*  align-items: center;
  display: flex;
  flex-direction: column;*/
  text-decoration: none;
}

/* Painting metadata */
.painting-metadata {
  margin-top: 1.5em;
  max-width: 80vw;
  opacity: 0;
  text-align: left;
  transition: opacity 0.2s ease;
}

.painting-title {
  color: var(--black, #000);
  font-family: var(--font-secondary, serif);
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5em 0;
}

.painting-details {
  color: var(--black, #000);
  font-family: var(--font-primary, sans-serif);
  font-size: 0.9rem;
  margin: 0;
}

.painting-details span {
  display: inline;
  margin: 0;
}

.item-link {
  display: block;
  margin-top: 0.5em;
}

.item-link a {
  color: var(--blue, #0066cc);
  text-decoration: none;
}

.item-link a:hover {
  text-decoration: underline;
}

/* Navigation arrows */
.gallery-arrow {
  align-items: center;
  background-color: var(--blue);
  border: none;
  border-radius: 50%;
  color: var(--black, #000);
  cursor: pointer;
  display: flex;
  height: 60px;
  justify-content: center;
  opacity: 0.9;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity 0.3s ease, background-color 0.3s ease;
  width: 60px;
  z-index: 100;
}

.gallery-arrow:hover {
  background-color: var(--blue);
  opacity: 1;
}

.gallery-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.gallery-arrow-prev {
  left: 2rem;
}

.gallery-arrow-next {
  right: 2rem;
}

/* Hide arrows when at start/end */
.gallery-arrow.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Tablet and mobile adjustments */
@media screen and (max-width: 768px) {
  .gallery-arrow {
    height: 50px;
    width: 50px;
  }
  
  .gallery-arrow-prev {
    left: 1rem;
  }
  
  .gallery-arrow-next {
    right: 1rem;
  }
  
  .horizontal-gallery-container li {
    padding: 0 50px;
  }
  
  .horizontal-gallery-container img {
    height: auto;
    max-height: 60vh;
    max-width: 90vw;
  }
  
  .horizontal-gallery-container video {
    height: auto;
    max-height: 60vh;
    max-width: 90vw;
  }
  
  .horizontal-gallery-container iframe {
    max-height: 60vh;
    max-width: 90vw;
  }
  
  .painting-title {
    font-size: 1.25rem;
  }
  
  .painting-details {
    font-size: 0.85rem;
  }
}

/* Small mobile */
@media screen and (max-width: 480px) {
  .gallery-arrow {
    height: 40px;
    opacity: 0.7;
    width: 40px;
  }
  
  .gallery-arrow svg {
    height: 30px;
    width: 30px;
  }
  
  .painting-title {
    font-size: 1.1rem;
  }
  
  .painting-details {
    font-size: 0.8rem;
  }
  
  .painting-details span {
    display: block;
    margin: 0.25em 0;
  }
  
  .painting-details span::before {
    content: "";
    margin-right: 0;
  }
}

@font-face {
    font-family: 'ShadowGrotesque';
    src: url('/static/webfonts/ShadowGrotesque/shadowgrotesque-webfont.woff2') format('woff2'),
         url('/static/webfonts/ShadowGrotesque/shadowgrotesque-webfont.woff') format('woff'),
         url('/static/webfonts/ShadowGrotesque/shadowgrotesque-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}