/* ============================================================
   home.css — MetMary index
   Product-page structure: quiet ground, large renders, short
   claims. Palette from the wordmark; ground matched to the
   renders so they sit on the page rather than in boxes.
   ============================================================ */

.mm{
  --paper:#E2E1E0;
  --paper-2:#EDECEB;
  --ink:#0A1730;
  --ink-2:#3D4B60;
  --ink-3:#6B7788;
  --teal:#006B73;
  --teal-lit:#00A3AD;
  --line:rgba(10,23,48,.14);
  --line-2:rgba(10,23,48,.28);
  --font:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --data:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --display:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --accent:var(--teal);

  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.mm *,.mm *::before,.mm *::after{ box-sizing:border-box }
.mm img{ display:block; max-width:100%; height:auto }
.mm :focus-visible{ outline:2px solid var(--teal); outline-offset:4px; border-radius:4px }

.hold{ width:100%; max-width:88rem; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,4rem) }

/* ---------------- nav ---------------- */
.top{
  position:fixed; inset:0 0 auto; z-index:40;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background-color .3s ease;
}
.top.is-stuck{ border-bottom-color:var(--line); background:rgba(226,225,224,.92); backdrop-filter:saturate(160%) blur(14px) }
.top__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding-block:.85rem }
.top__id img{ height:clamp(22px,2.2vw,28px); width:auto }
.top__nav{ display:flex; align-items:center; gap:clamp(.9rem,2vw,2rem) }
.top__nav a{
  font-size:.875rem; font-weight:500; letter-spacing:-.01em;
  color:var(--ink-2); text-decoration:none;
  transition:color .18s ease;
}
.top__nav a:hover{ color:var(--ink) }
.top__nav a.is-on{ color:var(--ink) }

/* ---------------- intro ---------------- */
.intro{
  position:relative;
  height:100svh;
  padding:0;
  max-width:none;
  margin:0;
}
.intro__art{ position:absolute; inset:0 }
.intro__art picture{ display:block; width:100%; height:100% }
.intro__art img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 42%;
}

.intro__say{
  text-align:center;
  padding-block:clamp(1rem,2vw,1.75rem) 0;
}
.intro__say h1{
  margin:0;
  font-size:clamp(1.9rem,5vw,4rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:1.02;
}
.intro__say p{
  margin:.9rem auto 0;
  max-width:34rem;
  font-size:clamp(.95rem,1.3vw,1.125rem);
  color:var(--ink-2);
}
.cue{
  position:absolute; left:0; right:0; bottom:clamp(1.25rem,3vw,2.25rem);
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
.cue i{ display:block; width:1px; height:1.75rem; background:var(--line-2); animation:drop 2.4s ease-in-out infinite }
@keyframes drop{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }

/* ---------------- section furniture ---------------- */
.sec{ padding-block:clamp(3.5rem,8vw,8rem) }
.sec__lead{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-bottom:clamp(1.5rem,3vw,2.5rem);
  border-bottom:1px solid var(--line);
}
.sec__lead h2{
  margin:0; font-size:clamp(1.5rem,2.6vw,2.25rem);
  font-weight:600; letter-spacing:-.035em;
}
.tag{
  font-size:.75rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}

/* ---------------- tool blocks ---------------- */
.tools{ list-style:none; margin:0; padding:0 }
.tool{ border-bottom:1px solid var(--line) }
.tool__link{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:center;
  gap:clamp(1.5rem,4vw,4.5rem);
  padding-block:clamp(2.5rem,5vw,5rem);
  text-decoration:none; color:inherit;
}
.tool:nth-child(even) .tool__art{ order:-1 }
.tool__say{ display:flex; flex-direction:column; align-items:flex-start }
.engraving{ width:100%; aspect-ratio:1/.78; color:var(--ink) }
.engraving svg{ width:100%; height:100%; display:block }
.tool__art{ position:relative }
.tool__art img{ width:100%; transition:transform .6s cubic-bezier(.2,.7,.3,1) }
.tool__link:hover .tool__art img{ transform:scale(1.028) }

.tool__no{
  display:block;
  font-size:.75rem; font-weight:600; letter-spacing:.14em;
  color:var(--teal); margin-bottom:1rem;
  font-variant-numeric:tabular-nums;
}
.tool__name{
  margin:0;
  font-size:clamp(2rem,4.6vw,3.75rem);
  font-weight:600; letter-spacing:-.045em; line-height:1.02;
}
.tool__cat{
  display:block; margin-top:1.1rem;
  font-size:.875rem; color:var(--ink-2);
}
.go{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:clamp(1.5rem,3vw,2.25rem);
  padding:.8rem 1.4rem;
  border-radius:100px;
  background:var(--ink); color:var(--paper-2);
  font-size:.875rem; font-weight:500;
  transition:background-color .22s ease,gap .22s ease;
}
.tool__link:hover .go{ background:var(--teal); gap:.9rem }
.go svg{ flex:0 0 auto }



/* ---------------- foot ---------------- */
.foot{ border-top:1px solid var(--line) }
.foot__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  padding-block:clamp(1.75rem,3vw,2.5rem) clamp(2.5rem,4vw,3.5rem);
  font-size:.8125rem; color:var(--ink-3);
}
.foot__mark{ display:flex; align-items:center; gap:.6rem }
.foot__mark img{ width:22px; height:22px }

/* ---------------- responsive ---------------- */
@media (max-width:60rem){
  .tool__link{ grid-template-columns:minmax(0,1fr); gap:1.75rem }
  .tool:nth-child(even) .tool__art{ order:0 }
  .tool__art{ order:-1 }
  .intro{ min-height:auto; padding-top:6rem; padding-bottom:1rem }
  .intro__art img{ width:100% }
}
@media (max-width:34rem){
  .top__nav{ gap:.9rem }
  .top__nav a{ font-size:.8125rem }
  .go{ width:100%; justify-content:center }
}
@media (prefers-reduced-motion:reduce){
  .mm *{ animation:none!important; transition:none!important }
}

.sr{
  position:absolute!important; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* ------------------------------------------------------------
   Anchor navigation — clear the fixed header, and ease the jump
   unless the reader has asked for less motion
   ------------------------------------------------------------ */
#intro,#tools{ scroll-margin-top:5.5rem }
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth }
}

/* ------------------------------------------------------------
   Privacy page
   ------------------------------------------------------------ */
.legal{ max-width:44rem; padding-top:8rem; padding-bottom:clamp(3rem,6vw,6rem) }
.legal h1{ margin:0; font-size:clamp(2rem,4.4vw,3.25rem); font-weight:600; letter-spacing:-.04em }
.legal__date{ margin:.6rem 0 0; font-size:.875rem; color:var(--ink-3) }
.legal h2{
  margin:clamp(2rem,4vw,3rem) 0 .6rem;
  font-size:1.0625rem; font-weight:600; letter-spacing:-.01em;
}
.legal p{ margin:0 0 .9rem; color:var(--ink-2); font-size:1rem; line-height:1.6 }
.legal a{ color:var(--teal) }
.legal__fill{
  display:inline-block; padding:.2rem .6rem;
  border:1px dashed var(--line-2); border-radius:6px;
  color:var(--ink-3); font-size:.9375rem;
}
.foot__in a{ color:var(--ink-3); text-decoration:none }
.foot__in a:hover{ color:var(--ink) }