/* Renovation Defenders v2: town pages only (Hopkinton, Wellesley, Newton, Needham, Weston, Westwood).
   Loaded after style.css and before site.css (assemble.py). Generated markup: site-v2/towns2.py.
   Fix round 2026-10-09: per-town drawings, the big number, hand circles, the statement band, the compact tail. */

/* ---------- shared fixes the judges measured ---------- */
/* the big number: Weston's ran 28 px past its column at 1440 and off-screen at 375 */
.bignum{flex-wrap:wrap;row-gap:10px}
.bignum b{white-space:nowrap}
.bignum span{max-width:340px;text-wrap:pretty}
@media (max-width:600px){.bignum{display:block}.bignum span{display:block;margin-top:12px;max-width:none}}

/* hand circles in the rule sheet cut the first and last glyph: the loop now sits outside the word */
/* padding inside the circled phrase keeps the path's left loop (x 2 to 8 of 100) clear of the first glyph */
.rule-list .circ,.vill .circ{padding:0 .5em;margin:0 .2em}
.rule-list .circ svg,.vill .circ svg{left:-.8em;top:-.55em;width:calc(100% + 1.6em);height:calc(100% + 1.1em)}

/* the sheet's tilt slopes every line and drifts the left edge on phones */
@media (max-width:999px){.rules__sheet .sheet{transform:none}}
.why__big{text-wrap:balance}
.tw-rules .rules__head .h2,.tw-houses .h2{margin-top:14px}
.tw-houses .h2{max-width:980px}
.tw-houses .houses__copy > p:first-child{margin-top:28px}
.tw-houses .houses__grid{align-items:start}
@media (min-width:900px){.tw-aside{margin-top:28px}}
.faq__side .lede a{white-space:nowrap;display:inline;padding:12px 0}
.tw-hero .crumbs a{display:inline-block;padding:15px 0;margin:-15px 0}

/* hero crops per town (desktop block layout) */
@media (min-width:1100px){
  .tw-hero--hopkinton .hero__media img{object-position:38% 60%}
  .tw-hero--needham .hero__media img{object-position:62% 60%}
  .tw-hero--newton .hero__media img{object-position:50% 50%}
  .tw-hero--weston .hero__media img{object-position:72% 60%}
  .tw-hero--westwood .hero__media img{object-position:78% 60%}
}

