:root {
  --page-padding: clamp(12px, 1.35vw, 24px);
  --control-height: 76px;
  --black: #000;
  --white: #fff;
  --ui-font-size: 1rem;
}

* { box-sizing: border-box; }
html { background: var(--white); color: var(--black); }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.2;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
}

html.fonts-ready body {
  visibility: visible;
  animation: page-fade-in .65s ease-out both;
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 8px;
  top: 8px;
  padding: 8px 10px;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  min-height: clamp(98px, 12vw, 210px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: var(--page-padding) 2rem;
}
.site-logo-link {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
}
.site-logo {
  width: auto;
  height: auto;
  max-width: min(240px, 52vw);
  max-height: none;
}
.site-logo-fallback,
.site-navigation { font-size: var(--ui-font-size); }
.site-navigation {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.2vw, 42px);
  white-space: nowrap;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
  text-decoration: underline;
}


.specimen { overflow: hidden; }
.specimen-controls {
  min-height: var(--control-height);
  margin: 70px var(--page-padding) 0;
  padding: 10px clamp(22px, 3vw, 68px);
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(260px, 2fr) minmax(180px, auto);
  gap: clamp(20px, 3vw, 64px);
  align-items: center;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-size: var(--ui-font-size);
}
.specimen-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.size-control {
  justify-self: center;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  gap: clamp(14px, 1.5vw, 26px);
  align-items: center;
  min-width: 0;
}
.size-label { white-space: nowrap; }
.size-control output {
  min-width: 3.5em;
  text-align: left;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.size-slider {
  --slider-progress: 50%;
  width: clamp(120px, 22vw, 300px);
  appearance: none;
  height: 3px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #fff 0,
    #fff var(--slider-progress),
    rgba(255, 255, 255, .42) var(--slider-progress),
    rgba(255, 255, 255, .42) 100%
  );
  cursor: ew-resize;
  outline: none;
}
.size-slider::-webkit-slider-thumb {
  appearance: none;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  transition: transform .16s ease, background-color .16s ease;
}
.size-slider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
  transition: transform .16s ease, background-color .16s ease;
}
.size-slider:hover::-webkit-slider-thumb,
.size-slider:focus-visible::-webkit-slider-thumb {
  transform: scale(1.08);
  background: #111;
}
.size-slider:hover::-moz-range-thumb,
.size-slider:focus-visible::-moz-range-thumb {
  transform: scale(1.08);
  background: #111;
}
.size-slider:focus-visible {
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
}
.specimen-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  min-width: 0;
}
.weight-control {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.weight-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .5;
  cursor: pointer;
  white-space: nowrap;
}
.weight-button.is-active { opacity: 1; }
.weight-name {
  white-space: nowrap;
  margin-left: -0.5rem;
}
.buy-button {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .8em;
  border: 2px solid #fff;
  border-radius: 999px;
  white-space: nowrap;
}
.specimen-text {
  min-height: .95em;
  padding: clamp(0px, 4vw, 32px) 1rem clamp(42px, 7vw, 120px);
  font-family: var(--specimen-family);
  font-weight: var(--specimen-weight);
  font-size: var(--specimen-size, 160px);
  line-height: var(--specimen-line-height, 1.4);
  letter-spacing: -.035em;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-align: center;
  outline: none;
  transition: font-size .09s linear;
}

.portfolio {
  background: #000;
  color: #fff;
  padding: 3vw 3vw 120px;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3vw;
  align-items: start;
}
.project-card {
  min-width: 0;
  will-change: transform;
}

