/*
Theme Name: Secura 22
Theme URI: https://secura22.co.za
Author: Metamorph Growth Agency
Author URI: https://cypherdigital.co.za
Description: Custom editorial WooCommerce theme for Secura 22. Fashion led, whitespace driven, built around the Secura bag and the charm range.
Version: 1.0.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: secura22
Tags: e-commerce, custom-colors, custom-logo, custom-menu, editor-style, featured-images, translation-ready
WC requires at least: 8.0
WC tested up to: 9.9
*/


/* ============================================================
   SECURA 22 / HOMEPAGE DRAFT 04
   ============================================================ */
:root{
  --bone:#F6F2E9;
  --bone-2:#EDE8DC;
  --ink:#0B0B0B;
  --ink-60:rgba(11,11,11,.60);
  --ink-40:rgba(11,11,11,.40);
  --blush:#E7C3B6;
  --gold:#A8813C;
  --line:rgba(11,11,11,.14);

  --display:'Anton','Arial Narrow',sans-serif;
  --serif:'Marcellus',Georgia,serif;
  --util:'Inter',-apple-system,Helvetica,sans-serif;

  --pad:clamp(18px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--util);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ink);color:var(--bone)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.micro{font-size:10px;font-weight:600;letter-spacing:.20em;text-transform:uppercase;line-height:1.45}
.micro-lg{font-size:11px;letter-spacing:.24em;font-weight:600;text-transform:uppercase}

/* ---------- Announcement ---------- */
.announce{background:var(--ink);color:var(--bone);text-align:center;padding:11px var(--pad)}
.announce span{opacity:.85}
.announce .dot{margin:0 14px;opacity:.4}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--bone);border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:18px var(--pad);transition:padding .3s ease}
.nav.is-tight{padding-top:11px;padding-bottom:11px}
.nav-left{display:flex;align-items:center;justify-self:start;min-width:0}
.nav-links{display:flex;gap:28px}
.nav-links a{position:relative;padding-bottom:2px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.nav-links a:hover::after{width:100%}
.nav-logo{justify-self:center;display:flex;align-items:center}
.nav-logo img{width:clamp(104px,13vw,158px);height:auto}
.nav-utils{display:flex;gap:18px;justify-self:end;align-items:center}
.icon-btn{position:relative;width:34px;height:34px;display:grid;place-items:center;transition:opacity .25s ease}
.icon-btn:hover{opacity:.55}
.icon-btn svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.icon-btn .count{position:absolute;top:-1px;right:-4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
  background:var(--ink);color:var(--bone);font-size:9px;font-weight:600;display:grid;place-items:center;letter-spacing:0}
.nav-burger{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-block;border:1px solid var(--ink);padding:15px 28px;font-size:10px;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;background:var(--bone);transition:background .3s ease,color .3s ease}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn--solid{background:var(--ink);color:var(--bone)}
.btn--solid:hover{background:transparent;color:var(--ink)}

/* ============================================================
   HERO  (side panels replaced by the film)
   ============================================================ */
.hero{padding:clamp(20px,2.6vw,34px) var(--pad) 0}
.hero-origin{text-align:center;font-family:var(--util);font-size:clamp(12px,1.35vw,17px);font-weight:600;
  letter-spacing:.30em;text-transform:uppercase;color:var(--ink);padding-bottom:clamp(14px,1.8vw,22px);
  border-bottom:1px solid var(--line)}

.mast{text-align:center;text-transform:uppercase;font-family:var(--display);line-height:.86;
  letter-spacing:-.012em;margin:clamp(16px,2.2vw,28px) 0 clamp(14px,1.8vw,24px)}
.mast span{display:block;transform:scaleY(1.04);transform-origin:bottom center}
.mast .l1{font-size:clamp(2.25rem,9.6vw,8.1rem)}
.mast .l2{font-size:clamp(1.61rem,6.86vw,5.79rem)}

.film-stage{position:relative;background:var(--ink);aspect-ratio:21/9;overflow:hidden}
.film-stage video,.film-stage img.poster{width:100%;height:100%;object-fit:cover;display:block}
.film-stage video{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.film-stage.is-playing video{opacity:1}
.film-stage.is-playing .poster,.film-stage.is-playing .play{opacity:0;pointer-events:none}
.film-stage .poster{transition:opacity .5s ease,transform 6s ease}
.film-stage:hover .poster{transform:scale(1.02)}
.play{position:absolute;inset:0;display:grid;place-items:center;gap:14px;align-content:center;transition:opacity .4s ease}
.play .disc{display:grid;place-items:center;width:clamp(62px,6vw,86px);aspect-ratio:1/1;border-radius:50%;
  background:var(--bone);color:var(--ink);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.play:hover .disc{transform:scale(1.08)}
.play svg{width:19px;height:19px;fill:var(--ink);margin-left:3px}
.play .lbl{color:var(--bone);opacity:.82}

.film-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:12px;color:var(--ink-40)}

.hero-foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:22px 0 clamp(28px,3.4vw,46px)}
.hero-foot .left{color:var(--ink-40)}
.hero-specs{text-align:center;line-height:1.85;color:var(--ink-60)}
.hero-foot .right{justify-self:end}

/* ---------- Spec marquee ---------- */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:15px 0}
.marq-track{display:flex;white-space:nowrap;animation:slide 36s linear infinite;will-change:transform}
.marq-track span{padding-right:2.2em;color:var(--ink-60)}
.marq-track b{font-weight:600;color:var(--ink)}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   PRODUCT
   ============================================================ */
