/* ============================================================================
   Liz LaBianca Photography — rebuild prototype v10 (build b24)
   Every colour, font, size and spacing value below was READ OFF THE LIVE SITE
   with getComputedStyle, not eyeballed. Source values recorded in comments.

   Desktop: reproduces the current design.
   Mobile:  same look and feel, genuinely responsive instead of the bolt-on
            breakpoint layer. Differences are listed at the bottom of this file.
   ========================================================================= */

:root{
  /* --- measured palette ------------------------------------------------- */
  --cream:      #f9f6f2;  /* rgb(249,246,242)  page + inner shell           */
  --blush:      #f4e7e4;  /* rgb(244,231,228)  hero band                    */
  --white:      #ffffff;  /* about band                                     */
  --ink-dark:   #2b2b2b;  /* rgb(43,43,43)     CTA band + badges            */
  --ink:        #363636;  /* rgb(54,54,54)  inherited default — NOT the copy */
  --copy:       #6b6660;  /* rgb(107,102,96)   ALL BODY COPY, weight 300     */
  --heading:    #2b2b2b;  /* rgb(43,43,43)     ALL HEADINGS, weight 500      */
  --cta-sub:    #cfc8bc;  /* rgb(207,200,188)  sub-copy on the dark band     */
  --accent:     #996159;  /* rgb(153,97,89)    accent text                  */
  --accent-mid: #a97f78;  /* rgb(169,127,120)  outlined button              */
  --accent-lt:  #b98d86;  /* rgb(185,141,134)  filled button                */
  --grey:       #848484;  /* rgb(132,132,132)                               */
  --rule:       #e4dcd4;

  /* --- intake form chrome, measured off live /client-intake/ ------------- */
  --btn-sel:    #96665c;  /* rgb(150,102,92)   SELECTED type chip bg         */
  --btn-txt:    #a97f78;  /* rgb(169,127,120)  unselected chip text          */
  --btn-bd:     #e0d0cc;  /* rgb(224,208,204)  unselected chip border        */
  --field-bg:   #f0f0f0;  /* rgb(240,240,240)  input / textarea background   */
  --field-bd:   #363636;  /* rgb(54,54,54)     input / textarea border       */

  --shell: 1000px;        /* .article-wrap  = 1000px                        */
  --inner: 960px;         /* .article-wrap-inner content box = 960px        */

  /* --- measured type ---------------------------------------------------- */
  --display: "Cormorant Garamond", Georgia, serif;   /* headings           */
  --body:    Georgia, Times, serif;                  /* body 15/26.25      */
  --ui:      "Jost", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --nav:     "Cardo", Georgia, serif;                /* nav 700 11px       */
  --badge:   "Pathway Gothic One", "Jost", sans-serif;

  --live: "https://www.lizlabiancaphotography.com";
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding:20px 0 30px;          /* measured: outer wrapper 20px top, 30px bottom */
  background-color:var(--cream);
  font-family:var(--body);
  font-size:15px;
  line-height:26.25px;           /* measured: Georgia 15px/26.25px */
  letter-spacing:1px;            /* MEASURED ON THE ROOT — inherited by all
                                    body copy. Missing this was quietly
                                    changing every text wrap in v1-v5. */
  color:var(--copy);             /* MEASURED: body copy is #6b6660, not #363636 */
  font-weight:300;               /* MEASURED */
  /* MEASURED on the live body. This is why the prototype's text read as
     "darker" even after every hex value matched exactly: the default `auto`
     uses subpixel antialiasing, which rasterises the SAME colour noticeably
     heavier. Grayscale antialiasing is what gives the live site its lighter,
     finer text. A colour comparison cannot see this — only an eye can. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ============================== MASTHEAD ================================= */
.masthead{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 20px;               /* measured: logo occupies 20..175, nav starts 175 */
  display:grid;
  grid-template-columns:120px 1fr 120px;   /* badges measured at 120x100 */
  align-items:center;
  gap:16px;
}
/* MEASURED: a 120x25 chip on rgb(37,37,37); label is Pathway Gothic One 14px
   white, letter-spacing 1px; a gloss overlay sits on top — and that overlay is
   btn-layer2-gloss-v1.webp, the file we built in headfilter v6. */
.badge{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:120px;height:25px;
  background:#252525;
  color:#fff;
  font-family:var(--badge);
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  text-decoration:none;
  line-height:1;
  justify-self:center;
  overflow:hidden;
}
.badge span{position:relative;z-index:2}
.badge::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:url("https://www.lizlabiancaphotography.com/wp-content/uploads/2026/08/btn-layer2-gloss-v1.webp") center/cover no-repeat;
  pointer-events:none;
}
.logo{justify-self:center;text-align:center}
.logo img{width:550px;max-width:100%;height:auto}   /* measured 550x155 */

/* =============================== SHELL =================================== */
/* The shell edge art. MEASURED: body_bg_1407536136.png is 1000x45, interior is
   pure white (255), and ink exists ONLY in columns 0-1 and 998-999 — a 2px
   vertical line each side with a 45px repeating irregular pattern.
   The live site tiles it once at exactly 1000px wide, which is WHY the design
   is locked to 1000px: the right edge only lands if the box is the image width.
   Here the same file is used as TWO layers, anchored left and right, repeating
   vertically. Original artwork, pixel-exact, at any width, no new assets. */
