/* denelsonwebsites.com
   Display: Xanh Mono (a monospaced serif) for domains, headline and year marks.
   Text:    Instrument Sans.
   One accent, a pool teal, used for the TLD of every domain and for links. */

@font-face { font-family: "Xanh Mono"; src: url("fonts/XanhMono-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Xanh Mono"; src: url("fonts/XanhMono-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f2f3ef;
  --paper-2: #e9ebe5;
  --ink: #15181b;
  --ink-2: #4b5158;
  --ink-3: #7c838a;
  --rule: #d5d8d1;
  --accent: #0b6b71;
  --accent-ink: #085257;
  --accent-tint: #dbe9e8;
  --tile: #1c2124;
  --tile-text: #e7e9e4;
  --display: "Xanh Mono", "Courier New", "Nimbus Mono PS", monospace;
  --text: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131618;
    --paper-2: #1b1f22;
    --ink: #e9ebe6;
    --ink-2: #b1b7bb;
    --ink-3: #7f878d;
    --rule: #2a2f33;
    --accent: #5cc3c7;
    --accent-ink: #8fdadd;
    --accent-tint: #173538;
    --tile: #0c0e10;
    --tile-text: #d6d9d3;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
img { display: block; max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; }
.skip:focus { left: 8px; z-index: 10; }

/* ------------------------------------------------------------ header */
.top {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.wordmark { font-family: var(--display); font-size: 18px; letter-spacing: 0.01em; }
.tld { color: var(--accent); }
.people { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); }
.people a { border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.people a:hover { color: var(--accent-ink); border-color: var(--accent); }

/* ------------------------------------------------------------ hero */
main { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.hero { padding: 88px 0 40px; border-bottom: 1px solid var(--rule); }
h1 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(38px, 6.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 16ch;
  text-wrap: balance;
}
.lede { font-size: 18px; color: var(--ink-2); max-width: var(--measure); margin: 0 0 22px; text-wrap: pretty; }
.count { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font-family: var(--display); font-size: 15px; color: var(--ink-3); }
.count span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 9px; vertical-align: 1px; }

/* ------------------------------------------------------------ filters */
.filters {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 14px 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.chip {
  font: 500 13px/1 var(--text);
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 8px 13px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter-note { margin-left: auto; font-family: var(--display); font-size: 14px; color: var(--ink-3); }

/* ------------------------------------------------------------ years */
.year {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0 32px;
  padding: 36px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.year:last-child { border-bottom: 0; }
.year-mark {
  margin: 0;
  font-weight: 400;
  align-self: start;
  position: sticky; top: 72px;
  display: flex; flex-direction: column; gap: 4px;
}
.year-mark .y { font-family: var(--display); font-size: 30px; line-height: 1; letter-spacing: -0.02em; }
.year-mark .n { font-family: var(--display); font-size: 13px; color: var(--ink-3); }

/* ------------------------------------------------------------ entries */
.entries { display: flex; flex-direction: column; }
.entry {
  display: grid;
  grid-template-columns: 236px 1fr;
  gap: 0 28px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--rule);
}
.entries .entry:first-child { border-top: 0; padding-top: 6px; }
.entry[hidden] { display: none; }

.thumb {
  display: block;
  aspect-ratio: 800 / 420;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  transition: border-color .15s, transform .15s;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.tile { background: var(--paper-2); display: grid; place-items: center; }
.thumb.tile img { width: 44%; height: auto; border-radius: 18%; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.thumb.blank {
  background: var(--tile); color: var(--tile-text);
  display: grid; place-items: center; text-align: center;
  font-family: var(--display); font-size: 15px; padding: 12px;
  overflow-wrap: anywhere;
}
.thumb.blank span { border-top: 1px solid var(--accent); padding-top: 10px; }

.body { min-width: 0; max-width: var(--measure); }
.domain {
  margin: 2px 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.domain a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .2s; }
.entry:hover .domain a, .domain a:hover { background-size: 100% 1px; }
.entry:hover .thumb { border-color: var(--accent); }
.domain .noun { color: var(--ink); }
.blurb { margin: 0 0 12px; color: var(--ink-2); text-wrap: pretty; }
.blurb strong { color: var(--ink); font-weight: 600; }

.meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 0;
  font-size: 13px; color: var(--ink-3);
}
.meta li { display: inline; }
.meta li + li::before { content: "\00b7"; margin: 0 8px; color: var(--rule); }
.meta .kind { color: var(--ink-2); font-weight: 500; }
.meta .private { color: var(--accent-ink); font-weight: 500; }
.meta a { color: var(--accent-ink); border-bottom: 1px solid var(--accent-tint); }
.meta a:hover { border-color: var(--accent); }

/* ------------------------------------------------------------ footer */
.foot {
  max-width: 1120px; margin: 0 auto; padding: 56px 24px 72px;
  border-top: 1px solid var(--rule);
  color: var(--ink-2); font-size: 15px;
}
.foot p { margin: 0 0 8px; max-width: var(--measure); }
.foot .fine { color: var(--ink-3); font-size: 13px; }

/* ------------------------------------------------------------ small screens */
@media (max-width: 820px) {
  .year { grid-template-columns: 1fr; gap: 14px; padding-top: 28px; }
  .year-mark { position: static; flex-direction: row; align-items: baseline; gap: 12px; }
  .year-mark .y { font-size: 26px; }
  .entry { grid-template-columns: 112px 1fr; gap: 0 16px; padding: 18px 0 20px; }
  .thumb.tile img { width: 52%; }
  .thumb.blank { font-size: 11px; padding: 6px; }
  .domain { font-size: 21px; }
  .blurb { font-size: 15px; }
  .hero { padding: 56px 0 30px; }
  .lede { font-size: 17px; }
  /* One scrolling row of chips, so the sticky bar stays one line tall. */
  .filters { top: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 12px 24px; -webkit-overflow-scrolling: touch; }
  .filters::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }
  .filter-note { flex: 0 0 auto; margin-left: 4px; }
}
@media (max-width: 480px) {
  .top { padding: 18px 18px 0; flex-wrap: wrap; gap: 6px 16px; }
  .top .wordmark { flex: 1 0 100%; }
  .people { gap: 14px; font-size: 13px; white-space: nowrap; }
  main, .foot { padding-left: 18px; padding-right: 18px; }
  .hero { padding-top: 40px; }
  .filters { margin: 0 -18px; padding: 12px 18px; }
  /* Domain on its own line, then the picture beside the words. */
  .entry { grid-template-columns: 128px 1fr; grid-template-rows: auto auto auto; gap: 8px 14px; padding: 16px 0 18px; }
  .body { display: contents; }
  .domain { grid-column: 1 / -1; grid-row: 1; margin: 0; font-size: 20px; }
  .thumb { grid-column: 1; grid-row: 2 / span 2; align-self: start; }
  .blurb { grid-column: 2; grid-row: 2; margin: 0; font-size: 14px; line-height: 1.45; }
  .meta { grid-column: 2; grid-row: 3; font-size: 12px; }
  .meta li + li::before { margin: 0 6px; }
  .thumb.tile img { width: 50%; }
  .thumb.blank { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .chip, .thumb, .domain a { transition: none; }
}