/*
Theme Name: Taper Holding Page
Theme URI: https://taper.studio/
Author: Taper Studio
Author URI: https://taper.studio/
Description: A self-contained editorial holding page for Taper Studio.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: taper-holding-page
*/

@font-face {
  font-family: "Taper Serif";
  src: url("assets/fonts/Sentient-Variable.woff2") format("woff2");
  font-display: swap;
  font-weight: 300 700;
}

@font-face {
  font-family: "Taper Sans";
  src: url("assets/fonts/InstrumentSans-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: "Taper Mono";
  src: url("assets/fonts/GeistMono-Regular.ttf") format("truetype");
  font-display: swap;
  font-weight: 400;
}

:root {
  --paper: #f6f3ed;
  --ink: #f8f6f1;
  --line: rgba(248, 246, 241, 0.34);
  --sans: "Taper Sans", Arial, sans-serif;
  --display: "Taper Serif", Georgia, serif;
  --mono: "Taper Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: #172a31;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.holding-page {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: clamp(1.5rem, 4vw, 5.75rem);
  background: #172a31;
}

.holding-page::before {
  background: linear-gradient(90deg, rgba(4, 17, 24, .66) 0%, rgba(4, 17, 24, .38) 58%, rgba(4, 17, 24, .24) 100%);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
}

.holding-page::after {
  background: linear-gradient(180deg, rgba(2, 11, 17, .08), rgba(2, 11, 17, .2));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.holding-page__image {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  width: 100%;
  z-index: -2;
}

.holding-header, .holding-content {
  margin: 0 auto;
  width: min(100%, 138rem);
}

.holding-header {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
}

.wordmark {
  display: inline-block;
  line-height: 0;
  width: clamp(10rem, 15vw, 17.5rem);
}

.wordmark img { display: block; width: 100%; }

.holding-header__tag, .holding-content__eyebrow {
  font-family: var(--mono);
  font-size: clamp(.62rem, .68vw, .8rem);
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.holding-header__tag { margin: .25rem 0 0; text-align: right; }

.holding-content {
  align-self: center;
  padding: clamp(5rem, 12vh, 9rem) 0 clamp(3.5rem, 8vh, 6rem);
}

.holding-content__eyebrow { margin: 0 0 clamp(1.1rem, 2vh, 1.6rem); }

.holding-content__title {
  font-family: var(--display);
  font-size: clamp(3.25rem, 6.15vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .92;
  margin: 0;
  max-width: 12.4ch;
  text-wrap: balance;
}

.holding-content__aside {
  margin-top: clamp(2.25rem, 4vh, 3.5rem);
}

.holding-content__copy {
  font-size: clamp(.95rem, 1.2vw, 1.25rem);
  letter-spacing: -.012em;
  line-height: 1.45;
  margin: 0 0 clamp(1.7rem, 3vh, 2.5rem);
  max-width: 42rem;
}

.project-link {
  align-items: center;
  display: inline-flex;
  background: #fa5b57;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: clamp(.66rem, .8vw, .82rem);
  font-weight: 400;
  justify-content: center;
  letter-spacing: .13em;
  min-width: clamp(13rem, 19vw, 18rem);
  padding: 1.15rem 1.8rem 1.1rem;
  text-decoration: none;
  text-transform: uppercase;
}

.project-link { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.project-link:hover, .project-link:focus-visible { background: #fff; color: #10232c; transform: translateY(-2px); }
.project-link:focus-visible { outline: 2px solid var(--ink); outline-offset: .35rem; }

.frame-corner { height: 2rem; pointer-events: none; position: absolute; width: 2rem; }
.frame-corner::before, .frame-corner::after { background: rgba(255,255,255,.72); content: ""; position: absolute; }
.frame-corner::before { height: 1px; width: 100%; }
.frame-corner::after { height: 100%; width: 1px; }
.frame-corner--tr { right: clamp(1.5rem, 4vw, 5.75rem); top: 24%; transform: rotate(90deg); }
.frame-corner--bl { bottom: clamp(4.5rem, 8vh, 7rem); left: clamp(1.5rem, 4vw, 5.75rem); transform: rotate(-90deg); }
.frame-corner--br { bottom: clamp(4.5rem, 8vh, 7rem); right: clamp(1.5rem, 4vw, 5.75rem); transform: rotate(180deg); }

@media (max-width: 680px) {
  .holding-page { padding: 1.25rem; }
  .holding-page::before { background: linear-gradient(180deg, rgba(6, 18, 23, .64), rgba(6, 18, 23, .74)); }
  .holding-header__tag { font-size: .57rem; max-width: 8rem; }
  .holding-content { padding: 5.5rem 0 3.5rem; }
  .holding-content__title { font-size: clamp(3rem, 14vw, 4.8rem); line-height: .94; }
  .holding-content__aside { margin-top: 2.5rem; max-width: 25rem; }
  .holding-content__copy { font-size: .95rem; }
  .project-link { min-width: 12.5rem; padding: 1rem 1.35rem .96rem; }
  .frame-corner--tr { right: 1.25rem; }
  .frame-corner--bl { bottom: 4.5rem; left: 1.25rem; }
  .frame-corner--br { bottom: 4.5rem; right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }