@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=EB+Garamond:wght@400&display=swap');

:root{
  --mr-green:#2B382A;
  --mr-green-soft:#546652;
  --mr-sage:#8EA37C;
  --mr-cream:#F2EBDD;
  --mr-ink:#181717;
  --mr-line:rgba(43,56,42,.18);
  --serif:'EB Garamond',Georgia,serif;
  --sans:'Archivo',Arial,sans-serif;
}

*{box-sizing:border-box}
html{background:var(--mr-cream);scroll-behavior:smooth}
body{margin:0;background:var(--mr-cream);color:var(--mr-ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button{font:inherit}

.mr-app{width:100%;overflow:hidden;background:var(--mr-cream)}
.mr-shell{width:min(calc(100% - 34px),1120px);margin-inline:auto}
.mr-serif{font-family:var(--serif);font-weight:400}
.mr-kicker{font:500 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.mr-rule{height:1px;background:currentColor;opacity:.18}

/* SMART HEADER */
.mr-app .header{position:fixed;top:0;left:0;transform:none;width:100%;max-width:none;height:64px;padding:0 17px;z-index:80;background:transparent!important;box-shadow:none!important;color:var(--mr-cream);display:flex;align-items:center;justify-content:space-between;transition:transform .28s ease,color .25s ease,background-color .25s ease}
.mr-app .header.is-hidden{transform:translateY(-110%)}
.mr-app .header.is-scrolled{background:rgba(242,235,221,.92)!important;color:var(--mr-green)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(43,56,42,.08)}
.mr-app .header-wordmark{font:400 13px/1 var(--serif);letter-spacing:.05em;text-transform:uppercase;opacity:0;transition:opacity .25s ease}
.mr-app .header.is-scrolled .header-wordmark{opacity:1}
.mr-app .menu-button{display:grid;gap:4px;background:transparent;border:0;padding:9px 0 9px 9px}
.mr-app .menu-lines span{display:block;width:23px;height:1px;background:currentColor;border-radius:20px}

/* HERO / COVER */
.mr-cover{position:relative;min-height:100svh;background:var(--mr-green);color:var(--mr-cream);display:flex;align-items:center;text-align:center;overflow:hidden;padding:90px 26px 70px}
.mr-cover::before{content:'';position:absolute;inset:-4%;background:url('assets/drizzle-pattern-v4.svg') center/560px auto repeat;opacity:.11;transform:scale(1.04)}
.mr-cover-inner{position:relative;z-index:2;width:100%;max-width:360px;margin:auto}
.mr-cover-brand{font-family:var(--serif);font-size:53px;font-weight:400;line-height:.76;letter-spacing:-.025em;text-transform:uppercase;margin:0 auto 26px}
.mr-cover-brand span{display:block}
.mr-cover-tagline{font-family:var(--serif);font-size:19px;line-height:1.04;margin:0 auto 31px;max-width:290px}
.mr-cover-copy{font-size:12px;line-height:1.45;margin:0 auto 31px;max-width:295px;opacity:.92}
.mr-button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 22px;border-radius:999px;background:var(--mr-cream);color:var(--mr-green);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.mr-cover-index{position:absolute;left:24px;right:24px;bottom:23px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:11px;font:500 8px/1 var(--sans);letter-spacing:.08em}
.mr-cover-index i{height:1px;background:currentColor;opacity:.35}

/* CARTA INTRO */
.mr-carta{background:var(--mr-cream);color:var(--mr-green);padding:88px 0 0}
.mr-carta-head{padding-bottom:31px}
.mr-carta-title{font-family:var(--serif);font-weight:400;font-size:43px;line-height:.86;letter-spacing:-.025em;margin:16px 0 27px;max-width:330px}
.mr-dish-index{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:9px;color:rgba(43,56,42,.62);padding-bottom:13px;border-bottom:1px solid var(--mr-line)}
.mr-dish-index a,.mr-dish-index span{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;position:relative}
.mr-dish-index .active{color:var(--mr-green)}
.mr-dish-index .active::after{content:'';position:absolute;bottom:-14px;width:28px;height:1px;background:var(--mr-green)}

/* DISH COVERS */
.mr-dish{position:relative;min-height:78svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#322b23}
.mr-dish+.mr-dish{border-top:1px solid rgba(255,255,255,.2)}
.mr-dish-media{position:absolute;inset:0}
.mr-dish-media img{height:100%;object-fit:cover}
.mr-dish-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.05) 18%,rgba(18,18,18,.05) 48%,rgba(18,18,18,.76) 100%)}
.mr-dish-content{position:relative;z-index:2;width:100%;padding:34px 22px 26px}
.mr-dish-no{font:500 9px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:8px}
.mr-dish h3{font-family:var(--serif);font-weight:400;font-size:40px;line-height:.84;letter-spacing:-.02em;margin:0 0 11px;max-width:310px}
.mr-dish-desc{font-size:11px;line-height:1.35;margin:0 0 20px;max-width:290px;opacity:.9}
.mr-dish-bottom{display:flex;align-items:end;justify-content:space-between;gap:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.32)}
.mr-dish-time{font-size:9px;font-weight:500;letter-spacing:.01em}
.mr-round-link{width:36px;height:36px;display:grid;place-items:center;border-radius:999px;background:var(--mr-cream);color:var(--mr-green);font-size:16px}

