/* Elderberry brand dressing for the editorial state and town pages. It loads
   after place-template.css and home-cards.css and only restyles: every rule is
   scoped to .place-editorial, so the page keeps the structure those two files
   lay out. The hero takes the homepage's plum band with the ratings panel beside
   the heading on wide screens, the map sits beside the ranked list, and the list
   becomes the homepage's paper cards. */
:root{
  --hp-muted:#67535e;
  --hp-lilac:#efe5f0;
  --hp-paper-line:#e4ddd5;
  --hp-rule:#efe8dc;
  --hp-chip:#5b3155;
  --hp-leaf-lt:#b9cbb1;
  --hp-serif:'Fraunces',Georgia,serif;
  --hp-sans:'Atkinson Hyperlegible',system-ui,sans-serif;
  --hp-lift:0 1px 2px rgba(58,29,54,.05),0 8px 20px -12px rgba(58,29,54,.2);
}

/* The plum band: a grid item behind the crumbs and the hero, bled to the
   viewport edges with a spread shadow that the clip trims top and bottom. */
.place-editorial{isolation:isolate;padding-top:0}
.place-editorial::before{content:'';grid-column:1/-1;grid-row:1/3;align-self:stretch;justify-self:stretch;z-index:-1;background:var(--plum);
  box-shadow:0 0 0 100vmax var(--plum);clip-path:inset(0 -100vmax)}
.place-editorial :focus-visible{outline-color:var(--grape)}
/* The crumbs and hero also carry the plum themselves, so cream text never sits
   on cream if the band does not paint. */
.place-editorial>.crumbs,.place-editorial .ehero{background:var(--plum);color:var(--cream)}
.place-editorial>.crumbs :focus-visible,.place-editorial .ehero :focus-visible,.place-editorial .place-map-rail :focus-visible{outline-color:var(--cream)}

.place-editorial>.crumbs{margin:0 -24px;padding:24px 24px 14px;border:none;border-width:0}
.place-editorial>.crumbs a{color:rgba(248,243,233,.72);text-decoration:underline;text-decoration-color:rgba(248,243,233,.34);text-underline-offset:3px}
.place-editorial>.crumbs a:hover{color:var(--cream);text-decoration-color:currentColor}
.place-editorial>.crumbs i{color:rgba(248,243,233,.5)}
.place-editorial>.crumbs em{color:var(--cream)}

.place-editorial h1{max-width:16em;margin:0 0 18px;color:var(--cream);font-size:clamp(1.9rem,1.2rem + 3vw,3.5rem);line-height:1.06;letter-spacing:-.02em}
.place-editorial .ehero p.answer{max-width:46em;color:rgba(248,243,233,.86)}
.place-editorial .ehero .btn{justify-content:center;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--cream);color:var(--plum);
  box-shadow:none;font:700 1rem/1.3 var(--hp-sans);transition:background-color .2s ease,border-color .2s ease}
