:root { --primary:#c90606; --ink:#3e3131; --pink:#ff8c8c; --panel:#ebeff2; --search:#d6efff; }
* { box-sizing:border-box; }
html { background:#fff; }
body { margin:0; min-width:1440px; overflow-x:hidden; color:var(--ink); font-family:Inter,Arial,sans-serif; }
button,input { font:inherit; }
.blog-index { width:1440px; margin:0 auto; overflow:visible; background:#fff; }
.blog-index__masthead { position:relative; height:393px; }
.blog-index__masthead::before { content:""; position:absolute; top:0; left:50%; z-index:0; width:100vw; height:100%; transform:translateX(-50%); border-bottom:1px solid #ffddd5; background-color:#fffdfb; background-image:linear-gradient(#ffddd5 1px,transparent 1px),linear-gradient(90deg,#ffddd5 1px,transparent 1px); background-position:-1px -1px; background-size:69px 69px; }
.blog-index__masthead > * { z-index:1; }
.blog-index__masthead .top-nav { z-index:100; }
.blog-index__heading { position:absolute; top:199px; left:0; width:100%; text-align:center; }
.blog-index__heading h1 { margin:0; color:var(--primary); font-size:50.7px; font-weight:800; line-height:1.15; }
.blog-index__heading h2 { margin:27px 0 0; color:var(--ink); font-size:45.1px; font-weight:600; line-height:1.15; }
.blog-index__content { position:relative; width:1170px; margin:0 auto; padding:47px 0 140px; }
.blog-index__intro { width:1066px; margin:0 0 40px 67px; font-size:25px; line-height:1.35; }
.blog-controls { margin-left:67px; }
.blog-controls h2 { margin:0 0 30px; font-size:25px; font-weight:600; line-height:1.25; }
.category-list { display:grid; width:873px; grid-template-columns:182px 182px 182px 189px; gap:40px 47px; }
.category-button { height:46px; border:0; border-radius:10px; color:var(--ink); background:var(--pink); font-size:25px; font-weight:500; cursor:pointer; transition:background-color .18s ease,color .18s ease,transform .18s ease; }
.category-button { box-shadow:0 2px 6px rgba(62,49,49,.12); }
.category-button:first-child { text-transform:none; }
.category-button--wide { width:247px; }
.category-button--wide + .category-button--wide { margin-left:65px; }
.category-button:hover,.category-button:focus-visible { transform:translateY(-2px); }
.category-button.is-active { color:#fff; background:var(--primary); }
.blog-search { position:absolute; top:398px; right:16px; display:flex; width:283px; height:40px; }
.blog-search input { min-width:0; flex:0 0 200px; width:200px; padding:5px 14px; border:1px solid #d3d3d3; border-radius:5px 0 0 5px; background:var(--panel); color:var(--text-1); font:inherit; }
.blog-search button { display:grid; place-items:center; flex:0 0 84px; border:1px solid #d3d3d3; border-radius:0 5px 5px 0; margin-left:-1px; background:var(--bg-color); cursor:pointer; }
.blog-search button img { width:28px; height:28px; }
.blog-search :focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.blog-search input:focus { position:relative; z-index:1; outline:2px solid var(--primary); outline-offset:-2px; }
.post-grid { display:grid; grid-template-columns:502px 502px; gap:146px; margin-top:168px; }
.post-card { display:flex; height:526px; overflow:hidden; border-radius:15px; background:var(--panel); flex-direction:column; }
.post-card { box-shadow:0 4px 14px rgba(62,49,49,.15); }
.post-card[hidden] { display:none; }
.post-card__link { display:flex; height:100%; color:inherit; text-decoration:none; flex-direction:column; }
.post-card__image { display:block; width:502px; height:205px; border:0; object-fit:cover; object-position:center top; background:#d9d9d9; flex:0 0 205px; order:1; }
.post-card__body { height:321px; padding:25px 13px 16px; background:var(--panel); flex:0 0 321px; order:2; }
.post-card__body h2 { min-height:76px; margin:0 8px 16px; font-size:25px; font-weight:600; line-height:1.16; }
.post-card__meta { display:flex; align-items:center; justify-content:space-between; margin:0 3px 26px 8px; font-size:25px; line-height:1.2; }
.post-card__meta strong { color:var(--primary); font-weight:500; }
.post-card__body p { margin:0; font-size:22.22px; line-height:1.35; }
.empty-state { margin-top:90px; text-align:center; font-size:25px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.blog-index > .footer { isolation:isolate; background:transparent; }
.blog-index > .footer::before { content:""; position:absolute; inset-block:0; left:50%; z-index:-1; width:100vw; transform:translateX(-50%); background-color:#fffdfb; background-image:linear-gradient(#ffddd5 1px,transparent 1px),linear-gradient(90deg,#ffddd5 1px,transparent 1px); background-position:16px 1px; background-size:83px 83px; }
.blog-index > .footer .copyright { left:50%; width:100vw; transform:translateX(-50%); }

@media (min-width:768px) {
  .category-button,
  .post-card__body h2,
  .post-card__meta,
  .post-card__body p { font-size:22.22px; }
}

@media (max-width:767px) {
  body { min-width:0; overflow-x:hidden; }
  .blog-index { width:100%; overflow:hidden; }
  .blog-index__masthead { height:335px; }
  .blog-index__masthead::before { background-position:-1px -1px; background-size:38px 38px; }
  .blog-index__heading { top:100px; text-align:center; }
  .blog-index__masthead .top-nav { background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
  .blog-index__masthead .nav-toggle { z-index:101; }
  .blog-index__masthead .blog-index__heading { z-index:1; }
  .blog-index__heading h1 { font-size:47.78px; line-height:1.15; }
  .blog-index__heading h2 { width:343px; margin:17px auto 0; color:#000; font-size:39.81px; font-weight:600; line-height:1.3; text-align:left; }
  .blog-index__content { width:100%; margin:0; padding:48px 0 120px; }
  .blog-search { position:static; display:flex; width:min(315px, calc(100% - 32px)); margin:49px auto 0; }
  .blog-search input { flex:1 1 0; width:100%; }
  .blog-search button { flex-basis:64px; }
  .blog-index__intro { display:block; width:315px; margin:0 auto; color:#000; font-size:16px; line-height:1.3; }
  .blog-controls { width:329px; margin:38px auto 0; }
  .blog-controls h2 { margin:0 0 24px 6px; color:#000; font-size:16px; line-height:21px; }
  .category-list { display:grid; width:100%; grid-template-columns:115px 1fr; gap:26px 19px; }
  .category-button { width:115px; height:27px; padding:0 7px; border-radius:10px; color:#000; font-size:16px; font-weight:400; line-height:27px; white-space:nowrap; }
  .category-button:first-child { text-transform:none; }
  .category-button:nth-child(4) { width:131px; }
  .category-button:nth-child(5) { width:157px; }
  .category-button:nth-child(6) { width:125px; margin-left:36px; }
  .category-button--wide + .category-button--wide { margin-left:36px; }
  .category-button:hover,.category-button:focus-visible { transform:none; }
  .post-grid { display:block; width:315px; margin:24px auto 0; }
  .post-card { width:315px; height:353px; border-radius:10px; }
  .post-card + .post-card { margin-top:30px; }
  .post-card__link { width:100%; }
  .post-card__image { width:315px; height:137px; flex-basis:137px; object-position:center top; }
  .post-card__body { width:315px; height:216px; padding:16px; flex-basis:216px; }
  .post-card__body h2 { min-height:0; margin:0 0 12px; color:#000; font-size:16px; font-weight:500; line-height:1.2; }
  .post-card__meta { margin:0 0 8px; color:#000; font-size:16px; line-height:1.2; }
  .post-card__body p { color:#000; font-size:16px; line-height:1.2; }
  .empty-state { margin-top:80px; font-size:16px; }
  .blog-index > .footer::before { background-position:-1px -1px; background-size:42px 42px; }
}