/*
 * 0577 local-life visual sample 01 — homepage and search only.
 * Every rule is opt-in. Review at ?design=life on a loopback host.
 * Keep the shared catalogue, navigation and functional .06 baseline intact.
 */
html.life-design-sample:root {
  --contract-paper: #faf9f6;
  --contract-surface: #ffffff;
  --contract-soft: #eef2ec;
  --contract-food: #f6eee8;
  --contract-surface-soft: var(--contract-soft);
  --contract-surface-food: var(--contract-food);
  --contract-ink: #202f29;
  --contract-muted: #616e65;
  --contract-secondary: #536159;
  --contract-text-secondary: var(--contract-secondary);
  --contract-line: #dfe4db;
  --contract-jade: #28584a;
  --contract-jade-dark: #1e4639;
  --contract-travel: #28584a;
  --contract-brick: #a05238;
  --contract-gold: #806338;
  --paper: var(--contract-paper);
  --surface: var(--contract-surface);
  --paper-strong: var(--contract-soft);
  --ink: var(--contract-ink);
  --muted: var(--contract-muted);
  --line: var(--contract-line);
  --teal: var(--contract-jade);
  --brick: var(--contract-brick);
  --page-gutter: 20px;
  --contract-gutter: var(--page-gutter);
  --shadow-sm: none;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
  color-scheme: light;
  background: var(--paper);
}

