/* JayWick Woodworks: responsive brand and photo gallery. */
#intro {
 background-image: linear-gradient(rgba(0,0,0,.46), rgba(0,0,0,.46)), url("../../images/intro-optimized.webp");
 background-size: cover;
 background-position: center, bottom center;
}
#intro h2 { font-size: clamp(2.5rem, 6vw, 5.3rem); line-height: 1.08; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
#intro .intro-tagline {
 color: #dfb27c;
 font-size: clamp(1.65rem, 3.4vw, 2.8rem);
 font-weight: 700;
 line-height: 1.25;
 margin: .7em 0 0;
 text-shadow: 0 2px 8px rgba(0,0,0,.85);
}
@media (max-width: 736px) {
 /* Keep the section navigation available on phones; the base theme hides it. */
 .main.style2 .button.anchored { display: inline-block; }
 #intro.main.style1 { padding: 4rem 1.5rem; min-height: calc(100svh - 2.5em); }
 #intro > .content { max-width: 100%; }
 #intro { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
 .gallery article { transition: none !important; }
}

/* Center the sawblade above the hero headline at every screen size. */
#intro .hero-logo {
 display: block;
 width: clamp(180px, 22vw, 300px);
 max-width: 100%;
 height: auto;
 margin: 0 auto clamp(1rem, 2.5vw, 2rem);
 filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35));
}
@media (max-width: 736px) {
 #intro.main.style1 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
 #one .box, #two .box, #contact .box { color: #252b2e; background: #fff; }
 #one .box p, #two .box p { font-weight: 600; line-height: 1.65; }
 #contact .box input, #contact .box textarea { font-weight: 600; }
 #contact .box input::placeholder, #contact .box textarea::placeholder {
  color: #50575b;
  opacity: 1;
 }
}
@media (max-height: 600px) and (min-width: 737px) {
 #intro .hero-logo { width: 170px; margin-bottom: 1rem; }
}

