/* =====================================================================
   THE METHOD PAGES

   The landing page is a room you travel through. These are documents you
   read standing still, so they drop the whole apparatus: no canvas, no
   scrim, no bloom. What carries over is the palette, the type and the
   discipline about what may be claimed.

   One column, one measure, and nothing behind the words.
   ===================================================================== */
:root{
  --ink:#f4f6f8;
  --paper:#ffffff;
  --bone:#0f1319;
  --bone-dim:#39424d;
  --muted:#6f7985;
  --line:rgba(24,29,36,.14);
  --line-soft:rgba(24,29,36,.08);
  --pad:clamp(20px,4vw,64px);
  --nav-h:76px;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--bone);
  font-family:'Onest',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  font-weight:400; font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
::selection{ background:#1c2229; color:#fff; }

/* --------------------------------------------------------------- bar */
.pnav{
  position:sticky; top:0; z-index:20; height:var(--nav-h);
  display:flex; align-items:center; gap:20px;
  padding:0 var(--pad);
  background:rgba(244,246,248,.86);
  backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.pnav .brand-tx{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.pnav .brand-tx b{ font-size:14px; font-weight:600; letter-spacing:.2em; color:#0b0e13; }
.pnav .brand-tx i{ font-style:normal; font-size:8px; letter-spacing:.32em; color:var(--muted); }
.pnav .back{
  margin-left:auto; display:inline-flex; align-items:center; gap:10px;
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
}
.pnav .back i{ width:20px; height:1px; background:currentColor; display:block; transition:width .45s var(--ease-out); }
.pnav .back:hover i{ width:30px; }

/* ------------------------------------------------------------- sheet */
.doc{ max-width:1180px; margin:0 auto; padding:0 var(--pad); }
.doc-head{ padding:clamp(52px,9vh,110px) 0 clamp(34px,5vh,58px); border-bottom:1px solid var(--line); }
.crumb{
  display:flex; align-items:center; gap:12px; margin-bottom:26px;
  font-size:10px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.crumb b{ color:#1c2229; font-weight:500; }
.crumb span.sep{ width:20px; height:1px; background:var(--line); display:block; }
.doc-head h1{
  margin:0; max-width:15ch;
  font-size:clamp(38px,6.2vw,86px); font-weight:400; line-height:1.02; letter-spacing:-.035em;
}
.doc-head .lede{
  margin:clamp(24px,3vw,36px) 0 0; max-width:60ch;
  font-size:clamp(18px,1.5vw,24px); line-height:1.5; font-weight:400;
  letter-spacing:-.012em; color:#1c2229;
}

/* ------------------------------------------------------------- body */
.doc-body{
  display:grid; grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(28px,5vw,90px);
  padding:clamp(44px,7vh,86px) 0 clamp(50px,8vh,96px);
}
.doc-aside{ position:sticky; top:calc(var(--nav-h) + 34px); align-self:start; }
.doc-aside h4{
  margin:0 0 16px; font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.spec{ margin:0; }
.spec div{ display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-top:1px solid var(--line-soft); }
.spec dt{ font-size:12.5px; color:var(--muted); }
.spec dd{ margin:0; font-size:12.5px; text-align:right; color:#1c2229; font-variant-numeric:tabular-nums; }
.doc-main{ max-width:68ch; }
.doc-main h2{
  margin:clamp(38px,5vw,58px) 0 16px;
  font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#1c2229;
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.doc-main h2:first-child{ margin-top:0; border-top:0; padding-top:0; }
.doc-main p{ margin:0 0 20px; color:var(--bone-dim); }
.doc-main p strong{ color:var(--bone); font-weight:500; }
.doc-main ul{ margin:0 0 20px; padding-left:0; list-style:none; }
.doc-main li{
  position:relative; padding-left:22px; margin-bottom:12px; color:var(--bone-dim);
}
.doc-main li::before{
  content:''; position:absolute; left:0; top:.72em; width:9px; height:1px; background:#1c2229;
}
.pull{
  margin:clamp(30px,4vw,44px) 0; padding:clamp(22px,2.4vw,30px) clamp(24px,2.6vw,34px);
  background:var(--paper); box-shadow:0 0 0 1px var(--line-soft), 0 24px 60px -46px rgba(16,20,26,.5);
  font-size:clamp(17px,1.35vw,21px); line-height:1.5; letter-spacing:-.008em; color:#0f1319;
}
.limit{
  margin:clamp(34px,4.6vw,52px) 0 0; padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,30px);
  border-left:2px solid #1c2229; background:rgba(24,29,36,.045);
}
.limit h3{
  margin:0 0 12px; font-size:10px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:#1c2229;
}
.limit p{ margin:0 0 12px; font-size:15.5px; line-height:1.6; color:var(--bone-dim); }
.limit p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------- feet */
.doc-next{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px; background:var(--line-soft);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.doc-next a{
  display:block; padding:clamp(24px,3vw,38px) clamp(20px,2.4vw,32px);
  background:var(--ink); transition:background .4s;
}
.doc-next a:hover{ background:var(--paper); }
.doc-next span{
  display:block; font-size:9.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px;
}
.doc-next b{ display:block; font-size:clamp(17px,1.5vw,22px); font-weight:400; letter-spacing:-.012em; }
.doc-next i{ display:block; margin-top:8px; font-style:normal; font-size:14px; color:var(--bone-dim); }

.doc-cta{ padding:clamp(48px,8vh,92px) 0; text-align:center; }
.doc-cta h3{ margin:0 0 22px; font-size:clamp(22px,2.4vw,34px); font-weight:400; letter-spacing:-.02em; }
.doc-cta a{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px;
  padding:16px 32px; border:1px solid var(--bone);
  font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  transition:color .45s;
}
.doc-cta a i{ position:absolute; inset:0; background:var(--bone); transform:translate3d(0,101%,0); transition:transform .55s var(--ease-out); }
.doc-cta a span{ position:relative; z-index:1; }
.doc-cta a:hover{ color:#fff; }
.doc-cta a:hover i{ transform:none; }

.pfoot{
  border-top:1px solid var(--line-soft);
  padding:26px var(--pad); display:flex; flex-wrap:wrap; gap:16px 30px; justify-content:space-between;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}

@media (max-width:860px){
  .doc-body{ grid-template-columns:1fr; }
  .doc-aside{ position:static; order:2; padding-top:30px; border-top:1px solid var(--line-soft); }
  .doc-main{ order:1; }
}