/* home.css - OWNED BY THE HOME PAGE ONLY.
   index.html is the only page that links this file. Everything the home page
   needs that styles.css and packages.css do not already provide goes here,
   including the ported polaroid package index (Alyssa asked for design-01's
   home-page package cards, submission 80 notes). Never edit styles.css or
   packages.css from the home page; add an override here instead.

   Nothing in this file can reach another page: .hero, .scatter, .intro,
   .occasions and .addons exist only on index.html, and home.css is linked
   only from index.html. Verified with a grep across all five pages. */

/* ---------- Hero ---------- */

/* LEGIBILITY, measured not guessed. h01 is a near-white frame, so the kit's
   black wash (0.52 desktop / 0.45 mobile, styles.css) leaves the hero's small
   text under 4.5:1. Measured against the real render with the text hidden, at
   the p95 background luminance under each slot:

     alpha   desktop btn / sub      mobile btn / sub
     kit     4.06 FAIL / 4.54       3.45 FAIL / 3.54 FAIL
     0.55    4.48 FAIL / 5.02       4.81 / 5.02
     0.56    4.67 / 5.25            5.00 / 5.25      <- lowest that clears both

   0.56 is the MINIMUM that passes every hero slot at both widths, so the
   photograph stays as visible as legibility allows. Same image, same crop,
   same layer count: only the wash value moves, and it moves here rather than
   in styles.css because that file is shared and off limits. Nothing else
   sees it: `.hero` exists on no other page and home.css is linked by no
   other page. NOTE the kit's own button failed at the shipped value too. */
.hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
    url("images/scc/h01-lg.webp") center 42% / cover no-repeat #000;
}

/* The kit's hero is H1 + script + button. The sub line is added here because
   the home page has to state the offer and the service area in the first
   screen. */

@media (max-width: 800px) {
  
}

/* ---------- About collage crops ---------- */

/* The four .intro slots were cropped for a different photo set. Only the
   object-position that actually needs moving is restated: h05 is the one
   landscape-native photo in this build and the kit's 60% 60% pushed the
   left-hand guest out of the frame. */
.intro-right img:first-child { object-position: 50% 50%; }
.intro-left img:first-child { object-position: 50% 42%; }

/* ---------- Occasions ---------- */

/* The Celebrations panel is a bright still life on a near-white ground, and
   grayscale on a cream section leaves it looking like a missing image. A
   small contrast lift keeps the crop reading as a photograph without adding
   any layer the design does not have. */
.occ-grid .occ:last-child .occ-media img { filter: grayscale(1) contrast(1.12) brightness(0.97); }{
  max-width: 60ch;
  margin: 1.3rem auto 0;
  font-family: 'Raleway', var(--body);
  font-size: 0.97rem;
  line-height: 1.8;
  color: var(--pk-muted);
}

/* ---------- Featured add-ons ---------- */

/* Both cards ship without a photo (see the section comment in index.html:
   nothing in this build's licensed stock depicts an LED sign). The image
   carried `margin-top: auto`, which is what pushed the price and the button
   to the bottom of the card, so that job moves to the foot, and the fixed
   645px desktop card height gives way to the copy. */
.addons .addon-foot { margin-top: auto; }
.addons .addon-inner { min-height: 250px; }
@media (min-width: 801px) {
  .addons .addon-card { height: auto; }
  .addons .addon-inner { min-height: 310px; }
}

/* The ghost ordinal is absolutely positioned at the card's top right, and the
   kit's headings were two short words ("Premium / Backdrop"). Her add-on names
   are one long line, so the heading ran straight into the numeral. Measured at
   1440: the h3 box reached x=643 and the numeral starts at x=590. */
.addons .addon-card h3 { padding-right: 2.4em; }

/* The pinned add-ons pane sticks at top: 0, i.e. UNDERNEATH the sticky header,
   and the kit's 11svh top padding was cut for a ~97px header. This build's
   header is 166px on desktop and 143px on mobile (the logo mark is tall), so
   the "Featured Add Ons" heading sat 67px behind the nav on desktop and was
   ENTIRELY behind it on mobile. Both panes move down together: .addon-step2's
   padding-top is the same expression with the new pin offset, so card 02 still
   lands exactly level with card 01. */
@media (min-width: 801px) {
  .addons-pin { padding-top: 190px; }
  .addon-step2 { padding-top: calc(190px + 1.15 * clamp(2.8rem, 6vw, 4.4rem) + 1rem + 15px); }
}

/* ---------- Small screens ---------- */

@media (max-width: 800px) {
  .hero {
    background:
      linear-gradient(rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.56)),
      url("images/scc/h01-lg.webp") center 45% / cover no-repeat #000;
  }

  /* See the desktop note: 143px header, 56px of pin padding. Pushing the
     heading clear costs 104px, and the pane is exactly one viewport, so the
     same 104px has to come back out of the card or its price and button fall
     below the fold while the pane is pinned. Measured at 390/360/320 wide:
     the card's height is dominated by the kit's 9.375vw heading, which was cut
     for two short words ("Premium / Backdrop") and runs to three lines on
     "Custom Styling Details". Trimming the type and the paddings fits the
     whole card on the smallest phone this build targets. */
  .addons-pin { padding-top: 160px; padding-bottom: 0.75rem; }
  .addons h2 { margin-bottom: 1.25rem; }
  .addons .addon-card h3 { font-size: 7.4vw; }
  .addons .addon-desc { font-size: 4.5vw; }
  .addons .addon-inner { min-height: 0; }
  /* The kit's price slot held "$150"; every add-on here is unpriced, so it
     holds "Inquire for pricing" and the foot row measured 293px inside a
     294px card. Loosening the tracking, not the type size, buys the slack. */
  .addons .addon-price { letter-spacing: 0.08em; }

}

