/* Relevant approved prototype rules, scoped to converted inner pages. */
@media (max-width: 1100px) {
:where(body.java-master-inner) main .about-story__layout { grid-template-columns: minmax(0, 7.3fr) minmax(320px, 4.7fr); gap: 42px; }
:where(body.java-master-inner) main .about-comparison__layout, :where(body.java-master-inner) main .about-comparison__air-layout { gap: 42px; }
:where(body.java-master-inner) main .about-roasters-cta__panel { grid-template-columns: minmax(0, 6.8fr) minmax(390px, 5.2fr); }
}
@media (max-width: 900px) {
:where(body.java-master-inner) main .section__head { grid-template-columns: 1fr; align-items: start; }
:where(body.java-master-inner) main .about-story__layout, :where(body.java-master-inner) main .about-comparison__layout, :where(body.java-master-inner) main .about-comparison__air-layout, :where(body.java-master-inner) main .about-sustainability__layout { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .about-story__content, :where(body.java-master-inner) main .about-story__portrait, :where(body.java-master-inner) main .about-comparison__content, :where(body.java-master-inner) main .about-comparison__media, :where(body.java-master-inner) main .about-sustainability__content, :where(body.java-master-inner) main .about-sustainability__media { width: min(100%, 760px); margin-inline: auto; }
:where(body.java-master-inner) main .about-story__portrait { position: static; }
:where(body.java-master-inner) main .about-story__portrait-frame { aspect-ratio: 4 / 5; }
:where(body.java-master-inner) main .about-story__portrait-frame img { object-position: center 20%; }
:where(body.java-master-inner) main .about-comparison__media--fire { min-height: 520px; aspect-ratio: auto; border-radius: 72px 18px 18px 18px; }
:where(body.java-master-inner) main .about-comparison__media--air { aspect-ratio: 9 / 13; border-radius: 18px 64px 18px 18px; }
:where(body.java-master-inner) main .about-comparison--fire .about-comparison__media { order: 2; }
:where(body.java-master-inner) main .about-comparison--air .about-comparison__media { order: 1; }
:where(body.java-master-inner) main .about-comparison--air .about-comparison__content { order: 2; }
:where(body.java-master-inner) main .about-sustainability__media, :where(body.java-master-inner) main .about-sustainability__media img { min-height: 460px; }
:where(body.java-master-inner) main .about-roasters-cta__panel { min-height: 0; grid-template-columns: 1fr; gap: 36px; padding: clamp(32px, 5vw, 52px); }
:where(body.java-master-inner) main .about-roasters-cta__showcase { order: 0; }
:where(body.java-master-inner) main .about-roasters-cta__showcase { height: 400px; min-height: 0; }
}
@media (max-width: 768px) {
:where(body.java-master-inner) main .section { padding-block: var(--section-padding); }
:where(body.java-master-inner) main .section__head { gap: 20px; margin-bottom: 20px; }
:where(body.java-master-inner) main .form-grid { gap: 20px; }
:where(body.java-master-inner) main .button-row { gap: 20px; }
:where(body.java-master-inner) main .about-story__breadcrumb { margin-bottom: 28px; }
:where(body.java-master-inner) main .about-story__chapter { margin-top: 42px; }
:where(body.java-master-inner) main .about-difference__grid { gap: 18px; }
:where(body.java-master-inner) main .about-benefit-card { padding: 28px; }
:where(body.java-master-inner) main .about-sustainability__card { padding: 36px 28px; border-radius: 28px; }
:where(body.java-master-inner) main .about-sustainability__media, :where(body.java-master-inner) main .about-sustainability__media img { min-height: 380px; }
:where(body.java-master-inner) main .about-roasters-cta__panel { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; }
:where(body.java-master-inner) main .about-roasters-cta__content { padding: 0; }
:where(body.java-master-inner) main .about-roasters-cta__showcase, :where(body.java-master-inner) main .about-roasters-cta__showcase-card, :where(body.java-master-inner) main .about-roasters-cta__showcase-card img { height: 380px; min-height: 380px; }
}
@media (max-width: 680px) {
:where(body.java-master-inner) main h1, :where(body.java-master-inner) main h2, :where(body.java-master-inner) main h3, :where(body.java-master-inner) main .section__head h2 { text-wrap: balance; max-inline-size: 100%; line-height: 1.22; }
:where(body.java-master-inner) main .container { width: min(100% - 32px, var(--container)); }
:where(body.java-master-inner) main .form-grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .field--full { grid-column: auto; }
:where(body.java-master-inner) main .about-story__layout, :where(body.java-master-inner) main .about-comparison__layout, :where(body.java-master-inner) main .about-comparison__air-layout, :where(body.java-master-inner) main .about-sustainability__layout { gap: 34px; }
:where(body.java-master-inner) main .about-story__opening { padding-left: 18px; }
:where(body.java-master-inner) main .about-story__portrait { width: 100%; }
:where(body.java-master-inner) main .about-story__portrait-frame { padding: 8px; border-radius: 20px 20px 6px 20px; }
:where(body.java-master-inner) main .about-story__portrait-frame img { border-radius: 14px 14px 3px 14px; }
:where(body.java-master-inner) main .about-story__portrait figcaption { font-size: .7rem; }
:where(body.java-master-inner) main .about-comparison__media--fire { min-height: 410px; aspect-ratio: auto; border-radius: 54px 14px 14px 14px; }
:where(body.java-master-inner) main .about-comparison__media--air { aspect-ratio: revert; border-radius: 16px 44px 16px 16px; }
:where(body.java-master-inner) main .about-difference__grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .about-sustainability__card { padding: 28px 20px; border-radius: 24px; }
:where(body.java-master-inner) main .about-sustainability__media { border-radius: 20px; min-height: 300px; }
:where(body.java-master-inner) main .about-sustainability__media img { min-height: 300px; }
:where(body.java-master-inner) main .about-sustainability__badge-float { bottom: 14px; left: 14px; right: 14px; padding: 10px 14px; gap: 10px; }
:where(body.java-master-inner) main .about-roasters-cta__panel { border-radius: 24px; padding: 28px 18px; gap: 28px; }
:where(body.java-master-inner) main .about-roasters-cta__content { padding: 0; }
:where(body.java-master-inner) main .about-roasters-cta__features { gap: 12px; margin-bottom: 26px; }
:where(body.java-master-inner) main .cta-feature-item { padding: 12px 14px; gap: 12px; }
:where(body.java-master-inner) main .about-roasters-cta__showcase, :where(body.java-master-inner) main .about-roasters-cta__showcase-card, :where(body.java-master-inner) main .about-roasters-cta__showcase-card img { height: 280px; min-height: 280px; border-radius: 20px; }
:where(body.java-master-inner) main .about-roasters-cta__actions { flex-direction: column; align-items: stretch; gap: 14px; }
:where(body.java-master-inner) main .about-roasters-cta__actions .button { width: 100%; justify-content: center; }
:where(body.java-master-inner) main .about-roasters-cta__sublink { justify-content: center; }
}
@media (max-width: 420px) {
:where(body.java-master-inner) main h1, :where(body.java-master-inner) main .contact-hero h1, :where(body.java-master-inner) main .coffee-hero h1 { font-size: 32px; }
:where(body.java-master-inner) main h2, :where(body.java-master-inner) main .section__head h2 { font-size: 26px; }
:where(body.java-master-inner) main h3 { font-size: 18px; }
:where(body.java-master-inner) main .button-row .button { width: 100%; }
}
@media (max-width: 1100px) {
:where(body.java-master-inner) main .coffee-collection-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
:where(body.java-master-inner) main .coffee-hero::after { background: linear-gradient(90deg,rgba(20,12,8,.97) 0%,rgba(20,12,8,.84) 48%,rgba(20,12,8,.36) 100%),linear-gradient(0deg,rgba(20,12,8,.65),transparent 52%); }
}
@media (max-width: 900px) {
:where(body.java-master-inner) main .coffee-hero { min-height: 650px; }
:where(body.java-master-inner) main .coffee-hero__content { max-width: 720px; }
:where(body.java-master-inner) main .coffee-hero h1 { font-size: var(--font-size-h1); }
:where(body.java-master-inner) main .coffee-process__grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .coffee-process__step { min-height: 0; }
:where(body.java-master-inner) main .coffee-process__step p { margin-top: 20px; }
:where(body.java-master-inner) main .coffee-process__icon { margin-bottom: 30px; }
:where(body.java-master-inner) main .coffee-story__grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .coffee-story__content { max-width: 760px; }
:where(body.java-master-inner) main .coffee-story__media { min-height: 480px; border-radius: 64px 18px 18px 18px; }
}
@media (max-width: 768px) {
:where(body.java-master-inner) main .coffee-hero { min-height: 0; display: flex; flex-direction: column; }
:where(body.java-master-inner) main .coffee-hero::after { display: none; }
:where(body.java-master-inner) main .coffee-hero__media { position: relative; z-index: 0; order: 1; height: clamp(300px,65vw,430px); }
:where(body.java-master-inner) main .coffee-hero__media::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(24,15,10,.46)); content: ""; }
:where(body.java-master-inner) main .coffee-hero__media img { object-position: center 52%; }
:where(body.java-master-inner) main .coffee-hero__inner { order: 2; width: 100%; padding: 42px 20px 48px; background: radial-gradient(circle at 94% 4%,rgba(201,111,61,.25),transparent 38%),linear-gradient(145deg,#2b1b14,#1a100c); }
:where(body.java-master-inner) main .coffee-hero__features { grid-template-columns: 1fr 1fr; }
:where(body.java-master-inner) main .coffee-featured__grid, :where(body.java-master-inner) main .coffee-testimonials__grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .coffee-magic-card { min-height: 430px; }
:where(body.java-master-inner) main .coffee-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
:where(body.java-master-inner) main .coffee-quote { min-height: 0; }
:where(body.java-master-inner) main .coffee-process__actions {margin-top: 20px;}
:where(body.java-master-inner) main .coffee-collections__intro { margin-bottom: clamp(24px, 5vw, 54px); }
}
@media (max-width: 680px) {
:where(body.java-master-inner) main .coffee-hero__inner, :where(body.java-master-inner) main .coffee-hero__content, :where(body.java-master-inner) main .coffee-hero .button-row { min-width: 0; max-width: 100%; }
:where(body.java-master-inner) main .coffee-hero h1 { font-size: var(--font-size-h1); }
:where(body.java-master-inner) main .coffee-hero__features { grid-template-columns: 1fr; gap: 10px; }
:where(body.java-master-inner) main .coffee-hero .button-row .button { width: auto; }
:where(body.java-master-inner) main .coffee-process__actions .button { width: auto; }
:where(body.java-master-inner) main .coffee-magic-card { min-height: 360px; }
:where(body.java-master-inner) main .coffee-magic-card__overlay { transform: none; }
:where(body.java-master-inner) main .coffee-collection-grid { grid-template-columns: 1fr; }
:where(body.java-master-inner) main .coffee-collection-card { min-height: 270px; }
:where(body.java-master-inner) main .coffee-collections__footer { align-items: stretch; flex-direction: column; }
:where(body.java-master-inner) main .coffee-collections__footer .button { width: 100%; }
:where(body.java-master-inner) main .coffee-story__media { min-height: 400px; }
}
@media (max-width: 420px) {
:where(body.java-master-inner) main .coffee-hero__media { height: 280px; }
:where(body.java-master-inner) main .coffee-hero h1 { overflow-wrap: break-word; }
:where(body.java-master-inner) main .coffee-hero__features li:last-child { font-size: .875rem; letter-spacing: -.01em; }
:where(body.java-master-inner) main .coffee-hero .button-row .button { height: auto; min-width: 0; padding-inline: 12px; white-space: normal; text-align: center; }
:where(body.java-master-inner) main .coffee-tagline p { font-size: 1.45rem; }
:where(body.java-master-inner) main .coffee-magic-card { min-height: 320px; }
:where(body.java-master-inner) main .coffee-story__media { min-height: 340px; border-radius: 48px 14px 14px 14px; }
}
@media (max-width: 980px) {
:where(body.java-master-inner) main .contact-experience { grid-template-columns: 1fr; gap: 36px; }
:where(body.java-master-inner) main .facility-card__layout { grid-template-columns: 1fr; gap: 36px; }
:where(body.java-master-inner) main .facility-card__media, :where(body.java-master-inner) main .facility-card__media img { min-height: 340px; }
}
@media (max-width: 680px) {
:where(body.java-master-inner) main .contact-hero { min-height: 440px; }
:where(body.java-master-inner).page--contact main .contact-list li { padding: 16px; border-radius: 16px; }
:where(body.java-master-inner) main .facility-card { padding: 28px 18px; border-radius: 24px; }
:where(body.java-master-inner) main .facility-card__media, :where(body.java-master-inner) main .facility-card__media img { min-height: 280px; border-radius: 18px; }
:where(body.java-master-inner) main .facility-card__action .button { width: 100%; justify-content: center; }
:where(body.java-master-inner) main .facility-feature { padding: 12px 14px; }
}
@media (max-width: 420px) {
:where(body.java-master-inner) main .facility-card { padding: 22px 14px; border-radius: 20px; }
:where(body.java-master-inner) main .facility-card__media, :where(body.java-master-inner) main .facility-card__media img { min-height: 230px; }
:where(body.java-master-inner) main .facility-card__floating-tag { bottom: 12px; left: 12px; right: 12px; padding: 10px 12px; }
:where(body.java-master-inner) main .facility-feature { gap: 10px; }
:where(body.java-master-inner) main .facility-feature__icon { width: 32px; height: 32px; flex: 0 0 32px; }
:where(body.java-master-inner) main .facility-feature__icon svg { width: 16px; height: 16px; }
}