/*
Theme Name: poetryspace
Theme URI: http://poetryspace.local/
Author: poetryspace
Author URI: http://poetryspace.local/
Description: A bespoke WordPress block theme (FSE) for poetryspace, an independent poetry publisher. Editorial type (Newsreader + DM Sans + IBM Plex Mono), off-white palette, WooCommerce books, a custom Poem block and Poem of the Day.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: poetryspace
Tags: full-site-editing, block-patterns, custom-colors, custom-logo, e-commerce, news
*/

/* ============================================================================
   TOKENS  — locked off-white build. Mapped to theme.json presets so the editor
   and front end stay in sync. (Prototype used white --bg; the final build is
   off-white per the handoff README.)
   ========================================================================== */
:root{
  --teal:        var(--wp--preset--color--teal, #339999);
  --teal-deep:   var(--wp--preset--color--teal-deep, #247a7a);
  --teal-wash:   var(--wp--preset--color--teal-wash, #e8f2f1);
  --ink:         var(--wp--preset--color--ink, #1f2123);
  --ink-2:       var(--wp--preset--color--ink-2, #3a3d40);
  --ink-3:       var(--wp--preset--color--ink-3, #6b6f73);
  --ink-4:       var(--wp--preset--color--ink-4, #a4a8ad);
  --rule:        var(--wp--preset--color--rule, #e6e4dd);
  --bg:          var(--wp--preset--color--background, #f9f8f4);
  --bg-soft:     var(--wp--preset--color--surface, #f3f1ea);
  --white:       var(--wp--preset--color--white, #ffffff);
  --font-display: var(--wp--preset--font-family--display, 'Newsreader', Georgia, serif);
  --font-body:    var(--wp--preset--font-family--body, 'DM Sans', system-ui, sans-serif);
  --font-mono:    var(--wp--preset--font-family--mono, 'IBM Plex Mono', monospace);
  --max:1320px;
}

*{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--font-body);font-size:16px;line-height:1.55;font-weight:400}
h1,h2,h3,h4,h5,.serif{font-family:var(--font-display);
  font-weight:400;letter-spacing:-0.01em;line-height:1.08;margin:0}
.mono{font-family:var(--font-mono)}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%;display:block}
::selection{background:var(--teal);color:#fff}

/* Centred content wrapper used by patterns / custom markup */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
@media (max-width:720px){ .wrap{padding:0 20px} }

/* ── Utilities ────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.v-rule{width:1px;background:var(--rule)}

.pill-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink);
  border-bottom:1px solid currentColor;padding-bottom:2px;font-weight:500;
  transition:color .2s}
.pill-link:hover{color:var(--teal-deep)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;
  border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  font-weight:500;font-size:14px;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.teal{background:var(--teal);border-color:var(--teal)}
.btn.teal:hover{background:transparent;color:var(--teal-deep);border-color:var(--teal-deep)}

/* ── Announcement bar ─────────────────────────────────────────────────── */
.announce{border-bottom:1px solid var(--rule);font-size:var(--announce-size,12.5px);color:var(--ink-2);
  background:var(--bg);transition:background .2s,color .2s,border-color .2s}
.announce:hover{background:var(--teal);color:#fff;border-bottom-color:var(--teal)}
.announce:hover .dot{background:#fff}
.announce:hover b,.announce:hover strong{color:#fff !important}
.announce:hover .announce-right{color:rgba(255,255,255,.85)}
/* Links inside the announcement bar — subtle underline + hover */
.announce a{color:var(--teal-deep);text-decoration:none;
  border-bottom:1px solid rgba(31,33,35,.25);padding-bottom:1px;
  transition:color .2s,border-color .2s}
.announce a:hover{color:var(--ink);border-bottom-color:currentColor}
.announce:hover a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.announce:hover a:hover{border-bottom-color:#fff}
.announce-inner{display:flex;align-items:center;gap:16px;min-height:34px;padding:4px 0;
  justify-content:space-between}
.announce .dot{width:6px;height:6px;border-radius:999px;background:var(--teal);
  display:inline-block;margin-right:8px;vertical-align:1px}
.announce-right{display:flex;gap:18px;color:var(--ink-3);font-size:.96em}
@media (max-width:720px){ .announce-right{display:none} }
/* The rich-text editor wraps saved content in <p>; keep it inline + margin-free
   so the two sides stay vertically aligned in the bar. */
.announce-msg p,.announce-right p,.announce-left p{margin:0;display:inline}

/* ── Header / brand ───────────────────────────────────────────────────── */
/* No backdrop-filter: it creates a containing block that would trap the
   mobile nav overlay inside the header (the bug the handoff warned about). */
.topbar{border-bottom:1px solid var(--rule);background:var(--bg);
  position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:center;gap:24px;min-height:96px}
/* Push the search/basket icons hard right on desktop. */
.topbar-inner > .wp-block-navigation.ps-nav{margin-right:auto}
.brand{display:flex;align-items:center;gap:14px}
.brand-mark{width:46px;height:46px;border-radius:10px;overflow:hidden;display:block;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.brand-wordmark{height:30px !important;width:auto !important;max-height:30px;display:block}
.site-footer .brand-wordmark{height:30px !important;max-height:30px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;color:var(--ink-2)}
/* Expanding header search */
.ps-search{display:flex;align-items:center}
.ps-search-field{width:0;min-width:0;opacity:0;border:0;background:transparent;font:inherit;
  font-size:14px;color:var(--ink);outline:0;padding:0;
  transition:width .25s ease,opacity .2s ease,padding .25s ease}
.ps-search.is-open .ps-search-field,
.ps-search .ps-search-field:focus{width:190px;opacity:1;padding:8px 14px;margin-right:8px;
  border:1px solid var(--rule);border-radius:999px;background:var(--white)}
.ps-search .ps-search-field:focus{border-color:var(--ink)}
.ps-search-field::placeholder{color:var(--ink-4)}
@media (max-width:520px){ .ps-search.is-open .ps-search-field{width:130px} }
.icon-btn{width:38px;height:38px;border-radius:999px;border:1px solid var(--rule);
  background:transparent;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:border-color .2s,color .2s}
.icon-btn:hover{border-color:var(--ink);color:var(--ink)}
.basket{position:relative}
.basket .count{position:absolute;top:-4px;right:-4px;background:var(--teal);
  color:#fff;font-size:10px;font-weight:600;min-width:18px;height:18px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
  border:2px solid var(--bg);font-family:var(--font-mono)}

/* ── Primary navigation — core Navigation block (editable in WP UI) ────── */
.wp-block-navigation.ps-nav{font-size:14px;font-weight:500;color:var(--ink-2)}
.ps-nav .wp-block-navigation__container{gap:22px;align-items:center}
.ps-nav .wp-block-navigation-item__content{padding:6px 0;color:var(--ink-2);font-weight:500;white-space:nowrap}
.ps-nav .wp-block-navigation-item__content:hover{color:var(--ink)}
.ps-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.ps-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content{
  color:var(--ink);position:relative}
.ps-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.ps-nav .wp-block-navigation-item.current_page_item > .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--teal)}

/* Submenu caret + open state */
.ps-nav .wp-block-navigation__submenu-icon{transition:transform .2s}
.ps-nav .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon,
.ps-nav .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation-submenu__toggle .wp-block-navigation__submenu-icon{
  transform:rotate(180deg)}

/* Dropdown container — matches prototype .nav-dd */
.ps-nav .wp-block-navigation__submenu-container{
  top:calc(100% + 14px);left:-14px;min-width:220px;
  background:var(--white);border:1px solid var(--rule);border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 8px 24px -8px rgba(20,20,20,.12),
    0 24px 48px -16px rgba(20,20,20,.14);
  padding:8px}
.ps-nav .wp-block-navigation__submenu-container::before{
  content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:var(--white);
  border-left:1px solid var(--rule);border-top:1px solid var(--rule);transform:rotate(45deg)}
.ps-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
  padding:10px 12px;border-radius:5px;font-size:14px;color:var(--ink-2);font-weight:500;width:100%}
.ps-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover{
  background:var(--bg-soft);color:var(--ink)}

/* Hamburger + close buttons */
.ps-nav .wp-block-navigation__responsive-container-open,
.ps-nav .wp-block-navigation__responsive-container-close{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--rule);color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;background:transparent}
.ps-nav .wp-block-navigation__responsive-container-open:hover{border-color:var(--ink);color:var(--ink)}

/* Breakpoint: inline nav up to 1180px, hamburger below (prototype behaviour) */
@media (min-width:1180px){
  .ps-nav .wp-block-navigation__responsive-container-open{display:none !important}
}
@media (max-width:1179.98px){
  .ps-nav .wp-block-navigation__responsive-container:not(.is-menu-open){display:none !important}
  .ps-nav .wp-block-navigation__responsive-container-open{display:flex !important;margin-left:auto}
}

/* Mobile overlay → solid white full-height right-hand drawer above everything.
   Uses flex alignment (not absolute) so it works with core's
   .responsive-close / .responsive-dialog wrappers. */
.ps-nav .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed;inset:0;background:rgba(20,22,24,.46);padding:0;z-index:100000;
  display:flex;justify-content:flex-end;align-items:stretch}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close{
  width:min(360px,86vw);max-width:none;height:100%;margin:0 0 0 auto}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog{
  position:relative;height:100%;width:100%;background:var(--white);
  padding:28px;box-shadow:-20px 0 60px rgba(0,0,0,.18);overflow-y:auto;margin:0}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  width:100%}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  display:flex;flex-direction:column;gap:6px;align-items:stretch}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-family:var(--font-display);font-size:28px;color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--rule);letter-spacing:-.01em}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{color:var(--teal-deep)}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  position:static;box-shadow:none;border:0;background:transparent;padding:0 0 0 14px;opacity:1;width:auto}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container::before{display:none}
.ps-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon{margin-left:8px}
.ps-nav .wp-block-navigation__responsive-container-close{position:absolute;top:24px;right:24px;z-index:1}

/* ── Hero (split into Intro + Featured-books blocks) ──────────────────── */
.hero{padding:56px 0 24px;border-bottom:1px solid var(--rule)}
.hero-intro{padding:56px 0 8px}
.hero-intro .hero-head{margin-bottom:0}
.hero-books{padding:24px 0 56px;border-bottom:1px solid var(--rule)}
/* As dynamic blocks the homepage sections inherit the post-content block gap,
   which separates each section's border from the next (doubled hairlines).
   Sit them flush so adjacent borders read as a single divider. */
.hero-intro,.hero-books,.potd,.shelf,.comp,.news-band{margin-top:0;margin-bottom:0}
.hero-head{display:flex;flex-direction:column;align-items:flex-start;
  gap:18px;margin-bottom:48px;max-width:62%}
@media (max-width:980px){ .hero-head{max-width:100%} }
.hero-head .eyebrow{display:inline-flex}
.hero-head h1{font-size:clamp(40px,5.4vw,76px);letter-spacing:-.02em}
.hero-head h1 em{font-style:italic;color:var(--teal-deep);font-weight:400}
.hero-lede{font-size:clamp(15px,1.25vw,18px);color:var(--ink-2);line-height:1.55;
  max-width:54ch;margin:0}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:48px;align-items:stretch}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:32px} }

.feature{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center}
@media (max-width:680px){ .feature{grid-template-columns:1fr;gap:24px} }
.feature .cover-wrap{position:relative}
.feature .cover-wrap .tag{position:absolute;top:-10px;left:-10px;background:var(--teal);
  color:#fff;font-family:var(--font-mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;padding:6px 10px;border-radius:4px;z-index:2}
.feature .info .eyebrow{margin-bottom:14px;display:block}
.feature .info h2{font-size:clamp(28px,3vw,40px);margin-bottom:8px}
.feature .info .by{font-style:italic;color:var(--ink-2);font-size:18px;
  font-family:var(--font-display);margin-bottom:18px}
.feature .info p{color:var(--ink-2);font-size:15.5px;line-height:1.65;
  max-width:48ch;margin:0 0 22px}
.feature .info .meta-row{display:flex;gap:18px;align-items:center;
  font-size:12.5px;color:var(--ink-3);margin-bottom:24px;font-family:var(--font-mono)}
.feature .info .meta-row .price{color:var(--ink);font-weight:500;font-size:16px;
  font-family:var(--font-mono);letter-spacing:.02em}
.feature .info .actions{display:flex;gap:10px;flex-wrap:wrap}

.side-stack{display:flex;flex-direction:column;gap:24px;
  border-left:1px solid var(--rule);padding-left:48px}
@media (max-width:900px){ .side-stack{border-left:0;padding-left:0;
  display:grid;grid-template-columns:1fr 1fr;gap:24px} }
@media (max-width:560px){ .side-stack{grid-template-columns:1fr} }
.side-stack h3.section-title{font-family:var(--font-mono);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;margin-bottom:4px}
.side-item{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center}
.side-item .info .ttl{font-family:var(--font-display);
  font-size:20px;line-height:1.15;letter-spacing:-.005em;margin-bottom:2px}
.side-item .info .by{font-size:13px;color:var(--ink-3);font-style:italic;
  font-family:var(--font-display);margin-bottom:8px}
.side-item .info .row{display:flex;align-items:center;justify-content:space-between;
  font-size:12px;color:var(--ink-3);font-family:var(--font-mono)}
.side-item .info .row .price{color:var(--ink);font-weight:500}

/* ── Book cover (image + CSS-drawn placeholders) ──────────────────────── */
.cover{position:relative;display:block;border-radius:3px;overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    -1px 0 0 rgba(0,0,0,.04) inset,
    0 6px 18px rgba(20,20,20,.10),
    0 26px 60px -20px rgba(20,20,20,.18);
  transition:transform .35s ease,box-shadow .35s ease;background:var(--bg-soft)}
.cover:hover{transform:translateY(-3px);box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    -1px 0 0 rgba(0,0,0,.04) inset,
    0 10px 22px rgba(20,20,20,.12),
    0 36px 70px -20px rgba(20,20,20,.22)}
/* "Book spine" line kept only on the typographic placeholder covers, not on
   real cover photos (where it reads as a flaw down the left edge). */
.cover:not(:has(img))::before{content:"";position:absolute;top:0;bottom:0;left:6%;width:1px;
  background:rgba(0,0,0,.08);z-index:2;pointer-events:none}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cover-inner{position:absolute;inset:0;padding:18px 16px 16px 22px;
  display:flex;flex-direction:column;color:#fff;z-index:1}
.cover .c-title{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;line-height:1.02}
.cover .c-author{margin-top:auto;font-family:var(--font-display);font-style:italic;opacity:.85}
.cover .c-publisher{font-family:var(--font-mono);font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;opacity:.7;margin-bottom:8px}
.lift{transition:transform .35s ease}
.lift:hover{transform:translateY(-3px)}
/* Cover sizing per context */
.feature .cover-wrap .cover{width:clamp(220px,26vw,320px);aspect-ratio:2/3}
.side-item .cover{width:88px;aspect-ratio:2/3}
.shelf-card .cover,ul.products li.product .cover{width:100%;aspect-ratio:2/3}

/* ── Poem of the Day section wrapper (the card lives in the Poem block) ── */
.potd{padding:56px 0 96px;background:var(--bg-soft);
  border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.potd-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;margin-bottom:36px;flex-wrap:wrap;position:relative}
.potd-head .lhs{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.potd-head h2{font-size:clamp(26px,2.8vw,36px)}
.potd-head .date{font-family:var(--font-mono);font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.potd-head .nav{display:flex;gap:6px;align-items:center}
.potd-nav-btn{width:34px;height:34px;border-radius:999px;border:1px solid var(--rule);
  background:transparent;display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink-2)}
.potd-nav-btn:hover{border-color:var(--ink);color:var(--ink)}
.potd-nav-btn:disabled{opacity:.4;cursor:not-allowed}
/* When multiple day-slots are server-rendered, only the active one shows */
.potd-slot{display:none}
.potd-slot.is-active{display:block}

/* ── Competition strip ────────────────────────────────────────────────── */
.comp{padding:72px 0;border-bottom:1px solid var(--rule)}
.comp-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:stretch}
@media (max-width:900px){ .comp-grid{grid-template-columns:1fr;gap:32px} }
.comp-left{background:var(--ink);color:#fff;border-radius:6px;padding:44px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;overflow:hidden;min-height:340px}
.comp-left .eyebrow{color:var(--teal);opacity:1;font-weight:700;font-size:13px;letter-spacing:.14em}
.comp-left h2{font-size:clamp(30px,3.4vw,46px);margin:14px 0 14px;color:#fff;max-width:18ch}
.comp-left h2 em{color:var(--teal);font-style:italic}
.comp-left p{color:rgba(255,255,255,.7);font-size:15px;max-width:42ch;margin:0 0 24px}
.comp-left .countdown{display:flex;gap:18px;margin-top:24px}
.countdown .cell{text-align:left}
.countdown .num{font-family:var(--font-display);font-size:44px;
  line-height:1;font-weight:300;color:#fff;font-variant-numeric:tabular-nums}
.countdown .lbl{font-family:var(--font-mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:6px}
.comp-left .actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.comp-left .actions .btn{background:#fff;border-color:#fff;color:var(--ink)}
.comp-left .actions .btn:hover{background:transparent;color:#fff}
.comp-left .actions .btn.outline{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.comp-left .actions .btn.outline:hover{background:#fff;color:var(--ink);border-color:#fff}
/* Two latest showcases at the foot of the dark panel */
.comp-showcases{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.comp-showcase{display:block;color:#fff}
.comp-showcase-thumb{display:block;aspect-ratio:4/3;border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.08);margin-bottom:10px}
.comp-showcase-thumb img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.comp-showcase:hover .comp-showcase-thumb img{transform:scale(1.04)}
.comp-showcase-title{display:block;font-family:var(--font-display);font-size:15px;
  line-height:1.2;letter-spacing:-.005em;color:#fff;transition:color .2s}
.comp-showcase:hover .comp-showcase-title{color:var(--teal)}
.comp-showcase-date{display:block;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:3px}

/* ── News list (homepage right column) ────────────────────────────────── */
.news-list{display:flex;flex-direction:column}
.news-item{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--rule);transition:background .2s}
.news-item:first-child{padding-top:0}
.news-item:last-child{border-bottom:0}
.news-item .date{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);
  letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.news-item .body .tag{display:inline-block;font-family:var(--font-mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep);
  margin-bottom:6px}
.news-item .body h4{font-family:var(--font-display);font-size:22px;
  letter-spacing:-.005em;line-height:1.15;margin-bottom:6px;font-weight:400}
.news-item .body p{margin:0;color:var(--ink-3);font-size:13.5px;line-height:1.5;max-width:48ch}
.news-item .arr{align-self:center;color:var(--ink-3);transition:transform .25s,color .2s}
.news-item:hover{background:linear-gradient(90deg,var(--bg-soft),transparent 70%)}
.news-item:hover .arr{transform:translateX(4px);color:var(--ink)}

/* ── Bookshelf grid + filter chips ────────────────────────────────────── */
.shelf{padding:88px 0 96px;border-bottom:1px solid var(--rule)}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom:36px;gap:20px;flex-wrap:wrap}
.shelf-head h2{font-size:clamp(28px,3vw,40px)}
.shelf-filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{appearance:none;border:1px solid var(--rule);background:transparent;
  color:var(--ink-2);padding:7px 14px;border-radius:999px;font-size:12.5px;
  font-family:var(--font-mono);letter-spacing:.05em;transition:all .2s}
.chip:hover{border-color:var(--ink-2);color:var(--ink)}
.chip.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.shelf-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:36px 28px;
  transition:opacity .25s ease}
.shelf-grid.is-fading{opacity:0}
@keyframes shelfIn { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (max-width:1100px){ .shelf-grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:820px){ .shelf-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .shelf-grid{grid-template-columns:repeat(2,1fr)} }
.shelf-card{display:flex;flex-direction:column;gap:12px;
  animation:shelfIn .45s cubic-bezier(.22,.61,.36,1) both}
.shelf-card.is-hidden{display:none}
.shelf-card .meta{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.shelf-card .meta .ttl{font-family:var(--font-display);font-size:17px;
  line-height:1.2;letter-spacing:-.005em}
.shelf-card:hover .meta .ttl{color:var(--teal-deep)}
.shelf-card .meta .price{font-family:var(--font-mono);font-size:13px;color:var(--ink-2)}
.shelf-card .by{font-size:13px;color:var(--ink-3);font-style:italic;
  font-family:var(--font-display);margin-top:-6px}
.shelf-card .cover{aspect-ratio:2/3;width:100%}

/* ── Newsletter band ──────────────────────────────────────────────────── */
.news-band{padding:96px 0;background:var(--bg-soft);
  border-bottom:1px solid var(--rule)}
.news-band-inner{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
@media (max-width:820px){ .news-band-inner{grid-template-columns:1fr;gap:32px} }
.nb-copy{display:flex;flex-direction:column;gap:6px}
.nb-copy h2{font-size:clamp(28px,3vw,40px);margin:8px 0 6px;max-width:14ch}
.nb-copy h2 em{font-style:italic;color:var(--teal-deep)}
.nb-copy p{color:var(--ink-3);margin:0;max-width:46ch;font-size:15px;line-height:1.55}
.nb-signup{display:flex;flex-direction:column}
.nb-sublabel{margin-top:12px;font-size:12px;color:var(--ink-3);
  font-family:var(--font-mono);letter-spacing:.05em}
.signup{display:flex;border:1px solid var(--ink);border-radius:999px;padding:6px 6px 6px 22px;
  align-items:center;gap:12px;background:var(--bg)}
.signup input{flex:1;border:0;background:transparent;outline:0;font:inherit;
  font-size:15px;color:var(--ink);padding:10px 0;min-width:0}
.signup input::placeholder{color:var(--ink-4)}
.signup .btn{padding:10px 20px}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer{padding:48px 0 32px;color:var(--ink-2);font-size:13.5px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr;gap:32px} }
.foot-col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;margin:0 0 14px}
.foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-col a:hover{color:var(--teal-deep)}
.foot-about{max-width:36ch;color:var(--ink-3);line-height:1.6}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;
  padding-top:24px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:12px;
  flex-wrap:wrap;gap:12px}
.foot-bottom .mono{font-family:var(--font-mono)}
.foot-bottom .links{display:flex;gap:18px}

/* ── Breadcrumb ───────────────────────────────────────────────────────── */
.breadcrumb,.woocommerce-breadcrumb{padding:22px 0;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--rule)}
.breadcrumb a,.woocommerce-breadcrumb a{color:var(--ink-3)}
.breadcrumb a:hover,.woocommerce-breadcrumb a:hover{color:var(--ink)}
.breadcrumb .sep{margin:0 10px;opacity:.5}
.breadcrumb .here{color:var(--ink)}

/* ── News post (single) ───────────────────────────────────────────────── */
.post-wrap{max-width:980px;margin:0 auto}
.post-head{padding:48px 0 32px}
.post-cat{display:block;margin-bottom:20px;color:var(--teal-deep)}
.post-head-grid{display:block}
.post-head-grid.with-media{display:grid;grid-template-columns:1.5fr 1fr;gap:44px;align-items:start}
@media (max-width:760px){ .post-head-grid.with-media{grid-template-columns:1fr;gap:28px} }
.post-head-media figure{margin:0}
.post-head-media img{width:100%;height:auto;display:block;border-radius:4px;background:var(--bg-soft)}
.post-head-media figcaption{font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;color:var(--ink-4);margin-top:10px;text-transform:uppercase}
.post-title{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.02em;line-height:1.05;
  margin:0 0 20px;text-wrap:balance}
.post-head-grid.with-media .post-title{font-size:clamp(30px,3.6vw,44px)}
.post-standfirst{font-family:var(--font-display);font-weight:300;
  font-size:clamp(19px,1.7vw,23px);line-height:1.45;color:var(--ink-2);margin:0 0 26px;max-width:60ch}
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding-top:20px;border-top:1px solid var(--rule)}
.post-meta .by{color:var(--ink)}
.post-meta .dot{opacity:.45}

.post-body{padding:32px 0 64px}
.post-body p{font-size:18px;line-height:1.72;color:var(--ink-2);margin:0 0 24px;max-width:74ch}
.post-body h2,.post-body h3{font-size:clamp(24px,2.4vw,30px);letter-spacing:-.01em;
  margin:44px 0 18px;line-height:1.2}
.post-body p + h2,.post-body p + h3{margin-top:40px}

/* Quote block — also styled in theme.json, reinforced here */
.post-body .wp-block-quote,.entry-content .wp-block-quote{margin:40px 0;padding:6px 0 6px 32px;
  border-left:3px solid var(--teal);border-radius:0}
.post-body .wp-block-quote p,.entry-content .wp-block-quote p{margin:0;font-family:var(--font-display);
  font-style:italic;font-weight:400;font-size:clamp(24px,2.8vw,32px);line-height:1.3;
  letter-spacing:-.01em;color:var(--ink);text-wrap:balance;max-width:none}
.post-body .wp-block-quote cite,.entry-content .wp-block-quote cite{display:block;margin-top:16px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-style:normal}
.post-body .wp-block-quote cite::before,.entry-content .wp-block-quote cite::before{content:"— "}

.post-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:44px;padding-top:28px;
  border-top:1px solid var(--rule)}
.post-tag{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--ink-3);padding:6px 12px;border:1px solid var(--rule);border-radius:999px;
  transition:border-color .2s,color .2s}
.post-tag:hover{border-color:var(--ink);color:var(--ink)}

/* Related stories — typographic */
.related-stories{padding:64px 0 88px;background:var(--bg-soft);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.related-stories .head{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;gap:20px;flex-wrap:wrap}
.related-stories .head h3{font-size:clamp(24px,2.4vw,32px);margin:0;letter-spacing:-.005em}
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 56px}
@media (max-width:760px){ .related-list{grid-template-columns:1fr} }
.related-item{display:block;padding:24px 0;border-bottom:1px solid var(--rule);transition:padding-left .2s}
.related-item:hover{padding-left:8px}
.related-item .rs-cat{font-family:var(--font-mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--teal-deep)}
.related-item h4{font-family:var(--font-display);font-weight:400;
  font-size:22px;line-height:1.2;letter-spacing:-.005em;margin:8px 0 8px;color:var(--ink)}
.related-item:hover h4{color:var(--teal-deep)}
.related-item .rs-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-3)}

/* ── News index ───────────────────────────────────────────────────────── */
.news-masthead{padding:56px 0 12px}
.news-masthead .eyebrow{display:block;margin-bottom:16px}
.news-masthead h1{font-size:clamp(40px,5vw,68px);letter-spacing:-.02em;margin:0 0 16px}
.news-masthead p{font-family:var(--font-display);font-weight:300;
  font-size:clamp(18px,1.6vw,22px);color:var(--ink-2);line-height:1.45;max-width:54ch;margin:0}

.news-featured{padding:40px 0 8px}
.feat-grid{display:grid;grid-template-columns:1fr 1px 1fr;column-gap:48px;align-items:stretch}
@media (max-width:860px){ .feat-grid{grid-template-columns:1fr;column-gap:0;row-gap:40px} }
.feat-divider{width:1px;background:var(--rule);align-self:stretch}
@media (max-width:860px){ .feat-divider{display:none} }
.feat-card{display:flex;flex-direction:column;gap:20px}
.feat-cat{display:block;color:var(--teal-deep);margin-bottom:8px}
.feat-card .feat-image{border-radius:4px;overflow:hidden;background:var(--bg-soft);aspect-ratio:16/10}
.feat-card .feat-image img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.feat-card:hover .feat-image img{transform:scale(1.03)}
.feat-card h2{letter-spacing:-.015em;line-height:1.08;margin:0;text-wrap:balance;color:var(--ink)}
.feat-card:hover h2{color:var(--teal-deep)}
.feat-card.has-image h2{font-size:clamp(26px,2.6vw,34px)}
.feat-card.no-image{background:var(--teal-wash);border-radius:8px;padding:72px 40px 40px;justify-content:flex-start}
.feat-card.no-image h2{font-size:clamp(36px,4.4vw,56px)}
.feat-card.no-image .feat-blurb{font-size:18px;max-width:38ch}
.feat-blurb{font-family:var(--font-display);font-weight:300;
  font-size:16px;line-height:1.55;color:var(--ink-2);margin:0;max-width:46ch}
.feat-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.feat-meta .dot{opacity:.45}
.feat-readmore{display:inline-flex;align-items:center;gap:8px;color:var(--ink);
  font-weight:500;font-size:14px;border-bottom:1px solid currentColor;padding-bottom:2px;
  align-self:flex-start;margin-top:2px;transition:color .2s,gap .2s}
.feat-card:hover .feat-readmore{color:var(--teal-deep);gap:12px}

.news-columns{padding:48px 0 96px}
.nc-head{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:18px;margin-bottom:8px;border-bottom:1px solid var(--ink);gap:20px}
.nc-head h3{font-size:clamp(22px,2.2vw,28px);margin:0;letter-spacing:-.005em}
.nc-count{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.nc-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
@media (max-width:760px){ .nc-grid{grid-template-columns:1fr;gap:0} }
.nc-col{display:flex;flex-direction:column}
.nl-item{display:block;padding:28px 0;border-bottom:1px solid var(--rule);
  animation:shelfIn .45s cubic-bezier(.22,.61,.36,1) both}
.nl-top{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.nl-cat{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal-deep)}
.nl-date{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);white-space:nowrap}
.nl-item h4{font-family:var(--font-display);font-weight:400;
  font-size:24px;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink)}
.nl-item:hover h4{color:var(--teal-deep)}
.nl-blurb{font-size:14.5px;line-height:1.55;color:var(--ink-3);margin:0 0 12px;max-width:48ch}
.nl-author{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-4)}
.nc-more{display:flex;justify-content:center;margin-top:44px}
.nc-more .btn{min-width:220px;justify-content:center}
.nc-more .btn[disabled]{opacity:.4;cursor:default}

/* ============================================================================
   WOOCOMMERCE — product page recreated from book.html
   ========================================================================== */
.breadcrumb-row{padding:0}
.product-summary{padding:56px 0 64px}
/* minmax(0,…) stops the gallery image's intrinsic width from blowing out the
   left track and squeezing the summary column. */
.product-summary-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:72px;align-items:start}
@media (max-width:900px){ .product-summary-inner{grid-template-columns:1fr;gap:40px} }
.product-gallery{display:flex;flex-direction:column;gap:14px}
/* Cover fills the full left column (override WooCommerce's default 48% float). */
.product-gallery .woocommerce-product-gallery{width:100% !important;float:none !important;margin:0}
.product-gallery .woocommerce-product-gallery__wrapper{margin:0}
.product-gallery .gallery-img,.woocommerce-product-gallery__image{border-radius:3px;
  overflow:hidden;background:var(--bg-soft);max-width:none;
  box-shadow:0 6px 18px rgba(20,20,20,.10), 0 26px 60px -20px rgba(20,20,20,.18)}
.product-gallery img,.woocommerce-product-gallery__image img{width:100%;height:auto;display:block}
.woocommerce-product-gallery .flex-control-thumbs{display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;max-width:480px;margin:14px 0 0;padding:0;list-style:none}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0}
.woocommerce-product-gallery .flex-control-thumbs img{aspect-ratio:1;object-fit:cover;
  border:1px solid var(--rule);border-radius:3px;cursor:pointer;box-shadow:none}
.woocommerce-product-gallery .flex-control-thumbs img.flex-active,
.woocommerce-product-gallery .flex-control-thumbs img:hover{border-color:var(--ink)}

/* WooCommerce's stylesheet floats .summary at width:48%; inside our grid track
   that squeezes it to a narrow band. Force both columns to fill their tracks. */
.product-summary-inner .summary,
.product-summary-inner .product-gallery,
.product-summary-inner > .woocommerce-product-gallery{width:100% !important;float:none !important;margin:0 !important}
.summary.entry-summary{padding-top:8px}
.summary .ps-cat-eyebrow{display:block;margin-bottom:14px}
.summary .product_title,.product_title.entry-title{font-family:var(--font-display);
  font-size:clamp(30px,3.4vw,46px);letter-spacing:-.01em;line-height:1.08;margin:0 0 6px}
.summary .ps-author{font-family:var(--font-display);font-style:italic;color:var(--ink-2);font-size:18px;margin:0 0 20px}
.summary .ps-review-row,.woocommerce-product-rating{display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.summary .ps-stars,.star-rating span::before{color:var(--teal)}
.summary .price,.summary p.price,.summary .woocommerce-Price-amount{font-family:var(--font-mono);font-size:24px;
  color:var(--ink);margin:14px 0 8px;font-weight:500;letter-spacing:.02em}
.summary .woocommerce-product-details__short-description{color:var(--ink-2);font-size:15.5px;
  line-height:1.65;margin:0 0 8px !important;max-width:50ch}
.summary .woocommerce-product-details__short-description > :last-child{margin-bottom:0}
.summary .ps-readmore-desc{display:inline-flex;align-items:center;gap:6px;margin:0 0 22px;
  font-size:13.5px;font-weight:500;color:var(--teal-deep);
  border-bottom:1px solid currentColor;padding-bottom:1px;transition:color .2s}
.summary .ps-readmore-desc:hover{color:var(--ink)}
#ps-full-description{scroll-margin-top:120px}
.summary .stock.in-stock{font-family:var(--font-mono);font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--teal-deep);margin-bottom:18px}
.summary .stock.in-stock::before{content:"";display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--teal);margin-right:8px;vertical-align:1px}
.summary form.cart{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 30px}
.summary form.cart .quantity{display:inline-flex;align-items:center;border:1px solid var(--ink);
  border-radius:999px;padding:5px;background:transparent;height:46px}
