/* KAWEN — homepage only.
 *
 * Everything shared (tokens, nav, buttons, chips, cards, workflow cards,
 * sections, footer, reveal, breakpoints) moved to css/kawen.css when the
 * design system went site-wide. What is left here is the three things that
 * exist on no other page: the mural hero stage, the three-state "made" strip,
 * and the craft row.
 */

/* --------------------------------------------------------------- hero --- */
/* DEFECT 07 — `align-items:center` left ~180px of nothing under the shorter
   stage column. Top alignment lets the section close under whichever column
   is taller.                                                               */
.hero{position:relative;overflow:hidden;
  padding-block:clamp(24px,4vw,44px) clamp(30px,3.6vw,54px)}
/* DEFECT 09 — with a fixed 5:4 stage the two columns ended at different
   heights and left roughly a quarter of the first screen empty below the
   shorter one. Stretching the row makes the stage take exactly the height
   the copy needs, so the hero closes flush whatever the headline wraps to
   and whatever the viewport is. */
.hero-in{position:relative;z-index:2;display:grid;gap:clamp(28px,4vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:stretch;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.hero-copy{max-width:600px}
.hero h1{margin:18px 0 20px}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap;
  display:inline-block}
/* The one place colour touches the headline: a marker stroke.
   DEFECT 01 — this was a straight, evenly thick, fully opaque bar sitting on
   the baseline. It struck through the descender of the `p` and cut the full
   stop in half, and the hard edges made it read as a progress bar. It is now
   BELOW the baseline, tapered at both ends by the gradient's own transparent
   stops, slightly rotated, and softened — so it reads as something drawn by
   hand across the bottom of the word.                                      */
.hero h1 em::after{content:"";position:absolute;left:-.03em;right:-.05em;
  bottom:-.1em;height:.13em;z-index:-1;border-radius:999px;
  transform:rotate(-.7deg);
  background:linear-gradient(96deg,
    rgba(255,45,155,0) 0%,var(--spray-pink) 12%,
    var(--spray-orange) 52%,var(--spray-violet) 88%,rgba(122,59,255,0) 100%);
  filter:blur(.4px);opacity:.92}
.hero-ar{font-family:var(--kufi);font-size:clamp(19px,2vw,26px);color:var(--muted);
  margin-bottom:10px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
/* DEFECT 03 — as a wrapping flex row this broke 2 + 1 with a gap above the
   orphan. Three equal columns instead: it is a set of three, so it should
   look like one.                                                           */
.assur{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.8vw,26px);margin-top:34px;padding-top:22px;
  border-top:1px solid var(--line)}
.assur li{list-style:none;display:flex;align-items:flex-start;gap:10px;
  font-size:14px;line-height:1.35;color:#3A3A3E}
.assur svg{width:19px;height:19px;flex:none;margin-top:1px;fill:none;
  stroke:var(--ink);stroke-width:1.5}

/* The hero stage: a colour field with the brand object in it. This is the
   mural moment — the only place the paint is allowed to be loud.           */
.stage{position:relative;border-radius:var(--r-lg);
  min-height:clamp(380px,40vw,560px);
  overflow:hidden;background:var(--bone);
  box-shadow:0 30px 70px -30px rgba(9,10,12,.3)}
.stage .bloom{opacity:.85;filter:blur(52px)}
.stage-b1{width:62%;aspect-ratio:1;left:-12%;top:-16%}
.stage-b2{width:58%;aspect-ratio:1;right:-10%;top:4%}
.stage-b3{width:54%;aspect-ratio:1;left:24%;bottom:-24%}
.stage-b4{width:38%;aspect-ratio:1;right:14%;bottom:-12%}
.stage-grain{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(rgba(9,10,12,.16) .6px,transparent .6px);
  background-size:4px 4px;opacity:.5;mix-blend-mode:multiply}
.stage-obj{position:absolute;z-index:2;inset:6% 4% 0 4%;display:flex;
  align-items:flex-end;justify-content:center}
.stage-obj img{height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(9,10,12,.45))}
/* The object plate is near-black with its own dark ground; masking it to a
   soft-edged card keeps it from looking like a pasted rectangle.           */
.stage-plate{border-radius:20px;overflow:hidden;height:96%;
  border:1px solid rgba(255,255,255,.35)}

/* Mural lettering, in the spirit of the reference's hand-painted wall text.
   Set in the brand's own Kufi/Plex rather than a novelty face, so it reads
   as art direction instead of clip art.                                    */
.mural{position:absolute;z-index:3;font-weight:700;line-height:.92;
  letter-spacing:-.03em;color:var(--ink);mix-blend-mode:multiply;
  text-transform:uppercase;pointer-events:none;user-select:none}
/* DEFECT 02 — both lines used to cross the near-black object plate, where
   `multiply` turned them into black on black and ate about half of each.
   The blend is right for a painted wall, so the fix is placement: the
   lettering stays on the wall and never touches the object. The plate is
   inset from the top-left and bottom-left corners (see .stage-obj), and
   these two sit in exactly those corners.                                  */
.mural-a{top:6%;left:5%;font-size:clamp(14px,1.75vw,24px);
  transform:rotate(-4deg);max-width:8em}
.mural-b{bottom:6%;left:5%;font-family:var(--mono);font-size:clamp(9px,.8vw,11px);
  letter-spacing:.18em;font-weight:500;opacity:.7;text-transform:uppercase;
  max-width:7em;line-height:1.5}
/* Room on the left for the lettering, so the plate is pushed right and the
   two never share space.                                                   */
.stage-obj{inset:8% 3% 4% 26%}

/* --------------------------------------------------------------- made --- */
/* The three-plate "how it is made" strip. This is what remains of the
   Session-1 materialization: the same three locked states, shown side by
   side instead of pinned across three screens of scroll. Same story, one
   glance, no scroll tax.                                                   */
.grid-made{display:grid;gap:clamp(14px,1.4vw,22px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
.made{border-radius:var(--r-md);overflow:hidden;background:var(--ink);
  border:1px solid rgba(255,255,255,.07);position:relative}
.made-shot{aspect-ratio:1/1;overflow:hidden}
.made-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 46%}
.made-body{padding:16px 18px 20px;color:var(--paper)}
.made-body .n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  color:rgba(255,255,255,.5);margin-bottom:6px}
.made-body h3{margin-bottom:5px}
.made-body p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.42}

