/* Aaron J. Kimble Therapy — specialty landing pages.
   Loads AFTER state.css and only ADDS components. Never redefine a state.css token here.
   Used by: sex-therapy-atlanta.html, black-male-therapist-atlanta.html */

.container-wide{max-width:1120px;margin:0 auto;padding:0 1.6rem;}
h1,h2{text-wrap:balance;}
.lede-left{font-size:1.1rem;color:var(--muted);font-weight:300;max-width:64ch;margin:0 0 1rem;}

/* ---- Breadcrumb ---- */
/* padding-top only: the element also carries .container-wide, whose `padding:0 1.6rem`
   must keep supplying the horizontal gutter. A `padding` shorthand here would wipe it. */
.crumbs{font-size:.82rem;color:var(--muted);padding-top:1.1rem;}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-block;padding:.3rem 0;}
.crumbs a:hover{color:var(--slate);text-decoration:underline;}
.crumbs li+li::before{content:"/";margin-right:.45rem;color:var(--bronze);}
.crumbs [aria-current]{color:var(--ink);}

/* ---- Asymmetric editorial hero ---- */
.spec-hero{padding:2.6rem 0 3.4rem;}
.spec-hero .grid{display:grid;grid-template-columns:1.16fr .84fr;gap:3.4rem;align-items:center;}
.spec-hero h1{margin-bottom:1.1rem;}
.spec-hero .sub{font-size:1.14rem;color:var(--muted);font-weight:300;margin-bottom:1.9rem;max-width:52ch;}
.spec-hero .hero-actions{justify-content:flex-start;}
.spec-hero .hero-note{margin-top:1.5rem;font-size:.86rem;color:var(--muted);}

.portrait{position:relative;}
picture{display:contents;}
.portrait img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:var(--radius);display:block;box-shadow:var(--shadow-md);
}
.portrait::after{
  content:"";position:absolute;inset:auto -14px -14px auto;width:62%;height:58%;
  border-right:2px solid var(--bronze);border-bottom:2px solid var(--bronze);
  border-bottom-right-radius:var(--radius);z-index:-1;
}
.portrait-cap{
  position:absolute;left:-10px;bottom:18px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-sm,12px);
  box-shadow:var(--shadow-md);padding:.7rem 1rem;font-size:.78rem;line-height:1.45;
  max-width:70%;color:var(--muted);
}
.portrait-cap strong{display:block;color:var(--navy);font-size:.86rem;font-weight:600;}

/* ---- Numbered section eyebrow ---- */
.eyebrow-num{
  display:flex;align-items:baseline;gap:.9rem;margin-bottom:1.1rem;
}
.eyebrow-num .n{
  font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;color:var(--bronze-ink);
  line-height:1;letter-spacing:.02em;
}
.eyebrow-num .t{
  text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:600;color:var(--bronze-ink);
}

/* ---- Long-form prose block ---- */
.prose{max-width:68ch;}
.prose p{color:var(--muted);font-weight:300;}
.prose p strong{color:var(--ink);font-weight:600;}
.prose h3{margin-top:2rem;}

/* ---- "You might be here because" checklist ---- */
.reasons{
  list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 2.2rem;margin-top:1.8rem;max-width:900px;
}
.reasons li{
  position:relative;padding-left:2rem;font-size:.97rem;color:var(--muted);font-weight:300;
  line-height:1.6;
}
.reasons li::before{
  content:"";position:absolute;left:0;top:.55em;width:12px;height:7px;
  border-left:2px solid var(--bronze-ink);border-bottom:2px solid var(--bronze-ink);
  transform:rotate(-45deg);
}

/* ---- Pillars: hairline-divided list, deliberately not boxed ---- */
.pillars{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;margin-top:2.2rem;border-top:1px solid var(--line);
}
.pillar{padding:1.7rem 2rem 1.7rem 0;border-bottom:1px solid var(--line);}
.pillars .pillar:nth-child(odd){border-right:1px solid var(--line);padding-right:2.4rem;}
.pillars .pillar:nth-child(even){padding-left:2.4rem;padding-right:0;}
.pillar h3{font-size:1.13rem;margin-bottom:.35rem;}
.pillar p{font-size:.94rem;color:var(--muted);font-weight:300;margin:0;}

/* ---- Editorial pull quote ---- */
.pullquote{
  position:relative;max-width:760px;margin:0 auto;padding:2.4rem 0 0;text-align:center;
}
.pullquote::before{
  content:"\201C";position:absolute;top:-.35em;left:50%;transform:translateX(-50%);
  font-family:'Playfair Display',Georgia,serif;font-size:6rem;line-height:1;color:var(--bronze);
  opacity:.5;
}
.pullquote blockquote{
  font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.35rem,2.6vw,1.9rem);
  line-height:1.4;color:var(--navy);font-style:italic;
}
.pullquote cite{
  display:block;margin-top:1.2rem;font-family:'Inter',sans-serif;font-style:normal;
  font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-ink);font-weight:600;
}

