/* SOHO base styles. Tokens from build/tokens.css; never hard-code colours here. */

html { background: var(--soho-color-gallery); -webkit-font-smoothing: antialiased; }
body { margin: 0; color: var(--soho-color-graphite); font-family: var(--soho-font-sans); }
img, video { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 2px solid var(--soho-color-klein); outline-offset: 2px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--soho-color-iron); color: var(--soho-color-gallery); padding: 8px 12px; z-index: var(--soho-z-toast); }
.skip-link:focus { left: 8px; }

/* Type roles */
.soho-display { font-family: var(--soho-font-display); font-weight: 400; font-size: var(--soho-type-display-size); line-height: var(--soho-type-display-line); letter-spacing: var(--soho-type-display-track); color: var(--soho-color-iron); margin: 0; }
.soho-display em { font-style: italic; }
.soho-eyebrow { font-family: var(--soho-font-sans); font-size: var(--soho-type-eyebrow-size); letter-spacing: var(--soho-type-eyebrow-track); text-transform: uppercase; font-weight: 500; margin: 0; }
.soho-lead { font-size: var(--soho-type-body-lg-size); line-height: var(--soho-type-body-lg-line); max-width: 46ch; }
.soho-mono { font-family: var(--soho-font-mono); font-size: var(--soho-type-mono-size); font-variant-numeric: tabular-nums; }
.soho-muted { color: var(--soho-color-fog); }

/* C01 ribbon (output by soho-core on wp_body_open) */
.soho-ribbon { height: 36px; display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--soho-color-iron); color: var(--soho-color-gallery); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 0 16px; text-align: center; }
.soho-ribbon a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(247, 246, 242, .4); }

/* C02 header */
.soho-header { border-bottom: 1px solid var(--soho-color-plaster); position: sticky; top: 0; background: var(--soho-color-gallery); z-index: var(--soho-z-nav); transition: transform var(--soho-duration-base) var(--soho-ease-out); }
.soho-header.is-hidden { transform: translateY(-100%); }
.soho-header > .wp-block-group { min-height: 80px; }
.soho-header .wp-block-site-title a { color: var(--soho-color-iron); }
.soho-header .wp-block-navigation a:hover { color: var(--soho-color-klein); }
.soho-header .wc-block-mini-cart__button, .soho-header .wc-block-customer-account__account-link { font-size: .875rem; font-weight: 500; }

/* Hero */
.soho-hero { padding-block: var(--soho-space-9); }
@media (min-width: 1024px) { .soho-hero { padding-block: var(--soho-section-desktop); } }
.soho-hero .soho-display { margin: var(--soho-space-5) 0 var(--soho-space-6); }

/* Buttons: outline variant */
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--soho-color-iron); border: 1px solid var(--soho-color-iron); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--soho-color-klein); border-color: var(--soho-color-klein); background: transparent; }

/* Hairline separators */
hr.wp-block-separator { border: 0; border-top: 1px solid var(--soho-color-plaster); margin: 0; }

/* Footer */
.soho-footer { background: var(--soho-color-iron); color: var(--soho-color-gallery); padding: var(--soho-space-9) 0 var(--soho-space-6); }
.soho-footer a { color: #CFCCC4; text-decoration: none; }
.soho-footer a:hover { color: var(--soho-color-gallery); }
.soho-footer .soho-footer-mark { font-family: var(--soho-font-sans); font-weight: 300; font-size: clamp(4rem, 14vw, 14rem); letter-spacing: .12em; line-height: .9; color: var(--soho-color-gallery); margin: 0 0 var(--soho-space-8); }
.soho-footer .soho-legal { margin-top: var(--soho-space-8); padding-top: var(--soho-space-5); border-top: 1px solid var(--soho-color-graphite); font-size: 12px; color: var(--soho-color-fog); max-width: 80ch; }

/* Guest price gate (soho-core/visibility) */
.soho-signin { color: var(--soho-color-klein); font-size: .875rem; font-weight: 500; text-decoration: none; }

/* C16 gate (soho-core/gate) */
.soho-gate { position: fixed; inset: 0; z-index: var(--soho-z-modal); background: rgba(17, 17, 17, .8); display: grid; place-items: center; padding: 20px; }
.soho-gate__panel { background: var(--soho-color-gallery); max-width: 560px; width: 100%; padding: 40px; }
.soho-gate__panel h2 { font-family: var(--soho-font-display); font-weight: 400; font-size: 2rem; margin: 16px 0 12px; color: var(--soho-color-iron); }
.soho-gate__panel p { margin: 0 0 24px; }
.soho-gate__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.soho-gate__actions .wp-element-button { cursor: pointer; }
body.soho-gate-open { overflow: hidden; }

/* Reveal (app.js) */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--soho-duration-slow) var(--soho-ease-out), transform var(--soho-duration-slow) var(--soho-ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } .soho-header { transition: none; } }