/*
Theme Name: Olemina Journal
Theme URI: https://olemina.com/blog/
Author: Olemina
Description: High-fidelity theme matching the Olemina static site — dark museum aesthetic, Cormorant serif, for the headless-style WordPress blog at /blog.
Version: 1.0
*/

/* ── design tokens (match tailwind.config.ts) ───────────────────────────── */
:root{
  --bg:#0A0A0B; --bg-soft:#111114; --bg-card:#16161A;
  --ink:#F5F4F2; --ink-dim:#9A948B; --ink-faint:#6B665E;
  --line:rgba(245,244,242,0.12); --teal:#3DB6A8; --teal-soft:#7FCBC1;
  --serif:"Cormorant Garamond",Georgia,serif;
  --mono:"Space Mono",ui-monospace,monospace;
  --sans:"Inter",system-ui,sans-serif;
  --wide:1320px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-weight:300; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
h1,h2,h3,h4{font-family:var(--serif); font-weight:500; margin:0}
p{margin:0}

.ol-wide{max-width:var(--wide); margin:0 auto; padding-left:24px; padding-right:24px}
.ol-eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.ol-teal{color:var(--teal)}
.logo-light{filter:brightness(0) invert(.96)}

/* ── top nav — pixel-matched to the static site's React nav so the header is
      identical on every page: fixed, transparent at the top, blurs in on scroll ── */
.ol-nav{position:fixed; left:0; right:0; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; background:transparent; border-bottom:1px solid transparent;
  transition:padding .5s ease, background .5s ease, border-color .5s ease, backdrop-filter .5s ease}
.ol-nav.is-scrolled{padding:12px 24px; background:rgba(10,10,11,.8);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom-color:var(--line)}
body.admin-bar .ol-nav{top:32px}                 /* keep clear of the WP admin bar (owner only) */
.ol-nav__logo{display:flex; align-items:center}
.ol-nav__logo img{height:36px; width:auto; opacity:.95; display:block}
.ol-nav__links{display:flex; align-items:center; gap:20px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.18em; text-transform:uppercase}
.ol-nav__links a{color:var(--ink-dim); transition:color .2s}
.ol-nav__links a:hover{color:var(--ink)}
.ol-nav__inq{border:1px solid var(--line); border-radius:999px; padding:8px 16px; color:var(--ink)!important}
.ol-nav__inq:hover{border-color:var(--ink-dim); background:rgba(255,255,255,.08)}
@media(min-width:768px){
  .ol-nav{padding:20px 48px}
  .ol-nav.is-scrolled{padding:12px 48px}
  .ol-nav__logo img{height:44px}
  .ol-nav__links{gap:36px}
}
@media(max-width:767px){ .ol-nav__links a:not(.ol-nav__inq):not([data-ol-cart]){display:none} }

/* ── slide-out cart drawer — matches the static site's React cart drawer ────── */
.ol-cart{position:fixed; inset:0; z-index:100}
.ol-cart[hidden]{display:none}
.ol-cart__overlay{position:absolute; inset:0; background:rgba(0,0,0,.55); opacity:0; transition:opacity .45s ease}
.ol-cart.is-open .ol-cart__overlay{opacity:1}
.ol-cart__panel{position:absolute; right:0; top:0; height:100%; width:min(440px,92vw); display:flex; flex-direction:column;
  background:var(--bg-soft); border-left:1px solid var(--line); transform:translateX(100%);
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ol-cart.is-open .ol-cart__panel{transform:translateX(0)}
.ol-cart__head{display:flex; align-items:center; justify-content:space-between; padding:24px 28px; border-bottom:1px solid var(--line)}
.ol-cart__eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.ol-cart__x{background:none; border:none; color:var(--ink-dim); font-size:20px; line-height:1; cursor:pointer}
.ol-cart__x:hover{color:var(--ink)}
.ol-cart__body{flex:1; overflow-y:auto; padding:24px 28px}
.ol-cart__empty{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; text-align:center}
.ol-cart__empty p{font-family:var(--serif); font-size:22px; color:var(--ink-dim)}
.ol-cart__item{display:flex; gap:16px; margin-bottom:24px; color:inherit}
.ol-cart__thumb{width:80px; height:96px; flex:none; border-radius:4px; background:var(--bg-card) center/cover no-repeat}
.ol-cart__meta{flex:1; display:flex; flex-direction:column}
.ol-cart__name{font-family:var(--serif); font-size:18px; line-height:1.3; color:var(--ink)}
.ol-cart__item:hover .ol-cart__name{color:#fff}
.ol-cart__qty{margin-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.ol-cart__price{font-family:var(--serif); font-size:18px; color:var(--ink); white-space:nowrap}
.ol-cart__foot{border-top:1px solid var(--line); padding:24px 28px}
.ol-cart__subtotal{display:flex; align-items:baseline; justify-content:space-between}
.ol-cart__subtotal span:first-child{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim)}
.ol-cart__subtotal span:last-child{font-family:var(--serif); font-size:24px}
.ol-cart__note{margin:8px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.ol-cart__actions{display:flex; gap:12px; margin-top:16px}
.ol-cart__viewbtn,.ol-cart__checkoutbtn{display:inline-block; text-align:center; border-radius:999px; padding:14px 20px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:all .2s}
.ol-cart__actions .ol-cart__viewbtn,.ol-cart__actions .ol-cart__checkoutbtn{flex:1}
.ol-cart__empty .ol-cart__checkoutbtn{align-self:center}
.ol-cart a.ol-cart__viewbtn{border:1px solid var(--line); color:var(--ink); text-decoration:none}
.ol-cart a.ol-cart__viewbtn:hover{border-color:var(--ink-dim); background:rgba(255,255,255,.08)}
.ol-cart a.ol-cart__checkoutbtn{background:var(--ink); color:var(--bg); text-decoration:none}
.ol-cart a.ol-cart__checkoutbtn:hover{background:#fff; color:var(--bg)}

/* ── blog index ─────────────────────────────────────────────────────────── */
.ol-journal{padding:128px 0 112px}
@media(min-width:768px){ .ol-journal{padding:176px 0 112px} }
.ol-journal__head{max-width:48rem}
.ol-journal__title{font-size:clamp(34px,5.5vw,68px); line-height:1.04; margin-top:16px}
.ol-journal__intro{margin-top:24px; max-width:42rem; font-size:18px; line-height:1.7; color:var(--ink-dim)}

/* controls: category filter + grid/list view toggle */
.ol-controls{margin-top:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid var(--line); padding-bottom:20px}
.ol-cats{display:flex; flex-wrap:wrap; gap:8px}
.ol-cat{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:999px; padding:8px 15px; transition:color .2s, border-color .2s, background .2s}
.ol-cat:hover{color:var(--ink); border-color:var(--ink-dim)}
.ol-cat.is-active{color:var(--bg); background:var(--ink); border-color:var(--ink)}
.ol-viewtoggle{display:flex; gap:3px; border:1px solid var(--line); border-radius:999px; padding:3px; flex-shrink:0}
.ol-view{display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; padding:0;
  border:none; background:none; color:var(--ink-faint); border-radius:999px; cursor:pointer; transition:color .2s, background .2s}
.ol-view:hover{color:var(--ink)}
.ol-view.is-active{color:var(--ink); background:rgba(255,255,255,.07)}

/* post collection — view-aware (grid ⇄ list) */
.ol-grid{margin-top:28px}
.ol-card{position:relative; overflow:hidden; background:var(--bg)}
.ol-card__media{background-size:cover; background-position:center}
.ol-card__body{position:relative; z-index:1}
.ol-card__meta{display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.ol-card__meta .dim{color:var(--ink-faint)}
.ol-card__title{font-size:clamp(22px,2.4vw,30px); line-height:1.12; transition:color .2s}
.ol-card:hover .ol-card__title{color:#fff}
.ol-card__excerpt{margin-top:12px; font-size:15px; line-height:1.6; color:var(--ink-dim)}
.ol-card__foot{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.ol-card__read{display:inline-flex; align-items:center; gap:8px; color:var(--ink)}

/* GRID view */
.ol-grid[data-view="grid"]{display:grid; grid-template-columns:1fr; gap:1px; border:1px solid var(--line); background:var(--line)}
@media(min-width:768px){ .ol-grid[data-view="grid"]{grid-template-columns:1fr 1fr} }
.ol-grid[data-view="grid"] .ol-card{display:flex; flex-direction:column; justify-content:space-between; min-height:300px; padding:32px}
@media(min-width:768px){ .ol-grid[data-view="grid"] .ol-card{padding:40px} }
.ol-grid[data-view="grid"] .ol-card__media{position:absolute; inset:0; opacity:.38; transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s}
.ol-grid[data-view="grid"] .ol-card:hover .ol-card__media{transform:scale(1.03); opacity:.55}
.ol-grid[data-view="grid"] .ol-card__veil{position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg), rgba(10,10,11,.75) 50%, rgba(10,10,11,.45))}
.ol-grid[data-view="grid"] .ol-card__title{margin-top:16px}
.ol-grid[data-view="grid"] .ol-card__foot{margin-top:24px}

/* LIST view */
.ol-grid[data-view="list"]{display:flex; flex-direction:column; border:1px solid var(--line)}
.ol-grid[data-view="list"] .ol-card{display:flex; flex-direction:row; align-items:stretch; border-bottom:1px solid var(--line)}
.ol-grid[data-view="list"] .ol-card:last-child{border-bottom:none}
.ol-grid[data-view="list"] .ol-card__media{position:relative; width:190px; flex-shrink:0; opacity:.82; transition:opacity .5s}
.ol-grid[data-view="list"] .ol-card:hover .ol-card__media{opacity:1}
.ol-grid[data-view="list"] .ol-card__veil{display:none}
.ol-grid[data-view="list"] .ol-card__body{flex:1; min-width:0; padding:26px 30px; align-self:center}
.ol-grid[data-view="list"] .ol-card__title{font-size:clamp(19px,1.9vw,25px)}
.ol-grid[data-view="list"] .ol-card__excerpt{display:none}
.ol-grid[data-view="list"] .ol-card__foot{display:none}
@media(min-width:768px){
  .ol-grid[data-view="list"] .ol-card__excerpt{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:10px}
}
@media(max-width:560px){
  .ol-grid[data-view="list"] .ol-card__media{width:104px}
  .ol-grid[data-view="list"] .ol-card__body{padding:18px 20px}
}

/* pagination */
.ol-pagination{margin-top:56px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.ol-pagination .page-numbers{display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 14px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:8px; transition:color .2s, border-color .2s, background .2s}
.ol-pagination a.page-numbers:hover{color:var(--ink); border-color:var(--ink-dim)}
.ol-pagination .page-numbers.current{color:var(--bg); background:var(--ink); border-color:var(--ink)}
.ol-pagination .page-numbers.dots{border-color:transparent}

/* ── single post ────────────────────────────────────────────────────────── */
.ol-article{position:relative; padding:112px 0 112px}
@media(min-width:768px){ .ol-article{padding-top:144px} }
.ol-banner{position:absolute; inset-inline:0; top:0; height:560px; overflow:hidden}
.ol-banner__img{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.30}
.ol-banner__veil{position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,10,11,.4), rgba(10,10,11,.75) 50%, var(--bg))}
.ol-post{position:relative; max-width:760px; margin:0 auto; padding:0 24px}

/* centred lede (title block) above the 3-column shell */
.ol-lede{position:relative; max-width:820px; margin:0 auto; padding:0 24px}

/* ── article shell: TOC | content | rail ─────────────────────────────── */
.ol-shell{position:relative; max-width:var(--wide); margin:40px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1fr; gap:40px}
@media(min-width:1024px){
  .ol-shell{grid-template-columns:212px minmax(0,1fr) 288px; gap:56px; align-items:start}
}
.ol-main{min-width:0; width:100%; max-width:760px}
@media(min-width:1024px){ .ol-main{justify-self:center} }

/* left TOC (sticky, desktop only) */
.ol-toc{display:none}
@media(min-width:1024px){ .ol-toc{display:block; position:sticky; top:100px; align-self:start} }
.ol-toc__head{font-family:var(--serif); font-size:19px; color:var(--ink);
  padding-bottom:14px; border-bottom:1px solid var(--line); margin-bottom:12px}
.ol-toc__nav{display:flex; flex-direction:column; gap:1px; max-height:calc(100vh - 170px); overflow:auto}
.ol-toc__link{display:block; font-size:13.5px; line-height:1.4; color:var(--ink-dim);
  padding:8px 0 8px 15px; border-left:2px solid var(--line); transition:color .2s, border-color .2s}
.ol-toc__link:hover{color:var(--ink)}
.ol-toc__link.is-active{color:var(--teal); border-left-color:var(--teal)}

/* mobile TOC (collapsible) */
.ol-toc-m{margin-top:8px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); padding:0 18px}
@media(min-width:1024px){ .ol-toc-m{display:none} }
.ol-toc-m>summary{list-style:none; cursor:pointer; padding:16px 0; font-family:var(--mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between}
.ol-toc-m>summary::-webkit-details-marker{display:none}
.ol-toc-m>summary::after{content:"+"; color:var(--teal); font-size:15px}
.ol-toc-m[open]>summary::after{content:"\2013"}
.ol-toc-m ol{margin:0 0 16px; padding-left:18px; display:flex; flex-direction:column; gap:10px; font-size:14px; color:var(--ink-dim)}
.ol-toc-m a{color:var(--ink-dim)}
.ol-toc-m a:hover{color:var(--teal)}

/* right rail (sticky, desktop) */
.ol-rail{display:flex; flex-direction:column; gap:18px}
@media(min-width:1024px){ .ol-rail{position:sticky; top:100px} }
.ol-rail__card{border:1px solid var(--line); border-radius:12px; background:var(--bg-soft); padding:22px}
.ol-rail__ey{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal)}
.ol-rail__h{font-family:var(--serif); font-size:19px; margin-top:8px; line-height:1.22}
.ol-rail__p{margin-top:10px; font-size:13.5px; line-height:1.6; color:var(--ink-dim)}
.ol-rail__btn{display:inline-flex; align-items:center; gap:8px; margin-top:16px; background:var(--ink); color:var(--bg);
  border-radius:999px; padding:11px 18px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:transform .2s}
.ol-rail__btn:hover{transform:translateY(-2px)}
.ol-rail__list{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column}
.ol-rail__list li{padding:14px 0; border-top:1px solid var(--line)}
.ol-rail__list li:first-child{border-top:none; padding-top:2px}
.ol-rail__list a{display:block; font-size:14px; line-height:1.4; color:var(--ink-dim); transition:color .2s}
.ol-rail__list a:hover{color:var(--ink)}

/* rail — three random specimens with photos */
.ol-rail__prods{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.ol-rail__prod{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.ol-rail__prods li:first-child .ol-rail__prod{border-top:none; padding-top:2px}
.ol-rail__prodimg{flex:0 0 auto; width:52px; height:52px; border-radius:8px; background:var(--bg-card) center/cover no-repeat; display:block}
.ol-rail__prodmeta{display:flex; flex-direction:column; gap:3px; min-width:0}
.ol-rail__prodname{font-family:var(--serif); font-size:14.5px; line-height:1.25; color:var(--ink); overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.ol-rail__prodprice{font-family:var(--serif); font-size:13px; color:var(--ink-dim)}
.ol-rail__prod:hover .ol-rail__prodname{color:var(--teal)}

/* share row */
.ol-share{display:flex; align-items:center; gap:14px; margin-bottom:8px; padding-bottom:24px; border-bottom:1px solid var(--line)}
.ol-share__lbl{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}
.ol-share__btns{display:flex; gap:8px}
.ol-share a,.ol-share button{display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:8px; color:var(--ink-dim);
  background:none; cursor:pointer; transition:color .2s, border-color .2s, background .2s}
.ol-share a:hover,.ol-share button:hover{color:var(--ink); border-color:var(--ink-dim); background:rgba(255,255,255,.05)}
.ol-share svg{width:16px; height:16px}
.ol-share button.is-copied{color:var(--teal); border-color:var(--teal)}

/* prose tables (author markup: <figure class="ol-tablewrap"><table>…<figcaption>) */
.ol-tablewrap{margin:32px 0; overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft)}
.ol-tablewrap table{width:100%; border-collapse:collapse; font-size:14.5px; line-height:1.55; min-width:520px}
.ol-tablewrap thead th{background:rgba(255,255,255,.03); text-align:left; font-family:var(--mono);
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); font-weight:400;
  padding:14px 16px; border-bottom:1px solid var(--line)}
.ol-tablewrap tbody td{padding:13px 16px; color:#ddd9d2; border-bottom:1px solid rgba(245,244,242,.06); vertical-align:top}
.ol-tablewrap tbody tr:last-child td{border-bottom:none}
.ol-tablewrap tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
.ol-tablewrap tbody td:first-child{color:var(--ink); font-weight:500}
.ol-tablewrap figcaption{padding:12px 16px; font-size:12.5px; color:var(--ink-faint); font-style:italic; border-top:1px solid var(--line)}

/* in-body images (author markup: <figure class="ol-figure"><img><figcaption>) */
.ol-figure{margin:34px 0}
.ol-figure img{width:100%; aspect-ratio:3/2; object-fit:cover; display:block;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-soft)}
.ol-figure figcaption{margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--ink-faint);
  font-style:italic; text-align:center}

/* blockquote inside prose */
.ol-prose blockquote{margin:28px 0; padding:4px 0 4px 22px; border-left:2px solid var(--teal);
  font-family:var(--serif); font-size:21px; font-style:italic; line-height:1.5; color:rgba(245,244,242,.92)}
.ol-prose h2{scroll-margin-top:100px}
.ol-prose h3{scroll-margin-top:100px}
.ol-back{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim)}
.ol-back:hover{color:var(--ink)}
.ol-post__meta{margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.ol-post__meta .dim{color:var(--ink-faint)}
.ol-post__title{margin-top:16px; font-size:clamp(30px,5vw,54px); line-height:1.06}
.ol-post__excerpt{margin-top:20px; border-left:1px solid var(--line); padding-left:20px;
  font-family:var(--serif); font-size:20px; font-style:italic; line-height:1.6; color:rgba(245,244,242,.9)}
.ol-byline{margin-top:24px; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--ink-dim)}
.ol-byline .name{color:var(--ink)}
.ol-byline .dim{color:var(--ink-faint)}

/* prose (post content) — matches the Prose component */
.ol-prose{margin-top:40px; font-size:16.5px; line-height:1.75; color:var(--ink)}
.ol-prose>*+*{margin-top:20px}
.ol-prose h2{font-size:clamp(24px,3vw,34px); line-height:1.15; margin-top:48px}
.ol-prose h3{font-size:22px; margin-top:36px}
.ol-prose p{color:#ddd9d2}
.ol-prose strong{color:var(--ink); font-weight:500}
.ol-prose a{color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.ol-prose ul{margin:0; padding-left:0; list-style:none}
.ol-prose li{position:relative; padding-left:22px; margin-top:10px; color:#ddd9d2}
.ol-prose li::before{content:"–"; position:absolute; left:0; color:var(--teal)}

/* FAQ */
.ol-faq{margin-top:56px; border-top:1px solid var(--line); padding-top:40px}
.ol-faq__h{font-size:clamp(22px,3vw,32px)}
.ol-faq__list{margin-top:24px; display:flex; flex-direction:column; gap:24px}
.ol-faq dt{font-family:var(--serif); font-size:20px; color:var(--ink)}
.ol-faq dd{margin:8px 0 0; font-size:16px; line-height:1.7; color:var(--ink-dim)}

/* references */
.ol-refs{margin-top:56px; border-top:1px solid var(--line); padding-top:32px}
.ol-refs ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; font-size:15px; color:var(--ink-dim)}
.ol-refs a{color:var(--teal); text-decoration:underline; text-underline-offset:3px}
.ol-refs__note{margin-top:16px; font-size:13px; color:var(--ink-faint)}

/* CTA */
.ol-cta{margin-top:56px; border:1px solid var(--line); background:var(--bg-soft); border-radius:10px; padding:32px; text-align:center}
@media(min-width:768px){ .ol-cta{padding:40px} }
.ol-cta__h{margin-top:12px; font-size:clamp(22px,3vw,32px)}
.ol-cta__p{margin:12px auto 0; max-width:28rem; font-size:14px; color:var(--ink-dim)}
.ol-btn{display:inline-flex; align-items:center; gap:8px; margin-top:24px; background:var(--ink); color:var(--bg);
  border-radius:999px; padding:14px 24px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:transform .2s}
.ol-btn:hover{transform:translateY(-2px)}

/* related */
.ol-related{margin-top:80px}
.ol-related__grid{margin-top:24px; display:grid; grid-template-columns:1fr; gap:1px; border:1px solid var(--line); background:var(--line)}
@media(min-width:768px){ .ol-related__grid{grid-template-columns:1fr 1fr 1fr} }
.ol-rcard{position:relative; overflow:hidden; background:var(--bg); padding:28px}
.ol-rcard__bg{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.18; transition:transform .7s, opacity .7s}
.ol-rcard:hover .ol-rcard__bg{transform:scale(1.03); opacity:.32}
.ol-rcard__veil{position:absolute; inset:0; background:linear-gradient(to top, var(--bg), rgba(10,10,11,.85) 55%, rgba(10,10,11,.6))}
.ol-rcard__cat{position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--teal)}
.ol-rcard__t{position:relative; margin-top:12px; font-size:20px; line-height:1.3}

/* ── footer (matches main site) ─────────────────────────────────────────── */
.ol-foot{position:relative; z-index:10; border-top:1px solid var(--line); background:var(--bg-soft)}
.ol-foot__in{padding:64px 0 80px}
.ol-foot__grid{display:grid; grid-template-columns:1fr; gap:48px}
@media(min-width:1024px){ .ol-foot__grid{grid-template-columns:1.4fr 1fr 1fr; gap:32px} }
.ol-foot__logo img{height:36px; width:auto; opacity:.95}
.ol-foot__slogan{margin-top:20px; font-family:var(--serif); font-size:18px; font-style:italic; color:rgba(245,244,242,.8)}
.ol-foot__contact{margin-top:24px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); display:flex; flex-direction:column; gap:4px}
.ol-foot__contact a:hover{color:var(--ink)}
.ol-foot__col h4{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); font-weight:400}
.ol-foot__col ul{margin:16px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; font-size:14px; color:var(--ink-dim)}
.ol-foot__col a:hover{color:var(--ink)}
.ol-foot__bar{margin-top:56px; border-top:1px solid var(--line); padding-top:32px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}

/* Exit-intent modal — two columns: a random specimen playing on the left, purchase +
   contact on the right. Once per session. */
.ol-exit{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:20px}
.ol-exit[hidden]{display:none}
.ol-exit__overlay{position:absolute; inset:0; background:rgba(6,6,8,.75); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s}
.ol-exit.is-open .ol-exit__overlay{opacity:1}
.ol-exit__box{position:relative; width:100%; max-width:720px; display:flex; overflow:hidden; background:var(--bg-card); border:1px solid var(--line); border-radius:16px; opacity:0; transform:translateY(12px) scale(.98); transition:opacity .3s, transform .35s cubic-bezier(.16,1,.3,1)}
.ol-exit.is-open .ol-exit__box{opacity:1; transform:none}
.ol-exit__x{position:absolute; top:12px; right:14px; z-index:2; background:none; border:none; color:var(--ink-faint); font-size:15px; line-height:1; padding:4px; cursor:pointer; transition:color .2s}
.ol-exit__x:hover{color:var(--ink)}
.ol-exit__media{position:relative; width:44%; flex:none; align-self:stretch; background:var(--bg); min-height:360px}
.ol-exit__layer{position:absolute; inset:0; background-size:cover; background-position:center; transition:opacity .7s ease}
.ol-exit__panel{flex:1; padding:34px 32px}
.ol-exit__ey{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal)}
.ol-exit__h{font-family:var(--serif); font-size:23px; line-height:1.18; margin:10px 0 3px; color:var(--ink)}
.ol-exit__price{font-family:var(--serif); font-size:18px; color:var(--ink-dim); margin-bottom:14px}
.ol-exit__price .woocommerce-Price-amount{color:var(--ink-dim)}
.ol-exit__p{font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 22px}
.ol-exit__btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; background:var(--ink); color:var(--bg); border-radius:999px; padding:14px 20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; transition:background .2s}
.ol-exit__btn:hover{background:var(--teal); color:var(--bg)}
.ol-exit a.ol-exit__contact{display:block; text-align:center; margin-top:14px; font-size:12.5px; color:var(--ink-dim); transition:color .2s}
.ol-exit a.ol-exit__contact:hover{color:var(--ink); text-decoration:underline}
@media(max-width:600px){ .ol-exit__media{display:none} .ol-exit__box{max-width:420px} .ol-exit__panel{padding:30px 26px} }