/* StrangeBastard: product photography, circuit, controls and workshop. */
/* Global defaults, header and footer: base.css. */

:root {
  --navy: #0b2029;
  --ink: #283b3d;
  --paper: #e8d9bd;
  --rule: rgba(94,76,57,.26);
  --mono: 'Courier New',Courier,monospace;
}

.page {
  width: 100%;
  overflow: hidden;
}

.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: normal;
  font-size: 11px;
  line-height: 1.65;
}

.tiny {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: normal;
}

.rule {
  height: 1px;
  width: 75px;
  background: currentcolor;
  opacity: 0.68;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 690px;
  background: rgb(8, 28, 38);
}

.hero-img {
  position: absolute;
  inset: 0px;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 47%;
  transform: scale(1.19);
  transform-origin: 70% 55%;
  filter: contrast(1.13) brightness(0.83) saturate(0.95);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.43) 13%, rgb(0, 0, 0) 39%, rgb(0, 0, 0) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0px;
  background: linear-gradient(90deg, rgb(7, 28, 37) 0%, rgba(7, 26, 35, 0.99) 24%, rgba(7, 26, 35, 0.83) 37%, rgba(7, 26, 35, 0.45) 54%, rgba(5, 19, 27, 0.38) 100%);
}

.hero-inner {
  padding: 72px clamp(29px, 5.1vw, 94px) 26px;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.hero-kicker {
  font: 11px/1.7 var(--mono);
  letter-spacing: 0.21em;
  text-transform: uppercase;
  color: rgb(225, 201, 162);
}

.hero h1 {
  font: clamp(78px, 8.2vw, 130px) / 0.84 Georgia, serif;
  color: rgb(241, 229, 203);
  text-shadow: rgba(10, 20, 22, 0.26) 0px 2px 12px;
  text-transform: uppercase;
  margin: 18px 0px 25px;
  letter-spacing: -0.075em;
}

.hero h1 > span {
  display: block;
}

.hero h1 .title-initial {
  display: inline;
  margin-right: -.055em;
}

.hero-intro {
  font: clamp(17px, 1.45vw, 20px) / 1.58 Georgia, serif;
  margin: 22px 0px 30px;
  color: rgb(235, 220, 193);
  max-width: 460px;
}

.hero .cta {
  display: inline-flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(236, 212, 169, 0.68);
  padding: 13px 18px;
  min-width: 258px;
  text-decoration: none;
  font: 11px/1.6 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.hero .cta:hover {
  background: rgba(244, 230, 202, 0.1);
}

.hero-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgb(199, 173, 131);
  border-top: 1px solid rgba(224, 196, 151, 0.28);
  padding-top: 15px;
  font: 11px/1.5 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 37px;
}

.paper {
  position: relative;
  color: var(--ink);
  background: #e8ddca url("../patterns/manual-paper.jpg") center / cover;
}

.section-index {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(115, 88, 53, 0.24);
  padding: 0px 0px 15px;
  font: 11px/1.55 var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(139, 113, 83);
  margin-bottom: 16px;
}

.manual-grid {
  position: relative;
  z-index: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}

.notes {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0px;
}

.notes h2 {
  font: clamp(32px, 3vw, 43px) / 1.04 Georgia, serif;
  letter-spacing: -0.045em;
  margin: 9px 0px 7px;
}

.controls h2 {
  font: clamp(32px, 3vw, 43px) / 1.04 Georgia, serif;
  letter-spacing: -0.045em;
  border-bottom: 1px solid var(--rule);
  margin: 9px 0px 18px;
  padding-bottom: 12px;
}

.notes .sub {
  font: 11px/1.65 var(--mono);
  text-transform: uppercase;
  color: rgb(119, 97, 70);
  font-size: 11px;
  letter-spacing: 0.13em;
  margin-bottom: 19px;
}

.notes .body {
  font: 16px/1.75 Georgia, serif;
  margin: 0 0 14px;
  max-width: 38ch;
  text-wrap: pretty;
}

.circuit-study {
  margin: 16px 0px 0px;
  width: 100%;
  position: relative;
  max-width: 360px;
}

.circuit-study a {
  display: block;
  background: transparent;
}

.circuit-study img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  opacity: 0.85;
  filter: grayscale(1);
}

.circuit-study figcaption {
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(124, 107, 88);
  margin: 6px 0px 0px;
  opacity: 0.9;
}

