/* romchatra.com — stylesheet written for this site alone.
   Paper and pine: a light page by default, a dark one when the device asks for
   it, generous rounding, soft shadows instead of borders, and a sidebar on wide
   screens with a tab bar on phones. No framework and no utility classes: the
   names below describe parts of this site, not a grid system. */

:root {
  --paper: #f7f3ec;
  --card: #fffdf9;
  --sunk: #efe9df;
  --ink: #191c1a;
  --soft: #5d655f;
  --line: #e4ddd2;
  --pine: #0f6b5c;
  --pine-deep: #0a4f44;
  --clay: #b4442a;
  --round: 14px;
  --round-sm: 9px;
  --hold: 1120px;
  --rail: 232px;
  --shadow: 0 1px 2px rgba(25, 28, 26, .05), 0 8px 24px -12px rgba(25, 28, 26, .18);
  --shadow-lift: 0 2px 4px rgba(25, 28, 26, .07), 0 18px 36px -16px rgba(25, 28, 26, .28);
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --display: "Rom Display", Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15181c;
    --card: #1c2126;
    --sunk: #202830;
    --ink: #e8e9e6;
    --soft: #9aa49f;
    --line: #2b3238;
    --pine: #4cb8a1;
    --pine-deep: #6fd0ba;
    --clay: #e08a6b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 40px -18px rgba(0, 0, 0, .8);
  }
}

@font-face {
  font-family: "Rom Display";
  src: url("/font/display.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  padding-bottom: env(safe-area-inset-bottom);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -999px;
}
.skip:focus {
  left: 12px; top: 10px; z-index: 60;
  background: var(--card); padding: 10px 14px; border-radius: var(--round-sm);
  box-shadow: var(--shadow-lift);
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-left)) 10px max(16px, env(safe-area-inset-right));
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .topbar { background: var(--paper); }
}

.topbar__menu {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; justify-content: center; gap: 4px; padding: 0 10px;
}
.topbar__menu span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------- the lockup ----------
   A tiered parasol - what the name means - in strokes, so it carries the text
   colour and needs no box behind it. The word is set in two weights of the same
   colour family with the latin line tracked out beneath: enough shaping to read
   as a mark rather than a heading, and nothing that would stop working at 320px. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--ink);
  padding: 2px 2px 2px 0;
  border-radius: 10px;
}
.brand__mark {
  flex: none;
  color: var(--pine);
  transition: transform .2s ease;
}
.brand:hover .brand__mark { transform: translateY(-1px) rotate(-4deg); }
.brand__text { display: grid; gap: 1px; }
.brand__name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.05;
}
.brand__sub {
  font-size: 9px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--soft);
  line-height: 1;
  padding-left: 1px;
}

.hunt { display: flex; align-items: center; gap: 0; }
.hunt input {
  width: clamp(130px, 28vw, 300px);
  min-height: 42px;
  padding: 9px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: var(--round-sm) 0 0 var(--round-sm);
}
.hunt button {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--card); background: var(--pine);
  border: 1px solid var(--pine); border-radius: 0 var(--round-sm) var(--round-sm) 0;
  cursor: pointer; font: inherit;
}
.hunt--wide { margin: 0 0 22px; }

/* On a wide screen the field lives in the bar. On a phone it hides behind this
   button and opens as its own row, which gives both the logo and the field room
   to breathe. Without scripting the button is not shown and the field stays. */
.findbtn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--round-sm);
  cursor: pointer;
}
.findbtn:hover { border-color: var(--pine); color: var(--pine); }
.hunt--wide input { width: 100%; }

/* ---------- the two columns ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 30px;
  max-width: var(--hold);
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.rail { position: sticky; top: 74px; align-self: start; }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail__main a {
  display: block;
  padding: 10px 13px;
  border-radius: var(--round-sm);
  color: var(--soft);
  font-weight: 500;
}
.rail__main a:hover { background: var(--sunk); color: var(--ink); }
.rail__main a.on { background: var(--pine); color: #fff; }
.rail__label {
  margin: 22px 0 8px 13px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}
.rail__tags a {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 7px 13px; border-radius: var(--round-sm);
  font-size: 14px; color: var(--soft);
}
.rail__tags a:hover { background: var(--sunk); color: var(--ink); }
.rail__tags b { font-weight: 400; opacity: .65; font-size: 12px; }

.hold { min-width: 0; }

/* ---------- front page ---------- */

.lede { margin: 0 0 24px; }
.lede__h { margin: 0 0 6px; font-size: clamp(26px, 4vw, 36px); }
.lede__h small { display: block; font-family: var(--sans); font-size: 15px; font-weight: 400; color: var(--soft); margin-top: 4px; }
.lede__p { margin: 0 0 6px; color: var(--soft); max-width: 62ch; }
.lede__n { margin: 0; font-size: 13px; color: var(--soft); }

