/* ========================================================================
   1. TOKENS
   ======================================================================== */
:root{
  /* Paper — the light surfaces */
  --bone:      #f6f3ec;
  --bone-2:    #ece7db;
  --bone-3:    #ddd6c6;
  --bone-4:    #c9c0ad;

  /* Ink — the dark surfaces. Warm, green-shifted black, not neutral grey. */
  --ink:       #12150f;
  --ink-2:     #1b2016;
  --ink-3:     #272e21;
  --ink-4:     #3a4331;
  --ink-5:     #55604a;

  /* Brand green — pulled from the Highland Rim mark */
  --green:     #1e4a2b;
  --green-2:   #2a6338;
  --green-3:   #3d8450;
  --green-4:   #6aa87b;

  /* Action / accent — equipment orange */
  --rust:      #b64c17;
  --rust-2:    #d4661f;
  --rust-3:    #ec8b3a;
  --amber:     #e6a83a;

  /* Status */
  --sold:      #9d2b1c;
  --pending:   #b8801a;
  --live:      #2f7d45;

  --steel:     #78827a;

  /* Text roles */
  --tx:         var(--ink);
  --tx-soft:    #4b5347;
  --tx-mute:    #6d766b;
  --tx-inv:     var(--bone);
  --tx-inv-soft:#b4b8ac;
  --tx-inv-mute:#868c7e;

  /* Rules */
  --rule:       rgba(18,21,15,.14);
  --rule-2:     rgba(18,21,15,.28);
  --rule-inv:   rgba(246,243,236,.16);
  --rule-inv-2: rgba(246,243,236,.30);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Rhythm */
  --gut: clamp(1.1rem, 3.4vw, 2rem);
  --max: 1360px;
  --max-narrow: 780px;
  --sect: clamp(3.6rem, 9vw, 7.5rem);

  --shadow-1: 0 1px 2px rgba(18,21,15,.06), 0 2px 8px rgba(18,21,15,.05);
  --shadow-2: 0 2px 4px rgba(18,21,15,.07), 0 12px 30px rgba(18,21,15,.10);
  --shadow-3: 0 4px 10px rgba(18,21,15,.10), 0 26px 60px rgba(18,21,15,.16);

  --ease: cubic-bezier(.2,.7,.3,1);

  /* Film grain — keeps big flat areas from looking like a template */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ========================================================================
   2. RESET / BASE
   ======================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
body{
  margin:0;
  background:var(--bone);
  color:var(--tx);
  font-family:var(--text);
  font-size:clamp(1rem,.97rem + .16vw,1.075rem);
  line-height:1.62;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }
h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:800;
  line-height:1.03;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:clamp(2.5rem,1.5rem + 4.4vw,5rem); }
h2{ font-size:clamp(1.95rem,1.3rem + 2.6vw,3.4rem); }
h3{ font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem); letter-spacing:-.015em; }
h4{ font-size:1.1rem; letter-spacing:-.008em; font-weight:700; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-underline-offset:.18em; text-decoration-thickness:1px; }
strong,b{ font-weight:650; }
hr{ border:0; border-top:1px solid var(--rule); margin:2rem 0; }
ul,ol{ margin:0 0 1.05em; padding-left:1.15em; }
li{ margin-bottom:.4em; }
:focus-visible{ outline:3px solid var(--rust-2); outline-offset:2px; border-radius:2px; }
::selection{ background:var(--amber); color:var(--ink); }

/* ========================================================================
   3. LAYOUT PRIMITIVES
   ======================================================================== */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.wrap-narrow{ width:100%; max-width:var(--max-narrow); margin-inline:auto; padding-inline:var(--gut); }
.sect{ padding-block:var(--sect); position:relative; }
.sect-tight{ padding-block:clamp(2.4rem,5vw,4rem); }

.band-ink{ background:var(--ink); color:var(--tx-inv); }
.band-ink-2{ background:var(--ink-2); color:var(--tx-inv); }
.band-green{ background:var(--green); color:var(--tx-inv); }
.band-bone-2{ background:var(--bone-2); }
.band-ink h1,.band-ink h2,.band-ink h3,.band-ink-2 h2,.band-green h2{ color:var(--bone); }
.grain::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--grain); opacity:.05; mix-blend-mode:overlay;
}

/* Hazard stripe — used as a thin structural divider, never as decoration for
   its own sake. */
.stripe{
  height:7px; width:100%;
  background:repeating-linear-gradient(-45deg,
    var(--ink) 0 9px, var(--amber) 9px 18px);
  opacity:.9;
}
.stripe-thin{ height:4px; }

/* ========================================================================
   4. SECTION HEADERS  —  "01 / ON THE LOT"
   ======================================================================== */
.eyebrow{
  font-family:var(--display);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--rust);
  margin:0 0 .85rem;
  display:flex; align-items:center; gap:.7rem;
}
.band-ink .eyebrow,.band-ink-2 .eyebrow,.band-green .eyebrow{ color:var(--amber); }
.eyebrow::before{
  content:attr(data-num);
  font-variant-numeric:tabular-nums;
  color:var(--tx-mute);
  padding-right:.7rem;
  border-right:1px solid var(--rule-2);
}
.band-ink .eyebrow::before,.band-ink-2 .eyebrow::before,.band-green .eyebrow::before{
  color:var(--tx-inv-mute); border-right-color:var(--rule-inv-2);
}
.eyebrow[data-num=""]::before,.eyebrow:not([data-num])::before{ display:none; }

