/* =========================================================================
   ElmsPark Layouts — Direction D: Immersive Device Showcase
   Vanilla CSS. ElmsPark house tokens. Bunny fonts (loaded in index.html).
   ========================================================================= */

:root{
  --paper:#F7F5F1;
  --paper-2:#EFECE5;
  --ink:#14110E;
  --ink-soft:#5C564E;
  --signal:#D4452B;
  --ghost:#C9C5BD;
  --rule:rgba(20,17,14,.12);
  --rule-2:rgba(20,17,14,.07);
  --display:"Fraunces",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --chrome:rgba(20,17,14,.82);     /* device top bar */
  --chrome-soft:rgba(20,17,14,.06);
  --shadow-1:0 1px 2px rgba(20,17,14,.06), 0 8px 24px rgba(20,17,14,.07);
  --shadow-2:0 18px 60px rgba(20,17,14,.20), 0 4px 14px rgba(20,17,14,.10);
  --maxw:1320px;
  --gap:clamp(28px,4vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
/* the [hidden] attribute must always win over any element display rule */
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }

img{ display:block; max-width:100%; height:auto }
button{ font:inherit; color:inherit; cursor:pointer }
a{ color:inherit }

.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

:focus-visible{
  outline:3px solid var(--signal);
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:fixed; top:-100px; left:16px; z-index:200;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; border-radius:8px; font-family:var(--mono);
  font-size:13px; text-decoration:none; transition:top .2s var(--ease);
}
.skip-link:focus{ top:16px }

/* ============================ MASTHEAD ================================== */
.masthead{
  border-bottom:1px solid var(--rule);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(212,69,43,.05), transparent 55%),
    var(--paper);
}
.masthead__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(28px,5vw,64px) var(--gap) clamp(24px,3.5vw,44px);
  display:grid;
  gap:clamp(18px,2.6vw,30px);
}
.brand{ display:flex; align-items:baseline; gap:14px }
.wordmark{
  font-family:var(--display);
  font-weight:900;
  font-size:clamp(26px,3vw,34px);
  letter-spacing:-.01em;
  line-height:1;
}
.wordmark .accent{ color:var(--signal) }
.brand__sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-soft);
  padding-bottom:.18em;
}
.thesis{
  margin:0;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(36px,7vw,84px);
  line-height:.98;
  letter-spacing:-.025em;
  max-width:16ch;
}
.thesis__hold{ font-style:italic; color:var(--ink-soft) }
.counts{
  margin:0;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--ink-soft);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.counts__big{ color:var(--ink); font-weight:500 }
.counts__sep{ color:var(--ghost) }