.spot {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 16px;
  margin: 0 0 34px;
}
.spot__item {
  position: relative;
  border-radius: var(--round);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
}
.spot__item--lead { aspect-ratio: 16 / 11; }
.spot__item a { display: block; height: 100%; }
.spot__item img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; position: relative; z-index: 1; }
.spot__txt {
  position: absolute; inset: auto 0 0 0;
  padding: 16px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .35) 60%, transparent);
  color: #fff;
}
.spot__txt h2 { margin: 0 0 3px; font-size: clamp(16px, 2vw, 22px); }
.spot__txt p { margin: 0 0 8px; font-size: 13px; opacity: .85; }
.spot__go {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 99px;
  background: #fff; color: #13211d;
  font-size: 13px; font-weight: 500;
}

/* ---------- bands and the grid ---------- */

.band { margin: 0 0 34px; content-visibility: auto; contain-intrinsic-size: auto 600px; }
.band__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--line);
}
.band__top h2 { margin: 0; font-size: 20px; }
.band__more { font-size: 14px; color: var(--pine); font-weight: 500; }
.band__more:hover { text-decoration: underline; }

.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px 16px; }

.tile { min-width: 0; }
.tile__art {
  position: relative;
  display: block;
  border-radius: var(--round);
  overflow: hidden;
  background: var(--sunk);
  box-shadow: var(--shadow);
  aspect-ratio: 2 / 3;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tile__art img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }

/* What fills a card before its poster arrives. Deliberately static: an animated
   placeholder on thirty cards at once is what made scrolling stutter on another
   site, and the poster covers this completely the moment it paints. */
.tile__art::before,
.spot__item::before,
.sheet__art-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--line) 70%, transparent) 0 14%, transparent 15%),
    linear-gradient(160deg, var(--sunk) 0%, color-mix(in srgb, var(--sunk) 86%, var(--line)) 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .tile__art::before, .spot__item::before { background: var(--sunk); }
}
.tile__link:hover .tile__art { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.tile__grade, .tile__eps {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(10, 20, 18, .78); color: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: .02em;
}
.tile__eps { top: auto; bottom: 8px; left: 8px; background: var(--pine); }
.tile__name {
  margin: 9px 0 2px;
  font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tile__meta { margin: 0; font-size: 12px; color: var(--soft); display: flex; gap: 8px; }

/* compact rows, used where a grid would be too loud */
.rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.row a {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: auto auto;
  gap: 2px 12px; align-items: center;
  padding: 7px; border-radius: var(--round-sm);
}
.row a:hover { background: var(--sunk); }
.row img { grid-row: 1 / 3; border-radius: 7px; background: var(--sunk); object-fit: cover; height: 111px; }
.row__t { font-size: 14px; font-weight: 500; align-self: end; }
.row__m { font-size: 12px; color: var(--soft); align-self: start; }

.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.chips a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 9px 15px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow); font-size: 14px;
}
.chips a:hover { box-shadow: var(--shadow-lift); color: var(--pine); }
.chips b { font-weight: 400; font-size: 12px; color: var(--soft); }

/* ---------- headings, trail, pager ---------- */

.head { margin: 0 0 20px; }
.head h1 { margin: 0 0 4px; font-size: clamp(22px, 3.4vw, 30px); }
.head__lead { margin: 0; color: var(--soft); font-size: 14px; }

.trail { margin: 0 0 16px; }
.trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 13px; color: var(--soft); }
.trail li + li::before { content: "/"; margin-right: 6px; opacity: .5; }
.trail a:hover { color: var(--pine); text-decoration: underline; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 0 0; }
.pager__step {
  padding: 11px 18px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 500;
}
.pager__step:hover { box-shadow: var(--shadow-lift); color: var(--pine); }
.pager__now { font-size: 13px; color: var(--soft); }

.empty { color: var(--soft); padding: 26px 0; }

/* ---------- watching ---------- */

