/* Coff & Co 2026 - global rules (the demo's per-page <style> block + styles.css link defaults). */

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:var(--font-mono);overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--cc-page-bg,var(--cream));color:#000;animation:ccPageIn .22s ease both}
img,svg,video{max-width:100%}
img{height:auto}
button{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0}
a{color:inherit;text-decoration:none}
a:not([class]):hover{color:var(--red)}
[hidden]{display:none !important}

@keyframes ccMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ccPageIn{from{opacity:0}to{opacity:1}}
@keyframes ccBeat{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

/* Page fade-out on internal navigation (core.js adds .cc-leaving, 160ms). */
body.cc-leaving{opacity:0;transition:opacity .16s ease}

/* Shell (demo Shell: min-height 100vh column, main grows) */
.cc-shell{min-height:100vh;display:flex;flex-direction:column}
.cc-main{flex:1;outline:none}
.cc-main--pad{padding-top:24px}

/* 1400px content canvas (common.jsx .cc-canvas) */
.cc-canvas{width:100%;max-width:1400px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
@media (min-width:1449px){.cc-canvas{padding-left:0;padding-right:0}}
@media (max-width:480px){.cc-canvas{padding-left:16px;padding-right:16px}}

/* Accent letters (cc_swap). Kerning and ligatures off: the demo set every character in its own
   inline-block, which disables both, so this keeps the same letter positions with fewer nodes. */
.cc-swap{font-kerning:none;font-variant-ligatures:none;font-feature-settings:"kern" 0,"liga" 0}
.cc-w{white-space:nowrap}
.cc-a{font-family:var(--font-hand);font-weight:400;letter-spacing:normal;display:inline-block}
/* index.html mixedLetters(): plain letters keep kerning, accents are inline-block with
   line-height 1 and the parent's tracking (homepage sections + home footer). */
.cc-swap--mixed{font-kerning:auto;font-variant-ligatures:normal;font-feature-settings:normal}
.cc-swap--mixed .cc-a{line-height:1;letter-spacing:inherit;text-transform:none}

/* Accessibility */
.screen-reader-text{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cc-skip{position:absolute;left:8px;top:-60px;z-index:1000;background:var(--black);color:var(--cream);font:500 14px/1 var(--font-mono);letter-spacing:1.4px;text-transform:uppercase;padding:10px 12px}
.cc-skip:focus{top:8px}
:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* Reveal on view (the demo's whileInView y-rise: movement only, no opacity).
   Elements carry data-cc-reveal and --ry (distance), --rdur (duration), --rd (delay).
   Only applied with JS (html.cc-js) and when motion is allowed. */
.cc-js [data-cc-reveal]{transform:translate3d(0,var(--ry,40px),0);transition:transform var(--rdur,.6s) var(--ease-expo) var(--rd,0s)}
.cc-js [data-cc-reveal].is-in{transform:none}

/* Section title lift (shop/product Section h2: y 44 -> 0, .6s) */
.cc-js [data-cc-rise="lift"]{transform:translate3d(0,44px,0);transition:transform .6s var(--ease-expo)}
.cc-js [data-cc-rise="lift"].is-in{transform:none}

/* Masked word rise (WaveWord: each word rises 115% out of a clip, staggered 90ms). */
.cc-mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.12em;margin-bottom:-.12em}
.cc-mw>.cc-w{display:inline-block}
.cc-js [data-cc-rise="mask"] .cc-mw>.cc-w{transform:translate3d(0,115%,0);transition:transform .9s var(--ease-expo) calc(var(--i,0) * .09s)}
.cc-js [data-cc-rise="mask"].is-in .cc-mw>.cc-w{transform:none}

@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .cc-js [data-cc-reveal],.cc-js [data-cc-rise],.cc-js [data-cc-rise] .cc-mw>.cc-w{transform:none !important;transition:none !important}
}

/* Generic page: legal/text layout (privacy-policy.html LegalPage) */
.cc-legal{padding:clamp(36px,5vw,84px) 0 140px}
.cc-legal__col{max-width:926px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.cc-legal__title{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(44px,8vw,80px);letter-spacing:-0.05em;line-height:1;color:#000}
.cc-legal__body{font-family:var(--font-display);font-weight:400;font-size:16px;line-height:1.3;color:#000;text-wrap:pretty}
.cc-legal__body>*{margin:0}
.cc-legal__body>*+*{margin-top:20px}
.cc-legal__body>:is(h1,h2,h3,h4,h5,h6){font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-1px;line-height:1.1;color:#000}
.cc-legal__body>*+:is(h1,h2,h3,h4,h5,h6){margin-top:40px}
.cc-legal__body strong,.cc-legal__body b{font-weight:700}
.cc-legal__body a{text-decoration:underline;text-underline-offset:3px}
.cc-legal__body ul,.cc-legal__body ol{padding-left:1.3em}
.cc-legal__body li+li{margin-top:8px}
@media (max-width:760px){.cc-legal{padding-bottom:88px}}

/* 404 + front-page placeholder */
.cc-404__col{align-items:flex-start}
.cc-404__text{font:400 18px/1.3 var(--font-mono)}
.cc-placeholder{min-height:calc(100dvh - 100px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:32px;padding:140px 24px 80px;text-align:center}
.cc-placeholder .cc-st{font-size:clamp(44px,9vw,152px);line-height:.95}
.cc-placeholder__note{font:400 14px/1.4 var(--font-mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--cream)}