/* =====================================================================
   Rare Earth Projects · serenity.css  (Serenity page only)
   Calm sage identity inside the Rare Earth brand: sage base #e3e5d2,
   sage paper gradient #e9ebdb → #c9cfae, olive ink #3f4a27 and olive
   accent #5c6b3a for italics and diagrams. Gold stays the colour of
   every call to action. Motifs: the script wordmark, sage contours,
   the "work nearby" rings, the indicative-value calculator.
   ===================================================================== */
[data-project="serenity"]{--olive:#5c6b3a;--olive-ink:#3f4a27;--olive-deep:#2b3220;--sage-pale:#e9ebdb;--sage-mid:#c9cfae}

/* hero */
.sr-hero{--wash:227,229,210}
.sr-hero .kicker{color:var(--olive)}
.sr-hero .facts b{color:var(--olive-ink)}
.sr-hero .p-logo img{filter:drop-shadow(0 2px 18px rgba(227,229,210,.55))}

/* italics + rules in olive on the light bands */
[data-project="serenity"] :is(.p-base,.p-paper) .display em{color:var(--olive)}
[data-project="serenity"] :is(.p-base,.p-paper){--line:rgba(63,74,39,.18)}
[data-project="serenity"] :is(.p-base,.p-paper) .feat li::before{border-color:var(--olive)}
[data-project="serenity"] .ill-contours path{stroke:var(--olive);opacity:.26}
[data-project="serenity"] .pv{--pv-sheet:#f1f2e8}

/* ---------- work nearby: proximity rings ---------- */
.sr-rings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,110px);align-items:center}
.sr-ring-fig{position:relative;max-width:620px;width:100%;justify-self:center}
.sr-ring-fig svg{display:block;width:100%;height:auto;overflow:visible}
.sr-ring-fig .rg{fill:none;stroke:var(--olive);stroke-width:1;opacity:.32;transition:opacity .4s,stroke-width .4s,stroke .4s}
.sr-ring-fig .rg.nb{stroke-dasharray:3 5}
.sr-ring-fig .rl{font-family:var(--sans);font-size:11px;letter-spacing:.16em;fill:var(--olive-ink);opacity:.6;transition:opacity .4s}
.sr-ring-fig .dt circle{fill:#eef0e3;stroke:var(--olive);stroke-width:1;transition:fill .3s}
.sr-ring-fig .dt text{font-family:var(--sans);font-size:11px;font-weight:600;fill:var(--olive);transition:fill .3s}
.sr-ring-fig .dt{cursor:default}
.sr-ring-fig .ctr rect{fill:var(--olive-ink)}
.sr-ring-fig .ctr text{font-family:var(--serif);font-size:20px;fill:var(--sage-pale)}
.sr-ring-fig .ctr-l{font-family:var(--serif);font-style:italic;font-size:18px;fill:var(--olive-ink)}
.sr-ring-fig .halo{fill:var(--olive);opacity:.1}
.sr-ring-fig [data-r].on .rg,.sr-ring-fig .rg.on{opacity:1;stroke-width:2;stroke:var(--gold-lo)}
.sr-ring-fig [data-r].on .rl{opacity:1}
.sr-ring-fig .dt.on circle{fill:var(--olive)}
.sr-ring-fig .dt.on text{fill:var(--sage-pale)}
.sr-ring-fig .rg{stroke-dasharray:2000 0;transition:stroke-dasharray 2.2s var(--ease),opacity .4s,stroke-width .4s,stroke .4s}
.rv:not(.in) .sr-ring-fig .rg{stroke-dasharray:0 2000}
.sr-ring-fig .rg.nb{transition:opacity .4s}
.sr-ring-list{list-style:none;border-top:1px solid var(--line)}
.sr-ring-list li{display:grid;grid-template-columns:30px 1fr auto;gap:14px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);cursor:default;transition:background .3s}
.sr-ring-list li.on{background:linear-gradient(90deg,rgba(92,107,58,.12),transparent 80%)}
.sr-ring-list .n{width:24px;height:24px;border-radius:50%;border:1px solid var(--olive);color:var(--olive);font-size:.62rem;font-weight:600;display:flex;align-items:center;justify-content:center;transition:background .3s,color .3s}
.sr-ring-list li.on .n{background:var(--olive);color:var(--sage-pale)}
.sr-ring-list .pl{font-size:1rem}
.sr-ring-list .pl small{display:block;font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted-2)}
.sr-ring-list b{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3vw,2.8rem);line-height:1;color:var(--olive-ink);white-space:nowrap;text-align:right}
.sr-ring-list b small{font-family:var(--sans);font-size:.24em;letter-spacing:.24em;text-transform:uppercase;margin-left:6px;color:var(--muted-2);vertical-align:.5em}
.sr-ring-list b.tx{font-size:1.4rem;font-style:italic}
.sr-rings .ph-note{margin-top:16px;line-height:1.8}