.front-figure {
  margin: 0px;
  align-self: stretch;
  position: relative;
  min-width: 0px;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  min-height: 545px;
}

.front-figure::before {
  content: "";
  position: absolute;
  opacity: 0.36;
  border-left: 1px solid rgba(123, 97, 62, 0.12);
  border-right: 1px solid rgba(123, 97, 62, 0.12);
  pointer-events: none;
  inset: 0px 10%;
  border-top-color: rgba(123, 97, 62, 0.12);
  border-bottom-color: rgba(123, 97, 62, 0.12);
}

.front-figure::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9%;
  bottom: 8%;
  width: 1px;
  background: rgba(111, 86, 58, 0.22);
  pointer-events: none;
  opacity: 0.34;
}

.front-photo {
  width: 100%;
  mask-composite: intersect;
  height: 555px;
  mix-blend-mode: multiply;
  filter: contrast(1.03) saturate(0.94);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 6%, #000 14%, #000 86%, transparent 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  object-fit: contain;
  object-position: 50% 50%;
}

.figure-tag {
  position: absolute;
  z-index: 1;
  left: 8%;
  top: 5%;
  font: 11px var(--mono);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgb(138, 112, 83);
}

.figure-id {
  position: absolute;
  z-index: 1;
  right: 8%;
  bottom: 7%;
  font: 11px var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(138, 112, 83);
}

.controls {
  align-self: center;
  height: 555px;
  display: grid;
  grid-template-rows: auto auto repeat(3, minmax(0, 1fr)) auto;
  padding: 0px;
}

.control {
  border-bottom: 1px solid var(--rule);
  display: grid;
  align-items: center;
  grid-template-columns: 69px 1fr;
  padding: 14px 0px;
  gap: 12px;
}

.control img {
  max-height: 85px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(.9);
  mask-image: radial-gradient(ellipse closest-side, #000 45%, rgba(0,0,0,.9) 64%, transparent 100%);
  width: 67px;
}

.control h3 {
  font: clamp(20px, 1.7vw, 25px) / 1.08 Georgia, serif;
  margin: 0px 0px 7px;
}

.control p {
  font: clamp(12px, 0.99vw, 14px) / 1.55 Georgia, serif;
  margin: 0px;
}

.control .tiny {
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.035em;
  color: rgb(128, 107, 76);
  margin-top: 6px;
  text-transform: none;
}

.manual-link {
  font: 11px/1.7 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  margin-top: 19px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgb(146, 119, 83);
}

.details {
  display: grid;
  background: var(--navy);
  border-block: 1px solid rgba(209, 183, 142, 0.29);
  min-height: 280px;
  grid-template-columns: 1.06fr 0.9fr 1.04fr;
}

.detail-img {
  position: relative;
  overflow: hidden;
  margin: 0px;
  background: rgb(16, 37, 45);
  min-height: 280px;
}

.detail-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0px;
}

.detail-img.first img {
  object-position: 41% 13%;
  transform: scale(1.66);
  transform-origin: 38% 18%;
}

.detail-img.last img {
  object-position: 72% 70%;
  transform: scale(1.5);
  transform-origin: 74% 73%;
}

.detail-img::after {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  background: none;
}

.detail-img figcaption {
  position: absolute;
  z-index: 1;
  bottom: 23px;
  left: 26px;
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(223, 204, 170);
}

.detail-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px clamp(24px, 3vw, 47px);
}

.detail-text h2 {
  font: clamp(30px, 2.9vw, 43px) / 1.03 Georgia, serif;
  letter-spacing: -0.05em;
  margin: 6px 0px 10px;
}

.detail-text p {
  font: 15px/1.65 Georgia, serif;
  text-wrap: pretty;
  color: rgb(212, 192, 162);
  margin: 0px 0px 14px;
}

.specs {
  border-top: 1px solid rgba(225, 199, 159, 0.34);
}

.specs div {
  border-bottom: 1px solid rgba(225, 199, 159, 0.22);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  font: 11px/1.45 var(--mono);
  letter-spacing: 0.04em;
  padding: 6px 0px;
}

.specs span {
  color: rgb(198, 169, 131);
  text-transform: uppercase;
}

.specs b {
  font-weight: normal;
  text-align: right;
}

