/* Cheesepedia "Cave Noir" design system: tokens, type, buttons, cards, footer
   and motion shared by every redesigned page. Colours follow the app's
   homeV2Theme so the site and the app read as one product. */

/* Colour tokens. Dark ("Cave Noir") is the default and matches the app; the
   light palette applies when the head script in every page sets
   data-theme="light" from the visitor's choice or system setting. Phone
   frames and app mock-ups redeclare the dark values so they always look like
   the app. */
:root,
.cp-dark,.cp-phone,.cp-final-phone,.phone-shot,.wine-app-panel,.hub-wine-preview{
  --cp-bg:#161412;
  --cp-bg-alt:#1A1715;
  --cp-card:#1C1916;
  --cp-raised:#221E1B;
  --cp-raised-strong:#2E2722;
  --cp-hover:#1E1B18;
  --cp-line:#2A2521;
  --cp-line-strong:#38322D;
  --cp-line-bold:#504740;
  --cp-text:#F5F3EF;
  --cp-text-body:#D3CCC3;
  --cp-text-soft:#BBB4AC;
  --cp-text-muted:#8A837A;
  --cp-accent:#F58A07;
  --cp-accent-text:#F58A07;
  --cp-ink:#161412;
  color-scheme:dark;
}
.cp-dark,.cp-phone,.cp-final-phone,.phone-shot,.wine-app-panel,.hub-wine-preview{color:var(--cp-text)}
:root[data-theme="light"]{
  --cp-bg:#FAF7F2;
  --cp-bg-alt:#F3EEE6;
  --cp-card:#FFFFFF;
  --cp-raised:#EEE8DF;
  --cp-raised-strong:#E4DBCE;
  --cp-hover:#F3EEE6;
  --cp-line:#E6DFD4;
  --cp-line-strong:#D8CEC0;
  --cp-line-bold:#B7AA98;
  --cp-text:#1C1815;
  --cp-text-body:#38312B;
  --cp-text-soft:#4D463F;
  --cp-text-muted:#6F665D;
  --cp-accent-text:#A85500;
  color-scheme:light;
}
/* Page-level tokens. Mock-ups keep their dark colours but cast shadows that
   suit the page around them, so these are not redeclared on them. */
:root{
  --cp-footer:#12100E;
  --cp-glass:rgba(22,20,18,.84);
  --cp-glass-strong:rgba(22,20,18,.9);
  --cp-glass-line:rgba(255,255,255,.08);
  --cp-scrim:rgba(8,6,5,.64);
  --cp-shadow:rgba(0,0,0,.4);
  --cp-shadow-deep:rgba(0,0,0,.55);
  --cp-mark-from:#2C2620;
  --cp-mark-to:#1F1B18;
  --cp-logo-filter:none;
}
:root[data-theme="light"]{
  --cp-footer:#F1EBE2;
  --cp-glass:rgba(250,247,242,.86);
  --cp-glass-strong:rgba(250,247,242,.92);
  --cp-glass-line:rgba(28,24,21,.08);
  --cp-scrim:rgba(28,24,21,.28);
  --cp-shadow:rgba(68,48,28,.14);
  --cp-shadow-deep:rgba(68,48,28,.22);
  --cp-mark-from:#F7F0E6;
  --cp-mark-to:#ECE3D6;
  --cp-logo-filter:brightness(0);
}
:root{
  --cp-serif:'Instrument Serif','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --cp-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --cp-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --cp-ease:cubic-bezier(.2,.7,.2,1);
  --cp-gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--cp-bg);color:var(--cp-text);font-family:var(--cp-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--cp-accent-text)}
::selection{background:rgba(245,138,7,.35);color:var(--cp-text)}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:2px solid var(--cp-accent-text);outline-offset:3px}

.cp-wrap{max-width:1240px;margin:0 auto;padding-inline:var(--cp-gutter)}
.cp-serif{font-family:var(--cp-serif);font-weight:400}
.cp-mono{font-family:var(--cp-mono)}
.cp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Type */
.cp-eyebrow{font-family:var(--cp-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--cp-accent-text)}
.cp-label{font-family:var(--cp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cp-text-muted)}
.cp-display{font-family:var(--cp-serif);font-size:clamp(44px,5.2vw,76px);line-height:1;letter-spacing:-.02em}
.cp-display em,.cp-h1 em,.cp-title em{color:var(--cp-text-soft)}
.cp-lead{font-size:17px;color:var(--cp-text-soft)}

/* Sections */
.cp-section{padding:clamp(96px,11vw,160px) 0}
.cp-section--alt{background:var(--cp-bg-alt);border-top:1px solid var(--cp-line);border-bottom:1px solid var(--cp-line)}
.cp-head{display:flex;flex-direction:column;gap:22px}
.cp-head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:32px}
.cp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.cp-split--top{align-items:start}

/* Buttons */
.cp-btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .25s var(--cp-ease)}
.cp-btn svg{flex:none}
.cp-btn--primary{background:var(--cp-accent);color:var(--cp-ink);font-weight:600}
.cp-btn--primary:hover{color:var(--cp-ink);background:#FF9A1F;transform:translateY(-1px)}
.cp-btn--ghost{border:1px solid var(--cp-line-bold);color:var(--cp-text)}
.cp-btn--ghost:hover{border-color:var(--cp-text-muted);color:var(--cp-text)}
.cp-btn--sm{height:46px;padding:0 20px;font-size:14px}
.cp-text-link{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--cp-accent-text)}
.cp-text-link:hover{color:var(--cp-text)}

