@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Italiana&display=swap');

:root {
  --ivory: #f8f6ef;
  --white: #fff;
  --black: #10100f;
  --gold: #b99a55;
  --line: rgba(16, 16, 15, 0.22);
  --sans: 'DM Sans', Arial, sans-serif;
  --serif: 'Italiana', Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: clip;
  color: var(--black);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}
body.menu-is-open { overflow: hidden; }
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 16px;
  color: var(--white);
  background: var(--black);
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 3vw;
  color: var(--black);
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Offset only the sticky navigation below the WordPress admin bar. */
body.admin-bar .site-nav { --header-admin-offset: 32px; top: calc(var(--header-admin-offset) + 12px); }
body.admin-bar .skip-link { top: 40px; }
.skip-link { z-index: 9991; }
@media (max-width: 782px) {
  body.admin-bar .site-nav { --header-admin-offset: 46px; }
  body.admin-bar .skip-link { top: 54px; }
}
.site-logo { position: relative; z-index: 2; display: flex; flex-shrink: 0; align-items: flex-end; gap: 9px; line-height: 1; }
.site-logo span { font-size: 1.5rem; font-weight: 600; letter-spacing: -.08em; }
.site-logo small { padding-bottom: 2px; font-size: .57rem; letter-spacing: .2em; }
.site-nav {
  --header-admin-offset: 0px;
  position: sticky;
  z-index: 9990;
  top: 16px;
  display: block;
  width: fit-content;
  max-width: calc(100% - 6vw);
  margin-left: auto;
  margin-right: 3vw;
  padding: 14px 16px;
  color: var(--black);
  background: #fffdf8;
  border: 1px solid rgba(184, 148, 66, 0.25);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.site-nav__list { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 16px; padding: 0; margin: 0; background: transparent; border: 0; list-style: none; }
.site-nav a { position: relative; display: inline-block; padding: 6px 0; font-size: 1rem; font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
.site-nav a::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; content: ''; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 18vh 3vw 8vh;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::after { position: absolute; top: 0; left: 29%; width: 1px; height: 100%; content: ''; background: var(--line); }
.hero__eyebrow, .section-index { margin: 0; font-size: .65rem; font-weight: 600; letter-spacing: .2em; }
.hero__words { position: relative; z-index: 2; display: flex; flex-direction: column; margin-top: 2vh; font-size: clamp(5.7rem, 15.5vw, 14rem); font-weight: 500; letter-spacing: -.09em; line-height: .7; }
.hero__word { display: block; width: max-content; will-change: transform; }
.hero__word--learn { align-self: flex-end; margin-right: 7vw; color: transparent; -webkit-text-stroke: 1.5px var(--black); }
.hero__word--create { margin-left: 13vw; }
.hero__orb { position: absolute; z-index: 1; top: 35%; right: 17%; width: clamp(150px, 22vw, 360px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #fff 0, #d9bf82 18%, #a37b2c 55%, #181713 100%); box-shadow: 0 30px 90px rgba(16,16,15,.24); }
.hero__note { position: absolute; right: 3vw; bottom: 7vh; margin: 0; writing-mode: vertical-rl; font-size: .61rem; letter-spacing: .22em; }
.hero__scroll { position: absolute; bottom: 5vh; left: 3vw; margin: 0; font-size: .6rem; letter-spacing: .18em; }
.hero__scroll span { display: inline-block; margin-left: 15px; animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue { 50% { transform: translateY(8px); } }

.statement { position: relative; min-height: 90vh; padding: 12vh 8vw 18vh; overflow: hidden; color: var(--ivory); background: var(--black); }
.statement h1 { position: relative; z-index: 2; margin: 8vh 0 3vh 10vw; font-size: clamp(4rem, 11vw, 11rem); font-weight: 500; letter-spacing: -.075em; line-height: .78; }
.statement h1 em, .site-footer__lead em { color: var(--gold); font-family: var(--serif); font-weight: 400; }
.statement > p:not(.section-index) { position: relative; z-index: 2; width: min(440px, 80%); margin-left: auto; font-size: clamp(.85rem, 1.2vw, 1.1rem); }
.background-type { position: absolute; bottom: -6vh; left: 0; width: max-content; color: rgba(248,246,239,.055); font-size: clamp(7rem, 18vw, 18rem); font-weight: 600; letter-spacing: -.07em; line-height: 1; white-space: nowrap; will-change: transform; }

.featured-works { padding: 13vh 3vw 18vh; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 13vh; }
.section-heading h2 { margin: 0; font-size: clamp(6rem, 16vw, 15rem); font-weight: 500; letter-spacing: -.09em; line-height: .7; }
.section-heading h2 span, .archive-hero h1 span, .page-content__header h1 span { color: var(--gold); }
.works-list { display: flex; flex-direction: column; gap: 18vh; }
.work-item { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); align-items: end; gap: 4vw; opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.work-item.is-visible { opacity: 1; transform: none; }
.work-item:nth-child(even) { grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); }
.work-item:nth-child(even) .work-item__visual { order: 2; }
.work-item__visual { position: relative; display: block; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.15s cubic-bezier(.77,0,.18,1); }
.work-item.is-visible .work-item__visual { clip-path: inset(0); }
.work-item__visual img { aspect-ratio: 1.45; object-fit: contain; transition: transform .8s ease; }
.work-item__visual:hover img { transform: scale(1.025); }
.work-item__placeholder, .archive-work__image > span { display: grid; min-height: 400px; place-items: center; color: var(--gold); background: #1b1b19; font-family: var(--serif); font-size: clamp(5rem, 12vw, 12rem); }
.work-item__meta { padding-bottom: 2vh; border-bottom: 1px solid var(--line); }
.work-item__meta > p, .archive-work__number { margin: 0 0 20px; font-size: .62rem; letter-spacing: .18em; }
.work-item__meta h3 { margin: 0 0 35px; font-size: clamp(2rem, 4vw, 4.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; }
.arrow-link { font-size: .68rem; font-weight: 600; letter-spacing: .15em; }
.empty-state { margin: 15vh auto; text-align: center; }

.category-links { padding: 10vh 3vw 13vh; color: var(--ivory); background: var(--black); }
.category-links > .section-index { margin-bottom: 8vh; }
.category-links > a { display: grid; grid-template-columns: 1fr auto 40px; align-items: baseline; gap: 25px; padding: 2.5vh 0; border-bottom: 1px solid rgba(248,246,239,.25); }
.category-links > a:first-of-type { border-top: 1px solid rgba(248,246,239,.25); }
.category-links span { font-size: clamp(3.8rem, 9vw, 9rem); font-weight: 500; letter-spacing: -.07em; line-height: .9; transition: color .3s, transform .3s; }
.category-links small { font-size: .6rem; letter-spacing: .16em; }
.category-links i { color: var(--gold); font-family: var(--serif); font-size: 1.5rem; font-style: normal; }
.category-links a:hover span { color: var(--gold); transform: translateX(2vw); }

.archive-page, .single-work, .page-content { padding: 18vh 3vw 15vh; }
.archive-hero { display: grid; grid-template-columns: 1fr 2fr; align-items: end; margin-bottom: 17vh; }
.archive-hero .section-index { align-self: start; }
.archive-hero h1 { grid-column: 1 / -1; margin: 6vh 0 2vh; font-size: clamp(6rem, 18vw, 17rem); font-weight: 500; letter-spacing: -.09em; line-height: .7; }
.archive-hero__line { height: 1px; background: var(--line); }
.archive-hero > p:last-child, .archive-hero > div:last-child { max-width: 450px; margin: 0 0 0 auto; padding-left: 3vw; font-size: .72rem; letter-spacing: .08em; }
.archive-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 13vh 2vw; align-items: start; }
.archive-work { opacity: 0; transform: translateY(30px); transition: opacity .7s, transform .8s; }
.archive-work.is-visible { opacity: 1; transform: none; }
.archive-work--1 { grid-column: 1 / span 7; }
.archive-work--2 { grid-column: 9 / span 4; margin-top: 20vh; }
.archive-work--3 { grid-column: 2 / span 4; }
.archive-work--4 { grid-column: 7 / span 6; margin-top: -4vh; }
.archive-work__image { display: block; margin-bottom: 26px; overflow: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 1s cubic-bezier(.77,0,.18,1); }
.archive-work.is-visible .archive-work__image { clip-path: inset(0); }
.archive-work__image img { aspect-ratio: 1.3; object-fit: contain; transition: transform .7s ease; }
.archive-work--2 .archive-work__image img, .archive-work--3 .archive-work__image img { aspect-ratio: .85; }
.archive-work__image:hover img { transform: scale(1.03); }
.archive-work__image > span { min-height: 300px; }
.archive-work h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 3.8rem); font-weight: 500; letter-spacing: -.045em; line-height: 1; }
.pagination { margin-top: 14vh; }
.pagination .nav-links { display: flex; justify-content: center; gap: 10px; }
.pagination .page-numbers { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line); font-size: .7rem; }
.pagination .prev, .pagination .next { width: auto; padding: 0 18px; }
.pagination .current { color: var(--white); background: var(--black); }

.single-work__header { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4vw; margin-bottom: 8vh; }
.single-work__header h1 { max-width: 1100px; margin: 3vh 0 0; font-size: clamp(3.5rem, 9.5vw, 10rem); font-weight: 500; letter-spacing: -.075em; line-height: .85; }
.single-work__date { font-size: .65rem; letter-spacing: .16em; }
.single-work__hero { margin: 0 0 13vh; overflow: hidden; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
.single-work__hero.is-visible { clip-path: inset(0); }
.single-work__hero img { max-height: 82vh; object-fit: cover; }
.single-work__layout { display: grid; grid-template-columns: minmax(240px, .7fr) minmax(0, 1.7fr); gap: 10vw; }
.project-facts section { padding: 20px 0; border-top: 1px solid var(--line); }
.project-facts h2 { margin: 0 0 8px; color: var(--gold); font-size: .61rem; letter-spacing: .15em; }
.project-facts p { margin: 0; font-size: .82rem; }
.entry-content { max-width: 850px; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 { margin-top: 2.2em; font-size: clamp(2rem, 4vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.entry-content h3 { margin-top: 2em; font-size: 1.5rem; }
.entry-content a { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }
.entry-content img { margin: 8vh 0; }
.single-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 15vh; padding-top: 4vh; border-top: 1px solid var(--line); font-size: .6rem; letter-spacing: .15em; }
.single-navigation > div:last-child { text-align: right; }
.single-navigation strong { font-size: clamp(1.2rem, 2vw, 2rem); font-weight: 500; letter-spacing: -.03em; }

.page-content { min-height: 80vh; }
.page-content__header { margin-bottom: 10vh; }
.page-content__header h1 { margin: 5vh 0; font-size: clamp(5rem, 14vw, 14rem); font-weight: 500; letter-spacing: -.08em; line-height: .8; }
.page-content > article > .entry-content { margin-left: auto; margin-right: 8vw; }

.site-footer { padding: 13vh 3vw 4vh; color: var(--ivory); background: var(--black); }
.site-footer__lead { max-width: 1300px; margin: 0 0 15vh; font-size: clamp(4rem, 10vw, 10rem); font-weight: 500; letter-spacing: -.07em; line-height: .82; }
.site-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding-top: 25px; border-top: 1px solid rgba(248,246,239,.25); font-size: .58rem; letter-spacing: .13em; }
.site-footer__bottom > a:last-child { text-align: right; }

@media (max-width: 800px) {
  .site-header { gap: 12px; padding: 24px 20px; }
  .site-nav { max-width: calc(100% - 40px); margin-right: 20px; overflow-x: auto; }
  .hero { padding: 19vh 20px 8vh; }
  .hero::after { left: 60%; }
  .hero__words { gap: .16em; font-size: clamp(4.6rem, 22vw, 8rem); line-height: .74; }
  .hero__word--learn { margin-right: 0; }
  .hero__word--create { margin-left: 4vw; }
  .hero__orb { top: 43%; right: -12%; width: 45vw; }
  .hero__note { right: 20px; }
  .hero__scroll { left: 20px; }
  .statement { min-height: 80vh; padding: 10vh 20px 17vh; }
  .statement h1 { margin: 11vh 0 5vh; font-size: clamp(3.8rem, 17vw, 7rem); }
  .featured-works { padding: 11vh 20px 15vh; }
  .section-heading { display: block; margin-bottom: 10vh; }
  .section-heading h2 { margin-top: 6vh; }
  .works-list { gap: 13vh; }
  .work-item, .work-item:nth-child(even) { display: block; }
  .work-item:nth-child(even) .work-item__visual { order: initial; }
  .work-item__visual { margin-bottom: 28px; }
  .work-item__visual img { aspect-ratio: 1.15; }
  .work-item__placeholder { min-height: 280px; }
  .category-links { padding: 9vh 20px 12vh; }
  .category-links > a { grid-template-columns: 1fr auto; }
  .category-links i { display: none; }
  .archive-page, .single-work, .page-content { padding: 16vh 20px 12vh; }
  .archive-hero { display: block; margin-bottom: 11vh; }
  .archive-hero h1 { margin: 5vh 0 4vh; font-size: clamp(5rem, 24vw, 9rem); }
  .archive-hero__line { margin-bottom: 20px; }
  .archive-hero > p:last-child, .archive-hero > div:last-child { margin: 0; padding: 0; }
  .archive-grid { display: block; }
  .archive-work { width: 88%; margin: 0 0 13vh; }
  .archive-work:nth-child(even) { margin-left: auto; }
  .archive-work--2 .archive-work__image img, .archive-work--3 .archive-work__image img { aspect-ratio: 1.05; }
  .single-work__header { display: block; }
  .single-work__date { margin-top: 30px; }
  .single-work__layout { display: block; }
  .project-facts { margin-bottom: 10vh; }
  .single-navigation { gap: 15px; }
  .page-content > article > .entry-content { margin: 0; }
  .site-footer { padding: 11vh 20px 4vh; }
  .site-footer__bottom { grid-template-columns: 1fr 1fr; }
  .site-footer__bottom p { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .work-item__visual, .archive-work__image, .single-work__hero { clip-path: none; }
}