.inside {
  position: relative;
  display: grid;
  background-image: radial-gradient(at 75% 50%, rgba(249, 237, 207, 0.23), transparent 60%), linear-gradient(100deg, rgb(234, 219, 190), rgb(226, 204, 170));
  background-color: rgb(231, 215, 185);
  color: rgb(40, 62, 64);
  overflow: hidden;
  min-height: 465px;
  grid-template-columns: minmax(280px, 0.78fr) minmax(490px, 1.35fr);
}

.inside-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px 20px 36px clamp(30px, 5vw, 94px);
  justify-content: center;
}

.inside-text h2 {
  font: clamp(36px, 3.5vw, 53px) / 1.04 Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.018em;
  margin: 8px 0px;
}

.inside-text h3 {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin: 0px 0px 20px;
  color: rgb(127, 104, 73);
  font-weight: normal;
  font-size: 11px;
}

.inside-text p {
  font: clamp(14px, 1.12vw, 16px) / 1.65 Georgia, serif;
  margin: 0px 0px 18px;
  max-width: 335px;
}

.inside-photo {
  position: relative;
  min-width: 0px;
  margin: 0px;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 465px;
}

.inside-photo img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0px;
  object-fit: cover;
  mask-composite: intersect;
  object-position: 50% 36%;
  filter: saturate(0.84) contrast(1.045) sepia(0.028);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.75) 12%, rgb(0, 0, 0) 26%, rgb(0, 0, 0) 100%);
}

.inside-photo::after {
  content: "";
  position: absolute;
  inset: 0px;
  pointer-events: none;
  opacity: 0.33;
  background: none;
}

.inside-photo figcaption {
  position: absolute;
  z-index: 1;
  font: 11px/1.5 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(91, 72, 48);
  right: 25px;
  bottom: 18px;
}

.inside-note {
  position: absolute;
  z-index: 1;
  font: italic 17px / 1.38 Georgia, serif;
  transform: rotate(-8deg);
  color: rgb(140, 110, 73);
  text-align: center;
  right: 27px;
  top: 24px;
  opacity: 0.75;
}

.closing {
  background: rgb(13, 41, 52);
  color: rgb(237, 223, 197);
  display: flex;
  justify-content: space-between;
  gap: 25px;
  padding: 25px clamp(30px, 5vw, 94px);
  min-height: 130px;
  align-items: center;
}

.closing h2 {
  font: clamp(27px, 2.9vw, 44px) / 1.05 Georgia, serif;
  letter-spacing: -0.05em;
  margin: 7px 0px;
}

.closing p {
  font: 13px / 1.7 Georgia, serif;
  color: rgb(205, 183, 147);
  margin: 0px;
}

.closing a {
  font: 11px/1.65 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(235, 207, 165, 0.56);
  padding: 14px 17px;
  white-space: nowrap;
}

.hero-copy {
  max-width: 595px;
}

.paper-spread {
  padding: 32px var(--site-gutter) 44px;
}

/* Original manual paper, with restrained registration marks around the spread. */
.paper-spread::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(97, 82, 62, .2);
  pointer-events: none;
}

.paper-register {
  position: absolute;
  width: 11px;
  height: 11px;
  color: rgba(97, 82, 62, .4);
  pointer-events: none;
}

.paper-register::before,
.paper-register::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.paper-register::before {
  top: 5px;
  width: 11px;
  height: 1px;
}

.paper-register::after {
  left: 5px;
  width: 1px;
  height: 11px;
}

.paper-register--tl { top: 13px; left: 13px; }
.paper-register--tr { top: 13px; right: 13px; }
.paper-register--bl { bottom: 13px; left: 13px; }
.paper-register--br { bottom: 13px; right: 13px; }

.controls .tiny {
  font-size: 11px;
}

.eyebrow--details {
  color: rgb(187, 153, 112);
}

.eyebrow--contact {
  color: rgb(197, 164, 126);
}

@media (max-width: 1180px) {

  .controls {
    height: 520px;
  }

  .controls .control {
    grid-template-columns: 55px 1fr;
    gap: 8px;
    padding: 18px 0px;
  }

  .hero {
    min-height: 600px;
  }

  .hero-inner {
    padding-top: 72px;
  }

  .manual-grid {
    grid-template-columns: minmax(190px, 0.8fr) minmax(300px, 1.14fr) minmax(210px, 0.89fr);
  }

  .front-figure {
    min-height: 510px;
  }

  .front-photo {
    height: 520px;
  }

  .notes h2 {
    font-size: 34px;
  }

  .inside {
    min-height: 460px;
  }

  .inside-photo {
    min-height: 460px;
  }
}

