/*
Theme Name: Bernat Crochet Patterns
Theme URI: https://bernatcrochetpatterns.com/
Author: Bernat Crochet Patterns
Description: Colorful, cozy theme for free crochet and quilt patterns. Striped hero, scrolling text bands, filterable pattern grid and a step-by-step checklist readers can tick off. Built for ad-supported pattern blogs: light pattern pages and ready-made ad widget areas.
Version: 1.0.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bernat-crochet
Tags: blog, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root{
  --cream:#FAF5EC; --paper:#FFFDF8; --espresso:#2C2320; --denim:#3F5F8F; --sky:#BCD0E4;
  --mustard:#E6AE45; --rose:#E07A8A; --sage:#A9BFA0;
  --line:rgba(44,35,32,.14); --muted:rgba(44,35,32,.64);
  --r-card:32px; --r-tile:24px; --r-pill:999px;
  --gut:clamp(16px,3.6vw,52px);
  --max:1360px;
  --spring:cubic-bezier(.22,1.28,.42,1);
  --ease:cubic-bezier(.65,0,.35,1);
  --display:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --text:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--espresso);font-family:var(--text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--denim);outline-offset:3px}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--display);font-weight:600;line-height:1.05;text-wrap:balance}
p{margin:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:10px;left:10px;z-index:100;width:auto;height:auto;clip:auto;background:var(--espresso);color:var(--cream);padding:10px 16px;border-radius:12px}
.wrap{padding-inline:var(--gut)}
.inner{max-width:var(--max);margin-inline:auto}
.eyebrow{font-family:var(--display);font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.tab{font-variant-numeric:tabular-nums}

/* reveal (front page only; content is visible without JS) */
.js .rv{opacity:.001;transform:translateY(40px)}
.rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--spring);transition-delay:var(--d,0s)}
@keyframes up{from{opacity:.001;transform:translateY(40px)}to{opacity:1;transform:none}}
.load{animation:up .7s var(--spring) both;animation-delay:var(--d,0s)}

