/* ==========================================================================
   LORENZ.OG — core stylesheet
   Stripped-back editorial commerce. Hairlines, heavy grotesque, one accent
   spectrum sampled from the AM95 gradient.
   ========================================================================== */

/* --- tokens --------------------------------------------------------------- */

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --paper-2: #f4f4f4;
  --rule: #e2e2e2;
  --rule-strong: #c9c9c9;
  --mute: #8c8c8c;
  --mute-2: #b4b4b4;

  /* sampled off the AM95 mesh: yellow -> orange -> magenta -> violet
     (stops mirrored rather than the angle flipped, so each colour keeps
     the same share of the run) */
  --s-violet: #4b2fcb;
  --s-purple: #7d2fd4;
  --s-magenta: #e0179b;
  --s-orange: #f4630e;
  --s-amber: #ffab00;
  --s-yellow: #ffd400;
  --spectrum: linear-gradient(
    90deg,
    var(--s-yellow) 0%,
    var(--s-amber) 14%,
    var(--s-orange) 32%,
    var(--s-magenta) 60%,
    var(--s-purple) 82%,
    var(--s-violet) 100%
  );

  --live: #12b76a;
  --gone: #9a9a9a;

  --font-display: "Helvetica Neue", "HelveticaNeue", Inter, Helvetica, Arial,
    sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    monospace;

  --gut: 20px;
  --head-h: 58px;
  --tick-h: 30px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 900px) {
  :root {
    --gut: 32px;
  }
}

/* --- reset ---------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
p,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

/* display:flex/grid on a component would otherwise beat the hidden attribute */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

:focus-visible {
  outline: 2px solid var(--s-magenta);
  outline-offset: 2px;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- type utilities ------------------------------------------------------- */

.mono {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mute {
  color: var(--mute);
}

.display {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.86;
  margin: 0;
}

.d-xl {
  font-size: clamp(3rem, 13vw, 11rem);
}
.d-lg {
  font-size: clamp(2.2rem, 7vw, 5rem);
}
.d-md {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
}
.d-sm {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.rule-t {
  border-top: 1px solid var(--rule);
}
.rule-b {
  border-bottom: 1px solid var(--rule);
}

.wrap {
  padding-inline: var(--gut);
}

.section {
  padding-block: clamp(48px, 7vw, 96px);
}

/* Breathing room between the last block on a page and the footer. */
.pad-end {
  padding-bottom: clamp(72px, 12vw, 160px);
}

/* Small label sat above a section, mono, with a leading marker */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 3px;
  background: var(--spectrum);
}

/* --- ticker --------------------------------------------------------------- */

.ticker {
  position: relative;
  z-index: 60;
  height: var(--tick-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid var(--ink);
}

.ticker__track {
  display: flex;
  flex: none;
  gap: 0;
  animation: slide 38s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__group {
  display: flex;
  flex: none;
  align-items: center;
  padding-right: 0;
}

.ticker__item {
  flex: none;
  padding-inline: 22px;
  white-space: nowrap;
}

.ticker__item span {
  color: var(--s-yellow);
}

@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}

/* --- header --------------------------------------------------------------- */

.head {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--head-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding-inline: var(--gut);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

/* Columns are placed explicitly. Without this, hiding .head__nav at mobile
   removes it as a grid item and the bag/burger group falls back into the
   middle column instead of sitting hard right. */
.head__logo {
  grid-column: 1;
  justify-self: start;
  display: block;
}

.head__logo img {
  height: 15px;
  width: auto;
}

.head__nav {
  grid-column: 2;
  justify-self: center;
  display: none;
  gap: 26px;
}

@media (min-width: 760px) {
  .head__nav {
    display: flex;
  }
}

.head__nav a {
  position: relative;
  padding-block: 4px;
  color: var(--mute);
  transition: color 0.2s;
}

.head__nav a:hover,
.head__nav a[aria-current="page"] {
  color: var(--ink);
}

.head__nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--spectrum);
}

.head__right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cart-btn {
  display: flex;
  align-items: center;
  gap: 7px;
}

.cart-btn__count {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
  transition: background 0.25s;
}

.cart-btn__count[data-filled="true"] {
  background: var(--s-magenta);
}

.burger {
  display: grid;
  gap: 4px;
  padding: 4px 0;
}

@media (min-width: 760px) {
  .burger {
    display: none;
  }
}

.burger i {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--ink);
  transition: transform 0.3s var(--ease), opacity 0.2s;
}

body[data-menu="open"] .burger i:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
body[data-menu="open"] .burger i:nth-child(2) {
  opacity: 0;
}
body[data-menu="open"] .burger i:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* mobile menu */
.mnav {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  padding: calc(var(--tick-h) + var(--head-h) + 8px) var(--gut) var(--gut);
  background: var(--paper);
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s, transform 0.28s var(--ease), visibility 0.28s;
}

body[data-menu="open"] .mnav {
  transform: none;
  opacity: 1;
  visibility: visible;
}

.mnav a {
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.mnav__foot {
  margin-top: auto;
  padding-top: 24px;
}

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding-inline: 26px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn:hover {
  background: var(--paper);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}

.btn--ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--block {
  width: 100%;
}

.btn[disabled] {
  background: var(--paper-2);
  color: var(--mute-2);
  border-color: var(--rule);
  cursor: not-allowed;
}

/* Inline text link with an animated rule under it */
.link {
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}

.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}

.link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- status pips ---------------------------------------------------------- */

.pip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gone);
}

