/* ==========================================================================
   Kevin Lucano Real Estate: page-type components (2026-10 redesign)
   --------------------------------------------------------------------------
   Components that belong to one kind of page. Loaded after site.css and
   written only against its tokens:
     colour   var(--klre-bg|surface|surface-2|raised|ink|ink-2|muted|line|line-2|tint|accent|link|btn|on-btn)
     space    var(--klre-s-1 .. --klre-s-8), var(--klre-section-y)
     type     var(--klre-fs-xs|sm|base|lg|h3|h2|h1), var(--klre-font-display|text)
     shape    var(--klre-r-sm|r|r-lg|pill), var(--klre-shadow-1|2)
   No literal colours. Dark mode is <html data-theme="dark"> and needs no rules
   of its own here if the tokens are used.
   ========================================================================== */

/* == TASK 1: GUIDES AND AREAS == */

/* The guide flow (/sellers-guide/, /buyers-guide/): the six decisions in order,
   drawn like the process steps on the homepage. Six rules across, each with a
   short segment of the button colour sitting on top of it, so the sequence reads
   as one stair rather than six boxes competing with the prose around them. */
.klre-flow{
  list-style:none;
  padding:0;
  margin-block:var(--klre-s-6);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:var(--klre-s-4);
  max-width:none
}
.klre-flow>li{position:relative;margin:0;padding-top:var(--klre-s-4);border-top:2px solid var(--klre-line)}
.klre-flow>li::before{content:"";position:absolute;top:-2px;left:0;width:44px;border-top:2px solid var(--klre-btn)}
.klre-flow-step{display:grid;gap:var(--klre-s-2)}
.klre-flow-num{font-family:var(--klre-font-display);font-size:var(--klre-fs-xs);font-weight:600;line-height:1;letter-spacing:.04em;color:var(--klre-accent)}
.klre-flow-label{font-family:var(--klre-font-display);font-size:var(--klre-fs-sm);font-weight:600;line-height:1.35;color:var(--klre-ink)}
.klre-flow-note{font-size:var(--klre-fs-sm);color:var(--klre-muted)}

/* The three steps on /home-value/: the homepage process, three up. The number is
   the same 13px display numeral on the same rule, so the two pages are visibly
   the same idea. WordPress gives every block a block-gap top margin, which turns
   a grid into a column, so the children are reset here. */
.klre-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--klre-s-6);
  margin-block:var(--klre-s-6);
  max-width:none
}
.klre-steps>*{margin-block-start:0}
.klre-steps>.klre-fineprint{grid-column:1/-1;max-width:none}
.klre-step{position:relative;margin:0;padding-top:var(--klre-s-5);border-top:2px solid var(--klre-line)}
.klre-step>*{margin-block-start:0}
.klre-step::before{content:"";position:absolute;top:-2px;left:0;width:44px;border-top:2px solid var(--klre-btn)}
.klre-step-number{font-family:var(--klre-font-display);font-size:var(--klre-fs-xs);font-weight:600;line-height:1;letter-spacing:.04em;color:var(--klre-accent);margin:0}
.klre-step h3{margin-top:var(--klre-s-4)}
.klre-step p:last-child{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin-top:var(--klre-s-2)}

/* Areas and reports (/neighborhoods/, /market-reports/): each city is one card,
   and the whole card is the link. The arrow says the card goes somewhere; it is
   decoration, so it stays out of the copy and out of the accessibility tree. */
.klre-area-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--klre-s-4);margin-block:var(--klre-s-6);max-width:none}
.klre-area-grid>*{margin-block-start:0}
.klre-area-card{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--klre-s-3);
  min-height:72px;
  margin:0;
  padding:var(--klre-s-5);
  background:var(--klre-raised);
  border:1px solid var(--klre-line);
  border-radius:var(--klre-r-lg);
  transition:border-color .15s ease,box-shadow .15s ease
}
.klre-area-card:hover{border-color:var(--klre-line-2);box-shadow:var(--klre-shadow-2)}
.klre-area-card:focus-within{outline:2px solid var(--klre-focus);outline-offset:3px}
.klre-area-card::after{content:"\2192";flex:0 0 auto;color:var(--klre-muted);transition:color .15s ease,transform .15s ease}
.klre-area-card:hover::after{color:var(--klre-link);transform:translateX(3px)}
.klre-area-card-name{margin:0;font-family:var(--klre-font-display);font-weight:600;font-size:var(--klre-fs-base)}
.klre-area-card-name a{color:var(--klre-ink);text-decoration:none}
.klre-area-card-name a::before{content:"";position:absolute;inset:0;border-radius:inherit}
.klre-area-card--action{background:var(--klre-btn);border-color:var(--klre-btn)}
.klre-area-card--action .klre-area-card-name a{color:var(--klre-on-btn)}
.klre-area-card--action::after{color:var(--klre-on-btn)}

