/* =========================================================================
   IDENTIDAD COCKTAIL BAR — Website tokens & base
   Palette sampled from brand PDF (per 2026 brief). Real brand web fonts.
   ========================================================================= */

/* ---------- Brand web fonts (uploaded by client) ---------- */
/* American Typewriter — display headlines, cocktail names, metadata, flavor tags */
@font-face{font-family:'American Typewriter';font-weight:300;font-style:normal;font-display:swap;
  src:url('uploads/AmericanTypewriterStd-Light.woff2') format('woff2'),
      url('uploads/AmericanTypewriterStd-Light.woff') format('woff'),
      url('uploads/AmericanTypewriterStd-Light.ttf') format('truetype');}
@font-face{font-family:'American Typewriter';font-weight:500;font-style:normal;font-display:swap;
  src:url('uploads/AmericanTypewriterStd-Med.woff2') format('woff2'),
      url('uploads/AmericanTypewriterStd-Med.woff') format('woff'),
      url('uploads/AmericanTypewriterStd-Med.ttf') format('truetype');}
@font-face{font-family:'American Typewriter';font-weight:700;font-style:normal;font-display:swap;
  src:url('uploads/AmericanTypewriterStd-Bold.woff2') format('woff2'),
      url('uploads/AmericanTypewriterStd-Bold.woff') format('woff'),
      url('uploads/AmericanTypewriterStd-Bold.ttf') format('truetype');}

/* All Round Gothic — navigation, buttons, eyebrows / section labels */
@font-face{font-family:'All Round Gothic';font-weight:500;font-style:normal;font-display:swap;
  src:url('uploads/All Round Gothic W03 Medium.woff2') format('woff2'),
      url('uploads/All Round Gothic W03 Medium.woff') format('woff'),
      url('uploads/All Round Gothic W03 Medium.ttf') format('truetype');}
@font-face{font-family:'All Round Gothic';font-weight:400;font-style:normal;font-display:swap;
  src:url('fonts/Fontspring-DEMO-allroundgothic-book.otf') format('opentype');}
@font-face{font-family:'All Round Gothic';font-weight:700;font-style:normal;font-display:swap;
  src:url('fonts/Fontspring-DEMO-allroundgothic-bold.otf') format('opentype');}

/* Avenir — body copy, cocktail descriptions, paragraphs */
@font-face{font-family:'Avenir Book';font-weight:300;font-style:normal;font-display:swap;
  src:url('uploads/Avenir-Light.woff2') format('woff2'),
      url('uploads/Avenir-Light.woff') format('woff'),
      url('uploads/Avenir-Light.ttf') format('truetype');}

:root{
  /* ---------- Palette (brief hex) ---------- */
  --carbon:        #201C1B;   /* warm near-black — cover / dark sections   */
  --bosque:        #1F2516;   /* deep olive — primary menu field           */
  --terrazo:       #F9F8F8;   /* bone-white terrazzo base                  */
  --crema:         #E6E3DB;   /* warm off-white text on dark               */
  --lima:          #D3C4A0;   /* THE accent — warm beige (per client; was lime) */
  --teal:          #3F9BA4;   /* secondary detail / glassware              */
  --oro:           #B08D5A;   /* old gold — line glass icons, rules        */

  /* tonal helpers */
  --bosque-700:    #18200F;
  --bosque-600:    #28311C;
  --carbon-800:    #171413;
  --crema-dim:     color-mix(in oklab, var(--crema) 62%, transparent);
  --crema-faint:   color-mix(in oklab, var(--crema) 38%, transparent);

  /* hairlines */
  --hair-dark:     color-mix(in oklab, var(--crema) 16%, transparent);
  --hair-oro:      color-mix(in oklab, var(--oro)  42%, transparent);
  --hair-light:    color-mix(in oklab, var(--carbon) 14%, transparent);

  /* ---------- Type families ---------- */
  --font-display: 'American Typewriter','Courier New',serif;
  --font-ui:      'All Round Gothic','Futura',system-ui,sans-serif;
  --font-body:    'Avenir Book','Avenir','Avenir Next',system-ui,sans-serif;

  /* ---------- Type scale ---------- */
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:1rem; --t-md:1.0625rem;
  --t-lg:1.25rem; --t-xl:1.625rem; --t-2xl:2.125rem; --t-3xl:2.875rem;
  --t-4xl:3.75rem; --t-5xl:5rem; --t-6xl:7rem;

  /* tracking */
  --track-display:.06em;
  --track-label:.34em;
  --track-ui:.14em;

  /* spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem; --s11:11rem;

  --radius:3px;
  --maxw:1180px;
  --gutter:clamp(1.25rem,5vw,4.5rem);

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --dur:.42s;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;overflow-x:clip;
  background:var(--bosque);
  color:var(--crema);
  font-family:var(--font-body);
  font-size:var(--t-base);
  line-height:1.62;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{margin:0;font-weight:500;}

/* ---------- Type roles ---------- */
.eyebrow{
  font-family:var(--font-ui);font-weight:500;
  font-size:var(--t-xs);letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--lima);
}
.display{
  font-family:var(--font-display);font-weight:500;
  line-height:.98;letter-spacing:var(--track-display);
  text-transform:uppercase;
}
.serif{font-family:var(--font-display);}
.ui{font-family:var(--font-ui);}
.metadata{
  font-family:var(--font-display);font-weight:300;
  letter-spacing:.02em;
}

