/* A full pane of glass at the selected 2px blur. */
.homepage { --bg: #111311; --text: #f1f1e8; --accent: #dab380; --glass: 2px; background: var(--bg); }
.homepage .wrap { max-width: 1240px; padding: 0 30px; }
.homepage .masthead { padding: 0; }
.masthead .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 30px; padding-bottom: 30px; position: relative; }
.masthead .wrap::after { content: ""; position: absolute; bottom: 0; left: 30px; right: 30px; border-bottom: 1px solid #30372c; }
.wordmark { font-size: 20px; font-weight: 650; letter-spacing: -.06em; text-decoration: none; }
.wordmark span { color: var(--accent); }
.motion-toggle { background: transparent; border: 1px solid #56604e; border-radius: 30px; padding: 8px 13px; color: #c3c9b9; font: inherit; font-size: 11px; cursor: pointer; }
.motion-toggle:hover { border-color: var(--accent); color: var(--text); }
.homepage a:focus-visible, .motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.intro { padding: 54px 0 48px; position: relative; }
.eyebrow { font-size: 10px; letter-spacing: .19em; color: #c6ac86; font-weight: 600; }
.intro h1 { font-size: clamp(37px, 5vw, 65px); font-weight: 500; letter-spacing: -.06em; line-height: 1.08; margin: 17px 0 0; }
.intro h1 span { font-family: Georgia, serif; font-style: italic; font-weight: 400; color: #c9bc9e; letter-spacing: -.055em; }
.intro-copy { position: absolute; right: 0; bottom: 48px; font-size: 13px; line-height: 1.8; color: #a8af9e; }
.homepage .collection { margin-bottom: 40px; }
.section-label { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #30372c; padding: 18px 0; }
.section-label h2 { margin: 0; padding: 0; border: 0; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text); }
.section-label > span { font-size: 9px; letter-spacing: .1em; color: #99a38e; }
.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.project-grid .group-label { grid-column: 1 / -1; font-size: 11px; font-weight: 500; color: #a8af9e; padding: 18px 0 12px; }
.project-card { position: relative; display: block; isolation: isolate; overflow: hidden; height: 350px; border-radius: 0; background: #252d25; text-decoration: none; transform-origin: center; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.homepage .project-card:focus-visible { outline-offset: -3px; z-index: 2; }
.project-card:focus-visible { transform: scale(1.04); box-shadow: 0 12px 38px #0007; z-index: 2; }
@media (hover: hover) {
  .project-card:hover { transform: scale(1.04); box-shadow: 0 12px 38px #0007; z-index: 2; }
}
.project-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.project-glass { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: inherit; background: linear-gradient(180deg, #101b1730 0%, #0f191522 26%, #0e1816ad 64%, #0c1513ed 100%); backdrop-filter: blur(var(--glass)); -webkit-backdrop-filter: blur(var(--glass)); box-shadow: inset 0 0 0 1px #ffffff20; transition: box-shadow .3s; }
.project-card:hover .project-glass, .project-card:focus-visible .project-glass { box-shadow: inset 0 0 0 1px #e7d7b590; }
.project-kind { align-self: flex-start; font-size: 9px; letter-spacing: .11em; background: #111a16b8; border: 1px solid #ffffff40; padding: 6px 10px; border-radius: 50px; color: #f4f2e8; }
.project-caption { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.project-number { font-size: 8px; letter-spacing: .15em; color: #dedccc; }
.project-caption :is(h3, h4) { font-size: 32px; line-height: 1.15; letter-spacing: -.045em; font-weight: 500; margin: 7px 0 9px; padding: 0; color: inherit; text-wrap: balance; }
.project-caption p { font-size: 12px; line-height: 1.65; color: #ebece0; max-width: 49ch; text-wrap: pretty; }
.project-arrow { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #ffffff65; border-radius: 50%; font-size: 21px; color: #f4ebd8; transition: background .3s, color .3s; }
.project-card:hover .project-arrow, .project-card:focus-visible .project-arrow { background: #e9d3af; color: #262e22; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-card:hover .project-arrow { animation: homepage-arrow-drift 3s ease-in-out infinite; }
}
.motion-paused .project-card .project-arrow, .page-hidden .project-card .project-arrow { animation-play-state: paused; }
@keyframes homepage-arrow-drift {
  0%, 100% { transform: translate(0, 0); }
  35% { transform: translate(3px, -3px); }
  70% { transform: translate(-1px, -1px); }
}
.closing-note { color: #a3aa97; font-size: 11px; padding: 0 0 5px; }
.homepage footer { color: #9aa38d; border-color: #30372c; }
.motion-ready .project-scene { animation: homepage-drift 16s ease-in-out infinite alternate paused; }
.motion-ready .project-card:nth-of-type(even) .project-scene { animation-direction: alternate-reverse; animation-duration: 19s; }
.motion-ready .project-card.in-view .project-scene { animation-play-state: running; }
.motion-ready.motion-paused .project-card .project-scene, .motion-ready.page-hidden .project-card .project-scene { animation-play-state: paused; }
@keyframes homepage-drift { from { transform: scale(1.025) translate(-.5%, 0); } to { transform: scale(1.13) translate(1%, -1%); } }
@media (max-width: 950px) {
  .intro-copy { position: static; margin-top: 22px; }
  .intro { padding: 40px 0; }
  .project-card { height: 370px; }
  .project-glass { padding: 22px; }
  .project-caption :is(h3, h4) { font-size: 28px; }
}
@media (max-width: 620px) {
  .homepage .wrap { padding-left: 18px; padding-right: 18px; }
  .masthead .wrap { padding-top: 23px; padding-bottom: 23px; gap: 12px; }
  .masthead .wrap::after { left: 18px; right: 18px; }
  .wordmark { font-size: 18px; }
  .motion-toggle { font-size: 10px; padding: 7px 10px; flex-shrink: 0; }
  .intro h1 { font-size: clamp(34px, 10.5vw, 52px); }
  .project-grid { grid-template-columns: 1fr; }
  .project-card { height: 340px; }
  .project-glass { padding: 23px; }
  .project-caption { gap: 12px; }
  .project-caption :is(h3, h4) { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage *, .homepage *::before, .homepage *::after { animation: none !important; transition: none !important; }
  .project-card:hover, .project-card:focus-visible { transform: none; }
  .motion-toggle { display: none; }
}