/* Authxntic — site design system.
   Tokens are the v9 brand values, mirrored from
   dist/Authxntic Brand Assets/8. Web/brand.css and 7. Palette/palette.json.
   Blood is a BRAND-SURFACE colour: legal here, never on a garment image. */

:root{
  --ink:   #0A0A0A;
  --white: #FAFAF7;
  --bone:  #EFECE4;
  --brass: #B8893A;
  --blood: #5A0610;

  --dim:   #8A8A86;
  --hair:  rgba(250,250,247,.14);

  --measure: 34rem;
  --gut: clamp(1.5rem, 5vw, 5rem);

  --step--1: clamp(.72rem, .69rem + .14vw, .8rem);
  --step-0:  clamp(.95rem, .91rem + .2vw, 1.06rem);
  --step-1:  clamp(1.3rem, 1.1rem + .9vw, 1.9rem);
  --step-2:  clamp(2rem, 1.5rem + 2.4vw, 3.6rem);
  --step-3:  clamp(2.6rem, 1.6rem + 4.6vw, 6rem);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing:auto;
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:350;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
}

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

/* BRAND MARKS NEVER STRETCH.
   A flex or grid parent stretches its children across the cross axis by
   default, and `width:auto` does NOT protect against it: the AMG mark rendered
   576x24 from a 1920x576 master, a 7.2x horizontal distortion, and the house
   wordmark rendered 29x18 from 23072x2788. Distorting a brand mark is the one
   unacceptable thing to do to it, so every mark opts out of stretching here
   rather than relying on each layout to remember. */
.mark, .arm__mark, .house__mark img, .opener__mark{
  flex:0 0 auto; align-self:flex-start; justify-self:start;
  width:auto; max-width:100%; object-fit:contain;
}
a{ color:inherit; }

/* ---- shared atoms ------------------------------------------------------ */

.label{
  font-size:var(--step--1);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:450;
}

.dim{ color:var(--dim); }

.rule{ border:0; border-top:1px solid var(--hair); margin:0; }

.wrap{ max-width:78rem; margin:0 auto; padding-inline:var(--gut); }

.mark{ height:1.05rem; opacity:.9; }

/* ---- the house ---------------------------------------------------------
   THE SEAM IS THE SIGNATURE. This house's problem is keeping two arms from
   lending each other equity, so the house is drawn as the LINE BETWEEN them
   rather than a logo above them. Two arms, floor to ceiling, equal space and
   equal type scale, neither ranked. No photography on this surface at all:
   any image here is the association we are trying to prevent. */

body.house{
  min-height:100svh; display:flex; flex-direction:column;
  font-family:"Inter", ui-sans-serif, -apple-system, sans-serif;
}

.house__grid{ position:relative; flex:1; display:grid; }
@media (min-width:54rem){ .house__grid{ grid-template-columns:1fr 1fr; } }

.arm{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,5vw,5rem) clamp(2.5rem,7vh,5rem);
  min-height:clamp(20rem,46svh,34rem);
  text-decoration:none; color:inherit;
  background:radial-gradient(120% 90% at 50% 120%, #131313 0%, var(--ink) 62%);
  transition:background .6s ease;
}
.arm:hover,.arm:focus-visible{ background:radial-gradient(120% 90% at 50% 120%, #1A1A1A 0%, #0D0D0D 62%); outline:none; }

.arm__eyebrow{
  font-size:var(--step--1); font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass);
}
.arm__mark{ height:1.7rem; margin-top:1.5rem; opacity:.92; }
.arm--cloth .arm__name{ margin-top:calc(1.4rem + 1.5rem); }

.arm__name{
  margin:1.5rem 0 0; font-size:clamp(2.2rem,1.1rem + 3.6vw,4.4rem);
  line-height:.98; font-weight:200; letter-spacing:-.045em; color:var(--white);
}
.arm__line{ margin:1.2rem 0 0; max-width:24rem; color:var(--dim); font-weight:300; }

.arm__under{
  margin-top:2rem; font-size:var(--step--1); font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone);
  display:inline-flex; align-items:center; gap:.6em; align-self:flex-start;
  padding-bottom:.55rem; border-bottom:1px solid var(--brass);
  transition:color .4s ease, gap .4s ease;
}
.arm__under b{ color:var(--brass); font-weight:500; }
.arm__under::after{ content:"\2192"; color:var(--brass); }
.arm:hover .arm__under,.arm:focus-visible .arm__under{ color:var(--white); gap:1em; }

