/* ══════════════════════════════════════════════════════════
   UraverageTech — the honest shop
   Safety amber, workshop paper, signage type, one work order.
   ══════════════════════════════════════════════════════════ */

/* Self-hosted variable fonts (latin subset). Local so the page keeps its
   typography offline, and so it makes no third-party requests. */
@font-face{
  font-family:"Big Shoulders Display";
  src:url("../assets/fonts/big-shoulders.woff2") format("woff2");
  font-weight:500 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Sans";
  src:url("../assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Martian Mono";
  src:url("../assets/fonts/martian-mono.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}

:root{
  /* ink & ground */
  --amber:    #FF9A1F;
  --amber-lo: #F08213;
  --ember:    #DE3B15;
  --ink:      #17120E;
  --paper:    #F2EDE3;
  --graphite: #241E18;
  --rule:     #CDC1AD;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Instrument Sans", system-ui, sans-serif;
  --mono:    "Martian Mono", ui-monospace, monospace;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.2,.7,.2,1);
}

*{ margin:0; padding:0; box-sizing:border-box }

/* The browser's own [hidden] rule is an author-stylesheet loss waiting to
   happen: any class that sets `display` beats it, and the element stays on
   screen. Anything toggled with .hidden = true relies on this. */
[hidden]{ display:none !important }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.6;
  overflow-x:hidden;
}

img{ display:block; max-width:100% }
a{ color:inherit }
button,input,textarea{ font:inherit; color:inherit }

.mono{
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:500;
}

.vh{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:absolute; left:50%; top:-4rem; transform:translateX(-50%);
  z-index:300; background:var(--ink); color:var(--paper);
  padding:.7rem 1.4rem; border-radius:0 0 4px 4px; font-weight:600;
  transition:top .2s;
}
.skip:focus{ top:0 }

:focus-visible{ outline:3px solid var(--ember); outline-offset:3px }

/* ── layout shells ───────────────────────────────────────── */
.wrap{ width:min(1180px,100%); margin-inline:auto; padding-inline:var(--gut) }

.band{ padding-block:clamp(4.5rem,9vw,8rem) }
.band--paper{ background:var(--paper); color:var(--ink) }
.band--amber{ background:var(--amber); color:var(--ink) }
.band--graphite{ background:var(--graphite); color:var(--paper) }

/* ══════════════ SHOP SIGN / NAV ══════════════ */
.sign{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:.9rem;
  padding:.55rem var(--gut);
  background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--amber);
}
.sign__mark img{ width:40px; height:40px }
.sign__plate{ display:flex; flex-direction:column; line-height:1.05; margin-right:auto }
.sign__name{
  font-family:var(--display); font-weight:700;
  font-size:1.32rem; letter-spacing:.02em; text-transform:uppercase;
}
.sign__sub{
  font-family:var(--mono); font-size:.54rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--amber); margin-top:.18rem;
}
.sign__nav{ display:flex; align-items:center; gap:1.7rem }
.sign__nav a{
  position:relative; text-decoration:none;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; padding-block:.35rem;
}
.sign__nav a:not(.sign__order)::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:var(--amber);
  transform:scaleX(0); transform-origin:right;
  transition:transform .34s var(--ease);
}
.sign__nav a:not(.sign__order):hover::after{ transform:scaleX(1); transform-origin:left }
.sign__order{
  background:var(--amber); color:var(--ink);
  padding:.5rem .95rem !important; font-weight:600;
  transition:background .25s, color .25s;
}
.sign__order:hover{ background:var(--paper) }

.sign__toggle{
  display:none; background:none; border:1px solid rgba(242,237,227,.3);
  padding:.6rem .55rem; cursor:pointer; gap:5px; flex-direction:column;
}
.sign__toggle span:not(.vh){ display:block; width:20px; height:2px; background:var(--paper); transition:transform .3s }
.sign__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(3.5px) rotate(45deg) }
.sign__toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg) }

/* ══════════════ HERO ══════════════ */
#pcb{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; pointer-events:none;
}

.hero{
  position:relative; overflow:hidden;
  display:grid; align-items:center;
  min-height:calc(100svh - 62px);
  padding-block:clamp(2.5rem,5vw,4rem);
}
.hero::after{     /* screen-printed grain so the amber field isn't flat */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(23,18,14,.16) 1px, transparent 1.1px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}
.hero__grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,36rem) 1fr;
  gap:clamp(2rem,4vw,4rem); align-items:center;
}

