/* The interactive landscape is contained in the homepage opening. */
.field-hero {
  position: relative;
  isolation: isolate;
  height: 650px;
  margin-top: 60px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: var(--paper);
  color: var(--ink);
}
.field-copy {
  position: relative;
  z-index: 2;
  padding: 56px 6% 0;
  width: 64%;
  touch-action: pan-y pinch-zoom;
  pointer-events: none;
}
.field-copy .eyebrow {
  text-transform: uppercase;
  letter-spacing: 2.1px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 19px;
}
.field-copy .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; }
.field-copy h1 { font-family: var(--font-body); font-weight: 500; letter-spacing: -3.8px; font-size: clamp(46px,6vw,76px); line-height: 1.04; margin: 0 0 20px; }
.field-copy h1 span { color: var(--accent-text); }
.field-intro { font-size: 16px; line-height: 1.6; max-width: 385px; color: var(--muted); margin: 0 0 22px; }
.field-cta { display: inline-flex; gap: 32px; align-items: center; font-weight: 600; font-size: 13px; border-radius: 5px; padding: 14px 19px; background: var(--ink); color: var(--paper); min-height: 48px; pointer-events: auto; }
.field-cta span { font-size: 18px; line-height: 12px; }
.field-cta:hover { opacity: .9; }
.field-hero .sky-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 65%,#efaf7899,transparent 65%); opacity: 0; }
.field-hero .celestial { position: absolute; z-index: 0; appearance: none; border: 0; padding: 0; border-radius: 50%; background: transparent; line-height: 0; transform-origin: center; will-change: transform; cursor: pointer; }
.field-hero .sun { right: 14%; top: 73px; width: 104px; height: 104px; background: #eed08e; }
.field-hero .sun::after { content: ''; position: absolute; inset: 10px; border: 1px solid #f6f3ea88; border-radius: 50%; }
.field-hero .moon { right: 16%; top: 73px; width: 75px; height: 75px; transform: translateY(500px); }
.field-hero .moon svg { display: block; width: 100%; height: 100%; fill: #d8d1ef; }
.field-hero .celestial:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; }
.field-hero .cloud { position: absolute; right: 4%; top: 224px; display: flex; gap: 7px; align-items: center; }
.field-hero .cloud i { display: block; border-radius: 2px; height: 2px; width: 36px; background: var(--line); }
.field-hero .cloud i:nth-child(2) { width: 68px; }
.field-hero .cloud.two { top: 65px; right: 31%; }
.field-hero .cloud.two i { width: 23px; }
#field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; touch-action: pinch-zoom; cursor: default; }
.field-tools { position: absolute; right: 4%; bottom: 15px; z-index: 4; }
.field-tools button { font: inherit; cursor: pointer; }
.reset-field { min-width: 44px; min-height: 44px; border: 0; padding: 6px 9px; border-radius: 18px; background: #30395b44; color: #fff9ef; font-size: 11px !important; text-shadow: 0 1px 5px #25293e; }
.reset-field:hover,.reset-field:focus-visible { background: #30395b99; }
.reset-field:focus-visible { outline: 2px solid #fff9ef; outline-offset: 4px; }
.keyboard-actions { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); right: 0; bottom: 50px; }
.keyboard-actions:focus-within { width: min(320px,90vw); height: auto; overflow: visible; clip-path: none; display: flex; gap: 5px; background: var(--paper); border: 1px solid var(--line); border-radius: 7px; padding: 9px; box-shadow: 0 6px 20px #25293e22; }
.keyboard-actions button { flex: 1; min-height: 44px; border: 0; border-radius: 4px; background: var(--pill); color: var(--ink); font-size: 12px; padding: 5px; }
.keyboard-actions button:disabled { opacity: .5; cursor: default; }
.field-hero button:focus-visible,.field-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.field-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cut-count { position: absolute; z-index: 2; right: 6%; top: 45%; font-size: 11px; color: var(--muted); pointer-events: none; }
.field-home .nav-brand span { font-family: var(--font-body); font-weight: 700; font-size: 23px; letter-spacing: -1px; color: var(--text); }
.field-home .nav-brand img { width: 29px; height: 30px; transition: transform .6s cubic-bezier(.34,1.56,.64,1); }
.field-home .nav-brand:focus-visible img { transform: rotate(180deg); }
@media (hover: hover) { .field-home .nav-brand:hover img { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
  .field-home .nav-brand img { transition: none; }
  .field-home .nav-brand:hover img,
  .field-home .nav-brand:focus-visible img { transform: none; }
}
@media(min-width:1300px) { .field-copy { padding-top: 64px; } .field-hero { height: 710px; } }
/* Touch tablets need the same native scrolling surface as small phones. */
@media (hover: none), (pointer: coarse) { .field-copy { pointer-events: auto; } }
@media(max-width:700px) {
  .field-hero { height: 700px; }
  .field-copy { width: 95%; padding-top: 40px; pointer-events: auto; }
  .field-copy h1 { font-size: clamp(42px,12.5vw,52px); letter-spacing: -2.8px; }
  .field-intro { max-width: 290px; font-size: 15px; }
  .field-hero .sun { width: 60px; height: 60px; top: 288px; right: 12%; }
  .field-hero .sun::after { inset: 6px; }
  .field-hero .moon { width: 53px; height: 53px; top: 288px; right: 12%; }
  .field-hero .cloud { top: 348px; }
  .field-hero .cloud.two { display: none; }
  .cut-count { top: 55%; }
}