/* ==========================================================================
   ORDER, and the shared furniture the contact page borrows

   The reference is a numbered flow down the left with the summary held on
   the right. Two things about it are load-bearing and easy to lose:

   The summary must never leave the screen. It is the only thing that tells
   you what the choices above have cost, so it is sticky, and on a narrow
   screen where sticky would eat half the sheet it goes to the bottom of the
   flow instead of floating.

   The step numbers are the structure. They are set large and pale, which is
   what lets them organise the page without competing with the questions.
   ========================================================================== */

.page{
  padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(2rem,4vw,3rem);
  max-width:var(--wrap); margin:0 auto; width:100%;
}
.page__t{
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem); line-height:1.08;
  max-width:16ch; margin:.6rem 0 1.2rem;
}
.page__lede{ max-width:46ch; color:var(--ink-soft); font-size:1.05em; }


/* ---------------------------------------------------------------- LAYOUT */
.order{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,380px);
  gap:clamp(2rem,4vw,4rem);
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  align-items:start;
}
.contact{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(280px,360px);
  gap:clamp(2rem,4vw,4rem);
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
  align-items:start;
}
@media (max-width:900px){
  .order, .contact{ grid-template-columns:1fr; }
}
/* Grid children default to min-width:auto, which means a wide child (the
   quantity row, a long file name) pushes the column past its track instead
   of being contained by it. Both of these hold wide content. */
.order__main, .contact__side{ min-width:0; }


