/*
Theme Name: Muhcine_Bespoke
Theme URI: https://example.com/muhcine-bespoke
Author: Muhcine
Description: A minimal, image-first portfolio theme for photographers and studios. Fullscreen fade carousel home, filterable work archive with list and thumbnail views, and a split image/text project view.
Version: 2.3.1
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: muhcine-bespoke
Tags: portfolio, photography, minimal, custom-menu, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  --ink:    #2d2d2d;
  --mute:   #b4b4b4;
  --rule:   #ccc;
  --paper:  #fff;

  /* Edge padding. 1.5625vw == 20px at a 1280px viewport. */
  --pad:    1.5625vw;
  --pad-m:  5.33333vw;

  --ease:       cubic-bezier(.25, .1, .25, 1);
  --ease-expo:  cubic-bezier(.23, 1, .32, 1);
  --ease-quint: cubic-bezier(.19, 1, .22, 1);
  --ease-inout: cubic-bezier(.77, 0, .175, 1);

  --t-fast: 250ms;
  --t-med:  350ms;
  --t-slow: 900ms;

  /* Drop a licensed face in assets/fonts/ and name it here. */
  --font: "Folio Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
          Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
caption, tbody, tfoot, thead, tr, th, td, figure, figcaption, main, section,
article, aside, header, footer, nav, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  background: transparent;
}

*, *::before, *::after { box-sizing: border-box; }

html, html a {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { list-style: none; }

body {
  font-family: var(--font);
  font-size: 16px;
  color: var(--ink);
  background-color: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body a {
  color: var(--ink);
  text-decoration: none;
  transition: color 300ms var(--ease);
}
body a:hover { color: var(--mute); }

/* Visible focus for keyboard users, suppressed for pointer users. */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 8px; left: 8px;
  width: auto; height: auto; margin: 0;
  clip-path: none;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  position: relative;
  font-family: var(--font);
  font-style: normal;
  font-weight: 400;
  line-height: 1.2em;
  margin-bottom: 1.3em;
}

h1 { font-size: clamp(22px, 2.1875vw, 42px); margin-bottom: .7em; }
h2 { font-size: clamp(15px, 1.25vw,   24px); margin-bottom: .85em; }
h3 { font-size: clamp(15px, 1.25vw,   24px); margin-bottom: 1em; }
h4 { font-size: clamp(15px, 1.45vw,   26px); margin-bottom: 1.2em; }
h5 { font-size: clamp(11px, .9375vw,  16px); margin-bottom: 1.2em; }

h6 {
  font-size: clamp(9px, .703125vw, 13px);
  text-transform: uppercase;
  letter-spacing: .085em;
  margin-bottom: 1.2em;
}
h5 strong, h5 b { text-transform: uppercase; letter-spacing: .085em; font-weight: 400; }

p {
  font-family: var(--font);
  font-size: clamp(17px, 1.71875vw, 30px);
  line-height: 1.2em;
  margin-bottom: 1.1em;
}

h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child { margin-bottom: 0 !important; }

.rich-text a { text-decoration: underline; text-underline-offset: .18em; }
.rich-text em, .rich-text i { font-style: italic; }
.rich-text strong, .rich-text b { font-weight: 600; }

/* ==========================================================================
   4. Grid  —  16 columns at large, 12 at small
   ========================================================================== */

.grid {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  font-size: 0; /* collapses inline-block whitespace */
}

.grid [class*="col-"] {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}

/* col-n = 6.33333n - 1.33333  (16 cols, 1.33333% gutter) */
.col-1-16_lg  { width: 5%; }
.col-2-16_lg  { width: 11.3333%; }
.col-3-16_lg  { width: 17.6667%; }
.col-4-16_lg  { width: 24%; }
.col-5-16_lg  { width: 30.3333%; }
.col-6-16_lg  { width: 36.6666%; }
.col-7-16_lg  { width: 43%; }
.col-8-16_lg  { width: 49.3333%; }
.col-9-16_lg  { width: 55.6666%; }
.col-10-16_lg { width: 62%; }
.col-11-16_lg { width: 68.3333%; }
.col-12-16_lg { width: 74.6666%; }
.col-13-16_lg { width: 81%; }
.col-14-16_lg { width: 87.3333%; }
.col-15-16_lg { width: 93.6666%; }
.col-16-16_lg { width: 99.9999%; }

.gutter_lg { width: 1.33333%; }
.gutter-margin-right_lg { margin-right: 1.33333%; }
.gutter-margin-right_lg:last-child { margin-right: 0 !important; }

/* ==========================================================================
   5. Shell  —  header, mobile menu, content wrapper
   ========================================================================== */

.outer-content-wrap {
  position: relative;
  width: calc(100% - (var(--pad) * 2));
  margin: 0 auto;
  z-index: 1;
}

.content-wrapper {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .55s var(--ease-inout);
}
.content-wrapper.visible { opacity: 1; }

.page-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
/* The carousel inside is absolutely positioned at height:100%, so the wrap
   has to carry a real height of its own. */
.page-wrap.fullscreen { height: 100vh; }

.loading-overlay {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 5;
}
.loading-overlay.black { background-color: var(--ink); }

/* --- Header --- */

.header-wrap {
  position: fixed;
  width: 100%; height: auto;
  top: 0; left: 0;
  background-color: var(--paper);
  z-index: 500;
}
.header-wrap .outer-content-wrap { padding: 12px; }

.header-wrap .header-logo {
  position: absolute;
  display: block;
  width: auto;
  max-width: 30%;
  height: auto;
  /* Pinned left; the nav centres independently across the full width. */
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  overflow: visible;
  text-align: left;
  z-index: 2;
}
.header-wrap .header-logo img {
  width: auto;
  height: auto;
  max-height: 2.6em;
  max-width: 100%;
}
.header-wrap .header-logo .wordmark {
  display: block;
  font-size: clamp(16px, 1.5vw, 28px);
  line-height: 1;
  letter-spacing: .02em;
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}
.header-wrap .header-logo svg { width: 100%; height: auto; display: block; }
.header-wrap .header-logo svg path,
.header-wrap .header-logo svg polygon { fill: var(--ink); }

.header-wrap .menu {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  column-gap: .41667vw;
  z-index: 1;
}
.header-wrap .menu .menu-item {
  position: relative;
  z-index: 1;
}
.header-wrap .menu .menu-item h4 { margin-bottom: 0; }
.header-wrap .menu .menu-item a {
  display: block;
  padding: .45em .95em;
  color: var(--ink);
}

/* Without JS the pill never appears, so keep the colour states as the
   fallback indicator. */
.header-wrap .menu .menu-item.current-menu-item a,
.header-wrap .menu .menu-item:hover a { color: var(--mute); }
.header-wrap .menu.has-morph .menu-item.current-menu-item a,
.header-wrap .menu.has-morph .menu-item:hover a { color: var(--ink); }

/* --- Morphing background --- */

.menu-morph {
  position: absolute;
  top: 0;
  left: 0;
  right: 100%;
  height: 100%;
  border-radius: 2em;
  background-color: rgba(45, 45, 45, .07);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 460ms var(--ease-expo),
    right 460ms var(--ease-expo),
    opacity 260ms var(--ease);
}
.menu-morph.is-visible { opacity: 1; }

/* Stagger the two edges so the pill stretches across the gap, then settles.
   Travelling right: the right edge leaves first and the left edge follows. */
.menu-morph.to-right { transition-delay: 105ms, 0ms, 0ms; }
.menu-morph.to-left  { transition-delay: 0ms, 105ms, 0ms; }

/* First placement should not fly in from the edge. */
.menu-morph.no-anim { transition: opacity 260ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .menu-morph { transition: opacity 260ms var(--ease); }
  .menu-morph.to-right, .menu-morph.to-left { transition-delay: 0ms; }
}

/* Spacer matching the fixed header's height, set by JS. */
.dummy-header { position: relative; display: block; width: 100%; }

/* --- Mobile menu --- */

.header-wrap .mobile-menu-opener {
  position: absolute;
  width: 5.33333vw; height: 5.33333vw;
  min-width: 22px; min-height: 22px;
  top: 50%; right: 0;
  transform: translateY(-50%);
  display: none;
  z-index: 99;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.header-wrap .mobile-menu-opener .icon {
  position: absolute;
  inset: 0;
  /* Rotation lives here, so the box can stay put and the + turns about its
     own centre rather than swinging on the positioning transform. */
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  transition: transform 420ms var(--ease-expo);
}
.header-wrap .mobile-menu-opener .line {
  position: absolute;
  width: 100%; height: 1px;
  top: 50%; left: 0;
  background-color: var(--ink);
  transform-origin: 50% 50%;
}
.header-wrap .mobile-menu-opener .line:nth-child(1) { transform: translateY(-50%); }
.header-wrap .mobile-menu-opener .line:nth-child(2) { transform: translateY(-50%) rotate(90deg); }
.header-wrap .mobile-menu-opener.opened .icon { transform: rotate(45deg); }

.mobile-menu-wrap {
  position: fixed;
  width: 100%; height: auto;
  top: 0; left: 0;
  display: none;
  background-color: var(--paper);
  box-shadow: 0 5px 8px rgba(0,0,0,.15);
  transform: translateY(-100%);
  transition: transform 1200ms var(--ease-expo);
  z-index: 499;
}
.mobile-menu-wrap.opened { transform: translateY(0); }
.mobile-menu-wrap .menu {
  position: relative;
  display: block;
  width: 100%;
  text-align: center;
}
.mobile-menu-wrap .menu .menu-item {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--rule);
}
.mobile-menu-wrap .menu .menu-item:last-child { border-bottom: none !important; }
.mobile-menu-wrap .menu .menu-item h4 { margin-bottom: 0; }
.mobile-menu-wrap .menu .menu-item a {
  position: relative;
  display: block;
  width: 100%;
  padding: 2.93333vw 0;
  color: var(--mute);
}
.mobile-menu-wrap .menu .menu-item.current-menu-item a { color: var(--ink); }

/* ==========================================================================
   6. Carousel  (assets/js/carousel.js)
   ========================================================================== */

.carousel { position: relative; }
.carousel .carousel-track { position: relative; width: 100%; height: 100%; }

.carousel .carousel-slide {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
  pointer-events: none;
}
.carousel .carousel-slide.is-selected { opacity: 1; pointer-events: auto; }

.carousel .carousel-nav {
  position: absolute;
  top: 0; height: 100%;
  background: transparent;
  border: none; outline: none;
  padding: 0; margin: 0;
  appearance: none;
  z-index: 98;
}
.carousel .carousel-nav svg {
  position: absolute;
  width: 2.91667vw; height: 2.91667vw;
  min-width: 38px; min-height: 38px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.carousel .carousel-nav svg path { fill: var(--ink); }
.carousel .carousel-nav:hover svg { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .carousel .carousel-slide { transition-duration: 1ms; }
  .content-wrapper { transition-duration: 1ms; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   7. Template — Home
   ========================================================================== */

body.home .dummy-header.main { display: none !important; }
body.home .header-wrap { background-color: transparent !important; }

.page-wrap#home { overflow: hidden; }

.page-wrap#home .images-carousel {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 1;
  overflow: hidden;
}
.page-wrap#home .images-carousel .carousel-slide img {
  position: absolute;
  width: auto; height: auto;
  max-width: 60%;
  max-height: calc(100vh - 11rem);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.page-wrap#home .images-carousel .carousel-slide .loading-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
/* One full-bleed hit area advancing the carousel. */
.page-wrap#home .images-carousel .carousel-nav {
  width: 100%;
  left: 0;
  cursor: pointer;
  z-index: 200;
}
.page-wrap#home .images-carousel .carousel-nav.previous { display: none !important; }
.page-wrap#home .images-carousel .carousel-nav svg { display: none !important; }

.page-wrap#home .homepage-footer {
  position: absolute;
  width: 100%; height: auto;
  bottom: 0; left: 0;
  padding-bottom: var(--pad);
  z-index: 2;
}
.page-wrap#home .homepage-footer .outer-content-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.page-wrap#home .homepage-footer h5 { margin-bottom: 0; }

/* ==========================================================================
   8. Template — Work archive
   ========================================================================== */

body.post-type-archive-work .dummy-header.main { display: none !important; }

/* The two views stack; only the active one is in flow. */
.page-wrap#work-archive .list-view-wrap,
.page-wrap#work-archive .grid-view-wrap {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
}
.page-wrap#work-archive .grid-view-wrap { overflow: hidden; padding: 6.77083vw 0; }