.pip--live::before {
  background: var(--live);
  box-shadow: 0 0 0 0 rgba(18, 183, 106, 0.6);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 7px rgba(18, 183, 106, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(18, 183, 106, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pip--live::before {
    animation: none;
  }
}

/* --- hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  overflow: hidden;
}

/* Phones: the hero is capped to exactly the space below the ticker and
   header, and the image takes whatever is left after the copy has been laid
   out. The title and Cop now button therefore always sit on the first screen
   regardless of how tall the text runs — no fixed reserve to get wrong. */
@media (max-width: 759px) {
  .hero {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--tick-h) - var(--head-h));
    height: calc(100svh - var(--tick-h) - var(--head-h));
    min-height: 460px;
  }

  .hero__media {
    flex: 1 1 auto;
    min-height: 180px;
    height: auto;
  }

  .hero__copy {
    flex: 0 0 auto;
  }
}

/* Height on phones comes from the flex rule above; from 760px up the image
   drives the hero at a fixed ratio. */
.hero__media {
  position: relative;
}

@media (min-width: 760px) {
  .hero__media {
    aspect-ratio: 16 / 8;
  }
}

.hero__media picture {
  display: block;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  transform: scale(1.06);
}

/* From the breakpoint where the copy moves over the photo, push the product
   off-centre so the headline gets clear space beside it. */
@media (min-width: 760px) {
  .hero__media img {
    object-position: 72% 52%;
  }
}

/* Collab title + CTA.
   On phones this sits below the image — overlaying it puts black type across
   the sole. From 760px up it moves over the photo, held to the left column so
   it never covers the product. */
.hero__copy {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: 18px var(--gut) 26px;
}

@media (min-width: 760px) {
  .hero__copy {
    position: absolute;
    left: var(--gut);
    right: var(--gut);
    bottom: clamp(20px, 4vw, 48px);
    gap: clamp(14px, 2vw, 22px);
    padding: 0;
  }
}

@media (min-width: 900px) {
  .hero__copy {
    right: auto;
    max-width: 52%;
  }
}

.hero__title {
  max-width: 11ch;
  text-wrap: balance;
}