/* pills + text roll */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--r-pill);font-family:var(--display);font-weight:500;font-size:16px;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .5s var(--spring),background .3s}
.pill:hover{transform:translateY(-2px)}
.pill.lg{height:56px;padding:0 28px;font-size:18px}
.pill.sm{height:36px;padding:0 16px;font-size:14.5px}
.p-es{background:var(--espresso);color:var(--cream)}
.p-sky{background:var(--sky);color:var(--espresso)}
.p-mu{background:var(--mustard);color:var(--espresso)}
.p-ro{background:var(--rose);color:var(--espresso)}
.p-line{background:transparent;border:1.5px solid currentColor}
.roll{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:middle}
.roll>span{display:block;transition:transform .55s var(--spring)}
.roll>span::after{content:attr(data-t);display:block}
a:hover .roll>span,button:hover .roll>span,a:focus-visible .roll>span,button:focus-visible .roll>span{transform:translateY(-1.3em)}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px var(--gut);color:var(--cream);transition:background .45s var(--ease),color .45s,box-shadow .45s}
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}
.site-header.solid,body:not(.has-hero) .site-header{background:var(--cream);color:var(--espresso);box-shadow:0 1px 0 var(--line)}
body:not(.has-hero) .site-main{padding-top:96px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;font-family:var(--display);font-weight:500;font-size:16px}
.main-nav a{text-decoration:none}
.main-nav a:hover,.main-nav .current-menu-item>a,.main-nav .current-category-ancestor>a{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.main-nav ul ul{display:none}
.logo{font-family:var(--display);text-decoration:none;display:flex;align-items:center;gap:9px;justify-self:center}
.logo svg{flex:none}
.logo .custom-logo{max-height:48px;width:auto}
.brand{display:flex;flex-direction:column;line-height:.9}
.brand b{font-weight:700;font-size:26px}
.brand small{font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-top:3px}
.hdr-right{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid currentColor;background:transparent;display:grid;place-items:center;cursor:pointer;color:inherit}
.search-pop{position:fixed;inset:0;z-index:70;background:rgba(44,35,32,.55);display:grid;place-items:start center;padding:120px var(--gut) 0}
.search-pop[hidden]{display:none}
.search-form{display:flex;gap:8px;background:var(--paper);border-radius:var(--r-pill);padding:6px;width:min(640px,100%);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.search-form input[type=search]{flex:1;min-width:0;border:0;background:transparent;padding:0 18px;font-size:18px;color:var(--espresso)}
.search-form input:focus{outline:none}
.search-form:focus-within{outline:2.5px solid var(--denim)}

/* hero */
.hero{position:relative;background:var(--espresso)}
.hero-panel{position:relative;overflow:hidden;min-height:clamp(560px,80vh,780px);display:flex;align-items:flex-end;padding:150px 0 clamp(20px,4vw,48px)}
.hero-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:140px;background:linear-gradient(rgba(44,35,32,.62),rgba(44,35,32,0));z-index:1;pointer-events:none}
.stripes{position:absolute;inset:0;display:flex}
.stripes i{flex:1;animation:breathe 9s ease-in-out infinite alternate}
.stripes i:nth-child(1){background:var(--denim);animation-duration:11s}
.stripes i:nth-child(2){background:var(--sky);animation-duration:8s;animation-delay:-3s}
.stripes i:nth-child(3){background:var(--mustard);animation-duration:10s;animation-delay:-5s}
.stripes i:nth-child(4){background:var(--rose);animation-duration:9s;animation-delay:-2s}
.stripes i:nth-child(5){background:var(--sage);animation-duration:12s;animation-delay:-6s}
.stripes i:nth-child(6){background:var(--mustard);animation-duration:9.5s;animation-delay:-1s}
.stripes i:nth-child(7){background:var(--denim);animation-duration:10.5s;animation-delay:-4s}
@keyframes breathe{from{flex-grow:.6}to{flex-grow:1.6}}
.hero-card{position:relative;z-index:2;margin-left:var(--gut);margin-right:var(--gut);max-width:640px;background:var(--cream);color:var(--espresso);border-radius:var(--r-card);padding:clamp(22px,3vw,40px);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.hero-card h1{font-size:clamp(40px,5.6vw,78px);letter-spacing:-.02em;line-height:.98}
.hero-card h1 em{font-style:normal;color:var(--denim)}
.hero-card p{margin-top:14px;font-size:clamp(16px,1.4vw,19px);color:var(--muted);max-width:44ch}
.hero-card .ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}

/* marquee */
.marquee{background:var(--espresso);color:var(--cream);overflow:hidden;white-space:nowrap;padding:clamp(10px,1.4vw,18px) 0}
.marquee .track{display:inline-flex;animation:mq 38s linear infinite;will-change:transform}
.marquee.alt{background:var(--mustard);color:var(--espresso)}
.marquee.alt .track{animation-direction:reverse;animation-duration:44s}
.marquee span{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,4.6vw,66px);padding-right:.5em;display:inline-flex;align-items:center;gap:.5em}
.marquee i{display:inline-block;width:.42em;height:.42em;border-radius:50%;background:var(--mustard)}
.marquee.alt i{background:var(--espresso)}
.marquee i.sq{border-radius:3px;background:var(--rose)}
.marquee i.tr{border-radius:0;background:none!important;width:0;height:0;border-left:.24em solid transparent;border-right:.24em solid transparent;border-bottom:.42em solid var(--sky)}
@keyframes mq{to{transform:translateX(-50%)}}
.marquee:hover .track{animation-play-state:paused}

/* sections */
.sec{padding-block:clamp(64px,8vw,120px)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,3vw,36px)}
.sec-head h1,.sec-head h2{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.02em}
.sec-head p,.sec-head .archive-description{max-width:46ch;color:var(--muted)}

