@font-face {
  font-family: P052;
  src: url("assets/display.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/body.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("assets/body-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --paper: #f6f0e5;
  --forest: #243b33;
  --muted: #4f5d53;
  --clay: #9a4e38;
  --line: #d8cfbf;
  --sage: #dce2d7;
  --serif: P052, Georgia, serif;
  --sans: "Open Sans", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--forest); font: 400 1rem/1.65 var(--sans); }
a { color: inherit; }
img { display: block; max-width: 100%; }
p, figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 5px; }
.shell { width: min(100% - clamp(2.5rem, 9vw, 9rem), 83rem); margin-inline: auto; }

.skip-link { position: absolute; z-index: 2; top: 1rem; left: 1rem; padding: .5rem 1rem; background: var(--paper); }
.skip-link:not(:focus) { clip-path: inset(50%); }

.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner, .site-footer__inner {
  min-height: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wordmark { flex: 0 1 auto; }
.wordmark img { height: auto; }
nav { display: flex; gap: clamp(1rem, 3vw, 2.75rem); }
nav a, .site-footer__top { font-size: .83rem; font-weight: 600; text-decoration: none; }
nav a:hover, .site-footer__top:hover { text-decoration: underline; text-underline-offset: .3em; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  min-height: clamp(26rem, 38vw, 36rem);
  margin-block: clamp(1.5rem, 3.3vw, 3rem) 0;
  background: #ebe2d3;
}
.hero__copy {
  container-type: inline-size;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(2.1rem, 4.4vw, 4.65rem);
}
.label { display: flex; align-items: center; gap: .55rem; font-size: .66rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.status-dot { width: .41rem; height: .41rem; border-radius: 50%; background: var(--clay); flex: none; }
.hero h1 { max-width: 7.4em; margin-top: 1.3rem; font-size: min(5.35rem, 16.4cqi); line-height: .99; letter-spacing: -.06em; }
.hero__intro { max-width: 28ch; margin-top: 1.45rem; font-size: clamp(.92rem, 1.2vw, 1.08rem); color: var(--muted); }
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.7rem;
  padding: .7rem 1rem;
  background: var(--forest);
  color: var(--paper);
  text-decoration: none;
  font-size: .81rem;
  font-weight: 600;
}
.hero__link:hover { background: #365448; }
.hero__image { display: grid; position: relative; min-width: 0; min-height: 100%; }
.hero__image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 57% center; }
.hero__image figcaption {
  position: absolute;
  right: .85rem;
  bottom: .85rem;
  padding: .34rem .63rem;
  background: var(--paper);
  font-size: .66rem;
  font-weight: 600;
}

.collection { padding-block: clamp(3.4rem, 6.5vw, 6rem) clamp(3.4rem, 6vw, 5.5rem); scroll-margin-top: 1.8rem; }
.collection__heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.55rem; }
.collection h2, .studio h2 { font-size: clamp(2.6rem, 5vw, 4.45rem); line-height: 1.05; letter-spacing: -.055em; }
.collection__heading p, .collection__note { color: var(--muted); font-size: .8rem; }
.pieces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem 1.2rem; }
.piece { min-width: 0; }

