/* Brunchtime, shared styles */
:root{
  --canvas:#F4EFE4;
  --panel:#EBE4D4;
  --panel-2:#E3DAC6;
  --line:rgba(43,33,26,.14);
  --line-strong:rgba(43,33,26,.42);
  --accent:#A3261B;
  --accent-hover:#861D14;
  --accent-muted:rgba(163,38,27,.14);
  --simit:#C9631C;
  --text-secondary:#5F5246;
  --text-primary:#2B211A;
  --ease-out:cubic-bezier(.22,.8,.24,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --f-display:"Gloock",Georgia,"Times New Roman",serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;overflow-x:hidden;overflow-x:clip;background:var(--canvas);color:var(--text-primary);font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;animation:pageIn .9s var(--ease-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--accent);color:var(--canvas)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--text-primary);color:var(--canvas);padding:10px 16px;border-radius:999px;text-decoration:none;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}

/* environment layer: grain + slow warm glow */
.env{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.env::before{content:"";position:absolute;width:70vmax;height:70vmax;left:-20vmax;top:-25vmax;border-radius:50%;background:radial-gradient(circle,rgba(201,99,28,.10),rgba(201,99,28,0) 65%);animation:glow 70s ease-in-out infinite alternate;animation-delay:-20s}
.env::after{content:"";position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .13 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes glow{from{transform:translate(0,0)}to{transform:translate(55vw,45vh)}}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gutter);transition:background-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.nav.solid{background:rgba(244,239,228,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:auto}
.brand span{font-family:var(--f-display);font-size:21px;letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:14px;font-weight:500;text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease-out)}
.nav-links a:hover{color:var(--text-primary)}
.nav-right{display:flex;align-items:center;gap:18px}

/* signature: the çay glass fills as you scroll */
.glass{width:22px;height:34px;flex:none}
.glass .tea{transform-origin:50% 100%;transform:scaleY(var(--fill,0));transition:transform .25s linear}
.glass .outline{fill:none;stroke:var(--text-primary);stroke-width:1.4;stroke-linejoin:round}

/* buttons */
.btn{--b:var(--accent);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid var(--b);background:var(--b);color:#FBF7EF;font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--ease-out),border-color .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.btn:hover{--b:var(--accent-hover);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text-primary);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--text-primary);background:rgba(43,33,26,.04)}
.btn.sm{min-height:40px;padding:0 18px;font-size:14px}
.btn .short{display:none}
@media (max-width:520px){.nav .btn .long{display:none}.nav .btn .short{display:inline}.nav-right{gap:12px}}
.btn svg{width:16px;height:16px}
@media (pointer:coarse){.btn{min-height:48px}.btn.sm{min-height:44px}}

.kicker{font-family:var(--f-mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);display:inline-flex;align-items:center;gap:10px}
.kicker::before{content:"";width:22px;height:1px;background:currentColor}
.display{font-family:var(--f-display);font-weight:400;line-height:1.04;letter-spacing:-.01em;margin:0}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:0;padding:56px var(--gutter) 40px}
.foot-in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:32px;align-items:start}
.foot h3{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:500;margin:0 0 12px}
.foot p,.foot li{margin:0;font-size:15px;color:var(--text-primary)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none;border-bottom:1px solid var(--line-strong);transition:border-color .3s var(--ease-out)}
.foot a:hover{border-color:var(--accent)}
.foot .brand img{width:64px}
.foot-base{max-width:var(--maxw);margin:40px auto 0;padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-secondary)}
@media (max-width:860px){.foot-in{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-in{grid-template-columns:1fr}}

/* reveal entrances */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.rv.in{opacity:1;transform:none}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

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

/* mobile menu */
.nav-links a[aria-current="page"]{color:var(--text-primary)}
.menu-btn{display:none;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-strong);background:transparent;color:var(--text-primary);cursor:pointer;place-items:center;padding:0;transition:border-color .3s var(--ease-out),color .5s var(--ease-out)}
.menu-btn i{position:relative;display:block;width:16px;height:10px}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;border-radius:2px;transition:transform .4s var(--ease-out)}
.menu-btn i::before{top:1px}
.menu-btn i::after{bottom:1px}
.nav.open .menu-btn i::before{transform:translateY(3.75px) rotate(45deg)}
.nav.open .menu-btn i::after{transform:translateY(-3.75px) rotate(-45deg)}
.nav.dark .menu-btn{color:#F4EDE0;border-color:rgba(244,237,224,.4)}
@media (max-width:980px){
  .menu-btn{display:grid}
  .nav .nav-links{display:none}
  .nav.open{background:rgba(244,239,228,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
  .nav.open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:absolute;top:calc(100% + 8px);left:auto;right:12px;width:min(360px,calc(100vw - 24px));padding:10px;background:var(--canvas);border-radius:20px;box-shadow:0 24px 60px -24px rgba(43,33,26,.5),0 0 0 1px var(--line);animation:menuIn .35s var(--ease-out) both}
  .nav.open .nav-links a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:12px;font-size:17px;color:var(--text-primary)!important}
  .nav.open .nav-links a:hover,.nav.open .nav-links a[aria-current="page"]{background:var(--panel)}
  .nav.open.dark .brand span{color:var(--text-primary)}
  .nav.open.dark .menu-btn{color:var(--text-primary);border-color:var(--line-strong)}
  .nav.open.dark .glass .outline{stroke:var(--text-primary)}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:520px){.brand span{display:none}.nav-right{gap:10px}}