/* ==========================================================================
   OROVELL blog sheet. Loads after css/orovell.css and css/chrome.css on
   blog.html and blog/<slug>.html (generated by tools/build-blog.py); every
   colour is a brand token or an alpha of one. Surfaces alternate down each
   page: hero (cover on obsidian) > posts or article (linen) > more insights
   (obsidian) > the close (wine) > footer (film under an obsidian scrim).
   Corners 5px, hairline frames, no shadows, no hover zoom, no rules under
   headings (client rulings 2026-09-16).
   ========================================================================== */

/* ------------------------------------------------ section rhythm, the close */
.sec{padding:clamp(80px,11vh,130px) var(--gut)}
.cta-wine{background:var(--wine);color:var(--linen)}
.cta-wine h2{color:var(--linen);max-width:22ch;margin-inline:auto}
.cta-wine .eyebrow{color:rgba(245,245,244,.55)}
.cta-wine .frag{color:var(--linen-65)}

/* ------------------------------------------------ heroes */
.blog-hero{min-height:62svh}
.post-hero{min-height:70svh}
.post-hero .lbl{display:block}
/* a post title runs long: one rank under the site h1 so three lines is the ceiling */
.post-hero h1.display{font-size:clamp(22px,2.9vw,42px);max-width:28ch;margin-top:12px}

/* ------------------------------------------------ the category filter
   Plain label anchors (?cat=): the active one carries the gold underline the
   nav uses. No chips, no pills. */
.blog-filter{display:flex;flex-wrap:wrap;gap:4px clamp(18px,2.2vw,30px);margin-top:22px}
.blog-filter a{position:relative;padding:6px 0;color:rgba(5,5,5,.45);transition:color .2s}
.blog-filter a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ez)}
.blog-filter a:hover,.blog-filter a:focus-visible,.blog-filter a.active{color:var(--obsidian)}
.blog-filter a:hover::after,.blog-filter a:focus-visible::after,.blog-filter a.active::after{transform:scaleX(1)}
.blog-empty{margin-top:clamp(36px,5vh,60px)}
.blog-empty a{text-decoration:underline;text-underline-offset:3px}

/* ------------------------------------------------ the cards
   3 / 2 / 1 across. The cover in a hairline frame at 5px, the category
   label, the title, the date. Hover: the frame warms, the title underlines
   (a background hairline so it follows every wrapped line). No zoom, no
   shadow, no lift. */
.post-grid{--gap:clamp(16px,2.2vw,32px);margin-top:clamp(36px,5vh,60px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--gap) * 1.5) var(--gap)}
.post-card{display:block;color:inherit}
.post-card[hidden]{display:none}
.post-card figure{aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);margin-bottom:16px;
  outline:1px solid var(--hair);outline-offset:-1px;background:var(--linen-06);transition:outline-color .4s}
.linen .post-card figure{outline-color:var(--hair-d);background:rgba(75,25,40,.06)}
.post-card img{width:100%;height:100%;object-fit:cover}
.post-card .post-cat{display:block;margin-bottom:6px}
.post-card h3{display:inline;font-size:clamp(15px,1.2vw,18px);line-height:1.3;
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;padding-bottom:2px;transition:background-size .3s var(--ez);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.post-card .post-date{display:block;margin-top:10px}
.post-card:hover figure,.post-card:focus-visible figure{outline-color:var(--gold-60)}
.linen .post-card:hover figure,.linen .post-card:focus-visible figure{outline-color:var(--wine-70)}
.post-card:hover h3,.post-card:focus-visible h3{background-size:100% 1px}
.post-card:focus-visible{outline:1px solid var(--gold);outline-offset:6px;border-radius:var(--r)}

/* ------------------------------------------------ the article
   68ch on linen, the body at 15.5 to 17px / 1.75. Headings are display type
   one and two ranks under the section head; strong is 500, never bolder;
   links underline in wine. Images take the full measure in a hairline frame. */
.post-sec{padding-top:clamp(56px,8vh,90px)}
.post-body{max-width:68ch;margin:0 auto;font-size:clamp(15.5px,1.1vw,17px);line-height:1.75;color:rgba(5,5,5,.78)}
.post-body > * + *{margin-top:1.1em}
.post-body h2,.post-body h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:0;
  color:var(--obsidian);line-height:1.2}