.sect-head{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:1.4rem 2rem;
  margin-bottom:clamp(1.8rem,4vw,3rem);
}
.sect-head h2{ margin:0; max-width:22ch; }
.sect-head .lede{ max-width:46ch; color:var(--tx-soft); margin:0; }
.band-ink .sect-head .lede,.band-ink-2 .sect-head .lede{ color:var(--tx-inv-soft); }

/* ========================================================================
   5. BUTTONS
   ======================================================================== */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--bone); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--display); font-weight:700; font-size:.94rem;
  letter-spacing:.03em; text-transform:uppercase;
  padding:.92em 1.5em; border:2px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  text-decoration:none; cursor:pointer; border-radius:2px;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
  box-shadow:0 2px 0 rgba(18,21,15,.22);
  text-align:center; line-height:1.15;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 5px 0 rgba(18,21,15,.22); }
.btn:active{ transform:translateY(0); box-shadow:0 1px 0 rgba(18,21,15,.22); }
.btn-call{ --btn-bg:var(--rust); --btn-bd:var(--rust); --btn-fg:#fff; }
.btn-call:hover{ --btn-bg:var(--rust-2); }
.btn-green{ --btn-bg:var(--green); --btn-bd:var(--green); --btn-fg:#fff; }
.btn-green:hover{ --btn-bg:var(--green-2); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--ink); box-shadow:none; }
.btn-ghost:hover{ --btn-bg:var(--ink); --btn-fg:var(--bone); box-shadow:none; }
.btn-ghost-inv{ --btn-bg:transparent; --btn-fg:var(--bone); --btn-bd:rgba(246,243,236,.55); box-shadow:none; }
.btn-ghost-inv:hover{ --btn-bg:var(--bone); --btn-fg:var(--ink); --btn-bd:var(--bone); box-shadow:none; }
.btn-lg{ font-size:1.02rem; padding:1.05em 1.9em; }
.btn-sm{ font-size:.8rem; padding:.6em 1em; }
.btn-block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* ========================================================================
   6. HEADER / NAV
   ======================================================================== */
.hdr{
  position:sticky; top:0; z-index:60;
  background:var(--ink); color:var(--tx-inv);
  border-bottom:1px solid var(--rule-inv);
}
.hdr-in{
  display:flex; align-items:center; gap:1.2rem;
  min-height:70px; padding-block:.55rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; margin-right:auto; }
.brand-mark{
  width:40px; height:44px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--green-2); color:var(--bone);
  clip-path:polygon(50% 0,100% 22%,100% 78%,50% 100%,0 78%,0 22%);
  font-family:var(--display); font-weight:800; font-size:.92rem; letter-spacing:-.03em;
}
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:var(--display); font-weight:800; font-size:1.02rem;
  letter-spacing:-.02em; text-transform:uppercase; white-space:nowrap;
}
.brand-sub{
  font-size:.62rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tx-inv-mute); margin-top:.28rem; font-weight:600;
}
.nav{ display:flex; align-items:center; gap:.15rem; }
.nav a{
  font-family:var(--display); font-weight:600; font-size:.86rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--tx-inv-soft); text-decoration:none;
  padding:.65rem .8rem; border-radius:2px; position:relative;
  transition:color .15s var(--ease);
  white-space:nowrap;
}
.nav a:hover{ color:var(--bone); }
.nav a[aria-current="page"]{ color:var(--bone); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:.32rem;
  height:2px; background:var(--amber);
}
.hdr .btn{ box-shadow:none; }
.hdr-call{ display:inline-flex; }

.navtoggle{
  display:none; background:none; border:1px solid var(--rule-inv-2);
  color:var(--bone); width:44px; height:40px; border-radius:2px;
  align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.navtoggle span{ display:block; width:19px; height:2px; background:currentColor; position:relative; }
.navtoggle span::before,.navtoggle span::after{
  content:""; position:absolute; left:0; width:19px; height:2px; background:currentColor;
}
.navtoggle span::before{ top:-6px; } .navtoggle span::after{ top:6px; }

@media (max-width:1000px){
  .nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink-2); border-bottom:1px solid var(--rule-inv);
    padding:.5rem var(--gut) 1.1rem;
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.85rem .2rem; border-bottom:1px solid var(--rule-inv); font-size:.98rem; }
  .nav a[aria-current="page"]::after{ left:.2rem; right:auto; width:22px; bottom:.5rem; }
  .navtoggle{ display:inline-flex; }
}
@media (max-width:560px){
  .hdr-call .btn-txt-long{ display:none; }
  .hdr-in{ gap:.7rem; }
  /* The phone number is the point of the header on a phone. The wordmark
     gives up space for it rather than wrapping onto three lines. */
  .brand-sub{ display:none; }
  .brand-name{ font-size:.92rem; }
  .brand-mark{ width:34px; height:38px; font-size:.8rem; }
}
@media (max-width:420px){
  .brand-txt{ display:none; }
  .hdr-call .btn{ padding:.7em 1em; }
}

