/* ============================================================
   S.O.81 — shared stylesheet
   One file for the whole site. Change it here, it changes everywhere.
   ============================================================ */

:root{
  --ink:      #000000;
  --pink:     #EC008C;
  --paper:    #ffffff;
  --frame:    14px;              /* thickness of the black photo frame */
  --measure:  1240px;            /* max content width */
  --gutter:   clamp(16px, 4vw, 40px);

  /* --- display sizes -------------------------------------------------
     Nudge these two if the header doesn't sit quite right. Both scale
     with the page until they hit their cap.
     ------------------------------------------------------------------ */
  --logo-width:   min(40vw, 500px);
  --tagline-size: min(2.15vw, 34px);
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"futura-pt", "Jost", "Futura", "Century Gothic", Arial, sans-serif;
  font-weight:500;
  line-height:1.32;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

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

a{ color:inherit; }

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

/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

.site-head{
  padding:clamp(14px,3vw,28px) var(--gutter) 0;
  text-align:center;
}

/* Held on one line. The size below is a starting point only — script.js
   measures the rendered text and sets the exact size that fits, so this
   stays correct whichever font is actually loaded. Below 620px one line
   would be too small to read, so it wraps instead. */
.tagline{
  margin:0;
  font-weight:500;
  font-size:var(--tagline-size);
  white-space:nowrap;
}

.logo-link{
  display:block;
  margin-top:clamp(6px,1.5vw,14px);
  text-decoration:none;
}

/* The logo is artwork, not type — sharp at any size, identical everywhere.
   The aspect ratio matches the SVG's viewBox (639.26 x 191.74) so the
   header reserves the right space before the file loads. */
.logo{
  width:var(--logo-width);
  aspect-ratio:639.26 / 191.74;
  height:auto;
  margin:0 auto;
}

.logo-url{
  display:block;
  margin-top:clamp(2px,0.6vw,7px);
  font-weight:700;
  font-size:min(2vw, 31px);
}

/* ------------------------------------------------------------
   Layout
   ------------------------------------------------------------ */

.wrap{
  max-width:var(--measure);
  margin:0 auto;
  padding:clamp(20px,3.5vw,40px) var(--gutter) 0;
}

/* ------------------------------------------------------------
   Product
   ------------------------------------------------------------ */

.product-title{
  margin:0 0 clamp(10px,1.6vw,16px);
  font-weight:800;
  font-size:clamp(1.45rem, 3.4vw, 2.4rem);
  line-height:1.1;
}

.product-colour{
  font-weight:500;
  font-size:0.58em;
  white-space:nowrap;
}

.product-grid{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(20px,3.5vw,48px);
  align-items:start;
}

/* --- photo --- */

.frame{
  margin:0;
  border:var(--frame) solid var(--ink);
  background:var(--ink);
}

.offer-until{
  margin:clamp(10px,1.6vw,18px) 0 0;
  color:var(--pink);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(0.82rem, 1.65vw, 1.22rem);
}

/* --- detail column --- */

.product-detail{
  display:flex;
  flex-direction:column;
  gap:clamp(16px,2.4vw,28px);
}

.offer{
  margin:0;
  color:var(--pink);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(1.1rem, 2.3vw, 1.7rem);
  line-height:1.22;
}

.description{
  margin:0;
  font-weight:500;
  font-size:clamp(1rem, 1.9vw, 1.38rem);
  line-height:1.35;
}

/* --- size + quantity --- */

.picker{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(8px,1.2vw,14px);
}

.picker-label{
  font-weight:800;
  font-size:clamp(1.1rem, 2.1vw, 1.55rem);
}

.sizes{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(5px,0.8vw,9px);
}

.size{
  appearance:none;
  min-width:2.15em;
  padding:0.12em 0.42em;
  border:3px solid var(--ink);
  border-radius:0;
  background:var(--ink);
  color:var(--paper);
  font-family:inherit;
  font-weight:800;
  font-size:clamp(1.05rem, 2vw, 1.5rem);
  line-height:1.24;
  cursor:pointer;
  transition:background-color .12s ease, border-color .12s ease;
}

.size:hover{ background:var(--pink); border-color:var(--pink); }

.size[aria-pressed="true"]{
  background:var(--pink);
  border-color:var(--pink);
}

.qty{
  width:7.5em;
  padding:0.12em 0.4em;
  border:3px solid var(--ink);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  font-weight:600;
  font-size:clamp(1.05rem, 2vw, 1.5rem);
  line-height:1.24;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-foot{
  padding:clamp(28px,5vw,56px) var(--gutter) clamp(24px,4vw,44px);
  text-align:center;
}

.foot-note{
  margin:0;
  font-weight:500;
  font-size:clamp(1rem, 2.2vw, 1.62rem);
}

/* The font-size sits here rather than on the button, so the arrow's em
   units are relative to the button and the whole group scales together. */
.email-block{
  position:relative;
  display:inline-block;
  margin-top:clamp(10px,1.8vw,18px);
  font-size:clamp(1rem, 2.2vw, 1.6rem);
}

.email-btn{
  display:inline-block;
  padding:0.34em 1.15em;
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  font-size:1em;
  border-radius:0.21em;
  text-decoration:none;
  transition:background-color .12s ease;
}

.email-btn:hover{ background:var(--pink); }

/* Points at the email button, so it hangs off the button's right edge and
   the head overlaps the pill. All three numbers are in em of the button's
   font-size, taken off the mockup, so it holds together at any size. */
.arrow{
  position:absolute;
  left:100%;
  bottom:0.75em;
  width:1.92em;
  margin-left:-0.87em;
  aspect-ratio:62.72 / 69.86;
  height:auto;
  pointer-events:none;
  transition:filter .12s ease;
}

/* The button turns pink on hover, which would swallow the pink arrowhead.
   brightness(0) drives every colour channel to zero and leaves the
   transparency alone, so the arrow goes solid black without needing a
   second file. The two brand colours simply trade places. */
.email-btn:hover ~ .arrow,
.email-btn:focus-visible ~ .arrow{
  filter:brightness(0);
}

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */

@media (max-width:820px){
  :root{ --frame:9px; }

  .logo-url{ font-size:min(3vw, 22px); }

  .product-grid{ grid-template-columns:1fr; }

  .product-colour{ display:block; }

  .offer-until{ order:3; }
}

/* One line stops being legible around here, so let it wrap. */
@media (max-width:620px){
  .tagline{
    white-space:normal;
    font-size:clamp(13px, 3.6vw, 17px);
  }
}

@media (prefers-reduced-motion:reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* Held on one line like the tagline, and fitted by script.js the same
   way. Wraps below 900px, where one line would be too small to read. */
.banner{
  margin:clamp(10px,1.8vw,20px) 0 0;
  padding:0 var(--gutter);
  color:var(--pink);
  font-weight:800;
  font-size:min(1.405vw, 23px);
  text-transform:uppercase;
  text-align:center;
  white-space:nowrap;
}

/* --- carousel ---------------------------------------------------
   A real scroll container, so it can be swiped on a phone and dragged
   with a trackpad. script.js nudges it along on top of that. */
.carousel{
  margin-top:clamp(10px,1.8vw,20px);
  background:var(--ink);
  padding:clamp(6px,1vw,12px) 0;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{ display:none; }

.carousel-track{
  display:flex;
  gap:clamp(6px,1vw,12px);
  width:max-content;
  padding:0 clamp(6px,1vw,12px);
}

.slide{
  display:block;
  flex:0 0 auto;
  line-height:0;
}

.slide img{
  height:clamp(130px, 17vw, 240px);
  width:auto;
}

.slide:focus-visible{ outline:4px solid var(--pink); outline-offset:-4px; }

.carousel-note{
  margin:clamp(12px,2vw,22px) 0 0;
  padding:0 var(--gutter);
  color:var(--pink);
  font-weight:800;
  font-size:clamp(0.95rem, 1.9vw, 1.45rem);
  text-transform:uppercase;
  text-align:center;
}

/* --- categories --- */
.categories{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  flex-wrap:wrap;
  gap:0.4em clamp(10px,2vw,28px);
  max-width:var(--measure);
  margin:clamp(12px,2vw,22px) auto 0;
  padding:0 var(--gutter);
}

.cat{
  font-weight:800;
  font-size:clamp(1rem, 2vw, 1.75rem);
  text-transform:uppercase;
}

/* --- instagram line --- */
.social{
  margin:clamp(16px,2.6vw,28px) 0 0;
  font-weight:500;
  font-size:clamp(0.95rem, 1.9vw, 1.4rem);
}

/* White Instagram glyph knocked out of a black circle. The circle is
   drawn here, so the file in assets/ only needs to be the white mark. */
.social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.85em;
  height:1.85em;
  margin:0 0.3em 0 0.45em;
  background:var(--ink);
  border-radius:50%;
  vertical-align:-0.55em;
}

.social-icon img{
  width:64%;
  height:64%;
}

.social-handle{
  font-weight:800;
  text-decoration:none;
  margin-left:0.4em;
}
.social-handle:hover{ color:var(--pink); }

@media (max-width:900px){
  .banner{
    white-space:normal;
    font-size:clamp(12px, 2.6vw, 17px);
  }
}