/* ReadyHarbor - product-pick rows + life-event tiles (Marlow, 2026-07-31).
   ADDITIVE ONLY. rh.css is untouched; this loads after it. Removing this file and
   the 20 new pages restores the site exactly as it was on 2026-07-24.

   Uses only the tokens rh.css already defines (--accent, --line, --paper-2,
   --ink, --dim, --r-m, --ff-m ...) so it follows the blue/warm palette switcher. */

/* ------------------------------------------------------ single-column body */
/* rh.css sets .sgrid to `1fr 310px` for a sidebar that no page ever shipped, so
   every live situation page renders its content in the left 2/3 with a dead
   310px gutter on the right. Rather than edit rh.css (which would restyle the 13
   pages live right now, mid-flight), the new pages opt in to a solo column.
   ⚑ The same one-line change should be made site-wide so nothing diverges -
   flagged to RJ, not done unilaterally. */
.sgrid--solo{
  grid-template-columns:minmax(0,1fr);
  max-width:900px;
  margin-inline:auto;
}

/* ---------------------------------------------------------- product picks */
.picks{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:16px;
}
.pick{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:12px 12px 13px;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  background:var(--paper-2);
  text-decoration:none;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pick:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--sh-1);
}
/* Amazon product shots are cut out on white. A white plate keeps every row
   visually identical whatever the product is - RJ's standing uniform-render rule. */
.pick__shot{
  display:block;
  background:#fff;
  border-radius:var(--r-s);
  overflow:hidden;
  aspect-ratio:1/1;
}
.pick__shot img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  mix-blend-mode:multiply;   /* drops the white box into the plate, no hard edge */
}
.pick__name{
  font-size:.8rem;
  line-height:1.35;
  color:var(--ink);
  font-weight:500;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pick__go{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--ff-m);
  font-size:.56rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.picks__all{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:11px;
  font-family:var(--ff-m);
  font-size:.58rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
}
.picks__all:hover{ color:var(--accent-deep); }
.picks--empty{ display:block; }

/* ⚑ LINK-LEVEL AFFILIATE DISCLOSURE - compliance, not decoration.
   Amazon's Operating Agreement sec.5 requires the disclosure be "clear and
   prominent," and Amazon's own guidance expects it at LINK level as well as
   site-wide ("(paid link)", "#ad"). Footer-only is expressly a MATERIAL BREACH.
   So every outbound Amazon link on the page carries its own marker. Do not
   delete this to tidy the design. */
.pick__ad{
  display:block; margin-top:3px; font-style:normal;
  font-family:var(--ff-m); font-size:.5rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}
.picks__all .pick__ad{ display:inline; margin:0 0 0 8px; }
.calm__ad{ color:var(--ink); }

/* ------------------------------------------------- typographic hero (held) */
/* Ships while the imagery direction is with the Creative Director. It is a
   deliberate hold: no generic stock, nothing fabricated, and swapping a real
   image back in is one rebuild. */
.shero--type{ position:relative; overflow:hidden; }
.shero--type .shero__type{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 140% at 12% 0%, var(--accent-wash) 0%, transparent 58%),
    radial-gradient(90% 120% at 100% 100%, var(--paper-3) 0%, transparent 60%),
    linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
}
.shero--type .shero__in{ position:relative; z-index:1; }
.shero--type h1{ color:var(--ink); }
.shero--type .shero__say{ color:var(--ink-2); }
.shero--type .crumb a,.shero--type .eyebrow{ color:var(--accent-deep); }

/* ==========================================================================
   "OTHER MOMENTS" BAND (.mband) - Creative Director spec, 2026-07-31.

   Verbatim from cd-lifestyle-band-2026-07-31/rh-band.css, with one addition:
   the .mtile--held state (bottom of this block), because the photographs are
   staged behind RJ's Phase-0 approval and this build must not ship a stock
   photo he has already called generic.

   The CD's spec says to DELETE .more__h/.more__grid/.more__card from rh.css and
   paste this in their place. NOT DONE, deliberately: those classes are still in
   use by the 13 pages live right now, which still carry the old stock photos.
   Removing them would restyle live pages mid-flight. This file is additive and
   loads after rh.css, so the 20 new pages get the new band and nothing live
   changes. Migrating the old 13 happens when their generated heroes land.

   UNIFORMITY LIVES IN THE GRID. SOFTNESS LIVES IN THE EDGE.
   ========================================================================== */
.mband{
  --mband-bg: var(--paper);
  padding: clamp(46px, 6vw, 84px) 0 clamp(28px, 3.6vw, 48px);
}
.mband__head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin:0 0 clamp(20px, 2.6vw, 32px);
}
.mband__head h2{
  font-size:clamp(1.5rem, 2.8vw, 2.1rem); line-height:1.08;
  margin:.24em 0 0; max-width:18ch;
}
.mband__head .side{ margin:0; font-size:.92rem; color:var(--dim); max-width:32ch; }