@media (min-width: 601px) {
  .portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 961px) {
  .portfolio[data-grid-columns="3"] .portfolio-grid,
  .portfolio[data-grid-columns="4"] .portfolio-grid,
  .portfolio[data-grid-columns="5"] .portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1281px) {
  .portfolio[data-grid-columns="4"] .portfolio-grid,
  .portfolio[data-grid-columns="5"] .portfolio-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1601px) {
  .portfolio[data-grid-columns="5"] .portfolio-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.project-media {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--thumbnail-radius, 20px);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.project-slides {
  position: relative;
  display: block;
  width: 100%;
  background: #111;
}
.project-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
}
.project-slide:first-child { position: relative; }
.project-slide.is-active { opacity: 1; }
.project-overlay {
  position: absolute;
  inset: 0;
  display: block;
  padding: clamp(16px, 2vw, 28px);
  background: rgba(0, 0, 0, .9);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility 0s linear .25s;
}
.project-card.is-open .project-overlay {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.project-card.is-open .project-slides {
  filter: blur(12px) saturate(1.1) brightness(.82);
  transform: scale(1.03);
  transition: filter .25s ease, transform .25s ease;
}

.project-card.is-open .project-overlay {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.project-overlay-scroll {
  display: block;
  max-height: 100%;
  overflow: auto;
  padding-right: 20px;
}
.project-title {
  display: block;
  margin-bottom: 1em;
  font-size: clamp(18px, 2vw, 34px);
  line-height: 1;
}
.project-description { display: block; font-size: clamp(14px, 1.25vw, 20px); line-height: 1.35; }
.project-description > *:first-child { margin-top: 0; }
.project-description > *:last-child { margin-bottom: 0; }

.default-page { padding: var(--page-padding); }
.default-page h1 { font-size: clamp(36px, 8vw, 120px); margin: 0 0 1em; }
.default-page-text { max-width: 720px; }

@media (max-width: 600px) {
  :root { --page-padding: 10px; --control-height: 52px; }
  .site-header {
    min-height: 78px;
    gap: 12px;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .site-logo { max-width: 34vw; max-height: none; }
  .site-logo-fallback,
  .site-navigation { font-size: var(--ui-font-size); }
  .site-navigation {
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .site-navigation::-webkit-scrollbar { display: none; }
  .specimen-controls {
    grid-template-columns: minmax(58px, auto) minmax(0, 1fr) auto;
    gap: 9px;
    padding: 8px 14px;
    font-size: var(--ui-font-size);
  }
  .size-control {
    grid-template-columns: auto minmax(52px, 1fr) auto;
    gap: 7px;
  }
  .size-slider::-webkit-slider-thumb { width: 20px; height: 20px; }
  .size-slider::-moz-range-thumb { width: 20px; height: 20px; }
  .specimen-actions { gap: .45rem; }
  .weight-control {
    max-width: 34vw;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .weight-control::-webkit-scrollbar { display: none; }
  .buy-button {
    padding: .38em .65em;
    border-width: 1px;
  }
  .specimen-text {
    padding-top: 28px;
    padding-bottom: 52px;
  }
  .portfolio {
    padding: 3vw;
  }
  .portfolio-grid {
    grid-template-columns: 1fr;
    gap: 3vw;
  }
  .project-title { font-size: 22px; }
  .project-description { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html.fonts-ready body {
    opacity: 1;
    visibility: visible;
    animation: none;
  }
  .project-slide,
  .project-overlay,
  .specimen-text { transition: none; }
}

/* v1.5: configurable logo and inline About panel */
.site-logo {
  width: min(var(--logo-width, 120px), 52vw);
  max-width: none;
}
.about-toggle {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.about-toggle:hover,
.about-toggle:focus-visible {
  text-decoration: underline;
}
.about-panel {
  height: 0;
  overflow: clip;
  visibility: hidden;
  contain: paint;
}

.about-panel.is-open {
  height: auto;
  visibility: visible;
}

.about-panel-inner {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3vw;
  padding:
    0
    clamp(2rem, 4vw, 5rem)
    clamp(36px, 7vw, 120px);
  opacity: 0;
  transform: translate3d(0, -18px, 0);
}

.about-panel.is-open .about-panel-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.about-image-wrap {
  margin: 0;
  min-width: 0;
}
.about-image {
  width: 100%;
  height: auto;
}
.about-text {
  min-width: 0;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
}
.about-text > *:first-child { margin-top: 0; }
.about-text > *:last-child { margin-bottom: 0; }
.specimen-text {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 600px) {
  .site-logo {
    width: min(var(--logo-width, 120px), 34vw);
    max-width: none;
  }
  .about-panel-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .specimen-text {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* v1.5.1: About 2-column content, proportional logo and project metadata */
.site-logo {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.about-column {
  min-width: 0;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  line-height: 1.35;
}
.about-column > *:first-child { margin-top: 0; }
.about-column > *:last-child { margin-bottom: 0; }
.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  font-size: 1rem;
}
.project-title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.2;
}
.project-link-button {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  flex: 0 0 auto;
  padding: .55em .9em;
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
}

.project-link-button:hover,
.project-link-button:focus-visible {
  background: #fff;
  color: #000;
}
@media (max-width: 600px) {
  .project-meta { padding-top: .75rem; }
  .project-link-button { border-width: 1px; }
}

/* v1.7.7: refined single-line specimen controls */
:root {
  --control-height: 50px;
}

.specimen-controls {
  min-height: var(--control-height);
  margin: 0 var(--page-padding);
  padding: 4px 32px;
  display: grid;
  grid-template-columns:
    minmax(5rem, 1fr)
    max-content
    minmax(16rem, max-content)
    minmax(5rem, 1fr);
  align-items: center;
  column-gap: clamp(1rem, 2vw, 2.5rem);
  border-radius: 999px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  white-space: nowrap;
}

.specimen-controls::-webkit-scrollbar {
  display: none;
}

.specimen-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weight-control {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  max-width: min(26vw, 22rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.weight-control::-webkit-scrollbar {
  display: none;
}

.weight-button,
.weight-name {
  flex: 0 0 auto;
}

.weight-button {
  transition: opacity .18s ease;
}

.size-control {
  display: grid;
  grid-template-columns: auto minmax(10rem, 1fr) 4.25rem;
  align-items: center;
  gap: clamp(.75rem, 1.4vw, 1.5rem);
  min-width: 0;
}

.size-label,
.size-control output {
  line-height: 1;
}

.size-control output {
  min-width: 4.25rem;
}

.size-slider {
  height: 2px;
}

.size-slider::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.size-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.buy-button {
  min-height: 32px;
  padding: .35em .8em;
  border-width: 1.5px;
  justify-content: center;
  transition: background-color .18s ease, color .18s ease;
}

.buy-button:hover,
.buy-button:focus-visible {
  background: #fff;
  color: #000;
}

.buy-button-placeholder {
  width: 0;
  height: 1px;
}

.specimen-text {
  line-height: var(--specimen-line-height, 1.4);
  transition: font-size .08s ease-out;
  contain: layout style;
}

html.is-resizing .specimen-text {
  transition: none;
}

.project-card {
  will-change: auto;
}

.project-card.is-layout-animating {
  will-change: transform;
}

@media (max-width: 1100px) {
  .specimen-controls {
    grid-template-columns:
      minmax(4.5rem, max-content)
      minmax(4.5rem, max-content)
      minmax(14rem, 1fr)
      max-content;
    column-gap: 1rem;
    padding-inline: 32px;
  }

  .weight-control {
    max-width: 20vw;
  }

  .size-control {
    grid-template-columns: auto minmax(8rem, 1fr) 4rem;
    gap: .75rem;
  }
}

@media (max-width: 760px) {
  .specimen-controls {
    grid-template-columns:
      minmax(4rem, max-content)
      minmax(4rem, max-content)
      minmax(11rem, 1fr)
      max-content;
    column-gap: .75rem;
  }

  .size-label {
    display: none;
  }

  .size-control {
    grid-template-columns: minmax(8rem, 1fr) 3.75rem;
    gap: .65rem;
  }

  .weight-control {
    max-width: 24vw;
  }
}

@media (max-width: 600px) {
  :root {
    --control-height: 50px;
  }

  .specimen-controls {
    grid-template-columns:
      minmax(3.75rem, max-content)
      minmax(3.75rem, max-content)
      minmax(9rem, 1fr)
      max-content;
    min-height: var(--control-height);
    margin-inline: 1rem;
    padding: 3px 32px;
    column-gap: .6rem;
  }

  .weight-control {
    max-width: 30vw;
    gap: .55rem;
  }

  .size-control {
    grid-template-columns: 1fr;
    gap: .5rem;
  }

  .size-slider,
  .size-control output {
    display: none;
  }

  .size-slider::-webkit-slider-thumb {
    width: 8px;
    height: 8px;
  }

  .size-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
  }

  .buy-button {
    min-height: 28px;
    padding: .3em .65em;
    border-width: 1px;
  }

  .specimen-text {
    line-height: var(--specimen-line-height, 1.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-card,
  .specimen-text,
  .weight-button,
  .buy-button {
    transition: none;
  }
}

/* v1.9.3: reveal the page only after specimen webfonts are ready */
html:not(.fonts-ready) body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html.fonts-ready body {
  pointer-events: auto;
}

/* v1.9.5: GPU-only About slide animation */
.about-panel-inner,
#main > .specimens,
#main > .portfolio {
  backface-visibility: hidden;
}

html.about-is-animating #main > .specimens,
html.about-is-animating #main > .portfolio {
  will-change: transform;
}

html.about-is-animating .about-panel-inner {
  will-change: transform, opacity, clip-path;
}

/* v1.9.6: smooth staggered About text reveal */
.about-column {
  opacity: 0;
  backface-visibility: hidden;
}

.about-panel.is-open .about-column {
  opacity: 1;
}

html.about-is-animating .about-column {
  will-change: opacity;
}

/* v1.9.10: force transparent text selection */
*::selection {
  background-color: rgba(0, 0, 0, 0) !important;
  color: inherit !important;
  text-shadow: none !important;
}

*::-moz-selection {
  background-color: rgba(0, 0, 0, 0) !important;
  color: inherit !important;
  text-shadow: none !important;
}

.specimen-text::selection,
.specimen-text *::selection {
  background-color: rgba(0, 0, 0, 0) !important;
  color: inherit !important;
}

.specimen-text::-moz-selection,
.specimen-text *::-moz-selection {
  background-color: rgba(0, 0, 0, 0) !important;
  color: inherit !important;
}