/* Sticky call bar, phones only */
.callbar{ display:none; }
@media (max-width:700px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    position:fixed; bottom:0; left:0; right:0; z-index:70;
    background:var(--rule-inv-2);
    box-shadow:0 -6px 24px rgba(18,21,15,.22);
  }
  .callbar a{
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    padding:.95rem .5rem; text-decoration:none;
    font-family:var(--display); font-weight:700; font-size:.9rem;
    letter-spacing:.05em; text-transform:uppercase;
    background:var(--rust); color:#fff;
  }
  .callbar a+a{ background:var(--ink); color:var(--bone); }
  body{ padding-bottom:56px; }
}

/* ========================================================================
   7. HERO
   ======================================================================== */
.hero{
  position:relative; background:var(--ink); color:var(--bone);
  min-height:clamp(520px,74vh,760px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.hero-img{ position:absolute; inset:0; }
.hero-img img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(10,12,8,.94) 0%, rgba(10,12,8,.72) 30%, rgba(10,12,8,.28) 62%, rgba(10,12,8,.42) 100%),
    linear-gradient(to right, rgba(10,12,8,.72) 0%, rgba(10,12,8,.12) 62%);
}
.hero-in{ position:relative; z-index:2; width:100%; padding-block:clamp(2.4rem,6vw,4.4rem); }
.hero h1{ margin:0 0 1rem; max-width:15ch; text-shadow:0 2px 24px rgba(0,0,0,.4); }
.hero-lede{
  font-size:clamp(1.06rem,1rem + .5vw,1.35rem);
  color:var(--tx-inv-soft); max-width:52ch; margin:0 0 1.9rem;
}
.hero-tag{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--bone); background:rgba(30,74,43,.85);
  border:1px solid rgba(246,243,236,.24);
  padding:.5rem .9rem; margin-bottom:1.4rem; border-radius:2px;
  backdrop-filter:blur(3px);
}
.hero-tag .dot{
  width:7px; height:7px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 0 3px rgba(230,168,58,.25);
}

/* Trust strip under the hero */
.trust{ background:var(--ink-2); border-top:1px solid var(--rule-inv); }
.trust-in{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--rule-inv);
}
.trust-cell{
  background:var(--ink-2); padding:1.35rem clamp(.9rem,2vw,1.6rem);
  display:flex; flex-direction:column; gap:.3rem;
}
.trust-cell .k{
  font-family:var(--display); font-weight:800; font-size:.98rem;
  letter-spacing:-.01em; color:var(--bone);
}
.trust-cell .v{ font-size:.85rem; color:var(--tx-inv-mute); line-height:1.45; }
@media (max-width:860px){ .trust-in{ grid-template-columns:repeat(2,1fr); } }

/* ========================================================================
   8. UNIT CARDS
   ======================================================================== */
.grid-units{
  display:grid; gap:clamp(1.2rem,2.6vw,2rem);
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
}
@media (max-width:700px){ .grid-units{ grid-template-columns:1fr; } }

.ucard{
  position:relative; display:flex; flex-direction:column;
  background:var(--bone); border:1px solid var(--rule);
  text-decoration:none; color:inherit; border-radius:3px;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  overflow:hidden;
}
.ucard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:var(--rule-2); }
.ucard-media{
  position:relative; aspect-ratio:4/3; background:var(--ink-3);
  overflow:hidden;
}
.ucard-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.ucard:hover .ucard-media img{ transform:scale(1.035); }
.ucard-vid{
  position:absolute; left:.6rem; bottom:.6rem; z-index:3;
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--green-2); color:var(--bone);
  font-family:var(--display); font-size:.68rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.32rem .55rem; border-radius:2px;
}
.ucard-count{
  position:absolute; right:.6rem; bottom:.6rem; z-index:3;
  background:rgba(10,12,8,.78); color:var(--bone);
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.08em; padding:.3rem .55rem; border-radius:2px;
  display:flex; align-items:center; gap:.35rem;
}
.ucard-body{ padding:1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; flex:1; }
.ucard-kicker{
  font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--tx-mute);
  margin-bottom:.4rem;
}
.ucard h3{
  font-size:1.22rem; margin:0 0 .7rem; letter-spacing:-.018em; line-height:1.16;
}
.ucard-foot{
  margin-top:auto; padding-top:.85rem; border-top:1px solid var(--rule);
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
}

/* Spec chips */
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  display:inline-flex; align-items:baseline; gap:.35rem;
  background:var(--bone-2); border:1px solid var(--rule);
  padding:.3rem .55rem; border-radius:2px; font-size:.82rem;
  white-space:nowrap;
}
.chip .cl{
  font-family:var(--display); font-size:.63rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-mute);
}
.chip .cv{ font-weight:600; font-variant-numeric:tabular-nums; }

/* Price */
.price{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1;
  color:var(--ink);
}
.price-call{
  font-family:var(--display); font-weight:700; font-size:1rem;
  letter-spacing:.02em; text-transform:uppercase; color:var(--rust);
}
.price-sold{ color:var(--tx-mute); text-decoration:line-through; text-decoration-thickness:2px; }