.post-body h2{font-size:clamp(18px,1.7vw,26px);margin-top:2.2em}
.post-body h3{font-size:clamp(15px,1.25vw,19px);margin-top:1.8em}
.post-body h2 + *,.post-body h3 + *{margin-top:.8em}
.post-body strong{font-weight:500;color:var(--obsidian)}
.post-body em{font-style:italic}
.post-body a{color:var(--wine);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color .2s}
.post-body a:hover,.post-body a:focus-visible{color:var(--obsidian)}
/* buttons inside an article keep the chrome's colours (the 404 and What-is-Orovell doors sit in a .post-body) */
.post-body a.btn{text-decoration:none}
.post-body a.btn-gold,.post-body a.btn-wine{color:var(--gold)}
.post-body a.btn-gold:hover,.post-body a.btn-gold:focus-visible,.post-body a.btn-wine:hover,.post-body a.btn-wine:focus-visible{color:var(--obsidian)}
.post-body a.btn-line{color:inherit}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li + li{margin-top:.5em}
.post-body li > p + p{margin-top:.6em}
.post-body blockquote{border-left:1px solid var(--hair-d);padding-left:1.4em;color:var(--obsidian)}
.post-body figure{margin-top:2em;margin-bottom:2em}
.post-body img{width:100%;height:auto;border-radius:var(--r);outline:1px solid var(--hair-d);outline-offset:-1px;
  background:rgba(75,25,40,.06)}
/* a portrait picture is held to the viewport height and centred, not
   stretched to the full measure */
.post-body img.tall{width:auto;max-width:100%;max-height:72svh;margin-inline:auto;display:block}
.post-body figcaption{margin-top:10px}
.post-body table{width:100%;border-collapse:collapse;font-size:.92em;display:block;overflow-x:auto}
.post-body th,.post-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--hair-d);vertical-align:top;min-width:120px}
.post-body th{font-weight:500;color:var(--obsidian)}

/* the closing call-to-action (tools/build-blog.py folds the CMS's trailing
   heading into it): the sentence at body size, one hairline button, a
   divider above it. Never display type. */
.post-cta{margin-top:clamp(40px,6vh,64px);padding-top:clamp(24px,3vh,36px);border-top:1px solid var(--hair-d)}
.post-cta .frag{font-size:inherit;line-height:inherit;max-width:56ch}
.post-cta .frag + .frag{margin-top:.8em}
.post-cta .btn{margin-top:22px}

/* previous and next, in listing order, with the way back to the list */
.post-nav{max-width:68ch;margin:clamp(44px,7vh,80px) auto 0;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(18px,3vw,40px);align-items:start;border-top:1px solid var(--hair-d);padding-top:clamp(22px,3vh,32px)}
.pn{display:grid;gap:8px;color:var(--obsidian);align-content:start}
.pn .display{font-size:clamp(14px,1.1vw,17px);line-height:1.3;justify-self:start;
  background-image:linear-gradient(var(--gold),var(--gold));background-repeat:no-repeat;
  background-size:0 1px;background-position:0 100%;padding-bottom:2px;transition:background-size .3s var(--ez);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.pn.next{text-align:right}
.pn.next .display{justify-self:end}
.pn:hover .display,.pn:focus-visible .display{background-size:100% 1px}
.pn-all{grid-column:1 / -1;justify-self:center;margin-top:8px}

/* more insights on the dark: the cards keep their linen text */
.more-sec{background:linear-gradient(rgba(75,25,40,.05),rgba(75,25,40,.02)) var(--obsidian)}

/* ------------------------------------------------ responsive */
@media (max-width:1023px){
  .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:minmax(0,1fr)}
  .post-nav{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .pn.next .display{justify-self:start}
  .pn-all{justify-self:start}
}