/* ============================================================
   ATTIRE UNIFORM — stylesheet
   You should not need to edit this file to change content.
   Content lives in assets/js/data.js
   ------------------------------------------------------------
   Palette is taken from the logo: the burgundy of the letterforms
   and the cream of the fabric it was printed on.
   ============================================================ */

:root{
  --maroon:#5C1020;      /* brand burgundy, sampled from the logo   */
  --maroon-2:#7A1B2E;    /* hover / mid tone                        */
  --maroon-3:#8A2436;    /* burgundy text on cream       (7.99:1)   */
  --rose-lt:#E3A5A8;     /* rose text on burgundy        (6.58:1)   */
  --cream:#F7F5EE;       /* page ground, the logo's fabric          */
  --cream-2:#EDE9DF;     /* alternating band                        */
  --paper:#FFFFFF;
  --thread:#D6D0C4;      /* rules and borders                       */
  --muted:#6A6157;       /* secondary text on cream      (5.56:1)   */

  --wrap:1120px;
  --gut:clamp(20px,5vw,48px);

  --f-disp:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--maroon);
  font-family:var(--f-body);
  font-size:clamp(16px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--maroon);color:var(--cream);padding:12px 18px;font-weight:600;
}
.skip:focus{left:8px;top:8px}

:where(a,button,input,select,summary):focus-visible{
  outline:3px solid var(--maroon-3);
  outline-offset:2px;
}
.hero :where(a,button):focus-visible,
.sec--ink :where(a,button):focus-visible{outline-color:var(--rose-lt)}

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-lt);
  margin:0 0 22px;
}
.dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;vertical-align:middle;margin:0 .5em}

.h2{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 118;
  font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.5rem,3.4vw,2.1rem);
  line-height:1.05;margin:0 0 12px;
}
.sec__lede{max-width:54ch;margin:0 0 40px;color:var(--muted)}
.sec--ink .sec__lede{color:rgba(247,245,238,.8)}

.lbl{
  font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rose-lt);margin:0 0 12px;
}
.mono{font-family:var(--f-mono);font-size:.9rem;margin:0}
.lnk{
  color:inherit;text-decoration:none;
  border-bottom:2px solid var(--maroon-3);
  display:inline-block;padding:3px 0;
}
.lnk:hover{color:var(--maroon-3)}
.sec--ink .lnk{border-bottom-color:var(--rose-lt)}
.sec--ink .lnk:hover{color:var(--rose-lt)}

.btn{
  display:inline-block;
  font-family:var(--f-mono);
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:15px 26px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.btn--solid{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}
.btn--solid:hover{background:var(--maroon-2);border-color:var(--maroon-2)}
.btn--line{border-color:currentColor;color:inherit;background:transparent}
.btn--line:hover{background:var(--cream);color:var(--maroon);border-color:var(--cream)}
.btn--sm{padding:11px 18px;font-size:.72rem}
/* on cream grounds the outline button inverts the other way */
.hdr .btn--line:hover{background:var(--maroon);color:var(--cream);border-color:var(--maroon)}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:50;
  background:var(--cream);
  border-bottom:1px solid var(--thread);
}
.hdr__in{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;text-decoration:none;margin-right:auto}
.brand img{height:clamp(30px,4.6vw,40px);width:auto}
.nav{display:flex;gap:26px}
.nav a{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;
  text-decoration:none;color:var(--muted);
  display:inline-block;padding:6px 2px;
}
.nav a:hover{color:var(--maroon-3)}

