@import url("https://fonts.bunny.net/css?family=fraunces:400,400i,600,600i,900|ibm-plex-sans:400,500,600&display=swap");

/* ============================================================
   MakeClear — "Distil"  (candidate)
   A wall of words, reduced to its essence, one pass at a time.
   Cool lab-white / graphite / distil-teal / cool slate.
   Restraint, generous air, confident type scale, considered rhythm.
   Bunny fonts only.
   ============================================================ */

:root {
	--paper:  #F4F6F8;   /* cool lab-white ground */
	--ink:    #1C2024;   /* graphite */
	--ink-soft:#3A424A;  /* graphite, softened */
	--teal:   #0E8C82;   /* distil-teal — the single signal */
	--teal-deep:#0A6F67;
	--slate:  #5A6672;   /* cool slate, sub-text */
	--rule:   #DCE2E7;   /* hairline */
	--rule-soft: rgba(28,32,36,.08);
	--font-display: "Fraunces", Georgia, serif;
	--font-text: "IBM Plex Sans", system-ui, sans-serif;
	--wrap: min(60rem, 92vw);
	--gutter: clamp(1.5rem, 5vw, 3.5rem);
	--ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- neutralise the inherited PM/Attention chrome; the content row IS the page.
        NOTE: 'main' is the bespoke wrapper — it must NEVER appear in this list. ---- */
#header,#nav,#footer,.column-sidebar,.bar,.menu { display:none !important; }
#content,.container,.container.columns,.columns,.column-content,.page-content,.page,body>.container { max-width:none !important; width:100% !important; margin:0 !important; padding:0 !important; float:none !important; }

/* ---- reset / base ---- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
	margin:0;
	background:var(--paper);
	color:var(--ink);
	font-family:var(--font-text);
	font-weight:400;
	font-size:clamp(1rem,.97rem + .28vw,1.0875rem);
	line-height:1.65;
	-webkit-font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
a { color:var(--teal); text-underline-offset:3px; }
a:hover { color:var(--teal-deep); }
::selection { background:var(--teal); color:var(--paper); }
img { max-width:100%; display:block; }

/* ---- shared layout: the bespoke wrapper carries the gutter. ---- */
.dl-wrap { width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.dl-wrap > section,
main.dl-wrap > section { width:100%; }

.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:60; border-radius:3px; }
.skip-link:focus { left:.75rem; top:.75rem; }
a:focus-visible, button:focus-visible { outline:2.5px solid var(--teal); outline-offset:3px; border-radius:3px; }

/* ---- fixed wordmark bar ---- */
.dl-bar { position:fixed; inset:0 0 auto 0; z-index:40; background:color-mix(in oklab,var(--paper) 88%,transparent); backdrop-filter:saturate(1.05) blur(8px); border-bottom:1px solid transparent; transition:border-color .35s; }
.dl-bar.is-stuck { border-bottom-color:var(--rule); }
.dl-bar .row { width:var(--wrap); margin-inline:auto; padding:1.05rem var(--gutter); display:flex; justify-content:space-between; align-items:center; }
.wordmark { font-family:var(--font-display); font-weight:600; font-size:1.2rem; letter-spacing:-.015em; text-decoration:none; color:var(--ink); }
.wordmark .dot { color:var(--teal); }
.dl-nav { display:flex; gap:clamp(1rem,2.6vw,1.8rem); font-size:.74rem; }
.dl-nav a { color:var(--slate); text-decoration:none; text-transform:uppercase; letter-spacing:.16em; font-weight:600; transition:color .25s; }
.dl-nav a:hover, .dl-nav a[aria-current="true"] { color:var(--teal); }

/* ---- shared section rhythm ---- */
section { padding-block:clamp(5rem,12vh,9rem); }
.dl-wrap > section + section { border-top:1px solid var(--rule); }

.kicker {
	font-family:var(--font-text); font-weight:600; text-transform:uppercase;
	letter-spacing:.2em; font-size:.74rem; color:var(--teal);
	margin:0 0 2rem; display:flex; align-items:center; gap:.85rem;
}
.kicker::before { content:""; width:30px; height:1.5px; background:var(--teal); flex:none; }

.lead {
	font-family:var(--font-display); font-weight:400;
	font-size:clamp(1.9rem,1.3rem + 2.6vw,3.4rem); line-height:1.14;
	letter-spacing:-.02em; margin:0; max-width:20ch; color:var(--ink);
}
.lead em { font-style:italic; color:var(--teal); }
.section-body {
	font-size:clamp(1.05rem,1rem + .5vw,1.25rem); line-height:1.6;
	max-width:46ch; margin-top:1.8rem; color:var(--slate);
}

/* ============================================================
   HERO — the distillation ladder, given full presence and air.
   ============================================================ */
.hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:8rem 0 5rem; }
.hero-head {
	font-family:var(--font-display); font-weight:400;
	font-size:clamp(1.5rem,1.1rem + 1.9vw,2.5rem); line-height:1.16;
	letter-spacing:-.02em; margin:0 0 1.9rem; max-width:22ch; color:var(--ink);
}
.hero-head em { font-style:italic; color:var(--teal); }
.counter {
	font-family:var(--font-text); font-weight:600; text-transform:uppercase;
	letter-spacing:.18em; font-size:.74rem; color:var(--slate);
	margin:0 0 2.2rem; font-variant-numeric:tabular-nums;
	display:flex; align-items:center; gap:.85rem;
}
.counter::before { content:""; width:30px; height:1.5px; background:var(--teal); flex:none; }
.counter b { color:var(--teal); font-weight:600; }