/* The closing list of links on an area page: hairline rows, each row a full
   target rather than six words to aim at. Named with two classes so these rules
   outrank the generic .wp-block-list rules in site.css (loaded before this file)
   regardless of source order. */
.wp-block-list.klre-link-list{list-style:none;padding:0;margin-block:var(--klre-s-5);max-width:none}
.wp-block-list.klre-link-list li{margin:0;padding:0;border-top:1px solid var(--klre-line)}
.wp-block-list.klre-link-list li+li{margin-top:0}
.wp-block-list.klre-link-list li:last-child{border-bottom:1px solid var(--klre-line)}
.klre-link-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--klre-s-3);min-height:48px;color:var(--klre-ink);text-decoration:none}
.klre-link-list a::after{content:"\2192";flex:0 0 auto;color:var(--klre-muted);transition:color .15s ease,transform .15s ease}
.klre-link-list a:hover{color:var(--klre-link)}
.klre-link-list a:hover::after{color:var(--klre-link);transform:translateX(3px)}

/* The market report on an area page. The frame is a document from somewhere
   else: it gets the card edge, and the two ways out of it sit in a foot on the
   same paper rather than loose underneath. */
.klre-report-section{max-width:none}
.klre-report-section h3{margin-block:var(--klre-s-6) 0}
.klre-report-embed-wrap{
  background:var(--klre-raised);
  border:1px solid var(--klre-line);
  border-radius:var(--klre-r-lg);
  overflow:hidden;
  margin-block:var(--klre-s-4) 0;
  max-width:none
}
.klre-report-embed-wrap>*{margin-block-start:0}
.klre-report-embed{margin:0;padding:0;border:0;background:var(--klre-surface)}
.klre-report-frame{display:block;width:100%;height:620px;border:0}
.klre-report-embed img{display:block;width:100%;height:auto;border:0}
.klre-report-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--klre-s-3);
  margin:0;
  padding:var(--klre-s-4) var(--klre-s-5);
  border-top:1px solid var(--klre-line);
  font-size:var(--klre-fs-sm);
  color:var(--klre-muted)
}
.klre-report-actions a{font-weight:600}

/* The portrait on /about/: site.css crops and rounds it, this only stops it
   growing to the full column. */
.klre-portrait{max-width:22rem}

/* Page context. site.css spaces every child of post content with a block-gap
   rule of higher specificity, so the component margins are restated here. */
.klre-page .wp-block-post-content>.klre-flow,
.klre-page .wp-block-post-content>.klre-steps{margin-block:var(--klre-s-6)}
.klre-page .wp-block-post-content>.klre-flow-note{font-size:var(--klre-fs-sm);color:var(--klre-muted)}
.klre-page .klre-section>.klre-steps,
.klre-page .klre-section>.klre-area-grid{margin-block:var(--klre-s-6)}

@media (max-width:1023px){
  .klre-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .klre-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .klre-area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .klre-report-frame{height:520px}
}
@media (max-width:720px){
  .klre-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .klre-steps{grid-template-columns:minmax(0,1fr)}
  .klre-area-grid{grid-template-columns:minmax(0,1fr)}
  .klre-report-frame{height:65vh;min-height:380px}
}

/* == END TASK 1 == */

/* == TASK 2: BLOG == */

/* The blog header, shared by the index, a topic archive and a search: a kicker,
   one h1, a lede and an honest little note, on a reading measure. */
.klre-blog-hero{max-width:46rem;padding-block:var(--klre-s-6) var(--klre-s-6)}
.klre-blog-kicker{font-family:var(--klre-font-display);font-size:var(--klre-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--klre-accent);margin:0}
.klre-blog-h1{font-size:var(--klre-fs-h1);margin-top:var(--klre-s-3)}
.klre-blog-sub{font-size:var(--klre-fs-lg);color:var(--klre-ink-2);margin-top:var(--klre-s-5)}
.klre-blog-note{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin-top:var(--klre-s-3)}

/* Search: a label, a field and a submit, in the one row they belong in. The
   field is already a control in site.css; the button copies .klre-button so it
   matches every other primary action on the site. */
.klre-search-band{margin-block:var(--klre-s-5) var(--klre-s-6);max-width:36rem}
/* On a topic archive the header and the search band are direct children of the
   page column, where site.css lets a child take the full container width. Same
   measures here as on the index, which nests them in a group. */