/* the seam: the house itself */
.seam{ position:absolute; inset:0; pointer-events:none; }
.seam::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--brass); opacity:.55;
  transform:scaleX(0); animation:draw .9s .15s cubic-bezier(.2,.7,.2,1) forwards;
}
@media (min-width:54rem){
  .seam::before{
    left:50%; right:auto; top:0; bottom:0; width:1px; height:auto;
    transform:scaleY(0); animation-name:drawY;
  }
}
@keyframes draw{ to{ transform:scaleX(1); } }
@keyframes drawY{ to{ transform:scaleY(1); } }

/* The mark is WRAPPED rather than padded: with border-box in force, padding
   larger than a declared height collapses the image's content box to zero,
   which is what crushed this wordmark to 35x19 from a 8.28:1 master. The
   wrapper carries the ink plate; the image inside is left to its own aspect. */
.house__mark{
  position:absolute; top:clamp(1.6rem,4vh,2.6rem); left:50%; translate:-50% 0;
  z-index:2; padding:.6rem 1.2rem; background:var(--ink); line-height:0;
}
.house__mark img{ height:1rem; width:auto; display:block; }
@media (max-width:53.99rem){ .house__mark{ position:static; translate:none; display:block; margin:1.6rem auto 0; } }

.house__foot{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
  padding:1.5rem clamp(1.5rem,5vw,5rem) 2rem;
  border-top:1px solid var(--hair);
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}

@media (prefers-reduced-motion:reduce){
  .seam::before{ animation:none; transform:none; }
}

/* ---- interior pages ---------------------------------------------------- */

