/* ============================================================
   PENNI shared design system  v2 (premium / glow)
   Used by all pages except index.html (which keeps inline styles
   matching these exact tokens). Keep in sync with the homepage.

   FEEL: refined, expensive, Apple-grade lighting. Black, white,
   and cream carry the weight. The Instrument Serif does the brand
   work. Copper is the only color, used sparingly, and it SHIMMERS
   (anodized-metal iridescence) rather than sitting flat.
   ============================================================ */
:root{
  --bg:#FFFFFF;--bg-alt:#FAF8F4;--bg-dark:#0A0908;--bg-dark-2:#100E0C;
  --text:#0A0A0A;--text-2:#2A2826;--text-muted:#6B6560;--text-faint:#9C968D;
  --line:#ECE8E1;--line-strong:#DCD7CE;
  --cream:#F4EFE7;--cream-2:#EDE7DC;--ink:#16130F;
  --copper:#C07850;--copper-dark:#A0613F;--copper-light:#D89A6A;--copper-pale:#E8C9A0;--copper-tint:#F6EFE7;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Plus Jakarta Sans',-apple-system,sans-serif;
  --pos:#3A8C5C;--neg:#B0573C;
  --irid:linear-gradient(120deg,#A0613F 0%,#C07850 26%,#D89A6A 48%,#E8C9A0 64%,#D8A39A 82%,#C07850 100%);
  --sh-soft:0 1px 2px rgba(40,28,18,.04),0 8px 24px -12px rgba(40,28,18,.10);
  --sh-card:0 1px 2px rgba(40,28,18,.05),0 24px 50px -34px rgba(40,28,18,.22);
  --sh-lift:0 2px 4px rgba(40,28,18,.06),0 30px 60px -32px rgba(40,28,18,.30),0 0 50px -24px rgba(192,120,80,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;letter-spacing:-.006em;position:relative}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding:0 24px}
.wrap-narrow{width:100%;max-width:760px;margin:0 auto;padding:0 24px}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.7);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid rgba(236,232,225,.8)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-family:var(--serif);font-size:27px;color:var(--text);letter-spacing:-.02em}
.logo .dot{background:var(--irid);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(192,120,80,.5));animation:shimmer 6s linear infinite}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-link{font-size:14px;font-weight:500;color:var(--text-muted);transition:color .2s}
.nav-link:hover{color:var(--text)}
.nav-cta{padding:9px 18px;background:var(--text);color:#fff;border-radius:10px;font-size:13.5px;font-weight:600;transition:background .2s,transform .2s}
.nav-cta:hover{background:var(--text-2);transform:translateY(-1px)}
@media(max-width:760px){.nav-links .nav-link{display:none}}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:600;border-radius:12px;cursor:pointer;transition:transform .22s,box-shadow .22s,border-color .22s,color .22s;font-size:15px;border:1px solid transparent;position:relative;overflow:hidden}
.btn-primary{padding:15px 28px;background:var(--copper);color:#fff;box-shadow:0 1px 2px rgba(120,60,30,.2),0 14px 30px -14px rgba(192,120,80,.55),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 2px 4px rgba(120,60,30,.22),0 20px 40px -14px rgba(192,120,80,.6),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);opacity:0}
.btn-primary:hover::after{animation:sweep .9s ease}
@keyframes sweep{0%{left:-60%;opacity:0}12%{opacity:1}100%{left:120%;opacity:0}}
.btn-dark{padding:15px 28px;background:var(--text);color:#fff}
.btn-dark:hover{background:var(--text-2);transform:translateY(-1px)}
.btn-ghost{padding:15px 24px;background:transparent;color:var(--text-2);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.btn-arrow{transition:transform .22s}.btn:hover .btn-arrow{transform:translateX(3px)}

/* TYPE / SECTIONS */
.band{padding:clamp(60px,8.5vw,104px) 0}
.band-sm{padding:clamp(40px,6vw,64px) 0}
.band-alt{background:var(--bg-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kicker{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-dark);margin-bottom:18px}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(31px,4.7vw,48px);line-height:1.06;letter-spacing:-.025em;color:var(--text)}
.h2 em{font-style:italic;color:var(--copper-dark)}
.lead{font-size:clamp(16px,2vw,18.5px);color:var(--text-muted);max-width:600px;margin-top:18px;line-height:1.6}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* PAGE HEADER */
.page-head{position:relative;overflow:hidden;padding:clamp(64px,9.5vw,108px) 0 clamp(32px,4.5vw,52px);border-bottom:1px solid var(--line)}
.page-head.alt{background:var(--bg-alt)}
.page-head::before{content:"";position:absolute;top:-30%;left:-10%;width:60%;height:150%;background:radial-gradient(circle,rgba(192,120,80,.10),transparent 68%);pointer-events:none}
.page-head>*{position:relative}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.6vw,66px);line-height:1.02;letter-spacing:-.025em;color:var(--text)}
.page-head h1 em{font-style:italic;background:var(--irid);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s linear infinite}
.page-head .sub{font-size:clamp(16px,2.2vw,19px);color:var(--text-muted);max-width:560px;margin-top:20px;line-height:1.6}
.page-head .meta{font-size:13px;color:var(--text-muted);margin-top:16px}

/* CARDS */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:680px){.cards.c2{grid-template-columns:1fr 1fr}.cards.c3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.cards.c3{grid-template-columns:1fr 1fr 1fr}}
.card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 26px;box-shadow:var(--sh-soft);transition:border-color .25s,transform .25s,box-shadow .25s}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--sh-lift)}
.card .ic{width:42px;height:42px;border-radius:12px;background:linear-gradient(155deg,#FBF7F1,#F1EADF);border:1px solid var(--cream-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.card h3{font-size:17px;font-weight:700;margin-bottom:9px;color:var(--text)}
.card.serif h3{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--text-muted);line-height:1.6}

/* ARTICLE / LEGAL */
.article{padding:clamp(40px,6vw,64px) 0 clamp(56px,8vw,88px)}
.article h2{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3vw,28px);letter-spacing:-.015em;color:var(--text);margin:38px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font-size:16px;font-weight:700;color:var(--text);margin:24px 0 8px}
.article p{font-size:15.5px;color:var(--text-2);line-height:1.72;margin-bottom:14px}
.article ul{margin:0 0 16px;padding-left:0;list-style:none}
.article li{position:relative;padding-left:22px;font-size:15.5px;color:var(--text-2);line-height:1.65;margin-bottom:10px}
.article li:before{content:"";position:absolute;left:4px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--text-faint)}
.article a{color:var(--copper-dark);font-weight:600}
.article a:hover{text-decoration:underline}
.callout{position:relative;background:linear-gradient(155deg,#FBF7F1,#F2EBE0);border:1px solid var(--cream-2);border-radius:16px;padding:22px 24px;margin:20px 0;font-size:15px;color:var(--text-2);line-height:1.62;box-shadow:var(--sh-soft)}
.callout b{color:var(--text)}

/* DARK PANEL + GLOW */
.dark-panel{position:relative;overflow:hidden;background:var(--bg-dark);color:#fff;border-radius:24px;border:1px solid #211D18}
.dark-panel::before{content:"";position:absolute;top:-45%;right:-12%;width:65%;height:170%;background:radial-gradient(circle,rgba(216,154,106,.20),rgba(192,120,80,.10) 32%,transparent 64%);pointer-events:none;animation:bloom 22s ease-in-out infinite alternate}
.dark-panel::after{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,rgba(232,201,160,.5),transparent);pointer-events:none}
@keyframes bloom{0%{transform:translate(0,0) scale(1);opacity:.9}100%{transform:translate(-6%,4%) scale(1.12);opacity:1}}

/* GLOW TEXT */
.glow-text{background:linear-gradient(120deg,#E8C9A0,#D89A6A 40%,#C07850 70%,#E8C9A0);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px rgba(216,154,106,.45));animation:shimmer 5s linear infinite}

/* IRIDESCENT BORDER */
.irid-edge{position:relative}
.irid-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:var(--irid);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* CTA STRIP */
.cta-strip{position:relative;overflow:hidden;text-align:center;padding:clamp(60px,8.5vw,104px) 0}
.cta-strip::before{content:"";position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:80%;height:160%;background:radial-gradient(circle,rgba(192,120,80,.09),transparent 65%);pointer-events:none}
.cta-strip>*{position:relative}
.cta-strip h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:-.025em;max-width:680px;margin:0 auto}
.cta-strip h2 em{font-style:italic;color:var(--copper-dark)}
.cta-strip .lead{margin:20px auto 30px}

/* FOOTER */
.footer{background:var(--bg-alt);border-top:1px solid var(--line);padding:56px 0 40px}
.foot-grid{display:grid;grid-template-columns:1fr;gap:30px}
@media(min-width:680px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-logo{font-family:var(--serif);font-size:26px;color:var(--text)}
.foot-logo .dot{background:var(--irid);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 5px rgba(192,120,80,.45));animation:shimmer 7s linear infinite}
.foot-tag{font-size:14px;color:var(--text-muted);margin-top:12px;max-width:300px;line-height:1.55}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px}
.foot-col a{display:block;font-size:14px;color:var(--text-2);margin-bottom:10px;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.foot-bottom p{font-size:13px;color:var(--text-muted)}
.foot-bottom .tagline{font-family:var(--serif);font-size:18px;color:var(--text-2)}

/* THREAD BUBBLES */
.thread-mini{display:flex;flex-direction:column;gap:9px;max-width:380px}
.tb{max-width:82%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.45}
.tb.in{align-self:flex-start;background:#F1EEEA;color:var(--text-2);border-bottom-left-radius:5px}
.tb.out{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px;box-shadow:0 10px 24px -14px rgba(20,15,10,.5)}
.tb.in b{color:var(--text);font-weight:700}

/* REVEAL */
.rv,.rv-s,.rv-l,.rv-r{opacity:0}
.rv{transform:translateY(24px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv-s{transform:translateY(28px) scale(.95);transition:opacity .65s ease,transform .8s cubic-bezier(.34,1.42,.5,1)}
.rv-l{transform:translateX(-34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv-r{transform:translateX(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in,.rv-s.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv,.rv-s,.rv-l,.rv-r{opacity:1;transform:none;transition:none}.dark-panel::before,.logo .dot,.foot-logo .dot,.page-head h1 em,.glow-text{animation:none}.btn-primary:hover::after{animation:none}}