/* OnePower component styles — consumed by components/*.jsx */
.op-root{font-family:var(--font-sans);color:var(--text-primary)}
.op-link{color:inherit;text-decoration:none;transition:color var(--dur-fast)}
.op-link:hover{color:var(--text-hover)}
/* menu button */
.op-menu-btn{display:flex;align-items:center;gap:14px;background:var(--surface-pill);border:1px solid var(--border-pill);border-radius:var(--radius-pill);padding:6px 6px 6px 22px;cursor:pointer;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--text-primary);transition:background var(--dur-fast)}
.op-menu-btn:hover{background:var(--surface-pill-hover)}
.op-menu-btn__dot{width:36px;height:36px;border-radius:50%;background:var(--op-orange);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.op-menu-btn__dot span{width:14px;height:1.5px;background:#FFFFFF;display:block}
/* header */
.op-header{background:var(--surface-page);border-bottom:1px solid var(--border-hairline);z-index:10}
.op-header--sticky{position:sticky;top:0}
.op-header__in{max-width:var(--page-max);margin:0 auto;padding:22px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:24px}
/* drawer */
.op-drawer{position:fixed;inset:0;z-index:20;display:flex;justify-content:flex-end}
.op-drawer--contained{position:absolute}
.op-drawer__scrim{position:absolute;inset:0;background:var(--overlay-scrim)}
.op-drawer__panel{position:relative;width:min(100%,600px);height:100%;overflow-y:auto;background:var(--surface-page);display:flex;flex-direction:column;box-shadow:var(--shadow-drawer)}
.op-drawer__top{padding:22px clamp(24px,4vw,56px);display:flex;align-items:center;justify-content:flex-end;min-height:81px}
.op-drawer__close{display:flex;align-items:center;gap:12px;background:none;border:none;padding:10px 0;cursor:pointer;font-family:var(--font-sans);font-size:15px;font-weight:500;color:var(--text-primary);transition:color var(--dur-fast)}
.op-drawer__close:hover{color:var(--text-hover)}
.op-drawer__close span{font-size:24px;line-height:1;font-weight:300}
.op-drawer__nav{display:flex;flex-direction:column;border-top:1px solid var(--border-rule);margin:0 clamp(24px,4vw,56px);padding-top:clamp(16px,3vw,40px)}
.op-drawer__link{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--border-rule);font-size:var(--size-nav);font-weight:300;letter-spacing:-.035em;line-height:1.05;color:var(--text-primary);text-decoration:none;transition:color var(--dur-fast)}
.op-drawer__link:hover{color:var(--text-hover)}
.op-drawer__link span{font-size:18px;font-weight:300}
.op-drawer__groups{padding:clamp(40px,5vw,64px) clamp(24px,4vw,56px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.op-drawer__group{display:flex;flex-direction:column;gap:14px}
.op-drawer__sub{font-size:15px;font-weight:300;color:var(--text-body);text-decoration:none;transition:color var(--dur-fast)}
.op-drawer__sub:hover{color:var(--text-hover)}
.op-drawer__cta{margin-top:auto;background:var(--surface-accent);padding:clamp(32px,4vw,48px) clamp(24px,4vw,56px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.op-drawer__cta-text{font-size:var(--size-drawer-cta);font-weight:400;letter-spacing:-.03em;color:var(--text-on-accent)}
/* kicker */
.op-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-meta)}
.op-kicker--sm{font-size:11px}
.op-kicker--accent{color:var(--text-accent)}
/* headings */
.op-h{margin:0;color:var(--text-primary);min-width:0}
.op-h--display{font-size:var(--size-display);font-weight:300;letter-spacing:-.045em;line-height:.98;text-wrap:balance}
.op-h--cta{font-size:var(--size-cta);font-weight:300;letter-spacing:-.045em;line-height:1}
.op-h--manifesto{font-size:var(--size-manifesto);font-weight:400;letter-spacing:-.045em;line-height:1.04;text-wrap:balance}
.op-h--section{font-size:var(--size-section);font-weight:300;letter-spacing:-.04em;line-height:1.04}
.op-h--statement{font-size:var(--size-statement);font-weight:400;letter-spacing:-.035em;line-height:1.12;text-wrap:pretty}
.op-h--quote{font-size:var(--size-quote);font-weight:400;letter-spacing:-.03em;line-height:1.18;text-wrap:pretty}
.op-h--title{font-size:30px;font-weight:400;letter-spacing:-.03em}
.op-h--on-muted{color:var(--text-on-muted)}
.op-accent{color:var(--text-accent);font-weight:400}
.op-accent--muted{color:var(--text-meta);font-weight:inherit}
.op-lead{margin:0;font-size:var(--size-lead);line-height:1.6;font-weight:300;color:var(--text-body);max-width:520px;text-wrap:pretty}
.op-body{margin:0;font-size:17px;line-height:1.65;font-weight:300;color:var(--text-body)}
/* arrow link */
.op-arrow{display:inline-flex;align-items:center;gap:14px;font-size:16px;font-weight:500;color:var(--text-primary);text-decoration:none;transition:color var(--dur-fast);align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-sans)}
.op-arrow:hover{color:var(--text-hover)}
.op-arrow__dot{width:48px;height:48px;border-radius:50%;background:var(--op-orange);color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.op-arrow--lg{gap:16px;font-weight:400;color:var(--text-on-muted)}
.op-arrow--lg .op-arrow__dot{width:52px;height:52px}
.op-arrow--xl{gap:16px;font-weight:400;font-size:17px;color:var(--text-on-muted)}
.op-arrow--xl .op-arrow__dot{width:52px;height:52px}
/* text link */
.op-textlink{color:var(--text-primary);text-decoration:none;font-size:15px;font-weight:500;border-bottom:1px solid var(--op-orange);padding-bottom:2px;transition:color var(--dur-fast)}
.op-textlink:hover{color:var(--text-hover)}
.op-textlink--ink{color:var(--text-on-muted);font-size:17px;font-weight:400;border-bottom-color:var(--text-on-muted)}
/* pill */
.op-pill{display:inline-flex;align-items:center;background:#FFFFFF;color:var(--text-primary);padding:14px 24px;border-radius:var(--radius-pill);font-family:var(--font-sans);font-size:15px;font-weight:500;text-decoration:none;border:none;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast)}
.op-pill:hover{background:var(--op-ink);color:#FFFFFF}
/* feature column */
.op-feature{display:flex;flex-direction:column;gap:20px;border-top:1px solid var(--border-rule);padding-top:28px}
.op-feature__index{font-family:var(--font-mono);font-size:13px;color:var(--text-accent)}
/* placeholder */
.op-ph{display:flex;align-items:flex-end;padding:20px;background:repeating-linear-gradient(135deg,var(--op-stripe-mid-a) 0 1px,var(--op-stripe-mid-b) 1px 14px);overflow:hidden;position:relative}
.op-ph--light{padding:16px;background:repeating-linear-gradient(135deg,var(--op-stripe-light-a) 0 1px,var(--op-stripe-light-b) 1px 14px)}
.op-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.op-ph__label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-meta);position:relative}
/* project card */
.op-project{display:flex;flex-direction:column;gap:20px;color:var(--text-primary);text-decoration:none;transition:color var(--dur-fast)}
.op-project:hover{color:var(--text-hover)}
.op-project__meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.op-project__name{font-size:21px;font-weight:400;letter-spacing:-.02em}
.op-project__type{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-meta)}
/* bracket quote */
.op-bracket{position:relative;padding:clamp(48px,6vw,96px) clamp(32px,6vw,120px)}
.op-bracket__l,.op-bracket__r{position:absolute;top:0;bottom:0;width:18px;border:4px solid #FFFFFF}
.op-bracket__l{left:0;border-right:none}.op-bracket__r{right:0;border-left:none}
/* manifesto */
.op-manifesto{background:var(--surface-accent);position:relative;overflow:hidden}
.op-manifesto__mark{position:absolute;left:50%;top:50%;width:clamp(420px,52vw,760px);height:clamp(420px,52vw,760px);transform:translate(-40%,-46%);pointer-events:none}
.op-manifesto__in{position:relative;max-width:var(--page-max);margin:0 auto;min-height:clamp(560px,92vh,1000px);padding:clamp(96px,10vw,160px) var(--gutter);display:flex;align-items:center;justify-content:center}
.op-manifesto .op-h{text-align:center;max-width:1240px}
/* section */
.op-section--page{background:var(--surface-page)}
.op-section--muted{background:var(--surface-muted)}
.op-section--accent{background:var(--surface-accent)}
.op-section__in{max-width:var(--page-max);margin:0 auto;padding:var(--section-pad-y) var(--gutter);display:flex;flex-direction:column}
/* footer */
.op-footer{background:var(--surface-page)}
.op-footer__in{max-width:var(--page-max);margin:0 auto;padding:56px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.op-footer__links{display:flex;gap:32px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-meta)}
.op-footer__links a{color:var(--text-meta);text-decoration:none;transition:color var(--dur-fast)}
.op-footer__links a:hover{color:var(--text-hover)}
.op-manifesto .op-h{color:var(--text-on-accent)}
.op-manifesto__mark{opacity:.16}
/* mobile: top-nav links live in the Menu drawer instead */
@media (max-width:900px){.op-topnav{display:none!important}}
/* mobile: auto-fit grids collapse to 1 column, so "span 2" items would add a phantom column and overflow */
@media (max-width:760px){[style*="grid-column:span 2"],[style*="grid-column: span 2"]{grid-column:1/-1!important}}
