/* ============================================================ ARMORY ALMANAC — composer renderer stylesheet (packet C). CONSUMES the sealed design-system tokens; it does NOT re-declare them. Each page links, in order: (carries § CHROME: --chrome-* ) (real-estate Warm Bronze accent) almanac.css (this file) and sets data-chrome="hard" data-register data-vertical="realestate" on . This file carries NO colour / surface / signal / spacing / radius / type / --chrome-* VALUE — every one is read via var() from the sealed files. It is the almanac component/layout CSS that reads the chrome, distilled from the proven specimen E/F/G stylesheets (the chrome-consumption pattern), for the composer's three surfaces: the ladder page, the report body, the post. ============================================================ */ *{box-sizing:border-box;} html{background:var(--surface-abyss);} body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body); color:var(--text);background:var(--surface-abyss);-webkit-font-smoothing:antialiased;} a{color:var(--text);text-decoration:underline;text-underline-offset:2px;} a:hover{color:var(--accent);} :focus-visible{outline:var(--chrome-focus,2px solid var(--focus-ring));outline-offset:2px;} .wrap{max-width:1040px;margin:0 auto;padding:0 var(--s-6) var(--s-8);} .mono{font-family:var(--font-mono);} .num{font-family:var(--font-mono);font-feature-settings:"tnum" 1;} /* ---- masthead: reversed name plate + mono dateline + one ruled tab strip ---- */ .mast{position:sticky;top:0;z-index:20;background:var(--surface-base); border-bottom:1px solid var(--chrome-rule-color,var(--hairline));} .mastbar{display:flex;align-items:baseline;gap:var(--s-4);flex-wrap:nowrap;min-width:0; max-width:1040px;margin:0 auto;padding:var(--s-3) var(--s-6);} .plate{flex:none;white-space:nowrap;background:var(--chrome-plate-bg,transparent); color:var(--chrome-plate-fg,inherit);font-family:var(--font-mono);font-size:var(--fs-h3); letter-spacing:var(--chrome-plate-track,-.01em);padding:3px var(--chrome-plate-pad,8px);} .plate .house{font-weight:400;} .plate .prod{font-weight:700;} .dateline{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--text-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:.02em;} .tabs{display:flex;gap:0;overflow-x:auto;max-width:1040px;margin:0 auto; border-top:1px solid var(--chrome-rule-color,var(--hairline));scrollbar-width:none;} .tabs::-webkit-scrollbar{display:none;} .tab{flex:none;white-space:nowrap;padding:var(--s-3) var(--s-5);font-family:var(--font-mono); font-size:var(--fs-label);text-transform:uppercase;letter-spacing:var(--tracking-label,.06em); color:var(--text-muted);border-right:1px solid var(--chrome-rule-color,var(--hairline)); border-bottom:2px solid transparent;text-decoration:none;display:inline-flex;align-items:center;gap:7px;} .tab:hover{color:var(--text);} .tab.here{color:var(--accent);border-bottom-color:var(--accent);} .tab .ico{width:14px;height:14px;flex:none;} .tab.here .icobox{background:var(--accent);color:var(--accent-label);display:inline-flex;padding:2px;} .crumbs{max-width:1040px;margin:0 auto;padding:var(--s-2) var(--s-6);font-family:var(--font-mono); font-size:var(--fs-micro);color:var(--text-muted);border-top:1px solid var(--chrome-rule-color,var(--hairline));} .crumbs a{color:var(--text-muted);} .crumbs .cur{color:var(--text);} .crumbs .sep{margin:0 6px;color:var(--text-dim);} .crumbs .ladder-glyph{width:13px;height:13px;vertical-align:-2px;margin-right:5px;color:var(--accent);} @media(max-width:560px){ .mastbar{flex-direction:column;align-items:flex-start;gap:2px;padding-left:var(--s-4);padding-right:var(--s-4);} .dateline{max-width:100%;} .tab{padding:var(--s-3) var(--s-4);} } /* ---- hero ---- */ .hero{padding:var(--s-8) 0 var(--s-6);} .hero h1{font-family:var(--font-read);font-weight:400;font-size:var(--fs-display);line-height:1.15; margin:0 0 var(--s-4);max-width:24ch;letter-spacing:-.01em;} .hero p.lede{font-size:var(--fs-h3);color:var(--text-muted);margin:0 0 var(--s-6);max-width:64ch;} /* ---- frames: quiet card + the one primary object (heavier rule + depth + brackets) ---- */ .card{border:1px solid var(--border);background:var(--surface-panel);padding:var(--s-6); outline:var(--chrome-frame-outline,none);outline-offset:var(--chrome-frame-gap,0);} .callout{border-left:3px solid var(--text-dim);background:var(--surface-raise); padding:var(--s-4) var(--s-5);font-size:var(--fs-sm);} .primary{position:relative;border:1px solid var(--border);background:var(--surface-panel); outline:var(--chrome-frame-outline-primary,var(--chrome-frame-outline,none)); outline-offset:var(--chrome-frame-gap,0);box-shadow:var(--chrome-raise-shadow,none);} .corner{position:absolute;width:11px;height:11px;border:0 solid var(--chrome-corner-color,transparent);pointer-events:none;} .c1{top:-3px;left:-3px;border-top-width:1px;border-left-width:1px;} .c2{top:-3px;right:-3px;border-top-width:1px;border-right-width:1px;} .c3{bottom:-3px;left:-3px;border-bottom-width:1px;border-left-width:1px;} .c4{bottom:-3px;right:-3px;border-bottom-width:1px;border-right-width:1px;} /* ---- striped title bar (primary object only); label patch is the one accent surface ---- */ .titlebar{display:flex;align-items:center;gap:var(--s-3);padding:var(--chrome-tb-pad,6px); border-bottom:var(--chrome-tb-rule,1px solid var(--border));background:var(--chrome-tb-bg,transparent);} .titlebar .tb-label{background:var(--accent);color:var(--accent-label); padding:2px var(--chrome-tb-label-pad,8px);font-family:var(--chrome-tb-font,var(--font-mono)); font-size:var(--fs-label);text-transform:var(--chrome-tb-case,uppercase); letter-spacing:var(--chrome-tb-track,var(--tracking-label,.06em));font-weight:600;} .titlebar .tb-right{margin-left:auto;background:var(--surface-raise); padding:2px var(--chrome-tb-label-pad,8px);font-family:var(--font-mono);font-size:var(--fs-label); text-transform:uppercase;letter-spacing:var(--tracking-label,.06em);color:var(--text-muted);} /* ---- footnotes: numbered square mark on the panel, ruled block at its foot ---- */ .fnref{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--accent);font-weight:600; vertical-align:super;line-height:0;margin-left:2px;white-space:nowrap;} .fnblock{margin-top:var(--s-4);border-top:1px solid var(--chrome-rule-color,var(--border));padding-top:var(--s-3);} .fnhd{font-family:var(--font-mono);font-size:var(--fs-micro);text-transform:uppercase; letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px;} .fnrow{display:flex;gap:var(--s-2);font-family:var(--font-mono);font-size:var(--fs-micro); color:var(--text-dim);line-height:1.6;padding:1px 0;} .fnnum{color:var(--accent);flex:none;font-weight:600;} .fnrow b{color:var(--text-muted);font-weight:600;} /* ---- folio + footer ---- */ footer.attr{margin-top:var(--s-8);border-top:1px solid var(--chrome-rule-color,var(--hairline)); padding:var(--s-6);background:var(--surface-base);} footer.attr .cols{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr;gap:var(--s-6);} @media(max-width:640px){footer.attr .cols{grid-template-columns:1fr;}} footer.attr h3{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase; letter-spacing:var(--tracking-label,.06em);color:var(--text-muted);margin:0 0 var(--s-3);} footer.attr p,footer.attr li{font-size:var(--fs-micro);color:var(--text-dim);font-family:var(--font-mono);line-height:1.6;} footer.attr ul{margin:0;padding-left:1.1em;} .folio{max-width:1040px;margin:var(--s-6) auto 0;display:flex;justify-content:space-between;gap:var(--s-4); font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted); border-top:1px solid var(--chrome-rule-color,var(--border));padding-top:var(--s-3);} .folio .glyph{color:var(--text-dim);} /* ============================================================ LADDER ======== A vertical rail of rungs, region at the top, parcel at the bottom. The rung asked for is the primary object; inherited rungs above collapse to a headline fact (native
); contained rungs below list as counts with a way in; empty rungs are shown, labelled "not yet loaded". */ .ladder{display:flex;flex-direction:column;gap:0;max-width:760px;margin:0 auto;} .ladder-legend{display:flex;flex-wrap:wrap;gap:var(--s-4);font-family:var(--font-mono); font-size:var(--fs-micro);color:var(--text-muted);margin-top:var(--s-4);} .ll-item{display:inline-flex;align-items:center;gap:6px;} .ll-sw{width:12px;height:12px;flex:none;border:1px solid var(--border);} .ll-sw.primary{border-color:var(--text);border-width:2px;} .ll-sw.above{background:var(--surface-panel);} .ll-sw.below{background:var(--surface-raise);} .ll-sw.empty{border-style:dashed;border-color:var(--text-dim);} .rung-rail{width:2px;height:var(--s-5);margin-left:26px; background:repeating-linear-gradient(to bottom,var(--border) 0 3px,transparent 3px 6px);} .rung{border:1px solid var(--border);background:var(--surface-panel); outline:var(--chrome-frame-outline,none);outline-offset:var(--chrome-frame-gap,0);} .rung .rung-body{padding:var(--s-4) var(--s-5);} .rung-head{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3);} .rung-level{font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase; letter-spacing:var(--tracking-label,.06em);color:var(--text);font-weight:600;} .rung-key{font-family:var(--font-mono);font-size:var(--fs-micro);color:var(--text-muted);} /* the plain-language 'explain this' line under each rung title (packet C2). */ .rung-explain{font-size:var(--fs-sm);color:var(--text-muted);margin:-2px 0 var(--s-3);max-width:62ch;} .rung.empty .rung-explain{padding:0 var(--s-5);margin-top:2px;} details.rung.above .rung-explain{margin-top:2px;} .rung.primary{position:relative;outline:var(--chrome-frame-outline-primary,none); outline-offset:var(--chrome-frame-gap,0);box-shadow:var(--chrome-raise-shadow,none);} .rung.primary .rung-body{padding:var(--s-5);} .fld{display:flex;justify-content:space-between;gap:var(--s-4);align-items:baseline; padding:5px 0;border-bottom:1px dotted var(--border);font-size:var(--fs-sm);} .fld:last-child{border-bottom:0;} .fld-k{color:var(--text-muted);} .fld-v{color:var(--text);text-align:right;} /* ordinance (packet B8): the public page shows only the section citation + a link to the town's own code (LI-D12 posture e); the value is never reproduced. */ .fld-cite{color:var(--text-muted);font-style:italic;} .fld-cite-link{color:var(--accent);white-space:nowrap;text-decoration:none;} .fld-cite-link:hover{text-decoration:underline;} details.rung.above{background:var(--surface-panel);} details.rung.above > summary{list-style:none;cursor:pointer;padding:var(--s-4) var(--s-5);display:block;} details.rung.above > summary::-webkit-details-marker{display:none;} details.rung.above .fld.headline{border-bottom:0;padding-top:var(--s-2);} details.rung.above .showall{display:inline-block;margin-top:6px;font-family:var(--font-mono); font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--accent);} details.rung.above[open] .showall{color:var(--text-muted);} details.rung.above .rung-more{padding:0 var(--s-5) var(--s-4);} .rung-below{display:flex;flex-wrap:wrap;gap:var(--s-5);margin-top:2px;} .rung-notes{margin-top:var(--s-4);border-top:1px dotted var(--text-dim);padding-top:var(--s-3);} .rung-note{font-size:var(--fs-sm);color:var(--text-muted);font-style:italic;margin-top:2px;} .wayin{display:inline-flex;align-items:baseline;gap:8px;} .wi-n{font-family:var(--font-mono);font-weight:600;font-size:var(--fs-h3);color:var(--text);letter-spacing:-.01em;} .wi-k{font-size:var(--fs-sm);color:var(--text-muted);} .rung.empty{border-style:dashed;border-color:var(--text-dim);background:transparent;} .rung.empty .rung-head{padding:var(--s-4) var(--s-5) 0;margin-bottom:var(--s-2);} .rung-empty{padding:0 var(--s-5) var(--s-4);display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;} .rung-empty-note{font-size:var(--fs-sm);color:var(--text-muted);flex:1;min-width:220px;} .pending{display:inline-block;border:1px dashed var(--text-dim);color:var(--text-dim); font-family:var(--font-mono);font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.06em;padding:2px 8px;} /* ============================================================ POST CARD ===== The 1080 card: masthead plate, one striped title bar, three sourced facts, the coverage/footer line. Rendered at a fixed square for the social surface. */ .postcard{width:1080px;height:1080px;margin:0 auto;background:var(--surface-panel); border:1px solid var(--border);outline:var(--chrome-frame-outline-primary,none); outline-offset:var(--chrome-frame-gap,0);position:relative;display:flex;flex-direction:column; padding:64px 72px;} .postcard .pc-plate{font-family:var(--font-mono);font-size:34px;letter-spacing:-.01em; background:var(--chrome-plate-bg,transparent);color:var(--chrome-plate-fg,inherit); padding:6px 12px;align-self:flex-start;} .postcard .pc-plate .house{font-weight:400;} .postcard .pc-plate .prod{font-weight:700;} .postcard .pc-eyebrow{font-family:var(--font-mono);font-size:22px;text-transform:uppercase; letter-spacing:.08em;color:var(--accent);margin:44px 0 8px;} .postcard .pc-title{font-family:var(--font-read);font-weight:400;font-size:72px;line-height:1.08; color:var(--text);margin:0 0 40px;} .postcard .pc-facts{display:flex;flex-direction:column;gap:34px;flex:1;} .postcard .pc-fact{border-top:1px solid var(--border);padding-top:22px;} .postcard .pc-fact .k{font-family:var(--font-mono);font-size:24px;text-transform:uppercase; letter-spacing:.05em;color:var(--text-muted);} .postcard .pc-fact .v{font-family:var(--font-mono);font-weight:600;font-size:56px; letter-spacing:-.01em;color:var(--text);margin-top:6px;} .postcard .pc-fact .s{font-family:var(--font-mono);font-size:20px;color:var(--text-dim);margin-top:10px;} .postcard .pc-foot{margin-top:40px;border-top:1px solid var(--chrome-rule-color,var(--border)); padding-top:22px;display:flex;justify-content:space-between;font-family:var(--font-mono); font-size:22px;color:var(--text-muted);} .postcard .pc-foot .link{color:var(--accent);}