.nav{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:clamp(1.4rem,4vh,2.2rem) 0; border-bottom:1px solid var(--hair);
}
.nav a{ text-decoration:none; }
.nav__back{ font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.nav__back:hover{ color:var(--brass); }
.nav__back::before{ content:"\2190"; margin-right:.55em; }

.hero{ padding:clamp(3rem,12vh,7rem) 0 clamp(2rem,7vh,4rem); }
.hero h1{
  margin:.6rem 0 0; font-size:var(--step-3); line-height:.98;
  font-weight:300; letter-spacing:-.035em; color:var(--white);
}
.hero p{
  margin:1.5rem 0 0; max-width:40rem; font-size:var(--step-1);
  font-weight:300; line-height:1.42; color:var(--bone); opacity:.82;
}

section{ padding-block:clamp(2.6rem,8vh,5rem); border-top:1px solid var(--hair); }
section > h2 + p{ margin-bottom:1.8rem; }
section h2{
  margin:0 0 1.6rem; font-size:var(--step-1); font-weight:350;
  letter-spacing:-.018em; color:var(--white);
}
section p{ margin:0 0 1rem; max-width:var(--measure); }
section p:last-child{ margin-bottom:0; }

/* the offer blocks on the AMG door */
.offer{ display:grid; gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:53rem){ .offer{ grid-template-columns:14rem 1fr; } }
.offer + .offer{ margin-top:clamp(2rem,6vh,3.4rem); padding-top:clamp(2rem,6vh,3.4rem); border-top:1px solid var(--hair); }
.offer__no{
  display:block; font-size:var(--step-1); font-weight:300; line-height:1;
  color:var(--brass); opacity:.5; margin-bottom:.9rem;
  font-variant-numeric:tabular-nums;
}
.offer__meta .label{ display:block; }
.offer__meta .note{ display:block; margin-top:.6rem; font-size:var(--step--1); color:var(--dim); line-height:1.55; }
.offer__body p{ max-width:40rem; }
.offer__body h3{
  margin:0 0 .7rem; font-size:var(--step-1); font-weight:300;
  letter-spacing:-.02em; color:var(--white);
}

.cta{
  display:inline-block; margin-top:1.4rem; padding:.85rem 1.5rem;
  border:1px solid var(--brass); color:var(--brass);
  font-size:var(--step--1); letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; transition:background-color .35s ease, color .35s ease;
}
.cta:hover,.cta:focus-visible{ background:var(--brass); color:var(--ink); }
.cta--quiet{ border-color:var(--hair); color:var(--bone); }
.cta--quiet:hover,.cta--quiet:focus-visible{ background:var(--bone); color:var(--ink); }

.terms{ margin:1.6rem 0 0; padding:0; list-style:none; display:grid; gap:.55rem; }
.terms li{ display:flex; gap:1rem; font-size:var(--step--1); color:var(--dim); }
.terms li b{ min-width:9rem; color:var(--bone); font-weight:450; }

/* plates — the garment/artefact grid on the clothing door */
.plates{ display:grid; gap:clamp(1rem,2.5vw,2rem); }
@media (min-width:44rem){ .plates{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:70rem){ .plates--three{ grid-template-columns:repeat(3,1fr); } }

figure{ margin:0; }
/* The v9 photography is a product in a dark void, so several plates are close
   to the page ground. A hair-lined, very slightly raised panel keeps each one
   reading as a plate without relighting the image, which the grade forbids. */
figure img{
  background:#131313; border:1px solid var(--hair); width:100%;
  aspect-ratio:4/5; object-fit:cover;
}
figure.wide img{ aspect-ratio:16/9; }
figcaption{
  margin-top:.75rem; font-size:var(--step--1); color:var(--dim);
  display:flex; justify-content:space-between; gap:1rem;
}
figcaption b{ color:var(--bone); font-weight:450; }

.foot{
  border-top:1px solid var(--hair); margin-top:clamp(3rem,9vh,6rem);
  padding:2rem 0 3rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}

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

/* ---- action-led heroes + offer cards ----------------------------------
   The studio and records surfaces are transactional: someone arriving wants
   to book or to licence, so the primary action sits in the hero rather than
   at the bottom of a scroll. */

.hero--act h1{ margin-bottom:0; }
.acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.9rem; }
.acts .cta{ margin-top:0; }

.rates{ display:grid; gap:1px; background:var(--hair); border:1px solid var(--hair); }
@media (min-width:53rem){ .rates{ grid-template-columns:repeat(3,1fr); } }
.rate{ background:var(--ink); padding:clamp(1.4rem,3vw,2rem); display:flex; flex-direction:column; }
.rate p{ margin:.85rem 0 0; color:var(--dim); font-size:var(--step-0); }
.rate__go{
  margin-top:auto; padding-top:1.4rem; font-size:var(--step--1);
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  text-decoration:none; align-self:flex-start;
}
.rate__go::after{ content:" \2192"; }
.rate__go:hover{ text-decoration:underline; text-underline-offset:.3em; }

/* ---- the opener --------------------------------------------------------
   A 4:5 PLATE beside the title, never a full-bleed band. The v9 photography
   spec is square or 4:5 and never 16:9 for product, so a viewport-wide crop of
   a plinth shot would break the one framing language the whole book is built
   to. Presence comes from the plate being large, not from cropping it wide. */

.opener{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:center;
  padding-block:clamp(2.5rem,8vh,5rem);
}
@media (min-width:56rem){ .opener{ grid-template-columns:1fr 1fr; } }

.opener__h{
  margin:.7rem 0 0; font-size:var(--step-3); line-height:.97;
  font-weight:300; letter-spacing:-.035em; color:var(--white); text-wrap:balance;
}
.opener__type p{ margin:1.5rem 0 0; max-width:34rem; color:var(--dim); font-size:var(--step-1); font-weight:300; line-height:1.42; }
.opener__plate{ margin:0; }
.opener__plate img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:#131313; border:1px solid var(--hair);
}

/* ---- social ------------------------------------------------------------ */

