/* Phase 3 — editorial storefront and responsive navigation. */
.skip-link {
  position:fixed;
  z-index:1000;
  top:.75rem;
  left:.75rem;
  padding:.75rem 1rem;
  color:var(--white);
  background:var(--ink);
  border:1px solid var(--white);
  font:600 .72rem/1 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  transform:translateY(-150%);
}
.skip-link:focus { transform:translateY(0); }

.desktop-nav a { position:relative; }
.desktop-nav a::after {
  content:"";
  position:absolute;
  right:.75rem;
  bottom:.32rem;
  left:.75rem;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms ease;
}
.desktop-nav a:hover::after,.desktop-nav a:focus-visible::after { transform:scaleX(1); }

.storefront-index { background:var(--white); }
.storefront-heading {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.45fr);
  align-items:end;
  gap:clamp(2rem,5vw,5rem);
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.storefront-heading .section-title { margin-top:.65rem; }
.storefront-heading .section-description { justify-self:end; max-width:27rem; }
.storefront-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(260px,auto);
  gap:1px;
  padding:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.storefront-card {
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(1.35rem,3vw,2.75rem);
  color:var(--ink);
  background:var(--paper);
  transition:background-color 180ms ease,color 180ms ease;
}
.storefront-card--lead { grid-row:span 2; min-height:521px; background:var(--white); }
.storefront-card--signal { background:var(--clay); }
.storefront-card--dark { color:var(--white); background:var(--ink); }
.storefront-card--wide { grid-column:1 / -1; min-height:360px; }
.storefront-card.has-visual {
  color:var(--white);
  background-color:var(--ink);
  background-image:linear-gradient(180deg,rgba(17,17,17,.2),rgba(17,17,17,.34) 42%,rgba(17,17,17,.9)),var(--storefront-image);
  background-position:center,var(--storefront-position,center);
  background-size:cover;
}
.storefront-card.has-visual > * { position:relative; z-index:1; }
.storefront-card.has-visual .storefront-card-copy small { opacity:.82; }
.storefront-card-number {
  font:600 .68rem/1.2 var(--mono);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.storefront-card-copy { display:grid; gap:.85rem; margin-top:auto; }
.storefront-card-copy strong {
  max-width:12ch;
  font-size:clamp(2rem,4.2vw,4.8rem);
  font-weight:550;
  letter-spacing:-.075em;
  line-height:.9;
  text-wrap:balance;
}
.storefront-card:not(.storefront-card--lead) .storefront-card-copy strong { font-size:clamp(1.75rem,2.8vw,3.25rem); }
.storefront-card--wide .storefront-card-copy strong { max-width:15ch; font-size:clamp(2.4rem,4.5vw,5rem); }
.storefront-card-copy small {
  color:inherit;
  font:500 .68rem/1.45 var(--mono);
  letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.72;
}
.storefront-card-arrow {
  position:absolute;
  top:clamp(1.35rem,3vw,2.75rem);
  right:clamp(1.35rem,3vw,2.75rem);
  display:grid;
  width:2.25rem;
  aspect-ratio:1;
  place-items:center;
  border:1px solid currentColor;
  border-radius:50%;
  transition:transform 180ms ease;
}
.storefront-card:hover,.storefront-card:focus-visible { background:var(--clay); }
.storefront-card--signal:hover,.storefront-card--signal:focus-visible { color:var(--white); background:var(--ink); }
.storefront-card--dark:hover,.storefront-card--dark:focus-visible { color:var(--ink); background:var(--clay); }
.storefront-card.has-visual:hover,.storefront-card.has-visual:focus-visible {
  color:var(--white);
  background-color:var(--ink);
  background-image:linear-gradient(180deg,rgba(17,17,17,.08),rgba(17,17,17,.18) 35%,rgba(17,17,17,.82)),var(--storefront-image);
}
.storefront-card:hover .storefront-card-arrow,.storefront-card:focus-visible .storefront-card-arrow { transform:rotate(45deg); }

.section-number + .section-title { margin-top:.65rem; }
.section.dark .text-link { color:var(--white); }
.section.dark .text-link::after { background:currentColor; }

.storefront-visual-slots { display:grid; gap:.55rem; margin:1rem 0; }
.storefront-visual-slot { display:grid; grid-template-columns:42px minmax(0,1.15fr) minmax(120px,.55fr) minmax(190px,.85fr) 72px; gap:.65rem; align-items:end; padding:.75rem; border:1px solid var(--line); background:#f5f5f5; }
.storefront-visual-slot label { display:grid; gap:.35rem; color:var(--ink); font:600 .56rem/1.2 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.storefront-visual-slot select { width:100%; min-height:43px; padding:.55rem .65rem; border:1px solid var(--line); color:var(--ink); background:var(--white); font:500 .68rem/1.2 var(--sans); }
.storefront-upload-field input { width:100%; min-width:0; min-height:43px; padding:.48rem; border:1px solid var(--line); color:var(--ink); background:var(--white); font:500 .62rem/1.2 var(--sans); text-transform:none; }
.storefront-upload-field small { color:#6c625a; font:500 .5rem/1.35 var(--mono); letter-spacing:0; text-transform:none; }
.storefront-upload-preview { width:72px; aspect-ratio:1; border:1px solid var(--line); object-fit:cover; background:var(--white); }

@media (max-width:900px) {
  .storefront-heading { grid-template-columns:1fr; }
  .storefront-heading .section-description { justify-self:start; }
  .storefront-grid { grid-auto-rows:minmax(230px,auto); }
  .storefront-card--lead { min-height:461px; }
  .storefront-card--wide { grid-column:auto; min-height:0; }
}

@media (max-width:760px) {
  .mobile-nav {
    max-height:calc(100dvh - 64px);
    overflow:auto;
    padding:1.25rem 5vw 1.5rem;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 40px rgba(17,17,17,.16);
  }
  .mobile-nav-label {
    margin:0 0 .85rem;
    font:600 .64rem/1.2 var(--mono);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .mobile-nav-primary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
  .mobile-nav-primary a {
    display:grid;
    min-height:104px;
    align-content:space-between;
    padding:1rem;
    color:var(--ink);
    background:var(--white);
    border:0;
    font-size:clamp(1rem,5vw,1.35rem);
  }
  .mobile-nav-primary a span { color:var(--taupe); font:500 .6rem/1 var(--mono); letter-spacing:.08em; }
  .mobile-nav-primary a:hover,.mobile-nav-primary a:focus-visible { background:var(--clay); }
  .mobile-nav-secondary { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; padding:1rem 0; border-bottom:1px solid var(--line); }
  .mobile-nav-secondary a { padding:.35rem 0; border:0; font:600 .68rem/1.2 var(--mono); letter-spacing:.05em; text-transform:uppercase; }
  .mobile-nav-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; padding-top:1rem; }
  .mobile-nav-actions .button-outline { min-height:48px; padding:.75rem; font-size:.66rem; }
  .storefront-heading { gap:1.25rem; }
  .storefront-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(210px,auto); }
  .storefront-card,.storefront-card--lead { grid-row:auto; min-height:0; padding:1.15rem; }
  .storefront-card-copy strong,.storefront-card:not(.storefront-card--lead) .storefront-card-copy strong { font-size:clamp(1.45rem,7vw,2.2rem); }
  .storefront-card-arrow { top:1rem; right:1rem; width:1.85rem; }
  .storefront-visual-slot { grid-template-columns:34px minmax(0,1fr); }
  .storefront-visual-slot label,
  .storefront-upload-preview { grid-column:2; }
}

@media (max-width:480px) {
  .storefront-grid { grid-template-columns:1fr; grid-auto-rows:minmax(210px,auto); }
  .storefront-card--lead { min-height:300px; }
  .mobile-nav-actions { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
  .desktop-nav a::after,.storefront-card,.storefront-card-arrow { transition:none; }
}