/* ============================================================
CreativeNodes - shared site styles (DARK-FIRST, locked 2026-07-12)
The website is the dark room where the work glows: warm charcoal ground,
cream type, coral as the loud emphasis. Carousels stay cream-led.
Source of truth: branding repo -> website/redesign-mockups/STYLE-LOCK.md
Fonts block (copy-paste into every page):
============================================================ */
:root{
--cream:#F1EEE3;
--cream-2:#E9E5D6;
--charcoal:#33312C;
--charcoal-deep:#2A2823; /* page ground: one step deeper for tile contrast */
--coral:#D75549;
--coral-bright:#E2685C; /* coral lifted for dark grounds (type use) */
--coral-deep:#C24A3F;
--camel:#9E6F54;
--camel-lt:#B98F74; /* camel lifted for dark grounds */
--hair:rgba(51,49,44,.16); /* on cream */
--hair-cr:rgba(241,238,227,.16); /* on charcoal */
--cream-dim:rgba(241,238,227,.74);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
background:var(--charcoal-deep);color:var(--cream);
font-family:'Hanken Grotesk',sans-serif;font-weight:500;
font-size:clamp(16px,1.6vw,19px);line-height:1.55;
-webkit-font-smoothing:antialiased;
}
/* warm grain - on every page */
body::after{
content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
opacity:.06;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,video{max-width:100%;display:block}
/* ---------- layout ---------- */
.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.section{padding:clamp(64px,10vh,120px) 0;position:relative}
.section--cream{background:var(--cream);color:var(--charcoal)}
.section--cream2{background:var(--cream-2);color:var(--charcoal)}
.section--coral{background:var(--coral);color:var(--cream)}
.hairline-top{border-top:1px solid var(--hair-cr)}
.section--cream.hairline-top,.section--cream2.hairline-top{border-top-color:var(--hair)}
/* ---------- type ---------- */
h1,h2,h3,.display{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:-.03em}
h1{font-size:clamp(40px,9.4vw,132px);line-height:.92;text-transform:uppercase}
h2{font-size:clamp(30px,5vw,68px);line-height:.96;text-transform:uppercase;letter-spacing:-.02em}
h3{font-size:clamp(19px,2vw,24px);line-height:1.1;letter-spacing:-.01em}
.coral-w{color:var(--coral-bright)}
.section--cream .coral-w,.section--cream2 .coral-w{color:var(--coral)}
.dim-w{color:var(--cream-dim)}
.serif{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;letter-spacing:-.01em}
p{max-width:60ch}
.lede{max-width:44ch}
.eyebrow,.label{
font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--camel-lt);display:inline-block;
}
.eyebrow--coral{color:var(--coral-bright)}
.section--cream .eyebrow,.section--cream2 .eyebrow{color:var(--camel)}
.section--cream .eyebrow--coral,.section--cream2 .eyebrow--coral{color:var(--coral)}
/* ---------- wordmark ---------- */
.wordmark{font-family:'Outfit',sans-serif;font-size:19px;color:var(--cream);text-decoration:none;letter-spacing:-.01em}
.wordmark span{font-weight:500}
.wordmark b{font-weight:700}
.section--cream .wordmark,.section--cream2 .wordmark{color:var(--charcoal)}
/* ---------- buttons & links ---------- */
.btn{
display:inline-block;background:var(--coral);color:var(--cream);
font-family:'Archivo',sans-serif;font-weight:800;text-transform:uppercase;
letter-spacing:.08em;font-size:13px;padding:15px 28px;border-radius:2px;
text-decoration:none;transition:background .15s;border:0;cursor:pointer;
}
.btn:hover{background:var(--coral-deep)}
.btn.small{padding:11px 18px;font-size:11px}
.btn--cream{background:var(--cream);color:var(--charcoal)}
.btn--cream:hover{background:var(--cream-2)}
.btn--charcoal{background:var(--charcoal);color:var(--cream)}
.btn--charcoal:hover{background:#211f1b}
.quiet-link{
font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
color:var(--cream);text-decoration:none;border-bottom:1px solid var(--hair-cr);
padding-bottom:3px;
}
.quiet-link:hover{border-color:var(--cream)}
.section--cream .quiet-link,.section--cream2 .quiet-link{color:var(--charcoal);border-color:var(--hair)}
/* ---------- nav ---------- */
.nav{position:relative;z-index:10}
.nav--overlay{position:absolute;top:0;left:0;right:0}
.nav--bar{border-bottom:1px solid var(--hair-cr)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.nav-links{display:none;gap:28px;align-items:center}
.nav-links a{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.nav-links a:hover{color:var(--coral-bright)}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--cream);font-size:11px}
.mob-only{display:inline-block}
@media(min-width:760px){.nav-links{display:flex}.mob-only{display:none}}
/* ---------- chrome kit ---------- */
.chip{
display:inline-flex;align-items:center;gap:8px;background:var(--coral);color:var(--cream);
font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
padding:7px 12px;border-radius:2px;
}
.corner{position:absolute;color:var(--coral-bright);font-weight:600;font-size:16px;user-select:none;pointer-events:none}
.corner.tl{top:86px;left:clamp(20px,5vw,56px)}
.corner.tr{top:86px;right:clamp(20px,5vw,56px)}
.corner.bl{bottom:80px;left:clamp(20px,5vw,56px)}
.corner.br{bottom:80px;right:clamp(20px,5vw,56px)}
.rail{display:flex;align-items:center;gap:14px}
.rail .lab{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--camel-lt);white-space:nowrap}
.rail-line{flex:1;height:1px;background:var(--hair-cr);position:relative}
.rail-line i{position:absolute;left:0;top:-2.5px;height:5px;background:var(--coral);border-radius:2px}
.section--cream .rail-line,.section--cream2 .rail-line{background:var(--hair)}
/* ---------- forms (ESP slot styling) ---------- */
.form-row{display:flex;flex-direction:column;gap:12px;max-width:460px}
@media(min-width:760px){.form-row{flex-direction:row}}
.form-row input[type=email],.form-row input[type=text]{
flex:1;background:transparent;border:1px solid var(--hair-cr);border-radius:2px;
padding:14px 16px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--cream);
}
.form-row input::placeholder{color:rgba(241,238,227,.4)}
.section--cream .form-row input[type=email],.section--cream2 .form-row input[type=email]{
border-color:var(--hair);color:var(--charcoal)}
.section--cream .form-row input::placeholder,.section--cream2 .form-row input::placeholder{color:rgba(51,49,44,.42)}
/* ---------- footer ---------- */
.footer{border-top:1px solid var(--hair-cr);padding:44px 0}
.footer-in{display:flex;flex-direction:column;gap:18px}
@media(min-width:760px){.footer-in{flex-direction:row;justify-content:space-between;align-items:center}}
.footer .meta{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--camel-lt)}
.footer a{color:inherit;text-decoration:none}
/* ---------- utilities ---------- */
.mt-1{margin-top:14px}.mt-2{margin-top:28px}.mt-3{margin-top:44px}
.center{text-align:center}
.grid-2{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:760px){.grid-2{grid-template-columns:1fr 1fr;gap:44px}}