/* Mobile-first. Base rules target small screens; min-width queries add layout for larger viewports. */

.blog-header{max-width:1240px;margin:auto;padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.blog-header .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;min-width:0}
.blog-header .brand-mark{width:44px;height:44px;border-radius:50%;object-fit:contain;flex-shrink:0}
.blog-header .brand-text{display:inline-grid;justify-items:center;min-width:0;line-height:1.15}
.blog-header .brand-name-img{height:28px;width:auto;justify-self:start}
.blog-header .ornament-rule-img{width:100%;height:auto;margin:.2rem 0}
.blog-header .brand-tagline-img{height:11px;width:auto}
@media(max-width:379px){.blog-header .brand-tagline-img,.blog-header .ornament-rule-img{display:none}}
.blog-header nav{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.blog-header nav a{text-decoration:none;font-size:.9rem}
.blog-header nav a.button-small{background:var(--clay);color:#fff8ed;border-radius:999px;padding:.55rem .95rem;font-weight:600}

.blog-shell{max-width:900px;margin:0 auto;padding:0 1.25rem 4rem}
.blog-shell.wide{max-width:1180px}

.blog-eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:600;color:var(--clay);margin:0 0 .6rem}
.blog-hero h1{font-family:var(--serif);font-weight:500;color:var(--moss);font-size:clamp(2.1rem,7vw,3rem);line-height:1.08;letter-spacing:-.03em;margin:.1rem 0 1rem}
.blog-hero p{font-size:1.05rem;max-width:640px}

.category-pills{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.5rem 0 2.5rem}
.category-pills a{text-decoration:none;font-size:.82rem;font-weight:600;color:var(--moss);background:var(--parchment);border-radius:999px;padding:.5rem .95rem}
.category-pills a[aria-current="page"]{background:var(--moss);color:var(--parchment)}

.post-list{display:grid;gap:1.5rem;grid-template-columns:1fr;margin:0;padding:0;list-style:none}
.post-card{background:var(--parchment);border-radius:1rem;overflow:hidden;box-shadow:0 12px 30px rgba(49,74,58,.08)}
.post-card a{display:block;text-decoration:none;color:inherit}
.post-card img{aspect-ratio:16/9;object-fit:cover}
.post-card .post-card-body{padding:1.4rem}
.post-card time{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--clay);font-weight:600}
.post-card h2,.post-card h3{font:500 1.4rem var(--serif);color:var(--moss);margin:.5rem 0 .5rem;letter-spacing:-.01em}
.post-card p.excerpt{font-size:.96rem;margin:0}