/* the table - 4 across. Row gap larger than column gap on purpose: the bottom
   of each tile carries the label and the dissolve, so it needs vertical air. */
.mband__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  column-gap:clamp(8px, 1.2vw, 16px);
  row-gap:clamp(26px, 3.2vw, 42px);
}

.mtile{
  position:relative; display:block; min-width:0;
  padding-bottom:clamp(12px, 1.4vw, 18px);
}
/* .mtile__shot carries the SIDE feather; .mtile__img the TOP+BOTTOM feather.
   Two single-layer masks, not one composited - works without mask-composite. */
.mtile__shot{
  position:relative; display:block; width:100%; aspect-ratio:4/3;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.mtile__img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(1.08) saturate(1.03);
  transition:transform .5s cubic-bezier(.2,.7,.3,1), filter .3s ease;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 74%, rgba(0,0,0,.82) 86%, rgba(0,0,0,.36) 95%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 74%, rgba(0,0,0,.82) 86%, rgba(0,0,0,.36) 95%, transparent 100%);
}
/* the quiet zone - page colour coming UP through the bottom of the picture.
   Not a dark scrim: the tile gets lighter toward the type, never heavier. */
.mtile__shot::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
              transparent 62%,
              color-mix(in srgb, var(--mband-bg) 46%, transparent) 80%,
              color-mix(in srgb, var(--mband-bg) 88%, transparent) 93%,
              var(--mband-bg) 100%);
}
.mtile__label{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:0 clamp(6px, 1vw, 12px);
}
.mtile__label b{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--ff-b); font-size:clamp(.86rem, 1.05vw, .96rem);
  font-weight:600; line-height:1.28; letter-spacing:-.005em;
  color:var(--ink); text-wrap:balance;
}
.mtile__label i{
  display:block; margin-top:6px; font-style:normal;
  font-family:var(--ff-m); font-size:.56rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  transition:color .2s ease;
}
/* No lift, no shadow, no border on hover - all three put a hard edge back
   on a photograph. The picture itself answers instead. */
.mtile:hover .mtile__img,
.mtile:focus-visible .mtile__img{
  transform:scale(1.035); filter:brightness(1.12) saturate(1.07);
}
.mtile:hover .mtile__label i,
.mtile:focus-visible .mtile__label i{ color:var(--accent-deep); }
.mtile:hover .mtile__label b{ color:var(--accent-deep); }
.mtile:focus-visible{ outline:3px solid var(--accent); outline-offset:6px; border-radius:6px; }

.mband__all{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:clamp(20px, 2.4vw, 30px);
  font-family:var(--ff-m); font-size:.62rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep);
  border-bottom:1px solid transparent; padding-bottom:3px;
  text-decoration:none;
}
.mband__all:hover{ border-bottom-color:var(--accent-deep); }

/* ---- HELD IMAGE STATE (Marlow addition, not the CD's) --------------------
   Same grid, same 4:3 crop, same side mask, same label position. Only the
   photograph is absent. When Phase 0 is approved, .mtile--held is dropped and
   an <img class="mtile__img"> goes in - no other markup or CSS changes. */
.mtile__plate{
  display:block; width:100%; height:100%;
  background:
    radial-gradient(88% 120% at 26% 8%, var(--accent-wash) 0%, transparent 64%),
    linear-gradient(152deg, var(--paper-3) 0%, var(--paper-2) 62%, var(--paper-3) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 74%, rgba(0,0,0,.82) 86%, rgba(0,0,0,.36) 95%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 5%, #000 74%, rgba(0,0,0,.82) 86%, rgba(0,0,0,.36) 95%, transparent 100%);
  transition:filter .3s ease;
}
.mtile--held:hover .mtile__plate{ filter:brightness(1.04); }

/* ------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .mband__grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:760px){
  .mband__grid{ grid-template-columns:repeat(2, 1fr); column-gap:12px; row-gap:20px; }
  .mband__head h2{ max-width:none; }
}
@media (max-width:700px){
  .picks{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:430px){
  .picks{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .pick{ padding:9px 9px 11px; }
  .pick__name{ font-size:.74rem; -webkit-line-clamp:3; }
}
@media (max-width:420px){
  .mtile__label b{ font-size:.8rem; }
  .mtile__label i{ font-size:.52rem; }
}
@media (prefers-reduced-motion: reduce){
  .mtile__img{ transition:none; }
  .mtile:hover .mtile__img{ transform:none; }
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .mtile__shot::after{
    background:linear-gradient(180deg, transparent 62%, rgba(242,245,247,.46) 80%, rgba(242,245,247,.88) 93%, #F2F5F7 100%);
  }
}