/* ============================================================
   CASSAVONA v2 — Components
   ============================================================ */
@layer components {

  /* ---------- Buttons ---------- */
  .btn{
    --bg:var(--c-rust);--fg:var(--btn-label);
    display:inline-flex;align-items:center;justify-content:center;gap:.6em;
    min-height:2.9rem;padding:.85rem 1.7rem;
    font-family:var(--ff-mono);font-size:var(--fs-mono);font-weight:400;
    letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1;
    color:var(--fg);background:var(--bg);border:1px solid var(--bg);
    transition:transform var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
  }
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0)}
  .btn--primary:hover{--bg:var(--c-rust-2);border-color:var(--c-rust-2)}
  .btn--ink{--bg:var(--c-ink);--fg:var(--c-paper);border-color:var(--c-ink)}
  .btn--ink:hover{--bg:#000}
  .btn--outline{--bg:transparent;--fg:var(--text-on-paper);border-color:var(--hair)}
  .btn--outline:hover{--bg:var(--c-ink);--fg:var(--c-paper)}
  .section--ink .btn--outline,.section--rust .btn--outline{--fg:var(--c-paper);border-color:var(--line-on-ink)}
  .section--ink .btn--outline:hover{--bg:var(--c-paper);--fg:var(--c-ink)}
  .btn--block{display:flex;width:100%}
  .btn--sm{min-height:2.5rem;padding:.6rem 1.15rem}

  /* link with rust underline-draw */
  .link-draw{
    display:inline-flex;align-items:center;gap:.5em;width:max-content;
    font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-label);
    text-transform:uppercase;padding-bottom:3px;color:inherit;
    border-bottom:1.5px solid color-mix(in srgb,var(--c-rust) 42%,transparent);
    transition:border-color var(--t) var(--ease),color var(--t) var(--ease);
  }
  .link-draw .arrow{transition:transform var(--t) var(--ease)}
  .link-draw:hover,.link-draw:focus-visible{border-color:var(--c-rust);color:var(--c-rust)}
  .link-draw:hover .arrow{transform:translateX(4px)}

  /* ---------- Star icon ---------- */
  .star-ico{display:inline-block;width:1em;height:1em;color:currentColor}
  .star-ico svg{width:100%;height:100%;fill:currentColor}

  /* ---------- Promo bar ---------- */
  .promo{position:relative;background:var(--c-ink);color:var(--text-on-ink);text-align:center;
    font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:var(--tracking-label);
    text-transform:uppercase;line-height:1.5}
  .promo__inner{padding:.6rem clamp(2.5rem,7vw,4rem)}
  .promo b{color:var(--c-terracotta);font-weight:400}
  @media (max-width:34rem){.promo__more{display:none}}
  .promo[hidden]{display:none}
  .promo__close{position:absolute;inset-block:0;right:.35rem;margin-block:auto;width:2rem;height:2rem;
    display:grid;place-items:center;color:var(--text-on-ink-soft);font-size:1.1rem;line-height:1}
  .promo__close:hover{color:var(--text-on-ink)}

  /* ---------- Header / Nav ---------- */
  .site-header{position:sticky;top:0;z-index:var(--z-nav)}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:var(--nav-h);
    background:color-mix(in srgb,var(--c-paper) 88%,transparent);
    -webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid transparent;
    transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:var(--c-paper)}}
  .site-header.is-stuck .nav{border-bottom-color:var(--line-on-paper);box-shadow:0 6px 22px rgba(33,30,26,.09)}
  .nav__logo{display:inline-flex;align-items:center;gap:.6rem}
  .nav__logo .star-ico{width:1.25rem;color:var(--c-ink)}
  .nav__logo b{font-family:var(--ff-display);font-weight:400;font-size:clamp(1.1rem,1rem + .6vw,1.35rem);letter-spacing:.2em}
  .nav__links{display:flex;align-items:center;gap:clamp(1rem,2.2vw,1.75rem);list-style:none}
  .nav__link{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase;
    padding-block:.4rem;color:var(--text-on-paper);
    background:linear-gradient(var(--c-rust),var(--c-rust)) 0 100%/0% 1px no-repeat;
    transition:background-size var(--t) var(--ease),color var(--t) var(--ease)}
  .nav__link:hover,.nav__link:focus-visible,.nav__link[aria-current]{background-size:100% 1px;color:var(--c-rust)}
  .nav__actions{display:flex;align-items:center;gap:var(--space-3)}
  .nav__toggle{display:none}
  /* Client Login — a quiet outlined "account" chip: clearly not a nav link, never competes with the rust CTA */
  .nav__login{
    display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:2.5rem;padding:0 .95rem;
    font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-wide);text-transform:uppercase;
    color:var(--text-on-paper);border:1px solid var(--line-on-paper);
    transition:border-color var(--t) var(--ease),background-color var(--t) var(--ease),color var(--t) var(--ease);
  }
  .nav__login-ico{width:13px;height:13px;flex:0 0 auto}
  .nav__login:hover,.nav__login:focus-visible{border-color:var(--hair);background:color-mix(in srgb,var(--c-ink) 6%,transparent)}
  /* scroll progress (woven) under nav */
  .nav__progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:left;transform:scaleX(var(--progress,0));
    background:var(--weave);background-size:96px 100%;opacity:0;transition:opacity var(--t)}
  .site-header.is-stuck .nav__progress{opacity:1}

  /* ---------- Marquee ---------- */
  .marquee{overflow:hidden;border-block:1px solid var(--line-on-ink);background:var(--c-olive);color:var(--text-on-ink)}
  .marquee__track{display:flex;width:max-content;gap:0;animation:marquee 38s linear infinite}
  .marquee:hover .marquee__track{animation-play-state:paused}
  .marquee__group{display:flex;align-items:center;gap:var(--space-5);padding-inline:var(--space-3);
    font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-label);text-transform:uppercase}
  .marquee__group .star-ico{width:.7rem;opacity:.85}
  .marquee__item{padding-block:.85rem;white-space:nowrap}
  @keyframes marquee{to{transform:translateX(-50%)}}

  /* ---------- Keyline frame (matted print) ---------- */
  .keyline{position:relative;background:var(--c-paper);padding:var(--keyline-pad);box-shadow:0 0 0 1px var(--hair)}
  .keyline__win{position:relative;overflow:hidden;border:1px solid var(--hair);aspect-ratio:var(--ar,4/3);background:var(--hatch)}
  .keyline__win img{width:100%;height:100%;object-fit:cover}
  @media (hover:hover) and (min-width:64rem){
    .keyline__win img{transition:transform .8s var(--ease)}
    .keyline:hover .keyline__win img{transform:scale(1.045)}
  }
  .keyline__mark{position:absolute;right:10px;bottom:10px;width:26px;opacity:.5;pointer-events:none;color:var(--c-paper);mix-blend-mode:difference}
  .stamp--overlay{position:absolute;left:8px;bottom:8px;z-index:2;background:rgba(242,236,224,.82);padding:3px 7px;letter-spacing:.05em}
  .stamp--tag{position:absolute;left:0;bottom:0;z-index:2;background:var(--c-ink);color:var(--c-paper);padding:5px 9px;letter-spacing:.04em}
  .stamp--counter{position:absolute;left:10px;top:10px;z-index:2;background:rgba(242,236,224,.82);padding:3px 7px;color:var(--text-body)}

  /* ---------- Tier cards ---------- */
  .tiers{display:grid;gap:var(--space-4);grid-template-columns:1fr}
  .tier{--accent:var(--tier-base);display:flex;flex-direction:column;background:#FFFDF8;border:1px solid var(--hair);
    padding:var(--space-5) var(--space-5);position:relative}
  .tier--featured{border-color:var(--c-rust);box-shadow:inset 0 0 0 1px var(--c-rust);--accent:var(--c-rust)}
  .tier__badge{position:absolute;top:-11px;left:var(--space-5);background:var(--c-rust);color:var(--c-paper);
    font-family:var(--ff-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px}
  .tier__name{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .tier__price{font-family:var(--ff-display);font-size:clamp(2.5rem,2rem + 2vw,3rem);line-height:1;margin:.4rem 0 0}
  .tier__price small{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--text-on-paper-soft)}
  .tier__billed{font-family:var(--ff-mono);font-size:var(--fs-caption);color:var(--text-on-paper-soft);margin-top:.3rem;letter-spacing:.03em}
  .tier__list{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--text-on-paper-soft);line-height:2;
    border-top:1px solid var(--line-soft);margin-top:var(--space-4);padding-top:var(--space-4);flex:1}
  .tier .btn{margin-top:var(--space-4)}

  .brokerage{border:1px solid var(--hair);background:var(--c-ink-2);color:var(--text-on-ink);
    padding:var(--space-6);display:grid;gap:var(--space-4);grid-template-columns:1fr;align-items:center;margin-top:var(--space-4)}
  .brokerage__feat{display:grid;grid-template-columns:1fr;gap:.3rem 1.4rem;font-family:var(--ff-mono);
    font-size:var(--fs-small);color:var(--text-on-ink-soft);line-height:1.5}
  .brokerage__name{font-family:var(--ff-display);font-size:var(--fs-h3)}

  /* ---------- Pricing table (1 col mobile, 2-up columns from 48rem) ---------- */
  .price-table{border:1px solid var(--hair);background:var(--c-paper);font-family:var(--ff-mono);font-size:var(--fs-small);max-width:48rem}
  .price-row{display:grid;grid-template-columns:1fr auto;border-bottom:1px solid var(--line-soft)}
  .price-row:last-child{border-bottom:0}
  .price-row>span{padding:.85rem 1.1rem}
  .price-row>span:nth-child(2){text-align:right;color:var(--c-rust)}
  @media (min-width:48rem){
    .price-table{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column}
    .price-row:nth-child(-n+4){border-right:1px solid var(--line-soft)}
    .price-row:nth-child(4){border-bottom:0}
  }
  .price-note{font-family:var(--ff-mono);font-size:var(--fs-caption);color:var(--text-on-paper-soft);line-height:1.7;margin-top:var(--space-5)}

  /* ---------- Instant estimate calculator ---------- */
  .calc{background:#FFFDF8;border:1px solid var(--c-rust);box-shadow:inset 0 0 0 1px var(--c-rust);
    padding:var(--space-5);font-family:var(--ff-mono)}
  .calc__name{font-family:var(--ff-display);font-size:var(--fs-h3);margin:.35rem 0 var(--space-4)}
  .calc__sqrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
  .calc__sqrow label{font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-paper-soft)}
  .calc__sqrow output{font-size:1.2rem;color:var(--c-rust)}
  .calc__range{width:100%;margin:.6rem 0 var(--space-4);accent-color:var(--c-rust);cursor:ew-resize}
  .calc__plans{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:var(--space-3)}
  .calc__plan{position:relative;text-align:center;border:1px solid var(--line-soft);padding:.55rem .25rem;
    font-size:var(--fs-caption);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
    transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
  .calc__plan input{position:absolute;opacity:0;pointer-events:none}
  .calc__plan.is-on{border-color:var(--c-rust);background:var(--c-rust);color:var(--btn-label)}
  .calc__plan:focus-within{outline:2px solid var(--focus);outline-offset:2px}
  .calc__addon{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;
    font-size:var(--fs-small);border-top:1px dashed var(--line-soft);cursor:pointer}
  .calc__addon input{accent-color:var(--c-rust)}
  .calc__addon b{color:var(--c-rust);font-weight:400}
  .calc__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:var(--fs-small);border-top:1px dashed var(--line-soft)}
  .calc__row s{color:var(--text-on-paper-soft)}
  .calc__row .val--accent{color:var(--c-rust)}
  .calc__total{display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem;padding-top:.75rem;margin-top:.4rem;border-top:1px solid var(--c-rust)}
  .calc__save{font-size:var(--fs-caption);color:var(--text-body);line-height:1.7;margin-top:var(--space-3)}
  .calc__save b{color:var(--c-rust);font-weight:700}
  .calc__save a{border-bottom:1px solid var(--c-rust)}
  .calc__fine{font-size:var(--fs-caption);color:var(--text-on-paper-soft);line-height:1.7;margin-top:var(--space-3)}
  .calc__fine a{border-bottom:1px solid currentColor;white-space:nowrap}

  /* ---------- Receipt (comparison) ---------- */
  .receipt{--accent:var(--c-ink);border:1px solid var(--hair);background:#FFFDF8;padding:var(--space-5);font-family:var(--ff-mono)}
  .receipt--featured{border-color:var(--c-rust);box-shadow:inset 0 0 0 1px var(--c-rust);--accent:var(--c-rust)}
  .receipt__name{font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .receipt__sub{font-size:var(--fs-caption);color:var(--text-on-paper-soft);margin-bottom:var(--space-3)}
  .receipt__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;font-size:var(--fs-small);border-top:1px dashed var(--line-soft)}
  .receipt__row s{color:var(--text-on-paper-soft)}
  .receipt__row .free,.receipt__row .val--accent{color:var(--c-rust)}
  .receipt__total{display:flex;justify-content:space-between;gap:1rem;font-size:1.05rem;padding-top:.75rem;
    margin-top:.4rem;border-top:1px solid var(--accent)}

  /* ---------- The Cassavona Promise (risk reversal) ---------- */
  .promise{display:grid;gap:var(--space-4);grid-template-columns:1fr;align-items:center;
    border:1px solid var(--c-rust);box-shadow:inset 0 0 0 1px var(--c-rust);background:#FFFDF8;
    padding:var(--space-5) var(--space-6);margin-top:var(--space-6)}
  .promise__mark{width:30px;color:var(--c-rust)}
  .promise__mark .star-ico{width:100%}
  .promise__text{font-family:var(--ff-display);font-size:clamp(1.15rem,1rem + .8vw,1.45rem);line-height:1.4;margin-top:var(--space-2);max-width:56ch}
  @media (min-width:48rem){.promise{grid-template-columns:auto 1fr auto;gap:var(--space-6)}}

  /* ---------- Step timing stamp (how it works) ---------- */
  .step__when{font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--c-rust)}

  /* ---------- Testimonials ---------- */
  .quote{border:1px solid var(--hair);background:var(--c-paper);padding:var(--space-5)}
  .quote__stars{color:#9A6B1A;font-size:.95rem;letter-spacing:.15em;line-height:1;margin-bottom:var(--space-3)}
  .quote p{font-family:var(--ff-display);font-size:var(--fs-h3);line-height:1.35;margin:0 0 var(--space-4)}
  .quote__by{font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.06em;text-transform:uppercase;color:var(--text-on-paper-soft)}

  /* ---------- Image placeholder (until real photo dropped in) ---------- */
  .ph{display:grid;place-items:center;background:var(--hatch)}
  .ph__label{font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-paper-soft)}

  /* ---------- FAQ accordion ---------- */
  .faq{border-bottom:1px solid var(--line-soft)}
  .faq__item{border-top:1px solid var(--line-soft)}
  .faq__q{display:flex;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.2rem 0;cursor:pointer;
    font-family:var(--ff-display);font-size:clamp(1.15rem,1rem + .7vw,1.35rem)}
  .faq__sign{font-family:var(--ff-mono);font-size:1.25rem;color:var(--c-rust);flex-shrink:0;transition:transform var(--t) var(--ease)}
  .faq__item[open] .faq__sign{transform:rotate(45deg)}
  .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease)}
  .faq__item[open] .faq__a{grid-template-rows:1fr}
  .faq__a>div{overflow:hidden}
  .faq__a p{font-size:var(--fs-body);color:var(--text-body);line-height:1.6;max-width:64ch;padding-bottom:1.4rem}

  /* ---------- Loader veil ---------- */
  #intro{position:fixed;inset:0;z-index:var(--z-veil);background:var(--c-paper);display:grid;place-items:center}
  #intro .star-ico{width:clamp(3.5rem,9vw,5.5rem);color:var(--c-ink)}
  #intro svg path,#intro svg rect{fill:none;stroke:var(--c-ink);stroke-width:5}
  html:not(.js) #intro{display:none}
  @media (prefers-reduced-motion:reduce){#intro{display:none}}

  /* ---------- Tier color accents ---------- */
  .tier{border-top:3px solid var(--accent,var(--tier-base))}
  .tier--base{--accent:var(--tier-base)}
  .tier--pro{--accent:var(--tier-pro)}
  .tier--elite{--accent:var(--tier-elite)}

  /* ---------- Services cards ---------- */
  .service{display:flex;flex-direction:column;gap:var(--space-2);background:var(--c-paper);
    border:1px solid var(--hair);padding:var(--space-5);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
  @media (hover:hover){.service:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}}
  .service__no{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:.12em;color:var(--c-rust)}
  .service__name{font-family:var(--ff-display);font-size:var(--fs-h3);line-height:1.1}
  .service p{font-size:var(--fs-body);color:var(--text-body);line-height:1.55}

  /* ---------- How it works ---------- */
  .step{display:flex;flex-direction:column;gap:var(--space-2)}
  .step__no{font-family:var(--ff-display);font-size:clamp(2.75rem,2rem + 2.6vw,3.75rem);line-height:.9;color:var(--c-rust)}
  .step__name{font-family:var(--ff-display);font-size:var(--fs-h3)}
  .step p{font-size:var(--fs-body);color:var(--text-body);line-height:1.55;max-width:34ch}

  /* ---------- Rated badge / break-even / CTA text ---------- */
  .rated{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:.04em;color:var(--text-on-paper-soft);margin-top:var(--space-3)}
  .rated__stars{color:#9A6B1A;letter-spacing:.12em;margin-right:.4em}
  .receipt__breakeven{font-family:var(--ff-mono);font-size:var(--fs-small);color:var(--text-body);line-height:1.5;margin-top:var(--space-3)}
  .receipt__breakeven b{color:var(--c-rust)}
  .cta__text{font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:.04em;color:#F3DCCD;margin-top:var(--space-4)}
  .cta__text a{border-bottom:1px solid currentColor;white-space:nowrap}

  /* ---------- Persistent mobile booking dock (book + text) ---------- */
  .bookbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:stretch;
    font-family:var(--ff-mono);font-size:var(--fs-mono);letter-spacing:var(--tracking-label);text-transform:uppercase;
    transform:translateY(115%);transition:transform var(--t) var(--ease);box-shadow:0 -8px 24px rgba(33,30,26,.22)}
  .bookbar__book{flex:1;display:flex;align-items:center;justify-content:center;gap:.5em;
    background:var(--c-rust);color:var(--btn-label);
    padding:.95rem 1rem;padding-bottom:calc(.95rem + env(safe-area-inset-bottom))}
  .bookbar__sms{display:flex;align-items:center;background:var(--c-ink);color:var(--c-paper);
    padding:.95rem 1.1rem;padding-bottom:calc(.95rem + env(safe-area-inset-bottom))}
  .bookbar.is-visible{transform:none}
  @media (min-width:52rem){.bookbar{display:none}}

  /* ---------- Before/after compare slider ---------- */
  .ba__win{cursor:ew-resize}
  .ba__win img{user-select:none;-webkit-user-drag:none}
  .ba__top{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50)*1%) 0 0)}
  .ba__top picture{position:absolute;inset:0}
  .ba__top img{width:100%;height:100%;object-fit:cover}
  .ba__handle{position:absolute;top:0;bottom:0;left:calc(var(--pos,50)*1%);width:2px;margin-left:-1px;
    background:var(--c-paper);box-shadow:0 0 0 1px rgba(33,30,26,.35);pointer-events:none;z-index:2}
  .ba__handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:var(--radius-pill);
    background:var(--c-paper);border:1px solid var(--hair);font-size:1.05rem;color:var(--c-ink)}
  .ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
    touch-action:pan-y;-webkit-appearance:none;appearance:none;z-index:3}
  .ba__win:focus-within .ba__handle::after{outline:2px solid var(--focus);outline-offset:2px}
  .ba__tag{position:absolute;top:10px;z-index:2;background:rgba(242,236,224,.85);padding:3px 8px;pointer-events:none}
  .ba__tag--l{left:10px}
  .ba__tag--r{right:10px}

  /* ---------- Gallery lightbox ---------- */
  #work .keyline__win:not(.ba__win){cursor:zoom-in}
  .lightbox{position:fixed;inset:0;z-index:210;background:rgba(33,30,26,.94);display:grid;place-items:center;padding:var(--space-6)}
  .lightbox[hidden]{display:none}
  .lightbox figure{max-width:min(68rem,100%);margin:0}
  .lightbox img{max-height:78vh;width:auto;max-width:100%;margin-inline:auto;
    background:var(--c-paper);padding:var(--keyline-pad);box-shadow:0 0 0 1px var(--hair)}
  .lightbox figcaption{margin-top:.75rem;text-align:center;color:var(--text-on-ink-soft);
    font-family:var(--ff-mono);font-size:var(--fs-caption);letter-spacing:.07em;text-transform:uppercase}
  .lightbox__btn{position:absolute;display:grid;place-items:center;width:2.9rem;height:2.9rem;
    color:var(--c-paper);font-size:1.35rem;line-height:1;border:1px solid var(--line-on-ink);background:rgba(33,30,26,.55);
    transition:background-color var(--t) var(--ease),border-color var(--t) var(--ease)}
  .lightbox__btn:hover{background:var(--c-rust);border-color:var(--c-rust)}
  .lightbox__close{top:1rem;right:1rem}
  .lightbox__prev{left:.8rem;top:50%;translate:0 -50%}
  .lightbox__next{right:.8rem;top:50%;translate:0 -50%}
}