/* ============================================================
   Lead in Beauty — Coming Soon
   Palette, type and rules follow Brief_Design_Lead_in_Beauty_4.
   Hard constraints from the brief, do not "improve" them away:
     - the mark carries malva + antracite ONLY
     - no gradients, swooshes, tapered curves, brush gestures
     - no gold (that is M.net's signature colour)
     - emphasis comes from weight and tracking, never from colour
   ============================================================ */

:root{
  --panna:#F4EFEB;
  --grigio-chiaro:#B3B0A7;
  --antracite:#545454;
  --malva:#B57699;

  --body:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;

  --shell:1240px;
  --gutter:clamp(22px,5vw,64px);
  --marker:clamp(9.5px,.62vw,11px);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--panna);
  color:var(--antracite);
  font-family:var(--body);
  font-weight:400;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

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

.marker{
  font-size:var(--marker);
  letter-spacing:.24em;
  text-transform:uppercase;
  font-weight:500;
  line-height:1.6;
  margin:0;
}

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

.lockup{
  width:min(100%,var(--lockup-w,520px));
  height:auto;
}

/* The texture is a near-white wall with raking light. It is held at a
   whisper so it reads as material, not as a photograph. Flat overlay,
   not a gradient — gradients are banned by the brief. */
.textured{
  background-color:var(--panna);
  background-image:linear-gradient(rgba(244,239,235,.62),rgba(244,239,235,.62)),url("images/texture.jpg");
  background-size:cover;
  background-position:center;
}

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

@media (prefers-reduced-motion:no-preference){
  .fade{animation:fade .9s var(--ease) both;}
  .fade-2{animation-delay:.12s;}
  .fade-3{animation-delay:.22s;}
  .fade-4{animation-delay:.32s;}
}
@keyframes fade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* 30.08: she asked for the method strip and the meta line to go, and the
   central text was the placeholder rather than her copy. The page is now the
   "una sola schermata centrata" the content document specifies: lockup,
   "Coming soon.", payoff. */
/* 31.08: "il COMING SOON possiamo metterlo in stampatello e piu piccolo" -
   from a serif display line to a tracked uppercase label, sized between the
   page markers and the body copy so the payoff underneath carries the weight. */
.headline{
  margin:0;font-family:var(--body,Montserrat,system-ui,sans-serif);
  font-size:clamp(15px,1.7vw,21px);line-height:1.2;
  letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  color:var(--antracite,#2E2C2B);
}
.stage .shell > .descriptor{max-width:34ch;}