/* Colori, caratteri, logo e pulsanti comuni. Stessi valori della carta dei vini e del menu: è un'unica famiglia. */
:root{
  --paper:#0E0F0F; --bar:rgba(14,15,15,.95); --ink:#F2F2F2; --muted:#A8A8A8; --line:#2A2A2A; --field:#171818; --soft:#151616;
  --accent:#B3302A; --accent-text:#EF6F64; --on-accent:#FFFFFF; --tint:rgba(239,111,100,.12);
  --red:#C83E31; --logo-ink:#F2F2F2; --r:2px;
  /* curve delle animazioni: ease-out deciso per entrate e pressioni */
  --ease-out:cubic-bezier(.23,1,.32,1); --press:transform .16s cubic-bezier(.23,1,.32,1);
  --sans:"Manrope","Manrope riserva","Segoe UI",system-ui,-apple-system,sans-serif;
  --serif:"Playfair Display","Playfair riserva",Georgia,"Times New Roman",serif;
  --jp:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP","Source Han Serif",serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --paper:#FFFFFF; --bar:rgba(255,255,255,.95); --ink:#111111; --muted:#5F5F5F; --line:#E6E6E6; --field:#FFFFFF; --soft:#F6F5F3;
  --accent:#A52921; --accent-text:#A52921; --tint:rgba(165,41,33,.08); --logo-ink:#0E0F0F;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--paper);touch-action:manipulation}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;font-variant-numeric:lining-nums}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{max-width:660px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}

/* Logo Oxidiana: disco rosso e scritta, come nella carta dei vini */
.logo{position:relative;display:block;width:124px;aspect-ratio:796/482}
.logo i{position:absolute;inset:0;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.logo .disc{background:var(--red);--m:url("../img/logo-disco.webp")}
.logo .ink{background:var(--logo-ink);--m:url("../img/logo-inchiostro.webp")}

.themebtn{width:44px;height:44px;border:0;border-radius:var(--r);background:transparent;color:var(--accent-text);cursor:pointer;display:grid;place-items:center}
.themebtn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.themebtn .sun{display:none}
.themebtn.is-dark .sun{display:block}
.themebtn.is-dark .moon{display:none}

.btn{min-height:48px;padding:0 22px;border-radius:var(--r);border:1px solid var(--accent);background:transparent;color:var(--accent-text);cursor:pointer;font-weight:500;font-size:14px;letter-spacing:.02em;white-space:nowrap}
.btn.primary{background:var(--accent);color:var(--on-accent)}
/* pressione: tutti i pulsanti si stringono appena sotto il dito */
.btn,.chip,.x,.themebtn,.tosearch,nav.tabs a{transition:var(--press)}
.btn:active,.chip:active,.x:active,.themebtn:active,.tosearch:active,nav.tabs a:active{transform:scale(.97)}
.chip{flex:0 0 auto;min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--field);cursor:pointer;font-size:13px;white-space:nowrap}
.chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:var(--on-accent);font-weight:500}

/* Timbro giapponese (hanko) di ogni sezione, lo stesso della vetrina nella carta dei vini */
.hanko{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:3px;background:var(--accent);color:#fff;font-family:var(--jp);font-size:21px;line-height:1;
  outline:1px solid rgba(255,255,255,.4);outline-offset:-4px;user-select:none}

@media (min-width:1100px){
  .wrap{max-width:1040px;padding:0 48px}
  .logo{width:150px}
}
/* salto ai drink: invisibile finché non lo si raggiunge con la tastiera */
.skip{position:fixed;left:12px;top:-80px;z-index:100;padding:12px 18px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
#carta:focus{outline:none}