.stage { margin: 0 0 18px; }
.screen {
  border-radius: var(--round);
  overflow: hidden;
  background: #05080a;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 16 / 9;
}
.screen > div, .screen iframe { width: 100%; height: 100%; border: 0; display: block; }
.screen__none { color: #cfd6d3; text-align: center; padding: 40px 16px; margin: 0; }

.sheet { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 26px; margin: 0 0 34px; }
.sheet__h { margin: 0 0 10px; font-size: clamp(21px, 3vw, 28px); }
.sheet__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; font-size: 13px; }
.sheet__facts span, .sheet__facts a {
  padding: 5px 11px; border-radius: 99px; background: var(--sunk); color: var(--soft);
}
.sheet__facts a { background: var(--pine); color: #fff; }
.sheet__text { color: var(--ink); max-width: 68ch; }
.sheet__text p { margin: 0 0 12px; }
/* The date sits directly under the heading, where a search result looks for it. */
.sheet__date { margin: 0 0 12px; font-size: 13px; color: var(--soft); }
.sheet__date time { color: var(--ink); }
.sheet__art { border-radius: var(--round); box-shadow: var(--shadow); width: 100%; }

.season { margin: 0 0 28px; }
.season__h { margin: 0 0 12px; font-size: 18px; }
.season__h small { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--soft); margin-left: 6px; }
.eps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.eps a {
  display: flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 8px 12px;
  border-radius: var(--round-sm);
  background: var(--card); box-shadow: var(--shadow);
  font-size: 14px;
}
.eps a:hover { box-shadow: var(--shadow-lift); color: var(--pine); }
.eps b { font-weight: 600; font-family: var(--display); }
.eps span {
  font-size: 12px; color: var(--soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eps a.eps__on { background: var(--pine); color: #fff; }
.eps a.eps__on span, .eps a.eps__on b { color: #fff; }

.hop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 26px; }
.hop__a, .hop__all {
  padding: 10px 16px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow); font-size: 14px; font-weight: 500;
}
.hop__all { background: var(--pine); color: #fff; }
.hop__a--off { opacity: .4; box-shadow: none; background: var(--sunk); }

/* ---------- foot and phone tabs ---------- */

.base {
  border-top: 1px solid var(--line);
  padding: 28px 16px calc(84px + env(safe-area-inset-bottom));
  text-align: center;
  color: var(--soft);
}
.base__line {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 17px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.base__mark { color: var(--pine); }
.base__note { margin: 0 0 10px; font-size: 13px; max-width: 60ch; margin-inline: auto; }
.base__nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 12px 0; font-size: 14px; }
.base__nav a:hover { color: var(--pine); }
.base__small { margin: 10px 0 0; font-size: 12px; }

.tabs { display: none; }

/* ---------- narrower screens ---------- */

@media (max-width: 1239px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 999px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .topbar__menu { display: flex; }
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 50;
    width: 270px; max-width: 86vw;
    padding: 18px 12px;
    background: var(--card);
    box-shadow: var(--shadow-lift);
    transform: translateX(-102%);
    transition: transform .22s ease;
    overflow-y: auto;
  }
  .rail.open { transform: none; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .spot { grid-template-columns: 1fr 1fr; }
  .spot__item--lead { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .sheet { grid-template-columns: minmax(0, 1fr); }
  .sheet__side { order: -1; max-width: 180px; }
  .rows { grid-template-columns: 1fr; }
}

@media (max-width: 759px) {
  body { font-size: 15px; }

  .topbar { gap: 8px; flex-wrap: wrap; }
  html.js .findbtn { display: inline-flex; }
  html.js .hunt {
    display: none;
    flex-basis: 100%;
    order: 3;
    padding-bottom: 4px;
  }
  html.js .hunt.open { display: flex; }
  .hunt input { flex: 1 1 auto; min-width: 0; }

  /* a poster cropped to a wide strip loses its subject; keep more height */
  .spot__item, .spot__item--lead { aspect-ratio: 4 / 5; }
  .spot__txt { padding: 14px 13px 12px; }
  .brand__name { font-size: 19px; }
  .shell { padding: 16px 14px 30px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .spot { grid-template-columns: 1fr; gap: 12px; }
  .spot__item { aspect-ratio: 16 / 10; }
  .hunt input { width: 100%; }
  .brand__name { font-size: 18px; }
  .band__top h2 { font-size: 17px; }
  .tabs {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: color-mix(in srgb, var(--card) 94%, transparent);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabs a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 56px; font-size: 11px; color: var(--soft);
  }
  .tabs svg { width: 22px; height: 22px; fill: currentColor; }
  .tabs a.on { color: var(--pine); }
  .pager { gap: 8px; }
  .pager__step { padding: 11px 14px; }
  .hop { flex-wrap: wrap; }
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .tabs { background: var(--card); }
}

/* anchors land below the sticky bar, not under it */
:target { scroll-margin-top: 78px; }

@media (max-width: 380px) {
  .brand__sub { display: none; }
  .brand { gap: 8px; }
  .shell { padding: 14px 12px 28px; }
  .grid { gap: 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* The counter keeps no visible mark on the page. It stays in the document -
   removing it would stop the counter working - but takes no space and is out of
   the reading order. */
.tally {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}