/* Rimini Pastry Shoppe mockup — AF Designs */
:root{
  /* color: brand red and white come from their RB wreath logo */
  --red:#8b2323;          /* brand red. White text on it: 8.6:1 */
  --red-deep:#5c1416;     /* darker surface for the cookie and bread band */
  --red-ink:#7a1c1e;      /* red text on white: 9.4:1 */
  --white:#fff;
  --box:#fbf8f4;          /* bakery-box white, page background */
  --doily:#f1e9de;        /* paper lace and dividers */
  --wood:#c9b49a;         /* pastry case trim */
  --ink:#2a1d1a;          /* body text: 15.9:1 on --box */
  --ink-soft:#5f4b45;     /* secondary text: 7.6:1 on --box */

  /* type */
  --display:'Marcellus',Georgia,serif;
  --sc:'Marcellus SC','Marcellus',Georgia,serif;
  --body:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --t-hero:clamp(2.2rem,1.4rem + 3vw,4rem);
  --t-h2:clamp(2rem,1.5rem + 1.8vw,3rem);
  --t-h3:clamp(1.35rem,1.2rem + .5vw,1.6rem);
  --t-lede:clamp(1.05rem,1rem + .25vw,1.2rem);

  /* space */
  --gutter:clamp(16px,4vw,40px);
  --sect:clamp(72px,9vw,128px);
  --wrap:1180px;
  --radius:999px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font:400 1.0625rem/1.6 var(--body);color:var(--ink);background:var(--box);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.18em}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid #f2c94c;outline-offset:3px;border-radius:4px}
