/*
 * Общий вид страниц-случаев. Четыре случая — один язык: палитра и шрифты те же, что на
 * остальном porfiry.ru, а строение недели, приговор и голос Приказа повторяются от страницы
 * к странице, потому что повторяется сама мысль — цена, которую человек не видел вовремя.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&family=Playfair+Display:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');

    /* Те же палитра и шрифты, что на остальных страницах porfiry.ru. Объявлено на теле, а
       не на корне: светлая тема включается классом body, и корень о ней не знает. */
    body {
      --bg-main: var(--bg);
      --bg-card: var(--card-bg);
      --text-main: var(--text);
      --text-muted: var(--gray);
      --accent: var(--brand-accent);
      --border: var(--border);
      --alarm: var(--brand-alarm);
      --font-serif: 'Playfair Display', serif;
      --font-sans: 'Inter', sans-serif;
      --font-mono: 'JetBrains Mono', monospace;
    }

    /* Тусклое золото тревоги на светлой теме не читается — у неё свой глубокий вариант. */
    body.light-theme { --alarm: var(--brand-alarm-on-light, var(--brand-alarm)); }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background-color: var(--bg-main);
      color: var(--text-main);
      font-family: var(--font-sans);
      font-weight: 300;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      padding: 0 0 96px;
    }

    .wrap { margin: 0 auto; max-width: 900px; padding: 56px 32px 0; }

    .kicker {
      color: var(--text-muted);
      display: block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.4em;
      margin-bottom: 24px;
      text-transform: uppercase;
    }

    h1 {
      font-family: var(--font-serif);
      font-size: clamp(34px, 6vw, 52px);
      font-weight: 600;
      line-height: 1.12;
      margin-bottom: 28px;
    }

    .lead { color: var(--text-muted); font-size: 19px; margin-bottom: 20px; max-width: 65ch; }
    .lead strong { color: var(--text-main); font-weight: 600; }

    h2 {
      font-family: var(--font-serif);
      font-size: 26px;
      font-weight: 600;
      margin: 72px 0 16px;
    }

    p.body { color: var(--text-muted); font-size: 17px; margin-bottom: 16px; max-width: 65ch; }
    p.body strong { color: var(--text-main); font-weight: 600; }

    /* Неделя героя. Каждая строка — согласие, и справа от неё стоит то, чего он в момент
       согласия не видел: чьё это дело и что уже занято. Именно этот столбец и есть весь
       смысл страницы, поэтому он набран, а не описан словами. */
    .week { border-top: 1px solid var(--border); margin-top: 32px; }

    .day {
      border-bottom: 1px solid var(--border);
      display: grid;
      gap: 6px 28px;
      grid-template-columns: 118px 1fr 210px;
      padding: 18px 0;
    }

    @media (max-width: 720px) { .day { grid-template-columns: 1fr; } }

    .day .when {
      color: var(--text-muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .day .said { font-size: 17px; }
    .day .said em { color: var(--text-main); font-style: normal; font-weight: 600; }
    .day .said .quote { color: var(--text-muted); display: block; font-size: 15px; font-style: italic; margin-top: 4px; }

    .cost { color: var(--alarm); font-family: var(--font-sans); font-size: 14px; }
    .cost.own { color: var(--text-muted); }

    .verdict {
      background: var(--bg-card);
      border-left: 3px solid var(--alarm);
      margin-top: 32px;
      padding: 24px 28px;
    }

    .verdict h3 { font-family: var(--font-serif); font-size: 22px; font-weight: 600; margin-bottom: 8px; }
    .verdict p { color: var(--text-muted); font-size: 16px; max-width: 60ch; }

    /* Реплика Приказа. Голос системы отделён от голоса страницы: читатель должен увидеть,
       что именно ему скажут и когда, а не пересказ этого. */
    .voice {
      border: 1px solid var(--border);
      display: grid;
      gap: 4px;
      margin-top: 28px;
      padding: 22px 26px;
    }

    .voice .who { color: var(--text-tertiary, rgba(255, 255, 255, 0.5)); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
    .voice p { font-family: var(--font-serif); font-size: clamp(19px, 2.6vw, 23px); line-height: 1.4; }
    .voice .after { color: var(--text-muted); font-family: var(--font-sans); font-size: 15px; margin-top: 10px; }

    .grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; }

    .card { background: var(--bg-card); border: 1px solid var(--border); padding: 22px 24px; }
    .card h3 { color: var(--text-main); font-size: 15px; font-weight: 600; margin-bottom: 8px; }
    .card p { color: var(--text-muted); font-size: 15px; }

    .cta { border-top: 1px solid var(--border); margin-top: 80px; padding-top: 40px; }
    .cta p { color: var(--text-muted); font-size: 17px; margin-bottom: 24px; max-width: 65ch; }

    .cta a.button {
      border: 1px solid var(--text-main);
      color: var(--text-main);
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 13px;
      letter-spacing: 0.1em;
      padding: 14px 28px;
      text-decoration: none;
      text-transform: uppercase;
      transition:
        background var(--press-in) var(--press-ease),
        color var(--press-in) var(--press-ease),
        transform var(--press-in) var(--press-ease),
        box-shadow var(--press-in) var(--press-ease);
    }

    .cta a.button:hover {
      background: var(--text-main);
      color: var(--bg-main);
      transform: translateY(-1px);
      box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--text-main) 45%, transparent);
    }

    .cta a.button:not(:hover) { transition-duration: var(--press-out); }
    .cta a.button:active { transform: translateY(0); box-shadow: none; transition-duration: 60ms; }
    .cta a.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    .back-link {
      color: var(--text-muted);
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.1em;
      margin-top: 56px;
      text-decoration: none;
    }

    .back-link:hover, .back-link:focus-visible { color: var(--text-main); }

/* Перекрёстные ссылки внизу: случай, который не ведёт к соседнему, теряет три четверти
   читателей, узнавших себя не в нём. */
.others { border-top: 1px solid var(--border); display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 72px; padding-top: 28px; }
.others a { color: var(--text-muted); display: block; text-decoration: none; }
.others a:hover, .others a:focus-visible { color: var(--text-main); }
.others .name { color: var(--text-main); display: block; font-family: var(--font-serif); font-size: 19px; margin-bottom: 4px; }
.others a:hover .name, .others a:focus-visible .name { color: var(--text-main); }
.others .who { font-size: 14px; }