/* Wynstanley journal — editorial extensions to the house style. */
.wn-blog {
  --paper: #fbfaf7;
  --ivory: #f4f1e9;
  --ink: #171715;
  --red: #a1230f;
  --blog-paper: #fbfaf7;
  --blog-ink: #171715;
  --blog-muted: #696760;
  --blog-line: rgba(23, 23, 21, .16);
  --blog-red: #a1230f;
  color: var(--blog-ink);
  background: var(--blog-paper);
}
.wn-blog main { overflow: clip; }
.wn-blog a:focus-visible,
.wn-blog button:focus-visible,
.wn-blog input:focus-visible,
.wn-blog summary:focus-visible {
  outline: 2px solid var(--blog-red);
  outline-offset: 4px;
}
.wn-blog .wn-nav { background: rgba(251,250,247,.97); }
.wn-blog .wn-links a[aria-current="page"] { color: var(--blog-red); }
.blog-kicker {
  color: var(--blog-red); font-size: 10px; letter-spacing: .22em;
  line-height: 1.5; text-transform: uppercase; font-weight: 600;
}
.blog-hero {
  position: relative; display: grid; align-items: end; min-height: 430px;
  padding: 80px 22px 54px; color: #fff; isolation: isolate; overflow: hidden;
  background: #343632;
}
.blog-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/photos/royal-suite-peter-vitale.jpg") center 52% / cover no-repeat;
  transform: scale(1.025);
}
.blog-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(18,20,19,.76), rgba(18,20,19,.25) 72%), linear-gradient(0deg, rgba(18,20,19,.25), transparent 58%);
}
.blog-hero-inner { width: 100%; max-width: 1200px; margin: auto; }
.blog-hero .blog-kicker { color: #e8c8bb; }
.blog-hero h1 {
  max-width: 780px; margin: 18px 0 16px; font-size: clamp(42px, 8vw, 82px);
  line-height: .98; letter-spacing: -.035em;
}
.blog-hero p:not(.blog-kicker) { max-width: 530px; color: rgba(255,255,255,.86); font-size: 16px; }
.blog-band {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  padding: 40px 22px; border-bottom: 1px solid var(--blog-line);
}
.blog-band-label { font-size: 11px; text-transform: uppercase; letter-spacing: .18em; color: var(--blog-red); }
.blog-band p:last-child { max-width: 700px; font-family: 'WNSerif', Georgia, serif; font-size: clamp(21px, 3vw, 30px); line-height: 1.4; }
.blog-latest {
  --blog-ink: #171715;
  --blog-muted: #696760;
  --blog-line: rgba(23, 23, 21, .16);
  --blog-red: #a1230f;
  padding: 64px 22px 88px;
  background: #f7f4ee;
  scroll-margin-top: 100px;
}
.blog-latest-head { display:flex; justify-content:space-between; gap:20px; align-items:end; max-width: 1200px; margin:0 auto 26px; }
.blog-latest h2, .blog-article-heading { margin: 9px 0 0; font-size: clamp(30px, 5vw, 48px); line-height: 1.12; }
.blog-controls { display:flex; gap:8px; }
.blog-control {
  width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--blog-line);
  border-radius:50%; background:transparent; color:var(--blog-ink); font-size:22px; cursor:pointer;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}
