/* ATX static site shell. Header and footer-logo rules copied from the Google lander
   (landers/book-headshots-austin/index.html, #sq-rebuild), which rebuilt Squarespace's header in plain CSS.
   Generated by tools/port/shell.mjs; do not hand-edit (put design changes in tweaks.css). */
:root{
  --sqs-site-gutter:2vw;
  --sqs-mobile-site-gutter:6vw;
  --sqs-site-max-width:1500px;
  --ink:#1d1a16;--paper:#f8f8f7;--light:#eeeeec;--white:#f7f7f6;
  --header-h:78.77px;
}

html{scroll-behavior:smooth}
.header-skip-link{font-family:inherit!important}
/* ---------- header ---------- */
.header{position:fixed;top:0;left:0;right:0;z-index:10;color:var(--paper);background:rgba(29,26,22,0);transition:background .3s ease-in-out,padding .14s ease-in-out}
.header.shrink{background:var(--ink);transition:background .14s ease-in-out .14s}
.header-skip-link{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:10px 14px;z-index:20;font-size:14px}
.header-skip-link:focus{left:0}
.header-inner{position:relative;z-index:12;display:flex;align-items:center;justify-content:space-between;padding:1vw 2vw;max-width:none}
.header-logo{display:block;flex:0 0 auto}
.header-logo img{display:block;height:50px;width:auto;max-width:100%;max-height:50px}
.header-nav{display:inline-flex;align-items:center;gap:36px;margin-left:auto}
.nav-item,.nav-folder{position:relative}
.header a,.header button{color:var(--paper);font-family:Inter,sans-serif;font-size:16px;line-height:27.2px;text-decoration:none}
.header-nav a,.nav-folder-title{display:block;padding:1.6px 0;font-weight:400;letter-spacing:normal;background:none;border:0;margin:0;cursor:pointer;text-align:left}
.nav-folder-content{display:none;position:absolute;top:100%;right:-16px;background:var(--ink);padding:8px 16px;white-space:nowrap;text-align:right;z-index:13}
.nav-folder:hover .nav-folder-content,.nav-folder:focus-within .nav-folder-content,.nav-folder.is-open .nav-folder-content{display:block}
.nav-folder-content a{line-height:20.8px;padding:1.6px 0;text-align:right}
.burger{display:none;background:none;border:0;padding:1px 6px;margin:0;cursor:pointer;width:47px;height:37px;color:var(--paper)}
.burger-box{position:relative;display:block;width:35px;height:35px}
.bun{position:absolute;left:0;width:35px;height:1px;background:var(--paper);transition:transform .25s ease,top .25s ease,opacity .25s}
.top-bun{top:11px;transform:translateY(.5px)}
.bottom-bun{top:22px;transform:translateY(.5px)}
.header--menu-open .top-bun{top:17px;transform:rotate(45deg) scaleX(.8)}
.header--menu-open .bottom-bun{top:17px;transform:rotate(-45deg) scaleX(.8)}
.header-menu{display:none}

@media (max-width:799px){
  .header-inner{padding:6vw;align-items:center}
  .header.shrink .header-inner{padding-top:4.33vw;padding-bottom:4.33vw}
  .header-logo img{height:min(40px,8.84vw);max-height:40px}
  .header-nav{display:none}
  .burger{display:block}
  .header-menu{display:flex;position:fixed;left:0;right:0;top:0;bottom:0;z-index:10;background:var(--ink);flex-direction:column;justify-content:center;align-items:center;padding-top:var(--header-h);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;overflow:hidden}
  .header--menu-open .header-menu{opacity:1;visibility:visible;transition:opacity .3s ease}
  .header--menu-open{background:var(--ink)}
  .menu-panel{display:none;width:100%;text-align:center}
  .menu-panel.is-active{display:block}
  .menu-link{display:block;width:100%;background:none;border:0;margin:0;padding:3vw 7vw;color:var(--paper);font-family:Inter,sans-serif;font-size:8.5vw;line-height:1;text-align:center;text-decoration:none;cursor:pointer}
  .header .menu-link{font-size:8.5vw;line-height:1;box-sizing:border-box}
  .menu-folder{display:flex;align-items:center;justify-content:center;gap:.15em}
  .menu-folder span{max-width:calc(100% - 1.4em)}
  .menu-chev{flex:0 0 auto;width:.95em;height:.95em}
}


