/* Behaviors shared by the standalone pages. The reference design rules live
   alongside each page’s section templates. */
[hidden] { display: none !important; }
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid #fcfaf5; outline-offset: 5px; }
[data-menu-toggle] { z-index: 5; }
[data-menu-toggle] .design-e719jm > * { transition: transform 400ms cubic-bezier(1,0,0,1) 200ms; }
/* Align CLOSE to the bottom of the 15px mask, as in the original flex-end state. */
[data-menu-toggle][aria-expanded="true"] .design-e719jm > * { transform: translateY(calc(5px - 200%)) !important; }
.menu-backdrop { position: fixed; inset: 0; z-index: 2; user-select: none; }
.site-menu {
  position: fixed; inset: 0; width: 100%; height: 100vh; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: flex-start; gap: 16px; padding: 120px 24px 24px;
  mix-blend-mode: difference; overflow: visible; pointer-events: none;
}
.site-menu a {
  display: flex; gap: 4px; width: max-content; text-decoration: none;
  color: #fcfaf5; font: 500 12px/1.2 "Roboto Mono", monospace;
  letter-spacing: -.02em; text-transform: uppercase; pointer-events: auto;
  animation: menu-enter 400ms cubic-bezier(.44,0,0,1) both;
  animation-delay: var(--item-delay);
}
@keyframes menu-enter { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
.project-preview {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: 0; pointer-events: auto;
  animation: preview-enter 990ms cubic-bezier(.12,.23,0,1) both;
}
@keyframes preview-enter { from { opacity: .5; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } }
.design-JfMOq [data-part="filler-container"] { transition: height 400ms cubic-bezier(.44,0,0,1), top 400ms cubic-bezier(.44,0,0,1); }
.design-JfMOq:hover [data-part="filler-container"], .design-JfMOq:focus-visible [data-part="filler-container"] { height: 100% !important; top: 0 !important; }
[data-gallery] { scrollbar-width: none; }
[data-gallery]::-webkit-scrollbar { display: none; }
[data-gallery].is-dragging { cursor: grabbing !important; user-select: none !important; }
[data-gallery] img { -webkit-user-drag: none; }
/* An opaque poster covers native loading UI until the first decoded frame. */
.hero-video { position: relative; border-radius: 34px; }
.hero-video-poster {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; pointer-events: none;
  background-color: rgb(122, 187, 192);
}
.hero-video.has-video-frame .hero-video-poster { visibility: hidden; }
/* This hero is ambient media, not an interactive video player. */
[data-hero-video] { pointer-events: none; }
[data-hero-video]::-webkit-media-controls,
[data-hero-video]::-webkit-media-controls-enclosure,
[data-hero-video]::-webkit-media-controls-start-playback-button,
[data-hero-video]::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none;
}
.image-viewer {
  position: fixed; inset: 0; width: 100vw; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 60px;
  border: 0; background: rgba(0,0,0,.95); color: white; overflow: hidden;
}
.image-viewer[open] { display: flex; align-items: center; justify-content: center; animation: viewer-open 200ms ease-out; }
.image-viewer::backdrop { background: transparent; }
.viewer-picture { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.viewer-image { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: none; cursor:grab; pointer-events:auto; }
.viewer-picture:has(.viewer-caption:not([hidden])) .viewer-image { max-height:calc(100% - 40px); }
.viewer-caption { padding-top:20px; margin:0; text-align:center; font:500 14px Inter,sans-serif; }
.image-viewer button {
  position:absolute; border: 0; border-radius:0; background: rgba(255,255,255,.12); color:white;
  padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:opacity 200ms;
}
.image-viewer button:hover { opacity:.7; }
.viewer-close { width:40px; height:40px; top:20px; right:20px; }
.viewer-previous, .viewer-next { width:50px; height:50px; top:50%; transform:translateY(-50%); }
.viewer-previous { left:20px; } .viewer-next { right:20px; }
.viewer-previous svg { transform:translateX(-1px); } .viewer-next svg { transform:translateX(1px); }
.viewer-count { position:absolute; top:20px; left:20px; font:500 14px/1 Inter,sans-serif; }
@keyframes viewer-open { from { opacity:0; } to { opacity:1; } }
.form-status { color: #fcfaf5; font: 14px/1.5 "Geist",sans-serif; margin: 0; }
.form-status:empty { display: none; }
[data-contact-form] [type="submit"] [data-part="filler"] { transition: height 400ms cubic-bezier(.44,0,0,1); }
[data-contact-form] [type="submit"]:is(:hover, :focus-visible) [data-part="filler"] { height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .site-menu a, .project-preview, .image-viewer[open] { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; }
}

@view-transition { navigation: auto; }
/* Reference browser capture: 1190ms spring exit, 400ms eased entry. */
::view-transition-old(root) { animation: page-exit 1190ms linear(0 0%, 0.01699 0.840336%, 0.058135 1.680672%, 0.11264 2.521008%, 0.173539 3.361345%, 0.236404 4.201681%, 0.29849 5.042017%, 0.358156 5.882353%, 0.414482 6.722689%, 0.467015 7.563025%, 0.515599 8.403361%, 0.560264 9.243697%, 0.601151 10.084034%, 0.638463 10.92437%, 0.672437 11.764706%, 0.703319 12.605042%, 0.731358 13.445378%, 0.756793 14.285714%, 0.77985 15.12605%, 0.800742 15.966387%, 0.819665 16.806723%, 0.8368 17.647059%, 0.852313 18.487395%, 0.866355 19.327731%, 0.879065 20.168067%, 0.890568 21.008403%, 0.900979 21.848739%, 0.910399 22.689076%, 0.918924 23.529412%, 0.926639 24.369748%, 0.933619 25.210084%, 0.939936 26.05042%, 0.945651 26.890756%, 0.950823 27.731092%, 0.955503 28.571429%, 0.959737 29.411765%, 0.963569 30.252101%, 0.967035 31.092437%, 0.970172 31.932773%, 0.973011 32.773109%, 0.975579 33.613445%, 0.977903 34.453782%, 0.980006 35.294118%, 0.981909 36.134454%, 0.98363 36.97479%, 0.985188 37.815126%, 0.986598 38.655462%, 0.987873 39.495798%, 0.989027 40.336134%, 0.990071 41.176471%, 0.991016 42.016807%, 0.991871 42.857143%, 0.992645 43.697479%, 0.993345 44.537815%, 0.993978 45.378151%, 0.994551 46.218487%, 0.99507 47.058824%, 0.995539 47.89916%, 0.995963 48.739496%, 0.996347 49.579832%, 0.996695 50.420168%, 0.99701 51.260504%, 0.997294 52.10084%, 0.997552 52.941176%, 0.997785 53.781513%, 0.997995 54.621849%, 0.998186 55.462185%, 0.998359 56.302521%, 0.998515 57.142857%, 0.998656 57.983193%, 0.998784 58.823529%, 0.9989 59.663866%, 0.999005 60.504202%, 0.999099 61.344538%, 0.999185 62.184874%, 0.999263 63.02521%, 0.999333 63.865546%, 0.999396 64.705882%, 0.999454 65.546218%, 0.999506 66.386555%, 0.999553 67.226891%, 0.999595 68.067227%, 0.999634 68.907563%, 0.999669 69.747899%, 0.9997 70.588235%, 0.999729 71.428571%, 0.999755 72.268908%, 0.999778 73.109244%, 0.999799 73.94958%, 0.999818 74.789916%, 0.999835 75.630252%, 0.999851 76.470588%, 0.999865 77.310924%, 0.999878 78.151261%, 0.99989 78.991597%, 0.9999 79.831933%, 0.99991 80.672269%, 0.999918 81.512605%, 0.999926 82.352941%, 0.999933 83.193277%, 0.999939 84.033613%, 0.999945 84.87395%, 0.99995 85.714286%, 0.999955 86.554622%, 0.999959 87.394958%, 0.999963 88.235294%, 0.999967 89.07563%, 0.99997 89.915966%, 0.999973 90.756303%, 0.999975 91.596639%, 0.999978 92.436975%, 0.99998 93.277311%, 0.999982 94.117647%, 0.999984 94.957983%, 0.999985 95.798319%, 0.999986 96.638655%, 0.999988 97.478992%, 0.999989 98.319328%, 0.99999 99.159664%, 1 100%) both; }
::view-transition-new(root) { animation: page-enter 400ms cubic-bezier(.27,0,.51,1) both; }
@keyframes page-enter { from { transform: translateY(100vh); } to { transform: translateY(0); } }
@keyframes page-exit { to { transform: translateY(-100vh); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

.site-menu.is-closing a { animation-name: menu-exit; }
@keyframes menu-exit { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100px); } }

/* Original report downloads and accompanying project test footage. */
.project-report-link { display:inline-block; margin-top:16px; color:inherit; text-underline-offset:4px; }
.project-report-link:hover { opacity:.7; }
.project-video-strip { display:flex; gap:24px; width:100%; overflow-x:auto; padding:24px 0; }
.project-video-item { flex:1 0 240px; margin:0; min-width:0; }
.project-video-item .hero-video { border-radius:0; aspect-ratio:9/16; background:#000; overflow:hidden; }
.project-video-item video { display:block; width:100%; height:100%; object-fit:contain; }
.project-video-item .hero-video-poster { object-fit:contain; background:#000; }
.project-video-item figcaption { padding-top:12px; color:inherit; font:12px/1.5 monospace; text-transform:uppercase; }

/* Keep the complete subject visible in the owner-selected hero photographs. */
.project-hero-contained {
  height:min(62svh,680px) !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
}
.project-hero-contained img { object-fit:contain !important; object-position:center !important; }

/* Safari's MP4 image format is an ambient animation, not a media player. */
.ambient-picture { display:contents; }
.hero-video.uses-motion-image video { visibility:hidden; }
.hero-video.uses-motion-image .hero-video-poster { visibility:visible; }

/* Home previews and project heroes need different framing from full-bleed photos. */
body[data-page="index"] a[href="/collection/esp32-car"] img {
  object-fit:contain !important;
}
body[data-page="index"] a[href="/collection/steel-rocking-chair"] img {
  object-fit:contain !important;
}
.project-hero-product {
  height:min(64svh,680px) !important;
  min-height:0 !important;
  aspect-ratio:auto !important;
}
.project-hero-product img { object-fit:contain !important; }
.project-hero-board {
  height:auto !important;
  min-height:0 !important;
  max-height:78svh;
  aspect-ratio:var(--hero-ratio) !important;
}
.project-hero-board img { object-fit:contain !important; }

.gallery-instruction {
  margin:0; color:#fcfaf5; opacity:.72;
  font:500 10px/1.6 'Roboto Mono',monospace;
  letter-spacing:.02em; text-transform:uppercase;
}
.gallery-board-frame { height:clamp(280px,35vw,480px) !important; }
.gallery-board-frame .gallery-fits [data-hide-scrollbar] > div { justify-content:center; }
body[data-page="index"] a:is([href="/collection/kakuma-jewellery"],[href="/collection/other-projects"]) > .project-preview {
  object-fit:contain;
}

/* Keep the stock car complete; lower the chair artwork without moving its hover hit area. */
body[data-page="index"] a[href="/collection/stock-form-car"] img {
  object-fit:contain !important;
}
body[data-page="index"] a[href="/collection/steel-rocking-chair"] > .project-preview {
  object-position:50% calc(50% + 5vh);
}

.about-cv-link { color:#fcfaf5; font:500 14px/1.5 'Roboto Mono',monospace; padding:8px 0; }

/* Two-row document galleries keep long reports compact without cropping slides. */
.cooped-report-gallery--2-row { height:clamp(456px,44vw,608px) !important; }
.cooped-report-gallery--1-row { height:clamp(300px,30vw,420px) !important; }
body[data-page="collection-cooped-up"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-cooped-up"] .cooped-report-gallery { flex:none !important; }

/* Allow the full manufacturing label and revised Desk Tidy copy to fit. */
body[data-page="collection-desk-tidy"] .design-1inaro4 [data-part="pill-text"] { width:max-content; max-width:100%; height:auto; min-height:36px; padding:8px 12px; box-sizing:border-box; }
body[data-page="collection-desk-tidy"] .design-1inaro4 [data-part="pill-text"] p { white-space:normal; text-align:center; }
body[data-page="collection-desk-tidy"] :is(.design-fqx5kb,.design-17mccsq) { height:auto !important; }
body[data-page="collection-desk-tidy"] :is(.design-1hlpcc5-container,.design-1viezda-container) { flex:none !important; }
body[data-page="collection-desk-tidy"] .design-1viezda-container { height:260px !important; }

/* Flat-Pack Sandal: research and concept rows, followed by a two-row final design gallery. */
body[data-page="collection-flatpack-sandal"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-flatpack-sandal"] :is(.design-1hlpcc5-container,.design-1viezda-container) { flex:none !important; height:300px !important; }
body[data-page="collection-flatpack-sandal"] .design-u0yzfm-container { flex:none !important; height:clamp(456px,42vw,568px) !important; }

/* Chair copy and the combined fabrication/finishing gallery adapt to each breakpoint. */
body[data-page="collection-steel-rocking-chair"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-steel-rocking-chair"] .design-1hlpcc5-container { flex:none !important; height:300px !important; }
body[data-page="collection-steel-rocking-chair"] .design-1viezda-container { flex:none !important; height:clamp(456px,42vw,568px) !important; }
body[data-page="collection-steel-rocking-chair"] .design-1inaro4 [data-part="pill-text"] { width:max-content; max-width:100%; height:auto; min-height:36px; padding:8px 12px; box-sizing:border-box; }

/* Jewellery narrative: keep galleries stable as the section text wraps. */
body[data-page="collection-kakuma-jewellery"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-kakuma-jewellery"] :is(.design-1hlpcc5-container,.design-1viezda-container,.design-u0yzfm-container) { flex:none !important; height:300px !important; }
body[data-page="collection-kakuma-jewellery"] .design-1inaro4 [data-part="pill-text"] { width:max-content; max-width:100%; height:auto; min-height:36px; padding:8px 12px; box-sizing:border-box; }

/* Stock Form Car: accommodate revised copy without compressing the photo galleries. */
body[data-page="collection-stock-form-car"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-stock-form-car"] :is(.design-1hlpcc5-container,.design-1viezda-container,.design-u0yzfm-container) { flex:none !important; height:300px !important; }
body[data-page="collection-stock-form-car"] .design-1inaro4 [data-part="pill-text"] { width:max-content; max-width:100%; height:auto; min-height:36px; padding:8px 12px; box-sizing:border-box; }
body[data-page="collection-stock-form-car"] .design-1hlpcc5-container { height:clamp(110px,calc((100vw - 32px) * .33126),300px) !important; }

body[data-page="collection-steel-rocking-chair"] .design-u0yzfm-container { flex:none !important; height:300px !important; }

/* Pine and oak narrative: preserve gallery height as longer copy wraps. */
body[data-page="collection-pineoak-desk-tidy"] :is(.design-fqx5kb,.design-17mccsq,.design-18wcjay) { height:auto !important; }
body[data-page="collection-pineoak-desk-tidy"] :is(.design-1hlpcc5-container,.design-1viezda-container,.design-u0yzfm-container) { flex:none !important; height:300px !important; }
body[data-page="collection-pineoak-desk-tidy"] .design-1inaro4 [data-part="pill-text"] { width:max-content; max-width:100%; height:auto; min-height:36px; padding:8px 12px; box-sizing:border-box; }