.piece__view {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1.32;
  padding: 0;
  border: 0;
  background: #e9e2d5;
  color: var(--forest);
  font: inherit;
  cursor: pointer;
}
.piece[data-piece="gold-on-navy"] .piece__view { background: #e4ddd1; }
.piece[data-piece="wide-sage-bismillah"] .piece__view { background: #e2e5d9; }
.piece[data-piece="salam"] .piece__view { background: #e6e2d5; }
.piece[data-piece="black-on-orange"] .piece__view { background: #e9ddd1; }
.piece[data-piece="sabr"] .piece__view { background: #e7dbcf; }

.piece__artwork {
  max-width: 73%;
  max-height: 73%;
  width: auto;
  height: auto;
  min-height: 0;
  box-shadow: 4px 8px 17px #2a201b36, 1px 2px 3px #2a201b38;
}
.piece__artwork, .piece__room { position: absolute; }
.piece__room {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}
.piece[data-piece="dusty-blue"] .piece__room { object-position: 57% center; }
.piece[data-piece="wide-sage-bismillah"] .piece__room { object-position: 50% center; }
.piece[data-piece="black-on-orange"] .piece__room { object-position: 63% 18%; }
.piece__view[data-room="true"] .piece__room { opacity: 1; }

.piece__badge {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .31rem .59rem;
  background: var(--paper);
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.6;
}
.piece__arrow { font-size: .8rem; line-height: 1; }
.piece__view[aria-pressed="true"] .piece__badge { background: var(--forest); color: var(--paper); }
.piece__view[aria-pressed="true"] .piece__arrow { transform: rotate(180deg); }
.piece__details { padding-top: .9rem; }
.piece h3 { font-size: clamp(1.37rem, 2.2vw, 1.95rem); line-height: 1.12; letter-spacing: -.035em; }
.piece p { margin-top: .25rem; font-size: .8rem; color: var(--muted); }
.piece p.piece__size { font-size: .74rem; }
.collection__note { border-top: 1px solid var(--line); margin-top: 2.15rem; padding-top: .9rem; }

.studio { background: var(--sage); }
.studio__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.5rem 4rem; padding-block: clamp(2.7rem, 5.5vw, 5rem); }
.studio p { max-width: 45ch; }
.site-footer { background: var(--forest); color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--paper); }
.site-footer__top { white-space: nowrap; }
.site-footer__top span { margin-left: .4rem; }

@media (max-width: 58rem) {
  .hero { grid-template-columns: 1fr 1fr; }
  .hero__copy { padding-inline: clamp(1.65rem, 4vw, 3rem); }
  .pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 43rem) {
  .site-header__inner, .site-footer__inner { min-height: 4rem; }
  .wordmark img { max-width: 9.25rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__copy { padding: 2rem 1.6rem 2.2rem; }
  .hero h1 { max-width: 9em; font-size: min(4.3rem, 16.4cqi); }
  .hero__image { min-height: 0; aspect-ratio: 1.31; }
  .collection__heading { display: block; }
  .collection__heading p { margin-top: .65rem; }
  .studio__inner { grid-template-columns: 1fr; }
}

@media (max-width: 34rem) {
  .pieces { grid-template-columns: minmax(0, 1fr); gap: 1.9rem; }
  .piece h3 { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .piece__room { transition: none; }
}

.interest { background: #ebe2d3; scroll-margin-top: 1.8rem; }
.interest__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: clamp(1.6rem, 6vw, 6rem);
  padding-block: clamp(2.8rem, 6vw, 5.5rem);
}
.interest h2, .review h1 {
  font-size: clamp(2.6rem, 5vw, 4.45rem);
  line-height: 1.05;
  letter-spacing: -.055em;
}
.interest__intro p { margin-top: 1rem; max-width: 32ch; color: var(--muted); }
.interest__form { background: var(--paper); padding: clamp(1.15rem, 3.4vw, 2.5rem); }
.interest__contact { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.interest__form label, .interest__form legend { font-size: .875rem; font-weight: 600; }
.interest__form label span { color: var(--muted); font-size: .76rem; font-weight: 400; }
.interest__form input:not([type="checkbox"], [type="radio"]), .interest__form select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  margin: .3rem 0 1rem;
  border: 1px solid #a89c89;
  border-radius: 0;
  padding: .55rem .65rem;
  background: #fffaf1;
  color: var(--forest);
  font: inherit;
}
.interest__form select { font-weight: 400; }
.interest__form fieldset { min-width: 0; margin: 0 0 1.1rem; padding: 0; border: 0; }
.interest__form legend { padding: 0; margin-bottom: .55rem; }
.interest__budgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.interest__form .interest__choice, .interest__form .interest__check { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.interest__choice { min-height: 2.45rem; border: 1px solid var(--line); padding: .35rem .5rem; cursor: pointer; }
.interest__choice:has(:checked) { border-color: var(--forest); background: var(--sage); }
.interest__form input:is([type="checkbox"], [type="radio"]) { margin: 0; flex: none; accent-color: var(--forest); }
.interest__privacy, .interest__status { font-size: .8rem; color: var(--muted); margin-top: .55rem; }
.interest__status:empty { margin: 0; }
.interest__submit {
  border: 0;
  margin-top: 1.1rem;
  padding: .72rem 1rem;
  background: var(--forest);
  color: var(--paper);
  font: 600 .85rem/1.5 var(--sans);
  cursor: pointer;
}
.interest__submit:hover { background: #365448; }
.interest__submit:disabled { opacity: .65; cursor: wait; }

.review { padding-block: clamp(2rem, 6vw, 5rem); }
.review h1, .review h2, .review > p { margin: .85rem 0; }
.review h2 { font-size: clamp(1.65rem, 4vw, 2.3rem); }
.review section { margin-top: 2.2rem; }
.review__table { overflow-x: auto; }
.review table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.review th, .review td { text-align: left; border-bottom: 1px solid var(--line); padding: .6rem .8rem; vertical-align: top; }
.review thead { background: var(--sage); }
.review td { overflow-wrap: anywhere; }
.review__pages { margin-top: 1rem; display: flex; gap: 1rem; }

@media (max-width: 48rem) {
  .interest__inner { grid-template-columns: 1fr; }
  .interest__intro p { max-width: 42ch; }
}
@media (max-width: 36rem) {
  .site-header__inner { flex-wrap: wrap; padding-block: .75rem; gap: .6rem; }
  .site-header nav { flex-wrap: wrap; gap: .35rem .8rem; }
  .interest__contact { grid-template-columns: 1fr; gap: 0; }
}