/* Layout: quiet 12-column grid, generous whitespace, light serif display + tracked small-caps sans; cobalt used as whole fields, never as decoration. */
:root{
  --cobalt:#1C3DB5;
  --cobalt-deep:#142C86;
  --porcelain:#F7F6F2;
  --paper:#ECE7DD;
  --kraft:#E3DCCD;
  --ink:#17191D;
  --muted:#5F646D;
  --line:#DDD8CD;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(20px,5vw,72px);
  --max:1320px;
  --ease:cubic-bezier(.22,.61,.24,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--porcelain);color:var(--ink);font:400 17px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;letter-spacing:-.01em;text-wrap:balance}
:focus-visible{outline:1.5px solid var(--cobalt);outline-offset:4px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.cap{font:500 11.5px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.muted{color:var(--muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* monogram */
.mono-r{display:block;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.mono-r circle{fill:currentColor;stroke:none}

/* photos (the restaurant's own) */
.ph{background-size:cover;background-position:50% 50%;background-color:var(--paper)}
.ph-patio{background-image:url("images/patio.jpg")}
.ph-garden{background-image:url("images/garden.jpg")}
.ph-shrimp{background-image:url("images/shrimp.jpg")}
.ph-tortellini{background-image:url("images/tortellini.jpg")}
.ph-parm{background-image:url("images/parm.jpg")}
.ph-burrata{background-image:url("images/burrata.jpg")}
.ph-entree{background-image:url("images/entree.jpg")}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border-radius:999px;text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--cobalt);background:var(--cobalt);color:#fff;transition:background .3s,color .3s,border-color .3s;white-space:nowrap}
.btn:hover{background:var(--cobalt-deep);border-color:var(--cobalt-deep)}
.btn.line{background:transparent;color:var(--cobalt)}
.btn.line:hover{background:var(--cobalt);color:#fff}
.btn.inv{background:#fff;color:var(--cobalt);border-color:#fff}
.btn.inv:hover{background:transparent;color:#fff}
.link{color:var(--cobalt);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px;transition:background-size .4s var(--ease)}
.link:hover{background-size:0 1px;background-position:100% 100%}

/* proposal strip */
.strip{background:var(--ink);color:#C9CBD0;font:400 12px/1.4 var(--sans);letter-spacing:.04em}
.strip .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;justify-content:space-between;padding-block:9px}
.strip a{color:#fff;text-underline-offset:3px}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(247,246,242,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--cobalt)}
.brand .mono-r{width:38px;height:auto}
.brand span{font:500 11px/1.2 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{text-decoration:none;font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:8px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--cobalt);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.hdr .btn{padding:12px 18px}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px 0 10px 10px;cursor:pointer;color:var(--ink);font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:900px){.nav,.hdr .btn{display:none}.burger{display:block}.brand span{display:none}}

.sheet{position:fixed;inset:0;z-index:60;background:var(--porcelain);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 28px);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.sheet.open{opacity:1;visibility:visible}
.sheet-top{display:flex;justify-content:space-between;align-items:center;height:56px}
.sheet-top .mono-r{width:38px;color:var(--cobalt)}
.sheet-top button{background:none;border:0;font:500 12px var(--sans);letter-spacing:.2em;text-transform:uppercase;padding:10px 0;cursor:pointer;color:var(--ink)}
.sheet nav{margin-top:auto;display:grid}
.sheet nav a{font:300 clamp(38px,11vw,56px)/1.1 var(--serif);text-decoration:none;padding:8px 0;border-top:1px solid var(--line);transform:translateY(10px);opacity:0;transition:transform .6s var(--ease),opacity .6s}
.sheet.open nav a{transform:none;opacity:1}
.sheet.open nav a:nth-child(2){transition-delay:.05s}.sheet.open nav a:nth-child(3){transition-delay:.1s}.sheet.open nav a:nth-child(4){transition-delay:.15s}.sheet.open nav a:nth-child(5){transition-delay:.2s}
.sheet .foot{margin-top:28px;display:grid;gap:6px;color:var(--muted)}

/* hero */
.hero{padding-block:clamp(36px,6vw,88px) clamp(56px,8vw,120px)}
.hero .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px;align-items:center}
.hero-txt{grid-column:1/6}
.hero-txt .cap{color:var(--cobalt)}
.hero h1{font-size:clamp(52px,6.6vw,104px);line-height:.98;margin:22px 0 28px;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--cobalt)}
.hero-txt p.lead{font:300 clamp(19px,1.6vw,22px)/1.5 var(--serif);max-width:30ch;color:var(--ink)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:44px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.slides{grid-column:7/13;position:relative;margin:0}
.slides .stage{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--paper)}
.slides .ph{position:absolute;inset:0;opacity:0;transform:scale(1.04);transition:opacity 1.6s var(--ease),transform 7s linear}
.slides .ph.on{opacity:1;transform:scale(1)}
.slides figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px}
.dots{display:flex;gap:10px}
.dots button{width:34px;height:20px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.dots button::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.dots button::after{content:"";position:absolute;left:0;top:50%;height:1px;width:0;background:var(--cobalt)}
.dots button.on::after{width:100%;transition:width 6s linear}
#slideCap{color:var(--muted)}
@media (max-width:900px){.hero-txt,.slides{grid-column:1/-1}.slides .stage{aspect-ratio:1}}

/* section scaffolding */
.sec{padding-block:clamp(80px,11vw,160px)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px 32px;margin-bottom:clamp(40px,6vw,80px);align-items:end}
.head .cap{grid-column:1/4;color:var(--cobalt);align-self:start;padding-top:14px}
.head h2{grid-column:4/11;font-size:clamp(40px,4.6vw,72px);line-height:1.04}
.head h2 em{font-style:italic;color:var(--cobalt)}
@media (max-width:760px){.head .cap,.head h2{grid-column:1/-1}}
.rv{transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.pre{opacity:0;transform:translateY(18px)}

/* intro */
.intro{border-top:1px solid var(--line)}
.intro .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 32px}
.intro .cap{grid-column:1/4;color:var(--cobalt);padding-top:12px}
.intro-body{grid-column:4/12}
.intro-body p.big{font:300 clamp(26px,2.9vw,42px)/1.32 var(--serif)}
.intro-body p.big em{color:var(--cobalt)}
.facts{display:flex;flex-wrap:wrap;margin-top:56px;border-top:1px solid var(--line)}
.facts > div{flex:1 1 180px;padding:20px 24px 0 0}
.facts .cap{display:block;color:var(--muted);letter-spacing:.2em;padding:0}
.facts strong{display:block;margin-top:8px;font:300 24px/1.25 var(--serif)}
@media (max-width:760px){.intro .cap,.intro-body{grid-column:1/-1}}

/* river */
.river{background:var(--cobalt);color:#fff}
.river .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 32px;align-items:center}
.river-img{grid-column:1/7;aspect-ratio:1;overflow:hidden;border-radius:2px;position:relative}
.river-img .ph{position:absolute;inset:0;transition:transform 1.8s var(--ease)}
.river-img:hover .ph{transform:scale(1.03)}
.river-txt{grid-column:8/13}
.river-txt .cap{opacity:.75}
.river-txt h2{font-size:clamp(40px,4.4vw,68px);line-height:1.04;margin:20px 0 28px}
.river-txt h2 em{font-style:italic}
.river-txt p{font:300 20px/1.55 var(--serif);color:rgba(255,255,255,.88);max-width:40ch}
.landmarks{margin-top:40px;display:grid;border-top:1px solid rgba(255,255,255,.25)}
.landmarks div{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.25);font-size:15px}
.landmarks span:last-child{color:rgba(255,255,255,.7)}
@media (max-width:900px){.river-img,.river-txt{grid-column:1/-1}}

/* dishes */
.dishes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px}
.dish{display:flex;flex-direction:column;gap:18px}
.dish .im{aspect-ratio:4/5;overflow:hidden;border-radius:2px;position:relative}
.dish .im .ph{position:absolute;inset:0;transition:transform 1.4s var(--ease)}
.dish:hover .im .ph{transform:scale(1.04)}
.dish .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-top:1px solid var(--ink);padding-top:12px}
.dish h3{font-size:26px;line-height:1.15}
.dish .pr{font:400 15px var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.dish p{color:var(--muted);font-size:15.5px;line-height:1.5}
.dish .cap{color:var(--cobalt);font-size:10.5px}
@media (max-width:980px){.dishes{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dishes{gap:28px 14px}.dish h3{font-size:20px}.dish .meta{flex-direction:column;gap:2px}.dish p{font-size:14px}}

/* full menu */
.menu{margin-top:clamp(64px,8vw,120px);border-top:1px solid var(--ink);padding-top:28px}
.menu-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px}
.menu-top h3{font-size:clamp(34px,3.6vw,52px);line-height:1}
.tabs{display:flex;gap:28px}
.tabs button{background:none;border:0;padding:6px 0;cursor:pointer;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);position:relative}
.tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--cobalt);transform:scaleX(0);transition:transform .4s var(--ease)}
.tabs button[aria-selected="true"]{color:var(--cobalt)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.panel{columns:2 340px;column-gap:72px;margin-top:44px;transition:opacity .45s var(--ease)}
.panel.fade{opacity:0}
.grp{break-inside:avoid;margin-bottom:44px}
.grp h4{font:500 11.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt);margin-bottom:10px;display:flex;justify-content:space-between}
.grp h4 small{font-size:11px;letter-spacing:.08em;text-transform:none;color:var(--muted);font-weight:400}
.it{display:grid;grid-template-columns:1fr auto;gap:0 20px;padding:12px 0;border-bottom:1px solid var(--line)}
.it b{font:400 19px/1.3 var(--serif);grid-column:1;grid-row:1}
.it i{grid-column:1;font-style:normal;color:var(--muted);font-size:14.5px;line-height:1.45}
.it span{font:400 15px var(--sans);font-variant-numeric:tabular-nums;grid-column:2;grid-row:1}
.menu-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;color:var(--muted);font-size:14px;padding-top:8px}