.page-wrap#work-archive .list-view-wrap.visible,
.page-wrap#work-archive .grid-view-wrap.visible {
  position: relative;
  top: 0;
  height: auto;
  pointer-events: all;
  overflow: visible;
  z-index: 1;
}
.page-wrap#work-archive .list-view-wrap .outer-content-wrap,
.page-wrap#work-archive .grid-view-wrap .outer-content-wrap {
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.page-wrap#work-archive .list-view-wrap.visible .outer-content-wrap,
.page-wrap#work-archive .grid-view-wrap.visible .outer-content-wrap { opacity: 1; }

.page-wrap#work-archive .list-view-wrap .outer-content-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* --- List view --- */

.page-wrap#work-archive .list-view-wrap .text-column {
  position: relative;
  display: block;
  padding-top: 50vh;
  padding-bottom: 5.20833vw;
  overflow: hidden;
}
.page-wrap#work-archive .list-view-wrap .text-column .column-title {
  display: block;
  padding-bottom: .625vw;
}
.page-wrap#work-archive .list-view-wrap .text-column .column-title h5 { margin-bottom: 0; }

.page-wrap#work-archive .list-view-wrap .text-column .work-project {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding: .885417vw 0;
  color: var(--mute);
}
.page-wrap#work-archive .list-view-wrap .text-column .work-project h1,
.page-wrap#work-archive .list-view-wrap .text-column .work-project h6 { margin-bottom: 0 !important; }
.page-wrap#work-archive .list-view-wrap .text-column .work-project h6.client-name {
  padding-top: .55em;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 300ms var(--ease);
}
.page-wrap#work-archive .list-view-wrap .text-column .work-project:hover,
.page-wrap#work-archive .list-view-wrap .text-column .work-project.active { color: var(--ink); }
.page-wrap#work-archive .list-view-wrap .text-column .work-project:hover h6.client-name,
.page-wrap#work-archive .list-view-wrap .text-column .work-project.active h6.client-name { opacity: 1; }
.page-wrap#work-archive .list-view-wrap .text-column .work-project.filtered-out { display: none; }

.page-wrap#work-archive .list-view-wrap .image-column {
  position: sticky;
  top: 0;
  display: block;
  height: 100vh;
}
.page-wrap#work-archive .list-view-wrap .image-column img.work-thumbnail {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: auto !important;
  height: auto !important;
  max-width: 79.5% !important;
  max-height: 76% !important;
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.page-wrap#work-archive .list-view-wrap .image-column img.work-thumbnail.visible { opacity: 1; }

/* --- Grid (thumbs) view --- */

