.rw-volume, .rw-volume-guide, .volume-page { box-sizing: border-box; font-family: var(--rw-font); }
.rw-volume *, .rw-volume-guide *, .volume-page * { box-sizing: border-box; }
.rw-volume { background: var(--rw-subtle); color: var(--rw-ink); padding-block: var(--rw-section-gap); }
.rw-volume__container { width: min(var(--rw-content-max), calc(100% - var(--rw-gutter) * 2)); margin-inline: auto; }
.rw-volume__intro { margin-bottom: 40px; }
.rw-volume__eyebrow { margin: 0 0 16px; color: var(--rw-muted); font: 500 13px/20px var(--rw-font); }
.rw-volume h2, .rw-volume-guide h2 { margin: 0; font: 600 var(--rw-section-size)/var(--rw-section-leading) var(--rw-font); letter-spacing: var(--rw-section-tracking); }
.rw-volume__lead { margin: 16px 0 0; font: 400 16px/24px var(--rw-font); color: var(--rw-muted); }
.rw-volume__stage { overflow: hidden; border-radius: var(--rw-radius-film); background: var(--rw-dark); }
.rw-volume__visual { margin: 0; overflow: hidden; background: #a27d5e; }
.rw-volume__photo { display: block; width: 100%; aspect-ratio: 5 / 2; }
.rw-volume__controls { min-width: 0; padding: 32px 64px 64px; color: var(--rw-dark-text); --rw-focus: #D1B9A4; }
.rw-volume__switch { display: flex; width: min(100%, 420px); margin-inline: auto; gap: 4px; padding: 5px; border-radius: 999px; background: #2c3236; }
.rw-volume__choice { display: inline-flex; justify-content: center; align-items: center; flex: 1; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 12px; border: 0; border-radius: 999px; color: var(--rw-dark-muted); background: transparent; font: 500 16px/24px var(--rw-font); cursor: pointer; transition: background-color var(--rw-motion-feedback), color var(--rw-motion-feedback); }
.rw-volume__choice[aria-pressed="true"] { color: var(--rw-ink); background: var(--rw-subtle); }
.rw-volume__choice:hover:not([aria-pressed="true"]) { color: white; background: #383f43; }
.rw-volume__cup { width: 23px; height: 23px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.rw-volume__check { width: 12px; font-size: 13px; visibility: hidden; }
[aria-pressed="true"] .rw-volume__check { visibility: visible; }
.rw-volume__story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; }
.rw-volume__panels { display: grid; }
.rw-volume__panel { grid-area: 1 / 1; min-width: 0; }
.rw-volume__panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.rw-volume__explanation p { margin: 0; color: var(--rw-dark-muted); font: 400 16px/24px var(--rw-font); }
.rw-volume__explanation strong { color: var(--rw-dark-text); font-weight: 600; }
.rw-volume__explanation .rw-volume__supporting { margin-top: 16px; }
.rw-volume__guide-link { display: inline-flex; gap: 12px; align-items: center; min-height: 48px; margin-top: 24px; color: var(--rw-dark-text); font: 500 16px/24px var(--rw-font); text-decoration: none; }
.rw-volume__guide-label { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.rw-volume__guide-arrow { font-size: 23px; line-height: 24px; text-decoration: none; }
.rw-volume__facts { display: grid; align-content: start; gap: 32px; min-width: 0; }
.rw-volume__fact h3 { margin: 0; font: 600 var(--rw-section-size)/var(--rw-section-leading) var(--rw-font); letter-spacing: var(--rw-section-tracking); }
.rw-volume__unit { font-size: .65em; letter-spacing: 0; }
.rw-volume__fact p { margin: 8px 0 0; font: 400 16px/24px var(--rw-font); color: var(--rw-dark-muted); }
.rw-volume__fact .rw-volume__note { margin-top: 16px; font: 400 13px/20px var(--rw-font); }
.rw-volume__choice:focus-visible, .rw-volume__guide-link:focus-visible, .rw-volume-guide :is(button, a, summary):focus-visible { outline: 2px solid var(--rw-focus); outline-offset: 4px; }
.rw-volume__sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rw-volume-guide { width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--rw-radius-dialog); color: var(--rw-ink); background: var(--rw-canvas); overflow: auto; overscroll-behavior: contain; }
.rw-volume-guide::backdrop { background: rgb(23 28 32 / .56); backdrop-filter: blur(4px); }
.rw-volume-guide__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; position: sticky; top: 0; z-index: 2; min-height: 72px; padding: 12px 32px; border-bottom: 1px solid var(--rw-line); background: var(--rw-canvas); font: 500 13px/20px var(--rw-font); color: var(--rw-muted); }
.rw-volume-guide__close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--rw-subtle); color: var(--rw-ink); cursor: pointer; }
.rw-volume-guide__close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.rw-volume-guide__body { padding: 40px 48px 48px; }
.rw-volume-guide__intro { margin: 16px 0 32px; color: var(--rw-muted); font: 400 16px/24px var(--rw-font); }
.rw-volume-guide__steps { list-style: none; padding: 0; margin: 0; }
.rw-volume-guide__steps > li { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: start; gap: 16px; padding: 24px 0; border-top: 1px solid var(--rw-line); }
.rw-volume-guide__number { color: var(--rw-accent); font: 500 13px/24px var(--rw-font); }
.rw-volume-guide__steps h3 { margin: 0; font: 600 16px/24px var(--rw-font); }
.rw-volume-guide__steps p { margin: 8px 0 0; font: 400 16px/24px var(--rw-font); color: var(--rw-muted); }
.rw-volume-guide__key { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 4px 12px; background: var(--rw-subtle); font: 500 13px/20px var(--rw-font); }
.rw-volume-guide__ranges span { display: inline-block; margin-inline: 8px; }
.rw-volume-guide__reset { border-block: 1px solid var(--rw-line); margin-top: 8px; }
.rw-volume-guide__reset summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; font: 500 16px/24px var(--rw-font); cursor: pointer; list-style: none; }
.rw-volume-guide__reset summary::-webkit-details-marker { display: none; }
.rw-volume-guide__reset summary span { font-size: 24px; transition: transform var(--rw-motion-transition); }
.rw-volume-guide__reset[open] summary span { transform: rotate(45deg); }
.rw-volume-guide__reset p { margin: 0 0 24px; color: var(--rw-muted); font: 400 16px/24px var(--rw-font); }
.rw-volume-guide__source { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 24px; color: var(--rw-accent); font: 500 16px/24px var(--rw-font); text-underline-offset: 5px; }

