/* =========================================================
   INDIVIDUAL EDITION PAGE
   Michael McCafferty Fine Art Photography
   ========================================================= */

.edition-page {
  --e-ink: #171717;
  --e-muted: #6d6961;
  --e-line: rgba(23,23,23,.17);
  --e-light: #f4f1ea;
  --e-soft: #e8e5de;
  --e-charcoal: #171717;
  --e-dark: #0b0b0b;
  --e-white: #f7f4ed;

  background: var(--e-light);
  color: var(--e-ink);
}

.edition-page *,
.edition-page *::before,
.edition-page *::after {
  box-sizing: border-box;
}

.edition-shell {
  width: min(88vw, 1480px);
  margin: 0 auto;
}

.edition-page .theme-light {
  background: var(--e-light);
  color: var(--e-ink);
}

.edition-page .theme-soft {
  background: var(--e-soft);
  color: var(--e-ink);
}

.edition-page .theme-charcoal {
  background: var(--e-charcoal);
  color: var(--e-white);
}

.edition-page .theme-dark {
  background: var(--e-dark);
  color: var(--e-white);
}

.edition-eyebrow,
.edition-index {
  font-family: "Inter", sans-serif;
}

.edition-eyebrow {
  margin: 0;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: rgba(255,255,255,.58);
}

.edition-eyebrow.dark {
  color: #757168;
}

.edition-index {
  margin: 0 0 26px;
  font-size: .65rem;
  letter-spacing: .15em;
  color: #8a857b;
}

.edition-text-link {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  padding-bottom: 7px;
  border-bottom: 1px solid #6e6a62;
  color: #171717;
  font-family: "Inter", sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
}


/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */

.edition-hero {
  padding: 135px 0 100px;
}

.edition-hero-media {
  position: relative;
  width: min(78vw, 1220px);
  margin: 0 auto;
}

/* The global site protection can add a pseudo-element copyright.
   Edition pages use one real HTML copyright label instead. */
.edition-hero-media.protected-artwork::after {
  content: none !important;
  display: none !important;
}

.edition-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

.edition-image-copyright {
  position: absolute;
  right: 18px;
  bottom: 14px;
  z-index: 3;
  pointer-events: none;

  font-family: "Inter", sans-serif;
  font-size: .54rem;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;

  color: rgba(255,255,255,.78);
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}

.edition-hero-copy {
  padding-top: 70px;
}

.edition-hero h1 {
  margin: 20px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(78px, 10vw, 160px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .8;
}

.edition-subtitle {
  margin: 16px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(27px, 2.5vw, 42px);
  font-style: italic;
  color: rgba(255,255,255,.68);
}

.edition-hero-line {
  max-width: 760px;
  margin: 50px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(26px, 2.3vw, 38px);
  line-height: 1.25;
  color: rgba(255,255,255,.78);
}


/* ---------------------------------------------------------
   Editorial sections
   --------------------------------------------------------- */

.edition-story,
.edition-making,
.edition-details {
  padding: clamp(105px, 11vw, 175px) 0;
}

.edition-story-grid,
.edition-making-grid,
.edition-details-grid {
  display: grid;
  grid-template-columns: minmax(180px, .36fr) minmax(0, 1.08fr);
  gap: clamp(70px, 10vw, 170px);
}

.edition-story-copy,
.edition-making-copy {
  max-width: 930px;
}

.edition-story-copy h2,
.edition-making h2,
.edition-section-heading h2,
.edition-scarcity h2,
.edition-action h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .88;
}

.edition-lead {
  max-width: 830px;
  margin: 40px 0 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(25px, 2.2vw, 36px);
  line-height: 1.34;
  color: #3d3a35;
}

.edition-story-copy > p:not(.edition-lead) {
  max-width: 700px;
  margin: 30px 0 0;
  color: #68645d;
  font-family: "Inter", sans-serif;
  font-size: .87rem;
  font-weight: 300;
  line-height: 1.85;
}