.stub{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600;
  background:var(--ink); color:var(--amber);
  padding:.42rem .8rem;
}
.stub__dot{ width:6px; height:6px; border-radius:50%; background:var(--amber) }

.hero__say{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.9rem,7.4vw,5.5rem);
  line-height:.88; letter-spacing:-.005em; text-transform:uppercase;
  margin:1.2rem 0 1.1rem; position:relative;
}
.hero__mark{ color:var(--ink); opacity:.34 }
/* the line swaps text, so it stays on one line and never shoves the page */
.hero__cycle{ display:block; color:var(--ember); min-height:1em; white-space:nowrap }
.hero__cycle-inner{
  display:inline-block;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.hero__cycle-inner.is-out{ opacity:0; transform:translateY(-.16em) }

.hero__reply{
  font-family:var(--display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.15rem,2.6vw,1.7rem); letter-spacing:.03em;
  padding-left:1rem; border-left:4px solid var(--ink);
}
.hero__lede{ max-width:46ch; margin-top:1.5rem; color:rgba(23,18,14,.82) }

.hero__acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem }

/* page-load orchestration */
[data-anim]{ opacity:0; transform:translateY(18px) }
.is-ready [data-anim]{
  opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.is-ready [data-anim="1"]{ transition-delay:.05s }
.is-ready [data-anim="2"]{ transition-delay:.16s }
.is-ready [data-anim="3"]{ transition-delay:.28s }
.is-ready [data-anim="4"]{ transition-delay:.4s }
.is-ready [data-anim="5"]{ transition-delay:.5s }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.68rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.95rem 1.5rem; border:2px solid var(--ink); cursor:pointer;
  transition:transform .18s var(--ease), background .22s, color .22s, box-shadow .22s;
}
.btn--ink{ background:var(--ink); color:var(--paper); box-shadow:5px 5px 0 rgba(23,18,14,.22) }
.btn--ink:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(23,18,14,.28) }
.btn--ink:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 rgba(23,18,14,.22) }
.btn--line{ background:transparent; color:var(--ink) }
.btn--line:hover{ background:var(--ink); color:var(--amber) }

/* ══════════════ SECTION HEADS ══════════════ */
.head{ max-width:60ch; margin-bottom:clamp(2.5rem,5vw,4rem) }
.eyebrow{
  display:inline-block; color:var(--ember); font-weight:600;
  padding-bottom:.4rem; border-bottom:2px solid var(--ember); margin-bottom:1.1rem;
}
.head__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,6.5vw,4.6rem); line-height:.9; letter-spacing:-.005em;
}
.head__title--light{ color:var(--paper) }
.head__note{ margin-top:1.2rem; max-width:52ch; color:rgba(23,18,14,.72) }

/* scroll reveal */
[data-reveal]{ opacity:0; transform:translateY(26px) }
[data-reveal].seen{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}

/* ══════════════ THE BOARD ══════════════ */
.board{ list-style:none; border-top:2px solid var(--ink) }

.job{
  position:relative; display:grid;
  grid-template-columns:auto minmax(9rem,15rem) 1fr auto;
  gap:clamp(1rem,3vw,2.4rem); align-items:baseline;
  padding:clamp(1.5rem,3vw,2.1rem) 0;
  border-bottom:1px solid var(--rule);
  transition:padding-left .38s var(--ease);
}
.job__rule{
  position:absolute; left:0; bottom:-1px; height:3px; width:100%;
  background:var(--ember); transform:scaleX(0); transform-origin:left;
  transition:transform .55s var(--ease);
}
.job:hover .job__rule{ transform:scaleX(1) }
.job:hover{ padding-left:.85rem }

.job__icon{
  align-self:center; width:34px; height:34px; color:var(--ember);
  transition:transform .38s var(--ease);
}
.job__icon svg{ width:100%; height:100% }
.job:hover .job__icon{ transform:rotate(-8deg) scale(1.12) }

.job__name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:.95; letter-spacing:.005em;
}
.job__what{ color:rgba(23,18,14,.75); max-width:52ch; font-size:.97rem }
.job__tag{
  align-self:center; white-space:nowrap;
  background:var(--ink); color:var(--paper); padding:.34rem .68rem; font-size:.58rem;
}
.job--star .job__tag{ background:var(--ember) }

