@layer reset, base, layout, components, states, responsive;

@layer reset {
  *,

  *::before,

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

  html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-height);
  }

  body,


  h1,


  h2,


  p{
    margin: 0;
  }

  img,


  picture,


  canvas{
    display: block;
  }

  button,


  a{
    font: inherit;
  }
}

@layer base {
  body{
    min-width: 20rem;
    overflow-x: hidden;
    background: var(--bg-page);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
  }

  ::selection{
    background: var(--selection-bg);
    color: var(--selection-text);
  }

  a{
    color: inherit;
  }

  :focus-visible{
    outline: var(--border-strong) solid var(--focus-ring);
    outline-offset: var(--space-1);
  }

  h1,


  h2{
    color: var(--accent-primary-strong);
    font-family: var(--font-display);
    line-height: 0.95;
    text-wrap: balance;
  }

  h2{
    font-size: clamp(2.9rem, 7vw, 6.4rem);
  }
}

@layer layout {
  .skip-link{
    position: fixed;
    z-index: var(--z-skip);
    top: var(--space-3);
    left: var(--space-3);
    transform: translateY(-200%);
    padding: var(--space-3) var(--space-4);
    background: var(--accent-primary-strong);
    color: var(--bg-page);
    font-weight: var(--weight-bold);
  }

  .skip-link:focus{
    transform: translateY(0);
  }

  .site-header{
    position: relative;
    z-index: var(--z-header);
    min-height: var(--header-height);
    display: grid;
    grid-template-columns: minmax(12rem, var(--header-logo-width)) 1fr;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-3) var(--page-gutter);
    border-bottom: var(--border-thin) solid var(--header-border);
    background: var(--header-surface);
  }

  .brand{
    min-width: 0;
    width: min(100%, 23rem);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .brand-wordmark{
    max-width: 100%;
    padding-block: var(--space-2);
    font-size: clamp(1.15rem, 2.15vw, 2rem);
    text-shadow: 0 0.25rem 1.2rem var(--color-black);
  }

  .wordmark{
    --wordmark-lit: var(--text-strong);
    --wordmark-dim: color-mix(in srgb, var(--text-quiet) 30%, transparent);
    position: relative;
    display: inline-flex;
    align-items: baseline;
    overflow: visible;
    color: var(--wordmark-lit);
    font-family: var(--font-editorial);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.14em;
    line-height: 1;
    isolation: isolate;
    white-space: nowrap;
  }

  .wordmark__tim,


  .wordmark__ber,


  .wordmark__zerker{
    display: block;
  }

  .wordmark__tim{
    color: var(--wordmark-dim);
  }

  .wordmark__ber,


  .wordmark__zerker{
    color: var(--wordmark-lit);
  }

  .wordmark--header{
    --wordmark-dim: color-mix(in srgb, var(--text-quiet) 55%, transparent);
  }

  /* The Wide Rule mark. One quiet line of Cormorant caps,


  cream on the dark
     ground,


  tracked wide the way a gallery sets an artist's name. Emphasis is
     carried by tone alone — same face, same size, same weight — because every
     device that asked a letter to do more (scaled Z, roof, floor, swash,
     overlay) ended up reading as a strikethrough.

     TIMBERZERKER decomposes as TIM + BER + ZERKER: TIMBER and BERZERKER
     overlap on BER, which never dims. In the hero the light moves slowly
     between the two readings — TIM(BER) the material, (BER)ZERKER the mark
     branded into the finished pieces — so the name shows it contains both
     words without choosing. Long dwells, soft crossfades, 5s per full cycle.
     Both marks cycle. The header sat still on the BERZERKER reading until
     2026-09-19 on the reasoning that persistent chrome should not move; Joe
     ruled that it cycles with the hero. That former resting state — TIM dim,
     BER and ZERKER lit — is still where reduced motion settles for both, and
     the header keeps its own quieter --wordmark-dim, so it cycles at lower
     contrast than the hero rather than competing with it.

     The unlit word is the quiet tone at 46% alpha rather than a darker hue:
     the mark sits over the workshop photo, so the word that is not being
     read should recede into whatever is behind it rather than become a
     different colour. Alpha also keeps the two readings the same colour as
     each other, which is what makes the crossfade look like light moving
     across the word instead of two words swapping.

     NOTE: keep this comment attached to the @keyframes below, not to a plain
     rule — the brand test's cssDeclarations helper cannot find a selector
     whose rule is immediately preceded by a comment. A comment inside a
     declaration block breaks it too: the helper splits on ";" and folds the
     comment into the next property name. */
  @keyframes wordmark-cycle-tim{
    0%, 40% { color: var(--wordmark-dim); }
    48%, 86% { color: var(--wordmark-lit); }
    94%, 100% { color: var(--wordmark-dim); }
  }

  @keyframes wordmark-cycle-zerker {
    0%,

    40%{ color: var(--wordmark-lit); }
    48%,

    86%{ color: var(--wordmark-dim); }
    94%,

    100%{ color: var(--wordmark-lit); }
  }

  .wordmark--hero .wordmark__tim,


  .wordmark--header .wordmark__tim{
    animation: wordmark-cycle-tim 5s ease-in-out infinite;
  }

  .wordmark--hero .wordmark__zerker,


  .wordmark--header .wordmark__zerker{
    animation: wordmark-cycle-zerker 5s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .wordmark--hero .wordmark__tim,

    .wordmark--hero .wordmark__zerker,

    .wordmark--header .wordmark__tim,

    .wordmark--header .wordmark__zerker{
      animation: none;
    }
  }

  .site-nav{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--header-nav-gap);
  }

  .hero{
    position: relative;
    min-height: var(--hero-min-height);
    display: grid;
    grid-template-columns: minmax(7rem, 12.5vw) minmax(0, 1fr) minmax(8rem, 15vw);
    overflow: hidden;
    isolation: isolate;
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .hero-media{
    position: relative;
    z-index: var(--z-base);
    min-height: var(--hero-min-height);
    overflow: hidden;
    background: var(--bg-surface);
  }

  .hero-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .hero-media picture{
    width: 100%;
    height: 100%;
    display: block;
  }

  .hero-media--cinematic{
    position: absolute;
    inset: 0;
    grid-column: 1 / -1;
    min-height: 100%;
    width: 100%;
  }

  .hero-media--cinematic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 64% 45%;
  }

  .hero-media__drift{
    --drift-x: 0px;
    --drift-y: 0px;
    --hero-scale: 1.045;
    transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(var(--hero-scale));
    transform-origin: 64% 45%;
    will-change: transform;
  }

  .hero-media--primary{
    border-inline: var(--border-thin) solid var(--border-subtle);
  }

  .hero-media--primary img{
    --drift-x: 0px;
    --drift-y: 0px;
    transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1.06);
    object-position: 60% 50%;
    will-change: transform;
  }

  .hero-media--support img{
    filter: brightness(0.58) saturate(0.82);
  }

  .hero-media--left img{
    object-position: 50% center;
  }

  .hero-media--right img{
    object-position: center 46%;
  }

  .hero__scrim,


  .hero-atmosphere,


  .hero__content,


  .hero__edge-mark{
    position: absolute;
  }

  .hero__scrim{
    z-index: 1;
    inset: 0;
    background: var(--hero-scrim), var(--hero-edge-fade);
    pointer-events: none;
  }

  .hero-atmosphere{
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .hero__content{
    z-index: 3;
    top: 50%;
    left: clamp(var(--space-16), 16.5vw, 17rem);
    width: min(calc(100% - var(--space-16)), var(--hero-content-width));
    transform: translateY(-46%);
  }

  .hero__content::before{
    position: absolute;
    z-index: -1;
    inset: calc(var(--space-12) * -1) calc(var(--space-16) * -1);
    content: "";
    background: radial-gradient(ellipse at left, var(--color-black-alpha-72), transparent 72%);
    pointer-events: none;
  }

  .hero__edge-mark{
    z-index: 3;
    right: 50%;
    bottom: calc(var(--space-1) * -1);
    color: var(--accent-primary);
    transform: translateX(50%);
  }

  .section{
    padding: var(--section-padding) var(--page-gutter);
    scroll-margin-top: var(--header-height);
  }

  .section__inner,


  .site-footer{
    width: min(100%, var(--container-max));
    margin-inline: auto;
  }

  .section-heading--split,


  .section__inner--band,


  .section__inner--editorial{
    display: grid;
    align-items: end;
    gap: var(--space-12);
  }

  .section-heading--split{
    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr);
  }

  .section__inner--band{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .section__inner--editorial{
    grid-template-columns: minmax(15rem, 0.72fr) minmax(22rem, 1fr) minmax(20rem, 1.15fr);
    align-items: center;
  }

  .section__inner--store{
    max-width: 62rem;
    text-align: center;
  }

  .site-footer{
    display: flex;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-8) var(--page-gutter);
    border-top: var(--border-thin) solid var(--border-subtle);
  }
}