.ladder { position:relative; padding-left:clamp(1.5rem,3vw,2.4rem); border-left:2px solid var(--teal); min-height:7.5em; display:flex; align-items:flex-start; }
.stage {
	display:none; font-family:var(--font-display); font-weight:400;
	font-size:clamp(1.65rem,1.2rem + 2.4vw,3.2rem); line-height:1.24;
	letter-spacing:-.015em; margin:0; color:var(--ink); max-width:24ch;
	transition:opacity .45s var(--ease);
}
.stage.active { display:block; }
.stage.final {
	font-family:var(--font-display); font-weight:900;
	font-size:clamp(4rem,2.5rem + 9vw,9rem); line-height:.95;
	letter-spacing:-.04em; color:var(--teal); max-width:none;
}
.show-all { display:block; }
.show-all .stage { display:block; margin-bottom:2rem; opacity:1; }
.show-all .stage:last-child { margin-bottom:0; }
.show-all .stage::before {
	content:attr(data-words)" words";
	font-family:var(--font-text); font-size:.68rem; color:var(--slate);
	display:block; letter-spacing:.16em; text-transform:uppercase;
	margin-bottom:.5rem; font-weight:600;
}

.hero-controls { margin-top:3rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.btn {
	font-family:var(--font-text); font-size:.92rem; font-weight:600; cursor:pointer;
	border-radius:7px; padding:.8rem 1.8rem; border:1.5px solid var(--teal);
	background:var(--teal); color:var(--paper);
	letter-spacing:.01em; transition:transform .08s, filter .2s, background .2s, color .2s;
}
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:translateY(1px); }
.btn.ghost { background:transparent; color:var(--teal); }
.btn.ghost:hover { background:color-mix(in oklab,var(--teal) 8%,transparent); filter:none; }

.hero-sub {
	margin:2.4rem 0 0; color:var(--slate); max-width:38ch;
	font-size:clamp(1rem,.97rem + .3vw,1.15rem); line-height:1.65;
}

/* ============================================================
   METHOD + WORK — stripped vertical list, hairline-ruled, no cards.
   ============================================================ */
.principles { list-style:none; margin:3.5rem 0 0; padding:0; border-top:1px solid var(--rule); }
.principle {
	display:grid; grid-template-columns:5.5rem 1fr; gap:clamp(1.25rem,4vw,3rem);
	padding:2.4rem 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.principle .n {
	font-family:var(--font-text); font-weight:600; color:var(--teal);
	font-variant-numeric:tabular-nums; font-size:.8rem;
	text-transform:uppercase; letter-spacing:.12em;
}
.principle h3 {
	font-family:var(--font-display); font-weight:600;
	font-size:clamp(1.5rem,1.2rem + 1.3vw,2.2rem); letter-spacing:-.015em;
	line-height:1.1; margin:0 0 .55rem;
}
.principle p { margin:0; color:var(--slate); max-width:44ch; font-size:clamp(1rem,.97rem + .3vw,1.1rem); line-height:1.6; }

/* ============================================================
   PROOF — invert to graphite. A rhythm beat, quotes in emptiness.
   ============================================================ */
.proof { background:var(--ink); color:var(--paper); margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter); }
.proof .kicker { color:var(--paper); }
.proof .kicker::before { background:var(--teal); }
.quotes { display:grid; gap:clamp(3rem,7vh,5rem); margin-top:1rem; }
.q blockquote {
	font-family:var(--font-display); font-weight:400;
	font-size:clamp(1.7rem,1.2rem + 2.4vw,3.2rem); line-height:1.2;
	letter-spacing:-.02em; margin:0; max-width:22ch; color:var(--paper);
}
.q .src { margin-top:1.2rem; font-family:var(--font-text); font-size:.78rem; text-transform:uppercase; letter-spacing:.14em; color:var(--slate); }
.q .src b { color:var(--teal); font-weight:600; }

/* ============================================================
   CONTACT — irreducible minimum.
   ============================================================ */
.contact .big {
	display:inline-block; margin-top:2.4rem; font-family:var(--font-display);
	font-weight:600; font-size:clamp(1.7rem,1.2rem + 2.4vw,3rem);
	letter-spacing:-.02em; color:var(--teal); text-decoration:none;
	border-bottom:3px solid var(--teal); padding-bottom:.08em; transition:color .25s;
}
.contact .big:hover { color:var(--teal-deep); }
.contact .meta { margin-top:2.2rem; color:var(--slate); font-size:.92rem; line-height:1.9; }

/* ---- footer: the peak-end line ---- */
.dl-foot { border-top:1px solid var(--rule); padding-block:clamp(3rem,7vh,4.5rem); color:var(--slate); }
.dl-foot .close { font-family:var(--font-display); font-size:clamp(1.25rem,1rem + 1.4vw,2rem); line-height:1.3; letter-spacing:-.01em; color:var(--ink); max-width:32ch; margin:1.4rem 0 2.4rem; }
.dl-foot .row { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em; color:var(--slate); }
.dl-foot .row a { color:var(--slate); text-decoration:none; }
.dl-foot .row a:hover { color:var(--teal); }

/* ---- responsive ---- */
@media (max-width:640px) {
	.dl-nav { display:none; }
	.principle { grid-template-columns:1fr; gap:.5rem; }
	.principle .n { font-size:.74rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior:auto; }
	.stage { transition:none; }
	.dl-bar { transition:none; }
}