/* the × between the silhouette and the name */
.hero__title em {
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Solid plate behind the hero copy so it stays legible on any photograph */
.hero__plate {
  display: inline-block;
  padding: 4px 12px 6px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}

.hero__meta {
  display: grid;
  gap: 12px;
  padding: 16px var(--gut);
  border-top: 1px solid var(--rule);
}

@media (min-width: 760px) {
  .hero__meta {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    align-items: baseline;
  }
}

.hero__meta > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero__meta b {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}

/* --- countdown ------------------------------------------------------------ */

.count {
  display: flex;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.count b {
  font-weight: 600;
}

.count i {
  font-style: normal;
  color: var(--mute-2);
}

/* --- product page --------------------------------------------------------- */

.product {
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .product {
    grid-template-columns: 1.25fr 1fr;
  }
}

/* Wrapper holds the scroller and its dots together, so the dots stay put
   while the images move underneath.

   min-width:0 is load-bearing. As a grid item this defaults to min-width:auto,
   which sizes to its content — so the carousel inside stretches it to the full
   width of all slides and the whole page scrolls sideways instead of just the
   gallery. */
.product__media {
  min-width: 0;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .product__media {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
}

.product__gallery {
  display: grid;
  gap: 1px;
  min-width: 0;
  background: var(--rule);
}

/* Phones and tablets get a swipeable, snapping carousel instead of a tall
   stack — stacked, the sizes end up several screens down the page. */
@media (max-width: 899px) {
  .product__gallery {
    display: flex;
    gap: 0;
    background: var(--paper);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .product__gallery::-webkit-scrollbar {
    display: none;
  }

  /* every slide the same size, so the snap lands cleanly */
  .product__gallery > .frame {
    flex: 0 0 100%;
    scroll-snap-align: center;
    aspect-ratio: auto;
    height: calc(100vh - var(--tick-h) - var(--head-h) - 150px);
    height: calc(100svh - var(--tick-h) - var(--head-h) - 150px);
    max-height: 540px;
    min-height: 280px;
  }
}

/* Scoped two classes deep so these beat the later `.frame` rules, which
   otherwise win on source order at equal specificity.

   On desktop the lead fills the column for a full screen height, so the
   product is the whole left side on arrival. That panel lands between 0.91
   and 1.07 wide-to-tall across common displays, so a SQUARE source fills it
   with almost nothing cropped — see README for export specs. */
.product__gallery .product__lead {
  background: var(--paper);
}

@media (min-width: 900px) {
  .product__gallery .product__lead {
    aspect-ratio: auto;
    /* the ticker has scrolled away by the time this matters; only the
       sticky header keeps taking space */
    height: calc(100vh - var(--head-h));
    height: calc(100svh - var(--head-h));
  }
}

.product__gallery .product__lead img {
  object-fit: cover;
}

/* position dots — carousel only, hidden once the gallery stacks */
.product__dots {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  padding: 14px var(--gut);
  border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .product__dots {
    display: none;
  }
}

.product__dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rule-strong);
  transition: background 0.25s, transform 0.25s var(--ease);
}

.product__dots i[data-on="true"] {
  background: var(--ink);
  transform: scale(1.3);
}

.product__buy {
  padding: clamp(26px, 4vw, 48px) var(--gut);
  align-self: start;
}

@media (min-width: 900px) {
  .product__buy {
    position: sticky;
    top: calc(var(--head-h) + 1px);
  }
}

.product__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
}

.product__price b {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product__note {
  margin-top: 18px;
  max-width: 46ch;
  color: #4a4a4a;
  line-height: 1.55;
}

.product__sizes {
  margin-top: 26px;
}

.product__sizes-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

/* --- spec list ------------------------------------------------------------ */

/* Label/value rows — used for product detail, archive meta and the FAQ */
.spec {
  display: grid;
  gap: 0;
  margin-top: 26px;
  border-top: 1px solid var(--rule);
}

.spec div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
}

.spec dd {
  margin: 0;
  text-align: right;
}

/* --- size picker ---------------------------------------------------------- */

.sizes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
}

.size {
  height: 42px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.size:hover:not([disabled]) {
  border-color: var(--ink);
}

.size[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.size[disabled] {
  position: relative;
  color: var(--mute-2);
  border-color: var(--rule);
  cursor: not-allowed;
  overflow: hidden;
}

/* diagonal strike for sold-out sizes */
.size[disabled]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    var(--rule) 50%,
    transparent calc(50% + 0.5px)
  );
}

/* --- media frames --------------------------------------------------------- */

.frame {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  overflow: hidden;
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease);
}

a.frame:hover img,
.card:hover .frame img {
  transform: scale(1.035);
}

/* Placeholder standing in for photography not yet shot. Dither checkerboard
   echoes the halftone edge of the wordmark. */
.frame--ph {
  display: grid;
  place-items: center;
  background-color: var(--paper-2);
  background-image: repeating-conic-gradient(
    #e9e9e9 0% 25%,
    #f6f6f6 0% 50%
  );
  background-size: 12px 12px;
}

.frame--ph span {
  position: relative;
  padding: 7px 11px;
  background: var(--paper);
  color: var(--mute);
  box-shadow: 0 0 0 1px var(--rule);
}

.frame__tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 5px 9px;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}

.frame__tag--ink {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

/* --- product grid --------------------------------------------------------- */

.grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 900px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: 0 0 16px;
}

.card__body {
  display: grid;
  gap: 5px;
  padding: 14px var(--gut) 0;
}

.card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.card__name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.015em;
}

.card__price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.card[data-status="sold"] .frame img {
  filter: grayscale(1);
  opacity: 0.55;
}

/* filter row */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px var(--gut);
}