.place-editorial .ehero .btn:hover{background:#fff;color:var(--plum)}
.place-editorial .ehero .btn.ghost{border:1px solid rgba(248,243,233,.34);background:transparent;color:var(--cream)}
.place-editorial .ehero .btn.ghost:hover{border-color:rgba(248,243,233,.6);background:var(--hp-chip);color:#fff}
/* Get pricing: email + button joined (Ky lock-in 2026-10-12, /decide elderberry-component-pricing-cta-r2, A).
   The chip row is retired from the hero; its markup stays for the reversible template. */
.place-editorial .place-contents-boundary{display:none}
.place-editorial .place-pricing{display:flex;align-items:stretch;max-width:520px;margin-top:6px}
.place-pricing-field{position:relative;flex:1;min-width:0;min-height:60px;padding:0 16px 0 52px;background:#fff;
  border:1.5px solid rgba(74,37,69,.16);border-right:0;border-radius:12px 0 0 12px;transition:border-color .18s ease,box-shadow .18s ease}
.place-pricing-field svg{position:absolute;left:17px;top:50%;width:22px;height:22px;color:var(--grape);transform:translateY(-50%)}
.place-pricing-field label{position:absolute;left:52px;top:50%;transform:translateY(-50%);font:400 1.4rem/1.2 var(--hp-sans);color:#7d6973;pointer-events:none;
  transition:top .18s cubic-bezier(.2,.8,.2,1),transform .18s cubic-bezier(.2,.8,.2,1),font-size .18s cubic-bezier(.2,.8,.2,1),color .18s ease}
.place-pricing-field:focus-within label,.place-pricing-field:has(input:not(:placeholder-shown)) label{top:10px;transform:none;font-size:14px;font-weight:700;color:var(--grape)}
.place-pricing-field input{display:block;width:100%;height:57px;padding:20px 0 0;border:0;background:transparent;outline:none;
  font:400 1.25rem/1.3 var(--hp-sans);color:var(--ink);caret-color:var(--grape)}
.place-pricing-field input::placeholder{color:transparent}
.place-pricing-field:focus-within input::placeholder{color:#b9a9b2}
.place-pricing-field:focus-within{border-color:var(--grape);box-shadow:0 0 0 4px rgba(130,76,113,.18)}
.place-pricing-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 22px 0 26px;border:0;
  border-radius:0 12px 12px 0;cursor:pointer;background:var(--grape);color:#fff;font:700 1.2rem/1.1 var(--hp-sans);white-space:nowrap;
  transition:background-color .18s ease,color .18s ease}
.place-pricing-button::after{content:'\2192';font-size:1.25rem;transition:transform .18s ease}
.place-pricing-button:hover{background:#b9cbb1;color:var(--plum)}
.place-pricing-button:hover::after{transform:translateX(3px)}
.place-editorial .place-pricing-button:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@media(max-width:640px){.place-pricing-field label{font-size:1.2rem}.place-pricing-field input{font-size:1.15rem}
  .place-pricing-button{padding:0 14px 0 16px;font-size:1.05rem;gap:6px}}
@media(prefers-reduced-motion:reduce){.place-pricing-field,.place-pricing-field label,.place-pricing-button,.place-pricing-button::after{transition:none}}

/* The ratings: a hairline panel on the plum, numbers in the homepage's serif. */
.place-editorial .place-location-stats{margin-top:32px;padding:22px 22px 4px;border:1px solid rgba(248,243,233,.16);border-radius:16px;color:var(--cream)}
.place-editorial .place-location-stats h2{margin:0 0 18px;color:var(--cream);font-size:1.35rem}
.place-editorial .place-location-stats .scorebar-h h3{color:rgba(248,243,233,.72);font-weight:700}
.place-editorial .place-location-stats .scorebar-h .val{color:var(--cream);font:600 2.6rem/1 var(--hp-serif);letter-spacing:-.02em}
.place-editorial .place-location-stats .scorebar-h .val.good{color:var(--hp-leaf-lt)}
.place-editorial .place-location-stats .scorebar-h .val.mid{color:#e9d6e3}
.place-editorial .place-location-stats .scorebar-h .val i{color:rgba(248,243,233,.72);font:400 .95rem var(--hp-sans);letter-spacing:0}
.place-editorial .place-location-stats .track{background:rgba(248,243,233,.16)}
.place-editorial .place-location-stats .track .fill{background:#e9d6e3}
.place-editorial .place-location-stats .track .fill.good{background:var(--hp-leaf-lt)}
.place-editorial .place-location-stats .scorebar-cap{color:rgba(248,243,233,.72)}
.place-editorial .place-location-stats .place-average-inputs h3{color:var(--cream)}
.place-editorial .place-location-stats .place-average-category h4{color:rgba(248,243,233,.88)}
.place-editorial .place-location-stats .place-average-value{color:var(--cream)}
.place-editorial .place-location-stats .place-average-value span{color:rgba(248,243,233,.6)}
.place-editorial .place-location-stats .place-input-rated:before{background:rgba(248,243,233,.16)}
.place-editorial .place-location-stats .place-input-rated:after{background:#e9d6e3}
.place-editorial .place-location-stats .place-average-note{color:rgba(248,243,233,.6)}
.place-editorial .place-location-stats .fact{border-top-color:rgba(248,243,233,.16)}
.place-editorial .place-location-stats .fact b{color:rgba(248,243,233,.72);font-size:13px;letter-spacing:0;text-transform:none}
.place-editorial .place-location-stats .fact span{color:var(--cream);font:600 1.6rem/1.2 var(--hp-serif);letter-spacing:-.01em}
.place-editorial .place-location-stats .fact a{color:var(--cream);text-decoration-color:rgba(248,243,233,.35)}

/* "On this page" becomes the homepage's jump chips. */
.place-editorial .place-contents{margin-top:24px;border-bottom:0;color:var(--cream)}
.place-editorial .place-contents ol{gap:8px;padding:0 0 2px;scrollbar-width:none}
.place-editorial .place-contents ol::-webkit-scrollbar{display:none}
.place-editorial .place-contents a{display:flex;align-items:center;min-height:40px;padding:0 15px;border:1px solid rgba(248,243,233,.16);border-radius:999px;
  background:var(--hp-chip);color:var(--cream);font-size:15px;font-weight:700;transition:background-color .2s ease,border-color .2s ease}
.place-editorial .place-contents a:hover,.place-editorial .place-contents a:focus-visible{border-color:rgba(248,243,233,.34);background:#6b3b64;color:#fff}
.place-editorial:has(#place-map:target) .place-contents a[href="#place-map"],
.place-editorial:has(#written-content:target) .place-contents a[href="#written-content"],
.place-editorial:has(#top-homes:target) .place-contents a[href="#top-homes"],
.place-editorial:has(#homes:target,#compare-homes:target) .place-contents a[href="#compare-homes"],
.place-editorial:has(#finding-a-home:target) .place-contents a[href="#finding-a-home"]{border-color:var(--cream);background:var(--cream);color:var(--plum)}

.place-editorial .mapcard{overflow:hidden;border:1px solid var(--hp-paper-line);border-radius:16px;box-shadow:var(--hp-lift)}

/* The ranked list: one paper card per home. */
.place-editorial .place-top-homes{padding-top:40px;border-top:0}
.place-editorial #place-home-cards{display:grid;gap:14px}
.place-editorial .place-top-card{--card-py:22px;--card-px:24px;--card-radius:15px;padding:22px 24px;border:1px solid var(--hp-paper-line);border-radius:16px;background:#fff;box-shadow:var(--hp-lift)}
.place-editorial .place-top-card.place-map-active{background:#fff;box-shadow:0 0 0 2px var(--grape),var(--hp-lift)}
.place-editorial .place-rank-podium{box-shadow:inset 0 0 0 3px #fff}
/* The whole card opens the home (Ky lock-in 2026-10-12, /decide elderberry-component-home-card-r2, A + mobile practice).
   The title link stretches over the card; the photo, its credit and the Index link sit above it. Hover lifts only
   where a real pointer can hover; touch gets a brief press. transform and opacity only: no layout, no repaint. */
.place-editorial .place-top-card{position:relative;cursor:pointer;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.place-editorial .place-top-card,.place-editorial .place-top-card a{-webkit-tap-highlight-color:transparent}
.place-editorial .place-top-card h3 a::after{content:'';position:absolute;inset:0;z-index:1;border-radius:inherit}
.place-editorial .place-top-card .home-photo a,.place-editorial .place-top-card figcaption a,.place-editorial .place-top-card .place-rating-label{position:relative;z-index:2}
.place-editorial .place-top-card:hover h3 a{text-decoration:underline}
.place-editorial .place-top-card:has(h3 a:focus-visible){outline:2px solid var(--grape);outline-offset:3px}
.place-editorial .place-top-card h3 a:focus-visible{outline:0}
@media(hover:hover) and (pointer:fine){
  .place-editorial .place-top-card::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    box-shadow:0 2px 4px rgba(58,29,54,.06),0 18px 34px -16px rgba(58,29,54,.32);opacity:0;transition:opacity .2s ease}
  .place-editorial .place-top-card:hover{transform:translateY(-3px)}
  .place-editorial .place-top-card:hover::before{opacity:1}
}
@media(hover:none){
  .place-editorial .place-top-card{transition:transform .12s ease}
  .place-editorial .place-top-card:active{transform:scale(.985)}
  .place-editorial .place-top-card:active h3 a{text-decoration:underline}
}
@media(prefers-reduced-motion:reduce){.place-editorial .place-top-card,.place-editorial .place-top-card::before{transition:none}}

.place-editorial .place-list-controls .filterbar{overflow:hidden;border:1px solid var(--hp-paper-line);border-radius:16px;background:#fff;box-shadow:none}
.place-editorial .place-list-controls .fseg{border-color:var(--hp-rule)}
.place-editorial .place-list-controls .fseg label{color:var(--hp-muted);font-size:13px;letter-spacing:0;text-transform:none}
.place-editorial .place-list-controls .fseg select{text-overflow:clip}
.place-editorial .place-more{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:16px;border:1px solid var(--hp-paper-line);
  border-radius:999px;background:#fff;color:var(--plum);font:700 1rem/1.3 var(--hp-sans);transition:border-color .2s ease,background-color .2s ease}
.place-editorial .place-more:hover{border-color:var(--grape);background:#fcf9f3}
.place-editorial .place-more[hidden]{display:none}

/* The guide opens on its own "On this page" rule, so the section line above it goes. */
.place-editorial .authored-page-content{padding-top:48px;border-top:0}

/* The closing call to action: the homepage's plum card. */
.place-editorial #finding-a-home{margin:24px 0 0;padding:32px 24px;border:0;border-radius:22px;background:var(--plum);color:var(--cream);text-align:left}
.place-editorial #finding-a-home h2{color:var(--cream)}
.place-editorial #finding-a-home p{max-width:52ch;margin:10px 0 22px;color:rgba(248,243,233,.86)}
.place-editorial #finding-a-home .btn{justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;background:var(--cream);color:var(--plum);
  box-shadow:none;font:700 1rem/1.3 var(--hp-sans);transition:background-color .2s ease}
.place-editorial #finding-a-home .btn:hover{background:#fff}
.place-editorial #finding-a-home :focus-visible{outline-color:var(--cream)}

/* Wide screens: the ratings panel sits beside the heading, in the column the map
   takes below, and the "On this page" chips stay under the buttons. The map keeps
   the template's place beside the ranked list and stays in view while the list
   scrolls (the template's sticky rule, 95px under the sticky site header). */
@media(min-width:1001px){
  .place-editorial .herogrid{grid-template-rows:auto 1fr}
  .place-editorial .herogrid>div:first-child{grid-column:1;grid-row:1}
  .place-editorial .herogrid>.place-contents-boundary{grid-column:1;grid-row:2}
  .place-editorial .place-location-stats{grid-column:2;grid-row:1/3;margin-top:0;padding:26px 28px 6px}
  /* The chips wrap rather than scroll out of sight in the narrower column. */
  .place-editorial .place-contents ol{flex-wrap:wrap}
  /* 40px is the list's top padding, so the map starts level with the list's heading. */
  .place-editorial .place-map-rail{padding-top:40px}
  .place-editorial .place-map-rail :focus-visible{outline-color:var(--grape)}
  .place-editorial #finding-a-home{margin-top:32px;padding:44px 52px}
  .place-editorial #finding-a-home .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;align-items:center}
  .place-editorial #finding-a-home h2,.place-editorial #finding-a-home p{grid-column:1}
  .place-editorial #finding-a-home p{margin-bottom:0}
  .place-editorial #finding-a-home .btn{grid-column:2;grid-row:1/3}
}

/* Under 1121px the ratings panel is too narrow for two category columns: "Residents'
   experience" would push its score onto a second line, so the bars stack. */
@media(min-width:1001px) and (max-width:1120px){
  .place-editorial .place-location-stats .place-input-ratings{grid-template-columns:minmax(0,1fr)}
}

/* Narrower screens: the band also takes the map, which sits under the hero. */
@media(max-width:1000px){
  .place-editorial::before{grid-row:1/4}
  .place-editorial .ehero{margin-bottom:28px}
  .place-editorial .place-contents{margin-right:-24px;margin-left:-24px}
  .place-editorial .place-contents ol{padding:0 24px 2px}
}
@media(max-width:640px){
  .place-editorial .place-top-card{--card-py:18px;--card-px:18px;padding:18px}
  .place-editorial .place-top-card .place-rating-label{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media(max-width:480px){
  .place-editorial>.crumbs{margin:0 -20px;padding:24px 20px 14px}
  .place-editorial .place-contents{margin-right:-20px;margin-left:-20px}
  .place-editorial .place-contents ol{padding:0 20px 2px}
  .place-editorial .place-location-stats{padding:18px 18px 2px}
  .place-editorial .ehero .btn{padding:0 20px}
  .place-editorial #finding-a-home{padding:28px 20px}
}