/* Motions blog. Same field, ink and chrome as the landing page, so it reads as
   the same site — the index is a full-bleed scene fading into the field over
   a plain title and an editorial list; articles are a narrow readable column
   under a shallower band of the same scene. Long-form text is set in Inter on
   purpose: the art headlines belong to the beats, not to reading. Weights
   stay light — 300 for display and running text, 400/500 for titles, never
   above 500 — because heavy Inter reads cheap next to the art. */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{ position:relative; }

:root{
  --field:#ECEDF1;
  --ink:#372A63;      --ink-rgb:55,42,99;
  --lo-rgb:14,8,32;
  --body:#3A3550;     /* running text: violet pulled toward black */
  --muted:#6B6486;
  --grey:#6C727C;     --nav-ink:var(--grey); --nav-ink-hov:#0B0D12;
  --line:rgba(55,42,99,.14);
  --nav-y:34px;
}

body{
  background:var(--field); color:var(--body);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:16px; line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); }

/* ---- nav: the landing page's, verbatim in structure ----------------------- */
/* Absolute, not fixed: on the blog the bar sits on the band and scrolls away
   with it, so it never rides over the reading column. */
.nav{
  position:absolute; top:0; left:0; right:0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(20px,4vw,56px); padding:var(--nav-y) clamp(18px,3vw,40px) 0;
}
.nav__side{ display:flex; align-items:center; gap:clamp(16px,2.4vw,32px); }
.nav__side--left { justify-content:flex-end; }
.nav__side--right{ justify-content:flex-start; }
.nav a, .nav button{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:500 14px Inter, system-ui, sans-serif; text-decoration:none; white-space:nowrap;
  color:var(--nav-ink); cursor:pointer; transition:color .18s ease;
}
.nav a:hover, .nav button:hover, .nav button[aria-expanded="true"]{ color:var(--nav-ink-hov); }
.logo{ display:block; line-height:0; }
.logo img{ display:block; width:150px; height:auto; }
.menu{ position:relative; }
.menu__btn{ display:inline-flex; align-items:center; gap:.45em; }
.menu__btn svg{ width:9px; height:9px; transition:transform .2s ease; }
.menu__btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
.menu__panel{
  position:absolute; top:calc(100% + 12px); right:0; z-index:60;
  min-width:186px; padding:7px; border-radius:16px;
  display:flex; flex-direction:column;
  background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:0 16px 36px rgba(var(--lo-rgb),.12), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(var(--lo-rgb),.06);
  opacity:0; translate:0 -6px; pointer-events:none;
  transition:opacity .18s ease, translate .18s ease;
}
.menu__panel.is-open{ opacity:1; translate:0 0; pointer-events:auto; }
.menu__panel a{ padding:9px 13px; border-radius:10px; font:400 14px Inter, system-ui, sans-serif; color:var(--nav-ink); transition:background .15s ease, color .15s ease; }
.menu__panel a:hover{ background:rgba(var(--ink-rgb),.07); color:var(--nav-ink-hov); }
.menu__panel .menu__locked{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px; border-radius:10px; font:400 14px Inter, system-ui, sans-serif;
  color:var(--nav-ink); opacity:.45; cursor:default; user-select:none;
}
.menu__panel .menu__locked svg{ width:11px; height:13px; flex:none; }

/* ---- the band: a scene that fades into the page ---------------------------
   Full-bleed, cropped low so the sky and islands show, dissolving into the
   field through the bottom third. The title sits in the dissolve, not under
   it, which is what ties the picture to the page instead of stacking them. */
.band{ position:relative; height:clamp(340px,52vh,560px); overflow:hidden; }
.band::before{
  content:""; position:absolute; inset:0;
  background:url("/assets/motions-founding-circles-background-sky-castle-islands.webp") center 35% / cover no-repeat;
  /* The hero's wash: the scene at --bg-image over the field ... */
  opacity:.36;
}
.band::after{
  content:""; position:absolute; inset:0;
  /* ... under --bg-shade of the deep violet, with the field fading up over
     both through the bottom third so the page takes over cleanly. */
  background:
    linear-gradient(to bottom, rgba(236,237,241,0) 30%, rgba(236,237,241,.55) 62%, var(--field) 100%),
    rgba(var(--lo-rgb), .16);
}
.band--short{ height:clamp(240px,34vh,360px); }

/* ---- page frame ------------------------------------------------------------ */
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px); }

/* ---- index -------------------------------------------------------------------- */
.blog-head{ position:relative; z-index:1; margin-top:clamp(-120px,-14vh,-80px); }
.blog-head h1{
  margin:0; font-size:clamp(56px,9vw,112px); font-weight:300; line-height:.95; letter-spacing:-.04em; color:var(--ink);
}
.blog-head p{ margin:14px 0 0; max-width:560px; font-size:17px; font-weight:300; line-height:1.5; color:var(--muted); }