/* experience */
.exp .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.exp-a{grid-column:1/8}
.exp-b{grid-column:8/13;display:flex;flex-direction:column;gap:32px}
.exp figure{margin:0}
.exp .box{position:relative;overflow:hidden;border-radius:2px}
.exp .box .ph{position:absolute;inset:0}
.exp-a .box{aspect-ratio:1}
.exp-b .box{aspect-ratio:4/3}
.exp figcaption{margin-top:12px;color:var(--muted);font-size:14px}
.amen{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.amen li{padding:13px 0;border-bottom:1px solid var(--line);font:300 19px/1.35 var(--serif)}
@media (max-width:900px){.exp-a,.exp-b{grid-column:1/-1}}

/* gallery strip */
.gal-top{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px}
.gal-top h2{font-size:clamp(34px,3.6vw,52px)}
.arrows{display:flex;gap:8px}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:transparent;cursor:pointer;font:300 18px var(--sans);color:var(--ink);transition:border-color .3s,color .3s}
.arrows button:hover{border-color:var(--cobalt);color:var(--cobalt)}
.strip-gal{--side:max(var(--gut),calc((100vw - var(--max)) / 2 + var(--gut)));display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:var(--side);scroll-padding-inline:var(--side)}
.strip-gal::-webkit-scrollbar{display:none}
.strip-gal figure{margin:0;flex:0 0 clamp(240px,30vw,400px);scroll-snap-align:start}
.strip-gal .box{aspect-ratio:4/5;position:relative;overflow:hidden;border-radius:2px}
.strip-gal .box .ph{position:absolute;inset:0}
.strip-gal figcaption{margin-top:12px;font-size:14px;color:var(--muted)}
.strip-gal::after{content:"";flex:0 0 1px}

