/* Homepage: product introductions and technical plates. */
/* Global defaults, header and footer: base.css. */

:root {
  --ink: #162f3b;
  --paper: #e9dbb9;
  --red: #c64c3c;
}

.drafting {
  background: radial-gradient(at 69% 42%, rgb(38, 71, 82) 0%, rgb(25, 56, 70) 52%, rgb(17, 43, 55) 100%);
  position: relative;
  isolation: isolate;
}

.drafting::before {
  content: "";
  position: absolute;
  inset: 0px;
  z-index: -1;
  opacity: 0.14;
  background: url("../patterns/point-cross.svg") 0% 0% / 120px 120px repeat;
}

.hero {
  max-width: 1480px;
  margin: auto;
  min-height: 695px;
  padding: 66px clamp(35px, 6.2vw, 100px) 55px;
  display: grid;
  grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
  align-items: center;
  gap: 0px;
}

.hero-copy {
  position: relative;
  z-index: 2;
}

.eyebrow {
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgb(215, 185, 135);
  font: 11px / 1.5 "Courier New", monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 45px;
}

.red {
  background: var(--red);
  height: 9px;
  width: 9px;
  border-radius: 50%;
  box-shadow: rgba(226, 64, 48, 0.65) 0px 0px 12px;
  display: inline-block;
  flex-shrink: 0;
}

.hero h1 {
  font: clamp(80px, 8vw, 119px) / 0.86 Georgia, serif;
  margin: 0px;
  color: rgb(245, 230, 199);
  letter-spacing: -0.04em;
}

.hero h1 em {
  display: block;
  margin-top: 14px;
  color: rgb(201, 166, 117);
  font-style: italic;
  font-size: 0.91em;
  letter-spacing: -0.032em;
}

.hero .product-kind {
  margin: 39px 0px 0px;
  font: 11px / 1.8 "Courier New", monospace;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgb(223, 188, 134);
}

.hero p {
  font-size: 18px;
  line-height: 1.65;
  color: rgb(227, 215, 193);
  max-width: 410px;
  margin: 25px 0px 32px;
}

.action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  max-width: 333px;
  padding: 14px 0px;
  border-top: 1px solid rgb(195, 162, 115);
  border-bottom: 1px solid rgb(195, 162, 115);
  text-decoration: none;
  font: 11px / 1.5 "Courier New", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.action span {
  font-size: 22px;
  color: rgb(219, 193, 143);
}