.posts{ list-style:none; margin:clamp(48px,7vh,80px) 0 0; padding:0; border-top:1px solid var(--line); }
.post{
  display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; align-items:start;
  padding:clamp(28px,4vh,40px) 0; border-bottom:1px solid var(--line);
}
.post__meta{ grid-column:1; margin:0 0 10px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.post__meta span + span::before{ content:"·"; margin:0 .7em; opacity:.6; }
.post h2{ grid-column:1; margin:0; font-size:clamp(22px,2.6vw,30px); font-weight:400; line-height:1.18; letter-spacing:-.02em; }
.post h2 a{ color:var(--ink); text-decoration:none; }
.post h2 a:hover{ color:#0B0D12; }
.post__dek{ grid-column:1; margin:10px 0 0; max-width:720px; font-size:16.5px; font-weight:300; line-height:1.6; color:var(--muted); }
.post time{ grid-column:2; grid-row:1 / span 3; padding-top:26px; font-size:14px; white-space:nowrap; color:var(--muted); }

/* ---- article ------------------------------------------------------------------ */
.article{ position:relative; z-index:1; max-width:760px; margin:clamp(-80px,-9vh,-56px) auto 0; padding:0 clamp(20px,4vw,48px); }
.crumbs{ margin:0 0 22px; font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.crumbs a{ color:inherit; text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.crumbs span{ margin:0 .6em; opacity:.6; }
.eyebrow{ margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.article h1{ margin:0; font-size:clamp(34px,5vw,54px); font-weight:300; line-height:1.08; letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.dek{ margin:18px 0 0; font-size:19px; font-weight:300; line-height:1.5; color:var(--muted); }
.byline{ display:flex; flex-wrap:wrap; gap:6px 0; margin:22px 0 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.byline span + span::before{ content:"·"; margin:0 .7em; opacity:.6; }

.article-body{ margin-top:36px; font-size:17px; font-weight:300; line-height:1.72; }
.article-body p, .article-body li{ margin:0 0 18px; }
.article-body h2{ margin:44px 0 14px; font-size:26px; font-weight:400; line-height:1.2; letter-spacing:-.02em; color:var(--ink); }
.article-body h3{ margin:32px 0 10px; font-size:19px; font-weight:500; letter-spacing:-.015em; color:var(--ink); }
.article-body ul, .article-body ol{ padding-left:22px; margin:0 0 18px; }
.article-body li{ margin-bottom:8px; }
.article-body a{ text-underline-offset:3px; }
.article-body blockquote{ margin:26px 0; padding:4px 0 4px 22px; border-left:3px solid rgba(var(--ink-rgb),.3); color:var(--ink); font-size:19px; line-height:1.5; }
.article-body blockquote p{ margin:0; }
.article-body code{ font:500 .92em ui-monospace, SFMono-Regular, Menlo, monospace; background:rgba(var(--ink-rgb),.07); padding:.1em .4em; border-radius:6px; }
.article-body strong{ color:var(--ink); font-weight:500; }

/* the closing ask on an article: a quiet glass panel, same recipe as the pill */
.article-cta{
  margin:56px 0 0; padding:30px 30px 32px; border-radius:22px;
  background:rgba(var(--ink-rgb),.05); border:1px solid rgba(var(--ink-rgb),.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(var(--lo-rgb),.05);
}
.article-cta h2{ margin:0; font-size:24px; font-weight:400; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
.article-cta p{ margin:10px 0 0; font-weight:300; color:var(--muted); }
.article-cta a{
  display:inline-block; margin-top:18px; padding:12px 22px; border-radius:999px; text-decoration:none;
  background:var(--ink); color:#fff; font:500 14px Inter, system-ui, sans-serif;
}
.article-cta a:hover{ background:#0B0D12; }

/* related: the same editorial rows as the index, narrower */
.related{ max-width:760px; margin:64px auto 0; padding:0 clamp(20px,4vw,48px); }
.related .posts{ margin-top:14px; }
.related .post{ padding:22px 0; }
.related .post h2{ font-size:20px; font-weight:400; }

/* ---- footer: the landing page's ---------------------------------------------- */
.foot{ margin-top:clamp(72px,10vh,120px); padding:40px 20px 42px; text-align:center; border-top:1px solid rgba(var(--ink-rgb),.08); }
.foot .logo{ display:inline-block; margin:0 0 18px; }
.foot .logo img{ width:118px; }
.legal__links{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); opacity:.7; }
.legal__links a{ color:inherit; text-decoration:none; }
.legal__links a:hover{ color:var(--ink); opacity:1; }
.legal__links span{ margin:0 .55em; opacity:.55; }
.legal__entity{ margin:12px 0 0; font-size:10px; line-height:1.5; letter-spacing:.06em; color:var(--muted); opacity:.6; }

@media (max-width:640px){
  :root{ --nav-y:20px; }
  .logo img{ width:112px; }
  .nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:11px 18px; padding:var(--nav-y) 14px 0; }
  .nav .logo{ order:1; flex:0 0 100%; display:flex; justify-content:center; }
  .nav__side--left{ order:2; } .nav__side--right{ order:3; }
  .nav__side{ gap:18px; }
  .nav a, .nav button{ font-size:12px; }
  .band{ height:clamp(280px,42vh,400px); }
  .band::before{ background-image:url("/assets/motions-kids-game-world-background-floating-islands-mobile.webp"); background-position:center 40%; }
  .blog-head{ margin-top:-64px; }
  .blog-head h1{ font-size:64px; }
  .post{ grid-template-columns:1fr; }
  .post time{ grid-column:1; grid-row:auto; padding:12px 0 0; }
  .article{ margin-top:-48px; }
  .article-body{ font-size:16.5px; }
  .legal__entity{ font-size:9px; letter-spacing:.02em; }
}