@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,800&family=Noto+Sans+KR:wght@400;500;600&display=swap');

/* TUORE design tokens — see STYLE_GUIDE.md and style-guide.html. */
:root{
  --color-brand:#416417;--color-brand-deep:#294510;--color-accent:#c8f653;
  --color-hero:#f5f5ef;--color-highlight:#d5f788;
  --color-ink:#202320;--color-white:#fff;--color-surface:#eeefe6;--color-muted:#747a6b;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;
  --space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;
  --radius-small:12px;--radius-card:24px;--radius-section:40px;--radius-pill:999px;
  --shadow-card:0 16px 40px #27352430;--shadow-tag:2px 5px 5px #35442a30;
  --font-body:'DM Sans','Noto Sans KR',sans-serif;--page-gutter:clamp(20px,5vw,80px);
  --motion-fast:180ms;--motion-ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--color-hero);color:var(--color-ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit}[hidden]{display:none!important}a:focus-visible,button:focus-visible{outline:3px solid var(--color-accent);outline-offset:5px}
.header{position:fixed;top:var(--space-6);left:var(--page-gutter);right:var(--page-gutter);z-index:20;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.header>a{pointer-events:auto}.wordmark{font-size:42px;font-weight:900;letter-spacing:-3px;line-height:1}.wordmark span{font-size:10px;letter-spacing:0;vertical-align:top;display:inline-block;margin:6px 0 0 5px}.header .wordmark{color:var(--color-white);background:var(--color-brand);padding:var(--space-2) var(--space-3) var(--space-3);border-radius:var(--radius-small)}.menu-link{display:flex;align-items:center;gap:var(--space-6);color:var(--color-white);background:var(--color-brand);border:1px solid #ffffff75;border-radius:var(--radius-pill);padding:var(--space-3) var(--space-6);font-size:12px;transition:background var(--motion-fast)}.menu-link:hover{background:var(--color-brand-deep)}
.visual{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:100svh;min-height:660px;padding:112px var(--page-gutter) 88px;overflow:hidden;background:var(--color-brand);color:var(--color-white)}.visual::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff06 1px,transparent 1px),linear-gradient(90deg,#ffffff06 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(transparent,#000 20%,#000 85%,transparent)}.type-panel{width:100%;position:relative}.type-composition{position:relative;width:100%;max-width:1400px;margin:0 auto}.poster-title{font-size:clamp(44px,min(7vw,10.2svh),112px);font-weight:500;line-height:1.16;letter-spacing:-.065em;margin:0;text-align:center}.poster-line{display:block;white-space:nowrap}.poster-line:nth-child(1){font-weight:800;letter-spacing:-.075em}.poster-line:nth-child(2){margin-top:.12em}.poster-line:nth-child(3){margin-top:.08em}.poster-line:nth-child(4){margin-top:.08em}.poster-ending{font-size:.8em;margin-top:.12em}.poster-ending em{font-weight:800}
/* Every photo trigger uses this exact component, including its idle affordance. */
.menu-highlight{position:relative;display:inline-flex;align-items:center;gap:.17em;vertical-align:baseline;padding:.05em .14em .08em;border:0;border-radius:var(--radius-small);background:var(--color-accent);color:var(--color-ink);font-size:inherit;line-height:1.04;letter-spacing:-.065em;cursor:pointer;box-shadow:0 3px 0 #001b762e;transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast) var(--motion-ease)}.menu-name{font-style:italic;font-weight:800}.photo-cue{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none;border-left:1px solid #14231530;padding-left:.65em;margin-left:.15em;font-size:clamp(8px,.7vw,11px);letter-spacing:0;line-height:1.2;font-weight:600;font-style:normal}.photo-cue>span{font-size:1.6em}.menu-highlight:hover,.menu-highlight:focus-visible,.menu-highlight[aria-expanded=true]{transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 #001b7645}.menu-highlight:focus-visible{outline:3px solid var(--color-white);outline-offset:5px}
.poster-tag{position:absolute;z-index:3;pointer-events:none;white-space:nowrap;background:var(--color-white);color:var(--color-brand);border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:clamp(11px,1.2vw,17px);font-weight:600;letter-spacing:-.4px;box-shadow:var(--shadow-tag)}.tag-first{right:0;top:-34px;transform:rotate(-8deg)}.tag-middle{right:-9%;top:51%;transform:rotate(8deg)}.tag-last{left:12%;bottom:-43px;transform:rotate(-7deg)}.poster-doodle{position:absolute;pointer-events:none;width:48px;height:48px;fill:none;stroke:var(--color-accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.doodle-first{right:19%;top:-86px;transform:rotate(-20deg)}.doodle-last{left:43%;bottom:-79px;transform:rotate(13deg)}
.hover-photo{position:absolute;right:-6%;top:50%;transform:translateY(-50%) rotate(6deg);z-index:10;width:clamp(180px,22vw,300px);margin:0;padding:var(--space-3);border:1px solid #ffffffaa;border-radius:var(--radius-card);background:var(--color-white);color:var(--color-ink);box-shadow:var(--shadow-card);pointer-events:none;animation:photo-appear var(--motion-fast) var(--motion-ease)}.photo-crop,.menu-photograph{background-image:url('assets/brunch-triptych.png');background-size:300% 100%;background-position:var(--photo-position,50%) center;aspect-ratio:1;border-radius:var(--radius-small)}.hover-photo figcaption{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) var(--space-1) var(--space-1);font-size:12px;font-weight:600}.hover-photo figcaption>span:last-child{display:grid;place-items:center;border-radius:50%;background:var(--color-accent);width:24px;height:24px}@keyframes photo-appear{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.menu-section{position:relative;z-index:2;padding:var(--space-24) var(--page-gutter);border-radius:var(--radius-section) var(--radius-section) 0 0;background:var(--color-white);margin-top:-var(--space-6)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-8);margin-bottom:var(--space-12)}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--color-brand)}h2{font-size:clamp(32px,4vw,60px);font-weight:800;line-height:1.08;letter-spacing:-2.5px;margin:var(--space-4) 0 0}h2>span{color:var(--color-brand)}.section-heading p{font-size:12px;line-height:1.9;color:var(--color-muted);margin:0}.menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}.menu-card{padding:var(--space-4);border-radius:var(--radius-card);background:var(--color-surface)}.menu-meta{display:flex;justify-content:space-between;gap:var(--space-2);font-size:8px;font-weight:600;letter-spacing:.6px;color:var(--color-brand);margin-top:var(--space-6)}.menu-card h3{font-size:clamp(20px,2vw,29px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin:var(--space-4) 0 var(--space-2)}.menu-card p{font-size:11px;line-height:1.8;margin:0}.menu-card .menu-detail{font-size:10px;color:var(--color-muted);margin-top:var(--space-3);margin-bottom:var(--space-2)}.sample-note{font-size:10px;line-height:1.8;color:var(--color-muted);margin:var(--space-6) 0 0}.visit{padding:var(--space-16) var(--page-gutter);background:var(--color-accent)}.visit .eyebrow{color:var(--color-ink)}.visit h2{font-size:clamp(36px,5.5vw,80px);max-width:1400px}.visit h2 span{float:right}.visit>div{display:flex;justify-content:space-between;gap:var(--space-8);margin-top:var(--space-6)}.visit p{font-size:12px;line-height:2;margin:0}.visit p span{font-size:10px}footer{background:var(--color-white);padding:var(--space-12) var(--page-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}footer .wordmark{color:var(--color-brand)}footer>span{font-size:9px;letter-spacing:1.5px}footer small{font-size:9px;color:var(--color-muted)}
/* Retained clock, currently hidden. */
.clock-panel{background:var(--color-surface);border-radius:var(--radius-card);padding:var(--space-6)}.clock-stage{max-width:500px;margin:auto}#clock{width:100%;height:auto}#ticks line{stroke:var(--color-ink)}.hour-number{font-size:54px;fill:var(--color-ink)}.minute-number{font-size:22px;fill:var(--color-muted)}.dial-brand{font-size:29px;fill:var(--color-muted)}.dial-subtitle{font-size:8px;fill:var(--color-muted)}
@media(min-width:1700px){.poster-title{font-size:min(7vw,10.2svh,128px)}}
@media(max-width:1000px){.poster-title{font-size:min(6.7vw,10svh)}.tag-middle{right:-3%;font-size:12px}.poster-tag{padding:8px 12px}.section-heading{display:block}.section-heading p{margin-top:var(--space-6)}}
@media(max-width:700px){:root{--radius-section:28px;--page-gutter:24px}.visual{min-height:580px;padding:112px var(--page-gutter) 100px}.poster-title{font-size:6.5vw;line-height:1.3}.tag-middle{right:0;top:53%;font-size:10px}.tag-first{top:-39px}.tag-last{bottom:-39px}.poster-doodle{width:33px;height:33px}.doodle-first{top:-82px}.doodle-last{bottom:-82px}.photo-cue{font-size:7px}.hover-photo{right:0;width:190px}.menu-grid{grid-template-columns:1fr;gap:var(--space-6)}.menu-card{padding:var(--space-6)}.menu-card h3{font-size:28px}.menu-meta{font-size:9px}.menu-section{padding-top:var(--space-16);padding-bottom:var(--space-16)}.visit>div{flex-direction:column}.visit h2{letter-spacing:-1.8px}footer{flex-wrap:wrap}footer>span{display:none}}
@media(max-width:420px){:root{--page-gutter:20px}.header{top:20px}.header .wordmark{font-size:34px}.menu-link{font-size:10px;gap:12px;padding:10px 16px}.visual{min-height:540px}.poster-title{font-size:6.3vw}.photo-cue{font-size:6px}.poster-tag{font-size:10px}.tag-middle{top:51%;font-size:8px;padding:6px 10px}.menu-card{padding:var(--space-4)}}
@media(max-height:600px) and (min-width:701px){.visual{min-height:480px;padding-top:100px;padding-bottom:82px}.poster-title{font-size:8svh}.poster-tag{font-size:11px}.doodle-first{width:30px;height:30px;top:-65px}.doodle-last{height:30px;width:30px;bottom:-68px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(max-width:700px){.photo-cue{font-size:9px;gap:1px;padding-left:5px}.photo-cue>span{font-size:13px}}

/* Centered headline with decorations kept outside the text block. */
.tag-first{right:8%;top:-38px}.tag-middle{right:0;top:auto;bottom:-48px}.tag-last{left:5%;bottom:-42px}.doodle-first{right:28%;top:-86px}.doodle-last{left:43%;bottom:-78px}.hover-photo{right:2%}
@media(max-width:700px){.tag-first{right:5%;top:-38px}.tag-middle{right:0;bottom:-43px;font-size:9px}.tag-last{left:0;bottom:-41px;font-size:9px}.doodle-first{right:35%;top:-78px}.doodle-last{left:45%;bottom:-86px}.hover-photo{right:0}}

/* Restored ivory / charcoal / fresh green palette. */
.header .wordmark{color:var(--color-ink);background:transparent}.menu-link{color:var(--color-ink);background:#ffffffaa;border-color:#d8ddcf}.menu-link:hover{background:var(--color-white)}
.visual{background:var(--color-hero);color:var(--color-ink)}.visual::before{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23888878' opacity='.65' filter='url(%23paper)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");background-size:160px 160px;opacity:.19;mask-image:none}
.menu-highlight{background:var(--color-highlight);color:var(--color-brand);box-shadow:0 3px 0 #35442a1a}.menu-highlight:hover,.menu-highlight:focus-visible,.menu-highlight[aria-expanded=true]{background:var(--color-accent);box-shadow:0 7px 0 #35442a26}.menu-highlight:focus-visible{outline-color:var(--color-brand)}.poster-tag{background:var(--color-accent);color:var(--color-ink)}.poster-doodle{stroke:#bfec52}.visit{background:#e7efcd}.menu-section{background:var(--color-hero)}footer{background:var(--color-hero)}

/* Independent marker strokes: text is not contained by a button-shaped background. */
.menu-highlight{isolation:isolate;overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none;padding:.02em .035em .07em;gap:.19em;color:#71804a;transition:color var(--motion-fast) var(--motion-ease)}
.menu-highlight::before{content:'';position:absolute;z-index:-1;pointer-events:none;background:var(--color-highlight);opacity:.9;left:-.08em;right:1em;top:26%;height:65%;transform:rotate(-3deg);clip-path:polygon(0 8%,97% 0,100% 87%,2% 100%)}
.menu-highlight[data-menu=eggs]::before{left:.35em;right:.58em;top:42%;height:48%;transform:rotate(2deg);clip-path:polygon(2% 0,100% 10%,97% 100%,0 89%)}
.menu-highlight[data-menu=french]::before{left:-.13em;right:1.2em;top:18%;height:68%;transform:rotate(-2deg);clip-path:polygon(0 12%,100% 0,98% 97%,3% 88%)}
.menu-name{position:relative;display:inline-block}.menu-highlight[data-menu=sourdough] .menu-name{transform:rotate(-1deg)}.menu-highlight[data-menu=eggs] .menu-name{transform:rotate(.6deg)}.menu-highlight[data-menu=french] .menu-name{transform:rotate(-.8deg)}
.photo-cue{position:relative;color:inherit;border:0;padding-left:0;margin-left:.15em;align-self:center;transform:translateY(-.12em)}.photo-cue>span{color:inherit}
.menu-highlight:hover,.menu-highlight:focus-visible,.menu-highlight[aria-expanded=true]{background:transparent;box-shadow:none;transform:none;color:#263b18}
.menu-highlight:focus-visible{outline:2px solid var(--color-brand);outline-offset:6px}

/* Dark text at rest; only the independent marker gains emphasis on interaction. */
.menu-highlight{color:#263b18;transition:none}
.menu-highlight::before{background:var(--color-highlight);opacity:.9;transition:background-color var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease)}
.menu-highlight:hover,.menu-highlight:focus-visible,.menu-highlight[aria-expanded=true]{color:#263b18}
.menu-highlight:hover::before,.menu-highlight:focus-visible::before,.menu-highlight[aria-expanded=true]::before{background:#b5e348;opacity:1}

/* Strong resting text, deeper text and marker together on interaction. */
.menu-highlight{color:#30451f}
.menu-highlight:hover,.menu-highlight:focus-visible,.menu-highlight[aria-expanded=true]{color:#101c0b}
.menu-highlight{transition:color var(--motion-fast) var(--motion-ease)}
.menu-highlight:hover::before,.menu-highlight:focus-visible::before,.menu-highlight[aria-expanded=true]::before{background:#c2ff00;opacity:1}
@media(max-width:700px){
  .visual{height:auto;min-height:100svh;padding-top:130px;padding-bottom:120px}
  .type-composition{width:100%;margin:0}
  .poster-title{text-align:left;font-size:clamp(28px,6.9vw,47px);line-height:1.2}
  .poster-title .poster-line{padding-left:0;white-space:normal;margin-top:.3em}
  .poster-title .poster-line:first-child{margin-top:0}
  .menu-lead{display:block;margin-bottom:.13em;font-size:.78em}
  .menu-highlight{white-space:nowrap}
  .poster-ending{font-size:.76em;line-height:1.3}
  .tag-first{right:0;top:-47px}
  .tag-middle{right:0;bottom:-53px}
  .tag-last{left:0;bottom:-45px}
  .doodle-first{right:45%;top:-83px}
  .doodle-last{left:43%;bottom:-93px}
  .hover-photo{right:0;top:52%}
}
@media(max-width:360px){.poster-title{font-size:7.2vw}.poster-tag{font-size:8px}}

/* Large mobile headline; photo cues sit below the name to preserve its width. */
@media(max-width:700px){
  .poster-title{font-size:clamp(34px,9.5vw,64px);line-height:1.16}
  .poster-title .poster-line{margin-top:.38em}
  .poster-title .poster-line:first-child{font-size:.94em;max-width:100%}
  .menu-lead{font-size:.72em;margin-bottom:.13em}
  .menu-highlight{max-width:100%;padding-bottom:.29em;gap:0}
  .menu-name{white-space:normal;overflow-wrap:normal}
  .photo-cue{position:absolute;right:0;bottom:-.03em;transform:none;flex-direction:row;gap:5px;font-size:9px;margin:0;padding:0}
  .photo-cue>span{font-size:13px}
  .poster-ending{font-size:.78em}
}
@media(max-width:360px){.poster-title{font-size:9.5vw}}

/* Mobile: oversized menu names with the same inline photo cue as desktop. */
@media(max-width:700px){
  .poster-title{font-size:clamp(38px,10.8vw,72px);line-height:1.14}
  .menu-highlight{display:inline-flex;align-items:center;max-width:100%;gap:.17em;padding:.02em .035em .07em;white-space:normal}
  .menu-name{flex:0 1 auto;min-width:0;white-space:normal;overflow-wrap:normal}
  .photo-cue{position:relative;inset:auto;align-self:center;flex:0 0 auto;flex-direction:column;gap:2px;margin-left:.15em;padding:0;transform:translateY(-.12em);font-size:9px;white-space:nowrap}
  .photo-cue>span{font-size:14px}
}
@media(max-width:360px){.poster-title{font-size:10.8vw}}

/* The hero's next action is a downward scroll, not a navigation button. */
.scroll-down{position:absolute;bottom:var(--space-6);left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:var(--space-3);padding:10px 12px 10px 18px;border:1px solid #d5dbc9;border-radius:var(--radius-pill);background:#ffffffb8;color:var(--color-ink);font-size:11px;font-weight:500;white-space:nowrap;transition:background var(--motion-fast),border-color var(--motion-fast)}
.scroll-down-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--color-highlight);font-size:19px;line-height:1}
.scroll-down:hover{background:var(--color-white);border-color:#96ad66}.scroll-down:hover .scroll-down-icon{background:#c2ff00}.scroll-down:focus-visible{outline-color:var(--color-brand)}
@media(max-width:700px){.visual{padding-bottom:160px}.scroll-down{bottom:32px}}

/* Quiet, text-only menu link at the bottom of the hero. */
.scroll-down{gap:8px;padding:10px 8px;border:0;border-radius:0;background:transparent;color:#737969;font-size:11px;font-weight:400}
.scroll-down-icon{display:inline;width:auto;height:auto;border-radius:0;background:transparent;font-size:15px}
.scroll-down:hover{background:transparent;color:var(--color-ink)}
.scroll-down:hover .scroll-down-icon{background:transparent}