/* ============================================================
   CROWN APPAREL — v2 "PRESS SHEET" design tokens
   A print-shop poster/zine take: cream stock, ink black,
   registration marks & halftone texture instead of dark/gold v1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root{
  --paper:   #ede5cf;   /* uncoated poster stock */
  --paper-2: #e4dabd;   /* slightly darker stock, for panels */
  --ink:     #17130f;   /* press ink black */
  --purple:  #46215f;   /* screen-print purple */
  --gold:    #c79a3d;   /* foil gold */
  --gold-2:  #e3b959;
  --silver:  #857f70;
  --rule:    rgba(23,19,15,0.18);

  --display: 'Anton', sans-serif;
  --body: 'Work Sans', sans-serif;
  --mono: 'Space Mono', monospace;

  --container: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* halftone dot texture, like an under-registered print pass */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:2000;
  opacity:0.05;
  background-image:radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size:6px 6px;
  mix-blend-mode:multiply;
}

.wrap{ max-width:var(--container); margin:0 auto; padding:0 28px; }

/* ---------- registration mark signature ---------- */
.reg-mark{
  width:22px; height:22px;
  flex:none;
}
.reg-mark path,.reg-mark circle{
  stroke:var(--ink);
  stroke-width:1.3;
  fill:none;
}
.reg-corner{
  position:absolute;
  width:26px; height:26px;
  opacity:0.65;
}
.reg-corner.tl{ top:10px; left:10px; }
.reg-corner.tr{ top:10px; right:10px; transform:scaleX(-1); }
.reg-corner.bl{ bottom:10px; left:10px; transform:scaleY(-1); }
.reg-corner.br{ bottom:10px; right:10px; transform:scale(-1,-1); }

.stamp{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--purple);
  border:1.5px solid var(--purple);
  border-radius:999px;
  padding:6px 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transform:rotate(-3deg);
}
.stamp::before{
  content:"●";
  font-size:8px;
}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--purple);
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  line-height:0.92;
  letter-spacing:0.005em;
  margin:0;
}

/* ---------- nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(237,229,207,0.92);
  backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  max-width:var(--container);
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:24px;
  color:var(--ink);
}
.brand .crown-mark{ width:32px; height:32px; flex:none; }
.brand .crown-mark path{ fill:var(--purple); }
.brand small{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--silver);
  font-weight:400;
  margin-top:2px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:32px;
  font-family:var(--mono);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.nav-links a{
  position:relative;
  padding:4px 0;
  color:var(--ink);
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-3px;
  height:2px; background:var(--purple);
  transition:right .25s ease;
}
.nav-links a:hover::after{ right:0; }
.nav-links a.current{ color:var(--purple); }
.nav-links a.btn.current{ color:var(--paper); }
.nav-links a.btn-solid{ color:var(--paper); }
.nav-links a.btn-ghost{ color:var(--ink); }

.btn{
  font-family:var(--mono);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:12px 22px;
  border-radius:0;
  border:2px solid var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  transition:all .18s ease;
}
.btn-solid{
  background:var(--ink);
  color:var(--paper);
}
.btn-solid:hover{ background:var(--purple); border-color:var(--purple); color:var(--paper); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.nav-toggle{
  display:none;
  background:none; border:none; color:var(--ink);
  font-size:24px; cursor:pointer;
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:70px 0 60px;
  border-bottom:2px solid var(--ink);
  overflow:hidden;
}
.hero-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:36px;
}
.hero h1{
  font-size:clamp(52px,9.5vw,132px);
  color:var(--ink);
  margin:0 0 6px;
}
.hero h1 .accent{ color:var(--purple); }
.hero-sub-row{
  display:grid;
  grid-template-columns:1.3fr 0.7fr;
  gap:48px;
  align-items:end;
  margin-top:30px;
}
.hero p.lead{
  font-size:18px;
  max-width:48ch;
  color:var(--ink);
}
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }

.hero-plate{
  position:relative;
  aspect-ratio:3/4;
  background:var(--purple);
  border:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:rotate(2deg);
}
.hero-plate .crown-mark{ width:44%; }
.hero-plate .crown-mark path{ fill:var(--gold); }
.hero-plate .tape{
  position:absolute; top:-14px; left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:90px; height:26px;
  background:rgba(237,229,207,0.85);
  border:1px solid rgba(23,19,15,0.3);
}

/* ---------- section shells ---------- */
section{ padding:90px 0; position:relative; }
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:52px;
  border-bottom:2px solid var(--ink);
  padding-bottom:26px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size:clamp(34px,5.2vw,58px);
  margin-top:10px;
}
.section-head p{
  color:var(--ink);
  opacity:0.7;
  font-size:15px;
  max-width:34ch;
}