.cp-stores{display:flex;flex-wrap:wrap;gap:12px}
.cp-stores--center{justify-content:center;width:100%}
.cp-store{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 24px 0 18px;border-radius:14px;background:var(--cp-accent);color:var(--cp-ink);transition:background .25s ease,border-color .25s ease,transform .25s var(--cp-ease)}
.cp-store:hover{color:var(--cp-ink);background:#FF9A1F;transform:translateY(-1px)}
.cp-store--ghost{background:transparent;border:1px solid var(--cp-line-bold);color:var(--cp-text)}
.cp-store--ghost:hover{background:transparent;border-color:var(--cp-text-muted);color:var(--cp-text)}
.cp-store svg{flex:none}
.cp-store-copy{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.cp-store-small{font-size:11px;opacity:.78}
.cp-store--ghost .cp-store-small{opacity:1;color:var(--cp-text-soft)}
.cp-store-big{font-size:17px;font-weight:600}

/* Cheese cards (home, related cheeses) */
.cp-card,.cheese-card{display:flex;flex-direction:column;gap:16px;color:var(--cp-text)}
.cp-card:hover,.cheese-card:hover{color:var(--cp-text)}
.cp-card-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--cp-raised);transition:transform .5s var(--cp-ease),box-shadow .5s ease}
.cp-card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--cp-ease)}
.cp-card:hover .cp-card-media,.cheese-card:hover .cp-card-media{transform:translateY(-6px);box-shadow:0 24px 48px var(--cp-shadow)}
.cp-card:hover .cp-card-media img,.cheese-card:hover .cp-card-media img{transform:scale(1.045)}
.cp-badge{position:absolute;top:14px;left:14px;padding:6px 11px;border-radius:999px;background:var(--cp-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--cp-glass-line);font-family:var(--cp-mono);font-size:11px;line-height:1.2;letter-spacing:.14em;color:var(--cp-text)}
.cp-card-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.cp-card-title{font-family:var(--cp-serif);font-size:32px;line-height:1.05;transition:color .3s ease}
.cp-card:hover .cp-card-title,.cheese-card:hover .cp-card-title{color:var(--cp-accent-text)}
.cp-card-country{font-family:var(--cp-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-muted);white-space:nowrap}
.cp-card-meta{margin-top:-8px;font-family:var(--cp-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cp-text-soft)}

/* Footer */
.cp-footer{padding:72px 0 40px;background:var(--cp-footer);border-top:1px solid var(--cp-line)}
.cp-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:40px}
.cp-footer-brand{display:flex;flex-direction:column;gap:16px}
.cp-footer-logo{display:flex;align-items:center;gap:12px;color:var(--cp-text)}
.cp-footer-logo img{width:28px;height:28px;border-radius:7px;display:block}
.cp-footer-logo span{font-family:var(--cp-serif);font-size:24px;line-height:1}
.cp-footer-tag{font-size:14px;color:var(--cp-text-muted)}
.cp-footer-col{display:flex;flex-direction:column;gap:12px;font-size:14px}
.cp-footer-col a{color:var(--cp-text-soft)}
.cp-footer-col a:hover{color:var(--cp-text)}
.cp-footer-title{font-family:var(--cp-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cp-text-muted)}
.cp-footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:64px;padding-top:28px;border-top:1px solid var(--cp-line);font-family:var(--cp-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cp-text-muted)}
.cp-footer-langs{display:flex;gap:14px}
.cp-footer-langs a{color:var(--cp-text-soft)}
.cp-footer-langs a[aria-current]{color:var(--cp-text)}

/* Reading progress under the navigation (guides, legal pages), driven by
   scroll where supported */
.cp-progress{position:fixed;top:76px;left:0;right:0;z-index:40;display:none;height:2px;background:var(--cp-accent);transform-origin:0 50%;transform:scaleX(0)}
@keyframes cp-progress{to{transform:scaleX(1)}}
@supports (animation-timeline: scroll()){
  .cp-progress{display:block;animation:cp-progress linear both;animation-timeline:scroll(root)}
}

/* Motion. Entrance animations run once; scroll reveals use scroll-driven
   animations where the browser supports them and simply show otherwise. */
@keyframes cp-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes cp-photo-in{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes cp-pop{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes cp-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cp-rise{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
.cp-in{animation:cp-in 1s var(--cp-ease) both}
.cp-photo-in{animation:cp-photo-in 1.6s var(--cp-ease) both}
.cp-pop{animation:cp-pop .9s var(--cp-ease) .75s both}
.cp-bar{transform-origin:0 50%;animation:cp-bar 1.1s var(--cp-ease) both}
.cp-bar-scroll{transform-origin:0 50%}
@supports (animation-timeline: view()){
  .cp-reveal{animation:cp-rise linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
  .cp-bar-scroll{animation:cp-bar linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
}
@property --cp-n{syntax:'<integer>';inherits:false;initial-value:0}
@keyframes cp-count{from{--cp-n:0}}
.cp-count{--cp-n:var(--cp-to);counter-reset:cp-n var(--cp-n);font-variant-numeric:tabular-nums;animation:cp-count 1.9s var(--cp-ease) .35s both}
.cp-count::after{content:counter(cp-n)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media (max-width:960px){
  .cp-split{grid-template-columns:1fr;gap:48px}
}
@media (max-width:520px){
  .cp-stores .cp-store{flex:1 1 100%}
  .cp-progress{top:64px}
}