.klre-page>.klre-blog-hero{max-width:46rem}
.klre-page>.klre-search-band{max-width:36rem}
.klre-search-label{display:block;font-size:var(--klre-fs-sm);font-weight:600;color:var(--klre-ink-2);margin-bottom:var(--klre-s-2)}
.klre-search-row{display:flex;gap:var(--klre-s-2)}
.klre-search-row>.klre-search-input{flex:1;min-width:0}
.klre-search-go{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--klre-s-2);flex:0 0 auto;
  min-height:48px;padding-inline:var(--klre-s-5);border-radius:10px;border:1px solid transparent;
  background:var(--klre-btn);color:var(--klre-on-btn);
  font-family:var(--klre-font-display);font-size:var(--klre-fs-sm);font-weight:600;letter-spacing:.005em;line-height:1.2;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease
}
.klre-search-go:hover{background:var(--klre-btn-hover);box-shadow:var(--klre-shadow-1);text-decoration:none}
.klre-search-go:active{transform:translateY(1px)}

/* Topic row: the topics read as one line of chips, with the two audience
   entries first, a hairline break, then the categories and their counts. */
.klre-topics{display:flex;flex-wrap:wrap;align-items:center;gap:var(--klre-s-2);margin-block:var(--klre-s-5)}
.klre-topics-label{font-family:var(--klre-font-display);font-size:var(--klre-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--klre-accent);margin:0;margin-right:var(--klre-s-2)}
.klre-topic{min-height:32px;border:1px solid var(--klre-line);background:var(--klre-raised);color:var(--klre-ink-2)}
.klre-topic.is-current{background:var(--klre-btn);border-color:var(--klre-btn);color:var(--klre-on-btn)}
.klre-topic-count{color:var(--klre-muted);font-weight:500;margin-left:var(--klre-s-1)}
.klre-topic.is-current .klre-topic-count{color:inherit}
.klre-topics-divider{flex:0 0 auto;align-self:center;width:1px;height:20px;background:var(--klre-line-2)}

/* The archive: heading, count, then the list. The index and the categories lay
   the posts out three across, which is the only change to the shared cards. */
.klre-archive{margin-top:var(--klre-s-7)}
.klre-archive-head{font-size:var(--klre-fs-h2)}
.klre-count{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin-block:var(--klre-s-3) var(--klre-s-5)}
.klre-archive .klre-cards,
.klre-search-page .klre-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--klre-s-5)}

/* Pagination: square targets, the current page in the button colour. */
.klre-pager-list{display:flex;flex-wrap:wrap;list-style:none;padding:0;gap:var(--klre-s-2);margin-top:var(--klre-s-7)}
.klre-pager-item{display:flex;margin:0}
.klre-pager .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  padding-inline:var(--klre-s-3);border:1px solid var(--klre-line);border-radius:var(--klre-r-sm);
  color:var(--klre-ink);font-family:var(--klre-font-display);font-size:var(--klre-fs-sm);font-weight:600;
  text-decoration:none;transition:background-color .15s ease,color .15s ease,border-color .15s ease
}
.klre-pager .page-numbers:hover{background:var(--klre-surface);color:var(--klre-ink);text-decoration:none}
.klre-pager .is-current .page-numbers{background:var(--klre-btn);color:var(--klre-on-btn);border-color:var(--klre-btn)}
.klre-pager .dots{border:0;min-width:auto}

/* The bottom half of /blog/: recommended reads, the chooser, the glossary and
   the self-check. It is a second act, so it opens on a rule. */
.klre-blog-head{font-size:var(--klre-fs-h2)}
.klre-blog-lead{font-size:var(--klre-fs-lg);color:var(--klre-ink-2);margin-top:var(--klre-s-3)}
.klre-rec-reads .klre-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--klre-s-4)}
.klre-blog-curated{margin-block:var(--klre-s-7);padding-top:var(--klre-s-7);border-top:1px solid var(--klre-line)}
.klre-blog-subhead{font-size:var(--klre-fs-h3);margin-top:var(--klre-s-6)}

/* The chooser: four doors per audience. Each card is one link, so the whole
   panel is the target and the "Read this" sits at the foot of it. */
.klre-chooser{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--klre-s-4);margin-top:var(--klre-s-4)}
.klre-choose{
  display:flex;flex-direction:column;gap:var(--klre-s-2);
  padding:var(--klre-s-5);background:var(--klre-raised);border:1px solid var(--klre-line);border-radius:var(--klre-r-lg);
  color:var(--klre-ink);text-decoration:none;transition:border-color .15s ease,box-shadow .15s ease
}
.klre-choose:hover{border-color:var(--klre-line-2);box-shadow:var(--klre-shadow-2);color:var(--klre-ink);text-decoration:none}
.klre-choose-q{font-family:var(--klre-font-display);font-weight:600}
.klre-choose-d{font-size:var(--klre-fs-sm);color:var(--klre-muted)}
.klre-choose-go{color:var(--klre-link);font-weight:600;font-size:var(--klre-fs-sm);margin-top:auto}

/* The glossary: two columns of hairline rows. Each row is a native details, so
   it opens without JavaScript; the word itself is the target, and "tap" is the
   hint telling you that. */