/* ========================================================================
   9. STATUS STAMPS  —  rubber-stamped across the photo
   ======================================================================== */
.stamp{
  position:absolute; z-index:4; pointer-events:none;
  top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-11deg);
  font-family:var(--display); font-weight:800;
  text-transform:uppercase; letter-spacing:.14em;
  line-height:1; white-space:nowrap;
  padding:.42em .7em;
  border:.19em solid currentColor;
  box-shadow:inset 0 0 0 .07em currentColor;
  border-radius:.1em;
  background:rgba(246,243,236,.10);
  backdrop-filter:blur(1.5px);
  font-size:clamp(1.15rem,4.2vw,2rem);
  opacity:.94;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.stamp-sold{ color:#e8574a; }
.stamp-pending{ color:#f0b93f; }
.stamp-lg{ font-size:clamp(1.8rem,6vw,4rem); border-width:.16em; }
/* Darkening wash so the stamp always reads, whatever the photo */
.has-stamp::before{
  content:""; position:absolute; inset:0; z-index:3;
  background:rgba(10,12,8,.34);
}

/* Small inline status pill (lists, admin) */
.pill{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:99px; border:1px solid currentColor;
}
.pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-available{ color:var(--live); }
.pill-pending{ color:var(--pending); }
.pill-sold{ color:var(--sold); }

/* ========================================================================
   10. UNIT DETAIL
   ======================================================================== */
.unit-top{ background:var(--ink); color:var(--tx-inv); padding-block:1.1rem; }
.crumbs{
  font-size:.8rem; color:var(--tx-inv-mute);
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.crumbs a{ color:var(--tx-inv-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--bone); text-decoration:underline; }
.crumbs .sep{ opacity:.5; }

.unit-layout{
  display:grid; gap:clamp(1.6rem,3.5vw,3rem);
  grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);
  align-items:start;
}
/* The unit title sits in a column, not across the page — so it needs its own
   ceiling rather than the full-width h1 scale. */
.unit-h1{
  font-size:clamp(1.8rem,1.3rem + 1.9vw,2.9rem);
  margin:0; letter-spacing:-.026em;
}
@media (max-width:960px){ .unit-layout{ grid-template-columns:1fr; } }

/* Gallery */
.gal-main{
  position:relative; aspect-ratio:3/2; background:var(--ink-3);
  border:1px solid var(--rule); overflow:hidden; border-radius:3px;
}
.gal-main img{ width:100%; height:100%; object-fit:cover; }
.gal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%;
  background:rgba(10,12,8,.62); color:var(--bone);
  border:1px solid rgba(246,243,236,.28);
  display:grid; place-items:center; cursor:pointer;
  font-size:1.2rem; line-height:1; padding:0;
  transition:background .15s var(--ease);
}
.gal-nav:hover{ background:rgba(10,12,8,.88); }
.gal-prev{ left:.7rem; } .gal-next{ right:.7rem; }
.gal-idx{
  position:absolute; left:.7rem; bottom:.7rem; z-index:5;
  background:rgba(10,12,8,.72); color:var(--bone);
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; padding:.32rem .6rem; border-radius:2px;
  font-variant-numeric:tabular-nums;
}
.gal-thumbs{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:.5rem; margin-top:.6rem;
}
.gal-thumb{
  aspect-ratio:4/3; border:2px solid transparent; padding:0; cursor:pointer;
  background:var(--ink-3); overflow:hidden; border-radius:2px;
  opacity:.62; transition:opacity .15s var(--ease), border-color .15s var(--ease);
}
.gal-thumb img{ width:100%; height:100%; object-fit:cover; }
.gal-thumb:hover{ opacity:.9; }
.gal-thumb[aria-current="true"]{ opacity:1; border-color:var(--rust); }

.gal-main img{ cursor:zoom-in; }

/* Lightbox — tap a photo to fill the screen, tap again to zoom */
.lb{
  position:fixed; inset:0; z-index:120;
  background:rgba(10,12,8,.97);
  display:none; flex-direction:column;
}
.lb.open{ display:flex; }
.lb-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:.65rem .9rem; flex:0 0 auto;
}
.lb-idx{
  color:var(--tx-inv-soft); font-family:var(--display);
  font-size:.8rem; font-weight:700; letter-spacing:.1em;
  font-variant-numeric:tabular-nums;
}
.lb-close{
  background:none; border:1px solid var(--rule-inv-2); color:var(--bone);
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  font-size:1.3rem; line-height:1; padding:0;
}
.lb-close:hover{ background:var(--ink-3); }
.lb-scroll{
  flex:1 1 auto; overflow:auto; display:flex;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.lb-img{
  margin:auto; max-width:100%; max-height:100%;
  object-fit:contain; cursor:zoom-in;
  user-select:none; -webkit-user-drag:none;
}
.lb.zoomed .lb-img{
  max-width:none; max-height:none; width:230%; cursor:zoom-out;
}
.lb .gal-nav{ position:fixed; z-index:5; }
.lb-hint{
  text-align:center; color:var(--tx-inv-mute); font-size:.75rem;
  padding:.5rem; flex:0 0 auto;
}
body.lb-lock{ overflow:hidden; }

/* Buy rail */
.rail{
  position:sticky; top:88px;
  border:1px solid var(--rule-2); border-radius:3px;
  background:var(--bone); box-shadow:var(--shadow-2);
  overflow:hidden;
}
@media (max-width:960px){ .rail{ position:static; } }
.rail-head{ padding:1.3rem 1.4rem 1.1rem; border-bottom:1px solid var(--rule); }
.rail-price{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.1rem,1.6rem + 2vw,2.9rem);
  letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums;
  margin:.15rem 0 .3rem;
}
.rail-body{ padding:1.2rem 1.4rem 1.4rem; display:flex; flex-direction:column; gap:.75rem; }
.rail-note{ font-size:.86rem; color:var(--tx-soft); line-height:1.5; }
/* Card acceptance marks */
.cardlogos{ display:inline-flex; align-items:center; gap:.35rem; }
.cardlogos svg{ height:var(--clh,26px); width:auto; display:block; border-radius:3px; }