.page-wrap#work-archive .grid-view-wrap .work-grid {
  position: relative;
  /* Columns rather than grid rows: each column flows on its own, so a tall
     picture never drags its neighbour down and the two sides sit off each
     other the way the reference does. */
  column-count: 2;
  column-gap: 1.5625vw;
  margin: 0 auto;
}
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project {
  position: relative;
  display: block;
  width: 80%;
  margin: auto;
  margin-bottom: 4.16667vw;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  color: var(--ink) !important;
}

/* Uneven gaps down each column, so the two sides never line up as a table. */
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project:nth-child(3n+2) { margin-bottom: 8.33333vw; }
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project:nth-child(5n+4) { margin-bottom: 9.5vw; }
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project.filtered-out { display: none; }

.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail {
  position: relative;
  display: block;
  width: 100%; height: auto;
  transition: opacity var(--t-fast) var(--ease);
}
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail img.thumb { width: 100%; height: auto; }
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail .plus {
  position: absolute;
  width: 2.13542vw; height: 2.13542vw;
  min-width: 30px; min-height: 30px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 3;
}
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail:hover .plus { opacity: 1; }

.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .titles {
  position: relative;
  display: block;
  width: 100%;
  padding-top: .625vw;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
}
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .titles h3,
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .titles h6 { margin-bottom: 0; }
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .titles h6.client-name { margin-bottom: .5em; }
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project:hover .titles { opacity: 1; }
.page-wrap#work-archive .grid-view-wrap .work-grid.is-hovered a.work-project.unhovered .thumbnail { opacity: .4; }

/* --- Fixed bottom menu: categories + view switch --- */

.page-wrap#work-archive .work-menu-wrap {
  position: fixed;
  width: 100%; height: auto;
  bottom: 0; left: 0;
  padding-bottom: var(--pad);
  z-index: 99;
}
.page-wrap#work-archive .work-menu-wrap .category-menu {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  margin-right: 4%;
  cursor: pointer;
  color: var(--mute);
  opacity: .7;
  background: none; border: none; padding: 0;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item .dot {
  position: relative;
  display: block;
  width: .833333vw; height: .833333vw;
  min-width: 10px; min-height: 10px;
  border: 1px solid var(--mute);
  border-radius: 50%;
  margin-right: .625vw;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item h5 {
  font-size: clamp(10px, .78125vw, 14px);
  margin-bottom: 0;
}
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item:hover .dot { background-color: var(--mute); }
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item.active { opacity: 1; color: var(--ink); }
.page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item.active .dot {
  background-color: var(--ink);
  border-color: var(--ink);
}

.page-wrap#work-archive .work-menu-wrap .view-menu {
  position: absolute;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  bottom: 0; right: 0;
}
.page-wrap#work-archive .work-menu-wrap .view-menu .view-menu-item {
  position: relative;
  margin-left: 2.96875vw;
  cursor: pointer;
  color: var(--mute);
  background: none; border: none; padding: 0;
  transition: color var(--t-fast) var(--ease);
}
.page-wrap#work-archive .work-menu-wrap .view-menu .view-menu-item h4 { margin-bottom: 0; }
.page-wrap#work-archive .work-menu-wrap .view-menu .view-menu-item.active { color: var(--ink); }

.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener {
  position: relative;
  display: none;
  width: 100%; height: auto;
  padding: 2.93333vw var(--pad-m);
  background-color: var(--paper);
  box-shadow: 0 5px 8px rgba(0,0,0,.15);
  cursor: pointer;
  z-index: 2;
}
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener h4 { margin-bottom: 0; }
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener .plus-icon {
  position: absolute;
  width: 3.73333vw; height: 3.73333vw;
  top: 50%; right: var(--pad-m);
  transform: translateY(-50%);
  z-index: 99;
}
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener .plus-icon .line {
  position: absolute;
  width: 100%; height: 1px;
  top: 50%;
  background-color: var(--ink);
  transition: var(--t-fast) var(--ease);
}
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener .plus-icon .line:nth-child(1) { transform: translateY(-50%); }
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener .plus-icon .line:nth-child(2) { transform: translateY(-50%) rotate(90deg); }
.page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener.opened .plus-icon .line:nth-child(2) { transform: translateY(-50%) rotate(0deg); }

/* ==========================================================================
   9. Template — Single project
   ========================================================================== */

/* The post types are mx_work / mx_cgi / mx_commercial, so WordPress emits
   `single-mx_work` and never `single-work`. The old selector matched nothing,
   which left the fixed header sitting on top of the project view and over the
   close control. `project-view` is added from functions.php. */
body.project-view .header-wrap,
body.project-view .dummy-header.main,
body.single-mx_work .header-wrap,
body.single-mx_work .dummy-header.main,
body.single-mx_cgi .header-wrap,
body.single-mx_cgi .dummy-header.main,
body.single-mx_commercial .header-wrap,
body.single-mx_commercial .dummy-header.main { display: none !important; }

.page-wrap#work-post .mobile-post-nav,
.page-wrap#work-post .mobile-post-footer { display: none; }

.page-wrap#work-post .mobile-post-nav {
  position: absolute;
  width: 100%; height: auto;
  top: 0; left: 0;
  border-bottom: 1px solid var(--rule);
  padding: 2.93333vw 0;
  background-color: var(--paper);
  z-index: 5;
}
.page-wrap#work-post .mobile-post-nav .outer-content-wrap,
.page-wrap#work-post .mobile-post-footer .outer-content-wrap {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.page-wrap#work-post .mobile-post-nav h4,
.page-wrap#work-post .mobile-post-footer h4 { margin-bottom: 0; }
.page-wrap#work-post .mobile-post-nav .mobile-words-opener,
.page-wrap#work-post .mobile-post-nav .mobile-thumbs-opener { cursor: pointer; }

.page-wrap#work-post .mobile-post-footer {
  position: absolute;
  width: 100%; height: auto;
  bottom: 0; left: 0;
  padding: 4.8vw 0 var(--pad-m);
  background-color: var(--paper);
  transition: var(--t-fast) var(--ease);
  z-index: 20;
}
.page-wrap#work-post .mobile-post-footer .slide-counter { transition: opacity var(--t-fast) var(--ease); }
.page-wrap#work-post .mobile-post-footer.shaded { box-shadow: 0 -5px 8px rgba(0,0,0,.15); }
.page-wrap#work-post .mobile-post-footer.shaded .slide-counter { opacity: 0; }

/* --- Images panel --- */

.page-wrap#work-post .work-images-panel {
  position: fixed;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 1;
  transition: width var(--t-slow) var(--ease-expo);
}
.page-wrap#work-post .work-images-panel.shrunk { width: 57%; }

.page-wrap#work-post .work-images-panel .fixed-corner {
  position: absolute;
  width: auto; height: auto;
  /* Above the film, or the close control disappears behind the player. */
  z-index: 200;
}
.page-wrap#work-post .work-images-panel .fixed-corner h2,
.page-wrap#work-post .work-images-panel .fixed-corner h4 { margin-bottom: 0; }
.page-wrap#work-post .work-images-panel .fixed-corner.top-left     { top: 0; left: 0;    padding: var(--pad) 0 0 var(--pad); }
.page-wrap#work-post .work-images-panel .fixed-corner.top-right    { top: 0; right: 0;   padding: var(--pad) var(--pad) 0 0; }
.page-wrap#work-post .work-images-panel .fixed-corner.bottom-left  { bottom: 0; left: 0; padding: 0 0 var(--pad) var(--pad); }
.page-wrap#work-post .work-images-panel .fixed-corner.bottom-right { bottom: 0; right: 0;padding: 0 var(--pad) var(--pad) 0; }
.page-wrap#work-post .work-images-panel .fixed-corner.words-opener,
.page-wrap#work-post .work-images-panel .fixed-corner.thumbs-opener,
.page-wrap#work-post .work-images-panel .fixed-corner.close-button { cursor: pointer; }

