/* Approved November 12, 2026: header D, heading/body C, buttons E. */
:root {
  --heading:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --body:'Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --control:'Trebuchet MS','Segoe UI',system-ui,Arial,sans-serif;
  --button-text:17px;
  --button-height:44px;
  --button-padding-y:8px;
  --button-padding-x:12px;
  --button-radius:15px;
  --text-size:24px;
  --title-size:clamp(40px,4.4vw,66px);
}
body {font-family:var(--body);font-size:18px;line-height:1.65}
h1,h2,h3 {font-family:var(--heading);font-weight:700}
/* Keep the approved hero headline size while increasing the supporting text. */
.hero-copy>p {font-size:26px;line-height:1.55;max-width:47ch}
.card-copy p:not(.eyebrow) {font-size:16px;line-height:1.6}
.card-copy h2,.card-copy h3,.panel h2 {font-size:25px}
.small-note,figcaption {font-size:14px;line-height:1.6}
.card-copy .eyebrow,.eyebrow {font-size:11px}
.craft-facts strong {font-family:var(--heading);font-size:20px;font-weight:700}
.craft-facts span {font-size:16px}
footer {font-size:14px}
.gallery figcaption {font-size:14px}
.button,.button.secondary,.read-link,.quiet-links a,.hero-actions>a,
.breadcrumb,.next-links a,.site-header nav a,footer nav a,
.small-note a,.social-link,.business-contact,.close-gallery,button {
  font-family:var(--control);font-weight:700;font-size:16px;line-height:1.35;
}
.hero-actions>a {font-size:17px;padding:8px 12px;min-height:44px;white-space:nowrap}
.hero-actions {flex-wrap:nowrap;width:max-content;max-width:calc(100vw - 40px);gap:10px}
@media (min-width:741px) {
  .home-hero {
    min-height:max(560px,calc(100svh - var(--site-header-height,86px)));
    padding-top:24px;padding-bottom:24px;
  }
  .home-hero .hero-copy {align-self:center}
  .home-hero .family-portrait img,
  .home-hero .family-portrait .photo-floor-extension {
    -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 3%,black 23%);
    mask-image:linear-gradient(to right,transparent 0%,transparent 3%,black 23%);
  }
  .photo-floor-extension {position:absolute;pointer-events:none;background-repeat:no-repeat}
}
@media (max-width:740px) {
  .home-hero .family-portrait .photo-floor-extension {display:none!important}
}
.site-header {
  display:grid;grid-template-columns:minmax(260px,1fr) auto auto;
  gap:12px;align-items:center;padding:6px clamp(20px,3vw,50px);
  background:#e7d7bf;
}
.site-header .brand {display:block;min-width:0;width:90%;max-width:666px;line-height:0}
.site-header .brand .brand-art {display:block;width:105.290381%;height:auto;max-width:none;border:0;border-radius:0}
.site-header nav {display:flex;width:auto;gap:9px;margin:0;order:initial}
.site-header nav a {font-size:16px;padding:8px 11px}
.business-contact {font-size:16px;padding:8px 11px;min-height:44px}
@media (max-width:1050px) and (min-width:741px) {
  .site-header {grid-template-columns:minmax(0,1fr) auto;gap:10px 18px}
  .site-header .brand {grid-column:1/-1;width:min(666px,90%);justify-self:center}
  .site-header nav {justify-self:start}
  .business-contact {justify-self:end}
}
@media (max-width:740px) {
  :root {--button-text:16px;--button-padding-x:10px;--text-size:20px;--title-size:clamp(40px,11vw,56px)}
  body {font-size:17px}
  .hero-copy>p {font-size:22px;line-height:1.55}
  .hero-actions {width:100%;max-width:100%;gap:8px}
  .hero-actions>a {font-size:16px;padding:8px 10px;white-space:normal}
  .site-header {grid-template-columns:minmax(0,1fr);padding:6px 16px;gap:8px}
  .site-header .brand {width:90%;max-width:none;justify-self:center}
  .site-header nav {width:100%;justify-content:space-between;gap:6px;order:initial}
  .site-header nav a {font-size:15px;padding:8px 10px}
  .site-header .business-contact {width:100%;order:initial;font-size:16px;justify-self:stretch}
  .site-header .business-contact>span {max-width:none;white-space:normal}
  .card-copy p:not(.eyebrow) {font-size:16px}
  .gallery figcaption {font-size:13px}
}