.filter {
  padding: 8px 14px;
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter:hover {
  border-color: var(--ink);
}

.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* --- archive list --------------------------------------------------------- */

.arc {
  border-top: 1px solid var(--rule);
}

.arc__row {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 20px var(--gut);
  border-bottom: 1px solid var(--rule);
  transition: background 0.2s, padding-left 0.35s var(--ease);
}

@media (min-width: 760px) {
  .arc__row {
    grid-template-columns: 74px 1.1fr 1fr 110px auto;
    gap: 24px;
  }
  .arc__row:hover {
    background: var(--paper-2);
    padding-left: calc(var(--gut) + 10px);
  }
}

.arc__title {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}

/* On narrow screens the row collapses to year / title / status — the brand and
   project-type columns are dropped rather than wrapped. */
.arc__brand,
.arc__type {
  display: none;
}

@media (min-width: 760px) {
  .arc__brand,
  .arc__type {
    display: block;
  }
}

/* floating preview that tracks the cursor over an archive row */
.arc__peek {
  position: fixed;
  z-index: 40;
  width: 250px;
  aspect-ratio: 4 / 3;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.25s, transform 0.35s var(--ease);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.arc__peek[data-on="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 759px) {
  .arc__peek {
    display: none;
  }
}

/* --- archive project page ------------------------------------------------- */

.proj__lead {
  aspect-ratio: 16 / 9;
}

@media (max-width: 619px) {
  .proj__lead {
    aspect-ratio: 4 / 3;
  }
}

/* Gallery for a single project — first tile runs full width, rest pair up */
.proj__gallery {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .proj__gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  }

/* prev / next between projects */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
}

.pager a,
.pager span {
  display: grid;
  gap: 7px;
  align-content: center;
  min-height: 108px;
  padding: 22px var(--gut);
  background: var(--paper);
  transition: background 0.2s;
}

.pager a:hover {
  background: var(--paper-2);
}

.pager .is-next {
  text-align: right;
  justify-items: end;
}

.pager__title {
  font-size: clamp(0.95rem, 1.8vw, 1.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  line-height: 1.1;
}

.pager span.is-empty {
  background: var(--paper-2);
}

/* --- manifesto ------------------------------------------------------------ */

.manifesto {
  display: grid;
  gap: 28px;
  padding-block: clamp(48px, 7vw, 90px);
}

@media (min-width: 900px) {
  .manifesto {
    grid-template-columns: 1fr 1.4fr;
    gap: 60px;
  }
}

.manifesto p + p {
  margin-top: 16px;
}

.manifesto__body {
  font-size: clamp(1.1rem, 2.1vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* --- contact -------------------------------------------------------------- */

.contact-cols {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .contact-cols {
    grid-template-columns: 1.5fr 1fr;
  }
}

/* --- forms ---------------------------------------------------------------- */

.field {
  display: grid;
  gap: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 14px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  font-size: 15px;
  transition: border-color 0.15s;
  appearance: none;
}

.field textarea {
  min-height: 130px;
  resize: vertical;
}

.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--mute-2);
}

.form-note {
  margin-top: 4px;
}

.form-ok {
  display: none;
  padding: 16px;
  border: 1px solid var(--ink);
  background: var(--paper-2);
}

.form-ok[data-on="true"] {
  display: block;
}

/* --- cart drawer ---------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(10, 10, 10, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}

body[data-cart="open"] .scrim {
  opacity: 1;
  visibility: visible;
}

.cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform 0.45s var(--ease);
}

body[data-cart="open"] .cart {
  transform: none;
}

.cart__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--head-h);
  flex: none;
  padding-inline: 20px;
  border-bottom: 1px solid var(--rule);
}

.cart__body {
  flex: 1;
  overflow-y: auto;
  padding-inline: 20px;
}

.cart__empty {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding-block: 40px;
}

.line {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 14px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}

.line__thumb {
  aspect-ratio: 1;
  background: var(--paper-2);
  overflow: hidden;
}

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

.line__main {
  display: grid;
  gap: 6px;
  align-content: start;
}

.line__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.line__name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}

.line__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}

.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--rule-strong);
}

.qty button {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s;
}

.qty button:hover {
  background: var(--paper-2);
}

.qty span {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.cart__foot {
  flex: none;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}

.cart__totals {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.cart__totals > div {
  display: flex;
  justify-content: space-between;
}

.cart__total {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* --- toast ---------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 95;
  padding: 12px 20px;
  background: var(--ink);
  color: var(--paper);
  transform: translate(-50%, 22px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, transform 0.4s var(--ease), visibility 0.3s;
}

.toast[data-on="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

/* --- footer --------------------------------------------------------------- */

.foot {
  background: var(--ink);
  color: var(--paper);
}

.foot a:hover {
  color: var(--s-yellow);
}

.foot__spectrum {
  height: 4px;
  background: var(--spectrum);
}

.foot__top {
  display: grid;
  gap: 40px;
  padding: clamp(44px, 6vw, 76px) var(--gut);
}

@media (min-width: 640px) {
  .foot__top {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

@media (min-width: 900px) {
  .foot__top {
    gap: 56px;
  }
}

.foot__col h3 {
  margin-bottom: 14px;
  color: var(--mute-2);
}

.foot__col li + li {
  margin-top: 9px;
}

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  padding: 16px var(--gut);
  border-top: 1px solid #262626;
  color: var(--mute);
}

/* --- reveal on scroll ----------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}