/* ============================ SEARCH =================================== */
.searchbar{ position:sticky; top:0; z-index:60;
  background:rgba(247,245,241,.86); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--rule);
}
.searchbar__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:14px var(--gap);
  display:flex; gap:14px; align-items:center;
}
.search{
  flex:1; display:flex; align-items:center; gap:10px;
  background:var(--paper); border:1px solid var(--rule);
  border-radius:999px; padding:0 16px; height:48px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search:focus-within{ border-color:var(--ink); box-shadow:0 0 0 4px rgba(20,17,14,.05) }
.search__icon{ width:18px; height:18px; flex:none; fill:none; stroke:var(--ink-soft); stroke-width:2; stroke-linecap:round }
.search__input{
  flex:1; border:0; background:none; outline:none;
  font-family:var(--mono); font-size:14px; color:var(--ink); min-width:0;
}
.search__input::placeholder{ color:var(--ink-soft); opacity:.8 }
.search__clear{
  border:0; background:var(--chrome-soft); border-radius:50%;
  width:26px; height:26px; font-size:18px; line-height:1; color:var(--ink-soft);
  display:grid; place-items:center; flex:none;
}
.search__clear:hover{ background:var(--ghost); color:var(--ink) }

.filters-btn{
  display:inline-flex; align-items:center; gap:9px;
  height:48px; padding:0 20px; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  transition:transform .2s var(--ease), opacity .2s var(--ease);
}
.filters-btn:hover{ opacity:.9 }
.filters-btn:active{ transform:scale(.98) }
.filters-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.filters-btn__count{
  background:var(--signal); color:#fff; border-radius:999px;
  min-width:20px; height:20px; padding:0 6px; font-size:11px;
  display:inline-grid; place-items:center; font-weight:500;
}

/* ======================= CATEGORY SCROLLER ============================= */
.scroller{
  max-width:var(--maxw); margin:0 auto; padding:18px var(--gap) 6px;
}
.scroller__row{
  list-style:none; margin:0; padding:4px 0 10px;
  display:flex; gap:10px; overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--ghost) transparent;
}
.scroller__row::-webkit-scrollbar{ height:6px }
.scroller__row::-webkit-scrollbar-thumb{ background:var(--ghost); border-radius:999px }
.pill{
  scroll-snap-align:start; flex:none;
  display:inline-flex; align-items:center; gap:8px;
  min-height:44px; padding:0 18px;
  border:1px solid var(--rule); border-radius:999px;
  background:var(--paper); color:var(--ink);
  font-family:var(--mono); font-size:13px; letter-spacing:.01em;
  white-space:nowrap; position:relative;
  transition:border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.pill:hover{ border-color:var(--ink) }
.pill__count{ color:var(--ink-soft); font-size:11px }
.pill[aria-pressed="true"]{
  border-color:var(--signal); color:var(--ink);
  background:rgba(212,69,43,.07);
}
.pill[aria-pressed="true"] .pill__count{ color:var(--signal) }
/* not colour alone: underline marks active */
.pill[aria-pressed="true"]::after{
  content:""; position:absolute; left:18px; right:18px; bottom:-9px; height:2px;
  background:var(--signal); border-radius:2px;
}

/* ======================== ACTIVE FILTER BAR =========================== */
.activebar{
  max-width:var(--maxw); margin:0 auto; padding:4px var(--gap) 0;
}
.activebar__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:12px 0; border-top:1px dashed var(--rule);
}
.activebar__label{ font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase }
.activebar__pills{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.apill{
  display:inline-flex; align-items:center; gap:8px;
  min-height:32px; padding:0 6px 0 12px;
  background:var(--ink); color:var(--paper);
  border-radius:999px; font-family:var(--mono); font-size:12px;
}
.apill__kind{ opacity:.55; text-transform:uppercase; font-size:10px; letter-spacing:.08em }
.apill__x{
  border:0; background:rgba(255,255,255,.16); color:var(--paper);
  width:24px; height:24px; min-width:24px; border-radius:50%;
  font-size:15px; line-height:1; display:grid; place-items:center;
}
.apill__x:hover{ background:var(--signal) }
.activebar__clear{
  margin-left:auto; border:0; background:none; color:var(--signal);
  font-family:var(--mono); font-size:12px; letter-spacing:.03em;
  text-decoration:underline; text-underline-offset:3px; min-height:32px;
}

/* ========================= RESULT LINE ================================ */
.resultline{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gap) 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--mono);
}
.resultline__count{ font-size:13px; color:var(--ink-soft); letter-spacing:.03em }
.resultline__sort{ display:inline-flex; align-items:center; gap:10px }
.resultline__sort label{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em }
.sort{
  font-family:var(--mono); font-size:13px; color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:8px;
  padding:8px 30px 8px 12px; min-height:40px; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235C564E' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.sort:hover{ border-color:var(--ink) }

/* ============================== GRID ================================== */
.grid{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(28px,4vw,56px) var(--gap) clamp(48px,7vw,96px);
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(40px,5vw,84px) clamp(36px,4.5vw,72px);
  outline:none;
}
@media (max-width:900px){
  .grid{ grid-template-columns:1fr; gap:clamp(44px,9vw,72px) }
}

/* Portfolio cadence: a generous top margin on the second column gives an
   alternating offset rhythm. Column-based (not nth-child), so it survives the
   CSS-order reordering that filtering applies and never collides with reveal. */
@media (min-width:901px){
  .grid > .card:nth-of-type(2n){ margin-top:clamp(36px,4vw,72px) }
}

/* ============================== CARD ================================== */
.card{
  position:relative;
  display:flex; flex-direction:column;
  content-visibility:auto;
  contain-intrinsic-size:auto 560px;
}
.card.is-hidden{ display:none }

.card__btn{
  display:block; width:100%; text-align:left;
  border:0; background:none; padding:0;
}

/* device frame */
.frame{
  position:relative;
  border-radius:16px;
  background:var(--frame-bg, #efece5);
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  will-change:transform;
}
.frame__bar{
  display:flex; align-items:center; gap:12px;
  height:40px; padding:0 14px;
  background:var(--chrome);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.dots{ display:flex; gap:7px; flex:none }
.dots span{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.32) }
.dots span:nth-child(1){ background:rgba(255,255,255,.42) }
.addr{
  flex:1; min-width:0;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10);
  border-radius:8px; height:24px; padding:0 12px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.01em;
  color:rgba(255,255,255,.78);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.addr__lock{ width:10px; height:10px; flex:none; fill:none; stroke:rgba(255,255,255,.6); stroke-width:1.6 }
.addr__url{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.frame__shot{
  display:block; width:100%; height:auto; aspect-ratio:1440/980;
  object-fit:cover; object-position:top center;
  background:var(--frame-bg, #efece5);
}

/* hover affordance */
.card__affordance{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px 18px 18px;
  background:linear-gradient(to top, rgba(20,17,14,.55), transparent);
  display:flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:13px; letter-spacing:.04em;
  color:#fff;
  opacity:0; transform:translateY(8px);
  transition:opacity .26s var(--ease), transform .26s var(--ease);
  pointer-events:none;
}
.card__affordance svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }

/* hover/focus lift */
@media (hover:hover){
  .card__btn:hover .frame,
  .card__btn:focus-visible .frame{ transform:translateY(-6px) scale(1.012); box-shadow:var(--shadow-2) }
  .card__btn:hover .addr,
  .card__btn:focus-visible .addr{ background:rgba(255,255,255,.18); color:#fff }
  .card__btn:hover .card__affordance,
  .card__btn:focus-visible .card__affordance{ opacity:1; transform:translateY(0) }
}
/* keyboard focus always shows affordance even without hover support */
.card__btn:focus-visible .frame{ transform:translateY(-6px) scale(1.012); box-shadow:var(--shadow-2) }
.card__btn:focus-visible .addr{ background:rgba(255,255,255,.18); color:#fff }
.card__btn:focus-visible .card__affordance{ opacity:1; transform:translateY(0) }
.card__btn:focus-visible{ outline:none }
.card__btn:focus-visible .frame{ outline:3px solid var(--signal); outline-offset:4px }

/* card meta below frame */
.card__meta{ padding:18px 4px 0; display:grid; gap:8px }
.card__topline{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft);
}
.card__chip{
  display:inline-flex; align-items:center; gap:6px;
}
.card__chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent-dot,var(--signal)) }
.card__title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(22px,2.4vw,29px); line-height:1.08;
  letter-spacing:-.015em; margin:0;
}
.card__tag{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:15px; line-height:1.4; color:var(--ink-soft); margin:0;
  max-width:48ch;
}
.card__foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:2px; font-family:var(--mono); font-size:11px; color:var(--ink-soft);
}
.card__plugin{ color:var(--ink); border:1px solid var(--rule); border-radius:999px; padding:3px 9px }
.card__lh{ display:inline-flex; align-items:center; gap:5px }
.card__lh strong{ color:var(--ink); font-weight:500 }