/* Every page uses the welcome section's typography, with paragraphs about 8% smaller.
   No separate small/card/product text sizes; controls retain their approved profile. */
:is(body,p,li,figcaption,.small-note,.eyebrow,.photo-note,
    .card-copy p:not(.eyebrow),.card-copy .eyebrow,.hero-copy>p,
    .product-intro .small-note,.gallery figcaption,.craft-facts span,footer) {
  font-family:var(--body);
  font-size:var(--text-size);
  line-height:1.55;
}
:is(h1,h2,h3,.product-intro h1,.card-copy h2,.card-copy h3,.panel h2,.craft-facts strong) {
  font-family:var(--heading);
  font-size:var(--title-size);
  font-weight:700;
  line-height:1.15;
  overflow-wrap:break-word;
}

/* Permanent control standard: match the homepage welcome buttons everywhere.
   Keep image/gallery tiles outside this text-button rule. */
:is(.button,.button.secondary,.read-link,.quiet-links a,.hero-actions>a,
    .breadcrumb,.next-links a,.site-header nav a,footer nav a,
    .small-note a,.social-link,.business-contact,.site-header .business-contact,
    .close-gallery,button:not(.enlarge)) {
  box-sizing:border-box;
  font-family:var(--control);
  font-size:var(--button-text);
  font-weight:700;
  line-height:1.35;
  min-height:var(--button-height);
  padding:var(--button-padding-y) var(--button-padding-x);
  border-radius:var(--button-radius);
  border-style:solid;
  border-width:1px;
  gap:10px;
}

/* Second-section graphic placement; completed welcome section stays unchanged. */
.home-story .story-actions>a[href="/our-story"] {
  background:var(--brick);border-color:var(--brick);color:#fff3df;
}
.home-story .story-actions>a[href="/our-story"]:hover,
.home-story .story-actions>a[href="/our-story"]:focus-visible {
  background:#8c3e2d;border-color:#8c3e2d;color:#fff3df;
}
@media (min-width:741px) {
  :root {
    --section-height:max(560px,calc(100svh - var(--site-header-height,86px)));
    --section-padding:clamp(48px,6vh,80px);
  }
  main section:not(.home-hero) {
    min-height:var(--section-height);
    padding-top:var(--section-padding);
    padding-bottom:var(--section-padding);
    align-content:center;
  }
  main>section:not(.home-hero):not(.home-story):not(.product-intro):not(.process-feature):not(.details-band):not(.contact-grid):not(.social-grid):not(.social-directory) {
    display:flex;flex-direction:column;justify-content:center;
  }
  main>section:not(.home-hero)>.button,
  main>section:not(.home-hero)>.read-link,
  main>section:not(.home-hero)>.breadcrumb {align-self:flex-start;max-width:100%}
  main>section.thanks>.button {align-self:center}
  body:has(.home-hero) main>.home-story {
    width:min(1600px,calc(100% - clamp(20px,5vw,80px)*2));
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:4%;
  }
  .home-story .story-map {transform:translateX(clamp(-56px,-3vw,-24px))}
  .home-story>div {min-width:0}
  .home-story p {max-width:none}
  .home-story h2 {font-size:clamp(36px,3.45vw,66px)}
  .home-story h2 span {white-space:nowrap}
}
@media (min-width:1100px) {
  .home-story .story-map img {width:110%;max-width:680px;flex-shrink:0}
  .home-story>div {transform:translateX(clamp(12px,1.2vw,24px))}
}
@media (min-width:741px) and (max-width:1099px) {
  body:has(.home-hero) main>.home-story {grid-template-columns:1fr;gap:32px}
  .home-story .story-map {max-width:450px;justify-self:center}
  .home-story h2 {font-size:clamp(36px,4.4vw,48px)}
}

