/* Static, self-contained site. All assets are local; no build or JavaScript needed. */
* { box-sizing: border-box; }
:root { color-scheme: dark; --gold: #f6dc79; --bright-gold: #fff58c; }
html { background: #080502; }
body { margin: 0; color: var(--gold); font-family: 'Courier New', Courier, monospace; }
.landing { position: relative; isolation: isolate; min-height: 100svh; overflow: hidden; }
.landing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #0003; pointer-events: none; }
.backdrop { position: absolute; inset: 0; z-index: -2; }
.backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.content { width: min(66.2%, 1320px); margin: 0 auto; padding: 30.3svh 0 13svh; text-align: center; }
.wordmark { position: relative; width: 94%; aspect-ratio: 1595 / 112; overflow: hidden; margin: 0 auto; mix-blend-mode: screen; }
.wordmark img { position: absolute; width: 128.4%; max-width: none; height: auto; left: -14.92%; top: -175%; }
.gold-rule { height: 3px; margin-top: 2.05vw; background: linear-gradient(90deg, #dfbc59, #ffeb97 35%, #e4c25e 66%, #ffec9a); box-shadow: 0 0 3px #f3d46955; }
.tagline { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: .7em; margin: 1.6vw 0 0; font-size: clamp(.875rem, 1.62vw, 2rem); line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; }
.tagline span { white-space: nowrap; }
.tagline i { font-style: normal; letter-spacing: 0; }
.tagline span i { display: inline-block; margin: 0 .6em; }
h1 { margin: 5.6vw 0 0; font-size: clamp(1.125rem, 1.87vw, 2.35rem); font-weight: 400; line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; }
.hiring { display: flex; justify-content: center; align-items: center; width: clamp(190px, 18.6vw, 372px); min-height: max(48px, 4vw); margin: 3.8vw auto 0; padding: 12px 18px; border: 2px solid #f8df81; border-radius: 5px; box-shadow: inset 0 0 2px #f8df8188, 0 0 2px #f8df8177; color: inherit; background: #0003; font-size: clamp(.875rem, 1.32vw, 1.65rem); line-height: 1.3; text-transform: uppercase; letter-spacing: .24em; text-decoration: none; transition: background-color .2s, color .2s; }
.hiring:hover { color: #171005; background: var(--gold); }
.hiring:focus-visible { outline: 3px solid white; outline-offset: 7px; }
.form-notice { display: none; max-width: 380px; margin: 24px auto 0; font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.6; color: #fff3cc; }
.form-notice:target { display: block; }
@media (max-width: 1100px) and (min-width: 701px) {
  .content { width: 76%; }
  .tagline { letter-spacing: .09em; }
}
@media (max-width: 1000px) and (orientation: portrait) {
  :root { --gold: #fff58c; }
  .content { width: 77%; padding-top: 26.8svh; padding-bottom: 15svh; }
  .wordmark { width: 97%; }
  .wordmark img { filter: brightness(1.13); }
  .gold-rule { height: 2px; margin-top: 1.6svh; background: var(--gold); }
  .tagline { flex-direction: column; gap: 1.2svh; margin-top: 4svh; font-size: clamp(.875rem, 3.65vw, 1.65rem); line-height: 1.3; letter-spacing: .16em; }
  .desktop-dot { display: none; }
  .tagline span i { margin: 0 .55em; }
  h1 { margin-top: 6.4svh; font-size: clamp(1.125rem, 4.6vw, 2rem); letter-spacing: .23em; }
  .hiring { width: 58%; min-width: 178px; min-height: 48px; margin-top: 9svh; padding: 12px 8px; border-color: var(--gold); font-size: clamp(.875rem, 3.35vw, 1.4rem); letter-spacing: .2em; }
}
@media (orientation: landscape) and (max-height: 550px) {
  .content { padding-top: 16svh; padding-bottom: 12svh; width: 72%; }
  .tagline { font-size: .875rem; letter-spacing: .06em; }
  h1 { margin-top: 5svh; }
  .hiring { margin-top: 5svh; }
}
@media (prefers-reduced-motion: reduce) { .hiring { transition: none; } }

/* Keep the desktop composition proportional to both window dimensions.
   The approved portrait/mobile rules above remain unchanged. */
@media (min-width: 1001px), (orientation: landscape) and (min-height: 551px) {
  .landing { display: flex; align-items: center; justify-content: center; }
  .content {
    container-type: inline-size;
    width: min(78vw, 117.6svh, 1320px);
    margin: 0;
    padding: 15.6svh 0 8svh;
  }
  .gold-rule { margin-top: 3.1cqw; }
  .tagline {
    justify-content: center;
    gap: 1.15em;
    margin-top: 2.4cqw;
    font-size: clamp(.875rem, 2.4cqw, 2rem);
    letter-spacing: .16em;
  }
  .tagline span i { margin: 0 .55em; }
  h1 { margin-top: 8.5cqw; font-size: clamp(1.125rem, 2.82cqw, 2.35rem); }
  .hiring {
    width: clamp(190px, 28cqw, 372px);
    min-height: max(48px, 6cqw);
    margin-top: 5.75cqw;
    font-size: clamp(.875rem, 2cqw, 1.65rem);
  }
}