/* Illustration layers have white backgrounds and composite onto the studio's paper. */
@font-face {
  font-family: "Cormorant Hero";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/cormorant-garamond-hero-latin-9e10c643.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
.tree-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--color-paper); }
.tree-hero__inner { position: relative; max-width: 1440px; margin-inline: auto; }
.tree-hero__scene { position: relative; pointer-events: none; }
.tree-hero__scene img { display: block; width: 100%; height: auto; }
.tree-hero__tree, .tree-hero__table { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; }
.tree-hero__tree { transform-origin: 50% 81%; }
.tree-hero__copy { position: relative; z-index: 1; }
.tree-hero__copy h1 { font-family: var(--font-serif); font-size: clamp(2.25rem, 3.65vw, 3.5rem); font-weight: 500; line-height: 1.13; text-wrap: balance; }
.tree-hero[data-display-font="cormorant"] h1 { font-family: "Cormorant Hero", "Cormorant Garamond", Georgia, serif; font-weight: 400; }
.tree-hero__links { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.tree-hero__secondary { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.125rem; text-decoration: underline; text-underline-offset: .3em; }
.tree-hero--volume .tree-hero__primary, .tree-hero--paper .tree-hero__primary { flex-basis: 100%; }
.tree-hero__controls { position: absolute; z-index: 2; right: 1rem; bottom: .5rem; display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: .5rem; }
.tree-hero__motion, .tree-hero__lights { min-height: 44px; padding: .5rem .75rem; color: var(--color-ink-muted); font-size: .75rem; cursor: pointer; }
.tree-hero__lights:hover, .tree-hero__motion:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: .2em; }
.tree-hero__bulbs { position: absolute; inset: 0; opacity: 0; }
.tree-hero.is-ready .tree-hero__bulbs { opacity: 1; }
.tree-hero__bulb { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer; pointer-events: auto; background: transparent; -webkit-tap-highlight-color: transparent; }
.tree-hero__bulb:hover { outline: 1px solid color-mix(in srgb, var(--color-ink) 30%, transparent); outline-offset: -5px; }
.tree-hero__bulb:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; }
.tree-hero--drawn .tree-hero__scene { max-width: 1152px; margin: 0 auto; aspect-ratio: 1536 / 790; overflow: hidden; }
.tree-hero--drawn .tree-hero__tree, .tree-hero--drawn .tree-hero__table { top: -20%; }
.tree-hero--drawn .tree-hero__tree { transform: translateY(7.5%); }
.tree-hero--drawn .tree-hero__copy { max-width: 820px; padding: 1.5rem 1.5rem 3.75rem; margin: auto; text-align: center; }
.tree-hero--drawn .tree-hero__copy h1 { font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.25; }
.tree-hero--drawn .tree-hero__links { justify-content: center; margin-top: 1rem; }
.tree-hero--drawn .tree-hero__links .btn { background: transparent; color: var(--color-ink); border: none; padding: 0; font-weight: 400; font-size: 1.125rem; }
.tree-hero--volume .tree-hero__inner { display: grid; grid-template-columns: 37% 63%; align-items: center; min-height: 620px; padding: 1rem 2.5rem 3rem; }
.tree-hero--volume .tree-hero__scene { grid-column: 2; grid-row: 1; width: 112%; margin: -3rem 0 -3rem -4%; aspect-ratio: 1; }
.tree-hero--volume .tree-hero__copy { grid-column: 1; grid-row: 1; padding-left: clamp(0px, calc((100vw - 1200px) / 4), 60px); }
.tree-hero__fallback { transition: opacity .35s ease; }
.tree-hero__scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .35s ease; }
.tree-hero.is-ready canvas { opacity: 1; }
.tree-hero.is-ready .tree-hero__fallback { opacity: 0; }
.tree-hero--paper .tree-hero__inner { aspect-ratio: 1536 / 1024; }
.tree-hero--paper .tree-hero__scene { position: absolute; inset: 0; }
.tree-hero--paper .tree-hero__tree { transform-origin: 79% 89%; }
.tree-hero--paper .tree-hero__copy { width: 49%; padding: 0 0 0 7%; position: absolute; top: 49%; }
.tree-hero--paper .tree-hero__copy h1 { font-size: clamp(2.25rem, 3.5vw, 3.3rem); }
.tree-hero--paper .tree-hero__table { top: 0; }
.tree-hero.is-moving.tree-hero--drawn .tree-hero__tree { animation: drawn-tree-breeze 12s ease-in-out infinite alternate; }
.tree-hero.is-moving.tree-hero--paper .tree-hero__tree { animation: paper-tree-breeze 14s ease-in-out infinite alternate; }
.tree-hero.is-paused .tree-hero__tree { animation-play-state: paused; }
@keyframes drawn-tree-breeze { from { transform: translateY(7.5%) rotate(-.25deg); } to { transform: translateY(7.5%) rotate(.25deg); } }
@keyframes paper-tree-breeze { from { transform: rotate(-.22deg); } to { transform: rotate(.22deg); } }

