:root {
  color-scheme: light dark;
  --paper: light-dark(#f7f5ec, #181719);
  --surface: light-dark(#e9eadf, #302a2a);
  --ink: light-dark(#24372c, #f4ebdd);
  --muted: light-dark(#5f6c60, #b7aba0);
  --copper: light-dark(#476d4f, #dfac81);
  --line: light-dark(#cfd3c4, #433c3b);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
.coffee-home ::selection { background: var(--copper); color: var(--paper); }
.wrap { width: min(1120px, 89%); margin-inline: auto; }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; border-bottom: 1px solid var(--line); }
.theme-picker { display: flex; align-items: center; padding: 2px; border: 1px solid var(--line); border-radius: 24px; }
.theme-picker label { position: relative; display: grid; place-items: center; width: 34px; height: 32px; color: var(--muted); border-radius: 20px; cursor: pointer; }
.theme-picker svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-picker label:has(:checked) { background: var(--surface); color: var(--ink); }
.theme-picker label:has(:focus-visible) { outline: 2px solid var(--copper); outline-offset: 2px; }
.coffee-home .wordmark-domain { color: var(--muted); }

.introduction { display: grid; grid-template-columns: 41% 59%; align-items: center; }
.intro-copy { padding: 26px 0 20px; }
.intro-copy h1 { margin: 0 0 20px; font: 900 clamp(38px, 4.8vw, 68px)/1.2 var(--display); letter-spacing: -.025em; }
.intro-copy h1 span { color: var(--copper); }
.portrait-link, .contact a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--muted); text-underline-offset: 5px; text-decoration: underline; }
.portrait-link:hover, .contact a:hover { color: var(--copper); }
.portrait-link svg { width: 18px; height: 18px; }
.keyboard-cat {
  display: block;
  justify-self: center;
  width: min(87%, 552px);
  height: auto;
  margin-block: clamp(40px, 5.3vw, 76px);
}

.products { padding: 32px 0 54px; border-top: 1px solid var(--line); }
.products h2 { margin: 0 0 18px; font: 800 clamp(24px, 2.4vw, 31px)/1.4 var(--display); letter-spacing: -.025em; }
.app-list { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 96px); }
.app-link { display: flex; gap: 17px; align-items: center; min-width: 0; padding: 16px 0; border-bottom: 1px solid var(--line); }
.app-link img { border-radius: 12px; width: 52px; height: 52px; }
.app-link h3 { margin: 0; font: 700 21px/1.4 var(--display); }
.app-link small { padding-left: 3px; font: 500 13px/1 var(--mono); color: var(--muted); }
.app-link p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.out-arrow { margin-left: auto; color: var(--copper); font-size: 23px; }
.app-link:hover { border-bottom-color: var(--copper); }
.app-link:hover h3 { color: var(--copper); }
.contact { padding: 24px 0 30px; border-top: 1px solid var(--line); }
.contact h2 { margin: 0; font: 800 21px/1.4 var(--display); }
.coffee-home dialog { background: var(--paper); color: var(--ink); border-color: var(--line); }
.coffee-home #photo-caption { color: var(--ink); }
.coffee-home .close-dialog { background: var(--surface); border-color: var(--line); }
.coffee-home .photo-navigation button { border-radius: 5px; border-color: var(--line); }

@media (max-width: 700px) {
  .wrap { width: calc(100% - 40px); }
  .masthead { min-height: 62px; }
  .introduction { grid-template-columns: 1fr; }
  .intro-copy { padding: 36px 0 0; }
  .intro-copy h1 { margin-bottom: 8px; font-size: clamp(39px, 10vw, 52px); }
  .keyboard-cat { width: min(92%, 405px); margin: 10px 0 25px; }
  .products { padding: 24px 0 32px; }
  .products h2 { margin-bottom: 4px; }
  .app-list { grid-template-columns: 1fr; gap: 0; }
  .app-link { gap: 14px; padding: 13px 0; }
  .app-link img { width: 44px; height: 44px; border-radius: 11px; }
  .app-link h3 { font-size: 19px; }
}