.klre-words{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--klre-s-6)}
.klre-word{margin:0;padding-block:var(--klre-s-4);border-top:1px solid var(--klre-line)}
.klre-word>summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--klre-s-3);cursor:pointer;list-style:none;
  font-family:var(--klre-font-display);font-weight:600;font-size:var(--klre-fs-base);color:var(--klre-ink)
}
.klre-word>summary::-webkit-details-marker{display:none}
.klre-word>summary:focus-visible{outline:2px solid var(--klre-focus);outline-offset:3px;border-radius:var(--klre-r-sm)}
.klre-word-tap{flex:0 0 auto;font-family:var(--klre-font-text);font-size:var(--klre-fs-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--klre-link)}
.klre-word>p{margin:var(--klre-s-2) 0 0;font-size:var(--klre-fs-sm);line-height:1.6;color:var(--klre-ink-2)}

/* The self-check: a tinted panel of checkboxes, no submit, nothing sent. */
.klre-selfcheck{display:grid;gap:var(--klre-s-3);background:var(--klre-tint);border-radius:var(--klre-r-lg);padding:var(--klre-s-5)}
.klre-selfcheck>*{margin-block-start:0}
.klre-selfcheck>h2{font-size:var(--klre-fs-h3)}
.klre-selfcheck>p:not(.klre-selfcheck-out){font-size:var(--klre-fs-sm);color:var(--klre-ink-2)}
.klre-selfcheck label{display:flex;align-items:flex-start;gap:var(--klre-s-3);font-size:var(--klre-fs-sm);color:var(--klre-ink-2);cursor:pointer}
.klre-selfcheck input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:0;accent-color:var(--klre-btn)}
.klre-selfcheck-out{margin-top:var(--klre-s-4);font-size:var(--klre-fs-sm);color:var(--klre-ink-2)}

/* A single post: date, title, byline, then the prose. The article keeps the
   centred reading column that site.css gives .klre-article. */
.klre-post-meta{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin-bottom:var(--klre-s-3)}
.klre-byline{display:flex;align-items:center;gap:var(--klre-s-3);margin-block:var(--klre-s-5) var(--klre-s-6)}
.klre-byline-avatar{flex:0 0 auto;width:48px;height:48px;border-radius:50%;object-fit:cover}
.klre-byline-name{display:block;font-family:var(--klre-font-display);font-weight:600;color:var(--klre-ink)}
.klre-byline-role{display:block;font-size:var(--klre-fs-xs);color:var(--klre-muted)}

/* The post body. Only direct children of the content, so the closing call to
   action inside it keeps the colours site.css gives that band. */
.klre-article .wp-block-post-content>p,
.klre-article .wp-block-post-content>ul,
.klre-article .wp-block-post-content>ol{color:var(--klre-ink-2);line-height:1.7}
.klre-article .wp-block-post-content>h2{font-size:var(--klre-fs-h3);margin-top:var(--klre-s-7)}
/* Posts type their h2 in capitals. Real small caps keep the emphasis without
   shouting, and the size comes down with them: text-transform cannot help,
   because the capitals are already in the text. This wins over the h3 size
   above, which is what a sentence-case h2 would have used. */
.klre-article .wp-block-post-content>h2{
  font-variant-caps:all-small-caps;letter-spacing:.03em;font-size:var(--klre-fs-lg)
}
.klre-article .wp-block-post-content>h3{font-size:var(--klre-fs-base);margin-top:var(--klre-s-6)}

/* The joke: the one aside in the prose, so it gets the tint and nothing else. */
.klre-joke{background:var(--klre-tint);border-radius:var(--klre-r-lg);padding:var(--klre-s-5)}
.klre-joke-label{font-family:var(--klre-font-display);font-size:var(--klre-fs-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--klre-accent);margin:0}
.klre-joke-setup{margin:var(--klre-s-2) 0 0;color:var(--klre-ink)}
.klre-joke-punch{margin-top:var(--klre-s-2);font-family:var(--klre-font-display);font-weight:600;color:var(--klre-ink)}

/* Related posts and the way back. */
.klre-article .klre-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.klre-back-link{margin-top:var(--klre-s-6)}

/* The 404. Its title and sentence are bare children of the page column, which
   lets them run the full container width, and the core search block puts the
   field and the button edge to edge. A measure, and the blog's search width. */
.error404 .klre-page>h1,
.error404 .klre-page>p{max-width:var(--klre-measure)}
.error404 .wp-block-search{max-width:36rem;margin-top:var(--klre-s-5)}
.error404 .wp-block-search__label{display:block;font-size:var(--klre-fs-sm);font-weight:600;color:var(--klre-ink-2);margin-bottom:var(--klre-s-2)}
.error404 .wp-block-search__inside-wrapper{display:flex;gap:var(--klre-s-2)}
.error404 .wp-block-search__input{flex:1;min-width:0}

