/* Сырок — syrok.site */
@font-face{font-family:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/unbounded-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:"Unbounded";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/unbounded-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/literata-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:"Literata";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/literata-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/literata-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:"Literata";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/literata-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/literata-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Literata";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/literata-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --milk:#F6F8FC;
  --curd:#FFFFFF;
  --glaze:#3B2418;
  --glaze-2:#6A5146;
  --foil:#2747C9;
  --foil-deep:#1B3196;
  --vanilla:#F4D36A;
  --line:#DCE3F0;
  --grid:#D6E0F2;
  --margin:#E58A94;
  --display:"Unbounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:"Literata",Georgia,"Times New Roman",serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--glaze);font:400 1.125rem/1.7 var(--text)}
h1,h2,h3{font-family:var(--display);font-weight:600;color:var(--glaze);text-wrap:balance}
p,li{text-wrap:pretty}
a{color:var(--foil);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--foil-deep);text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--foil);outline-offset:3px;border-radius:6px}
svg{display:block;width:100%;height:auto}
strong{font-weight:700}
.skip{position:absolute;left:-9999px;top:0;background:var(--curd);color:var(--glaze);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:70rem;margin:0 auto;padding:0 1.5rem}

/* шапка */
.site-header{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:.75rem 2rem;padding-top:1.75rem;padding-bottom:1.75rem}
.logo{font:600 1.375rem/1 var(--display);letter-spacing:-.01em;color:var(--glaze);text-decoration:none}
.logo:hover{color:var(--foil)}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;font-size:1rem}
.nav a{color:var(--glaze);text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{color:var(--foil);text-decoration:underline}

/* первый экран */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:1.5rem 3rem;padding-top:1.5rem;padding-bottom:2.5rem}
.hero h1{font-size:clamp(1.75rem,1.1rem + 2.4vw,2.75rem);line-height:1.16;letter-spacing:-.02em;margin:0 0 1.25rem;max-width:17ch}
.hero p{margin:0;max-width:36ch;font-size:1.25rem;line-height:1.6;color:var(--glaze-2)}
.hero-art{max-width:36rem;justify-self:end}
.wrapper{animation:unwrap 1.2s cubic-bezier(.2,.75,.25,1) .3s both}
@keyframes unwrap{from{transform:translateX(-96px)}to{transform:none}}

/* совет дня */
.tip{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:1.25rem;align-items:center;background:var(--curd);border:1px solid var(--line);border-radius:1.25rem;padding:1.25rem 1.75rem 1.25rem 1.25rem;margin:0 0 3.5rem;max-width:50rem}
.tip h2{font-size:.9375rem;line-height:1.3;margin:0 0 .3rem}
.tip p{margin:0}

/* список записей */
.section-title{font-size:1.5rem;line-height:1.2;margin:0 0 1.5rem}
.posts{list-style:none;margin:0;padding:0}
.post-item{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1.5rem;align-items:start;padding:1.75rem 0;border-top:1px solid var(--line)}
.post-item:first-child{border-top:0;padding-top:0}
.post-item .cover{display:block;border-radius:.875rem;overflow:hidden}
.post-item h3{font-size:1.1875rem;line-height:1.35;margin:.1rem 0 .45rem}
.post-item h3 a{color:var(--glaze);text-decoration:none}
.post-item h3 a:hover{color:var(--foil);text-decoration:underline}
.post-item p{margin:0 0 .45rem;max-width:62ch}
.post-item.lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.25rem;align-items:center;padding-bottom:2.25rem}
.post-item.lead .cover{border-radius:1.5rem}
.post-item.lead h3{font-size:clamp(1.4rem,1.1rem + 1vw,1.875rem);line-height:1.22;margin-bottom:.75rem}
.post-item.lead p{font-size:1.1875rem}
.meta{font-size:.9375rem;color:var(--glaze-2)}
.meta a{color:var(--glaze-2)}
.meta a:hover{color:var(--foil)}
.more{margin:1rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}

/* запись */
.article{max-width:42rem;padding-bottom:2rem}
.article h1{font-size:clamp(1.6rem,1.15rem + 1.9vw,2.4rem);line-height:1.18;letter-spacing:-.015em;margin:.5rem 0 1rem}
.article .lede{font-size:1.25rem;line-height:1.6;color:var(--glaze-2);margin:0 0 1rem}
.article h2{font-size:1.1875rem;line-height:1.35;margin:2.5rem 0 .9rem}
.article .cover{border-radius:1.5rem;overflow:hidden;margin:1.75rem 0 2rem}
.article p{margin:0 0 1.1rem}
.body ul{padding-left:1.25rem}
.body li{margin:0 0 .35rem}
.crumbs{font-size:.9375rem;color:var(--glaze-2);margin:.5rem 0 0}
.crumbs a{color:var(--glaze-2)}
.facts{display:flex;flex-wrap:wrap;gap:.25rem 1.5rem;margin:0}
.tag-head{padding:0;margin:0 0 2rem}

