/* Layout: a 1940s war-poster prospectus. Navy hero with a poster-framed cover, the Fleet's three terms, then the ten books as a dated campaign log on a central route line, then the games and the call to enlist. */
@font-face { font-family: "Alfa Slab One"; font-weight: 400; font-display: swap; src: url(../fonts/alfa-slab-one-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url(../fonts/barlow-condensed-latin-500-normal.woff2) format("woff2") }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format("woff2") }
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-display: swap; src: url(../fonts/crimson-pro-latin-400-normal.woff2) format("woff2") }
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-style: italic; font-display: swap; src: url(../fonts/crimson-pro-latin-400-italic.woff2) format("woff2") }
@font-face { font-family: "Crimson Pro"; font-weight: 600; font-display: swap; src: url(../fonts/crimson-pro-latin-600-normal.woff2) format("woff2") }

:root {
  /* single fixed look on purpose: north-Atlantic navy, the covers' mustard, fire orange, poster paper */
  --navy: #16202c;
  --deep: #0f1720;
  --steel: #2a3a4c;
  --mustard: #e8b23a;
  --fire: #d65f26;
  --paper: #f0e7d3;
  --ink: #1d2530;
  --mist: #9fb0c2;
  --poster: "Alfa Slab One", Rockwell, "Courier New", serif;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important } }
body { margin: 0; background: var(--navy); color: var(--paper); font: 400 20px/1.55 var(--serif); -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit }
p { margin: 0 }
h1, h2, h3 { margin: 0; font-family: var(--poster); font-weight: 400; line-height: 1; text-transform: uppercase; text-wrap: balance }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)) }
.tag { font: 700 14px/1.2 var(--cond); letter-spacing: .2em; text-transform: uppercase }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; font: 700 20px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; background: var(--mustard); color: var(--ink); border: 3px solid var(--mustard); box-shadow: 5px 5px 0 var(--fire); transition: transform .15s, box-shadow .15s }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--fire) }
.btn.line { background: transparent; color: var(--paper); border-color: var(--paper); box-shadow: none }
.btn.line:hover { box-shadow: none; transform: none; background: rgba(240,231,211,.08) }

/* top bar */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--deep) }
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--deep); border-bottom: 3px solid var(--mustard) }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 10px }
.wordmark { display: grid; text-decoration: none; line-height: 1 }
.wordmark small { font: 700 11px/1 var(--cond); letter-spacing: .3em; color: var(--mist) }
.wordmark b { font: 400 22px/1.1 var(--poster); color: var(--mustard); letter-spacing: .02em }
.bar .btn { min-height: 40px; font-size: 16px; padding: 0 16px; white-space: nowrap; box-shadow: 3px 3px 0 var(--fire) }

/* hero */
.hero { padding-block: 64px 72px; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px), var(--navy) }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center }
.hero-copy { display: grid; gap: 24px; justify-items: start; min-width: 0 }
.hero .tag { color: var(--mustard) }
.hero h1 { font-size: clamp(44px, 6.6vw, 86px); color: var(--paper) }
.hero h1 span { display: block; color: var(--mustard) }
.lede { font-size: 22px; color: #d9d2c0; max-width: 52ch }
.ctas { display: flex; flex-wrap: wrap; gap: 16px }
.note { font: 500 16px/1.4 var(--cond); letter-spacing: .06em; color: var(--mist) }
.poster { position: relative; justify-self: center; width: min(360px, 100%); padding: 14px 14px 52px; background: var(--paper); transform: rotate(2.5deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8) }
.poster img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover }
.poster figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; font: 700 15px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-align: center }
.poster::before { content: ""; position: absolute; top: -14px; left: 50%; width: 120px; height: 30px; transform: translateX(-50%) rotate(-3deg); background: rgba(232,178,58,.85) }

/* terms */
.terms { background: var(--mustard); color: var(--ink) }
.terms .wrap { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch }
.terms .lead { display: grid; align-content: center; padding: 26px 28px 26px 0; font: 700 15px/1.25 var(--cond); letter-spacing: .2em; text-transform: uppercase; max-width: 200px }
.term { padding: 26px 24px; border-left: 3px solid var(--ink); display: grid; gap: 4px }
.term b { font: 400 34px/1 var(--poster); text-transform: uppercase }
.term span { font: 500 17px/1.35 var(--cond); letter-spacing: .03em }

