:root {
  color-scheme: light;
  --paper: #f5f2e9;
  --ink: #20251e;
  --quiet: #4e5449;
  --rule: #d1cec3;
  --accent: #526529;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 3px solid #6c42ac; outline-offset: 5px; }
.wrap { width: min(calc(100% - 64px), 1120px); margin-inline: auto; }
.skip { position: absolute; top: .8rem; left: 1rem; z-index: 1; background: white; padding: .7rem 1rem; transform: translateY(-180%); }
.skip:focus { transform: none; }
.masthead, .footer, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.masthead { padding-block: 20px; border-bottom: 1px solid var(--rule); }
.monogram { background: var(--ink); color: var(--paper); padding: 9px 10px; border-radius: 5px; font-weight: 800; letter-spacing: -.05em; text-decoration: none; }
.monogram span { color: #ddf582; }
nav { display: flex; flex-wrap: wrap; justify-content: end; gap: clamp(12px, 4vw, 28px); }
nav a, .footer a { font-size: .9rem; font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: .24em; }
nav a:hover, .footer a:hover { color: var(--accent); }
.intro { padding-block: clamp(44px, 8vw, 99px) clamp(41px, 6vw, 68px); }
.label, .cover-tag, .cover-note { font: 600 .71rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .09em; text-transform: uppercase; }
.intro .label { color: var(--accent); margin: 0 0 .8rem; }
h1, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; }
h1 { font-size: clamp(3.25rem, 11.6vw, 8.7rem); line-height: .98; margin: 0; }
h1 span { color: var(--accent); }
.lede { max-width: 37rem; color: var(--quiet); font-size: clamp(1.04rem, 2vw, 1.28rem); line-height: 1.55; margin: 1.25rem 0 0; }
#work { scroll-margin-top: 1rem; }
.section-head { border-top: 1px solid var(--rule); padding-block: 16px; }
.section-head h2 { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin: 0; }
.section-head span { color: var(--quiet); }
.projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.case { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; text-decoration: none; background: #fffdf8; }
.cover { aspect-ratio: 2 / 1; min-height: 164px; position: relative; display: grid; place-items: center; overflow: hidden; }
.cover svg { width: min(84%, 420px); max-height: 82%; transition: transform .24s ease; }
.case:hover svg { transform: scale(1.045); }
.football-cover { color: #e5eed7; background: #22382c; }
.amazon-cover { color: #38236c; background: #e6dcfa; }
.cover-tag, .cover-note { position: absolute; z-index: 1; }
.cover-tag { inset: 12px auto auto 14px; }
.cover-note { inset: auto 14px 10px auto; background: #22382c; padding: 3px 6px; }
.amazon-cover .cover-note { background: #e6dcfa; }
.case-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: clamp(18px, 3vw, 28px); }
.case-copy .label { color: var(--quiet); margin: 0; }
h3 { font-size: clamp(1.9rem, 4.1vw, 3.05rem); line-height: 1.02; margin: .43rem 0 .55rem; }
.case-copy > p:not(.label) { color: var(--quiet); line-height: 1.55; margin: 0 0 1.25rem; max-width: 38ch; }
.case-action { margin-top: auto; font-size: .91rem; font-weight: 700; text-decoration: underline; text-underline-offset: .26em; }
.case-action span { display: inline-block; margin-left: .18em; }
.case:hover .case-action { color: var(--accent); }
.footer { margin-top: clamp(30px, 6vw, 70px); border-top: 1px solid var(--rule); padding-block: 20px 28px; color: var(--quiet); font-size: .86rem; }
@media (max-width: 680px) {
  .wrap { width: calc(100% - 34px); }
  .projects { grid-template-columns: 1fr; gap: 16px; }
  .footer { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .cover svg { transition: none; }
  .case:hover svg { transform: none; }
}