/* The PRAE storefront. Paper, ink and the actual publication artwork. */
.field-home {
  --rule: #cfcec7;
  --secondary: #50504b;
  background: #f7f6f2;
  color: #171815;
  font: 16px/1.55 var(--display);
}
.field-home main { color-scheme: light; }
.field-home .prae-frame { width: var(--page-width); margin-inline: auto; }
.field-home :is(h1, h2, h3, figure, dl, dd) { margin: 0; }
.field-columns { display: grid; align-items: center; gap: var(--column-gap); }
.opening-scene { position: relative; isolation: isolate; overflow: hidden; background: #080808; color: #f6f5f0; --secondary: #c9c9c3; }
.opening-negative {
  position: absolute; z-index: -1; inset: 0 0 0 auto; width: 66%; height: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 32%);
}
.opening-photograph { width: 100%; height: 100%; object-fit: cover; object-position: 50% 31%; }
.opening-shutter { display: none; }
.field-spread { padding-block: clamp(78px, 8.5vw, 128px); }
.field-intro { max-width: min(52%, 575px); }
.opening-scene .field-primary { background: #f3f2ed; color: #151515; }
.opening-scene .field-primary:hover { background: white; }
.opening-scene .field-primary span { border-color: #a9a9a2; }
.field-kicker {
  color: var(--secondary); font: 500 12px/1.5 var(--code);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: 16px;
}
.field-intro h1 { font-size: clamp(56px, 6.2vw, 90px); line-height: .98; letter-spacing: -.06em; font-weight: 550; }
.field-deck { max-width: 36ch; margin-top: 26px; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.36; letter-spacing: -.025em; }
.field-detail, .section-intro > p:not(.field-kicker) { max-width: 49ch; margin-top: 20px; color: var(--secondary); }
.field-order { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin-top: 34px; }
.field-primary, .field-link { display: inline-flex; align-items: center; min-height: 46px; font-size: 14px; font-weight: 550; }
.field-primary { padding: 0 17px; background: #171815; color: white; text-decoration: none; }
.field-primary:hover { background: #373935; }
.field-primary span { padding-left: 13px; margin-left: 13px; border-left: 1px solid #666660; font-variant-numeric: tabular-nums; }
.field-link { gap: 10px; text-underline-offset: .3em; }
.field-terms { margin-top: 12px; color: var(--secondary); font: 13px/1.5 var(--sans); }
.field-edition { background: #dcdcd5; border: 1px solid #c2c3bb; }
.edition-art {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 1.65;
  background: linear-gradient(135deg, #eeeeea, #dadbd4 60%, #cbccc4);
}
.edition-art img { position: absolute; height: auto; }
.field-contents > .section-intro { align-self: center; }
.field-columns.field-contents { row-gap: clamp(24px, 3vw, 40px); }
.field-contents .record-list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--column-gap); }
.field-contents .record-list > div { padding-bottom: 0; }
.edition-workbook { width: 39%; top: 12%; right: 14%; transform: rotate(6deg); box-shadow: 2px 4px 9px #1112; }
.edition-guide { width: 40%; top: 7%; left: 15%; transform: rotate(-7deg); box-shadow: 1px 1px #ddd, 2px 2px #555, 3px 3px #ddd, 4px 4px #888, 7px 13px 15px #26292138; }
.field-edition figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 15px 20px; border-top: 1px solid #bebfb8; font-size: 13px; }
.field-edition figcaption span:last-child { font: 11px/1.5 var(--code); color: #484943; }
.edition-specs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); padding-block: 18px 20px; }
.edition-specs > p + p { border-left: 1px solid var(--rule); padding-left: clamp(16px, 3vw, 44px); }
.edition-specs strong { display: block; font-size: 21px; font-weight: 550; letter-spacing: -.035em; }
.edition-specs span { font-size: 13px; color: var(--secondary); }
.field-section { padding-block: var(--section-space); border-top: 1px solid var(--rule); }
.field-columns { grid-template-columns: .92fr 1fr; align-items: start; }
.section-intro h2 { font-size: clamp(34px, 3.6vw, 52px); max-width: 18ch; line-height: 1.08; font-weight: 500; letter-spacing: -.05em; text-wrap: balance; }
.section-intro .field-link { margin-top: 12px; }
.record-list > div, .field-entries > a { display: block; padding-block: 26px; border-top: 1px solid var(--rule); }
.record-list dt, .field-entries strong { font-size: 21px; font-weight: 550; letter-spacing: -.03em; }
.record-list dd, .field-entries p { color: var(--secondary); margin-top: 6px; line-height: 1.55; }
.field-entries a { text-decoration: none; }
.field-entries strong { display: flex; gap: 12px; justify-content: space-between; }
.field-entries a:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.field-case { --secondary: #c5c5bd; --rule: #41433d; background: #20221e; color: #f5f5ef; }
.review-record { align-self: center; background: #f5f4ee; color: #20211d; padding: 26px 30px 22px; }
.review-record figcaption, .review-record > p { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.review-record figcaption { font-weight: 600; padding-bottom: 19px; }
.review-record figcaption span, .review-record dt, .review-record > p span { color: #53554e; font: 12px/1.5 var(--code); }
.review-record dl > div { display: grid; grid-template-columns: 9em 1fr; gap: 15px; padding-block: 14px; border-top: 1px solid #cdcec6; }
.review-record dd { font-size: 15px; }
.review-record > p { margin-top: 4px; padding-top: 15px; border-top: 1px solid #777a70; }
.review-record > p strong { position: relative; padding: 5px 10px; font-size: 24px; line-height: 1; letter-spacing: -.04em; font-weight: 550; }
.review-record > p strong::after { content: ""; position: absolute; inset: 0; border: 1px solid currentColor; }
.research-band { background: #eaeae4; }
@media (max-width: 830px) {
  .field-columns { gap: 38px; }
  .field-order { gap: 12px 24px; }
}
@media (max-width: 700px) {
  .field-columns { grid-template-columns: 1fr; gap: 36px; }
  .field-spread { padding-block: clamp(132px, 32vw, 168px) 58px; }
  .field-intro { max-width: none; }
  .opening-photograph { object-position: 50% 30%; }
  .opening-negative {
    width: 100%; height: clamp(185px, 49vw, 300px);
    mask-image: linear-gradient(0deg, transparent, #000 48%);
  }
  .field-columns.field-contents { row-gap: 34px; }
  .field-contents .record-list { display: block; }
  .record-list > div + div { margin-top: 16px; }
  .field-intro h1 { font-size: clamp(54px, 12.5vw, 72px); }
  .field-edition { width: 100%; max-width: 500px; }
  .edition-art { aspect-ratio: 1.5; }
  .edition-guide { width: 40%; left: 16%; top: 8%; }
  .edition-workbook { width: 39%; right: 15%; top: 13%; }
  .field-edition figcaption { padding: 12px 14px; }
  .edition-specs { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .edition-specs > p:nth-child(3) { padding-left: 0; border-left: 0; }
  .edition-specs strong { font-size: 19px; }
  .field-kicker { margin-bottom: 15px; }
  .field-order { margin-top: 30px; }
  .review-record { padding: 19px; }
  .review-record dl > div { grid-template-columns: 6em 1fr; }
}


/* The lit colonnade marks the transition from the worked example to the free tools. */
.resource-scene {
  align-self: stretch; display: flex; flex-direction: column; justify-content: end;
  min-height: 310px; padding: clamp(24px, 3vw, 42px); color: #f6f5f0; --secondary: #e0e0da;
  background: linear-gradient(0deg, #090909 1%, #090909ef 28%, #090909ab 64%, #09090908),
    url("/assets/quote-1280.webp") 59% 35% / cover no-repeat, #090909;
}
.resource-scene .field-kicker { margin-bottom: 12px; }
.resource-scene > p:not(.field-kicker) { margin-top: 12px; }
.resource-scene h2 { font-size: clamp(30px, 3vw, 40px); }
@media (max-width: 700px) { .resource-scene { min-height: 240px; } }

/* Three shutters expose the negative once. The offer is readable on the first frame. */
@media screen and (prefers-reduced-motion: no-preference) {
  .opening-shutter {
    display: grid; grid-template-rows: repeat(3, 1fr); position: absolute; inset: 0;
    pointer-events: none;
  }
  .opening-shutter i {
    background: #080808; opacity: 0; transform-origin: right;
    animation: expose-negative 680ms var(--ease) backwards;
  }
  .opening-shutter i:nth-child(2) { animation-delay: 60ms; }
  .opening-shutter i:nth-child(3) { animation-delay: 120ms; }

  .edition-art img { transform-origin: 48% 83%; transition: transform 640ms var(--ease); }
  .edition-art .edition-workbook { transition-delay: 60ms; }
  .motion-pending .edition-art img { transition: none; }
  .motion-pending .edition-guide { transform: translate(8%, 3%) rotate(-1deg); }
  .motion-pending .edition-workbook { transform: translate(-18%, 5%) rotate(0deg); }

  .review-record > p { position: relative; }
  .review-record > p::before {
    content: ""; position: absolute; inset: -1px 0 auto; height: 1px;
    background: #20211d; transform-origin: left; transition: transform 500ms var(--ease);
  }
  .review-record > p strong::after { transition: transform 180ms var(--ease) 200ms, opacity 180ms ease 200ms; }
  .motion-pending.review-record > p strong::after { transform: scale(1.08); opacity: .18; transition: none; }
  .motion-pending.review-record > p::before { transform: scaleX(0); transition: none; }
}
@keyframes expose-negative {
  from { transform: scaleX(1); opacity: .8; }
  to   { transform: scaleX(0); opacity: .12; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :is(.field-link, .field-entries a) span[aria-hidden] { transition: transform 160ms var(--ease); }
  :is(.field-link, .field-entries a):hover span[aria-hidden] { transform: translateX(4px); }
  .field-primary { transition: transform 120ms var(--ease), background-color 160ms ease; }
  .field-primary:active:not(:focus-visible) { transform: scale(.985); }
}

.field-home .collection-heading { font: 500 clamp(40px,5vw,68px)/1.08 var(--display); letter-spacing: -.05em; margin-bottom: clamp(32px,4vw,60px); }
.product-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(40px,5vw,72px) var(--column-gap); margin: 0; padding: 0; list-style: none; }
.product-directory li { border-top: 1px solid #a6a79f; padding-top: clamp(22px,2.5vw,36px); }
.product-directory .product-availability { color: var(--secondary); font: 12px/1.5 var(--code); }
.field-home .product-directory h3 { margin: 14px 0; font: 500 clamp(26px,2.7vw,38px)/1.15 var(--display); letter-spacing: -.04em; }
.product-directory h3 a { text-decoration: none; }
.product-directory h3 a:hover { text-decoration: underline; }
.product-directory li > p:not(.product-availability) { max-width: 44ch; color: var(--secondary); }
.product-directory .field-link { margin-top: 14px; }
@media (max-width: 700px) { .product-directory { grid-template-columns: 1fr; } }