/* ---------- hero ---------- */
.hero{
  background:var(--maroon);
  color:var(--cream);
  /* faint 45° weave, echoing woven fabric */
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.03) 0 1px,transparent 1px 7px);
  padding:clamp(56px,9vw,110px) 0;
}
.hero__in{
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);
  display:grid;gap:clamp(32px,5vw,56px);align-items:center;
}
@media (min-width:860px){
  /* the mockup is landscape, so it takes the larger share */
  .hero__in{grid-template-columns:0.9fr 1.16fr}
}
.hero h1{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 112;
  font-weight:800;
  font-size:clamp(2.3rem,6.6vw,4.5rem);
  line-height:1.03;letter-spacing:-.015em;
  margin:0 0 26px;max-width:16ch;
}
.lede{
  font-size:clamp(1.02rem,1.7vw,1.2rem);
  max-width:46ch;margin:0 0 38px;
  color:rgba(247,245,238,.84);
}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px}
.hero .btn--solid{background:var(--cream);color:var(--maroon);border-color:var(--cream)}
.hero .btn--solid:hover{background:var(--rose-lt);border-color:var(--rose-lt)}

/* the hero panel is a drawn garment, not a photograph, so it sits
   straight on the burgundy with no card or edge */
.hero__shot{margin:0}
/* full image, never cropped — it is a wide two-up mockup, so forcing it
   into a portrait frame would cut the back print off */
.hero__shot img{width:100%;height:auto;display:block}
@media (min-width:860px){
  /* let the mockup run out to the page edge so it stays large
     without squeezing the headline */
  .hero__shot{margin-right:calc(var(--gut) * -1)}
}
@media (max-width:859px){
  .hero__shot{margin-top:4px}
}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,100px) 0}
.sec__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.sec--quiet{background:var(--cream-2)}
.sec--ink{background:var(--maroon);color:var(--cream)}

.prose p{margin:0 0 18px;font-size:1.05rem;max-width:62ch}
.prose p:last-child{margin-bottom:0}

.tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:34px 0 0;max-width:820px}
.tags li{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em;
  border:1px solid var(--thread);
  padding:8px 14px;background:var(--paper);
}

/* ---------- photo grid ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:14px;
}
@media (min-width:700px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
}
.tile{margin:0}
.tile__box{
  position:relative;aspect-ratio:4/5;
  background:var(--paper);
  border:1px solid var(--thread);
  overflow:hidden;
}
.tile__box img{width:100%;height:100%;object-fit:contain;padding:8px}
.tile__box img.is-photo{object-fit:cover;padding:0}
.tile__ph{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--cream) 0 6px,var(--paper) 6px 12px);
  color:var(--muted);
}
.tile__ph span{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--paper);padding:6px 10px;border:1px solid var(--thread);
}
.tile__cap{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.05em;
  margin:10px 0 0;color:var(--muted);
}

/* ---------- reviews ---------- */
.quotes{display:grid;gap:18px;max-width:820px}
.quotes blockquote{
  margin:0;padding:24px 26px;
  background:var(--paper);
  border-left:4px solid var(--maroon-3);
  font-size:1.08rem;
}
.quotes p{margin:0}
.quotes cite{
  display:block;margin-top:12px;
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-style:normal;
}

/* ---------- contact ---------- */
.contact{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2px;
  background:rgba(247,245,238,.18);
  border:1px solid rgba(247,245,238,.18);
}
.contact__card{background:var(--maroon);padding:30px 28px}
.contact__card address{font-style:normal;margin:0 0 10px;line-height:1.7}
.contact__card p{margin:0 0 10px}
.contact__card p:last-child{margin-bottom:0}
.big{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 105;
  font-weight:700;font-size:1.3rem;letter-spacing:.01em;
}
.big a{text-decoration:none;border-bottom:2px solid var(--rose-lt)}
.big a:hover{color:var(--rose-lt)}
.socials{display:flex;gap:16px;margin-top:16px !important}
.socials a{
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
}

/* ---------- footer ---------- */
.ftr{background:var(--cream-2);border-top:1px solid var(--thread);padding:44px 0}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.ftr__logo{height:34px;width:auto;margin:0 0 14px}
.ftr__meta{margin:0 0 8px;font-size:.86rem;color:var(--muted);line-height:1.7}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .nav{display:none}
  .hero__acts .btn{flex:1 1 100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}