html.life-design-sample:root body {
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

html.life-design-sample:root :is(a, button, input, select):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

html.life-design-sample:root :is(button, input, select) { font-family: var(--font-body); }
html.life-design-sample:root :is(button, select) { cursor: pointer; }
html.life-design-sample:root .container { width: min(100% - 2 * var(--page-gutter), 1120px); }

/* A quiet, consistent shell; five destinations and their meaning do not change. */
html.life-design-sample:root .site-header {
  position: sticky;
  top: 0;
  min-height: 68px;
  padding: 10px max(var(--page-gutter), calc((100vw - 1120px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(250, 249, 246, .98);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
html.life-design-sample:root .brand { gap: 10px; min-width: 0; }
html.life-design-sample:root .brand-mark {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 8px;
  background: var(--teal);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: none;
}
html.life-design-sample:root .brand strong { color: var(--ink); font-size: 17px; font-weight: 700; }
html.life-design-sample:root .brand small { margin-top: 2px; color: var(--muted); font-size: 10px; }
html.life-design-sample:root .header-actions .icon-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--teal);
  box-shadow: none;
}
html.life-design-sample:root .eyebrow {
  color: var(--brick);
  font-family: var(--font-body);
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: .08em;
}

/* Mobile-first introduction, with one honest local photograph. */
html.life-design-sample:root .local-life-hero {
  min-height: 0;
  padding: 28px 0 30px;
  border: 0;
  background: var(--paper);
}
html.life-design-sample:root .local-life-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  min-height: 0;
  gap: 0;
}
html.life-design-sample:root .local-life-hero-copy { display: contents; }
html.life-design-sample:root .local-life-hero-copy > .eyebrow { grid-row: 1; margin: 0 0 10px; }
html.life-design-sample:root .local-life-hero h1 {
  grid-row: 2;
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(29px, 8.2vw, 38px) !important;
  font-weight: 600;
  line-height: 1.35 !important;
  letter-spacing: -.025em;
  text-shadow: none;
}
html.life-design-sample:root .local-life-hero h1 > span { display: block; white-space: normal; }
html.life-design-sample:root .hero-subtitle {
  grid-row: 3;
  display: block !important;
  max-width: none;
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
html.life-design-sample:root .local-life-hero-photo {
  grid-row: 4;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0 0 18px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .local-life-hero-photo::after { display: none; }
html.life-design-sample:root .local-life-hero-photo .hero-image {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  object-fit: cover;
  object-position: 50% 50%;
  filter: none;
  transform: none;
}
html.life-design-sample:root .local-life-hero-photo figcaption {
  position: static;
  display: block;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .04em;
}
html.life-design-sample:root .hero-search {
  grid-row: 5;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 60px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 4px 4px 4px 14px;
  border: 1px solid #c8d4c7;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(32, 47, 41, .035);
}
html.life-design-sample:root .hero-search > svg { width: 20px; height: 20px; margin: 0; color: var(--teal); }
html.life-design-sample:root .hero-search:focus-within { outline: 2px solid var(--teal); outline-offset: 3px; }
html.life-design-sample:root .hero-search input[type=search] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
}
html.life-design-sample:root .hero-search input::placeholder { color: var(--muted); opacity: 1; }
html.life-design-sample:root .hero-search button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 5px;
  background: var(--teal);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}
html.life-design-sample:root .hero-search button > svg { display: none; }
html.life-design-sample:root .local-life-entry-list {
  grid-row: 6;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  border: 0;
}
html.life-design-sample:root .local-life-entry {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 88px;
  padding: 4px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  box-shadow: none;
}
html.life-design-sample:root .local-life-entry + .local-life-entry { border-left: 1px solid var(--line); }
html.life-design-sample:root .local-life-entry-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: var(--contract-soft);
  color: var(--teal);
}
html.life-design-sample:root .local-life-entry:first-child .local-life-entry-icon {
  background: var(--contract-food);
  color: var(--brick);
}
html.life-design-sample:root .local-life-entry-icon svg { width: 23px; height: 23px; }
html.life-design-sample:root .local-life-entry-copy { min-width: 0; }
html.life-design-sample:root .local-life-entry-copy strong {
  display: block;
  overflow: visible;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
html.life-design-sample:root .local-life-entry-copy small { display: none; }
html.life-design-sample:root .local-life-entry > svg { display: none; }

/* A compact editorial route, not another large nested card. */
html.life-design-sample:root .home-continue-band { padding: 0 0 24px; background: var(--paper); }
html.life-design-sample:root .home-continue-card {
  max-width: 1120px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--contract-soft);
  box-shadow: none;
}
html.life-design-sample:root .home-editorial-route-band {
  padding: 28px 0;
  border-block: 1px solid var(--line);
  background: var(--contract-soft);
}
html.life-design-sample:root .home-route-heading { display: block; margin: 0; }
html.life-design-sample:root .home-route-heading .eyebrow { margin: 0 0 8px; }
html.life-design-sample:root .home-route-heading h2 {
  max-width: 17em;
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -.025em;
  white-space: normal;
}
html.life-design-sample:root .home-route-heading > div > p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}
html.life-design-sample:root .home-route-heading > a { display: none; }
html.life-design-sample:root .home-route-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .home-route-sequence > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: 5px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  text-align: left;
}
html.life-design-sample:root .home-route-sequence > span:first-child { padding-left: 0; }
html.life-design-sample:root .home-route-sequence > span + span { border-left: 1px solid #ced9ca; }
html.life-design-sample:root .home-route-sequence > span > svg { width: 20px; height: 20px; color: var(--teal); }
html.life-design-sample:root .home-route-sequence strong { font-size: 14px; font-weight: 600; line-height: 1.5; }
html.life-design-sample:root .home-route-sequence small { color: var(--muted); font-size: 12px; line-height: 1.6; white-space: normal; }
html.life-design-sample:root .home-route-sequence > em {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid #ced9ca;
  color: var(--teal);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
html.life-design-sample:root .home-route-mobile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

/* Photo shelves: natural colours, consistent crops and visible scroll affordance. */
html.life-design-sample:root :is(.home-destination-band, .home-food-band) {
  padding: 30px 0 28px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
html.life-design-sample:root :is(.home-destination-heading, .home-food-heading) {
  gap: 12px;
  margin-bottom: 16px;
}
html.life-design-sample:root :is(.home-destination-heading, .home-food-heading) h2 {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.35;
}
html.life-design-sample:root :is(.home-destination-heading, .home-food-heading) > a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 44px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
}
html.life-design-sample:root .home-shelf-title-icon { display: none; }
html.life-design-sample:root :is(.home-destination-grid, .home-food-grid) {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 44%) !important;
  gap: 14px;
  width: calc(100% + var(--page-gutter));
  margin: 0;
  padding: 0 var(--page-gutter) 8px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #adbba9 transparent;
}
html.life-design-sample:root :is(.home-destination-card, .home-food-card) {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-snap-align: start;
}
html.life-design-sample:root :is(.home-destination-photo, .home-food-photo) {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: var(--contract-soft);
}
html.life-design-sample:root :is(.home-destination-photo, .home-food-photo) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
html.life-design-sample:root :is(.home-destination-main, .home-food-copy) { gap: 4px; padding: 10px 0 2px; }
html.life-design-sample:root :is(.home-destination-main, .home-food-copy) strong {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  white-space: normal;
}
html.life-design-sample:root :is(.home-destination-main, .home-food-copy) em { color: var(--muted); font-size: 12px; line-height: 1.6; }
html.life-design-sample:root .home-destination-main small { color: var(--teal); font-size: 12px; }
html.life-design-sample:root .home-card-arrow { display: none; }
html.life-design-sample:root .life-sample-scroll-hint { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

/* Further reading uses centred icons beside text, not icons sunk to the bottom. */
html.life-design-sample:root .home-secondary-band { padding: 30px 0; border: 0; background: var(--paper); }
html.life-design-sample:root .home-secondary-band .section-heading { margin: 0 0 16px; }
html.life-design-sample:root .home-secondary-band .section-heading h2 {
  font-family: var(--font-display);
  font-size: 24px !important;
  font-weight: 600;
  line-height: 1.4;
}
html.life-design-sample:root .home-secondary-band .section-heading > p { color: var(--muted); font-size: 14px; line-height: 1.65; }
html.life-design-sample:root .home-secondary-link-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
html.life-design-sample:root .home-secondary-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  grid-template-rows: auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 92px;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .home-secondary-link > .home-secondary-icon {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  align-self: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  border-radius: 8px;
  background: var(--contract-soft);
  color: var(--teal);
}
html.life-design-sample:root .home-secondary-icon svg { width: 22px; height: 22px; }
html.life-design-sample:root .home-secondary-copy { grid-column: 2; grid-row: 1; min-width: 0; }
html.life-design-sample:root .home-secondary-copy > span { margin: 0 0 2px; color: var(--muted); font-size: 12px; }
html.life-design-sample:root .home-secondary-copy > strong { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; }
html.life-design-sample:root .home-secondary-copy > p { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
html.life-design-sample:root .home-secondary-link > em {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-self: center;
  margin: 0;
  color: var(--teal);
  font-size: 0;
}
html.life-design-sample:root .home-secondary-link > em svg { width: 18px; height: 18px; }

/* Search is a reading tool: one input row, then types, then grouped results. */
/* The sticky header remains in document flow; do not reserve its height twice. */
html.life-design-sample:root .template-main { width: 100%; max-width: 820px; box-sizing: border-box; margin-inline: auto; padding: 22px var(--page-gutter) 32px; }
html.life-design-sample:root .template-hero,
html.life-design-sample:root .template-hero.is-text-only {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 6px 0 22px;
  padding-top: 6px !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .template-hero h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 28px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  letter-spacing: -.025em;
}
html.life-design-sample:root .template-content { display: block; width: 100%; margin: 0; padding: 0; }
html.life-design-sample:root .site-search-section { width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; }
html.life-design-sample:root .site-search-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 12px 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .site-search-form > label {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid #c8d4c7;
  border-radius: 8px;
  background: var(--surface);
}
html.life-design-sample:root .site-search-form > label > svg { position: static; inset: auto; width: 20px; height: 20px; color: var(--teal); }
html.life-design-sample:root .site-search-form input[type=search] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: none;
}
html.life-design-sample:root .site-search-form input::placeholder { color: var(--muted); opacity: 1; }
html.life-design-sample:root .site-search-form > select {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
  width: auto;
  min-width: 136px;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background-color: var(--paper);
  color: var(--teal);
  font-size: 16px;
  box-shadow: none;
}
html.life-design-sample:root .site-search-form > button {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--teal);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: none;
}
html.life-design-sample:root .site-search-suggestions { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 14px 0 20px; }
html.life-design-sample:root .site-search-suggestions > span { display: none; }
html.life-design-sample:root .site-search-suggestions > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #bdcdb9;
  text-underline-offset: 7px;
}
html.life-design-sample:root .site-search-summary { display: grid; gap: 4px; margin: 0 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
html.life-design-sample:root .site-search-summary > strong { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
html.life-design-sample:root .site-search-summary > span { color: var(--muted); font-size: 12px; line-height: 1.6; }
html.life-design-sample:root .site-search-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
html.life-design-sample:root .site-search-group h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: 18px !important;
  font-weight: 650;
  line-height: 1.5;
}
html.life-design-sample:root .site-search-group h2 > span { color: var(--muted); font-size: 12px; font-weight: 400; }
html.life-design-sample:root .site-search-group-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
html.life-design-sample:root .site-search-result {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html.life-design-sample:root .site-search-result::before { display: none; }
html.life-design-sample:root .site-search-result-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--contract-soft);
  color: var(--teal);
}
html.life-design-sample:root .site-search-result.is-food .site-search-result-icon { background: var(--contract-food); color: var(--brick); }
html.life-design-sample:root .site-search-result-icon svg { width: 18px; height: 18px; }
html.life-design-sample:root .site-search-result-copy { display: grid; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
html.life-design-sample:root .site-search-result-copy > .site-search-result-meta { color: var(--muted); font-size: 12px; line-height: 1.5; }
html.life-design-sample:root .site-search-result-copy > strong { margin: 0; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.5; }
/* Clamp only the summary. The reason that follows must not defeat this rule. */
html.life-design-sample:root .site-search-result-copy > strong + span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
html.life-design-sample:root .site-search-result-copy > .site-search-result-reason { color: var(--teal); font-size: 12px; font-weight: 400; line-height: 1.55; }
html.life-design-sample:root .site-search-result > svg { align-self: center; width: 16px; height: 16px; color: var(--muted); }
html.life-design-sample:root .site-search-empty { margin: 0; padding: 24px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
html.life-design-sample:root .site-search-empty > strong { color: var(--ink); font-size: 17px; line-height: 1.5; }
html.life-design-sample:root .site-search-empty p { color: var(--muted); font-size: 14px; }
html.life-design-sample:root .site-search-empty > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); }