.shell{
  max-width:var(--shell);
  margin:0 auto;
  padding:0 20px;
  /* flow-root so the first child's top margin cannot collapse out of the
     frame — the frame must start flush under the nav, as live does. */
  display:flow-root;
  /* DESIGN CHANGE (b21), agreed with Dan: the small-caps page title is gone.
     It was a ProPhoto artifact — WordPress printing the page title, and then
     the hero saying it again immediately below. "PORTFOLIO / Portfolio",
     "SENIOR PORTRAITS / Senior Portraits", and on Sessions it was three
     deep: title, eyebrow and heading all saying the same thing.
     The nav already says where you are, so the hero heading now does the
     work alone. This keeps the 40px of air the title band opened with and
     drops the 50px the title itself occupied — tighter on every page, and
     it matters most on a phone where vertical space is the scarce thing. */
  padding-top:40px;
  background-color:#fff;                       /* measured interior = 255 */
  /* THE EDGE RULES — third attempt, and the right one.
     The ink is two pixel columns of deliberately rough hand-inked line: read
     row by row it runs 98,86 / 67,176 / 65,105 / 119,74 ... That roughness IS
     the artwork. The live site blits it 1:1, so it reads as a fine sketchy
     rule. v3 used background-size:100% 45px, which forces the browser to
     RESAMPLE a high-contrast 2px line — and resampling a line like that
     stair-steps it. That was the jaggedness, and it was mine, not the art's.
     Now: the two edge columns cropped at native resolution into 4x45 strips
     (460 and 418 bytes), tiled with background-size:auto so there is no
     scaling anywhere. Crisp at 1:1, correct at every width, and 4px strips
     cannot cover each other the way the two 1000px layers in v2 did. */
  background-image:
    url("https://www.lizlabiancaphotography.com/wp-content/uploads/2026/08/shell-edge-left-v1.png"),
    url("https://www.lizlabiancaphotography.com/wp-content/uploads/2026/08/shell-edge-right-v1.png");
  background-position:left top, right top;
  background-repeat:repeat-y, repeat-y;
  background-size:auto, auto;                  /* no resampling — the fix */
}
.inner{max-width:var(--inner);margin:0 auto}   /* 960px, leaving 20px gutters */

/* ================================ NAV ==================================== */
.nav{
  /* CORRECTED b19. primary-nav-grain-v1.webp is NOT a tiling texture — it is
     the COMPLETE 1000x50 nav artwork, and it carries the frame's top rule and
     the left/right edge ink. Live uses it no-repeat on a 1000px-wide element
     with a TRANSPARENT background colour, and the nav is a SIBLING above the
     shell, not inside it.
     The prototype tiled it, inside a 960px box, over a solid #f3efe9. That is
     why the top rule started 20px inboard of the vertical edge lines instead
     of meeting them at the corner — the frame stopped reading as a frame. */
  max-width:1000px;
  margin:0 auto;
  background-color:transparent;
  background-image:url("https://www.lizlabiancaphotography.com/wp-content/uploads/2026/08/primary-nav-grain-v1.webp");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% 50px;   /* 1:1 at 1000px; edge ink stays pinned to the
                                  edges at narrower widths */
  min-height:50px;
  height:50px;
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;
  gap:0 26px;
  padding:0 12px;                       /* v5 was 53px tall; this lands on 50 */
}
.nav a{
  font-family:var(--nav);
  font-weight:700;
  font-size:11px;                        /* measured Cardo 700 11px/17px */
  line-height:17px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  padding:16px 4px;                      /* 49px box inside the 50px bar */
}
.nav a:hover,.nav a:focus{color:var(--accent)}

.pagetitle{
  font-family:var(--badge);
  font-size:25px;                /* MEASURED on /portfolio/: 25px, not 20px */
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  /* RE-MEASURED on live /about/, /investmentinfo/ and /contact-liz/: the title
     sits at y=265 with height 30, and the hero band starts at y=315. The nav
     ends at 225, so the title band is 40 above + 30 + 20 below = 90px total.
     v10 had 52px, which pulled every interior hero 38px too high — the same
     error on every page that has a page title. */
  margin:40px 0 20px;
  line-height:30px;
  font-weight:400;
}

/* ============================ SHARED PIECES ============================== */
.eyebrow{
  font-family:var(--ui);
  font-size:12px;                        /* measured Jost 400 12px/19.2px */
  line-height:19.2px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--accent);
  text-align:center;
  margin:0 0 24px;              /* measured */
}
h1,h2,h3{font-family:var(--display);font-weight:500;color:var(--heading);margin:0;letter-spacing:normal}  /* MEASURED #2b2b2b */
/* MEASURED ON LIVE (v2 was too small, which is why line breaks differed):
   h1   50px / 62.5px, margin-bottom 20px, text column 712px
   lede 18px / 31.5px, letter-spacing 1px, margin-bottom 34px
   h2   38px / 47.5px      h3 24px / 30px                                  */
h1{font-size:50px;line-height:62.5px;font-style:italic;letter-spacing:normal;margin-bottom:20px}
h2{font-size:38px;line-height:47.5px}
h3{font-size:24px;line-height:30px}
p{margin:0 0 18px}
.lede{max-width:712px;margin:0 auto 34px;text-align:center;color:var(--copy);font-weight:300;
      font-size:18px;line-height:31.5px;letter-spacing:1px}
.rule{width:56px;height:1px;background:var(--accent-lt);margin:14px auto;border:0}  /* measured band = 29px */

