/* photos: --look warm */
/* Chef MBJ: the chef's monograph, on black. Ink ground, bone type and two bone fields, one paprika accent. */
@import url(/assets/fonts/fonts.css);

:root{
  --bg:#0F0E0C; --alt:#161411; --ink:#F2EDE4; --mute:#B8B0A3;
  --line:rgba(242,237,228,.12); --surface:#1B1915; --hover-bg:rgba(242,237,228,.06); --hdr-bg:rgba(15,14,12,.9);
  --accent:#DA6A40; --accent-hover:#E57A51; --accent-ink:#0F0E0C; --focus:#E8875F;
  --dark:#090807; --dark-ink:#F2EDE4; --dark-mute:#ADA597; --dark-line:rgba(242,237,228,.12); --hero-shade:#090807;
  --bone:#F1EBE1; --bone-ink:#1B1814; --bone-mute:#5C544A; --bone-line:rgba(27,24,20,.14);

  --font-body:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:"Alegreya", Georgia, "Times New Roman", serif;

  --r-sm:2px; --r:4px; --r-lg:6px; --radius:var(--r);
  --e1:0 1px 2px rgba(0,0,0,.28),0 4px 12px rgba(0,0,0,.22);
  --e2:0 2px 4px rgba(0,0,0,.3),0 12px 32px rgba(0,0,0,.42);
  --shadow:var(--e2);
  --ease:cubic-bezier(.2,.7,.3,1); --ease-state:cubic-bezier(.4,0,.2,1);

  --wrap:1280px; --gut:clamp(16px,4vw,48px); --hdr:80px; --text:17px; --logo-w:44px;
  --h1-hero:clamp(36px,7vw,104px);
  --h2:clamp(34px,3.6vw,54px);
  --h2-big:clamp(40px,5vw,72px);
  --h3:clamp(21px,1.7vw,25px);
  --lead:clamp(19px,1.5vw,22px);
  --sec-pad:clamp(64px,9vw,128px);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .89 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E");
}

html{background:var(--bg);scrollbar-color:#3A352F var(--bg);scrollbar-width:thin}
body{background:var(--bg) var(--grain);color:var(--ink);font-size:var(--text);line-height:1.62;font-kerning:normal}
::selection{background:rgba(218,106,64,.32);color:var(--ink)}
h1,h2,h3{font-weight:700;letter-spacing:-.018em;text-rendering:optimizeLegibility}
h3{font-size:var(--h3);line-height:1.2;font-weight:700;letter-spacing:-.01em}
.num,.tab{font-variant-numeric:tabular-nums lining-nums}
a{text-underline-offset:4px}
p a,li a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-decoration-thickness:1px}
p a:hover,li a:hover{text-decoration-color:currentColor}

/* header */
.hdr{border-bottom:1px solid transparent}
.hdr.solid{background:rgba(15,14,12,.94);border-bottom-color:var(--line)}
.hdr>.wrap{gap:34px}
.brand img{border-radius:50%}
.brand b{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.brand small{font-size:14px;color:var(--mute)}
.nav>ul{gap:30px}
.nav a{position:relative;padding:0 2px;font-size:16px;font-weight:500;color:var(--ink);background:none!important}
.nav a::after{content:"";position:absolute;left:2px;right:2px;bottom:6px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease-state)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:500}
.hdr-cta .i,.btn .i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75}

/* buttons */
.btn{height:52px;min-height:52px;padding:0 28px;border-radius:var(--r);font-size:16px;font-weight:600;letter-spacing:-.005em;transition:background-color .18s var(--ease-state),color .18s var(--ease-state),box-shadow .18s var(--ease-state),transform .18s var(--ease-state)}
.btn:hover{background:var(--accent-hover)}
.btn:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.btn.sm{height:46px;min-height:46px;padding:0 20px;font-size:15px}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(242,237,228,.28)}
.btn.line:hover{box-shadow:inset 0 0 0 1px var(--ink);background:transparent}
.btn.ink{background:var(--bone-ink);color:var(--bone)}
.btn.ink:hover{background:#2C2722}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .18s}
.tlink:hover{text-decoration-color:currentColor}
.tlink .i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;transition:transform .18s var(--ease-state)}
.tlink:hover .i{transform:translateX(3px)}

/* hero: the plate, the h1 on the darkened cloth */
.hero{min-height:calc(100svh - var(--hdr) - 36px)}
.hero h1{max-width:none;font-size:var(--h1-hero);line-height:1.02;letter-spacing:-.022em}
.hero h1 .l{display:block}
.hero-bg::after{background:linear-gradient(180deg,rgba(9,8,7,.18) 0%,rgba(9,8,7,0) 18%,rgba(9,8,7,.08) 46%,rgba(9,8,7,.72) 74%,rgba(9,8,7,.92) 100%)}
.hero .copy{padding-block:clamp(120px,20vh,220px) clamp(56px,9vh,104px)}

