@font-face {
  font-family: "Valmeo Editorial";
  src: url("./assets/valmeo-editorial.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Valmeo Editorial";
  src: url("./assets/valmeo-editorial-italic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Valmeo Hand";
  src: url("./assets/valmeo-hand.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}

.boheme-hero {
  --hero-green: #354c3e;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 4%;
  min-height: 720px;
  padding: 65px max(5vw, calc((100vw - 1440px) / 2)) 100px;
  color: var(--hero-green);
  background: radial-gradient(ellipse at 83% 48%, #dce0ca 0%, transparent 46%),
    radial-gradient(ellipse at 0% 100%, #ecd2b6 0%, transparent 43%), #faf3e7;
  isolation: isolate;
}
.boheme-hero::after {
  pointer-events: none;
  z-index: -1;
  opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23847554' opacity='.2' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.boheme-hero .hero-content {
  width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
}
.boheme-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  color: #695039;
  font-size: .72rem;
  letter-spacing: .16em;
  line-height: 1.5;
}
.boheme-hero .eyebrow > span { color: #aa5e3f; font-size: 1.8rem; }
.boheme-hero h1 {
  font-family: "Valmeo Editorial", Georgia, serif;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(3.5rem, 5.5vw, 6.2rem);
  letter-spacing: -.045em;
  line-height: 1.02;
  margin-bottom: 26px;
}
.boheme-hero h1 em { color: #a85f43; font-weight: 500; }
.boheme-hero .hero-description {
  max-width: 440px;
  margin-bottom: 30px;
  color: #626656;
  font-size: 1rem;
  line-height: 1.8;
}
.boheme-hero .hero-actions { align-items: center; gap: 24px; }
.boheme-hero .button.primary {
  min-height: 55px;
  padding: 0 25px;
  gap: 22px;
  font-size: .9rem;
  background: #9f573c;
  box-shadow: 0 8px 22px #9f573c20;
  transition: transform .2s, background .2s;
}
.boheme-hero .button.primary:hover { transform: translateY(-3px); background: #85482f; }
.boheme-hero .button.primary > span { font-size: 1.3rem; }
.hero-atelier-link { font-size: .85rem; padding: 10px 0; border-bottom: 1px solid #73806a; }
.hero-atelier-link span { margin-left: 10px; }
.hero-craft-note { display: flex; align-items: center; gap: 13px; margin-top: 42px; color: #68705b; font-size: .75rem; line-height: 1.65; }
.hero-craft-note strong { font-weight: 400; }
.craft-flower { font-size: 2.7rem; color: #a98146; }
.hero-art { position: relative; width: 100%; max-width: 560px; justify-self: center; padding: 12px; }
.hero-emblem {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  padding: 0;
  border-radius: 50%;
  background: #fff5e3;
  box-shadow: 18px 28px 70px #48593c17, inset 0 0 65px #ebd7b13b;
  transform: rotate(-3deg);
}
.hero-bird {
  position: absolute;
  top: 2.5%;
  left: 2.5%;
  width: 95%;
  height: 68.5%;
  overflow: hidden;
}
.hero-bird img { display: block; width: 100%; height: auto; }
.boheme-hero .hero-signature {
  position: absolute;
  right: 0;
  bottom: 7%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 0 34px;
  text-align: center;
  color: #365744;
  font: italic 500 clamp(1.55rem, 2.35vw, 2.35rem)/1.05 "Valmeo Editorial", Georgia, serif;
}
.hero-signature span { display: block; font-size: 1em; }
.hero-signature-caption { display: block; text-align: center; margin-top: 22px; font-size: .56rem; text-transform: uppercase; letter-spacing: .14em; color: #7a684f; }
.hero-art-orbit { position: absolute; inset: -8px 7px 7px -8px; border: 1px solid #8a94756b; border-radius: 48% 48% 44% 43%; transform: rotate(6deg); }
.hero-art-star { position: absolute; top: 0; right: -8px; font: 5rem Georgia, serif; color: #a98146; }
.hero-art-note { position: absolute; bottom: -23px; right: -5px; color: #647251; font: 500 1.9rem "Valmeo Hand", cursive; transform: rotate(-9deg); }
.boheme-hero a:focus-visible { outline: 3px solid #365744; outline-offset: 6px; }

@media (min-width: 1800px) { .boheme-hero { gap: 65px; } }
@media (max-width: 1000px) {
  .boheme-hero { gap: 20px; min-height: 640px; padding: 50px 4vw 90px; }
  .boheme-hero h1 { font-size: clamp(3rem, 6vw, 4rem); }
  .boheme-hero .hero-actions { gap: 12px; }
  .hero-emblem { padding: 0; }
  .hero-signature-caption { font-size: .48rem; letter-spacing: .08em; }
}
@media (max-width: 700px) {
  .boheme-hero { grid-template-columns: 1fr; gap: 32px; padding: 32px 22px 80px; min-height: 0; }
  .boheme-hero .hero-content { text-align: center; }
  .boheme-hero .eyebrow { justify-content: center; font-size: .6rem; letter-spacing: .1em; margin-bottom: 16px; gap: 8px; }
  .boheme-hero h1 { font-size: clamp(2.9rem, 9.5vw, 4.2rem); margin-bottom: 20px; }
  .boheme-hero .hero-description { margin: 0 auto 22px; font-size: .92rem; line-height: 1.65; }
  .boheme-hero .hero-actions { justify-content: center; gap: 12px 24px; }
  .boheme-hero .hero-actions .button { width: auto; }
  .hero-craft-note { justify-content: center; margin-top: 22px; text-align: left; }
  .hero-art { width: min(85%, 390px); padding: 8px; margin-bottom: 12px; }
  .boheme-hero .hero-signature { bottom: 7%; padding: 0 18px; font-size: clamp(1.2rem, 5.4vw, 1.65rem); }
  .hero-art-star { right: -15px; font-size: 3.7rem; }
  .hero-art-note { font-size: 1.5rem; right: -18px; bottom: -14px; }
  .hero-signature-caption { font-size: .45rem; margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .boheme-hero .button.primary { transition: none; }
  .boheme-hero .button.primary:hover { transform: none; }
}