/* ---------- drawing cards (houses slot) ---------- */
.tw-card{margin:0;background:#fff;border:1px solid var(--rule);box-shadow:0 34px 60px -34px rgba(16,40,26,.45);padding:26px 28px 20px}
.tw-cap{display:block;padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--ink)}
.tw-cap b{display:block;font:600 24px/1.1 var(--serif);letter-spacing:-.01em}
.tw-cap span{display:block;font:500 13px/1.4 var(--sans);color:var(--stone);margin-top:5px}
.tw-cap--dark{border-bottom-color:rgba(255,255,255,.55)}
.tw-cap--dark b{color:#fff}
.tw-cap--dark span{color:var(--pale)}
.tw-src{font-size:12.5px;line-height:1.45;color:var(--stone);margin-top:14px}
.tw-src--dark{color:#A9C9B4}
.tw-card .pen{font-size:25px;transform:rotate(-2deg);transform-origin:left center}
@media (max-width:600px){.tw-card{padding:20px 16px 16px}.tw-cap b{font-size:21px}.tw-card .pen{font-size:22px}}

/* svg drawings (Weston lot; Wellesley, Needham and Westwood statement art) */
.tw-svg{display:block;width:100%;height:auto;overflow:visible}
.tw-svg .ink{fill:none;stroke:#2A332D;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tw-svg .ink.fill{fill:#EDF2EE}
.tw-svg .thin{stroke-width:1.1;stroke:#7B857E}
.tw-svg .thick{stroke-width:3.2}
.tw-svg .dash{stroke-dasharray:7 6}
.tw-svg .red{fill:none;stroke:var(--red);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tw-svg .red.thick{stroke-width:6}
.tw-svg .redfill{fill:rgba(194,46,34,.08);stroke:var(--red);stroke-width:2.2}
.tw-svg .t-cap{font:700 21px/1 var(--sans);letter-spacing:.12em;fill:#3B443E}
.tw-svg .t-sm{font-size:19px}
.tw-svg .t-hand{font:700 29px/1 var(--hand);fill:var(--red)}
.tw-svg .t-num{font:600 42px/1 var(--serif);fill:var(--ink)}
.tw-svg .t-sub{font:500 20px/1 var(--sans);fill:var(--stone)}
.on-dark .tw-svg .ink{stroke:rgba(255,255,255,.88)}
.on-dark .tw-svg .ink.fill{fill:rgba(255,255,255,.06)}
.on-dark .tw-svg .thin{stroke:rgba(255,255,255,.5)}
.on-dark .tw-svg .red{stroke:#FF8A7A}
.on-dark .tw-svg .redfill{fill:rgba(255,138,122,.16);stroke:#FF8A7A}
.on-dark .tw-svg .t-cap{fill:var(--pale)}
.on-dark .tw-svg .t-hand{fill:#FFB3A8}
.on-dark .tw-svg .t-num{fill:#fff}
.on-dark .tw-svg .t-sub{fill:var(--pale)}

/* Wellesley: the Large House Review ladder (one scale, 0 to 8,000 sq ft) */
.ld{list-style:none;margin:0;padding:0;position:relative;--lc:150px;--g:14px}
.ld li{display:grid;grid-template-columns:var(--lc) minmax(0,1fr);gap:var(--g);align-items:center;padding:9px 0}
.ld__d{font:600 15.5px/1.2 var(--sans);text-align:right}
.ld__d small{display:block;font:500 12.5px/1.3 var(--sans);color:var(--stone);margin-top:2px}
.ld__d em{font:italic 600 17px/1.2 var(--serif)}
.ld__bar{position:relative;height:36px}
.ld__bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v);background:var(--sage);border:1.5px solid var(--ink)}
.ld__bar b{position:absolute;left:10px;top:50%;transform:translateY(-50%);font:600 19px/1 var(--serif);white-space:nowrap}
.ld__ex{margin-top:10px;border-top:1px dashed var(--rule)}
.ld__ex .ld__bar i{background:repeating-linear-gradient(135deg,#D3DBD5 0 2px,#fff 2px 7px);border-color:#7B857E}
.ld__ex .ld__bar s{position:absolute;top:-1px;bottom:-1px;left:var(--v);width:var(--a);border:2.5px dashed var(--red);background:rgba(194,46,34,.1)}
.ld li.ld__line{position:absolute;display:block;top:2px;bottom:2px;padding:0;left:calc(var(--lc) + var(--g) + (100% - var(--lc) - var(--g)) * .45);width:0;border-left:2.5px dashed var(--red);z-index:2}
.ld__pen{margin:12px 0 0 calc(var(--lc) + var(--g))}
@media (max-width:600px){.ld{--lc:98px;--g:10px}.ld__d{font-size:13px}.ld__d small{font-size:11px}.ld__bar b{font-size:15px}.ld__bar{height:30px}.ld__pen{margin-left:0}}

/* Newton: the 13 villages, the four local historic districts circled */
.vill{list-style:none;margin:0;padding:0;columns:2;column-gap:30px}
.vill li{font:600 clamp(19px,1.65vw,24px)/1.2 var(--serif);letter-spacing:-.01em;padding:6px 0 6px 10px;break-inside:avoid}
.vill .circ{margin-left:-.3em}
.vill .circ--long svg{left:-1em;width:calc(100% + 2em);top:-.7em;height:calc(100% + 1.4em)}
.vill__pen{margin-top:14px}
@media (max-width:1100px) and (min-width:1000px){.vill li{font-size:18px}}
@media (max-width:600px){.vill{columns:1}.vill li{font-size:21px;padding:7px 0 7px 10px}}

/* Needham: the four Needham Line stops */
.nl{list-style:none;margin:0;padding:0 0 0 40px;position:relative}
.nl::before{content:"";position:absolute;left:12px;top:20px;bottom:44px;width:5px;background:var(--forest)}
.nl li{position:relative;padding:9px 0 13px}
.nl li::before{content:"";position:absolute;left:-36px;top:16px;width:14px;height:14px;border-radius:50%;background:#fff;border:4px solid var(--forest)}
.nl b{display:block;font:600 clamp(24px,2.2vw,31px)/1.1 var(--serif);letter-spacing:-.012em}
.nl small{display:block;font:500 13.5px/1.4 var(--sans);color:var(--stone);margin-top:3px}
.nl li:first-child::before{width:22px;height:22px;left:-40px;top:12px;background:var(--forest)}
.nl__out{opacity:.75}
.nl__out::before{border-color:#9AA79F !important}
.nl__out::after{content:"";position:absolute;left:-26px;top:-12px;height:30px;border-left:5px dotted #9AA79F}
.nl__out b{font:500 18px/1.2 var(--sans);color:var(--stone)}
.tw-line{position:relative}
.nl__pen{position:absolute;right:26px;bottom:62px;transform:rotate(-6deg)!important}
@media (max-width:600px){.nl__pen{position:static;margin-top:6px;transform:rotate(-2deg)!important}}

/* Westwood: the 1911 line against the 1968 median */
.tl{position:relative;height:200px;margin:16px 4px 0}
.tl__axis{position:absolute;left:0;right:0;top:118px;height:2px;background:var(--ink)}
.tl__tick{position:absolute;left:var(--x);top:128px;transform:translateX(-50%);font:500 12.5px/1 var(--sans);color:var(--stone)}
.tl__tick::before{content:"";position:absolute;left:50%;top:-12px;height:8px;border-left:1.5px solid var(--ink)}
.tl__tick:first-of-type{transform:none}.tl__tick:first-of-type::before{left:0}
.tl__tick--end{transform:translateX(-100%)}.tl__tick--end::before{left:auto;right:0}
.tl__pre{position:absolute;left:0;width:var(--w);top:104px;height:14px;background:repeating-linear-gradient(135deg,#B9C4BC 0 2px,transparent 2px 7px)}
.tl__pre em{position:absolute;left:0;top:46px;white-space:nowrap;font:italic 500 15px/1 var(--serif);color:var(--body)}
.tl__line{position:absolute;left:var(--x);top:6px;height:124px;border-left:2.5px dashed var(--red)}
.tl__line b{position:absolute;left:8px;top:-2px;font:600 30px/1 var(--serif);color:var(--red);letter-spacing:-.02em}
.tl__dot{position:absolute;left:var(--x);top:119px}
.tl__dot::before{content:"";position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:var(--forest)}
.tl__dot b{position:absolute;left:0;bottom:42px;transform:translateX(-50%);font:600 44px/1 var(--serif);color:var(--forest);letter-spacing:-.03em}
.tl__dot small{position:absolute;left:0;bottom:24px;transform:translateX(-50%);white-space:nowrap;font:600 11.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.tl__pen{margin-top:4px}
@media (max-width:600px){.tl__line b{font-size:24px}.tl__dot b{font-size:34px}.tl__pre em{font-size:13.5px}}

/* Weston: the lot plan */
.tw-lot .tw-svg{margin-top:4px}

/* Hopkinton: the map with the pending job pinned to it */
.tw-mapwrap{position:relative}
.tw-pin{position:relative;z-index:2;max-width:330px;margin:-16px 0 0 auto;background:#fff;border-left:4px solid var(--red);padding:15px 18px;box-shadow:0 20px 40px -22px rgba(16,40,26,.55);font:500 15.5px/1.45 var(--sans);color:var(--ink);transform:rotate(-1.2deg)}
@media (max-width:600px){.tw-pin{margin:12px 0 0;max-width:none;transform:none}}

/* ---------- the statement band: the line, then the town's drawing beside it ---------- */
.tw-why__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.tw-why .why__big{margin-top:20px}
.tw-why__body{margin-top:30px;max-width:590px;padding-top:24px;border-top:1px solid rgba(255,255,255,.2)}
.tw-why__art{min-width:0}
@media (max-width:999px){.tw-why__grid{grid-template-columns:1fr;gap:44px}.tw-why__art{max-width:540px}}

/* Newton: the schedule with the review in front */
.tw-sched{margin:0}
.tw-sched ol{list-style:none;margin:0;padding:0}
.tw-sched li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:14px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.tw-sched li > span{font:600 15.5px/1.25 var(--sans);color:#D6E6DB}
.tw-sched li.red > span{color:#FFB3A8}
.trk{position:relative;display:block;height:28px}
.trk i{position:absolute;top:0;bottom:0;left:var(--a);width:var(--w);border:1.5px solid rgba(255,255,255,.85);background:rgba(255,255,255,.1)}
.red .trk i{border-color:#FF8A7A;background:rgba(255,138,122,.35)}
.trk s{position:absolute;top:0;bottom:0;left:calc(var(--a) + var(--w));width:36%;border:2px dashed #FF8A7A;border-left:0}
.sched__pen{color:#FFB3A8;font-size:25px;margin-top:16px;transform:rotate(-2deg)}
@media (max-width:600px){.tw-sched li{grid-template-columns:104px minmax(0,1fr);gap:10px}.tw-sched li > span{font-size:12.5px}.sched__pen{font-size:22px}}

/* Weston: design flow, 110 gallons a day per bedroom */
.tw-flow{margin:0}
.flow{display:grid;grid-template-columns:repeat(2,minmax(0,150px));gap:clamp(28px,4vw,56px);align-items:end;justify-content:start;height:300px;padding-left:4px}
.flow__col{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%}
.flow__tot{font:600 44px/1 var(--serif);color:#fff;letter-spacing:-.02em;margin-bottom:10px}
.flow__col--add .flow__tot{color:#FFB3A8}
.flow__bar{display:flex;flex-direction:column}
.flow__bar i,.flow__bar s{display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--sans);font-style:normal;text-decoration:none;letter-spacing:.04em}
.flow__bar i{height:180px;border:2px solid rgba(255,255,255,.85);background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 2px,transparent 2px 18px);color:var(--pale)}
.flow__bar s{height:45px;border:2.5px dashed #FF8A7A;border-bottom:0;background:rgba(255,138,122,.18);color:#FFB3A8}
.flow__n{margin-top:10px;font:600 13px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--pale)}
.flow__pen{color:#FFB3A8;font-size:26px;margin-top:18px;transform:rotate(-2deg)}
@media (max-width:600px){.flow{height:260px}.flow__bar i{height:150px}.flow__bar s{height:38px}.flow__tot{font-size:36px}.flow__pen{font-size:22px}}

/* Hopkinton: three historic districts, two commissions */
.tw-stamps{position:relative;height:490px;margin:0}
.stamp{position:absolute;width:212px;height:212px;border-radius:50%;border:3px solid currentColor;box-shadow:inset 0 0 0 7px var(--deep),inset 0 0 0 9px currentColor;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:26px;color:var(--pale)}
.stamp span{font:700 12.5px/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.stamp b{font:600 54px/1 var(--serif);letter-spacing:-.03em;margin:8px 0 6px;color:#fff}
.stamp small{font:500 13px/1.3 var(--sans);max-width:130px}
.stamp--a{left:0;top:0;transform:rotate(-8deg)}
.stamp--b{left:232px;top:34px;transform:rotate(7deg)}
.stamp--c{left:104px;top:224px;transform:rotate(-3deg);color:#FF8A7A}
.stamp--c b{color:#FFB3A8}
.stamps__pen{position:absolute;left:0;top:452px;color:#FFB3A8;font-size:26px;transform:rotate(-2deg);white-space:nowrap}
@media (max-width:1279px) and (min-width:1000px){.tw-stamps{transform:scale(.86);transform-origin:left top;height:430px}}
@media (max-width:600px){
  .tw-stamps{height:380px}
  .stamp{width:158px;height:158px;padding:16px}
  .stamp span{font-size:10.5px;letter-spacing:.1em}
  .stamp b{font-size:40px;margin:5px 0 4px}
  .stamp small{font-size:11.5px;max-width:110px}
  .stamp--b{left:auto;right:0;top:26px}
  .stamp--c{left:70px;top:170px}
  .stamps__pen{top:344px;font-size:22px}
}

/* ---------- the tail: around the town (nearby pages, what we build, the map) ---------- */
.tw-near{background:var(--sage);padding:88px 0}
.tw-near__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.tw-near--nomap .tw-near__grid{grid-template-columns:minmax(0,1fr);max-width:900px}
.tw-near .h3{margin-top:12px}
.tw-near__row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;align-items:baseline;padding-top:22px;margin-top:24px;border-top:1px solid #C9D3CC}
.tw-near__k{font:600 12.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.tw-near__towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 30px}
.tw-near__towns a{font:600 clamp(28px,2.6vw,40px)/1.1 var(--serif);letter-spacing:-.015em;color:var(--ink);text-decoration:none;border-bottom:2px solid #B9C4BC}
.tw-near__towns a:hover{border-color:var(--forest);color:var(--forest)}
.tw-near__lead{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:8px 0 6px;font:600 clamp(24px,2vw,30px)/1.1 var(--serif);color:var(--forest);text-decoration:none;border-bottom:2px solid currentColor}
.tw-near__lead svg{width:20px;height:20px}
.tw-near__addl{margin-top:10px;color:var(--body)}
.tw-near__svc{margin-top:10px;font-size:15px;color:var(--stone)}
.tw-near__svc a{display:inline-block;padding:12px 0;margin:-12px 18px -12px 0;color:var(--ink);white-space:nowrap}
.tw-near__svc{line-height:2}
.tw-near__map{width:100%;max-width:500px;justify-self:end}
@media (max-width:999px){.tw-near{padding:68px 0}.tw-near__grid{grid-template-columns:1fr;gap:44px}.tw-near__map{justify-self:start}}
@media (max-width:600px){.tw-near{padding:56px 0}.tw-near__row{grid-template-columns:1fr;gap:10px}.tw-near__map{padding:14px 12px 10px}}

/* the $99 review, folded into the form band */
.tw-bid{display:flex;align-items:center;gap:20px;margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.2);max-width:540px}
.tw-bid__seal{width:96px;flex:none;transform:rotate(-8deg);filter:drop-shadow(0 12px 16px rgba(0,0,0,.3))}
.tw-bid p{color:#DCEBE0;font-size:16.5px;line-height:1.5}
.tw-bid a{display:inline-block;padding:11px 0;margin:-11px 0;color:#fff;font-weight:600;white-space:nowrap;text-decoration:none;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)) left calc(100% - 9px)/100% 1.5px no-repeat}
.tw-bid a svg{width:15px;height:15px;vertical-align:-2px;margin-left:4px}
@media (max-width:600px){.tw-bid{gap:14px;margin-top:28px}.tw-bid__seal{width:74px}.tw-bid p{font-size:15.5px}}