.logo{position:relative;display:block;height:clamp(84px,9vw,132px);aspect-ratio:1534/646}
.logo::after{content:"";position:absolute;inset:0;background:url(../img/logo-sticker.webp) center/contain no-repeat}
.logo__letters{display:block;width:100%;height:100%;background-color:currentColor;-webkit-mask:url(../img/logo-letters.webp) center/contain no-repeat;mask:url(../img/logo-letters.webp) center/contain no-repeat}
.site-header{position:relative;z-index:20;display:grid;justify-items:center;gap:12px;padding:16px var(--gutter) 0;background:var(--spice);color:var(--on-spice);border-block-end:6px solid var(--paper);transition:background-color .45s var(--ease),color .45s var(--ease)}
.site-header__logo{display:block}
.site-header .logo{height:clamp(72px,8vw,112px)}
.site-nav{max-width:100%;overflow-x:auto;scrollbar-width:none}
.site-nav__list{display:flex;justify-content:center;gap:6px;width:max-content;margin-inline:auto}
.site-nav a{display:flex;align-items:center;min-height:44px;padding:0 20px;border-radius:10px 10px 0 0;background:var(--tab);color:var(--ink);font-family:var(--font-ui);font-weight:700;font-size:18px;text-decoration:none;white-space:nowrap;translate:0 5px;transition:translate .18s var(--ease),background-color .18s}
.site-nav a[aria-current="page"],.site-nav .current-menu-item a{background:var(--paper);translate:0 0}
@media (hover:hover) and (pointer:fine){.site-nav a:hover{background:var(--paper);translate:0 0}}
.cook-btn{position:relative;display:inline-block;padding-block-start:22px;margin-block-start:-22px;text-decoration:none;color:var(--ink);--liquid:var(--amber)}
.cook-btn__pot{position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;padding:0 34px;overflow:hidden;background:var(--paper);border:3px solid var(--ink);border-radius:8px 8px 22px 22px;font-family:var(--font-ui);font-weight:700;font-size:19px}
.cook-btn::before,.cook-btn::after{content:"";position:absolute;inset-block-start:38px;width:12px;height:18px;border:3px solid var(--ink);background:var(--paper)}
.cook-btn::before{inset-inline-start:-11px;border-inline-end:0;border-radius:0 8px 8px 0}
.cook-btn::after{inset-inline-end:-11px;border-inline-start:0;border-radius:8px 0 0 8px}
.cook-btn:dir(rtl)::before{border-radius:0 8px 8px 0}
.cook-btn:dir(rtl)::after{border-radius:8px 0 0 8px}
.cook-btn__liquid{position:absolute;inset:0;translate:0 100%;background:var(--liquid);transition:translate .55s var(--ease)}
.cook-btn__liquid::before,.cook-btn__liquid::after{content:"";position:absolute;bottom:6px;width:7px;height:7px;border-radius:50%;background:var(--paper);opacity:0}
.cook-btn__liquid::before{inset-inline-start:22%}
.cook-btn__liquid::after{inset-inline-start:70%;width:5px;height:5px}
.cook-btn__label{position:relative}
.cook-btn__steam{position:absolute;inset-block-start:0;inset-inline:0;display:flex;justify-content:center;gap:14px;height:24px;color:var(--on-spice);pointer-events:none}
.cook-btn__steam i{display:block;width:5px;height:22px;border-radius:50%;background:currentColor;opacity:0;filter:blur(2px)}
.cook-btn:focus-visible .cook-btn__liquid{translate:0 22%}
.cook-btn:focus-visible .cook-btn__steam i{animation:cook-steam 1.5s ease-out infinite}
.cook-btn:focus-visible .cook-btn__steam i:nth-child(2){animation-delay:.3s}
.cook-btn:focus-visible .cook-btn__steam i:nth-child(3){animation-delay:.6s}
@media (hover:hover) and (pointer:fine){
  .cook-btn:hover .cook-btn__liquid{translate:0 22%}
  .cook-btn:hover .cook-btn__liquid::before{animation:cook-bubble 1.1s ease-in infinite}
  .cook-btn:hover .cook-btn__liquid::after{animation:cook-bubble 1.4s ease-in .35s infinite}
  .cook-btn:hover .cook-btn__steam i{animation:cook-steam 1.5s ease-out infinite}
  .cook-btn:hover .cook-btn__steam i:nth-child(2){animation-delay:.3s}
  .cook-btn:hover .cook-btn__steam i:nth-child(3){animation-delay:.6s}
}
@media (hover:none){
  .cook-btn__liquid{translate:0 62%}
  .cook-btn__steam i{animation:cook-steam 3.4s ease-out infinite}
  .cook-btn__steam i:nth-child(2){animation-delay:1.1s}
  .cook-btn__steam i:nth-child(3){animation-delay:2.2s}
}
@keyframes cook-steam{0%{opacity:0;translate:0 14px;scale:1 .6}35%{opacity:.75}100%{opacity:0;translate:3px -12px;scale:1.5 1.2}}
@keyframes cook-bubble{0%{opacity:0;translate:0 0}20%{opacity:.9}100%{opacity:0;translate:0 -34px}}
.btn{display:inline-flex;align-items:center;min-height:54px;padding:0 28px;border-radius:6px;background:var(--pen);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:18px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--pen-dark)}
.btn--paper{background:#fff;color:var(--pen)}.btn--paper:hover{background:#FFF3E2}
.link-button{background:none;border:0;padding:0;font:inherit;text-decoration:underline;text-underline-offset:5px;cursor:pointer;min-height:44px}
.soon{margin:0;font-family:var(--font-ui);font-weight:700;font-size:18px}
.page-head{background:var(--spice);color:var(--on-spice);padding-block:clamp(36px,5vw,64px) clamp(40px,6vw,72px)}
.page-head__inner{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.page-head__inner>div{flex:1 1 280px;min-width:0}
.page-head__title{font-size:clamp(46px,9vw,124px);line-height:1}
.page-head__sub{font-family:var(--font-ui);font-weight:700;font-size:20px;margin:14px 0 0}
.page-head__text{font-size:21px;line-height:1.55;max-width:34em;margin-block-start:10px}
.page-head__text p{margin:0}
.page-head__avatar{width:clamp(96px,12vw,160px);height:clamp(96px,12vw,160px);border-radius:50%;object-fit:cover;background:var(--paper)}
.page-head .finder{margin-block-start:24px;max-width:560px}
.finder{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.finder__label{font-family:var(--font-ui);font-weight:700;font-size:17px;white-space:nowrap}
.finder__input{flex:1 1 200px;min-width:0;height:48px;padding:0 14px;border:2px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink)}
.finder__submit{height:48px;padding:0 20px;border:0;border-radius:6px;background:var(--pen);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:17px;cursor:pointer}
.recipe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:40px 28px}
.recipe-grid--three{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));margin-block-start:32px}
.recipe-card{display:block;text-decoration:none}
.img-fit{object-fit:contain!important;background:var(--tab)!important}
.recipe-card__img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#E9DCC4}
.recipe-card__body{display:block;padding-block-start:14px}
.recipe-card__title{display:block;font-family:var(--font-ui);font-weight:700;font-size:26px;line-height:1.14}
.recipe-card__meta{display:block;font-size:17px;margin-block-start:6px}
@media (hover:hover) and (pointer:fine){.recipe-card:hover .recipe-card__title{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}}
.recipe-card--feature .recipe-card__title{font-size:clamp(30px,3.4vw,46px);line-height:1.08}
.recipe-card--row{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center}
.recipe-card--row .recipe-card__img{width:200px}
.recipe-card--row .recipe-card__body{padding:0}
.navigation.pagination{margin-block-start:48px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;font-family:var(--font-ui);font-weight:700}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:0 12px;border-radius:6px;text-decoration:none}
.page-numbers.current{background:var(--pen);color:#fff}
a.page-numbers:hover{background:var(--tab)}
.term-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:32px}
.term-cloud a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid #6C4A38;border-radius:6px;text-decoration:none}
.term-cloud a:hover{background:var(--turmeric);border-color:var(--turmeric);color:var(--ink)}
.term-cloud span{font-size:16px}
.cooks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:28px}
.cook{display:grid;justify-items:start;gap:6px;text-decoration:none}
.cook__avatar{width:120px;height:120px;border-radius:50%;background:var(--tab)}
.cook__name{font-family:var(--font-ui);font-weight:700;font-size:26px;line-height:1.14}
.empty{display:grid;gap:14px;justify-items:start}.empty__title{font-size:clamp(32px,4vw,48px)}.empty p{margin:0}
.fields{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin-block-start:26px}
.field{display:grid;gap:6px;font-family:var(--font-ui);font-weight:700;font-size:17px}
.field__input{width:100%;min-width:0;font-family:var(--font-body);font-weight:400;font-size:20px;padding:12px 14px;border:2px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);resize:vertical}
.section--pen .field__input{border-color:#fff}
.site-footer{background:var(--ink);color:#FFF3E2;padding-block:56px 36px;font-size:19px;line-height:1.65}
.site-footer__grid{display:flex;flex-wrap:wrap;gap:32px 72px;justify-content:space-between}
.site-footer__about{max-width:34em;color:#FFD9A0}.site-footer__about p{color:#FFF3E2}
.site-footer .logo{height:112px}
.site-footer__links{display:grid;gap:4px}.site-footer__links a{min-height:40px;display:flex;align-items:center}
.site-footer__copy{margin-block-start:28px;font-size:16px}
.comments{background:var(--paper)}.comments__title{font-size:clamp(32px,4vw,48px);margin-block-end:20px}
.comments__list{display:grid;gap:20px;margin-block-end:32px}
.comment-form{display:grid;gap:12px}.comment-form label{display:block;font-family:var(--font-ui);font-weight:700;font-size:17px}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%;padding:12px 14px;border:2px solid var(--ink);border-radius:6px;background:#fff}
.comment-form .submit{min-height:54px;padding:0 28px;border:0;border-radius:6px;background:var(--pen);color:#fff;font-family:var(--font-ui);font-weight:700;cursor:pointer}
@media (max-width:900px){
  .site-nav__list{justify-content:flex-start}
  .site-nav a{padding:0 7px;font-size:15px}
  .site-nav__list{gap:4px}
  .recipe-card--row{grid-template-columns:104px 1fr}.recipe-card--row .recipe-card__img{width:104px;height:104px}
  .recipe-card__title{font-size:23px}
}
.cook__avatar--letter{display:flex;align-items:center;justify-content:center;background:var(--spice);color:var(--on-spice);font-family:var(--font-display);font-size:48px}