.page-wrap#work-post .work-images-panel .fixed-corner .close-icon {
  position: relative;
  display: block;
  width: 2.08333vw; height: 2.08333vw;
  min-width: 28px; min-height: 28px;
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.page-wrap#work-post .work-images-panel .fixed-corner .close-icon .line {
  position: absolute;
  width: 50%; height: 1px;
  top: 50%; left: 50%;
  background-color: var(--ink);
}
.page-wrap#work-post .work-images-panel .fixed-corner .close-icon .line:nth-child(1) { transform: translate(-50%, -50%) rotate(-45deg); }
.page-wrap#work-post .work-images-panel .fixed-corner .close-icon .line:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }

.page-wrap#work-post .work-images-panel .images-carousel {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  z-index: 1;
}
.page-wrap#work-post .work-images-panel .images-carousel .carousel-slide img,
.page-wrap#work-post .work-images-panel .images-carousel .carousel-slide video {
  position: absolute;
  width: auto; height: auto;
  max-width: 70%;
  /* Measured off the viewport, not the panel, so a tall picture always sits
     inside the window with the corner chrome clear of it. */
  max-height: calc(100vh - 9.5rem);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: max-width var(--t-slow) var(--ease-expo),
              max-height var(--t-slow) var(--ease-expo);
}
.page-wrap#work-post .work-images-panel.shrunk .images-carousel .carousel-slide img,
.page-wrap#work-post .work-images-panel.shrunk .images-carousel .carousel-slide video {
  max-width: 55%;
  max-height: calc(100vh - 12rem);
}
.page-wrap#work-post .work-images-panel .images-carousel .carousel-slide .loading-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Half-width click zones, left = previous, right = next. */
.page-wrap#work-post .work-images-panel .images-carousel .carousel-nav { width: 50%; }
.page-wrap#work-post .work-images-panel .images-carousel .carousel-nav.previous { left: 0; }
.page-wrap#work-post .work-images-panel .images-carousel .carousel-nav.next { right: 0; }

/* On a film the paging zones would swallow every click meant for the player,
   so they shrink to the margins. These have to out-specify the id-scoped rule
   above, hence the full prefix. */
.page-wrap#work-post .work-images-panel .images-carousel.video-active .carousel-nav { width: 12%; }
.page-wrap#work-post .work-images-panel .images-carousel.video-active .carousel-nav.previous { left: 0; right: auto; }
.page-wrap#work-post .work-images-panel .images-carousel.video-active .carousel-nav.next { right: 0; left: auto; }

/* And the player sits above them, so nothing can intercept a press. */
.page-wrap#work-post .work-images-panel .images-carousel .carousel-slide.is-video { z-index: 120; }
.carousel-slide.is-video .media-embed,
.carousel-slide.is-video video.media-file { z-index: 121; }
.carousel-slide.is-video .media-embed iframe { pointer-events: auto; }

/* Numbered pager, columns of 15, zero-padded. */
.page-wrap#work-post .work-images-panel .images-carousel .carousel-pager {
  position: absolute;
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(15, auto);
  gap: .15625vw .78125vw;
  width: auto; height: auto;
  top: 50%; right: 0;
  transform: translateY(-50%);
  padding-right: var(--pad);
  counter-reset: a 0;
  z-index: 99;
}
.page-wrap#work-post .work-images-panel .images-carousel .carousel-pager .dot {
  cursor: pointer;
  text-align: center;
  color: var(--mute);
  background: none; border: none; padding: 0;
  transition: color var(--t-fast) var(--ease);
}
.page-wrap#work-post .work-images-panel .images-carousel .carousel-pager .dot::after {
  content: counter(a, decimal-leading-zero);
  counter-increment: a 1;
  font-size: clamp(12px, 1.25vw, 20px);
  line-height: 1.2em;
}
.page-wrap#work-post .work-images-panel .images-carousel .carousel-pager .dot.is-selected { color: var(--ink); }

/* --- Thumbnail overlay --- */

.page-wrap#work-post .work-images-panel .images-thumbs-overlay {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  display: none;
  background-color: var(--paper);
  z-index: 2;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay.opened { display: block; }
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-page-wrap {
  position: absolute;
  display: none;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background-color: var(--paper);
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-page-wrap.is-selected { display: block; }
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-page-wrap .inner-wrap {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%; height: 100%;
  top: 0; left: 0;
  padding: 0 7.65625vw;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb {
  position: relative;
  display: block;
  width: 23.7%;
  height: 0;
  padding-bottom: 15.9%; /* 23.7% * 0.67 aspect */
  background: 50% 50% / cover no-repeat;
  cursor: pointer;
  border: none;
  margin-right: 1.73%;
  margin-bottom: 1.73%;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb:nth-child(4n+4) { margin-right: 0; }
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb .count-overlay {
  position: absolute;
  width: 100%; height: 100%;
  top: 0; left: 0;
  background-color: rgba(255,255,255,.6);
  padding: 1.14583vw;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 1;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb .count-overlay h4 { margin-bottom: 0; }
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb:hover .count-overlay { opacity: 1; }

.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbnail-pager-wrap {
  position: absolute;
  width: auto; height: auto;
  top: 50%; right: 0;
  transform: translateY(-50%);
  padding-right: var(--pad);
  z-index: 99;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbnail-pager-wrap .page {
  cursor: pointer;
  text-align: center;
  padding: .15625vw 0;
  color: var(--mute);
  background: none; border: none;
  display: block;
  transition: color var(--t-fast) var(--ease);
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbnail-pager-wrap .page.is-selected { color: var(--ink); }

/* --- Words panel --- */

.page-wrap#work-post .work-words-panel {
  position: fixed;
  width: 0; height: 100%;
  top: 0; right: 0;
  border-left: 1px solid var(--rule);
  background-color: var(--paper);
  transition: width var(--t-slow) var(--ease-expo);
  overflow: hidden;
  z-index: 2;
}
.page-wrap#work-post .work-words-panel.opened { width: 43%; }
.page-wrap#work-post .work-words-panel .inner-wrap {
  position: absolute;
  width: 43vw; height: 100%;
  top: 0; left: 0;
  padding: var(--pad) 7.65625vw var(--pad) var(--pad);
  overflow-y: auto;
}
.page-wrap#work-post .work-words-panel .close-panel {
  position: absolute;
  display: block;
  width: 2.08333vw; height: 2.08333vw;
  min-width: 28px; min-height: 28px;
  top: var(--pad); right: var(--pad);
  background-color: var(--ink);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99;
}
.page-wrap#work-post .work-words-panel .close-panel .line {
  position: absolute;
  width: 50%; height: 1px;
  top: 50%; left: 50%;
  background-color: var(--paper);
}
.page-wrap#work-post .work-words-panel .close-panel .line:nth-child(1) { transform: translate(-50%, -50%) rotate(-45deg); }
.page-wrap#work-post .work-words-panel .close-panel .line:nth-child(2) { transform: translate(-50%, -50%) rotate(45deg); }

/* --- Dark variant --- */

.page-wrap#work-post.dark-bg { background-color: var(--ink); }
.page-wrap#work-post.dark-bg,
.page-wrap#work-post.dark-bg * { color: var(--paper); }
.page-wrap#work-post.dark-bg .mobile-post-nav * { color: var(--ink); }
.page-wrap#work-post.dark-bg .mobile-post-footer { background-color: var(--ink); }
.page-wrap#work-post.dark-bg .work-images-panel .fixed-corner .close-icon { border-color: var(--paper); }
.page-wrap#work-post.dark-bg .work-images-panel .fixed-corner .close-icon .line { background-color: var(--paper); }
.page-wrap#work-post.dark-bg .work-images-panel .images-carousel .carousel-nav svg path { fill: var(--paper); }
.page-wrap#work-post.dark-bg .work-images-panel .images-carousel .carousel-pager .dot { color: var(--mute); }
.page-wrap#work-post.dark-bg .work-images-panel .images-carousel .carousel-pager .dot.is-selected { color: var(--paper); }
.page-wrap#work-post.dark-bg .work-images-panel .images-thumbs-overlay,
.page-wrap#work-post.dark-bg .work-images-panel .images-thumbs-overlay .thumbs-page-wrap { background-color: var(--ink); }
.page-wrap#work-post.dark-bg .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb .count-overlay h4 { color: var(--ink); }
.page-wrap#work-post.dark-bg .work-words-panel { background-color: var(--ink); border-color: var(--paper); }
.page-wrap#work-post.dark-bg .work-words-panel .close-panel { background-color: var(--paper); }
.page-wrap#work-post.dark-bg .work-words-panel .close-panel .line { background-color: var(--ink); }

/* ==========================================================================
   10. Template — Information (accordion)
   ========================================================================== */

.page-wrap#information { padding: 2.34375vw 0 var(--pad); overflow: hidden; }

.page-wrap#information .information-section {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  width: 100%; height: auto;
  border-top: 1px solid var(--rule);
  padding: .9375vw 0 0;
  margin-bottom: .885417vw;
}
.page-wrap#information .information-section .plus-icon {
  position: relative;
  flex: 0 0 auto;
  width: 1.04167vw; height: 1.04167vw;
  min-width: 14px; min-height: 14px;
  z-index: 2;
}
.page-wrap#information .information-section .plus-icon .line {
  position: absolute;
  width: 100%; height: 1px;
  top: 50%;
  background-color: var(--ink);
  transition: var(--t-fast) var(--ease);
}
.page-wrap#information .information-section .plus-icon .line:nth-child(1) { transform: translateY(-50%); }
.page-wrap#information .information-section .plus-icon .line:nth-child(2) { transform: translateY(-50%) rotate(90deg); }
.page-wrap#information .information-section .plus-icon.opened .line:nth-child(2) { transform: translateY(-50%) rotate(0deg); }

