/* ATX Headshots design tweak layer, 27 Oct 2026.
   Decisions: atx-headshots-brain/site-rebuild-2026-10-26/TWEAK-LAYER-2026-10-27.md (fixes 1-18, 11 gated).
   Source of each rule: atx-headshots-brain/research/2026-10-27-fable-design-read.md section 3.
   Linked last on every page (after sqs.css, shell.css, rows-fix.css), so it overrides each page's own
   code-block CSS; most rules need !important because those blocks use id selectors.
   CSS only: no text, href, iframe src or class a script hooks is touched here. Shell-level fixes 5 and 10
   are in shell.css (tools/port/shell.mjs); markup fixes 7 and 12 are in tools/port/port.mjs.
   Page hooks set by the pipeline on <body>: atx-p-<slug> (home = atx-p-home) and atx-g-<group>.
   The blog keeps its own design (atx-blog-design): every sitewide rule below skips body.atx-g-blog.
   Where the read's selector did not match the built markup, the matching selector is used and noted. */

/* ---------- Fix 1. No grey (or italic) second half of headlines. <em> stays in the markup. ---------- */
body:not(.atx-g-blog) #page :is(h1, h2, h3) em {
  color: inherit !important; font-style: normal !important; font-weight: inherit !important;
}

/* ---------- Fix 2. Eyebrow labels: 12px minimum, 0.08em tracking, 600, no dash rules. ----------
   The read's wildcard ([class*="eyebrow"], [class*="-tag"], [class*="-label"]) also matched labels that are not
   eyebrows (list labels, figure captions), so size and colour use explicit lists taken from a computed-style
   crawl of all 56 pages on 27 Oct (uppercase, under 13.5px, tracked). No text-transform is set: every label in
   the lists is already uppercase, so no visible text changes case. */
