/* Shared styles for restaurantelizabeth.com, from the Claude Design project "Restaurant Elizabeth - Site"
   (elizabeth-site.css). Changes for production: .pt is not tied to h2 so page titles can be h1, and the
   design tool's image-slot placeholder is replaced by a real image that covers its plate. */
/* fonts:start */
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/eb-garamond-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/eb-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 400;font-display:swap;src:url(/fonts/fraunces-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* fonts:end */
*{box-sizing:border-box;margin:0;padding:0}
:root{--paper:#FFFFFF;--paper2:#F0F0F0;--ink:#111111;--ink2:#3A3A3A;--ink3:#595959;--line:rgba(17,17,17,.16);--gut:clamp(22px,5vw,60px);--ser:"Fraunces",Georgia,serif;--gara:"EB Garamond",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,monospace;--meas:34em}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--gara);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100svh;display:flex;flex-direction:column}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--paper)}
/* masthead */
header{padding:clamp(34px,6.5vh,72px) var(--gut) clamp(26px,4.4vh,48px);text-align:center;flex-shrink:0}
.wm{display:inline-block}
.wm .a{display:block;font-family:var(--mono);font-weight:500;font-size:clamp(9px,1.1vw,11px);letter-spacing:.46em;text-transform:uppercase;color:var(--ink3)}
.wm .b{display:block;font-family:var(--ser);font-variation-settings:"opsz" 96;font-weight:300;font-size:clamp(32px,5.2vw,64px);line-height:.94;letter-spacing:-.034em;color:var(--ink);margin-top:clamp(9px,1.4vh,14px)}
header.sub .wm .b{font-size:clamp(24px,3.6vw,42px)}
nav{padding:clamp(30px,5.5vh,60px) var(--gut) 0;text-align:center;flex-shrink:0}
header nav{padding:clamp(22px,3.6vh,36px) 0 0}
.navin{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,20px)}
nav a{font-family:var(--mono);font-weight:500;font-size:clamp(10px,1.25vw,12.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);padding-bottom:3px;border-bottom:1px solid transparent;transition:opacity .2s,border-color .2s}
nav a:hover{border-bottom-color:var(--ink)}
nav a[aria-current]{border-bottom-color:var(--ink)}
nav .sep{font-family:var(--mono);font-size:clamp(10px,1.25vw,12.5px);color:rgba(17,17,17,.3)}
/* shared bits */
.eyebrow{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink3)}
.page{flex:1;padding:clamp(44px,8vh,92px) var(--gut) clamp(56px,10vh,104px)}
.mid{max-width:1120px;margin:0 auto}
.pt{font-family:var(--ser);font-variation-settings:"opsz" 72;font-weight:400;font-size:clamp(28px,4.6vw,54px);line-height:1.04;letter-spacing:-.03em;margin-top:18px;text-wrap:balance}
figure{margin:0}
figcaption{padding-top:14px;font-family:var(--gara);font-style:italic;font-size:clamp(16px,1.9vw,20px);line-height:1.3;color:var(--ink3)}
.plate{position:relative;background:var(--paper2);overflow:hidden}
.plate picture{display:contents}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* footer */
footer{padding:0 var(--gut) clamp(34px,6vh,60px);flex-shrink:0}
.fin{max-width:1120px;margin:0 auto;padding-top:clamp(28px,4.4vh,42px);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 32px;align-items:baseline;justify-content:space-between}
.fin .fl{display:flex;flex-wrap:wrap;gap:12px 28px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.fin .fl a{border-bottom:1px solid var(--line);padding-bottom:3px;transition:border-color .2s}
.fin .fl a:hover{border-bottom-color:var(--ink)}
.fin .fm{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink3)}
@media(max-width:560px){.fin{justify-content:center;text-align:center}}
/* Tap areas: the mono nav and footer links are about 18px tall. An invisible layer makes them at least 30px
   without moving anything. Horizontal and vertical reach stays inside the gaps so neighbors never overlap. */
nav a,.fin .fl a{position:relative}
nav a::after{content:"";position:absolute;left:-6px;right:-6px;top:-12px;bottom:-9px}
.fin .fl a::after{content:"";position:absolute;left:-6px;right:-6px;top:-6px;bottom:-6px}
/* dinner pages (/ellerman-house, /waldorf-astoria-osaka): built from the site's own parts. The centered page
   head, plates with italic captions, the Pop Ups list for the facts, and the waitlist's ink button for booking. */
