/* =========================================================================
   Single post (blog article) - warm design
   Ported from the Claude Design "Blog - artikel" template. Serves native
   posts (project/faq have their own single templates). Chrome is global
   (style.css); everything else is scoped under the .at-article body class.
   Auto-enqueued via the single-post 'single' slug router.
   ========================================================================= */

body.at-article {
    background: var(--paper);
    color: var(--ink);
    font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

.at-article .h1 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 0.98;
    font-size: clamp(40px, 5vw, 60px);
    margin: 0;
}
.at-article .h2 {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(26px, 2.4vw, 34px);
    color: var(--ink);
    margin: 0;
}
.at-article .lead   { font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.at-article .mono   { font-family: 'IBM Plex Mono', monospace; }
.at-article .accent { color: var(--accent); }
.at-article .muted  { color: var(--ink-soft); }

.at-article .eyebrow {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
}
.at-article .eyebrow-light {
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
}
.at-article .kicker { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 500; }

/* -------------------------------------------------------------------------
   Sections + head band + hero
   ------------------------------------------------------------------------- */

.at-article .sec { padding: 104px 0; }

.at-article .head-band { background: var(--accent); color: #fff; }
.at-article .head-band .h1 { color: #fff; }
.at-article .crumbs {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}
.at-article .crumbs a { text-decoration: none; color: rgba(255, 255, 255, 0.7); }
.at-article .crumbs a:hover { color: #fff; }
.at-article .artmeta { display: flex; align-items: center; gap: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.85); flex-wrap: wrap; }
.at-article .artmeta .dot { color: rgba(255, 255, 255, 0.4); }

.at-article .ph {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: repeating-linear-gradient(135deg, #E7E1D4 0 16px, #DDD6C6 16px 32px);
    border: 1px solid var(--line);
    overflow: hidden;
}
.at-article .ph-tag {
    margin: 14px;
    padding: 6px 11px;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--line);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.13em;
    color: #7C7565;
    text-transform: uppercase;
}
.at-article .hero-img { height: clamp(280px, 42vw, 520px); margin-top: -64px; position: relative; z-index: 2; background-size: cover; background-position: center; }

/* -------------------------------------------------------------------------
   Article body (the_content) - centred column
   ------------------------------------------------------------------------- */

.at-article .artwrap { display: grid; grid-template-columns: 1fr minmax(0, 720px) 1fr; gap: 0; }
.at-article .artwrap > * { grid-column: 2; }

.at-article .prose { font-size: 17.5px; line-height: 1.78; color: #33363A; }
.at-article .prose > * + * { margin-top: 26px; }
.at-article .prose > p:first-child,
.at-article .prose .intro { font-family: 'Archivo', system-ui, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.at-article .prose h2 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 27px; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); margin-top: 52px; }
.at-article .prose h2 + p { margin-top: 18px; }
.at-article .prose h3 { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--ink); margin-top: 40px; }
.at-article .prose strong { font-weight: 600; color: var(--ink); }
.at-article .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.at-article .prose ul { list-style: none; padding: 0; margin-top: 22px; display: flex; flex-direction: column; gap: 13px; }
.at-article .prose ul li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.65; }
.at-article .prose ul li::before { content: ''; position: absolute; left: 0; top: 11px; width: 11px; height: 11px; background: var(--accent); }
.at-article .prose ol { padding-left: 1.4rem; margin-top: 22px; }
.at-article .prose ol li { font-size: 16.5px; line-height: 1.65; }
.at-article .prose ol li + li { margin-top: 10px; }

.at-article .pullquote { margin: 52px 0; padding-left: 30px; border-left: 3px solid var(--accent); }
.at-article .pullquote p { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.28; letter-spacing: -0.02em; color: var(--ink); }
.at-article .pullquote cite { display: block; margin-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-style: normal; letter-spacing: 0.06em; color: var(--ink-soft); text-transform: uppercase; }

.at-article .figure { margin: 44px 0; }
.at-article .figure .ph { height: clamp(240px, 34vw, 420px); }
.at-article .figcap { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 12px; padding-left: 2px; }

.at-article .takeaways { background: var(--paper-2); border: 1px solid var(--line); padding: 34px 36px; margin: 52px 0; }
.at-article .takeaways-h { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.at-article .takeaways ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.at-article .takeaways li { position: relative; padding-left: 30px; font-size: 16px; line-height: 1.55; color: var(--ink); }
.at-article .takeaways li::before { content: '\2713'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700; }

/* -------------------------------------------------------------------------
   Byline + share
   ------------------------------------------------------------------------- */

.at-article .byline { display: flex; align-items: center; gap: 16px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.at-article .avatar { width: 56px; height: 56px; background: var(--accent); color: #fff; font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.at-article .byline-n { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }
.at-article .byline-r { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); letter-spacing: 0.03em; margin-top: 3px; }
.at-article .share { margin-left: auto; display: flex; gap: 8px; }
.at-article .share a { width: 38px; height: 38px; border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 500; color: var(--ink-soft); text-decoration: none; transition: 0.14s; }
.at-article .share a:hover { border-color: var(--accent); color: var(--accent); }

/* -------------------------------------------------------------------------
   Related posts
   ------------------------------------------------------------------------- */

.at-article .cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.at-article .pcard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); transition: 0.16s; }
.at-article .pcard:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -22px rgba(26, 28, 30, 0.42); }
.at-article .pcard-img { min-height: 180px; align-self: stretch; background-size: cover; background-position: center; }
.at-article .pcard-b { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.at-article .pcard-t { font-family: 'Archivo', system-ui, sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.01em; line-height: 1.18; }
.at-article .pcard-m { display: flex; align-items: center; gap: 9px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: 0.03em; color: var(--ink-soft); margin-top: auto; padding-top: 6px; }
.at-article .pcard-m .dot { color: var(--line); }
.at-article .pcard:hover .pcard-t { color: var(--accent); }

/* -------------------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------------------- */

.at-article .cta-band { background: var(--accent); color: #fff; }
.at-article .cta-band .h2 { color: #fff; }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .at-article .sec { padding: 64px 0; }
    .at-article .artwrap { grid-template-columns: 1fr; }
    .at-article .artwrap > * { grid-column: 1; }
    .at-article .cardgrid { grid-template-columns: 1fr; }
}

@media (min-width: 601px) and (max-width: 900px) {
    .at-article .cardgrid { grid-template-columns: 1fr 1fr; }
}

/* Byline avatar: same square as the monogram fallback when it is a real photo. */
.at-article img.avatar { object-fit: cover; }
.at-article .byline-n a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.at-article .byline-n a:hover { color: var(--accent); border-bottom-color: currentColor; }

/* -------------------------------------------------------------------------
   Source list (E-E-A-T): where a claim rests on regulation, say where it
   comes from.
   ------------------------------------------------------------------------- */

.at-article .prose .sources {
    margin-top: 48px;
    padding: 24px 26px;
    background: var(--paper-2);
    border-left: 3px solid var(--accent);
}
.at-article .prose .sources h2 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 12px;
}
.at-article .prose .sources ul { margin: 0; padding-left: 18px; }
.at-article .prose .sources li { font-size: 15px; line-height: 1.7; }
.at-article .prose .sources-note {
    margin-top: 12px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink-soft);
}