/* sections */
.sec{position:relative}
.sec-head h2{font-size:var(--h2);line-height:1.08;letter-spacing:-.016em}
.sec-head.big h2{font-size:var(--h2-big);line-height:1.04;letter-spacing:-.022em;max-width:20ch}
.sec-head.quiet{margin-bottom:clamp(28px,3vw,40px)}
.sec-head.quiet h2{font-size:clamp(26px,2.2vw,32px)}
.sec-head p{color:var(--mute)}
.sec.alt{background:var(--alt)}
.sec.pad-s{padding-block:clamp(56px,7vw,96px)}
.sec.pad-l{padding-block:clamp(80px,11vw,160px)}

/* bone field: the uncoated insert */
.sec.bone{--ink:var(--bone-ink);--mute:var(--bone-mute);--line:var(--bone-line);--focus:#9C3F1C;background:var(--bone);color:var(--bone-ink)}
.sec.bone .btn.line{color:var(--bone-ink);box-shadow:inset 0 0 0 1px rgba(27,24,20,.3)}
.sec.bone .btn.line:hover{box-shadow:inset 0 0 0 1px var(--bone-ink)}

/* photo frames */
.ph{position:relative;overflow:hidden;border-radius:var(--r);background:#1F1C18}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
a:hover>.ph img,a.ph:hover img,button.ph:hover img{transform:scale(1.03)}
.ph.r45{aspect-ratio:4/5}.ph.r43{aspect-ratio:4/3}.ph.r32{aspect-ratio:3/2}.ph.r169{aspect-ratio:16/9}.ph.r11{aspect-ratio:1/1}
.cap{margin-top:12px;color:var(--mute);font-size:15px;line-height:1.45}

/* the 12-col grid and the splits */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,24px)}
.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,24px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;row-gap:32px}.split>*{grid-column:1/-1!important}}

/* long text */
.lead{font-size:var(--lead);line-height:1.5;color:var(--ink);text-wrap:pretty}
.body{max-width:62ch;color:var(--mute);font-size:17px;line-height:1.65}
.body+.body{margin-top:14px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.stat{padding:22px 20px 0 0;border-top:1px solid var(--line)}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(40px,4.4vw,64px);font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--ink)}
.stat span{display:block;margin-top:10px;color:var(--mute);font-size:15px;line-height:1.4}
@media (max-width:700px){.stats{grid-template-columns:1fr 1fr;row-gap:28px}}

/* hairline rows (editorial list, menu courses) */
.rows>*{padding-block:24px;border-top:1px solid var(--line)}
.rows>*:last-child{border-bottom:1px solid var(--line)}

/* fields */
.field{display:grid;gap:8px}
.field label{font-size:15px;font-weight:500;color:var(--ink)}
.field input,.field textarea{width:100%;height:52px;padding:0 16px;border:1px solid rgba(242,237,228,.22);border-radius:var(--r-sm);background:rgba(242,237,228,.03);color:var(--ink);font:inherit;font-size:16px;caret-color:var(--accent);transition:border-color .18s var(--ease-state)}
.field textarea{height:auto;min-height:140px;padding:14px 16px;resize:vertical;line-height:1.5}
.field input:hover,.field textarea:hover{border-color:rgba(242,237,228,.4)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:transparent}

/* lightbox (gallery) */
.lb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(16px,4vw,56px);background:rgba(9,8,7,.94);opacity:0;visibility:hidden;transition:opacity .25s var(--ease-state),visibility .25s}
.lb.open{opacity:1;visibility:visible}
.lb figure{display:grid;gap:14px;justify-items:center;max-width:min(1200px,100%)}
.lb img{max-height:78svh;width:auto;max-width:100%;border-radius:var(--r);object-fit:contain}
.lb figcaption{color:var(--dark-mute);font-size:15px;text-align:center}
.lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:var(--r);background:rgba(242,237,228,.08);color:var(--dark-ink);cursor:pointer;transition:background-color .18s}
.lb button:hover{background:rgba(242,237,228,.16)}
.lb .lb-x{top:16px;right:16px}.lb .lb-prev{left:16px;top:50%;transform:translateY(-50%)}.lb .lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.75}

/* footer and phone bar */
.foot{background:var(--dark);border-top:1px solid var(--dark-line)}
.foot .brand img{width:52px}
.foot-map iframe{filter:none;border-radius:var(--r)}
.callbar a:first-child{gap:10px}
.callbar .i{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75}
.ribbon{font-size:14px}
.ribbon a{color:var(--dark-ink)}

@view-transition{navigation:auto}
.hdr{view-transition-name:site-header}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* round-1 fixes: one tagline (the h1 says it), the h1 on the dark lower board, phones clear of the bar */
@media (min-width:1181px){.hdr .brand small{display:none}}
.hero h1{font-size:clamp(38px,6vw,92px)}
.hero-bg::after{background:linear-gradient(180deg,rgba(9,8,7,.22) 0%,rgba(9,8,7,.04) 22%,rgba(9,8,7,.14) 44%,rgba(9,8,7,.78) 72%,rgba(9,8,7,.94) 100%)}
.ribbon a{display:inline-block;padding-block:12px;margin-block:-12px}
.foot-social{flex-wrap:wrap;column-gap:20px}
@media (max-width:620px){
  .hero{min-height:calc(100svh - var(--hdr) - 56px - 52px - env(safe-area-inset-bottom))}
  .hero .copy{padding-bottom:32px}
}