article.post{padding-top:1.5rem}
.post-meta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--clay);font-weight:600;margin-bottom:1rem}
.post-meta a{color:var(--clay);text-decoration:underline}
article.post h1{font-family:var(--serif);font-weight:500;color:var(--moss);font-size:clamp(2rem,7vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin:.1rem 0 1.2rem}
.post-hero{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:1rem;margin-bottom:1.5rem}
article.post .post-lede{font-size:1.1rem;max-width:640px;margin-bottom:1.5rem}
article.post h2{font:500 1.7rem var(--serif);color:var(--moss);margin:2.2rem 0 .8rem}
article.post h3{font:600 1.2rem var(--sans);color:var(--moss);margin:1.6rem 0 .6rem}
article.post p{font-size:1.02rem;max-width:680px}
article.post ul,article.post ol{max-width:680px;padding-left:1.3rem}
article.post li{margin-bottom:.5rem}
article.post figure{margin:2rem 0}
article.post .post-attribution{font-size:.92rem;color:var(--clay);border-top:1px solid #e7ddd0;padding-top:1.2rem;margin-top:2rem}
article.post figure img{border-radius:1rem}
article.post figcaption{font-size:.85rem;color:#5a6a5f;margin-top:.5rem}

.shop-callout{background:var(--moss);color:var(--parchment);border-radius:1.2rem;padding:1.8rem;margin:2.5rem 0}
.shop-callout p.blog-eyebrow{color:var(--brass)}
.shop-callout h3{font:500 1.4rem var(--serif);margin:.2rem 0 .8rem}
.shop-callout .button{display:inline-flex;align-items:center;justify-content:center;background:var(--parchment);color:var(--moss);border-radius:999px;padding:.75rem 1.2rem;text-decoration:none;font-weight:600;margin-top:.4rem}

.product-strip{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 2rem}
.product-strip a{display:flex;gap:1rem;align-items:center;background:var(--parchment);border-radius:.9rem;padding:.9rem;text-decoration:none;color:inherit}
.product-strip img{width:72px;height:72px;object-fit:cover;border-radius:.6rem;flex-shrink:0}
.product-strip .product-strip-title{font:600 .98rem var(--sans);color:var(--moss);margin:0 0 .2rem}
.product-strip .product-strip-cta{font-size:.82rem;font-weight:600;color:var(--clay)}

.product-card{display:flex;gap:1rem;align-items:center;background:var(--parchment);border-radius:1rem;padding:1.1rem;margin:1.8rem 0;box-shadow:0 8px 20px rgba(49,74,58,.06)}
.product-card img{width:100px;height:100px;object-fit:cover;border-radius:.7rem;flex-shrink:0}
.product-card-body{flex:1;min-width:0}
.product-card-name{font:600 1.02rem var(--sans);color:var(--moss);margin:0 0 .25rem}
.product-card-price{font:600 .95rem var(--sans);color:var(--clay);margin:0 0 .6rem}
.product-card-button{display:inline-flex;align-items:center;justify-content:center;background:var(--moss);color:var(--parchment);border-radius:999px;padding:.6rem 1.1rem;text-decoration:none;font-weight:600;font-size:.88rem}

.related-posts{margin-top:3rem;padding-top:2rem;border-top:1px solid #d9c8aa}
.related-posts h2{font:500 1.5rem var(--serif);color:var(--moss);margin:0 0 1rem}

.blog-footer-nav{max-width:900px;margin:0 auto;padding:0 1.25rem 2rem;display:flex;gap:1.4rem;flex-wrap:wrap}
.blog-footer-nav a{text-decoration:none;font-weight:600;color:var(--clay)}

@media(min-width:780px){
  .blog-header{padding:1.4rem 2rem}
  .blog-header .brand-mark{width:60px;height:60px}
  .blog-header .brand-name-img{height:40px}
  .blog-header .ornament-rule-img{height:8px;margin:.3rem 0 .25rem}
  .blog-header .brand-tagline-img{height:14px}
  .blog-shell{padding:0 2rem 5rem}
  .post-list{grid-template-columns:repeat(3,1fr)}
  .post-list.single-column{grid-template-columns:1fr}
  .product-strip{grid-template-columns:repeat(3,1fr)}
  .product-strip a{flex-direction:column;text-align:left}
  .product-strip img{width:100%;height:150px}
}

@media(prefers-reduced-motion:reduce){.post-card img{transition:none}}

.post-table-wrap{max-width:680px;overflow-x:auto;margin:1.2rem 0}
.post-table{width:100%;border-collapse:collapse;font-size:.98rem}
.post-table th,.post-table td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid #e7ddd0;vertical-align:top}
.post-table th{font-weight:600;color:var(--moss);background:var(--parchment)}

/* Gift guide product cards (GRI-370): larger image, optional "Design art" label */
.product-card-gift{align-items:flex-start}
.product-card-media{flex-shrink:0;width:160px;text-align:center}
.product-card-gift .product-card-media img{width:160px;height:160px;display:block}
.product-card-label{display:block;margin-top:.4rem;font:600 .72rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
@media(max-width:520px){
  .product-card-gift{flex-direction:column}
  .product-card-media{width:100%}
  .product-card-gift .product-card-media img{width:100%;height:auto;aspect-ratio:1/1}
}

/* Owner fix 2026-09-27: gold rule only as wide as the lettering; logo as tall as the name+tagline block */
.brand{align-items:center}
.brand-mark{width:78px;height:78px}
.brand-text{grid-template-columns:minmax(0,max-content)}
.ornament-rule-img{width:0;min-width:100%}
@media(max-width:640px){.brand-mark{width:48px;height:48px}}

/* GRI-1106 fix: on narrow screens the max-content column forced by the gold
   rule and tagline (intrinsic width ~800px) pushed the header past the
   viewport and clipped the tagline. Let the column shrink to the available
   width instead of the images' intrinsic size. */
@media(max-width:779px){
  .brand-text{grid-template-columns:minmax(0,1fr)}
}