/* Cards need their own compact reading hierarchy, distinct from story panels. */
.craft-card .card-copy {display:flex;flex-direction:column;flex:1;gap:12px;padding:22px}
.craft-card .card-copy h2,.craft-card .card-copy h3 {
  font-size:28px;line-height:1.2;letter-spacing:-.3px;margin:0;
}
.craft-card .card-copy p:not(.eyebrow) {font-size:18px;line-height:1.55;margin:0}
.craft-card .card-copy .eyebrow {
  font-size:13px;line-height:1.45;letter-spacing:1px;margin:0;
}
.craft-card .card-copy .read-link {align-self:flex-start;margin-top:auto}
.home-featured .section-heading {align-items:center;margin-bottom:28px;gap:20px}
.home-featured .section-heading h2 {font-size:clamp(36px,3vw,48px);line-height:1.15;margin:0}
.home-featured .section-heading .eyebrow {
  font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;margin:0 0 10px;
}
.home-featured .craft-grid {margin:0;align-items:stretch;gap:24px}
.home-featured .card-photo {aspect-ratio:16/10}
@media (max-width:740px) {
  .home-featured .section-heading {align-items:flex-start;gap:18px}
  .craft-card .card-copy {padding:20px}
  .craft-card .card-copy h2,.craft-card .card-copy h3 {font-size:26px}
}

/* Compact shared footer; keep the approved button profile. */
body footer {padding:14px clamp(20px,5vw,80px);gap:14px 24px;font-size:16px;line-height:1.4}
body footer>a {font-size:17px;line-height:1.4}
body footer>a span {font-size:16px}
body footer p {font-size:16px;line-height:1.4;margin:0}
body footer nav {gap:8px}
@media(max-width:740px) {body footer {padding:18px 20px;gap:12px}body footer nav {gap:8px;max-width:100%}}

/* Footer contains only the centered navigation. */
body footer {justify-content:center;align-items:center}
body footer nav {justify-content:center}

/* Shared charcoal separation between story/intro headings and their copy. */
.home-hero .hero-copy>h1::after,
.home-story>div>h2::after,
.catalog-page .shop-intro-copy>h1::after,
.contact-page .contact-page-intro>h1::after,
.family-page .family-story-copy>h1::after,
.family-page .family-story-copy>h2::after {
  content:"";display:block;width:100%;height:4px;
  background:var(--charcoal);border-radius:999px;margin-top:22px;
}
.contact-page .contact-page-intro>h1::after {max-width:760px;margin-inline:auto}
.home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:38px}
@media(max-width:740px) {
  .home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:30px}
}

/* Homepage-only breathing room; product introduction remains unchanged. */
.home-hero .hero-copy>h1::after {font-family:var(--body);font-size:var(--text-size);max-width:47ch}
.home-hero .hero-copy>h1,.home-story>div>h2 {position:relative;top:-12px}
.home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:52px}
@media(max-width:740px) {
  .home-hero .hero-copy>h1,.home-story>div>h2 {top:-8px}
  .home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:40px}
}

/* Stronger heading separation, with only a small additional button gap. */
.home-hero .hero-copy>h1,.home-story>div>h2 {top:-36px}
.home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:60px}
@media(max-width:740px) {
  .home-hero .hero-copy>h1,.home-story>div>h2 {top:-26px}
  .home-hero .hero-copy .hero-actions,.home-story .story-actions {margin-top:46px}
}

/* Approved desktop footer: quiet text links, same type size and placement. */
@media(min-width:741px) {
 body footer nav[aria-label="Footer"]>a[href] {background:transparent;border-color:transparent;border-radius:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px;color:var(--charcoal)}
 body footer nav[aria-label="Footer"]>a[href]:hover {background:transparent;border-color:transparent;color:var(--brick)}
}
