/* Landing page — design iteration 11a (2026-09-25): full-bleed campaign heroes,
   an index whose rows swap the photograph, and the injectables door. Loaded on
   the home page only and scoped to .h11, so nothing here reaches another page.
   Measures resolve to the 1280px artboard and scale from there. */

.h11{
  --h11-ink:#121314;
  --h11-sol:#b3271a;
  --h11-hya:#285f86;
  --h11-rule:rgba(18,19,20,.08);
  --h11-t50:rgba(18,19,20,.5);
  --h11-t60:rgba(18,19,20,.6);
  --h11-t72:rgba(18,19,20,.72);
  --h11-pad:clamp(20px,5.625vw,88px);
  --display:'Michroma',var(--sans);
  background:#fbfbfa;
  color:var(--h11-ink);
}
.h11 .frame{background:#fbfbfa}
.h11-main{overflow:clip}

.h11-kicker{margin:0 0 20px;font:500 10px/1.2 var(--mono);letter-spacing:.3em;text-transform:uppercase}

.h11-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 28px;border-radius:999px;border:1px solid var(--h11-ink);
  font:500 14px/1 var(--sans);color:var(--h11-ink);
  transition:opacity .18s ease,transform .18s ease,background .18s ease;
}
.h11-btn--solid{background:var(--h11-ink);color:#fff}
.h11-btn:hover{transform:translateY(-1px)}
.h11-btn--solid:hover{opacity:.88;color:#fff}
.h11-btn:not(.h11-btn--solid):hover{background:var(--h11-ink);color:#fff}
.h11 a:focus-visible,.h11 button:focus-visible,.h11 input:focus-visible{outline:3px solid var(--h11-sol);outline-offset:3px}

/* ---------------------------------------------------------- campaign heroes */
.h11-hero{position:relative;overflow:hidden}
.h11-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h11-hero__copy{
  position:relative;height:100%;
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--h11-pad);
}
.h11-hero__line{margin:0 0 30px;font:500 clamp(24px,2.34vw,32px)/1.2 var(--sans);letter-spacing:-.025em}
.h11-hero__sub{margin:-14px 0 32px;max-width:400px;font:300 clamp(16px,1.4vw,19px)/1.55 var(--sans);color:var(--h11-t72);text-wrap:pretty}
.h11-hero__actions{display:flex;flex-wrap:wrap;gap:14px}

.h11-sol{height:clamp(560px,59.4vw,900px);background:#e9e2d6}
.h11-sol .h11-hero__copy{max-width:760px}
.h11-sol .h11-kicker{color:var(--h11-sol)}
.h11-sol h1{white-space:nowrap;margin:0 0 20px;font:400 clamp(52px,6.56vw,96px)/1 var(--display);letter-spacing:-.02em}
.h11-sol__spec{
  position:absolute;left:var(--h11-pad);bottom:26px;
  font:400 8.5px/1 var(--mono);letter-spacing:.24em;color:rgba(18,19,20,.55);
}

.h11-strip{margin:0;display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--h11-rule)}
.h11-strip > div{display:flex;flex-direction:column-reverse;gap:6px;padding:34px var(--h11-pad) 34px 32px;border-right:1px solid var(--h11-rule)}
.h11-strip > div:first-child{padding-left:var(--h11-pad)}
.h11-strip > div:last-child{border-right:0}
.h11-strip dt{font:400 9px/1.4 var(--mono);letter-spacing:.22em;color:var(--h11-t50)}
.h11-strip dd{margin:0;font:400 clamp(22px,2.19vw,30px)/1.1 var(--display);white-space:nowrap}

.h11-hya{height:clamp(540px,56.25vw,860px);background:#dfe9f2;margin-top:12px}
.h11-hya .h11-hero__copy{max-width:700px}
.h11-hya .h11-kicker{color:var(--h11-hya)}
.h11-hya h2{white-space:nowrap;margin:0 0 18px;font:400 clamp(46px,5.625vw,82px)/1 var(--display);letter-spacing:-.02em}
.h11-hya .h11-hero__line{font-size:clamp(22px,2.19vw,30px)}
.h11-hya__links{display:flex;flex-wrap:wrap;gap:28px}
.h11-hya__links a{font:500 15px/1 var(--sans);color:var(--h11-hya)}
.h11-hya__links a:hover{text-decoration:underline;text-underline-offset:4px}
/* Film grain over the HYA photograph (owner, 2026-09-24: "10-15%"), carried
   from the previous landing band. Static; the strength is the opacity. */
.h11-hya::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.12;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
.h11-hya .h11-hero__copy{z-index:1}

/* ------------------------------------------------------------------ tiles */
.h11-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px}
.h11-tile{position:relative;margin:0;height:clamp(420px,43.75vw,660px);overflow:hidden}
.h11-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h11-tile figcaption{position:absolute;left:0;right:0;padding:0 24px;text-align:center}
.h11-tile--top figcaption{top:44px}
.h11-tile--bottom figcaption{bottom:44px;color:#fff}
.h11-tile small{display:block;margin-bottom:12px;font:500 10px/1 var(--mono);letter-spacing:.3em}
.h11-tile--top small{color:var(--h11-hya)}
.h11-tile strong{display:block;font:600 clamp(24px,2.5vw,34px)/1.1 var(--sans);letter-spacing:-.035em}
.h11-tile--hya{background:#e9eef3}
.h11-tile--sol{background:#e9e2d6}

/* --------------------------------------------------------------- standard */
.h11-standard{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(80px,8.6vw,120px) var(--h11-pad) clamp(72px,7.8vw,110px);
}
.h11-standard .h11-kicker{color:var(--h11-t50);margin-bottom:22px}
.h11-standard h2{margin:0 0 20px;max-width:820px;font:600 clamp(40px,4.69vw,64px)/1.05 var(--sans);letter-spacing:-.045em}
.h11-standard p:not(.h11-kicker){margin:0 0 26px;max-width:560px;font:400 clamp(17px,1.48vw,19px)/1.5 var(--sans);color:var(--h11-t60);text-wrap:pretty}
.h11-standard a{font:500 15px/1 var(--sans);color:var(--h11-sol)}
.h11-standard a:hover{text-decoration:underline;text-underline-offset:4px}

/* ------------------------------------------------------------------ index */
.h11-index{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,560px);border-top:1px solid var(--h11-rule);border-bottom:1px solid var(--h11-rule)}
.h11-index__list{padding:56px var(--h11-pad) 48px}
.h11-index__head{display:flex;justify-content:space-between;margin:0 0 26px;font:400 9px/1 var(--mono);letter-spacing:.24em;color:var(--h11-t50)}
.h11-index ol{margin:0;padding:0;list-style:none}
.h11-row{
  width:100%;display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:20px;
  padding:18px 0;border-top:1px solid rgba(18,19,20,.12);text-align:left;
  color:rgba(18,19,20,.22);transition:color .2s ease,border-color .2s ease;
}
.h11-row:hover{color:rgba(18,19,20,.55)}
.h11-row[aria-pressed="true"]{color:var(--h11-ink);border-top-color:var(--red)}
.h11-row__n{font:400 10px/1 var(--mono);letter-spacing:.2em}
.h11-row__mark{font:400 clamp(28px,3.125vw,44px)/1.05 var(--display);letter-spacing:-.01em;white-space:nowrap}
.h11-row__price{font:400 11px/1 var(--mono);letter-spacing:.14em}
.h11-index__panel{display:flex;flex-direction:column;background:#f4f4f2;border-left:1px solid var(--h11-rule)}
.h11-index__media{position:relative;flex:1;min-height:400px;margin:0;overflow:hidden}
.h11-index__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.h11-index__media [hidden]{display:none}
.h11-index__pending{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(135deg,rgba(18,19,20,.045) 0 1px,transparent 1px 9px);
  font:400 9px/1 var(--mono);letter-spacing:.22em;color:rgba(18,19,20,.45);
}
.h11-index__foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 32px 30px;border-top:1px solid var(--h11-rule);background:#fbfbfa;
}
.h11-index__name{display:block;margin-bottom:6px;font:500 17px/1.3 var(--sans);letter-spacing:-.01em}
.h11-index__spec{display:block;font:400 9.5px/1.4 var(--mono);letter-spacing:.18em;color:var(--h11-t50)}
.h11-index__buy{flex:none;padding:12px 22px;border-radius:999px;background:var(--h11-ink);color:#fff;font:500 13px/1 var(--sans)}
.h11-index__buy:hover{opacity:.88;color:#fff}

/* ------------------------------------------------------------- real light */
.h11-light{padding:72px var(--h11-pad) 80px}
.h11-light__head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin:0 0 26px}
.h11-light h2{margin:0;font:600 clamp(28px,2.66vw,36px)/1.1 var(--sans);letter-spacing:-.035em}
.h11-light__head span{font:400 9px/1.4 var(--mono);letter-spacing:.24em;color:var(--h11-t50)}
.h11-light__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;height:clamp(320px,32.8vw,500px)}
.h11-light__grid figure{margin:0;overflow:hidden}
.h11-light__grid img{width:100%;height:100%;object-fit:cover;display:block}

/* ------------------------------------------------------------- injectables */
.h11-inj{display:flex;flex-direction:column;align-items:center;text-align:center;padding:90px var(--h11-pad);background:#f4f4f2}
.h11-inj .h11-kicker{color:var(--h11-t50);margin-bottom:18px}
.h11-inj h2{margin:0 0 12px;font:600 clamp(30px,3.125vw,42px)/1.1 var(--sans);letter-spacing:-.04em}
.h11-inj p:not(.h11-kicker){margin:0 0 30px;font:400 17px/1.5 var(--sans);color:var(--h11-t60)}
.h11-inj form{
  display:flex;align-items:center;width:min(420px,100%);
  padding:4px 4px 4px 22px;background:#fff;border:1px solid rgba(18,19,20,.16);border-radius:999px;
}
.h11-inj input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:400 12px/1 var(--mono);letter-spacing:.26em;color:var(--h11-ink)}
.h11-inj form:focus-within{border-color:var(--h11-ink)}
.h11-inj button{padding:11px 20px;border-radius:999px;background:var(--h11-ink);color:#fff;font:500 13px/1 var(--sans)}
.h11-inj__req{margin-top:18px;font:400 10px/1.4 var(--mono);letter-spacing:.18em;color:var(--h11-t60)}
.h11-inj__req:hover{color:var(--h11-ink)}

.h11-note{margin:0;padding:30px var(--gut) 26px;max-width:900px;font:400 12px/1.5 var(--sans);color:rgba(18,19,20,.55)}

/* -------------------------------------------------------------- responsive */
@media (max-width:980px){
  .h11-strip{grid-template-columns:repeat(2,1fr)}
  .h11-strip > div{padding-left:var(--h11-pad)}
  .h11-strip > div:nth-child(2){border-right:0}
  .h11-strip > div:nth-child(-n+2){border-bottom:1px solid var(--h11-rule)}
  .h11-index{grid-template-columns:1fr}
  .h11-index__panel{border-left:0;border-top:1px solid var(--h11-rule)}
  .h11-index__media{min-height:0;aspect-ratio:3/2;flex:none}
}

/* Below this a photograph cannot carry type: copy leaves the frame and sits
   on the tint beneath, the frame takes the picture's 3:2 (as on /sol-54). */
@media (max-width:820px){
  .h11-hero{height:auto;display:flex;flex-direction:column}
  .h11-hero > img{position:static;height:auto;aspect-ratio:3/2}
  .h11-hero__copy{height:auto;max-width:none !important;padding:36px var(--h11-pad) 48px}
  .h11-sol > img{object-position:66% 30% !important}
  .h11-sol__spec{position:static;padding:0 var(--h11-pad) 24px;background:#e9e2d6}
  .h11-sol .h11-hero__copy{background:#e9e2d6;padding-bottom:20px}
  .h11-hya .h11-hero__copy{background:#dfe9f2}
  .h11-hya::after{bottom:auto;aspect-ratio:4/3;height:auto}
  /* The HYA photograph stands her at the right edge; a 3:2 frame cannot move
     her, a taller one can (owner, 2026-09-26). */
  .h11-hya > img{aspect-ratio:4/3;object-position:100% 25% !important}
  .h11-tiles{grid-template-columns:1fr}
  .h11-light__head{flex-direction:column;gap:10px}
  .h11-light__grid{grid-template-columns:1fr;height:auto}
  .h11-light__grid figure{aspect-ratio:4/3}
}
@media (max-width:520px){
  .h11-hya > img,.h11-hya::after{aspect-ratio:1/1}
}

@media (max-width:520px){
  .h11-strip > div{padding:24px var(--h11-pad)}
  .h11-row{grid-template-columns:28px 1fr auto;gap:12px;padding:15px 0}
  .h11-index__foot{padding:22px var(--h11-pad) 26px}
}

@media (prefers-reduced-motion:reduce){
  .h11-btn,.h11-row{transition:none}
  .h11-btn:hover{transform:none}
}

/* "The rest of the system." (design 11a revision, 2026-09-26) — replaces the
   interactive Dermal Index. Cards come from store.js (initHomeRest). */
.h11-rest{padding:clamp(64px,6.25vw,88px) var(--h11-pad) clamp(72px,6.9vw,96px);border-top:1px solid var(--h11-rule);border-bottom:1px solid var(--h11-rule)}
.h11-rest__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}
.h11-rest__label{margin:0 0 14px;font:400 9px/1 var(--mono);letter-spacing:.24em;color:var(--h11-t50)}
.h11-rest h2{margin:0;font:600 clamp(30px,3.125vw,42px)/1.1 var(--sans);letter-spacing:-.04em}
.h11-rest__side{display:flex;align-items:center;gap:22px}
.h11-rest__side span{font:400 9px/1 var(--mono);letter-spacing:.24em;color:var(--h11-t50)}
.h11-rest__side .h11-btn{padding:12px 22px;font-size:13px;border-color:rgba(18,19,20,.2)}
@media (max-width:820px){
  .h11-rest__head{flex-direction:column;align-items:flex-start}
}