/* ==========================================================================
   Content pages: threadandfilm theme (0.18.0, site redesign Phase 7; the blog and post
   layouts 0.18.1)
   ==========================================================================
   Loaded only on pages that call taf_content_page() before get_header() (inc/content-data.php,
   inc/assets.php): About Us, Contact Us, Wholesale, the 404, the blog listing and a post. It prints right
   after pages.css and before responsive.css. Designs of record: design/About Us.dc.html,
   Contact Us.dc.html, Wholesale.dc.html, 404.dc.html, Blog.dc.html and Post.dc.html in the
   site-redesign folder under .plans/. Plan 2026-11-09-content-pages.md.

   Every selector starts with .taf-content, the body class taf_content_body_class() adds
   (css-lint.mjs CL-11), so nothing here reaches another page. pages.css and responsive.css
   keep no rule for these pages (CL-12). Widths come from the theme's shell (.taf-main
   .taf-container caps at --content-max with --shell-gutter), not the mocks' 1440px frame.
   Weight 800 is set at 700, the heaviest self-hosted Inter face. No scroll-reveal motion
   (P7-13).

   Sections:
   1. Tokens and page
   2. Hero (template-parts/content/hero.php)
   3. About
   4. Contact
   5. Forms (Contact Form 7)
   6. Wholesale
   7. 404
   8. Blog (index.php)
   9. Post (single.php)
   Then, last: Reduced motion, and Phones (the mobile twin)
   ========================================================================== */


/* ── 1. Tokens and page ── */

/* Values this sheet uses more than once. The dark-ground inks are the homepage hero's
   (pages.css --home-*), repeated here because the homepage scopes its own. */
.taf-content {
    --content-ink-soft: rgba(255, 255, 255, 0.8);    /* The hero's line */
    --content-ink-faint: rgba(255, 255, 255, 0.6);   /* The hero's breadcrumb */
    --content-mark: rgba(255, 255, 255, 0.25);       /* Crop marks */
    --content-hero-bg: linear-gradient(135deg, #0a0a0a 0%, #1a2a3a 100%);   /* The hero, and a blog card with no image */
    --content-ink-body: #333333;                     /* A post's running text (design/Post.dc.html) */
}


/* ── 2. Hero ──
   The inner-page hero size (base.css --page-hero-*), as on the Shop, My Account and the
   policy pages. The band always runs on under the section after it, which rises
   --page-hero-overlap into it, so its bottom padding adds the overlap. */

.taf-content .taf-page-hero {
    position: relative;                 /* Containing block for the crop marks */
    overflow: hidden;
    padding: var(--page-hero-pad-top) 0 calc(var(--page-hero-pad-bottom) + var(--page-hero-overlap));
    background: var(--content-hero-bg);
    color: var(--color-bg);
}

/* Crop marks, top corners, as the homepage hero draws them. Decorative. */
.taf-content .taf-page-hero::before,
.taf-content .taf-page-hero::after {
    content: "";
    position: absolute;
    top: var(--page-hero-mark-inset);
    width: 16px;
    height: 16px;
    border-top: 1px solid var(--content-mark);
    pointer-events: none;
}

.taf-content .taf-page-hero::before {
    left: var(--page-hero-mark-inset);
    border-left: 1px solid var(--content-mark);
}

.taf-content .taf-page-hero::after {
    right: var(--page-hero-mark-inset);
    border-right: 1px solid var(--content-mark);
}

/* The section after the hero rises into it. It is positioned so it paints over the band,
   which is positioned too. */
.taf-content .taf-page-hero + * {
    position: relative;
    margin-top: calc(-1 * var(--page-hero-overlap));
}

.taf-content .taf-page-hero a:focus-visible {
    outline: 2px solid var(--focus-ring-inverse);
    outline-offset: 2px;
}

.taf-content .taf-page-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--page-hero-gap);
    max-width: 860px;
}

.taf-content .taf-page-hero__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--content-ink-faint);
}

.taf-content .taf-page-hero__sep {
    margin-right: 8px;
}

.taf-content .taf-page-hero__crumbs a {
    color: inherit;
    text-decoration: none;
}

.taf-content .taf-page-hero__crumbs a:hover,
.taf-content .taf-page-hero__crumbs [aria-current="page"] {
    color: var(--color-bg);
}

.taf-content .taf-page-hero__title {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-heading);
    font-size: var(--page-hero-title);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--color-bg);
    text-wrap: balance;
}

/* Brand cyan on the dark ground only (base.css). */
.taf-content .taf-page-hero__accent {
    color: var(--color-cyan);
}

.taf-content .taf-page-hero__line {
    max-width: 620px;
    margin: 0;
    font-size: var(--page-hero-lead);
    line-height: 1.5;
    color: var(--content-ink-soft);
    text-wrap: pretty;
}

/* About's form: "About Us" is the H1, drawn as the small cyan eyebrow, and the statement
   under it takes the title's size. */
.taf-content .taf-page-hero__title--eyebrow {
    font-size: 22px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

.taf-content .taf-page-hero__statement {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--page-hero-title);
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    letter-spacing: -0.045em;
    color: var(--color-bg);
    text-wrap: balance;
}


/* ── 3. About ──
   design/About Us.dc.html: the three step cards rise into the hero, Services beside a ruled
   list, Our story on the muted ground, and the dark Location card with the Local Pickup
   panel. The tones are the brand's cyan, the text-safe magenta and yellow; each tile and
   strip reads --about-tone / --about-ink from its modifier. */

.taf-content .taf-about-steps {
    padding-bottom: 88px;
}