.ph{text-align:center;max-width:760px;margin:0 auto}
.lede{font-size:clamp(19px,2.1vw,23px);line-height:1.45;color:var(--ink2);max-width:30em;margin:clamp(18px,3vh,28px) auto 0;text-wrap:pretty}
.wide{max-width:1120px;margin:clamp(38px,6.5vh,68px) auto 0}
.wide .plate{aspect-ratio:3/2}
/* the facts, set like the Pop Ups itinerary */
.facts{max-width:1120px;margin:clamp(40px,7vh,72px) auto 0;border-top:1px solid var(--ink)}
.facts div{display:grid;grid-template-columns:minmax(118px,.62fr) minmax(0,1.2fr) minmax(0,1fr);gap:4px clamp(18px,3vw,44px);align-items:baseline;padding:clamp(17px,2.8vh,24px) 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-weight:500;font-size:clamp(10.5px,1.1vw,12px);letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
.facts dd{font-family:var(--ser);font-variation-settings:"opsz" 36;font-weight:400;font-size:clamp(21px,2.5vw,30px);line-height:1.1;letter-spacing:-.022em}
.facts dd+dd{font-family:var(--gara);font-variation-settings:normal;font-size:clamp(17px,1.8vw,20px);line-height:1.3;letter-spacing:0;color:var(--ink2)}
/* booking */
#booking{max-width:1120px;margin:clamp(30px,5vh,48px) auto 0;text-align:center}
.book{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:min(100%,290px);padding:19px 30px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;transition:opacity .2s}
.btn:hover{opacity:.82}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn span{font-size:14px;letter-spacing:0}
.btn[hidden]{display:none}
.note{margin:18px auto 0;max-width:34em;font-size:17px;line-height:1.45;color:var(--ink2)}
.note a,.text a{border-bottom:1px solid var(--line);transition:border-color .2s}
.note a:hover,.text a:hover{border-bottom-color:var(--ink)}
.over{display:none;font-family:var(--ser);font-variation-settings:"opsz" 36;font-size:clamp(21px,2.5vw,28px);letter-spacing:-.02em}
.note+.note{margin-top:8px}
.past .book,.past .note{display:none}.past .over{display:block}
/* three plates */
.three{max-width:1120px;margin:clamp(48px,8vh,88px) auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,34px)}
.three .plate,.cook .plate{aspect-ratio:4/5}
.three figcaption{font-size:clamp(15px,1.6vw,18px)}
/* the house, the cook */
.part{max-width:1120px;margin:clamp(52px,9vh,100px) auto 0;padding-top:clamp(40px,7vh,72px);border-top:1px solid var(--line)}
.text{max-width:var(--meas);margin:0 auto;text-align:center}
.text h2{font-family:var(--ser);font-variation-settings:"opsz" 72;font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.06;letter-spacing:-.028em;margin-top:16px;text-wrap:balance}
.text p{font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink2);margin-top:clamp(14px,2.4vh,22px);text-wrap:pretty}
.marks{margin-top:clamp(20px,3.2vh,30px);font-family:var(--mono);font-weight:500;font-size:clamp(11px,1.2vw,12.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.marks small{display:block;margin-top:9px;font-size:10px;letter-spacing:.2em;color:var(--ink3)}
.text p.marks{font-size:clamp(11px,1.2vw,12.5px);line-height:1.5;color:var(--ink)}
.more{margin-top:clamp(20px,3.4vh,32px);display:flex;flex-wrap:wrap;justify-content:center;gap:14px 28px;font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
.more a{position:relative;border-bottom:1px solid var(--line);padding-bottom:3px}
.more a::after{content:"";position:absolute;left:-6px;right:-6px;top:-8px;bottom:-8px}
.cook{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.cook .text{text-align:left;margin:0}
.cook .more{justify-content:flex-start}
.fine{max-width:1120px;margin:clamp(44px,7vh,72px) auto 0;text-align:center;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.2em;line-height:1.9;text-transform:uppercase;color:var(--ink3)}
@media(max-width:700px){.facts div{grid-template-columns:1fr;gap:5px}.three{grid-template-columns:1fr;max-width:420px}.cook{grid-template-columns:1fr}.cook figure{max-width:340px;margin:0 auto}.cook .text{text-align:center}.cook .more{justify-content:center}.btn{width:100%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.langs{margin-top:18px;font-size:16px}
.langs a{border-bottom:1px solid var(--line);padding-bottom:2px}
.jabook{max-width:1120px;margin:clamp(30px,5vh,48px) auto 0;text-align:center}
.jabook .fine{margin-top:18px}
.jabook .fine a{border-bottom:1px solid var(--line)}
.facts dd:first-of-type:last-of-type{grid-column:2/-1}
/* Japanese sets: break lines between phrases, never inside a word, and lift the small labels to a readable size. */
[lang="ja"] h2,[lang="ja"] .facts dd:first-of-type{word-break:keep-all;overflow-wrap:anywhere}
[lang="ja"] p,[lang="ja"] .facts dd+dd{line-break:strict}
[lang="ja"] .text{max-width:44em}
[lang="ja"] .text h2{font-size:clamp(21px,2.9vw,34px)}
[lang="ja"] .eyebrow,[lang="ja"] .facts dt{font-size:13px}
[lang="ja"] .btn{font-size:13.5px}
[lang="ja"] .fine{font-size:12px;text-transform:none}
[lang="ja"] .facts dd+dd,[lang="ja"] .note{font-size:16px;line-height:1.7}
/* Japanese. The three web fonts are Latin only. When a browser or Google translates a page it sets lang="ja"
   (and .translated-ltr) on <html>; the Osaka page also carries its facts in Japanese. Both keep the site's
   typefaces for Latin text (names, prices) and fall through to typefaces with Japanese glyphs for the rest,
   and the wide label tracking, which pulls kana apart, is relaxed. */
html:lang(ja),[lang="ja"]{--ser:"Fraunces","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;--gara:"EB Garamond","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;--mono:"JetBrains Mono","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif}
html:lang(ja) .eyebrow,html:lang(ja) nav a,html:lang(ja) .facts dt,html:lang(ja) .btn,html:lang(ja) .more,html:lang(ja) .fin .fl,html:lang(ja) .fin .fm,html:lang(ja) .fine,html:lang(ja) .marks,html:lang(ja) .wm .a,[lang="ja"] .eyebrow,[lang="ja"] .facts dt,[lang="ja"] .btn,[lang="ja"] .fine{letter-spacing:.08em}
html:lang(ja) .pt,html:lang(ja) .text h2,html:lang(ja) .facts dd,[lang="ja"] .pt,[lang="ja"] .text h2,[lang="ja"] .facts dd{letter-spacing:0;line-height:1.35}