/* ---------- plots: price + indicative value ---------- */
.sr-plots{display:grid;grid-template-columns:5fr 7fr;gap:clamp(30px,5vw,90px);align-items:start}
.sr-plots .price-call{border-left-color:var(--olive)}
.sr-calc{background:rgba(244,239,230,.55);border:1px solid var(--line);border-top:2px solid var(--olive);padding:clamp(24px,3vw,44px)}
.sr-calc .sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.sr-calc .sc-head p{font-size:.86rem;color:var(--muted)}
.sc-area{display:flex;align-items:baseline;gap:12px;margin-top:22px;border-bottom:1px solid var(--line);padding-bottom:6px}
.sc-area input{width:100%;min-width:0;background:none;border:0;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:1.05;color:var(--olive-ink);padding:0;-moz-appearance:textfield}
.sc-area input::-webkit-outer-spin-button,.sc-area input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sc-area input:focus{outline:none}
.sc-area:focus-within{border-bottom-color:var(--olive)}
.sc-area em{font-style:normal;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);white-space:nowrap}
.sc-sub{display:block;margin-top:8px;font-size:.78rem;color:var(--muted-2)}
.sc-range{width:100%;margin:22px 0 6px;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
.sc-range::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--olive) var(--fill,40%),rgba(63,74,39,.18) var(--fill,40%))}
.sc-range::-moz-range-track{height:2px;background:rgba(63,74,39,.18)}
.sc-range::-moz-range-progress{height:2px;background:var(--olive)}
.sc-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);border:4px solid #f1f2e8;box-shadow:0 0 0 1px var(--olive);margin-top:-10px}
.sc-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold);border:4px solid #f1f2e8;box-shadow:0 0 0 1px var(--olive)}
.sc-range:focus-visible{outline:1px solid var(--olive);outline-offset:4px}
.sc-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.sc-try>span{font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);margin-right:4px}
.sc-try button{min-height:38px;padding:0 14px;border:1px solid var(--line);font-size:.8rem;color:var(--olive-ink);transition:border-color .3s,background .3s,color .3s}
.sc-try button:hover{border-color:var(--olive)}
.sc-try button[aria-pressed="true"]{background:var(--olive);border-color:var(--olive);color:var(--sage-pale)}
.sc-out{display:block;margin-top:30px;padding:24px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-out small{display:block;font-size:.56rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted-2);margin-bottom:10px}
.sc-out b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--olive-ink)}
.sc-out span{display:block;margin-top:12px;font-size:.88rem;color:var(--muted)}
.sc-note{margin-top:18px;font-size:.8rem;line-height:1.65;color:var(--muted)}
.sr-calc .acts{margin-top:26px}

/* ---------- ready to build (deep olive band) ---------- */
[data-project="serenity"] .sr-ready.p-dark{background:linear-gradient(160deg,#2b3220,#1d2216)}
.sr-ready .ticks svg{stroke:#c9cfae}
.sr-ready .ill-contours path{stroke:#c9cfae;opacity:.14}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .sr-rings{grid-template-columns:1fr}
  .sr-ring-fig{max-width:520px}
  .sr-plots{grid-template-columns:1fr}
}
@media (max-width:767px){
  /* the script wordmark sits high on phones: start the wash earlier */
  .proj.lightc.sr-hero.has-render .proj-cover::after{background:linear-gradient(180deg,rgba(var(--wash),.86) 0%,rgba(var(--wash),.22) 12%,rgba(var(--wash),.66) 22%,rgba(var(--wash),.9) 32%,rgb(var(--wash)) 56%)}
  .sr-ring-list li{padding:14px 0}
  .sr-ring-list b{font-size:1.8rem}
  .sr-ring-fig .rl{font-size:13px}
  .sr-calc{padding:22px 18px;margin:0 calc(var(--gut) * -.5)}
}
@media (prefers-reduced-motion:reduce){
  .sr-ring-fig .rg{transition:none!important;stroke-dasharray:none}
  .sr-ring-fig .rg.nb{stroke-dasharray:3 5}
}

/* neighbourhood band (shared .nbh in project.css): Serenity's sage */
.sr-nbh{--nb-1:#1e251b;--nb-2:#2c3528;--nb-acc:#c1cd9a;--nb-em:#dfe6c4}