.taf-content .taf-about-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taf-content .taf-about-step {
    --about-tone: var(--color-cyan);
    --about-ink: var(--color-text);
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px 24px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.taf-content .taf-about-step--2 {
    --about-tone: var(--color-accent-text);
    --about-ink: var(--color-bg);
}

.taf-content .taf-about-step--3 {
    --about-tone: var(--color-yellow);
}

/* The tone strip across the card's top edge */
.taf-content .taf-about-step::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--about-tone);
}

.taf-content .taf-about-step__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.taf-content .taf-about-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--about-tone);
    color: var(--about-ink);
}

.taf-content .taf-about-step__num {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
}

.taf-content .taf-about-step__title {
    margin: 0;
    font-size: 21px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.taf-content .taf-about-step__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Section eyebrow: a square in the tone, then the label */
.taf-content .taf-about-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.taf-content .taf-about-eyebrow__sq {
    width: 10px;
    height: 10px;
    background: var(--color-text);
}

.taf-content .taf-about-eyebrow--magenta .taf-about-eyebrow__sq {
    background: var(--color-magenta);
}

.taf-content .taf-about-eyebrow--cyan .taf-about-eyebrow__sq {
    background: var(--color-cyan);
}

.taf-content .taf-about-h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 1.05;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    color: var(--color-text);
}

/* Services */
.taf-content .taf-about-services {
    padding-bottom: 88px;
}

.taf-content .taf-about-services__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 64px;
}

.taf-content .taf-about-services__head {
    flex: 1 1 240px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.taf-content .taf-about-services__list {
    flex: 3 1 560px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-border-mid);
}

.taf-content .taf-about-service {
    --about-tone: var(--color-cyan);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-mid);
}

.taf-content .taf-about-service--2 {
    --about-tone: var(--color-magenta);
}

.taf-content .taf-about-service--3 {
    --about-tone: var(--color-yellow);
}

.taf-content .taf-about-service__sq {
    width: 12px;
    height: 12px;
    margin-top: 7px;
    background: var(--about-tone);
}

.taf-content .taf-about-service__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.taf-content .taf-about-service__title {
    font-size: 19px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
}

.taf-content .taf-about-service__body p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Our story */
.taf-content .taf-about-story {
    padding: 96px 0;
    background: var(--color-bg-muted);
}

.taf-content .taf-about-story__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 980px;
}

.taf-content .taf-about-story__lead {
    margin: 0;
    font-size: 30px;
    line-height: 1.35;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.015em;
    color: var(--color-text);
    text-wrap: pretty;
}

/* The yellow highlighter under the phrase */
.taf-content .taf-about-story__mark {
    box-shadow: inset 0 -0.32em 0 var(--color-yellow);
}

.taf-content .taf-about-story__text {
    max-width: 720px;
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Location: the dark card with the CMY strip */
.taf-content .taf-about-location {
    padding: 88px 0;
}

.taf-content .taf-about-location__card {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-black);
    color: var(--color-bg);
}

.taf-content .taf-about-location__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta), var(--color-yellow));
}

.taf-content .taf-about-location__main {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px;
}

.taf-content .taf-about-location .taf-about-eyebrow {
    color: rgba(255, 255, 255, 0.7);
}

.taf-content .taf-about-location__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 38px;
    line-height: 1.08;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
    color: var(--color-bg);
    text-wrap: balance;
}

.taf-content .taf-about-location__line {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    text-wrap: pretty;
}

.taf-content .taf-about-location__address {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
}

.taf-content .taf-about-location__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 4px;
}

.taf-content .taf-about-pill {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.taf-content .taf-about-pill--primary {
    background: var(--color-primary);
    color: var(--color-text);
}

.taf-content .taf-about-pill--primary:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.taf-content .taf-about-pill--outline {
    border: 1px solid var(--content-mark);
    color: var(--color-bg);
}

.taf-content .taf-about-pill--outline:hover {
    border-color: var(--color-bg);
    color: var(--color-bg);
}

.taf-content .taf-about-pill:focus-visible,
.taf-content .taf-about-pickup__note a:focus-visible {
    outline: 2px solid var(--focus-ring-inverse);
    outline-offset: 2px;
}

/* The Local Pickup panel */
.taf-content .taf-about-location__pickup {
    flex: 1 1 360px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 44px;
    background: rgba(255, 255, 255, 0.04);
}

.taf-content .taf-about-pickup__steps {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taf-content .taf-about-pickup__steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.taf-content .taf-about-pickup__num {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
}

.taf-content .taf-about-pickup__text {
    padding-top: 3px;
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.taf-content .taf-about-pickup__note {
    margin: 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* Cyan on the dark ground; underlined because it sits in a sentence */
.taf-content .taf-about-pickup__note a {
    color: var(--color-cyan);
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.taf-content .taf-about-pickup__note a:hover {
    color: var(--color-bg);
}


/* ── 4. Contact ──
   design/Contact Us.dc.html: the form card (white, the cyan strip) beside the side column, both
   rising --page-hero-overlap into the hero. The side column: the dark call card with the CMY
   strip, the email and address cards (each one link) and the pickup note. The form's own rules
   are §5. */

.taf-content .taf-contact {
    padding-bottom: 96px;
}

.taf-content .taf-contact__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.taf-content .taf-form-card {
    position: relative;
    overflow: hidden;
    flex: 3 1 520px;
    min-width: 0;
    padding: 36px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.taf-content .taf-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--color-cyan);
}

/* Shown only without JavaScript, where production's Turnstile cannot run (P7-7) */
.taf-content .taf-form-card__noscript {
    margin: 0 0 24px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    font-size: 15px;
    line-height: 1.55;
    color: var(--color-text);
}

.taf-content .taf-contact__side {
    flex: 2 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* The call card: dark, with the CMY strip */
.taf-content .taf-contact-call {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--color-black);
    color: var(--color-bg);
}

.taf-content .taf-contact-call::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-cyan), var(--color-magenta), var(--color-yellow));
}

.taf-content .taf-contact-call__eyebrow {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

.taf-content .taf-contact-call__lead {
    margin: 0;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
}

.taf-content .taf-contact-call__num {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-bg);
    text-decoration: none;
    transition: color var(--transition);
}

.taf-content .taf-contact-call__num:hover {
    color: var(--color-cyan);
}

.taf-content .taf-contact-call__num:focus-visible {
    outline: 2px solid var(--focus-ring-inverse);
    outline-offset: 2px;
}

/* The email and address cards: each one link */
.taf-content .taf-contact-card {
    --contact-tone: var(--color-magenta);
    --contact-tone-ink: var(--color-bg);
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-tile);
    background: var(--color-bg);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition);
}

