.dx--fieldnote { --display: "Bricolage Grotesque", system-ui, sans-serif; --body: "Inter", system-ui, sans-serif; --display-weight: 800; --display-tracking: -0.035em; --bg: #F4EFE4; --bg-alt: #E9E1D0; --ink: #1F2A22; --accent: #23412F; --on-accent: #F4EFE4; --pop: #D9673A; --dark: #1A2A20; --on-dark: #F4EFE4; --line: rgba(31,42,34,.16); --radius: 18px; }
.dx--fieldnote .dx-nav { position: relative; }
.dx--fieldnote .dx-logo { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
.dx--fieldnote .dx-eyebrow { color: var(--pop); }

/* Split hero */
.dx--fieldnote .fn-hero { padding: 24px 0 clamp(64px, 8vw, 110px); }
.dx--fieldnote .fn-hero .dx-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.dx--fieldnote .fn-hero h1 { font-size: clamp(52px, 7vw, 104px); line-height: .95; margin-bottom: 28px; }
.dx--fieldnote .fn-hero h1 span { color: var(--pop); }
.dx--fieldnote .fn-hero .dx-lede { font-size: 20px; max-width: 42ch; opacity: .8; margin-bottom: 34px; }
.dx--fieldnote .fn-hero-media { position: relative; }
.dx--fieldnote .fn-hero-img { aspect-ratio: 4 / 5; border-radius: 28px; background: #333 center / cover no-repeat; }
.dx--fieldnote .fn-badge { position: absolute; left: -28px; bottom: 40px; background: #FFFDF8; border-radius: 18px; padding: 18px 22px; box-shadow: 0 18px 40px rgba(31,42,34,.18); display: flex; gap: 14px; align-items: center; font-size: 14px; max-width: 280px; }
.dx--fieldnote .fn-badge b { display: block; font-size: 15px; }
.dx--fieldnote .fn-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--pop); flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; }
.dx--fieldnote .fn-sticker { position: absolute; top: -26px; right: -18px; width: 132px; height: 132px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; text-align: center; font-family: var(--display); font-weight: 800; font-size: 17px; line-height: 1.1; transform: rotate(12deg); }

/* Marquee strip */
.dx--fieldnote .fn-strip { background: var(--accent); color: var(--on-accent); padding: 18px 0; overflow: hidden; white-space: nowrap; font-family: var(--display); font-weight: 600; font-size: 22px; }
.dx--fieldnote .fn-strip span { margin: 0 28px; }
.dx--fieldnote .fn-strip i { font-style: normal; color: var(--pop); }

/* Roast tiles */
.dx--fieldnote .fn-roasts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.dx--fieldnote .fn-roast { border-radius: 18px; padding: 26px; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; color: #1F2A22; }
.dx--fieldnote .fn-roast h3 { font-size: 34px; margin: 8px 0 6px; }
.dx--fieldnote .fn-roast small { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.dx--fieldnote .fn-roast p { font-size: 15px; opacity: .8; margin: 0; }
.dx--fieldnote .fn-roast-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(31,42,34,.2); padding-top: 16px; font-weight: 600; }
.dx--fieldnote .fn-roast-foot a { background: #1F2A22; color: #F4EFE4; border-radius: 99px; padding: 8px 14px; font-size: 13px; }
.dx--fieldnote .fn-r1 { background: #F2C14E; }
.dx--fieldnote .fn-r2 { background: #E8957A; }
.dx--fieldnote .fn-r3 { background: #A9C5A0; }
.dx--fieldnote .fn-r4 { background: #2F3A33; color: #F4EFE4; }
.dx--fieldnote .fn-r4 .fn-roast-foot { border-color: rgba(244,239,228,.25); }
.dx--fieldnote .fn-r4 .fn-roast-foot a { background: #F4EFE4; color: #1F2A22; }

.dx--fieldnote .dx-split-img { border-radius: 28px; }
.dx--fieldnote .dx-card-img { border-radius: 18px; }
.dx--fieldnote .dx-card h3 { font-size: 26px; }
.dx--fieldnote .dx-cta { background: var(--pop); color: #fff; }
.dx--fieldnote .dx-cta .dx-btn { background: #1F2A22; color: #F4EFE4 !important; }

@media (max-width: 960px) {
	.dx--fieldnote .fn-hero .dx-wrap { grid-template-columns: 1fr; }
	.dx--fieldnote .fn-roasts { grid-template-columns: 1fr 1fr; }
	.dx--fieldnote .fn-badge { left: 12px; }
	.dx--fieldnote .fn-sticker { right: 8px; }
}