/* ---------- ticket-style services ---------- */
.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ticket{
  background:var(--paper-2);
  border:2px solid var(--ink);
  padding:28px 24px 30px;
  position:relative;
}
.ticket::before,.ticket::after{
  content:"";
  position:absolute;
  width:18px; height:18px;
  background:var(--paper);
  border:2px solid var(--ink);
  border-radius:50%;
  top:50%;
  transform:translateY(-50%);
}
.ticket::before{ left:-11px; }
.ticket::after{ right:-11px; }
.ticket .tag{
  font-family:var(--mono);
  font-size:11px;
  color:var(--purple);
  text-transform:uppercase;
  letter-spacing:0.08em;
  display:block;
  margin-bottom:16px;
}
.ticket h3{ font-size:26px; margin-bottom:12px; }
.ticket p{ font-size:14.5px; color:var(--ink); opacity:0.8; }
.ticket .perf{
  border-top:2px dashed var(--ink);
  margin:20px 0 16px;
}
.ticket .code{
  font-family:var(--mono);
  font-size:11px;
  color:var(--silver);
}

/* ---------- workwear strip ---------- */
.workwear-strip{
  margin-top:24px;
  background:var(--ink);
  color:var(--paper);
  border:2px solid var(--ink);
  padding:36px 38px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:center;
}
.workwear-copy h3{
  font-size:28px;
  color:var(--paper);
  margin:14px 0 12px;
  text-transform:none;
}
.workwear-copy p{
  font-size:14.5px;
  color:var(--paper);
  opacity:0.82;
  max-width:52ch;
}
.workwear-strip .stamp{
  border-color:var(--gold-2);
  color:var(--gold-2);
}
.workwear-ctas{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:22px;
}
.workwear-strip .btn-solid{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.workwear-strip .btn-solid:hover{ background:var(--gold-2); border-color:var(--gold-2); color:var(--ink); }
.workwear-strip .btn-ghost{
  color:var(--paper);
  border-color:rgba(237,229,207,0.4);
}
.workwear-strip .btn-ghost:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }

.workwear-brands{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  border-left:2px solid rgba(237,229,207,0.25);
  padding-left:32px;
}
.brand-wordmark{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  color:var(--paper);
  opacity:0.92;
}
.brand-wordmark.and-more{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.1em;
  color:var(--gold-2);
  opacity:1;
}

/* ---------- gallery: polaroid strip ---------- */
.gallery{
  display:flex;
  gap:36px;
  flex-wrap:wrap;
  padding-top:10px;
}
.polaroid{
  background:var(--paper-2);
  border:1px solid var(--ink);
  padding:12px 12px 20px;
  width:230px;
  box-shadow:6px 6px 0 rgba(23,19,15,0.12);
}
.polaroid:nth-child(odd){ transform:rotate(-2.5deg); }
.polaroid:nth-child(even){ transform:rotate(2deg); }
.polaroid .frame{
  aspect-ratio:1/1;
  margin-bottom:14px;
  overflow:hidden;
}
/* Each shot has had its background knocked out and replaced with --paper-2,
   the polaroid's own stock colour, so the garment reads as sitting directly
   on the card. Because the image background and the frame background are the
   same value, `contain` letterboxes invisibly — which means no garment gets
   cropped, whatever its aspect ratio. */
.polaroid .frame{ background:var(--paper-2); }
.polaroid .frame img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.polaroid .cap{
  font-family:var(--mono);
  font-size:11.5px;
  text-align:center;
  color:var(--ink);
}
/* ---------- process: production stamps ---------- */
.process{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}
.pstep{
  border:2px solid var(--ink);
  padding:22px 16px 24px;
  background:var(--paper);
}
.pstep .stamp{ margin-bottom:20px; font-size:11px; padding:5px 10px; }
.pstep h3{ font-size:18px; text-transform:none; font-family:var(--body); font-weight:700; margin-bottom:8px; }
.pstep p{ font-size:13px; opacity:0.75; }