.taf-content .taf-contact-card--address {
    --contact-tone: var(--color-yellow);
    --contact-tone-ink: var(--color-text);
}

.taf-content .taf-contact-card:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

.taf-content .taf-contact-card:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.taf-content .taf-contact-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--contact-tone);
    color: var(--contact-tone-ink);
}

.taf-content .taf-contact-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.taf-content .taf-contact-card__label {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.taf-content .taf-contact-card__value {
    overflow-wrap: anywhere;
    font-size: 17px;
    font-weight: var(--font-weight-bold);
}

.taf-content .taf-contact-card__note {
    font-size: 13.5px;
    color: var(--color-text-light);
}

/* "Get directions →" is its own line under the address at every width, and breaks as one piece
   (at 390 the arrow once wrapped onto a line of its own). The space before it in the markup keeps
   the card's accessible name readable. */
.taf-content .taf-contact-card__directions {
    display: block;
    white-space: nowrap;
}

.taf-content .taf-contact-pickup {
    margin: 0;
    padding: 16px 18px;
    border-radius: var(--radius-tile);
    background: var(--color-bg-muted);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-text-light);
}

.taf-content .taf-contact-pickup strong {
    color: var(--color-text);
}

/* The sent panel (content.js puts a copy of the card's <template> after the hidden form) */
.taf-content .wpcf7 form[hidden] {
    display: none;
}

.taf-content .taf-sent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 0;
}

.taf-content .taf-sent__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--state-success-bg);
    color: var(--state-success-text);
}

.taf-content .taf-sent__title {
    margin: 0;
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

/* Focus is moved to the heading for screen readers; it is not a control, so it draws no ring */
.taf-content .taf-sent__title:focus {
    outline: none;
}

.taf-content .taf-sent__line {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-light);
}

.taf-content .taf-sent__line strong {
    overflow-wrap: anywhere;
    color: var(--color-text);
}

.taf-content .taf-sent__line a {
    font-weight: var(--font-weight-semibold);
}

.taf-content .taf-sent__again {
    min-height: 52px;
    padding: 0 20px;
    border: 1.5px solid var(--color-text);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
}

.taf-content .taf-sent__again:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}


/* ── 5. Forms ──
   Contact Form 7's fields on the content pages (Contact, Wholesale), as design/Contact Us.dc.html
   draws them. The forms are data (reference/plan-7/db7.sh), wrapping each field in div.taf-field
   with its label; wpcf7_autop_or_not is off for forms (inc/content-data.php), so these wrappers
   lay them out. CF7's response box and field tips are the Notices construction (woocommerce.css
   §16, pages.css's response-states block), not these rules. */

.taf-content .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.taf-content .taf-form-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.taf-content .taf-form-head__title {
    margin: 0;
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.taf-content .taf-form-head__note {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-light);
}

.taf-content .taf-req {
    color: var(--color-accent-text);
}

.taf-content .taf-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

.taf-content .taf-field-row > .taf-field {
    flex: 1 1 220px;
    min-width: 0;
}