.bag{padding:clamp(48px,6vw,96px) var(--pad)}
.bag-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,78px);align-items:start}

.gal-main{position:relative;background:var(--bone-2);aspect-ratio:4/5;overflow:hidden}
.gal-main .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.gal-main .shot.on{opacity:1}
.gal-tag{position:absolute;left:14px;top:14px;z-index:3;background:var(--bone);padding:7px 11px;color:var(--ink-60)}

/* Placeholder tile for a shot that is still to be photographed */
.shot-ph{display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;
  background:var(--bone-2);color:var(--ink-40);padding:24px}
.shot-ph svg{width:30px;height:30px;stroke:currentColor;stroke-width:1.3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.shot-ph .t{color:var(--ink-60)}

.gal-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.gal-thumbs::-webkit-scrollbar{display:none}
.gal-thumbs button{flex:0 0 clamp(62px,7.4vw,88px);aspect-ratio:1/1;background:var(--bone-2);position:relative;
  border:1px solid transparent;transition:border-color .25s ease,opacity .25s ease;opacity:.62;scroll-snap-align:start;overflow:hidden}
.gal-thumbs button img{width:100%;height:100%;object-fit:cover}
.gal-thumbs button.on{border-color:var(--ink);opacity:1}
.gal-thumbs button:hover{opacity:1}
.gal-thumbs .mini{display:grid;place-items:center;width:100%;height:100%;color:var(--ink-40)}
.gal-thumbs .mini svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.4;fill:none}
.gal-hint{margin-top:12px;color:var(--ink-40)}

.bag-copy .kicker{color:var(--ink-60);margin-bottom:18px}
.bag-copy h2{font-family:var(--display);font-size:clamp(2.2rem,4.4vw,4.3rem);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:20px}
.bag-copy .lede{font-family:var(--serif);font-size:clamp(1rem,1.28vw,1.24rem);line-height:1.62;max-width:48ch;margin-bottom:22px}
.bag-copy .lede + .lede{margin-bottom:30px}
.spec-list{border-top:1px solid var(--line);margin-bottom:28px;list-style:none}
.spec-list li{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.spec-list .lbl{flex:0 0 auto}
.spec-list .val{color:var(--ink-60);text-align:right}
.bag-buy{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.price{font-family:var(--serif);font-size:1.7rem;margin-right:6px}
.trust{display:flex;gap:22px;flex-wrap:wrap;color:var(--ink-40)}

/* ============================================================
   HOW IT WORKS  (horizontal rows, smaller frames)
   ============================================================ */
.system{border-top:1px solid var(--line);padding:clamp(48px,6vw,96px) var(--pad)}
.system-head{max-width:50ch;margin-bottom:clamp(24px,3vw,42px)}
.system-head .micro-lg{color:var(--ink-60);display:block;margin-bottom:14px}
.system-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3.2vw,3rem);line-height:.95}