/* ---------- cta band ---------- */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  text-align:center;
  padding:100px 0;
  border-top:2px solid var(--ink);
  border-bottom:2px solid var(--ink);
}
.cta-band .eyebrow{ color:var(--gold-2); }
.cta-band h2{
  font-size:clamp(34px,6vw,64px);
  margin:16px auto 30px;
  max-width:20ch;
  color:var(--paper);
}
.cta-band .btn-solid{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.cta-band .btn-solid:hover{ background:var(--gold-2); border-color:var(--gold-2); color:var(--ink); }

/* ---------- footer ---------- */
.site-footer{ padding:56px 0 36px; }
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  padding-bottom:36px;
  border-bottom:2px solid var(--ink);
}
.footer-grid h4{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--purple);
  margin:0 0 14px;
}
.footer-grid p, .footer-grid a{
  color:var(--ink);
  opacity:0.75;
  font-size:14px;
  display:block;
  margin-bottom:8px;
}
.footer-grid a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:22px;
  font-family:var(--mono);
  font-size:11px;
  color:var(--silver);
  flex-wrap:wrap;
  gap:10px;
}

/* ============================================================
   QUOTE PAGE
   ============================================================ */
.quote-hero{
  padding:70px 0 50px;
  border-bottom:2px solid var(--ink);
}
.quote-hero h1{ font-size:clamp(40px,7vw,80px); margin:14px 0 16px; }
.quote-hero p{ max-width:56ch; font-size:16.5px; opacity:0.8; }

.quote-layout{
  display:grid;
  grid-template-columns:1fr 320px;
  gap:50px;
  /* top/bottom only — a padding shorthand here would overwrite (not merge
     with) .wrap's own left/right padding on the same element, since both
     are single-class selectors of equal specificity and this rule comes
     later in the source. That's invisible on wide screens (.wrap's
     max-width centering leaves plenty of margin either way) but pins
     the form flush to the screen edge as soon as the viewport narrows
     enough for .wrap to actually reach full width. */
  padding-top:70px;
  padding-bottom:100px;
  align-items:start;
}

.field{ margin-bottom:24px; }
.field label{
  display:block;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:0.7;
  margin-bottom:9px;
}
.field .hint, .hint{
  font-family:var(--body);
  font-size:12.5px;
  color:var(--silver);
  text-transform:none;
  letter-spacing:0;
  margin-top:6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width:100%;
  background:var(--paper-2);
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  padding:13px 14px;
  border-radius:0;
  outline:none;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--purple); }
.field textarea{ resize:vertical; min-height:100px; }
.row-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }

.file-drop{
  border:2px dashed var(--ink);
  padding:26px 16px;
  text-align:center;
  background:var(--paper-2);
  cursor:pointer;
}
.file-drop:hover{ border-color:var(--purple); }
.file-drop input{ display:none; }
.file-drop .fd-title{ font-size:14px; margin-bottom:6px; }
.file-drop .fd-sub{ font-family:var(--mono); font-size:11px; color:var(--silver); }
.file-name{ margin-top:10px; font-family:var(--mono); font-size:12px; color:var(--purple); }

fieldset{ border:none; padding:0; margin:0 0 24px; }
legend{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--purple);
  margin-bottom:12px;
  padding:0;
}
.placement-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.placement-grid label{
  border:2px solid var(--ink);
  padding:11px 8px;
  text-align:center;
  font-size:13px;
  cursor:pointer;
  font-family:var(--body);
  transition:all .12s ease;
}
.placement-grid input{ display:none; }
.placement-grid label:has(input:checked){
  background:var(--ink);
  color:var(--paper);
}

.submit-row{ margin-top:6px; }
.submit-note{
  font-size:12.5px;
  opacity:0.7;
  margin-top:14px;
  max-width:46ch;
}