/* ----------------------------------------------------------------- STEPS */
.step{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.step__h{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom:1.4rem;
}
.step__n{
  font-family:var(--f-num);
  font-size:clamp(1.8rem,4vw,2.8rem); line-height:1;
  color:var(--paper-lo);
}
.step__t{
  font-family:var(--f-body); font-weight:400;
  font-size:clamp(1.2rem,2.4vw,1.7rem); line-height:1.2;
}


/* -------------------------------------------------------------- QUANTITY */
.qty{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(.8rem,1.6vw,1.2rem);
}
/* A real radio under a real label. The input is clipped rather than removed
   so the whole thing stays keyboard operable and announces as a radio
   group; every bit of the look hangs off :checked and :focus-visible. */
.qty__in{
  position:absolute; width:1px; height:1px;
  margin:-1px; clip-path:inset(50%); overflow:hidden;
}
.qty__opt{
  position:relative; display:block; cursor:pointer;
  padding:1.6rem 1.2rem 1.3rem; text-align:center;
  border:1px solid var(--rule);
  background:rgba(226,220,211,.5);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.qty__opt:hover{ border-color:var(--ink-faint); }
.qty__in:checked + .qty__opt{
  background:var(--ink); border-color:var(--ink);
  color:var(--paper-hi); text-shadow:none;
}
.qty__in:focus-visible + .qty__opt{ outline:2px solid var(--ink); outline-offset:3px; }

.qty__n{
  display:block; font-family:var(--f-num);
  font-size:clamp(1.7rem,3.4vw,2.4rem); line-height:1;
}
.qty__u{
  display:block; margin:.35rem 0 .8rem;
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
}
.qty__in:checked + .qty__opt .qty__u,
.qty__in:checked + .qty__opt .qty__each{ color:var(--paper-lo); }
.qty__p{ display:block; font-size:1.02em; }
.qty__each{
  display:block; margin-top:.2rem;
  font-family:var(--f-mono); font-size:.62rem; color:var(--ink-faint);
}

/* the badges. Absolute so they sit on the rule like a sticker on a proof */
.flag{
  position:absolute; top:-.62rem; padding:.24rem .55rem;
  font-family:var(--f-mono); font-size:.55rem;
  letter-spacing:.14em; text-transform:uppercase;
  text-shadow:none; white-space:nowrap;
}
.flag--save{ left:.9rem; background:var(--paper-lo); color:var(--ink); }
.flag--pop{ right:.9rem; background:#8C2F2F; color:#F4EDE3; }


/* --------------------------------------------------------------- ARTWORK */
.opt{
  display:flex; gap:1rem; align-items:flex-start;
  padding:1.2rem 1.3rem; cursor:pointer;
  border:1px solid var(--rule);
  transition:border-color .25s var(--ease);
}
.opt:hover{ border-color:var(--ink-faint); }
.opt:has(:checked){ border-color:var(--ink); background:rgba(226,220,211,.5); }
.opt__box{ margin-top:.3rem; accent-color:#8C2F2F; width:1rem; height:1rem; flex:none; }
.opt__t{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.opt__name{ font-size:1.02em; }
.opt__price{
  padding:.2rem .5rem; background:#8C2F2F; color:#F4EDE3;
  font-family:var(--f-mono); font-size:.58rem;
  letter-spacing:.1em; text-shadow:none;
}
.opt__d{ margin-top:.4rem; color:var(--ink-soft); font-size:.95em; }

.drop{
  margin-top:1.2rem; padding:clamp(1.6rem,4vw,2.6rem) 1.4rem;
  border:1px dashed var(--ink-faint);
  text-align:center; cursor:pointer; display:block;
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.drop:hover, .drop.is-over{ border-color:var(--ink); background:rgba(226,220,211,.5); }
.drop__t{ display:block; font-size:1.02em; }
.drop__d{
  display:block; margin-top:.4rem;
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
}
.drop input{ position:absolute; width:1px; height:1px; clip-path:inset(50%); }


/* --------------------------------------------------------------- PREVIEW
   The card is drawn at the real 3.5 x 2 inch ratio, on the real paper, with
   the real impression. The artwork is dropped in with mix-blend-mode
   multiply so it sits IN the sheet rather than on it: a white background in
   somebody's PNG disappears into the paper instead of covering it, which is
   what an ink does. */
.preview{ margin-top:1.4rem; }
.preview__stage{
  display:grid; place-items:center;
  padding:clamp(1.6rem,5vw,3.4rem) 1rem;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%),
    rgba(196,188,175,.4);
}
.card3d{ perspective:1400px; width:min(100%,420px); }
.card3d__in{
  position:relative; aspect-ratio:3.5 / 2;
  background:url('img/paper.jpg') repeat, var(--paper-hi);
  background-size:520px auto;
  box-shadow:
    0 1px 1px rgba(42,36,28,.28),
    0 10px 22px rgba(42,36,28,.22),
    0 26px 50px rgba(42,36,28,.14);
  transform:rotateX(6deg) rotateZ(-1.2deg);
  transition:transform .5s var(--ease);
  overflow:hidden;
}
.card3d:hover .card3d__in{ transform:rotateX(1deg) rotateZ(0deg); }
.card3d__art{
  position:absolute; inset:9%;
  width:82%; height:82%;
  object-fit:contain;
  mix-blend-mode:multiply;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.75))
    drop-shadow(0 -1px 0 rgba(42,36,28,.4))
    drop-shadow(0 3px 4px rgba(42,36,28,.16));
}
.card3d__empty{
  position:absolute; inset:0;
  display:grid; place-content:center; gap:.5rem; text-align:center;
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}
.card3d.has-art .card3d__empty{ display:none; }

.preview__bar{
  display:flex; flex-wrap:wrap; gap:.8rem 1.4rem;
  align-items:center; justify-content:space-between;
  margin-top:1rem;
}
.preview__name{
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.14em; color:var(--ink-faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:22ch;
}
.swatches{ display:flex; gap:.5rem; align-items:center; }
.swatch{
  width:1.6rem; height:1.6rem; border-radius:50%; cursor:pointer;
  border:1px solid var(--rule); padding:0;
  transition:transform .2s var(--ease), border-color .2s var(--ease);
}
.swatch:hover{ transform:scale(1.12); }
.swatch[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.12); }


/* --------------------------------------------------------------- SUMMARY */
.sum{ position:sticky; top:clamp(5rem,9vw,7rem); }
@media (max-width:900px){
  .sum{ position:static; }
  .order__side{ order:2; }
}
.card{
  padding:clamp(1.4rem,3vw,2rem);
  border:1px solid var(--rule);
  background:rgba(226,220,211,.55);
}
.card + .card{ margin-top:1.2rem; }
.card__t{
  font-family:var(--f-mono); font-size:.64rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:1rem;
}
.line{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--rule-soft);
}
.line:last-of-type{ border-bottom:0; }
.line--total{
  margin-top:.8rem; padding-top:1rem;
  border-top:1px solid var(--rule); border-bottom:0;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
}
.line--total dt{ font-family:var(--f-body); }
.line dt{
  font-family:var(--f-mono); font-size:.7rem;
  letter-spacing:.1em; color:var(--ink-soft);
}
.line dd{ margin:0; text-align:right; }
.sum__note{
  margin-top:1rem; font-size:.86em; color:var(--ink-faint); text-align:center;
}
.sum .btn{ width:100%; margin-top:1.2rem; }
.wa{ display:inline-flex; align-items:center; gap:.5rem; }


/* ------------------------------------------------------------ FORM BITS */
.form{ display:flex; flex-direction:column; gap:1.2rem; align-items:flex-start; }
.form .btn{ margin-top:.4rem; }
.field{ display:block; width:100%; }
.field__l{
  display:block; margin-bottom:.45rem;
  font-family:var(--f-mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint);
}
.field__i{
  width:100%; padding:.85rem 1rem;
  background:rgba(226,220,211,.6);
  border:1px solid var(--rule);
  font-family:var(--f-body); font-size:1em; color:var(--ink);
  border-radius:0;
  transition:border-color .25s var(--ease);
}
.field__i:focus{ outline:none; border-color:var(--ink); }
textarea.field__i{ resize:vertical; min-height:8rem; }
.form__note{ font-size:.86em; color:var(--ink-faint); max-width:44ch; }

.spec--stack{ grid-template-columns:1fr; gap:.9rem; }