/* ============================================================
   Shared site chrome for the standalone custom pages
   (Doodle Playground, Bakery Map). Recreates the main site's
   fixed header — hamburger + "Laura Gao" wordmark + tagline —
   and the two-row overlay menu, matched to the Squarespace
   theme (din-condensed-web type, paper ground, ink lines).
   Injected by lg-chrome.js.
   ============================================================ */
:root {
  --lgc-paper: #faf7f1;
  --lgc-ink: #1a1a1a;
  --lgc-accent: #c65a35;
}

/* ---- fixed header ---- */
.lg-chrome-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 16px;
  /* the same side padding as the site header (lg-custom.css), or the wordmark
     jumps sideways when moving between a standalone page and the rest */
  padding: 14px 3vw;
  background: rgba(250, 247, 241, 0.97);
  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.1);
}
.lg-chrome-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 24px; height: 18px;
  display: inline-flex;
  align-items: center;
}
.lg-chrome-toggle svg { width: 24px; height: 18px; display: block; overflow: visible; }
.lg-chrome-toggle line {
  stroke: var(--lgc-ink);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.lg-chrome-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.lg-chrome-brand a { text-decoration: none; }
.lg-chrome-wordmark,
.lg-chrome-tagline {
  font-family: din-condensed-web, "Arial Narrow", sans-serif;
  color: var(--lgc-ink);
  line-height: 1;
}
.lg-chrome-wordmark { font-size: 30px; letter-spacing: 0.01em; }
.lg-chrome-tagline { font-size: 26px; white-space: nowrap; }
@media screen and (max-width: 680px) {
  .lg-chrome-header { padding: 14px 3vw; }
  .lg-chrome-tagline { display: none; }
}

/* ---- overlay menu ---- */
.lg-chrome-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--lgc-paper);
  display: grid;
  place-content: center;
  padding: 116px 24px 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
body.lg-chrome-open { overflow: hidden; }
body.lg-chrome-open .lg-chrome-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
/* hamburger morphs into an X while open */
body.lg-chrome-open .lg-chrome-toggle line.lg-c-top { transform: translateY(7px) rotate(45deg); }
body.lg-chrome-open .lg-chrome-toggle line.lg-c-mid { opacity: 0; }
body.lg-chrome-open .lg-chrome-toggle line.lg-c-bot { transform: translateY(-7px) rotate(-45deg); }

/* Four columns, 936px wide, 30px type on a 30px line: the same shape and
   type as the site's own overlay menu, so the two are indistinguishable. */
.lg-chrome-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  column-gap: 24px;
  row-gap: 45px;
  align-items: center;
  justify-items: center;
  max-width: 936px;
  margin: 0 auto;
}
.lg-chrome-nav a {
  font-family: din-condensed-web, "Arial Narrow", sans-serif;
  font-size: 30px;
  letter-spacing: normal;
  line-height: 30px;
  color: var(--lgc-ink);
  text-decoration: none;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
}
.lg-chrome-nav a:hover { color: var(--lgc-accent); }
.lg-chrome-nav a.lg-c-active {
  color: var(--lgc-accent);
  box-shadow: inset 0 -3px 0 var(--lgc-accent);
}
@media screen and (max-width: 720px) {
  .lg-chrome-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 6vw;
    row-gap: 2.2vh;
  }
}

/* clear the fixed header for page content */
body.lg-chrome-pad { padding-top: 58px; }

/* ---- doodle lane in this header ----
   The wandering doodles are drawn by lg-doodles.js, whose styles live in
   lg-custom.css. Standalone pages do not load that file, so the few rules
   the lane needs are repeated here. Without them the doodles are built but
   have no size or position, which is why they were missing from this header. */
.lg-chrome-header .lg-lane-top {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 46px;
  width: min(220px, 28%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
body.lg-chrome-open .lg-chrome-header .lg-lane-top { opacity: 0; }
.lg-chrome-header .lg-doodle {
  position: absolute;
  left: 0;
  bottom: 9px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  will-change: transform;
}
.lg-chrome-header .lg-doodle svg { display: block; transition: transform 0.15s ease; }
.lg-chrome-header .lg-doodle-link { pointer-events: auto; cursor: pointer; text-decoration: none; }
.lg-chrome-header .lg-doodle-link:hover svg { transform: translateY(-2px) scale(1.12) !important; }
.lg-chrome-header .lg-doodle-link:focus-visible { outline: 2px solid var(--lgc-accent); outline-offset: 3px; border-radius: 4px; }
/* the speech bubble, hanging below since the header is at the top of the window */
.lg-chrome-header .lg-doodle-say {
  position: absolute;
  left: 50%;
  top: 100%;
  translate: calc(-50% + var(--lg-say-nudge, 0px)) 8px;
  padding: 4px 10px 5px;
  border-radius: 12px;
  background: var(--lgc-ink, #1a1a1a);
  color: #fff;
  font: 600 11.5px/1.2 "Open Sans", -apple-system, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  transition: opacity .14s ease, scale .14s ease, translate .14s ease;
}
.lg-chrome-header .lg-doodle-say::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 1px;
  border: 5px solid transparent;
  border-bottom-color: var(--lgc-ink, #1a1a1a);
  border-top: 0;
}
.lg-chrome-header .lg-doodle-link:hover .lg-doodle-say,
.lg-chrome-header .lg-doodle-link:focus-visible .lg-doodle-say {
  opacity: 1;
  scale: 1;
  translate: calc(-50% + var(--lg-say-nudge, 0px)) 4px;
}