/* ============================================================================
   Landing page — "Worlds and Hats", and the note from the person who built it.

   The whole job of the Worlds section is to stop people reading "World" as
   "big project". Every device below is built around SHOWING the nesting rather
   than asserting it: a card that visibly contains projects settles the question
   faster than any sentence can, and the comparison underneath closes the door.

   Loads after landing-v3-sections.css and uses its tokens and rhythm.
   ========================================================================== */

/* -------------------------------------------------------- the world cards */
.worlds-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(16px,2vw,24px);margin-top:clamp(30px,4vw,48px);
}
.world-card{
  position:relative;border-radius:24px;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--lift);
  padding:clamp(22px,2.4vw,30px);
}
.world-card::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--wc)}
.world-card > header{display:flex;align-items:center;gap:13px;padding-bottom:16px}
.world-card > header > i{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--wc) 70%,#fff);
  background:radial-gradient(circle at 32% 26%,#fff 16%,color-mix(in srgb,var(--wc) 16%,#fff));
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--wc) 55%,transparent);
}
.world-card > header strong{display:block;font-size:21px;font-weight:680;letter-spacing:-.025em;color:var(--ink)}
.world-card > header small{
  display:inline-block;margin-top:5px;font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb,var(--wc) 72%,var(--ink));
  background:color-mix(in srgb,var(--wc) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--wc) 22%,transparent);
  border-radius:999px;padding:3px 9px;
}
.wp-label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);padding-top:15px;border-top:1px solid var(--line-2);margin-bottom:10px;
}
.wp{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 0}
.wp + .wp{border-top:1px solid var(--line-2)}
.wp i{width:9px;height:9px;border-radius:50%;background:var(--pc);flex:0 0 auto}
.wp b{margin-left:auto;font-size:12.5px;font-weight:650;color:var(--ink-faint)}

/* ------------------------------------------ the comparison that settles it */
.tell{
  margin-top:clamp(26px,3vw,40px);
  background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:24px;
  box-shadow:var(--lift);backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  padding:clamp(24px,2.6vw,34px);
}
.tell h3{margin:0 0 6px;font-size:clamp(20px,1.7vw,25px);font-weight:640;letter-spacing:-.025em;color:var(--ink)}
.tell > p{margin:0 0 22px;font-size:15px;color:var(--ink-soft);font-weight:350}
.tell-row{
  display:grid;grid-template-columns:minmax(110px,.9fr) 1.3fr 1.3fr;
  gap:clamp(12px,1.6vw,26px);align-items:start;
  padding:13px 0;border-top:1px solid var(--line-2);
}
.tell-row.head{border-top:0;padding-top:0;padding-bottom:9px}
.tell-row.head b{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tell-row.head .a{color:var(--c-blue)}
.tell-row.head .b{color:var(--ink-faint)}
.tell-row > span:first-child{font-size:13px;color:var(--ink-faint);font-weight:500;padding-top:2px}
.tell-row .a,.tell-row .b{font-size:15.5px;line-height:1.42;font-weight:450;color:var(--ink-soft)}
.tell-row .a{color:var(--ink);font-weight:520}

/* ------------------------------------------------- who actually needs one */
.who{margin-top:clamp(26px,3vw,40px)}
.who h3{margin:0 0 18px;font-size:clamp(20px,1.7vw,25px);font-weight:640;letter-spacing:-.025em;color:var(--ink)}
.who-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.who-card{
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:20px;
  padding:clamp(18px,2vw,24px);box-shadow:0 2px 6px rgba(28,45,95,.04);
}
.who-card .tag{
  display:block;font-size:11px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:12px;
}
.who-names{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.who-names span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:14.5px;font-weight:600;letter-spacing:-.015em;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  box-shadow:0 1px 2px rgba(28,45,95,.04);
}
.who-names i{width:7px;height:7px;border-radius:50%;background:var(--nc);flex:0 0 auto}
.who-card p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft);font-weight:350}
.who-card p b{font-weight:600;color:var(--ink-2)}

.worlds-foot{margin-top:clamp(24px,2.6vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,30px)}
.worlds-foot div{border-left:2px solid color-mix(in srgb,var(--c-rose) 34%,transparent);padding-left:18px}
.worlds-foot h4{margin:0 0 7px;font-size:15px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.worlds-foot p{margin:0;font-size:14.5px;line-height:1.58;color:var(--ink-soft);font-weight:350}

/* ================================================================ the note
   The one place on the page that is a person rather than a product. Quieter
   than everything around it on purpose: no gradient, no glow, no motion. */
.tint-paper{--tint:rgba(255,241,228,.55);--tint2:rgba(226,236,250,.45)}
.note-sheet{
  max-width:74ch;margin-inline:auto;
  background:var(--paper);border:1px solid var(--line);border-radius:28px;
  box-shadow:var(--lift-lg);
  padding:clamp(30px,4vw,54px) clamp(26px,4vw,58px);
}
.note-sheet > header{
  display:flex;align-items:center;gap:15px;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid var(--line-2);
}
.note-sheet .av{
  width:52px;height:52px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(135deg,#E2799F,var(--c-rose));
  box-shadow:0 8px 20px -8px rgba(194,86,127,.7);
  color:#fff;font-size:19px;font-weight:700;letter-spacing:-.02em;
}
.note-sheet > header strong{display:block;font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--ink)}
.note-sheet > header small{display:block;font-size:14px;color:var(--ink-faint);margin-top:3px}
.note-sheet p{
  margin:0 0 19px;font-size:clamp(17px,1.35vw,19.5px);line-height:1.62;
  font-weight:350;color:var(--ink-2);letter-spacing:-.005em;
}
.note-sheet p b{font-weight:640;color:var(--ink)}
.note-sheet p:last-of-type{margin-bottom:0}
.note-sheet .sign{
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2);
  font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.015em;
}
.note-sheet .sign small{display:block;font-size:13.5px;font-weight:400;color:var(--ink-faint);margin-top:4px}

/* --------------------------------------------------------------- narrower */
@media(max-width:1000px){
  .worlds-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .who-grid{grid-template-columns:1fr}
  .worlds-foot{grid-template-columns:1fr;gap:20px}
}
@media(max-width:720px){
  /* A three-column comparison cannot survive a phone, so each row becomes a
     stacked pair that carries its own labels. */
  .tell-row{grid-template-columns:1fr;gap:5px;padding:16px 0}
  .tell-row.head{display:none}
  .tell-row > span:first-child{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
  .tell-row .a::before{content:'A World: ';font-weight:700;color:var(--c-blue)}
  .tell-row .b::before{content:'A project: ';font-weight:700;color:var(--ink-faint)}
}