body:not(.atx-g-blog) #page :is(
  .s3-eyebrow,.s3-tag,.atx-reviews-svc__eyebrow,.s6-eyebrow,.s7-eyebrow,.s4-eyebrow,.s5-eyebrow,.s9-eyebrow,
  .s10-eyebrow,.s11-eyebrow,.s12-eyebrow,.s14-eyebrow,.s15-eyebrow,.s15-seo-eyebrow,.atx-gb-v13__eyebrow,
  .atx-gb-v13__cal-head,.atx-gb-v13__value-eyebrow,.atx-gb-v13__next-eyebrow,.al-eyebrow,.al-col-label,
  .corp-eyebrow,.trust-eyebrow,.pg-eyebrow,.pg-role,.rv-eyebrow,.tiers-eyebrow,.tier-marker-label,.pr-eyebrow,
  .pr-band-size,.comp-eyebrow,.comp-block-eyebrow,.comp-pricing-eyebrow,.comp-price-name,.comp-updates-label,
  .proc-eyebrow,.proc-marker-label,.proc-available-eyebrow,.cap-eyebrow,.cap-block-eyebrow,.bg-eyebrow,
  .bg-block-eyebrow,.faq-eyebrow,.final-eyebrow,.ih-eyebrow,.w-eyebrow,.wh-eyebrow,.h-eyebrow,.c-eyebrow,
  .f-eyebrow,.fn-eyebrow,.fn-geo-eyebrow,.co-eyebrow,.logos__label,.why__eyebrow,.session__eyebrow,.tier-eyebrow,
  .hiw-section__eyebrow,.portfolio__eyebrow,.reviews-section__eyebrow,.direct-bill__eyebrow,.faq-section__eyebrow,
  .conv-eyebrow,.chip-label,.process-eyebrow,.built-eyebrow,.sxsw-eyebrow,.events-eyebrow,.ind-eyebrow,
  .work-eyebrow,.conv-reviews-eyebrow,.hero-testimonial-eyebrow,.form-label,.hero__eyebrow,.bg__eyebrow,
  .ip-eyebrow,.ip-card-eyebrow,.ip-retouch-eyebrow,.work__eyebrow,.work__caption,.how__eyebrow,.use__eyebrow,
  .faq__eyebrow,.close__seo-eyebrow,.close__eyebrow,.close__trust-label,.bg-match__eyebrow,.recent-work__eyebrow,
  .reviews__eyebrow,.session-runs__eyebrow,.strong-headshot__eyebrow,.closing__eyebrow,.comp__eyebrow,.m__eyebrow,
  .book__eyebrow,.strong__eyebrow,.spec__eyebrow,.req__eyebrow,.hero-eyebrow,.cred-label,.about-eyebrow,
  .owners-eyebrow,.role-label,.cta-eyebrow,.ty-eyebrow,.tn-eyebrow,.tp-logos-label,.aqh-eyebrow,.aqb__eyebrow,
  .aqb__panellabel,.ih-cred-label,.atxb-eyebrow,.atxb-pg-role,.atxb-logos-label,.atxb-work-label,.atxic-eyebrow,
  .atxic-next-eyebrow,.atxb-stat-l,.atxb-stage-k
) { font-size: 12px !important; }
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .s3-tag, .s11-tag, .al-col-label, .role-label, .cred-label,
  .tier-marker-label, .proc-marker-label, .pr-band-size, .comp-price-name, .close__trust-label, .logos__label) {
  letter-spacing: 0.08em !important; font-weight: 600 !important;
}
/* colour: #8B8B87 at 11px failed contrast; light sections get #686763, dark sections #A8A6A1 (crawl-sorted) */
body:not(.atx-g-blog) #page :is(
  .s3-eyebrow,.s3-tag,.s6-eyebrow,.s5-eyebrow,.s10-eyebrow,.s12-eyebrow,.s14-eyebrow,.atx-gb-v13__eyebrow,.al-eyebrow,
  .trust-eyebrow,.pg-eyebrow,.pg-role,.rv-eyebrow,.cap-eyebrow,.cap-block-eyebrow,.faq-eyebrow,.w-eyebrow,.wh-eyebrow,
  .c-eyebrow,.fn-eyebrow,.fn-geo-eyebrow,.logos__label,.why__eyebrow,.session__eyebrow,.tier-eyebrow,
  .direct-bill__eyebrow,.form-label,.ip-eyebrow,.ip-card-eyebrow,.work__eyebrow,.work__caption,.use__eyebrow,
  .faq__eyebrow,.req__eyebrow,.about-eyebrow,.cta-eyebrow,.acf-eyebrow,.acl-eyebrow,.acl-detail-label,.aff-eyebrow,
  .tn-eyebrow,.tp-logos-label,.aqb__panellabel,.atxic-eyebrow,.aec-eyebrow,.aei-eyebrow
) { color: #686763 !important; }
body:not(.atx-g-blog) #page :is(
  .s7-eyebrow,.s4-eyebrow,.s9-eyebrow,.s11-eyebrow,.s15-eyebrow,.s15-seo-eyebrow,.atx-gb-v13__next-eyebrow,
  .tier-marker-label,.pr-eyebrow,.pr-band-size,.proc-proof-caption,.proc-marker-label,.proc-available-eyebrow,
  .bg-proof-caption,.bg-block-eyebrow,.h-eyebrow,.f-eyebrow,.chip__label,.hiw-section__eyebrow,.portfolio__eyebrow,
  .chip-label,.hero-testimonial-eyebrow,.bg__eyebrow,.ip-retouch-eyebrow,.how__eyebrow,.close__seo-eyebrow,
  .close__eyebrow,.close__trust-label,.bg-match__eyebrow,.session-runs__eyebrow,.closing__eyebrow,.comp__eyebrow,
  .m__eyebrow,.spec__eyebrow,.hero-eyebrow,.cred-label,.owners-eyebrow,.role-label,.afh-jump-label,.ty-eyebrow,
  .atxic-next-eyebrow,.atxb-stage-k
) { color: #A8A6A1 !important; }
/* the 28-32px dash drawn before (and after, on centred ones) every eyebrow; centred eyebrows stay centred */
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .role-label)::before,
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .role-label)::after { content: none !important; display: none !important; }
/* eyebrow over the home hero photo (read: 13px, #DDD9D2) */
.atx-p-home #page #atxHomeHero .eyebrow { font-size: 13px !important; color: #DDD9D2 !important; letter-spacing: 0.08em !important; font-weight: 600 !important; }
/* shared footer labels. Read: ".atx-footer h4"; built markup: .atx-footer h3 and .atx-areas-footer h2 */
#footer-sections .atx-footer h3, .atx-areas-footer h2 {
  font-size: 12px !important; letter-spacing: 0.08em !important; font-weight: 600 !important; color: #A8A6A1 !important;
}

/* ---------- Fix 3. One button kit: the booking system's (.atxB__btn / .atxH__btn: 17px, 700, sentence case,
   15px 24px, 6px radius). The read's numbers (16px, 4px) approximate that kit; the kit's own values are used so the
   booking buttons themselves (the reference, must-not-change) are untouched. Colours stay as each page set them.
   Read's list is per page; built markup is matched by class prefix (every a.btn*, plus the named ones below). ---- */