html.life-design-sample:root .site-footer { padding: 24px 0 20px; border-top: 1px solid var(--line); background: #f0f1eb; }
html.life-design-sample:root .footer-compact { display: grid; gap: 14px; }
html.life-design-sample:root .footer-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 10px; }
html.life-design-sample:root .footer-identity strong { color: var(--ink); font-size: 16px; line-height: 1.5; }
html.life-design-sample:root .footer-identity span { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
html.life-design-sample:root .footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html.life-design-sample:root .footer-legal :is(span, a) { margin: 0; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.65; }
html.life-design-sample:root .footer-essential-links { display: flex; flex-wrap: wrap; gap: 0 20px; margin: 0; }
html.life-design-sample:root .footer-essential-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); font-size: 12px; font-weight: 500; }
html.life-design-sample:root .mobile-tab-bar { border-top: 1px solid var(--line); background: rgba(250, 249, 246, .98); box-shadow: 0 -3px 16px rgba(32, 47, 41, .035); }
html.life-design-sample:root .mobile-tab-bar > a { color: var(--muted); font-size: 11px !important; font-weight: 500 !important; }
html.life-design-sample:root .mobile-tab-bar > a.is-active { color: var(--teal); font-weight: 700 !important; }
html.life-design-sample:root .mobile-tab-bar > a::before { display: none; }
html.life-design-sample:root .mobile-tab-bar > a svg { width: 22px !important; height: 22px !important; stroke-width: 1.65; }