@media (max-width:1023px){
  .klre-archive .klre-cards,
  .klre-search-page .klre-cards,
  .klre-rec-reads .klre-cards,
  .klre-article .klre-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .klre-archive .klre-cards,
  .klre-search-page .klre-cards,
  .klre-rec-reads .klre-cards,
  .klre-article .klre-cards{grid-template-columns:minmax(0,1fr)}
  .klre-chooser{grid-template-columns:minmax(0,1fr)}
  .klre-words{grid-template-columns:minmax(0,1fr)}
}

/* == END TASK 2 == */

/* == TASK 3: RATES == */

/* /mortgage-rates/ is two objects on one page: today's board, which is a card
   because it is a small separate thing, and the fifty-year chart, which is a
   full-width panel. Both are drawn only from the tokens above. */

/* Today's board. One number, the day's move, and the two tables that say what
   the number is: what other loans cost, and where this reading sits against the
   last few. The figure is the point of the card, so it gets the display face and
   the largest step on the type scale. */
.klre-rate-card{
  background:var(--klre-raised);
  border:1px solid var(--klre-line);
  border-radius:var(--klre-r-lg);
  padding:var(--klre-s-6);
  max-width:40rem;
  margin-block:var(--klre-s-6);
  margin-inline:0
}
.klre-rate-value{
  font-family:var(--klre-font-display);
  font-weight:600;
  font-size:var(--klre-fs-h1);
  line-height:1;
  letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  margin:var(--klre-s-3) 0 0
}
.klre-rate-week{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin:var(--klre-s-2) 0 0}
.klre-rate-source{font-size:var(--klre-fs-sm);color:var(--klre-muted);margin:var(--klre-s-3) 0 0}

/* The two board tables: row headers on the left, figures right aligned so the
   decimal points line up down the column, one hairline between rows. */
table.klre-rate-history{
  margin-top:var(--klre-s-5);
  font-size:var(--klre-fs-sm);
  font-variant-numeric:tabular-nums
}
table.klre-rate-history caption{
  text-align:left;
  font-size:var(--klre-fs-xs);
  font-weight:600;
  color:var(--klre-muted);
  padding-bottom:var(--klre-s-2)
}
table.klre-rate-history th{text-align:left;font-weight:500;color:var(--klre-ink-2)}
table.klre-rate-history td{text-align:right;font-weight:600;color:var(--klre-ink)}
table.klre-rate-history th,
table.klre-rate-history td{padding-block:var(--klre-s-2);border-top:1px solid var(--klre-line)}

/* The chart panel. It runs the container width because the line is the reason
   the page exists; padding is one step tighter than the board so the plot keeps
   the width and the panel does not feel hollow. */
.klre-rate-chart{
  position:relative;
  background:var(--klre-raised);
  border:1px solid var(--klre-line);
  border-radius:var(--klre-r-lg);
  padding:var(--klre-s-5);
  margin-block:var(--klre-s-6);
  margin-inline:0;
  max-width:none
}
/* The range buttons on the left, the hover hint on the right, on one line until
   the line is too short for both. */
.klre-rate-chart__bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:var(--klre-s-3)
}
/* The same segmented control as .klre-seg in site.css, restated here because the
   chart's buttons carry their own class names. The pressed button is the one
   with aria-pressed="true", which is why the two states are matched on that
   attribute and not on a class. */
.klre-rate-chart__ranges{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:var(--klre-s-1);
  padding:var(--klre-s-1);
  border-radius:var(--klre-r);
  background:var(--klre-surface-2);
  max-width:100%
}
.klre-rate-chart__ranges button{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  min-width:0;
  padding:0 var(--klre-s-3);
  border:0;
  border-radius:var(--klre-r-sm);
  background:transparent;
  font-family:var(--klre-font-display);
  font-size:var(--klre-fs-sm);
  font-weight:600;
  color:var(--klre-muted);
  cursor:pointer;
  transition:background-color .15s,color .15s
}
.klre-rate-chart__ranges button:hover{color:var(--klre-ink)}
.klre-rate-chart__ranges button[aria-pressed="true"]{
  background:var(--klre-raised);
  color:var(--klre-ink);
  box-shadow:var(--klre-shadow-1)
}

/* The plot. The SVG is sized in CSS pixels by the script, so it only needs to be
   told to fill the box and not to leave a line of descender under itself. */
.klre-rate-chart__plot{position:relative;margin-top:var(--klre-s-4);min-height:280px}
.klre-rate-chart__svg{display:block;width:100%;height:auto}
/* Axis labels and every other numeral the script writes. */
.klre-rate-chart__plot text{fill:var(--klre-muted);font-size:var(--klre-fs-xs);font-family:var(--klre-font-text)}
.klre-rate-chart__grid line{stroke:var(--klre-line);stroke-width:1}
.klre-rate-chart__axis line{stroke:var(--klre-line)}
/* The locked-rate index is the line; the survey is context and is drawn thin and
   grey so it reads as a shadow under it, never as a second answer. */