.taf-content .taf-field > label:not(.taf-drop) {
    display: block;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

/* The control (and CF7's tip) under its label's text */
.taf-content .taf-field > label:not(.taf-drop) > .wpcf7-form-control-wrap {
    display: block;
    margin-top: 8px;
}

.taf-content .taf-photos {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.taf-content .taf-field--topic {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.taf-content .taf-field__label {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.taf-content .taf-field__opt {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
}

/* The text fields */
.taf-content .wpcf7-form input[type="text"],
.taf-content .wpcf7-form input[type="email"],
.taf-content .wpcf7-form input[type="tel"],
.taf-content .wpcf7-form textarea {
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: var(--font-weight-normal);
    color: var(--color-text);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.taf-content .wpcf7-form textarea {
    display: block;
    height: calc(6 * 1.5em + 28px);    /* The design's six rows */
    padding: 14px 16px;
    line-height: 1.5;
    resize: vertical;
}

/* The ring is the indicator (R13); the dark border and the cyan glow support it. */
.taf-content .wpcf7-form input[type="text"]:focus-visible,
.taf-content .wpcf7-form input[type="email"]:focus-visible,
.taf-content .wpcf7-form input[type="tel"]:focus-visible,
.taf-content .wpcf7-form textarea:focus-visible {
    border-color: var(--color-text);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.25);
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* The topic pills: CF7's radios (use_label_element), each label a 44px pill. The radio covers
   its pill, invisible, so the pill is its hit area and the arrow keys still move between them. */
.taf-content .taf-field--topic .wpcf7-radio {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.taf-content .taf-field--topic .wpcf7-list-item {
    margin: 0;
}

.taf-content .taf-field--topic label {
    position: relative;
    display: inline-flex;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.taf-content .taf-field--topic input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.taf-content .taf-field--topic .wpcf7-list-item-label {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* CF7's own stylesheet pads the label text with spaces */
.taf-content .taf-field--topic .wpcf7-list-item-label::before,
.taf-content .taf-field--topic .wpcf7-list-item-label::after {
    content: none;
}

.taf-content .taf-field--topic input[type="radio"]:checked + .wpcf7-list-item-label {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
}


/* The claims note: a grey box with a yellow square, the claim window highlighted */
.taf-content .taf-claims-note {
    position: relative;
    margin: 0;
    padding: 16px 18px 16px 40px;
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.6;
    color: var(--color-text);
}

.taf-content .taf-claims-note::before {
    content: "";
    position: absolute;
    top: 24px;
    left: 18px;
    width: 8px;
    height: 8px;
    background: var(--color-yellow);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.taf-content .taf-claims-note:empty {
    display: none;
}

.taf-content .taf-claims-note__body {
    font-weight: var(--font-weight-normal);
    color: var(--color-text-light);
}

.taf-content .taf-claims-note mark {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-yellow);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
}

.taf-content .taf-claims-note a {
    font-weight: var(--font-weight-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The order number's asterisk shows only for Problem with an order (below) */
.taf-content .taf-req--problem {
    display: none;
}

/* The photo drop zones: the file input covers its zone, invisible, so a click or a drop lands
   on it. content.js shows the second and third only once the one before holds a file. */
.taf-content .taf-photos__hint {
    margin: 0;
    font-size: 13px;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
    color: var(--color-text-light);
}

.taf-content .taf-field--photo.is-waiting {
    display: none;
}

.taf-content .taf-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px;
    border: 2px dashed var(--color-border-mid);
    border-radius: var(--radius-tile);
    background: var(--color-bg-alt);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.taf-content .taf-drop:hover {
    border-color: var(--color-cyan);
    background: var(--state-success-bg);
}


.taf-content .taf-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* A camera, as an SVG background: the form template is data, so it carries no SVG */
.taf-content .taf-drop__icon {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-cyan) no-repeat center / 20px 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}

.taf-content .taf-drop__title {
    overflow-wrap: anywhere;
    font-size: 15px;
}

/* Problem with an order shows the claims note, the photos and the order number's asterisk.
   Inside @supports, so a browser without :has() keeps every field visible. The photos never
   hide while they hold a CF7 error, so a refused file is always on screen with its reason
   (content.js also disables the photo inputs for every other topic, so none is sent). */
@supports selector(:has(*)) {

    .taf-content .wpcf7-form:not(:has(input[name="topic"][value="Problem with an order"]:checked)) .taf-claims-note,
    .taf-content .wpcf7-form:not(:has(input[name="topic"][value="Problem with an order"]:checked)) .taf-photos:not(:has(.wpcf7-not-valid-tip)) {
        display: none;
    }

    .taf-content .wpcf7-form:has(input[name="topic"][value="Problem with an order"]:checked) .taf-req--problem {
        display: inline;
    }

    .taf-content .wpcf7-form:has(input[name="topic"][value="Problem with an order"]:checked) .taf-field__opt--order {
        display: none;
    }
}

/* The ring of a pill or a drop zone, whose control is invisible over it: on the label, for
   keyboard focus only. A browser without :has() rings it on any focus. */
@supports selector(:has(*)) {

    .taf-content .taf-field--topic label:has(:focus-visible),
    .taf-content .taf-drop:has(:focus-visible) {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
}

@supports not selector(:has(*)) {

    .taf-content .taf-field--topic label:focus-within,
    .taf-content .taf-drop:focus-within {
        outline: 2px solid var(--focus-ring);
        outline-offset: 2px;
    }
}

/* Send, with the reply line beside it */
.taf-content .taf-form-foot {
    position: relative;                 /* Containing block for CF7's spinner */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.taf-content .taf-form-reply {
    flex: 1 1 260px;
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-light);
}

.taf-content .taf-form-reply a {
    font-weight: var(--font-weight-semibold);
}

.taf-content .wpcf7-form .wpcf7-submit {
    min-height: 52px;
    padding: 0 30px;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text);
    font-family: inherit;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.taf-content .wpcf7-form .wpcf7-submit:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

.taf-content .wpcf7-form .wpcf7-submit:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* CF7's spinner, after Send: over the button's end, so it never takes a row of its own */
.taf-content .wpcf7-form .wpcf7-spinner {
    position: absolute;
    right: 14px;
    bottom: 14px;
    margin: 0;
}

.taf-content .taf-claims-note a:focus-visible,
.taf-content .taf-form-reply a:focus-visible,
.taf-content .taf-sent__line a:focus-visible,
.taf-content .taf-form-card__noscript a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}


/* ── 6. Wholesale ──
   design/Wholesale.dc.html with the plan's copy (P7-8): three cards rising --page-hero-overlap
   into the hero, each with its tone strip (cyan, yellow, ink, as the design keys those cards),
   then Apply, the intro beside a plain form card (no strip, no shadow). The form's fields are §5;
   the card keeps .taf-form-card, where content.js finds the sent panel's <template>. */

.taf-content .taf-wholesale-cards {
    padding-bottom: 72px;
}

.taf-content .taf-wholesale-cards__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.taf-content .taf-wholesale-card {
    --wholesale-tone: var(--color-cyan);
    position: relative;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    background: var(--color-bg);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.taf-content .taf-wholesale-card--yellow {
    --wholesale-tone: var(--color-yellow);
}

.taf-content .taf-wholesale-card--ink {
    --wholesale-tone: var(--color-text);
}

/* The tone strip across the card's top edge */
.taf-content .taf-wholesale-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--wholesale-tone);
}

.taf-content .taf-wholesale-card__title {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--color-text);
}

.taf-content .taf-wholesale-card__text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Apply */
.taf-content .taf-wholesale {
    padding-bottom: 96px;
}

.taf-content .taf-wholesale__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 64px;
}

.taf-content .taf-wholesale__intro {
    flex: 1 1 260px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Section eyebrow: a cyan square, then the label */
.taf-content .taf-wholesale__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-light);
}

.taf-content .taf-wholesale__sq {
    width: 10px;
    height: 10px;
    background: var(--color-cyan);
}

.taf-content .taf-wholesale__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1.05;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.taf-content .taf-wholesale__call {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-light);
}

.taf-content .taf-wholesale__call a {
    font-weight: var(--font-weight-semibold);
}

.taf-content .taf-wholesale__call a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* The form card: plain, as the design draws it */
.taf-content .taf-wholesale__card {
    flex: 2 1 460px;
    padding: 28px;
    box-shadow: none;
}

.taf-content .taf-wholesale__card::before {
    content: none;
}

.taf-content .taf-wholesale .wpcf7-form {
    gap: 16px;
}

.taf-content .taf-wholesale .wpcf7-form textarea {
    height: calc(3 * 1.5em + 28px);    /* The design's three rows */
}


/* ── 7. 404 ──
   design/404.dc.html (P7-9): a centred block of the four brand squares, the numeral, the H1,
   one line, the search and three buttons. The numeral is decoration, so the H1 carries the
   heading. The numeral and title scale with the viewport, so the block needs no phone rule of
   its own; the controls are 52px tall at every width. */

.taf-content .taf-notfound {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 96px 0 110px;
    text-align: center;
}

.taf-content .taf-notfound__squares {
    display: flex;
    gap: 10px;
}

.taf-content .taf-notfound__square {
    width: 18px;
    height: 18px;
    background: var(--color-cyan);
}

.taf-content .taf-notfound__square--magenta {
    background: var(--color-magenta);
}

.taf-content .taf-notfound__square--yellow {
    background: var(--color-yellow);
}

.taf-content .taf-notfound__square--ink {
    background: var(--color-text);
}

.taf-content .taf-notfound__numeral {
    font-size: clamp(96px, 30vw, 160px);
    line-height: 0.85;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.06em;
    color: var(--color-text);
}

.taf-content .taf-notfound__title {
    margin: 0;
    font-size: clamp(28px, 6vw, 36px);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.taf-content .taf-notfound__line {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-light);
}

.taf-content .taf-notfound__search {
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 460px;
}

.taf-content .taf-notfound__search input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 20px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    font-family: inherit;
    font-size: 16px;
    color: var(--color-text);
    transition: border-color var(--transition);
}

.taf-content .taf-notfound__search button {
    flex-shrink: 0;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-text);
    color: var(--color-bg);
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition);
}

.taf-content .taf-notfound__search button:hover {
    background: var(--color-accent-text);
}

/* The ring is the indicator (R13) */
.taf-content .taf-notfound__search input[type="search"]:focus-visible,
.taf-content .taf-notfound__search button:focus-visible,
.taf-content .taf-notfound__btn:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.taf-content .taf-notfound__search input[type="search"]:focus-visible {
    border-color: var(--color-text);
}

.taf-content .taf-notfound__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.taf-content .taf-notfound__btn {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: var(--radius-full);
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.taf-content .taf-notfound__btn--primary {
    background: var(--color-primary);
    color: var(--color-text);
    text-transform: uppercase;
}

.taf-content .taf-notfound__btn--outline {
    border: 1.5px solid var(--color-text);
    color: var(--color-text);
}

.taf-content .taf-notfound__btn:hover {
    background: var(--color-text);
    color: var(--color-bg);
}

/* ── 8. Blog ──
   design/Blog.dc.html (P7-10), index.php: the posts page, the category, tag, author and date
   archives and a search without post_type=product. The header is the Shop search's light band
   (.taf-archive-search, woocommerce.css), which this sheet only gives its line and, on phones,
   44px breadcrumb links. Each card is one link. From 769px the posts are stacked full-width rows
   (theme 0.18.1): the owner found the design's grid of 320px columns too narrow, because with two
   posts it left the right third of the page empty at 1440 and 1920. A row is the picture (5fr,
   about 42%) beside its text (7fr), the text centred on it, the rows 48px apart with a rule
   between; 769 to 1023px narrows the picture to 4fr of 10. Phones keep the design's stacked card
   (the mobile twin, below), so the rules here are the rows' and the twin puts the card back. */

/* The band meets the header (header.css's .taf-main padding would open a gap above it), and
   the post sets its own padding (§9). */
.taf-content .taf-blog-main {
    padding: 0;
}

.taf-content .taf-blog-head__line {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-light);
}

.taf-content .taf-blog-head .taf-archive-crumbs a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.taf-content .taf-blog {
    padding-top: 40px;
    padding-bottom: 96px;
}

/* One column of rows. The class keeps its name from the grid it was; the gap between rows is
   the next card's margin and padding, so the rule sits in its middle and none follows the last. */
.taf-content .taf-blog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.taf-content .taf-blog-card + .taf-blog-card {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}

/* The row: the picture, then the text centred against it. No hover lift: a full-width row that
   jumps reads cheap, so hover and focus underline the title instead. */
.taf-content .taf-blog-card__link {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    column-gap: clamp(24px, 3vw, 48px);
    color: var(--color-text);
    text-decoration: none;
}

.taf-content .taf-blog-card__link:hover {
    color: var(--color-text);
}

.taf-content .taf-blog-card__link:hover .taf-blog-card__title,
.taf-content .taf-blog-card__link:focus-visible .taf-blog-card__title {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

/* The ring is the indicator (R13) */
.taf-content .taf-blog-card__link:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: var(--radius-tile);
}

/* The featured image at 16:10, cropped to fill */
.taf-content .taf-blog-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-tile);
}