@media (min-width: 701px) {
  html.life-design-sample:root { --page-gutter: 32px; }
  html.life-design-sample:root .local-life-hero { padding: 48px 0; }
  html.life-design-sample:root .local-life-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 40px; align-items: start; }
  html.life-design-sample:root .local-life-hero-copy > :is(.eyebrow, h1, .hero-subtitle, .hero-search, .local-life-entry-list) { grid-column: 1; }
  html.life-design-sample:root .local-life-hero h1 { font-size: clamp(32px, 3.8vw, 48px) !important; }
  html.life-design-sample:root .hero-search { grid-row: 4; }
  html.life-design-sample:root .local-life-entry-list { grid-row: 5; margin-top: 26px; }
  html.life-design-sample:root .local-life-hero-photo { grid-column: 2; grid-row: 1 / span 5; margin: 0; align-self: stretch; }
  html.life-design-sample:root .local-life-hero-photo .hero-image { height: calc(100% - 27px); min-height: 320px; max-height: 470px; }
  html.life-design-sample:root .home-editorial-route-band { padding: 32px 0; }
  html.life-design-sample:root .home-route-heading { display: flex; justify-content: space-between; }
  html.life-design-sample:root .home-route-heading > a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); }
  html.life-design-sample:root .home-route-mobile-link { display: none; }
  html.life-design-sample:root .home-route-sequence { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(140px, .65fr); align-items: center; }
  html.life-design-sample:root .home-route-sequence > span { padding: 0 22px; }
  html.life-design-sample:root .home-route-sequence > em { grid-column: 4; margin: 0; padding: 0 0 0 22px; border: 0; }
  html.life-design-sample:root :is(.home-destination-band, .home-food-band, .home-secondary-band) { padding: 40px 0; }
  html.life-design-sample:root :is(.home-destination-grid, .home-food-grid) { grid-auto-columns: minmax(0, 24%) !important; gap: 18px; }
  html.life-design-sample:root .home-secondary-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  html.life-design-sample:root .template-main { padding-top: 34px; }
  html.life-design-sample:root .site-search-form { grid-template-columns: minmax(0, 1fr) 152px 76px; grid-template-rows: auto; }
  html.life-design-sample:root .site-search-form > select { grid-column: 2; grid-row: 1; width: 100%; min-height: 52px; }
  html.life-design-sample:root .site-search-form > button { grid-column: 3; width: 76px; }
  html.life-design-sample:root .footer-legal { flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  html.life-design-sample:root .life-sample-scroll-hint { font-size: 12px; }
}