/* что нужно: листок в клетку */
.card-ingredients{position:relative;background-color:var(--curd);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:1.375rem 1.375rem;background-position:-1px -1px;border:1px solid var(--line);border-radius:.375rem;padding:1.25rem 1.5rem 1.25rem 3.5rem;margin:2rem 0}
.card-ingredients::before{content:"";position:absolute;top:0;bottom:0;left:2.4rem;width:2px;background:var(--margin);opacity:.75}
.card-ingredients h2{font-size:1rem;margin:0 0 .75rem}
.card-ingredients ul{list-style:none;margin:0;padding:0}
.card-ingredients li{display:flex;align-items:baseline;gap:.5rem;margin:0;padding:.05rem 0;line-height:1.65}
.card-ingredients .dots{flex:1 1 1rem;min-width:1rem;border-bottom:2px dotted rgba(59,36,24,.28);transform:translateY(-.3em)}
.card-ingredients .q{white-space:nowrap;font-weight:700}

/* шаги */
.steps{list-style:none;counter-reset:step;margin:1rem 0 1.5rem;padding:0}
.steps li{counter-increment:step;position:relative;padding-left:3rem;margin:0 0 1rem}
.steps li::before{content:counter(step);position:absolute;left:0;top:.1rem;width:2rem;height:2rem;border-radius:50%;background:var(--foil);color:#fff;font:600 .8125rem/2rem var(--display);text-align:center}

/* соседние и похожие */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:3rem 0 0;padding-top:1.5rem;border-top:1px solid var(--line)}
.pager a{text-decoration:none;color:var(--glaze);font-family:var(--display);font-weight:600;font-size:.9375rem;line-height:1.4}
.pager a:hover{color:var(--foil)}
.pager span{display:block;font:400 .875rem/1.5 var(--text);color:var(--glaze-2);margin-bottom:.2rem}
.pager .newer{text-align:right}
.related{margin:0;padding-top:.5rem}
.related h2{font-size:1.1875rem;margin:1.5rem 0 1rem}
.compact .post-item{grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:1.1rem 0}
.compact .post-item h3{font-size:1rem}
.compact .post-item p{font-size:1rem}

/* архив */
.archive{list-style:none;margin:0 0 1rem;padding:0}
.archive li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding:.55rem 0;border-top:1px solid var(--line)}
.archive time{color:var(--glaze-2);font-size:.9375rem;padding-top:.1rem}

/* подвал */
.site-footer{margin-top:4rem;border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:.9375rem;color:var(--glaze-2)}
.site-footer p{margin:0 0 .4rem;max-width:60ch}
.site-footer strong{color:var(--glaze)}

@media (max-width:52rem){
  body{font-size:1.0625rem}
  .hero{grid-template-columns:1fr;padding-top:.5rem}
  .hero-art{justify-self:start;max-width:30rem}
  .post-item.lead{grid-template-columns:1fr;gap:1.25rem}
}
@media (max-width:34rem){
  .wrap{padding-left:1.125rem;padding-right:1.125rem}
  .site-header{gap:.6rem 1rem;padding-top:1.25rem;padding-bottom:1.5rem}
  .nav{gap:.25rem 1.1rem;font-size:.9375rem}
  .hero{padding-top:.25rem}
  .post-item{grid-template-columns:6rem minmax(0,1fr);gap:1rem}
  .tip{grid-template-columns:3rem minmax(0,1fr);gap:1rem;padding:1rem 1.25rem 1rem 1rem}
  .card-ingredients{padding:1rem 1rem 1rem 2.75rem}
  .card-ingredients::before{left:1.9rem}
  .archive li{grid-template-columns:5.5rem minmax(0,1fr)}
  .pager{grid-template-columns:1fr}
  .pager .newer{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .wrapper{animation:none}
}

/* печать рецепта */
@media print{
  @page{margin:16mm 14mm}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  .skip,.site-header,.site-footer,.crumbs,.pager,.related,.article .cover,.tip,.hero-art{display:none}
  .wrap,.article{max-width:none;padding:0;margin:0}
  .article h1{font-size:20pt;margin-top:0}
  .article .lede{font-size:12pt;color:#333}
  .meta,.meta a{color:#333}
  a{color:#000;text-decoration:none}
  .card-ingredients{background:none;border:1px solid #999;break-inside:avoid}
  .card-ingredients::before{display:none}
  .card-ingredients{padding-left:1rem}
  .steps li{break-inside:avoid}
  .steps li::before{background:none;color:#000;border:1px solid #000}
}