.page-wrap#information .information-section .section-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 2.5vw 0 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease);
}
.page-wrap#information .information-section .section-head:hover { color: var(--mute); }
.page-wrap#information .information-section .section-head .section-title { margin-bottom: 0; }

.page-wrap#information .information-section .text-column {
  display: block;
  width: 100%;
  padding: 0;
  /* Animated open rather than switched on, so the row expands smoothly. */
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 620ms var(--ease-expo);
}
.page-wrap#information .information-section .text-column > .inner-wrap {
  overflow: hidden;
  min-height: 0;
  /* The column sits in the right half; the left stays empty. */
  width: 58%;
  margin-left: 42%;
  max-width: none;
}
.page-wrap#information .information-section .text-column.opened { grid-template-rows: 1fr; }
.page-wrap#information .information-section .text-column.opened > .inner-wrap {
  padding: 1.5vw 0 3.125vw;
}
.page-wrap#information .information-section .text-column.opened { display: block; }
.page-wrap#information .information-section .text-column .inner-wrap > * {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 420ms var(--ease-quint) 140ms,
              transform 520ms var(--ease-quint) 140ms;
}
.page-wrap#information .information-section .text-column.opened .inner-wrap > * {
  opacity: 1;
  transform: translateY(0);
}
.page-wrap#information .information-section .text-column img {
  width: 85%; height: auto;
  margin-top: 1.4em;
}

/* ==========================================================================
   10b. Template — Shop
   ========================================================================== */

.page-wrap#shop-archive { padding: 2.34375vw 0 6.25vw; }

.page-wrap#shop-archive .shop-filter {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1.04167vw;
  margin-bottom: 2.60417vw;
}
.page-wrap#shop-archive .shop-filter .category-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  width: auto;
  margin-right: 2.60417vw;
  cursor: pointer;
  color: var(--mute);
  opacity: .7;
  background: none; border: none; padding: 0;
  transition: color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.page-wrap#shop-archive .shop-filter .category-menu-item .dot {
  position: relative;
  display: block;
  width: .833333vw; height: .833333vw;
  min-width: 10px; min-height: 10px;
  border: 1px solid var(--mute);
  border-radius: 50%;
  margin-right: .625vw;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.page-wrap#shop-archive .shop-filter .category-menu-item h5 {
  font-size: clamp(10px, .78125vw, 14px);
  margin-bottom: 0;
}
.page-wrap#shop-archive .shop-filter .category-menu-item:hover .dot { background-color: var(--mute); }
.page-wrap#shop-archive .shop-filter .category-menu-item.active { opacity: 1; color: var(--ink); }
.page-wrap#shop-archive .shop-filter .category-menu-item.active .dot {
  background-color: var(--ink);
  border-color: var(--ink);
}

/* Regular grid — products need a predictable rhythm, unlike the work stagger. */
.page-wrap#shop-archive .shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1.5625vw;
  row-gap: 3.125vw;
}

.page-wrap#shop-archive .shop-item {
  position: relative;
  display: block;
  color: var(--ink) !important;
}
.page-wrap#shop-archive .shop-item.filtered-out { display: none; }

.page-wrap#shop-archive .shop-item .thumbnail {
  position: relative;
  display: block;
  width: 100%;
  /* Uniform tiles regardless of source crop. */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: #f2f0ed;
  transition: opacity var(--t-fast) var(--ease);
}
.page-wrap#shop-archive .shop-item .thumbnail img.thumb {
  width: 100%; height: 100%;
  object-fit: cover;
}
.page-wrap#shop-archive .shop-item .thumbnail .plus {
  position: absolute;
  width: 2.13542vw; height: 2.13542vw;
  min-width: 30px; min-height: 30px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 3;
}
.page-wrap#shop-archive .shop-item .thumbnail:hover .plus { opacity: 1; }
.page-wrap#shop-archive .shop-item .thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(45, 45, 45, .18);
  opacity: 0;
  transition: opacity var(--t-fast) var(--ease);
  z-index: 2;
}
.page-wrap#shop-archive .shop-item .thumbnail:hover::after { opacity: 1; }

.page-wrap#shop-archive .shop-item .sold-flag {
  position: absolute;
  top: .78125vw; left: .78125vw;
  background-color: var(--paper);
  padding: .3em .6em;
  z-index: 4;
}
.page-wrap#shop-archive .shop-item .sold-flag h6 { margin-bottom: 0; }
.page-wrap#shop-archive .shop-item.sold .thumbnail img.thumb { opacity: .55; }

/* Titles stay visible — a price is not a hover reward. */
.page-wrap#shop-archive .shop-item .titles {
  display: block;
  width: 100%;
  padding-top: .78125vw;
}
.page-wrap#shop-archive .shop-item .titles h3,
.page-wrap#shop-archive .shop-item .titles h6 { margin-bottom: 0; }
.page-wrap#shop-archive .shop-item .titles h3.item-title { margin-bottom: .35em; }
.page-wrap#shop-archive .shop-item .titles h6.item-price { color: var(--mute); }

