/* ==========================================================================
   Miolu homepage.

   TYPOGRAPHY — taken verbatim from the approved Welcome implementation:
     family   Assistant (--ff-sans), inherited, never overridden
     weight   400 everywhere. The approved comment is explicit — "presence
              comes from size and ink, never from bold … never weight or a
              serif". No serif anywhere on this page, and exactly one
              sanctioned 600: .nots__key, the emphasised relief line.
     body     clamp(18px,2.6vw,24px) / line-height 1.86 / --ink-700
     lead     one step up in size, one step darker in ink (--ink-900) — that
              is the entire heading/body relationship
   Every size below is derived from that scale.

   RHYTHM — one continuous story. Sections keep distinct shapes but sit close
   enough that no gap reads as a page break.
   ========================================================================== */

/* base.css styles h1-h4 as serif/600. The homepage uses ONE family at ONE
   weight, so that is overridden here for every heading on the page at once —
   no future heading can reintroduce a serif or a bold. */
.home h1,.home h2,.home h3,.home h4,
.home p,.home li,.home span{
  font-family:var(--ff-sans);
  font-weight:400;
}

body.home{
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(201,135,146,.06), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(138,106,69,.05), transparent 55%),
    var(--cream-100);
  background-attachment:fixed;
}

/* ==========================================================================
   1. FEATURE GRAPHIC + WELCOME NOTE
   ========================================================================== */
.hero{
  padding-inline:clamp(14px,3.5vw,44px);
  padding-block:clamp(18px,3.2vw,52px) 0;
}
.hero__frame{position:relative;max-width:1320px;margin-inline:auto}
.hero__img{
  display:block;width:100%;height:auto;
  border-radius:clamp(14px,2vw,26px);
  box-shadow:
    0 2px 6px rgba(56,50,44,.05),
    0 18px 50px rgba(56,50,44,.09),
    0 48px 120px rgba(56,50,44,.06);
}

/* ---- the note: warm paper, gently tucked rather than floated ---- */
.note{
  /* soft sticky-note yellow, kept well inside Miolu's muted range */
  background:#fdf6e4;
  border:1px solid rgba(176,146,76,.22);
  border-radius:14px;
  padding:clamp(18px,2.4vw,24px) clamp(18px,2.4vw,26px);
  box-shadow:
    0 1px 2px rgba(120,96,44,.06),
    0 10px 26px rgba(120,96,44,.12);
}
.note p{
  font-size:clamp(15px,1.75vw,16.5px);
  line-height:1.8;
  color:var(--ink-700);
  text-wrap:pretty;
}
.note p + p{margin-top:clamp(9px,1.2vw,12px)}
.note__lead{
  font-size:clamp(17px,2.05vw,20px) !important;
  line-height:1.5 !important;
  color:var(--ink-900) !important;
}
.note__close{color:var(--ink-900) !important}

/* Stacked: NOT an overlay. The image comes first, then a separate compact
   card directly beneath it, aligned to the image's own width. Tighter type
   and padding than the desktop note so it reads as a short summary block. */
/* the approved breaks are the DEFAULT; the phone query below turns them off.
   Declared first on purpose: same specificity, so source order decides. */
.nb{display:inline}

@media (max-width:899px){
  .note{
    position:relative;
    margin:clamp(10px,2.6vw,16px) 0 0;
    border-radius:12px;
    padding:clamp(12px,3vw,15px) clamp(13px,3.4vw,17px);
    /* phone only: the card reads as a centred summary block under the artwork */
    text-align:center;
  }
  /* sized so each middle sentence lands on ONE line at 390px: the longer of
     the two measures 326px against 330px of content box at the old 14px, so
     it needed a little air, not a lot. */
  .note p{font-size:clamp(13px,3.4vw,14.5px);line-height:1.55}
  .note p + p{margin-top:clamp(5px,1.4vw,7px)}
  .note__lead{
    font-size:clamp(15px,3.8vw,16.5px) !important;
    line-height:1.4 !important;
  }
  /* the two middle sentences flow as sentences here, not as poetic breaks */
  .nb{display:none}
}

