:root{--paper:#f6f3ec;--ink:#292c24;--muted:#64675e;--wood:#81543a;--line:#d8d6cc;--green:#30392d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid var(--wood);outline-offset:6px}.wrap{width:min(1180px,calc(100% - 96px));margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-weight:800;letter-spacing:.1em;font-size:21px;line-height:1.2}.brand span{display:block;font-size:10px;letter-spacing:.34em;margin-top:7px}nav{display:flex;gap:32px;font-size:14px}nav a{text-decoration:none}nav a[aria-current]{text-decoration:underline}.eyebrow{font-size:11px;font-weight:700;letter-spacing:.18em;margin:0 0 24px}.hero{padding-top:76px;padding-bottom:70px}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.05;letter-spacing:-.045em}h1{font-size:clamp(60px,8vw,110px);margin-bottom:36px}h1 em{color:var(--wood);font-weight:400}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:40px}.hero-bottom p{max-width:430px;color:var(--muted);margin:0;font-size:17px}.button{display:inline-flex;gap:42px;justify-content:space-between;align-items:center;background:var(--green);color:white;padding:17px 25px;text-decoration:none;font-size:14px;white-space:nowrap}.button:hover{background:var(--wood)}.projects{padding-top:50px;padding-bottom:90px;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}.section-heading h2{font-size:42px;margin:0}.section-heading .eyebrow{margin-bottom:14px}.section-heading>p{font-size:13px;color:var(--muted);margin:0}.editor-note{font-size:13px;color:var(--muted);margin-bottom:24px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.photo-placeholder,.project-photo{aspect-ratio:4/5;width:100%;object-fit:cover}.photo-placeholder{display:flex;flex-direction:column;justify-content:space-between;padding:25px;color:#f9f4e9}.photo-placeholder span{font-family:Georgia,serif;font-size:45px;opacity:.65}.photo-placeholder p{font-size:10px;letter-spacing:.17em;margin:0}.tone-one{background:#8a7259}.tone-two{background:#5c6859}.tone-three{background:#a17e61}.project-caption{padding-top:18px}.project-caption h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin-bottom:5px}.project-caption p{font-size:13px;color:var(--muted)}.contact-strip{background:var(--green);color:var(--paper);padding:65px 0}.contact-strip h2{font-size:clamp(45px,6vw,70px);margin-bottom:32px}.light{background:var(--paper);color:var(--ink)}.light:hover{background:#e1d7c7}footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:35px 0}footer p,footer>a:last-child{font-size:12px;color:var(--muted);margin:0}footer .brand{font-size:16px}.contact-page{padding-top:75px;padding-bottom:80px}.contact-page h1{font-size:clamp(54px,7vw,90px)}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin:55px 0}.contact-layout h2{font-size:34px;line-height:1.15}.contact-layout p{color:var(--muted)}.contact-details{margin-top:35px}.contact-details div{border-top:1px solid var(--line);padding:16px 0}.contact-details dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold}.contact-details dd{margin:6px 0 0;font-size:15px;color:var(--muted)}.inquiry-guide{background:var(--panel);padding:35px}.inquiry-guide ul{padding-left:20px;color:var(--muted)}.inquiry-guide li{margin-bottom:12px}.small{font-size:13px}.text-link{font-size:14px}.skip{position:absolute;left:20px;top:-100px;background:var(--paper);padding:12px;z-index:1}.skip:focus{top:10px}@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{padding:24px 0}.brand{font-size:17px}nav{gap:20px}.hero,.contact-page{padding-top:48px}.hero-bottom,.section-heading{display:block}.hero-bottom .button{margin-top:28px}.section-heading>p{margin-top:18px}.project-grid{grid-template-columns:1fr}.photo-placeholder,.project-photo{aspect-ratio:4/3}.projects{padding-bottom:45px}.section-heading h2{font-size:34px}.contact-layout{grid-template-columns:1fr;gap:30px;margin-top:35px}footer{flex-wrap:wrap}footer p{width:100%;order:3}.inquiry-guide{padding:25px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.about-layout{align-items:start;gap:60px}.about-photo{min-height:420px}.about-story h3{font-family:Georgia,'Times New Roman',serif;font-size:24px;font-weight:400;margin-bottom:10px}.about-story section{margin:28px 0}.about-story .editor-note{font-size:15px}@media(max-width:760px){.site-header{flex-wrap:wrap;gap:22px}.site-header nav{flex-wrap:wrap;gap:20px}.about-layout{gap:30px}.about-photo{min-height:280px}}

/* Subtle motion. Cross-page fades work on supported browsers when hosted. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out 180ms ease both; }
::view-transition-new(root) { animation: page-in 280ms ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes entrance { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
nav a { position: relative; padding-block: 5px; transition: color 180ms ease; }
nav a[aria-current] { text-decoration: none; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
nav a[aria-current]::after, nav a:focus-visible::after { transform: scaleX(1); }
.button { transition: background-color 220ms ease, color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.button span { display: inline-block; transition: transform 220ms ease; }
.button:active { transform: translateY(1px) scale(.98); box-shadow: none; }
.brand, .text-link { transition: color 180ms ease; }
.project .photo-placeholder, .project .project-photo { transition: transform 350ms ease, box-shadow 350ms ease; }
@media (hover: hover) and (pointer: fine) {
  nav a:hover, .brand:hover, .text-link:hover { color: var(--wood); }
  nav a:hover::after { transform: scaleX(1); }
  .button:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgb(41 44 36 / 12%); }
  .button:hover span { transform: translate(3px, -3px); }
  .button:active { transform: translateY(1px) scale(.98); }
  .project:hover .photo-placeholder, .project:hover .project-photo { transform: translateY(-4px); box-shadow: 0 12px 22px rgb(41 44 36 / 12%); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero > .eyebrow, .contact-page > .eyebrow { animation: entrance 450ms ease both; }
  .hero > h1, .contact-page > h1 { animation: entrance 550ms ease 60ms both; }
  .hero-bottom, .contact-layout { animation: entrance 600ms ease 120ms both; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* Original company logo, shown without cropping or stretching. */
.brand { display: inline-flex; flex-shrink: 0; align-items: center; }
.brand-logo { display: block; width: 150px; height: auto; mix-blend-mode: multiply; }
.site-header { gap: 24px; padding-block: 20px; }
footer .brand-logo { width: 110px; }
@media (max-width: 760px) {
  .brand-logo { width: 112px; }
  footer .brand-logo { width: 90px; }
  .site-header { gap: 18px; }
  .site-header nav { gap: 16px; font-size: 13px; }
}

/* Theme colors stay warm in both modes. */
:root { color-scheme: light; --panel: #ebe8df; --accent: #81543a; --strip: #30392d; --strip-ink: #f6f3ec; --button: #5f7156; --button-hover: #81543a; --lightbox-bg: rgb(17 19 15 / 94%); --lightbox-ink: #f0ece2; --lightbox-control: rgb(240 236 226 / 14%); }
:root[data-theme="dark"] { color-scheme: dark; --paper: #20231e; --ink: #f0ece2; --muted: #babeb2; --wood: #dab18b; --line: #454c40; --green: #30392d; --panel: #2b3028; --accent: #dab18b; --strip: #151a14; --strip-ink: #f0ece2; --button: #5f7156; --button-hover: #81543a; --lightbox-bg: rgb(17 19 15 / 94%); --lightbox-ink: #f0ece2; --lightbox-control: rgb(240 236 226 / 14%); }
/* Device preference also works if JavaScript is unavailable. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { color-scheme: dark; --paper: #20231e; --ink: #f0ece2; --muted: #babeb2; --wood: #dab18b; --line: #454c40; --green: #30392d; --panel: #2b3028; --accent: #dab18b; --strip: #151a14; --strip-ink: #f0ece2; --button: #5f7156; --button-hover: #81543a; --lightbox-bg: rgb(17 19 15 / 94%); --lightbox-ink: #f0ece2; --lightbox-control: rgb(240 236 226 / 14%); }
  :root:not([data-theme]) .brand-logo { filter: invert(1); mix-blend-mode: screen; }
}
.site-header nav { margin-left: auto; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease; }
.theme-toggle[hidden] { display: none; }
.theme-icon { font-size: 19px; line-height: 1; }
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:active { transform: scale(.96); }
.theme-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
:root[data-theme="dark"] .brand-logo { filter: invert(1); mix-blend-mode: screen; }
.contact-strip { background: var(--strip); color: var(--strip-ink); }
:root[data-theme="dark"] .light { background: #f0ece2; color: #20231e; }
:root[data-theme="dark"] .light:hover { background: #dacdb8; }
@media (max-width: 760px) {
  .site-header { column-gap: 12px; }
  .theme-toggle { padding-inline: 10px; }
  .theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* Native disclosure controls work with mouse, touch, keyboard, and without JS. */
.faq-intro { max-width: 560px; color: var(--muted); font-size: 17px; }
.faq-list { max-width: 850px; margin-top: 48px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: Georgia, 'Times New Roman', serif; font-size: 24px; line-height: 1.35; transition: color 180ms ease; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; flex-shrink: 0; font-family: Arial, sans-serif; font-size: 24px; font-weight: 400; color: var(--accent); }
.faq-item[open] summary::after { content: '−'; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 2px; }
.faq-answer { max-width: 700px; padding: 0 36px 24px 0; color: var(--muted); }
.faq-answer p { margin: 0; }
.faq-answer a { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { .faq-item[open] .faq-answer { animation: entrance 220ms ease both; } }
@media (max-width: 760px) { .site-header nav { flex: 1 1 100%; order: 3; margin-left: 0; justify-content: space-between; gap: 10px; } .theme-toggle { margin-left: auto; } .faq-item summary { font-size: 21px; padding-block: 22px; } .faq-list { margin-top: 32px; } }

/* About photo is a wide shot, so it spans the layout uncropped with the story beneath. */
.about-layout .about-portrait { grid-column: 1 / -1; aspect-ratio: 1921 / 1166; height: auto; }
.about-layout .about-story { grid-column: 1 / -1; max-width: 700px; }

/* Project cards link to detail pages; detail pages lead with a wide photo, then story, facts, and gallery. */
.project-link { display: block; color: inherit; text-decoration: none; }
.project-caption .text-link { display: inline-block; text-decoration: underline; transition: color 180ms ease; }
.project-back { display: inline-block; margin-bottom: 40px; }
.project-lead { aspect-ratio: 16 / 9; }
.project-layout { align-items: start; gap: 60px; }
.project-layout .contact-details { margin-top: 0; }
.project-layout .contact-details div:first-child { border-top: 0; padding-top: 0; }
.project-gallery { margin-bottom: 55px; }
@media (hover: hover) and (pointer: fine) { .project-link:hover .text-link { color: var(--wood); } }
@media (max-width: 760px) { .project-back { margin-bottom: 28px; } .project-layout { gap: 30px; } }

/* Real photos keep their cropped shape (height follows width, not the height attribute).
   Project pages with a portrait main photo: photo on the left, story and facts stacked on the right. */
.project-photo { display: block; height: auto; }
.project-page .project-portrait { aspect-ratio: 3 / 4; }
.project-body .inquiry-guide { margin-top: 40px; }

/* Home page "Inside the shop" teaser: intro text beside a clickable workshop photo. */
.shop-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; padding-top: 70px; padding-bottom: 90px; border-top: 1px solid var(--line); }
.shop-teaser h2 { font-size: 42px; margin-bottom: 20px; }
.shop-teaser-text > p:not(.eyebrow) { max-width: 430px; color: var(--muted); font-size: 17px; margin-bottom: 32px; }
.shop-teaser-photo { display: block; color: inherit; text-decoration: none; }
.shop-teaser .photo-placeholder, .shop-teaser .project-photo { aspect-ratio: 4 / 3; transition: transform 350ms ease, box-shadow 350ms ease; }
@media (hover: hover) and (pointer: fine) { .shop-teaser-photo:hover .photo-placeholder, .shop-teaser-photo:hover .project-photo { transform: translateY(-4px); box-shadow: 0 12px 22px rgb(41 44 36 / 12%); } }
@media (max-width: 760px) { .shop-teaser { grid-template-columns: 1fr; gap: 30px; padding-top: 45px; padding-bottom: 55px; } .shop-teaser h2 { font-size: 34px; } }

/* Footer links (Instagram plus one page link) sit together on the right. */
.footer-links { display: flex; gap: 24px; }
.footer-links a { font-size: 12px; color: var(--muted); transition: color 180ms ease; }
.contact-details dd a { color: inherit; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover, .contact-details dd a:hover { color: var(--wood); } }

/* Instagram icon in the nav: an inline SVG drawn in the current text color, so it follows the theme. */
nav { align-items: center; }
.nav-social { display: inline-flex; align-items: center; }
.nav-social svg { display: block; }

/* Readability: larger type site-wide. Raises body text and the small captions, labels, and details
   set in the sections above; headings are unchanged. */
body { font-size: 17px; }
nav { font-size: 16px; }
.eyebrow { font-size: 13px; }
.button { font-size: 16px; }
.hero-bottom p, .faq-intro, .shop-teaser-text > p:not(.eyebrow) { font-size: 19px; }
.section-heading > p, .editor-note, .project-caption p, .small { font-size: 16px; }
.about-story .editor-note { font-size: 17px; }
.text-link { font-size: 16px; }
.photo-placeholder p { font-size: 12px; }
.contact-details dt { font-size: 13px; }
.contact-details dd { font-size: 17px; }
.theme-toggle { font-size: 14px; }
footer p, footer > a:last-child, .footer-links a { font-size: 14px; }
@media (max-width: 760px) {
  .site-header nav { font-size: 15px; }
  .hero-bottom p, .faq-intro, .shop-teaser-text > p:not(.eyebrow) { font-size: 18px; }
}

/* Buttons: pill-shaped to match the theme toggle, with a little extra side padding for the curve. */
.button { border-radius: 999px; padding-inline: 30px; }

/* Button arrows: a larger straight arrow (these buttons all link within the site) that slides right on hover. */
.button { gap: 14px; }
.button span { font-size: 22px; line-height: 1; -webkit-text-stroke: 1px currentColor; }
@media (hover: hover) and (pointer: fine) { .button:hover span { transform: translateX(4px); } }

/* Main buttons: a lighter sage green that stands out on both the light and dark page backgrounds,
   turning wood brown on hover. The cream .light buttons in the green contact strip are unchanged. */
.button:not(.light) { background: var(--button); }
.button:not(.light):hover { background: var(--button-hover); }

/* Click-to-enlarge photos (lightbox.js): project and workshop photos open full-size in a modal dialog.
   The viewer is dark in both themes so photos look the same either way; its colors match in every theme block. */
.photo-zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: zoom-in; }
.photo-zoom:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.photo-zoom-icon { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--lightbox-bg); color: var(--lightbox-ink); opacity: .75; transition: opacity 180ms ease, transform 180ms ease; }
.photo-zoom-icon svg { display: block; }
:root:has(.lightbox[open]) { overflow: hidden; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 72px 88px 56px; border: 0; background: var(--lightbox-bg); color: var(--lightbox-ink); }
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.lightbox::backdrop { background: transparent; }
.lightbox-photo { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 170px); object-fit: contain; }
.lightbox-count { margin: 0; font-size: 14px; letter-spacing: .12em; opacity: .75; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0 0 4px; border: 0; border-radius: 50%; background: var(--lightbox-control); color: var(--lightbox-ink); font: 30px/1 Arial, sans-serif; cursor: pointer; transition: background-color 180ms ease; }
.lightbox button[hidden] { display: none; }
.lightbox button:focus-visible { outline: 3px solid var(--lightbox-ink); outline-offset: 3px; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lightbox-in 200ms ease both; }
  .lightbox[open] .lightbox-photo { animation: entrance 280ms ease both; }
}
@media (hover: hover) and (pointer: fine) {
  .photo-zoom:hover .photo-zoom-icon { opacity: 1; transform: scale(1.08); }
  .lightbox button:hover { background: var(--button-hover); }
}
/* Phones: the photo uses the full width and the arrows move below it, beside the counter. */
@media (max-width: 760px) {
  .lightbox { padding: 64px 12px 84px; }
  .lightbox-photo { max-height: calc(100dvh - 190px); }
  .lightbox-prev, .lightbox-next { top: auto; bottom: 20px; transform: none; }
  .lightbox-prev { left: calc(50% - 110px); }
  .lightbox-next { right: calc(50% - 110px); }
  .lightbox-count { position: absolute; bottom: 33px; }
}