.summary form.cart .quantity input.qty{width:46px;border:0;background:transparent;text-align:center;
  font-family:var(--font-mono);font-size:14px;color:var(--ink);outline:0;-moz-appearance:textfield}
.summary form.cart .quantity input.qty::-webkit-outer-spin-button,
.summary form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.summary .single_add_to_cart_button.button{padding:14px 24px;font-size:14px;border-radius:999px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);font-weight:500;transition:background .2s,color .2s}
.summary .single_add_to_cart_button.button:hover{background:transparent;color:var(--ink)}
.product_meta{padding-top:24px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-2);margin:0;line-height:1.9}
.product_meta > span{display:block}
.product_meta .ps-meta-label{font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
.product_meta a{color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:1px}
.product_meta a:hover{color:var(--teal-deep);border-color:var(--teal-deep)}
.product_meta .sku_wrapper{display:none} /* no SKU in right-hand meta per spec */

/* Tabs — UI hidden for now; only the Description content is shown. */
.woocommerce-tabs{padding:8px 0 64px;border-bottom:1px solid var(--rule);scroll-margin-top:120px}
.woocommerce-tabs ul.tabs{display:none}
.woocommerce-tabs #tab-additional_information,
.woocommerce-tabs #tab-reviews{display:none !important}
.woocommerce-tabs #tab-description{display:block !important}
.woocommerce-tabs .wc-tab{max-width:950px}
.woocommerce-tabs .wc-tab p{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0 0 18px}
.woocommerce-tabs h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 18px}
.shop_attributes{display:grid;grid-template-columns:170px 1fr;gap:14px 16px;margin:0;border:0}
.shop_attributes tbody{display:contents}
.shop_attributes tr{display:contents}
.shop_attributes th{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);padding:0;text-align:left;font-weight:400}
.shop_attributes td{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.5;padding:0;font-style:normal}
.woocommerce-Reviews .star-rating{color:var(--teal)}

