/* ============================================================
   MODELS.COM — EDITIONS STORE  (dark band)  ·  BESPOKE STYLES ONLY
   ------------------------------------------------------------
   This file deliberately defines NOTHING that the production
   stylesheets already provide. Loaded site-wide and relied on here:

     6f871781…css  →  @font-face (SuisseIntl / PPEiko),
                      :root tokens  --color-functional-*,
                      --radius-*, --spacing-*, --text-*,
                      .mdc-grid / .mdc-container,
                      .mdc-font-primary--* / .mdc-font-accent--*
     a8dae40f…css  →  .sb-* helpers

   So NO @font-face, NO color/space/text tokens, NO grid, NO
   font-family rules live here — those are applied in the markup
   via .mdc-font-* classes and referenced via var(--…).

   The ONLY thing this file owns is the dark band + the store's own
   heavy Suisse Condensed voice, which is intentionally not part of the
   design system (the store carries its own bolder tone). The dark
   surface uses the ink token; the only true literals are the two
   warm-white text tints on that dark ground.
   ============================================================ */

.mdc-editions{
  --editions-cond:"SuisseIntl Condensed","SuisseIntlCond","SuisseIntl-Condensed","SuisseIntl",sans-serif;
  background:var(--color-functional-gray-black);      /* ink band */
  color:#fff;
  padding:var(--spacing-300) 0 var(--spacing-350);
  margin:var(--spacing-300) 0 var(--spacing-150);
}
.mdc-editions__inner{
  max-width:1232px; margin-inline:auto;
  display:flex; flex-direction:column; gap:var(--spacing-150);
}

/* ---------- Store mini header ---------- */
.mdc-editions__head{
  display:flex; justify-content:space-between; align-items:center;
  gap:var(--spacing-150); flex-wrap:wrap;
  padding-bottom:var(--spacing-100);
  border-bottom:1px solid rgba(255,255,255,.25);
}
/* Site-wide `a` styles are more specific than a bare class in some templates,
   so every anchor in the band is qualified by .mdc-editions and forced to
   inherit the dark-band ink treatment (no site link color / hover bg). */
.mdc-editions a{ background:transparent; }
.mdc-editions a.mdc-editions__brand{ display:flex; align-items:baseline; gap:var(--spacing-075); text-decoration:none; color:#fff; }
.mdc-editions a.mdc-editions__storelink,
.mdc-editions a.mdc-editions__storelink:visited{
  font-size:var(--text-068-and-three-quatars); letter-spacing:.03em; white-space:nowrap;
  color:#fff; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4); transition:text-decoration-color .2s ease;
}
.mdc-editions a.mdc-editions__storelink:hover,
.mdc-editions a.mdc-editions__storelink:focus{ color:#fff; background:transparent; text-decoration-color:currentColor; }
.mdc-editions__logo{ height:17px; width:auto; display:block; position:relative; top:2px; }
.mdc-editions__wordmark{ font-size:var(--text-125); letter-spacing:-0.01em; color:#fff; }

/* ---------- Big statement headline (Suisse Condensed = bespoke store voice) ---------- */
.mdc-editions__headline{
  margin:0; max-width:22ch; color:#fff;
  font-family:var(--editions-cond);
  font-weight:900;                                    /* bespoke: Suisse Condensed Black */
  font-size:clamp(30px, 4.2vw, 50px); line-height:.98; letter-spacing:-0.02em;
}

/* ---------- Full-width edition photograph (SHARP corners = editorial) ---------- */
.mdc-editions__imglink{ display:block; width:100%; }
.mdc-editions__img{
  width:100%; aspect-ratio:1982/1021;
  background-size:cover; background-position:center;
  border-radius:0; transition:opacity .2s ease;
}
.mdc-editions__imglink:hover .mdc-editions__img{ opacity:.9; }

/* ---------- Below-image: label / blurb / CTA ---------- */
.mdc-editions__foot{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:var(--spacing-200); align-items:flex-start;
}
.mdc-editions__labelcol{ display:flex; flex-direction:column; gap:var(--spacing-050); }
.mdc-editions__label{ font-family:var(--editions-cond); font-weight:900; font-size:var(--text-100); letter-spacing:0; color:#fff; }
.mdc-editions__ships{
  font-family:var(--editions-cond);
  font-size:var(--text-068-and-three-quatars); letter-spacing:.04em;
  text-transform:uppercase; color:#a8a8a8;             /* warm grey on dark */
}
.mdc-editions__blurb{
  font-family:var(--editions-cond);
  font-weight:900; font-size:var(--text-087-and-half); line-height:1.35;
  letter-spacing:-0.005em; color:#fff;
}
.mdc-editions__ctacol{ display:flex; flex-direction:column; align-items:flex-end; }
.mdc-editions a.mdc-editions__shop,
.mdc-editions a.mdc-editions__shop:visited{ color:var(--color-functional-gray-black); background:#fff; text-decoration:none; }
.mdc-editions a.mdc-editions__shop:hover{ color:var(--color-functional-gray-black); background:#fff; opacity:.85; }
.mdc-editions__shop{
  display:inline-block; cursor:pointer; text-decoration:none;
  font-size:var(--text-075); letter-spacing:.01em; line-height:1;
  padding:14px 22px; border-radius:0;                  /* sharp = store voice */
  background:#fff; color:var(--color-functional-gray-black);
  transition:opacity .2s ease;
}
.mdc-editions__shop:hover{ opacity:.85; }

/* ---------- Responsive: the 3-col row STAYS 3-up on mobile (per design);
     only the gap and type tighten. ---------- */
@media (max-width:768px){
  .mdc-editions__foot{ gap:var(--spacing-075); }
  .mdc-editions__blurb{ font-size:var(--text-075); line-height:1.3; }
  .mdc-editions__shop{ padding:11px 14px; font-size:var(--text-068-and-three-quatars); text-align:center; }
}
@media (max-width:480px){
  .mdc-editions__foot{ gap:var(--spacing-050); }
  .mdc-editions__label{ font-size:var(--text-087-and-half); }
  .mdc-editions__blurb{ font-size:var(--text-068-and-three-quatars); }
  .mdc-editions__shop{ padding:10px 10px; }
}