/* Four paper chapters, opening across the page. */
.site-header { z-index: 80; }

/* The original button's three petals, kept outside the button's text layer. */
.header-explore {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.header-explore-label {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: inherit;
}
.button-petal {
  position: absolute;
  z-index: 2;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.button-petal > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translate(var(--petal-x, 0px), var(--petal-y, 0px)) rotate(var(--petal-angle, 0deg));
  transition: transform .45s cubic-bezier(.2,.65,.25,1);
}
.button-petal-1 { width: 57.4px; top: -14px; left: -17.5px; --petal-angle: -10deg; }
.button-petal-2 { width: 55.3px; bottom: -19.6px; left: 30.1px; }
.button-petal-3 { width: 56.7px; top: -18.9px; right: -3.5px; }
.header-explore:focus-visible { background: var(--paper); color: #000; }
.header-explore:focus-visible .button-petal { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .header-explore:hover { background: var(--paper); color: #000; }
  .header-explore:hover .button-petal { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .header-explore, .button-petal, .button-petal > img { transition: none; }
  .button-petal > img { transform: rotate(var(--petal-angle, 0deg)); }
}

@media (min-width: 810px) {
  .site-header .desktop-nav { display: flex; }
  .site-header .menu-toggle { display: none; }
  .desktop-nav, .desktop-nav .nav-topics { position: static; }
  .nav-topics > summary {
    position: relative;
    z-index: 2;
    padding: 12px 18px;
    margin: -12px -18px;
    border: 0;
    transition: color .18s ease, background .18s ease;
  }
  .nav-topics[open] > summary {
    background: var(--accent, #b3c79b);
    color: #000;
  }
  .nav-topics[open] > summary .small-triangle { color: #000; }
  .nav-topics:not([open]) > .mega-menu { display: none; }
  .mega-menu {
    --menu-paper: #f8f7f2;
    position: absolute;
    top: calc(100% - 14px);
    left: 50%;
    width: calc(100vw - 48px);
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    isolation: isolate;
    transform: translateX(-50%);
    background: var(--menu-paper);
    color: #000;
    box-shadow: 0 28px 65px #0003;
  }
  .mega-topic {
    position: relative;
    display: block;
    min-width: 0;
    height: clamp(350px, calc(6.25vw + 260px), 380px);
    overflow: hidden;
    background: var(--menu-paper);
    color: #000;
    text-align: center;
    transform: translateY(0);
    transform-origin: center center;
    transition: transform .3s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
  }
  .mega-topic + .mega-topic { border-left: 1px solid #deddd7; }
  .mega-topic-index {
    position: relative;
    display: block;
    z-index: 3;
    margin-bottom: 20px;
    font-family: var(--body);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    color: var(--accent, #b3c79b);
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.2,.75,.2,1);
  }
  .mega-topic-copy {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    height: 100%;
    padding: 40px clamp(17px, 1.8vw, 35px) 70px;
  }
  .mega-topic-title {
    display: block;
    max-width: 100%;
    font-family: var(--display);
    font-size: clamp(48px, 3.333vw, 64px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: .005em;
    text-transform: uppercase;
    text-wrap: balance;
    transform: translateY(0);
    transition: color .25s ease, transform .35s cubic-bezier(.2,.75,.2,1);
  }
  .mega-topic-description {
    display: block;
    max-width: 255px;
    margin-top: 20px;
    font-family: var(--serif);
    font-size: clamp(14px, 1.12vw, 20px);
    font-weight: 500;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: -.02em;
    color: #24241e;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .2s ease, transform .35s cubic-bezier(.2,.75,.2,1);
  }
  .mega-topic-art {
    position: absolute;
    left: -22.5%;
    bottom: -42px;
    z-index: 1;
    display: block;
    width: 145%;
    max-width: none;
    height: 62%;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    opacity: 0;
    transform: translateY(35px);
    filter: drop-shadow(0 -4px 15px #0002);
    transition: opacity .3s ease, transform .4s cubic-bezier(.2,.75,.2,1);
  }
  .mega-topic:focus-visible {
    z-index: 4;
    transform: scale(1.055);
    box-shadow: 0 20px 38px #0003;
  }
  .mega-topic:focus-visible .mega-topic-title {
    color: var(--accent, #b3c79b);
  }
  .mega-topic:focus-visible .mega-topic-index { color: #000; }
  .mega-topic:focus-visible .mega-topic-title, .mega-topic:focus-visible .mega-topic-index {
    transform: translateY(-25px);
  }
  .mega-topic:focus-visible .mega-topic-description {
    opacity: 0;
    transform: translateY(-12px);
  }
  .mega-topic:focus-visible .mega-topic-art {
    opacity: 1;
    transform: translateY(0);
  }
  .mega-topic:focus-visible {
    outline: 3px solid #50683f;
    outline-offset: -3px;
  }
  .mobile-menu { display: none; }
}

@media (max-width: 809px) {
  .site-header .desktop-nav, .site-header .header-explore { display: none; }
  .site-header .menu-toggle { display: block; }
  .site-header { height: 106px; }
  .site-header .header-actions { gap: 12px; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: block;
    padding: 26px max(22px, env(safe-area-inset-right)) max(45px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #000;
    color: var(--paper);
  }
  .mobile-menu-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 27px; }
  .mobile-menu-top > .eyebrow { color: var(--accent, #b3c79b); font-size: 11px; }
  .mobile-menu-top > .icon-button { margin-right: -9px; }
  .mobile-menu-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 0;
    font-family: var(--display);
    font-size: clamp(51px, 12vw, 78px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: .005em;
    text-transform: uppercase;
  }
  .mobile-menu-primary > .icon { width: 29px; height: 29px; color: var(--accent, #b3c79b); }
  .mobile-menu .mobile-menu-topics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 29px;
    padding: 0;
    border: 0;
  }
  .mobile-menu-topics .mobile-topic {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: clamp(245px, 40vw, 310px);
    padding: 42px 13px 103px;
    overflow: hidden;
    background: #f8f7f2;
    color: #000;
    text-align: center;
  }
  .mobile-topic-index {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--body);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1em;
    color: #6a8255;
  }
  .mobile-topic-title {
    position: relative;
    z-index: 2;
    display: block;
    font-family: var(--display);
    font-size: clamp(35px, 8.8vw, 64px);
    font-weight: 900;
    line-height: 1.01;
    letter-spacing: .003em;
    text-transform: uppercase;
    text-wrap: balance;
  }
  .mobile-topic-description {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 240px;
    margin-top: 12px;
    font-family: var(--serif);
    font-size: clamp(11px, 2.7vw, 15px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.35;
    color: #282820;
  }
  .mobile-topic-art {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: none;
    height: 103px;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    filter: drop-shadow(0 -3px 10px #0002);
  }
  .mobile-menu-topics .mobile-topic:hover, .mobile-menu-topics .mobile-topic:focus-visible {
    background: #fff;
    color: #000;
  }
  .mobile-menu-topics .mobile-topic:focus-visible { outline: 3px solid var(--accent, #b3c79b); outline-offset: 3px; }
  .mobile-menu > .button { min-height: 54px; font-size: 12px; gap: 18px; }
  .mobile-menu > .serif { max-width: 370px; margin-top: 29px; color: #aaa99e; font-size: 19px; line-height: 1.6; }
}

@media (min-width: 810px) and (hover: hover) and (pointer: fine) {
  .mega-topic:hover {
    z-index: 4;
    transform: scale(1.055);
    box-shadow: 0 20px 38px #0003;
  }
  .mega-topic:hover .mega-topic-title { color: var(--accent, #b3c79b); }
  .mega-topic:hover .mega-topic-index { color: #000; }
  .mega-topic:hover .mega-topic-title, .mega-topic:hover .mega-topic-index {
    transform: translateY(-25px);
  }
  .mega-topic:hover .mega-topic-description { opacity: 0; transform: translateY(-12px); }
  .mega-topic:hover .mega-topic-art { opacity: 1; transform: translateY(0); }
}

@media (min-width: 810px) and (hover: none) {
  .mega-topic-copy { padding-bottom: 130px; }
  .mega-topic-art { height: 46%; opacity: 1; transform: none; }
  .mega-topic:focus-visible,
  .mega-topic:focus-visible .mega-topic-title,
  .mega-topic:focus-visible .mega-topic-index,
  .mega-topic:focus-visible .mega-topic-description { transform: none; }
  .mega-topic:focus-visible .mega-topic-description { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-topics > summary, .mega-topic, .mega-topic-index, .mega-topic-title, .mega-topic-description, .mega-topic-art { transition: none; }
  .mega-topic:hover, .mega-topic:focus-visible { transform: none; }
  .mega-topic:hover .mega-topic-index, .mega-topic:focus-visible .mega-topic-index,
  .mega-topic:hover .mega-topic-title, .mega-topic:focus-visible .mega-topic-title,
  .mega-topic:hover .mega-topic-description, .mega-topic:focus-visible .mega-topic-description { transform: none; }
  .mega-topic-art { transform: none; }
}