/* Joyce's portfolio shell: subtly textured stock and the custom display face. */
@font-face {
  font-family: "Joyce Display";
  src: url("assets/fonts/joyce-display-study02.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --paper: #f5f1e8;
  --ink: #3b2d30;
  --wine: #45252f;
  --muted: #786b65;
  --rule: #d2c8b9;
  --stage: #eae3d7;
  --paper-card: #eee8dd;
  --paper-grain: url("assets/cardstock-channel-grain.svg");
  --serif: "Joyce Display", Georgia, serif;
  --serif-press-shadow: 0 -.35px 0 rgba(40, 20, 27, .24), 0 .8px 0 rgba(255, 253, 247, .9);
}
html { background-color: var(--paper); }
body {
  background-color: var(--paper);
  background-image: var(--paper-wash), var(--paper-grain);
  background-repeat: repeat;
  background-size: var(--paper-tile-size);
  font-synthesis: none;
}
h1, h2, h3, .contact-main, .wordmark { font-synthesis: none; }
:is(h1, h2, h3, .contact-main, .side-thought, .case-closing, .next-project) em {
  font-style: normal;
  font-weight: 400;
}
.site-header,
.lightbox,
.viewer-paper,
.ai-viewer,
.email-viewer-bar,
.decorilla-case .case-subnav {
  background-color: var(--paper);
  background-image: var(--paper-wash), var(--paper-grain);
  background-repeat: repeat;
  background-size: var(--paper-tile-size);
}
.site-header { border-bottom-color: var(--rule); }
footer {
  background-color: var(--wine);
  background-image: var(--paper-grain);
  background-repeat: repeat;
  background-size: var(--paper-tile-size);
  color: var(--paper);
}
.footer-bottom { border-top-color: #f5f1e833; }

/* Quiet paper mats; the branded screens and printed artifacts retain their colors. */
.brand-composition,
.gold-card,
.system-spread,
.website-spread,
.application-pair figure,
.campaign-diptych,
.catalog-spreads figure,
.gtac-cover,
.gtac-case-hero,
.history-screen,
.talk-title,
.related-campaigns,
.collaboration-art,
.media-card-visual,
.mah-press-cover,
.mah-print-pair,
.decorilla-case .digital-overview,
.decorilla-case .case-overview-montage,
.decorilla-case .feature-spread,
.decorilla-case .commerce-spread,
.decorilla-case .editorial-stage,
.decorilla-case .campaign-strip,
.decorilla-case .lightbox-body {
  background-color: var(--paper-card);
  background-image: var(--paper-wash), var(--paper-grain);
  background-repeat: repeat;
  background-size: var(--paper-tile-size);
}
.brand-composition::before { background: none; }
.decorilla-case .mobile-stage {
  background-color: var(--wine);
  background-image: var(--paper-grain);
  background-size: var(--paper-tile-size);
}
.image-action,
.film-play,
.ai-expand,
.ai-film-cover > span,
.ai-film-frame .ai-motion-toggle,
.email-open-label,
.interior-lightbox-arrow {
  background-color: var(--paper);
  background-image: var(--paper-wash), var(--paper-grain);
  background-size: var(--paper-tile-size);
}

/* An upright two-letter mark, with no borrowed ornament or distressed overlay. */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  min-width: 36px;
  font-family: var(--serif);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.12em;
  color: var(--wine);
}
.wordmark-e { display: inline-block; font-style: normal; transform: none; }
.wordmark-dot { display: none; }
.wordmark > svg, .wordmark > img { display: block; width: auto; height: 34px; }

/* Keep the wider face in the established compositions. */
.name-row { min-width: 0; }
.name-row h1 {
  min-width: 0;
  font-size: clamp(72px, 10.7vw, 172px);
  line-height: 1.04;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.name-row h1 em { font-style: normal; letter-spacing: inherit; }
.name-row > p { margin-bottom: .45em; }
.case-head h1 {
  font-size: clamp(52px, 6.3vw, 96px);
  line-height: 1.09;
  letter-spacing: -.03em;
  overflow-wrap: normal;
}
.decorilla-case .case-head h1 {
  font-size: clamp(54px, 6.6vw, 104px);
  line-height: 1.08;
  letter-spacing: -.03em;
}
.interiors-page .interiors-intro h1 {
  font-size: clamp(46px, 5.1vw, 78px);
  line-height: 1.1;
  letter-spacing: -.025em;
}
.decorilla-case .case-chapter h2 {
  min-width: 0;
  font-size: clamp(32px, 3.45vw, 52px);
  line-height: 1.14;
  letter-spacing: -.025em;
}
.story-text h2,
.residential-heading h2,
.home-press-film h2,
.image-direction-preview h2,
.photography-preview h2,
.mah-chapter-heading h2,
.mah-speaking-copy h2,
.interior-project-head h2,
.home-media-heading h2 {
  line-height: 1.13;
  letter-spacing: -.025em;
}
.media-card-caption h3,
.mah-press-caption h3,
.ai-spread-heading h2,
.ai-process-note h3 { line-height: 1.18; }
.ai-page .case-head h1 { font-size: clamp(52px, 6.5vw, 100px); }
.interior-lightbox .lightbox-bar h2,
.email-viewer-bar h2 { line-height: 1.2; }

.about-editorial-title {
  font-size: clamp(70px, 8.7vw, 130px);
  line-height: 1.03;
  letter-spacing: -.04em;
  margin-top: 42px;
}
.about-editorial-title > span,
.about-editorial-title > em {
  font-style: normal;
  font-weight: 400;
  padding: .015em .1em .075em .09em;
  background-color: var(--paper);
  background-image: var(--paper-wash), var(--paper-grain);
  background-repeat: repeat;
  background-size: var(--paper-tile-size);
  box-shadow: -.05em 0 var(--paper);
}
.about-editorial-title > em { margin-left: .3em; }
.contact-main {
  font-size: clamp(48px, 6.5vw, 94px);
  line-height: 1.1;
  letter-spacing: -.025em;
  padding-right: 85px;
}
.contact-main > span { font-family: var(--sans); font-size: .58em; line-height: 1; top: .15em; }

/* A restrained letterpress impression on the serif roles only. Navigation,
   body copy, small labels, and text inside the original artwork stay flat. */
:is(
  .serif-pressed,
  .wordmark,
  .name-row h1,
  .case-head h1,
  .folio-note h2,
  .project-caption h3,
  .side-thought,
  .small-monogram,
  .about h2,
  .about-editorial-title,
  .section-heading h2,
  .contact-main,
  .story-text h2,
  .identity-detail-text h2,
  .case-closing > p:not(.closing-note),
  .next-project > span:nth-child(2),
  .campaign-still > div > p,
  .project-credits h2,
  .residential-heading h2,
  .mahsing-feature h2,
  .material-detail h2,
  .collaboration-note h2,
  .collaboration-mark,
  .residence-title h2,
  .gtac-case-hero p,
  .companion-study h2,
  .talk-title h2,
  .related-campaigns h2,
  .heisman-heading h2,
  .thumbnail-caption h3,
  .chroyce-note h2,
  .media-project-label h2,
  .podcast-heading h2,
  .image-direction-preview h2,
  .selected-collaborations strong,
  .history-panels strong,
  .seasonal-gallery .film-caption h2,
  .ai-study-grid h2,
  .press-film-intro h2,
  .home-press-film h2,
  .collaboration-card .podcast-label,
  .ai-spread-heading h2,
  .ai-process-note h3,
  .decorilla-case .case-chapter h2,
  .decorilla-case .history-intro h3,
  .home-media-heading h2,
  .media-card-caption h3,
  .media-article-title,
  .home-recognition-link strong,
  .interior-project-head h2,
  .interior-lightbox .lightbox-bar h2,
  .mah-chapter-heading h2,
  .mah-speaking-copy h2,
  .mah-press-caption h3,
  .email-card figcaption strong,
  .email-viewer-bar h2,
  .photography-preview h2,
  .recognition-heading h2,
  .recognition-award h3,
  .publication-name,
  .article-title
) {
  text-shadow: var(--serif-press-shadow);
}
footer {
  --serif-press-shadow: 0 -.55px .15px rgba(15, 3, 9, .48), 0 .55px 0 rgba(255, 243, 222, .14);
}
.contact-main > span { text-shadow: none; }
@media print {
  .serif-pressed,
  body * { text-shadow: none !important; }
}
@media (forced-colors: active), (prefers-contrast: more) {
  :root { --paper-grain: none; }
  body * { text-shadow: none !important; }
}

@media (max-width: 1100px) {
  .about-editorial-title { font-size: clamp(65px, 8.7vw, 104px); margin-top: 34px; }
  .decorilla-case .case-chapter h2 { font-size: clamp(32px, 4.2vw, 45px); }
}
@media (max-width: 760px) {
  .wordmark { font-size: 29px; min-width: 33px; }
  .wordmark > svg, .wordmark > img { height: 31px; }
  .name-row h1 { font-size: clamp(40px, 14.3vw, 108px); line-height: 1.06; letter-spacing: -.035em; }
  .name-row > p { margin-top: 16px; margin-bottom: 0; }
  .case-head h1 { font-size: clamp(40px, 12.8vw, 72px); line-height: 1.1; }
  .decorilla-case .case-head h1 { font-size: clamp(36px, 12.5vw, 74px); line-height: 1.1; }
  .interiors-page .interiors-intro h1 { font-size: clamp(39px, 10.8vw, 66px); line-height: 1.12; }
  .ai-page .case-head h1 { font-size: clamp(42px, 13.8vw, 76px); }
  .decorilla-case .case-chapter h2 { font-size: clamp(31px, 8.7vw, 39px); line-height: 1.17; }
  .interior-project-head h2 { font-size: clamp(30px, 8.2vw, 36px); line-height: 1.15; }
  .home-media-heading h2 { font-size: clamp(38px, 11vw, 49px); line-height: 1.12; }
  .mah-chapter-heading h2, .mah-speaking-copy h2 { font-size: clamp(33px, 9vw, 39px); }
  .about-editorial-title {
    font-size: clamp(56px, 12.2vw, 92px);
    line-height: 1.04;
    margin-top: 0;
    margin-bottom: 48px;
  }
  .about-editorial-title > em { margin-left: .16em; }
  .contact-main { font-size: clamp(47px, 14.1vw, 66px); line-height: 1.12; padding-right: 43px; }
}

/* Homepage chapter labels stay quiet while the work remains prominent. */
.residential-heading h2.eyebrow,
.ai-home-preview .ai-home-heading h2.eyebrow,
.photography-preview h2.eyebrow {
  font: 600 10px/1.6 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0;
}

/* Seamless, finer-grained stock derived from the approved photographic card. */
:root {
  --paper: #eee8df;
  --paper-card: #ebe4db;
  --paper-wash: linear-gradient(rgb(255 255 255 / 29%), rgb(255 255 255 / 29%));
  --paper-grain: url("assets/joyce-cardstock-paper.webp");
  --paper-tile-size: 768px 768px;
}
footer, .decorilla-case .mobile-stage { background-blend-mode: multiply; }
.testimonials-panel {
  background-size: var(--paper-tile-size);
  background-blend-mode: multiply;
}
.testimonials blockquote { text-shadow: none; }
/* Photographic blind impression: natural pressure and soft paper edges. */
.home-intro { padding: 24px 0 32px; }
.name-row { display: block; }
.name-row h1.home-type-logo {
  display: block;
  width: min(100%, 560px);
  margin: 0 auto;
  line-height: 0;
}
.home-type-logo picture, .home-type-logo img {
  display: block;
  width: 100%;
  height: auto;
}
.home-type-logo img { filter: saturate(.58) brightness(1.035); }
@media (max-width: 760px) {
  .home-intro { padding: 18px 0 28px; }
  .name-row h1.home-type-logo { width: min(100%, 420px); }
}
@media (forced-colors: active), (prefers-contrast: more) {
  :root { --paper-grain: none; --paper-wash: none; }
}