/* grid + filters */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.fchip{height:42px;padding:0 20px;border-radius:var(--r-pill);border:1.5px solid var(--line);background:transparent;cursor:pointer;font-family:var(--display);font-weight:500;font-size:15.5px;transition:background .35s var(--ease),border-color .35s,color .35s;text-decoration:none;display:inline-flex;align-items:center}
.fchip:hover{border-color:var(--espresso)}
.fchip[aria-pressed="true"],.fchip.is-current{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.pcard{display:flex;flex-direction:column;gap:12px;position:relative}
.pcard.gone{display:none}
.pcard .img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-tile);overflow:hidden;background:var(--sky)}
.pcard .img img,.pcard .img .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--spring)}
.pcard:hover .img img,.pcard:hover .img .ph{transform:scale(1.05)}
.pcard .badge{position:absolute;top:14px;left:14px;display:flex;gap:6px;z-index:1}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);font-family:var(--display);font-weight:500;font-size:13px;background:var(--paper);color:var(--espresso)}
.chip.c{background:var(--rose)}
.chip.q{background:var(--sky)}
.pcard h2,.pcard h3{font-size:clamp(21px,1.9vw,27px);letter-spacing:-.01em}
.pcard h2 a,.pcard h3 a{text-decoration:none}
.pcard h2 a::after,.pcard h3 a::after{content:"";position:absolute;inset:0}
.pcard .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:15px}
.pcard .meta .pill{position:relative;z-index:1}

/* placeholder art when a post has no featured image */
.ph{display:flex}
.ph i{flex:1}
.ph-0 i:nth-child(odd){background:var(--sky)} .ph-0 i:nth-child(even){background:var(--denim)}
.ph-1 i:nth-child(odd){background:var(--mustard)} .ph-1 i:nth-child(even){background:var(--paper)}
.ph-2 i:nth-child(odd){background:var(--sage)} .ph-2 i:nth-child(even){background:var(--rose)}
.ph-3 i:nth-child(odd){background:var(--rose)} .ph-3 i:nth-child(even){background:var(--paper)}
.ph-4 i:nth-child(odd){background:var(--denim)} .ph-4 i:nth-child(even){background:var(--mustard)}

/* beliefs */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tcard{border-radius:var(--r-card);padding:clamp(22px,2.4vw,34px);min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.tcard .n{font-family:var(--display);font-size:18px;font-weight:500}
.tcard h3{font-size:clamp(30px,3vw,44px);letter-spacing:-.015em}
.tcard p{font-size:16px;opacity:.85;max-width:32ch;margin-top:10px}
.t1{background:var(--mustard)} .t2{background:var(--sky)} .t3{background:var(--espresso);color:var(--cream)}

/* start here */
.path{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(16px,1.8vw,22px);display:grid;gap:12px;align-content:start;transition:transform .6s var(--spring),box-shadow .4s}
.step-card:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(44,35,32,.5)}
.step-card .thumb{aspect-ratio:16/10;border-radius:18px;overflow:hidden;position:relative}
.step-card .thumb img,.step-card .thumb .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.step-card .n{font-family:var(--display);font-weight:500;font-size:15px;color:var(--denim)}
.step-card h3{font-size:25px}
.step-card h3 a{text-decoration:none}
.step-card h3 a::after{content:"";position:absolute;inset:0}
.step-card p{color:var(--muted);font-size:16px}

/* feature */
.feature{background:var(--denim);color:var(--cream);border-radius:var(--r-card);padding:clamp(20px,3vw,44px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.feature .art{border-radius:var(--r-tile);overflow:hidden;min-height:360px;position:relative;background:var(--sky)}
.feature .art img,.feature .art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.02em;margin-top:10px}
.feature p{opacity:.88;margin-top:16px;max-width:46ch}
.feature .eyebrow{color:var(--sky)}
.feature dl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0}
.feature dt{font-size:13px;opacity:.7}
.feature dd{margin:4px 0 0;font-family:var(--display);font-size:22px;font-weight:500}
.feature .col{display:flex;flex-direction:column;justify-content:space-between}

/* footer */
.site-footer{background:var(--espresso);color:var(--cream);margin-top:clamp(64px,8vw,120px);padding:clamp(40px,5vw,72px) var(--gut) 28px}
.site-footer .big{font-family:var(--display);font-weight:700;font-size:clamp(64px,14vw,220px);line-height:.85;letter-spacing:-.03em}
.site-footer .big small{display:block;font-size:.22em;letter-spacing:.12em;text-transform:uppercase;font-weight:500;line-height:1;margin-top:.3em;opacity:.7}
.fgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid rgba(250,245,236,.15);padding-top:24px;margin-top:36px}
.fgrid .widget-title,.fgrid h5,.fgrid h2,.fgrid h3{margin:0 0 8px;font-family:var(--display);font-weight:500;font-size:14px;opacity:.6}
.fgrid ul{list-style:none;margin:0;padding:0}
.fgrid a{display:block;text-decoration:none;padding:3px 0}
.fgrid a:hover{color:var(--mustard)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;font-size:13.5px;opacity:.6}
.legal ul{list-style:none;margin:0;padding:0;display:flex;gap:14px}
.legal a{text-decoration:none}