/* ---------------------------------------------------------
   Scarcity
   --------------------------------------------------------- */

.edition-scarcity {
  padding: clamp(105px, 12vw, 185px) 0;
}

.edition-scarcity-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .55fr);
  gap: clamp(80px, 11vw, 180px);
  align-items: end;
}

.edition-lead-light {
  margin: 0 0 30px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(25px, 2.2vw, 36px);
  line-height: 1.3;
  color: rgba(255,255,255,.82);
}

.edition-scarcity-copy > p:not(.edition-lead-light) {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,.56);
}

.edition-status-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.2);
  font-family: "Inter", sans-serif;
  font-size: .68rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.edition-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b39c64;
}


/* ---------------------------------------------------------
   View on your wall
   --------------------------------------------------------- */

.edition-wall-viewer {
  padding: clamp(100px, 10vw, 165px) 0 clamp(105px, 11vw, 175px);
  overflow: hidden;
}

.edition-wall-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(350px, .72fr);
  gap: clamp(70px, 10vw, 170px);
  align-items: end;
}

.edition-wall-heading-title h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(62px, 7.2vw, 116px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .9;
}

.edition-wall-kicker {
  margin: 24px 0 0;
  font-family: "Inter", sans-serif;
  font-size: .67rem;
  font-weight: 500;
  letter-spacing: .26em;
  line-height: 1.4;
  text-transform: uppercase;
  color: #858077;
}

.edition-wall-heading-copy {
  padding-bottom: 5px;
}

.edition-wall-heading-copy p {
  max-width: 580px;
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(21px, 1.7vw, 28px);
  line-height: 1.45;
  color: #69645c;
}


/* ---------------------------------------------------------
   Room thumbnails
   --------------------------------------------------------- */

.edition-room-picker {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(64%, 930px);
  margin: clamp(55px, 6vw, 90px) auto -34px;
  padding: 8px;
  border-radius: 4px;
  background: rgba(248, 246, 241, .97);
  box-shadow: 0 16px 34px rgba(35, 28, 20, .10);
}

.edition-room-card {
  min-width: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: #24211e;
  cursor: pointer;
  overflow: hidden;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.edition-room-card:hover {
  border-color: #bcb6aa;
}

.edition-room-card.is-active {
  border-color: #202020;
  background: #1f2327;
  color: #fff;
}

.edition-room-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 2.45 / 1;
  overflow: hidden;
  background: #ded7cd;
}

.edition-room-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.edition-room-name {
  display: block;
  padding: 9px 8px 10px;
  font-family: "Inter", sans-serif;
  font-size: .67rem;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  letter-spacing: .01em;
}


/* ---------------------------------------------------------
   Photo-realistic stage
   --------------------------------------------------------- */

.edition-room-photo-stage {
  --frame-x: 50%;
  --frame-y: 28%;
  --frame-width: 24%;
  --frame-height: 28%;

  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #ddd3c7;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
  isolation: isolate;
}

.edition-room-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.edition-photo-frame {
  position: absolute;
  left: var(--frame-x);
  top: var(--frame-y);
  z-index: 5;
  width: var(--frame-width);
  height: var(--frame-height);
  transform: translate(-50%, -50%);
  padding: clamp(3px, .25vw, 5px);
  background: #171717;
  box-shadow:
    0 16px 30px rgba(0,0,0,.17),
    0 2px 5px rgba(0,0,0,.20);

  transition:
    width .48s cubic-bezier(.2,.75,.25,1),
    height .48s cubic-bezier(.2,.75,.25,1),
    left .35s ease,
    top .35s ease;
  pointer-events: none;
}

.edition-photo-mount {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 5.8%;
  background: #f1eee7;
}

.edition-photo-paper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fffdf8;
}

.edition-print-window {
  position: absolute;
  left: 5.2%;
  right: 5.2%;
  top: 4.8%;
  bottom: 14.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fffdf8;
}

