/* Chromatic Studies: shared shell and article styling for Color Theory. */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root { --ink:#201c2c; --paper:#f9f6ef; --violet:#6750c7; --aqua:#2aa8a0; --coral:#e46f63; }
body.color-theory-page { background:radial-gradient(circle at 12% 0%,rgba(228,111,99,.13),transparent 28rem),radial-gradient(circle at 88% 16%,rgba(42,168,160,.12),transparent 30rem),var(--paper); color:var(--ink); }
.color-theory-shell { isolation:isolate; min-height:100vh; overflow:hidden; position:relative; }
.chromatic-orb { border-radius:999px; filter:blur(1px); opacity:.48; pointer-events:none; position:fixed; z-index:-1; }
.chromatic-orb--one { background:conic-gradient(from 210deg,#f8bf4f,#e46f63,#855bd3,#2aa8a0,#f8bf4f); height:16rem; right:-9rem; top:40vh; width:16rem; }
.chromatic-orb--two { background:conic-gradient(from 30deg,#2aa8a0,#5f83d0,#e46f63,#2aa8a0); bottom:-9rem; height:14rem; left:-8rem; width:14rem; }

.color-theory-nav { align-items:center; backdrop-filter:blur(16px); background:rgba(249,246,239,.76); border-bottom:1px solid rgba(32,28,44,.1); display:flex; justify-content:space-between; margin:0 auto; max-width:1280px; min-height:5.35rem; padding:.8rem clamp(1.25rem,4vw,4rem); position:sticky; top:0; z-index:20; }
.color-theory-mark { align-items:center; color:var(--ink); display:inline-flex; font-family:'Fraunces',Georgia,serif; font-size:.86rem; font-weight:700; gap:.65rem; letter-spacing:.06em; line-height:.88; text-decoration:none; text-transform:uppercase; }
.color-theory-mark em { color:var(--violet); font-size:.72rem; font-style:normal; }
.color-theory-mark__wheel { background:conic-gradient(#ef7063,#f4c558,#52b997,#6677d6,#b465ca,#ef7063); border:2px solid rgba(32,28,44,.86); border-radius:50%; box-shadow:inset 0 0 0 4px var(--paper); display:block; height:2rem; width:2rem; }
.color-theory-nav__links { align-items:center; display:flex; gap:clamp(.25rem,1.8vw,1.4rem); }
.color-theory-nav__links a { color:rgba(32,28,44,.66); font-family:'DM Mono','Courier New',monospace; font-size:.68rem; letter-spacing:.08em; padding:.62rem .7rem; position:relative; text-decoration:none; text-transform:uppercase; }
.color-theory-nav__links a:not(.color-theory-nav__home)::after { background:var(--coral); bottom:.28rem; content:''; height:2px; left:.7rem; position:absolute; transform:scaleX(0); transform-origin:left; transition:transform .2s ease; width:calc(100% - 1.4rem); }
.color-theory-nav__links a:hover,.color-theory-nav__links a.is-active { color:var(--ink); }
.color-theory-nav__links a:hover::after,.color-theory-nav__links a.is-active::after { transform:scaleX(1); }
.color-theory-nav__home { border:1px solid rgba(32,28,44,.18); border-radius:999px; transition:background .2s ease,color .2s ease; }
.color-theory-nav__home:hover { background:var(--ink); color:var(--paper)!important; }
.color-theory-content { margin:0 auto; max-width:1280px; }
.color-theory-content>header { position:relative; }
.color-theory-content>header::before { color:var(--violet); content:'COLOR AS A LANGUAGE'; display:block; font-family:'DM Mono','Courier New',monospace; font-size:.62rem; letter-spacing:.2em; margin-bottom:1rem; }
.color-theory-content>header h1 { font-family:'Fraunces',Georgia,serif; letter-spacing:.09em; }
.color-theory-footer { align-items:center; border-top:1px solid rgba(32,28,44,.1); color:rgba(32,28,44,.57); display:flex; font-family:'DM Mono','Courier New',monospace; font-size:.58rem; gap:.85rem; justify-content:center; letter-spacing:.12em; margin:1rem auto 0; max-width:1280px; padding:1.6rem 1.25rem 2rem; text-align:center; text-transform:uppercase; }
.color-theory-footer span:nth-child(2) { color:var(--coral); font-size:.8rem; }

/* Theory article */
.theory-hero { padding-bottom:2.6rem; }
.theory-hero__eyebrow,.theory-kicker { color:var(--violet); font-family:'DM Mono','Courier New',monospace; font-size:.63rem; letter-spacing:.18em; text-transform:uppercase; }
.theory-hero__eyebrow { margin-bottom:.7rem; }
.theory-article { margin:0 auto; max-width:960px; padding:0 clamp(1.25rem,4vw,3rem) 4rem; }
.theory-intro { max-width:44rem; padding:2.8rem 0 3.5rem; }
.theory-intro h2,.theory-principle h2,.theory-cta h2 { font-family:'Fraunces',Georgia,serif; font-size:clamp(2rem,4.5vw,3.5rem); font-weight:600; letter-spacing:-.045em; line-height:1.02; margin:.75rem 0 1.1rem; }
.theory-intro>p:last-child,.theory-cta>p:last-of-type { color:rgba(32,28,44,.7); font-size:1.2rem; line-height:1.65; }
.theory-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,1fr); }
.theory-card { background:rgba(255,255,255,.54); border:1px solid rgba(32,28,44,.1); border-radius:1rem; min-height:17rem; overflow:hidden; padding:1.5rem; position:relative; }
.theory-card::before { background:var(--violet); content:''; height:4px; left:0; position:absolute; right:0; top:0; }
.theory-card--scale::before { background:var(--aqua); }.theory-card--purpose::before { background:var(--coral); }
.theory-card__number { color:rgba(32,28,44,.32); font-family:'DM Mono',monospace; font-size:.72rem; }
.theory-card h3 { font-family:'Fraunces',Georgia,serif; font-size:1.5rem; margin:2.5rem 0 .65rem; }.theory-card p { color:rgba(32,28,44,.7); font-size:.98rem; line-height:1.5; }
.theory-principle { align-items:start; border-bottom:1px solid rgba(32,28,44,.12); border-top:1px solid rgba(32,28,44,.12); display:grid; gap:3rem; grid-template-columns:.9fr 1.1fr; margin:4.5rem 0; padding:3rem 0; }.theory-principle h2 { font-size:clamp(1.8rem,3.6vw,2.7rem); }.theory-principle ol { counter-reset:steps; list-style:none; }.theory-principle li { border-bottom:1px solid rgba(32,28,44,.1); display:grid; gap:.7rem; grid-template-columns:1rem 8rem 1fr; padding:1rem 0; }.theory-principle li::before { color:var(--coral); content:'0' counter(steps); counter-increment:steps; font-family:'DM Mono',monospace; font-size:.62rem; }.theory-principle li strong { font-family:'Fraunces',Georgia,serif; }.theory-principle li span { color:rgba(32,28,44,.65); font-size:.94rem; }
.theory-cta { background:linear-gradient(130deg,#272039,#443080 52%,#2c9891); border-radius:1.2rem; box-shadow:0 1.2rem 3rem rgba(63,44,126,.22); color:#fffaf5; overflow:hidden; padding:clamp(2rem,7vw,4.5rem); position:relative; }.theory-cta::after { background:conic-gradient(from 0deg,#ffd465,#ef796a,#9d70de,#5ed3bc,#ffd465); border-radius:50%; content:''; filter:blur(3px); height:20rem; opacity:.45; position:absolute; right:-9rem; top:-10rem; width:20rem; }.theory-cta .theory-kicker { color:#b9fbef; position:relative; z-index:1; }.theory-cta h2,.theory-cta p,.theory-tool-link { position:relative; z-index:1; }.theory-cta>p:last-of-type { color:rgba(255,250,245,.78); max-width:36rem; }
.theory-tool-link { align-items:center; background:#fffaf5; border-radius:999px; color:#29203a; display:inline-flex; font-family:'DM Mono','Courier New',monospace; font-size:.72rem; font-weight:500; gap:1.5rem; letter-spacing:.08em; margin-top:1.5rem; padding:.95rem 1.15rem 1rem 1.4rem; text-decoration:none; text-transform:uppercase; transition:transform .25s ease,box-shadow .25s ease; }.theory-tool-link:hover { box-shadow:0 0 0 7px rgba(255,250,245,.16),0 .8rem 1.5rem rgba(20,12,47,.28); transform:translateY(-3px); }.theory-tool-link__glow { animation:color-lab-pulse 2.1s ease-in-out infinite; background:#ef796a; border-radius:50%; height:.55rem; width:.55rem; }@keyframes color-lab-pulse { 50% { background:#2ac5ae; box-shadow:0 0 0 7px rgba(42,197,174,0); transform:scale(1.25); } }

@media (max-width:640px) { .color-theory-nav { min-height:4.7rem; padding:.7rem 1rem; }.color-theory-nav__links { gap:0; }.color-theory-nav__links a { font-size:.58rem; padding:.55rem .42rem; }.color-theory-nav__home { display:none; }.color-theory-content>header::before { margin-bottom:.7rem; }.color-theory-footer { font-size:.52rem; gap:.5rem; }.theory-grid,.theory-principle { grid-template-columns:1fr; }.theory-card { min-height:auto; }.theory-card h3 { margin-top:1.25rem; }.theory-principle { gap:1rem; margin:3rem 0; }.theory-principle li { grid-template-columns:1rem 1fr; }.theory-principle li span { grid-column:2; } }