/* Hero: an intimate invitation staged as an editorial cover.
   Scoped to the hero; approved copy and other sections are unchanged. */
.hero-feature {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: #4B1018;
  color: #FFF9F0;
}
.hero-feature::before {
  content: '';
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(255,249,240,.14);
  pointer-events: none;
}
.hero-feature-inner {
  position: relative;
  display: grid;
  grid-template-columns: 56% 44%;
  padding-block: 53px 77px;
  min-height: 760px;
}
.hero-editorial { position: relative; z-index: 3; min-width: 0; padding: 18px 30px 0 0; }
.hero-kicker {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 30px;
  color: #F1D4BA;
  font: 400 10px/1.5 var(--sans);
  letter-spacing: .19em; text-transform: uppercase;
}
.hero-kicker > span { width: 25px; height: 25px; flex: 0 0 25px; border: 1px solid #D6A180; border-radius: 50%; position: relative; }
.hero-kicker > span::after { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #D6A180; inset: 9px; }
.hero-feature h1 { position: relative; color: #FFF9F0; font-family: var(--serif); letter-spacing: -.055em; font-weight: 400; line-height: .89; }
.hero-feature h1 em { font-weight: 400; color: inherit; }
.hero-invitation { display: block; font-size: clamp(42px, 4.5vw, 67px); margin-bottom: 10px; letter-spacing: -.045em; }
.hero-kitchen { display: block; font-size: clamp(64px, 7.65vw, 115px); white-space: nowrap; }
.hero-yours { position: relative; display: block; width: fit-content; margin-left: 12%; margin-top: -2px; padding-bottom: 12px; font-size: clamp(96px, 11.6vw, 175px); line-height: .85; color: #E4B79A; }
.hero-yours::after { content: ''; position: absolute; left: -13%; right: -12%; bottom: 8px; height: 1px; background: #D6A180; transform: rotate(-7deg); opacity: .65; }
.hero-introduction { max-width: 393px; margin-top: 25px; color: #EDDDD5; font-size: 15px; line-height: 1.8; }
.hero-links { display: flex; align-items: center; gap: 18px 26px; flex-wrap: wrap; margin-top: 26px; }
.hero-links .button { background: #FFF9F0; color: #4B1018; border-color: #FFF9F0; min-height: 54px; padding-inline: 21px; gap: 22px; font-size: 11px; box-shadow: none; }
.hero-links .button:hover { background: #E4B79A; border-color: #E4B79A; }
.hero-links .button > span { transition: transform .25s; }
.hero-links .button:hover > span { transform: translateX(5px); }
.hero-secondary { display: inline-flex; align-items: center; gap: 15px; min-height: 44px; color: #FFF9F0; border-bottom: 1px solid rgba(255,249,240,.5); font: 400 11px/1.5 var(--sans); }
.hero-secondary:hover { border-bottom-color: #FFF9F0; }
.hero-secondary > span { font-size: 20px; }
.hero-credentials { width: fit-content; display: flex; gap: 28px; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,249,240,.2); }
.hero-credentials p { display: flex; align-items: center; gap: 12px; }
.hero-credentials strong { color: #E4B79A; font: 400 39px/1 var(--serif); }
.hero-credentials span { color: #EDDDD5; font: 400 10px/1.55 var(--sans); }
.hero-credentials p + p { padding-left: 26px; border-left: 1px solid rgba(255,249,240,.2); }

/* The portrait sits inside a sculptural arch, with a fine orbit behind it. */
.hero-visual { position: relative; min-width: 0; min-height: 645px; margin: 0 4px 0 0; }
.hero-orbit { position: absolute; width: 118%; height: 83%; top: -1%; left: -12%; border: 1px solid rgba(228,183,154,.42); border-radius: 50%; transform: rotate(17deg); pointer-events: none; }
.portrait-stack { position: absolute; inset: 0 0 71px; background: #211C19; border-radius: 48% 48% 3px 3px / 35% 35% 3px 3px; overflow: hidden; transform: translate3d(var(--portrait-x,0px),var(--portrait-y,0px),0); transition: transform .45s ease-out; }
.portrait-stack::after { content: ''; position: absolute; z-index: 3; inset: 11px; border: 1px solid rgba(255,249,240,.35); border-radius: 48% 48% 0 0 / 35% 35% 0 0; pointer-events: none; }
.portrait-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.portrait-slide.is-current { opacity: 1; z-index: 1; }
.portrait-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.portrait-slide:nth-child(2) img { object-position: center 29%; }
.portrait-slide:nth-child(3) img { object-position: center 15%; }
.hero-photo-credit { position: absolute; top: 49%; right: -28px; z-index: 4; color: #EDDDD5; font: 400 8px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; writing-mode: vertical-rl; }
.portrait-navigation { position: absolute; z-index: 6; right: 0; bottom: 23px; display: flex; align-items: center; gap: 16px; color: #FFF9F0; padding: 0; background: transparent; }
.portrait-counter { font: 400 10px/1 var(--sans); letter-spacing: .09em; }
.portrait-counter b { font-weight: 600; }
.portrait-dots { display: flex; }
.portrait-dots button { position: relative; width: 34px; height: 44px; background: transparent; border: 0; }
.portrait-dots button::after { content: ''; position: absolute; top: 21px; left: 4px; right: 4px; height: 2px; background: rgba(255,249,240,.3); transition: background .2s; }
.portrait-dots button[aria-pressed="true"]::after { background: #E4B79A; }
.portrait-pause { width: 44px; height: 44px; border: 1px solid rgba(255,249,240,.3); border-radius: 50%; color: #FFF9F0; background: transparent; font-size: 16px; }
.portrait-pause:hover { border-color: #E4B79A; }
.portrait-caption { position: absolute; right: 0; bottom: -14px; color: #EDDDD5; font: italic 20px/1.5 var(--serif); }

/* A photographic bookmark: only an existing image from Larissa's book. */
.hero-recipe-peek { position: absolute; z-index: 5; left: 45%; bottom: 57px; width: 202px; display: flex; flex-direction: column; padding: 9px 9px 12px; color: #4B1018; background: #FFF9F0; box-shadow: 0 7px 22px rgba(25,8,10,.15); transform: rotate(-8deg); transition: transform .35s ease, box-shadow .35s; }
.hero-recipe-peek:hover { transform: rotate(-2deg) translateY(-5px); box-shadow: 0 13px 25px rgba(25,8,10,.2); }
.hero-recipe-peek > img { width: 100%; height: 131px; object-fit: cover; }
.hero-recipe-peek > span { display: block; padding: 13px 7px 0; }
.hero-recipe-peek small { display: block; color: #665D55; font: 500 7px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; }
.hero-recipe-peek strong { display: block; font: 500 25px/.98 var(--serif); }
.peek-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; color: #4B1018; font: 400 9px/1.3 var(--sans); }
.peek-link b { font-size: 21px; font-weight: 400; }
.hero-ribbon { position: relative; z-index: 7; display: flex; justify-content: center; align-items: center; gap: clamp(16px, 3.1vw, 50px); min-height: 67px; padding: 17px 6%; color: #4B1018; background: #F5F0E8; border-bottom: 1px solid rgba(75,16,24,.15); font: 500 9px/1.5 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.hero-ribbon i { color: #9A6345; font: normal 22px/1 var(--serif); }
.hero-ribbon a { display: flex; align-items: center; gap: 18px; min-height: 40px; margin-left: auto; }
.hero-ribbon a span { font-size: 19px; }
.hero-feature :is(a,button):focus-visible { outline: 2px solid #E4B79A; outline-offset: 5px; }
.hero-recipe-peek:focus-visible, .hero-ribbon a:focus-visible { outline-color: #4B1018; }
@keyframes invitation-enter { from { opacity: .15; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes portrait-enter { from { opacity: .2; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker { animation: invitation-enter .6s ease both; }
  .hero-invitation { animation: invitation-enter .8s .06s ease both; }
  .hero-kitchen { animation: invitation-enter .9s .12s ease both; }
  .hero-yours { animation: invitation-enter 1s .18s ease both; }
  .hero-visual { animation: portrait-enter 1s ease both; }
}
@media (max-width: 1100px) {
  .hero-feature-inner { min-height: 740px; padding-block: 40px 72px; grid-template-columns: 55% 45%; }
  .hero-editorial { padding-right: 25px; }
  .hero-kicker { font-size: 9px; gap: 10px; }
  .hero-invitation { font-size: clamp(38px, 4.5vw, 50px); }
  .hero-kitchen { font-size: 7.35vw; }
  .hero-yours { font-size: 11vw; }
  .hero-introduction { font-size: 14px; max-width: 350px; }
  .hero-links { gap: 10px 17px; }
  .hero-links .button { padding-inline: 16px; gap: 13px; font-size: 10px; }
  .hero-visual { min-height: 620px; }
  .hero-recipe-peek { left: 47%; width: 170px; bottom: 90px; }
  .hero-recipe-peek > img { height: 112px; }
  .hero-recipe-peek strong { font-size: 22px; }
  .hero-credentials { gap: 18px; }
  .hero-credentials p + p { padding-left: 18px; }
  .hero-ribbon { gap: 20px; font-size: 8px; }
}
@media (min-width: 721px) and (max-width: 860px) {
  .hero-feature-inner { grid-template-columns: 52% 48%; }
  .hero-kicker { max-width: 250px; font-size: 8px; }
  .hero-invitation { font-size: 36px; }
  .hero-kitchen { font-size: 7.2vw; }
  .hero-credentials { gap: 10px; }
  .hero-credentials strong { font-size: 31px; }
  .hero-credentials span { font-size: 9px; }
  .hero-recipe-peek { left: 48%; width: 146px; }
  .hero-recipe-peek > img { height: 96px; }
  .hero-recipe-peek strong { font-size: 21px; }
  .hero-photo-credit { right: -21px; font-size: 7px; }
  .portrait-navigation { gap: 7px; }
  .portrait-caption { font-size: 18px; }
  .hero-ribbon a { display: none; }
}
@media (max-width: 720px) {
  .hero-feature::before { inset: 12px 10px 79px; }
  .hero-feature-inner { display: flex; flex-direction: column; min-height: 0; padding: 0 0 51px; }
  .hero-editorial { padding: 35px 0 31px; }
  .hero-kicker { font-size: 8px; gap: 10px; margin-bottom: 23px; letter-spacing: .12em; }
  .hero-kicker > span { width: 21px; height: 21px; flex-basis: 21px; }
  .hero-kicker > span::after { inset: 7px; }
  .hero-invitation { font-size: clamp(38px, 10.3vw, 60px); margin-bottom: 8px; }
  .hero-kitchen { font-size: clamp(56px, 15.2vw, 85px); }
  .hero-yours { font-size: clamp(91px, 25vw, 138px); margin-left: 22%; padding-bottom: 8px; }
  .hero-yours::after { bottom: 5px; }
  .hero-introduction { margin-top: 20px; max-width: 440px; font-size: 15px; line-height: 1.7; }
  .hero-links { margin-top: 22px; gap: 12px; }
  .hero-links .button { min-height: 52px; font-size: 10px; padding-inline: 17px; }
  .hero-secondary { font-size: 10px; gap: 9px; }
  .hero-credentials { margin-top: 25px; padding-top: 18px; gap: 23px; }
  .hero-credentials strong { font-size: 34px; }
  .hero-credentials span { font-size: 10px; }
  .hero-credentials p + p { padding-left: 22px; }
  .hero-visual { margin: 7px 7px 0 19px; height: 510px; min-height: 0; }
  .hero-orbit { top: 0; height: 76%; left: -8%; width: 109%; }
  .portrait-stack { inset: 0 0 72px; }
  .portrait-stack::after { inset: 8px; }
  .portrait-slide img { object-position: center 21%; }
  .hero-photo-credit { right: -16px; font-size: 6px; letter-spacing: .1em; top: 32%; }
  .portrait-navigation { bottom: 17px; right: 0; gap: 9px; }
  .portrait-counter { font-size: 9px; }
  .portrait-dots button { width: 28px; }
  .portrait-caption { bottom: -17px; font-size: 18px; }
  .hero-recipe-peek { left: -3px; bottom: 127px; width: 133px; padding: 6px 6px 9px; transform: rotate(-7deg); }
  .hero-recipe-peek > img { height: 83px; }
  .hero-recipe-peek > span { padding: 9px 4px 0; }
  .hero-recipe-peek small { font-size: 6px; letter-spacing: .07em; }
  .hero-recipe-peek strong { font-size: 20px; }
  .peek-link { font-size: 8px; gap: 4px; margin-top: 5px; }
  .peek-link b { font-size: 16px; }
  .hero-ribbon { gap: 10px 12px; flex-wrap: wrap; min-height: 70px; padding: 15px 22px; font-size: 7px; letter-spacing: .08em; }
  .hero-ribbon > i { font-size: 16px; }
  .hero-ribbon > span:last-of-type, .hero-ribbon > i:last-of-type, .hero-ribbon > a { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-feature *, .hero-feature *::before, .hero-feature *::after { animation: none !important; transition: none !important; }
  .portrait-stack { transform: none; }
}