.taf-content .taf-blog-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* No featured image: the hero gradient with the category name, never a grey box */
.taf-content .taf-blog-card__media--none {
    display: flex;
    align-items: flex-end;
    padding: 20px 22px;
    border-color: transparent;
    background: var(--content-hero-bg);
}

/* Brand cyan on the dark ground only (base.css) */
.taf-content .taf-blog-card__label {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-cyan);
}

/* The card's text: the meta line, the title, the excerpt and "Read the guide" */
.taf-content .taf-blog-card__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

/* The meta line, "{Category} · {M j, Y}" (taf_blog_meta()), shared with the post (§9). The
   category's tone (taf_blog_tone()) draws the square before it; the date alone draws none. */
.taf-content .taf-blog-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-light);
}

.taf-content .taf-blog-tone-1 { --blog-tone: var(--color-cyan); }
.taf-content .taf-blog-tone-2 { --blog-tone: var(--color-magenta); }
.taf-content .taf-blog-tone-3 { --blog-tone: var(--color-yellow); }
.taf-content .taf-blog-tone-4 { --blog-tone: var(--color-text); }

.taf-content .taf-blog-meta[class*="taf-blog-tone-"]::before {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--blog-tone);
}

.taf-content .taf-blog-card__title {
    margin: 0;
    font-size: 26px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

/* index.php prints WordPress's 32-word excerpt (inc/setup.php), about three lines here */
.taf-content .taf-blog-card__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* Drawn as a link, but a span: the whole card is the one link */
.taf-content .taf-blog-card__read {
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* 769 to 1023px: the picture takes 4fr of 10, so the text keeps a readable line */
@media (max-width: 1023px) {

    .taf-content .taf-blog-card__link {
        grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    }
}

/* WordPress's pagination (the_posts_pagination()): every page link a 44px pill */
.taf-content .taf-blog .pagination {
    margin-top: 56px;
}

.taf-content .taf-blog .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.taf-content .taf-blog .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--color-border-mid);
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--transition);
}

