/* ══════════════════════════════════════════════════════════════
   Outloud Co — shared styling.
   Warm and earthy: a deep roasted-brown ground rather than a
   cream one, so the clothes carry the colour and the page stays
   moody. Ochre and olive do the accent work — the obvious warm
   palette is terracotta on cream, and this is deliberately not
   that. Rust is kept for quiet notes only.
   The recurring structural device is a notched price tag, because
   the business is literally tags on garments.
   ══════════════════════════════════════════════════════════════ */

:root{
  --earth:#2b2019;
  --earth-deep:#1d150f;
  --earth-soft:#3a2b20;
  --oat:#f2e9dd;
  --oat-dim:#c4b4a1;
  --ochre:#d2913c;
  --olive:#8a9460;
  --rust:#c06743;
  --line:rgba(242,233,221,.17);
  --line-solid:#4e3a2a;

  --display:"Bodoni Moda",Didot,"Times New Roman",serif;
  --body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ticket:"Archivo Narrow","Archivo",Arial Narrow,sans-serif;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--earth);
  color:var(--oat);
  font-family:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

a{color:var(--ochre);text-decoration-thickness:1px;text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ochre);outline-offset:3px;
}

.shell{max-width:1060px;margin:0 auto;padding-inline:22px}
.narrow{max-width:660px}

/* ── ticket label: the recurring motif ───────────────────────── */
.ticket{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--ticket);
  font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  font-weight:600;
  color:var(--earth-deep);background:var(--ochre);
  padding:5px 13px 5px 10px;
  border-radius:2px;
  position:relative;
}
.ticket::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:var(--earth-deep);opacity:.55;flex-shrink:0;
}
.ticket.quiet{background:transparent;color:var(--ochre);padding-left:0}
.ticket.quiet::before{background:var(--ochre);opacity:1}

/* ── masthead ────────────────────────────────────────────────── */
.masthead{
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
  background:rgba(43,32,25,.94);
  backdrop-filter:blur(8px);
}
.masthead .shell{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:14px;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--display);
  font-size:25px;font-weight:600;letter-spacing:.005em;
  color:var(--oat);text-decoration:none;line-height:1;
}
.wordmark em{font-style:italic;color:var(--ochre)}
.navlinks{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.navlinks a{
  font-family:var(--ticket);
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--oat);text-decoration:none;
}
.navlinks a:hover{color:var(--ochre)}
.navlinks a.cta{
  color:var(--earth-deep);background:var(--oat);
  padding:7px 15px;border-radius:2px;
}
.navlinks a.cta:hover{background:var(--ochre)}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding-block:76px 64px;border-bottom:1px solid var(--line)}
.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(44px,9.2vw,96px);
  line-height:.96;letter-spacing:-.022em;
  margin:22px 0 0;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--ochre)}
.hero .lede{
  font-size:clamp(18px,2.3vw,21px);
  color:var(--oat);opacity:.86;
  max-width:36ch;margin:26px 0 0;text-wrap:pretty;
}
.hero .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}

.btn{
  display:inline-block;
  font-family:var(--ticket);
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;
  padding:14px 26px;border-radius:2px;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
}
.btn-solid{background:var(--ochre);color:var(--earth-deep)}
.btn-solid:hover{background:var(--oat)}
.btn-line{border-color:var(--line-solid);color:var(--oat);background:transparent}
.btn-line:hover{border-color:var(--ochre);color:var(--ochre)}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── sections ────────────────────────────────────────────────── */
section{padding-block:66px}
section + section{border-top:1px solid var(--line)}
.band{background:var(--earth-deep)}
h2{
  font-family:var(--display);
  font-weight:500;font-size:clamp(30px,5vw,46px);
  line-height:1.06;letter-spacing:-.018em;
  margin:18px 0 0;text-wrap:balance;
}
h2 em{font-style:italic;color:var(--ochre)}
.sect-lede{font-size:18.5px;opacity:.85;max-width:56ch;margin:20px 0 0;text-wrap:pretty}