@layer components {
  .site-nav a{
    position: relative;
    padding-block: var(--space-3);
    border: 0;
    background: transparent;
    color: var(--accent-primary);
    cursor: pointer;
    font-family: var(--font-editorial);
    font-size: 1.04rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.075em;
    text-decoration: none;
    white-space: nowrap;
  }

  .site-nav a::after{
    position: absolute;
    right: 0;
    bottom: var(--space-1);
    left: 0;
    height: var(--border-thin);
    content: "";
    background: var(--accent-primary-strong);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .site-nav a:hover::after,


  .site-nav a[aria-current="location"]::after{
    transform: scaleX(1);
    transform-origin: left;
  }

  

  

  .nav-toggle{
    display: none;
  }

  .hero h1{
    max-width: none;
    font-size: clamp(4rem, 7.5vw, 7rem);
    letter-spacing: 0.015em;
    text-shadow: var(--hero-copy-shadow);
    text-transform: uppercase;
  }

  .hero__rule{
    width: min(100%, 22rem);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-8) var(--space-4);
    color: var(--accent-danger);
  }

  .hero__rule i{
    height: var(--border-thin);
    flex: 1;
    background: var(--accent-primary);
  }

  .hero__content > p{
    color: var(--text-primary);
    font-family: var(--font-editorial);
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.045em;
    text-shadow: var(--hero-copy-shadow);
  }

  .hero__actions{
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
  }

  .button{
    min-height: var(--button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding);
    border: var(--border-thin) solid var(--border-emphasis);
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-editorial);
    font-size: 0.94rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.09em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  }

  .button:hover{
    transform: translateY(calc(var(--space-1) * -1));
  }

  .button:disabled,


  .button:disabled:hover{
    cursor: default;
    opacity: 0.58;
    transform: none;
  }

  .button--primary{
    background: var(--button-primary-bg);
    box-shadow: var(--shadow-gold);
  }

  .button--primary:hover{
    background: var(--button-primary-hover);
  }

  .button--text{
    min-height: auto;
    padding-inline: 0;
    border-width: 0 0 var(--border-thin);
    color: var(--accent-primary-strong);
  }

  .button--outline{
    color: var(--accent-primary-strong);
  }

  [data-media-frame]{
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  [data-media-frame].hero-media--cinematic{
    position: absolute;
  }

  [data-media-frame] > picture,


  [data-media-frame] > picture > img{
    width: 100%;
  }

  [data-media-failed="true"] > picture,


  img[data-media-failed="true"]{
    visibility: hidden;
  }

  .media-fallback{
    position: absolute;
    z-index: 4;
    inset: 0;
    min-height: 4rem;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    border: var(--border-thin) solid var(--border-subtle);
    background: var(--surface-walnut);
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: clamp(0.78rem, 1.2vw, 1rem);
    letter-spacing: 0.08em;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
  }

  .section-heading p,


  .section__inner--band p,


  .craftsman-copy p,


  .section__inner--store p,


  .gallery-region p{
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: clamp(1.12rem, 1.7vw, 1.42rem);
    line-height: 1.65;
  }

  .gallery-region{
    margin-top: var(--space-16);
    border-block: var(--border-thin) solid var(--border-subtle);
    padding-block: var(--space-8);
  }

  .gallery-static-note{
    margin-bottom: var(--space-8);
  }

  .work-details-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
  }

  .work-detail{ grid-column: span 4; margin: 0; }
  .work-detail--1{ --reveal-base-transform: translateY(2rem); transform: var(--reveal-base-transform); }
  .work-detail--2{ grid-column: span 5; }
  .work-detail--3{ grid-column: span 3; --reveal-base-transform: translateY(4rem); transform: var(--reveal-base-transform); }
  .work-detail__media{ width: 100%; aspect-ratio: 4 / 3; }
  .work-detail__media img{ width: 100%; height: 100%; object-fit: cover; }

  .gallery-filters{
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scrollbar-color: var(--accent-primary-dark) transparent;
  }

  .gallery-filters__button{
    position: relative;
    min-height: 2.75rem;
    flex: 0 0 auto;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-editorial);
    font-size: 1.1rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.045em;
  }

  .gallery-filters__button::after{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--border-strong);
    content: "";
    background: var(--gallery-filter-selected);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration-fast) var(--ease-standard);
  }

  .gallery-filters__button:hover,


  .gallery-filters__button[aria-pressed="true"]{
    color: var(--gallery-filter-selected);
  }

  .gallery-filters__button[aria-pressed="true"]::after{
    transform: scaleX(1);
    transform-origin: left;
  }

  .gallery-count{
    margin-block: var(--space-6);
    color: var(--text-quiet);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .gallery-grid{
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--gallery-gap);
  }

  .gallery-rail{
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
  }

  .gallery-rail:active{ cursor: grabbing; }

  .gallery-rail__track{
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--gallery-gap);
    width: max-content;
    transform: translate3d(var(--rail-x, 0px), 0, 0);
    will-change: transform;
  }

  .gallery-card__trigger[data-rail-proxy]{
    position: relative;
    z-index: 1;
  }

  .gallery-card__trigger[data-rail-proxy]::after{
    content: "";
    position: absolute;
    top: 0;
    left: var(--clone-hit-offset);
    width: 100%;
    height: 100%;
    display: block;
  }

  .gallery-rail .gallery-card{
    flex: 0 0 clamp(17rem, 34vw, 34rem);
  }

  .gallery-rail-controls{
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-block: var(--space-4);
  }

  .gallery-card{
    grid-column: span 5;
    min-width: 0;
  }

  .gallery-card:nth-child(4n + 1){
    grid-column: span 7;
  }

  .gallery-card:nth-child(4n + 3){
    grid-column: 2 / span 5;
  }

  .gallery-card:nth-child(4n){
    grid-column: span 6;
  }

  .gallery-card__trigger{
    width: 100%;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }

  .gallery-card__media{
    width: 100%;
    display: block;
    aspect-ratio: var(--media-ratio, auto);
    background: var(--bg-surface-raised);
  }

  .gallery-card__media picture{
    width: 100%;
    height: 100%;
  }

  .gallery-card__media img{
    width: 100%;
    height: 100%;
    display: block;
    background: var(--bg-surface-raised);
    object-fit: contain;
    transition: filter var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  }

  .gallery-card__trigger:hover .gallery-card__media img{
    filter: brightness(1.08);
    transform: scale(1.012);
  }

  .gallery-card__caption{
    display: grid;
    gap: var(--space-1);
    padding-top: var(--space-3);
    color: var(--gallery-caption);
    font-family: var(--font-editorial);
    font-size: 1.08rem;
    line-height: 1.2;
  }

  .gallery-card__caption strong{
    color: var(--text-strong);
    font-size: 1.25rem;
    font-weight: var(--weight-semibold);
  }

  .gallery-empty{
    grid-column: 1 / -1;
    padding: var(--space-16) var(--space-4);
    border: var(--border-thin) solid var(--border-subtle);
    color: var(--text-muted);
    text-align: center;
  }

  div.gallery-empty{
    display: grid;
    justify-items: center;
    gap: var(--space-6);
  }

  @media (prefers-reduced-motion: reduce) {
    .gallery-rail{ overflow-x: auto; touch-action: auto; scroll-snap-type: x mandatory; }
    .gallery-rail__track{ transform: none !important; }
    .gallery-rail .gallery-card{ scroll-snap-align: start; }
  }

  .gallery-empty__action{
    width: max-content;
  }

  .gallery-noscript{
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: var(--border-thin) solid var(--border-subtle);
  }

  .piece-link-status{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .piece-viewer{
    width: min(calc(100% - (var(--page-gutter) * 2)), var(--container-max));
    max-width: var(--container-max);
    height: min(calc(100% - (var(--page-gutter) * 2)), 54rem);
    max-height: 54rem;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--border-thin) solid var(--border-emphasis);
    border-radius: var(--radius-none);
    background: var(--viewer-surface);
    box-shadow: var(--shadow-deep);
    color: var(--text-primary);
  }

  .piece-viewer:not([open]){
    display: none;
  }

  .piece-viewer::backdrop{
    background: var(--viewer-backdrop);
  }

  .piece-viewer[data-dialog-fallback="true"]{
    position: fixed;
    z-index: var(--z-skip);
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    padding: var(--page-gutter);
    overflow: auto;
    border: 0;
    background: var(--viewer-backdrop);
  }

  .piece-viewer[data-dialog-fallback="true"] .piece-viewer__shell{
    width: min(100%, var(--container-max));
    height: min(100%, 54rem);
    margin: auto;
    border: var(--border-thin) solid var(--border-emphasis);
    background: var(--viewer-surface);
    box-shadow: var(--shadow-deep);
  }

  .piece-viewer__shell{
    position: relative;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 0.8fr);
    overflow: auto;
  }

  .piece-viewer__close{
    position: absolute;
    z-index: var(--z-content);
    top: var(--space-4);
    right: var(--space-4);
    min-height: 3rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--border-thin) solid var(--border-emphasis);
    background: var(--bg-overlay);
    color: var(--viewer-control);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .piece-viewer__close span{
    font-size: 1.45rem;
    line-height: 1;
  }

  .piece-viewer__media{
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    margin: 0;
    overflow: hidden;
    background: var(--bg-page);
    touch-action: pan-y;
  }

  .piece-viewer__image-frame{
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .piece-viewer__image-frame img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity var(--duration-fast) var(--ease-standard);
  }

  .piece-viewer__image-frame picture{
    width: 100%;
    height: 100%;
  }

  .piece-viewer__image-navigation{
    min-height: 4rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-top: var(--border-thin) solid var(--border-subtle);
    color: var(--viewer-metadata);
  }

  .piece-viewer__image-navigation button{
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: transparent;
    color: var(--viewer-control);
    cursor: pointer;
  }

  .piece-viewer__image-navigation button:last-child{
    justify-self: end;
  }

  .piece-viewer__image-navigation button:disabled{
    color: var(--text-quiet);
    cursor: default;
  }

  .piece-viewer__image-navigation p{
    color: var(--viewer-metadata);
    font-family: var(--font-sans);
    font-size: 0.76rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }

  .piece-viewer__details{
    align-self: center;
    padding: var(--space-20) var(--space-10) var(--space-12);
  }

  .piece-viewer__status{
    margin-bottom: var(--space-4);
    color: var(--accent-primary-strong);
    font-size: 0.74rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .piece-viewer__details h2{
    font-size: clamp(2.25rem, 4.6vw, 4.6rem);
  }

  .piece-viewer__description{
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: 1.2rem;
    line-height: 1.55;
  }

  .piece-viewer__metadata{
    display: grid;
    gap: var(--space-3);
    margin: var(--space-8) 0;
  }

  .piece-viewer__metadata div{
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.7fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .piece-viewer__metadata dt{
    color: var(--text-quiet);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .piece-viewer__metadata dd{
    margin: 0;
    color: var(--viewer-metadata);
    font-family: var(--font-editorial);
    font-size: 1.05rem;
    text-transform: capitalize;
  }

  .piece-viewer__actions{
    display: grid;
    justify-items: start;
    gap: var(--space-4);
  }

  .piece-viewer__cta{
    cursor: pointer;
  }

  .piece-viewer__availability{
    color: var(--viewer-metadata);
    font-family: var(--font-editorial);
    font-size: 1.08rem;
  }

  .section--work{
    border-top: var(--border-thin) solid var(--border-subtle);
    background: var(--bg-page);
  }

  .section--available{
    border-block: var(--border-thin) solid var(--border-subtle);
    background: var(--bg-surface);
  }

  .section__inner--band h2{
    margin-bottom: var(--space-5);
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
  }

  .section--available .section-heading{
    align-items: center;
  }

  .section--available .section-heading h2{
    margin-bottom: var(--space-5);
    font-size: clamp(2.2rem, 4.5vw, 4.6rem);
  }

  .section--available .section-heading .button{
    justify-self: end;
  }

  .available-list{
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-12);
    border-top: var(--border-thin) solid var(--border-subtle);
    padding-top: var(--space-6);
  }

  .available-piece{
    display: grid;
    grid-template-columns: minmax(12rem, 0.48fr) minmax(16rem, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: var(--border-thin) solid var(--border-subtle);
  }

  .available-piece__media{
    width: 100%;
    background: var(--bg-surface-raised);
  }

  .available-piece__media picture{
    width: 100%;
    height: 100%;
  }

  .available-piece__media img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .available-piece__details{
    min-width: 0;
  }

  .available-piece__details h3{
    color: var(--text-strong);
    font-family: var(--font-editorial);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: var(--weight-semibold);
    line-height: 1.1;
  }

  .available-piece__details > p:not(.available-piece__status){
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: 1rem;
  }

  .available-piece__status{
    margin-bottom: var(--space-2);
    color: var(--accent-primary-strong);
    font-size: 0.72rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .available-piece__action{
    min-width: 14rem;
    display: grid;
    justify-items: stretch;
    gap: var(--space-3);
  }

  

  .available-list__empty{
    padding: var(--space-10) 0;
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: 1.2rem;
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .section--craftsman{
    position: relative;
    overflow: hidden;
    background: var(--bg-page);
  }

  .section--craftsman::before{
    position: absolute;
    inset: 0;
    content: "";
    background: var(--surface-walnut);
    opacity: 0.28;
    pointer-events: none;
  }

  .craftsman-composition{
    position: relative;
    isolation: isolate;
  }

  .craftsman-portrait,


  .craftsman-feature{
    position: relative;
    min-width: 0;
    margin: 0;
  }

  .craftsman-portrait{
    min-height: 36rem;
    align-self: end;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: var(--border-thin) solid var(--border-emphasis);
  }

  .craftsman-portrait::before{
    position: absolute;
    z-index: -1;
    right: 8%;
    bottom: 4%;
    left: 8%;
    aspect-ratio: 1;
    border: var(--border-thin) solid var(--border-subtle);
    content: "";
    transform: rotate(45deg);
  }

  .craftsman-portrait img{
    width: min(100%, 27rem);
    height: auto;
    filter: drop-shadow(0 1.5rem 2rem var(--color-black-alpha-72));
  }

  .craftsman-copy{
    position: relative;
    z-index: 1;
    padding-block: var(--space-10);
    text-align: center;
  }

  .craftsman-copy h2{
    font-size: clamp(2.8rem, 5vw, 5.8rem);
  }

  /* The section title carries the weight now that the eyebrow is gone. It keeps
     the display face and the ember glow; it no longer borrows them from the
     hero wordmark,


  which moved to the editorial face when the mark became the
     TIM/BER/ZERKER cycle. */
  .craftsman-copy__title{
    font-family: var(--font-display);
    font-size: clamp(4rem, 10vw, 9.5rem);
    font-weight: var(--weight-black);
    line-height: 0.88;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow:
      0 0 2.4rem color-mix(in srgb, var(--accent-ember) 26%, transparent),
      0 0.08em 0 color-mix(in srgb, var(--color-black) 42%, transparent);
  }

  .craftsman-copy__rule{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-6);
    color: var(--accent-danger);
  }

  .craftsman-copy__rule i{
    height: var(--border-thin);
    flex: 1;
    background: var(--accent-primary-dark);
  }

  .craftsman-feature{
    --reveal-base-transform: rotate(1.25deg);
    padding: var(--space-3);
    border: var(--border-thin) solid var(--border-emphasis);
    background: var(--bg-surface-raised);
    box-shadow: var(--shadow-deep);
    transform: var(--reveal-base-transform);
  }

  .craftsman-feature__media{
    width: 100%;
    background: var(--bg-surface);
  }

  .craftsman-feature__media picture{
    width: 100%;
  }

  .craftsman-feature__media img{
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .craftsman-feature__badge{
    position: absolute;
    z-index: 1;
    top: var(--space-5);
    left: var(--space-5);
    padding: var(--space-2) var(--space-3);
    border: var(--border-thin) solid var(--border-emphasis);
    background: var(--color-black-alpha-90);
    color: var(--accent-primary-strong);
    font-size: 0.68rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .craftsman-feature figcaption{
    padding: var(--space-3) var(--space-1) 0;
    color: var(--text-quiet);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .section--store{
    background: var(--bg-surface);
  }

  .section--roots{
    position: relative;
    overflow: hidden;
    border-block: var(--border-thin) solid var(--border-subtle);
    background:
      radial-gradient(circle at 14% 50%, var(--color-blood-alpha-44), transparent 30%),
      linear-gradient(125deg, var(--color-coal), var(--color-bark) 62%, var(--color-black));
  }

  .section--roots::before,


  .section--roots::after{
    position: absolute;
    width: 18rem;
    aspect-ratio: 1;
    border: var(--border-thin) solid var(--border-subtle);
    content: "";
    opacity: 0.32;
    transform: rotate(45deg);
    pointer-events: none;
  }

  .section--roots::before{
    top: -11rem;
    left: -8rem;
  }

  .section--roots::after{
    right: -8rem;
    bottom: -11rem;
  }

  .roots-band{
    position: relative;
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(var(--space-8), 5vw, var(--space-20));
  }

  .roots-band__seal{
    width: 8rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: var(--border-thin) solid var(--border-emphasis);
    background: var(--color-black-alpha-72);
    box-shadow: var(--shadow-gold);
    transform: rotate(45deg);
  }


  .roots-band__eyebrow{
    margin-bottom: var(--space-4);
    color: var(--accent-primary);
    font-size: 0.76rem;
    font-weight: var(--weight-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .roots-band__copy h2{
    max-width: 10ch;
    font-size: clamp(3rem, 6.4vw, 6.4rem);
  }

  .roots-band__copy > p:last-child{
    max-width: 44rem;
    margin-top: var(--space-6);
    color: var(--text-muted);
    font-family: var(--font-editorial);
    font-size: clamp(1.12rem, 1.7vw, 1.42rem);
    line-height: 1.65;
  }

  .roots-band__runes{
    max-width: 1ch;
    color: var(--accent-primary-dark);
    font-family: var(--font-editorial);
    font-size: 1.4rem;
    letter-spacing: 0.45em;
    line-height: 1.8;
    opacity: 0.72;
    writing-mode: vertical-rl;
  }

  .section__inner--store p{
    max-width: 48rem;
    margin: var(--space-6) auto var(--space-10);
  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .site-footer{
    color: var(--text-quiet);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  html[data-reveal-ready="true"] [data-reveal]{
    opacity: 0;
    transform: var(--reveal-base-transform, translate3d(0, 0, 0)) translate3d(0, 2rem, 0);
    transition:
      opacity 700ms var(--ease-standard) var(--reveal-delay, 0ms),
      transform 800ms var(--ease-standard) var(--reveal-delay, 0ms);
  }

  html[data-reveal-ready="true"] [data-reveal][data-revealed="true"]{
    opacity: 1;
    transform: var(--reveal-base-transform, translate3d(0, 0, 0));
  }

  .craftsman-composition{
    display: grid;
    grid-template-columns: minmax(20rem, 1.2fr) minmax(18rem, 0.8fr);
    grid-template-areas:
      "portrait copy"
      "portrait feature";
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
  }

  .craftsman-portrait{ grid-area: portrait; min-height: clamp(38rem, 72vw, 66rem); }
  .craftsman-portrait img{ width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
  .craftsman-copy{ grid-area: copy; }
  .craftsman-feature{ grid-area: feature; max-width: 34rem; }

  /* The seal is a square rotated 45deg,


  so the mark has to fit the inscribed
     square (~71% of the width) or its corners clip against the diamond. */
  .roots-band__bear-mark{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 62%;
    height: 62%;
    fill: color-mix(in srgb, var(--accent-primary) 78%, var(--accent-danger));
    filter: drop-shadow(0 0 1.2rem color-mix(in srgb, var(--accent-ember) 38%, transparent));
    opacity: 0.92;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .roots-band__seal{
    position: relative;
  }

  .roots-band::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--accent-danger) 10%, transparent), transparent 76%);
    pointer-events: none;
  }
}

@layer states {
  body.piece-viewer-open{
    overflow: hidden;
  }

  body.piece-viewer-open [inert]{
    pointer-events: none;
  }

  .site-header[data-scrolled="true"]{
    box-shadow: var(--shadow-deep);
  }
}

@layer responsive {
  @media (max-width: 68rem) {
    :root{
      --header-logo-width: 12rem;
      --header-nav-gap: var(--space-5);
    }

    .site-nav a{
      font-size: 0.9rem;
    }

    .hero__content{
      left: clamp(var(--space-10), 15vw, var(--space-32));
    }
  }

  @media (max-width: 52rem) {
    html{
      scroll-padding-top: var(--header-height-compact);
    }

    .site-header{
      min-height: var(--header-height-compact);
      grid-template-columns: minmax(0, 1fr) auto;
      padding-block: var(--space-2);
    }

    .brand-wordmark{
      font-size: clamp(1.05rem, 5.2vw, 1.45rem);
    }

    .js-enhanced .nav-toggle{
      width: 3rem;
      height: 3rem;
      display: grid;
      place-items: center;
      padding: 0;
      border: var(--border-thin) solid var(--border-subtle);
      background: var(--bg-overlay);
      color: var(--accent-primary-strong);
      cursor: pointer;
    }

    .nav-toggle__label{
      position: absolute;
      width: var(--border-thin);
      height: var(--border-thin);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .nav-toggle__icon{
      width: var(--space-5);
      display: grid;
      gap: var(--space-2);
    }

    .nav-toggle__icon i{
      height: var(--border-thin);
      background: currentColor;
      transition: transform var(--duration-base) var(--ease-standard);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__icon i:first-child{
      transform: translateY(calc(var(--space-1) + var(--border-thin))) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] .nav-toggle__icon i:last-child{
      transform: translateY(calc((var(--space-1) + var(--border-thin)) * -1)) rotate(-45deg);
    }

    .site-nav{
      grid-column: 1 / -1;
      display: grid;
      gap: 0;
      padding-block: var(--space-3);
    }

    .js-enhanced .site-nav{
      position: absolute;
      top: 100%;
      right: var(--page-gutter);
      left: var(--page-gutter);
      padding: var(--space-3) var(--space-5);
      border: var(--border-thin) solid var(--border-subtle);
      background: var(--bg-overlay);
      box-shadow: var(--shadow-deep);
      transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
    }

    .js-enhanced .site-nav[data-open="false"]{
      visibility: hidden;
      opacity: 0;
      transform: translateY(calc(var(--space-2) * -1));
      pointer-events: none;
    }

    .js-enhanced .site-nav[data-open="true"]{
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }

    .site-nav a{
      padding-block: var(--space-3);
      font-size: 1rem;
    }

    .hero{
      min-height: calc(100svh - var(--header-height-compact));
      grid-template-columns: minmax(0, 1fr) minmax(6rem, 24vw);
    }

    .hero-media--left{
      display: none;
    }

    .hero-media--primary{
      border-left: 0;
    }

    .hero-media--cinematic img{ object-position: 68% center; }

    .work-detail,


    .work-detail--2,


    .work-detail--3{ grid-column: span 12; --reveal-base-transform: translate3d(0, 0, 0); transform: var(--reveal-base-transform); }

    .hero__content{
      left: var(--page-gutter);
      width: min(78%, var(--hero-content-width));
    }

    .hero h1{
      font-size: clamp(3rem, 9vw, 5.2rem);
    }

    .wordmark--hero{
      letter-spacing: 0.1em;
    }

    .hero__actions,


    .section-heading--split,


    .section__inner--band,


    .section__inner--editorial{
      grid-template-columns: 1fr;
    }

    .gallery-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-card,


    .gallery-card:nth-child(4n + 1),


    .gallery-card:nth-child(4n + 3),


    .gallery-card:nth-child(4n){
      grid-column: span 1;
    }

    .section__inner--band{
      justify-items: start;
    }

    .section--available .section-heading .button{
      justify-self: start;
    }

    .available-piece{
      grid-template-columns: minmax(10rem, 0.72fr) minmax(0, 1fr);
    }

    .available-piece__action{
      grid-column: 2;
      min-width: 0;
      justify-items: start;
    }

    

    .section__inner--editorial{
      align-items: start;
    }

    .craftsman-composition{
      gap: var(--space-8);
    }

    .craftsman-portrait{
      min-height: 26rem;
      width: 100%;
    }

    .craftsman-portrait img{
      width: 100%;
    }

    .craftsman-copy{
      max-width: 42rem;
      justify-self: center;
    }

    .craftsman-feature{
      --reveal-base-transform: translate3d(0, 0, 0);
      width: min(100%, 42rem);
      justify-self: center;
      transform: var(--reveal-base-transform);
    }

    .craftsman-composition{
      grid-template-columns: 1fr;
      grid-template-areas: "portrait" "copy" "feature";
    }

    .craftsman-portrait{ min-height: 34rem; }

    .roots-band{
      grid-template-columns: 7rem minmax(0, 1fr);
    }

    .roots-band__seal{
      width: 6rem;
    }


    .roots-band__runes{
      display: none;
    }

    .piece-viewer{
      height: calc(100% - (var(--space-6) * 2));
    }

    .piece-viewer__shell{
      grid-template-columns: 1fr;
      grid-template-rows: minmax(24rem, 56vh) auto;
    }

    .piece-viewer__details{
      padding: var(--space-12) var(--space-6);
    }

    

    
  }

  @media (max-width: 34rem) {
    .hero{
      display: block;
    }

    .hero-media--primary{
      min-height: calc(100svh - var(--header-height-compact));
    }

    .hero-media--right{
      display: none;
    }

    .hero__scrim{
      background: var(--color-black-alpha-72);
    }

    .hero__content{
      left: var(--page-gutter);
      width: calc(100% - (var(--page-gutter) * 2));
      transform: translateY(-42%);
    }

    .hero h1{
      font-size: clamp(2.25rem, 11vw, 4rem);
    }

    .wordmark--hero{
      letter-spacing: 0.07em;
    }

    .hero__actions{
      display: grid;
      justify-items: start;
      gap: var(--space-5);
      margin-top: var(--space-6);
    }

    .hero__rule{
      margin-block: var(--space-6) var(--space-3);
    }

    .section{
      scroll-margin-top: var(--header-height-compact);
    }

    .site-footer{
      display: grid;
      gap: var(--space-2);
    }

    .gallery-region{
      margin-top: var(--space-10);
    }

    .gallery-rail-controls{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .gallery-rail-controls .button{
      min-width: 0;
      padding-inline: var(--space-2);
      font-size: 0.72rem;
      letter-spacing: 0.05em;
    }

    .gallery-grid{
      grid-template-columns: 1fr;
    }

    .gallery-card,


    .gallery-card:nth-child(4n + 1),


    .gallery-card:nth-child(4n + 3),


    .gallery-card:nth-child(4n){
      grid-column: 1;
    }

    .gallery-card__caption,


    .gallery-filters__button{
      font-size: 1rem;
    }

    .available-piece{
      grid-template-columns: 1fr;
      gap: var(--space-4);
    }

    .available-piece__action{
      grid-column: 1;
      width: 100%;
    }

    .craftsman-portrait{
      min-height: 34rem;
    }

    .craftsman-copy{
      padding-block: var(--space-4);
    }

    .craftsman-copy h2{
      font-size: clamp(2.7rem, 13vw, 4.2rem);
    }

    .craftsman-copy__title{
      font-size: clamp(3.4rem, 17vw, 5.4rem);
    }

    .roots-band{
      grid-template-columns: 1fr;
      justify-items: start;
    }

    .roots-band__seal{
      width: 5rem;
    }


    

    

    

    

    

    

    
  }

  @media (prefers-reduced-motion: reduce) {
    html{
      scroll-behavior: auto;
    }

    *,


    *::before,


    *::after{
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
    }

    .hero-media--primary img{
      will-change: auto;
    }

    .hero-media__drift{
      transform: none;
    }

    html[data-reveal-ready="true"] [data-reveal]{ opacity: 1; transform: var(--reveal-base-transform, translate3d(0, 0, 0)); transition: none; }
  }
}