.klre-rate-chart__line{fill:none;stroke:var(--klre-btn);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.klre-rate-chart__survey{fill:none;stroke:var(--klre-muted);stroke-width:1;stroke-linejoin:round;stroke-linecap:round;opacity:.75}
/* The script paints the area under the line with a literal gradient; a token
   overrides the presentation attribute, so the fill follows the theme. */
.klre-rate-chart__area{fill:var(--klre-tint);stroke:none}
.klre-rate-chart__average{stroke:var(--klre-muted);stroke-width:1;stroke-dasharray:4 4;opacity:.7}
.klre-rate-chart__extreme{fill:var(--klre-raised);stroke:var(--klre-muted);stroke-width:1.5}
.klre-rate-chart__end{fill:var(--klre-btn);stroke:var(--klre-raised);stroke-width:2}
.klre-rate-chart__plot .klre-rate-chart__end-label{fill:var(--klre-ink);font-family:var(--klre-font-display);font-weight:600}
.klre-rate-chart__cursor line{stroke:var(--klre-line-2);stroke-width:1}
.klre-rate-chart__cursor circle{fill:var(--klre-btn);stroke:var(--klre-raised);stroke-width:2}
.klre-rate-chart__overlay{cursor:crosshair}

/* The reading under the pointer: a small panel on the plot, positioned by the
   script, never a target of its own. */
.klre-rate-chart__tip{
  position:absolute;
  z-index:2;
  display:grid;
  gap:var(--klre-s-1);
  max-width:14rem;
  padding:var(--klre-s-3);
  background:var(--klre-raised);
  border:1px solid var(--klre-line);
  border-radius:var(--klre-r-sm);
  box-shadow:var(--klre-shadow-2);
  font-size:var(--klre-fs-xs);
  color:var(--klre-muted);
  pointer-events:none
}
.klre-rate-chart__tip strong{
  font-family:var(--klre-font-display);
  font-weight:600;
  font-size:var(--klre-fs-sm);
  color:var(--klre-ink);
  font-variant-numeric:tabular-nums
}
.klre-rate-chart__tip-series{font-size:var(--klre-fs-xs);color:var(--klre-muted)}

/* Under the plot: the sentence the chart exists to support, then the key. */
.klre-rate-chart__foot{display:grid;gap:var(--klre-s-3);margin-top:var(--klre-s-3)}
.klre-rate-chart__readout{
  margin:0;
  font-family:var(--klre-font-display);
  font-weight:600;
  font-size:var(--klre-fs-sm);
  line-height:1.5;
  color:var(--klre-ink);
  font-variant-numeric:tabular-nums
}
.klre-rate-chart__key{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--klre-s-2) var(--klre-s-4);
  margin:0;
  font-size:var(--klre-fs-xs);
  color:var(--klre-muted)
}
.klre-rate-chart__key-item{display:inline-flex;align-items:center;gap:var(--klre-s-2)}
/* The script hides a key entry by adding is-off when its series is not drawn on
   the range being shown, so an unshown line is not named in the key. */
.klre-rate-chart__key-item.is-off{display:none}
.klre-rate-chart__swatch{
  flex:0 0 auto;
  width:12px;
  height:3px;
  border-radius:var(--klre-pill);
  background:var(--klre-btn)
}
.klre-rate-chart__swatch--survey{background:var(--klre-muted)}
.klre-rate-chart__swatch--average{background:var(--klre-muted);opacity:.55}
/* Sits in the bar beside the range buttons, so it needs no margin of its own. */
.klre-rate-chart__hint{margin:0;font-size:var(--klre-fs-xs);color:var(--klre-muted)}
.klre-rate-chart__fallback{font-size:var(--klre-fs-xs);color:var(--klre-muted);margin-top:var(--klre-s-3)}

/* The yearly averages: a native details, so the long tables cost the page
   nothing until somebody opens them. Opening it lays the two tables side by
   side when there is room and stacks them when there is not. */