/* scroll reveal — applied only when JS enables motion.
   Translate only; no nth-child variant so it can never strand a card offset. */
.js-reveal .card{ opacity:0; transform:translateY(28px) }
.js-reveal .card--reveal{ opacity:1; transform:translateY(0);
  transition:opacity .6s var(--ease), transform .6s var(--ease); }

/* ============================ ZERO STATE ============================== */
.zerostate{
  max-width:640px; margin:0 auto; padding:40px var(--gap) 120px; text-align:center;
}
.zerostate__head{ font-family:var(--display); font-size:clamp(26px,4vw,38px); margin:0 0 12px; letter-spacing:-.02em }
.zerostate__body{ font-family:var(--mono); font-size:14px; color:var(--ink-soft); margin:0 0 24px; line-height:1.7 }
.zerostate__clear{
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:999px; padding:13px 26px; font-family:var(--mono); font-size:13px;
}

/* ============================== FOOTER =============================== */
.sitefoot{
  border-top:1px solid var(--rule);
  max-width:var(--maxw); margin:0 auto; padding:36px var(--gap);
}
.sitefoot p{
  margin:0; font-family:var(--display); font-style:italic;
  font-size:clamp(16px,2vw,21px); color:var(--ink-soft);
}

/* ============================ OVERLAY (filters) ====================== */
.overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(20,17,14,.4);
  display:flex; justify-content:flex-end;
  opacity:0; transition:opacity .28s var(--ease);
}
.overlay.is-open{ opacity:1 }
.overlay__panel{
  width:min(460px,100%); height:100%;
  background:var(--paper);
  display:flex; flex-direction:column;
  transform:translateX(20px); transition:transform .32s var(--ease);
  box-shadow:-20px 0 60px rgba(20,17,14,.2);
}
.overlay.is-open .overlay__panel{ transform:translateX(0) }
.overlay__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 26px; border-bottom:1px solid var(--rule);
}
.overlay__title{ font-family:var(--display); font-weight:600; font-size:26px; margin:0; letter-spacing:-.01em }
.overlay__close{
  border:0; background:var(--chrome-soft); width:40px; height:40px; border-radius:50%;
  font-size:24px; line-height:1; color:var(--ink); display:grid; place-items:center;
}
.overlay__close:hover{ background:var(--ghost) }
.overlay__body{ flex:1; overflow-y:auto; padding:8px 26px 26px }
.fgroup{ padding:22px 0; border-bottom:1px solid var(--rule-2) }
.fgroup:last-child{ border-bottom:0 }
.fgroup__legend{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); padding:0; margin:0 0 14px;
  display:flex; align-items:baseline; gap:8px;
}
.fgroup__hint{ font-size:10px; color:var(--ghost); letter-spacing:.04em; text-transform:none }
.fopt{
  display:flex; align-items:center; gap:11px; padding:7px 0;
  font-family:var(--mono); font-size:13px; cursor:pointer; min-height:32px;
}
.fopt input{ width:18px; height:18px; accent-color:var(--signal); flex:none; cursor:pointer }
.fopt__label{ flex:1 }
.fopt__count{ color:var(--ink-soft); font-size:11px }
.fopt.is-zero{ color:var(--ghost); cursor:default }
.fopt.is-zero .fopt__count{ color:var(--ghost) }
.fopt.is-zero input{ cursor:default }
.overlay__foot{
  display:flex; gap:12px; padding:18px 26px;
  border-top:1px solid var(--rule); background:var(--paper);
}
.btn{
  flex:1; min-height:50px; border-radius:999px; border:1px solid var(--ink);
  font-family:var(--mono); font-size:13px; letter-spacing:.03em;
  transition:transform .18s var(--ease), opacity .18s var(--ease);
}
.btn:active{ transform:scale(.98) }
.btn--ghost{ background:var(--paper); color:var(--ink) }
.btn--ghost:hover{ background:var(--paper-2) }
.btn--signal{ background:var(--ink); color:var(--paper) }
.btn--signal:hover{ opacity:.92 }