@media (max-width: 359px) {
  html.life-design-sample:root { --page-gutter: 16px; }
  html.life-design-sample:root .local-life-entry-copy strong { font-size: 13px; }
  html.life-design-sample:root .local-life-entry { padding-inline: 3px; }
  html.life-design-sample:root .hero-search { gap: 6px; padding-left: 10px; }
  html.life-design-sample:root .home-route-heading h2 { font-size: 22px !important; }
  html.life-design-sample:root .template-hero h1 { font-size: 25px !important; }
  html.life-design-sample:root .site-search-result { grid-template-columns: 28px minmax(0, 1fr) 14px; gap: 9px; }
  html.life-design-sample:root .site-search-result-icon { width: 28px; height: 28px; }
  html.life-design-sample:root .site-search-suggestions { column-gap: 14px; }
}

@media (hover: hover) {
  html.life-design-sample:root .local-life-entry:hover { background: var(--contract-soft); }
  html.life-design-sample:root .site-search-result:hover { background: var(--contract-soft); }
  html.life-design-sample:root .home-secondary-link:hover { background: var(--contract-soft); }
  html.life-design-sample:root :is(.hero-search button, .site-search-form > button):hover { background: #1e4639; }
}

@media (prefers-reduced-motion: reduce) {
  html.life-design-sample:root *, html.life-design-sample:root *::before, html.life-design-sample:root *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}