.btn{
  display:inline-block;
  font-family:var(--ui);
  font-size:15px;                        /* measured */
  letter-spacing:2px;
  text-transform:uppercase;
  padding:15px 36px;                     /* measured */
  border-radius:2px;                     /* measured */
  text-decoration:none;
  line-height:24px;                      /* measured: makes the button 54px tall */
  transition:background-color .18s ease,color .18s ease;
}
.btn-solid{background:var(--accent-lt);color:#fff;border:0}
.btn-solid:hover{background:var(--accent)}
.btn-ghost{background:transparent;color:var(--accent-mid);border:1px solid var(--accent-mid)}
.btn-ghost:hover{background:var(--accent-mid);color:#fff}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* =============================== HERO ==================================== */
.hero{background:var(--blush);padding:84px 124px 74px;text-align:center}  /* measured */
.hero h1{margin:0 auto 20px;max-width:712px}

/* ---- rotator: same behaviour, real slides, crossfade ---- */
.rotator{position:relative;aspect-ratio:960/620;background:#efe8e2;overflow:hidden}
.rotator img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.1s ease;
}
.rotator img.on{opacity:1}

/* =============================== QUOTE =================================== */
.quote{background:var(--cream);padding:84px 24px;text-align:center}      /* measured */
.quote blockquote{
  margin:0 auto;max-width:680px;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:26px;line-height:39px;letter-spacing:1px;color:var(--copy);font-weight:400;  /* measured */
}

/* ============================== SESSIONS ================================= */
.sessions{background:var(--cream);padding:0 24px 84px;text-align:center}  /* measured */
.sessions h2{margin:0 0 47px}   /* measured: cards start 47px below the h2 */
.sessions .eyebrow{margin-bottom:12px}   /* measured: hero eyebrow is 24, this one 12 */
.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);    /* desktop: 4 across, as today */
  gap:20px;                               /* measured: 213 wide x4 in 912 */
  text-align:center;
}
.card{background:#fff;border:1px solid var(--rule);display:flex;flex-direction:column}
.card .ph{aspect-ratio:211/158;overflow:hidden;background:#eee}   /* measured */
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:27px 24px 24px;display:flex;flex-direction:column;flex:1}  /* measured */
.card h3{margin:0 0 10px}
.card p{font-size:15px;line-height:26.25px;letter-spacing:1px;color:var(--copy);font-weight:300;margin:0 0 16px}  /* measured */
.inquire{
  margin-top:auto;
  font-family:var(--ui);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor;   /* measured #996159 */
  padding-bottom:2px;align-self:center;
}
.inquire:hover{color:var(--accent-lt)}

/* =============================== ABOUT =================================== */
.about{background:var(--white);padding:84px 24px}                         /* measured */
.about p{font-size:16.5px;line-height:28.875px;letter-spacing:1px;color:var(--copy);font-weight:300;margin:0 0 16px}  /* measured */
.about-grid{display:grid;grid-template-columns:380px 476px;gap:56px;align-items:start}
/* MEASURED: photo column 380, text column 476, gap 56 -> 912 content width.
   Content block 499 tall + 84 + 84 padding = the live band's 669. */
.about-photo{border:1px solid var(--rule);padding:10px;background:#fff;
  /* QA: adding width="720" to the photo gave this grid item a 720px min-content
     floor (720 + 20 padding + 2 border = the 742px track that overflowed).
     Grid items default to min-width:auto and will not shrink below their
     content. min-width:0 plus a fluid image is the fix, and it is the correct
     default for any grid item holding an image. */
  min-width:0}
.about-photo img{width:100%;height:auto}
.about .eyebrow{text-align:left;margin-bottom:12px;letter-spacing:4px}   /* measured */
.about h2{text-align:left;margin:0 0 18px}
.about p.signoff,
.signoff{font-family:var(--display);font-style:italic;font-size:22px;line-height:38.5px;letter-spacing:1px;color:var(--heading);font-weight:300;margin:0 0 24px}  /* measured #2b2b2b fw300 */

/* ================================ CTA ==================================== */
/* MEASURED: Home's CTA is 84/84 (band 3043-3382, h339). Every INTERIOR page
   uses 72/72 — /about/ h303, /portfolio/seniors/ h304. */
.cta{background:var(--ink-dark);color:#fff;padding:72px 24px;text-align:center}
.cta.cta-home{padding:84px 24px}
.cta h2{color:#fff;font-style:italic;font-size:40px;line-height:50px;margin:0 0 14px}   /* measured */
.cta p{color:var(--cta-sub);font-size:12px;line-height:21px;font-weight:300;margin:0 0 30px}  /* measured */
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.cta .btn-ghost:hover{background:#fff;color:var(--ink-dark)}

/* ============================== FOOTER =================================== */
.footer{background:var(--cream);padding:26px 24px 40px;   /* measured */text-align:center;font-size:13px;line-height:24px;color:var(--copy)}
/* MEASURED: Home and Contact use 26/40 and 26/38; About, Sessions and the
   intake pages use 34/44. Same markup, different ProPhoto page settings. */
.footer.f-tall{padding:34px 24px 44px}
.footer a{color:var(--copy);white-space:nowrap}   /* never split a number */
.footer .meta{display:flex;flex-wrap:wrap;gap:0 10px;justify-content:center}
.footer .meta > span{white-space:nowrap}
.footer .sep{color:var(--grey)}
.footer .social{margin-top:6px;font-family:var(--ui);font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--accent-lt)}
.footer .social a{color:var(--accent-lt);text-decoration:none;padding:8px 4px;display:inline-block}
.footer .copy{margin-top:8px;font-size:12px;line-height:19.2px;font-family:var(--ui);color:var(--copy)}  /* measured Jost 12/19.2 */

/* ======================= RESPONSIVE — THE IMPROVEMENT ====================
   The live site is a fixed 1000px shell plus a hand-built two-breakpoint
   layer. Below, the layout is fluid at every width. Same fonts, same colours,
   same rhythm — it simply stops being a desktop page squeezed onto a phone.
   ======================================================================== */
@media (max-width:1040px){
  .shell{border-left:0;border-right:0}
}
@media (max-width:900px){
  .hero{padding:74px 40px 64px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:300px 1fr;gap:40px}
  h1{font-size:42px;line-height:1.16}
  h2{font-size:33px;line-height:1.22}
}
@media (max-width:720px){
  /* Logo first, then BOTH chips on ONE row beneath it. v2 stacked them one
     above the other, which read as two chips piled up. */
  .masthead{grid-template-columns:1fr;gap:14px;padding:22px 18px 18px;justify-items:center}
  .masthead .logo{order:-1;grid-column:1}
  .badges-row{display:contents}
  .masthead .badges-row:first-of-type .badge{grid-column:1;justify-self:end;margin-right:66px}
  .masthead .badges-row:last-of-type  .badge{grid-column:1;justify-self:start;margin-left:66px;margin-top:-25px}
  .about-grid{grid-template-columns:1fr;gap:26px}
  .about .eyebrow,.about h2{text-align:center}
  /* QA: max-width alone still let this sit at a fixed 360 inside a narrower
     column, pushing the page 6px wide at 390. Cap it to the column too. */
  .about-photo{max-width:min(360px,100%);margin:0 auto}
  .hero{padding:54px 20px 48px}
  .rotator{aspect-ratio:4/3}
  h1{font-size:34px;line-height:1.18}
  h2{font-size:28px;line-height:1.24}
  .cta h2{font-size:30px}
  .quote blockquote{font-size:22px}
  .lede{font-size:16px;line-height:28px}
  .btn{padding:14px 26px;font-size:14px}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .card .ph{aspect-ratio:16/10}
  .nav{gap:0 14px}
  .nav a{font-size:11px;letter-spacing:.8px}
  h1{font-size:29px;line-height:1.2}
  .lede{font-size:15px;line-height:26px;letter-spacing:.5px}
  .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
}

/* prototype label — remove for the real build */
#protolabel{
  position:fixed;right:10px;bottom:10px;z-index:99;
  font-family:var(--ui);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  background:rgba(43,43,43,.82);color:#fff;padding:6px 10px;border-radius:2px;
  cursor:pointer;opacity:.75;
}


/* ==========================================================================
   PORTFOLIO PAGE — all values measured off the live /portfolio/ page
   page title   Pathway Gothic One 25px/25px ls 2px #363636, mb 5
   h1           Cormorant italic 44px/57.2px #2b2b2b, mb 10, width 912
   intro        Georgia 12px/21px ls 1px #6b6660 fw300
   cards        cover 222x280, four across, 24px gaps  (4*222 + 3*24 = 960)
   card label   Cormorant 24px/30px #2b2b2b
   card caption Georgia 15px/26px ls 1px #6b6660 fw300
   best-of grid CSS MULTI-COLUMN: column-count 3, column-gap 18px,
                figures margin 0 0 18px, break-inside avoid, 292px columns
                (3*292 + 2*18 = 912). NOT css grid — the column mechanism is
                what makes the documented 5/5/5 order fall out correctly.
   ========================================================================== */
.page-intro{padding:0 24px 0;text-align:center}
.page-intro h1{font-size:44px;line-height:57.2px;font-style:italic;margin:0 0 10px}
.page-intro .sub{font-size:12px;line-height:21px;letter-spacing:1px;color:var(--copy);
  font-weight:300;margin:0 auto;max-width:620px}

.chooser{display:grid;grid-template-columns:repeat(4,222px);gap:24px;justify-content:center;
  padding:32px 0 0}
.choice{text-decoration:none;display:block;text-align:left}
.choice .cover{width:222px;height:280px;overflow:hidden;background:#eee}
.choice .cover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.choice:hover .cover img{transform:scale(1.03)}
.choice h3{font-size:24px;line-height:30px;margin:14px 0 4px}
.choice p{font-size:15px;line-height:26px;letter-spacing:1px;color:var(--copy);
  font-weight:300;margin:0}

.bestof{padding:64px 24px 84px}
.bestof-grid{column-count:3;column-gap:18px}
.bestof-grid figure{margin:0 0 18px;break-inside:avoid;-webkit-column-break-inside:avoid}
.bestof-grid img{width:100%;height:auto;display:block}

@media (max-width:900px){
  .chooser{grid-template-columns:repeat(2,1fr);gap:22px}
  .choice .cover{width:100%;height:auto;aspect-ratio:222/280}
  .bestof-grid{column-count:2}
  .page-intro h1{font-size:38px;line-height:1.2}
}
@media (max-width:560px){
  .chooser{grid-template-columns:1fr;gap:26px}
  .bestof-grid{column-count:1}
  .page-intro h1{font-size:31px}
  .bestof{padding:44px 20px 60px}
}


/* --- placeholder pages, so nothing escapes the prototype onto the live 404 --- */
.stub{padding:56px 24px 84px;text-align:center;max-width:620px;margin:0 auto}
.stub-tag{font-family:var(--ui);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px}
.stub p{color:var(--copy);font-weight:300}
.stub .btn{margin:8px 6px 0}


/* --- gallery pages ------------------------------------------------------- */
.gridnote{font-family:var(--ui);font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);text-align:center;padding:60px 0;
  column-span:all}   /* never let a message split across the columns */
/* MEASURED on the live gallery page: Jost 12px, letter-spacing 1.68px,
   uppercase, colour #6b6660, NO underline, left-aligned at the content edge,
   margin-bottom 22px, sitting between the page title and the big heading. */
/* MEASURED on live /portfolio/seniors/: the back link sits at y=319, is 12px
   tall (line-height 12, not 26) and has 22px beneath it, which puts the hero
   band at exactly 353. */
.backlink{text-align:left;margin:4px 0 22px;padding:0 24px;line-height:12px}
.backlink a{font-size:12px;line-height:12px;letter-spacing:1.68px}
.backlink a{font-family:var(--ui);font-size:12px;font-weight:400;letter-spacing:1.68px;
  text-transform:uppercase;color:var(--copy);text-decoration:none;border:0;display:inline-block}
.backlink a:hover{color:var(--accent)}


/* --- sessions page ------------------------------------------------------- */
.cards-2{grid-template-columns:repeat(2,1fr);max-width:660px;margin:0 auto}
.card .price{font-family:var(--ui);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin:0 0 12px}
.note{max-width:640px;margin:44px auto 0;text-align:center;color:var(--copy);font-weight:300;
  font-size:15px;line-height:26.25px;letter-spacing:1px}

/* --- about page: full-width photo band ---------------------------------- */
.wide-photo{max-width:560px;margin:0 auto;border:1px solid var(--rule);padding:10px;background:#fff}
.wide-photo img{width:100%;height:auto;display:block}

/* --- contact page ------------------------------------------------------- */
.formwrap{display:grid;grid-template-columns:1fr 300px;gap:56px;padding:44px 24px 84px;
  align-items:start}
.llp-form label{display:block;font-family:var(--ui);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.llp-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.llp-form input,.llp-form select,.llp-form textarea{
  display:block;width:100%;margin-top:7px;padding:11px 12px;
  font-family:var(--body);font-size:16px;letter-spacing:1px;color:var(--heading);
  background:#fff;border:1px solid var(--rule);border-radius:2px;text-transform:none}
.llp-form input:focus,.llp-form select:focus,.llp-form textarea:focus{
  outline:2px solid var(--accent-mid);outline-offset:1px;border-color:var(--accent-mid)}
.llp-form textarea{resize:vertical}
.llp-form button{margin-top:6px;cursor:pointer;border:0;font-family:var(--ui)}
.formnote{margin:16px 0 0;font-family:var(--body);font-size:14px;letter-spacing:1px;
  color:var(--copy);font-weight:300;text-transform:none}
.direct p{margin:0 0 10px;color:var(--copy);font-weight:300}
.direct a{color:var(--accent)}
.direct .small{font-size:13px;line-height:22px}

@media (max-width:760px){
  .formwrap{grid-template-columns:1fr;gap:34px;padding:34px 20px 60px}
  .llp-form .row{grid-template-columns:1fr}
  .cards-2{grid-template-columns:1fr;max-width:420px}
}


/* ==========================================================================
   PAGE LAYOUTS — measured off the live About / Sessions / Contact pages
   About     blush hero band 272 tall; then a 912 split: 360-wide blush photo
             panel (images 338 wide) + 52 gap + 500-wide text column
   Sessions  blush hero 293 tall; two 436x637 white cards, 28px gap, image
             434x220, card content 366 wide (35px padding)
   Contact   NO FORM on the live page: blush hero with two buttons routing to
             the separate inquiry pages, a full-width 960x510 photo, then the
             direct-contact block
   ========================================================================== */
/* MEASURED per page — live does NOT use one hero padding everywhere:
     /about/          pt 72  pb 56
     /investmentinfo/ pt 72  pb 56
     /contact-liz/    pt 64  pb 50
     /client-intake/  pt 52  pb 40
   The prototype had 84/74 on all of them, inherited from the HOME hero. */
.pagehero{padding:72px 24px 56px}
.pagehero.contact-hero{padding:64px 24px 50px}
.pagehero.intake-hero{padding:52px 24px 40px}
.pagehero h1{font-size:44px;line-height:57.2px;font-style:italic;margin:0 auto 10px;max-width:912px}
.lede.narrow{max-width:560px}
.lede.narrow2{max-width:640px;margin-top:14px}
.lede.narrow3{max-width:540px}

.splitband{padding:72px 24px 72px;background:var(--cream)}  /* live pt72 pb72 */
.splitband.white{background:#fff}
.split{display:grid;grid-template-columns:360px 500px;gap:52px;justify-content:center;align-items:start}
.photostack{background:var(--blush);padding:11px;display:grid;gap:11px}
.photostack img{width:100%;height:auto;display:block}
.splittext p{color:var(--copy);font-weight:300;font-size:16.5px;line-height:28.875px;
  letter-spacing:1px;margin:0 0 16px}
.splittext .signoff{font-family:var(--display);font-style:italic;font-size:22px;line-height:38.5px;
  color:var(--heading);margin:0 0 24px}
.splittext h2.left{text-align:left;margin:0 0 18px}

.sessionband{padding:72px 24px 72px;background:var(--cream)} /* live pt72 pb72 */
.sessioncards{display:grid;grid-template-columns:repeat(2,436px);gap:28px;justify-content:center}
.scard{background:#fff;display:flex;flex-direction:column}
.scard-ph{width:100%;aspect-ratio:434/220;overflow:hidden;background:#eee}
.scard-ph img{width:100%;height:100%;object-fit:cover;display:block}
.scard-bd{padding:35px;display:flex;flex-direction:column;flex:1;text-align:center}
.scard-bd h2{font-size:30px;line-height:38px;margin:0 0 8px}
.scard-bd .price{font-family:var(--ui);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);margin:0 0 18px}
.scard-bd p{color:var(--copy);font-weight:300;font-size:15px;line-height:26.25px;letter-spacing:1px}
.scard-bd .btn{margin-top:auto;align-self:center}

.fullphoto img{width:100%;height:auto;display:block}
.direct-band{padding:56px 24px 40px;text-align:center;background:var(--cream)}
.direct-band .lead{font-size:15px;letter-spacing:1px;color:var(--copy);font-weight:300;margin:0 0 12px}
.direct-band p{margin:0 0 8px;color:var(--copy);font-weight:300}
.direct-band a{color:var(--accent)}
.direct-band .small{font-size:13px;margin-top:14px}

@media (max-width:900px){
  .split{grid-template-columns:300px 1fr;gap:34px}
  .sessioncards{grid-template-columns:repeat(2,1fr)}
  .pagehero{padding:64px 20px 54px}
  .pagehero h1{font-size:36px;line-height:1.2}
}
@media (max-width:700px){
  .split{grid-template-columns:1fr;gap:28px;max-width:420px;margin:0 auto}
  .sessioncards{grid-template-columns:1fr;max-width:436px;margin:0 auto}
  .splittext h2.left{text-align:center}
  .pagehero h1{font-size:31px}
  .splitband,.sessionband{padding:48px 20px 60px}
}


/* Pages where the small page label and the big heading would repeat the same
   word (Portfolio and the four galleries) drop the big heading and keep the
   label. The live site prints both — it is the "redundant page title" the
   mobile layer already hides at some widths. */
.page-intro.noheading{padding-top:10px}
.page-intro.noheading .sub{margin-top:0}


/* ==========================================================================
   MEASURED CORRECTIONS — Sessions and Contact typography
   Dan: "sessions content is much bigger than live". It was: the page intro
   was running at the homepage lede size (18px) where the live Sessions and
   Contact pages use 12px. Every value below read off the live pages.
   ========================================================================== */

/* --- Sessions ---------------------------------------------------------- */
.sessionband + .cta, .pagehero + .sessionband{}
.pagehero.sessions-hero h1{font-size:46px;line-height:57.5px}   /* live 46/57.5 */
.pagehero .lede.narrow{font-size:12px;line-height:21px;letter-spacing:1px;font-weight:300;
  max-width:560px}                                              /* live 12/21, 560 wide */
.pagehero .lede.narrow2{font-size:14px;line-height:22.4px;letter-spacing:1px;font-weight:400;
  max-width:640px;margin-top:14px}                              /* live 14/22.4, 640 wide */

.scard-bd h2{font-size:30px;line-height:37.5px}                 /* live 30/37.5 */
.scard-bd .price{font-family:var(--display);font-size:24px;line-height:42px;font-weight:400;
  letter-spacing:1px;text-transform:none;color:var(--accent-lt)} /* live: Cormorant 24px #b98d86 */
.scard-bd p{font-size:16.5px;line-height:28.875px;letter-spacing:1px}  /* live 16.5/28.875 */
.scard-bd .btn{font-size:15px;line-height:24px;letter-spacing:2px}     /* live 186x54 */
.note{max-width:760px;font-size:16.5px;line-height:28.875px}    /* live 760 wide, 16.5/28.875 */
.splittext h2.left{font-size:34px;line-height:42.5px}           /* live corporate h2 34/42.5 */

/* --- Contact ----------------------------------------------------------- */
.pagehero.contact-hero h1{font-size:44px;line-height:57.2px}    /* live 44/57.2 */
.pagehero .lede.narrow3{font-size:12px;line-height:21px;letter-spacing:1px;font-weight:300;
  max-width:540px}                                              /* live 12/21, 540 wide */
.contact-hero .btn{font-size:12px;line-height:19.2px;letter-spacing:1.92px;padding:15px 30px}
                                                                /* live buttons 288x49 / 209x49 */
.direct-band .lead,.direct-band p{font-size:15px;line-height:26.25px;letter-spacing:1px}
/* MEASURED on live /contact-liz/: the source file is 1920x1445, but live renders
   it as a 960x510 BAND — object-fit:cover with object-position 50% 64%, so the
   crop sits low and keeps the family in frame. Without the crop the natural
   aspect gives 960x723, i.e. 213px too tall, which is what Dan spotted.
   aspect-ratio (not a fixed height) so the band scales correctly on mobile. */
.fullphoto img{width:100%;max-width:960px;margin:0 auto;
  aspect-ratio:960/510;height:auto;object-fit:cover;object-position:50% 64%}


/* --- intake pages ------------------------------------------------------- */
.typepick{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:22px}
/* MEASURED off live /client-intake/ with getComputedStyle:
     selected    bg rgb(150,102,92)  text #fff             border 1px rgb(150,102,92)
     unselected  bg #fff             text rgb(169,127,120) border 1px rgb(224,208,204)
     both        font-size 12px, letter-spacing 1.92px
   The selected chip previously used --accent-lt (#b98d86) and read washed-out.
   Live uses the DEEP accent, and the unselected chip has a visible warm border
   rather than a transparent one — that pair is the "shades of pink" Dan saw. */
.typebtn{font-family:var(--ui);font-size:12px;letter-spacing:1.92px;text-transform:uppercase;
  padding:15px 22px;background:#fff;color:var(--btn-txt);border:1px solid var(--btn-bd);
  cursor:pointer;border-radius:2px;min-height:48px;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.typebtn:hover{border-color:var(--btn-sel);color:var(--btn-sel)}
.typebtn.is-on,.typebtn.is-on:hover{background:var(--btn-sel);color:#fff;border-color:var(--btn-sel)}
/* MEASURED: the live form band sits on cream rgb(249,246,242), not white —
   that warm tint under the blush hero is what was missing. */
.formband{background:var(--cream);padding:44px 0 84px}
.formband > *{max-width:740px;margin-left:auto;margin-right:auto}
.formband .fgroup{max-width:740px;margin-left:auto;margin-right:auto;padding:0 24px}
.formlead{font-family:var(--ui);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.frow{margin:0 0 18px}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.formband label{display:block;font-size:15px;letter-spacing:1px;color:var(--copy);font-weight:300}
.formband .req{color:var(--accent)}
/* MEASURED: live fields are grey-filled with a dark hairline, not white with a
   warm rule. bg rgb(240,240,240), border rgb(54,54,54). */
.formband input,.formband select,.formband textarea{display:block;width:100%;margin-top:7px;
  padding:11px 12px;font-family:var(--body);font-size:16px;letter-spacing:1px;
  color:var(--heading);background:var(--field-bg);
  border:1px solid var(--field-bd);border-radius:2px}
.formband input:focus,.formband select:focus,.formband textarea:focus{
  outline:2px solid var(--accent-mid);outline-offset:1px;border-color:var(--btn-sel)}
.formband textarea{resize:vertical}
.formnote{margin-top:22px;font-size:14px;line-height:24px;letter-spacing:1px;color:var(--copy);
  font-weight:300}
@media (max-width:700px){ .frow.two{grid-template-columns:1fr} }

.fgroup{border:0;padding:0;margin:0 0 34px}
.fgroup legend{font-family:var(--ui);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent);padding:0 0 10px;margin-bottom:16px;width:100%;
  border-bottom:1px solid var(--rule)}

/* MEASURED on live /investmentinfo/ (.sec-label): Jost 12px/19.2px, weight
   400, letter-spacing 4px, rgb(153,97,89), uppercase, centred, 12px below. */
.scard-bd .sec-label{font-family:var(--ui);font-size:12px;line-height:19.2px;font-weight:400;
  letter-spacing:4px;text-transform:uppercase;color:var(--accent);text-align:center;
  margin:0 0 12px}
.scard-bd .forwho{font-family:var(--ui);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--copy);margin:0 0 12px}

.pickprompt{font-family:var(--ui);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);text-align:center;margin:26px 0 0}


/* --- review + thank-you steps ------------------------------------------- */
/* MEASURED off live /client-intake/ by revealing #i-review and #i-sent in the
   DOM and reading computed styles. Nothing was submitted to Liz.
     Review My Answers / Send to Liz : Jost 13px, ls 2.08px, uppercase, white
                                       on rgb(185,141,134), padding 15px 38px
     Go back and edit                : transparent, text rgb(169,127,120),
                                       border 1px rgb(224,208,204)
     "Here's what you're sending"    : Cormorant Garamond 26/32.5, weight 500
     summary box                     : white, 22px padding, 1px rgb(224,208,204),
                                       Jost 14/22.4, ls 1px
     "Thank you. That's on its way." : Cormorant Garamond 30/37.5, weight 500
     follow-up line                  : Georgia 12/21, ls 1px, rgb(107,102,96)   */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.ibtn{font-family:var(--ui);font-size:13px;letter-spacing:2.08px;text-transform:uppercase;
  padding:15px 38px;border-radius:0;cursor:pointer;line-height:normal;text-align:center;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.ibtn-solid{background:var(--accent-lt);color:#fff;border:0}
.ibtn-ghost{background:transparent;color:var(--btn-txt);border:1px solid var(--btn-bd)}
.ibtn-solid:hover{background:var(--btn-sel)}
.ibtn-ghost:hover{border-color:var(--btn-sel);color:var(--btn-sel)}

.reviewh2{font-family:var(--display);font-size:26px;line-height:32.5px;font-weight:500;
  letter-spacing:normal;color:var(--heading);margin:0 0 14px}
.senth2{font-family:var(--display);font-size:30px;line-height:37.5px;font-weight:500;
  letter-spacing:normal;color:var(--heading);margin:0 0 10px}
.sentp{font-family:var(--body);font-size:12px;line-height:21px;letter-spacing:1px;
  color:var(--copy);font-weight:300;margin:0}

#i-summary{background:#fff;border:1px solid var(--btn-bd);padding:22px;margin:0 0 18px;
  font-family:var(--ui);font-size:14px;line-height:22.4px;letter-spacing:1px;color:var(--heading)}
#i-summary .shead{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent);
  margin:18px 0 8px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
#i-summary .shead:first-child{margin-top:0}
#i-summary .srow{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:4px 18px;padding:6px 0}
#i-summary .sq{color:var(--copy)}
/* QA: a 3000-character unbroken string (a pasted URL, say) blew the document
   out to 31,309px wide because the answer cell had nothing to break on. */
#i-summary .sa{color:var(--heading);white-space:pre-wrap;
  overflow-wrap:anywhere;word-break:break-word;min-width:0}
#i-summary .empty{color:var(--copy);margin:0}
@media (max-width:600px){ #i-summary .srow{grid-template-columns:1fr;gap:0} }

/* MEASURED on live /investmentinfo/: the "Mini sessions are for families..."
   line is NOT part of the hero. The blush hero ends at 608; this line runs
   622-667 on cream, and the cards band starts at 666. Keeping it inside the
   hero made the hero 78px too tall and pushed every band below it down. */
.sessionnote{padding:14px 24px 0;text-align:center;background:transparent}
.sessionnote .lede.narrow2{margin:0 auto;max-width:640px;
  font-size:14px;line-height:22.4px;letter-spacing:1px;font-weight:400}

/* --- interior hero rhythm, measured -------------------------------------
   Live builds every interior hero the same way: eyebrow, h1, lede (and on
   Contact, the button row), with ~12px between them and NO trailing margin
   before the padding. The prototype was missing the eyebrows on About and
   Contact and carried a 34px trailing margin on the lede, which happened to
   add up to roughly the right height on About while putting every line in
   the wrong place.
     live sessions : eyebrow 387  h1 418  lede 488          hero 293
     live about    : eyebrow 387  h1 418  lede ...          hero 272
     live contact  : eyebrow 379  h1 408  lede 475  btns 522  hero 308  */
.pagehero .eyebrow{margin:0 0 12px}
.pagehero h1{margin:0 auto 12px}
.pagehero .lede{margin-bottom:0}
.pagehero .btns{margin-top:26px}
.pagehero > *:last-child{margin-bottom:0}

/* --- Portfolio and gallery heroes ---------------------------------------
   REVIEW FINDING (b16): these five pages had NO hero band and NO <h1> at
   all — the intro section was literally classed "noheading". Live gives
   every one of them a blush hero, exactly like the other interior pages:
     /portfolio/         hero 315-518  pt64 pb50  h1 379 (44px)  lede 446 w520
     /portfolio/seniors/ hero 353-598  pt64 pb50  h1 417 (44px)  lede 484
   On the gallery pages the hero starts at 353 rather than 315 because the
   "Back to portfolio" link sits above it.
   Besides the visual gap, a page with no h1 is a real SEO and screen-reader
   problem — and these are the pages Liz would most want found. */
.gallery-hero{padding:64px 24px 50px}
.gallery-hero h1{font-size:44px;line-height:57.2px;font-style:italic;margin:0 auto 10px;
  max-width:912px}
.gallery-hero .lede.narrow{font-size:12px;line-height:21px;letter-spacing:1px;
  color:var(--copy);font-weight:300;margin:0 auto;max-width:520px}
                       /* MEASURED 520 on both /portfolio/ and /portfolio/seniors/ —
                          at 560 the lede fell to 2 lines instead of live's 3 */
.portfolio-hero .lede.narrow{max-width:520px}   /* live measures 520 here */
@media (max-width:900px){ .gallery-hero{padding:54px 20px 44px} }

/* REVIEW FINDING (b16), measured on live /client-intake/:
     eyebrow "LIZ LABIANCA PHOTOGRAPHY"  12px  letter-spacing 2.64px  (had 3px)
     h1      "Let's plan your session."  40px / 50px                  (had 44/57.2)
   Live also has NO "Which kind of session?" prompt above the chips — it goes
   straight from the lede to the buttons. Removed to match. */
/* needs .pagehero to out-specify .pagehero.contact-hero h1 (0,3,1) */
.pagehero.intake-hero h1{font-size:40px;line-height:50px}
.pagehero.intake-hero .eyebrow{letter-spacing:2.64px}
.intake-hero .lede{margin-bottom:0}
.intake-hero .typepick{margin-top:22px}

/* --- Sessions corporate band, measured on live /investmentinfo/ ----------
   Full-bleed 960x340 photo, then centred text. NOT a split.
     photo   1675-2015 (960x340)
     eyebrow 2067  12px  ls 2.64  (52px below the photo)
     h2      2098  34/42.5  weight 500
     copy    2155  12/21  ls 1px  weight 300  width 672
     button  2219  13px  ls 2.08  250x51
     band    1675-2349, 72px below the button                              */
.corpband{background:#fff;padding:0 0 72px;text-align:center}
.corpband .corpphoto img{width:100%;max-width:960px;margin:0 auto;
  aspect-ratio:960/340;height:auto;object-fit:cover}
.corpband .corpbody{max-width:672px;margin:52px auto 0;padding:0 24px}
.corpband .eyebrow{font-size:12px;line-height:19.2px;letter-spacing:2.64px;
  color:var(--accent);margin:0 0 12px}
.corpband h2{font-family:var(--display);font-size:34px;line-height:42.5px;font-weight:500;
  letter-spacing:normal;color:var(--heading);margin:0 0 14px}
.corpband .copy{font-size:12px;line-height:21px;letter-spacing:1px;color:var(--copy);
  font-weight:300;margin:0 0 22px}
@media (max-width:700px){ .corpband .corpbody{margin-top:34px} }

/* live /portfolio/: the four category cards are their own band (518-872),
   not part of the hero. */
.catsband{padding:0 24px;background:#fff}
.catsband .chooser{padding:0}

/* live /investmentinfo/ closing note band: 1474-1676, pt 0, pb 72 */
/* padding-top rather than a child margin: with padding-top 0 the note's
   margin-top collapsed straight out of the band and cost 27px. */
.sessionclose{padding:27px 24px 72px;background:var(--cream);text-align:center}
/* MEASURED on live /investmentinfo/: this note is NOT small print. It is
   Georgia 16.5px / 28.875px, letter-spacing 1px, weight 300, centred, and
   760px wide — which is why it runs to 3 lines and the band is 202 tall.
   The prototype had it at 12px / 672px, so it read as a footnote and the
   band came out 67px short.
     band  1474-1676 (202)   note 1501-1588 (87 = 3 x 28.875)
     27 above the note, 16 below it, then 72 of band padding             */
.sessionclose .note{max-width:760px;margin:0 auto 16px;font-size:16.5px;
  line-height:28.875px;letter-spacing:1px;color:var(--copy);font-weight:300}

/* ============ REVIEW FINDING (b16): MOBILE HORIZONTAL OVERFLOW ============
   Every single page scrolled sideways at 390px — document scrollWidth 568 on
   a 390 viewport. Two causes, both in the masthead:
     - .logo img is width:550px. Its grid column is 1fr, and a 1fr track has
       min-width:auto, so it refuses to shrink below the image's 550px.
     - the two .badge chips are a hard width:120px each.
   550 + 120 + 120 + gaps = 568. That is the number, exactly.
   This matters more than any of the spacing work: the whole premise of the
   rebuild is "same look, better on a phone", and until now every page was
   worse than live on a phone.
   Fix: below 760px the masthead becomes a flex column — logo on its own full
   width row, badges centred beneath — and the logo image is allowed to scale. */
/* QA CORRECTION: this was 760px, and 760 is the wrong number. The desktop
   masthead needs roughly 1000px (550 logo + 120 + 120 + gaps = 842 minimum).
   At 768 — iPad portrait, one of the commonest widths there is — the desktop
   rules still applied and EVERY page overflowed to 842px. Tested at 320, 390,
   768, 1024 and 1440: only 768 failed, which is exactly the width most likely
   to be missed by testing phone-then-desktop and nothing between. */
@media (max-width:1040px){
  .masthead{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:12px;padding:0 16px}
  .masthead .badges-row{display:flex;flex:0 0 auto}
  .masthead .badges-row .badge{grid-column:auto;justify-self:auto;
    margin:0;position:static}
  .masthead .logo{order:-1;flex:1 0 100%;min-width:0;width:100%}
  .masthead .logo img{width:100%;max-width:550px;height:auto}
  .masthead .badge{flex:0 0 auto}
  .shell{padding:0 12px}
  .inner{max-width:100%}
  .nav{max-width:100%}
}

/* Tap targets. Live is no better here, but "better on mobile" was the point.
   Anything a thumb has to hit gets real height on small screens. */
@media (max-width:760px){
  .footer .meta a, .footer .social a{display:inline-block;padding:10px 4px;line-height:20px}
  .direct-band a{display:inline-block;padding:10px 4px;line-height:22px}
  .backlink{line-height:normal}
  .backlink a{display:inline-block;padding:12px 0;line-height:20px}
  .badge{height:34px}
}

/* MEASURED: live's CONTACT page footer omits the "Liz LaBianca Photography ·
   Frisco & Dallas-Fort Worth · email · phone" line that About and Sessions
   carry — the Contact page already shows all of that in the band above, so
   repeating it would be redundant. Live is being sensible, and copying that
   is what closes the last 28px.
     live contact footer 1373-1508 (135)  pt26 pb38
       social  1419   copyright 1450                                      */
.footer.f-short{padding:26px 24px 38px}
/* live contact footer: 26 pt, 20 gap, social row 19, 12 gap, copyright 19,
   38 pb = 135 total. The shared .social has 8px tap padding which makes the
   row 40 tall — fine everywhere else, wrong against this measurement. */
/* Desktop only. On a phone the bigger tap padding matters more than matching
   live's row height to the pixel — live is 19px there, which is too small to
   hit reliably, and "better on mobile" is the whole point. */
@media (min-width:761px){
  .footer.f-short .social{margin-top:20px;line-height:19.2px}
  .footer.f-short .social a{padding:0 4px;line-height:19.2px}
  .footer.f-short .copy{margin-top:12px}
}