/* Home-page payment bar, under the trust strip */
.paybar{
  background:var(--bone-2); border-bottom:1px solid var(--rule);
}
.paybar-in{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.5rem .6rem; padding-block:.8rem;
}
.paybar .pk{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tx-mute);
  margin-right:.4rem;
}
.paybar .pm{
  font-family:var(--display); font-size:.82rem; font-weight:700;
  background:var(--bone); border:1px solid var(--rule-2);
  padding:.3rem .65rem; border-radius:2px; white-space:nowrap;
}

/* "Ways to pay" strip in the unit-page rail */
.paystrip{
  border-top:1px solid var(--rule); padding-top:.9rem; margin-top:.2rem;
}
.paystrip .pk{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute);
  margin-bottom:.55rem;
}
.paystrip .chips .chip{ background:var(--bone); }
.paystrip .chip .cv{ font-weight:600; font-size:.8rem; }

.rail-fine{
  font-size:.78rem; color:var(--tx-mute); border-top:1px solid var(--rule);
  padding-top:.85rem; margin-top:.2rem; line-height:1.5;
}

/* Unit videos */
.unit-video{ margin:0 0 1rem; }
.unit-video video{
  width:100%; aspect-ratio:16/9; background:var(--ink);
  border:1px solid var(--rule); border-radius:3px; object-fit:contain;
}
.unit-video figcaption{ margin-top:.4rem; }

/* Admin video rows */
.vrow{
  display:grid; grid-template-columns:140px minmax(0,1fr) auto;
  gap:.9rem; align-items:center;
  border:1px solid var(--rule); border-radius:3px;
  padding:.6rem; margin-bottom:.6rem; background:var(--bone);
}
.vrow video{
  width:140px; aspect-ratio:16/9; background:var(--ink);
  border-radius:2px; object-fit:cover;
}
@media (max-width:560px){
  .vrow{ grid-template-columns:100px minmax(0,1fr) auto; }
  .vrow video{ width:100px; }
}

/* Spec table with dotted leaders */
.specs{ border-top:2px solid var(--ink); }
.spec-row{
  display:flex; align-items:baseline; gap:.5rem;
  padding:.72rem 0; border-bottom:1px solid var(--rule);
}
.spec-k{
  font-family:var(--display); font-size:.72rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-mute);
  flex:0 0 auto;
}
.spec-dots{
  flex:1 1 auto; height:.72em;
  border-bottom:1.5px dotted var(--bone-4);
  min-width:1.2rem;
}
.spec-v{ font-weight:600; font-variant-numeric:tabular-nums; text-align:right; flex:0 0 auto; }
.specs-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(1.5rem,4vw,3.5rem); }
@media (max-width:640px){ .specs-2{ grid-template-columns:1fr; } }

/* ========================================================================
   11. ABOUT
   ======================================================================== */
