/* homepage-step-panels.css
   One simple embossed "shell" per homepage narrative step (Step 1: the
   archive, Step 2: the programs, Step 3: staying current) — a single
   raised box in the site's own page color, told apart from the page only
   by the sitewide soft-shadow "raise" effect (the same var(--raise) used
   on cards elsewhere on the site). No ridge, no nested inner panel, no
   color change — just one box, one shadow, per step.
   Loaded after homepage-layout-revision.css, so it overrides the older
   flat band/border treatment that section previously used. */

.step-shell{
  position:relative;
  width:min(1340px,calc(100% - 100px));
  margin:52px auto;
  padding:40px 40px 44px;
  border-radius:20px;
  background:#f0eee8;
  box-shadow:var(--raise);
}

/* The ridge/inner-panel wrapper divs stay in the markup (added in the
   prior pass) but are flattened to invisible pass-throughs — the single
   .step-shell box above is the only thing that draws a shadow now. */
.step-shell-ridge{display:none}
.step-shell-body{margin:0;padding:0;background:none;box-shadow:none;border-radius:0}

/* Steps 1 & 3 wrap existing hub-width sections; the shell now owns the
   width, so the inner section just fills it. */
.step-shell-body>.featured-conversation,
.step-shell-body>.collection-section{
  width:100%;
  margin:0;
  padding:0;
}

/* Step 2 keeps its own tag (the shell IS the <section>); its inner
   .hub-width just needs to fill the shell instead of re-applying the
   sitewide hub-width formula inside an already-narrower parent. */
.project-section.step-shell{
  border-block:0;
  background:#f0eee8;
  padding:40px 40px 44px;
}
.project-section.step-shell>.step-shell-body>.hub-width{
  width:100%;
  margin-inline:0;
}

/* The "Step 1/2/3" pill sits at the top of the box. */
.step-shell .step-eyebrow{margin-bottom:16px}

/* Let every step headline choose its own line breaks instead of leaving an
   orphaned word or a lopsided last line. */
.step-shell h2{text-wrap:balance}

/* Step 1's monitor graphic: a single static image (it already has real
   transparency) instead of the old two-image crossfade. */
.feature-photo-solo{
  position:relative;
  width:100%;
  height:350px;
  overflow:hidden;
  background:#f0eee8;
  border-radius:20px;
}
.feature-photo-computer{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px 26px;
  box-sizing:border-box;
}

@media(max-width:850px){
  .step-shell{width:calc(100% - 60px);border-radius:20px;margin:38px auto;padding:30px 28px 34px}
  .project-section.step-shell{padding:30px 28px 34px}
  .feature-photo-solo{height:260px}
}

@media(max-width:600px){
  .step-shell{width:calc(100% - 40px);border-radius:20px;margin:28px auto;padding:24px 20px 28px}
  .project-section.step-shell{padding:24px 20px 28px}
  .feature-photo-solo{height:220px}
}

@media(prefers-contrast:more){
  .step-shell{box-shadow:0 0 0 1px #b7ae99}
}