@font-face {
  font-family: "Barlow Condensed";
  src: url("./assets/barlow-condensed-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("./assets/dm-sans.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --forest: #102f28;
  --deep: #0b241e;
  --moss: #214c3e;
  --gold: #ebcc81;
  --paper: #f3f1e2;
  --white: #fff8e6;
  --ink: #173c30;
  --muted: #496256;
  --body: "DM Sans", system-ui, sans-serif;
  --display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.6 var(--body); }
img { display: block; max-width: 100%; }
figure, h1, h2, h3, p { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #bc792a; outline-offset: 5px; }
em { font-style: normal; }

.site-shell { width: min(100% - 2 * clamp(20px, 5vw, 74px), 1320px); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; inset: .5rem auto auto .5rem; transform: translateY(-160%); padding: .75rem 1rem; color: var(--deep); background: var(--gold); }
.skip-link:focus { transform: none; }

.site-header { position: relative; z-index: 1; background: var(--deep); color: var(--white); border-bottom: 1px solid #caa96153; }
.header-inner, .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; min-height: 77px; }
.site-brand { display: inline-flex; align-items: center; gap: .68rem; font: 700 1.57rem/1 var(--display); letter-spacing: .055em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.site-brand img { object-fit: contain; }
.site-nav, .site-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem clamp(.9rem, 3.2vw, 2.75rem); }
.site-nav a, .site-footer nav a { padding-block: .5rem; color: inherit; font-size: .88rem; font-weight: 650; text-decoration: none; }
.site-nav a:hover, .site-footer nav a:hover, .site-nav [aria-current] { color: var(--gold); }

.masthead { position: relative; isolation: isolate; background: var(--forest); color: var(--white); overflow: clip; }
.masthead-image { position: absolute; z-index: -1; inset: 0 0 0 42%; overflow: hidden; }
.masthead-image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 67%; }
.masthead-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--forest), transparent 42%), linear-gradient(0deg, #102f2870, transparent 40%); }
.masthead-inner { min-height: clamp(570px, 52vw, 735px); display: grid; align-items: center; }
.masthead-copy { width: min(52%, 650px); padding-block: clamp(55px, 7vw, 100px); }
.wordmark { width: clamp(220px, 29vw, 355px); height: auto; margin-bottom: clamp(28px, 3.5vw, 49px); }
.masthead h1, .game-section h2, .gallery-section h2, .content-page h1 { font-family: var(--display); font-weight: 700; line-height: .9; letter-spacing: -.013em; }
.masthead h1 { font-size: clamp(66px, 7.35vw, 110px); }
.masthead h1 em { color: var(--gold); }
.masthead p { margin-block: 1.45rem 1.8rem; max-width: 31ch; color: #f5efd9; font-size: clamp(1rem, 1.55vw, 1.26rem); }
.site-button { display: inline-flex; align-items: center; gap: 1.2rem; min-height: 50px; padding: .6rem 1.1rem; color: var(--deep); background: var(--gold); border: 1px solid var(--gold); text-decoration: none; font-weight: 800; transition: background-color .15s, color .15s; }
.site-button:hover { color: var(--white); background: var(--moss); }
.site-button span { font-size: 1.18em; }

.game-section, .gallery-section { padding-block: clamp(63px, 8vw, 118px); }
.section-intro, .gallery-heading { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: end; gap: 1rem 3rem; margin-bottom: clamp(23px, 4vw, 49px); }
.game-section h2, .gallery-section h2 { font-size: clamp(56px, 7vw, 97px); }
.game-section h2 em { color: var(--moss); }
.section-intro p, .gallery-heading p { max-width: 40ch; color: var(--muted); font-size: clamp(1rem, 1.45vw, 1.2rem); }
.city-feature { overflow: hidden; border: 1px solid #426651; background: var(--forest); }
.city-feature img { width: 100%; height: auto; }
.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.65rem; }
.feature-list article { padding: .85rem 1.5rem .1rem; border-left: 1px solid #214c3e42; }
.feature-list article:first-child { padding-left: 0; border-left: 0; }
.feature-list h3 { font: 700 clamp(1.75rem, 2.6vw, 2.45rem)/1.06 var(--display); }
.feature-list p { max-width: 35ch; margin-top: .5rem; color: var(--muted); }

.gallery-section { color: var(--white); background: var(--forest); }
.gallery-section h2 em { color: var(--gold); }
.gallery-heading p { color: #dfdfcd; }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; }
.gallery-image { display: block; overflow: hidden; border: 1px solid #d4b57475; background: var(--deep); }
.gallery-image img { width: 100%; height: auto; transition: filter .16s; }
.gallery-image:hover img { filter: brightness(1.1); }
.gallery-grid figcaption { display: grid; gap: .22rem; margin-top: .8rem; }
.gallery-grid figcaption strong { font: 700 1.75rem/1.05 var(--display); }
.gallery-grid figcaption span { color: #dfdfcd; font-size: .95rem; }

.site-footer { border-top: 1px solid #caa96153; color: var(--white); background: var(--deep); }
.footer-inner { min-height: 104px; }
.site-footer nav a { color: #f0e7cc; }

.content-page { min-height: calc(100dvh - 182px); padding-block: clamp(56px, 8vw, 105px); }
.content-page h1 { max-width: 15ch; font-size: clamp(62px, 9vw, 116px); }
.content-page .prose { max-width: 70ch; }
.content-page h2 { margin-top: 2rem; font: 700 2rem/1.12 var(--display); }
.content-page h1 + p { margin-top: 1.3rem; font-size: 1.125rem; }
.content-page h2 + *, .content-page p + p { margin-top: .55rem; }
.content-page p, .content-page li { color: var(--muted); }
.content-page a { color: var(--forest); text-underline-offset: .18em; }
.content-page .lede { margin-top: 1.2rem; max-width: 60ch; font-size: 1.125rem; }

.deletion-page { width: min(100% - 2 * clamp(20px, 5vw, 74px), 760px); }
.deletion-page .deletion-intro { margin-bottom: clamp(24px, 4vw, 42px); }
.deletion-page h1 { max-width: none; font-size: clamp(48px, 9vw, 88px); }
.deletion-intro p { max-width: 60ch; }
.deletion-page [hidden] { display: none !important; }

.deletion-card {
  padding: clamp(16px, 4vw, 28px);
  border: 1px solid #a4b2a0;
  border-top: 3px solid var(--moss);
  border-radius: 6px;
  background: #fffbec;
  box-shadow: 0 3px 8px #173c3010;
}

.deletion-card h2, .deletion-card h3 { margin: 0; color: var(--ink); }
.deletion-card h2 { font-size: clamp(1.8rem, 4vw, 2.15rem); }
.deletion-card h3 { font: 700 1.5rem/1.15 var(--display); }
.deletion-card p { overflow-wrap: anywhere; }
.deletion-card :is(h2, h3):focus { outline: none; }
.deletion-card label { display: block; margin-bottom: 4px; font-weight: 700; }
.deletion-card :is(form, #deletion-waiting) { margin-top: 16px; }
.deletion-account-header { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px 14px; }
.deletion-providers, .deletion-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.deletion-providers:not(:empty), .deletion-buttons, .deletion-panel > button { margin-top: 12px; }
.deletion-email-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }

.deletion-email-row input {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #859b86;
  border-radius: 4px;
  color: var(--ink);
  background: #fffdf5;
  font: inherit;
}

.deletion-card .site-button, .deletion-providers > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 4px;
  font: 750 .94rem/1.2 var(--body);
  text-align: center;
  cursor: pointer;
}

.deletion-card button:disabled { opacity: .65; cursor: default; }
.deletion-card :is(button, input):focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.deletion-card .deletion-secondary { border-color: #839986; color: var(--ink); background: #edf2e8; }
.deletion-card .deletion-secondary:hover:not(:disabled) { background: #dce9dc; }
.deletion-card .deletion-outline { border-color: #aa715f; color: #803a2b; background: #fff6e9; }
.deletion-card .deletion-outline:hover:not(:disabled) { background: #f4e4d2; }
.deletion-card .deletion-danger { border-color: #873b2f; color: #fff8e5; background: #943f32; }
.deletion-card .deletion-danger:hover:not(:disabled) { background: #783126; }
.deletion-panel { margin-top: 16px; padding: 12px; border: 1px solid #c79983; border-radius: 5px; background: #faf0df; }
.deletion-panel h3 { color: #783d30; }
.deletion-panel time { color: var(--ink); font-weight: 850; }
.deletion-card .deletion-feedback:not(:empty) { margin-top: 12px; font-weight: 700; }
.deletion-card .deletion-feedback:is([data-error], [data-status='error'], [role='alert']) { color: #803a2b; }
.deletion-card #deletion-retry { margin-top: 10px; }

@media (max-width: 480px) {
  .deletion-email-row { grid-template-columns: minmax(0, 1fr); }
  .deletion-providers > button { flex: 1 1 9rem; }
}

@media (max-width: 760px) {
  .masthead-image { inset: 0 0 auto; height: clamp(340px, 100vw, 540px); }
  .masthead-image::after { background: linear-gradient(0deg, var(--forest) 0, #102f284d 45%, transparent 78%); }
  .masthead-image img { object-position: 50% 72%; }
  .masthead-inner { min-height: auto; }
  .masthead-copy { width: 100%; padding-top: clamp(228px, 67vw, 390px); padding-bottom: 54px; }
  .masthead h1 { font-size: clamp(60px, 12vw, 90px); }
  .wordmark { width: clamp(225px, 56vw, 330px); margin-bottom: 24px; }
  .section-intro, .gallery-heading { grid-template-columns: 1fr; }
  .feature-list { grid-template-columns: 1fr; margin-top: 1.15rem; }
  .feature-list article, .feature-list article:first-child { padding: .95rem 0; border: 0; border-bottom: 1px solid #214c3e42; }
  .feature-list p { max-width: 55ch; }
  .gallery-grid { gap: 1.35rem; }
}

@media (max-width: 520px) {
  .header-inner, .footer-inner { flex-wrap: wrap; gap: .2rem 1rem; padding-block: .68rem; }
  .site-brand { font-size: 1.3rem; }
  .site-brand img { width: 31px; height: 31px; }
  .site-nav { gap: .35rem .85rem; }
  .site-nav a { font-size: .78rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer-inner { align-content: center; gap: .75rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}