.sys-list{border-top:1px solid var(--line)}
.sys-row{display:grid;grid-template-columns:56px clamp(150px,17vw,232px) 1fr;gap:clamp(20px,3vw,52px);
  align-items:center;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--line)}
.sys-row .idx{font-family:var(--display);font-size:clamp(1.4rem,2vw,2rem);color:var(--ink-40);line-height:1}
.sys-row figure{margin:0;background:var(--bone-2);aspect-ratio:1/1;overflow:hidden}
.sys-row figure img{width:100%;height:100%;object-fit:cover}
.sys-row h3{font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.7rem);margin-bottom:10px}
.sys-row p{color:var(--ink-60);line-height:1.68;max-width:56ch}
.sys-row .shown{margin-top:12px;color:var(--ink-40)}

/* ============================================================
   CHARMS
   ============================================================ */
.charms{border-top:1px solid var(--line);padding-bottom:clamp(48px,6vw,96px)}
.wall{position:relative;padding:clamp(26px,3.4vw,48px) 0;overflow:hidden;user-select:none}
.wall-row{display:flex;white-space:nowrap;font-family:var(--display);font-size:clamp(3rem,10vw,9.5rem);
  line-height:1.02;letter-spacing:-.012em;will-change:transform}
.wall-row span{padding-right:.30em}
.wall-row:nth-child(odd){animation:drift-l 32s linear infinite}
.wall-row:nth-child(even){animation:drift-r 32s linear infinite}
@keyframes drift-l{from{transform:translateX(0)}to{transform:translateX(-33.333%)}}
@keyframes drift-r{from{transform:translateX(-33.333%)}to{transform:translateX(0)}}
.wall-band{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);background:var(--bone);
  padding:clamp(24px,3.4vw,46px) var(--pad);text-align:center;box-shadow:0 0 0 1px var(--bone)}
.wall-band .tag{font-family:var(--display);text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(1.25rem,3vw,2.7rem);line-height:1}
.wall-band .sub{font-family:var(--serif);font-size:clamp(.95rem,1.25vw,1.2rem);color:var(--ink-60);margin-top:12px}

.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:clamp(28px,3.6vw,52px) var(--pad) 20px}
.rail-head .micro-lg{color:var(--ink-60)}
.rail-head p{max-width:46ch;color:var(--ink-60);font-family:var(--serif);font-size:1.02rem;line-height:1.6;margin-top:10px}
.rail-nav{display:flex;gap:8px;flex:0 0 auto}
.rail-nav button{width:46px;height:46px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:background .25s ease,color .25s ease,border-color .25s ease}
.rail-nav button:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.rail{display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:0 var(--pad) 6px;cursor:grab}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.card{flex:0 0 clamp(206px,21vw,306px);scroll-snap-align:start}
.card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bone-2);transition:opacity .4s ease}
.card:hover img{opacity:.88}
.card-meta{display:flex;justify-content:space-between;gap:12px;padding-top:13px}
.card-meta .name{font-family:var(--serif);font-size:1.03rem}
.card-meta .cost{color:var(--ink-60);font-size:12px;padding-top:5px}
.card-note{color:var(--ink-40);font-size:11px;padding-top:5px}
.card-add{margin-top:11px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;opacity:0;transform:translateY(4px);
  transition:opacity .3s ease,transform .3s ease}
.card:hover .card-add,.card:focus-within .card-add{opacity:1;transform:none}

/* ============================================================
   LOOKBOOK  (two columns, no dead space)
   ============================================================ */
.look{border-top:1px solid var(--line);padding:clamp(48px,6vw,96px) var(--pad)}
.look-grid{display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(18px,2.6vw,40px);align-items:stretch}
.look figure{margin:0;display:flex;flex-direction:column}
.look img{width:100%;object-fit:cover;background:var(--bone-2)}
.look-cap{padding-top:11px;color:var(--ink-60)}

.look-a img{aspect-ratio:3/4}
.look-side{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,34px)}
.look-note h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.6rem,2.7vw,2.7rem);line-height:.95;margin-bottom:14px}
.look-note p{font-family:var(--serif);color:var(--ink-60);line-height:1.65;max-width:34ch}
.look-b{flex:1;min-height:0}
.look-b img{flex:1;min-height:clamp(220px,26vw,380px);height:100%}

/* ============================================================
   INSTAGRAM
   ============================================================ */