/* ══════════════ BEHIND THE COUNTER ══════════════ */
.counter{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,5vw,4.5rem); align-items:center }
.counter__mark{ position:relative; display:grid; place-items:center }
.counter__mark img{
  width:min(300px,72%);
  filter:drop-shadow(0 14px 40px rgba(0,0,0,.45));
}
.counter__mark::before{
  content:""; position:absolute; inset:8%;
  border:1px solid rgba(255,154,31,.28); border-radius:50%;
  animation:turn 34s linear infinite;
}
.counter__mark::after{
  content:""; position:absolute; inset:-2%;
  border:1px dashed rgba(255,154,31,.16); border-radius:50%;
  animation:turn 52s linear infinite reverse;
}
@keyframes turn{ to{ transform:rotate(360deg) } }

.counter__text{ color:rgba(242,237,227,.78); max-width:52ch; margin-top:1.3rem }
.counter .eyebrow{ color:var(--amber); border-bottom-color:var(--amber) }

.labels{ list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2.1rem }
.label{
  background:transparent; color:var(--amber);
  border:1px solid rgba(255,154,31,.45); padding:.45rem .8rem; font-size:.6rem;
  transition:background .25s, color .25s;
}
.label:hover{ background:var(--amber); color:var(--ink) }

/* ══════════════ HOW IT GOES ══════════════ */
.flow{
  list-style:none; display:grid; gap:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));
  border-top:2px solid var(--ink);
}
.stage{
  padding:clamp(1.8rem,3vw,2.4rem) clamp(1.2rem,2.2vw,2rem) clamp(2.2rem,4vw,3rem);
  border-bottom:2px solid var(--ink);
  border-right:1px solid var(--rule);
  transition:background .3s;
}
.stage:last-child{ border-right:0 }
.stage:hover{ background:rgba(255,154,31,.12) }
.stage__stamp{
  display:inline-block; color:var(--ember);
  border:2px solid var(--ember); padding:.32rem .7rem;
  transform:rotate(-2.5deg); font-weight:600; font-size:.6rem;
}
.stage__title{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.45rem,2.8vw,2rem); line-height:.98; margin:1.15rem 0 .7rem;
}
.stage__text{ color:rgba(23,18,14,.75); font-size:.96rem }

/* ══════════════ THE WORK ORDER (signature) ══════════════ */
/* The shadow lives on the frame so it follows the torn edge,
   not the rectangle the ticket was cut from. */
