/* Сметка — основные стили. Правки: Марина, последняя 10.2026 */

@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lora-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lora-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lora-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lora-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lora-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Lora";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/lora-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/rubik-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Rubik";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/rubik-cyrillic-400-italic.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Rubik";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/rubik-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/caveat-cyrillic-400-normal.woff2) format("woff2")}

:root{
  --denim:#2E4A62;
  --denim-dk:#22384b;
  --tape:#E9C46A;
  --ink:#23262B;
  --muted:#6b6f76;
  --line:#dfe2e6;
  --pale:#f4f6f8;
  --red:#b5412f;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:16px/1.55 "Rubik",Arial,sans-serif}
a{color:var(--denim)}
a:hover{color:var(--red)}
img{max-width:100%;height:auto}
h1,h2,h3{font-family:"Lora",Georgia,serif;font-weight:600;line-height:1.25;color:#1c2733}
h1{font-size:30px;margin:6px 0 14px}
h2{font-size:22px;margin:28px 0 10px}
h3{font-size:18px;margin:20px 0 6px}
p{margin:0 0 12px}
small,.small{font-size:13px}
.muted{color:var(--muted)}

/* сантиметровая лента */
.tape{height:22px;background-color:var(--tape);
  background-image:
    repeating-linear-gradient(90deg,rgba(35,38,43,.75) 0 1px,transparent 1px 10px),
    repeating-linear-gradient(90deg,rgba(35,38,43,.9) 0 1px,transparent 1px 50px);
  background-size:100% 6px,100% 11px;background-repeat:repeat-x;background-position:0 0,0 0;
  border-bottom:1px solid #c9a54d;overflow:hidden;white-space:nowrap;
  font:10px/22px "Rubik",sans-serif;color:#4d4120;letter-spacing:0}
.tape span{display:inline-block;width:50px;padding-left:3px;padding-top:4px;line-height:18px}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 12px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{flex:none}
.logo b{font:600 28px/1 "Lora",Georgia,serif;color:#1c2733;display:block}
.logo i{font-style:normal;font-size:13px;color:var(--muted);display:block;margin-top:4px}
.head-r{text-align:right;font-size:13px;color:var(--muted)}
.head-r a{display:inline-flex;align-items:center;gap:5px;font-size:14px;margin-top:3px}
.nav{background:var(--denim)}
.nav ul{list-style:none;margin:0 auto;padding:0 16px;max-width:1040px;display:flex;flex-wrap:wrap}
.nav li{position:relative}
.nav li+li:before{content:"";position:absolute;left:0;top:13px;bottom:13px;border-left:1px dashed rgba(255,255,255,.45)}
.nav a{display:block;padding:11px 14px;color:#fff;text-decoration:none;font-size:15px}
.nav li:first-child a{padding-left:0}
.nav a:hover{color:var(--tape)}
.nav a.on{color:var(--tape);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.crumbs{font-size:13px;color:var(--muted);margin:14px 0 0}
.crumbs a{color:var(--muted)}

.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:36px;margin-top:18px}
.side{font-size:15px}
.side h3{font-size:16px;margin-top:22px;border-bottom:1px solid var(--line);padding-bottom:4px}
.side ul{list-style:none;padding:0;margin:0}
.side li{margin:0 0 9px}
.side li time{display:block;font-size:12px;color:var(--muted)}
.note{background:var(--pale);border-left:3px solid var(--tape);padding:12px 14px;margin:10px 0}
.pencil{font-family:"Caveat",cursive;font-size:21px;line-height:1.15;color:#5a5e66;transform:rotate(-1.5deg);display:block;margin:8px 0}

table{border-collapse:collapse;width:100%;font-size:15px;margin:6px 0 16px}
th,td{text-align:left;vertical-align:top;padding:7px 8px;border-bottom:1px solid var(--line)}
th{font-weight:500;font-size:13px;color:var(--muted);border-bottom:2px solid var(--line)}
td.n{white-space:nowrap}
tr.past td{color:#9a9da3}
tr.past td s{color:#9a9da3}
.tblwrap{overflow-x:auto}

.mark{display:inline-block;font-size:12px;padding:1px 6px;border-radius:2px;background:var(--tape);color:#3a300f;white-space:nowrap}
.mark.gray{background:#e6e8eb;color:#555}
.mark.red{background:#f3d9d3;color:#7a2a1d}

/* каталог строками */
.clist{list-style:none;padding:0;margin:8px 0 18px}
.clist li{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:14px;align-items:start;padding:12px 0;border-bottom:1px solid var(--line)}
.clist img{display:block;width:120px;height:68px;object-fit:cover}
.clist h3{margin:0 0 3px;font-size:17px}
.clist p{margin:0;font-size:14px;color:#44484e}
.clist .price{text-align:right;font-size:14px;white-space:nowrap}
.clist .price b{font-weight:500;font-size:16px;display:block}

/* открытые уроки */
.free{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;margin:10px 0 20px}
.free a{text-decoration:none;color:var(--ink);font-size:14px;line-height:1.35}
.free a:hover span{text-decoration:underline}
.free img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:5px}
.free .wide{grid-column:span 2}
.free em{font-style:normal;color:var(--muted);font-size:12px;display:block;margin-top:2px}

/* список уроков курса */
.lessons{list-style:none;padding:0;margin:8px 0 20px;counter-reset:l}
.lessons li{display:grid;grid-template-columns:34px 96px minmax(0,1fr) 64px;gap:12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.lessons li .num{color:var(--muted);font-size:13px;text-align:right}
.lessons li img{width:96px;height:54px;object-fit:cover;display:block}
.lessons li .t{color:var(--muted);font-size:13px;text-align:right;white-space:nowrap}
.lessons li a{text-decoration:none}
.lessons li a:hover{text-decoration:underline}
.lessons li.closed a{color:var(--ink)}
.lessons li.closed img{filter:saturate(.35) brightness(.95)}
.lessons .lock{display:inline-block;vertical-align:-1px;margin-left:6px}
.lessons .mod{display:block;grid-template-columns:none;border-bottom:0;padding:16px 0 4px;font-weight:500;font-size:14px;color:var(--denim)}

/* плеер */
.player{background:#111;margin:8px 0 6px}
.player video{display:block;width:100%;aspect-ratio:16/9;background:#111}
.pbar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:14px}
.pbar button{font:inherit;font-size:13px;background:#fff;border:1px solid var(--line);color:var(--ink);padding:2px 8px;cursor:pointer;border-radius:2px}
.pbar button.on{background:var(--denim);color:#fff;border-color:var(--denim)}
.pbar .grp{display:inline-flex;gap:3px;align-items:center}
.pbar .grp b{font-weight:400;margin-right:4px}
.meta{font-size:14px;color:var(--muted);margin:0 0 10px}
.tc{list-style:none;padding:0;margin:0 0 16px}
.tc li{padding:3px 0}
.tc a{font-variant-numeric:tabular-nums;display:inline-block;min-width:44px}

/* записки */
.posts{list-style:none;padding:0;margin:0}
.posts li{padding:12px 0;border-bottom:1px solid var(--line)}
.posts time{font-size:13px;color:var(--muted)}
.posts h3{margin:2px 0 4px;font-size:18px}
.posts p{margin:0;font-size:15px;color:#44484e}
.post{max-width:700px}
.post .meta{margin-bottom:16px}
.post blockquote{margin:14px 0;padding:6px 14px;border-left:3px solid var(--line);color:#44484e}
.pn{display:flex;justify-content:space-between;gap:20px;font-size:14px;margin:30px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.year{font:600 15px "Lora",serif;margin:22px 0 2px;color:var(--muted)}

/* письма */
.letter{border-bottom:1px solid var(--line);padding:14px 0}
.letter .from{font-size:13px;color:var(--muted)}
.letter .ans{margin:8px 0 0 22px;padding-left:12px;border-left:2px solid var(--tape);font-size:15px}

/* формы */
form.f{max-width:520px}
form.f label{display:block;font-size:14px;margin:12px 0 4px}
form.f input[type=text],form.f input[type=email],form.f input[type=password],form.f select,form.f textarea{width:100%;font:inherit;font-size:15px;padding:8px 9px;border:1px solid #c5cad0;border-radius:2px;background:#fff;color:var(--ink)}
form.f textarea{min-height:130px;resize:vertical}
form.f .chk{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin-top:14px}
form.f .chk input{margin-top:3px}
form.f button{margin-top:16px;font:inherit;font-size:15px;background:var(--denim);color:#fff;border:0;padding:9px 20px;cursor:pointer;border-radius:2px}
form.f button:hover{background:var(--denim-dk)}
.err{display:none;margin-top:14px;padding:9px 12px;background:#fbeeea;border:1px solid #ecc4ba;color:#7a2a1d;font-size:14px}
.err.show{display:block}

.doc{max-width:760px;font-size:15px}
.doc h2{font-size:18px}
.doc ol,.doc ul{padding-left:22px}
.doc li{margin-bottom:6px}

.foot{margin-top:46px;border-top:1px solid var(--line);background:var(--pale);font-size:13px;color:var(--muted)}
.foot .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:16px;padding-bottom:20px}
.foot a{color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}

@media (max-width:820px){
  .cols{grid-template-columns:1fr;gap:10px}
  .head{flex-direction:column;align-items:flex-start;gap:6px}
  .head-r{text-align:left}
  .nav a{padding:9px 10px;font-size:14px}
  .nav li:first-child a{padding-left:0}
  .free{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clist li{grid-template-columns:90px minmax(0,1fr)}
  .clist img{width:90px;height:51px}
  .clist .price{grid-column:2;text-align:left}
  .lessons li{grid-template-columns:26px 64px minmax(0,1fr) 52px;gap:8px;font-size:14px}
  .lessons li img{width:64px;height:36px}
  h1{font-size:25px}
}
@media (max-width:480px){
  .free{grid-template-columns:1fr}
  .free .wide{grid-column:auto}
}

/* кнопка поверх постера, библиотека плеера грузится по нажатию */
.player{position:relative}
.player .go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;
  font:500 15px "Rubik",Arial,sans-serif;color:#fff;background:rgba(34,56,75,.88);border:0;border-radius:3px;padding:11px 18px 11px 14px;cursor:pointer}
.player .go:hover{background:var(--denim)}
.player .go i{width:0;height:0;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--tape)}