@media (max-width: 1199px) {
  .rw-volume__controls { padding: 32px 40px 48px; }
  .rw-volume__story { gap: 40px; }
}
@media (max-width: 899px) {
  .rw-volume__photo { aspect-ratio: 2 / 1; }
  .rw-volume__controls { padding: 32px; }
  .rw-volume__story { gap: 32px; margin-top: 40px; }
}
@media (max-width: 699px) {
  .rw-volume__story { grid-template-columns: 1fr; }
  .rw-volume__facts { gap: 32px; }
  .rw-volume__photo { aspect-ratio: 4 / 3; }
}
@media (max-width: 599px) {
  .rw-volume__intro { margin-bottom: 32px; }
  .rw-volume__stage { border-radius: 24px; }
  .rw-volume__controls { padding: 24px 20px 32px; }
  .rw-volume__story { gap: 32px; margin-top: 32px; }
  .rw-volume__choice { gap: 7px; padding-inline: 8px; }
  .rw-volume__cup { width: 20px; height: 20px; }
  .rw-volume__check { width: 10px; }
  .rw-volume-guide__bar { padding: 12px 20px; }
  .rw-volume-guide__body { padding: 24px 20px 32px; }
  .rw-volume-guide__steps > li { grid-template-columns: 24px minmax(0,1fr); gap: 12px; }
  .rw-volume-guide__key { grid-column: 2; justify-self: start; }
  .rw-volume-guide__ranges span { margin-inline: 4px; }
}
@media (max-width: 359px) {
  .rw-volume__choice { gap: 4px; }
  .rw-volume__cup { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-volume *, .rw-volume-guide * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* P04 v4: compact description followed by three equal facts */
.rw-volume__controls { padding: 24px 40px 32px; }
.rw-volume__story { display: block; margin-top: 24px; }
.rw-volume__explanation { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 24px; align-items: center; }
.rw-volume__explanation .rw-volume__supporting { margin-top: 8px; grid-column: 1; }
.rw-volume__guide-link { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
.rw-volume__facts { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin-top: 24px; padding-top: 24px; border-top: 1px solid #383f43; }
.rw-volume__fact h3 { font: 600 24px/30px var(--rw-font); letter-spacing: -.5px; }
.rw-volume__fact p { margin-top: 4px; }
.rw-volume__flash { opacity: 0; pointer-events: none; }
@media(max-width:699px) {
 .rw-volume__controls { padding: 20px 20px 24px; }
 .rw-volume__explanation { display: block; }
 .rw-volume__guide-link { margin-top: 8px; }
 .rw-volume__facts { grid-template-columns: 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; }
 .rw-volume__fact { display: block; }
 .rw-volume__fact p { margin: 4px 0 0; }
}