/* wide: the artwork's upper-right is empty wall — clear of the woman, the
   logotype and the saved-card cluster */
@media (min-width:900px){
  .note{
    position:absolute;
    top:clamp(18px,3.4%,34px);
    inset-inline-start:clamp(16px,2.6%,34px);
    /* wide enough that the intentional line breaks are the only breaks:
       the longest segment measures ~266px */
    width:clamp(312px,25vw,352px);
    /* Clockwise, and stronger than before. A true half-in / half-out overlap
       was measured and rejected: at 1440px only 60px sits outside the hero
       frame and a 340px note would need 170px, so it would overflow at every
       desktop width below ~1500px. */
    transform:rotate(1.8deg);
  }
}

/* ==========================================================================
   THE STORY
   ========================================================================== */
.lower{padding-inline:var(--gutter)}
.lower__inner{max-width:var(--wrap);margin-inline:auto}
.band{background:var(--cream-200)}

/* ---------------------------------------------------------------- recognition */
/* bottom padding sets the gap under "ועוד רבים...", matched to the gap above
   it and to the gap below the supporting line */
.recog{padding-block:clamp(30px,4.6vw,56px) clamp(7px,0.9vw,13px)}
.recog h2{
  text-align:center;
  font-size:clamp(20px,2.85vw,27px);
  line-height:1.6;font-weight:400;
  color:var(--ink-900);
  max-width:38ch;margin-inline:auto;
}

