/* Site B — ชอบฉากเยะเลยมาแปล.

   Site A is warm paper and a serif: a magazine you browse. This one is an
   adult catalogue of six works, so it is dark first, sans, and dense — a
   listing you read rather than a shelf you wander. The crimson accent comes
   from the sheet; everything else here is chosen to sit under it quietly.

   The palette is defined light-first so the token pattern matches the other
   sites, but the design is built for the dark reading and the light one is
   kept deliberately low-contrast-free rather than bright. */

:root {
  --ink: #1a1618;
  --muted: #6c6167;
  --line: #e0d8da;
  --line-strong: #948a8e;
  --paper: #faf7f8;
  --card: #ffffff;
  --sunk: #f1ebed;
  --shadow: 0 1px 2px rgba(26, 22, 24, 0.06);
  --shadow-lift: 0 10px 26px rgba(26, 22, 24, 0.14);
  --accent-text: color-mix(in srgb, var(--accent, #9f294f) 84%, #000000);
  --accent-strong: color-mix(in srgb, var(--accent, #9f294f) 84%, #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: #efe7ea;
    --muted: #a2949a;
    --line: #2e262a;
    --line-strong: #74696e;
    --paper: #100d0f;
    --card: #1a1518;
    --sunk: #0b090a;
    --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, #9f294f) 62%, #ffffff);
    --accent-strong: color-mix(in srgb, var(--accent, #9f294f) 78%, #ffffff);
    --on-accent: #100d0f;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #efe7ea;
  --muted: #a2949a;
  --line: #2e262a;
  --line-strong: #74696e;
  --paper: #100d0f;
  --card: #1a1518;
  --sunk: #0b090a;
  --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, #9f294f) 62%, #ffffff);
  --accent-strong: color-mix(in srgb, var(--accent, #9f294f) 78%, #ffffff);
  --on-accent: #100d0f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  /* A system stack, named honestly: nothing here is self-hosted, so this
     asks only for faces the device already has. Declaring a webfont that
     is never served is the bug site A shipped for weeks. */
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}

/* A flat ground made the whole site read as an unstyled panel. Two very wide,
   very faint washes of the brand colour give the page a light source without
   becoming a gradient anyone would notice, and a grain layer keeps the dark
   from banding on cheap panels. Both are drawn, not fetched: the noise is an
   inline SVG, so the atmosphere costs no request and cannot fail to arrive. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%,
      color-mix(in srgb, var(--accent, #9f294f) 11%, transparent), transparent 72%),
    radial-gradient(50rem 36rem at 92% 4%,
      color-mix(in srgb, var(--accent, #9f294f) 7%, transparent), transparent 72%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; }

.page { min-width: 0; padding: 24px 0 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 on an empty band. It now sits on its own darker
   surface with the brand colour drawn across the bottom edge, so the page has
   a top rather than beginning in the middle of nothing. */
.site-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--sunk) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head::after {
  content: "";
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--accent-strong, var(--accent, #9f294f)),
    color-mix(in srgb, var(--accent, #9f294f) 20%, transparent) 62%,
    transparent
  );
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 960px;
  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: 19px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.site-name span span, .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: 999px;
  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: 999px;
  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; }

/* --- the rail ----------------------------------------------------------- */

/* Site A lays its navigation and its toolbar across the top of the page. Here
   both run down the left. Six works never need the full width, and the shape
   is what stops this site reading as site A in another colour. */
.layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 32px;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  align-items: start;
}

/* The controls used to float in an empty column with nothing holding them.
   Giving the rail its own surface makes it a panel the listing sits beside,
   which is the whole reason this site is two columns. */
.rail {
  position: sticky;
  /* Clears the masthead, which is sticky above it. */
  top: 92px;
  display: grid;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 14px;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.rail-nav { display: grid; gap: 6px; }
.rail-links { display: grid; gap: 2px; }
.rail-links a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  border-left: 2px solid transparent;
}
.rail-links a:hover { color: var(--ink); background: var(--sunk); }
.rail-links a[aria-current="page"] {
  color: var(--ink);
  border-left-color: var(--accent-text);
  background: var(--sunk);
}

.nav-menu { position: relative; }
.nav-menu > summary {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: "";
  margin-left: auto;
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.nav-menu[open] > summary::after { transform: translateY(-2px) rotate(180deg); }
.nav-menu > summary:hover { color: var(--ink); background: var(--sunk); }

/* In a vertical rail the panel belongs under its summary, not floating beside
   it — there is nothing to the right of the rail but the listing. */
.nav-menu__panel {
  display: grid;
  gap: 2px;
  padding: 4px 0 4px 12px;
  max-height: min(40vh, 320px);
  overflow-y: auto;
}
.nav-menu__panel a {
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
}
.nav-menu__panel a:hover { color: var(--ink); background: var(--sunk); }

/* --- the toolbar, stacked ------------------------------------------------ */

.rail-tools {
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.tools-search { display: block; }
.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: 8px;
  padding: 10px 12px;
  min-height: 44px;
}
.tools-search input::placeholder { color: var(--muted); }

.tools-group { display: grid; gap: 4px; }
.tools-group button {
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 12px;
  min-height: 40px;
  cursor: pointer;
}
.tools-group button:hover { color: var(--ink); background: var(--sunk); }
.tools-group button[aria-checked="true"] {
  color: var(--on-accent, #fff);
  background: var(--accent-strong, var(--accent, #9f294f));
  border-color: var(--accent-strong, var(--accent, #9f294f));
}
/* 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 {
  width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 8px;
  padding: 0 12px;
  min-height: 44px;
  cursor: pointer;
}

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

.rail-random {
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 8px;
  min-height: 44px;
  padding: 0 14px;
  cursor: pointer;
}
.rail-random:hover { border-color: var(--ink); }

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

.age-banner {
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-strong, var(--accent, #9f294f));
  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: 999px;
  background: var(--accent-strong, var(--accent, #9f294f));
  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; }

/* --- listing ------------------------------------------------------------ */

h1 { font-size: 26px; line-height: 1.35; margin: 0 0 16px; }

/* A section heading with a rule running off to the right: it says where a
   band of the catalogue starts without needing a box around it. */
h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 34px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
h2::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
h2 .count {
  order: -1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--on-accent, #fff);
  background: var(--accent-strong, var(--accent, #9f294f));
  border-radius: 999px;
  padding: 2px 9px;
}

.shelf { margin-bottom: 8px; scroll-margin-top: 140px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
/* A poster wall: the lift is larger than site A's and the shadow takes the
   brand colour, so a hovered cover reads as lit rather than merely raised. */
.card:hover,
.card:focus-within {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent, #9f294f) 55%, var(--line));
  box-shadow:
    var(--shadow-lift),
    0 0 0 1px color-mix(in srgb, var(--accent, #9f294f) 28%, transparent);
}
.card-cover img { transition: transform var(--dur-slow) var(--ease); }
.card:hover .card-cover:not(.cover--blurred) img { transform: scale(1.06); }

/* The cover's own foot darkened, so a title never sits against bright art. */
.card-cover::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(transparent, color-mix(in srgb, var(--card) 92%, transparent));
  pointer-events: none;
  z-index: 1;
}
.card a { text-decoration: none; display: block; }
.card-cover {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  background: var(--sunk);
  overflow: hidden;
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { display: grid; gap: 5px; padding: 10px 12px 14px; }
.card-body strong {
  font-size: 15px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  min-height: calc(2 * 1.45em);
}
.card-meta { font-size: 12px; color: var(--muted); }

/* Every cover on this site is adult, so the treatment is the default rather
   than an exception. The scale keeps the blur's own fade outside the frame. */
.cover--blurred img { filter: blur(24px); transform: scale(1.35); }
.card-cover.cover--blurred::after,
.detail-cover.cover--blurred::after {
  content: "18+";
  position: absolute;
  /* Above the gradient over the cover's foot, which otherwise paints on top
     of it and leaves the age mark washed out. */
  z-index: 2;
  right: 8px;
  bottom: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line-strong, var(--line));
}

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

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 62ch);
  justify-content: start;
  gap: 28px;
  align-items: start;
}
.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(130px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.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: 999px;
  background: var(--accent-strong, var(--accent, #9f294f));
  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); }

.similar { margin-top: 40px; }
.empty { color: var(--muted); }
.empty-state { padding: 28px 0; color: var(--muted); }
.empty-state span { color: var(--ink); }
.empty-state button {
  margin-top: 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-strong, var(--line));
  border-radius: 8px;
  min-height: 44px;
  padding: 0 18px;
  cursor: pointer;
}
.empty-state button:hover { border-color: var(--ink); }
.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: 999px;
  text-decoration: none;
}

.site-foot {
  max-width: 960px;
  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 { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .detail-cover { width: 46%; max-width: 200px; }
}

/* A rail has nowhere to stand on a narrow screen, so it falls in above the
   listing. Panel chrome comes off with it: stacked, the border and padding
   turned a column of controls into a 344px block that pushed the first card
   to 749px on an 812px screen — the controls have to introduce the catalogue,
   not replace the first view of it. */
@media (max-width: 860px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rail {
    position: static;
    margin-top: 14px;
    padding: 0 0 14px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    gap: 10px;
  }
  .rail-links { grid-auto-flow: column; justify-content: start; gap: 4px; }
  .rail-links a { border-left: 0; border-bottom: 2px solid transparent; }
  .rail-links a[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--accent-text);
  }

  /* Search and sort share the first row; the chips take the width below them,
     and the count sits beside the one button worth keeping at this size. */
  .rail-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
  }
  .rail-tools > .tools-search { grid-column: 1; grid-row: 1; }
  .rail-tools > .tools-sort { grid-column: 2; grid-row: 1; }
  .rail-tools > .tools-group { grid-column: 1 / -1; }
  .rail-tools > .tools-count { grid-column: 1; }
  .rail-tools > .rail-random { grid-column: 2; }

  .tools-group { grid-auto-flow: column; justify-content: start; overflow-x: auto; }
  .tools-group button { white-space: nowrap; }
}

@media (max-width: 640px) {
  .site-head { position: static; }
  .masthead { padding: 12px 16px 10px; }
  .layout { padding: 0 16px; }
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr));
    gap: 12px;
  }
}

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

.rail-links a,
.nav-menu > summary,
.nav-menu__panel a,
.tools-group button,
.theme-toggle,
.rail-random,
.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(-4px); } }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.shelf { animation: rise var(--dur-slow) var(--ease) both; }
.shelf:nth-of-type(2) { animation-delay: 70ms; }

.card-cover img,
.detail-cover img { transition: opacity var(--dur-slow) var(--ease); }
.card-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;
  }
  .card:hover, .card:focus-within { transform: none; }
}