/* --- Single item --- */

.page-wrap#shop-item {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.page-wrap#shop-item .shop-images {
  position: relative;
  width: 57%;
  min-height: 100vh;
}
.page-wrap#shop-item .shop-images .images-carousel {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
}
.page-wrap#shop-item .shop-images .carousel-slide img {
  position: absolute;
  width: auto; height: auto;
  max-width: 72%;
  max-height: 72%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.page-wrap#shop-item .shop-images .carousel-slide .loading-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.page-wrap#shop-item .shop-images .carousel-nav { width: 50%; }
.page-wrap#shop-item .shop-images .carousel-nav.previous { left: 0; }
.page-wrap#shop-item .shop-images .carousel-nav.next { right: 0; }

.page-wrap#shop-item .shop-images .carousel-pager {
  position: absolute;
  display: inline-grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(15, auto);
  gap: .15625vw .78125vw;
  width: auto;
  bottom: var(--pad);
  left: var(--pad);
  counter-reset: a 0;
  z-index: 99;
}
.page-wrap#shop-item .shop-images .carousel-pager .dot {
  cursor: pointer;
  text-align: center;
  color: var(--mute);
  background: none; border: none; padding: 0;
  transition: color var(--t-fast) var(--ease);
}
.page-wrap#shop-item .shop-images .carousel-pager .dot::after {
  content: counter(a, decimal-leading-zero);
  counter-increment: a 1;
  font-size: clamp(11px, .9375vw, 16px);
  line-height: 1.2em;
}
.page-wrap#shop-item .shop-images .carousel-pager .dot.is-selected { color: var(--ink); }

.page-wrap#shop-item .shop-details {
  position: relative;
  width: 43%;
  border-left: 1px solid var(--rule);
}
.page-wrap#shop-item .shop-details .inner-wrap {
  position: sticky;
  top: 0;
  padding: var(--pad) 7.65625vw var(--pad) var(--pad);
}
.page-wrap#shop-item .shop-details .back-link { display: block; margin-bottom: 2.60417vw; }
.page-wrap#shop-item .shop-details .back-link h6 { margin-bottom: 0; color: var(--mute); }
.page-wrap#shop-item .shop-details .back-link:hover h6 { color: var(--ink); }

.page-wrap#shop-item .shop-details h1.item-title { margin-bottom: .35em; }
.page-wrap#shop-item .shop-details h4.item-price { color: var(--mute); margin-bottom: 1.8em; }
.page-wrap#shop-item .shop-details .item-description { margin-bottom: 2em; }

.page-wrap#shop-item .shop-details .item-specs {
  border-top: 1px solid var(--rule);
  padding-top: 1.04167vw;
  margin-bottom: 2.60417vw;
}
.page-wrap#shop-item .shop-details .item-specs li { margin-bottom: .5em; }
.page-wrap#shop-item .shop-details .item-specs li:last-child { margin-bottom: 0; }
.page-wrap#shop-item .shop-details .item-specs h6 { margin-bottom: 0; color: var(--mute); }

.enquire-button {
  position: relative;
  display: inline-block;
  border: 1px solid var(--ink);
  border-radius: 2em;
  padding: .7em 2.2em;
  color: var(--ink) !important;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.enquire-button h4 { margin-bottom: 0; }
.enquire-button:hover {
  background-color: var(--ink);
  color: var(--paper) !important;
}
.enquire-button.is-sold {
  border-color: var(--rule);
  color: var(--mute) !important;
  cursor: default;
}
.enquire-button.is-sold:hover {
  background-color: transparent;
  color: var(--mute) !important;
}

/* --- Shop tile: hover frames the print in its interior mockup --- */

.page-wrap#shop-archive .shop-item .thumbnail .mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 420ms var(--ease);
  z-index: 3;
}
.page-wrap#shop-archive .shop-item.has-mockup .thumbnail:hover .mockup { opacity: 1; }

/* The dim wash is for the plus icon; a mockup replaces it outright. */
.page-wrap#shop-archive .shop-item.has-mockup .thumbnail::after { content: none; }

.page-wrap#shop-archive .shop-item .titles h6.item-price { color: var(--mute); }

/* ==========================================================================
   10c. Template — Lab
   ========================================================================== */

.page-wrap#lab {
  position: relative;
  padding: 2.34375vw 0 6.25vw;
  min-height: 70vh;
}

.page-wrap#lab .lab-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5625vw;
  width: calc(100% - (var(--pad) * 2));
  margin: 0 auto;
  align-items: center;
}

.page-wrap#lab .lab-item {
  position: relative;
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease), transform 600ms var(--ease-expo);
}
.page-wrap#lab .lab-item img {
  width: 100%;
  height: auto;
  display: block;
}
.page-wrap#lab .lab-stage:hover .lab-item { opacity: .35; }
.page-wrap#lab .lab-stage .lab-item:hover { opacity: 1; }

/* One test opened: it takes the middle and the rest step back. */
.page-wrap#lab.is-open .lab-item { opacity: .12; pointer-events: none; }
.page-wrap#lab.is-open .lab-item.is-open {
  position: fixed;
  top: 50%;
  left: 50%;
  width: auto;
  max-width: 78vw;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  z-index: 400;
}
.page-wrap#lab.is-open .lab-item.is-open img {
  max-width: 78vw;
  max-height: 82vh;
  width: auto;
  height: auto;
}

.page-wrap#lab .lab-bar {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  padding-bottom: var(--pad);
  z-index: 401;
}
.page-wrap#lab .lab-bar .outer-content-wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.page-wrap#lab .lab-bar .lab-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink);
}
.page-wrap#lab .lab-bar h4,
.page-wrap#lab .lab-bar h5 { margin-bottom: 0; }

/* --- Lab toggle: the page is unlisted, reached through this --- */

.lab-toggle {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--mute);
  border-radius: 50%;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.lab-toggle:hover,
.lab-toggle[aria-expanded="true"] {
  background-color: var(--ink);
  border-color: var(--ink);
}

.header-wrap .lab-slot {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  column-gap: .78125vw;
  z-index: 3;
}
.header-wrap .lab-slot .lab-link {
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transform: translateX(6px);
  transition: opacity 320ms var(--ease), transform 420ms var(--ease-expo);
}
.header-wrap .lab-slot.revealed .lab-link {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.header-wrap .lab-slot .lab-link h6 { margin-bottom: 0; }

/* --- Video slides --- */

.carousel-slide.is-video .media-embed {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(76%, calc((100vh - 9.5rem) * 1.7778));
  aspect-ratio: 16 / 9;
}
.carousel-slide.is-video .media-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.carousel-slide.is-video video.media-file {
  position: absolute;
  width: auto; height: auto;
  max-width: 72%;
  max-height: 75%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.page-wrap#work-post .work-images-panel.shrunk .carousel-slide.is-video .media-embed { width: 58%; }

/* ==========================================================================
   10e. Opening title
   ========================================================================== */

.site-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--paper);
  z-index: 900;
  transition: opacity 700ms var(--ease-inout), visibility 0s linear 700ms;
}
.site-loader.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.site-loader-inner { text-align: center; }
.site-loader .loader-name {
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: 1.1;
  letter-spacing: .01em;
  margin-bottom: .5em;
  opacity: 0;
  transform: translateY(8px);
  animation: mxb-rise 900ms var(--ease-quint) forwards;
}
.site-loader .loader-role {
  color: var(--mute);
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(8px);
  animation: mxb-rise 900ms var(--ease-quint) 160ms forwards;
}
@keyframes mxb-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader .loader-name,
  .site-loader .loader-role { animation-duration: 1ms; }
  .site-loader { transition-duration: 1ms; }
}