.social{border-top:1px solid var(--line);padding:clamp(48px,6vw,96px) var(--pad)}
.social-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(18px,2.4vw,30px)}
.social-head .micro-lg{color:var(--ink-60);display:block;margin-bottom:12px}
.social-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3.2vw,3rem);line-height:.95}
/* WordPress note: replace the anchors inside .social-grid with the social feed shortcode. */
.social-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,.9vw,12px)}
.social-grid a{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--bone-2)}
.social-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.social-grid a:hover img{transform:scale(1.05);opacity:.82}
.social-grid a::after{content:'';position:absolute;inset:0;background:rgba(11,11,11,.28);opacity:0;transition:opacity .35s ease}
.social-grid a:hover::after{opacity:1}
.social-grid .glyph{position:absolute;inset:0;display:grid;place-items:center;z-index:2;opacity:0;transition:opacity .35s ease}
.social-grid a:hover .glyph{opacity:1}
.social-grid .glyph svg{width:22px;height:22px;stroke:var(--bone);stroke-width:1.5;fill:none}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto{border-top:1px solid var(--line);padding:clamp(64px,8vw,130px) var(--pad);text-align:center}
.manifesto .micro{color:var(--ink-60);margin-bottom:clamp(20px,2.4vw,34px)}
.manifesto blockquote{font-family:var(--serif);font-size:clamp(1.4rem,2.9vw,2.7rem);line-height:1.26;max-width:21ch;margin:0 auto}
.manifesto .body{color:var(--ink-60);line-height:1.75;max-width:52ch;margin:clamp(20px,2.6vw,34px) auto 0}
.manifesto .attrib{margin-top:clamp(22px,2.6vw,38px);color:var(--ink-40)}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--bone)}
.signup{border-bottom:1px solid rgba(246,242,233,.16);padding:clamp(46px,6vw,88px) var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);align-items:center}
.signup h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.75rem,3.4vw,3.3rem);line-height:.93}
.signup p{font-family:var(--serif);color:rgba(246,242,233,.62);margin-top:14px;max-width:40ch;line-height:1.6}
.field{display:flex;border-bottom:1px solid rgba(246,242,233,.4)}
.field input{flex:1;background:none;border:0;color:var(--bone);font-family:var(--serif);font-size:1.05rem;padding:14px 0}
.field input::placeholder{color:rgba(246,242,233,.42)}
.field input:focus{outline:none}
.field button{font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:0 4px 0 20px;transition:opacity .25s ease}
.field button:hover{opacity:.6}
.field-note{color:rgba(246,242,233,.42);margin-top:12px}

.foot-main{padding:clamp(42px,5vw,80px) var(--pad);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,3vw,50px)}
.foot-brand img{width:clamp(146px,15vw,200px);margin-bottom:20px}
.foot-brand p{font-family:var(--serif);color:rgba(246,242,233,.62);line-height:1.65;max-width:34ch}
.foot-col h4{color:rgba(246,242,233,.42);margin-bottom:18px}
.foot-col ul{list-style:none;display:grid;gap:11px}
.foot-col a{font-family:var(--serif);font-size:1rem;color:rgba(246,242,233,.9);transition:opacity .25s ease}
.foot-col a:hover{opacity:.55}
.foot-base{border-top:1px solid rgba(246,242,233,.16);padding:20px var(--pad);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;color:rgba(246,242,233,.42)}

