.field-journal { background: var(--paper); padding-top: clamp(36px, 5vw, 70px); padding-bottom: clamp(60px, 8vw, 100px); overflow: clip; }
.field-heading { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr); align-items: end; gap: 24px 70px; margin-bottom: clamp(30px, 4vw, 56px); }
.field-heading h2 { font-size: clamp(2.8rem, 5.4vw, 5.25rem); margin-top: 18px; }
.field-heading h2 em { font-size: 1.14em; }
.field-intro { max-width: 37ch; color: var(--muted); font-size: .88rem; line-height: 1.85; }
.field-invitation { margin-top: 14px; color: var(--ink); font-size: .76rem; }
.field-reel { position: relative; }
.field-playback { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.field-playback button { position: sticky; top: calc(var(--site-header-height, 0px) + 12px); display: block; margin: 12px var(--gutter) 0 auto; min-height: 44px; padding: 8px 16px; border: 1px solid #839073; border-radius: 100px; background: var(--paper); color: var(--ink); font-size: .72rem; pointer-events: auto; }
.field-playback button:is(:hover, :focus-visible) { background: #e4e8da; }
.field-strip { position: relative; display: flex; align-items: start; gap: clamp(24px, 3.2vw, 48px); padding: 20px var(--gutter) 30px; list-style: none; overflow: auto hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
.field-strip:is([data-field-autoplay], [data-field-free-scroll]) { scroll-snap-type: none; }
.field-strip::-webkit-scrollbar { display: none; }
.field-strip:focus-visible { outline-offset: -5px; }
.field-card { flex: 0 0 var(--field-width); min-width: 0; padding-top: var(--field-offset); scroll-snap-align: start; }
.field-card figure { transform: rotate(var(--field-angle)); transform-origin: center; }
.field-card--opening { --field-width: clamp(440px, 38vw, 580px); --field-height: 370px; --field-offset: 92px; --field-angle: -.7deg; }
.field-card--high { --field-width: clamp(220px, 18vw, 270px); --field-height: 390px; --field-offset: 8px; --field-angle: 1.1deg; }
.field-card--detail { --field-width: 230px; --field-height: 245px; --field-offset: 252px; --field-angle: -.9deg; }
.field-card--wide { --field-width: clamp(420px, 36vw, 560px); --field-height: 350px; --field-offset: 54px; --field-angle: .5deg; }
.field-card--work { --field-width: 280px; --field-height: 410px; --field-offset: 142px; --field-angle: -.8deg; }
.field-card--panorama { --field-width: clamp(440px, 42vw, 640px); --field-height: 350px; --field-offset: 24px; --field-angle: .6deg; }
.field-card--interior { --field-width: clamp(380px, 32vw, 510px); --field-height: 330px; --field-offset: 222px; --field-angle: -.6deg; }
.field-card--solar { --field-width: clamp(440px, 40vw, 620px); --field-height: 340px; --field-offset: 90px; --field-angle: .7deg; }
.field-card--slim { --field-width: 260px; --field-height: 380px; --field-offset: 0px; --field-angle: -1deg; }
.field-card--people { --field-width: 300px; --field-height: 410px; --field-offset: 170px; --field-angle: .5deg; }
.field-image { position: relative; display: block; width: 100%; height: var(--field-height); overflow: hidden; padding: 0; border: 0; background: #dbe0d2; color: var(--paper); cursor: zoom-in; text-decoration: none; }
.field-image > img { width: 100%; height: 100%; object-fit: cover; }
.field-enlarge { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #e5d6b350; border-radius: 100px; background: #151b15de; font-size: .67rem; }
.field-journal .novaly-switch { width: 18px; height: 25px; }
.field-card figcaption { padding: 18px 5px 0; }
.field-card figcaption p { color: var(--muted); font-size: .64rem; letter-spacing: .07em; }
.field-card figcaption strong { display: block; margin-top: 6px; font-family: Newsreader, Georgia, serif; font-weight: 400; font-size: 1.45rem; line-height: 1.1; }
.field-navigation { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.field-position { align-items: center; gap: 20px !important; color: var(--muted); font-size: .72rem; }
.field-meter { display: block; width: clamp(80px, 18vw, 250px); height: 2px; overflow: hidden; background: #c7cbbd; }
.field-meter > span { display: block; width: 100%; height: 100%; background: #38632c; transform: scaleX(var(--field-progress, 0)); transform-origin: left; }
.field-navigation > div, .field-dialog-navigation { display: flex; gap: 10px; }
.field-navigation button, .field-dialog-navigation button { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 46px; padding: 9px 14px; border: 1px solid #839073; border-radius: 100px; background: transparent; color: inherit; font-size: .72rem; }
.field-navigation button:disabled { opacity: .4; cursor: default; }
.field-navigation button:not(:disabled):is(:hover, :focus-visible) { background: #e4e8da; }
.field-dialog { width: min(1200px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: clamp(12px, 2.5vw, 30px); border: 1px solid #9a96706e; background: #151b15; color: var(--paper); overscroll-behavior: contain; }
.field-dialog::backdrop { background: #0c120de8; backdrop-filter: blur(5px); }
.field-dialog :focus-visible { outline-color: var(--bright); }
.field-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 14px; font-size: .74rem; }
.field-dialog-top span { margin-left: 20px; color: #d4d1bd; }
.field-dialog-top button { width: 44px; height: 44px; border: 1px solid #777d65; border-radius: 50%; color: var(--paper); background: transparent; font-size: 1.6rem; }
.field-dialog figure > img { width: auto; height: auto; max-width: 100%; max-height: min(62dvh, 700px); margin-inline: auto; object-fit: contain; }
.field-dialog figcaption { padding: 18px 0; }
.field-dialog figcaption > span { color: #d4d1bd; font-size: .72rem; }
.field-dialog h3 { margin-top: 7px; font-family: Newsreader, Georgia, serif; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.field-dialog h3:focus { outline: none; }
.field-dialog-navigation { justify-content: space-between; }
.field-dialog-navigation button:is(:hover, :focus-visible) { background: #343b2b; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion='reduced']) .field-image > img { transition: scale 800ms cubic-bezier(.2,.7,.3,1); }
  :root:not([data-motion='reduced']) .field-image:is(:hover, :focus-visible) > img { scale: 1.035; }
  :root:not([data-motion='reduced']) .field-dialog[open] { animation: field-open 320ms ease-out; }
  @keyframes field-open { from { opacity: 0; translate: 0 12px; } }
}
@media (max-width: 700px) {
  .field-heading { grid-template-columns: 1fr; gap: 22px; }
  .field-strip { gap: 28px; padding-top: 12px; padding-bottom: 26px; }
  .field-card--opening { --field-width: 84vw; --field-height: 260px; --field-offset: 72px; }
  .field-card--high { --field-width: 62vw; --field-height: 340px; --field-offset: 0px; }
  .field-card--detail { --field-width: 58vw; --field-height: 225px; --field-offset: 168px; }
  .field-card--wide { --field-width: 86vw; --field-height: 275px; --field-offset: 35px; }
  .field-card--work { --field-width: 64vw; --field-height: 340px; --field-offset: 100px; }
  .field-card--panorama { --field-width: 88vw; --field-height: 260px; --field-offset: 18px; }
  .field-card--interior { --field-width: 82vw; --field-height: 270px; --field-offset: 155px; }
  .field-card--solar { --field-width: 88vw; --field-height: 260px; --field-offset: 70px; }
  .field-card--slim { --field-width: 60vw; --field-height: 340px; --field-offset: 4px; }
  .field-card--people { --field-width: 66vw; --field-height: 350px; --field-offset: 120px; }
  .field-navigation { align-items: start; flex-direction: column; gap: 12px; }
  .field-navigation > div { width: 100%; justify-content: space-between; }
  .field-meter { width: 38%; }
}