/* --- Grid tiles: settle in from a blur, and sit off each other's baseline --- */

.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail img.thumb {
  filter: blur(14px);
  opacity: 0;
  transform: scale(1.02);
  transition:
    filter 700ms var(--ease),
    opacity 500ms var(--ease),
    transform 900ms var(--ease-expo);
}
.page-wrap#work-archive .grid-view-wrap .work-grid a.work-project.loaded .thumbnail img.thumb {
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}


@media (prefers-reduced-motion: reduce) {
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail img.thumb {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

/* --- Cap the vw scale on very wide screens --- */
@media only screen and (min-width: 1920px) {
  :root { --pad: 30px; }
}

/* --- Tablet --- */
@media only screen and (max-width: 1080px) {
  .header-wrap .menu { column-gap: 1.8vw; }
  .page-wrap#shop-archive .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .page-wrap#lab .lab-stage { grid-template-columns: repeat(4, 1fr); }
  .page-wrap#shop-item .shop-images { width: 50%; }
  .page-wrap#shop-item .shop-details { width: 50%; }
  .page-wrap#work-post .work-words-panel.opened { width: 60%; }
  .page-wrap#work-post .work-images-panel.shrunk { width: 40%; }
  .page-wrap#work-post .work-words-panel .inner-wrap { width: 60vw; }
}

/* --- Mobile --- */
@media only screen and (max-width: 730px) {
  :root { --pad: var(--pad-m); }

  /* 12-col small grid: col-n = 8.55556n - 2.66667 */
  .col-1-12_sm  { width: 5.88889%; }
  .col-2-12_sm  { width: 14.4444%; }
  .col-3-12_sm  { width: 23%; }
  .col-4-12_sm  { width: 31.5556%; }
  .col-5-12_sm  { width: 40.1111%; }
  .col-6-12_sm  { width: 48.6667%; }
  .col-7-12_sm  { width: 57.2222%; }
  .col-8-12_sm  { width: 65.7778%; }
  .col-9-12_sm  { width: 74.3333%; }
  .col-10-12_sm { width: 82.8889%; }
  .col-11-12_sm { width: 91.4444%; }
  .col-12-12_sm { width: 100%; }

  .gutter_sm { width: 2.66667%; }
  .gutter-margin-right_sm { margin-right: 2.66667%; }
  .gutter-margin-right_sm:last-child { margin-right: 0 !important; }

  /* Header switches to the hamburger. */
  .header-wrap nav .menu { display: none; }
  .mobile-menu-wrap .menu-morph { display: none; }
  .header-wrap .mobile-menu-opener { display: block; }
  .mobile-menu-wrap { display: block; }
  .header-wrap .outer-content-wrap { padding: 4vw 0; }
  .header-wrap .header-logo { max-width: 60%; }

  /* Home */
  .page-wrap#home .images-carousel .carousel-slide img { max-width: 84%; max-height: 62%; }
  .page-wrap#home .homepage-footer { padding-bottom: 6vw; }

  /* Work archive — list view drops the sticky preview image. */
  .page-wrap#work-archive .list-view-wrap .outer-content-wrap { display: block; }
  .page-wrap#work-archive .list-view-wrap .image-column { display: none; }
  .page-wrap#work-archive .list-view-wrap .text-column { padding-top: 4vh; width: 100%; }
  .page-wrap#work-archive .list-view-wrap .text-column .work-project { padding: 3.2vw 0; }
  .page-wrap#work-archive .list-view-wrap .text-column .work-project h6.client-name { opacity: 1; }

  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .titles { opacity: 1; }
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project .thumbnail .plus { display: none; }
  .page-wrap#work-archive .grid-view-wrap .work-grid.is-hovered a.work-project.unhovered .thumbnail { opacity: 1; }

  /* Category menu collapses behind a disclosure. */
  .page-wrap#work-archive .work-menu-wrap { padding-bottom: 0; }
  .page-wrap#work-archive .work-menu-wrap .mobile-category-menu-opener { display: block; }
  .page-wrap#work-archive .work-menu-wrap .view-menu { display: none; }
  .page-wrap#work-archive .work-menu-wrap .category-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    background-color: var(--paper);
    transition: max-height 600ms var(--ease-expo);
  }
  .page-wrap#work-archive .work-menu-wrap .category-menu.opened { max-height: 60vh; }
  .page-wrap#work-archive .work-menu-wrap .category-menu .category-menu-item {
    width: 100%;
    margin-right: 0;
    padding: 3.2vw var(--pad-m);
    border-top: 1px solid var(--rule);
  }

  /* Single project — panels become full-screen sheets. */
  .page-wrap#work-post .mobile-post-nav,
  .page-wrap#work-post .mobile-post-footer { display: block; }
  .page-wrap#work-post .work-images-panel .fixed-corner { display: none; }
  .page-wrap#work-post .work-images-panel,
  .page-wrap#work-post .work-images-panel.shrunk { width: 100%; }
  .page-wrap#work-post .work-images-panel .images-carousel .carousel-slide img,
  .page-wrap#work-post .work-images-panel .images-carousel .carousel-slide video,
  .page-wrap#work-post .work-images-panel.shrunk .images-carousel .carousel-slide img,
  .page-wrap#work-post .work-images-panel.shrunk .images-carousel .carousel-slide video {
    max-width: 84%;
    max-height: 58%;
  }
  .page-wrap#work-post .work-images-panel .images-carousel .carousel-pager { display: none; }
  .page-wrap#work-post .work-words-panel,
  .page-wrap#work-post .work-words-panel.opened { width: 100%; border-left: none; }
  .page-wrap#work-post .work-words-panel .inner-wrap {
    width: 100vw;
    padding: 16vw var(--pad-m) var(--pad-m);
  }
  .page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-page-wrap .inner-wrap { padding: 0 var(--pad-m); }
  .page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb {
    width: 48%;
    padding-bottom: 32%;
    margin-right: 4%;
    margin-bottom: 4%;
  }
  .page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb:nth-child(4n+4) { margin-right: 4%; }
  .page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb:nth-child(2n+2) { margin-right: 0; }
  .page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbnail-pager-wrap { padding-right: var(--pad-m); }

  /* Lab */
  .page-wrap#lab .lab-stage { grid-template-columns: repeat(2, 1fr); gap: 4vw; }
  .page-wrap#lab.is-open .lab-item.is-open img { max-width: 90vw; max-height: 70vh; }
  .header-wrap .lab-slot { display: none; }

  /* Shop */
  .page-wrap#shop-archive { padding: 6vw 0 14vw; }
  .page-wrap#shop-archive .shop-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 4vw;
    row-gap: 9vw;
  }
  .page-wrap#shop-archive .shop-filter {
    flex-wrap: wrap;
    row-gap: 2.5vw;
    padding-bottom: 4vw;
    margin-bottom: 7vw;
  }
  .page-wrap#shop-archive .shop-filter .category-menu-item { margin-right: 6vw; }
  .page-wrap#shop-archive .shop-item .titles { padding-top: 3vw; }
  .page-wrap#shop-archive .shop-item .thumbnail .plus { display: none; }

  /* Single item stacks: images above, details below. */
  .page-wrap#shop-item { display: block; min-height: 0; }
  .page-wrap#shop-item .shop-images { width: 100%; min-height: 0; }
  .page-wrap#shop-item .shop-images .images-carousel { position: relative; height: 62vh; }
  .page-wrap#shop-item .shop-images .carousel-slide img { max-width: 84%; max-height: 84%; }
  .page-wrap#shop-item .shop-images .carousel-pager { left: var(--pad-m); bottom: 2vw; }
  .page-wrap#shop-item .shop-details { width: 100%; border-left: none; }
  .page-wrap#shop-item .shop-details .inner-wrap {
    position: relative;
    padding: 8vw var(--pad-m) 14vw;
  }
  .page-wrap#shop-item .shop-details .back-link { margin-bottom: 8vw; }
  .enquire-button { padding: .8em 2.4em; }

  /* Information */
  .page-wrap#information { padding: 6vw 0 12vw; }
  .page-wrap#information .information-section { padding-top: 3.2vw; margin-bottom: 3.2vw; }
  .page-wrap#information .information-section .plus-icon { top: 4.5vw; }
  .page-wrap#information .information-section .text-column { padding-bottom: 10vw; }
  .page-wrap#information .information-section .text-column img { width: 100%; }
}