.about-layout{
  display:grid; gap:clamp(1.8rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  align-items:start;
}
@media (max-width:900px){ .about-layout{ grid-template-columns:1fr; } }
.about-copy p{ font-size:clamp(1.02rem,.99rem + .2vw,1.14rem); color:var(--tx-soft); }
.about-copy p:first-of-type{
  font-size:clamp(1.15rem,1.05rem + .7vw,1.45rem);
  color:var(--tx); line-height:1.45; font-weight:450;
}
.about-photo{ position:relative; }
.about-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:3px; border:1px solid var(--rule);
}
.sigblock{
  margin-top:1.8rem; padding-top:1.3rem; border-top:2px solid var(--ink);
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.sig-name{ font-family:var(--display); font-weight:800; font-size:1.1rem; letter-spacing:-.015em; }
.sig-role{ font-size:.84rem; color:var(--tx-mute); }
.badge-vet{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  border:1.5px solid var(--green); color:var(--green);
  padding:.42rem .7rem; border-radius:2px;
}

/* ========================================================================
   12. REVIEWS
   ======================================================================== */
.grid-reviews{
  display:grid; gap:clamp(1rem,2.4vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.review{
  background:var(--ink-2); border:1px solid var(--rule-inv);
  border-radius:3px; padding:1.5rem 1.4rem 1.3rem;
  display:flex; flex-direction:column; gap:.9rem;
  position:relative;
}
.review::before{
  content:"“"; position:absolute; top:-.05em; right:.35rem;
  font-family:var(--display); font-size:5rem; line-height:1;
  color:var(--rule-inv-2); pointer-events:none;
}
.stars{ display:flex; gap:.15rem; color:var(--amber); font-size:.95rem; letter-spacing:.05em; }
.review-body{ color:var(--bone); font-size:1.02rem; line-height:1.6; margin:0; position:relative; z-index:1; }
.review-by{
  margin-top:auto; padding-top:.8rem; border-top:1px solid var(--rule-inv);
  font-size:.85rem; color:var(--tx-inv-mute);
}
.review-by .who{ font-family:var(--display); font-weight:700; color:var(--bone); letter-spacing:.01em; }

/* ========================================================================
   13. SELL PITCH
   ======================================================================== */
.sell-band{ position:relative; overflow:hidden; background:var(--green); color:var(--tx-inv); }
.sell-band h2,.sell-band h3{ color:var(--bone); }
.sell-band .eyebrow{ color:var(--amber); }
.sell-band .eyebrow::before{ color:var(--tx-inv-mute); border-right-color:var(--rule-inv-2); }
/* …but the form card sitting on top of it is light again. */
.sell-band .formcard,.sell-band .formcard h3{ color:var(--tx); }
.sell-band .formcard h3{ color:var(--ink); }
.sell-band .bg{ position:absolute; inset:0; }
.sell-band .bg img{ width:100%; height:100%; object-fit:cover; }
.sell-band .bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(16,44,25,.96) 0%, rgba(16,44,25,.88) 42%, rgba(16,44,25,.45) 100%);
}
.sell-in{ position:relative; z-index:2; }
.sell-layout{
  display:grid; gap:clamp(1.6rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center;
}
@media (max-width:900px){ .sell-layout{ grid-template-columns:1fr; } }
.steps{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1px; background:var(--rule-inv-2); }
.steps li{
  background:rgba(10,26,15,.5); padding:1rem 1.15rem; margin:0;
  display:flex; gap:.95rem; align-items:flex-start;
}
.steps .n{
  font-family:var(--display); font-weight:800; font-size:.82rem;
  color:var(--amber); flex:0 0 auto; padding-top:.15rem;
  font-variant-numeric:tabular-nums;
}
.steps .t{ color:var(--bone); }
.steps .t b{ display:block; font-family:var(--display); font-weight:700; margin-bottom:.15rem; }
.steps .t span{ color:var(--tx-inv-soft); font-size:.92rem; }

/* ========================================================================
   14. FORMS
   ======================================================================== */
.form{ display:grid; gap:1.05rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--tx-soft);
}
.band-ink .field label,.band-green .field label,.band-ink-2 .field label{ color:var(--tx-inv-soft); }
.field .req{ color:var(--rust); }
.band-ink .field .req,.band-green .field .req{ color:var(--amber); }
input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],input[type=date],input[type=search],select,textarea{
  font-family:var(--text); font-size:1rem; color:var(--tx);
  background:var(--bone); border:1.5px solid var(--rule-2);
  border-radius:2px; padding:.72rem .8rem; width:100%;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
  -webkit-appearance:none; appearance:none;
}
textarea{ min-height:118px; resize:vertical; line-height:1.55; }
select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234b5347' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; padding-right:2.1rem;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--rust);
  box-shadow:0 0 0 3px rgba(182,76,23,.16);
}
.field-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem; }
@media (max-width:560px){ .field-2{ grid-template-columns:1fr; } }
.hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

.consent{
  display:flex; gap:.65rem; align-items:flex-start;
  font-size:.84rem; color:var(--tx-mute); line-height:1.5;
}
.band-ink .consent,.band-green .consent{ color:var(--tx-inv-mute); }
.consent input[type=checkbox]{
  width:18px; height:18px; margin:.15rem 0 0; flex:0 0 auto; accent-color:var(--rust);
}
.consent a{ color:inherit; }

.formcard{
  background:var(--bone); border:1px solid var(--rule-2);
  border-radius:3px; padding:clamp(1.3rem,3vw,2.1rem);
  box-shadow:var(--shadow-2);
}
.note{
  padding:.9rem 1.05rem; border-radius:2px; font-size:.92rem;
  border:1px solid var(--rule-2); background:var(--bone-2);
  display:flex; gap:.6rem; align-items:flex-start;
}
.note-ok{ border-color:rgba(47,125,69,.4); background:rgba(47,125,69,.09); color:#1d4f2d; }
.note-bad{ border-color:rgba(157,43,28,.4); background:rgba(157,43,28,.08); color:#7d2216; }

/* Newsletter */
.signup{ background:var(--ink); color:var(--tx-inv); }
.signup-in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr);
  gap:clamp(1.4rem,4vw,3rem); align-items:center;
}
@media (max-width:820px){ .signup-in{ grid-template-columns:1fr; } }
.signup h2{ margin:0 0 .5rem; }
.signup p{ color:var(--tx-inv-soft); margin:0; max-width:46ch; }
.signup-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.signup-form input[type=email]{
  flex:1 1 220px; background:var(--ink-3); border-color:var(--rule-inv-2); color:var(--bone);
}
.signup-form input[type=email]::placeholder{ color:var(--tx-inv-mute); }