/* Footer branding: balanced in a row, centered when stacked. */
#footer { color: #d5ccc1; gap: 1.5rem; padding: 2rem clamp(1.25rem, 4vw, 4rem); }
#footer .footer-logo { display: block; flex: 0 0 auto; border: 0; line-height: 0; }
#footer .footer-logo img { display: block; width: clamp(100px, 10vw, 130px); max-width: 100%; height: auto; }
#footer .footer-logo:focus-visible { outline: 3px solid #dfb27c; outline-offset: 6px; border-radius: 50%; }
#footer .icons { flex-shrink: 0; }
#footer .menu { line-height: 1.6; }
@media (max-width: 1000px) {
 #footer > * { margin: 0; }
 #footer .footer-logo img { width: 110px; }
}
/* An edge-to-edge photo strip with white spacing between category collections. */
#work { padding: clamp(3.5rem, 7vw, 7rem) 0 3rem; scroll-margin-top: 3rem; }
#work > .content { width: 100%; max-width: none; }
#work .content > header { max-width: 48rem; margin: 0 auto clamp(2.5rem, 5vw, 5rem); padding: 0 1.5rem; }
.work-gallery-shell { position: relative; }
#work .work-gallery {
 --work-card-width: clamp(280px, 31vw, 600px);
 display: flex; flex-flow: row nowrap; gap: 5px; width: 100%; background: #fff;
 overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
 scrollbar-width: thin; scrollbar-color: #b6a18a #eee8e1;
}
.work-gallery article {
 position: relative; flex: 0 0 var(--work-card-width); min-width: 0;
 aspect-ratio: 1.44; overflow: hidden; background: #ece5dc;
 scroll-snap-align: start;
}
#work .work-photo { display: block; position: relative; height: 100%; border: 0; color: white; }
#work .work-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-photo-caption {
 display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .65rem;
 position: absolute; inset: 0; padding: 2rem; background: linear-gradient(transparent 40%, rgb(28 25 21 / 80%));
 opacity: 1; transition: opacity .25s ease; text-align: center; pointer-events: none;
}
.work-photo-caption strong { color: #fff; font-size: 1.2rem; line-height: 1.4; }
.work-photo-caption > span { font-size: .85rem; letter-spacing: .06em; }
.work-gallery article:hover .work-photo-caption,
.work-gallery article:focus-within .work-photo-caption { background-color: rgb(28 25 21 / 25%); }
.work-gallery-arrow {
 position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
 display: grid; place-items: center; width: 3rem; height: 3.75rem;
 padding: 0; border: 0; border-radius: 0; background: rgb(25 28 26 / 50%);
 color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer;
}
.work-gallery-prev { left: 0; }
.work-gallery-next { right: 0; }
.work-gallery-arrow:hover { background: rgb(25 28 26 / 80%); }
.work-gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.work-gallery-arrow[hidden] { display: none; }
#work .work-gallery-hint { color: #626669; font-size: .85rem; margin: 1.25rem 1.5rem .6rem; }
#work .content > p:last-child { margin: 0 1.5rem; }
#work a:focus-visible, #header a:focus-visible,
.work-gallery:focus-visible, .work-gallery-arrow:focus-visible,
#work-viewer button:focus-visible { outline: 3px solid #ad753d; outline-offset: -4px; }
#work-viewer {
 position: fixed; inset: 0; width: min(1200px, 94vw); max-width: 94vw;
 max-height: 94vh; max-height: 94dvh; margin: auto; padding: 3.5rem 1.25rem 1.25rem;
 border: 0; border-radius: 4px; background: #1f2328; color: #fff;
 box-shadow: 0 1rem 4rem rgb(0 0 0 / 35%);
}
#work-viewer::backdrop { background: rgb(15 17 19 / 88%); }
#work-viewer img { display: block; width: 100%; height: min(65vh, 800px); height: min(65dvh, 800px); object-fit: contain; }
#work-viewer button { background: transparent; color: #fff; border: 1px solid #777; border-radius: 3px; height: auto; min-height: 44px; padding: .5rem 1rem; line-height: 1.4; font-size: .9rem; }
#work-viewer button:hover { background: #393e43; }
#work-viewer .work-viewer-close { position: absolute; top: .65rem; right: .75rem; border: 0; font-size: 1.15rem; }
#work-viewer .work-viewer-caption { margin: .75rem 0; text-align: center; font-size: .95rem; line-height: 1.4; }
.work-viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.work-viewer-controls span { font-size: .85rem; color: #cbc7c1; }
html.work-viewer-open { overflow: hidden; }
@media (max-width: 736px) {
 #work .work-gallery { --work-card-width: 82vw; }
 .work-gallery article { aspect-ratio: 1.2; }
 .work-gallery-arrow { width: 2.5rem; height: 3rem; }
 #work-viewer { padding-inline: .75rem; }
 #work-viewer img { height: 58vh; height: 58dvh; }
}
@media (hover: none) {
 .work-photo-caption { opacity: 1; justify-content: flex-end; padding: 1.5rem 1rem; background: linear-gradient(transparent 45%, rgb(28 25 21 / 78%)); }
 .work-photo-caption > span { display: none; }
 .work-photo-caption strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .work-photo-caption { transition: none; }
}

#work-viewer #work-viewer-title { position: absolute; top: 1rem; left: 1.25rem; right: 4rem; font-size: 1.1rem; line-height: 1.4; margin: 0; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#work-viewer img[hidden], #work-viewer .work-viewer-category-link[hidden] { display: none; }
#work-viewer .work-viewer-category-link { display: block; color: #dfb27c; text-align: center; margin: 1rem 0; }
#work-viewer button:disabled { opacity: .4; cursor: default; }

/* Native playback controls preserve sound, seeking, and full-screen support. */
#work-viewer video { display: block; width: 100%; height: 65dvh; object-fit: contain; background: #000; }
#work-viewer video[hidden] { display: none; }

/* The contact page is the single destination; keep its existing menu link available on phones. */
@media (max-width: 736px) {
 #header nav { display: block; }
 #header nav ul li:not(:last-child) { display: none; }
 #header h1 a { font-size: clamp(.8em, 3.8vw, 1em); }
}

/* Portrait and story: a calm, responsive introduction to Jay. */
#two.about-section { --about-copy-width: min(35vw, 640px); align-items: center; justify-content: center; min-height: calc(100svh - 3em); padding: clamp(3rem, 6vw, 5rem) 6%; background: linear-gradient(rgb(250 247 241 / 87%), rgb(250 247 241 / 87%)), url('../../images/woodhorizontal3.jpg') center / cover; background-attachment: scroll; color: #39454b; }
#two .about-story { display: grid; grid-template-columns: var(--about-copy-width) minmax(0, 1fr); width: min(100%, calc(var(--about-copy-width) + var(--about-photo-width, 320px))); max-width: 900px; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 18px 70px #3e32231a; }
#two .about-copy { min-width: 0; padding: 3.5em 2.5em; }
#two .about-eyebrow { font-size: .75rem; line-height: 1.6; letter-spacing: .15em; font-weight: 700; text-transform: uppercase; color: #6c765e; margin: 0 0 1.5rem; }
#two h2 { margin: 0; }
#two .about-bio { font-size: 1em; line-height: 1.65; margin: 0; }
#one .about-accent, #two .about-accent { display: block; width: 100%; height: 3px; background: #91a578; margin-top: 2rem; }
#one .content > p { margin-bottom: 0; }
#two .about-photo-frame { position: relative; min-width: 0; }
#two .about-photo-window { position: absolute; inset: 8px; overflow: hidden; }
#two .about-portrait { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
@media (max-width: 736px) {
 #two.about-section { min-height: 0; padding: 2rem 18px 2.5rem; }
 #two .about-story { display: flex; flex-direction: column; width: 100%; }
 #two .about-photo-frame { order: -1; height: 280px; width: 227px; max-width: 100%; align-self: center; }

 #two .about-copy { padding: 1.5em 1.25em; text-align: center; }
 #two .about-eyebrow { font-size: .7rem; margin-bottom: 1.1rem; }
 #two h2 { margin: 0; }
 #two .about-bio { font-size: 1em; line-height: 1.65; }
 #one .about-accent, #two .about-accent { margin-top: 1.5rem; }
}

/* Restore the section-to-section arrow with contrast on the pale woodgrain. */
#two.about-section { padding-bottom: 7rem; }
#two .about-next { display: inline-block; border-color: #687563; background-image: url('images/about-arrow.svg'); }
#two .about-next:hover { background-color: rgb(255 255 255 / 60%); }
#two .about-next:focus-visible { outline: 3px solid #507b48; outline-offset: -5px; }
@media (max-width: 736px) {
 #two.about-section { padding-bottom: 6rem; }
}

/* Darker text links stay readable on the pale page backgrounds. */
a { color: #365b32; text-underline-offset: .18em; }
a:hover { color: #294726; }
#work > .content > p a { font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }

/* A consistent primary quote action and secondary browsing action. */
.site-actions { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: .8rem; margin-top: 1.5rem; }
.site-actions a.site-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; height: auto; padding: .8rem 1.5rem; border: 2px solid #365b32; border-radius: .5rem; background: #365b32; color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.4; text-decoration: none; white-space: normal; }
.site-actions a.site-cta:hover { background: #294726; border-color: #294726; color: #fff; }
.site-actions a.site-cta-secondary { background: #fff; color: #365b32; }
.site-actions a.site-cta-secondary:hover { background: #eef3ec; color: #294726; }
.site-actions a.site-cta:focus-visible { outline: 3px solid #39454b; outline-offset: 4px; }
@media (max-width: 600px) {
 .site-actions { box-sizing: border-box; flex-direction: column; align-items: stretch; width: calc(100% - 2rem); max-width: 26rem; margin-inline: auto; }
 .site-actions a.site-cta { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 52px; overflow-wrap: anywhere; }
}

/* Match the mobile reading weight across both introduction panels. */
@media (max-width: 736px) {
 #one .box p, #two .about-bio { color: #252b2e; font-weight: 600; line-height: 1.65; }
}

/* The copy determines the card height; the portrait fits within that height. */
#one.services-section { --services-copy-width: 35vw; align-items: center; justify-content: center; min-height: calc(100svh - 3em); padding: clamp(3rem, 6vw, 5rem) 6% 7rem; color: #39454b; }
#one .services-story { display: grid; grid-template-columns: minmax(0, 1fr) var(--services-copy-width); width: min(100%, calc(var(--services-copy-width) + var(--services-photo-width, 280px))); max-width: 1200px; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 18px 70px #3e32231a; }
#one .services-photo-frame { position: relative; min-width: 0; }
#one .services-photo-window { position: absolute; inset: 8px; overflow: hidden; }
#one .services-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(-1deg) scale(1.025); transform-origin: center; }
#one .services-copy { min-width: 0; padding: 3.5em 2.5em; }
#one .services-copy h2 { margin: 0; }
#one .services-copy p { margin: 0; }
#one .services-next { display: inline-block; border-color: #fff; background-image: url('images/dark-arrow.svg'); }
#one .services-next:hover { background-color: rgb(255 255 255 / 12.5%); }
#one .services-next:focus-visible { outline: 3px solid #507b48; outline-offset: -5px; }
@media (max-width: 1920px) { #one.services-section { --services-copy-width: 40vw; } }
@media (max-width: 1280px) { #one.services-section { --services-copy-width: 50vw; } }
@media (max-width: 1000px) { #one.services-section { --services-copy-width: 60vw; } }
@media (max-width: 736px) {
 #one.services-section { min-height: 0; padding: 2rem 18px 6rem; }
 #one .services-story { display: flex; flex-direction: column; width: 100%; }
 #one .services-photo-frame { height: 280px; width: min(100%, 245.5px); align-self: center; }
 #one .services-copy { padding: 1.5em 1.25em; text-align: center; }
 #one .services-copy p { font-weight: 600; line-height: 1.65; color: #252b2e; }
}

/* Restore the pre-portrait copy widths; the picture follows the text height. */
@media (max-width: 1920px) { #two.about-section { --about-copy-width: min(40vw, 640px); } }
@media (max-width: 1280px) { #two.about-section { --about-copy-width: min(50vw, 640px); } }
@media (max-width: 1000px) { #two.about-section { --about-copy-width: min(60vw, 640px); } }

/* Match the original one-card-width slide and edge-aligned resting positions. */
#one.services-section, #two.about-section { overflow-x: clip; padding: 3em 0; }
#one.services-section { justify-content: flex-end; }
#two.about-section { justify-content: flex-start; }
#one .services-story, #two .about-story { transform: translateX(0); transition: transform 1s ease; }
#one.inactive .services-story { transform: translateX(100%); }
#two.inactive .about-story { transform: translateX(-100%); }
@media (max-width: 736px), (prefers-reduced-motion: reduce) {
 #one .services-story, #two .about-story, #one.inactive .services-story, #two.inactive .about-story { transform: none; transition: none; }
}

@media (max-width: 736px) {
 #one.services-section, #two.about-section { justify-content: center; padding: 6em 15px; }
}