/* HOW IT WORKS */
.mr-how{background:var(--mr-cream);color:var(--mr-green);padding:87px 0 72px}
.mr-how-title{font-family:var(--serif);font-size:43px;line-height:.88;font-weight:400;letter-spacing:-.02em;margin:15px 0 18px;max-width:315px}
.mr-how-intro{font-size:11px;line-height:1.4;margin:0 0 49px;max-width:295px;color:var(--mr-ink)}
.mr-process{position:relative}
.mr-process::before{content:'';position:absolute;left:17px;top:24px;bottom:24px;width:1px;background:rgba(43,56,42,.25)}
.mr-step{display:grid;grid-template-columns:36px 1fr;gap:18px;position:relative;padding:0 0 39px}
.mr-step:last-child{padding-bottom:0}
.mr-step-num{position:relative;z-index:2;width:35px;height:35px;display:grid;place-items:center;background:var(--mr-cream);font-family:var(--serif);font-size:19px}
.mr-step h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1;margin:1px 0 6px}
.mr-step p{font-size:10px;line-height:1.38;margin:0;max-width:230px;color:var(--mr-ink)}
.mr-process-note{font-family:var(--serif);font-style:italic;font-size:24px;line-height:.95;text-align:right;margin-top:47px;color:var(--mr-green-soft)}

/* WHAT YOU RECEIVE */
.mr-receive{background:var(--mr-cream);color:var(--mr-green);padding:0 0 78px}
.mr-receive-visual{position:relative;min-height:54svh;background:#c8b293;overflow:hidden}
.mr-receive-visual img{height:100%;min-height:54svh;object-fit:cover}
.mr-receive-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,18,.02),rgba(18,18,18,.2))}
.mr-receive-sheet{position:relative;margin:-48px 17px 0;padding:31px 20px 22px;background:var(--mr-cream);z-index:2;border-radius:18px 18px 0 0}
.mr-receive h2{font-family:var(--serif);font-size:35px;line-height:.91;font-weight:400;letter-spacing:-.02em;margin:0 0 28px;max-width:310px}
.mr-receive-list{border-top:1px solid var(--mr-line)}
.mr-receive-row{display:grid;grid-template-columns:31px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid var(--mr-line);font-size:10px;line-height:1.2}
.mr-receive-row span:first-child{font-family:var(--serif);font-size:14px}
.mr-receive-copy{font-size:10px;line-height:1.4;margin:22px 0 0;max-width:260px;color:var(--mr-ink)}

/* EDITORIAL CLOSING */
.mr-editorial{position:relative;min-height:84svh;background:var(--mr-green);color:var(--mr-cream);overflow:hidden;display:flex;align-items:flex-end}
.mr-editorial-image{position:absolute;inset:0}
.mr-editorial-image img{height:100%;object-fit:cover;filter:saturate(.82) brightness(.72)}
.mr-editorial-image::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,56,42,.12),rgba(43,56,42,.25) 45%,rgba(24,23,23,.68) 100%)}
.mr-editorial-content{position:relative;z-index:2;padding:0 22px 39px;width:100%}
.mr-editorial-overline{font:500 9px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}
.mr-editorial h2{font-family:var(--serif);font-weight:400;font-size:42px;line-height:.86;margin:0;max-width:310px}

/* STATEMENT / FOOTER */
.mr-close{position:relative;background:var(--mr-cream);color:var(--mr-green);min-height:70svh;padding:88px 22px 90px;overflow:hidden}
.mr-close-inner{position:relative;z-index:2}
.mr-close h2{font-family:var(--serif);font-weight:400;font-size:40px;line-height:.88;letter-spacing:-.02em;margin:0 0 24px;max-width:300px}
.mr-close p{font-size:11px;line-height:1.45;margin:0;max-width:295px;color:var(--mr-ink)}
.mr-close-signature{position:absolute;left:-22px;right:-80px;bottom:40px;width:125%;opacity:.08;transform:rotate(-6deg)}
.mr-footer{position:absolute;left:22px;right:22px;bottom:24px;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;text-transform:uppercase;font-family:var(--serif)}
.mr-footer a{font-size:9px}.mr-footer a:last-child{text-align:right}.mr-footer strong{font-size:12px;font-weight:400;letter-spacing:.08em;white-space:nowrap}