.klre-rate-chart__years{margin-top:var(--klre-s-5);border-top:1px solid var(--klre-line)}
.klre-rate-chart__years>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--klre-s-3);
  padding-block:var(--klre-s-4);
  cursor:pointer;
  list-style:none;
  font-family:var(--klre-font-display);
  font-weight:600;
  font-size:var(--klre-fs-sm);
  color:var(--klre-ink)
}
.klre-rate-chart__years>summary::-webkit-details-marker{display:none}
.klre-rate-chart__years>summary::after{content:"+";flex:0 0 auto;font-family:var(--klre-font-text);font-weight:300;font-size:1.5rem;line-height:1;color:var(--klre-accent);transition:transform .2s ease}
.klre-rate-chart__years[open]>summary::after{transform:rotate(45deg)}
.klre-rate-chart__tables{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:var(--klre-s-5);
  padding-bottom:var(--klre-s-2)
}
.klre-rate-chart__table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
/* Same table as the board above, so a yearly row reads exactly like a rate row. */
table.klre-rate-years{font-size:var(--klre-fs-sm);font-variant-numeric:tabular-nums}
table.klre-rate-years caption{
  text-align:left;
  font-size:var(--klre-fs-xs);
  font-weight:600;
  color:var(--klre-muted);
  padding-bottom:var(--klre-s-2)
}
table.klre-rate-years th{text-align:left;font-weight:500;color:var(--klre-ink-2)}
table.klre-rate-years td{text-align:right;font-weight:600;color:var(--klre-ink)}
table.klre-rate-years th,
table.klre-rate-years td{padding-block:var(--klre-s-2);border-top:1px solid var(--klre-line)}
table.klre-rate-years thead th{font-size:var(--klre-fs-xs);font-weight:600;color:var(--klre-muted)}

/* site.css spaces every child of post content from above with a two-class rule,
   so the panel margins are restated at the same weight. */
.klre-page .wp-block-post-content>.klre-rate-card,
.klre-page .wp-block-post-content>.klre-rate-chart{margin-block:var(--klre-s-6)}

@media (max-width:1023px){
  .klre-rate-card{padding:var(--klre-s-5)}
}
@media (max-width:720px){
  .klre-rate-card{padding:var(--klre-s-4)}
  .klre-rate-chart{padding:var(--klre-s-4)}
  .klre-rate-chart__bar{flex-direction:column;align-items:stretch;gap:var(--klre-s-2)}
  .klre-rate-chart__ranges{grid-auto-columns:minmax(0,1fr)}
  .klre-rate-chart__ranges button{padding:0 var(--klre-s-1);font-size:var(--klre-fs-xs);white-space:nowrap}
  .klre-rate-chart__hint{text-align:center}
  .klre-rate-chart__tables{grid-template-columns:minmax(0,1fr)}
  .klre-rate-chart__plot{min-height:250px}
}

/* == END TASK 3 == */

/* == BLOG v2: PHOTOS, LEAD STORIES, PROMOTION (Claude) == */

/* Cards with a photograph: the picture runs edge to edge across the top and the
   text sits in its own padded body, the way a publication's index reads. */
.klre-card.klre-card--media{padding:0;gap:0;overflow:hidden}
.klre-card-media{position:relative;overflow:hidden;background:var(--klre-surface-2)}
.klre-card-media picture,.klre-card-media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.klre-card-media img{transition:transform .4s ease}
.klre-card:hover .klre-card-media img{transform:scale(1.03)}
.klre-card-body{display:flex;flex-direction:column;gap:var(--klre-s-3);flex:1;padding:var(--klre-s-5)}

/* Lead stories: the newest post large, the next two beside it. */
.klre-lead-stories{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--klre-s-5);margin-block:var(--klre-s-5) var(--klre-s-7)}
.klre-feature{position:relative;display:flex;flex-direction:column;background:var(--klre-raised);border:1px solid var(--klre-line);border-radius:var(--klre-r-lg);overflow:hidden}
.klre-feature-media{overflow:hidden;background:var(--klre-surface-2)}
.klre-feature-media picture,.klre-feature-media img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.klre-feature-body{display:flex;flex-direction:column;gap:var(--klre-s-3);padding:var(--klre-s-6)}
.klre-feature-kicker{margin:0;font-family:var(--klre-font-display);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--klre-accent)}
.klre-feature-kicker a{position:relative;z-index:1;color:inherit;text-decoration:none}
.klre-feature-title{margin:0;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);line-height:1.15}
.klre-feature-title a{color:var(--klre-ink);text-decoration:none}
.klre-feature-title a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.klre-feature:hover .klre-feature-title a{color:var(--klre-link)}
.klre-feature-sum{margin:0;color:var(--klre-ink-2);font-size:var(--klre-fs-base);line-height:1.6}
.klre-feature .klre-card-meta{flex-wrap:wrap;margin-top:var(--klre-s-2)}
.klre-feature .klre-byline{margin:0}
.klre-archive .klre-cards.klre-cards--side{grid-template-columns:minmax(0,1fr);gap:var(--klre-s-5);align-content:start}
.klre-cards--side .klre-card-title{font-size:var(--klre-fs-base)}
.klre-cards--side .klre-card-sum{-webkit-line-clamp:2}

/* A single post: topic, date and reading time above the title, then the
   photograph with its credit under the byline. */
.klre-post-metaline{display:flex;flex-wrap:wrap;align-items:center;gap:var(--klre-s-2) var(--klre-s-3);margin:0 0 var(--klre-s-4);font-size:var(--klre-fs-sm);color:var(--klre-muted)}