.ticket-frame{
  max-width:940px; margin-inline:auto;
  filter:drop-shadow(0 22px 40px rgba(23,18,14,.32));
}
.ticket{
  --notch:13px;
  position:relative; background:var(--paper); color:var(--ink);
  -webkit-mask:
    radial-gradient(var(--notch) at 50% 0, #0000 97%, #000) 0 0/calc(var(--notch)*2) 100% repeat-x,
    radial-gradient(var(--notch) at 50% 100%, #0000 97%, #000) 0 0/calc(var(--notch)*2) 100% repeat-x;
  -webkit-mask-composite:source-in;
  mask:
    radial-gradient(var(--notch) at 50% 0, #0000 97%, #000) 0 0/calc(var(--notch)*2) 100% repeat-x,
    radial-gradient(var(--notch) at 50% 100%, #0000 97%, #000) 0 0/calc(var(--notch)*2) 100% repeat-x;
  mask-composite:intersect;
}

.ticket__head{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; justify-content:space-between;
  padding:clamp(2.4rem,4vw,3rem) clamp(1.4rem,4vw,3rem) clamp(1.2rem,2vw,1.5rem);
  border-bottom:2px dashed var(--rule);
}
.ticket__brand{ color:var(--ember); font-weight:600 }
.ticket__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.1rem,5.4vw,3.6rem); line-height:.92; margin-top:.5rem;
}
.ticket__no{ color:rgba(23,18,14,.5); font-size:.7rem }

.ticket__body{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem clamp(1.4rem,3vw,2.4rem);
  padding:clamp(1.8rem,3.5vw,2.6rem) clamp(1.4rem,4vw,3rem) clamp(2.4rem,4vw,3rem);
}
.field{ display:flex; flex-direction:column; border:0; min-width:0 }
.field--full{ grid-column:1 / -1 }
.field__label{ color:rgba(23,18,14,.6); margin-bottom:.55rem; font-weight:600 }
.field__input{
  background:transparent; border:0; border-bottom:2px solid var(--rule);
  padding:.6rem 0; font-size:1rem; border-radius:0;
  transition:border-color .25s;
}
.field__input::placeholder{ color:rgba(23,18,14,.32) }
.field__input:focus{ outline:0; border-bottom-color:var(--ember) }
.field__input--area{
  border:2px solid var(--rule); padding:.85rem; resize:vertical; line-height:1.55;
}
.field__input--area:focus{ border-color:var(--ember) }

.chips{ display:flex; flex-wrap:wrap; gap:.55rem }
.chip{ cursor:pointer }
.chip input{ position:absolute; opacity:0; width:0; height:0 }
.chip span{
  display:inline-block; border:2px solid var(--ink);
  padding:.45rem .85rem; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase;
  transition:background .2s, color .2s, transform .18s var(--ease);
}
.chip:hover span{ transform:translateY(-2px) }
.chip input:checked + span{ background:var(--ink); color:var(--amber) }
.chip input:focus-visible + span{ outline:3px solid var(--ember); outline-offset:2px }

.ticket__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1.1rem; margin-top:.4rem }
.ticket__hint{ font-size:.82rem; color:rgba(23,18,14,.6); max-width:38ch }
.ticket__hint a{ color:var(--ember); text-underline-offset:3px }

/* the honeypot: off-screen rather than display:none, which bots skip */
.trap{
  position:absolute !important; left:-9999px; width:1px; height:1px;
  overflow:hidden; white-space:nowrap;
}

.ticket__result{
  grid-column:1 / -1; margin-top:.4rem; font-size:.95rem; line-height:1.55;
  border-left:4px solid var(--rule); padding:.7rem 0 .7rem .9rem;
}
.ticket__result.is-good{ border-left-color:#1c6b3a; color:#1c6b3a; font-weight:600 }
.ticket__result.is-warn{ border-left-color:var(--ember); color:var(--ink) }
.ticket__result a{ color:var(--ember); text-underline-offset:3px }

/* the stamp: the order really is sent now, so the button can say so */
.btn--stamp{ position:relative; overflow:hidden }
.btn--stamp[disabled]{ cursor:default }
.btn--stamp.is-sending .btn__label{ opacity:.45 }
.btn--stamp.is-sent{ background:var(--ember); border-color:var(--ember) }
.btn--stamp.is-sent .btn__label{ opacity:0 }
.btn--stamp.is-sent::after{
  content:"Sent"; position:absolute; inset:0;
  display:grid; place-items:center; color:var(--paper);
  animation:stamp .45s var(--ease) both;
}
@keyframes stamp{
  0%{ transform:scale(1.8) rotate(-9deg); opacity:0 }
  100%{ transform:scale(1) rotate(0); opacity:1 }
}

/* ══════════════ FOOTER ══════════════ */
.foot{ background:var(--ink); color:var(--paper); padding-block:3rem }
.foot__grid{ display:flex; flex-direction:column; align-items:center; gap:.55rem; text-align:center }
.foot__mark{ width:46px; margin-bottom:.4rem }
.foot__line{ font-size:.62rem }
.foot__line--dim{ color:rgba(242,237,227,.45) }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem }
  .counter{ grid-template-columns:1fr; text-align:left }
  .counter__mark{ margin-bottom:1rem }
  .counter__mark img{ width:210px }
  .job{ grid-template-columns:auto 1fr; row-gap:.7rem }
  .job__what{ grid-column:2 }
  .job__tag{ grid-column:2; justify-self:start }
}

@media (max-width:760px){
  .sign__nav{
    position:fixed; inset:0; background:var(--ink);
    flex-direction:column; justify-content:center; gap:2.2rem;
    transform:translateY(-100%); transition:transform .45s var(--ease);
  }
  .sign__nav.is-open{ transform:none }
  .sign__nav a{ font-size:1rem }
  .sign__toggle{ display:flex; z-index:110 }
  .ticket__body{ grid-template-columns:1fr }
  .stage{ border-right:0 }
}

/* ══════════════ REDUCED MOTION ══════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-anim],[data-reveal]{ opacity:1 !important; transform:none !important }
}

/* ══════════════ THE SHELF (shop.html) ══════════════ */