/* ============================ DETAIL TAKEOVER ======================== */
.detail{
  position:fixed; inset:0; z-index:140;
  background:var(--d-bg1,#14110E);
  color:var(--d-ink,#F7F5F1);
  opacity:0; transition:opacity .3s var(--ease);
  overflow:hidden;
}
.detail.is-open{ opacity:1 }
.detail__scroll{
  height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ .detail__scroll{ scroll-behavior:auto } }

.dt{ max-width:1160px; margin:0 auto; padding:0 clamp(20px,5vw,60px) }

.dt__close{
  position:fixed; top:18px; right:18px; z-index:5;
  width:48px; height:48px; border-radius:50%;
  background:rgba(0,0,0,.35); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:24px; line-height:1; display:grid; place-items:center;
  backdrop-filter:blur(6px);
}
.dt__close:hover{ background:rgba(0,0,0,.55) }

/* hero band */
.dt__hero{
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,56px);
  align-items:center; padding-top:clamp(56px,8vw,96px); padding-bottom:clamp(36px,5vw,64px);
}
@media (max-width:860px){ .dt__hero{ grid-template-columns:1fr; padding-top:74px } }
.dt__heroframe .frame{ box-shadow:0 30px 80px rgba(0,0,0,.4) }
.dt__heroframe .frame__shot{ aspect-ratio:1440/980 }
.dt__kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--d-ink,#F7F5F1); opacity:.7; margin:0 0 16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.dt__kicker .dot{ width:8px; height:8px; border-radius:50%; background:var(--d-accent,#D4452B); flex:none }
.dt__title{
  font-family:var(--display); font-weight:900; line-height:.96; letter-spacing:-.03em;
  font-size:clamp(38px,6vw,72px); margin:0 0 18px;
}
.dt__tag{
  font-family:var(--display); font-style:italic; font-size:clamp(17px,2.2vw,23px);
  line-height:1.45; margin:0 0 24px; opacity:.85; max-width:42ch;
}
.dt__persona{
  font-family:var(--mono); font-size:13px; line-height:1.8; opacity:.8;
  border-top:1px solid var(--d-rule,rgba(255,255,255,.18)); padding-top:18px;
}
.dt__persona strong{ font-weight:500; opacity:1 }

/* section heads */
.dt__sec{ padding:clamp(40px,5vw,68px) 0; border-top:1px solid var(--d-rule,rgba(255,255,255,.16)) }
.dt__sechead{
  font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.6; margin:0 0 26px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* filmstrip */
.viewtoggle{ display:inline-flex; gap:0; border:1px solid var(--d-rule,rgba(255,255,255,.28)); border-radius:999px; overflow:hidden }
.viewtoggle button{
  background:none; color:var(--d-ink,#fff); padding:8px 16px; min-height:36px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  border:0; opacity:.6;
}
.viewtoggle button[aria-pressed="true"]{ background:var(--d-ink,#F7F5F1); color:var(--d-bg1,#14110E); opacity:1 }
.filmstrip{
  display:flex; gap:clamp(18px,2.5vw,32px); overflow-x:auto; padding:6px 0 22px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--d-accent,#D4452B) transparent;
}
.filmstrip::-webkit-scrollbar{ height:8px }
.filmstrip::-webkit-scrollbar-thumb{ background:var(--d-accent,#D4452B); border-radius:999px }
.plate{ flex:none; width:min(360px,72vw); scroll-snap-align:start }
.plate.is-mobile{ width:min(220px,52vw) }
.plate__btn{ display:block; width:100%; border:0; background:none; padding:0; text-align:left }
.plate .frame{ background:rgba(255,255,255,.04); box-shadow:0 16px 44px rgba(0,0,0,.32) }
.plate .frame__shot{ aspect-ratio:1440/980 }
.plate.is-mobile .frame__shot{ aspect-ratio:414/896 }
.plate .frame__bar{ height:34px }
.plate__btn:hover .frame, .plate__btn:focus-visible .frame{ transform:translateY(-4px) }
.plate__cap{
  font-family:var(--mono); font-size:12px; opacity:.8; margin:14px 2px 0; line-height:1.5;
}
.plate__cap small{ display:block; opacity:.55; font-size:10px; letter-spacing:.06em; text-transform:uppercase; margin-top:3px }

/* supporting band */
.dt__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px) }
@media (max-width:760px){ .dt__cols{ grid-template-columns:1fr } }
.dt__block h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  opacity:.55; margin:0 0 14px; font-weight:500;
}
.dt__demo{ font-family:var(--display); font-size:clamp(17px,2vw,21px); line-height:1.5; margin:0 0 8px }
.dt__demover{ font-family:var(--mono); font-size:12px; opacity:.6 }
.featurelist{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.featurelist li{
  font-family:var(--mono); font-size:13.5px; line-height:1.5; padding-left:24px; position:relative; opacity:.92;
}
.featurelist li::before{
  content:""; position:absolute; left:0; top:.45em; width:11px; height:7px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  opacity:.85; transform:rotate(-45deg);
}
.taglist{ display:flex; flex-wrap:wrap; gap:8px }
.tag{
  font-family:var(--mono); font-size:11.5px; padding:6px 11px;
  border:1px solid var(--d-rule,rgba(255,255,255,.22)); border-radius:999px; opacity:.85;
}

/* lighthouse numerals */
.lh{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px }
@media (max-width:520px){ .lh{ grid-template-columns:repeat(2,1fr) } }
.lh__cell{ border-top:2px solid var(--d-rule,rgba(255,255,255,.2)); padding-top:14px }
.lh__num{ font-family:var(--display); font-weight:900; font-size:clamp(40px,7vw,64px); line-height:.9; letter-spacing:-.03em }
.lh__lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; opacity:.6; margin-top:8px }

/* narrative */
.dt__narr{ font-family:var(--display); font-size:clamp(18px,2.4vw,26px); line-height:1.55; max-width:34ch; margin:0; letter-spacing:-.01em }

/* sticky CTA bar */
.dt__cta{
  position:sticky; bottom:0; z-index:4;
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  padding:16px clamp(20px,5vw,60px);
  background:var(--d-bg2,rgba(0,0,0,.4));
  border-top:1px solid var(--d-rule,rgba(255,255,255,.18));
  backdrop-filter:blur(10px);
  margin-top:clamp(20px,4vw,40px);
}
.dt__cta .grow{ flex:1; min-width:120px }
.dt__cta .ctalabel{ font-family:var(--mono); font-size:12px; opacity:.7; display:none }
.dbtn{
  display:inline-flex; align-items:center; gap:8px;
  min-height:50px; padding:0 22px; border-radius:999px;
  font-family:var(--mono); font-size:13px; letter-spacing:.02em;
  border:1px solid var(--d-ink,#fff); text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease), opacity .18s var(--ease);
}
.dbtn:active{ transform:scale(.98) }
.dbtn svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
/* primary CTA uses ink fill + bg1 label — always passes contrast for every
   per-site palette (ink/bg1 is 8:1 to 21:1), with an accent underline to keep
   the brand colour present without relying on accent for the text background */
.dbtn--primary{ background:var(--d-ink,#14110E); color:var(--d-bg1,#F7F5F1); border-color:var(--d-ink,#14110E); position:relative }
.dbtn--primary::after{ content:""; position:absolute; left:22px; right:22px; bottom:9px; height:2px; background:var(--d-accent,#D4452B); border-radius:2px; opacity:.9 }
.dbtn--primary:hover{ opacity:.92 }
.dbtn--ghost{ background:transparent; color:var(--d-ink,#fff) }
.dbtn--ghost:hover{ background:var(--d-rule,rgba(255,255,255,.12)) }
@media (min-width:600px){ .dt__cta .ctalabel{ display:block } }

/* ============================ LIGHTBOX =============================== */
.lightbox{
  position:fixed; inset:0; z-index:160;
  background:rgba(20,17,14,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; gap:18px;
  opacity:0; transition:opacity .25s var(--ease);
}
.lightbox.is-open{ opacity:1 }
.lightbox__img{ max-width:min(1100px,92vw); max-height:78vh; width:auto; border-radius:10px; box-shadow:0 30px 90px rgba(0,0,0,.5) }
.lightbox__cap{ color:var(--paper); font-family:var(--mono); font-size:13px; opacity:.85; margin:0; text-align:center }
.lightbox__close{
  position:fixed; top:18px; right:18px;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.25);
  font-size:24px; line-height:1; display:grid; place-items:center;
}
.lightbox__close:hover{ background:rgba(255,255,255,.24) }

/* ====================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .js-reveal .card{ opacity:1!important; transform:none!important }
  .frame{ will-change:auto }
}

/* ====================== SMALL SCREENS =============================== */
@media (max-width:560px){
  :root{ --gap:20px }
  .searchbar__inner{ flex-wrap:wrap }
  .filters-btn{ flex:1; justify-content:center }
  .search{ flex:1 1 100% }
  .frame{ border-radius:12px }
  .frame__bar{ height:34px }
  .addr{ font-size:10.5px }
}