.taf-content .taf-blog a.page-numbers:hover {
    border-color: var(--color-text);
}

.taf-content .taf-blog a.page-numbers:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.taf-content .taf-blog .page-numbers.current {
    border-color: var(--color-text);
    background: var(--color-text);
    color: var(--color-bg);
}

.taf-content .taf-blog .page-numbers.dots {
    border-color: transparent;
}

.taf-content .taf-blog-empty {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-light);
}


/* ── 9. Post ──
   design/Post.dc.html (P7-11), single.php: the breadcrumb, the meta line (§8), the H1, the
   featured image (cropped only past 3:2), the content, then the aside "In this guide" (theme
   0.18.1). The owner found the design's single 640px column, centred, "very narrow, very weird"
   at 1920, so the post sits in the 1280px content region like every inner page (base.css's
   .single-post container cap is gone). From 1100px a post with two or more H2s is two columns:
   the breadcrumb and the head across both, the image and the body in the first, the body's text
   at most --measure-article (700px) while its pictures, tables and video take the column's full
   width, and the 300px aside, "In this guide", in the second, sticky below the header.
   Otherwise, and below 1100px, it is one centred column of at most --measure-article, and the
   aside is not shown (the footer's "Ready to print?" band follows). The body takes the design's
   type at every width: 18px / 1.75 in --content-ink-body, H2 28px, a blockquote as the grey
   callout. Any other post type gets the title and content only (single.php). */

.taf-content .taf-post {
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: var(--measure-article);
    margin-inline: auto;
    padding: 40px 0 96px;
}

.taf-content .taf-post__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--color-text-light);
}

/* The separator and its link 8px apart; the space between them stays in the text */
.taf-content .taf-post__crumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.taf-content .taf-post__crumbs a {
    color: inherit;
    text-decoration: none;
}

.taf-content .taf-post__crumbs a:hover {
    color: var(--color-text);
}

.taf-content .taf-post__crumbs a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.taf-content .taf-post__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.taf-content .taf-post .taf-blog-meta {
    font-size: 13px;
}

/* 48px from about 1150px wide, down to 32px on a phone */
.taf-content .taf-post__title {
    margin: 0;
    overflow-wrap: anywhere;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 1rem + 2.8vw, 3rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--color-text);
    text-wrap: balance;
}

/* The featured image keeps its own shape and is cropped only when it is taller than 3:2
   (66.67cqi of the figure's width), so a wide photo shows whole and a square or portrait one
   shows its middle */
.taf-content .taf-post__media {
    container-type: inline-size;
    max-width: var(--measure-article);
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-tile);
}

.taf-content .taf-post__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 66.67cqi;
    object-fit: cover;
}

.taf-content .taf-post__body {
    max-width: var(--measure-article);
    font-size: 18px;
    line-height: 1.75;
    color: var(--content-ink-body);
}

/* 18px between blocks, the design's column gap */
.taf-content .taf-post__body > * {
    margin: 0;
}

.taf-content .taf-post__body > * + * {
    margin-top: 18px;
}

.taf-content .taf-post__body h2 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.taf-content .taf-post__body h3 {
    font-size: 22px;
    line-height: 1.3;
    color: var(--color-text);
}

.taf-content .taf-post__body > h2,
.taf-content .taf-post__body > h3 {
    margin-top: 30px;
}

.taf-content .taf-post__body ul,
.taf-content .taf-post__body ol {
    padding-left: 1.4em;
}

.taf-content .taf-post__body li + li {
    margin-top: 6px;
}

/* Links in running text carry an underline as well as their colour (base.css says why) */
.taf-content .taf-post__body p a:not(.button),
.taf-content .taf-post__body li a:not(.button) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* No site-wide ring reaches the content's links (the browser's own is 1px), so they get the
   site ring here (R13) */