a{color:inherit;text-decoration:none;}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--font-ui);font-weight:500;
  font-size:var(--t-sm);letter-spacing:var(--track-ui);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.6em;
  padding:1.05em 1.7em;border-radius:var(--radius);
  border:1px solid currentColor;background:transparent;color:var(--crema);
  cursor:pointer;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),transform .18s var(--ease);
  text-align:center;line-height:1;
}
.btn:hover{background:var(--crema);color:var(--carbon);}
.btn:active{transform:scale(.985);}
.btn--lima{border-color:var(--lima);color:var(--lima);}
.btn--lima:hover{background:var(--lima);color:var(--bosque-700);}
.btn--solid{background:var(--lima);border-color:var(--lima);color:var(--bosque-700);}
.btn--solid:hover{background:var(--crema);border-color:var(--crema);color:var(--carbon);}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--lima);outline-offset:3px;}

/* ---------- Hairline + ornament ---------- */
.hr{height:1px;background:var(--hair-dark);border:0;margin:0;}

.container{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}

/* =========================================================================
   Fingerprint logo
   ========================================================================= */
.fp-logo{display:block;width:100%;height:100%;overflow:visible;}
.fp-logo .fp-text,.fp-logo .fp-ridges{fill:currentColor;}
.fp-logo .fp-ridges>*,.fp-logo .fp-text>*{fill:currentColor;}
/* optional accent variant: lime crests */
.fp-logo--lime .fp-ridges>*{fill:var(--lima);}

/* Reveal: visible is the resting/base state. The staggered entrance animates
   FROM hidden via CSS only (no JS-added class), so the mark always shows in
   print / PDF / reduced-motion / any context where the animation is skipped. */
.fp-logo .fp-ridges>*{transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:no-preference){
  .anim-ready [data-logo-reveal] .fp-ridges>*{
    animation:fpRidge .72s var(--ease-soft) both;
    animation-delay:calc(var(--d,0) * .9s + .15s);
  }
  .anim-ready [data-logo-reveal] .fp-text{
    animation:fpFade 1s var(--ease-soft) .05s both;
  }
}
@keyframes fpRidge{from{opacity:0;transform:scale(.66);}to{opacity:1;transform:none;}}
@keyframes fpFade{from{opacity:0;}to{opacity:1;}}

/* =========================================================================
   Shared decorative: faint giant fingerprint watermark
   ========================================================================= */
.fp-watermark{position:absolute;pointer-events:none;color:var(--crema);opacity:.05;z-index:0;}

/* =========================================================================
   FPO image placeholders (for-position-only; no upload)
   ========================================================================= */
image-slot{display:block;}
.ico-fpo{flex:none;display:flex;align-items:center;justify-content:center;
  background:#202715;position:relative;overflow:hidden;border:1px solid var(--hair-oro);border-radius:2px;}
.ico-fpo::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(176,141,90,.10) 7px 8px);}
.ico-fpo span{position:relative;font-family:var(--font-display);font-weight:500;font-size:.5rem;
  letter-spacing:.12em;color:var(--oro);opacity:.75;}