/* РИТМ · страница записи на встречи основателя в Таиланде (zavtrak.html)

   ⭐ 19.10.2026, Таиланд 1–3.11. Стили вынесены в файл: страница живёт под
   CSP без 'unsafe-inline' — ни встроенного <style>, ни атрибутов style.
   Палитра и гарнитуры — бренд-бук РИТМа 30.09 (материалы/РИТМ_БРЕНДБУК_30.09.html):
   лён и чернила на девять десятых листа, латунь — только там, где нужно
   слово человека (его выбор). Светлая тема. Скруглений у рамок нет — канон;
   круг у узла такта — форма точки, как в продукте.
   Ширина телефона — главное: сюда переходят из Telegram. */
:root{
  color-scheme:light;
  --лён:#E5E5DF; --лист:#FBFBF9; --чернила:#131715; --графит:#2B322E; --текст-2:#5E665F;
  --контур:#7F857A; --волос:#CFD0C8; --латунь:#A98A54; --латунь-эл:#8F7241; --латунь-текст:#7A6133;
  --шалфей:#3F5F4C; --кирпич:#7B3327;
  --серив:'Newsreader',Georgia,serif;
  --гротеск:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --моно:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --метка:'Jost','Century Gothic',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--лён);color:var(--чернила);font:400 16px/1.6 var(--гротеск);
  -webkit-font-smoothing:antialiased}
.лист{max-width:720px;margin:0 auto;padding:32px 16px 80px}

.знак{font-family:var(--серив);font-weight:400;line-height:1;color:var(--чернила)}
.знак.крупно{font-size:clamp(30px,8vw,44px);letter-spacing:.18em;padding-left:.18em}
.знак-под{font-family:var(--моно);font-size:9.5px;letter-spacing:.2em;
  color:var(--текст-2);margin-top:12px;text-transform:uppercase}

/* Такт — пять узлов цикла; третий горит латунью. Положение узлов — классами,
   а не атрибутом style: CSP страницы его не пропустит. */
.такт{position:relative;height:13px;width:100%;max-width:420px;margin:28px 0 8px}
.такт::before{content:'';position:absolute;top:6px;left:0;right:0;height:1px;background:var(--волос)}
.такт i{position:absolute;top:3px;width:7px;height:7px;border-radius:50%;
  background:var(--лён);border:1px solid var(--контур);transform:translateX(-50%)}
.такт i:nth-child(1){left:2%} .такт i:nth-child(2){left:26%} .такт i:nth-child(3){left:50%}
.такт i:nth-child(4){left:74%} .такт i:nth-child(5){left:98%}
.такт i.горит{background:var(--латунь);border-color:var(--латунь)}

h1{font:300 clamp(32px,8.5vw,52px)/1.08 var(--серив);letter-spacing:-.5px;margin:22px 0 12px}
h2{font:300 clamp(24px,6vw,32px)/1.2 var(--серив);margin:48px 0 12px}
.дни{font:400 12px/1.4 var(--метка);letter-spacing:.16em;text-transform:uppercase;color:var(--латунь-текст)}
.под{font:300 clamp(18px,4.6vw,21px)/1.5 var(--серив);color:var(--текст-2);max-width:60ch;margin-top:12px}
p{max-width:64ch;margin:12px 0}
.тихо{color:var(--текст-2)}

.строки{border:1px solid var(--волос);background:var(--лист);margin:16px 0}
.строка{padding:16px;border-bottom:1px solid var(--волос)}
.строка:last-child{border-bottom:none}
.строка .т{font-weight:500}
.строка .а{font-size:14px;color:var(--текст-2);margin-top:4px}
.строка .к{font-family:var(--моно);font-size:13px;color:var(--графит);margin-top:6px}

.форма{background:var(--лист);border:1px solid var(--волос);padding:22px 16px;margin:16px 0}
fieldset{border:none;margin:0 0 16px}
legend{font:400 11px/1 var(--метка);letter-spacing:.2em;text-transform:uppercase;
  color:var(--текст-2);margin-bottom:10px}
/* Выбор — плитки: настоящая радиокнопка, скрытая от глаза, но не от
   клавиатуры и диктора; выбранная плитка — латунью: это слово человека. */
.плитки{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.плитки input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.плитки label{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:56px;padding:8px 12px;background:var(--лён);border:1px solid var(--контур);
  font-size:15px;line-height:1.3;cursor:pointer;transition:border-color .18s,background .18s}
.плитки input:checked + label{border:2px solid var(--латунь);background:var(--лист);font-weight:500}
.плитки input:focus-visible + label{outline:2px solid var(--чернила);outline-offset:2px}
.выбор{font-size:14px;color:var(--текст-2);margin:-4px 0 16px;min-height:22px}

.поле{display:block;width:100%;height:52px;padding:0 14px;background:var(--лён);
  border:1px solid var(--контур);font:inherit;font-size:16px;color:var(--чернила);margin-bottom:12px}
.поле:focus{border-color:var(--чернила);outline:1px solid var(--чернила);outline-offset:-2px}
.кн{width:100%;height:56px;padding:0 24px;background:var(--чернила);color:var(--лён);
  border:none;font:600 16px var(--гротеск);cursor:pointer;transition:background .18s;margin-top:4px}
.кн:hover{background:var(--латунь);color:var(--чернила)}
.кн[disabled]{opacity:.5;cursor:default}
.согласие{font-size:13px;line-height:1.55;color:var(--текст-2);margin-top:12px}
.ответ{margin-top:16px;font-size:15px;line-height:1.6;min-height:22px;color:var(--текст-2)}
.ответ.беда{color:var(--кирпич)}
.ответ.добро b{color:var(--шалфей)}
.ответ .тихо{font-size:13.5px}
.кн-ссылка{display:inline-flex;align-items:center;min-height:48px;margin:12px 0 8px;
  padding:0 22px;background:var(--чернила);color:var(--лён);text-decoration:none;
  font:600 15px var(--гротеск);transition:background .18s}
.кн-ссылка:hover{background:var(--латунь);color:var(--чернила)}

.закрыто{border-left:3px solid var(--латунь);background:var(--лист);padding:16px;margin:24px 0}
.закрыто .з{font:400 11px/1 var(--метка);letter-spacing:.2em;text-transform:uppercase;
  color:var(--латунь-текст);margin-bottom:10px}
.подвал{margin-top:56px;padding-top:22px;border-top:1px solid var(--волос);
  font-size:13px;line-height:1.7;color:var(--текст-2)}
.подвал a{color:var(--чернила)}

@media (min-width:720px){
  .лист{padding:48px 24px 96px}
  .форма{padding:32px}
  .строка{padding:16px 22px}
}