/* ========================================================================
   15. SORT / TOOLBAR
   ======================================================================== */
.toolbar{
  display:flex; flex-wrap:wrap; gap:.9rem 1.2rem;
  align-items:center; justify-content:space-between;
  padding-block:1rem; border-block:1px solid var(--rule);
  margin-bottom:clamp(1.5rem,3vw,2.4rem);
}
.count{ font-size:.9rem; color:var(--tx-mute); }
.count b{ font-family:var(--display); color:var(--ink); font-weight:800; }
.sorts{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; }
.sorts .lbl{
  font-family:var(--display); font-size:.7rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--tx-mute);
  margin-right:.25rem;
}
.sorts a{
  font-size:.85rem; text-decoration:none; padding:.4rem .7rem;
  border:1px solid var(--rule-2); border-radius:2px; color:var(--tx-soft);
  transition:all .15s var(--ease); white-space:nowrap;
}
.sorts a:hover{ border-color:var(--ink); color:var(--ink); }
.sorts a[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bone); font-weight:600; }

/* ========================================================================
   16. EMPTY STATE
   ======================================================================== */
.empty{
  border:2px dashed var(--bone-4); border-radius:3px;
  padding:clamp(2rem,5vw,3.4rem); text-align:center;
  background:var(--bone-2);
}
.empty h3{ margin:0 0 .5rem; }
.empty p{ color:var(--tx-soft); max-width:44ch; margin:0 auto 1.4rem; }

/* ========================================================================
   17. FOOTER
   ======================================================================== */
.ftr{ background:var(--ink); color:var(--tx-inv); padding-top:clamp(2.6rem,6vw,4.4rem); }
.ftr-grid{
  display:grid; gap:clamp(1.6rem,4vw,3rem);
  grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));
  padding-bottom:2.6rem;
}
@media (max-width:820px){ .ftr-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr h4{
  font-size:.73rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--tx-inv-mute); margin:0 0 .9rem; font-weight:700;
}
.ftr-list{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.ftr-list a{ color:var(--tx-inv-soft); text-decoration:none; font-size:.94rem; }
.ftr-list a:hover{ color:var(--bone); text-decoration:underline; }
.ftr-blurb{ color:var(--tx-inv-soft); font-size:.94rem; max-width:38ch; margin:.9rem 0 1.2rem; }
.fb-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.85rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--tx-inv-soft); text-decoration:none;
  border:1px solid var(--rule-inv-2); padding:.5rem .8rem; border-radius:2px;
  transition:color .15s var(--ease), border-color .15s var(--ease);
}
.fb-link:hover{ color:var(--bone); border-color:var(--bone); }
/* Same link on light backgrounds (the About section) */
.about-copy .fb-link{
  color:var(--tx-soft); border-color:var(--rule-2);
}
.about-copy .fb-link:hover{ color:var(--ink); border-color:var(--ink); }
.hours-row{
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.9rem; color:var(--tx-inv-soft);
  padding:.32rem 0; border-bottom:1px dashed var(--rule-inv);
}
.hours-row span:last-child{ font-variant-numeric:tabular-nums; color:var(--bone); }
.ftr-bottom{
  border-top:1px solid var(--rule-inv); padding-block:1.3rem;
  display:flex; flex-wrap:wrap; gap:.7rem 1.4rem;
  align-items:center; justify-content:space-between;
  font-size:.83rem; color:var(--tx-inv-mute);
}
.ftr-bottom a{ color:var(--tx-inv-mute); }
.ftr-legal{ display:flex; gap:1.1rem; flex-wrap:wrap; }

/* ========================================================================
   18. PROSE (privacy / terms)
   ======================================================================== */
.prose{ max-width:70ch; }
.prose h2{ font-size:clamp(1.35rem,1.2rem + .8vw,1.8rem); margin-top:2.4rem; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.1rem; margin-top:1.6rem; }
.prose p,.prose li{ color:var(--tx-soft); }
.prose .updated{ font-size:.86rem; color:var(--tx-mute); font-style:italic; }

/* ========================================================================
   19. PAGE HEAD (interior pages)
   ======================================================================== */
.phead{ background:var(--ink); color:var(--tx-inv); position:relative; overflow:hidden; }
.phead-in{ padding-block:clamp(2.6rem,6vw,4.6rem); position:relative; z-index:2; }
.phead h1{ margin:0 0 .7rem; font-size:clamp(2.1rem,1.5rem + 3vw,3.9rem); }
.phead .lede{ color:var(--tx-inv-soft); max-width:56ch; font-size:1.08rem; margin:0; }
.phead-bg{ position:absolute; inset:0; opacity:.28; }
.phead-bg img{ width:100%; height:100%; object-fit:cover; }
.phead-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, var(--ink) 12%, rgba(18,21,15,.55) 100%);
}

/* ========================================================================
   20. UTILITIES
   ======================================================================== */