.taf-content .taf-post__body a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* The grey callout, 26px from its neighbours (their 18px collapses into its margin) */
.taf-content .taf-post__body > blockquote {
    margin: 26px 0;
    padding: 18px 22px;
    border: 0;
    border-radius: 14px;
    background: var(--color-bg-muted);
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.5;
    color: var(--color-text);
}

.taf-content .taf-post__body blockquote > * {
    margin: 0;
}

.taf-content .taf-post__body blockquote > * + * {
    margin-top: 10px;
}

.taf-content .taf-post__body blockquote cite {
    display: block;
    font-size: 14px;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
}

/* Pictures, video, tables and rules in the content (0.18.1). The body is a container, so a
   float is decided by the column's own width, not the screen's: only from 560px of column does a
   left or right picture float, at most half the column, with the text beside it; narrower, it
   sits on its own line. A heading, a rule or a wide block never starts beside a float. */
.taf-content .taf-post__body {
    container-type: inline-size;
}

/* A picture keeps its shape and its own size, never wider than the column and never taller than
   min(75vh, 640px): its width is capped at that height times its shape, --taf-img-r
   (taf_post_image_ratios(), inc/content-data.php), so a portrait photo narrows rather than
   filling the screen. A picture with no shape (no width and height) gets 100 and so no cap.
   Galleries keep the block library's own sizing, whose selectors outrank this one. */
.taf-content .taf-post__body img:not(.emoji) {
    max-width: min(100%, calc(min(75vh, 640px) * var(--taf-img-r, 100)));
    border-radius: var(--radius-tile);
}

.taf-content .taf-post__body > figure,
.taf-content .taf-post__body > .wp-block-gallery,
.taf-content .taf-post__body > .wp-block-columns {
    margin-block: 30px;
}

.taf-content .taf-post__body figcaption {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-light);
    text-align: start;
}

.taf-content .taf-post__body .alignleft,
.taf-content .taf-post__body .alignright {
    float: none;
    margin: 18px 0;
}

.taf-content .taf-post__body .aligncenter {
    margin-inline: auto;
}

@container (min-width: 560px) {

    .taf-content .taf-post__body .alignleft {
        float: left;
        max-width: 50%;
        margin: 6px 28px 12px 0;
    }

    .taf-content .taf-post__body .alignright {
        float: right;
        max-width: 50%;
        margin: 6px 0 12px 28px;
    }
}

.taf-content .taf-post__body > h2,
.taf-content .taf-post__body > h3,
.taf-content .taf-post__body > hr,
.taf-content .taf-post__body > .wp-block-gallery,
.taf-content .taf-post__body > .wp-block-table,
.taf-content .taf-post__body > .wp-block-embed,
.taf-content .taf-post__body > .wp-block-columns {
    clear: both;
}

/* Video fills the column at 16:9; any other frame is held to the column */
.taf-content .taf-post__body iframe {
    display: block;
    max-width: 100%;
    border: 0;
    border-radius: var(--radius-tile);
}

.taf-content .taf-post__body iframe[src*="youtube"],
.taf-content .taf-post__body iframe[src*="youtu.be"],
.taf-content .taf-post__body iframe[src*="vimeo"] {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* A table scrolls sideways inside its block on a phone, never the page */
.taf-content .taf-post__body .wp-block-table {
    overflow-x: auto;
}

.taf-content .taf-post__body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.taf-content .taf-post__body thead {
    border: 0;
}

.taf-content .taf-post__body th,
.taf-content .taf-post__body td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    text-align: start;
    vertical-align: top;
}

.taf-content .taf-post__body th {
    background: var(--color-bg-muted);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    white-space: nowrap;
}

.taf-content .taf-post__body hr {
    margin: 36px 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/* The aside: "In this guide", a link to each H2 when the content has two or more. single.php
   prints it after the body; it shows only from 1100px (below). */
.taf-content .taf-post__aside {
    display: none;
}

/* An h2, so the outline stays valid, drawn small */
.taf-content .taf-post__toc-title {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    color: var(--color-text);
}

.taf-content .taf-post__toc-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.taf-content .taf-post__toc-list a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-light);
    text-decoration: none;
}

.taf-content .taf-post__toc-list a:hover {
    color: var(--color-accent-text);
}

.taf-content .taf-post__toc-list a:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

/* A touch screen wide enough for the aside (a tablet in landscape) gets 44px rows */
@media (pointer: coarse) {

    .taf-content .taf-post__toc-list a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 4px 0;
    }
}

/* From 1100px, a post with "In this guide" (two or more H2s) is two columns: the head across
   both, the aside beside the image and the body. The image and the body take the whole first
   column, but the body's text keeps --measure-article (700px), so lines stay readable while
   pictures, galleries, tables, video and columns run the column's full width (about 850px at
   1440). A float stays inside the text's measure: at most half of it, a right float held off the
   wide edge by the column's width less the measure. The aside starts on the row after the head
   (row 3: the breadcrumb is row 1, the head row 2) and spans the image's row too when there is
   one, so neither row grows to its height; it is sticky inside the article, its containing
   block. A post without the aside stays the one centred column of every narrower width. */