/* HEADER, ruling 87 (cohesion pass, 27 Oct; COHESION-AUDIT section 3): transparent at scroll 0, solid ink once the
   header script adds .shrink (y > 10), identical on every page. One logo box in both states (the live site's own
   50px / 40px) and no padding change on scroll, so the bar keeps its height (79 / 84 px). Pages whose first screen
   is light carry body.hdr-light (measured by tools/port/coh/hdrlight.mjs, list in tools/port/coh/hdr-light.json):
   dark logo (filter, decision 6) and dark text while transparent; the solid bar is the same ink bar everywhere. */
.header{background-color:rgba(29,26,22,0);color:var(--paper);transition:background-color .25s ease-in-out}
.header.shrink,.header.header--menu-open{background-color:var(--ink);transition:background-color .25s ease-in-out}
.header .header-logo img{height:50px;max-height:50px;width:auto;transition:filter .25s ease-in-out}
@media (max-width:799px){
  .header .header-logo img{height:min(40px,8.84vw);max-height:40px}
  .header.shrink .header-inner{padding-top:6vw;padding-bottom:6vw}
}
body.hdr-light .header:not(.shrink):not(.header--menu-open){color:var(--ink)}
body.hdr-light .header:not(.shrink):not(.header--menu-open) a,
body.hdr-light .header:not(.shrink):not(.header--menu-open) button{color:var(--ink)}
body.hdr-light .header:not(.shrink):not(.header--menu-open) .bun{background:var(--ink)}
body.hdr-light .header:not(.shrink):not(.header--menu-open) .header-logo img{filter:invert(1)}
body.hdr-light .header:not(.shrink):not(.header--menu-open) .nav-folder-content{background:var(--paper)}
/* Header-overlap fix: the header is fixed and transparent over the first section, so the first
   section is pushed down by the header height (Squarespace did this with JavaScript). */
#page .atx-first{padding-top:var(--header-h)}
@media (max-width:799px){:root{--header-h:83.78px}}
/* Blog index: Squarespace hid the masonry cards (opacity 0, absolute) until its JavaScript placed them.
   Static grid with the site's own masonry settings: 2 columns, 150px column and 100px row spacing. */
.blog-masonry-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:150px;row-gap:100px;align-items:start}
.blog-masonry .entry{position:relative!important;opacity:1!important;top:auto!important;left:auto!important}
@media (max-width:767px){.blog-masonry-wrapper{grid-template-columns:1fr;row-gap:60px}}
/* Squarespace image blocks' lazy images: the static copy loads them natively. */
img[data-src]{opacity:1}
/* footer logo + text block */
.footer-logo{display:block;position:relative;width:100%;height:100%}
.footer-logo img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block}
#block-3ff5a0d30a7aa9764ecc .sqs-block-content{height:100%}
.sqs-html-content{position:relative;z-index:0}
#footer-sections .sqs-html-content p{margin:0}


/* ===== FOOTER, walk fix F (28 Oct 2026): one ruled register on the money page's dark system (ink #1c1916, paper
   #f7f7f6, muted #9e9b97 / #8b8b87, 1 px rules at 8% white, the site's Inter / system stack; no new typeface, accent,
   icon or emoji). Markup: buildFooter() above. The tweak layer's old footer rules (fix 15 tap rows on .atx-areas-footer a,
   fix 16 sticky padding on .atx-areas-footer, the label rule on .atx-areas-footer h2) are overridden here by id. ===== */
