@import url("https://fonts.bunny.net/css?family=fraunces:300,400,400i,700|inter-tight:400,500,600&display=swap");

/* ============================================================
   MakeClear — "Signal"  (candidate)
   One message, found in the noise. Everything fades but the point.
   Field yellow ground / ink / noise grey / deep plum accent.
   Radical restraint, generous air, confident type. Bunny fonts only.
   ============================================================ */

:root {
	--field: #F2C94C;        /* field yellow ground */
	--ink:   #1A1A1A;        /* near-black ink */
	--ink-soft: #4A4234;     /* muted ink on the field */
	--noise: #B8A94A;        /* faint buzzword grey */
	--plum:  #3A1F4D;        /* deep plum accent */
	--plum-line: rgba(58,31,77,.22);
	--ink-line:  rgba(26,26,26,.18);
	--display: "Fraunces", Georgia, serif;
	--text: "Inter Tight", system-ui, sans-serif;
	--wrap: min(60rem, 92vw);
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- neutralise inherited Attention chrome; the content row IS the page ----
   (a) hide PM chrome, (b) make PM's OUTER containers full-bleed.
   NB: 'main' is deliberately NOT in this list — it is our bespoke wrapper. */
#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;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
	margin:0; background:var(--field); color:var(--ink);
	font-family:var(--text); font-weight:400;
	font-size:clamp(1rem,.95rem + .35vw,1.125rem); line-height:1.65;
	-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:var(--plum); text-underline-offset:3px; }
::selection { background:var(--plum); color:var(--field); }

/* ---- shared layout: every section carries the gutter so nothing goes flush ---- */
main { display:block; }
.sg-wrap { width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--field); padding:.6rem 1rem; z-index:60; }
.skip-link:focus { left:.5rem; top:.5rem; }
a:focus-visible,button:focus-visible { outline:3px solid var(--plum); outline-offset:3px; border-radius:2px; }

/* ---- fixed wordmark bar ---- */
.sg-bar { position:fixed; inset:0 0 auto 0; z-index:40; padding:1.05rem 0;
	background:color-mix(in oklab, var(--field) 84%, transparent); backdrop-filter:saturate(1.1) blur(7px);
	opacity:0; transform:translateY(-100%); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.sg-bar.is-shown { opacity:1; transform:none; }
.sg-bar .row { width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); display:flex; justify-content:space-between; align-items:center; }
.wordmark { font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.wordmark .dot { color:var(--plum); }
.sg-nav { display:flex; gap:clamp(.9rem,2.5vw,1.6rem); font-size:.74rem; }
.sg-nav a { color:var(--ink-soft); text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-weight:600; transition:color .25s; }
.sg-nav a:hover,.sg-nav a[aria-current="true"] { color:var(--ink); }

/* ============================================================
   HERO: the signal found in the noise
   ============================================================ */
.hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
	padding:7rem var(--gutter) 4rem; overflow:hidden; }
.noise-field { position:absolute; inset:0; pointer-events:none; }
.noise {
	position:absolute; font-family:var(--text); font-weight:400; color:var(--noise);
	font-size:clamp(.85rem,.75rem + .65vw,1.35rem); white-space:nowrap; opacity:.8;
	transition:opacity .9s var(--ease), filter .9s var(--ease), transform .9s var(--ease);
}
.is-found .noise { opacity:.12; filter:blur(1.5px); transform:scale(.96); }

.signal-wrap { position:relative; z-index:2; max-width:46rem; }
.eyebrow { font-family:var(--text); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; color:var(--plum);
	margin:0 0 1.8rem; display:inline-flex; align-items:center; gap:.7rem; }
.eyebrow::before,.eyebrow::after { content:""; width:26px; height:1px; background:var(--plum); opacity:.7; }
.signal {
	font-family:var(--display); font-weight:300; color:var(--ink);
	font-size:clamp(2.6rem,1.8rem + 4.4vw,5.4rem); line-height:1.06; letter-spacing:-.025em; margin:0;
	transition:font-weight .7s var(--ease), transform .7s var(--ease), letter-spacing .7s var(--ease);
	transform:scale(.985);
}
.is-found .signal { font-weight:700; transform:scale(1); letter-spacing:-.03em; }
.hero-controls { margin-top:2.8rem; }
.btn { font-family:var(--text); font-size:.95rem; font-weight:600; letter-spacing:.01em; cursor:pointer; border-radius:999px;
	padding:.8rem 1.8rem; border:2px solid var(--ink); background:var(--ink); color:var(--field);
	transition:transform .08s, background .25s, color .25s, border-color .25s; }
.btn:hover { background:var(--plum); border-color:var(--plum); }
.btn:active { transform:translateY(1px); }

