:root { --forest: #173b2b; --forest-deep: #0b251a; --cream: #fffaf0; --gold: #f4bb43; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--cream); background: var(--forest-deep); font-family: "Segoe UI", Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.welcome { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); align-items: center; overflow: hidden; isolation: isolate; }
.welcome-landscape, .welcome-landscape img, .welcome-wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.welcome-landscape { z-index: -3; }
.welcome-landscape img { object-fit: cover; object-position: center; filter: saturate(.84); }
.welcome-wash { z-index: -2; background: linear-gradient(90deg, rgba(8,31,20,.95) 0%, rgba(8,31,20,.84) 41%, rgba(8,31,20,.32) 70%, rgba(8,31,20,.5) 100%); }
.welcome::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 77% 35%, rgba(244,187,67,.3), transparent 27%), linear-gradient(0deg, rgba(5,22,14,.55), transparent 34%); pointer-events: none; }
.farm-name { position: absolute; top: clamp(1.2rem, 4vw, 3.2rem); left: clamp(1.2rem, 5vw, 5.2rem); display: flex; align-items: center; gap: .9rem; }
.farm-name img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,255,255,.75); box-shadow: 0 8px 30px rgba(0,0,0,.22); }
.farm-name span { display: grid; }
.farm-name strong { font-family: Georgia, serif; font-size: 1.35rem; }
.farm-name small { margin-top: .08rem; color: #f3dca4; font-size: .67rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.welcome-copy { z-index: 2; max-width: 790px; padding: clamp(8rem, 15vh, 12rem) 2rem clamp(7rem, 12vh, 9rem) clamp(1.4rem, 8vw, 8rem); }
.eyebrow { margin: 0 0 .8rem; color: #ffe09a; font-size: .75rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
h1 { max-width: 760px; margin: 0; font-family: Georgia, serif; font-size: clamp(4.6rem, 8.2vw, 9rem); font-weight: 500; line-height: .9; letter-spacing: -.055em; text-wrap: balance; }
h1 em { color: var(--gold); font-weight: 500; }
.introduction { max-width: 680px; margin: 1.8rem 0 2.2rem; color: #f7f1e7; font-family: Georgia, serif; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.45; }
.enter-button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; padding: .85rem 1.4rem; color: var(--forest-deep); background: var(--gold); border: 2px solid var(--gold); border-radius: 3px; font-weight: 900; text-decoration: none; box-shadow: 0 12px 38px rgba(0,0,0,.2); transition: transform .2s ease, background .2s ease; }
.enter-button:hover, .enter-button:focus-visible { transform: translateY(-3px); background: #ffd36b; outline: 3px solid rgba(255,255,255,.8); outline-offset: 4px; }
.welcome-portrait { position: relative; z-index: 2; align-self: end; justify-self: center; width: min(48vw, 680px); height: min(88svh, 890px); display: grid; align-items: end; text-decoration: none; filter: drop-shadow(0 28px 38px rgba(0,0,0,.35)); }
.welcome-portrait > img { position: relative; z-index: 2; width: 100%; max-height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; animation: hattie-arrives 1.1s cubic-bezier(.22,.82,.32,1) both, hattie-sway 5.5s 1.1s ease-in-out infinite; transition: filter .2s ease; }
.welcome-portrait:hover > img, .welcome-portrait:focus-visible > img { filter: brightness(1.08) saturate(1.05); }
.welcome-portrait:focus-visible { outline: 3px solid white; outline-offset: -3px; }
.sun-glow { position: absolute; left: 50%; top: 31%; width: 75%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,229,151,.75), rgba(244,187,67,.2) 48%, transparent 70%); transform: translate(-50%,-50%); filter: blur(7px); }
.portrait-instruction { position: absolute; z-index: 3; left: 50%; bottom: 2.2rem; min-width: max-content; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: white; background: rgba(13,40,29,.82); font-size: .75rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-50%); backdrop-filter: blur(10px); }
.review-note { position: absolute; z-index: 4; left: clamp(1.2rem, 5vw, 5.2rem); bottom: 1.2rem; color: rgba(255,255,255,.63); font-size: .72rem; }
@keyframes hattie-arrives { from { opacity: 0; transform: translateY(8%) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hattie-sway { 0%,100% { transform: rotate(-.6deg); } 50% { transform: rotate(.7deg) translateY(-.5%); } }
@media (max-width: 850px) {
  .welcome { min-height: 100svh; grid-template-columns: 1fr; align-content: start; overflow: auto; }
  .welcome-landscape img { object-position: center; }
  .welcome-wash { background: linear-gradient(0deg, rgba(8,31,20,.95) 0%, rgba(8,31,20,.62) 62%, rgba(8,31,20,.35) 100%); }
  .farm-name { position: relative; top: auto; left: auto; z-index: 4; margin: 1rem 1.2rem 0; }
  .farm-name img { width: 54px; height: 54px; }
  .farm-name strong { font-size: 1rem; }
  .welcome-copy { padding: 3.8rem 1.35rem 1rem; text-align: center; }
  h1 { margin-inline: auto; font-size: clamp(3.8rem, 16vw, 6.2rem); }
  .introduction { margin: 1.25rem auto 1.7rem; font-size: 1.15rem; }
  .welcome-portrait { width: min(88vw, 520px); height: min(62svh, 650px); min-height: 440px; }
  .review-note { position: relative; left: auto; bottom: auto; z-index: 4; display: block; padding: 1rem; text-align: center; }
}
@media (max-width: 480px) {
  .welcome-copy { padding-top: 2.7rem; }
  .eyebrow { font-size: .68rem; }
  .enter-button { width: min(100%, 320px); }
  .welcome-portrait { min-height: 390px; height: 54svh; }
}
@media (prefers-reduced-motion: reduce) { .welcome-portrait > img { animation: none; } .enter-button { transition: none; } }

/* Keep the welcome and the full mascot comfortably in view. */
.welcome { grid-template-columns: 1.1fr .9fr; }
.welcome-copy { padding: 9rem 1rem 6rem clamp(1.4rem, 7vw, 7rem); }
h1 { font-size: clamp(3.5rem, 6.5vw, 7rem); line-height: 1; }
.introduction { max-width: 560px; font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
.welcome-portrait { align-self: center; width: 100%; height: min(78svh, 760px); margin-top: 4rem; min-width: 0; }
.welcome-portrait > img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; animation: hattie-arrives 1.1s ease both; }
.portrait-instruction { bottom: .5rem; }
.review-note { color: #d1dacc; max-width: 85%; }
@media (max-width: 850px) {
  .welcome { grid-template-columns: 1fr; overflow: hidden; padding-bottom: 1rem; }
  .farm-name { grid-row: 1; justify-self: center; margin: 1rem 0 .25rem; }
  .welcome-portrait { grid-row: 2; width: min(85vw, 400px); height: clamp(240px, 39svh, 380px); min-height: 0; margin: 0; }
  .portrait-instruction { font-size: .6rem; bottom: 0; padding: .4rem .7rem; }
  .welcome-copy { grid-row: 3; padding: 1.2rem 1.4rem .4rem; max-width: 620px; justify-self: center; }
  h1 { font-size: clamp(2.6rem, 9vw, 4rem); max-width: 540px; }
  .eyebrow { font-size: .6rem; margin-bottom: .6rem; }
  .introduction { margin: .8rem auto 1.2rem; font-size: 1.05rem; line-height: 1.5; }
  .enter-button { min-height: 48px; }
  .review-note { grid-row: 4; margin-inline: auto; padding: .75rem .5rem 0; font-size: .65rem; }
}