/* Related products / shop grid → bookshelf cards.
   Prefixed with .woocommerce + !important on layout props to beat WooCommerce's
   default floated/percentage-width product grid. */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(5,1fr);
  gap:36px 28px;list-style:none;margin:0;padding:0}
.woocommerce .related.products ul.products{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){ .woocommerce ul.products{grid-template-columns:repeat(4,1fr)} }
@media (max-width:900px){ .woocommerce .related.products ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .woocommerce ul.products{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .woocommerce ul.products,.woocommerce .related.products ul.products{grid-template-columns:repeat(2,1fr)} }
/* Hide WooCommerce's clearfix pseudo-elements on the list — in a grid they'd
   become empty cells (the gap on the left / under Related). */
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none;display:none}
.woocommerce ul.products li.product{display:flex !important;flex-direction:column;gap:6px;
  text-align:left;width:auto !important;float:none !important;margin:0 !important;clear:none !important}
.woocommerce ul.products li.product::before,.woocommerce ul.products li.product::after{content:none;display:none}
.woocommerce ul.products li.product a{display:block}
/* Show the whole cover (no crop); cards size to each cover's natural ratio. */
.woocommerce ul.products li.product a img{width:100%;height:auto;margin:0;border-radius:3px;
  box-shadow:0 6px 18px rgba(20,20,20,.10), 0 26px 60px -20px rgba(20,20,20,.18);transition:transform .35s}