@media only screen and (max-width: 480px) {
  .page-wrap#home .images-carousel .carousel-slide img { max-width: 88%; max-height: 56%; }
}

/* Editor-only hint on an Information page that has no headings yet. */
.page-wrap#information .section-empty { color: var(--mute); }

/* ==========================================================================
   10d. Generic page + text index
   ========================================================================== */

.page-wrap#page { padding: 2.34375vw 0 6.25vw; }
.page-wrap#page .page-body h1 { margin-bottom: 1em; }

.page-wrap#text-index { padding: 2.34375vw 0 6.25vw; }
.page-wrap#text-index .text-entry {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--rule);
  padding: .885417vw 0;
  color: var(--mute);
}
.page-wrap#text-index .text-entry h1,
.page-wrap#text-index .text-entry h6 { margin-bottom: 0 !important; }
.page-wrap#text-index .text-entry h6.entry-meta { padding-top: .55em; white-space: nowrap; }
.page-wrap#text-index .text-entry:hover { color: var(--ink); }

@media only screen and (max-width: 730px) {
  .page-wrap#information .information-section .text-column .inner-wrap { max-width: 100%; }
  .page-wrap#information .information-section .section-head { padding-right: 8vw; }
  .carousel-slide.is-video .media-embed { width: 88%; }
  .site-loader .loader-name { font-size: clamp(26px, 9vw, 44px); }
}

/* Dated lists inside the Information panels. */
.page-wrap#information .rich-text ul { margin-bottom: 1.1em; }
.page-wrap#information .rich-text ul:last-child { margin-bottom: 0; }
.page-wrap#information .rich-text li {
  font-size: clamp(14px, 1.09375vw, 20px);
  line-height: 1.45em;
  color: var(--ink);
  padding: .18em 0;
}
.page-wrap#information .rich-text li a { text-decoration: underline; text-underline-offset: .18em; }

@media only screen and (max-width: 730px) {
  .header-wrap .outer-content-wrap { padding: 12px; }
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project:nth-child(n) { margin-top: 0; }
  .carousel:has(.carousel-slide.is-video.is-selected) .carousel-nav { width: 12%; }
}

/* Same treatment anywhere else a carousel shows a film. */
.carousel.video-active .carousel-nav { width: 12%; }
.carousel.video-active .carousel-nav.previous { left: 0; right: auto; }
.carousel.video-active .carousel-nav.next { right: 0; left: auto; }

/* Corner line on a project with no body text. */
.page-wrap#work-post .work-images-panel .fixed-corner .corner-client { margin-bottom: 0; color: var(--mute); }
.page-wrap#work-post .work-images-panel .fixed-corner.words-opener .corner-client { margin-bottom: .5em; }

/* Shop tiles share the grid's blur-up. */
.page-wrap#shop-archive .shop-item .thumbnail img.thumb {
  filter: blur(14px);
  opacity: 0;
  transition: filter 700ms var(--ease), opacity 500ms var(--ease);
}
.page-wrap#shop-archive .shop-item.loaded .thumbnail img.thumb { filter: blur(0); opacity: 1; }

/* ==========================================================================
   12. Information entries
   ========================================================================== */

.page-wrap#information .entry-list { margin: 0; }
.page-wrap#information .entry-list li {
  display: flex;
  align-items: baseline;
  gap: 1em;
  padding: .34em 0;
  font-size: clamp(13px, 1.02vw, 18px);
  line-height: 1.4em;
  border-bottom: 1px solid transparent;
}
.page-wrap#information .entry-list .entry-year {
  flex: 0 0 auto;
  width: 3.4em;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}
.page-wrap#information .entry-list .entry-name { flex: 1 1 auto; }
.page-wrap#information .entry-list .entry-place {
  flex: 0 0 auto;
  color: var(--mute);
  text-align: right;
}
.page-wrap#information .entry-list a {
  display: flex;
  align-items: baseline;
  gap: .4em;
  width: 100%;
}
.page-wrap#information .entry-list .entry-arrow { color: var(--mute); }
.page-wrap#information .rich-text p { font-size: clamp(14px, 1.09375vw, 19px); line-height: 1.5em; }

/* --- Shop tiles keep each picture's own shape --- */
.page-wrap#shop-archive .shop-grid { align-items: start; }
.page-wrap#shop-archive .shop-item .thumbnail {
  aspect-ratio: auto;
  background-color: transparent;
}
.page-wrap#shop-archive .shop-item .thumbnail img.thumb {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.page-wrap#shop-archive .shop-item .thumbnail .mockup {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Project thumbnail overlay: natural shapes, not a fixed crop --- */
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb {
  height: auto;
  padding-bottom: 0;
  background: none;
  align-self: start;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap {
  align-items: start;
}

@media only screen and (max-width: 730px) {
  .page-wrap#information .information-section .text-column > .inner-wrap {
    width: 100%;
    margin-left: 0;
  }
  .page-wrap#information .entry-list li { flex-wrap: wrap; gap: .25em 1em; }
  .page-wrap#information .entry-list .entry-place { text-align: left; }
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project { width: 100%; }
}

/* --- Project text panel --- */
.page-wrap#work-post .work-words-panel .panel-title { margin-bottom: .3em; }
.page-wrap#work-post .work-words-panel .panel-client { color: var(--mute); margin-bottom: 1.6em; }
.page-wrap#work-post .work-words-panel .panel-facts {
  border-top: 1px solid var(--rule);
  padding-top: .9em;
  margin-bottom: 1.8em;
}
.page-wrap#work-post .work-words-panel .panel-facts li { margin-bottom: .45em; }
.page-wrap#work-post .work-words-panel .panel-facts li:last-child { margin-bottom: 0; }
.page-wrap#work-post .work-words-panel .panel-facts h6 { margin-bottom: 0; color: var(--mute); }
.page-wrap#work-post .work-words-panel .panel-watch { margin-top: 1.6em; }
.page-wrap#work-post .work-words-panel .panel-watch a { text-decoration: underline; text-underline-offset: .2em; }

/* Thumbnail count sits over a natural-ratio image. */
.page-wrap#work-post .work-images-panel .images-thumbs-overlay .thumbs-wrap .carousel-image-thumb .count-overlay {
  display: flex;
  align-items: flex-start;
}

@media only screen and (max-width: 730px) {
  /* One column, near-full width, matching the reference's proportions. */
  .page-wrap#work-archive .grid-view-wrap .work-grid { column-count: 1; }
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project {
    width: 100%;
    margin: 0 auto 12vw;
  }
  .page-wrap#work-archive .grid-view-wrap .work-grid a.work-project:nth-child(n) { margin-bottom: 12vw; }
  .page-wrap#work-archive .grid-view-wrap { padding: 6vw 0 26vw; }
}