/* ---------- single pattern ---------- */
.pattern-top{position:sticky;top:76px;box-shadow:0 -24px 0 var(--cream);z-index:5;background:var(--cream);padding-block:10px;display:flex;align-items:center;gap:12px;font-size:14.5px}
.admin-bar .pattern-top{top:105px}
.pattern-top[hidden]{display:none}
.bar{flex:1;max-width:420px;height:8px;border-radius:8px;background:rgba(44,35,32,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--denim);border-radius:8px;transition:width .6s var(--spring)}
.p-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:18px;margin-top:8px}
.p-hero .ttl{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,2.6vw,38px);display:flex;flex-direction:column;justify-content:space-between;gap:26px}
.p-hero h1{font-size:clamp(40px,5.2vw,80px);letter-spacing:-.02em;margin-top:10px}
.p-hero .intro{margin-top:14px;color:var(--muted);font-size:18px;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{border:1.5px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:14px;font-family:var(--display);font-weight:500}
.p-hero .art{border-radius:var(--r-card);overflow:hidden;min-height:340px;position:relative;background:var(--sky)}
.p-hero .art img,.p-hero .art .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.p-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(18px,3vw,40px);margin-top:clamp(24px,3vw,40px);align-items:start}
.p-aside{display:grid;gap:14px;position:sticky;top:130px;min-width:0}
.widget{min-width:0;overflow-wrap:anywhere;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-tile);padding:20px}
.p-aside .widget h2,.p-aside .widget h3{font-size:18px;margin-bottom:10px}
.p-aside .widget ul{list-style:none;margin:0;padding:0}
.p-aside .widget li{padding:6px 0;border-top:1px solid var(--line)}
.p-aside .widget a{text-decoration:none}
.p-aside .wp-block-search__inside-wrapper{display:flex;gap:6px}
.p-aside .wp-block-search__input{min-width:0;flex:1;border:1.5px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--cream)}
.p-aside .wp-block-search__button{border:0;border-radius:999px;background:var(--espresso);color:var(--cream);padding:0 16px;margin:0}
.widget-title{font-size:15px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;font-weight:500}
.ad-widget{background:none;border:0;padding:0;text-align:center}

/* article typography */
.entry-content{max-width:72ch;font-size:18px;line-height:1.7}
.entry-content>*+*{margin-top:1.1em}
.entry-content h2{font-size:clamp(28px,2.6vw,38px);margin-top:1.6em}
.entry-content h3{font-size:clamp(22px,2vw,28px);margin-top:1.4em}
.entry-content a{color:var(--denim);text-underline-offset:3px}
.entry-content img{border-radius:var(--r-tile)}
.entry-content figure{margin-inline:0}
.entry-content figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li+li{margin-top:.35em}
.entry-content blockquote{margin-inline:0;border-left:4px solid var(--mustard);padding:6px 0 6px 20px;font-family:var(--display);font-size:22px}
.entry-content table{width:100%;border-collapse:collapse;font-size:16px}
.entry-content td,.entry-content th{border-top:1px solid var(--line);padding:9px 10px 9px 0;text-align:left;vertical-align:top}
.entry-content .wp-block-table{overflow-x:auto}
.entry-content .wp-block-table td:first-child{font-weight:600;white-space:nowrap}
.entry-content .wp-block-table table,.entry-content .wp-block-table td,.entry-content .wp-block-table th{border:0}
.entry-content .wp-block-table td,.entry-content .wp-block-table th{border-top:1px solid var(--line)}
.entry-content .wp-block-table{margin-inline:0}