.woocommerce ul.products li.product a:hover img{transform:translateY(-3px)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--font-display);
  font-size:17px;line-height:1.2;letter-spacing:-.005em;padding:0;margin:14px 0 0;color:var(--ink)}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title{color:var(--teal-deep)}
.woocommerce ul.products li.product .ps-loop-author{font-size:13px;color:var(--ink-3);font-style:italic;
  font-family:var(--font-display);margin:0}
.woocommerce ul.products li.product .price{font-family:var(--font-mono);font-size:13px;color:var(--ink-2) !important;margin:0}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{display:inline-flex;align-items:center;align-self:flex-start;
  margin:4px 0 0;padding:9px 16px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;
  background:var(--ink);color:#fff;border:1px solid var(--ink);width:auto;transition:background .2s,color .2s}
.woocommerce ul.products li.product .button:hover{background:transparent;color:var(--ink)}

/* Related products section: full-width soft band, content centred like .wrap. */
.related.products{padding:72px 0 96px;background:var(--bg-soft);border-bottom:1px solid var(--rule)}
.related.products > h2,
.related.products > ul.products{max-width:var(--max);width:100%;margin-left:auto;margin-right:auto;
  padding-left:32px;padding-right:32px;box-sizing:border-box}
.related.products > h2{font-family:var(--font-display);font-size:clamp(24px,2.4vw,32px);margin-bottom:32px}
@media (max-width:720px){ .related.products > h2,.related.products > ul.products{padding-left:20px;padding-right:20px} }

/* GLOBAL: every price on the site uses IBM Plex Mono (handoff rule) */
.woocommerce-Price-amount,.price,.amount{font-family:var(--font-mono)!important}

/* Shop toolbar — result count (left) + styled ordering dropdown (right) */
.woocommerce ul.products{clear:both}
.woocommerce-result-count{float:left;margin:0 0 28px;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);line-height:34px}
.woocommerce-ordering{float:right;margin:0 0 28px}
.woocommerce-ordering select.orderby{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);
  background-color:var(--white);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b6f73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  border:1px solid var(--rule);border-radius:999px;
  padding:9px 38px 9px 16px;height:34px;cursor:pointer;line-height:1.2;
  transition:border-color .2s,color .2s}