.shelf__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.8rem 1.2rem; margin-bottom:2.2rem;
}
.filters{ display:flex; flex-wrap:wrap; gap:.5rem }
.filter{
  background:transparent; color:var(--ink); cursor:pointer;
  border:2px solid var(--ink); padding:.45rem .85rem;
  font-size:.62rem; font-weight:600;
  transition:background .2s, color .2s, transform .18s var(--ease);
}
.filter:hover{ transform:translateY(-2px) }
.filter.is-on{ background:var(--ink); color:var(--amber) }

.soldToggle{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer;
  font-size:.6rem; font-weight:600; color:rgba(23,18,14,.72);
}
.soldToggle input{ width:1.05rem; height:1.05rem; accent-color:var(--ember); cursor:pointer }

.shelf{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr));
}
.item{
  display:flex; flex-direction:column;
  border:2px solid var(--ink); background:var(--paper);
  padding:1.3rem 1.2rem 1.2rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .2s;
}
.item:hover{ transform:translateY(-4px); box-shadow:7px 7px 0 rgba(23,18,14,.16) }
.item--out{ opacity:.62; border-color:var(--ember) }
.item--out:hover{ transform:none; box-shadow:none }

/* ── galleries (shelf card and full-screen view) ─────────── */
/* One photo is shown at a time; the rest stay in the markup so stepping
   through them is a class swap and never a fresh request. */
.gal{ position:relative }
.gal__img{ display:none; width:100% }
.gal__img.is-on{ display:block }

.gal__arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  display:grid; place-items:center; width:2rem; height:2.8rem;
  background:rgba(23,18,14,.72); color:var(--paper);
  border:0; cursor:pointer; font-size:1.5rem; line-height:1;
  transition:background .2s;
}
.gal__arrow:hover{ background:var(--ember) }
.gal__arrow--prev{ left:0 }
.gal__arrow--next{ right:0 }
.gal__count{
  position:absolute; right:.4rem; bottom:.4rem;
  background:rgba(23,18,14,.72); color:var(--paper);
  padding:.22rem .45rem; font-size:.52rem;
}

.item__gal{ margin-bottom:1rem }
.item__gal .gal__img{
  aspect-ratio:4/3; object-fit:cover; border:1px solid var(--rule);
}
.item--more .item__gal .gal__img{ cursor:pointer }

.item__tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.8rem }
.item__cat{ background:var(--ink); color:var(--paper); padding:.26rem .6rem; font-size:.56rem }
.item__cond{ border:1px solid var(--rule); padding:.26rem .6rem; font-size:.56rem; color:rgba(23,18,14,.7) }

.item__name{
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.5rem; line-height:.98; margin-bottom:.55rem;
}
/* Clamped so one long summary can't stretch its card past the rest of the
   row. Anything cut off is shown in full behind More info, which the card
   grows a button for as soon as there is something to hide. */
.item__note{
  color:rgba(23,18,14,.72); font-size:.9rem; flex:1;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}

.item__more{
  align-self:flex-start; margin-top:.75rem; padding:0;
  background:none; border:0; border-bottom:2px solid var(--ember);
  color:var(--ember); font-weight:600; font-size:.58rem; cursor:pointer;
  transition:color .2s, border-color .2s;
}
.item__more:hover{ color:var(--ink); border-bottom-color:var(--ink) }

.item__foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.6rem; margin-top:1.1rem; padding-top:.9rem; border-top:2px solid var(--ink);
}
.item__price{ font-family:var(--display); font-weight:800; font-size:2rem; line-height:1 }
.item__stock{ color:rgba(23,18,14,.66); font-size:.58rem; white-space:nowrap }
.item__stock.is-low{ color:var(--ember); font-weight:600 }
.item__stock.is-out{ color:var(--ink); background:var(--rule); padding:.2rem .45rem }

.item__ask{
  margin-top:1rem; text-align:center; text-decoration:none;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:600;
  border:2px solid var(--ink); padding:.65rem .8rem;
  transition:background .22s, color .22s;
}
.item__ask:hover{ background:var(--ink); color:var(--amber) }

/* ══════════════ THE FULL-SCREEN VIEW (shop.html) ══════════════ */
/* The dialog is the scroll container's frame, .sheet__in the part that
   scrolls — that way the close button stays put instead of sliding off the
   top of a long description. */