/* block styles from the pattern layout */
.entry-content .bcp-box,.entry-content .is-style-bcp-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-tile);padding:22px 24px}
.entry-content .is-style-bcp-box>*:first-child,.entry-content .is-style-bcp-box .wp-block-group__inner-container>*:first-child,.entry-content .is-style-bcp-tip>*:first-child{margin-top:0}
.entry-content .is-style-bcp-box ul{list-style:none;padding:0}
.entry-content .is-style-bcp-box ul li{border-top:1px solid var(--line);padding:8px 0;margin:0}
.entry-content .is-style-bcp-tip{background:rgba(230,174,69,.18);border-radius:var(--r-tile);padding:18px 22px}

/* steps checklist: ordered list with the "Steps checklist" style */
.entry-content ol.is-style-bcp-steps{list-style:none;padding:0;display:grid;gap:10px;counter-reset:none}
.entry-content ol.is-style-bcp-steps>li{margin:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-tile);padding:18px 20px;cursor:pointer;transition:background .4s,border-color .4s}
.step:hover{border-color:rgba(44,35,32,.4)}
.step input{appearance:none;-webkit-appearance:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--espresso);margin:3px 0 0;display:grid;place-items:center;cursor:pointer;transition:background .3s;flex:none}
.step input::after{content:"";width:12px;height:7px;border-left:2.5px solid var(--espresso);border-bottom:2.5px solid var(--espresso);transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .45s var(--spring)}
.step input:checked{background:var(--mustard)}
.step input:checked::after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.step.done{background:rgba(169,191,160,.22)}
.step.done .txt{opacity:.6}
.step .txt{font-size:17px;line-height:1.6}
.step .txt strong:first-child{display:block;font-family:var(--display);font-size:21px;font-weight:600;margin-bottom:2px}
/* without JS the list still reads as numbered steps */
.no-js .entry-content ol.is-style-bcp-steps{list-style:decimal;padding-left:1.3em}

.after-steps{margin-top:26px}
.share{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.related{margin-top:clamp(56px,7vw,100px)}

/* pages, archives, comments */
.page-head{padding-top:clamp(20px,3vw,40px)}
.page-head h1{font-size:clamp(40px,5.4vw,80px);letter-spacing:-.02em}
.pagination,.nav-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:40px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border-radius:var(--r-pill);border:1.5px solid var(--line);text-decoration:none;font-family:var(--display);font-weight:500}
.page-numbers.current{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.empty{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(24px,4vw,56px);display:grid;gap:16px;justify-items:start}
.comments-area{max-width:72ch;margin-top:clamp(48px,6vw,80px)}
.comments-area h2{font-size:32px;margin-bottom:18px}
.comment-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.comment-list .children{list-style:none;padding-left:24px;margin-top:12px;display:grid;gap:12px}
.comment-body{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-tile);padding:18px 20px}
.comment-meta{font-size:14px;color:var(--muted);margin-bottom:6px}
.comment-meta .avatar{display:none}
.comment-author .fn{font-family:var(--display);font-weight:600;font-style:normal;color:var(--espresso);font-size:17px}
.comment-respond{margin-top:24px}
.comment-form{display:grid;gap:12px}
.comment-form label{display:block;font-size:14px;margin-bottom:4px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:1.5px solid var(--line);background:var(--paper);border-radius:16px;padding:12px 14px}
.comment-form .submit{height:52px;padding:0 26px;border-radius:var(--r-pill);border:0;background:var(--espresso);color:var(--cream);font-family:var(--display);font-weight:500;font-size:17px;cursor:pointer}

/* responsive */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .three,.path{grid-template-columns:1fr}
  .tcard{min-height:0}
  .feature,.p-hero,.p-body{grid-template-columns:1fr}
  .p-aside{position:static}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .site-header{grid-template-columns:auto 1fr}
  .main-nav{display:none}
  .logo{justify-self:start}
  .grid{gap:12px}
  .pcard h2,.pcard h3{font-size:19px}
  .pcard .meta{flex-direction:column;align-items:flex-start}
  .hero-panel{min-height:0;padding:230px 0 20px}
  .hero-card{max-width:none}
  .brand b{font-size:22px}
  .hdr-right .hide-s{display:none}
  .pattern-top{top:69px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}