.woocommerce-ordering select.orderby:hover{border-color:var(--ink-2);color:var(--ink)}
.woocommerce-ordering select.orderby:focus{outline:none;border-color:var(--teal);color:var(--ink)}

/* Shop / archive masthead reuse */
.shop-masthead{padding:56px 0 12px}
.shop-masthead h1{font-size:clamp(40px,5vw,68px);letter-spacing:-.02em;margin:0 0 8px}

/* ── Showcase single — impactful masthead ─────────────────────────────── */
.showcase-head{padding:56px 0 44px;border-bottom:1px solid var(--rule)}
.showcase-head-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
.showcase-head-grid.has-media{grid-template-columns:1.05fr 1fr}
@media (max-width:860px){ .showcase-head-grid.has-media{grid-template-columns:1fr} }
.showcase-date{display:block;margin-bottom:18px;color:var(--ink-3)}
.showcase-title{font-size:clamp(40px,5.4vw,76px);letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance}
.showcase-title-accent{color:var(--teal)}
.showcase-standfirst{font-family:var(--font-display);font-weight:300;
  font-size:clamp(20px,1.9vw,26px);line-height:1.4;color:var(--ink-2);margin:22px 0 0;max-width:44ch}
.showcase-credit{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:18px 0 0;max-width:52ch}
.showcase-more{margin-top:20px;font-size:13.5px}
/* Figure shrink-wraps the image and centres in its column, so the caption
   below always aligns to the image's edges (whatever the image's width). */