/* FULL SCREEN APP MENU */
.menu-overlay{position:fixed;inset:0;background:var(--mr-green);color:var(--mr-cream);z-index:100;transform:translateX(104%);transition:transform .32s cubic-bezier(.65,0,.35,1)}
.menu-overlay.is-open{transform:translateX(0)}
.menu-inner{height:100%;padding:32px 22px 24px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.menu-inner::before{content:'';position:absolute;inset:0;background:url('assets/drizzle-pattern-v4.svg') center/620px auto repeat;opacity:.07;pointer-events:none}
.menu-top,.menu-nav,.menu-signature{position:relative;z-index:2}
.menu-top{display:flex;align-items:flex-start;justify-content:space-between}
.menu-wordmark{font-family:var(--serif);font-size:25px;line-height:.78;text-transform:uppercase;width:150px}
.menu-close{position:relative;width:28px;height:28px;border:0;background:none}
.menu-close::before,.menu-close::after{content:'';position:absolute;top:13px;left:1px;width:27px;height:1px;background:currentColor}.menu-close::before{transform:rotate(45deg)}.menu-close::after{transform:rotate(-45deg)}
.menu-nav{display:grid;margin-top:96px;border-top:1px solid rgba(242,235,221,.22)}
.menu-nav a{display:grid;grid-template-columns:38px 1fr;align-items:center;padding:18px 0;border-bottom:1px solid rgba(242,235,221,.22);font-family:var(--serif);font-size:27px;text-transform:none;letter-spacing:-.01em}
.menu-nav a::before{font-family:var(--sans);font-size:9px;opacity:.65;align-self:start;margin-top:7px}
.menu-nav a:nth-child(1)::before{content:'01'}.menu-nav a:nth-child(2)::before{content:'02'}.menu-nav a:nth-child(3)::before{content:'03'}.menu-nav a:nth-child(4)::before{content:'04'}
.menu-signature{width:190px;margin:auto 0 24px;align-self:flex-start;opacity:.78}
body.menu-open{overflow:hidden}

/* DESKTOP ADAPTATION */
@media (min-width:760px){
  .mr-shell{width:min(calc(100% - 96px),1180px)}
  .mr-cover{min-height:100vh}.mr-cover-inner{max-width:720px}.mr-cover-brand{font-size:92px}.mr-cover-tagline{font-size:26px;max-width:420px}.mr-cover-copy{font-size:15px;max-width:520px}.mr-button{min-height:42px;font-size:10px}
  .mr-carta{padding-top:120px}.mr-carta-head{padding-bottom:50px}.mr-carta-title{font-size:68px;max-width:600px}.mr-dish-index{max-width:520px}
  .mr-dish{min-height:86vh}.mr-dish-content{padding:60px 7vw 52px}.mr-dish h3{font-size:72px;max-width:700px}.mr-dish-desc{font-size:14px;max-width:480px}.mr-dish-time{font-size:11px}.mr-round-link{width:44px;height:44px}
  .mr-how{padding:130px 0 120px}.mr-how-title{font-size:72px;max-width:580px}.mr-how-intro{font-size:14px;max-width:440px}.mr-process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--mr-line);border-bottom:1px solid var(--mr-line)}.mr-process::before{display:none}.mr-step{display:block;padding:28px 28px 34px;border-right:1px solid var(--mr-line)}.mr-step:last-child{border-right:0}.mr-step-num{background:transparent;display:block;width:auto;height:auto;font-size:25px;margin-bottom:48px}.mr-step h3{font-size:29px}.mr-step p{font-size:12px}.mr-process-note{text-align:left;font-size:30px;margin-top:52px}
  .mr-receive{display:grid;grid-template-columns:1.12fr .88fr;padding:0;background:var(--mr-cream)}.mr-receive-visual{min-height:720px}.mr-receive-visual img{min-height:720px}.mr-receive-sheet{margin:0;border-radius:0;padding:90px 7vw;display:flex;flex-direction:column;justify-content:center}.mr-receive h2{font-size:58px;max-width:530px}.mr-receive-row{font-size:12px;padding:18px 0}.mr-receive-copy{font-size:13px;max-width:390px}
  .mr-editorial{min-height:90vh}.mr-editorial-content{padding:0 7vw 68px}.mr-editorial h2{font-size:72px;max-width:640px}
  .mr-close{min-height:72vh;padding:130px 7vw 110px}.mr-close h2{font-size:68px;max-width:620px}.mr-close p{font-size:14px;max-width:520px}.mr-close-signature{width:72%;left:auto;right:-7%;bottom:8%;opacity:.07}.mr-footer{left:7vw;right:7vw;bottom:40px}.mr-footer a{font-size:10px}.mr-footer strong{font-size:15px}
}