/* the examples — little pieces of life, each in its own soft wash */
.tags{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(7px,1vw,9px);
  margin-top:clamp(18px,2.5vw,25px);
  /* widened for the two long pills: they set their own width at the approved
     type size instead of every pill shrinking to accommodate them */
  max-width:880px;margin-inline:auto;
}
.tags li{
  padding:9px 17px;
  border-radius:var(--r-pill);
  font-size:clamp(15.5px,1.9vw,17px);
  line-height:1.55;
  color:var(--ink-700);
  background:var(--tag-bg);
  border:1px solid var(--tag-bd);
}
.tags li:nth-child(1){--tag-bg:#f9eeee;--tag-bd:#f0dcdc} /* blush          */
.tags li:nth-child(2){--tag-bg:#eef1e9;--tag-bd:#dce3d4} /* sage           */
.tags li:nth-child(3){--tag-bg:#f8f1e2;--tag-bd:#ecdfc8} /* cream-gold     */
.tags li:nth-child(4){--tag-bg:#f2eef4;--tag-bd:#e4dcec} /* dusty lavender */
.tags li:nth-child(5){--tag-bg:#fbeee4;--tag-bd:#f2ddcb} /* pale peach     */
.tags li:nth-child(6){--tag-bg:#edf1f2;--tag-bd:#dbe2e4} /* soft blue-grey */
.tags li:nth-child(7){--tag-bg:#f6efe8;--tag-bd:#e9dccd} /* warm sand      */
.tags li:nth-child(8){--tag-bg:#eff2ee;--tag-bd:#dee4dc} /* pale eucalyptus*/
.tags li:nth-child(9){--tag-bg:#f7eef1;--tag-bd:#ecdce2} /* dusty rose     */

/* the cloud trails off — a size/ink step above the supporting line below it,
   never a weight step: the whole page is Assistant 400. */
.more{
  text-align:center;
  margin-top:clamp(12px,1.6vw,18px);
  font-size:clamp(17.5px,2.25vw,20px);
  line-height:1.6;
  color:var(--ink-900);
}

/* ---------------------------------------------------------------- scatter */
/* pills -> scatter -> pivot must read as one connected thought, with the
   two gaps matched. All of gap 2 is carried by .oneplace's top padding. */
.scatter{padding-block:0}
.scatter p{
  text-align:center;
  font-size:clamp(16px,2vw,18px);
  line-height:1.86;color:var(--ink-600);
  max-width:44ch;margin-inline:auto;
  text-wrap:pretty;
}

/* ---------------------------------------------------------------- the pivot */
.oneplace{
  padding-block:clamp(8.6px,1vw,14.5px) clamp(14px,2vw,22px);
  text-align:center;
}
/* The pivot answers the two recognition statements at the top of the page, so
   it carries their prominence: the type below is .recog h2's, value for value.
   Any change to one must be made to the other. */
.oneplace h2{
  font-size:clamp(20px,2.85vw,27px);
  line-height:1.6;font-weight:400;
  color:var(--ink-900);
  max-width:545px;margin-inline:auto;
  text-wrap:balance;
}

/* ---------------------------------------------------------------- how it works */
.how{
  border-block:1px solid var(--line-soft);
  padding-block:clamp(30px,4.6vw,54px);
}
.steps3{
  display:grid;gap:clamp(22px,3vw,26px);
  grid-template-columns:1fr;
  max-width:36ch;margin-inline:auto;
}
.steps3 li{position:relative;text-align:center}
.steps3__word{
  display:block;
  font-size:clamp(18px,2.3vw,21px);
  font-weight:400;color:var(--gold-500);
}
.steps3 p{
  margin-top:7px;
  font-size:clamp(15px,1.85vw,17px);
  line-height:1.8;color:var(--ink-600);
  /* wide enough that the intentional <br> is the only break in all three */
  max-width:33ch;margin-inline:auto;
  text-wrap:pretty;
}
/* chevron between steps — points down while stacked */
.steps3 li + li::before{
  content:"";position:absolute;
  top:calc(-1 * clamp(15px,2.2vw,17px));inset-inline-start:50%;
  width:7px;height:7px;
  border-top:1.5px solid var(--gold-300);
  border-left:1.5px solid var(--gold-300);
  transform:translateX(50%) rotate(225deg);
}
@media (min-width:720px){
  .steps3{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,42px);max-width:940px}
  /* …and along the reading direction once side by side */
  .steps3 li + li::before{
    top:12px;inset-inline-start:auto;
    inset-inline-end:calc(-1 * clamp(15px,1.8vw,23px));
    transform:rotate(-45deg);
  }
}

/* --------------------------------------------------------------- screenshots */
/* Real 1080x1920 captures, uncropped and unframed. Intrinsic width/height are
   on the <img>, so the portrait ratio is the browser's, not a CSS guess.

   The per-image cap — not the column count — is what protects legibility:
     phone   one column, up to 340px   (the four screens stay readable)
     >=760px two columns, up to 380px  (2x2, the approved fallback)
   760px is where two columns first reach ~331px, i.e. the point past which the
   grid costs a screenshot nothing and saves half the scroll — a 768px tablet
   lands here. Four across was measured at every desktop width and rejected: it
   lands at ~290-300px, where the Hebrew item text in 02-children and
   03-search falls under 10px. */
.shots{padding-block:clamp(30px,4.6vw,54px)}
.shots__grid{
  display:grid;
  grid-template-columns:minmax(0,340px);
  justify-content:center;
  gap:clamp(20px,3vw,30px);
  margin-inline:auto;
}
.shots__grid img{
  width:100%;height:auto;
  border-radius:clamp(12px,1.4vw,18px);
  /* the page's own paper shadow, one step lighter than the hero's — edge
     definition against the cream, not a device frame */
  box-shadow:
    0 1px 3px rgba(56,50,44,.05),
    0 10px 30px rgba(56,50,44,.08);
}
@media (min-width:760px){
  .shots__grid{
    grid-template-columns:repeat(2,minmax(0,380px));
    gap:clamp(22px,2.6vw,32px);
  }
}

/* ---------------------------------------------------------------- relief */
.relief{padding-block:clamp(10px,1.4vw,16px) clamp(28px,4.4vw,52px)}
/* The heading that used to open this block is gone. The three lines sit under
   the pivot sentence in identical type — one size step and one ink step up from
   page body, no weight step and no serif — and the list is the section's first
   child, so its old top margin went with the heading. */
.nots{
  /* px, not ch: the longest line measured 464px at the previous 18px desktop
     size, so the cap moves with the type (464 x 20.5/18) and each of the three
     still holds one line. The rules stay one uniform width so they align. */
  max-width:545px;margin:0 auto;
  /* the whole block is centred, not a centred heading over start-aligned rows */
  text-align:center;
}
.nots li{
  padding-block:clamp(13px,1.9vw,17px);
  border-top:1px solid var(--line-soft);
  font-size:clamp(17.5px,2.25vw,20.5px);
  line-height:1.75;color:var(--ink-900);
  text-wrap:pretty;
}
.nots li:last-child{border-bottom:1px solid var(--line-soft)}
/* The one emphasised line. Assistant 600 is the site's own second weight — the
   same face base.css already self-hosts and uses in the header, buttons and
   footer — so this is a step within the existing language, not a new one. Size,
   ink and measure are untouched: no colour, no scale change, nothing loud. */
/* selector scoped through .nots li on purpose: the page-wide `.home li`
   400 rule above outranks a bare class, so this has to outrank that. */
.nots li.nots__key{font-weight:600}

.relief__isnt{
  max-width:50ch;margin:clamp(16px,2.2vw,22px) auto 0;
  text-align:center;
  font-size:clamp(15px,1.85vw,16.5px);
  line-height:1.85;color:var(--ink-400);
  text-wrap:pretty;
}

/* ---------------------------------------------------------------- closing */
.closing{
  border-top:1px solid var(--line-soft);
  padding-block:clamp(30px,4.6vw,54px) clamp(22px,3.2vw,40px);
  text-align:center;
}
.closing h2{
  font-size:clamp(21px,3vw,30px);
  line-height:1.5;font-weight:400;
  color:var(--ink-900);
  text-wrap:balance;
}
.closing__note{
  max-width:56ch;
  margin:clamp(20px,2.8vw,30px) auto 0;
  font-size:clamp(13.5px,1.6vw,14.5px);
  line-height:1.85;
  color:var(--ink-400);
  text-wrap:pretty;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.home .site-footer{
  background:transparent;
  border-top:1px solid var(--line-soft);
  padding-block:clamp(22px,3.4vw,34px) clamp(18px,2.8vw,26px);
}
/* in the footer, above the public-document links */
.home .footer-note{
  max-width:56ch;margin:0 auto clamp(14px,2.2vw,20px);
  text-align:center;
  font-size:clamp(13.5px,1.65vw,15px);
  line-height:1.8;
  color:var(--ink-400);
  text-wrap:pretty;
}
/* the public-document links now sit between two identical rules: this one and
   the existing rule above the contact/copyright row. Same 1px, same token,
   same lead-in, so the pair reads as one frame around the legal block. */
.home .footer-nav{
  justify-content:center;gap:12px clamp(20px,3.2vw,38px);
  padding-top:clamp(12px,2vw,18px);
  border-top:1px solid var(--line-soft);
}
.home .site-footer__bottom{
  justify-content:center;
  gap:6px clamp(16px,2.6vw,28px);
  margin-top:clamp(14px,2.2vw,20px);
  padding-top:clamp(12px,2vw,18px);
  border-top:1px solid var(--line-soft);
}
@media (max-width:600px){
  .home .footer-nav{flex-wrap:nowrap;gap:clamp(9px,2.7vw,15px)}
  .home .footer-nav a{white-space:nowrap;font-size:clamp(10.5px,2.9vw,13px)}
  .home .site-footer__bottom{flex-direction:column;gap:5px;text-align:center}
}

/* ==========================================================================
   After the closing band, on the page's own background. Quiet, but a real
   readable sentence rather than a caption.
   ========================================================================== */
.afternote{
  padding-block:clamp(22px,3.2vw,34px) clamp(8px,1.2vw,14px);
}
.afternote__text{
  max-width:58ch;margin-inline:auto;
  text-align:center;
  font-size:clamp(14.5px,1.8vw,16px);
  line-height:1.85;
  color:var(--ink-400);
  text-wrap:pretty;
}