#footer-sections.atx-foot{display:block;background:#1c1916;color:#9e9b97;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.75;padding:56px 24px 28px;border-top:1px solid rgba(255,255,255,.08);text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
#footer-sections .atx-foot__in{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px 40px;align-items:start}
#footer-sections .atx-foot__h{font-family:inherit!important;font-size:11px!important;line-height:1.3!important;font-weight:600!important;font-style:normal!important;text-transform:uppercase!important;letter-spacing:.14em!important;color:#8b8b87!important;margin:0 0 12px!important;padding:0!important}
#footer-sections .atx-foot__in ul{list-style:none;margin:0;padding:0}
#footer-sections .atx-foot__in li{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.75}
#footer-sections .atx-foot__in li::before,#footer-sections .atx-foot__in li::marker{content:none}
#footer-sections .atx-foot__in p{margin:0;padding:0;font-size:14px;line-height:1.75;color:#9e9b97;text-align:left;white-space:normal}
#footer-sections .atx-foot__in a{color:#b5b2ac;text-decoration:none;font-size:14px;line-height:1.75;display:inline;padding:0;opacity:1;border:0;background:none}
#footer-sections .atx-foot__in a:hover{color:#f7f7f6;text-decoration:none}
#footer-sections .atx-foot__col ul + .atx-foot__h{margin-top:22px!important}
#footer-sections .atx-foot__brand .footer-logo{display:block;position:static;width:220px;max-width:100%;height:auto;margin:0 0 14px;padding:0}
#footer-sections .atx-foot__brand .footer-logo img{position:static!important;display:block;width:220px!important;max-width:100%;height:auto!important;object-fit:fill!important;margin:0!important}
#footer-sections .atx-foot__line{max-width:38ch;margin:0 0 22px!important}
#footer-sections .atx-foot__reach{display:grid;grid-template-columns:auto auto;justify-content:start;gap:0 40px}
#footer-sections .atx-foot__legal{max-width:1200px;margin:32px auto 0;padding:20px 0 0;border-top:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.5;color:#686763;letter-spacing:.02em;text-align:left}
html body #footer-sections .atx-areas-footer{padding:0!important;background:none;border:0}
/* pages with no Squarespace footer: the areas groups only */
#footer-sections.atx-foot--areas .atx-foot__in{grid-template-columns:repeat(2,minmax(0,max-content));gap:32px 64px;justify-content:start}
#footer-sections.atx-foot--areas .atx-areas-footer ul{columns:2;column-gap:40px}
@media (max-width:899px){
  #footer-sections.atx-foot{padding:40px 20px 28px}
  #footer-sections .atx-foot__in{grid-template-columns:1fr 1fr;gap:24px 16px}
  #footer-sections .atx-foot__brand{grid-column:1/-1}
  /* Studio and on-location (10 links) takes the full row in two columns, under Sessions and Useful Links */
  #footer-sections .atx-foot__in > .atx-areas-footer{grid-column:1/-1;order:3}
  #footer-sections .atx-foot__in > .atx-areas-footer ul{columns:2;column-gap:16px}
  #footer-sections .atx-foot__in > .atx-areas-footer li{break-inside:avoid}
  #footer-sections.atx-foot--areas .atx-foot__in > .atx-areas-footer{order:0}
  /* fix 15 (tweak layer) kept for touch: tap rows of 34 px or more (24.5 px line + 5 px above and below) */
  #footer-sections .atx-foot__in a{display:inline-block;padding:5px 0}
  #footer-sections .atx-foot__reach{gap:0 28px}
  /* fix 16 (tweak layer) moved from the areas band to the footer: the phone sticky bar never covers the last row */
  body:has(#atxSticky, #corpSticky, .atx-v31-sticky, .atx-cbar) #footer-sections.atx-foot{padding-bottom:96px}
}
@media (max-width:359px){
  #footer-sections .atx-foot__in,#footer-sections.atx-foot--areas .atx-foot__in{grid-template-columns:1fr}
  #footer-sections .atx-foot__in > .atx-areas-footer ul{columns:1}
  #footer-sections .atx-foot__reach{grid-template-columns:1fr;gap:16px 0}
}
/* ===== Design tweak layer, shell part (TWEAK-LAYER-2026-10-27.md; the rest is in tweaks.css) ===== */
/* Fix 5 (solid header) retired by ruling 87: the header rules above replace it. */
html{scroll-padding-top:84px}
/* Walk fix 12 (28 Oct): the mobile menu's Back reads "< Back" in a dimmed tone, as live */
.menu-back{display:flex;align-items:center;justify-content:center;gap:.2em;opacity:.6}
/* Fix 10. The "Matches your firm." bento tile (booking system, .atxB__wc) was 60% empty white: it becomes
   a dark tile, centred, pairing diagonally with the dark "48h" tile. Text unchanged. */
.atxB__card.atxB__wc{background:var(--ink);color:#F7F7F6;border:0;justify-content:center}
.atxB__card.atxB__wc .atxB__c{margin-top:0;padding:32px}