@media (max-width: 900px) {

  .controls {
    height: auto;
    grid-template-rows: none;
    column-gap: 18px;
    align-self: start;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0px, 1fr));
  }

  .manual-link {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .detail-img.last {
    display: none;
  }

  .hero {
    min-height: 650px;
  }

  .hero-img {
    object-position: 65% 48%;
    transform: scale(1.08);
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(7, 26, 35, 0.98), rgba(7, 26, 35, 0.83) 43%, rgba(7, 26, 35, 0.3) 100%);
  }

  .manual-grid {
    grid-template-columns: minmax(200px, 0.9fr) minmax(270px, 1.1fr);
    gap: 14px;
  }

  .controls > .eyebrow,
  .controls h2 {
    grid-column: 1 / -1;
  }

  .control {
    grid-template-columns: 54px 1fr;
  }

  .inside {
    grid-template-columns: minmax(250px, 0.79fr) minmax(320px, 1.2fr);
  }
}

@media (max-width: 640px) {

  .hero-inner {
    padding-right: 23px;
    padding-left: 23px;
    padding-top: 72px;
  }

  .hero-kicker {
    font-size: 11px;
  }

  .hero .cta {
    min-width: 250px;
  }

  .hero-bottom {
    font-size: 11px;
    gap: 12px;
  }

  .section-index {
    font-size: 11px;
    gap: 8px;
  }

  .notes {
    padding-right: 0px;
    padding-left: 0px;
    width: 100%;
  }

  .circuit-study {
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .controls {
    align-self: stretch;
    display: block;
    width: 100%;
  }

  .control {
    display: grid;
    grid-template-columns: 72px 1fr;
  }

  .details {
    display: flex;
    flex-direction: column;
  }

  .detail-img.last {
    display: block;
    min-height: 230px;
  }

  .inside-note {
    font-size: 14px;
  }

  .closing {
    flex-direction: column;
    padding: 30px 26px;
  }

  .closing a {
    white-space: normal;
  }

  .hero {
    min-height: 655px;
  }

  .hero-img {
    opacity: 0.8;
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0, 0, 0) 38%, rgb(0, 0, 0) 100%);
    left: 0px;
    right: 0px;
    width: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    transform: none;
  }

  .hero h1 {
    font-size: clamp(58px, 14.6vw, 86px);
  }

  .paper-spread {
    padding: 27px 23px 33px;
  }

  .manual-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 0px;
  }

  .notes h2 {
    font-size: 38px;
  }

  .notes .body {
    font-size: 15px;
  }

  .front-figure {
    width: 100%;
    min-height: 520px;
  }

  .front-photo {
    height: 530px;
    max-width: 440px;
  }

  .controls h2 {
    font-size: 38px;
  }

  .control img {
    width: 70px;
  }

  .detail-img {
    min-height: 255px;
  }

  .detail-text {
    padding: 28px 25px;
  }

  .inside {
    display: flex;
    flex-direction: column;
    min-height: 0px;
  }

  .inside-text {
    padding: 39px 27px 24px;
  }

  .inside-text h2 {
    font-size: 43px;
  }

  .inside-photo {
    min-height: 550px;
  }

  .inside-photo img {
    object-position: 50% 35%;
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 100%);
  }

  .hero::before {
    background: linear-gradient(90deg, rgba(7, 25, 34, 0.92), rgba(7, 25, 34, 0.73) 50%, rgba(7, 25, 34, 0.35) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {

  ::before {
    scroll-behavior: auto !important;
    transition: none !important;
  }

  ::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (min-width: 901px) {

  .hero-img {
    inset: 0px 0px 0px 23%;
    width: 77%;
    height: 100%;
    object-fit: cover;
    object-position: 47% 48%;
    transform: none;
    filter: contrast(1.095) brightness(0.9) saturate(0.96);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 54%, rgba(0, 0, 0, 0.47) 80%, transparent 100%);
  }

  .hero::before {
    background: linear-gradient(90deg, rgb(7, 28, 37) 0%, rgba(7, 25, 34, 0.99) 26%, rgba(7, 26, 35, 0.71) 40%, rgba(7, 26, 35, 0.1) 55%, rgba(7, 26, 35, 0.26) 85%, rgb(7, 28, 37) 100%);
  }
}