.edition-photo-paper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}






.edition-photo-frame.is-square-artwork {
  aspect-ratio: 1 / 1;
}

.edition-photo-frame.is-square-artwork .edition-print-window {
  left: 8.4%;
  right: 8.4%;
  top: 4.8%;
  bottom: 14.2%;
}



/* ---------------------------------------------------------
   Size selector
   --------------------------------------------------------- */

.edition-wall-size-options {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(64%, 930px);
  margin: 18px auto 0;
}

.edition-wall-size-button {
  position: relative;
  min-height: 76px;
  padding: 15px 14px 13px;
  border: 1px solid #d0cbc1;
  border-radius: 3px;
  background: #f7f5f0;
  color: #202020;
  cursor: pointer;
  text-align: center;

  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease,
    transform .2s ease;
}

.edition-wall-size-button:hover:not(:disabled) {
  border-color: #938d82;
  transform: translateY(-1px);
}

.edition-wall-size-button.is-active {
  border-color: #1f2327;
  background: #1f2327;
  color: #fff;
}

.edition-wall-size-button > span {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: .93rem;
  font-weight: 400;
  line-height: 1.1;
}

.edition-wall-size-button small {
  display: block;
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: .60rem;
  font-weight: 300;
  line-height: 1.2;
  color: #99938a;
}

.edition-wall-size-button.is-active small {
  color: rgba(255,255,255,.72);
}

.edition-wall-size-button em {
  display: block;
  min-height: 11px;
  margin-top: 5px;
  font-family: "Inter", sans-serif;
  font-size: .52rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #657760;
}

.edition-wall-size-button.is-active em {
  color: rgba(255,255,255,.72);
}

.edition-wall-size-button:disabled {
  cursor: not-allowed;
  opacity: .47;
}

.edition-wall-size-button:disabled em {
  color: #9b615d;
}

.edition-wall-meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: min(64%, 930px);
  margin: 13px auto 0;
  color: #8a857c;
  font-family: "Inter", sans-serif;
  font-size: .61rem;
  font-weight: 300;
  line-height: 1.5;
}

.edition-wall-meta strong {
  color: #2b2926;
  font-weight: 500;
}

.edition-wall-meta span {
  text-align: right;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1050px) {

  .edition-wall-heading {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .edition-wall-heading-copy {
    max-width: 720px;
  }

  .edition-room-picker,
  .edition-wall-size-options,
  .edition-wall-meta {
    width: min(90%, 930px);
  }
}

@media (max-width: 760px) {


  .edition-wall-viewer {
    padding: 85px 0 95px;
  }

  .edition-room-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-bottom: 16px;
    gap: 5px;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }

  .edition-room-card {
    background: #f7f5f0;
    border-color: #d8d3c9;
  }

  .edition-room-card.is-active {
    background: #1f2327;
  }

  .edition-room-photo-stage {
    aspect-ratio: 4 / 3;
  }

  .edition-wall-size-options {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .edition-wall-meta {
    width: 100%;
    flex-direction: column;
    gap: 4px;
  }

  .edition-wall-meta span {
    text-align: left;
  }
}

@media (max-width: 520px) {

  .edition-wall-heading-title h2 {
    font-size: clamp(50px, 15vw, 70px);
  }

  .edition-wall-kicker {
    letter-spacing: .18em;
  }

  .edition-room-name {
    font-size: .62rem;
  }

  .edition-wall-size-button {
    min-height: 72px;
  }
}


/* ---------------------------------------------------------
   Making
   --------------------------------------------------------- */

.edition-making-list {
  margin-top: 54px;
  border-top: 1px solid #c3beb3;
}

.edition-making-list > div {
  display: grid;
  grid-template-columns: 46px 145px 1fr;
  gap: 24px;
  padding: 21px 0;
  border-bottom: 1px solid #c3beb3;
}

.edition-making-list span {
  color: #888279;
  font-family: "Inter", sans-serif;
  font-size: .61rem;
  letter-spacing: .1em;
}

.edition-making-list strong {
  font-family: "Cormorant Garamond", serif;
  font-size: 23px;
  font-weight: 500;
}

.edition-making-list p {
  margin: 0;
  color: #68645d;
  font-family: "Inter", sans-serif;
  font-size: .76rem;
  font-weight: 300;
  line-height: 1.7;
}


/* ---------------------------------------------------------
   Details / accordions
   --------------------------------------------------------- */

.edition-accordions {
  border-top: 1px solid #c6c1b6;
}

.edition-accordions details {
  border-bottom: 1px solid #c6c1b6;
}

.edition-accordions summary {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  list-style: none;
  cursor: pointer;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(24px, 2vw, 31px);
}

.edition-accordions summary::-webkit-details-marker {
  display: none;
}

.edition-accordions summary span {
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  transition: transform .2s ease;
}

.edition-accordions details[open] summary span {
  transform: rotate(45deg);
}

.edition-accordions details > div {
  max-width: 760px;
  padding: 0 0 28px;
}

.edition-accordions p {
  margin: 0;
  color: #68645d;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  font-weight: 300;
  line-height: 1.8;
}


/* ---------------------------------------------------------
   Action
   --------------------------------------------------------- */

.edition-action {
  padding: clamp(110px, 12vw, 190px) 0;
}

.edition-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .55fr);
  gap: clamp(80px, 11vw, 180px);
  align-items: end;
}

