:root {
  --cat-ink: #111713;
  --cat-paper: #f4efe5;
  --cat-rule: rgba(17, 23, 19, .2);
  --cat-accent: #ef6d4e;
}

* { box-sizing: border-box; }
html { overflow-x: clip; background: var(--cat-paper); }
body.catalogue-page { margin: 0; background: var(--cat-paper); color: var(--cat-ink); font-family: Archivo, Arial, sans-serif; }
.catalogue-bar {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  padding-inline: max(22px, calc((100vw - 1500px) / 2));
  border-bottom: 1px solid var(--cat-rule);
}
.catalogue-bar a { color: inherit; font-size: 13px; font-weight: 700; text-decoration: none; }
.catalogue-bar__mark { display: inline-flex; align-items: center; gap: 10px; }
.catalogue-bar__mark span { display: grid; width: 31px; height: 31px; place-items: center; background: var(--cat-accent); color: #111713; font: 800 15px/1 Fragment Mono, monospace; transform: rotate(-3deg); }
.catalogue-bar__mark strong { font: 600 24px/1 Source Serif 4, Georgia, serif; }
.catalogue-main { width: min(1500px, calc(100% - 56px)); margin-inline: auto; padding: clamp(60px, 8vw, 118px) 0 100px; }
.catalogue-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: clamp(32px, 5vw, 64px); }
.catalogue-head h1 { max-width: 12ch; margin: 0; font: 500 clamp(42px, 6vw, 84px)/.94 Source Serif 4, Georgia, serif; letter-spacing: -.055em; }
.template-gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); }
.template-card { position: relative; display: block; min-width: 0; color: inherit; }
.template-card__number { position: absolute; top: 12px; left: 12px; z-index: 3; display: grid; width: 30px; height: 24px; place-items: center; background: var(--cat-accent); color: #111713; font: 700 9px/1 Fragment Mono, monospace; transform: rotate(-2deg); transition: transform 180ms ease; }
.template-card__screen { position: relative; height: clamp(260px, 28vw, 420px); overflow: hidden; border: 1px solid var(--cat-rule); background: #fff; box-shadow: 0 0 0 rgba(17, 23, 19, 0); transition: transform 220ms ease, box-shadow 220ms ease; }
.template-card__scaler { position: absolute; top: 0; left: 0; width: 1280px; transform-origin: top left; pointer-events: none; }
.template-card__scaler .site { min-height: 900px; }
.template-card__footer { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 13px 2px 0; border-top: 0; color: inherit; text-decoration: none; }
.template-card__footer::before { position: absolute; z-index: 4; inset: 0; content: ''; }
.template-card__footer strong, .template-card__footer i { position: relative; z-index: 5; }
.template-card__footer strong { font: 620 clamp(16px, 1.5vw, 21px)/1.2 Archivo, Arial, sans-serif; }
.template-card__footer i { font: 400 18px/1 Source Serif 4, serif; font-style: normal; transition: transform 180ms ease; }
.template-card:hover .template-card__screen,
.template-card:focus-within .template-card__screen { transform: translateY(-5px); box-shadow: 11px 13px 0 rgba(17, 23, 19, .12); }
.template-card:hover .template-card__number,
.template-card:focus-within .template-card__number { transform: rotate(2deg) scale(1.05); }
.template-card:hover .template-card__footer i,
.template-card:focus-within .template-card__footer i { transform: translate(3px, -3px); }
.template-card:focus-within { outline: 3px solid var(--cat-accent); outline-offset: 7px; }

@media (max-width: 980px) {
  .template-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-card__screen { height: clamp(250px, 42vw, 390px); }
}

@media (max-width: 560px) {
  .catalogue-bar { min-height: 66px; padding-inline: 18px; }
  .catalogue-main { width: calc(100% - 28px); padding-block: 48px 70px; }
  .catalogue-head { margin-bottom: 30px; }
  .catalogue-head h1 { font-size: clamp(38px, 12vw, 52px); }
  .template-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }
  .template-card__screen { height: 170px; }
  .template-card__number { top: 8px; left: 8px; width: 26px; height: 21px; }
  .template-card__footer { min-height: 48px; padding-top: 9px; }
  .template-card__footer strong { font-size: 13px; }
  .template-card__footer i { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .template-card__screen, .template-card__number, .template-card__footer i { transition: none; }
}