body:not(.atx-g-blog) #page :is(a[class^="btn"], a[class*=" btn"], .s9-btn, .s15-cta-btn, .ip-cta, .ip-team-link__btn,
  .ih-btn, .co-btn, .fn-btn, .afc-btn-primary, .afc-btn-secondary, .aect-btn-primary, .aect-btn-secondary, .atxb-btn,
  .aqb__cta, .aqh-cta, .atx-s7 > div > a) {
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 15px 24px !important; border-radius: 6px !important; line-height: 1.2 !important;
}
body:not(.atx-g-blog) #page :is(a[class^="btn"], a[class*=" btn"], .s9-btn, .s15-cta-btn, .ip-cta, .ip-team-link__btn,
  .ih-btn, .co-btn, .fn-btn, .afc-btn-primary, .afc-btn-secondary, .aect-btn-primary, .aect-btn-secondary, .atxb-btn,
  .aqb__cta, .aqh-cta, .atx-s7 > div > a, .s3-link)::after { content: none !important; display: none !important; }
/* card text links: sentence case 15px/600 with their existing 1px underline, no arrow glyph */
body:not(.atx-g-blog) #page :is(.s3-link, .atxTD a) {
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* FAQ topic chips stay chips: 4px radius, 14px */
#page #atx-faq-hero .afh-jump-chip { border-radius: 4px !important; font-size: 14px !important; }

/* ---------- Fix 4. Buttons never run off a phone screen (content-box + width:100% + padding). Buttons only. ---------- */
#page :is(.btn, [class*="-btn"], a.atx-book-btn, a[class^="btn"], a[class*=" btn"], .ip-cta, .aqb__cta, .aqh-cta) { box-sizing: border-box !important; }

/* ---------- Fix 6 (home). Column-and-void: heading left, the lede (or the long fact paragraph) right.
   Read's selector .atx-s3 .s3-head does not exist: eyebrow, h2 and intros are direct children of .atx-sN,
   so the section itself becomes the grid. Read's ".atx-s9 What separates" is .atx-s5 in the markup.
   Nothing moves out of its section; DOM order is unchanged. Below 900px: as before. ---------- */
@media (min-width: 900px) {
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) {
    display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start;
  }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > * { grid-column: 1 / -1; }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > [class$="-eyebrow"] { grid-column: 1; grid-row: 1; }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0 !important; }
  /* single-intro sections: the lede sits right of the heading */
  .atx-p-home #page :is(.atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 + p[class$="-intro"] {
    grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 56ch !important; margin: 0 !important;
  }
  .atx-p-home #page :is(.atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 + p[class$="-intro"] + * { margin-top: 56px !important; }
  /* Services: heading and short lede left, the Ryan Dunbar fact paragraph right */
  .atx-p-home #page .atx-s3 { grid-template-rows: auto auto 1fr; }
  .atx-p-home #page .atx-s3 > .s3-intro:nth-of-type(2) { grid-column: 1; grid-row: 3; margin: 20px 0 0 !important; }
  .atx-p-home #page .atx-s3 > .s3-intro:nth-of-type(3) { grid-column: 2; grid-row: 1 / span 3; align-self: end; max-width: 56ch !important; margin: 0 !important; }
  .atx-p-home #page .atx-s3 > .s3-grid { margin-top: 56px; }
}

/* ---------- Fix 8. Decorative numerals. Feature grids (Why ATX .s4, What separates .s5, Four signs .s10): hidden.
   Ordered process (.s7, dark section): kept as a 13px label, #A8A6A1 because the section is dark (read's
   #686763 is for light sections). Corporate process markers likewise. Blog numerals untouched. ---------- */
.atx-p-home #page :is(.s4-cred-num, .s5-num, .s10-num) { display: none !important; }
.atx-p-home #page .atx-s7 .s7-num { font-size: 13px !important; font-weight: 600 !important; color: #A8A6A1 !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; margin: 0 0 10px !important; }
#page #atxCorpProcess .proc-marker { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; }

/* ---------- Fix 9. Review grids: no per-card "GOOGLE REVIEW" label, one star colour, flush quote cards. ---------- */
#page :is(.atx-reviews-svc__source, .tp-src) { display: none !important; }
#page .atx-reviews-svc__stars { color: #1C1916 !important; font-size: 14px !important; }
#page .atx-reviews-svc__card { border: 0 !important; box-shadow: none !important; background: #fff !important; }
#page .atxB__q i { color: #1C1916 !important; font-size: 14px !important; }