.technical {
  position: relative;
  height: 609px;
  margin-left: 0px;
  min-width: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.technical::before {
  position: absolute;
  content: "";
  inset: 13px 4px 18px;
  border: 1px solid rgba(219, 183, 128, 0.34);
}

.technical .axis-x {
  position: absolute;
  background: rgba(219, 183, 128, 0.25);
  height: 1px;
  width: 100%;
  top: calc(50% + 17px);
}

.technical .axis-y {
  position: absolute;
  background: rgba(219, 183, 128, 0.25);
  width: 1px;
  height: 100%;
  left: calc(50% - 4px);
}

.technical img {
  height: 548px;
  width: auto;
  object-fit: contain;
  position: relative;
  z-index: 1;
  opacity: 0.96;
}

.figcap {
  position: absolute;
  font: 11px / 1.4 "Courier New", monospace;
  color: rgb(210, 180, 132);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.f1 {
  left: 4px;
  top: -2px;
}

.f2 {
  right: 5px;
  top: -2px;
}

.f3 {
  left: 4px;
  bottom: 0px;
}

.endpaper {
  background: var(--paper);
  color: var(--ink);
  padding: 47px clamp(28px, 6.1vw, 98px);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
  border-top: 1px solid rgba(198, 173, 120, 0.55);
}

.endpaper h2 {
  margin: 0px 0px 9px;
  font-size: clamp(30px, 3.3vw, 44px);
  font-weight: normal;
  letter-spacing: -0.06em;
}

.endpaper p {
  margin: 0px;
  font-size: 16px;
  line-height: 1.7;
}

.endpaper .newsletter-label {
  margin-bottom: 14px;
  font: 10px/1.6 var(--site-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #69583e;
}

.endpaper a {
  white-space: nowrap;
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  font: 12px / 1.5 "Courier New", monospace;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 44px;
  padding-block: 10px;
}

.hero-product-link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.hero-product-link em {
  color: rgb(201, 166, 117);
}

.hero-product-link:hover em {
  color: rgb(236, 208, 162);
}

.hero-product-link:focus-visible em {
  color: rgb(236, 208, 162);
}

.drawing-product-link {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 1;
  text-decoration: none;
}

.technical .drawing-product-link img {
  height: 548px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  position: relative;
  z-index: 1;
  opacity: 0.96;
  transition: opacity 0.25s;
}

.drawing-product-link:hover img {
  opacity: 1;
  filter: brightness(1.14);
}




.page {
  max-width: none;
  width: 100%;
  margin: 0px;
  border-width: medium;
  border-style: none;
  border-color: currentcolor;
  border-image: none;
  box-shadow: none;
  overflow: hidden;
}

@media (max-width: 1100px) {

  .hero {
    padding-inline: 45px;
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  }

  .hero h1 {
    font-size: clamp(66px, 8vw, 103px);
  }

  .technical {
    height: 530px;
  }

  .technical img {
    height: 465px;
  }

  .endpaper {
    padding-left: 45px;
    padding-right: 45px;
  }

  .technical .axis-y {
    left: calc(50% - 3.5px);
  }

  .technical .axis-x {
    top: calc(50% + 14px);
  }

  .technical .drawing-product-link img {
    height: 465px;
  }

}

@media (max-width: 750px) {

  .hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 52px 38px 46px;
  }

  .hero h1 {
    font-size: clamp(79px, 13vw, 117px);
  }

  .eyebrow {
    margin-bottom: 29px;
  }

  .technical {
    width: min(100%, 580px);
    margin: auto;
    height: 550px;
  }

  .technical img {
    height: 495px;
  }

  .endpaper {
    padding: 38px;
  }

  .technical .axis-y {
    left: calc(50% - 3.5px);
  }

  .technical .axis-x {
    top: calc(50% + 15px);
  }

  .technical .drawing-product-link img {
    height: 495px;
  }

}

@media (max-width: 560px) {

  .hero {
    padding: 50px 23px 35px;
    gap: 21px;
  }

  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.11em;
  }

  .hero h1 {
    font-size: clamp(63px, 14vw, 87px);
  }

  .hero .product-kind {
    font-size: 11px;
    line-height: 1.8;
    margin-top: 28px;
  }

  .hero p {
    font-size: 16px;
    margin: 23px 0px;
  }

  .action {
    font-size: 11px;
  }

  .technical {
    height: 460px;
  }

  .technical img {
    height: 420px;
  }

  .figcap {
    font-size: 11px;
  }

  .endpaper {
    display: block;
    padding: 33px 23px;
  }

  .endpaper h2 {
    font-size: 33px;
  }

  .endpaper a {
    display: inline-block;
    margin-top: 23px;
    font-size: 11px;
  }

  .technical .axis-y {
    left: calc(50% - 3px);
  }

  .technical .axis-x {
    top: calc(50% + 13px);
  }

  .technical .drawing-product-link img {
    height: 420px;
  }

  .page {
    margin: 0px;
  }

}

@media (min-width: 791px) {

  .page {
    --sheet-gutter: clamp(40px, 5.5vw, 100px);
  }

  .hero {
    width: 100%;
    max-width: none;
    padding-left: var(--sheet-gutter);
    padding-right: var(--sheet-gutter);
    grid-template-columns: minmax(0px, 46fr) minmax(0px, 54fr);
    column-gap: clamp(22px, 2.4vw, 42px);
    align-items: start;
  }

  .hero-copy {
    max-width: 570px;
    align-self: start;
  }

  .technical {
    min-width: 0px;
    place-self: start stretch;
    margin: 0px;
  }

  .technical::before {
    left: 0px;
    right: 0px;
  }

  .f1 {
    left: 0px;
  }

  .f3 {
    left: 0px;
  }

  .f2 {
    right: 0px;
  }

  .action {
    max-width: 410px;
  }

  .endpaper {
    padding-left: var(--sheet-gutter);
    padding-right: var(--sheet-gutter);
  }

  .endpaper a {
    text-align: right;
  }
}