.edition-action-copy p {
  max-width: 510px;
  margin: 0 0 38px;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(23px, 2vw, 33px);
  line-height: 1.3;
  color: rgba(255,255,255,.72);
}

.edition-outline-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 50px;
  min-width: 240px;
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .25s ease, color .25s ease;
}

.edition-outline-link:hover {
  background: #fff;
  color: #171717;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

  .edition-story-grid,
  .edition-making-grid,
  .edition-details-grid,
  .edition-scarcity-grid,
  .edition-action-grid {
    grid-template-columns: 1fr;
  }

  .edition-story-grid,
  .edition-making-grid,
  .edition-details-grid {
    gap: 48px;
  }

  .edition-scarcity-grid,
  .edition-action-grid {
    gap: 70px;
  }

  .edition-hero-media {
    width: min(88vw, 1220px);
  }

}

@media (max-width: 640px) {

  .edition-shell {
    width: calc(100% - 40px);
  }

  .edition-hero {
    padding: 120px 0 75px;
  }

  .edition-hero-media {
    width: calc(100% - 40px);
  }

  .edition-hero-copy {
    padding-top: 55px;
  }

  .edition-hero h1 {
    font-size: clamp(64px, 20vw, 88px);
  }

  .edition-story,
  .edition-making,
  .edition-details,
  .edition-formats {
    padding: 88px 0;
  }

  .edition-size-button {
    grid-template-columns: 52px 1fr;
  }

  .edition-size-button em {
    grid-column: 2;
  }

  .edition-room-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }


  .edition-room-caption {
    flex-direction: column;
    gap: 5px;
  }


  .edition-room-photo-stage {
    width: 100%;
  }

  .edition-room-caption span {
    max-width: none;
    text-align: left;
  }

  .edition-making-list > div {
    grid-template-columns: 38px 1fr;
  }

  .edition-making-list p {
    grid-column: 2;
  }

  .edition-action {
    padding: 90px 0;
  }
}


/* Square artwork hero — used by Solitaire only */
.edition-hero-media-square {
  width: min(62vw, 900px);
}

@media (max-width: 900px) {
  .edition-hero-media-square {
    width: min(88vw, 900px);
  }
}

@media (max-width: 640px) {
  .edition-hero-media-square {
    width: calc(100% - 40px);
  }
}