:root {
  color-scheme: light dark;

  --canvas: #f7f5f1;
  --surface: #fbfaf7;
  --surface-raised: #ffffff;

  --text-strong: #171817;
  --text: #343634;
  --text-muted: #72756f;
  --text-faint: #9a9d96;

  --border: #deded7;
  --border-strong: #c8c9c1;

  --accent: #9f3b2e;
  --accent-hover: #7f2b21;
  --accent-subtle: #f2ddd8;

  --focus-ring: rgba(159, 59, 46, 0.34);

  --shadow-subtle: 0 1px 2px rgba(20, 21, 20, 0.06);

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --header-height: 60px;
  --content-max: 1180px;
  --reading-max: 860px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 3vw, 2.5rem);
  --text-display: clamp(2.25rem, 5vw, 4rem);
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-Thin-e91ca9bf.woff2") format("woff2");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-ThinItalic-a0fd7f93.woff2") format("woff2");
  font-style: italic;
  font-weight: 100;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-Light-62615f44.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-LightItalic-8eac7983.woff2") format("woff2");
  font-style: italic;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-Regular-17e82386.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-RegularItalic-4c84872c.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-Medium-d165c5a1.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-MediumItalic-c8deec58.woff2") format("woff2");
  font-style: italic;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-Bold-3d1bb87b.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IvyOra";
  src: url("/assets/IvyOraDisplay-BoldItalic-8c1c26ce.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #141514;
    --surface: #1a1b1a;
    --surface-raised: #20211f;

    --text-strong: #f2f1ed;
    --text: #d7d8d1;
    --text-muted: #a6a8a0;
    --text-faint: #777a73;

    --border: #30312e;
    --border-strong: #454741;

    --accent: #ef826d;
    --accent-hover: #ffab98;
    --accent-subtle: #3d2420;

    --focus-ring: rgba(239, 130, 109, 0.4);

    --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.24);
  }
}

html {
  background: var(--canvas);
  color: var(--text-strong);
  color-scheme: light dark;
  font-size: 16px;
  scroll-behavior: smooth;
}

html body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--text-strong);
  font-family: "Lora", serif;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

html body *,
html body *::before,
html body *::after {
  box-sizing: border-box;
}

html body img {
  display: block;
  max-width: 100%;
}

html body a {
  color: inherit;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

html body a:hover {
  color: var(--accent);
}

html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

html body button,
html body input,
html body select,
html body textarea {
  font: inherit;
}

html body button {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  cursor: pointer;
}

html body i.uit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  line-height: 1;
}

html body .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

html body #nav,
html body #subnav {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 56px);
  box-sizing: border-box;
}

html body #nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-height);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(0.4em);
}

html body #logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  color: var(--accent);
  flex: none;
}

html body #logo .uit {
  font-size: 1.1rem;
}

html body #nav .navholder {
  min-width: 0;
}

html body #nav .links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

html body #nav .links::-webkit-scrollbar {
  display: none;
}

html body #nav .links a,
html body #nav .corner a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-family: "IvyOra", Georgia, serif;
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

html body #nav .inbox .uit {
  margin-right: 0.35rem;
  font-size: 1rem;
}

html body #nav .inbox .inbox_unread {
  margin-left: 0.35rem;
}

html body #nav .links a.corner {
  display: none;
}

html body #nav .links a.current_page,
html body #nav .links a[aria-current="page"] {
  color: var(--text-strong);
}

html body #nav .links a.current_page::after,
html body #nav .links a[aria-current="page"]::after {
  position: absolute;
  inset-inline: 0;
  bottom: -0.9rem;
  height: 1px;
  background: var(--accent);
  content: "";
}

html body #nav .corner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

html body #nav .corner a.corner {
  padding-inline: 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--accent);
  font-weight: 600;
}

html body #nav .links a.current_page,
html body #nav .links a[aria-current="page"] {
  color: var(--text-strong);
  font-weight: 600;
}

html body .page-intro h1,
html body h1,
html body .article h1,
html body .comments h2,
html body .search-results h2,
html body .empty-state h2,
html body span.link a {
  font-family: "IvyOra", Georgia, serif;
}

html body #nav .corner a.corner:hover {
  border-color: var(--border-strong);
  color: var(--accent-hover);
}

html body #subnav {
  border-bottom: 1px solid var(--border);
}

html body #inside {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-6) clamp(16px, 4vw, 56px) var(--space-8);
}

html body ol.stories.list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

html body ol.stories.list > li.story {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
}

html body .story_liner {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}

html body .voters {
  align-self: center;
  padding-top: 0;
  color: var(--text-faint);
}

html body .upvoter {
  display: inline-grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-content: center;
  gap: 0.2rem;
  min-width: 2rem;
  min-height: 44px;
  color: var(--text-faint);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
}

html body .upvoter:hover {
  color: var(--text-faint);
}

html body .upvoter::before {
  width: 0.58rem;
  height: 0.58rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateY(0.08rem) rotate(-45deg);
  opacity: 0.72;
  content: "";
}

html body .upvoter:hover::before {
  opacity: 1;
  border-top-color: var(--accent);
  border-right-color: var(--accent);
}

html body .details {
  min-width: 0;
}

html body span.link {
  display: block;
}

html body span.link a {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-strong);
  font-family: "IvyOra", Georgia, serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.34;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

