:root {
  --paper: #f3efe6;
  --ink: #171512;
  --soft: #5e584e;
  --faint: #857e72;
  --rule: #cfc7b7;
  --accent: #8b2a1c;
  --sq: 11px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141311;
    --ink: #ece6d9;
    --soft: #a9a193;
    --faint: #7f786c;
    --rule: #4a453c;
    --accent: #e07a62;
  }
}

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

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--paper);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-optical-sizing: auto;
  font-size: clamp(18px, 0.6vw + 15px, 21px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--paper); }

a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(32px, 7vw, 88px) clamp(16px, 5vw, 56px) clamp(32px, 5vw, 56px);
}

/* Masthead */

.wordmark {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.75rem, 14.5vw, 10.5rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.rook {
  display: inline-block;
  height: 0.7em;
  width: auto;
  margin-right: 0.12em;
  vertical-align: baseline;
  fill: var(--accent);
}

.lede {
  margin-top: clamp(20px, 3vw, 36px);
  max-width: 27ch;
  font-size: clamp(1.4rem, 1.6vw + 0.9rem, 2rem);
  line-height: 1.28;
}

.rank {
  box-sizing: content-box;
  width: calc(var(--sq) * 8);
  height: var(--sq);
  margin-top: clamp(44px, 7vw, 88px);
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 var(--sq), transparent var(--sq) calc(var(--sq) * 2));
}

/* Parts */

.part {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 72px);
  margin-top: clamp(56px, 8vw, 104px);
}

.part h2 {
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--soft);
  padding-top: 0.9em;
}

.entries {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}

.entry h3 {
  font-family: "Gloock", Georgia, serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.entry h3 a {
  text-decoration: none;
  transition: color 0.18s ease;
}

.entry h3 a:hover { color: var(--accent); }

.entry p {
  max-width: 36em;
  margin-top: 0.65em;
}

.entry .meta {
  margin-top: 0.5em;
  font-style: italic;
  color: var(--soft);
}

.meta a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color 0.18s ease, text-decoration-color 0.18s ease;
}

.meta a:hover { color: var(--accent); text-decoration-color: var(--accent); }

.dot { margin: 0 0.3em; }

.entry--client h3 { font-size: clamp(2rem, 3.8vw, 3rem); }

/* Work together */

.ask {
  max-width: 24ch;
  font-size: clamp(1.3rem, 1vw + 0.9rem, 1.6rem);
  line-height: 1.3;
}

.mail { margin-top: -0.6em; }

.mail a {
  font-family: "Gloock", Georgia, serif;
  font-size: clamp(1.45rem, 4.2vw, 3rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 0.18s ease;
}

.mail a:hover { color: var(--accent); }

/* Footer */

.foot {
  display: grid;
  gap: 0.35em;
  max-width: 44em;
  margin-top: clamp(88px, 12vw, 160px);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--faint);
}

.foot a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.2em;
}

.foot a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .part { grid-template-columns: minmax(0, 1fr); }
  .part h2 { padding-top: 0; margin-bottom: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}