/* quote */
.quote{border-top:1px solid var(--line)}
.quote blockquote{margin:0;max-width:22ch;font:300 clamp(36px,4.6vw,68px)/1.12 var(--serif)}
.quote blockquote em{color:var(--cobalt)}
.quote footer{margin-top:24px;color:var(--muted)}
.quote .note{margin-top:28px;max-width:52ch;font-size:14px;color:var(--muted)}

/* visit */
.visit{background:var(--cobalt);color:#fff}
.visit .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 32px}
.visit h2{grid-column:1/7;font-size:clamp(46px,6vw,96px);line-height:1}
.visit h2 em{font-style:italic}
.visit .lede{grid-column:1/7;font:300 20px/1.55 var(--serif);color:rgba(255,255,255,.88);max-width:38ch}
.visit .acts{grid-column:1/7;display:flex;flex-wrap:wrap;gap:12px}
.vinfo{grid-column:8/13;grid-row:1/4;display:grid;gap:0;align-content:start;border-top:1px solid rgba(255,255,255,.3)}
.vinfo > div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.vinfo .cap{opacity:.7;letter-spacing:.2em;padding-top:4px}
.vinfo p{font:300 19px/1.45 var(--serif)}
.vinfo a{color:#fff}
.copy{margin-left:10px;background:none;border:1px solid rgba(255,255,255,.45);color:#fff;border-radius:999px;font:500 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;cursor:pointer;vertical-align:middle}
.copy:hover{background:#fff;color:var(--cobalt)}
@media (max-width:900px){.visit h2,.visit .lede,.visit .acts,.vinfo{grid-column:1/-1;grid-row:auto}.vinfo > div{grid-template-columns:90px 1fr}}

/* footer */
.ftr{background:var(--porcelain)}
.ftr .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:64px 36px}
.ftr .mk{grid-column:1/5;color:var(--cobalt);display:flex;flex-direction:column;gap:16px}
.ftr .mk .mono-r{width:64px}
.ftr .mk span{font:500 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink)}
.fcol{grid-column:span 2}
.fcol h4{font:500 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px}
.fcol a{text-decoration:none}
.fcol a:hover{color:var(--cobalt)}
.fbase{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;border-top:1px solid var(--line);padding-top:20px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.ftr .mk{grid-column:1/-1}.fcol{grid-column:span 6}}

/* ============ proposal ============ */
.divider{background:var(--ink);color:#fff}
.divider .wrap{padding-block:clamp(64px,8vw,112px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px;align-items:end}
.divider .cap{grid-column:1/-1;color:#A9B6E8}
.divider h2{grid-column:1/8;font-size:clamp(42px,5vw,80px);line-height:1.02}
.divider h2 em{font-style:italic;color:#A9B6E8}
.divider p{grid-column:9/13;color:#C9CBD0;font-size:16px}
@media (max-width:900px){.divider h2,.divider p{grid-column:1/-1}}

.blk{padding-top:24px;border-top:1px solid var(--ink);margin-top:clamp(72px,9vw,128px)}
.blk:first-child{margin-top:0}
.blk-h{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px 32px;margin-bottom:40px}
.blk-h .cap{grid-column:1/4;color:var(--cobalt);padding-top:8px}
.blk-h h3{grid-column:4/9;font-size:clamp(30px,3vw,44px);line-height:1.1}
.blk-h p{grid-column:9/13;color:var(--muted);font-size:15.5px}
@media (max-width:900px){.blk-h .cap,.blk-h h3,.blk-h p{grid-column:1/-1}}

/* logo presentation */
.logo-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.lh{border-radius:2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:40px 24px;position:relative;min-height:420px}
.lh .mono-r{width:clamp(120px,14vw,190px)}
.lh .wm{font:500 12px/1 var(--sans);letter-spacing:.34em;text-transform:uppercase}
.lh .wm2{font:400 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-top:-12px}
.lh .lbl{position:absolute;left:18px;bottom:16px;font:400 12px var(--sans);opacity:.6}
.lh-a{grid-column:1/8;background:#fff;color:var(--cobalt);border:1px solid var(--line)}
.lh-b{grid-column:8/13;background:var(--cobalt);color:#fff}
.lh-c{grid-column:1/5;background:var(--kraft);color:var(--cobalt);min-height:260px}
.lh-d{grid-column:5/9;background:var(--ink);color:#fff;min-height:260px}
.lh-e{grid-column:9/13;background:var(--paper);color:var(--cobalt);min-height:260px}
.lh-c .mono-r,.lh-d .mono-r{width:90px}
.sizes{display:flex;align-items:flex-end;gap:28px}
@media (max-width:900px){.lh-a,.lh-b,.lh-c,.lh-d,.lh-e{grid-column:1/-1}}

.construct{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:16px}
.cs{grid-column:span 4;background:#fff;border:1px solid var(--line);border-radius:2px;padding:24px;display:flex;flex-direction:column;gap:16px}
.cs > svg{width:100%;height:auto;background:var(--porcelain)}
.cs h4{font:400 21px/1.2 var(--serif)}
.cs p{font-size:15px;color:var(--muted);line-height:1.55}
@media (max-width:900px){.cs{grid-column:1/-1}}

.pal{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;border-radius:2px;overflow:hidden}
.sw{min-height:200px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;font-size:13px}
.sw b{font:300 22px/1.1 var(--serif)}
.sw-1{background:var(--cobalt);color:#fff}
.sw-2{background:var(--cobalt-deep);color:#fff}
.sw-3{background:var(--porcelain);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.sw-4{background:var(--kraft);color:var(--ink)}
.sw-5{background:var(--ink);color:#fff}
@media (max-width:760px){.pal{grid-template-columns:1fr 1fr}.sw-1{grid-column:1/-1}}

.types{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.ty{background:#fff;border:1px solid var(--line);border-radius:2px;padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0}
.ty-a{grid-column:1/8}.ty-b{grid-column:8/13}
.ty .s1{font:300 clamp(56px,6vw,96px)/1 var(--serif);color:var(--ink)}
.ty .s1 em{color:var(--cobalt)}
.ty .s2{font:500 15px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--cobalt)}
.ty .s3{font:400 17px/1.6 var(--sans);color:var(--ink);max-width:40ch}
.ty .tl{font-size:13px;color:var(--muted)}
@media (max-width:900px){.ty-a,.ty-b{grid-column:1/-1}}

/* applications */
.apps{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.ap{position:relative;border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:48px 24px 56px;min-height:440px}
.ap .lbl{position:absolute;left:18px;bottom:16px;font:400 12.5px var(--sans);opacity:.7}
.ap-bag{grid-column:1/6;background:var(--cobalt);color:#fff}
.ap-menu{grid-column:6/13;background:var(--paper)}
.ap-card{grid-column:1/8;background:var(--kraft)}
.ap-win{grid-column:8/13;background:#D9DEE6}
.ap-napkin{grid-column:1/5;background:var(--porcelain);border:1px solid var(--line)}
.ap-apron{grid-column:5/9;background:var(--paper)}
.ap-cup{grid-column:9/13;background:var(--cobalt);color:#fff}
@media (max-width:900px){.ap-bag,.ap-menu,.ap-card,.ap-win,.ap-napkin,.ap-apron,.ap-cup{grid-column:1/-1}}

/* kraft bag (paper, zig-zag top) */
.bag{width:min(64%,250px);aspect-ratio:.78;background:#E9E2D2;position:relative;box-shadow:0 26px 40px -24px rgba(0,0,0,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;color:var(--cobalt);container-type:inline-size;--z:8px}
.bag::before{content:"";position:absolute;left:0;right:0;top:calc(var(--z) * -1);height:var(--z);background:conic-gradient(from 135deg at 50% 0,#E9E2D2 90deg,transparent 0) 0 0/calc(var(--z) * 2) 100%}
.bag::after{content:"";position:absolute;left:0;right:0;top:0;height:9%;background:linear-gradient(rgba(0,0,0,.08),transparent)}
.bag .mono-r{width:44%;margin-top:12%}
.bag span{font:500 4.4cqw/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;text-align:center;padding-inline:8%}

/* menu card */
.mcard{width:min(100%,400px);aspect-ratio:5/7;background:#FBFAF7;box-shadow:0 30px 50px -30px rgba(23,25,29,.45);padding:9% 10%;display:flex;flex-direction:column;container-type:inline-size;transform:rotate(-2deg)}
.mcard .top{display:flex;flex-direction:column;align-items:center;gap:3cqw;color:var(--cobalt);padding-bottom:6cqw;border-bottom:1px solid var(--line)}
.mcard .top .mono-r{width:14cqw}
.mcard .top span{font:500 2.6cqw var(--sans);letter-spacing:.34em;text-transform:uppercase}
.mcard h5{font:400 2.7cqw var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--cobalt);margin:7cqw 0 3cqw;text-align:center}
.mcard .r{display:grid;grid-template-columns:1fr auto;gap:0 3cqw;padding:2.4cqw 0}
.mcard .r b{font:400 4.2cqw/1.25 var(--serif);font-weight:400}
.mcard .r i{font-style:normal;font:400 2.9cqw/1.4 var(--sans);color:var(--muted)}
.mcard .r span{font:400 3.3cqw var(--sans)}
.mcard .bt{margin-top:auto;text-align:center;font:400 2.4cqw var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* cards */
.cards{display:flex;gap:6%;align-items:center;justify-content:center;width:100%;flex-wrap:wrap}
.rc{width:min(44%,300px);aspect-ratio:1.6;min-height:0;overflow:hidden;border-radius:3px;padding:18px 20px;display:flex;flex-direction:column;justify-content:space-between;container-type:inline-size;box-shadow:0 22px 34px -22px rgba(23,25,29,.55)}
.rc-f{background:var(--cobalt);color:#fff;align-items:center;justify-content:center;gap:6cqw;transform:rotate(-3deg)}
.rc-f .mono-r{width:24cqw}
.rc-f span{font:500 3.4cqw var(--sans);letter-spacing:.32em;text-transform:uppercase}
.rc-b{background:#FBFAF7;color:var(--ink);transform:rotate(2deg)}
.rc-b .t{font:400 3.6cqw var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--cobalt)}
.rc-b .l{display:grid;grid-template-columns:auto 1fr;gap:3cqw;align-items:end;font:400 3.3cqw var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rc-b .l::after{content:"";border-bottom:1px solid var(--line);margin-bottom:.8cqw}
@media (max-width:620px){.rc{width:80%}}

/* window */
.win{position:absolute;inset:14% 12%;border:8px solid #2A2D33;background:linear-gradient(120deg,rgba(255,255,255,.7),rgba(220,228,240,.35) 45%,rgba(255,255,255,.12) 46%,rgba(220,228,240,.4));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--cobalt);text-align:center}
.win .mono-r{width:30%}
.win span{font:500 clamp(9px,.9vw,12px)/1.6 var(--sans);letter-spacing:.32em;text-transform:uppercase}

/* napkin */
.napkin{width:min(60%,220px);aspect-ratio:1;background:#fff;position:relative;transform:rotate(-6deg);box-shadow:0 20px 30px -20px rgba(23,25,29,.4)}
.napkin::after{content:"";position:absolute;right:0;bottom:0;width:40%;height:40%;background:linear-gradient(135deg,#ECEAE4 50%,transparent 50%)}
.napkin .mono-r{position:absolute;left:12%;top:12%;width:24%;color:var(--cobalt)}

/* apron */
.apron{width:min(54%,200px);aspect-ratio:.82;background:var(--cobalt);clip-path:polygon(30% 0,70% 0,70% 15%,100% 32%,100% 100%,0 100%,0 32%,30% 15%);display:flex;justify-content:center;padding-top:34%}
.apron .mono-r{width:26%;height:auto;color:#fff;align-self:flex-start}

/* cup */
.cup{width:min(42%,160px);aspect-ratio:.78;background:#FBFAF7;clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10%;color:var(--cobalt);position:relative}
.cup .mono-r{width:44%}
.cup::before{content:"";position:absolute;left:0;right:0;top:0;height:7%;background:#E4E0D6}

/* social */
.social{background:var(--paper)}
.tagline{display:inline-block;font:500 11px var(--sans);letter-spacing:.22em;text-transform:uppercase;border:1px solid var(--ink);border-radius:999px;padding:7px 12px;margin-bottom:28px}
.s-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px 32px;align-items:start}
.phone{grid-column:1/6;max-width:400px;width:100%;justify-self:center;background:var(--ink);border-radius:46px;padding:11px;box-shadow:0 40px 70px -40px rgba(23,25,29,.6)}
.scr{background:#fff;border-radius:36px;overflow:hidden}
.ig{padding:22px 16px 12px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.av{width:68px;height:68px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center}
.av .mono-r{width:56%}
.ig b{font:500 15px var(--sans);display:block}
.ig small{font:400 12px var(--sans);color:var(--muted)}
.bio{padding:0 16px 16px;font:400 13px/1.45 var(--sans)}
.g9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.t{aspect-ratio:4/5;position:relative;overflow:hidden;container-type:inline-size}
.t .ph{position:absolute;inset:0}
.t-c{background:var(--cobalt);color:#fff;display:grid;place-items:center}
.t-c .mono-r{width:42%}
.t-p{background:var(--porcelain);color:var(--ink)}.t .in{position:absolute;inset:10cqw 9cqw;display:flex;flex-direction:column;justify-content:space-between}
.t-p q{font:300 11cqw/1.1 var(--serif);quotes:none}
.t-p q em{color:var(--cobalt)}
.t-p span,.t-k span{font:500 4.4cqw var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt)}
.t-k{background:var(--kraft)}
.t-k b{font:300 13cqw/1.05 var(--serif);color:var(--ink);font-weight:300}
.t .lab{position:absolute;left:7cqw;bottom:7cqw;background:#fff;color:var(--ink);font:500 4.4cqw var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:2.4cqw 3.4cqw}
.notes{grid-column:7/13}
.notes h4{font:400 24px var(--serif);margin-bottom:18px}
.notes ol{margin:0;padding:0;list-style:none;border-top:1px solid var(--ink)}
.notes li{display:grid;grid-template-columns:52px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid rgba(23,25,29,.14);font-size:15.5px}
.notes li b{font:500 11px/1.9 var(--sans);letter-spacing:.2em;color:var(--cobalt)}
.notes .rules{margin-top:22px;font-size:15.5px;color:var(--muted)}
@media (max-width:900px){.phone,.notes{grid-column:1/-1}}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(72px,8vw,120px)}
.post{background:#fff;border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.post .bar{display:flex;align-items:center;gap:10px;padding:11px 14px;font:500 13px var(--sans)}
.post .bar i{width:28px;height:28px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center}
.post .bar i .mono-r{width:58%}
.post .bar small{margin-left:auto;font:500 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.post .cv{aspect-ratio:4/5;position:relative;overflow:hidden;container-type:inline-size}
.post .cv .ph{position:absolute;inset:0}
.post .body{padding:16px;display:grid;gap:10px;font-size:14.5px;line-height:1.5}
.post .body b{font-weight:500}
.post .cta{font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt);border-top:1px solid var(--line);padding-top:11px}
.ov-a{position:absolute;left:0;right:0;bottom:0;background:var(--porcelain);padding:6cqw 7cqw;display:flex;justify-content:space-between;align-items:baseline;gap:4cqw}
.ov-a b{font:300 8.4cqw/1 var(--serif);color:var(--ink);font-weight:300}
.ov-a span{font:500 3.4cqw var(--sans);letter-spacing:.2em;color:var(--cobalt)}
.ov-b{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(20,44,134,.75));display:flex;flex-direction:column;justify-content:flex-end;padding:7cqw;color:#fff}
.ov-b b{font:300 9.5cqw/1.05 var(--serif);font-weight:300}
.ov-b b em{font-style:italic}
.ov-b span{font:500 3.2cqw var(--sans);letter-spacing:.24em;text-transform:uppercase;margin-top:3cqw;opacity:.85}
.ov-c{position:absolute;inset:7cqw;border:1px solid rgba(255,255,255,.8);display:flex;align-items:flex-start;justify-content:flex-end;padding:5cqw;color:#fff}
.ov-c .mono-r{width:14cqw}
@media (max-width:980px){.posts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.posts{grid-template-columns:1fr}}

.verts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(56px,7vw,96px)}
.vc{display:flex;flex-direction:column;gap:16px}
.s9{aspect-ratio:9/16;border-radius:24px;overflow:hidden;position:relative;container-type:inline-size;max-width:320px;width:100%;margin-inline:auto;box-shadow:0 30px 50px -34px rgba(23,25,29,.55)}
.s9 .ph{position:absolute;inset:0}
.pg{position:absolute;top:4cqw;left:4cqw;right:4cqw;display:flex;gap:1.6cqw;z-index:2}
.pg i{flex:1;height:.7cqw;border-radius:2px;background:rgba(255,255,255,.45)}
.pg i:first-child{background:#fff}
.s-res{background:var(--cobalt);color:#fff}.s-res .in{position:absolute;inset:14cqw 10cqw;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8cqw;text-align:center}
.s-res .mono-r{width:30cqw}
.s-res b{font:300 11cqw/1.1 var(--serif);font-weight:300}
.s-res b em{font-style:italic}
.s-res .stk{background:#fff;color:var(--cobalt);border-radius:999px;padding:3.6cqw 6cqw;font:500 3.8cqw var(--sans);letter-spacing:.14em;text-transform:uppercase}
.s-dish .lb{position:absolute;left:7cqw;right:7cqw;bottom:9%;background:var(--porcelain);padding:6cqw;text-align:center}
.s-dish .lb b{display:block;font:300 9cqw/1.1 var(--serif);font-weight:300;color:var(--ink)}
.s-dish .lb span{font:500 3.4cqw var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--cobalt)}
.s-reel{background:var(--ink)}
.s-reel .ph{opacity:.92}
.s-reel .ttl{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font:300 13cqw/1.05 var(--serif)}
.s-reel .ttl em{font-style:italic}
.s-reel .ttl small{display:block;font:500 3.4cqw var(--sans);letter-spacing:.3em;text-transform:uppercase;margin-top:4cqw}
.vc .cp{font-size:14.5px;line-height:1.55;background:#fff;border-radius:6px;padding:14px 16px}
.vc .cp b{font-weight:500}
@media (max-width:900px){.verts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.verts{grid-template-columns:1fr}}

.month{margin-top:clamp(72px,8vw,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px 32px}
.month-h{grid-column:1/5}
.month-h h3{font-size:clamp(30px,3vw,44px);line-height:1.1;margin-top:14px}
.month-h p{margin-top:16px;color:var(--muted);font-size:15.5px}
.weeks{grid-column:6/13;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.weeks li{display:grid;grid-template-columns:90px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid rgba(23,25,29,.14)}
.weeks .cap{color:var(--cobalt);padding-top:4px;font-size:10.5px}
.weeks p{font:300 19px/1.45 var(--serif)}
.weeks small{display:block;margin-top:4px;font:400 13.5px var(--sans);color:var(--muted)}
@media (max-width:900px){.month-h,.weeks{grid-column:1/-1}}

.log{list-style:none;margin:0;padding:0;columns:2 360px;column-gap:56px}
.log li{break-inside:avoid;display:grid;grid-template-columns:92px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.log .st{font:500 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;padding-top:3px}
.log .ok{color:var(--cobalt)}
.log .ck{color:var(--ink)}
.log a{color:var(--cobalt)}

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