/* two halves: the rack / the room */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:44px;background:var(--line-solid)}
.half{background:var(--earth);padding:34px 30px}
.band .half{background:var(--earth-deep)}
.half h3{
  font-family:var(--display);font-weight:500;
  font-size:27px;line-height:1.15;margin:16px 0 12px;
}
.half p{margin:0 0 13px;opacity:.86;font-size:16.5px}
.half p:last-child{margin:0}
.half .olive{color:var(--olive)}

/* numbered how-it-works: a real sequence, hence numbers */
.steps{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--line)}
.step{
  display:grid;grid-template-columns:54px 1fr;gap:0 20px;
  padding:24px 0;border-bottom:1px solid var(--line);align-items:start;
}
.step .n{
  font-family:var(--display);font-size:30px;line-height:1;
  color:var(--ochre);font-weight:500;
}
.step h4{font-size:18px;font-weight:600;margin:0 0 6px;letter-spacing:-.005em}
.step p{margin:0;opacity:.82;font-size:16.5px;max-width:58ch}

/* ── enquiry form ────────────────────────────────────────────── */
form.enq{display:grid;gap:13px;margin-top:30px;max-width:520px}
.enq label{
  font-family:var(--ticket);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600;color:var(--oat);opacity:.72;
  display:block;margin-bottom:5px;
}
.enq input,.enq textarea{
  width:100%;font-family:var(--body);font-size:16px;
  background:var(--earth-deep);color:var(--oat);
  border:1px solid var(--line-solid);border-radius:2px;
  padding:12px 13px;
}
.band .enq input,.band .enq textarea{background:var(--earth)}
.enq textarea{min-height:104px;resize:vertical}
.enq input::placeholder,.enq textarea::placeholder{color:var(--oat-dim);opacity:.6}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.note{font-size:14.5px;opacity:.72;margin:12px 0 0}
.msg{margin:14px 0 0;font-size:16px;padding:12px 14px;border-radius:2px;display:none}
.msg.ok{display:block;background:rgba(138,148,96,.18);border:1px solid var(--olive);color:var(--oat)}
.msg.bad{display:block;background:rgba(192,103,67,.18);border:1px solid var(--rust);color:var(--oat)}

/* ── footer ──────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line);padding-block:38px 46px;
  background:var(--earth-deep);
}
footer .shell{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-end}
footer .fine{
  font-family:var(--ticket);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;opacity:.6;line-height:1.9;
}

@media (max-width:720px){
  .halves{grid-template-columns:1fr}
  section{padding-block:50px}
  .hero{padding-block:52px 46px}
}
@media (max-width:440px){
  body{font-size:16px}
  .step{grid-template-columns:38px 1fr;gap:0 14px}
  .step .n{font-size:24px}
  .half{padding:26px 22px}
}

/* ══════════════════════════════════════════════════════════════
   Photography. Royalty-free (Pexels licence: commercial use, no
   attribution required). Chosen with two constraints: no
   identifiable faces, and no third-party brand names legible —
   the licence bars using imagery in a way that implies a person
   or brand endorses us, and several otherwise-good shots had a
   rival shop's neon or a designer logo in frame.
   ══════════════════════════════════════════════════════════════ */

.hero.shot{
  position:relative;
  background:
    linear-gradient(180deg, rgba(29,21,15,.90) 0%, rgba(29,21,15,.72) 42%, rgba(43,32,25,.96) 100%),
    url("img/rack-hero.jpg") center/cover no-repeat;
  padding-block:104px 92px;
}
.hero.shot.shopshot{
  background:
    linear-gradient(180deg, rgba(29,21,15,.88) 0%, rgba(29,21,15,.70) 45%, rgba(43,32,25,.97) 100%),
    url("../img/vintage-wall.jpg") center/cover no-repeat;
  padding-block:72px 56px;
}

/* an image sitting above a half-panel's copy */
.half .plate{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line-solid);margin-bottom:22px;
}
.half.tall .plate{aspect-ratio:3/4}

/* events: image beside the copy */
.withshot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:38px;align-items:start;margin-top:42px}
.withshot .plate{width:100%;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line-solid)}
@media (max-width:820px){
  .withshot{grid-template-columns:1fr;gap:28px}
  .withshot .plate{aspect-ratio:16/10}
  .hero.shot{padding-block:68px 56px}
}