/* ==================================================================================================
   EDITORIAL — the few things long-form needs that the site's stylesheet does not already give it.
   ==================================================================================================

   The layout, the banner, the headings and the column widths all come from style.css: an article uses
   banner-header / short-display / bg-darkblack / col-md-8, the same components as the guides and the
   browse page, so it looks like the site by construction rather than by imitation.

   What is left is what those styles were never built for — nine hundred words of body copy:

     · p is 15px at half-opacity white, which is right under a hero and tiring over a long read
     · list-style is reset to none globally, so an editor's bullets arrived as unindented run-on lines
     · there is no figure/figcaption treatment, because no page had captioned pictures before

   Scoped to .article-page so nothing else on the site inherits any of it.
   ------------------------------------------------------------------------------------------------ */

.article-page {
    --article-text: rgba(255, 255, 255, .8);
    --article-dim: rgba(255, 255, 255, .55);
    --article-gold: #aa8453;
    --article-rule: rgba(255, 255, 255, .14);
}

/* ---- Preview flag ------------------------------------------------------------------------------ */
/* Shown only on a signed preview of something unpublished. Deliberately loud: previewing on the real
   site means the page looks exactly like the live article, which is the one situation where somebody
   can believe they have published something they have not. Fixed, so it stays visible while reading. */
.article-preview-flag {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 11px 18px;
    background: #b4630f;
    color: #fff;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: center;
}

/* ---- Headline ---------------------------------------------------------------------------------- */
/* Two lines that are not the same thing. The headline is the serif the site uses for every title; the
   subtitle drops to the sans, lighter and smaller, so the eye takes the first line as the point and
   the second as the promise instead of reading two identical 46px lines to find out which is which. */
.banner-header .article-head-main {
    display: block;
}

.banner-header .article-head-sub {
    display: block;
    margin-top: 10px;
    font-family: 'Barlow', sans-serif;
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 300;
    line-height: 1.4em;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
}

/* ---- Body copy -------------------------------------------------------------------------------- */

.article-page .article-body p {
    font-size: 17px;
    line-height: 1.8em;
    color: var(--article-text);
    margin-bottom: 26px;
}

/* The opening paragraph carries the piece — larger, and in the site's gold, so the first thing a
   reader meets invites the next thirty seconds instead of looking like the other eight paragraphs.
   #aa8453 on #222 is about 4.6:1, which clears AA for body text and is not close at 20px. */
.article-page .article-body > p:first-child {
    font-size: 20px;
    line-height: 1.7em;
    color: var(--article-gold);
}

/* A bold word in the lead would otherwise jump to white and break the line into two colours. */
.article-page .article-body > p:first-child strong,
.article-page .article-body > p:first-child b {
    color: inherit;
}

.article-page .article-body h2 {
    font-size: 30px;
    line-height: 1.24em;
    margin: 46px 0 16px;
}

.article-page .article-body h3 {
    font-size: 22px;
    line-height: 1.3em;
    margin: 34px 0 12px;
}

/* A short gold rule above each h2. It gives the page a rhythm that is visible while scrolling, which
   is the difference between an article with sections and one long column of grey. */
.article-page .article-body h2::before {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    background: var(--article-gold);
    margin-bottom: 18px;
}

/* Bullets, restored. style.css resets list-style away for the whole site, so a list written in the
   editor rendered as unindented lines indistinguishable from paragraphs. */
.article-page .article-body ul,
.article-page .article-body ol {
    margin: 0 0 26px 0;
    padding-left: 22px;
}

.article-page .article-body ul { list-style: disc outside; }
.article-page .article-body ol { list-style: decimal outside; }

.article-page .article-body li {
    list-style: inherit;
    font-size: 17px;
    line-height: 1.7em;
    color: var(--article-text);
    margin-bottom: 9px;
    padding-left: 4px;
}

