/* ==========================================================
   PEDERSEN ART STUDIO
   art.pedersensoftware.com
========================================================== */


:root {

  --bg: #0b0b0d;

  --surface: #121316;

  --surface-2: #18191d;

  --text: #f4f1ea;

  --muted: #9a9ba0;

  --line: rgba(255, 255, 255, 0.12);

  --gold: #b69258;

  --gold-light: #d0b37d;

  --max: 1440px;

  --pad: clamp(24px, 4vw, 72px);

  --serif: "Playfair Display", Georgia, serif;

  --sans: "Inter", Arial, sans-serif;

}


/* ==========================================================
   GLOBAL
========================================================== */


* {
  box-sizing: border-box;
}


html {

  scroll-behavior: smooth;

  background: var(--bg);

}


body {

  margin: 0;

  color: var(--text);

  background:
    radial-gradient(
      circle at 75% 15%,
      rgba(182, 146, 88, 0.05),
      transparent 25%
    ),
    var(--bg);

  font-family: var(--sans);

  font-size: 16px;

  line-height: 1.6;

}


a {
  color: inherit;
}


/* ==========================================================
   ACCESSIBILITY
========================================================== */


.skip-link {

  position: absolute;

  left: -9999px;

  top: 10px;

  z-index: 9999;

  padding: 12px 16px;

  background: var(--text);

  color: var(--bg);

}


.skip-link:focus {
  left: 10px;
}


/* ==========================================================
   HEADER
========================================================== */


.site-header {

  position: fixed;

  inset: 0 0 auto 0;

  z-index: 100;

  height: 92px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 var(--pad);

  border-bottom: 1px solid transparent;

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    height 0.25s ease;

}


.site-header.scrolled {

  height: 76px;

  background: rgba(11, 11, 13, 0.9);

  border-color: var(--line);

  backdrop-filter: blur(18px);

}


/* ==========================================================
   BRAND
========================================================== */


.brand {

  display: inline-grid;

  gap: 1px;

  text-decoration: none;

  letter-spacing: 0.18em;

  line-height: 1;

}


.brand-main {

  font-size: 15px;

  font-weight: 600;

}


.brand-sub {

  font-size: 10px;

  color: var(--gold-light);

  letter-spacing: 0.28em;

}


/* ==========================================================
   NAVIGATION
========================================================== */


.site-nav {

  display: flex;

  gap: clamp(22px, 3vw, 48px);

}


.site-nav a {

  font-size: 13px;

  color: rgba(255, 255, 255, 0.82);

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  transition: color 0.2s ease;

}


.site-nav a:hover {

  color: var(--text);

}


/* ==========================================================
   MOBILE MENU
========================================================== */


.menu-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border: 0;

  background: transparent;

}


.menu-toggle span {

  display: block;

  width: 22px;

  height: 1px;

  margin: 6px auto;

  background: var(--text);

}


/* ==========================================================
   HERO
========================================================== */


.hero {

  position: relative;

  min-height: 100svh;

  display: flex;

  align-items: flex-end;

  overflow: hidden;

  padding:
    140px
    var(--pad)
    clamp(88px, 10vw, 150px);

}


/* HERO IMAGE */


.hero-art {

  position: absolute;

  inset: 0;

  z-index: 0;

  background:

    linear-gradient(
      120deg,
      rgba(50, 29, 8, 0.08),
      rgba(15, 22, 33, 0.08)
    ),

    url("../images/hero/hero.png")
    center / cover
    no-repeat,

    radial-gradient(
      circle at 70% 30%,
      #453018 0,
      #191a20 38%,
      #08090b 76%
    );

  transform: scale(1.02);

}


/* HERO TEXT DARKENING */


.hero-overlay {

  position: absolute;

  inset: 0;

  z-index: 1;

  background:

    linear-gradient(
      90deg,
      rgba(4, 4, 6, 0.92) 0%,
      rgba(4, 4, 6, 0.72) 30%,
      rgba(4, 4, 6, 0.40) 52%,
      rgba(4, 4, 6, 0.14) 76%,
      rgba(4, 4, 6, 0.04) 100%
    ),

    linear-gradient(
      0deg,
      rgba(4, 4, 6, 0.66),
      transparent 48%
    );

}


.hero-content {

  position: relative;

  z-index: 2;

  width: min(820px, 100%);

}


/* ==========================================================
   LABELS
========================================================== */