/* campaign log */
.log { padding-block: 80px 90px; background: var(--paper); color: var(--ink) }
.log-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: 56px }
.log-head .tag { color: var(--fire) }
.log-head h2 { font-size: clamp(38px, 5vw, 60px) }
.log-head p { font-size: 21px; color: #3a4350 }
.ops { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 54px }
.ops::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(to bottom, var(--ink) 0 14px, transparent 14px 24px) }
.op { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0 28px; align-items: start }
.pin { grid-column: 2; grid-row: 1; justify-self: center; width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: var(--mustard); display: grid; place-items: center; font: 400 24px/1 var(--poster); border: 4px solid var(--paper); box-shadow: 0 0 0 3px var(--ink); position: relative; z-index: 1 }
.op-cover { grid-row: 1; display: flex; justify-content: flex-end }
.op-cover img { width: 200px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 8px 8px 0 var(--ink) }
.op-text { grid-row: 1; display: grid; gap: 10px; align-content: start; min-width: 0 }
.op:nth-child(odd) .op-cover { grid-column: 1 }
.op:nth-child(odd) .op-text { grid-column: 3 }
.op:nth-child(even) .op-cover { grid-column: 3; justify-content: flex-start }
.op:nth-child(even) .op-text { grid-column: 1; text-align: right; justify-items: end }
.op:nth-child(even) .when { justify-content: flex-end }
.op:nth-child(even) .threat { justify-self: end }
.when { display: flex; flex-wrap: wrap; gap: 6px 10px; font: 700 15px/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase }
.when .date { background: var(--ink); color: var(--mustard); padding: 4px 8px }
.when .place { color: #4b5562; padding: 4px 0 }
.op h3 { font-size: clamp(28px, 3.2vw, 38px) }
.hook { font: 600 22px/1.3 var(--serif); font-style: italic }
.op-text p:not(.hook) { color: #3a4350; font-size: 19px; max-width: 46ch }
.threat { justify-self: start; font: 700 14px/1 var(--cond); letter-spacing: .16em; text-transform: uppercase; color: var(--fire); border: 2px solid var(--fire); padding: 6px 9px }
.log-foot { margin-top: 64px; display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: center; align-items: center; text-align: center }
.log-foot p { font: 700 16px/1.3 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #3a4350 }

/* games */
.games { padding-block: 72px; background: var(--deep); border-top: 3px solid var(--mustard) }
.games-head { display: grid; gap: 10px; margin-bottom: 28px }
.games-head .tag { color: var(--mist) }
.games-head h2 { font-size: clamp(32px, 4.2vw, 48px); color: var(--mustard) }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px }
.game { display: grid; text-decoration: none; background: var(--steel); transition: transform .15s }
.game:hover { transform: translateY(-3px) }
.game img { width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: cover }
.game div { padding: 12px 14px 16px; display: grid; gap: 4px }
.game b { font: 400 20px/1.1 var(--poster); text-transform: uppercase; color: var(--paper) }
.game span { font: 500 16px/1.35 var(--cond); color: var(--mist) }

/* enlist */
.enlist { padding-block: 84px; text-align: center; background: radial-gradient(ellipse 60% 90% at 50% 120%, rgba(214,95,38,.4), transparent 70%), var(--navy) }
.enlist .wrap { display: grid; gap: 22px; justify-items: center }
.enlist .tag { color: var(--mustard) }
.enlist h2 { font-size: clamp(42px, 6.6vw, 80px); max-width: 15ch }
.enlist p { color: #d9d2c0; max-width: 50ch }
footer { background: var(--deep) }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; font: 500 15px/1.4 var(--cond); letter-spacing: .08em; color: var(--mist) }
footer nav { display: flex; gap: 20px }
footer a { text-decoration: none }
footer a:hover { color: var(--mustard) }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) }
  .poster { width: min(300px, 80%) }
  .terms .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .terms .lead { grid-column: 1 / -1; max-width: none; padding: 20px 0 0 }
  .term:nth-child(2) { border-left: 0; padding-left: 0 }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 720px) {
  .ops::before { left: 29px }
  .op { grid-template-columns: 58px minmax(0, 1fr); gap: 14px 20px }
  .pin { grid-column: 1 !important; grid-row: 1 / span 2 }
  .op:nth-child(n) .op-cover { grid-column: 2; grid-row: 1; justify-content: flex-start }
  .op:nth-child(n) .op-text { grid-column: 2; grid-row: 2; text-align: left; justify-items: start }
  .op:nth-child(n) .when { justify-content: flex-start }
  .op:nth-child(n) .threat { justify-self: start }
  .op-cover img { width: 140px; box-shadow: 6px 6px 0 var(--ink) }
  .terms .wrap { grid-template-columns: minmax(0, 1fr) }
  .term { border-left: 0; border-top: 3px solid var(--ink); padding-left: 0 }
  .term:nth-child(2) { border-top: 3px solid var(--ink) }
  .wordmark small { display: none }
  .wordmark b { font-size: 19px }
  .bar .btn { font-size: 14px; padding: 0 12px; letter-spacing: .08em }
}
@media (max-width: 460px) {
  .game-grid { grid-template-columns: minmax(0, 1fr) }
  .hero { padding-block: 40px 52px }
}

:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
[hidden] { display: none !important }
.legal { padding-block: 56px 72px }
.legal .wrap { max-width: 780px; display: grid; gap: 16px }
.legal h1 { font-size: clamp(44px, 6vw, 68px) }
.legal h2 { font-size: 28px; margin-top: 14px; color: var(--mustard) }
.legal p { color: #d9d2c0 }
.legal strong { color: var(--bone) }
.mail { user-select: all; color: var(--mustard); font-family: var(--cond); font-size: 18px; letter-spacing: .04em }