/* Gazzeria demo. Colours from their logo and shop sign: teal ring, pink tagline, charcoal lettering, yellow tables. */
:root{
  --ground:#eef7f7;
  --white:#ffffff;
  --ink:#2f3237;
  --ink-2:#555a61;
  --teal:#087f8b;
  --pink:#d4147c;
  --yellow:#ffd91a;
  --gut:clamp(20px,4vw,64px);
  --sec:clamp(56px,7vw,120px);
  --gap:clamp(14px,1.6vw,28px);
  --t-text:clamp(1.0625rem,.98rem + .35vw,1.25rem);
  --t-small:clamp(1rem,.94rem + .28vw,1.125rem);
  --t-lead:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  --t-h2:clamp(2.1rem,1.3rem + 3.6vw,4.5rem);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Jost","Century Gothic","Avenir Next",Avenir,sans-serif;font-size:var(--t-text);line-height:1.5;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.wrap{width:100%;max-width:1680px;margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 16px;z-index:50}
.skip:focus{left:0}

/* top bar */
.top{background:var(--white)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:48px}
.brand img{width:56px;height:56px}
@media (max-width:479px){.brand span{display:none}}
.brand span{font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);font-weight:400;letter-spacing:.01em}
.top nav{display:flex;align-items:center;gap:clamp(4px,1.6vw,28px)}
.top nav a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 10px;white-space:nowrap;text-decoration:none;font-size:var(--t-small);font-weight:500}
.top nav a:not(.btn){text-decoration:underline;text-decoration-color:transparent;text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .2s ease}
.top nav a[aria-current="page"]{text-decoration-color:var(--pink)}
@media (hover:hover) and (pointer:fine){.top nav a:not(.btn):hover{text-decoration-color:var(--pink)}}
.only-wide{display:none!important}
@media (min-width:760px){.only-wide{display:inline-flex!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;background:var(--pink);color:#fff;font:inherit;font-size:var(--t-text);font-weight:600;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform .14s var(--ease-out),background-color .2s ease}
.btn:active{transform:scale(.97)}
.btn.ink{background:var(--ink)}
.btn.plain{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:#b30f68}
  .btn.ink:hover{background:#000}
  .btn.plain:hover{background:var(--ink);color:#fff}
}
.top nav .btn{min-height:48px;padding:0 18px;color:#fff}
.row{display:flex;flex-wrap:wrap;gap:12px}

h2{font-size:var(--t-h2);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.lead{font-size:var(--t-lead);line-height:1.35}

/* photos: every box near its picture's own shape */
.ph{position:relative;overflow:hidden;background:#dfeaea}
.ph img{width:100%;height:100%;object-fit:cover}

/* reveal: words are never hidden without script; settles by itself after 2.5s */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out)}
.js .rv.in,.js.settled .rv{opacity:1;transform:none}
[data-depth]{will-change:transform}

/* footer */
footer{background:var(--ink);color:#fff;padding-block:clamp(40px,5vw,80px) clamp(28px,3vw,44px)}
footer .name{container-type:inline-size}
footer .name span{display:block;font-size:clamp(4rem,21cqi,19rem);font-weight:300;line-height:.9;letter-spacing:-.03em}
footer .tag{color:var(--yellow);font-weight:500;font-size:var(--t-lead);margin-top:10px}
footer .base{display:flex;flex-wrap:wrap;gap:6px 32px;margin-top:clamp(24px,3vw,44px);font-size:var(--t-small)}
footer .base a{display:inline-flex;align-items:center;min-height:48px;min-width:48px}
footer .base span{display:inline-flex;align-items:center;min-height:48px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *{animation:none!important}
}