/* ---------- Fix 12. "Reserve your session." is now an H2 (port.mjs, class atx-gb-v13__title) on every page but
   /austin-headshot-photographer: the H1 rules it had, so it looks exactly as before. ---------- */
.atx-gb-v13 .atx-gb-v13__header > h2.atx-gb-v13__title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(2.2rem, 3.4vw + 0.8rem, 3.6rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important;
  color: #1C1916 !important; margin: 0 0 18px !important; max-width: 20ch !important; text-transform: none !important;
  white-space: normal !important; text-align: start !important; padding: 0 !important;
}
@media (max-width: 600px) {
  .atx-gb-v13 .atx-gb-v13__header > h2.atx-gb-v13__title { font-size: 1.7rem !important; margin: 0 0 8px !important; }
}

/* ---------- Fix 13. Phone heroes: a scrim so the copy is readable over the face. Elements and order unchanged.
   Read's .hero-bg is the Squarespace section background image of the first section (.atx-first). ---------- */
@media (max-width: 767px) {
  :is(.atx-p-home, .atx-p-group-corporate-team-headshots-austin) #page .atx-first .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, rgba(29,26,22,.94) 0, rgba(29,26,22,.94) 48%, rgba(29,26,22,.45) 72%, rgba(29,26,22,.15) 100%);
  }
  :is(.atx-p-home, .atx-p-group-corporate-team-headshots-austin) #page .atx-first .section-background img { object-position: 70% 8% !important; }
  .atx-p-lawyer-headshots-austin-texas #page .atx-first .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, rgba(236,236,234,.94) 0, rgba(236,236,234,.94) 48%, rgba(236,236,234,.45) 72%, rgba(236,236,234,.1) 100%);
  }
}

/* ---------- Fix 14. Lawyer hero at desktop: the text column no longer runs over the portrait's shoulder.
   Read's .lawyer-hero .hero-text is #lawHero .hero__text in the markup. ---------- */
@media (min-width: 1024px) {
  .atx-p-lawyer-headshots-austin-texas #page #lawHero .hero__text { padding-left: calc(56px + 8%) !important; }
  /* the photo fades into its own grey backdrop (sampled rgb 201,201,203) behind the text column; full-height
     overlay on the section background, so there is no panel edge */
  .atx-p-lawyer-headshots-austin-texas #page .atx-first .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to right, rgba(201,201,203,0) 0, rgba(201,201,203,0) 50%, rgba(201,201,203,.92) 61%);
  }
}

/* ---------- Fix 15. Focus ring everywhere, 36px+ tap targets in the footers. ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px !important; }
#footer-sections .atx-footer a, .atx-areas-footer a { display: inline-block; padding: 6px 0; }

/* ---------- Fix 16. Shared footer: the logo column aligns left with the three link columns; on phones the
   sticky "Text us / See open times" bar no longer covers the last footer links. Read's ".atx-footer .brand" is
   the footer's logo and text blocks; read's "body.has-sticky" is any page that carries a sticky booking bar. ---------- */
@media (min-width: 768px) {
  #footer-sections .footer-logo { display: block; text-align: left; }
  #footer-sections .footer-logo img { margin-left: 0 !important; margin-right: auto !important; }
  #footer-sections .sqs-block-html .sqs-html-content p { text-align: left !important; }
}
@media (max-width: 899px) {
  body:has(#atxSticky, #corpSticky, .atx-v31-sticky) .atx-areas-footer { padding-bottom: 96px !important; }
}

/* ---------- Fix 17 (home). Services cards: individuals first, as a wide card; teams and conventions as a pair.
   Copy and order unchanged. Below 900px: one column, as before. ---------- */
@media (min-width: 900px) {
  .atx-p-home #page .atx-s3 .s3-grid { grid-template-columns: 1fr 1fr !important; grid-template-areas: "ind ind" "team conv"; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) { grid-area: ind; flex-direction: row !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) .s3-img { flex: 0 0 44%; width: 44% !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) .s3-body { justify-content: center; padding: 48px 56px !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(2) { grid-area: team; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(3) { grid-area: conv; }
}

/* ---------- Fix 18. Stat rows at 40px, not 56px. ("5+" on /aboutus waits for Ryan.) ---------- */
#page .atxB__nums b { font-size: clamp(30px, 4vw, 40px) !important; }
#page #atxCorpTrust .stat-number { font-size: clamp(30px, 3vw, 40px) !important; }