.side-panel{
  background:var(--paper-2);
  border:2px solid var(--ink);
  padding:28px 26px;
  position:sticky;
  top:96px;
}
.side-panel h3{
  font-size:20px;
  text-transform:none;
  font-family:var(--body);
  font-weight:700;
  margin-bottom:16px;
}
.side-list{ list-style:none; padding:0; margin:0 0 26px; }
.side-list li{
  display:flex; gap:12px;
  font-size:13.5px;
  padding:11px 0;
  border-top:1px solid var(--rule);
  opacity:0.85;
}
.side-list li:first-child{ border-top:none; }
.side-list .n{ font-family:var(--mono); color:var(--purple); flex:none; font-weight:700; }
.side-contact{ font-size:13.5px; opacity:0.85; }
.side-contact strong{ display:block; margin-bottom:4px; font-family:var(--body); }

/* ---------- order items (quote form) ---------- */
.order-item{
  border:2px solid var(--ink);
  background:var(--paper-2);
  padding:20px 20px 22px;
  margin-bottom:18px;
}
.order-item-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.order-item-head .item-label{
  font-family:var(--mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--purple);
}
.remove-item-btn{
  background:none;
  border:1.5px solid var(--ink);
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px;
  padding:5px 10px;
  cursor:pointer;
}
.remove-item-btn:hover{ background:var(--ink); color:var(--paper); }

.category-toggle{ display:flex; gap:8px; }
.cat-btn{
  flex:1;
  background:var(--paper);
  border:2px solid var(--ink);
  color:var(--ink);
  font-family:var(--body);
  font-size:13px;
  padding:10px;
  cursor:pointer;
}
.cat-btn.active{ background:var(--ink); color:var(--paper); }

.size-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:8px;
  margin-top:8px;
}
.size-box{
  border:2px solid var(--ink);
  background:var(--paper);
  text-align:center;
  padding:8px 4px 10px;
}
.size-box span{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  text-transform:uppercase;
  margin-bottom:6px;
  color:var(--ink);
  opacity:0.75;
}
.size-box input{
  width:100%;
  border:none;
  background:transparent;
  text-align:center;
  font-family:var(--body);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  outline:none;
}
.cap-grid{ grid-template-columns:repeat(2, 1fr); }
.cap-grid .size-box{ padding:14px 4px; }

.size-grid-group{ display:none; }
.size-grid-group.active{ display:block; }

.size-total-note{
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--purple);
  margin-top:10px;
}

#add-item-btn{ width:100%; text-align:center; }
#add-item-btn:disabled{ opacity:0.4; cursor:not-allowed; }
.add-item-btn{
  width:100%;
  text-align:center;
  background:transparent;
  border:2px dashed var(--ink);
  color:var(--ink);
  font-family:var(--mono);
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:12px;
  cursor:pointer;
  margin-top:4px;
}
.add-item-btn:hover{ background:var(--paper-2); }
.add-item-btn:disabled{ opacity:0.4; cursor:not-allowed; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-sub-row{ grid-template-columns:1fr; }
  .hero-plate{ max-width:280px; margin:0 auto; }
  .services{ grid-template-columns:1fr; }
  .workwear-strip{ grid-template-columns:1fr; padding:28px 22px; }
  .workwear-brands{ border-left:none; border-top:2px solid rgba(237,229,207,0.25); padding-left:0; padding-top:20px; flex-direction:row; flex-wrap:wrap; gap:20px; }
  .process{ grid-template-columns:1fr; }
  .gallery{ gap:24px; justify-content:center; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .quote-layout{ grid-template-columns:1fr; }
  .side-panel{ position:static; }
  /* Drop the header's blur on mobile. backdrop-filter makes .site-header a
     containing block for its position:fixed descendants, which caused two
     separate bugs: the off-canvas menu's height collapsed to the header's
     own height, and — because the closed menu is parked off-screen right
     via translateX(100%) — it counted toward page width, making the
     document 2x the screen width. That let the whole page pinch-zoom out
     to a half-empty desktop-ish layout. Without the blur the menu is a
     true viewport-fixed element again, so it neither collapses nor
     stretches the page. Header goes fully opaque to compensate. */
  .site-header{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--paper);
  }
  .nav-links{
    /* inset (not 100vh) now that the header isn't a containing block —
       bottom:0 tracks the real visible viewport, avoiding the iOS Safari
       problem where 100vh is taller than the screen with the address bar
       showing. */
    position:fixed;
    inset:60px 0 0 0;
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:32px 28px;
    gap:22px;
    transform:translateX(100%);
    transition:transform .3s ease;
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-toggle{ display:block; }
  .row-2{ grid-template-columns:1fr; }
  .placement-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}