h2{font:400 var(--t-h2)/1.08 var(--display);color:var(--red-ink);text-wrap:balance}
h3{font:400 var(--t-h3)/1.2 var(--display);color:var(--red-ink)}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.lede{font-size:var(--t-lede);color:var(--ink-soft);max-width:60ch}
.ph{background:#fff4c2;color:#5a4300;padding:.05em .4em;border-radius:3px;font-size:.88em}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--red-ink);padding:8px 14px;z-index:99;border-radius:6px}
.skip:focus{left:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8em 1.5em;border-radius:var(--radius);font:600 1rem/1.1 var(--body);text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s,transform .12s var(--ease);user-select:none}
.btn:active{transform:scale(.97)}
.btn-white{background:var(--white);color:var(--red-ink);box-shadow:0 6px 18px rgba(40,0,0,.25)}
.btn-white:hover{background:#f6e9e4}
.btn-ghost{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8)}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-line{color:var(--red-ink);box-shadow:inset 0 0 0 1.5px var(--red)}
.btn-line:hover{background:#f6e9e4}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ============ hero ============ */
.hero{position:relative;background:var(--red);color:#fff;min-height:var(--vh,100svh);display:flex;flex-direction:column;overflow:hidden;
  background-image:radial-gradient(ellipse 60% 55% at 50% 48%,#9a2a2a 0%,transparent 70%)}
.nav{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:400 1.4rem var(--display)}
.brand img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.nav ul{display:flex;gap:clamp(16px,2.4vw,32px);list-style:none;padding:0;font-weight:500;font-size:.98rem}
.nav ul a{text-decoration:none;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .25s var(--ease)}
.nav ul a:hover{background-size:100% 1.5px}
.nav-tel{font-weight:600;text-decoration:none;padding:10px 16px;border-radius:var(--radius);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
.nav-tel:hover{background:rgba(255,255,255,.12)}

.stage{position:relative;flex:1;min-height:520px;display:grid;place-items:center}
.orbit{position:absolute;inset:0;z-index:1}
.plate{position:absolute;left:0;top:0;width:var(--plate);height:var(--plate);will-change:transform,opacity;opacity:0;transition:opacity .35s linear}
.plate.on{opacity:1}
.plate::before{content:"";position:absolute;inset:0;background:url(img/doily.svg) center/100% no-repeat;filter:drop-shadow(0 14px 22px rgba(40,0,0,.35))}
.plate img{position:absolute;inset:16%;width:68%;height:68%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(60,20,10,.25))}
.wreath{position:relative;width:min(470px,56vh,86vw);aspect-ratio:1;display:grid;place-items:center;text-align:center;z-index:2}
.wreath svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wreath .stem{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s .1s var(--ease) forwards}
.wreath .leaf{fill:#fff;transform-box:fill-box;opacity:0;animation:leaf .45s var(--ease) forwards}
.wreath .berry{fill:#fff;opacity:0;animation:leaf .4s var(--ease) forwards}
.wreath .bow{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;animation:leaf .5s 1.35s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes leaf{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.wreath-name{position:relative;padding:0 21% 13%;opacity:0;animation:rise .8s .5s var(--ease) forwards}
.famous{display:block;font:400 clamp(.95rem,.9rem + .3vw,1.15rem) var(--sc);letter-spacing:.14em;opacity:.9}
.wreath h1{font:400 var(--t-hero)/.98 var(--display);margin:.12em 0 .22em;text-wrap:balance}
.since{display:block;font-size:clamp(.9rem,.85rem + .2vw,1rem);line-height:1.35;opacity:.92}
.since .m{display:none}
@media (max-width:640px){.since .m{display:inline}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.hero-foot{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px var(--gutter) clamp(28px,5vh,48px);text-align:center;opacity:0;animation:rise .8s 1.1s var(--ease) forwards}
.hero-foot .actions{justify-content:center}
.where{font-size:.95rem;opacity:.95}
.where a{color:#fff}
.where span{margin:0 .7em;opacity:.6}

/* ============ custom cakes ============ */
.cakes{padding:var(--sect) 0 0}
.cakes-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:end;margin-bottom:40px}
.cakes-head .lede{margin:0}
.builder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.builder-steps{display:grid;gap:26px;padding-top:6px}
fieldset{border:0;padding:0;min-width:0}
legend{font:400 1.3rem var(--display);color:var(--red-ink);margin-bottom:10px;padding:0}
legend .hint{font:400 .85rem var(--body);color:var(--ink-soft);margin-left:.4em}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:.55em 1.05em;border-radius:var(--radius);border:0;background:#fff;box-shadow:inset 0 0 0 1.5px #dccfbf;cursor:pointer;font-weight:500;font-size:.98rem;transition:background-color .18s,box-shadow .18s,color .18s,transform .12s var(--ease)}
.chips button:hover{box-shadow:inset 0 0 0 1.5px var(--red)}
.chips button:active{transform:scale(.96)}
.chips button[aria-pressed="true"]{background:var(--red);color:#fff;box-shadow:none}
.fields{display:grid;grid-template-columns:3fr 2fr;gap:14px}
.fields label{display:grid;gap:6px;font:400 1.1rem var(--display);color:var(--red-ink)}
.fields input{font:400 1rem var(--body);color:var(--ink);min-height:48px;padding:0 14px;border-radius:10px;border:0;background:#fff;box-shadow:inset 0 0 0 1.5px #dccfbf;font-size:16px}
.fields input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--red)}

.ticket{position:sticky;top:24px;background:#fff;border-radius:18px;padding:28px 28px 24px;box-shadow:0 1px 0 #e9dfd2,0 22px 50px rgba(92,20,22,.12);text-align:center;
  background-image:radial-gradient(circle at 50% 30%,#fbf3ea 0 34%,transparent 34.2%)}
.ticket-cake{width:min(300px,80%);margin:-6px auto 12px;transition:opacity .25s,transform .35s var(--ease)}
.ticket-cake.swap{opacity:0;transform:scale(.94)}
.ticket-label{font:400 .95rem var(--sc);letter-spacing:.1em;color:var(--ink-soft)}
.ticket-text{font:400 1.45rem/1.25 var(--display);color:var(--red-ink);margin:.2em 0 .35em;text-wrap:balance}
.ticket-meta{color:var(--ink-soft);font-size:.95rem}
.ticket-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 14px}
.ticket-note{font-size:.85rem;color:var(--ink-soft)}

.cake-shelf{margin-top:var(--sect);background:var(--doily);padding:44px 0 0;position:relative}
.shelf-title{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:8px}
.shelf-title p{color:var(--ink-soft)}
.shelf-track{display:flex;gap:clamp(8px,2vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:18px var(--gutter) 0;scrollbar-width:none;overscroll-behavior-x:contain;
  border-bottom:14px solid var(--wood);box-shadow:0 10px 0 #b29c80}
.shelf-track::-webkit-scrollbar{display:none}
.shelf-track img{flex:0 0 auto;width:clamp(170px,22vw,280px);height:clamp(150px,19vw,240px);object-fit:contain;object-position:50% 100%;scroll-snap-align:center;filter:drop-shadow(0 10px 10px rgba(60,30,10,.18))}
.also{padding:var(--sect) 0}
.also h3{margin-bottom:18px}
.also-list{list-style:none;padding:0;columns:2 300px;column-gap:56px}
.also-list li{break-inside:avoid;padding:10px 0;border-bottom:1px solid #e6dccf;color:var(--ink-soft)}
.also-list b{color:var(--ink);font-weight:600}

/* ============ pastry case ============ */
.pastries{background:#efe6da;padding:var(--sect) 0}
.pastries .wrap{margin-bottom:40px}
.case{position:relative;width:min(1240px,100% - 2*var(--gutter));margin:0 auto;border-radius:18px 18px 6px 6px;padding:22px clamp(10px,2.4vw,30px) 8px;
  background:linear-gradient(180deg,#fdfbf8,#f5efe7);box-shadow:inset 0 0 0 12px var(--wood),inset 0 0 0 13px #b29c80,0 30px 60px rgba(92,40,20,.16);overflow:hidden}
.shelf{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px clamp(6px,1.4vw,18px);align-items:end;padding:14px 10px 0;margin:0 0 16px;
  border-bottom:9px solid #e3d6c4;box-shadow:0 7px 0 #cdbca5}
.item{display:flex;flex-direction:column;align-items:center;text-align:center}
.item img{width:100%;height:clamp(84px,10vw,140px);object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 8px 6px rgba(60,30,10,.2))}
.tag{display:inline-block;margin:10px 0 12px;padding:4px 10px;background:#fff;border-radius:3px;box-shadow:0 1px 0 #d6c6b0,0 0 0 1px #e1d3c0;font:500 .82rem/1.25 var(--body);color:var(--red-ink);rotate:-1.5deg}
.item:nth-child(even) .tag{rotate:1.2deg}
.glass{position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.6) 49%,transparent 56%);transform:translateX(-110%);pointer-events:none;z-index:2}
.case.lit .glass{animation:glint 1.8s .2s ease-in-out forwards}
@keyframes glint{to{transform:translateX(110%)}}

/* ============ cookies and bread ============ */
.cb{background:var(--red-deep);color:#fff;padding:var(--sect) 0}
.cb-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,88px)}
.cb h2{color:#fff;margin:28px 0 14px}
.cb-photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px}
.cb-col:nth-child(2){padding-top:clamp(0px,8vw,110px)}
.cb-list{list-style:none;padding:0}
.cb-list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 16px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.cb-list b{font-weight:600}
.cb-list span{color:#f0d9d5}
.cb-note{margin-top:16px;color:#f0d9d5;font-size:.95rem}

/* ============ story ============ */
.story{padding:0 0 var(--sect)}
.zeppole{height:clamp(220px,34vw,440px);background:url(img/zeppole.jpg) center 45%/cover}
.story-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,88px);padding-top:var(--sect);align-items:start}
.story-text h2{margin-bottom:22px}
.story-text p{max-width:62ch;margin-bottom:1em}
.motto{margin-top:12px;padding:30px 0 0;border-top:2px solid var(--red)}
.motto blockquote{font:400 clamp(1.6rem,1.3rem + 1.1vw,2.2rem)/1.22 var(--display);color:var(--red-ink);text-wrap:balance}
.motto figcaption{margin-top:14px;font:400 1rem var(--sc);letter-spacing:.1em;color:var(--ink-soft)}
.team{margin-top:clamp(40px,6vw,72px)}
.team img{width:100%;aspect-ratio:1400/650;object-fit:cover;border-radius:6px}
.team figcaption{margin-top:10px;font-size:.92rem;color:var(--ink-soft)}

/* ============ visit ============ */
.visit{background:#fff;padding:var(--sect) 0;border-top:1px solid #eee3d6}
.visit-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:stretch}
.visit h2{margin-bottom:26px}
.visit dl{display:grid;grid-template-columns:auto 1fr;gap:14px 28px;margin-bottom:24px}
.visit dt{font:400 1.05rem var(--display);color:var(--red-ink);padding-top:1px}
.visit dd a{font-weight:500}
.small{font-size:.88rem;color:var(--ink-soft)}
.rating{margin-bottom:24px;color:var(--ink-soft)}
.stars{color:#b5651d;letter-spacing:.08em;margin-right:6px}
.map{min-height:380px;border-radius:12px;overflow:hidden;background:var(--doily)}
.map iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.8)}

/* ============ footer ============ */
.foot{background:var(--red);color:#fff;padding:40px 0 calc(40px + env(safe-area-inset-bottom))}
.foot-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.foot-sign{width:150px;border-radius:6px}
.foot p{margin-bottom:6px}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 22px;list-style:none;padding:0;margin-bottom:6px}
.credit{font-size:.82rem;opacity:.75;margin-top:10px}

/* ============ phone and tablet ============ */
@media (max-width:980px){
  .nav ul{display:none}
  .cakes-head,.builder,.story-grid,.visit-grid{grid-template-columns:1fr}
  .ticket{position:relative;top:0}
  .shelf{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .brand span{display:none}
  .nav-tel{padding:9px 14px;font-size:.95rem}
  .stage{min-height:440px}
  .hero-foot .actions{flex-direction:column;width:100%;max-width:340px}
  .where span{display:block;height:0;overflow:hidden}
  .fields{grid-template-columns:1fr}
  .cb-grid{grid-template-columns:1fr}
  .cb-col:nth-child(2){padding-top:0}
  .ticket{padding:22px 18px}
  .ticket-actions .btn{flex:1 1 100%}
  .map,.map iframe{min-height:300px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}