.hero-cue { margin-top:auto; padding-top:3.5rem; display:flex; flex-direction:column; align-items:center; gap:.65rem; color:var(--ink-soft); position:relative; z-index:2; }
.hero-cue .line { width:1px; height:36px; background:var(--ink-line); }
.hero-cue span { font-family:var(--text); font-size:.7rem; text-transform:uppercase; letter-spacing:.2em; }

/* ============================================================
   SECTIONS: one idea per screen, generous vertical rhythm
   ============================================================ */
section.block { padding-block:clamp(5rem,12vh,9rem); }
.kicker { font-family:var(--text); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:.74rem; color:var(--plum);
	margin:0 0 2rem; display:flex; align-items:center; gap:.8rem; }
.kicker::before { content:""; width:28px; height:1px; background:var(--plum); }

.lead { font-family:var(--display); font-weight:400; font-size:clamp(1.7rem,1.3rem + 2.2vw,3rem); line-height:1.16; letter-spacing:-.02em;
	margin:0; max-width:20ch; }
.lead em { font-style:italic; color:var(--plum); }
.body { font-size:clamp(1.05rem,1rem + .5vw,1.25rem); line-height:1.7; max-width:48ch; margin-top:1.8rem; color:var(--ink-soft); }

/* the point: the one line that does not fade, set in plum */
.point { background:var(--plum); color:var(--field); border-radius:20px; padding:clamp(2.4rem,6vw,4.5rem);
	margin-bottom:clamp(3rem,7vh,5rem); position:relative; overflow:hidden; }
.point::before { content:""; position:absolute; inset:0 auto auto 0; width:42px; height:42px; margin:clamp(1.4rem,3vw,2rem);
	border-left:2px solid color-mix(in oklab,var(--field) 70%,transparent); border-top:2px solid color-mix(in oklab,var(--field) 70%,transparent); opacity:.5; }
.point .big { font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,1.4rem + 2.8vw,3.4rem); line-height:1.14; letter-spacing:-.02em; margin:0; max-width:20ch; }
.point .big em { font-style:normal; color:#F2C94C; border-bottom:4px solid color-mix(in oklab,var(--field) 55%,transparent); }

/* what I cut: stripped vertical list, numeric rhythm, no cards */
.cuts { list-style:none; margin:3rem 0 0; padding:0; display:grid; gap:0; border-top:2px solid var(--ink); }
.cut-row { display:grid; grid-template-columns:9rem 1fr; gap:clamp(1rem,4vw,3rem); padding:2.4rem 0; border-bottom:2px solid var(--ink-line); align-items:baseline; }
.cut-tag { font-family:var(--text); font-weight:600; text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; color:var(--plum); }
.cut-row h3 { font-family:var(--display); font-weight:700; font-size:clamp(1.5rem,1.25rem + 1.3vw,2.3rem); letter-spacing:-.015em; line-height:1.12; margin:0 0 .55rem; }
.cut-row p { margin:0; max-width:46ch; color:var(--ink-soft); font-size:clamp(1rem,.97rem + .3vw,1.12rem); }

/* proof: pull quotes in air */
.quotes { display:grid; gap:clamp(2.5rem,6vh,4rem); margin-top:3rem; }
.q blockquote { font-family:var(--display); font-weight:700; font-size:clamp(1.7rem,1.3rem + 2.2vw,3rem); line-height:1.18; letter-spacing:-.02em; margin:0; max-width:22ch; }
.q blockquote .qm { color:var(--plum); }
.q .src { margin-top:1rem; font-size:.92rem; color:var(--plum); font-weight:600; max-width:50ch; }

/* contact: irreducible minimum */
.contact .big { display:inline-block; margin-top:2rem; font-family:var(--display); font-weight:700;
	font-size:clamp(1.5rem,1.1rem + 1.8vw,2.6rem); letter-spacing:-.02em; color:var(--plum); text-decoration:none;
	border-bottom:3px solid var(--plum); padding-bottom:.08em; transition:color .25s, border-color .25s; }
.contact .big:hover { color:var(--ink); border-color:var(--ink); }

.sg-foot { border-top:2px solid var(--ink-line); padding-block:clamp(2.5rem,7vh,4rem); }
.sg-foot .close { font-family:var(--display); font-weight:400; font-size:clamp(1.2rem,1rem + 1vw,1.8rem); line-height:1.3; letter-spacing:-.01em; margin:0 0 2rem; max-width:30ch; }
.sg-foot .meta { font-family:var(--text); color:var(--ink-soft); font-weight:500; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin:0; }

/* ---- reduced motion: the signal is already strong, noise already faint ---- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior:auto; }
	.noise,.signal,.sg-bar { transition:none !important; }
}

@media (max-width:640px) {
	.sg-nav { display:none; }
	.cut-row { grid-template-columns:1fr; gap:.5rem; }
	.eyebrow::after { display:none; }
}