/* tide — приливная таблица: рейка уровня слева, отметки высоты воды. namespace: tid */

:root{
  --tid-ebb:#dce6ea;
  --tid-deep:#1b3a4b;
  --tid-weed:#5f8f4e;
  --tid-foam:#ffffff;
  --tid-line:rgba(27,58,75,.16);
  --tid-mute:#4d6a78;
  --tid-rail:92px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:'Raleway',-apple-system,Segoe UI,sans-serif;
  font-size:17px;
  line-height:1.68;
  color:var(--tid-deep);
  background:linear-gradient(180deg,var(--tid-foam) 0,var(--tid-ebb) 380px,var(--tid-ebb) 100%);
}

h1,h2,h3,.tid-big,.tid-mark{font-family:'Oranienbaum',Georgia,serif;font-weight:400}

a{color:var(--tid-deep)}

.tid-page{max-width:1060px;margin:0 auto;padding:0 22px 64px}

/* ---------- шапка ---------- */

.tid-bar{
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:16px 0 12px;
  border-bottom:2px solid var(--tid-deep);
}
.tid-brand{font-family:'Oranienbaum',Georgia,serif;font-size:26px;letter-spacing:2px;text-transform:uppercase}
.tid-stamp{margin-left:auto;font-size:12.5px;letter-spacing:.6px;color:var(--tid-mute)}

/* ---------- hero с синусоидой ---------- */

.tid-hero{position:relative;padding:34px 0 30px;overflow:hidden}
.tid-wave{display:block;width:100%;height:120px;margin-bottom:-14px}
.tid-hero h1{margin:0 0 14px;font-size:35px;line-height:1.2;max-width:21ch}
.tid-lead{margin:0 0 20px;max-width:64ch;font-size:18px;color:var(--tid-mute)}
.tid-hi{color:var(--tid-weed)}

.tid-gauge{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  margin:0 0 24px;
  padding:0;
  list-style:none;
  border:2px solid var(--tid-deep);
  background:var(--tid-deep);
}
.tid-gauge li{
  padding:16px 12px 13px;
  background:var(--tid-foam);
  position:relative;
}
.tid-gauge li::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:5px;
  background:var(--tid-weed);
  opacity:.28;
}
.tid-gauge li:nth-child(2)::after{height:11px}
.tid-gauge li:nth-child(3)::after{height:18px}
.tid-gauge li:nth-child(4)::after{height:25px}
.tid-gauge li:nth-child(5)::after{height:33px}
.tid-big{display:block;font-size:22px;line-height:1.15}
.tid-lbl{display:block;position:relative;margin-top:4px;font-size:12.5px;letter-spacing:.3px;color:var(--tid-mute)}

.tid-go{
  display:inline-block;
  padding:14px 34px;
  background:var(--tid-weed);
  color:var(--tid-foam);
  text-decoration:none;
  font-size:16px;
  letter-spacing:.8px;
  border-radius:0 18px 0 18px;
}
.tid-go:hover{background:var(--tid-deep)}
.tid-go-note{margin:10px 0 0;font-size:13px;color:var(--tid-mute)}

/* ---------- секция: рейка уровня + текст ---------- */

.tid-block{
  display:grid;
  grid-template-columns:var(--tid-rail) 1fr;
  gap:0 26px;
  margin:30px 0 0;
  padding:22px 0 20px;
  border-top:1px solid var(--tid-line);
}
.tid-rail{
  position:relative;
  padding-top:6px;
  border-right:2px solid var(--tid-deep);
  text-align:right;
  padding-right:12px;
}
.tid-rail .tid-mark{display:block;font-size:20px;line-height:1}
.tid-rail .tid-unit{display:block;margin-top:3px;font-size:11.5px;letter-spacing:.5px;color:var(--tid-mute)}
.tid-rail::after{
  content:"";
  position:absolute;
  right:-6px;
  top:10px;
  width:10px;
  height:10px;
  background:var(--tid-weed);
  transform:rotate(45deg);
}
.tid-body h2{margin:0 0 6px;font-size:26px;line-height:1.28}
.tid-body h3{margin:22px 0 6px;font-size:18px;color:var(--tid-weed)}
.tid-note{margin:0 0 14px;font-size:13.5px;letter-spacing:.4px;color:var(--tid-mute)}
.tid-body p{margin:0 0 13px}
.tid-body p:last-child{margin-bottom:0}
.tid-body ul{margin:0 0 14px;padding-left:20px}
.tid-body li{margin:0 0 6px}

/* ---------- таблицы ---------- */