.showcase-head-media{margin:0 auto;width:fit-content;max-width:100%}
.showcase-head-media img{display:block;width:auto;max-width:100%;height:auto;max-height:640px;
  border-radius:6px;box-shadow:0 6px 18px rgba(20,20,20,.10), 0 26px 60px -20px rgba(20,20,20,.18)}
.showcase-artwork{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--ink-3);margin-top:10px;line-height:1.45}

/* Editor bio inside the showcase body */
.ps-bio-head{font-size:clamp(26px,2.6vw,34px) !important;letter-spacing:-.01em;margin:52px 0 22px !important}
.ps-editor-photo{margin:0 0 22px}
.ps-editor-photo img{border-radius:6px;display:block}

/* ── Showcases index (archive) — 2-col, landscape ─────────────────────── */
.showcase-archive{padding:56px 0 96px}
.showcase-archive-head{margin-bottom:44px}
.showcase-archive-head .eyebrow{display:block;margin-bottom:14px}
.showcase-archive-head h1{font-size:clamp(40px,5vw,68px);letter-spacing:-.02em;margin:0 0 14px}
.showcase-archive-head p{font-family:var(--font-display);font-weight:300;
  font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--ink-2);max-width:56ch;margin:0}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px 40px}
@media (max-width:760px){ .showcase-grid{grid-template-columns:1fr;gap:40px} }
.showcase-card{display:flex;flex-direction:column;gap:14px}
.showcase-card-media{aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:var(--bg-soft)}
.showcase-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.showcase-card:hover .showcase-card-media img{transform:scale(1.03)}
.showcase-card-date{display:block;color:var(--ink-3)}
.showcase-card-title{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.01em;line-height:1.1;margin:0;color:var(--ink)}
.showcase-card:hover .showcase-card-title{color:var(--teal-deep)}
.showcase-card-excerpt{font-family:var(--font-display);font-weight:300;font-size:16px;
  line-height:1.5;color:var(--ink-2);margin:0;max-width:46ch}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}