/* FIELD / STUDIO — Thresholds, V0.3 */
:root {
  --field-edge: #2d2928;
  --field-copper: #d49b7b;
  --field-quiet: #cdc2b6;
  --field-ease: cubic-bezier(.2, .65, .25, 1);
}
.hero-copy { animation: none; }
.hero h1 { letter-spacing: -.061em; }
.hero-disclosure { max-width: 31ch; }
.hero-link > span, .next-link > span, .field-footer-contact > span {
  transition: transform .25s var(--field-ease);
}
:is(.hero-link, .next-link, .field-footer-contact):is(:hover, :focus-visible) > span {
  transform: translate(3px, -3px);
}
.hero-image::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 1px solid #f5eee763;
  pointer-events: none;
}
.hero-image-caption { z-index: 1; }
.hero-image-caption small { display: inline-block; margin-top: .35em; }

.work-section .section-heading { margin-bottom: clamp(2rem, 5vw, 4.5rem); }
.work-section .project-caption {
  border-bottom: 1px solid #a388762e;
  padding-block: 1.25rem 1.4rem;
}
.work-section .project-caption p {
  max-width: 26ch;
  font-size: .84rem;
  line-height: 1.5;
}
.work-section .project-pair { margin-top: clamp(2.5rem, 7vw, 6rem); }
.work-section .project-pair .landscape { margin-top: clamp(1.5rem, 6vw, 5.5rem); }
.field-story-frame { display: block; overflow: hidden; background: var(--surface-soft); }
.project-cover .field-story-frame > img {
  display: block;
  width: 100%;
  max-height: 780px;
  aspect-ratio: 1.7;
  object-fit: cover;
  object-position: center 55%;
}
.project-cover figcaption { font-size: .76rem; line-height: 1.55; }
.project-heading .eyebrow { color: var(--copper-ink); }
.project-facts { font-size: .87rem; line-height: 1.55; }
.project-gallery .gallery-hint, .gallery-grid figcaption { font-size: .79rem; }
.gallery-open .image-action { border: 1px solid #f5eee7a1; }
.gallery-open:focus-visible .image-action { background: var(--copper); color: var(--graphite); }
.dialog-top, .dialog-bottom { font-size: .81rem; letter-spacing: .02em; }
.dialog-top button, .dialog-bottom button {
  min-inline-size: 44px;
  transition: border-color .2s, background-color .2s;
}
.dialog-top button:hover, .dialog-bottom button:hover { border-color: var(--field-copper); }
#dialog-caption { line-height: 1.45; }
.next-project {
  background: #e3d9cb;
  border-bottom: 0;
}
.next-project > span {
  color: var(--copper-ink);
  font-size: .72rem;
}
.next-link { width: 100%; }

.approach > div > p:not(.eyebrow) { font-size: .94rem; line-height: 1.65; }
.approach summary {
  display: grid;
  grid-template-columns: 2ch minmax(0, 1fr) 1.2em;
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding-inline: .5rem;
  line-height: 1.35;
}
.approach summary > span {
  color: var(--copper-ink);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.approach summary h3 { line-height: 1.25; letter-spacing: -.025em; }
.approach summary b { text-align: center; transition: transform .26s var(--field-ease); }
.approach summary:is(:hover, :focus-visible), .approach details[open] > summary {
  background: #a9745420;
}
.approach details p {
  margin: 0;
  padding: .8rem 1rem 1.6rem clamp(2.5rem, 5vw, 4rem);
  font-size: clamp(.92rem, 1.18vw, 1rem);
  line-height: 1.65;
}

.field-footer {
  color: #f1e9dd;
  background: radial-gradient(ellipse at 82% 0%, #4a3530 0%, transparent 53%), var(--field-edge);
  border-top: 1px solid #8a6959;
  padding-top: clamp(3rem, 8vw, 8rem);
  padding-bottom: 1.7rem;
}
.field-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: clamp(2rem, 8vw, 9rem);
  align-items: start;
}
.field-footer-intro .eyebrow { color: var(--field-copper); }
.field-footer-intro h2 {
  margin: 1rem 0 1.25rem;
  font-size: clamp(2.25rem, 5.6vw, 6rem);
  line-height: 1.04;
  letter-spacing: -.06em;
}
.field-footer-intro h2 em { color: #e8b59b; }
.field-footer-intro > p:not(.eyebrow) {
  max-width: 38ch;
  color: var(--field-quiet);
  font-size: .94rem;
  line-height: 1.65;
}
.field-footer-contact {
  display: inline-flex;
  gap: 2rem;
  align-items: center;
  min-height: 44px;
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--field-copper);
}
.field-footer-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  padding-top: .25rem;
}
.field-footer-map h3 {
  border-bottom: 1px solid #e7c6b347;
  padding-bottom: .75rem;
  margin-bottom: .45rem;
  color: var(--field-quiet);
  font-size: .7rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.field-footer-map ul { list-style: none; padding: 0; margin: 0; }
.field-footer-map a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: .91rem;
  line-height: 1.35;
}
.field-footer a:is(:hover, :focus-visible) { color: #f2b99e; }
.field-footer .footer-wordmark {
  margin: clamp(2rem, 6.5vw, 6.5rem) 0 clamp(1.5rem, 4vw, 3.5rem);
  font-size: clamp(1.9rem, 11.1vw, 13.75rem);
  letter-spacing: -.076em;
  line-height: 1.06;
}
.field-footer .footer-wordmark i { color: var(--field-copper); }
.field-footer .field-footer-tail {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.75rem;
  border-top: 1px solid #e7c6b347;
  padding-top: 1.2rem;
  color: var(--field-quiet);
  font-size: .78rem;
  line-height: 1.55;
}
.field-footer-tail a { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 760px) {
  .field-footer-main { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero-copy { padding-top: 2rem; padding-bottom: 1.5rem; }
  .hero h1 { margin-top: 1.7rem; margin-bottom: 1.2rem; }
  .hero-link { margin-top: .75rem; }
  .hero-disclosure { max-width: 38ch; margin-top: 1.4rem; }
  .hero-image { min-height: clamp(18rem, 85vw, 24rem); }
  .hero-image > img { object-position: center 60%; }
  .hero-image::after { inset: .6rem; }
  .hero-image-caption { padding-inline: 1.25rem; }
  .work-section .project-pair .landscape { margin-top: 0; }
  .work-section .project-caption { align-items: start; gap: .6rem; flex-direction: column; }
  .work-section .project-caption p { text-align: left; }
  .project-cover .field-story-frame > img { aspect-ratio: 1.15; }
  .project-cover figcaption { flex-wrap: wrap; gap: .25rem 1rem; }
  .field-footer .footer-wordmark { font-size: clamp(1.9rem, 11vw, 4.1rem); }
  .dialog-top, .dialog-bottom { gap: .5rem; }
  .dialog-top button, .dialog-bottom button { padding-inline: .65rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-image > img { animation: field-threshold 1.1s var(--field-ease) backwards; }
  .hero h1, .project-heading h1 {
    animation: field-title .68s var(--field-ease) .06s backwards;
  }
  @supports (animation-timeline: view()) {
    .field-story-frame, .work-section .project-image { view-timeline-name: --field-frame; }
    .field-story-frame > img, .work-section .project-image > img {
      animation: field-threshold linear both;
      animation-duration: auto;
      animation-timeline: --field-frame;
      animation-range: entry 4% cover 43%;
    }
  }
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    .approach details { interpolate-size: allow-keywords; }
    .approach details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size .32s var(--field-ease), content-visibility .32s allow-discrete;
    }
    .approach details[open]::details-content { block-size: auto; }
  }
}
@keyframes field-threshold {
  from { clip-path: inset(5% 7% 5% 7%); transform: scale(1.075) translateY(1.4%); }
  to { clip-path: inset(0); transform: none; }
}
@keyframes field-title {
  from { opacity: .64; transform: translateY(.26em); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bk-field-concept *, .bk-field-concept *::before, .bk-field-concept *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .bk-field-concept :is(.hero-image, .project-image, .gallery-open):hover > img { transform: none; }
}