@layer reset, tokens, shell, components, states, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; }
  a { color: inherit; }
  h1, h2, h3, p, ul, ol, dl, figure { margin-top: 0; }
  address { font-style: normal; }
  [hidden] { display: none !important; }
}

@layer tokens {
  :root {
    --canopy: #8c2f39;
    --canopy-dark: #642029;
    --teal: #006f7a;
    --teal-dark: #004e56;
    --signal: #e0c35a;
    --paper: #f1f3ee;
    --paper-deep: #e3e6de;
    --white: #fffef9;
    --ink: #172322;
    --muted: #66706c;
    --line: #b9c0b8;
    --shade: #d5d9d1;
    --focus: #ffcf33;
    --display: "Anek Latin", "Arial Narrow", Arial, sans-serif;
    --body: "Mukta", "Noto Sans", Arial, sans-serif;
    --gutter: clamp(1rem, 3vw, 3rem);
    --max: 90rem;
  }
}

@layer shell {
  body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.05rem; line-height: 1.5; overflow-wrap: anywhere; }
  body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(12.5% - 1px), rgba(23,35,34,.035) calc(12.5% - 1px), rgba(23,35,34,.035) 12.5%); }
  h1, h2, h3, .brand-name, .ranking-title { font-family: var(--display); font-stretch: expanded; letter-spacing: -.025em; line-height: 1.05; }
  h1 { max-width: 20ch; margin-bottom: 1rem; font-size: clamp(2.25rem, 5vw, 5rem); }
  h2 { font-size: clamp(1.6rem, 3vw, 2.7rem); }
  h3 { font-size: 1.35rem; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
  .skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-160%); background: var(--focus); color: var(--ink); padding: .6rem 1rem; font-weight: 800; }
  .skip-link:focus { transform: translateY(0); }
  .site-canopy { position: sticky; top: 0; z-index: 50; min-height: 4.5rem; background: var(--canopy); color: var(--white); border-bottom: .45rem solid var(--signal); }
  .canopy-inner { width: min(100%, var(--max)); min-height: 4rem; margin: auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.25rem; }
  .brand { min-height: 3.25rem; display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
  .brand-name { font-size: 1.55rem; font-weight: 750; letter-spacing: -.05em; }
  .brand-name span { color: var(--signal); }
  .understory-mark { width: 2.4rem; height: 2.4rem; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: end; gap: .14rem; padding: .25rem; background: var(--white); }
  .understory-mark i { display: block; background: var(--canopy); height: 75%; }
  .understory-mark i:first-child { height: 100%; background: var(--teal); }
  .understory-mark i:last-child { height: 58%; background: var(--signal); }
  .understory-mark--small { width: 2rem; height: 2rem; }
  .city-label { color: rgba(255,255,255,.78); font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
  .site-nav { margin-left: auto; display: flex; align-items: stretch; align-self: stretch; }
  .site-nav a { min-height: 3.9rem; padding: 0 .8rem; display: inline-flex; align-items: center; border-left: 1px solid rgba(255,255,255,.18); text-decoration: none; font-weight: 700; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--canopy-dark); }
  .site-nav .business-nav-cta { background: var(--signal); color: var(--ink); }
  .nav-toggle { display: none; margin-left: auto; min-height: 2.75rem; border: 1px solid rgba(255,255,255,.5); background: transparent; color: inherit; padding: .55rem .75rem; font-weight: 800; }
  main { min-height: 65vh; }
  .site-footer { width: min(100%, var(--max)); margin: 5rem auto 0; padding: 2.2rem var(--gutter); display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr auto; gap: 2rem; align-items: end; border-top: .7rem solid var(--teal); background: var(--ink); color: var(--white); }
  .footer-brand { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; align-items: center; }
  .footer-brand .understory-mark { grid-row: 1 / 3; }
  .footer-brand span:last-child { color: #bfc8c3; font-size: .9rem; }
  .site-footer nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
  .site-footer a { text-underline-offset: .25rem; }
}

@layer components {
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .scope-tab { width: max-content; max-width: 100%; margin-bottom: .8rem; padding: .25rem .6rem; background: var(--teal); color: var(--white); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
  .home-workspace { width: min(100%, var(--max)); margin: 0 auto; padding: clamp(1.4rem, 4vw, 3.2rem) var(--gutter) 1.5rem; display: grid; grid-template-columns: minmax(17rem, .72fr) minmax(20rem, 1.28fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
  .home-workspace h1 { margin-bottom: .6rem; font-size: clamp(2.2rem, 4.8vw, 4.8rem); }
  .home-lede { max-width: 58ch; margin-bottom: 0; color: var(--muted); }
  .directory-search { border-top: .65rem solid var(--canopy); padding: 1rem 1rem 1.2rem; background: var(--white); box-shadow: 8px 8px 0 var(--shade); }
  .directory-search label { display: block; margin-bottom: .45rem; font-weight: 800; }
  .search-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; border-bottom: 3px solid var(--ink); }
  .search-line > span { color: var(--canopy); font-family: var(--display); font-size: 2rem; }
  .search-line input { min-width: 0; min-height: 3.3rem; border: 0; background: transparent; color: var(--ink); font-size: clamp(1rem, 2vw, 1.25rem); }
  .search-line input:focus { outline: 0; }
  .search-line:focus-within { box-shadow: 0 4px 0 var(--focus); }
  kbd { border: 1px solid var(--line); padding: .1rem .45rem; background: var(--paper); font-family: inherit; font-size: .8rem; }
  .search-status { min-height: 1.5rem; margin: .65rem 0 0; color: var(--muted); font-size: .9rem; }
  .taxonomy-elevation, .ranking-openings, .index-shell, .ordered-street, .decision-shelter, .business-profile, .portal-shell, .trust-shell { width: min(100%, var(--max)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
  .taxonomy-elevation { padding-top: 1.2rem; padding-bottom: 1.5rem; }
  .rail-heading { display: grid; grid-template-columns: minmax(9rem, .5fr) minmax(14rem, 1fr) auto; gap: 1rem; align-items: baseline; margin-bottom: 1rem; border-top: .6rem solid var(--teal); padding-top: .65rem; }
  .rail-heading--red { border-color: var(--canopy); }
  .rail-heading p, .rail-heading h2 { margin: 0; }
  .rail-heading p { color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
  .rail-heading a { font-weight: 800; text-underline-offset: .22rem; }
  .sign-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .hanging-sign { min-width: 0; min-height: 4rem; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.45); }
  .hanging-sign:nth-child(4n+2) { box-shadow: inset 0 .3rem 0 var(--signal); }
  .hanging-sign:nth-child(4n+3) { box-shadow: inset 0 .3rem 0 var(--teal); }
  .hanging-sign > a, .hanging-sign > span:not(.sign-index) { min-width: 0; min-height: 3.9rem; padding: .7rem .85rem; display: flex; align-items: center; font-family: var(--display); font-size: 1.12rem; font-weight: 720; text-decoration-thickness: 1px; text-underline-offset: .18rem; }
  .sign-index { align-self: stretch; display: grid; place-items: center; background: var(--ink); color: var(--white); font-size: .7rem; font-weight: 800; writing-mode: vertical-rl; }
  .hanging-sign small { grid-column: 2; padding: 0 .85rem .55rem; color: var(--muted); }
  .city-aperture { width: min(calc(100% - (var(--gutter) * 2)), calc(var(--max) - (var(--gutter) * 2))); margin: 1.5rem auto 2.5rem; overflow: hidden; border-left: .8rem solid var(--signal); background: var(--ink); }
  .city-aperture img { width: 100%; height: 100%; object-fit: cover; }
  .city-aperture--wide { height: clamp(12rem, 22vw, 20rem); }
  .city-aperture--wide img { object-position: center 58%; }
  .city-aperture--night { height: clamp(13rem, 25vw, 22rem); border-color: var(--canopy); }
  .city-aperture--night img { object-position: center 76%; }
  .ranking-openings { padding-top: 1rem; }
  .ranking-rows, .category-ranking-street { border-top: 3px solid var(--ink); }
  .ranking-row { min-height: 6.2rem; display: grid; grid-template-columns: 3.5rem 8rem minmax(12rem, 1fr) auto 2.4rem; align-items: center; gap: 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.48); text-decoration: none; transition: background 160ms ease, transform 160ms ease; }
  a.ranking-row:hover { background: var(--white); transform: translateX(.3rem); }
  .ranking-row img, .ranking-image-fallback { width: 8rem; height: 5.3rem; object-fit: cover; background: var(--shade); }
  .ranking-image-fallback { background: linear-gradient(135deg, var(--shade) 50%, var(--paper-deep) 50%); }
  .ranking-number { align-self: stretch; display: grid; place-items: center; background: var(--teal); color: var(--white); font-weight: 850; }
  .ranking-title { padding: .8rem 0; font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 760; }
  .ranking-count { color: var(--muted); white-space: nowrap; }
  .row-arrow { font-size: 1.5rem; color: var(--canopy); }
  .market-passage { width: min(100%, var(--max)); margin: 3rem auto; padding: 0 var(--gutter); display: grid; grid-template-columns: minmax(14rem, .52fr) minmax(18rem, .48fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
  .market-passage .city-aperture { width: 100%; height: min(32rem, 54vw); margin: 0; border-color: var(--teal); }
  .market-passage .city-aperture img { object-position: center; }
  .market-passage h2 { max-width: 13ch; }
  .market-passage p:last-child { max-width: 45ch; color: var(--muted); }

  .ranking-context { width: min(100%, var(--max)); margin: 0 auto 2rem; padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: clamp(1.5rem, 4vw, 4rem); }
  .ranking-context h1 { font-size: clamp(2.4rem, 5vw, 5.2rem); }
  .ranking-intro { max-width: 68ch; font-size: 1.08rem; }
  .ranking-intro p { margin-bottom: .75rem; }
  .result-count { width: max-content; margin-top: 1.2rem; padding: .45rem .7rem; border-left: .4rem solid var(--signal); background: var(--white); }
  .featured-opening { min-height: 16rem; border-top: .8rem solid var(--canopy); background: var(--shade); }
  .featured-opening:empty { display: none; }
  .featured-opening img { width: 100%; height: 100%; max-height: 25rem; object-fit: cover; }
  .business-list { margin: 0; padding: 0; list-style: none; border-top: 4px solid var(--ink); }
  .shopfront { container-type: inline-size; display: grid; grid-template-columns: 4rem minmax(15rem, 28%) minmax(0, 1fr); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.38); }
  .shopfront:not(:has(.shopfront-image)) { grid-template-columns: 4rem minmax(0, 1fr); }
  .shopfront:not(:has(.shopfront-image)) .shopfront-body { grid-column: 2; }
  .shopfront:nth-child(even) { background: rgba(224,195,90,.08); }
  .rank-support { background: var(--ink); color: var(--white); display: grid; place-items: start center; padding-top: 1rem; font-weight: 900; }
  .shopfront:first-child .rank-support { background: var(--canopy); }
  .shopfront-image { padding: 1rem; }
  .shopfront-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
  .shopfront-body { min-width: 0; padding: 1rem clamp(1rem, 3vw, 2rem) 1.5rem; border-left: 1px solid var(--line); }
  .shopfront-fascia { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .8rem; border-bottom: 3px solid var(--ink); }
  .shopfront-fascia h2 { max-width: 28ch; margin: 0; font-size: clamp(1.45rem, 2.6vw, 2.15rem); }
  .shopfront-fascia p { margin: .35rem 0 0; color: var(--muted); }
  .metric-line { display: flex; align-items: center; gap: .55rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .rating { color: var(--canopy-dark); font-weight: 900; }
  .rating > span[aria-hidden] { color: #a36b00; }
  .shopfront address, .business-front address { margin: .9rem 0; color: var(--muted); font-size: .94rem; }
  .fit-list { margin-top: 1rem; }
  .fit-list > strong { display: block; margin-bottom: .35rem; color: var(--teal-dark); }
  .fit-list ul, .highlight-list ul { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 0; padding: 0; list-style: none; }
  .fit-list li, .highlight-list li { position: relative; padding-left: .85rem; }
  .fit-list li::before, .highlight-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: .42rem; height: .42rem; background: var(--signal); }
  .business-prose { max-width: 74ch; margin-top: 1rem; }
  .business-prose p { margin-bottom: .75rem; }
  .js .js-clamp:not([data-expanded="true"]) { max-height: 9.6rem; overflow: hidden; mask-image: linear-gradient(#000 72%, transparent); }
  .clamp-toggle { min-height: 2.75rem; margin-top: .25rem; border: 0; border-bottom: 2px solid currentColor; background: transparent; color: var(--teal-dark); padding: .35rem 0; font-weight: 850; }
  .highlight-list { margin-top: 1rem; padding: .8rem 1rem; border-left: .4rem solid var(--signal); background: var(--white); }
  .highlight-list > strong { display: block; margin-bottom: .4rem; }
  .profile-link { display: inline-flex; min-height: 2.75rem; align-items: center; gap: .5rem; margin-top: 1rem; color: var(--canopy-dark); font-weight: 850; text-underline-offset: .25rem; }
  .decision-shelter { margin-top: 3rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem clamp(2rem, 6vw, 6rem); }
  .decision-shelter > div { border-top: .55rem solid var(--teal); padding-top: 1rem; }
  .decision-shelter > .method-note { border-color: var(--canopy); }
  .decision-shelter h2 { font-size: clamp(1.55rem, 2.5vw, 2.25rem); }
  .services-lane article { display: grid; grid-template-columns: minmax(8rem, .35fr) 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
  .services-lane article h3, .services-lane article p { margin: 0; }
  .choose-lane ol { padding-left: 1.4rem; }
  .choose-lane li { padding: .45rem 0 .45rem .5rem; border-bottom: 1px solid var(--line); }
  .faq-lane { grid-column: 1 / -1; }
  .faq-lane details { border-top: 1px solid var(--line); }
  .faq-lane details:last-child { border-bottom: 1px solid var(--line); }
  .faq-lane summary { min-height: 3.5rem; display: flex; align-items: center; cursor: pointer; font-weight: 850; }
  .faq-lane details p { max-width: 72ch; padding: 0 1.5rem 1rem; }
  .map-frame { margin-top: 1rem; aspect-ratio: 16/9; overflow: hidden; background: var(--shade); }
  .map-frame iframe, [data-direct-map-embed] iframe { width: 100%; height: 100%; min-height: 18rem; border: 0; }

  .index-shell { padding-top: clamp(2rem, 5vw, 4.5rem); }
  .scope-heading { max-width: 72rem; margin-bottom: 2.2rem; }
  .scope-heading > p:last-child { max-width: 65ch; color: var(--muted); }
  .alphabet-rail { position: sticky; top: 4.45rem; z-index: 10; display: flex; gap: .1rem; overflow-x: auto; border-top: .35rem solid var(--canopy); border-bottom: 1px solid var(--line); background: var(--paper); scrollbar-width: thin; }
  .alphabet-rail a { min-width: 2.55rem; min-height: 2.75rem; display: grid; place-items: center; text-decoration: none; font-weight: 800; }
  .alphabet-rail a:hover { background: var(--signal); }
  .category-band { display: grid; grid-template-columns: 5rem minmax(0, 1fr); border-bottom: 1px solid var(--line); }
  .category-letter { padding-top: 1rem; color: var(--canopy); font-family: var(--display); font-size: 2.6rem; font-weight: 800; }
  .category-band-body { padding: 1rem 0 1.5rem; }
  .category-band-body h2 { margin-bottom: .5rem; font-size: 1.7rem; }
  .category-band-body p { max-width: 65ch; color: var(--muted); }
  .mini-ranking { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: .75rem; align-items: center; min-height: 3.5rem; border-top: 1px solid var(--line); }
  .mini-ranking img { width: 4.5rem; height: 3rem; object-fit: cover; }
  .mini-ranking a { padding: .55rem 0; font-weight: 750; }
  .category-ranking-street .ranking-row { padding-right: .7rem; }
  .business-index { border-top: 4px solid var(--ink); }
  .business-index-row { min-height: 6rem; display: grid; grid-template-columns: minmax(14rem, 1fr) auto auto; gap: 1rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
  .business-index-row h2, .business-index-row p { margin: 0; }
  .business-index-row a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 850; }

  .business-profile { padding-top: clamp(2rem, 5vw, 4rem); }
  .business-front { display: grid; grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.18fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; padding-bottom: 2.5rem; border-bottom: .7rem solid var(--canopy); }
  .business-front > img { width: 100%; max-height: 31rem; aspect-ratio: 4/3; object-fit: cover; }
  .business-front h1 { margin-bottom: 1rem; }
  .profile-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(18rem, .7fr); gap: clamp(2rem, 6vw, 6rem); padding-top: 2.5rem; }
  .profile-layout:not(:has(.plus-counter)) { grid-template-columns: minmax(0, 64rem); }
  .profile-layout:not(:has(.plus-counter)) .business-prose { max-width: 88ch; }
  .profile-reading > section { margin-bottom: 2.5rem; }
  .profile-reading h2 { font-size: 1.8rem; }
  .plus-counter { align-self: start; border-top: .7rem solid var(--teal); background: var(--white); padding: 1.25rem; }
  .plus-counter > a { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); font-weight: 850; }
  .plus-counter dl div { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
  .plus-counter dt { color: var(--muted); text-transform: capitalize; }
  .plus-counter dd { margin: 0; }

  .portal-shell { padding-top: clamp(2rem, 5vw, 4rem); }
  .portal-heading { max-width: 65rem; padding-bottom: 1.5rem; border-bottom: .7rem solid var(--canopy); }
  .portal-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .7fr); gap: clamp(2rem, 6vw, 6rem); padding-top: 2rem; }
  .portal-action, .account-board { border-top: .6rem solid var(--teal); padding: 1.2rem; background: var(--white); }
  .account-board { border-color: var(--signal); }
  .portal-action li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
  .action-button { min-height: 3rem; display: inline-flex; align-items: center; margin-bottom: 1rem; padding: .65rem 1rem; background: var(--canopy); color: var(--white); font-weight: 850; }

  .trust-shell { padding-top: clamp(2rem, 5vw, 4rem); }
  .trust-heading { max-width: 65rem; padding-bottom: 1.5rem; border-bottom: .7rem solid var(--teal); }
  .trust-heading > p:last-child { max-width: 65ch; }
  .trust-layout { display: grid; grid-template-columns: 15rem minmax(0, 45rem); gap: clamp(2rem, 6vw, 6rem); padding-top: 2.5rem; }
  .trust-index { position: sticky; top: 6rem; align-self: start; display: grid; border-top: .45rem solid var(--signal); }
  .trust-index > * { padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .trust-reading { max-width: 45rem; min-width: 0; }
  .trust-reading h2 { margin-top: 0; }
  .trust-reading h3 { margin-top: 1.5rem; }
  .trust-reading a { color: var(--teal-dark); text-underline-offset: .2rem; }
  .contact-threshold { max-width: 60rem; margin-top: 3rem; border-top: .7rem solid var(--canopy); padding: 1.25rem; background: var(--white); }
  .contact-threshold a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 850; }
}

@layer states {
  .is-pending { color: var(--muted); background: rgba(227,230,222,.72); }
  .hanging-sign.is-pending { grid-template-rows: auto auto; }
  .pending-label { margin-right: .75rem; padding: .2rem .5rem; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 800; white-space: nowrap; }
  .searchable-ranking[hidden] { display: none; }
  .search-empty { padding: 1.5rem; border-bottom: 1px solid var(--line); background: var(--white); font-weight: 750; }
  body.nav-open { overflow: hidden; }
}

@layer responsive {
  @container (max-width: 47rem) {
    .shopfront { grid-template-columns: 3.5rem minmax(0, 1fr); }
    .shopfront-image { grid-column: 2; grid-row: 1; padding: .8rem 1rem 0; }
    .shopfront-image img { max-height: 19rem; }
    .shopfront-body { grid-column: 2; grid-row: 1; }
    .shopfront:has(.shopfront-image) .shopfront-body { grid-row: 2; }
  }
  @media (max-width: 70rem) {
    .city-label { display: none; }
    .sign-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hanging-sign:nth-child(4n+2), .hanging-sign:nth-child(4n+3) { box-shadow: none; }
    .hanging-sign:nth-child(3n+2) { box-shadow: inset 0 .3rem 0 var(--signal); }
    .hanging-sign:nth-child(3n+3) { box-shadow: inset 0 .3rem 0 var(--teal); }
  }
  @media (max-width: 54rem) {
    .site-canopy { min-height: 3.5rem; border-bottom-width: .35rem; }
    .canopy-inner { min-height: 3.2rem; }
    .brand { min-height: 3.1rem; }
    .brand-name { font-size: 1.3rem; }
    .understory-mark { width: 2rem; height: 2rem; }
    .nav-toggle { display: inline-flex; align-items: center; gap: .4rem; }
    .site-nav { position: fixed; inset: 3.55rem 0 auto; max-height: calc(100dvh - 3.55rem); display: none; overflow-y: auto; flex-direction: column; background: var(--canopy-dark); padding: .75rem var(--gutter) 1rem; border-bottom: .4rem solid var(--signal); }
    .nav-open .site-nav { display: flex; }
    .site-nav a { min-height: 3rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
    .home-workspace, .ranking-context, .business-front, .profile-layout, .portal-grid, .trust-layout { grid-template-columns: 1fr; }
    .home-workspace { gap: 1rem; padding-top: 1.2rem; }
    .home-workspace h1 { font-size: clamp(2rem, 10vw, 3.4rem); }
    .sign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rail-heading { grid-template-columns: 1fr auto; }
    .rail-heading p { grid-column: 1 / -1; }
    .ranking-context { gap: 1.2rem; }
    .featured-opening { min-height: 12rem; }
    .ranking-row { grid-template-columns: 3rem 6rem minmax(0, 1fr) auto; min-height: 5rem; gap: .65rem; }
    .ranking-row img, .ranking-image-fallback { width: 6rem; height: 4.5rem; }
    .ranking-count { grid-column: 3; font-size: .88rem; }
    .row-arrow, .pending-label { grid-column: 4; grid-row: 1 / 3; }
    .market-passage { grid-template-columns: 1fr; }
    .market-passage .city-aperture { height: 20rem; }
    .decision-shelter { grid-template-columns: 1fr; }
    .faq-lane { grid-column: auto; }
    .business-front { gap: 1.5rem; }
    .business-front > img { max-height: 26rem; }
    .profile-layout { gap: 2rem; }
    .trust-index { position: static; }
    .site-footer { grid-template-columns: 1fr; align-items: start; }
  }
  @media (max-width: 34rem) {
    :root { --gutter: 1rem; }
    body { font-size: 1rem; }
    h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
    .brand-name { font-size: 1.15rem; }
    .nav-toggle span:last-child { display: none; }
    .home-intro .scope-tab { margin-bottom: .4rem; }
    .home-lede { display: none; }
    .home-workspace { padding-bottom: 1rem; }
    .directory-search { padding: .75rem; box-shadow: 5px 5px 0 var(--shade); }
    .directory-search label { font-size: .92rem; }
    .search-line input { min-height: 3rem; }
    .taxonomy-elevation { padding-top: .8rem; }
    .rail-heading { margin-bottom: .65rem; }
    .rail-heading h2 { font-size: 1.65rem; }
    .sign-grid { grid-template-columns: 1fr; }
    .hanging-sign { min-height: 3.2rem; }
    .hanging-sign > a, .hanging-sign > span:not(.sign-index) { min-height: 3.2rem; padding: .45rem .7rem; }
    .hanging-sign:nth-child(n+7) { display: none; }
    .city-aperture { margin-top: 1rem; margin-bottom: 1.5rem; }
    .city-aperture--wide, .city-aperture--night { height: 11rem; }
    .ranking-openings { padding-top: .4rem; }
    .ranking-row { grid-template-columns: 2.7rem 6rem minmax(0, 1fr); gap: .55rem; padding-right: .35rem; }
    .ranking-title { font-size: 1.05rem; }
    .ranking-count { grid-column: 3; }
    .row-arrow, .pending-label { display: none; }
    /* Keep the query legible without pushing result #1 below 390×844. */
    .ranking-context { margin-bottom: .7rem; padding-top: .85rem; gap: .55rem; }
    .ranking-context .scope-tab { margin-bottom: .45rem; padding: .18rem .5rem; font-size: .7rem; }
    .ranking-context h1 { margin-bottom: .5rem; font-size: clamp(1.9rem, 9.4vw, 2.55rem); line-height: .98; }
    .ranking-intro { font-size: .92rem; line-height: 1.28; }
    .ranking-intro p { margin-bottom: .4rem; }
    .ranking-intro p:nth-child(n+2) { display: none; }
    .result-count { margin-top: .5rem; padding: .28rem .55rem; font-size: .88rem; }
    .featured-opening { min-height: 0; aspect-ratio: 16 / 4.5; max-height: 6.8rem; border-top-width: .45rem; }
    .featured-opening img { width: 100%; height: 100%; aspect-ratio: 16 / 4.5; object-fit: cover; }

    /* On phones rank, image, name and metrics form one compact masthead.
       The rank tab overlays the image instead of reserving a permanent gutter. */
    .shopfront, .shopfront:not(:has(.shopfront-image)) {
      position: relative;
      grid-template-columns: 6.8rem minmax(0, 1fr);
      gap: .7rem;
      padding: .7rem;
    }
    .rank-support {
      position: absolute;
      z-index: 2;
      top: .7rem;
      left: .7rem;
      min-width: 2.35rem;
      min-height: 2rem;
      place-items: center;
      padding: .2rem .45rem;
    }
    .shopfront-image { grid-column: 1; grid-row: 1; padding: 0; }
    .shopfront-image img { width: 6.8rem; height: 5.1rem; aspect-ratio: 4 / 3; }
    .shopfront-body, .shopfront:not(:has(.shopfront-image)) .shopfront-body { display: contents; }
    .shopfront-fascia { grid-column: 2; grid-row: 1; align-self: start; display: block; min-width: 0; padding: 0 0 .45rem; }
    .shopfront-fascia h2 { font-size: clamp(1.18rem, 5.4vw, 1.42rem); line-height: 1.02; }
    .shopfront-fascia p { margin-top: .2rem; font-size: .82rem; }
    .metric-line { margin-top: .3rem; gap: .4rem; font-size: .84rem; }
    .shopfront:not(:has(.shopfront-image)) .shopfront-fascia { grid-column: 1 / -1; padding-left: 3rem; }
    .shopfront-body > address,
    .shopfront-body > .fit-list,
    .shopfront-body > .business-prose,
    .shopfront-body > .highlight-list,
    .shopfront-body > .profile-link { grid-column: 1 / -1; }
    .shopfront address { margin: .15rem 0 0; padding-top: .55rem; border-top: 1px solid var(--line); }
    .business-prose { margin-top: .65rem; }
    .fit-list ul, .highlight-list ul { display: grid; gap: .35rem; }
    .services-lane article { grid-template-columns: 1fr; gap: .25rem; }
    .decision-shelter { gap: 1.8rem; }
    .category-band { grid-template-columns: 2.8rem minmax(0, 1fr); }
    .category-letter { font-size: 1.8rem; }
    .business-index-row { grid-template-columns: 1fr; gap: .45rem; }
    .business-front > img { max-height: none; }
    .portal-action, .account-board { padding: 1rem; }
    .site-footer { margin-top: 3rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    a.ranking-row:hover { transform: none; }
  }
}