/* ---- Soft panel (expectation setting / reassurance) ---- */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:2.2rem 2.3rem;margin-top:2.2rem;
}
.panel h3{margin-bottom:.9rem;}
.panel ul{list-style:none;}
.panel li{
  position:relative;padding-left:1.5rem;margin-bottom:.7rem;font-size:.96rem;
  color:var(--muted);font-weight:300;
}
.panel li:last-child{margin-bottom:0;}
.panel li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--bronze);
}

/* ---- Related pages ---- */
.related{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem;text-align:left;}
.related a{
  display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.5rem;text-decoration:none;color:var(--ink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.related a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--bronze);}
.related .k{
  display:block;text-transform:uppercase;letter-spacing:.18em;font-size:.68rem;
  color:var(--bronze-ink);font-weight:600;margin-bottom:.4rem;
}
.related .h{display:block;font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;color:var(--navy);}

/* ---- Reveal on scroll: CSS-only, scroll-driven, no JavaScript ----
   Deliberately built so content is NEVER hidden by default. The fade-up only exists
   inside the @supports block, so any browser without scroll-driven animations (and any
   print job) simply renders the content plainly. The animation-range ends early (entry 35%)
   so an element taller than the viewport still reaches full opacity right after it appears. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) {
    .reveal{
      animation:reveal-up linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 35%;
    }
    @keyframes reveal-up{
      from{opacity:0;transform:translateY(14px);}
      to{opacity:1;transform:none;}
    }
  }
}
@media print{
  .reveal{animation:none !important;opacity:1 !important;transform:none !important;}
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .spec-hero .grid{grid-template-columns:1fr;gap:2.4rem;}
  .spec-hero{padding-top:1.6rem;}
  .portrait{max-width:420px;margin:0 auto;}
  .portrait::after{display:none;}
  .related{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .reasons{grid-template-columns:1fr;}
  .pillars{grid-template-columns:1fr;}
  .pillars .pillar:nth-child(odd){border-right:0;padding-right:0;}
  .pillars .pillar:nth-child(even){padding-left:0;}
  .panel{padding:1.7rem 1.5rem;}
  .portrait-cap{position:static;max-width:none;margin-top:.9rem;box-shadow:none;}
}
@media (prefers-reduced-motion:reduce){
  .related a:hover{transform:none;}
  .card .card-more:hover,.pillar{transition:none;}
}

/* ---- Dusk mode ---- */
@media (prefers-color-scheme:dark){
  .related .h,.pullquote blockquote,.portrait-cap strong{color:#eee3d0;}
  .related a{color:var(--ink);}
  .pullquote::before{color:#c8ac8f;opacity:.4;}
  .related a:hover{border-color:#c8ac8f;}
  .reasons li::before{border-color:#c8ac8f;}
  .panel li::before{background:#c8ac8f;}
}

/* ================= BRAND GRAPHICS (approved 2026-08-04) =================
   Real Playfair Display glyph contours as artwork (brand-graphics/*.svg).
   CSS url() resolves against THIS stylesheet's location, so root-relative
   paths work for pages in / and /blog alike. */

/* ---- Oversized section numeral, watermarked behind the heading ----
   NOTE: a true left-margin numeral is impossible here: .container-wide is 1120px
   centred, so on any normal screen there is no gutter to put it in and it clips.
   So it sits at the TOP-RIGHT of the section instead: placing it left or above kept
   colliding with the eyebrow label, and the right of that row is empty on every
   section. The .n digits stay in the DOM for assistive tech, visually hidden. */
.eyebrow-num{position:relative;}
.eyebrow-num .n{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.eyebrow-num .t{position:relative;z-index:2;}
.eyebrow-num::before{
  content:"";position:absolute;right:0;top:-2.5rem;width:150px;height:88px;
  background-repeat:no-repeat;background-position:right top;background-size:contain;
  opacity:.42;pointer-events:none;z-index:0;
}
.eyebrow-num[data-n="01"]::before{background-image:url(brand-graphics/numeral-01.svg);}
.eyebrow-num[data-n="02"]::before{background-image:url(brand-graphics/numeral-02.svg);}
.eyebrow-num[data-n="03"]::before{background-image:url(brand-graphics/numeral-03.svg);}
.eyebrow-num[data-n="04"]::before{background-image:url(brand-graphics/numeral-04.svg);}
.eyebrow-num + h2{position:relative;z-index:1;}

/* ---- Ampersand watermark in the fees card corner ---- */
.feebox{position:relative;overflow:hidden;}
.feebox::after{
  content:"";position:absolute;right:-30px;bottom:-38px;width:172px;height:166px;
  background:url(brand-graphics/glyph-ampersand.svg) no-repeat right bottom/contain;
  opacity:.20;pointer-events:none;
}
.feebox h3,.feebox p{position:relative;}

@media (max-width:700px){
  .eyebrow-num::before{width:96px;height:56px;top:-1.9rem;opacity:.34;}
  .feebox::after{width:128px;height:124px;right:-20px;bottom:-26px;}
}

/* Taupe artwork sits on a dark ground in dusk, where it reads brighter: ease it back. */
@media (prefers-color-scheme:dark){
  .eyebrow-num::before{opacity:.30;}
  .feebox::after{opacity:.14;}
}