/* evokekitchen.com (owner, 2026-09-25; a real site 2026-10-05). Since 2026-11-09 the app's lighter look
   (the owner, from her phone: "The website has that old dark look. This needs to be updated to the lighter
   look."; her choice B, the wordmark as the app writes it): the app's ivory ground, ink type, the wordmark in
   Inter 400 with open letters in its warm charcoal, Inter Tight for everything else, gold at most once.
   One stylesheet for every page; no script anywhere. */
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:block}
@font-face{font-family:"Inter Tight";src:url(/fonts/inter-tight.woff2) format("woff2");font-weight:300 600;font-style:normal;font-display:block}
*{box-sizing:border-box}
html{background:#F7EFE7;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;
  background:#F7EFE7;
  color:#171717;font-family:"Inter Tight",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:400;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  padding:max(20px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom))}
a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .35s ease}
a:hover,a:focus-visible,a[aria-current="page"]{border-bottom-color:currentColor;outline:none}
a.line,main p a,main address a{border-bottom-color:rgba(31,31,31,.45)}
a.line:hover,main p a:hover{border-bottom-color:currentColor}

.top{width:100%;max-width:1040px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.top .mark{font-family:"Inter","Inter Tight",system-ui,sans-serif;font-size:24px;font-weight:400;letter-spacing:.09em;line-height:1.2;color:#51473E}
.top .mark[aria-current="page"]{border-bottom-color:transparent}
.top nav{display:flex;gap:22px;font-size:16px}
.top nav a{opacity:.86}

main{flex:1;width:100%;max-width:38em;padding:64px 0 72px;animation:rise 1.2s cubic-bezier(.2,.6,.2,1) both}
h1{font-size:clamp(40px,10vw,56px);font-weight:600;letter-spacing:-.035em;line-height:1.05;margin:0 0 28px}
h2{font-size:21px;font-weight:500;letter-spacing:-.01em;line-height:1.3;margin:44px 0 8px}
p,address,dl{margin:0 0 14px;opacity:.86}
address{font-style:normal}
.lead{font-size:clamp(20px,5vw,23px);line-height:1.5;opacity:1}
.say{margin:18px 0}
.say div{display:grid;grid-template-columns:1fr;gap:0;padding:10px 0;border-top:1px solid rgba(31,31,31,.14)}
.say dt{font-weight:500}
.say dd{margin:0;opacity:.86}

/* The home page: the end card first, then what evoke does. */
.home main{max-width:1040px;padding-top:9vh}
.hero{text-align:center;max-width:34em;margin:0 auto}
.hero h1{font-family:"Inter","Inter Tight",system-ui,sans-serif;font-size:clamp(56px,16vw,104px);font-weight:400;letter-spacing:.09em;line-height:1;margin:0;white-space:nowrap;color:#51473E}
.hero h1 .tm{display:inline-block;font-size:.19em;font-weight:500;letter-spacing:0;line-height:0;vertical-align:baseline;position:relative;top:-2.05em;margin-left:.08em}
.tagline{font-size:clamp(23px,6vw,34px);letter-spacing:-.015em;line-height:1.25;margin:26px 0 0;opacity:1}
.second{font-size:clamp(18px,4.6vw,22px);margin:10px 0 0}
.intro{font-size:clamp(18px,4.6vw,21px);margin:38px auto 0;max-width:27em}
.intro + .intro{margin-top:12px}
/* The one gold on the site: the line the brand is built on. A deeper gold than the dark site's amber, which is too faint to read on ivory. */
.amber{color:#8C6A22;opacity:1;font-weight:400}
/* Photographs (owner, 2026-10-05): the site's own files, cropped to a band, never stretched. */
.photo{margin:48px 0 0;border-radius:14px;overflow:hidden;background:#EEE8DF}
.photo img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 50%}
.photo.wide{margin:64px auto 0;max-width:38em}
.does{display:grid;grid-template-columns:1fr;gap:0;margin:72px auto 0;max-width:38em}
.does div{border-top:1px solid rgba(31,31,31,.14);padding:26px 0 14px}
.does h2{margin:0 0 8px}
/* The waiting list (x027, 2026-11-09): the site's one form. White fields and an ink button on ivory, no gold; fields 17px so a phone does not zoom. */
.join{margin:44px auto 0;max-width:30em}
.join h2{margin:0 0 10px;text-align:center}
.join .what{text-align:center;margin:0 0 14px;opacity:1}
.join form{display:grid;gap:8px}
.join label{font-size:15px;opacity:.86;margin-top:10px}
.join .optional{opacity:.7}
.join input{font:inherit;font-size:17px;color:#171717;background:#FFFDFA;border:1px solid #D9D1C6;border-radius:10px;padding:12px 14px;min-height:48px;width:100%;-webkit-appearance:none;appearance:none}
.join input:focus-visible{outline:2px solid #171717;outline-offset:2px}
.join button{font:inherit;font-size:17px;font-weight:500;color:#F7EFE7;background:#1F1F1F;border:0;border-radius:10px;padding:12px 18px;min-height:48px;margin-top:18px;cursor:pointer}
.join button:focus-visible{outline:2px solid #171717;outline-offset:3px}
.join .terms{font-size:14px;line-height:1.5;opacity:.7;margin:18px 0 0}
/* A field people never see; a machine that fills it is turned away. Off the page, not display:none, which machines skip. */
.leave-empty{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.maker{text-align:center;margin:56px auto 0;max-width:34em}
.quiet{font-size:15px;opacity:.6;margin-top:22px}

footer{width:100%;max-width:1040px;font-size:13px;line-height:1.5;text-align:center;border-top:1px solid rgba(31,31,31,.1);padding-top:22px}
footer p{margin:0 0 4px;opacity:.6}
footer a{border-bottom-color:rgba(31,31,31,.45)}

@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main{animation:none}a{transition:none}}
@media (min-width:560px){.say div{grid-template-columns:15em 1fr;gap:20px}}
@media (min-width:900px){
  body{padding-left:40px;padding-right:40px}
  main{padding-top:88px}
  .tagline{margin-top:32px}
  .photo.wide{max-width:none;margin-top:88px}
  .photo.wide img{aspect-ratio:12/5}
  .does{grid-template-columns:1fr 1fr;column-gap:64px;max-width:none;margin-top:80px}
  footer{font-size:14px}
}