/* Site C reads. A serif carries the summaries, which are the substance of
   a feed, and a system sans carries the interface around them — the two
   registers are the point, not decoration.

   Its own copy of the face rather than a link into site A's folder: the
   spec keeps every site ready to move to its own subdomain, where a path
   into another one would 404.

   SIL Open Font License 1.1 — see sites/c/noto-serif-thai-OFL.txt. */
@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/sites/c/noto-serif-thai-400-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/sites/c/noto-serif-thai-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/sites/c/noto-serif-thai-700-thai.woff2") format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Noto Serif Thai";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/sites/c/noto-serif-thai-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Site C — ชอบวายเลยมาแปล.

   Site A is warm paper and a serif; site B is dark, dense and crimson. This
   one is a feed: cool, light-first, wide-spaced rows you read top to bottom
   rather than a grid you scan. Nine works make a page, not a wall.

   The blue accent comes from the sheet. Fonts are a system stack, named
   honestly — nothing is self-hosted here, so nothing is asked for that the
   device does not already have. */

:root {
  --ink: #14171c;
  --muted: #5f6773;
  --line: #dde2ea;
  --line-strong: #8d95a2;
  --paper: #f7f9fc;
  --card: #ffffff;
  --sunk: #eaeef5;
  --shadow: 0 1px 2px rgba(20, 23, 28, 0.06);
  --shadow-lift: 0 10px 26px rgba(20, 23, 28, 0.12);
  --accent-text: color-mix(in srgb, var(--accent, #2165d6) 86%, #000000);
  --accent-strong: color-mix(in srgb, var(--accent, #2165d6) 86%, #000000);
  --on-accent: #ffffff;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e7ecf3;
    --muted: #97a1b0;
    --line: #262c36;
    --line-strong: #6d7683;
    --paper: #0e1116;
    --card: #171b22;
    --sunk: #0a0d11;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.6);
    --accent-text: color-mix(in srgb, var(--accent, #2165d6) 52%, #ffffff);
    --accent-strong: color-mix(in srgb, var(--accent, #2165d6) 72%, #ffffff);
    --on-accent: #0e1116;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #e7ecf3;
  --muted: #97a1b0;
  --line: #262c36;
  --line-strong: #6d7683;
  --paper: #0e1116;
  --card: #171b22;
  --sunk: #0a0d11;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 12px 30px rgba(0, 0, 0, 0.6);
  --accent-text: color-mix(in srgb, var(--accent, #2165d6) 52%, #ffffff);
  --accent-strong: color-mix(in srgb, var(--accent, #2165d6) 72%, #ffffff);
  --on-accent: #0e1116;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Two registers: --read for what the visitor reads, --ui for what they
   operate. Naming them keeps the distinction from eroding one rule at a
   time. */
:root {
  --read: "Noto Serif Thai", Georgia, serif;
  --ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--read);
  font-size: 16px;
  line-height: 1.8;
}

/* Everything that is a control rather than a sentence. */
.site-nav, .dock, .theme-toggle, .tools-count, .entry-meta, .feed-note,
.facts dt, .site-foot, .age-note {
  font-family: var(--ui);
}

a { color: inherit; }

.page { max-width: 780px; margin: 0 auto; padding: 24px 20px 64px; }

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

/* --- masthead ----------------------------------------------------------- */

/* The masthead was a name floating on an empty band. A hairline of the
   brand's own colour under it gives the page a top edge, and the accent
   finally appears somewhere other than a single button. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: inset 0 -3px 0 -2px var(--accent-strong, var(--accent, #2165d6));
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto;
  padding: 14px 20px 12px;
}

.site-name { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.site-name__text { display: grid; }
.site-name strong {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.site-name__text span { font-size: 12.5px; color: var(--muted); }

.masthead-aside { display: flex; align-items: center; gap: 12px; }

.site-social { display: flex; gap: 8px; }
.site-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line-strong, var(--line));
  color: var(--muted);
  text-decoration: none;
}
.site-social a:hover { color: var(--ink); border-color: var(--ink); }
.site-social svg { display: block; }

.theme-toggle {
  border: 1px solid var(--line-strong, var(--line));
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  padding: 0 14px;
  min-height: 40px;
  border-radius: 10px;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle__light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__dark { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__light { display: inline; }
}
:root[data-theme="dark"] .theme-toggle__dark { display: none; }
:root[data-theme="dark"] .theme-toggle__light { display: inline; }
:root[data-theme="light"] .theme-toggle__dark { display: inline; }
:root[data-theme="light"] .theme-toggle__light { display: none; }

/* --- navigation --------------------------------------------------------- */

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.site-nav > a,
.nav-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.site-nav > a:hover,
.nav-menu > summary:hover { color: var(--ink); }
.site-nav > a[aria-current="page"],
.nav-menu[data-active="true"] > summary {
  color: var(--ink);
  border-bottom-color: var(--accent-text);
}

.nav-menu { position: relative; }
.nav-menu > summary { list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  margin-left: 7px;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.nav-menu[open] > summary::after { transform: translateY(-2px) rotate(180deg); }

.nav-menu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: grid;
  min-width: 190px;
  max-width: min(320px, calc(100vw - 32px));
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.nav-menu__panel a {
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
}
.nav-menu__panel a:hover { background: var(--sunk); }

/* --- age gate ----------------------------------------------------------- */

.age-banner {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-strong, var(--accent, #2165d6));
  border-radius: 10px;
  margin: 0 0 24px;
  font-size: 14px;
}
.age-banner p { margin: 0; }
.age-form { margin: 0; }
.age-banner button,
.age-gate button {
  display: block;
  margin-top: 12px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: var(--accent-strong, var(--accent, #2165d6));
  color: var(--on-accent, #fff);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.age-error { margin: 10px 0 0; font-size: 13px; color: var(--accent-text); }
.age-note { color: var(--muted); font-size: 13px; margin-top: 16px; }

/* --- the feed ----------------------------------------------------------- */

h1 { font-size: 25px; line-height: 1.35; margin: 0 0 18px; }
h2 { font-size: 17px; margin: 0; }

.feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
}
.feed-head h2 { font-size: 15px; letter-spacing: 0.16em; text-transform: uppercase; }
.feed-note { margin: 0; font-size: 12.5px; color: var(--muted); }

.feed { display: grid; gap: 0; }

.entry { border-bottom: 1px solid var(--line); }

/* The cover was 84px on a page whose whole subject is artwork. At 132 it is
   the first thing the eye lands on, which is what a feed of comics wants. */
.entry-link {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  padding: 24px 0 24px 16px;
  text-decoration: none;
  /* The rule slides in from the gutter on hover rather than the whole row
     changing colour — quieter, and it points at what is being pointed at. */
  border-left: 3px solid transparent;
  margin-left: -19px;
  transition:
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.entry-link:hover {
  border-left-color: var(--accent-strong, var(--accent, #2165d6));
  background: color-mix(in srgb, var(--sunk) 60%, transparent);
}

.entry-cover {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  overflow: hidden;
  background: var(--sunk);
  box-shadow: var(--shadow-lift);
}
.entry-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.entry-link:hover .entry-cover:not(.cover--blurred) img { transform: scale(1.04); }

.entry-body { display: grid; gap: 9px; align-content: start; min-width: 0; }
.entry-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}
/* Clamped in CSS, never sliced in JavaScript: Thai vowels and tone marks are
   separate code units, so cutting at an arbitrary index strands a mark on a
   dotted circle. The browser breaks at its own opportunities instead. */
.entry-summary {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/* Small, spaced and in the interface face: a caption under a paragraph, not
   another sentence competing with it. */
.entry-meta {
  margin: 2px 0 0;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Every cover here is adult, so blurring is the default rather than an
   exception, and the scale keeps the blur's own fade outside the frame. */
.cover--blurred img { filter: blur(20px); transform: scale(1.45); }
.entry-cover.cover--blurred::after,
.detail-cover.cover--blurred::after {
  content: "18+";
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong, var(--line));
}

/* --- work page ---------------------------------------------------------- */

.detail {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 26px;
  align-items: start;
  margin-bottom: 32px;
}
.detail-cover {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sunk);
}
.detail-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail-title { margin-bottom: 12px; }
.summary { margin: 0 0 20px; font-size: 16px; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin: 0 0 22px;
}
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-size: 15px; }

.reader-row { display: flex; flex-wrap: wrap; gap: 10px; }
.reader-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--accent-strong, var(--accent, #2165d6));
  color: var(--on-accent, #fff);
  text-decoration: none;
  font-size: 15px;
  transition: filter var(--dur-fast) var(--ease);
}
.reader-link:hover { filter: brightness(1.08); }
.reader-empty { color: var(--muted); }

.more { margin-top: 36px; }
.more h2 { margin-bottom: 8px; }
.empty { color: var(--muted); }
.not-found .back-home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  text-decoration: none;
}

.site-foot {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--muted);
}

/* --- narrow ------------------------------------------------------------- */

@media (max-width: 700px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .detail-cover { width: 46%; max-width: 190px; }
}

@media (max-width: 640px) {
  .site-head { position: static; }
  .masthead { padding: 12px 16px 10px; }
  .site-nav { padding: 0 8px; font-size: 13px; }
  .site-nav > a, .nav-menu > summary { padding: 0 8px; }
  .entry-link {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0 18px 12px;
    margin-left: -15px;
  }
  .entry-title { font-size: 17px; }
  .entry-summary { -webkit-line-clamp: 2; font-size: 14px; }
}

/* --- the docked toolbar -------------------------------------------------- */

/* Site A pins its controls under the masthead; site B stands them down a rail.
   A feed is read downward, so here they ride the bottom of the window, where
   the reading hand already is and where they leave the top of the page to the
   feed itself. */
.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.dock-inner {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  max-width: 780px;
  margin: 0 auto;
  padding: 10px 20px;
}

/* The dock covers the end of the feed, so the page reserves its height. */
body { padding-bottom: 84px; }

.tools-search { flex: 1 1 200px; display: flex; }
.tools-search input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  padding: 0 14px;
  min-height: 44px;
}
.tools-search input::placeholder { color: var(--muted); }

.tools-group { display: flex; gap: 6px; }
.tools-group button {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  padding: 0 13px;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}
.tools-group button:hover { color: var(--ink); border-color: var(--ink); }
.tools-group button[aria-checked="true"] {
  color: var(--on-accent, #fff);
  background: var(--accent-strong, var(--accent, #2165d6));
  border-color: var(--accent-strong, var(--accent, #2165d6));
}
/* Choosing the catch-all is the absence of a choice, not a selection. */
.tools-group button[aria-checked="true"][data-value=""] {
  color: var(--ink);
  background: var(--sunk);
  border-color: var(--line-strong, var(--line));
}

.tools-sort select {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 10px;
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
}

.tools-count { margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; }

.feed-empty { color: var(--muted); padding: 24px 0; }
.feed-empty span { color: var(--ink); }

@media (max-width: 640px) {
  .dock-inner { padding: 8px 16px; gap: 8px; }
  .tools-search { flex-basis: 100%; }
  .tools-count { flex-basis: 100%; }
  body { padding-bottom: 132px; }
}

/* --- motion ------------------------------------------------------------- */

.site-nav > a,
.nav-menu > summary,
.nav-menu__panel a,
.tools-group button,
.tools-search input,
.tools-sort select,
.theme-toggle,
.site-social a {
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.nav-menu[open] > .nav-menu__panel { animation: menu-in var(--dur) var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.entry:nth-child(-n + 6) { animation: rise var(--dur-slow) var(--ease) both; }
.entry:nth-child(2) { animation-delay: 40ms; }
.entry:nth-child(3) { animation-delay: 80ms; }
.entry:nth-child(4) { animation-delay: 120ms; }
.entry:nth-child(n + 5) { animation-delay: 160ms; }

.entry-cover img,
.detail-cover img { transition: opacity var(--dur-slow) var(--ease); }
.entry-cover img.is-loading,
.detail-cover img.is-loading { opacity: 0; }

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