.eyebrow,
.section-kicker,
.art-code,
.footer-title {

  margin: 0 0 18px;

  color: var(--gold-light);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.19em;

  text-transform: uppercase;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */


.hero h1,
.section h2,
.manifesto-line,
.contact-panel h2 {

  font-family: var(--serif);

  font-weight: 500;

  letter-spacing: -0.025em;

}


.hero h1 {

  margin: 0;

  font-size: clamp(64px, 9vw, 140px);

  line-height: 0.86;

}


.hero h1 em {

  color: var(--gold-light);

  font-weight: 500;

}


.hero-copy {

  max-width: 650px;

  margin: 34px 0 0;

  color: rgba(255, 255, 255, 0.75);

  font-size: clamp(17px, 1.5vw, 21px);

}


/* ==========================================================
   HERO BUTTONS
========================================================== */


.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 38px;

}


.button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 52px;

  padding: 0 25px;

  border: 1px solid var(--line);

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  font-size: 11px;

  font-weight: 600;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;

}


.button:hover {

  transform: translateY(-2px);

}


.button-primary {

  background: var(--text);

  color: var(--bg);

  border-color: var(--text);

}


.button-ghost {

  background: rgba(255, 255, 255, 0.03);

}


/* ==========================================================
   HERO CAPTION
========================================================== */


.hero-caption {

  position: absolute;

  z-index: 2;

  left: var(--pad);

  right: var(--pad);

  bottom: 28px;

  display: flex;

  justify-content: space-between;

  padding-top: 14px;

  border-top: 1px solid rgba(255, 255, 255, 0.18);

  color: rgba(255, 255, 255, 0.48);

  font-size: 9px;

  letter-spacing: 0.2em;

}


/* ==========================================================
   GENERAL SECTIONS
========================================================== */


.section {

  width: min(var(--max), 100%);

  margin: 0 auto;

  padding:
    clamp(90px, 10vw, 160px)
    var(--pad);

}


/* ==========================================================
   INTRO
========================================================== */


.intro {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: clamp(50px, 10vw, 150px);

  align-items: end;

}


.section h2 {

  margin: 0;

  max-width: 900px;

  font-size: clamp(44px, 5.5vw, 88px);

  line-height: 1;

}


.intro-copy {

  margin: 0;

  color: var(--muted);

  font-size: clamp(17px, 1.4vw, 21px);

}


/* ==========================================================
   SECTION HEADINGS
========================================================== */


.section-heading {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 40px;

  margin-bottom: 54px;

}


.section-heading > p {

  max-width: 390px;

  margin: 0 0 8px;

  color: var(--muted);

}


/* ==========================================================
   FEATURED ARTWORK GRID
========================================================== */


.gallery-grid {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  grid-auto-flow: dense;

  gap: clamp(16px, 2vw, 28px);

}


.art-card {

  position: relative;

  min-height: 500px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.08);

  background: var(--surface);

  cursor: zoom-in;

}


.art-card-tall {

  min-height: 760px;

}


.art-card-wide {

  min-height: 560px;

  grid-column: span 2;

}


/* ==========================================================
   ARTWORK IMAGES
========================================================== */


.art-surface {

  position: absolute;

  inset: 0;

  background-position: center;

  background-size: cover;

  transition:
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s ease;

}


.artwork-1 {

  background:

    linear-gradient(
      150deg,
      rgba(8, 8, 12, 0.03),
      rgba(20, 5, 30, 0.12)
    ),

    url("../images/artwork/featured-01.png")
    center / cover
    no-repeat,

    linear-gradient(
      135deg,
      #201728,
      #5a3a28 50%,
      #13161d
    );

}


.artwork-2 {

  background:

    linear-gradient(
      150deg,
      rgba(8, 8, 12, 0.03),
      rgba(4, 16, 30, 0.08)
    ),

    url("../images/artwork/featured-02.png")
    center / cover
    no-repeat,

    radial-gradient(
      circle at 65% 35%,
      #193c50,
      #17172a 45%,
      #0b0b0f
    );

}


.artwork-3 {

  background:

    linear-gradient(
      150deg,
      rgba(8, 8, 12, 0.02),
      rgba(20, 0, 20, 0.10)
    ),

    url("../images/artwork/animated-characters/PAS-ANI-0001.webp")
    center / cover
    no-repeat,

    radial-gradient(
      circle at 55% 30%,
      #652357,
      #1b1530 40%,
      #09090c
    );

}


.artwork-4 {

  background:

    linear-gradient(
      150deg,
      rgba(8, 8, 12, 0.02),
      rgba(10, 15, 10, 0.08)
    ),

    url("../images/artwork/featured-04.png")
    center / cover
    no-repeat,

    linear-gradient(
      120deg,
      #18302d,
      #5b4a2f 48%,
      #18212b
    );

}


.art-card:hover .art-surface {

  transform: scale(1.035);

}


.art-card::after {

  content: "";

  position: absolute;

  inset: 45% 0 0;

  background:
    linear-gradient(
      transparent,
      rgba(0, 0, 0, 0.88)
    );

  pointer-events: none;

}