/* -------------------------------------------------------------- craft --- */
.craft{display:grid;gap:clamp(26px,3.6vw,60px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1.4fr);align-items:start}
.craft h2 em{font-style:normal;background:linear-gradient(96deg,
  var(--spray-violet),var(--spray-pink) 60%,var(--spray-orange));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.craft-list{display:grid;gap:clamp(18px,2vw,28px);
  grid-template-columns:repeat(3,minmax(0,1fr));padding-top:8px}
.craft-list li{list-style:none}
.craft-ico{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.craft-list h3{font-size:17px;margin-bottom:6px}
.craft-list p{font-size:14.5px;color:var(--muted);line-height:1.45}


/* A section head with nothing on its right should not still be a
   space-between row — after the copy cuts, several notes were removed. */
.sec-head-solo{justify-content:flex-start}

@media (max-width:1080px){
  .hero-in{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:none}
  .stage{aspect-ratio:4/3;min-height:0}
  .craft{grid-template-columns:1fr}
}
@media (max-width:860px){
  .grid-made{grid-template-columns:1fr}
  .made-shot{aspect-ratio:16/10}
}
@media (max-width:620px){
  .stage{aspect-ratio:1/1;min-height:0}
  .assur{grid-template-columns:1fr;gap:12px}
  .craft-list{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .stage-obj img{transition:none}
}

/* Also used on About, which shares the made strip and the workflow grid. */
.notyet{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  grid-template-columns:repeat(2,minmax(0,1fr))}
.notyet>div{background:var(--paper);display:flex;align-items:baseline;gap:14px;
  padding:15px 18px}
.notyet dt{font-weight:600;letter-spacing:-.01em}
.notyet dd{margin-inline-start:auto;font-size:14px;color:var(--muted);
  font-family:var(--mono);text-align:right}
@media (max-width:620px){ .notyet{grid-template-columns:1fr} }