/* WhichWine — Marketing one-pager: BASE (always applied)
   Shared tokens, reset, fonts. One shared #canvas DOM, laid out by two media-scoped sheets:
     reflow.css   media="(max-width:1099.98px)"  — fluid mobile + tablet reflow
     desktop.css  media="(min-width:1100px)"     — pixel-exact 1366px PSD canvas (scaled by JS)
   Fonts self-hosted (no third-party CDN) for GDPR compliance + performance. */

/* ---- FONTS (self-hosted, latin subset) ---- */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/ubuntu-300.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/ubuntu-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/ubuntu-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/ubuntu-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/open-sans-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/open-sans-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---- TOKENS ---- */
:root{
  --bar:#0b0102;
  --ink:#6d5b48;   /* body text: darkened to clear WCAG AA (~5.2:1) on #ededed; matches the content pages */
  --head:#59493f;
  --body:#6d5b48;
  --tan:#c2aa93;
  --tan-deep:#a98e72;
  --bg:#ededed;
  --card:#ffffff;
  --line:#e3ddd6;
  --sans:'Ubuntu', system-ui, sans-serif;
  --serif:'Open Sans', system-ui, sans-serif;
  --gut:22px;            /* horizontal page gutter (reflow) */
  --maxw:1180px;         /* content max width (reflow) */
}

/* ---- RESET / BASE ---- */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto;}   /* let width/height attrs drive aspect-ratio, never a fixed pixel height */
picture{display:contents;}            /* wrapper generates no box: img keeps original layout */
main{display:contents;}               /* landmark only; transparent to both layouts */
strong{color:var(--head);font-weight:700;}
a{color:inherit;}

/* ---- ACCESSIBILITY ---- */
:focus-visible{outline:2px solid var(--tan-deep);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}