/* ============================================================
   CART DRAWER (charm upsell)
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(11,11,11,.42);opacity:0;pointer-events:none;
  transition:opacity .4s ease;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(420px,92vw);background:var(--bone);z-index:95;
  transform:translateX(100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:22px var(--pad);border-bottom:1px solid var(--line)}
.drawer-close{width:30px;height:30px;display:grid;place-items:center;transition:opacity .25s ease}
.drawer-close:hover{opacity:.55}
.drawer-close svg{width:15px;height:15px;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.drawer-body{flex:1;overflow-y:auto;padding:22px var(--pad)}
.line{display:flex;gap:14px;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line)}
.line img{width:66px;height:66px;object-fit:cover;background:var(--bone-2);flex:0 0 auto}
.line .t{font-family:var(--serif);font-size:1.05rem}
.line .s{color:var(--ink-40);margin-top:4px}
.line .p{margin-left:auto;font-family:var(--serif)}
.upsell-title{padding:22px 0 14px}
.upsell-title .micro-lg{color:var(--ink-60)}
.upsell-title p{color:var(--ink-40);font-size:12px;margin-top:6px}
.up{display:flex;gap:13px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}
.up img{width:56px;height:56px;object-fit:cover;background:var(--bone-2);flex:0 0 auto}
.up .t{font-family:var(--serif);font-size:.99rem}
.up .s{color:var(--ink-40);margin-top:3px;font-size:11px}
.up button{margin-left:auto;flex:0 0 auto;border:1px solid var(--ink);padding:9px 15px;font-size:9px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;transition:background .25s ease,color .25s ease}
.up button:hover{background:var(--ink);color:var(--bone)}
.up button.added{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.drawer-foot{border-top:1px solid var(--line);padding:20px var(--pad) 24px}
.drawer-total{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.drawer-total .amt{font-family:var(--serif);font-size:1.35rem}
.drawer-foot .btn{width:100%;text-align:center}
.drawer-foot .note{text-align:center;color:var(--ink-40);margin-top:12px}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1000px){
  .nav{grid-template-columns:minmax(88px,1fr) auto minmax(88px,1fr);padding-top:15px;padding-bottom:15px}
  .nav.is-tight{padding-top:11px;padding-bottom:11px}
  .nav-left{justify-self:start}
  .nav-links{display:none}
  .nav-burger{display:block;padding:8px 2px}
  .nav-utils{gap:8px}
  .icon-btn{width:40px;height:40px}
  .film-stage{aspect-ratio:16/9}
  .hero-foot{grid-template-columns:1fr;text-align:center;gap:18px}
  .hero-foot .right{justify-self:center}
  .hero-foot .left{order:3}
  .bag-grid{grid-template-columns:1fr}
  .sys-row{grid-template-columns:40px 120px 1fr;gap:18px;align-items:start}
  .look-grid{grid-template-columns:1fr}
  .look-b img{min-height:clamp(240px,52vw,420px)}
  .social-head{flex-direction:column;align-items:flex-start}
  .social-grid{grid-template-columns:repeat(3,1fr)}
  .signup{grid-template-columns:1fr}
  .foot-main{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .manifesto blockquote{max-width:17ch}
}
@media(max-width:560px){
  .announce{padding-top:9px;padding-bottom:9px}
  .announce .dot,.announce .second{display:none}
  .nav-logo img{width:clamp(112px,34vw,150px)}
  .mast .l1{font-size:clamp(2.1rem,12.5vw,3.4rem)}
  .mast .l2{font-size:clamp(1.5rem,8.9vw,2.42rem)}
  .film-stage{aspect-ratio:4/3}
  .hero-foot{padding-bottom:34px}
  .hero-foot .right{width:100%}
  .hero-foot .right .btn{display:block;text-align:center}
  .bag-buy{gap:12px}
  .bag-buy .price{flex:1 0 100%;margin-right:0}
  .bag-buy .btn{flex:1 1 auto;text-align:center}
  .spec-list li{gap:14px}
  .spec-list .val{text-align:right}
  .wall{padding:44px 0}
  .wall-band{padding:20px var(--pad)}
  .rail-head{flex-direction:column;align-items:flex-start}
  .card{flex-basis:76vw}
  .foot-main{grid-template-columns:1fr}
  .card-add{opacity:1;transform:none}
  .social-grid{grid-template-columns:repeat(2,1fr)}
  .sys-row{grid-template-columns:1fr;gap:10px}
  .sys-row .idx{grid-row:1;font-size:1.4rem}
  .sys-row figure{grid-row:2;max-width:220px;aspect-ratio:4/3}
  .sys-row > div{grid-row:3}
  .drawer{width:100%}
  .drawer-head,.drawer-body,.drawer-foot{padding-left:20px;padding-right:20px}
  .menu-panel{width:100%}
  .menu-panel ul{gap:6px}
  .menu-panel a{display:inline-block;padding:8px 0}
  .foot-col ul{gap:4px}
  .foot-col a{display:inline-block;padding:6px 0}
  .foot-base{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   WORDPRESS CORE CLASSES
   ============================================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.screen-reader-text:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:200;
  background:var(--ink);color:var(--bone);padding:12px 18px;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.alignleft{float:left;margin:0 1.6em 1.2em 0}
.alignright{float:right;margin:0 0 1.2em 1.6em}
.aligncenter{margin-left:auto;margin-right:auto}
.alignwide{width:min(100%,1180px);margin-left:auto;margin-right:auto}
.alignfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,.wp-element-caption{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40);padding-top:9px}
.sticky,.gallery-caption,.bypostauthor{display:block}
.admin-bar .nav{top:32px}
@media(max-width:782px){.admin-bar .nav{top:46px}}

/* ---------- Mobile drawer menu ---------- */
.menu-panel{position:fixed;inset:0 auto 0 0;width:min(360px,88vw);background:var(--bone);z-index:95;
  transform:translateX(-100%);transition:transform .5s cubic-bezier(.2,.7,.2,1);display:flex;flex-direction:column;padding:22px var(--pad)}