.article-page .article-body a {
    color: var(--article-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.article-page .article-body a:hover { color: #c9a86a; }

.article-page .article-body strong,
.article-page .article-body b { color: #fff; font-weight: 600; }

/* ---- Pictures --------------------------------------------------------------------------------- */
/* Two shapes the editor can produce — a figure with a caption, and a bare image. Both are handled, so
   a picture pasted in without a caption still sits correctly. img is already width:100% sitewide. */

.article-page .article-body figure {
    margin: 34px 0;
}

.article-page .article-body figure img,
.article-page .article-body > img {
    height: auto;
    display: block;
    border-radius: 3px;
}

.article-page .article-body > img {
    margin: 34px 0;
}

.article-page .article-body figcaption {
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--article-dim);
    margin-top: 10px;
    padding-left: 12px;
    border-left: 2px solid var(--article-gold);
}

/* Two pictures side by side, collapsing on a phone. The theme does this with bootstrap columns; this
   is the same thing for an editor that can only emit a single wrapper. */
.article-page .article-body .article-figures {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 34px 0;
}

@media (max-width: 680px) {
    .article-page .article-body .article-figures { grid-template-columns: 1fr; }
}

/* ---- Stat block ------------------------------------------------------------------------------- */
/* A single number pulled out of the prose and given room. Worth having as a component: a figure buried
   mid-paragraph is read past, and the same figure between two rules is the thing somebody quotes back
   to you. Rules rather than a filled panel, so it reads as part of the article and not as an advert. */
.article-page .article-body .article-stat {
    margin: 46px 0;
    padding: 30px 0;
    border-top: 1px solid var(--article-rule);
    border-bottom: 1px solid var(--article-rule);
    text-align: center;
}

.article-page .article-body .article-stat strong {
    display: block;
    font-family: 'Gilda Display', serif;
    font-size: clamp(38px, 5vw, 52px);
    font-weight: 400;
    line-height: 1;
    color: #fff;
}

.article-page .article-body .article-stat span {
    display: block;
    margin-top: 12px;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--article-dim);
}

/* ---- Call to action --------------------------------------------------------------------------- */
/* For sending a reader somewhere specific mid-article or at the end of one. Distinct from
   .article-foot, which is the standing "browse our homes" block every piece gets. */
.article-page .article-body .article-cta {
    margin: 46px 0 0;
    padding: 30px 32px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid var(--article-rule);
    border-radius: 3px;
}

.article-page .article-body .article-cta h3 {
    font-size: 25px;
    margin: 0 0 10px;
}

.article-page .article-body .article-cta p {
    font-size: 16px;
    margin-bottom: 20px;
}

.article-page .article-body .article-button {
    display: inline-block;
    padding: 13px 24px;
    background: var(--article-gold);
    color: #fff !important;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none !important;
    border-radius: 2px;
}

.article-page .article-body .article-button:hover { background: #c9a86a; }

/* ---- Pull quote ------------------------------------------------------------------------------- */
/* style.css styles blockquote for the theme's post page, where it does not work here: the panel is
   background #222 on a #222 page, so it is invisible, and the text sits at 50% white while body copy
   sits at 82%. The result reads as an aside somebody demoted rather than a line worth pulling out —
   the opposite of the only reason to use the element.
   Corrected to a faint panel with a gold edge, and text at full body strength. */
.article-page .article-body blockquote {
    padding: 26px 30px;
    margin: 38px 0;
    background: rgba(255, 255, 255, .04);
    border-left: 2px solid var(--article-gold);
    color: var(--article-text);
}

.article-page .article-body blockquote p {
    font-size: inherit;
    line-height: inherit;
    color: var(--article-text);
    margin-bottom: 0;
    max-width: none;
}

/* The theme hangs a 110px Themify quote glyph in the corner. At this padding it crowds the text
   instead of decorating it. */
.article-page .article-body blockquote:before { display: none; }

/* ---- Foot ------------------------------------------------------------------------------------- */
/* Somewhere to go that is not the back button. Phase 3 puts the houses the piece is about here. */
.article-page .article-foot {
    margin-top: 46px;
    padding: 24px 26px;
    border: 1px solid var(--article-rule);
    border-radius: 3px;
    background: rgba(255, 255, 255, .03);
}

.article-page .article-foot p {
    margin-bottom: 0;
    font-size: 16px;
    color: var(--article-text);
}

.article-page .article-foot a {
    color: var(--article-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---- Right rail -------------------------------------------------------------------------------- */
/* Three houses and a search button, in the theme's news2-sidebar / widget shell. style.css already
   carries that shell, so what is left is the house list — the theme's .recent is a thumbnail beside a
   headline, and these need the picture to lead. */

/* Scrolls with the page rather than sticking. A pinned rail follows the reader down a long article,
   which sounds helpful and reads as an advert that will not go away. */
@media (max-width: 991px) {
    /* Below the breakpoint it stacks under the article and needs separating from it. */
    .article-page .article-rail { margin-top: 50px; }
}

.article-page .article-rail .widget {
    padding: 26px 24px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--article-rule);
    border-radius: 3px;
}

.article-page .article-rail .widget-title h6 {
    font-size: 19px;
    margin-bottom: 4px;
}

.article-page .article-rail .rail-dates {
    margin: 0 0 20px;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--article-gold);
}

.article-page .article-rail .rail-homes {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.article-page .article-rail .rail-homes li { margin-bottom: 18px; }
.article-page .article-rail .rail-homes li:last-child { margin-bottom: 0; }

.article-page .article-rail .rail-homes a {
    display: block;
    text-decoration: none;
}

/* Fixed ratio so three different photographs make three identical blocks. Without it the rail's left
   edge is straight and its right edge is whatever the photos happened to be. */
.article-page .article-rail .rail-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    padding-top: 66%;
    margin-bottom: 9px;
    background: rgba(255, 255, 255, .06);
}

.article-page .article-rail .rail-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.article-page .article-rail .rail-homes a:hover .rail-thumb img { transform: scale(1.06); }

.article-page .article-rail .rail-name {
    display: block;
    font-family: 'Gilda Display', serif;
    font-size: 18px;
    line-height: 1.3em;
    color: #fff;
}

.article-page .article-rail .rail-homes a:hover .rail-name { color: var(--article-gold); }

.article-page .article-rail .rail-meta {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    color: var(--article-dim);
}

.article-page .article-rail .rail-button {
    display: block;
    padding: 13px 18px;
    background: var(--article-gold);
    color: #fff !important;
    font-family: 'Barlow Condensed', 'Barlow', sans-serif;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    border-radius: 2px;
}

.article-page .article-rail .rail-button:hover { background: #c9a86a; }

.article-page .article-rail .rail-more {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 13.5px;
    color: var(--article-dim);
    text-decoration: none;
}

.article-page .article-rail .rail-more:hover { color: var(--article-gold); }

/* Second and later widgets in the rail need separating; the theme's sidebar relies on bootstrap
   column gutters that do not apply once each widget is a panel of its own. */
.article-page .article-rail .col-md-12 + .col-md-12 { margin-top: 22px; }

/* "More to read" keeps the theme's .recent shape — thumbnail beside a headline — but style.css sizes
   it for a light sidebar with no panel around it. */
.article-page .article-rail .rail-reading li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.article-page .article-rail .rail-reading li:last-child { margin-bottom: 0; }

.article-page .article-rail .rail-reading .thum {
    flex: 0 0 74px;
    width: 74px;
    height: 56px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
}

.article-page .article-rail .rail-reading .thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-page .article-rail .rail-reading a {
    font-size: 14.5px;
    line-height: 1.45em;
    color: var(--article-text);
    text-decoration: none;

    /* style.css lays .recent out with a float: the thumbnail floats left at 90px and the link takes
       margin-left:105px to clear it. This rail uses flex instead, where that margin is not clearing
       anything — it simply adds to the gap, which is what pushed the headline across the card. */
    margin-left: 0;
}

.article-page .article-rail .rail-reading a:hover { color: var(--article-gold); }