.sheet{
  /* margin:auto is what centres a dialog, and the reset at the top of this
     file takes it away from every element. Put it back. */
  width:min(1180px,94vw); max-height:92vh; margin:auto; padding:0;
  border:2px solid var(--ink); background:var(--paper); color:var(--ink);
  box-shadow:12px 12px 0 rgba(23,18,14,.3);
  display:flex; flex-direction:column; overflow:hidden;
}
.sheet::backdrop{ background:rgba(23,18,14,.74) }
.sheet__in{ display:grid; grid-template-columns:1.05fr 1fr; overflow:auto; min-height:0 }

.sheet__x{
  position:absolute; top:0; right:0; z-index:2;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  background:var(--ink); color:var(--paper); border:0;
  font-size:1.5rem; line-height:1; cursor:pointer; transition:background .2s;
}
.sheet__x:hover{ background:var(--ember) }

.sheet__left{ border-right:2px solid var(--ink); background:rgba(23,18,14,.05) }
/* contain, not cover: a detail view that crops the thing being detailed is
   worse than one with a band of paper above and below it. */
.sheet__gal .gal__img{
  aspect-ratio:4/3; object-fit:contain; background:var(--paper);
}
.sheet__nophoto{ padding:3rem 1.4rem; text-align:center; color:rgba(23,18,14,.45) }

.sheet__rail{
  display:flex; flex-wrap:wrap; gap:.4rem;
  padding:.6rem; border-top:1px solid var(--rule);
}
.railshot{
  width:3.6rem; aspect-ratio:1; padding:0; overflow:hidden; cursor:pointer;
  background:var(--paper); border:2px solid var(--rule);
  transition:border-color .2s;
}
.railshot img{ width:100%; height:100%; object-fit:cover }
.railshot:hover{ border-color:var(--ink) }
.railshot.is-on{ border-color:var(--ember) }

.sheet__text{ padding:clamp(1.4rem,3vw,2.4rem); align-self:start }
.sheet__name{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.9rem,4vw,2.9rem); line-height:.95; margin-bottom:.2rem;
}
.sheet__text .item__foot{ margin-top:.9rem }
.sheet__lede{ margin-top:1.1rem; color:rgba(23,18,14,.8) }
/* the owner's line breaks are the formatting, so they are kept as typed */
.sheet__body{
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--rule);
  white-space:pre-wrap; color:rgba(23,18,14,.78); font-size:.95rem;
}
.sheet__ask{ margin-top:1.8rem }

@media (max-width:820px){
  .sheet{ width:100vw; max-width:100vw; max-height:100svh; height:100svh; border:0 }
  .sheet__in{ grid-template-columns:1fr }
  .sheet__left{ border-right:0; border-bottom:2px solid var(--ink) }
  .sheet__gal .gal__img{ aspect-ratio:4/3 }
}

.shelf__empty{ color:rgba(23,18,14,.7); max-width:44ch; padding:2rem 0 }
.shelf__ask{ text-align:center }
.shelf__ask .head__note{ margin-inline:auto }
.shelf__ask .btn{ margin-top:1.8rem }

/* ══════════════ STOCK EDITOR (admin.html) ══════════════ */
.admin{ padding-block:clamp(2.5rem,5vw,4rem) }