@media (min-width: 1100px) {

    .taf-content .taf-post:has(> .taf-post__aside) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        align-items: start;
        column-gap: clamp(48px, 5vw, 88px);
        row-gap: 28px;
        max-width: none;
        margin-inline: 0;
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__crumbs,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__head {
        grid-column: 1 / -1;
    }

    .taf-content .taf-post:has(> .taf-post__aside) .taf-post__title {
        max-width: 900px;
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__media,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body {
        grid-column: 1;
        max-width: none;
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > * {
        max-width: var(--measure-article);
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > figure:not(.alignleft):not(.alignright),
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .wp-block-gallery,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .wp-block-table,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .wp-block-embed,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .wp-block-video,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .wp-block-columns,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > iframe {
        max-width: none;
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .alignleft,
    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .alignright {
        max-width: min(50%, calc(var(--measure-article) / 2));
    }

    .taf-content .taf-post:has(> .taf-post__aside) > .taf-post__body > .alignright {
        margin-right: max(0px, calc(100% - var(--measure-article)));
    }

    .taf-content .taf-post__aside {
        display: block;
        position: sticky;
        top: calc(var(--header-h) + 24px);
        grid-column: 2;
        grid-row: 3;
    }

    .taf-content .taf-post:has(> .taf-post__media) > .taf-post__aside {
        grid-row: 3 / span 2;
    }
}

/* ── Reduced motion ──
   Nothing on a content page transitions for a reader who asked for less motion (P7-13). */
@media (prefers-reduced-motion: reduce) {

    .taf-content main *,
    .taf-content main *::before,
    .taf-content main *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ── Phones (the mobile twin) ──
   One column at the shell's gutters, every control at least 44px tall. Keep this query
   byte-identical to its other copies (css-lint.mjs CL-3): responsive.css's mobile-overlay and
   utility-row blocks, pages.css's card-overlap block, product.css's, cart.css's, policy.css's,
   checkout.css's and account.css's phone blocks and MOBILE_QUERY in assets/js/main.js. The
   hero keeps the token's 32px title (its floor). The blog's stacked cards are here, not at a
   bare 480px or 768px: a landscape phone is about 844px wide but only about 390px tall, so a
   width-only query would leave it in rows while every other phone rule had switched. */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {

    .taf-content .taf-page-hero {
        padding: 24px 0 calc(24px + var(--page-hero-overlap));
    }

    .taf-content .taf-page-hero::before,
    .taf-content .taf-page-hero::after {
        content: none;
    }

    .taf-content .taf-page-hero__crumbs ol {
        font-size: 12.5px;
    }

    /* A 44px hit area around the breadcrumb link without moving the line */
    .taf-content .taf-page-hero__crumbs a {
        display: inline-block;
        padding: 15px 5px;
        margin: -15px -5px;
    }

    .taf-content .taf-page-hero__title--eyebrow {
        font-size: 18px;
    }

    .taf-content .taf-page-hero__line {
        font-size: 16px;
        line-height: 1.55;
    }

    .taf-content .taf-about-steps,
    .taf-content .taf-about-services {
        padding-bottom: 56px;
    }

    .taf-content .taf-about-steps__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .taf-content .taf-about-h2 {
        font-size: 32px;
    }

    .taf-content .taf-about-story {
        padding: 56px 0;
    }

    .taf-content .taf-about-story__lead {
        font-size: 22px;
    }

    .taf-content .taf-about-story__text {
        font-size: 16px;
    }

    .taf-content .taf-about-location {
        padding: 56px 0;
    }

    .taf-content .taf-about-location__main,
    .taf-content .taf-about-location__pickup {
        padding: 32px 24px;
    }

    .taf-content .taf-about-location__title {
        font-size: 28px;
    }

    .taf-content .taf-about-pill {
        min-height: 48px;
    }

    .taf-content .taf-about-pickup__note a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    .taf-content .taf-contact {
        padding-bottom: 56px;
    }

    .taf-content .taf-form-card {
        padding: 28px 20px;
    }

    .taf-content .taf-contact-call {
        padding: 24px;
    }

    .taf-content .taf-contact-call__lead {
        font-size: 19px;
    }

    .taf-content .taf-contact-call__num {
        font-size: 28px;
    }

    .taf-content .taf-form-head__title,
    .taf-content .taf-sent__title {
        font-size: 24px;
    }

    .taf-content .wpcf7-form .wpcf7-submit {
        flex: 1 1 100%;
    }

    .taf-content .taf-wholesale-cards {
        padding-bottom: 48px;
    }

    .taf-content .taf-wholesale-cards__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .taf-content .taf-wholesale {
        padding-bottom: 56px;
    }

    .taf-content .taf-wholesale__intro {
        max-width: none;
    }

    .taf-content .taf-wholesale__title {
        font-size: 32px;
    }

    .taf-content .taf-blog {
        padding-top: 28px;
        padding-bottom: 56px;
    }

    .taf-content .taf-blog-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* The design's stacked card, as before 0.18.1: no rule between cards, the picture over the
       text, the lift on hover, and no "Read the guide" */
    .taf-content .taf-blog-card + .taf-blog-card {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

    .taf-content .taf-blog-card__link {
        display: flex;
        flex-direction: column;
        align-items: stretch;           /* the row centres its text; the card's parts fill it */
        gap: 14px;
        height: 100%;
        transition: transform var(--transition);
    }

    .taf-content .taf-blog-card__link:hover {
        transform: translateY(-3px);
    }

    .taf-content .taf-blog-card__link:hover .taf-blog-card__title,
    .taf-content .taf-blog-card__link:focus-visible .taf-blog-card__title {
        text-decoration: none;
    }

    .taf-content .taf-blog-card__title {
        font-size: 21px;
        font-weight: var(--font-weight-bold);
    }

    .taf-content .taf-blog-card__excerpt {
        font-size: 15px;
    }

    .taf-content .taf-blog-card__read {
        display: none;
    }

    /* A 44px hit area around each breadcrumb link without moving the line */
    .taf-content .taf-blog-head .taf-archive-crumbs a,
    .taf-content .taf-post__crumbs a {
        display: inline-block;
        padding: 15px 10px;
        margin: -15px -10px;
    }

    .taf-content .taf-post {
        gap: 22px;
        padding: 24px 0 56px;
    }
}