/* ==========================================================
   ARTWORK LABELS
========================================================== */


.art-meta {

  position: absolute;

  z-index: 2;

  left: 28px;

  right: 28px;

  bottom: 24px;

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 24px;

}


.art-meta h3 {

  margin: 0;

  font-family: var(--serif);

  font-size: clamp(26px, 2.5vw, 42px);

  font-weight: 500;

}


.art-meta .art-code {

  margin-bottom: 6px;

}


.art-meta > span {

  color: rgba(255, 255, 255, 0.55);

  font-size: 9px;

  letter-spacing: 0.18em;

}


/* ==========================================================
   COLLECTIONS
========================================================== */


.collections {

  padding-top: 80px;

}


.collection-list {

  border-top: 1px solid var(--line);

}


.collection-row {

  display: grid;

  grid-template-columns:
    90px
    1fr
    50px;

  align-items: center;

  gap: 26px;

  min-height: 132px;

  border-bottom: 1px solid var(--line);

  text-decoration: none;

  transition:
    padding 0.25s ease,
    background 0.25s ease;

}


.collection-row:hover {

  padding-left: 18px;

  background: rgba(255, 255, 255, 0.025);

}


.collection-number {

  color: var(--gold);

  font-size: 11px;

  letter-spacing: 0.16em;

}


.collection-row h3 {

  margin: 0 0 4px;

  font-family: var(--serif);

  font-size: clamp(30px, 3vw, 46px);

  font-weight: 500;

}


.collection-row p {

  margin: 0;

  color: var(--muted);

}


.collection-arrow {

  justify-self: end;

  font-size: 24px;

  color: var(--gold-light);

}


/* ==========================================================
   MANIFESTO
========================================================== */


.manifesto {

  margin: 40px 0;

  padding:
    clamp(90px, 12vw, 180px)
    var(--pad);

  border-block: 1px solid var(--line);

  background:

    linear-gradient(
      135deg,
      rgba(182, 146, 88, 0.09),
      transparent 40%
    ),

    var(--surface);

}


.manifesto-inner {

  width: min(1150px, 100%);

  margin: 0 auto;

}


.manifesto-line {

  margin: 0;

  font-size: clamp(42px, 5.4vw, 86px);

  line-height: 1.05;

}


/* ==========================================================
   ABOUT
========================================================== */


.about-grid {

  display: grid;

  grid-template-columns:
    0.9fr
    1.1fr;

  gap: clamp(50px, 10vw, 140px);

}


.about-copy {

  max-width: 680px;

  color: var(--muted);

  font-size: clamp(17px, 1.5vw, 21px);

}


.about-copy p {

  margin: 0 0 24px;

}


/* ==========================================================
   SPORTS ARTWORK NOTICE
========================================================== */


.legal-notice {

  padding-top: 20px;

  padding-bottom: 100px;

}


.legal-notice-inner {

  max-width: 960px;

  padding: clamp(34px, 5vw, 62px);

  border:
    1px solid
    rgba(182, 146, 88, 0.24);

  background:

    linear-gradient(
      135deg,
      rgba(182, 146, 88, 0.055),
      transparent 48%
    ),

    rgba(255, 255, 255, 0.016);

}


.legal-notice-inner h2 {

  margin: 0 0 30px;

  max-width: 700px;

  font-size: clamp(34px, 4vw, 58px);

}


.legal-notice-inner p:not(.section-kicker) {

  max-width: 820px;

  margin: 0 0 19px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.85;

}


.legal-notice-inner .legal-note {

  margin-top: 30px;

  padding-top: 24px;

  border-top: 1px solid var(--line);

  color: var(--gold-light);

  font-size: 11px;

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

}


/* ==========================================================
   CONTACT
========================================================== */


.contact {

  padding-top: 40px;

}


.contact-panel {

  padding: clamp(45px, 7vw, 100px);

  border: 1px solid var(--line);

  background:

    radial-gradient(
      circle at 75% 20%,
      rgba(182, 146, 88, 0.13),
      transparent 24%
    ),

    var(--surface);

}


.contact-panel h2 {

  margin: 0;

  max-width: 900px;

  font-size: clamp(44px, 6vw, 92px);

  line-height: 0.98;

}


.contact-panel > p:not(.section-kicker) {

  max-width: 620px;

  margin: 26px 0 34px;

  color: var(--muted);

}


/* ==========================================================
   FOOTER
========================================================== */


.site-footer {

  width: min(var(--max), 100%);

  margin: 0 auto;

  padding:
    65px
    var(--pad)
    34px;

  border-top: 1px solid var(--line);

}


.footer-brand {

  display: grid;

  width: max-content;

  gap: 2px;

}