.vh{
  position:absolute!important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.mt0{ margin-top:0; } .mb0{ margin-bottom:0; }
.mt1{ margin-top:1rem; } .mt2{ margin-top:2rem; } .mt3{ margin-top:3rem; }
.tc{ text-align:center; }
.muted{ color:var(--tx-mute); }
.small{ font-size:.88rem; }
.nowrap{ white-space:nowrap; }
.tabnum{ font-variant-numeric:tabular-nums; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--bone); color:var(--ink); padding:.8rem 1.2rem;
  font-family:var(--display); font-weight:700;
}
.skip:focus{ left:0; }

/* ========================================================================
   21. ADMIN
   ======================================================================== */
.adm{ --bone:#f4f2ee; background:var(--bone-2); min-height:100vh; }
.adm-bar{
  background:var(--ink); color:var(--bone); position:sticky; top:0; z-index:50;
  border-bottom:2px solid var(--amber);
}
.adm-bar-in{ display:flex; align-items:center; gap:1rem; min-height:56px; flex-wrap:wrap; }
.adm-bar .who{ margin-left:auto; font-size:.82rem; color:var(--tx-inv-mute); }
.adm-nav{ display:flex; gap:.1rem; flex-wrap:wrap; }
.adm-nav a{
  font-family:var(--display); font-size:.8rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--tx-inv-soft);
  text-decoration:none; padding:.5rem .7rem; border-radius:2px;
}
.adm-nav a:hover{ color:var(--bone); background:var(--ink-3); }
.adm-nav a[aria-current="page"]{ color:var(--ink); background:var(--amber); }
.card{
  background:#fff; border:1px solid var(--rule); border-radius:3px;
  padding:clamp(1rem,2.5vw,1.5rem); margin-bottom:1.2rem; box-shadow:var(--shadow-1);
}
.card > h2,.card > h3{ margin-top:0; }
.tbl{ width:100%; border-collapse:collapse; font-size:.92rem; }
.tbl th{
  text-align:left; font-family:var(--display); font-size:.68rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tx-mute);
  padding:.55rem .6rem; border-bottom:2px solid var(--ink); white-space:nowrap;
}
.tbl td{ padding:.65rem .6rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr:hover td{ background:var(--bone-2); }
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll .tbl{ min-width:520px; }

/* Admin inventory rows. Not a table — this is the screen Eduardo uses from a
   phone in the yard, so it stacks instead of scrolling sideways. */
.urow{
  display:grid; gap:.9rem;
  grid-template-columns:96px minmax(0,1fr) auto;
  align-items:center;
  background:#fff; border:1px solid var(--rule); border-radius:3px;
  padding:.8rem; margin-bottom:.6rem; box-shadow:var(--shadow-1);
}
.urow-media{
  width:96px; aspect-ratio:4/3; border-radius:2px; overflow:hidden;
  background:var(--bone-3);
}
.urow-media img{ width:100%; height:100%; object-fit:cover; }
.urow-name{
  font-family:var(--display); font-weight:700; font-size:1.02rem;
  letter-spacing:-.012em; color:var(--ink); text-decoration:none;
  display:block; margin-bottom:.35rem; line-height:1.2;
}
.urow-name:hover{ text-decoration:underline; }
.urow-meta{ display:flex; flex-wrap:wrap; gap:.35rem .5rem; align-items:center; }
.urow-actions{ display:flex; flex-direction:column; gap:.4rem; }
@media (max-width:640px){
  .urow{ grid-template-columns:76px minmax(0,1fr); }
  .urow-media{ width:76px; }
  .urow-actions{ grid-column:1 / -1; flex-direction:row; }
  .urow-actions .btn{ flex:1; }
}
.dol{
  display:inline-flex; align-items:baseline; gap:.3rem;
  font-family:var(--display); font-weight:700; font-size:.78rem;
  background:var(--ink); color:var(--amber); padding:.2rem .5rem; border-radius:2px;
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.stat-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.stat{ background:#fff; border:1px solid var(--rule); border-radius:3px; padding:1rem 1.1rem; }
.stat .n{
  font-family:var(--display); font-weight:800; font-size:1.9rem;
  letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums;
}
.stat .l{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx-mute); margin-top:.35rem; font-family:var(--display); font-weight:700;
}
.adm-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.6rem; }
.adm-photo{ position:relative; aspect-ratio:4/3; border:1px solid var(--rule); border-radius:2px; overflow:hidden; background:var(--bone-3); }
.adm-photo img{ width:100%; height:100%; object-fit:cover; }
.adm-photo .rm{
  position:absolute; top:.25rem; right:.25rem;
  background:rgba(10,12,8,.8); color:#fff; border:0; cursor:pointer;
  width:26px; height:26px; border-radius:50%; font-size:.9rem; line-height:1; padding:0;
}
.adm-photo .first{
  position:absolute; left:.25rem; bottom:.25rem;
  background:var(--amber); color:var(--ink); font-family:var(--display);
  font-size:.6rem; font-weight:800; letter-spacing:.1em; padding:.15rem .35rem; border-radius:2px;
}
.login-wrap{ min-height:100vh; display:grid; place-items:center; background:var(--ink); padding:var(--gut); }
.login-box{ background:var(--bone); border-radius:3px; padding:2rem; width:100%; max-width:400px; box-shadow:var(--shadow-3); }