/* Article typography follows the site; charts keep a compact, independent scale. */
html { zoom: .80; scroll-behavior: smooth; }
body > header a:hover { color: var(--ink); }
.price-study { --plot-ink: #303030; --plot-gray: #999; --plot-alarm: #923f43; --article-anchor-offset: 100px; position: relative; display: block; max-width: 900px; margin: .85rem auto 0; padding: 0; font-family: var(--serif); }
.study-article { min-width: 0; }
.article-masthead { background: var(--paper); padding-block: 16px; }
/* Match the GPU article spacing; give the label its own paint layer above the sticky masthead. */
.memo-label { position: relative; z-index: 3; transform: translateZ(0); margin: 0 0 -8px; font-family: var(--serif); color: #999; font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 2.5px; text-transform: uppercase; }
.price-study .memo-head { display: grid; gap: 3px; border: 0; padding: 0; margin: 0; }
.price-study .memo-head h2 { font-family: var(--serif); font-size: 1.6rem; line-height: 1.25; font-weight: 400; margin: 0; color: #333; }
.price-study p { margin: 8px 0; font-size: 14.5px; line-height: 1.55; color: #2a2a2a; text-wrap: pretty; }
.price-study .study-overview p { margin: 8px 0; font-size: 14.5px; line-height: 1.55; }
.price-study .memo-sub { margin: 0; color: #999; font-size: 11px; line-height: 1.3; letter-spacing: 1px; text-transform: uppercase; }
.price-study .header-study { margin: 0 0 16px; }
.header-study picture { display: block; }
.price-study .header-study .hero-banner-img { object-fit: contain; }
.price-study h3 { margin: 0 0 8px; font: 700 1.3rem/1.3 var(--serif); letter-spacing: -.15px; color: var(--body); text-wrap: balance; }
.story-step { display: flow-root; padding: 0; margin: 40px 0 0; }
.story-copy > p:first-of-type { margin-top: 0; }
.story-copy > :last-child { margin-bottom: 0; }
.model-note { margin-top: 36px; }
.price-study .model-note h4 { margin: 0 0 8px; font: 700 1.08rem/1.4 var(--serif); color: var(--body); }
.model-note > :first-child { margin-top: 0; }
.model-note > :last-child { margin-bottom: 0; }
.equation { display: flex; justify-content: center; margin: 24px 0; padding: 8px 0; overflow-x: auto; color: #555550; font-size: 22px; }
.equation math { flex: none; margin: 0; }
.price-study .equation-key { max-width: 620px; margin: -4px auto 20px; color: #666; font-size: 13.5px; line-height: 1.5; text-align: center; text-wrap: balance; }
.math-function { font-style: normal; }
.price-study var { font-family: var(--serif); }
.price-study var sub { font-size: .75em; }
.story-step, .study-overview, .model-note { scroll-margin-top: 24px; }
.price-study a { text-underline-offset: 3px; }
.price-study p a { border-bottom: .5px solid #999; }
.price-study p a:hover { border-bottom-color: currentColor; text-decoration: none; }
main.price-study :where(p, li, blockquote) a:not(.collection-btn):not(.hero-link):not(.btn):not(.view-cta) { color: var(--ink); text-decoration-color: currentColor; }
/* Contents sit outside the reading column, as notes in a journal margin. */
.page-toc { position: absolute; left: calc(100% + 24px); top: 0; bottom: 0; width: 184px; border-left: 1px solid var(--rule); padding-left: 24px; }
.toc-inner { position: sticky; top: 16px; padding-top: 16px; font-family: var(--serif); font-size: 14.5px; line-height: 1.4; }
.price-study .toc-heading { margin: 0 0 8px; font-size: 14.5px; line-height: 1.4; font-weight: 700; color: var(--body); }
.toc-inner a { display: block; color: #666; padding: 6px 0; text-decoration: none; transition: color 160ms; }
.toc-inner a:hover { color: var(--ink); text-decoration: none; }
.toc-inner a[aria-current='location'] { color: var(--ink); text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 4px; }
/* Figures use screen-size labels; 32px here equals the prose's 40px section gap. */
.story-figure { zoom: 1.25; position: relative; display: flow-root; width: 100%; max-width: 600px; min-width: 0; margin: 32px auto 0; padding: 0; }
.chart-readout { position: relative; display: flex; width: max-content; max-width: 100%; gap: 20px; height: 24px; align-items: center; margin: 0 0 6px; font: 13px/24px 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-variant-numeric: tabular-nums; will-change: transform; }
.readout-item { display: inline-flex; gap: 7px; align-items: center; white-space: nowrap; }
.readout-item::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--plot-ink); }
.readout-baseline::before { background: var(--plot-gray); }
.chart-readout strong { display: inline-flex; color: #333; font: inherit; font-weight: 400; }
.readout-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.value-character { position: relative; display: inline-block; width: .61em; height: 1.4em; overflow: hidden; font-style: normal; line-height: 1.4; }
.value-character.narrow-character { width: .45em; }
.value-character > span { position: absolute; inset: 0; display: block; text-align: center; }
.chart-mount { width: 100%; min-height: 240px; cursor: default; touch-action: pan-y; }
.chart-mount svg { display: block; width: 100%; overflow: visible; }
.chart-mount .axis, .cursor-date { font: 11px 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; font-variant-numeric: tabular-nums; letter-spacing: .15px; }
.chart-mount .axis { color: #777; }
.chart-mount .x-axis { text-transform: uppercase; }
.chart-mount .axis .domain { display: none; }
.chart-mount .grid line { stroke: #c5c5c0; stroke-width: 1; stroke-dasharray: 1 5; }
.chart-mount .date-guide { stroke: #ddddd7; stroke-width: .7; }
.chart-mount .plot-line { fill: none; stroke: var(--plot-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart-mount .baseline-line { stroke: var(--plot-gray); stroke-width: 1.1; stroke-dasharray: 3 3; }
.chart-mount .envelope-line { fill: none; stroke: #aaa; stroke-width: .6; stroke-opacity: .35; }
.chart-mount .reference-band { fill: #888; fill-opacity: .09; }
.chart-mount .alarm-fill { fill: var(--plot-alarm); fill-opacity: .13; }
.chart-mount .alarm-line { stroke: var(--plot-alarm); }
.chart-mount .share-fill { fill: url(#fill-breadth); }
.chart-mount .cursor-line { stroke: #777; stroke-width: .8; stroke-dasharray: 2 4; }
.chart-mount .cursor-dot { fill: var(--plot-ink); }
.chart-mount .baseline-dot { fill: var(--plot-gray); }
.chart-mount .alarm-dot { fill: var(--plot-alarm); }
.cursor-date { opacity: 1; }
.cursor-date rect { fill: var(--paper); }
.cursor-date text { fill: var(--ink); }
.x-axis .tick text { transition: opacity 120ms; }
.is-inspecting .x-axis .tick text { opacity: .2; }
.chart-controls { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.story-figure:has(input:focus-visible) .chart-mount { outline: 1px solid #aaa; outline-offset: 6px; }
/* Keep the legend centered, with the price threshold directly beneath it. */
.figure-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 0; }
.figure-footer .chart-legend { margin: 0; gap: 8px 12px; }
.threshold-control { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; font: 12px/20px var(--serif); color: #777; }
.threshold-options { display: flex; align-items: center; gap: 12px; }
.threshold-control button { appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 4px 0; min-height: 32px; font: inherit; color: #777; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1px; transition: color 200ms, text-decoration-color 200ms; }
.threshold-control button[aria-pressed='true'] { color: var(--ink); text-decoration-color: currentColor; }
.threshold-control button:hover { color: var(--ink); text-decoration-color: #999; }
.threshold-control button:active { transform: translateY(1px); }
.chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; margin-top: 8px; font: 10px/20px 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; color: #777; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--plot-ink); }
.chart-legend .legend-baseline::before { background: var(--plot-gray); }
.chart-legend .legend-band::before { border-radius: 0; width: 12px; background: #dededb; }
.chart-legend .legend-alarm::before { background: var(--plot-alarm); }
.story-figure figcaption { margin: 4px auto 0; max-width: 480px; text-align: center; font: 12px/18px var(--serif); color: #777; text-wrap: pretty; }
.seller-coverage { display: block; }
.price-study .data-credit { margin: 24px 0 0; font-size: 12px; line-height: 1.5; color: #777; }
.price-study .back-section { display: flex; justify-content: center; align-items: center; margin-top: 32px; padding: 32px 0; }
.price-study .data-credit + .back-section { margin-top: 24px; }
.price-study .collection-btn { color: var(--ink); font: 400 13px/1.4 var(--serif); letter-spacing: .15px; text-transform: none; }
.price-study .collection-btn:hover { color: var(--ink); opacity: .65; }
.price-study :is(a,button,input):focus-visible { outline: 2px solid #555; outline-offset: 4px; }
.no-script { max-width: 900px; margin: 24px auto; }
@media (min-height: 480px) {
  .article-masthead { position: sticky; top: 0; z-index: 2; }
  .story-step, .study-overview, .model-note { scroll-margin-top: var(--article-anchor-offset); }
}
@media (min-width: 1153px) and (min-height: 640px) {
  .study-article::before { content: ''; position: absolute; left: -24px; top: 0; bottom: 0; border-left: 1px solid var(--rule); pointer-events: none; }
}
@media (max-width: 1152px) {
  .page-toc { display: none; }
}
@media (max-width: 768px) {
  .study-article { padding: 0 .75rem; }
  .article-masthead { padding-block: 12px; }
  .price-study .header-study { margin-bottom: 12px; }
  .memo-label { margin-bottom: -4px; font-size: 10px; letter-spacing: 1.6px; }
  .price-study .memo-head h2 { font-size: 1.3rem; }
  .price-study .memo-sub { font-size: 10px; letter-spacing: .8px; }
  .price-study p, .price-study .study-overview p { font-size: 15px; }
}
@media (max-width: 600px) {
  .price-study p { line-height: 1.55; }
  .price-study h3 { font-size: 1.3rem; }
  .chart-readout { gap: 16px; font-size: 12px; }
  .readout-item { gap: 5px; }
  .chart-mount .axis { font-size: 11px; }
  .chart-mount { min-height: 240px; }
  .story-step { margin-top: 32px; }
  .model-note { margin-top: 28px; }
  .equation { margin: 20px 0; font-size: 20px; }
  .price-study .equation-key { margin-bottom: 16px; font-size: 13.5px; }
  .story-figure { margin-top: 24px; }
  .story-figure figcaption { font-size: 12px; line-height: 19px; }
  .chart-legend { gap: 6px 14px; font-size: 10px; }
  .threshold-control { gap: 12px; }
  .threshold-options { gap: 16px; }
  .threshold-control button { min-height: 44px; padding: 8px 4px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .threshold-control button, .toc-inner a, .cursor-date, .x-axis .tick text { transition: none; } }

/* Building-energy figures share the article's paper and restrained ink. */
.margin-drawing { display: none; }
@media (min-width: 1153px) and (min-height: 640px) {
  .energy-study .margin-drawing { display: block; position: fixed; top: 50%; left: calc((100% - 900px) / 4 - 12px); width: 99px; margin: 0; transform: translate(-50%, -50%); }
  .margin-drawing img { display: block; width: 100%; height: auto; }
  .margin-drawing-link { display: block; color: inherit; text-decoration: none; }
  .margin-drawing-link:hover { color: inherit; text-decoration: none; }
  .margin-drawing-link:hover img { opacity: .72; }
  .margin-drawing-link:focus-visible { outline: 1px solid #777; outline-offset: 8px; }
  .margin-drawing-caption { position: absolute; top: 100%; left: 50%; margin-top: 8px; transform: translateX(-50%); color: #777; font: italic 400 13px/1.4 var(--serif); white-space: nowrap; text-align: center; }
}
.energy-study .provenance { margin-top: 14px; font-size: 12.5px; color: #777; }
.energy-study .equation-pair { flex-direction: column; align-items: center; gap: 18px; }
.figure-unit { font: 10px/1.4 'SFMono-Regular', Consolas, 'Liberation Mono', monospace; color: #777; margin-bottom: 7px; }
.energy-study .chart-readout { margin-inline: auto; height: 22px; font-size: 11px; gap: 18px; }
.energy-study .readout-label { position: static; width: auto; height: auto; clip-path: none; font-weight: normal; color: #777; }
.energy-study .readout-item { gap: 5px; }
.energy-study .readout-item::before { background: var(--readout-color); width: 5px; height: 5px; }
.energy-study .chart-mount img { width: 100%; height: auto; display: block; }
.energy-study .chart-legend .legend-upper::before { background: #807c75; }
.energy-study .chart-legend .legend-base::before { background: #aaa69f; }
.scenario-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; }
.scenario-options button { appearance: none; background: none; color: #777; border: 0; border-radius: 0; padding: 8px 0; font: 12px/1.4 var(--serif); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; }
.scenario-options button[aria-pressed='true'] { color: #222; text-decoration-color: #777; }
.scenario-options button:hover { color: #222; }
.scenario-options[hidden] { display: none; }
.seasonal-options { margin: 4px 0 8px; }
.energy-study .zero-line { stroke: #999; stroke-width: .8; }
.energy-study .scenario-explanation { max-width: 475px; margin: 8px auto 0; text-align: center; font-size: 12px; line-height: 1.55; color: #555; }
.energy-study .scenario-figure { margin-top: 20px; }
.energy-study .plot-upper { fill: none; stroke: #807c75; stroke-width: 1.25; }
.energy-study .plot-base { fill: none; stroke: #aaa69f; stroke-width: 1.25; }
.energy-study .load-line { stroke-width: 1.2; }
.energy-study .plot-dot { fill: #aaa69f; fill-opacity: .4; }
@media (max-width:600px) {
  .energy-study .chart-readout { font-size: 10px; gap: 12px; }
  .scenario-options { gap: 4px 16px; }
  .scenario-options button { min-height: 44px; font-size: 12px; }
  .energy-study .equation-pair { font-size: 18px; }
}

.energy-study .story-figure + .model-note { margin-top: 24px; }

.energy-study .prose-marker--grey { padding: 0 2px; color: inherit; background: rgba(110, 110, 105, .13); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* Compare the seasonal models using the article's existing ink and red accent. */
.energy-study .seasonal-model-line { stroke: var(--plot-alarm); stroke-width: 1.6; }
.energy-study .seasonal-comparison-line { fill: none; stroke: #999; stroke-width: 1; stroke-dasharray: 3 4; opacity: .4; }
.energy-study .seasonal-explanation { margin: 8px auto 0; max-width: 475px; text-align: center; font: 12px/1.55 var(--serif); color: #555; }

/* Stable colours and legend order keep the comparison readable when switching. */
.energy-study [data-chart="seasonal"] .load-line { stroke-width: 1; stroke-opacity: .8; }
.energy-study .seasonal-model-weather { stroke: #807c75; }
.energy-study .seasonal-model-seasonal { stroke: var(--plot-alarm); }
.energy-study [data-chart="seasonal"] .alarm-fill { fill-opacity: .08; }
.energy-study .legend-weather::before { background: #807c75; }
.energy-study [data-selected-model="weather"] .legend-alarm,
.energy-study [data-selected-model="seasonal"] .legend-weather { opacity: .55; }
.energy-study .seasonal-options { margin: 12px 0 8px; gap: 24px; }
.energy-study .seasonal-options button { min-height: 44px; }
.energy-study .seasonal-options button[data-seasonal="seasonal"][aria-pressed="true"] { color: var(--plot-alarm); text-decoration-color: currentColor; }
.energy-study .seasonal-options button[data-seasonal="weather"][aria-pressed="true"] { color: #807c75; text-decoration-color: currentColor; }