.social{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.social a{
  font-size:var(--step--1); letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; transition:color .3s ease;
}
.social a:hover,.social a:focus-visible{ color:var(--brass); }
.social--route{ margin-top:2rem; }
.foot{ align-items:baseline; }

/* ---- follow -------------------------------------------------------------
   The business is social first, so social is a CHANNEL on this site and not a
   row of small print in the footer. Blvck Paris is the reference the operator
   named: a premium monochrome house built almost entirely on the feed, which
   is the proof that social-led and restrained are not in tension. */

.follow{ display:grid; gap:clamp(1.6rem,4vw,3.5rem); }
@media (min-width:56rem){ .follow{ grid-template-columns:1fr 1fr; align-items:start; } }
.follow h2{ margin:.6rem 0 0; }
.follow p{ margin:.9rem 0 0; color:var(--dim); }

.follow__links{ border-top:1px solid var(--hair); }
.follow__links a{
  display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem;
  padding:1.1rem .2rem; border-bottom:1px solid var(--hair);
  text-decoration:none; transition:padding-left .35s ease;
}
.follow__links a span{ font-size:var(--step-1); font-weight:300; letter-spacing:-.02em; color:var(--white); }
.follow__links a i{
  font-style:normal; font-size:var(--step--1); letter-spacing:.14em;
  text-transform:uppercase; color:var(--dim); text-align:right;
}
.follow__links a:hover,.follow__links a:focus-visible{ padding-left:.8rem; outline:none; }
.follow__links a:hover span,.follow__links a:focus-visible span{ color:var(--brass); }

/* ---- branches: the two things under the music group -------------------- */

.branches{ display:grid; gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:54rem){ .branches{ grid-template-columns:1fr 1fr; } }

.branch{ display:block; text-decoration:none; color:inherit; }
.branch figure{ margin:0 0 1.4rem; overflow:hidden; }
.branch figure img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  background:#131313; border:1px solid var(--hair);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.branch:hover figure img,.branch:focus-visible figure img{ transform:scale(1.035); }
.branch:focus-visible{ outline:1px solid var(--brass); outline-offset:.6rem; }
.branch h3{
  margin:.55rem 0 0; font-size:var(--step-2); line-height:1.02;
  font-weight:200; letter-spacing:-.04em; color:var(--white);
}
.branch p{ margin:.9rem 0 0; color:var(--dim); max-width:32rem; }
.branch__go{
  display:inline-flex; align-items:center; gap:.6em; margin-top:1.3rem;
  font-size:var(--step--1); font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
  padding-bottom:.5rem; border-bottom:1px solid var(--hair);
  transition:gap .4s ease, border-color .4s ease;
}
.branch__go::after{ content:"\2192"; }
.branch:hover .branch__go,.branch:focus-visible .branch__go{ gap:1em; border-color:var(--brass); }

.opener__mark{ height:1.5rem; display:block; }
.opener__plate figcaption{
  margin-top:.75rem; font-size:var(--step--1); color:var(--dim);
  display:flex; justify-content:space-between; gap:1rem;
}
.opener__plate figcaption b{ color:var(--bone); font-weight:500; }

/* the display face wants a lighter weight than the body at large sizes */
.opener__h,.hero h1{ font-weight:200; letter-spacing:-.045em; }

/* ---- coming soon -------------------------------------------------------
   The clothing house is not open. The page has to carry the tier without
   putting an unavailable line on display, and it has to stay quiet so the
   attention sits with the music side. One plate, one sentence, one action. */

body.soon{ min-height:100svh; display:flex; flex-direction:column; }

.soon__frame{ flex:1; display:grid; align-items:center; gap:0; }
@media (min-width:56rem){ .soon__frame{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }

.soon__plate{ margin:0; position:relative; height:100%; min-height:min(62svh,34rem); }
.soon__plate img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  background:#101010;
}
.soon__plate::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to right, transparent 55%, rgba(10,10,10,.85) 100%);
}
@media (max-width:55.99rem){
  .soon__plate::after{ background:linear-gradient(to bottom, transparent 45%, var(--ink) 100%); }
}

.soon__type{ padding:clamp(2.5rem,7vw,6rem) clamp(1.5rem,5vw,5rem); }
.soon__back{ display:block; margin-bottom:2.5rem; text-decoration:none; width:fit-content; }
.soon__type .label{ display:block; }
.soon__h{
  margin:.8rem 0 0; font-size:clamp(3rem,1.6rem + 5.4vw,7rem); line-height:.9;
  font-weight:200; letter-spacing:-.05em; color:var(--white);
}
.soon__lead{ margin:1.8rem 0 0; max-width:32rem; font-size:var(--step-1); font-weight:300; line-height:1.42; color:var(--bone); }
.soon__note{ margin:1rem 0 0; max-width:32rem; color:var(--dim); }
.soon__acts{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.2rem; }
.soon__acts .cta{ margin-top:0; }

.soon__foot{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.5rem clamp(1.5rem,5vw,5rem) 2rem; border-top:1px solid var(--hair);
  font-size:var(--step--1); letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
}