.admin__bar{
  display:flex; flex-wrap:wrap; gap:1.4rem; align-items:flex-end;
  padding-bottom:1.4rem; border-bottom:2px solid var(--ink);
}
.admin__set{ display:flex; flex-direction:column; min-width:0 }
.admin__set--grow{ flex:1; min-width:16rem }
.admin__row{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.admin__input{ border:2px solid var(--rule); padding:.5rem .6rem; background:transparent; min-width:0 }
.admin__input:focus{ outline:0; border-color:var(--ember) }
.admin__input--tiny{ width:5rem }
.btn--sm{ padding:.55rem 1rem; font-size:.6rem }

.admin__status{ min-height:1.4rem; margin:1rem 0 0; color:rgba(23,18,14,.65) }
.admin__status.is-good{ color:#1c6b3a; font-weight:600 }
.admin__status.is-warn{ color:var(--ember); font-weight:600 }

.rows{ display:grid; gap:1rem; margin:1.6rem 0 }
.row{ border:2px solid var(--ink); padding:1.1rem; display:grid; gap:.9rem }
.row__main{ display:grid; gap:.9rem;
  grid-template-columns:2fr 1.2fr 1fr .8fr .8fr; align-items:end; }
.row__f{ display:flex; flex-direction:column; min-width:0 }
.row__f--grow{ flex:1 }
.row__end{ display:flex; gap:.9rem; align-items:flex-end }
.row__del{
  background:transparent; border:2px solid var(--rule); color:var(--ink);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.55rem .8rem; cursor:pointer;
  transition:background .2s, color .2s, border-color .2s;
}
.row__del:hover{ background:var(--ember); border-color:var(--ember); color:var(--paper) }

.admin__none{ color:rgba(23,18,14,.65); padding:1.5rem 0 }
.admin__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap }
.admin__count{ color:rgba(23,18,14,.55) }

@media (max-width:560px){
  .row__main{ grid-template-columns:1fr }
}

/* ══════════════ ADMIN: SIGN IN ══════════════ */
.gate{ min-height:calc(100svh - 62px); display:grid; align-items:center }
.card{
  max-width:26rem; border:2px solid var(--ink); background:var(--paper);
  padding:2rem 1.8rem; display:grid; gap:1.1rem;
  box-shadow:7px 7px 0 rgba(23,18,14,.16);
}
.card__title{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:2.4rem; line-height:.95; margin-top:-.4rem;
}
.card__err{ color:var(--ember); font-weight:600; line-height:1.5 }
.card .btn{ justify-self:start }
.card .btn[disabled]{ opacity:.55; cursor:progress }

.sign__signout{
  background:transparent; border:1px solid rgba(242,237,227,.35); color:var(--paper);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.5rem .9rem; cursor:pointer; transition:background .22s, color .22s;
}
.sign__signout:hover{ background:var(--ember); border-color:var(--ember) }

/* ══════════════ ADMIN: EDITOR ══════════════ */
.admin__head{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:1.8rem;
}
.admin__live{ color:rgba(23,18,14,.6); max-width:24ch; text-align:right }

.row{ grid-template-columns:auto 1fr; align-items:start }
.row__body{ display:grid; gap:.9rem; min-width:0 }
.row__photo{ display:grid; gap:.5rem; width:11rem; align-content:start }
.shot__none{ color:rgba(23,18,14,.4); font-size:.56rem }
.shot__pick{
  text-align:center; cursor:pointer; background:transparent;
  border:2px solid var(--ink); color:var(--ink);
  font-family:var(--mono); font-size:.56rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.45rem .5rem;
  transition:background .2s, color .2s;
}
.shot__pick:hover{ background:var(--ink); color:var(--amber) }

/* the gallery, in the order the shelf shows it — first one is the cover */
.strip{ display:flex; flex-wrap:wrap; gap:.4rem }
.thumb{
  position:relative; width:5.1rem; aspect-ratio:4/3; overflow:hidden;
  border:2px solid var(--rule); background:rgba(23,18,14,.04);
}
.thumb.is-cover{ border-color:var(--ink) }
.thumb img{ width:100%; height:100%; object-fit:cover }
.thumb__badge{
  position:absolute; left:0; bottom:0; width:100%; padding:.18rem .2rem;
  text-align:center; font-size:.4rem; letter-spacing:.06em;
  background:rgba(23,18,14,.78); color:var(--paper); border:0;
}
/* Dimmed rather than hidden until hover: on a touch screen there is no hover,
   and a control nobody can find is the same as no control. */
.thumb__act{ cursor:pointer; background:rgba(23,18,14,.55); transition:background .18s }
.thumb:hover .thumb__act{ background:rgba(23,18,14,.78) }
.thumb__act:hover{ background:var(--ember) }
.thumb__x{
  position:absolute; top:0; right:0; width:1.3rem; height:1.3rem;
  display:grid; place-items:center; cursor:pointer; border:0;
  background:rgba(23,18,14,.78); color:var(--paper);
  font-size:.9rem; line-height:1; transition:background .18s;
}
.thumb__x:hover{ background:var(--ember) }

.row__area{ resize:vertical; line-height:1.55; font-size:.95rem; min-height:5.5rem }

.row__end{ justify-content:space-between; align-items:center }
.row__state{ color:rgba(23,18,14,.55) }
.row__state.is-good{ color:#1c6b3a; font-weight:600 }
.row__state.is-warn{ color:var(--ember); font-weight:600 }

@media (max-width:720px){
  .row{ grid-template-columns:1fr }
  .row__photo{ width:100% }
  .admin__live{ text-align:left }
}

.field__hint{ color:rgba(23,18,14,.5); margin-top:.4rem; font-size:.56rem; line-height:1.5 }