/* 320x568 is the only viewport where the pinned add-on card still ran 8px past
   the fold (the header alone is 143px there, a quarter of the screen).
   Measured before/after: card bottom 576 -> 543 against a 568 viewport. */
@media (max-width: 340px) {
  .addons-pin { padding-top: 152px; }
  .addons .addon-card { padding: 0.9rem; }
  .addons .addon-inner { padding: 1.1rem 1.2rem 1.25rem; }
}

/* ============ COLLECTIONS INDEX (ported from design-01 .ei-services) ============
   Owner request on submission 80: "the Polaroid package choices from 01 home
   PAGE". Carried over as design-01 RENDERS it, not as a reinterpretation:
   oversized ruled rows that invert on hover, a short right-hand line, and ONE
   framed photo trailing the cursor. An earlier pass gave every row its own
   inline polaroid and its full stored description, which read as a jumbled,
   much taller version of the same idea (owner, 2026-08-04).
   Only the palette and type are hers; geometry is design-01's. */
.ei-services { background: var(--cream); padding-top: 68px; }
.ei-head { text-align: center; padding-bottom: 44px; }
.ei-eyebrow { font-family: var(--label); font-size: 14px; letter-spacing: .18em;
              text-transform: uppercase; color: var(--pk-muted); }
.ei-note { font-family: var(--serif); font-weight: 200; font-style: italic;
           font-size: 24px; margin-top: 12px; color: var(--ink); }
.ei-row { display: flex; align-items: center; gap: 44px;
          padding: 44px clamp(40px, 6.7vw, 96px);
          border-top: 1px solid var(--pk-hairline);
          text-decoration: none; color: var(--ink);
          transition: background .35s ease, color .35s ease; }
.ei-row:hover { background: var(--brown); color: var(--cream); }
.ei-no { font-family: var(--label); font-size: 12px; letter-spacing: .18em;
         text-transform: uppercase; width: 72px; flex: none; }
.ei-h { font-family: var(--serif); font-weight: 200;
        font-size: clamp(30px, 3.1vw, 46px); line-height: 1; letter-spacing: .01em;
        flex: 1; white-space: nowrap; }
.ei-p { font-family: var(--body); font-size: 14px; line-height: 1.8; width: 300px;
        flex: none; opacity: .75; }
.ei-arrow { flex: none; width: 47px; height: 16px; stroke: currentColor; fill: none;
            stroke-width: 1.2; transform: translateX(-12px); opacity: 0;
            transition: transform .35s ease, opacity .35s ease; }
.ei-row:hover .ei-arrow { transform: translateX(0); opacity: 1; }
.ei-tail { display: flex; justify-content: center; padding: 40px 0 72px;
           border-top: 1px solid var(--pk-hairline); }
.ei-btn { display: inline-flex; align-items: center; justify-content: center;
          min-width: 195px; height: 50px; padding: 0 26px; background: var(--brown);
          text-decoration: none; font-family: var(--label); font-size: 12px;
          letter-spacing: .18em; text-transform: uppercase; color: var(--cream);
          transition: background .5s, color .5s; }
.ei-btn:hover { background: var(--gold); color: var(--ink); }
/* the framed photo that trails the cursor; z-index stays under the sticky header */
.ei-chaser { position: fixed; left: 0; top: 0; width: 264px; height: 352px;
             pointer-events: none; z-index: 5; opacity: 0;
             transition: opacity .3s ease; will-change: transform; }
.ei-chaser.is-on { opacity: 1; }
.ei-chaser .ei-frame { position: absolute; inset: 0; background: var(--cream);
                       box-shadow: 0 18px 44px rgba(44,38,34,.35); }
.ei-chaser img { position: absolute; inset: 10px 10px 34px; width: calc(100% - 20px);
                 height: calc(100% - 44px); object-fit: cover; opacity: 0;
                 transition: opacity .35s ease; }
.ei-chaser img.is-active { opacity: 1; }
.ei-caption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center;
              font-family: var(--label); font-size: 10px; letter-spacing: .18em;
              text-transform: uppercase; color: var(--pk-muted); margin: 0;
              /* one line, inside the frame: padding keeps it off the edges and
                 the clip stops any future long package name spilling over the
                 photo the way "Collection III: The Sham-pagne Social" did. */
              padding: 0 12px; white-space: nowrap; overflow: hidden;
              text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) { .ei-chaser { display: none; } }
/* design-01's own stacked treatment below 900px: rows stack, arrow and the
   cursor photo (which has no cursor to follow on touch) both drop out */
@media (max-width: 900px) {
  .ei-services { padding-top: 56px; }
  .ei-head { padding: 0 22px 34px; }
  .ei-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px 22px; }
  .ei-no { width: auto; }
  .ei-h { white-space: normal; font-size: clamp(26px, 6.4vw, 38px); }
  .ei-p { width: auto; }
  .ei-arrow { display: none; }
  .ei-tail { padding: 34px 22px 60px; }
  .ei-btn { width: 100%; max-width: 340px; }
  .ei-chaser { display: none; }
}