:root {
  --wall: #c5ced8;
  --gasket: #2a2e32;
  --sky: #a9b8c8;
  --brass: #b0893e;
  --rust: #6e3b2e;
  --aisle: #e6eaee;
  --ink: #1c232b;
  --soft: #5b6673;
  --sill: #b8c2cc;
  --plaque: #c49a4e;
  --engrave: #3a2a12;
  --card: #f0f3f6;
  --field: #f5f7f9;
  --hair: #8b97a3;
  --moss: #3e6248;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 8% -8%, #dbe3ea 0%, transparent 55%),
    radial-gradient(700px 480px at 108% 8%, #cfd8e2 0%, transparent 52%),
    var(--wall);
  line-height: 1.55;
}

a { color: var(--rust); }
a:hover { color: var(--engrave); }

.shell {
  width: min(720px, calc(100% - 32px));
  margin: 28px auto 64px;
}

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.plaque {
  min-width: 52px;
  height: 28px;
  padding: 0 10px;
  background: linear-gradient(#d4b06a, var(--plaque) 42%, #9a7438);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 #6e5320;
  color: var(--engrave);
  font-family: Menlo, ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .12em;
  display: grid;
  place-items: center;
}

.word {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 22px;
}

.word small {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soft);
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  background: var(--gasket);
  color: var(--aisle);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 12px;
}

nav a.on {
  background: var(--rust);
}

.window {
  background: var(--gasket);
  border-radius: 22px;
  padding: 16px 16px 22px;
  box-shadow: 0 18px 40px rgba(28, 35, 43, .18);
}

.glass {
  background: var(--aisle);
  border-radius: 14px;
  padding: 28px 26px 32px;
  min-height: 240px;
}

.kicker {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 8px;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 10px;
}

.lead {
  color: var(--soft);
  font-size: 16px;
  margin-bottom: 22px;
}

h2 {
  font-size: 18px;
  font-weight: 650;
  margin: 26px 0 8px;
}

p, li { font-size: 16px; }
p + p { margin-top: 10px; }
ul { padding-left: 1.15em; margin: 8px 0 0; }
li + li { margin-top: 6px; }

.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

.card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 16px;
}

.card b {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.card span {
  color: var(--soft);
  font-size: 13px;
}

.sill {
  margin-top: 14px;
  color: var(--sill);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 6px;
}

.meta {
  margin-top: 18px;
  color: var(--soft);
  font-size: 13px;
}

@media (max-width: 560px) {
  .brand { align-items: flex-start; flex-direction: column; }
  .cards { grid-template-columns: 1fr; }
  .glass { padding: 22px 18px 26px; }
  h1 { font-size: 24px; }
}