/* Homepage — editorial composition, open margins, two individually placed works. */
.hero { display: grid; grid-template-columns: 1.18fr 1fr; gap: 6%; padding-block: 74px 76px; align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.hero-eyebrow { font-size: 9px; letter-spacing: 1.3px; }
.hero h1 { margin-block: 28px 30px; font-size: clamp(56px, 6.6vw, 100px); line-height: 1.075; letter-spacing: -4.8px; }
.hero h1 > span, .hero h1 > em { display: block; }
.hero h1 > em { font-size: .82em; letter-spacing: -.045em; white-space: nowrap; }
.hero-intro { display: flex; align-items: center; gap: 19px; }
.hero-intro p { font-size: 13px; line-height: 1.8; color: var(--muted); }
.intro-mark { display: inline-block; color: var(--clay); font-size: 48px; line-height: 1; }
.hero-link { margin-top: 23px; }
.atelier-art { position: relative; background: #e0e5d9; height: 490px; margin: 0; isolation: isolate; }
.atelier-art::after { content: ''; position: absolute; inset: 0; opacity: .18; pointer-events: none; background: url('../images/grain.svg'); mix-blend-mode: multiply; z-index: 3; }
.art-caption { position: absolute; top: 25px; left: 25px; right: 25px; display: flex; justify-content: space-between; gap: 15px; font: 8px var(--mono); letter-spacing: 1.1px; color: #626d57; z-index: 2; }
.art-drawing { position: absolute; inset: 0; overflow: hidden; }
.drawing-orbit { position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid #7e8e6952; border-radius: 50%; left: 16%; top: 16%; }
.drawing-axis { position: absolute; height: 78%; top: 10%; left: 50%; border-left: 1px dashed #8a967d45; }
.drawing-cross { position: absolute; right: 11%; top: 20%; color: #8c987e; font: 23px var(--mono); font-weight: 200; }
.art-objects { position: absolute; inset: 0; transform: translate3d(var(--art-x, 0px), var(--art-y, 0px), 0); transition: transform .7s var(--ease-out); }
.arch { position: absolute; width: 37%; height: 56%; border: 48px solid; border-bottom: 0; border-radius: 120px 120px 0 0; bottom: 18%; }
.arch-sage { left: 44%; bottom: 26%; height: 53%; width: 34%; border-color: #7c8c6b; transform: skewY(8deg); box-shadow: inset 11px 7px 14px #53644330, 13px 13px 10px #505e4320; }
.arch-cream { left: 17%; border-color: #e7ddbf; transform: skewY(-8deg); box-shadow: inset 9px 8px 14px #85785926, 10px 12px 8px #5e644a20; }
.clay-sphere { position: absolute; width: 23%; aspect-ratio: 1; right: 10%; bottom: 18%; border-radius: 50%; background: radial-gradient(circle at 32% 27%, #e8a577 0%, #ca7950 45%, #aa5738 80%); box-shadow: 13px 15px 16px #61604440; animation: sphere-breathe 7s ease-in-out infinite; }
.little-tile { position: absolute; width: 35px; height: 12px; background: #c2c9b5; bottom: 15%; left: 13%; transform: skewY(-8deg); box-shadow: 5px 5px 0 #b0b89e; }
.object-shadow { position: absolute; height: 26px; width: 75%; left: 15%; bottom: 15%; background: #5f6e4f40; filter: blur(13px); border-radius: 50%; }
.art-ground { position: absolute; bottom: 12%; left: 0; right: 0; border-top: 1px solid #a7b198; z-index: -1; }
.art-colophon { position: absolute; bottom: 22px; left: 25px; right: 25px; display: flex; justify-content: space-between; align-items: center; color: #5c6950; font: italic 15px var(--serif); }
.art-colophon span:last-child { font: 23px var(--sans); }
.art-margin-note { position: absolute; bottom: -36px; right: 14px; transform: rotate(-5deg); font-size: 16px; }
.discipline-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 19px; border-block: 1px solid var(--line); font: 9px var(--mono); color: var(--muted); letter-spacing: 1px; }
.strip-rule { height: 1px; width: 28px; background: #bfb8a9; }
.strip-star { font: 26px var(--sans); color: var(--clay); }
.work-section { padding-top: 90px; }
.project-row { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; align-items: center; padding-block: 42px 53px; border-bottom: 1px solid var(--line); }
.project-index { font-size: 9px; }
.project-index span { margin-inline: 9px; opacity: .5; }
.project-copy h3 { font-size: clamp(48px, 5.2vw, 76px); letter-spacing: -2.7px; line-height: 1; margin-block: 23px; }
.project-copy h3 a:hover em { color: var(--clay-dark); }
.project-summary { font-size: 13px; color: var(--muted); max-width: 290px; line-height: 1.85; }
.project-link { margin-top: 20px; width: 245px; max-width: 100%; }
.project-domain { display: block; margin-top: 12px; font: 9px var(--mono); color: #898273; overflow-wrap: anywhere; }
.project-cover { display: block; position: relative; overflow: hidden; aspect-ratio: 1.4; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.project-cover:hover img { transform: scale(1.045); }
.cover-sage { background: #344d44; }
.cover-clay { background: #bb694c; }
.cover-stone { background: #211e1b; }
.project-cover.cover-stone img { object-fit: contain; padding: 15px; }
.cover-bottom { position: absolute; bottom: 20px; left: 25px; right: 25px; display: flex; align-items: center; justify-content: space-between; font: 11px var(--mono); letter-spacing: .4px; color: #f9f1d8; }
.cover-arrow { border: 1px solid #fcf5dc66; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; font: 22px var(--sans); transition: background .3s, color .3s; }
.project-cover:hover .cover-arrow { background: var(--paper); color: var(--ink); }
.project-row-reverse { grid-template-columns: 1.2fr .8fr; padding-block: 53px; }
.project-row-reverse .project-copy { order: 2; }
.project-row-reverse .project-cover { order: 1; }
.artwork-note { margin-top: 17px; text-align: right; font-size: 9px; color: #8a8274; }
.about-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; padding-block: 100px 110px; }
.margin-sketch { margin-top: 45px; display: flex; width: 150px; flex-direction: column; align-items: center; }
.margin-sketch > span:first-child { display: block; font-size: 120px; line-height: 1; color: var(--clay); animation: sketch-turn 28s linear infinite; }
.margin-sketch .handwritten { margin-top: 18px; transform: rotate(-7deg); font-size: 17px; }
.about-copy h2 { font-size: clamp(40px, 4.4vw, 62px); letter-spacing: -2px; line-height: 1.13; margin-bottom: 28px; }
.about-copy > p { max-width: 510px; font-size: 14px; line-height: 1.95; color: var(--muted); }
.about-copy > p + p { margin-top: 13px; }
.tools-list { display: flex; gap: 17px; flex-wrap: wrap; margin-block: 28px 22px; }
.tools-list span { font: 9px var(--mono); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.contact-section { background: var(--paper-deep); position: relative; overflow: hidden; }
.contact-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12%; padding-block: 77px 80px; align-items: center; }
.contact-inner h2 { font-size: clamp(64px, 7.8vw, 110px); letter-spacing: -4.5px; line-height: .98; margin-block: 28px; }
.contact-email { display: inline-flex; align-items: center; gap: 32px; font-size: 16px; border-bottom: 1px solid #b0a48e; padding-block: 6px; }
.contact-email span { color: var(--clay); font-size: 26px; }
.contact-email:hover { color: var(--clay); }
.contact-aside { padding-top: 25px; }
.contact-spark { display: block; color: var(--clay); font-size: 65px; line-height: 1; margin-bottom: 27px; }
.contact-aside p { font-size: 14px; line-height: 1.85; color: var(--muted); }
.social-links { display: flex; gap: 28px; font-size: 12px; margin-top: 26px; }
.social-links a { border-bottom: 1px solid #b9ad97; padding-bottom: 5px; }
.social-links a:hover { color: var(--clay); }
/* Project and error pages reuse the same editorial grammar. */
.project-detail { padding-block: 48px 0; }
.project-back { font-size: 11px; }
.detail-heading { margin-block: 55px 44px; }
.detail-heading h1 { font-size: clamp(56px, 8vw, 110px); letter-spacing: -4px; margin-block: 20px; }
.detail-heading > p:last-child { font-size: 14px; color: var(--muted); max-width: 480px; }
.detail-art { position: relative; }
.detail-art img { width: 100%; max-height: 650px; object-fit: cover; }
.detail-art figcaption { position: absolute; bottom: 17px; left: 25px; font: 9px var(--mono); color: #f6ecd3; }
.detail-body { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12%; padding-block: 75px; }
.detail-body h2 { font-size: 48px; letter-spacing: -2px; }
.detail-body p { font-size: 14px; color: var(--muted); line-height: 1.9; }
.project-facts { margin-block: 28px; }
.project-facts > div { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding-block: 13px; border-bottom: 1px solid var(--line); font-size: 12px; }
.project-facts dt { color: var(--muted); }
.project-facts dd { margin: 0; overflow-wrap: anywhere; }
.detail-body .domain-note { font-size: 12px; margin-bottom: 25px; }
.next-project { display: grid; grid-template-columns: 1fr 2fr auto; align-items: center; gap: 20px; border-block: 1px solid var(--line); padding-block: 35px; }
.next-project > span:nth-child(2) { font: 38px var(--serif); letter-spacing: -1px; }
.next-project > span:last-child { color: var(--clay); font-size: 35px; transition: transform .3s; }
.next-project:hover > span:last-child { transform: translate(5px, -5px); }
.not-found { min-height: 65vh; padding-block: 85px; }
.not-found h1 { font-size: clamp(48px, 7vw, 90px); letter-spacing: -3px; margin-block: 25px; }
.not-found > p:not(.eyebrow) { max-width: 420px; color: var(--muted); margin-bottom: 25px; font-size: 14px; }
@keyframes sphere-breathe { 50% { transform: translateY(-7px); box-shadow: 15px 22px 21px #61604433; } }
@keyframes sketch-turn { to { transform: rotate(360deg); } }
@media (max-width: 1100px) and (min-width: 761px) {
  .hero { gap: 4%; grid-template-columns: 1.2fr 1fr; }
  .hero h1 { font-size: 6.3vw; letter-spacing: -3.3px; }
  .atelier-art { height: 420px; }
  .arch { border-width: 38px; border-bottom: 0; }
  .hero-intro p { font-size: 12px; }
  .hero-eyebrow { font-size: 8px; }
  .project-row, .about-section { gap: 7%; }
  .discipline-strip { letter-spacing: .4px; font-size: 8px; gap: 15px; }
  .strip-rule { width: 16px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 46px; padding-block: 39px 65px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: 1px; }
  .hero h1 { font-size: clamp(44px, 11.8vw, 76px); letter-spacing: -.052em; margin-block: 26px; }
  .hero h1 > em { font-size: .86em; letter-spacing: -.048em; }
  .hero-intro { gap: 15px; }
  .hero-intro p { font-size: 12px; }
  .intro-mark { font-size: 42px; }
  .hero-link { margin-top: 20px; font-size: 11px; }
  .atelier-art { height: auto; aspect-ratio: .98; }
  .arch { border-width: 36px; border-bottom: 0; }
  .art-caption { font-size: 7px; left: 19px; right: 19px; top: 20px; }
  .art-colophon { bottom: 16px; left: 20px; right: 20px; font-size: 13px; }
  .art-colophon span:last-child { font-size: 20px; }
  .art-margin-note { bottom: -30px; font-size: 15px; }
  .little-tile { width: 24px; height: 8px; }
  .discipline-strip { flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 7px; letter-spacing: .3px; padding-block: 16px; }
  .discipline-strip > span:last-child, .strip-rule { display: none; }
  .strip-star { font-size: 22px; }
  .work-section { padding-top: 55px; }
  .project-row, .project-row-reverse { grid-template-columns: 1fr; gap: 28px; padding-block: 30px 35px; }
  .project-row-reverse .project-copy, .project-row-reverse .project-cover { order: initial; }
  .project-copy h3 { font-size: 49px; margin-block: 17px; letter-spacing: -2px; }
  .project-copy h3 br { display: none; }
  .project-summary { font-size: 12px; max-width: 300px; }
  .project-link { margin-top: 15px; width: 100%; }
  .project-domain { font-size: 9px; }
  .project-cover { aspect-ratio: 1.14; }
  .cover-bottom { left: 18px; right: 18px; bottom: 17px; font-size: 9px; }
  .artwork-note { font-size: 8px; }
  .about-section { grid-template-columns: 1fr; gap: 26px; padding-block: 65px; }
  .margin-sketch { display: none; }
  .about-copy h2 { font-size: 40px; letter-spacing: -1.7px; margin-bottom: 22px; }
  .about-copy > p { font-size: 13px; line-height: 1.9; }
  .tools-list { gap: 14px; }
  .tools-list span { font-size: 8px; }
  .contact-inner { grid-template-columns: 1fr; gap: 32px; padding-block: 50px; }
  .contact-inner h2 { font-size: 70px; letter-spacing: -3px; margin-block: 24px; }
  .contact-email { font-size: 14px; gap: 25px; }
  .contact-aside { padding-top: 0; }
  .contact-spark { display: none; }
  .contact-aside p { font-size: 12px; }
  .social-links { margin-top: 20px; }
  .project-detail { padding-top: 30px; }
  .detail-heading { margin-block: 40px 30px; }
  .detail-heading h1 { font-size: 53px; letter-spacing: -2.5px; }
  .detail-heading > p:last-child { font-size: 13px; }
  .detail-art img { min-height: 290px; object-fit: cover; }
  .detail-art figcaption { left: 15px; font-size: 8px; }
  .detail-body { grid-template-columns: 1fr; gap: 25px; padding-block: 45px; }
  .detail-body h2 { font-size: 39px; }
  .detail-body p { font-size: 13px; }
  .project-facts > div { grid-template-columns: 65px 1fr; gap: 10px; font-size: 11px; }
  .next-project { grid-template-columns: 1fr auto; gap: 12px; padding-block: 25px; }
  .next-project > .eyebrow { grid-column: 1 / -1; }
  .next-project > span:nth-child(2) { font-size: 30px; }
  .not-found { padding-block: 60px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 42px; }
  .hero-intro p { font-size: 11px; }
  .wide-only { display: none; }
  .arch { border-width: 29px; border-bottom: 0; }
  .project-copy h3 { font-size: 43px; }
  .contact-inner h2 { font-size: 62px; }
  .discipline-strip { font-size: 6px; gap: 8px; }
}