.footer-brand p {

  margin: 16px 0 0;

  color: var(--muted);

  font-size: 13px;

}


.footer-links {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 240px));

  gap: 50px;

  justify-content: end;

  margin-top: -58px;

}


.footer-links div {

  display: grid;

  gap: 8px;

}


.footer-title {

  margin-bottom: 8px;

}


.footer-links a {

  color: var(--muted);

  text-decoration: none;

  font-size: 13px;

}


.footer-links a:hover {

  color: var(--text);

}


.footer-bottom {

  display: flex;

  justify-content: space-between;

  gap: 30px;

  margin-top: 60px;

  padding-top: 22px;

  border-top: 1px solid var(--line);

  color: rgba(255, 255, 255, 0.4);

  font-size: 11px;

  letter-spacing: 0.08em;

}


/* ==========================================================
   SCROLL REVEAL
========================================================== */


.reveal {

  opacity: 0;

  transform: translateY(22px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}


.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}


/* ==========================================================
   ARTWORK LIGHTBOX
========================================================== */


.lightbox {

  width: min(
    1200px,
    calc(100% - 40px)
  );

  height: min(
    88vh,
    900px
  );

  padding: 0;

  border: 1px solid var(--line);

  color: var(--text);

  background: #08080a;

}


.lightbox::backdrop {

  background: rgba(0, 0, 0, 0.86);

  backdrop-filter: blur(8px);

}


.lightbox-image {

  height: calc(100% - 110px);

  background-position: center;

  background-size: contain;

  background-repeat: no-repeat;

}


.lightbox-copy {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 30px;

  min-height: 110px;

  padding: 20px 28px;

  border-top: 1px solid var(--line);

}


.lightbox-copy p {

  margin: 0 0 3px;

}


.lightbox-copy h2 {

  margin: 0;

  font-family: var(--serif);

  font-size: 28px;

  font-weight: 500;

}


.lightbox-close {

  position: absolute;

  top: 12px;

  right: 16px;

  z-index: 5;

  width: 42px;

  height: 42px;

  border: 1px solid var(--line);

  color: white;

  background: rgba(0, 0, 0, 0.5);

  font-size: 28px;

  cursor: pointer;

}


/* ==========================================================
   TABLET / MOBILE
========================================================== */


@media (max-width: 800px) {


  .site-header {

    height: 76px;

  }


  .menu-toggle {

    display: block;

    z-index: 101;

  }


  .site-nav {

    position: fixed;

    inset: 0;

    display: grid;

    align-content: center;

    gap: 28px;

    padding: var(--pad);

    background:
      rgba(11, 11, 13, 0.98);

    opacity: 0;

    visibility: hidden;

    transition:
      opacity 0.2s ease;

  }


  .site-nav.open {

    opacity: 1;

    visibility: visible;

  }


  .site-nav a {

    font-family: var(--serif);

    font-size: 42px;

    text-transform: none;

    letter-spacing: -0.02em;

  }


  .hero {

    min-height: 92svh;

  }


  .hero h1 {

    font-size:
      clamp(58px, 18vw, 94px);

  }


  .hero-overlay {

    background:

      linear-gradient(
        90deg,
        rgba(4, 4, 6, 0.88),
        rgba(4, 4, 6, 0.48)
      ),

      linear-gradient(
        0deg,
        rgba(4, 4, 6, 0.78),
        transparent 50%
      );

  }


  .intro,
  .about-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }


  .section-heading {

    display: grid;

    gap: 18px;

  }


  .gallery-grid {

    grid-template-columns: 1fr;

  }


  .art-card,
  .art-card-tall,
  .art-card-wide {

    grid-column: auto;

    min-height: 520px;

  }


  .collection-row {

    grid-template-columns:
      45px
      1fr
      30px;

    min-height: 145px;

    gap: 14px;

  }


  .collection-row p {

    display: none;

  }


  .footer-links {

    justify-content: start;

    margin-top: 60px;

  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */


@media (max-width: 520px) {


  .hero {

    padding-bottom: 100px;

  }


  .hero-caption {

    display: none;

  }


  .hero-actions {

    align-items: stretch;

  }


  .button {

    width: 100%;

  }


  .art-card,
  .art-card-tall,
  .art-card-wide {

    min-height: 440px;

  }


  .legal-notice-inner {

    padding: 28px;

  }


  .footer-links {

    grid-template-columns: 1fr;

  }


  .footer-bottom {

    flex-direction: column;

    gap: 8px;

  }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */


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


  html {

    scroll-behavior: auto;

  }


  *,
  *::before,
  *::after {

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;

  }


  .reveal {

    opacity: 1;

    transform: none;

  }

}