.hero-preview-bar { padding: .75rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--color-line); }
.hero-preview-bar p { font-size: .875rem; }
.hero-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.hero-option { position: relative; border: 1px solid var(--color-line); border-radius: var(--radius-md); overflow: hidden; }
.hero-option:has(input:checked) { border-color: var(--color-clay-dark); box-shadow: 0 0 0 1px var(--color-clay-dark); background: var(--color-paper-soft); }
.hero-option:has(input:focus-visible) { outline: 3px solid var(--color-clay-dark); outline-offset: 3px; }
.hero-option__label { display: block; cursor: pointer; height: calc(100% - 44px); }
.hero-option input { position: absolute; top: .75rem; left: .75rem; z-index: 1; width: 1.25rem; height: 1.25rem; accent-color: var(--color-clay-dark); }
.hero-option__art { display: block; position: relative; aspect-ratio: 3 / 2; background: var(--color-paper); overflow: hidden; }
.hero-option__art img { position: absolute; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.hero-option__art--image img { object-fit: cover; mix-blend-mode: normal; }
.hero-option__art--drawn img:first-child { transform: translateY(7.5%); }
.hero-option__name { display: block; margin: .9rem 1rem .3rem; font-weight: 600; }
.hero-option__description { display: block; margin: 0 1rem .5rem; color: var(--color-ink-muted); font-size: .875rem; line-height: 1.5; }
.hero-option__preview { display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem; color: var(--color-clay-dark); font-size: .875rem; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) {
  .tree-hero--drawn .tree-hero__scene { margin-top: 0; }
  .tree-hero--drawn .tree-hero__copy { padding-top: 1.25rem; }
  .tree-hero--volume .tree-hero__inner { display: flex; flex-direction: column; min-height: 0; padding: 0 1.5rem 4rem; }
  .tree-hero--volume .tree-hero__scene { width: min(110%, 520px); margin: -.5rem 0 -1rem; }
  .tree-hero--volume .tree-hero__copy { padding: 0; max-width: 500px; text-align: center; }
  .tree-hero--volume .tree-hero__links { justify-content: center; }
  .tree-hero--paper .tree-hero__inner { aspect-ratio: auto; padding-bottom: 4rem; }
  .tree-hero--paper .tree-hero__scene { position: relative; aspect-ratio: 1536 / 1024; }
  .tree-hero--paper .tree-hero__copy { position: relative; top: auto; width: 100%; padding: 1.5rem 1.5rem 0; text-align: center; }
  .tree-hero--paper .tree-hero__links { justify-content: center; }
  .tree-hero__copy h1, .tree-hero--paper .tree-hero__copy h1 { font-size: clamp(1.9rem, 7vw, 2.65rem); }
  .hero-preview-bar { flex-wrap: wrap; padding: .75rem 1rem; }
}
@media (max-width: 420px) { .hero-options { grid-template-columns: 1fr; } }
@media (min-width: 1024px) { .tree-hero--paper { padding-bottom: 3rem; } }
@media (min-width: 768px) and (max-width: 1023px) {
  .tree-hero--paper .tree-hero__inner { aspect-ratio: auto; padding-bottom: 4rem; }
  .tree-hero--paper .tree-hero__scene { position: relative; aspect-ratio: 1536 / 1024; }
  .tree-hero--paper .tree-hero__copy { position: relative; top: auto; width: min(100%, 740px); margin: auto; padding: 1.5rem 1.5rem 0; text-align: center; }
  .tree-hero--paper .tree-hero__links { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tree-hero .tree-hero__tree { animation: none !important; }
  .tree-hero__scene canvas, .tree-hero__fallback { transition: none; }
  .tree-hero__motion { display: none; }
}