.blog-control:hover:not(:disabled) { color:#fff; background:var(--blog-ink); border-color:var(--blog-ink); }
.blog-control:disabled { opacity:.32; cursor:not-allowed; }
.blog-carousel { position:relative; max-width:1200px; margin:0 auto; }
.blog-track {
  display:flex; gap:24px; overflow-x:auto; padding:4px 2px 18px;
  scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-inline:contain;
  scrollbar-width:thin; scrollbar-color:rgba(23,23,21,.3) transparent;
}
.blog-card { box-sizing:border-box; min-width:0; flex:0 0 min(86vw, 430px); scroll-snap-align:start; text-decoration:none; border:1px solid var(--blog-line); background:#fff; }
.blog-track > .blog-card:only-child { flex-basis:100%; }
.blog-card-media { height:220px; overflow:hidden; background:#ddd8ce; }
.blog-card-media img { width:100%; height:100%; object-fit:cover; transition:transform 500ms cubic-bezier(.2,.65,.3,1); }
.blog-card:hover .blog-card-media img { transform:scale(1.035); }
.blog-card-copy { padding:22px 22px 25px; }
.blog-card .blog-kicker { margin:0 0 10px; }
.blog-card .blog-card-meta { margin:0 0 14px; font-size:11px; color:var(--blog-muted); }
.blog-card h3 { font-size:25px; line-height:1.2; margin:0 0 12px; }
.blog-card-copy > p:last-of-type { color:var(--blog-muted); font-size:14px; line-height:1.7; }
.blog-card-cta { display:inline-block; margin-top:17px; padding-bottom:4px; border-bottom:1px solid var(--blog-red); color:var(--blog-red); font-size:10px; text-transform:uppercase; letter-spacing:.16em; }
.blog-status { min-height:1.4em; margin-top:8px; color:var(--blog-muted); font-size:12px; }
.blog-footer-note { max-width:1200px; margin:20px auto 0; color:var(--blog-muted); font-family:'WNSerif',Georgia,serif; font-style:italic; font-size:15px; }
.blog-all-link { display:inline-block; margin-top:16px; font-size:11px; text-transform:uppercase; letter-spacing:.13em; text-underline-offset:5px; text-decoration-color:var(--blog-red); }
.blog-latest a:focus-visible, .blog-latest button:focus-visible, .blog-track:focus-visible { outline:2px solid var(--blog-red); outline-offset:4px; }
.wn-site .blog-status { margin-top:8px; }
.wn-site .blog-footer-note { margin:20px auto 0; }
.wn-site .blog-breadcrumb { margin-bottom:28px; }
.wn-site .blog-article-title { margin:14px 0 18px; line-height:1.02; }
.wn-site .blog-meta { margin:24px 0 28px; }
.wn-site .blog-note { margin:20px 0 26px; }

/* Article reading experience */
.blog-article-hero { padding:62px 22px 0; }
.blog-article-shell { width:min(100%, 1140px); margin:0 auto; }
.blog-breadcrumb { margin-bottom:28px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--blog-muted); }
.blog-breadcrumb a { text-decoration-color:var(--blog-red); text-underline-offset:4px; }
.blog-article-title { max-width:960px; margin:14px 0 18px; font-size:clamp(38px,7.2vw,76px); line-height:1.02; letter-spacing:-.035em; }
.blog-article-deck { max-width:720px; color:#4e4d47; font-family:'WNSerif',Georgia,serif; font-size:clamp(19px,2.6vw,25px); line-height:1.5; }
.blog-meta { display:flex; flex-wrap:wrap; gap:8px 22px; margin:24px 0 28px; color:var(--blog-muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
.blog-cover { margin:0; position:relative; }
.blog-cover img { width:100%; height:clamp(230px,48vw,510px); object-fit:cover; object-position:center 52%; }
.blog-cover figcaption { padding:9px 0 0; font-size:11px; color:var(--blog-muted); font-style:italic; }
.blog-reading-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:40px; padding:46px 22px 100px; }
.blog-toc { align-self:start; padding:20px; border:1px solid var(--blog-line); background:#f4f1e9; }
.blog-toc h2 { margin:0 0 12px; font-family:'WNSans',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--blog-red); }
.blog-toc ol { margin:0; padding-left:20px; }
.blog-toc li { padding:5px 0; color:var(--blog-muted); font-size:12px; line-height:1.45; }
.blog-toc a { text-decoration:none; }
.blog-toc a:hover { text-decoration:underline; text-decoration-color:var(--blog-red); text-underline-offset:3px; }
.blog-prose { min-width:0; max-width:780px; font-size:16px; line-height:1.82; color:#33332f; }
.blog-prose > p { margin:0 0 1.2em; }
.blog-prose h2 { scroll-margin-top:100px; margin:2.3em 0 .7em; padding-top:.65em; border-top:1px solid var(--blog-line); font-size:clamp(27px,4vw,38px); line-height:1.15; color:var(--blog-ink); }
.blog-prose h3 { margin:1.65em 0 .45em; font-size:23px; line-height:1.25; color:var(--blog-ink); }
.blog-prose h4 { margin:1.4em 0 .4em; font-family:'WNSans',sans-serif; font-size:16px; font-weight:600; color:var(--blog-ink); }
.blog-prose p + p { margin-top:.1em; }
.blog-prose ul, .blog-prose ol { padding-left:1.35em; margin:.8em 0 1.4em; }
.blog-prose li { margin:.45em 0; padding-left:.15em; }
.blog-lead { font-family:'WNSerif',Georgia,serif; font-size:21px; line-height:1.62; color:#282824; }
.blog-prose strong { color:var(--blog-ink); }
.blog-table-wrap { margin:22px 0 28px; overflow-x:auto; border:1px solid var(--blog-line); }
.blog-prose table { width:100%; border-collapse:collapse; min-width:480px; font-size:14px; line-height:1.55; }
.blog-prose caption { padding:13px 15px; text-align:left; font-family:'WNSerif',Georgia,serif; font-size:18px; background:#f4f1e9; }
.blog-prose th, .blog-prose td { padding:13px 15px; border-top:1px solid var(--blog-line); text-align:left; vertical-align:top; }
.blog-prose thead th { background:#efebe2; color:var(--blog-ink); font-weight:600; }
.blog-energy-targets { display:grid; grid-template-columns:1fr; margin:22px 0 12px; border-top:1px solid var(--blog-line); border-bottom:1px solid var(--blog-line); }
.blog-energy-target { display:flex; align-items:baseline; gap:14px; padding:16px 0; border-bottom:1px solid var(--blog-line); }
.blog-energy-target:last-child { border:0; }
.blog-energy-target strong { color:var(--blog-red); font-family:'WNSerif',Georgia,serif; font-size:33px; font-weight:500; }
.blog-energy-target span { font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.blog-note { margin:20px 0 26px; padding:18px 20px; background:#f4f1e9; border-left:2px solid var(--blog-red); color:#55544e; font-size:14px; line-height:1.7; }
.blog-widget { margin:26px 0 34px; padding:24px 20px; border:1px solid var(--blog-line); background:#f7f4ee; }
.blog-widget h3 { margin:0 0 8px; }
.blog-widget-intro { margin-bottom:20px !important; color:var(--blog-muted); font-size:14px; }
.blog-calc-fields { display:grid; grid-template-columns:1fr; gap:14px; }
.blog-calc-field label { display:block; margin-bottom:6px; color:#484741; font-size:12px; font-weight:600; }
.blog-calc-field input { box-sizing:border-box; width:100%; min-height:46px; border:1px solid #aaa69d; border-radius:0; padding:10px 12px; background:#fff; color:var(--blog-ink); font:inherit; font-variant-numeric:tabular-nums; }
.blog-calc-results { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0; }
.blog-calc-result { padding:14px; background:#fff; border:1px solid var(--blog-line); }
.blog-calc-result span { display:block; color:var(--blog-muted); font-size:10px; text-transform:uppercase; letter-spacing:.13em; }
.blog-calc-result output { display:block; margin-top:4px; font-family:'WNSerif',Georgia,serif; font-size:23px; color:var(--blog-ink); }
.blog-copy-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 17px; border:1px solid var(--blog-red); background:var(--blog-red); color:#fff; font:inherit; font-size:11px; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; transition:background 160ms ease,color 160ms ease; }
.blog-copy-button:hover { background:transparent; color:var(--blog-red); }
.blog-feedback { min-height:1.5em; margin:10px 0 0 !important; color:var(--blog-muted); font-size:13px; }
.blog-feedback[data-state="success"] { color:#345a46; }
.blog-feedback[data-state="error"] { color:#9b2b18; }
.blog-checklist { margin:20px 0 16px; padding:0; list-style:none; border-top:1px solid var(--blog-line); }
.blog-checklist li { margin:0; padding:12px 0; border-bottom:1px solid var(--blog-line); }
.blog-check-label { display:flex; align-items:flex-start; gap:12px; cursor:pointer; font-size:14px; line-height:1.55; }
.blog-check-label input { flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; accent-color:var(--blog-red); }
.blog-check-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; }
.blog-check-count { font-size:13px; color:var(--blog-muted); font-variant-numeric:tabular-nums; }
.blog-faq { margin:20px 0 32px; border-top:1px solid var(--blog-line); }
.blog-faq details { border-bottom:1px solid var(--blog-line); }
.blog-faq summary { position:relative; padding:17px 30px 17px 0; cursor:pointer; list-style:none; font-family:'WNSerif',Georgia,serif; font-size:19px; line-height:1.35; color:var(--blog-ink); }
.blog-faq summary::-webkit-details-marker { display:none; }
.blog-faq summary::after { content:"+"; position:absolute; right:3px; top:15px; color:var(--blog-red); font-family:'WNSans',sans-serif; font-size:22px; }
.blog-faq details[open] summary::after { content:"−"; }
.blog-faq .blog-faq-answer { padding:0 24px 17px 0; font-size:14px; line-height:1.75; color:#55544e; }
.blog-faq-answer p { margin:0 !important; }
.blog-source-list { font-size:14px; }
.blog-article-cta { margin:42px 0 0; padding:26px; background:#f1eee6; border-top:1px solid var(--blog-line); }
.blog-article-cta p { margin-bottom:14px; font-family:'WNSerif',Georgia,serif; font-size:20px; line-height:1.45; }
.blog-article-cta a { color:var(--blog-red); text-underline-offset:4px; }
.blog-back-top { display:inline-block; margin-top:24px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-underline-offset:4px; }
.blog-article .wn-footer { margin-top:0; }
.blog-article .wn-footer-cols a[aria-current="page"] { text-decoration:underline; text-underline-offset:4px; }
.blog-article .wn-nav { top:0; }
@media (min-width:760px) {
  .blog-track > .blog-card:only-child { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; }
  .blog-track > .blog-card:only-child .blog-card-media { height:100%; min-height:340px; }
  .blog-track > .blog-card:only-child .blog-card-copy { padding:clamp(28px,4vw,56px); align-self:center; }
  .blog-hero { min-height:510px; padding:100px 44px 64px; }
  .blog-band { grid-template-columns:220px 1fr; align-items:start; padding:54px 44px; }
  .blog-latest { padding:88px 44px 110px; }
  .blog-card { flex-basis:calc((100% - 24px)/2); }
  .blog-card-media { height:270px; }
  .blog-article-hero { padding:70px 44px 0; }
  .blog-reading-layout { grid-template-columns:220px minmax(0,780px); gap:clamp(38px,6vw,90px); padding:56px 44px 120px; justify-content:center; }
  .blog-toc { position:sticky; top:100px; max-height:calc(100vh - 130px); overflow:auto; }
  .blog-energy-targets { grid-template-columns:repeat(3,1fr); }
  .blog-energy-target { display:block; padding:20px; border-right:1px solid var(--blog-line); border-bottom:0; }
  .blog-energy-target:last-child { border-right:0; }
  .blog-energy-target strong, .blog-energy-target span { display:block; }
  .blog-energy-target span { margin-top:3px; }
  .blog-calc-fields { grid-template-columns:1fr 1fr; }
  .blog-widget { padding:30px; }
}
@media (min-width:1100px) {
  .blog-card { flex-basis:calc((100% - 48px)/3); }
}
@media (max-width:759px) {
  .blog-calc-results { grid-template-columns:1fr; }
  .blog-latest-head { align-items:center; }
  .blog-controls { flex-shrink:0; }
  .blog-reading-layout { padding-inline:22px; }
  .blog-toc { order:0; }
}
@media (prefers-reduced-motion:reduce) {
  .blog-track { scroll-behavior:auto; }
  .blog-card-media img, .blog-control, .blog-copy-button { transition:none; }
}