/* On a phone the meta rows break across lines, and the separator dots are
   separate elements, so a wrapped line could begin with a stray bullet. Date and
   reading time now travel together in .klre-meta-group, which never wraps inside
   itself; the dot is hidden at this width and the group's own gap does the work. */
.klre-meta-group{display:inline-flex;align-items:center;gap:var(--klre-s-2);white-space:nowrap}
@media (min-width:721px){
  .klre-meta-group::before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
}
@media (max-width:720px){
  .klre-card-meta,.klre-post-metaline{row-gap:var(--klre-s-1)}
  .klre-card-meta .klre-card-dot,.klre-post-metaline .klre-card-dot{display:none}
}
.klre-post-hero{margin:var(--klre-s-5) 0 var(--klre-s-7)}
.klre-post-hero picture,.klre-post-hero img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--klre-r-lg)}
.klre-post-hero figcaption{margin-top:var(--klre-s-2);font-size:var(--klre-fs-xs);color:var(--klre-muted)}
.klre-post-hero figcaption a{color:inherit}
.klre-article .klre-article-cta{max-width:var(--klre-measure)!important}

/* "Keep reading" under a post runs wider than the article, so three cards fit. */
.klre-article.is-layout-constrained>.klre-related{max-width:var(--klre-container);margin-top:var(--klre-s-8);padding-top:var(--klre-s-7);border-top:1px solid var(--klre-line)}
.klre-related>*+*{margin-block-start:var(--klre-s-5)}
.klre-related-head{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin:0}
.klre-related .klre-back-link{margin-top:var(--klre-s-6)}

/* "From the blog" at the foot of inner pages. */
.klre-page-reads{margin-top:var(--klre-section-y);padding-top:var(--klre-s-7);border-top:1px solid var(--klre-line)}
.klre-page .wp-block-post-content+.klre-page-reads,.klre-page>.klre-page-reads{max-width:var(--klre-container)}
.klre-page-reads-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--klre-s-3) var(--klre-s-6);margin-bottom:var(--klre-s-6)}
.klre-page-reads-head h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-top:var(--klre-s-3)}
.klre-page-reads .klre-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--klre-s-5)}

@media (max-width:1023px){
  .klre-lead-stories{grid-template-columns:minmax(0,1fr)}
  .klre-archive .klre-cards.klre-cards--side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .klre-page-reads .klre-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .klre-feature-body{padding:var(--klre-s-5)}
  .klre-archive .klre-cards.klre-cards--side,
  .klre-page-reads .klre-cards{grid-template-columns:minmax(0,1fr)}
  .klre-post-hero{margin-inline:calc(-1 * var(--klre-gutter))}
  .klre-post-hero picture,.klre-post-hero img{border-radius:0}
  .klre-post-hero figcaption{padding-inline:var(--klre-gutter)}
}

/* == END BLOG v2 == */

/* ---------------------------------------------------------------------------
 * Spanish section (/es/)
 * ------------------------------------------------------------------------ */

/* Spanish button labels run longer than the English ones ("Siguiente: sus datos de
   contacto"). A single-line button wider than a phone card pushed the whole form, and
   then the page, past the viewport; let the label wrap instead. */
.klre-lead-form .klre-next,.klre-lead-form .klre-submit,.klre-lead-form .klre-back{white-space:normal;line-height:1.25;text-wrap:balance}

/* ---------------------------------------------------------------------------
 * Let's Connect: the profile cards
 * ------------------------------------------------------------------------ */
.klre-social{list-style:none;margin:var(--klre-s-6) 0 0;padding:0;display:grid;gap:var(--klre-s-3);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.klre-social-item a{position:relative;display:grid;gap:2px;min-height:4.5rem;padding:var(--klre-s-4) var(--klre-s-5);padding-right:var(--klre-s-8);border:1px solid var(--klre-line);border-radius:var(--klre-r-sm);background:var(--klre-raised);color:var(--klre-ink);text-decoration:none;transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.klre-social-item a:hover{border-color:var(--klre-link);transform:translateY(-1px);box-shadow:0 10px 24px -16px rgba(0,42,78,.45)}
.klre-social-name{font-family:var(--klre-font-display);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em}
.klre-social-handle{font-size:var(--klre-fs-sm);color:var(--klre-muted);overflow-wrap:anywhere}
.klre-social-go{position:absolute;top:var(--klre-s-4);right:var(--klre-s-5);color:var(--klre-link);font-size:1.125rem}
.klre-social-item--hub a{grid-column:1/-1;background:var(--klre-btn);border-color:var(--klre-btn);color:var(--klre-on-btn)}
.klre-social-item--hub .klre-social-handle{color:inherit}
.klre-social-item--hub .klre-social-go{color:inherit}
@media (min-width:700px){.klre-social-item--hub a{grid-column:auto}}