.tid-flow{overflow-x:auto;margin:14px 0 6px}
table{border-collapse:collapse;width:100%;min-width:580px;font-size:15px;background:var(--tid-foam)}
caption{caption-side:bottom;padding-top:9px;font-size:12.5px;text-align:left;color:var(--tid-mute)}
th{
  padding:10px 12px;
  text-align:left;
  font-family:'Oranienbaum',Georgia,serif;
  font-weight:400;
  font-size:14px;
  letter-spacing:.6px;
  color:var(--tid-foam);
  background:var(--tid-deep);
  white-space:nowrap;
}
td{padding:9px 12px;border-bottom:1px solid var(--tid-line)}
tbody tr:hover{background:rgba(95,143,78,.10)}

/* ---------- шкала клуба ---------- */

.tid-scale{margin:16px 0 8px;padding:0;list-style:none;border-left:3px solid var(--tid-deep)}
.tid-scale li{
  display:grid;
  grid-template-columns:150px 74px 1fr;
  gap:12px;
  align-items:baseline;
  padding:9px 0 9px 16px;
  border-bottom:1px dashed var(--tid-line);
  background:linear-gradient(90deg,rgba(95,143,78,.16),transparent 62%);
}
.tid-scale li:nth-child(2){background:linear-gradient(90deg,rgba(95,143,78,.20),transparent 68%)}
.tid-scale li:nth-child(3){background:linear-gradient(90deg,rgba(95,143,78,.24),transparent 74%)}
.tid-scale li:nth-child(4){background:linear-gradient(90deg,rgba(95,143,78,.28),transparent 80%)}
.tid-scale li:nth-child(5){background:linear-gradient(90deg,rgba(95,143,78,.32),transparent 86%)}
.tid-scale li:nth-child(6){background:linear-gradient(90deg,rgba(95,143,78,.38),transparent 92%)}
.tid-name{font-family:'Oranienbaum',Georgia,serif;font-size:17px}
.tid-pct{font-size:16px;color:var(--tid-weed)}
.tid-req{font-size:13.5px;color:var(--tid-mute)}

/* ---------- отзыв ---------- */

.tid-voice{
  margin:18px 0 0;
  padding:18px 22px;
  background:var(--tid-foam);
  border-top:3px solid var(--tid-weed);
  font-size:16px;
}
.tid-voice p{margin:0 0 8px}
.tid-who{font-size:13px;letter-spacing:.4px;color:var(--tid-mute)}

/* ---------- FAQ ---------- */

details{
  margin:0 0 8px;
  padding:12px 16px;
  background:var(--tid-foam);
  border-left:4px solid var(--tid-deep);
}
details[open]{border-left-color:var(--tid-weed)}
summary{cursor:pointer;font-family:'Oranienbaum',Georgia,serif;font-size:17px;line-height:1.4}
details p{margin:9px 0 0;font-size:15.5px}

/* ---------- источники и подвал ---------- */

.tid-origin{
  margin:32px 0 0;
  padding:24px 26px;
  background:var(--tid-foam);
  border:2px solid var(--tid-deep);
}
.tid-origin h2{margin:0 0 10px;font-size:22px}
.tid-origin ul{margin:0;padding-left:20px;font-size:15px}
.tid-origin li{margin:0 0 6px}

.tid-bottom{
  margin:30px 0 0;
  padding:22px 0 0;
  border-top:2px solid var(--tid-deep);
  font-size:13.5px;
  line-height:1.72;
  color:var(--tid-mute);
}
.tid-bottom p{margin:0 0 7px}
.tid-18{
  display:inline-block;
  margin-top:6px;
  padding:8px 14px;
  background:var(--tid-deep);
  color:var(--tid-foam);
  border-radius:0 12px 0 12px;
  letter-spacing:.3px;
}

/* ---------- мобильный ---------- */

@media (max-width:640px){
  body{font-size:16px}
  .tid-page{padding:0 13px 44px}
  .tid-bar{flex-wrap:wrap;gap:6px}
  .tid-stamp{margin-left:0;width:100%}
  .tid-wave{height:76px}
  .tid-hero h1{font-size:26px;max-width:none}
  .tid-gauge{grid-template-columns:1fr 1fr}
  .tid-gauge li:last-child{grid-column:1 / -1}
  .tid-block{grid-template-columns:1fr;gap:0}
  .tid-rail{
    border-right:0;
    border-bottom:2px solid var(--tid-deep);
    text-align:left;
    padding:0 0 6px;
    margin-bottom:12px;
  }
  .tid-rail::after{right:auto;left:0;bottom:-6px;top:auto}
  .tid-rail .tid-mark{display:inline;font-size:17px}
  .tid-rail .tid-unit{display:inline;margin-left:8px}
  .tid-body h2{font-size:22px}
  .tid-scale li{grid-template-columns:1fr;gap:2px}
  .tid-origin{padding:18px 15px}
  .tid-go{display:block;text-align:center}
}