/* Tian homepage, from design D "Mezcla" (Revista x Modernista).
   Tokens: blue #1E5AA8, navy #10233F, ivory #F5EFE4, gold #D4A15F, terracotta #C2643F. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F5EFE4;overflow-x:hidden}
img,video{max-width:100%}
a{color:#1E5AA8;text-decoration:none}
a:hover{color:#123F7A}
h1,h2,h3,p,blockquote,ul{margin:0}
ul{padding:0;list-style:none}

.mx{background:#F5EFE4;color:#1B2A3E;font-family:Montserrat,sans-serif;font-size:16px;line-height:1.7;overflow:hidden;font-variant-numeric:lining-nums}
.wrap{max-width:1360px;margin:0 auto;padding:0 28px}
.terracotta{color:#C2643F}
.outline{color:transparent;-webkit-text-stroke:1.5px #1E5AA8}
.outline-gold{color:transparent;-webkit-text-stroke:1.5px #D4A15F}

/* Tile patterns */
.mx-tile{background-color:#1E5AA8;background-image:
 radial-gradient(circle at 50% 50%,#D4A15F 0 4px,transparent 5px),
 radial-gradient(circle at 0 0,transparent 0 25px,rgba(167,200,232,.45) 26px 28px,transparent 29px),
 radial-gradient(circle at 100% 0,transparent 0 25px,rgba(167,200,232,.45) 26px 28px,transparent 29px),
 radial-gradient(circle at 0 100%,transparent 0 25px,rgba(167,200,232,.45) 26px 28px,transparent 29px),
 radial-gradient(circle at 100% 100%,transparent 0 25px,rgba(167,200,232,.45) 26px 28px,transparent 29px);
 background-size:64px 64px}
.mx-tile-soft{background-color:#EDE5D6;background-image:
 radial-gradient(circle at 50% 50%,#D4A15F 0 3px,transparent 4px),
 radial-gradient(circle at 0 0,transparent 0 25px,rgba(30,90,168,.13) 26px 28px,transparent 29px),
 radial-gradient(circle at 100% 0,transparent 0 25px,rgba(30,90,168,.13) 26px 28px,transparent 29px),
 radial-gradient(circle at 0 100%,transparent 0 25px,rgba(30,90,168,.13) 26px 28px,transparent 29px),
 radial-gradient(circle at 100% 100%,transparent 0 25px,rgba(30,90,168,.13) 26px 28px,transparent 29px);
 background-size:64px 64px}
.scallop-up{height:36px;background:radial-gradient(circle at 50% 100%,#10233F 0 30px,transparent 31px) 0 0/64px 36px repeat-x}

/* Buttons */
.btn{display:inline-flex;align-items:center;border-radius:999px;font-weight:600;font-size:12px;letter-spacing:.18em;min-height:48px;padding:0 26px;white-space:nowrap}
.btn-blue{background:#1E5AA8;color:#fff}
.btn-blue:hover{color:#fff;background:#123F7A}
.btn-lg{min-height:56px;padding:0 32px}
.btn-ghost{border:1.5px solid #10233F;color:#10233F;padding:0 28px}
.btn-blue.btn-lg{box-shadow:0 14px 30px rgba(30,90,168,.3)}
.btn-gold{background:#D4A15F;color:#10233F;font-size:13px;min-height:60px;padding:0 36px;margin-top:40px}
.btn-gold:hover{color:#10233F;background:#E0B274}

/* Masthead + nav */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;font-size:11px;letter-spacing:.28em;font-weight:600;color:#1E5AA8;flex-wrap:wrap}
.rule{border-top:3px solid #10233F;border-bottom:1px solid #10233F;height:7px}
.nav{display:flex;align-items:center;gap:28px;padding:18px 0}
.navlinks{display:flex;gap:28px;white-space:nowrap;font-size:12px;letter-spacing:.2em;font-weight:500}
.navlinks a{color:#1B2A3E}
.nav-brand{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-bf{height:26px;width:auto}
.alliance{display:flex;flex-direction:column;gap:2px}
.alliance .wm{height:15px;width:auto;display:block}
.alliance .al{font-size:7px;letter-spacing:.44em;font-weight:600;color:#5B87A0;line-height:1.7}
.alliance.light .wm{filter:brightness(0) invert(1)}
.alliance.light .al{color:#A8C8DC;font-size:8px}
.alliance.light .wm{height:18px}

/* Hero */
.hero-wrap{position:relative;padding-top:10px;padding-bottom:90px}
.giant{position:relative;z-index:1;font-family:'Playfair Display',serif;font-weight:600;font-size:400px;line-height:.8;letter-spacing:-.035em;color:#1E5AA8;margin:0 0 0 -14px}
.dotless{position:relative}
.mx-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;position:relative;z-index:2;margin-top:-150px}
.hero-copy{padding-top:200px}
.kicker{font-size:12px;letter-spacing:.5em;font-weight:600;color:#1E5AA8}
.tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:54px;line-height:1.06;color:#10233F;max-width:560px;margin-top:18px}
.short-rule{height:1px;background:#10233F;margin:30px 0 22px;width:120px}
.lede{font-size:15px;color:#3C4A5C;max-width:600px;column-count:2;column-gap:36px}
.dropcap::first-letter{float:left;font-family:'Playfair Display',serif;font-size:92px;line-height:.8;padding:8px 12px 0 0;color:#C2643F}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

.hero-art{position:relative;height:780px}
.disc{border-radius:50%;background:#C2643F}
.hero-art .disc{position:absolute;right:-40px;top:90px;width:340px;height:340px}
.hero-arch{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:470px;max-width:94%;height:740px;border-radius:250px 250px 0 0;padding:22px;box-shadow:0 50px 100px rgba(16,35,63,.4)}
.hero-arch-inner{width:100%;height:100%;border-radius:228px 228px 0 0;background:#F5EFE4;padding:10px}
.hero-clip{width:100%;height:100%;border-radius:218px 218px 0 0;overflow:hidden;position:relative}
.hero-img{position:absolute;left:0;top:-28px;width:100%;height:calc(100% + 56px);object-fit:cover;display:block;scale:1;translate:0 var(--py,0px)}
.seal{position:absolute;left:50%;top:-18px;transform:translateX(-50%);width:100px;height:100px;border-radius:50%;background:#F5EFE4;border:3px solid #D4A15F;display:flex;align-items:center;justify-content:center;box-shadow:0 16px 34px rgba(16,35,63,.3);z-index:2}
.seal img{width:60px;height:auto}
.oil-disc{position:absolute;left:-20px;bottom:70px;width:220px;height:220px;object-fit:cover;border-radius:50%;border:8px solid #F5EFE4;box-shadow:0 24px 50px rgba(16,35,63,.35);z-index:2}
.stamp{position:absolute;right:-6px;bottom:40px;width:160px;height:160px;border-radius:50%;background:#D4A15F;color:#10233F;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(10deg);box-shadow:0 20px 40px rgba(16,35,63,.25);z-index:2}
.stamp span{font-size:10px;letter-spacing:.3em;font-weight:600;line-height:1.7}
.stamp em{font-family:'Playfair Display',serif;font-size:36px;line-height:1;font-style:italic}

/* Ticker */
.ticker{position:relative;padding:24px 0;white-space:nowrap;overflow:hidden;transform:rotate(-1.2deg);margin:0 -40px;box-shadow:0 20px 40px rgba(16,35,63,.25)}
.ticker-veil{position:absolute;inset:0;background:rgba(16,35,63,.55)}
.ticker-row{position:relative;display:flex;gap:40px;align-items:center;font-family:'Playfair Display',serif;font-size:40px;font-style:italic;line-height:1;color:#F5EFE4;padding-left:40px}
.star{color:#D4A15F}

/* Section headers */
.sec-head{display:flex;align-items:baseline;gap:24px;border-bottom:1px solid #10233F;padding-bottom:18px;margin-bottom:64px;flex-wrap:wrap}
.sec-head-ritual{margin-bottom:56px}
.sec-head-dark{border-color:rgba(245,239,228,.4);margin-bottom:0}
.big-num{font-family:'Playfair Display',serif;font-size:120px;line-height:.8}
.sec-head h2{font-family:'Playfair Display',serif;font-weight:500;font-size:64px;line-height:1;color:#10233F}
.sec-head-dark h2{color:#F5EFE4}
.sec-aside{margin-left:auto;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:#5B6B80}

/* 01 Carta */
.section-carta{padding-top:140px;padding-bottom:120px}
.mx-menu{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.menu-arch{border-radius:340px 340px 28px 28px;padding:22px;box-shadow:0 50px 90px rgba(16,35,63,.35)}
.menu-card{background:#10233F;color:#F5EFE4;border-radius:318px 318px 14px 14px;padding:90px 56px 52px;border:1px solid rgba(212,161,95,.55)}
.menu-head{text-align:center;margin-bottom:36px}
.menu-title{font-size:11px;letter-spacing:.4em;color:#D4A15F;margin-top:10px;font-weight:600}
.dishes{display:flex;flex-direction:column;gap:32px}
.dish h3{font-family:'Playfair Display',serif;font-weight:400;font-size:28px;line-height:1.1}
.dish .es{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;line-height:1.7;color:#A7C8E8}
.prices{margin-top:10px}
.prices li{display:flex;gap:10px;align-items:baseline}
.prices i{flex:1;border-bottom:1px dotted rgba(212,161,95,.6)}
.prices b{font-family:'Playfair Display',serif;font-weight:400;font-size:22px;color:#D4A15F}
.dish-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.dish-s h3{font-size:23px}
.dish-s .es{font-size:18px}
.dish-s .prices b{font-size:20px}

.menu-photos{position:relative;min-height:760px}
.mp-main{position:absolute;right:0;top:0;width:78%;height:520px;border-radius:220px 220px 0 0;overflow:hidden;box-shadow:0 40px 80px rgba(16,35,63,.3)}
.mp-main img{width:100%;height:100%;object-fit:cover;display:block}
.mp-polaroid{position:absolute;left:0;bottom:40px;width:52%;height:300px;object-fit:cover;border:10px solid #fff;box-shadow:0 30px 60px rgba(16,35,63,.3);transform:rotate(-4deg)}
.mp-note{position:absolute;right:10px;bottom:0;max-width:290px;background:#F5EFE4;padding:22px 24px;border-top:3px solid #C2643F;box-shadow:0 20px 50px rgba(16,35,63,.25)}
.note-kicker{font-size:10px;letter-spacing:.3em;font-weight:600;color:#C2643F}
.note-text{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;line-height:1.3;color:#10233F;margin-top:6px}

/* 02 Ritual */
.section-ritual{padding:120px 0}
.mx-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.step:nth-child(2){margin-top:80px}
.step:nth-child(3){margin-top:160px}
.arch-card{background:#fff;border-radius:220px 220px 20px 20px;padding:12px;box-shadow:0 30px 60px rgba(16,35,63,.14)}
.arch-clip{border-radius:210px 210px 10px 10px;overflow:hidden}
.arch-clip img,.arch-clip video{width:100%;height:380px;object-fit:cover;display:block}
.step-text{display:flex;gap:16px;align-items:baseline;margin-top:24px}
.step .num{font-family:'Playfair Display',serif;font-size:44px;color:#C2643F;line-height:1}
.step h3{font-family:'Playfair Display',serif;font-style:italic;font-weight:400;font-size:28px;color:#1E5AA8;line-height:1.7}
.step p{color:#3C4A5C;font-size:15px}

/* 03 La casa */
.section-casa{padding-top:140px;padding-bottom:140px}
.mx-casa{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:72px;align-items:center}
.pull{font-family:'Playfair Display',serif;font-weight:500;font-size:54px;line-height:1.12;color:#10233F;margin:28px 0 0}
.pull em{font-style:italic;color:#C2643F}
.byline{margin-top:22px;font-size:12px;letter-spacing:.28em;color:#5B6B80;font-weight:600}
.badge-wrap{position:relative;display:flex;justify-content:center}
.disc-badge{position:absolute;left:10%;top:8%;width:84%;aspect-ratio:1}
.badge{position:relative;width:100%;max-width:460px;aspect-ratio:1;border-radius:50%;padding:24px;box-shadow:0 40px 80px rgba(16,35,63,.3)}
.badge-inner{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px}
.badge-kicker{font-size:10px;letter-spacing:.34em;color:#C2643F;font-weight:600;margin-bottom:18px}
.badge-bf{height:66px;width:auto}
.badge-wm{height:40px;width:auto;margin-top:12px}
.badge-al{font-size:12px;letter-spacing:.5em;font-weight:600;color:#5B87A0;margin-top:6px;padding-left:.5em}
.badge-inner p{font-size:13px;color:#5B6B80;margin:16px 0 0;max-width:250px;line-height:1.7}

/* 04 Visita */
.section-visita{background:#10233F;color:#F5EFE4;padding:100px 0 0}
.visit-row{display:flex;gap:48px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:60px}
.addr{font-family:'Playfair Display',serif;font-size:96px;line-height:1;letter-spacing:-.02em}
.addr span{font-style:italic;color:#D4A15F}
.facts{display:flex;gap:56px;margin-top:44px;flex-wrap:wrap;font-size:15px;color:#C7CFDB}
.fact-label{font-size:11px;letter-spacing:.28em;color:#A7C8E8;font-weight:600}
.visit-arch{width:340px;max-width:100%;height:440px;border-radius:170px 170px 0 0;padding:16px}
.visit-clip{height:100%;border-radius:154px 154px 0 0;border:6px solid #10233F;background:#10233F}
.visit-clip img,.visit-clip video{height:100%}
.legal{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:110px;padding:36px 0;border-top:1px solid rgba(245,239,228,.2)}
.legal-brand{display:flex;align-items:center;gap:22px}
.tian-sm{display:flex;flex-direction:column;align-items:center;line-height:1}
.tian-word{font-family:'Playfair Display',serif;font-weight:600;font-size:40px;position:relative}
.tian-sub{font-size:8px;letter-spacing:.36em;margin-top:5px;padding-left:.36em}
.by{font-family:'Cormorant Garamond',serif;font-style:italic;color:#A7C8E8}
.foot-bf{height:30px;width:auto}
.copy{font-size:12px;color:#7F8DA3}

/* Flames (inline SVG, animated; see motion rules below) */
.flame{position:absolute;display:block;pointer-events:none}
.flame-body{display:block;width:100%;height:100%;transform-origin:50% 100%}
.flame-svg{display:block;width:100%;height:100%;overflow:visible}
.flame-hero{left:50%;top:.2em;width:.17em;height:.34em;transform:translateX(-50%)}
/* Candle light from the dot of the "i": a soft warm halo that spills up over the header.
   Sized in em so it scales with the masthead; sits on .dotless (no transform) so z-index:-1
   lands behind the letters inside .giant's stacking context, and never catches clicks. */
.giant .dotless::before{content:"";position:absolute;left:50%;top:.37em;width:3.6em;height:3.6em;transform:translate(-50%,-50%);
  border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(244,190,105,.30),rgba(240,184,96,.13) 40%,rgba(236,176,90,.04) 68%,rgba(236,176,90,0))}
.flame-foot{left:50%;top:-1px;width:8px;height:16px;transform:translateX(-50%)}
.flame-menu{position:relative;display:inline-block;width:19px;height:38px}

/* Scroll reveals: only hidden when JS is running, so content shows without JS */
.js .reveal{opacity:0;translate:0 36px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}
.js .arch-img{scale:1.06;transition:scale 1.6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in .arch-img,.js .arch-img.in{scale:1}
.js .hero-img{scale:1.06;transition:scale 1.8s cubic-bezier(.2,.7,.2,1)}
.js .hero-img.in{scale:1}
.js .oil-disc,.js .stamp,.js .seal{opacity:0;transition:opacity 1s .5s ease}
.js .hero-art.in .oil-disc,.js .hero-art.in .stamp,.js .hero-art.in .seal{opacity:1}
/* the staggered columns keep their offsets through the reveal because margin, not translate, positions them */

@media (prefers-reduced-motion:no-preference){
  .flame-body{animation:flicker 3.1s ease-in-out infinite,glow 4.7s ease-in-out infinite}
  .flame-core{animation:core 2.3s ease-in-out infinite;transform-origin:50% 100%;transform-box:fill-box}
  .flame-svg{animation:shimmer 6.3s ease-in-out infinite}
  .flame-hero .flame-body{animation-duration:3.1s,4.7s}
  .giant .dotless::before{animation:halo 4.3s ease-in-out infinite}
  .flame-menu .flame-body{animation-duration:3.7s,5.3s}
  .flame-foot .flame-body{animation:flicker-soft 3.9s ease-in-out infinite,glow-soft 5.9s ease-in-out infinite}
}
@keyframes halo{0%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}35%{opacity:.82;transform:translate(-50%,-50%) scale(.96)}70%{opacity:.95;transform:translate(-50%,-50%) scale(1.03)}}
@keyframes flicker{
  0%{transform:scale(1,1) skewX(0)}
  11%{transform:scale(.97,1.05) skewX(-2.2deg)}
  23%{transform:scale(1.02,.97) skewX(1.6deg)}
  38%{transform:scale(.98,1.06) skewX(2.6deg)}
  49%{transform:scale(1.01,1.01) skewX(-.8deg)}
  63%{transform:scale(.96,1.04) skewX(-2.8deg)}
  77%{transform:scale(1.02,.98) skewX(1.2deg)}
  89%{transform:scale(.99,1.03) skewX(-1.4deg)}
  100%{transform:scale(1,1) skewX(0)}
}
@keyframes flicker-soft{
  0%,100%{transform:scale(1) skewX(0)}
  30%{transform:scale(.99,1.03) skewX(-1deg)}
  60%{transform:scale(1.01,.99) skewX(1deg)}
}
@keyframes glow{
  0%,100%{filter:drop-shadow(0 0 6px rgba(233,184,102,.35)) drop-shadow(0 0 18px rgba(233,184,102,.15))}
  42%{filter:drop-shadow(0 0 12px rgba(233,184,102,.7)) drop-shadow(0 0 34px rgba(233,184,102,.35))}
  71%{filter:drop-shadow(0 0 8px rgba(233,184,102,.45)) drop-shadow(0 0 24px rgba(233,184,102,.22))}
}
@keyframes glow-soft{
  0%,100%{filter:drop-shadow(0 0 1px rgba(233,184,102,.3))}
  50%{filter:drop-shadow(0 0 3px rgba(233,184,102,.6))}
}
@keyframes core{
  0%,100%{transform:scale(1,1);opacity:.75}
  35%{transform:scale(.92,1.1);opacity:.95}
  70%{transform:scale(1.05,.95);opacity:.6}
}
@keyframes shimmer{
  0%,100%{filter:hue-rotate(0deg) brightness(1)}
  50%{filter:hue-rotate(-8deg) brightness(1.08)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .arch-img,.js .hero-img,.js .oil-disc,.js .stamp,.js .seal{opacity:1;translate:none;scale:1;transition:none}
  .hero-img{translate:none}
}

/* Laptop composition (>=901px wide): every section is sized from the viewport height so it reads
   as one complete screen. --H is the room left under the masthead (about 128px tall). */
@media (min-width:901px){
  html{scroll-padding-top:0}
  .hero-wrap{--H:calc(100svh - 128px);--g:clamp(170px,min(27vw,calc(var(--H)*.42),340px),340px);--ah:clamp(380px,calc(var(--H) - 56px),780px);
    min-height:var(--H);padding-top:10px;padding-bottom:30px;display:flex;flex-direction:column;justify-content:center}
  .giant{font-size:var(--g)}
  .mx-hero{margin-top:calc(var(--g)*-.375);gap:40px}
  .hero-copy{padding-top:calc(var(--g)*.5)}
  .tagline{font-size:clamp(34px,calc(var(--H)*.075),54px);margin-top:clamp(10px,calc(var(--H)*.02),18px)}
  .short-rule{margin:clamp(12px,calc(var(--H)*.035),30px) 0 clamp(8px,calc(var(--H)*.025),22px)}
  .lede{font-size:clamp(13px,calc(var(--H)*.022),15px);line-height:1.6}
  .dropcap::first-letter{font-size:clamp(62px,calc(var(--H)*.095),92px)}
  .cta-row{margin-top:clamp(16px,calc(var(--H)*.04),34px)}
  .cta-row .btn-lg{min-height:clamp(44px,calc(var(--H)*.075),56px)}
  .hero-art{height:var(--ah);margin-top:calc(var(--g)*-.425)}
  .hero-art .disc{width:calc(var(--ah)*.44);height:calc(var(--ah)*.44);top:calc(var(--ah)*.115)}
  .hero-arch{width:calc((var(--ah) - 40px)*.64);height:calc(var(--ah) - 40px);border-radius:999px 999px 0 0}
  .hero-arch-inner{border-radius:999px 999px 0 0}
  .hero-clip{border-radius:999px 999px 0 0}
  .oil-disc{width:calc(var(--ah)*.28);height:calc(var(--ah)*.28);bottom:calc(var(--ah)*.09)}
  .stamp{width:calc(var(--ah)*.205);height:calc(var(--ah)*.205);bottom:calc(var(--ah)*.05)}
  .stamp em{font-size:clamp(24px,calc(var(--ah)*.046),36px)}
  .stamp span{font-size:clamp(8px,calc(var(--ah)*.0128),10px)}
  .seal{width:clamp(72px,calc(var(--ah)*.128),100px);height:clamp(72px,calc(var(--ah)*.128),100px)}
  .seal img{width:60%}

  .section-carta,.section-ritual,.section-casa{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
  .section-ritual>.wrap{width:100%}
  .section-carta{padding-top:clamp(40px,8svh,140px);padding-bottom:clamp(40px,8svh,120px)}
  .section-ritual{padding:clamp(40px,8svh,120px) 0}
  .section-casa{padding-top:clamp(40px,8svh,140px);padding-bottom:clamp(40px,8svh,140px)}
  .sec-head{margin-bottom:clamp(20px,5svh,64px);padding-bottom:clamp(8px,2svh,18px)}
  .sec-head-ritual{margin-bottom:clamp(20px,5svh,56px)}
  .big-num{font-size:clamp(64px,13svh,120px)}
  .sec-head h2{font-size:clamp(40px,7svh,64px)}

  .menu-card{padding:clamp(56px,9svh,90px) 56px clamp(28px,5svh,52px)}
  .menu-head{margin-bottom:clamp(14px,3.5svh,36px)}
  .dishes{gap:clamp(16px,3svh,32px)}
  .dish h3{font-size:clamp(22px,3.2svh,28px)}
  .dish .es{font-size:clamp(16px,2.2svh,19px);line-height:1.5}
  .prices{margin-top:clamp(4px,1svh,10px)}
  .menu-photos{min-height:0;height:clamp(460px,calc(100svh - 300px),760px)}
  .mp-main{height:68%}
  .mp-polaroid{height:40%}

  .step:nth-child(2){margin-top:clamp(24px,5svh,80px)}
  .step:nth-child(3){margin-top:clamp(48px,10svh,160px)}
  .arch-clip img,.arch-clip video{height:clamp(220px,calc(100svh - 490px),410px)}
  .arch-card{border-radius:999px 999px 20px 20px}
  .arch-clip{border-radius:999px 999px 10px 10px}
  .step-text{margin-top:clamp(12px,2.5svh,24px)}
  .step h3{line-height:1.4}

  .pull{font-size:clamp(36px,7svh,54px)}
  .badge{max-width:min(460px,58svh)}
  .badge-inner{padding:clamp(20px,4svh,40px)}

  .section-visita{min-height:100svh;display:flex;flex-direction:column;padding-top:clamp(40px,8svh,100px)}
  .section-visita>.wrap{flex:1;display:flex;flex-direction:column;width:100%}
  .visit-row{margin-top:clamp(20px,5svh,60px);flex-wrap:nowrap}
  .addr{font-size:clamp(52px,10svh,96px)}
  .facts{margin-top:clamp(18px,4svh,44px);gap:clamp(28px,4vw,56px)}
  .btn-gold{margin-top:clamp(20px,4svh,40px)}
  .visit-arch{height:clamp(260px,calc(100svh - 370px),440px);width:calc(clamp(260px,calc(100svh - 370px),440px)*.77);border-radius:999px 999px 0 0;flex:none}
  .visit-clip{border-radius:999px 999px 0 0}
  .visit-clip img,.visit-clip video{height:100%}
  .legal{margin-top:auto;padding:clamp(18px,3svh,36px) 0}
  .visit-row{margin-bottom:clamp(20px,5svh,60px)}
}
/* Narrow laptops and landscape tablets: the copy column is tight, so the wordmark gives up some height. */
@media (min-width:901px) and (max-width:1180px){
  .hero-wrap{--g:clamp(170px,min(23vw,calc(var(--H)*.34)),340px)}
  .tagline{font-size:clamp(32px,calc(var(--H)*.065),46px)}
}

/* The menu runs as two columns of two dishes so the whole card fits one laptop screen. */
@media (min-width:901px){
  .dishes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:clamp(16px,3svh,32px)}
  .dish-pair{display:contents}
  .dish h3,.dish-s h3{font-size:clamp(20px,2.4svh,26px)}
  .dish .es{font-size:clamp(16px,1.9svh,19px);line-height:1.35}
  .prices{margin-top:4px}
  .prices li{font-size:clamp(14px,1.7svh,16px);line-height:1.55}
  .prices b,.dish-s .prices b{font-size:clamp(19px,2.3svh,22px);line-height:1.3}
  .menu-arch{padding:clamp(16px,2svh,22px)}
  .menu-card{padding:clamp(46px,7svh,80px) 44px clamp(26px,4svh,44px)}
  .menu-head{margin-bottom:clamp(12px,2svh,28px)}
  .section-carta{padding-top:clamp(28px,5svh,80px);padding-bottom:clamp(28px,5svh,80px)}
  .section-carta .sec-head{margin-bottom:clamp(18px,3svh,40px)}
}

/* Snap to each screen only when it is natural: roomy desktop windows, and never mandatory. */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  html{scroll-snap-type:y proximity}
  .mx>header,.section-carta,.section-ritual,.section-casa,.section-visita{scroll-snap-align:start}
}

/* Tablet / phone */
@media (max-width:900px){
  .mx-hero,.mx-casa,.mx-menu,.mx-three{grid-template-columns:minmax(0,1fr)}
  .lede{column-count:1}
  .navlinks{display:none}
  .giant{font-size:38vw;margin-left:-.02em}
  .hero-copy{padding-top:0}
  .mx-hero{margin-top:6vw;gap:40px}
  .hero-art{height:560px}
  .hero-art .disc{right:-60px}
  .tagline{font-size:46px}
  .step:nth-child(n){margin-top:0}
  .mx-three{gap:56px}
  .addr{font-size:56px}
  .menu-photos{max-width:560px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .masthead{font-size:9px;letter-spacing:.2em;gap:6px 12px;justify-content:center;text-align:center}
  .masthead span:nth-child(2){order:3;flex-basis:100%}
  .nav{gap:14px;padding:14px 0}
  .nav-brand{gap:8px}
  .nav-bf{height:22px}
  .btn-nav{padding:0 20px;min-height:44px}
  .hero-wrap{padding-bottom:60px}
  .tagline{font-size:40px}
  .cta-row .btn{flex:1 1 100%;justify-content:center}
  .dropcap::first-letter{font-size:76px}
  .hero-art{height:500px}
  .hero-arch{height:470px;width:340px;padding:16px;border-radius:170px 170px 0 0;top:30px}
  .hero-arch-inner{border-radius:154px 154px 0 0;padding:8px}
  .hero-clip{border-radius:146px 146px 0 0}
  .hero-art .disc{width:200px;height:200px;top:100px;right:-70px}
  .seal{width:80px;height:80px;top:-10px}
  .seal img{width:48px}
  .oil-disc{width:130px;height:130px;left:-6px;bottom:40px;border-width:6px}
  .stamp{width:116px;height:116px;right:-4px;bottom:20px}
  .stamp em{font-size:26px}
  .stamp span{font-size:8px}
  .ticker{margin:0 -30px;padding:16px 0}
  .ticker-row{font-size:28px;gap:26px}
  .section-carta{padding-top:90px;padding-bottom:80px}
  .sec-head{gap:12px 16px;margin-bottom:40px}
  .big-num{font-size:80px}
  .sec-head h2{font-size:44px}
  .sec-aside{margin-left:0;font-size:18px;flex-basis:100%}
  .menu-arch{border-radius:170px 170px 22px 22px;padding:14px}
  .menu-card{border-radius:156px 156px 12px 12px;padding:64px 22px 34px}
  .dish h3{font-size:24px}
  .dish .es{font-size:17px}
  .dish-pair{grid-template-columns:minmax(0,1fr);gap:32px}
  .menu-photos{min-height:0;display:flex;flex-direction:column;gap:28px;align-items:stretch}
  .mp-main,.mp-polaroid,.mp-note{position:static;width:100%}
  .mp-main{height:400px;border-radius:170px 170px 0 0}
  .mp-polaroid{height:240px;width:86%;align-self:flex-start}
  .mp-note{max-width:none}
  .section-ritual{padding:80px 0}
  .arch-clip{border-radius:150px 150px 10px 10px}
  .arch-card{border-radius:160px 160px 16px 16px}
  .arch-clip img,.arch-clip video{height:340px}
  .section-casa{padding-top:90px;padding-bottom:90px}
  .mx-casa{gap:56px}
  .pull{font-size:36px}
  .badge-inner{padding:24px}
  .badge-bf{height:48px}
  .badge-wm{height:30px}
  .section-visita{padding-top:70px}
  .visit-row{margin-top:40px;gap:40px}
  .addr{font-size:44px}
  .facts{gap:28px;margin-top:32px}
  .visit-arch{width:100%;max-width:340px;margin:0 auto}
  .legal{margin-top:70px}
  .legal-brand{flex-wrap:wrap;gap:14px}
}