.menu-panel.on{transform:none}
.menu-panel .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}
.menu-panel .top button{width:44px;height:44px;display:grid;place-items:center;margin:-10px -10px -10px 0}
.menu-panel .top svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;fill:none}
.menu-panel ul{list-style:none;display:grid;gap:20px}
.menu-panel a{font-family:var(--serif);font-size:1.5rem}
.menu-panel .sub{margin-top:auto;display:grid;gap:12px;color:var(--ink-40)}

/* ============================================================
   GENERIC PAGE / POST
   ============================================================ */
.page-shell{padding:clamp(48px,6vw,96px) var(--pad);max-width:1180px;margin:0 auto}
.page-shell.narrow{max-width:760px}
.page-hero{text-align:center;padding-bottom:clamp(26px,3vw,44px);border-bottom:1px solid var(--line);margin-bottom:clamp(30px,3.6vw,52px)}
.page-hero .micro-lg{color:var(--ink-60);display:block;margin-bottom:14px}
.page-hero h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.9rem,4.4vw,4.2rem);line-height:.94}
.entry{font-family:var(--serif);font-size:1.05rem;line-height:1.75;color:var(--ink)}
.entry > * + *{margin-top:1.15em}
.entry h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,2.2rem);line-height:1;margin-top:1.8em}
.entry h3{font-family:var(--serif);font-size:1.35rem;margin-top:1.6em}
.entry a{border-bottom:1px solid var(--line)}
.entry a:hover{border-color:var(--ink)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li + li{margin-top:.45em}
.entry blockquote{border-left:1px solid var(--ink);padding-left:1.4em;font-size:1.25rem}
.entry img{margin-left:auto;margin-right:auto}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px)}
.post-card img{width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--bone-2)}
.post-card h2{font-family:var(--serif);font-size:1.2rem;margin-top:14px}
.post-card .meta{color:var(--ink-40);margin-top:8px}
.pager{display:flex;justify-content:center;gap:10px;margin-top:clamp(34px,4vw,60px)}
.pager .page-numbers{border:1px solid var(--line);padding:11px 16px;font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.pager .page-numbers.current,.pager .page-numbers:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.search-field{border:1px solid var(--line);background:var(--bone);padding:14px 16px;font-family:var(--serif);font-size:1rem;width:100%}
.search-field:focus{outline:none;border-color:var(--ink)}
@media(max-width:1000px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

/* ---------- Search overlay ---------- */
.search-overlay{position:fixed;inset:0;z-index:98;background:var(--bone);display:grid;place-items:center;
  opacity:0;pointer-events:none;transition:opacity .35s ease}
.search-overlay.on{opacity:1;pointer-events:auto}
.search-inner{width:min(680px,88vw);position:relative}
.search-inner .search-field{border:0;border-bottom:1px solid var(--ink);background:none;
  font-family:var(--serif);font-size:clamp(1.3rem,3vw,2.4rem);padding:16px 0}
.search-inner .search-submit{margin-top:18px;border:1px solid var(--ink);background:none;padding:13px 24px;
  font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
  transition:background .3s ease,color .3s ease}
.search-inner .search-submit:hover{background:var(--ink);color:var(--bone)}
.search-close{position:absolute;top:-52px;right:0;width:34px;height:34px;display:grid;place-items:center}
.search-close svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;fill:none}