html body span.link a::after {
  display: inline-block;
  width: 0.72rem;
  height: 0.72rem;
  margin-left: 0.42rem;
  background-color: currentColor;
  opacity: 0.52;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3h7v7h-2V6.41L4.7 12.7 3.3 11.3 9.59 5H6V3Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3h7v7h-2V6.41L4.7 12.7 3.3 11.3 9.59 5H6V3Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  content: "";
}

html body span.link a:hover {
  color: var(--accent);
}

html body span.link a:hover::after {
  opacity: 1;
}

html body a.description_present {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.18rem 0.42rem 0 0.08rem;
  color: var(--text-faint);
  line-height: 1;
  vertical-align: middle;
}

html body a.description_present .uit {
  font-size: 0.9rem;
}

html body a.description_present:hover {
  color: var(--accent);
}

html body form.hider,
html body form.saver {
  display: inline-flex;
  align-items: center;
}

html body form.hider .icon-button,
html body form.saver .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: var(--text-muted);
}

html body button.btn-link {
  line-height: 1;
  color: var(--text-muted);
}

html body form.hider .icon-button:hover,
html body form.saver .icon-button:hover {
  color: var(--accent);
}

html body form.hider .icon-button .uit,
html body form.saver .icon-button .uit {
  font-size: 0.92rem;
}

html body li.story.saved .saver .btn-link {
  color: var(--accent);
}

html body #hide-alert .hider .btn-link {
  color: var(--text-muted);
}

html body #hide-alert .hider .btn-link:hover {
  color: var(--accent);
}

html body .tags {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 0.35rem;
}

html body .tags .tag {
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

html body .tags .tag + .tag::before {
  margin: 0 0.55rem 0 0.35rem;
  color: var(--text-faint);
  content: "/";
}

html body a.domain {
  align-items: center;
	display: inline-flex;
  float: left;
  margin-right: 0.5rem;
	margin-top: 0.85rem;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}

html body a.domain:hover {
  color: var(--accent);
}

html body .byline {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin-top: 0.35rem;
  overflow: hidden;
  color: var(--text-faint);
  font-size: var(--text-xs);
}

html body .byline > a[tabindex="-1"][aria-hidden="true"],
html body .byline > span,
html body .byline > a[href="/~editorial"] {
  display: none;
}

html body .byline time {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  color: var(--text-faint);
}

html body .story .details a[href*="#comments"],
html body .story .details a[href*="/comments"] {
  color: var(--text-muted);
}

html body .story .details a[href*="#comments"]:hover,
html body .story .details a[href*="/comments"]:hover {
  color: var(--accent);
}

html body .story:focus-within {
  background: var(--surface);
}

html body nav.morelink {
  max-width: var(--reading-max);
  margin: var(--space-5) auto 0;
}

html body nav.morelink a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-strong);
  font-size: var(--text-sm);
  font-weight: 500;
}

html body nav.morelink a .uit {
  margin-left: 0.38rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

html body nav.morelink a:hover .uit {
  color: var(--accent);
}

html body p.hint {
  max-width: var(--reading-max);
  margin: 0 auto var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

html body p.hint a {
  color: var(--text-strong);
}

html body p.hint a:hover {
  color: var(--accent);
}

html body footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
  padding: var(--space-4) clamp(16px, 4vw, 56px) var(--space-6);
}

html body footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  max-width: var(--content-max);
  margin: 0 auto;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

html body footer nav a:hover {
  color: var(--accent);
}

html body .article,
html body .comments,
html body .search-results,
html body .empty-state,
html body .story-form {
  max-width: var(--reading-max);
  margin: 0 auto;
}

html body h1,
html body .page-intro h1,
html body .article h1,
html body .comments h2,
html body .search-results h2,
html body .empty-state h2 {
  margin: 0 0 var(--space-3);
  color: var(--text-strong);
  font-family: "IvyOra", Georgia, serif;
  font-size: var(--text-xl);
  line-height: 1.15;
}

html body .article .meta,
html body .comments .meta,
html body .search-results .meta,
html body .empty-state p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

html body .comments .comment {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
}

html body .comments .comment .byline {
  margin-top: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

html body .comments .comment .content {
  margin-top: var(--space-2);
  color: var(--text);
}

html body input[type="search"],
html body input[type="text"],
html body textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-strong);
}

html body textarea {
  min-height: 10rem;
}

html body input::placeholder,
html body textarea::placeholder {
  color: var(--text-faint);
}

html body .input,
html body .search_form,
html body .story-form {
  display: grid;
  gap: var(--space-3);
}

html body .empty-state,
html body .search-results,
html body .article,
html body .comments {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

@media (min-width: 1120px) {
  html body ol.stories.list {
    max-width: none;
  }
}

@media (max-width: 900px) {
  html body #nav {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  html body #subnav {
    padding-inline: clamp(16px, 4vw, 56px);
  }

  html body #nav .corner {
    display: none;
  }

  html body .story_liner {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  html body .discussion-link {
    grid-column: 2;
    justify-self: start;
    margin-top: var(--space-2);
  }

  html body span.link a {
    font-size: 1rem;
  }

	html body a.domain {
  	display: block;
  	margin-top: 0rem;
	}
}

@media (max-width: 640px) {
  html body #inside {
    padding-inline: 16px;
  }

  html body #nav,
  html body #subnav {
    padding-inline: 16px;
  }

  html body ol.stories.list {
    max-width: 100%;
  }

  html body .story_liner {
    gap: var(--space-2);
  }

  html body .byline time {
    min-height: 0;
  }

  html body .tags .tag {
    letter-spacing: 0.06em;
  }

  html body nav.morelink,
  html body p.hint {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}