/* Domowa Winnica – design layer for the Breakdance-built homepage.
   Elements are native Breakdance elements; these classes only style them.
   Every selector is prefixed with "body .breakdance" so it out-ranks Breakdance's own element defaults.

   Section rhythm below the hero alternates the two brand colours:
   cream (#DCD1C5) → photo/maroon → cream → maroon → cream → maroon. */

/* Poppins served from this plugin (fonts/), not from Google: no visitor IP goes to Google (RODO)
   and one less external connection. Only the weights the design uses, latin + latin-ext. */
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins-300-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins-300-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/poppins-500-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/poppins-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --dw-ink: #420e1a;
  --dw-ink-soft: #5a1524;
  --dw-bone: #dcd1c5;
  --dw-paper: #f6f1e8;
  --dw-cream: #f1e7da;
  --dw-must: #8c2438;
  --dw-gold: #b8935a;
  --dw-stone: #6b5a4e;
  --dw-line: rgba(66, 14, 26, 0.16);
  --dw-line-strong: rgba(66, 14, 26, 0.3);
  --dw-ink-72: rgba(66, 14, 26, 0.72);
  --dw-bone-80: rgba(220, 209, 197, 0.8);
  --dw-bone-55: rgba(220, 209, 197, 0.55);
  --dw-bone-20: rgba(220, 209, 197, 0.2);
  --dw-shadow: 0 24px 48px -24px rgba(66, 14, 26, 0.35);
  --dw-night: #1b0508;
  --dw-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --dw-sans: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --dw-mono: "Poppins", ui-sans-serif, system-ui, sans-serif;
  /* spacing scale (8px base) and page grid */
  --dw-s1: 0.5rem; --dw-s2: 1rem; --dw-s3: 1.5rem; --dw-s4: 2rem; --dw-s5: 3rem; --dw-s6: 4rem; --dw-s7: 6rem;
  --dw-gutter: clamp(1.5rem, 5vw, 6rem);
  --dw-wrap: 1360px;
  --dw-band: clamp(4.5rem, 8vw, 7.5rem);
  --dw-header-h: 6rem;
  --dw-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill-rule='evenodd' d='M20 6H30V16H20ZM17 18H33V44L36 47L73 10L110 47V112H13V54L17 50ZM66 70h12v12H66ZM82 70h12v12H82ZM66 86h12v12H66ZM82 86h12v12H82ZM18 112V92a7 7 0 0 1 14 0V112Z'/%3E%3C/svg%3E");
  --dw-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --dw-arrow-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dcd1c5' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --dw-arrow-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420e1a' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --dw-arrow-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8935a' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }
/* safety net: nothing may ever widen the page sideways on a phone. `clip`, not `hidden`,
   so position: sticky (the numbers in the "5 mistakes" post) keeps working */
html, body { overflow-x: clip; }
body {
  background: var(--dw-bone); color: var(--dw-ink); font-family: var(--dw-sans); line-height: 1.65; -webkit-font-smoothing: antialiased;
  /* Breakdance feeds its own font stack (system-ui) to `.breakdance` and to every heading
     through these two variables. Redefining them on <body> beats the plugin's :root
     declaration — body is the nearer ancestor — so everything Breakdance renders that we
     do not style by hand (form labels, the posts list, pagination) also gets Poppins. */
  --bde-body-font-family: var(--dw-sans);
  --bde-heading-font-family: var(--dw-display);
}

/* ---------- Section reset ---------- */
body .breakdance .bde-section[class*="dw-"] { padding: 0; min-height: 0; }
body .breakdance .bde-section[class*="dw-"] > .section-container { width: 100%; max-width: none; padding: 0; margin: 0; }
body .breakdance .bde-text[class*="dw-"],
body .breakdance .bde-heading[class*="dw-"] { margin: 0; }
body .breakdance .bde-text[class*="dw-"],
body .breakdance .bde-heading[class*="dw-"],
body .breakdance .bde-text-link[class*="dw-"],
body .breakdance .bde-button .button-atom { font-family: var(--dw-sans); }

/* ---------- Shared typography ---------- */
body .breakdance .bde-text.dw-eyebrow {
  font-family: var(--dw-mono); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink);
  display: flex; align-items: center; gap: 0.8rem;
}
body .breakdance .bde-text.dw-eyebrow::before { content: ""; width: 2rem; height: 2px; background: currentColor; flex-shrink: 0; }
body .breakdance .bde-heading.dw-h2 {
  font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.8rem); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--dw-ink); text-wrap: balance; margin-top: var(--dw-s3); width: 100%; max-width: none;
}
body .breakdance .bde-text.dw-lead { font-weight: 400; color: var(--dw-ink-72); font-size: 1.05rem; line-height: 1.7; margin-top: var(--dw-s2); max-width: 52ch; }
body .breakdance .bde-heading.dw-h3 { font-family: var(--dw-display); font-weight: 600; font-size: 1.05rem; line-height: 1.4; color: var(--dw-ink); }
body .breakdance .dw-p { font-weight: 400; color: var(--dw-ink-72); font-size: 0.95rem; line-height: 1.65; }
/* the same paragraph as Rich Text, so it can hold real links to posts (internal linking) */
body .breakdance .dw-p--rich p { margin: 0; font: inherit; color: inherit; }
body .breakdance .dw-p--rich a {
  position: relative; z-index: 3; color: inherit; font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--dw-gold); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
body .breakdance .dw-p--rich a:hover { text-decoration-color: currentColor; }

/* ---------- Header ---------- */
body .breakdance .bde-section.dw-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; width: 100%;
  background: #fff; border-bottom: 1px solid var(--dw-line);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
body .breakdance .dw-header.is-shrunk { box-shadow: 0 10px 30px -22px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-header-row {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem;
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto; padding: 0; position: relative;
  min-height: var(--dw-header-h); transition: min-height 0.3s ease;
}
body .breakdance .dw-header.is-shrunk .dw-header-row { min-height: calc(var(--dw-header-h) - 1.1rem); }

/* logo: the image is the artwork, the link stretched over it carries the accessible name */
body .breakdance .dw-logo { position: relative; display: flex; align-items: center; flex-shrink: 0; }
body .breakdance .dw-logo-img { display: block; }
body .breakdance .dw-logo-img figure,
body .breakdance .dw-logo-img .breakdance-image-container,
body .breakdance .dw-logo-img .breakdance-image-clip { margin: 0; }
body .breakdance .dw-logo-img img {
  display: block; width: auto; height: 3.6rem; transition: height 0.3s ease, opacity 0.25s ease;
}
body .breakdance .dw-header.is-shrunk .dw-logo-img img { height: 2.9rem; }
body .breakdance .dw-logo:hover .dw-logo-img img { opacity: 0.78; }
body .breakdance .bde-text-link.dw-logo-link {
  position: absolute; inset: 0; z-index: 2; overflow: hidden; text-indent: -999em; white-space: nowrap;
}
body .breakdance .bde-text-link.dw-logo-link:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 4px; text-indent: 0; }

/* footer keeps the wordmark + drawn mark, so those rules stay */
body .breakdance .dw-brand { display: flex; flex-direction: row; align-items: center; gap: 0.85rem; }
body .breakdance .dw-brand-mark {
  width: 28px; height: 28px; background: var(--dw-bone);
  -webkit-mask: var(--dw-mark) center / contain no-repeat; mask: var(--dw-mark) center / contain no-repeat;
}
body .breakdance .bde-text-link.dw-brand-word {
  display: block; max-width: 7.5rem; font-family: var(--dw-sans); font-weight: 600; font-size: 0.8rem; line-height: 1.35;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-bone); text-decoration: none;
}

body .breakdance .dw-nav { display: flex; flex-direction: row; align-items: center; gap: 2.2rem; }
body .breakdance .bde-text-link.dw-nav-link {
  position: relative; padding-block: 0.35rem; text-decoration: none; font-family: var(--dw-sans); font-size: 0.83rem;
  font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--dw-ink);
  transition: color 0.2s ease;
}
/* the rule sweeps in from the left on hover and simply stays put on the current page */
body .breakdance .bde-text-link.dw-nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--dw-ink);
  transition: right 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .bde-text-link.dw-nav-link:hover { color: var(--dw-must); }
body .breakdance .bde-text-link.dw-nav-link:hover::after { background: var(--dw-must); }
body .breakdance .bde-text-link.dw-nav-link:hover::after,
body .breakdance .bde-text-link.dw-nav-link:focus-visible::after,
body .breakdance .bde-text-link.dw-nav-link.is-current::after { right: 0; }
body .breakdance .bde-text-link.dw-nav-link.is-current { font-weight: 600; }
body .breakdance .bde-text-link.dw-nav-link:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 6px; }

/* social icons, separated from the menu by a hairline */
body .breakdance .dw-nav-social { display: flex; align-items: center; padding-left: 2.2rem; border-left: 1px solid var(--dw-line); }
body .breakdance .dw-social .bde-social-icons,
body .breakdance .dw-social { display: flex; flex-direction: row; align-items: center; gap: 0.6rem; margin: 0; }
body .breakdance .dw-social .bde-social-icons__icon-wrapper {
  display: inline-flex; align-items: center; justify-content: center; width: 2.35rem; height: 2.35rem; padding: 0;
  border: 1px solid var(--dw-line-strong); border-radius: 50%; color: var(--dw-ink); background: transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
body .breakdance .dw-social .bde-social-icons__icon-wrapper svg { width: 1rem; height: 1rem; fill: currentColor; display: block; }
body .breakdance .dw-social .bde-social-icons__icon-wrapper:hover {
  background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); transform: translateY(-2px);
}
body .breakdance .dw-social .bde-social-icons__icon-wrapper:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 3px; }

/* burger: two bars that cross into an X when the panel is open */
body .breakdance .dw-burger { display: none; width: 44px; height: 44px; cursor: pointer; position: relative; z-index: 70; order: 3; }
body .breakdance .dw-burger::before,
body .breakdance .dw-burger::after {
  content: ""; position: absolute; left: 10px; right: 10px; height: 2px; background: var(--dw-ink); border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
body .breakdance .dw-burger::before { top: 17px; }
body .breakdance .dw-burger::after { top: 25px; }
body .breakdance .dw-header.is-open .dw-burger::before { transform: translateY(4px) rotate(45deg); }
body .breakdance .dw-header.is-open .dw-burger::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Pill button ---------- */
body .breakdance .bde-button.dw-cta .button-atom {
  display: inline-flex; align-items: center; gap: 1rem; background: var(--dw-gold); color: var(--dw-night); border: 0;
  border-radius: 999px; padding: 0.7rem 0.7rem 0.7rem 1.7rem; box-shadow: var(--dw-shadow);
  font-family: var(--dw-sans); font-weight: 600; font-size: 0.92rem; text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
body .breakdance .bde-button.dw-cta .button-atom::after {
  content: ""; width: 2.1rem; height: 2.1rem; border-radius: 50%; flex-shrink: 0; background-color: var(--dw-ink);
  background-image: var(--dw-arrow-gold); background-repeat: no-repeat; background-position: center; background-size: 16px;
}
body .breakdance .bde-button.dw-cta .button-atom:hover { background: var(--dw-cream); transform: translateY(-2px); }
body .breakdance .bde-button.dw-cta .button-atom:focus-visible { outline: 3px solid var(--dw-gold); outline-offset: 2px; }
/* maroon pill, used on cream sections */
body .breakdance .bde-button.dw-cta--ink .button-atom {
  background: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 14px 30px -18px rgba(66, 14, 26, 0.8);
  font-size: 1rem; padding: 0.6rem 0.6rem 0.6rem 1.7rem;
}
body .breakdance .bde-button.dw-cta--ink .button-atom::after { background-color: var(--dw-bone); background-image: var(--dw-arrow-ink); width: 2.3rem; height: 2.3rem; }
body .breakdance .bde-button.dw-cta--ink .button-atom:hover { background: var(--dw-ink-soft); }
body .breakdance .bde-button.dw-cta--ink .button-atom:focus-visible { outline: 3px solid var(--dw-ink); }
/* cream pill, used on maroon sections */
body .breakdance .bde-button.dw-cta--cream .button-atom {
  background: var(--dw-bone); color: var(--dw-ink); box-shadow: none; font-size: 1rem; padding: 0.6rem 0.6rem 0.6rem 1.7rem;
}
body .breakdance .bde-button.dw-cta--cream .button-atom::after { background-color: var(--dw-ink); background-image: var(--dw-arrow-cream); width: 2.3rem; height: 2.3rem; }
body .breakdance .bde-button.dw-cta--cream .button-atom:hover { background: var(--dw-cream); }
body .breakdance .bde-button.dw-cta--cream .button-atom:focus-visible { outline: 3px solid var(--dw-bone); }

/* ---------- Full-bleed photo layers ---------- */
body .breakdance .dw-photo { position: absolute; inset: 0; z-index: -2; margin: 0; }
body .breakdance .dw-photo figure,
body .breakdance .dw-photo .breakdance-image-container,
body .breakdance .dw-photo .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
body .breakdance .dw-photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Hero: full-bleed photo, text on the right over a maroon gradient ---------- */
body .breakdance .bde-section.dw-hero {
  position: relative; min-height: min(100vh, 900px); padding-top: var(--dw-header-h); overflow: hidden; isolation: isolate; background: var(--dw-night);
}
body .breakdance .bde-section.dw-hero > .section-container { position: static; display: flex; flex-direction: row; align-items: stretch; justify-content: flex-end; min-height: calc(min(100vh, 900px) - var(--dw-header-h)); }
body .breakdance .dw-hero .dw-photo { position: absolute; inset: var(--dw-header-h) 0 0 0; z-index: -1; overflow: hidden; margin: 0; }
/* brand maroon #420E1A gradient across the whole photo: 0% from the right-hand wine glass, 90% at the right edge */
body .breakdance .bde-section.dw-hero::after {
  content: ""; position: absolute; inset: var(--dw-header-h) 0 0 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(66, 14, 26, 0) 0%, rgba(66, 14, 26, 0) 61%, rgba(66, 14, 26, 0.9) 100%);
}
body .breakdance .dw-hero .dw-photo img { object-position: 50% 50%; transform-origin: 50% 60%; animation: dw-zoom 26s ease-out forwards; }
@keyframes dw-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
body .breakdance .dw-hero-text {
  --dw-halo: 0 1px 2px rgba(10, 2, 4, 0.7), 0 3px 14px rgba(10, 2, 4, 0.75), 0 0 38px rgba(10, 2, 4, 0.6);
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--dw-cream);
  width: min(41rem, 41vw); margin: 0; text-shadow: var(--dw-halo); justify-content: center;
  background: none;
  padding: var(--dw-s6) clamp(1.5rem, 3.2vw, 3.5rem);
}
body .breakdance .bde-heading.dw-h1 {
  font-family: var(--dw-display); font-weight: 700; font-size: clamp(2.2rem, 2.9vw, 3.7rem); line-height: 1.08; letter-spacing: -0.015em;
  text-transform: uppercase; color: var(--dw-cream); text-wrap: balance; margin: 0; max-width: 13ch;
}
body .breakdance .bde-text.dw-tagline {
  font-family: var(--dw-display); font-style: italic; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  font-size: clamp(1rem, 1.3vw, 1.5rem); color: var(--dw-cream); margin-top: var(--dw-s3); white-space: nowrap;
}
body .breakdance .bde-text.dw-tagline::before { content: ""; display: block; width: 3rem; height: 2px; background: var(--dw-gold); margin-bottom: var(--dw-s2); box-shadow: 0 1px 8px rgba(10, 2, 4, 0.6); }
body .breakdance .dw-hero-text .bde-button { margin-top: var(--dw-s4); }
body .breakdance .dw-hero-text .bde-button .button-atom {
  background: var(--dw-bone); color: var(--dw-ink); text-shadow: none; box-shadow: 0 10px 28px rgba(10, 2, 4, 0.4);
  font-size: clamp(1rem, 1.15vw, 1.15rem); font-weight: 600; padding: 0.65rem 0.65rem 0.65rem 1.75rem; gap: 1.1rem;
}
body .breakdance .dw-hero-text .bde-button .button-atom::after { width: 2.5rem; height: 2.5rem; background-color: var(--dw-ink); background-image: var(--dw-arrow-cream); }
body .breakdance .dw-hero-text .bde-button .button-atom:hover { background: var(--dw-cream); }
body .breakdance .dw-hero-text .bde-text,
body .breakdance .dw-hero-text .bde-heading,
body .breakdance .dw-hero-text .bde-button { opacity: 0; transform: translateY(22px); animation: dw-in 0.9s cubic-bezier(.2,.7,.2,1) forwards; }
body .breakdance .dw-hero-text > :nth-child(1) { animation-delay: 0.1s; }
body .breakdance .dw-hero-text > :nth-child(2) { animation-delay: 0.28s; }
body .breakdance .dw-hero-text > :nth-child(3) { animation-delay: 0.46s; }
@keyframes dw-in { to { opacity: 1; transform: translateY(0); } }

/* ---------- Sections: cream and maroon alternate ---------- */
body .breakdance .bde-section.dw-section { padding: var(--dw-band) 0; }
body .breakdance .bde-section.dw-section--cream { background: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .bde-section.dw-section--ink { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-section--ink .bde-text.dw-eyebrow { color: var(--dw-bone); }
body .breakdance .dw-section--ink .bde-heading.dw-h2 { color: var(--dw-bone); }
body .breakdance .dw-section--ink .bde-text.dw-lead { color: var(--dw-bone-80); }
body .breakdance .dw-section--ink .bde-heading.dw-h3 { color: var(--dw-bone); }
body .breakdance .dw-section--ink .dw-p { color: var(--dw-bone-80); }
body .breakdance .dw-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
body .breakdance .dw-reveal.is-in { opacity: 1; transform: none; }
body .breakdance .dw-wrap,
body .breakdance .dw-head { width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto; align-items: flex-start; }
body .breakdance .dw-head--center { align-items: center; text-align: center; }
body .breakdance .dw-head--center .bde-heading.dw-h2,
body .breakdance .dw-head--center .bde-text.dw-lead { margin-inline: auto; }

/* ---------- 2. Why home winemaking: six maroon cards with cream type that flip to cream on hover ---------- */
body .breakdance .dw-perks {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: var(--dw-s6) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch;
}
body .breakdance .dw-perk {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
  padding: var(--dw-s5) var(--dw-s4) var(--dw-s5);
  border: 1px solid var(--dw-ink); background: var(--dw-ink);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
body .breakdance .dw-perk:hover {
  background: var(--dw-cream); border-color: var(--dw-ink); transform: translateY(-5px);
  box-shadow: 0 26px 48px -32px rgba(66, 14, 26, 0.6);
}
body .breakdance .dw-perk-num {
  font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--dw-gold); transition: color 0.35s ease;
}
body .breakdance .dw-perk:hover .dw-perk-num { color: var(--dw-ink); }
body .breakdance .dw-perk .bde-heading.dw-h3 { font-size: 1.15rem; margin-top: var(--dw-s2); color: var(--dw-bone); transition: color 0.35s ease; }
body .breakdance .dw-perk .dw-p { color: var(--dw-bone-80); transition: color 0.35s ease; }
body .breakdance .dw-perk:hover .bde-heading.dw-h3 { color: var(--dw-ink); }
body .breakdance .dw-perk:hover .dw-p { color: var(--dw-ink-72); }

/* ---------- 3. Process: three steps over the grapes photo (unchanged) ---------- */
body .breakdance .bde-section.dw-process { position: relative; isolation: isolate; overflow: hidden; background: var(--dw-night); color: var(--dw-cream); padding: var(--dw-band) 0; }
body .breakdance .bde-section.dw-process > .section-container { position: static; }
body .breakdance .dw-process .dw-photo img { object-position: 50% 92%; }
body .breakdance .dw-process::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(27,5,8,0.9) 0%, rgba(27,5,8,0.74) 55%, rgba(27,5,8,0.9) 100%);
}
body .breakdance .dw-process .bde-text.dw-eyebrow { color: var(--dw-gold); }
body .breakdance .dw-process .bde-heading.dw-h2 { color: var(--dw-cream); }
body .breakdance .dw-process .bde-text.dw-lead { color: rgba(241, 231, 218, 0.78); }
body .breakdance .dw-steps {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: 3.5rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch;
}
body .breakdance .dw-step {
  display: flex; flex-direction: column; align-items: flex-start; padding: 2.2rem 1.9rem 2.4rem;
  background: rgba(241, 231, 218, 0.07); border: 1px solid rgba(241, 231, 218, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  position: relative; overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease, border-color 0.35s ease, box-shadow 0.4s ease;
}
/* hover: the glass tile lifts and turns solid cream with maroon type, a gold bar sweeps along
   the top and the numeral grows a touch */
body .breakdance .dw-step::before {
  content: ""; position: absolute; left: 0; right: 100%; top: 0; height: 3px; background: var(--dw-gold);
  transition: right 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-step:hover {
  transform: translateY(-8px); background: var(--dw-cream); border-color: var(--dw-cream);
  box-shadow: 0 34px 60px -30px rgba(0, 0, 0, 0.8);
}
body .breakdance .dw-step:hover::before { right: 0; }
body .breakdance .bde-text.dw-step-num {
  font-family: var(--dw-display); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--dw-gold);
  transform-origin: left bottom; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s ease;
}
body .breakdance .dw-step:hover .bde-text.dw-step-num { transform: scale(1.18); color: var(--dw-ink); }
body .breakdance .dw-process .bde-heading.dw-h3 { color: var(--dw-cream); font-size: 1.3rem; margin-top: 1.1rem; transition: color 0.3s ease; }
body .breakdance .dw-process .dw-p { color: rgba(241, 231, 218, 0.8); margin-top: 0.7rem; transition: color 0.3s ease; }
body .breakdance .dw-process .dw-step:hover .bde-heading.dw-h3 { color: var(--dw-ink); }
body .breakdance .dw-process .dw-step:hover .dw-p { color: var(--dw-ink-72); }

/* ---------- 4. Posts: three editorial cards on cream ---------- */
body .breakdance .dw-posts {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: var(--dw-s6) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--dw-s4); align-items: stretch;
}
body .breakdance .dw-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch; background: transparent;
  transition: transform 0.35s ease;
}
body .breakdance .dw-card:hover { transform: translateY(-6px); }
body .breakdance .dw-card-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--dw-ink); }
body .breakdance .dw-card-media .bde-image,
body .breakdance .dw-card-media figure,
body .breakdance .dw-card-media .breakdance-image-container,
body .breakdance .dw-card-media .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
body .breakdance .dw-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body .breakdance .dw-card:hover .dw-card-media img { transform: scale(1.06); }
body .breakdance .dw-card-media--mark { display: flex; align-items: center; justify-content: center; }
body .breakdance .dw-card-media--mark::before {
  content: ""; width: 40%; aspect-ratio: 1; background: var(--dw-bone); opacity: 0.85;
  -webkit-mask: var(--dw-mark) center / contain no-repeat; mask: var(--dw-mark) center / contain no-repeat;
}
body .breakdance .bde-text.dw-ribbon {
  position: absolute; top: 0; left: 0; z-index: 2; background: var(--dw-ink); color: var(--dw-bone);
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 0.9rem;
}
body .breakdance .dw-card-body {
  padding: var(--dw-s3) 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; flex: 1;
}
body .breakdance .dw-card .bde-heading.dw-h3 { font-size: 1.25rem; line-height: 1.35; }
body .breakdance .bde-text-link.dw-more {
  margin-top: auto; padding-top: var(--dw-s2); text-decoration: none; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-ink);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
body .breakdance .dw-card .bde-text-link.dw-more::before { content: ""; position: absolute; inset: 0; z-index: 3; }
body .breakdance .bde-text-link.dw-more::after {
  content: ""; width: 15px; height: 15px; background: currentColor; transition: transform 0.25s ease;
  -webkit-mask: var(--dw-arrow) center / contain no-repeat; mask: var(--dw-arrow) center / contain no-repeat;
}
body .breakdance .dw-card:hover .bde-text-link.dw-more::after { transform: translateX(5px); }
body .breakdance .dw-actions { width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: var(--dw-s6) auto 0; display: flex; flex-direction: row; justify-content: center; }

/* ---------- 5. Newsletter: maroon band, heading left, real email form right ---------- */
body .breakdance .bde-section.dw-band {
  position: relative; overflow: hidden; background: var(--dw-ink); color: var(--dw-bone); padding: var(--dw-band) 0;
}
body .breakdance .bde-section.dw-band::after {
  content: ""; position: absolute; bottom: -3rem; right: -2rem;
  width: clamp(11rem, 15vw, 17rem); aspect-ratio: 1; background: var(--dw-bone); opacity: 0.07; pointer-events: none;
  -webkit-mask: var(--dw-mark) center / contain no-repeat; mask: var(--dw-mark) center / contain no-repeat;
}
body .breakdance .dw-band-inner {
  position: relative; z-index: 1; width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center;
}
body .breakdance .dw-band-text,
body .breakdance .dw-band-form { display: flex; flex-direction: column; align-items: flex-start; }
body .breakdance .dw-band .bde-text.dw-eyebrow { color: var(--dw-bone); }
body .breakdance .dw-band .bde-heading.dw-h2 { color: var(--dw-bone); }
body .breakdance .dw-band .bde-text.dw-lead { color: var(--dw-bone-80); max-width: 42ch; }
body .breakdance .bde-text.dw-fine { margin-top: var(--dw-s2); font-size: 0.8rem; color: var(--dw-bone-55); }

/* the native Breakdance form, laid out as one inline row */
body .breakdance .dw-form { width: 100%; }
body .breakdance .dw-form .breakdance-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.75rem; width: 100%; }
body .breakdance .dw-form .breakdance-form-field { margin: 0; width: auto; }
body .breakdance .dw-form .breakdance-form-field--email { flex: 1 1 14rem; width: auto; min-width: 0; }
body .breakdance .dw-form .breakdance-form-field--hidden { display: none; }
body .breakdance .dw-form .breakdance-form-field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .breakdance .dw-form .breakdance-form-field__input {
  width: 100%; padding: 0.95rem 1.5rem; border: 1.5px solid var(--dw-bone-55); border-radius: 999px;
  background: rgba(27, 5, 8, 0.35); color: var(--dw-bone);
  font-family: var(--dw-sans); font-size: 1rem; line-height: 1.4; transition: border-color 0.2s ease, background 0.2s ease;
}
body .breakdance .dw-form .breakdance-form-field__input::placeholder { color: var(--dw-bone-55); }
body .breakdance .dw-form .breakdance-form-field__input:hover { border-color: var(--dw-bone-80); }
body .breakdance .dw-form .breakdance-form-field__input:focus { outline: none; border-color: var(--dw-bone); background: rgba(27, 5, 8, 0.5); }
/* newsletter field: cream pill with maroon type on the maroon band */
body .breakdance .dw-band .dw-form .breakdance-form-field__input { background: var(--dw-bone); border-color: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .dw-band .dw-form .breakdance-form-field__input::placeholder { color: var(--dw-ink-72); opacity: 1; }
body .breakdance .dw-band .dw-form .breakdance-form-field__input:hover { border-color: var(--dw-cream); }
body .breakdance .dw-band .dw-form .breakdance-form-field__input:focus { background: var(--dw-cream); border-color: var(--dw-gold); box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.35); }
body .breakdance .dw-form .breakdance-form-footer { flex: 0 0 auto; width: auto; margin: 0; }
body .breakdance .dw-form .breakdance-form-button {
  display: inline-flex; align-items: center; gap: 0.9rem; border: 0; cursor: pointer;
  background: var(--dw-bone); color: var(--dw-ink); border-radius: 999px; padding: 0.7rem 0.7rem 0.7rem 1.7rem;
  font-family: var(--dw-sans); font-weight: 600; font-size: 1rem; line-height: 1.4; white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}
body .breakdance .dw-form .breakdance-form-button::after {
  content: ""; width: 2.3rem; height: 2.3rem; border-radius: 50%; flex-shrink: 0; background-color: var(--dw-ink);
  background-image: var(--dw-arrow-cream); background-repeat: no-repeat; background-position: center; background-size: 16px;
}
body .breakdance .dw-form .breakdance-form-button:hover { background: var(--dw-cream); transform: translateY(-2px); }
body .breakdance .dw-form .breakdance-form-button:focus-visible { outline: 3px solid var(--dw-bone); outline-offset: 3px; }
body .breakdance .dw-form .breakdance-form__message,
body .breakdance .dw-form .breakdance-form-message { flex: 1 0 100%; margin-top: var(--dw-s1); color: var(--dw-bone); font-size: 0.9rem; }
/* ---------- 6. About: two-photo composition + topics (cream) ---------- */
body .breakdance .dw-about {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 7rem); align-items: center;
}
body .breakdance .dw-about-media { position: relative; display: block; padding: 0 clamp(2rem, 5vw, 4rem) clamp(1.5rem, 3.5vw, 3rem) 0; }
body .breakdance .dw-about-main { aspect-ratio: 4 / 5; overflow: hidden; width: 100%; }
body .breakdance .dw-about-inset {
  position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 1; overflow: hidden;
  border: clamp(6px, 1vw, 12px) solid var(--dw-bone); background: var(--dw-bone);
}
body .breakdance .dw-about-main figure, body .breakdance .dw-about-main .breakdance-image-container, body .breakdance .dw-about-main .breakdance-image-clip,
body .breakdance .dw-about-inset figure, body .breakdance .dw-about-inset .breakdance-image-container, body .breakdance .dw-about-inset .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
body .breakdance .dw-about-main img, body .breakdance .dw-about-inset img { width: 100%; height: 100%; object-fit: cover; }
/* main: the stream of wine and the glass; inset: bottle and grapes, cropped square from a tall frame */
body .breakdance .dw-about-main img { object-position: 45% 60%; }
body .breakdance .dw-about-inset img { object-position: 50% 72%; }
body .breakdance .dw-about-text { display: flex; flex-direction: column; align-items: flex-start; }
body .breakdance .dw-about .bde-text.dw-lead-strong {
  margin-top: var(--dw-s3); font-size: 1.15rem; line-height: 1.6; color: var(--dw-ink); max-width: 44ch; font-weight: 500; text-wrap: pretty;
}
body .breakdance .dw-about .bde-text.dw-lead { max-width: 50ch; }
body .breakdance .dw-topics { width: 100%; margin-top: var(--dw-s4); display: flex; flex-direction: column; }
body .breakdance .dw-topic { position: relative; width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; padding: var(--dw-s2) 0 var(--dw-s2); border-top: 1px solid var(--dw-line); }
body .breakdance .dw-topic:last-child { border-bottom: 1px solid var(--dw-line); }
body .breakdance .bde-text-link.dw-topic-link {
  display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 1rem; text-decoration: none;
  font-size: 1.05rem; font-weight: 600; color: var(--dw-ink); transition: color 0.2s ease;
}
body .breakdance .bde-text-link.dw-topic-link::before { content: ""; position: absolute; inset: 0; z-index: 2; }
body .breakdance .bde-text-link.dw-topic-link::after {
  content: ""; width: 18px; height: 18px; background: currentColor; flex-shrink: 0; transition: transform 0.25s ease;
  -webkit-mask: var(--dw-arrow) center / contain no-repeat; mask: var(--dw-arrow) center / contain no-repeat;
}
body .breakdance .dw-topic:hover .bde-text-link.dw-topic-link { color: var(--dw-must); }
body .breakdance .dw-topic:hover .bde-text-link.dw-topic-link::after { transform: translateX(6px); }
body .breakdance .dw-about .bde-button { margin-top: var(--dw-s5); }

/* ---------- 7. Footer (maroon): contact strip → brand + three link columns → bottom bar ---------- */
body .breakdance .bde-section.dw-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dw-ink); color: var(--dw-bone); padding: var(--dw-s6) 0 var(--dw-s3);
  border-top: 3px solid var(--dw-gold);
}
/* the house-and-bottle mark, large and faint, bottom right */
body .breakdance .bde-section.dw-footer::after {
  content: ""; position: absolute; z-index: -1; right: -3rem; bottom: -4rem;
  width: clamp(14rem, 24vw, 22rem); aspect-ratio: 1; background: var(--dw-bone); opacity: 0.05; pointer-events: none;
  -webkit-mask: var(--dw-mark) center / contain no-repeat; mask: var(--dw-mark) center / contain no-repeat;
}
body .breakdance .dw-footer-cta,
body .breakdance .dw-footer-main,
body .breakdance .dw-footer-bottom { width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto; }

/* 1 — contact strip */
body .breakdance .dw-footer-cta {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--dw-s3) var(--dw-s5); flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--dw-bone); border: 0; border-radius: 20px;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
body .breakdance .dw-footer-cta-text { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 22rem; min-width: 0; }
body .breakdance .bde-text.dw-footer-cta-title {
  font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--dw-ink);
}
body .breakdance .bde-text.dw-footer-cta-sub { margin-top: 0.45rem; font-size: 0.98rem; line-height: 1.6; color: var(--dw-ink-72); max-width: 52ch; }
body .breakdance .dw-footer-cta .bde-button { flex: 0 0 auto; }
/* maroon button with cream type on the cream strip */
body .breakdance .dw-footer-cta .bde-button.dw-cta .button-atom { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-footer-cta .bde-button.dw-cta .button-atom::after { background-color: var(--dw-bone); background-image: var(--dw-arrow-ink); }
body .breakdance .dw-footer-cta .bde-button.dw-cta .button-atom:hover { background: var(--dw-ink-soft); }
/* on "O mnie" the contact form sits right above the footer — the strip would only repeat it */
body .breakdance .dw-om-contact ~ .dw-footer .dw-footer-cta { display: none; }
body .breakdance .dw-om-contact ~ .dw-footer .dw-footer-main { margin-top: 0; }

/* 2 — brand + link columns */
body .breakdance .dw-footer-main {
  margin-top: var(--dw-s6);
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--dw-s5) clamp(1.5rem, 3.5vw, 3.5rem); align-items: start;
}
body .breakdance .dw-footer-brand { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* the real logo, recoloured cream through a CSS mask; the link on top carries the name */
body .breakdance .dw-footer-logo {
  position: relative; width: 9.5rem; aspect-ratio: 543 / 232; background: var(--dw-bone);
  -webkit-mask: url("logo-domowa-winnica.png") left center / contain no-repeat; mask: url("logo-domowa-winnica.png") left center / contain no-repeat;
  transition: background 0.25s ease;
}
body .breakdance .dw-footer-logo:hover { background: #fff; }
body .breakdance .bde-text-link.dw-footer-logo-link { position: absolute; inset: 0; font-size: 0; color: transparent; }
body .breakdance .bde-text.dw-footer-about { margin-top: var(--dw-s3); color: var(--dw-bone-80); font-size: 0.95rem; line-height: 1.75; max-width: 44ch; }
body .breakdance .bde-text.dw-footer-tag {
  margin-top: var(--dw-s3); padding-left: 0.9rem; border-left: 2px solid var(--dw-gold);
  color: var(--dw-bone); font-size: 1rem; font-style: italic; font-weight: 500;
}
body .breakdance .dw-social--footer { margin-top: var(--dw-s3); }
/* cream discs with a maroon glyph; on hover they turn maroon (cream glyph and outline) */
body .breakdance .dw-social--footer .bde-social-icons__icon-wrapper {
  border: 1px solid var(--dw-bone); color: var(--dw-ink); background: var(--dw-bone);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
body .breakdance .dw-social--footer .bde-social-icons__icon-wrapper svg { fill: currentColor; }
body .breakdance .dw-social--footer .bde-social-icons__icon-wrapper:hover {
  background: var(--dw-ink); border-color: var(--dw-bone); color: var(--dw-bone); transform: translateY(-2px);
}
body .breakdance .dw-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; min-width: 0; }
body .breakdance .bde-text.dw-footer-col-title {
  margin-bottom: 0.5rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--dw-bone-20); align-self: stretch;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold);
}
/* links: a short gold dash slides in from the left on hover */
body .breakdance .bde-text-link.dw-footer-link {
  position: relative; font-size: 0.95rem; line-height: 1.45; color: var(--dw-bone-80); text-decoration: none;
  transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .bde-text-link.dw-footer-link::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1.5px; background: var(--dw-gold);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .bde-text-link.dw-footer-link:hover { color: var(--dw-bone); padding-left: 1.1rem; }
body .breakdance .bde-text-link.dw-footer-link:hover::before { width: 0.7rem; }

/* 3 — bottom bar: a full-width cream strip with maroon type closes the page.
   The strip keeps the content width; the shadow + clip-path pair paints it edge to edge. */
body .breakdance .bde-section.dw-footer { padding-bottom: 0; }
body .breakdance .dw-footer-bottom {
  margin-top: var(--dw-s6); padding: var(--dw-s3) 0; border-top: 0;
  background: var(--dw-bone); box-shadow: 0 0 0 100vmax var(--dw-bone); clip-path: inset(0 -100vmax);
  display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--dw-s2) var(--dw-s4);
}
body .breakdance .bde-text.dw-copy, body .breakdance .bde-text.dw-legal { font-size: 0.8rem; line-height: 1.6; letter-spacing: 0.02em; color: var(--dw-ink); }
body .breakdance .bde-text.dw-legal { flex: 1 1 26rem; max-width: 62ch; text-align: center; color: var(--dw-ink-72); }
body .breakdance .bde-text-link.dw-totop {
  display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dw-ink); text-decoration: none;
}
/* maroon disc, cream arrow */
body .breakdance .bde-text-link.dw-totop::after {
  content: ""; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1px solid var(--dw-ink);
  background: var(--dw-ink) var(--dw-arrow-cream) center / 14px no-repeat; transform: rotate(-90deg);
  transition: background-color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .bde-text-link.dw-totop:hover::after { background-color: var(--dw-ink-soft); transform: rotate(-90deg) translateX(3px); }
/* ---------- Blog listing page: Posts List wearing the homepage card look ---------- */
/* compact photo hero for inner pages */
body .breakdance .bde-section.dw-page-hero {
  position: relative; overflow: hidden; isolation: isolate; background: var(--dw-night);
  padding: calc(var(--dw-header-h) + var(--dw-s7)) 0 var(--dw-s7);
}
body .breakdance .bde-section.dw-page-hero > .section-container { position: static; }
body .breakdance .dw-page-hero .dw-photo { position: absolute; inset: 0; z-index: -2; }
body .breakdance .dw-page-hero .dw-photo img { object-position: 50% 62%; }
/* no overlay on the photo: the text carries a maroon outline instead */
body .breakdance .dw-page-hero-text {
  position: relative; z-index: 1; width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* minimal maroon outline: a thin stroke plus a soft shadow for legibility */
body .breakdance .dw-page-hero .bde-text.dw-eyebrow {
  color: var(--dw-bone); -webkit-text-stroke: 0.4px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 6px rgba(27, 5, 8, 0.65);
}
body .breakdance .dw-page-hero .bde-heading.dw-page-h1 {
  color: var(--dw-bone); -webkit-text-stroke: 1px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 2px 14px rgba(27, 5, 8, 0.6);
}
body .breakdance .dw-page-hero .bde-text.dw-lead {
  color: var(--dw-bone); margin-inline: auto; font-weight: 500;
  -webkit-text-stroke: 0.6px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(27, 5, 8, 0.85), 0 2px 12px rgba(27, 5, 8, 0.8);
}body .breakdance .bde-heading.dw-page-h1 { font-size: clamp(2rem, 3.4vw, 3rem); max-width: 22ch; }
body .breakdance .bde-section.dw-blog { padding-top: var(--dw-band); }
body .breakdance .dw-blog-wrap { width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto; }
body .breakdance .dw-postlist .bde-loop-grid { align-items: stretch; }

/* card */
body .breakdance .dw-postlist .ee-post {
  position: relative; display: flex; flex-direction: column; background: transparent; border: 0; padding: 0; box-shadow: none;
  transition: transform 0.35s ease;
}
body .breakdance .dw-postlist .ee-post:hover { transform: translateY(-6px); }

/* media */
body .breakdance .dw-postlist .ee-post-image-link {
  display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--dw-ink); margin: 0;
}
body .breakdance .dw-postlist .ee-post-image { width: 100%; height: 100%; margin: 0; }
body .breakdance .dw-postlist .ee-post-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
body .breakdance .dw-postlist .ee-post:hover .ee-post-image img { transform: scale(1.06); }
/* posts without a featured image get Breakdance's grey placeholder; swap it for the brand mark on maroon */
body .breakdance .dw-postlist .ee-post-image { position: relative; }
body .breakdance .dw-postlist .ee-post-image img:not(.wp-post-image) { opacity: 0; }
body .breakdance .dw-postlist .ee-post-image:has(img:not(.wp-post-image)) { background: var(--dw-ink); }
body .breakdance .dw-postlist .ee-post-image:has(img:not(.wp-post-image))::after {
  content: ""; position: absolute; inset: 0; background: var(--dw-bone); opacity: 0.85; pointer-events: none;
  -webkit-mask: var(--dw-mark) center / 38% no-repeat; mask: var(--dw-mark) center / 38% no-repeat;
}

/* body */
body .breakdance .dw-postlist .ee-post-wrap {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem;
  padding: var(--dw-s3) 0 0; background: transparent; flex: 1;
}
body .breakdance .dw-postlist .ee-post-title { margin: 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.25rem; line-height: 1.35; color: var(--dw-ink); }
body .breakdance .dw-postlist .ee-post-title-link { color: inherit; text-decoration: none; }
body .breakdance .dw-postlist .ee-post-title-link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
body .breakdance .dw-postlist .ee-post-meta {
  order: -1; margin: 0; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dw-ink-72);
}
body .breakdance .dw-postlist .ee-post-content { margin: 0; color: var(--dw-ink-72); font-size: 0.95rem; line-height: 1.65; }

/* category = the maroon ribbon from the homepage cards */
body .breakdance .dw-postlist .ee-post-taxonomy {
  position: absolute; top: 0; left: 0; z-index: 2; margin: 0; padding: 0; list-style: none; display: flex; gap: 1px;
}
body .breakdance .dw-postlist .ee-post-taxonomy-item {
  background: var(--dw-ink); color: var(--dw-bone); padding: 0.45rem 0.9rem;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}

/* "Czytaj dalej" styled as the homepage text link, not a filled button */
body .breakdance .dw-postlist .ee-post-button {
  margin-top: auto; padding: var(--dw-s2) 0 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dw-ink);
}
body .breakdance .dw-postlist .ee-post-button::after {
  content: ""; width: 15px; height: 15px; background: currentColor; transition: transform 0.25s ease;
  -webkit-mask: var(--dw-arrow) center / contain no-repeat; mask: var(--dw-arrow) center / contain no-repeat;
}
body .breakdance .dw-postlist .ee-post:hover .ee-post-button::after { transform: translateX(5px); }
body .breakdance .dw-postlist .ee-post-button:hover { background: transparent; color: var(--dw-must); }

/* pagination */
body .breakdance .dw-postlist .bde-posts-pagination,
body .breakdance .dw-postlist .ee-posts-pagination { margin-top: var(--dw-s6); display: flex; justify-content: center; gap: 0.5rem; }
body .breakdance .dw-postlist .page-numbers {
  min-width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--dw-line); color: var(--dw-ink); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
body .breakdance .dw-postlist .page-numbers:hover,
body .breakdance .dw-postlist .page-numbers.current { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); }
/* the same element on the homepage: a fixed first three, so no pager belongs there */
body .breakdance .dw-home-posts { width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: var(--dw-s6) auto 0; }
body .breakdance .dw-postlist--home .bde-posts-pagination,
body .breakdance .dw-postlist--home .ee-posts-pagination { display: none; }

/* on the blog page the maroon band sits right above the maroon footer */
/* ---------- About page ("O mnie") ----------
   Sections alternate maroon / cream:
   hero (photo) → credo (maroon) → history (cream) → craft (maroon photo band) → contact (cream) */

/* shared type scale for this page */
body .breakdance .bde-heading.dw-om-h1 {
  font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08;
  font-size: clamp(2rem, 3.6vw, 3.1rem); color: var(--dw-bone); text-wrap: balance; max-width: 20ch;
  margin-top: var(--dw-s3); text-shadow: 0 2px 20px rgba(27, 5, 8, 0.5);
}
body .breakdance .bde-heading.dw-om-h2 {
  font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--dw-ink); text-wrap: balance; max-width: 18ch;
  margin-top: var(--dw-s3);
}
body .breakdance :is(.bde-text, .bde-rich-text).dw-om-p {
  font-size: 1rem; line-height: 1.8; color: var(--dw-ink-72); max-width: 62ch; text-wrap: pretty;
  margin-top: var(--dw-s3);
}
body .breakdance .bde-text.dw-om-p--lead { font-size: 1.12rem; line-height: 1.7; color: var(--dw-ink); }

/* 1 — hero: same proportions as the blog page hero (padding-driven, no min-height) */
body .breakdance .bde-section.dw-om-hero {
  position: relative; overflow: hidden; isolation: isolate; background: var(--dw-night);
  padding: calc(var(--dw-header-h) + var(--dw-s7)) 0 var(--dw-s7);
}
body .breakdance .bde-section.dw-om-hero > .section-container { position: static; }
body .breakdance .dw-om-hero-photo { position: absolute; inset: 0; z-index: -2; }
body .breakdance .dw-om-hero-img,
body .breakdance .dw-om-hero-img figure,
body .breakdance .dw-om-hero-img .breakdance-image-container,
body .breakdance .dw-om-hero-img .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
/* scaled slightly so the parallax drift never exposes an edge */
/* the band is far wider than the photo, so cover crops top and bottom hard;
   a lower Y keeps less off the top, which is where the necks and corks of the demijohns are */
body .breakdance .dw-om-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%;
  transform: scale(1.07) translate3d(0, var(--dw-parallax, 0px), 0);
}
/* no gradient over the photo — only an even 10% black veil; the text carries the same maroon outline + shadow as the blog hero */
body .breakdance .bde-section.dw-om-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.1); pointer-events: none;
}
body .breakdance .dw-om-hero-inner {
  position: relative; z-index: 1; width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start;
}
body .breakdance .dw-om-hero .bde-text.dw-eyebrow {
  color: var(--dw-bone); font-weight: 700; -webkit-text-stroke: 0.6px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(27, 5, 8, 0.95), 0 1px 10px rgba(27, 5, 8, 0.85);
}
body .breakdance .dw-om-hero .dw-eyebrow::before { box-shadow: 0 1px 4px rgba(27, 5, 8, 0.9); }
/* the photo is bright glass behind the title: a thicker maroon stroke plus a tight dark halo */
body .breakdance .dw-om-hero .bde-heading.dw-om-h1 {
  -webkit-text-stroke: 2px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 2px rgba(27, 5, 8, 0.9), 0 2px 8px rgba(27, 5, 8, 0.75), 0 4px 26px rgba(27, 5, 8, 0.7);
}
body .breakdance .bde-text.dw-om-hero-lead {
  margin-top: var(--dw-s3); max-width: 52ch; font-size: 1.08rem; line-height: 1.7; font-weight: 500; color: var(--dw-bone);
  -webkit-text-stroke: 0.6px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(27, 5, 8, 0.9), 0 2px 12px rgba(27, 5, 8, 0.85);
}
body .breakdance .bde-text.dw-om-sign {
  margin-top: var(--dw-s3); padding-top: var(--dw-s2); border-top: 1px solid var(--dw-bone-55);
  font-style: italic; font-weight: 500; font-size: 1rem; color: var(--dw-bone); letter-spacing: 0.01em;
  -webkit-text-stroke: 0.5px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(27, 5, 8, 0.9), 0 2px 12px rgba(27, 5, 8, 0.85);
}

/* 2 — credo: cream, photo card with a hover reveal + a hover tile widget */
body .breakdance .bde-section.dw-om-credo { background: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .dw-om-credo-inner {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start;
}
body .breakdance .dw-om-credo-inner > * { min-width: 0; }
/* the widget: photo zooms, a maroon veil rises, the slogan slides in with it */
body .breakdance .dw-om-credo-photo {
  position: relative; overflow: hidden; cursor: pointer;
  box-shadow: 0 28px 60px -30px rgba(0, 0, 0, 0.75);
}
body .breakdance .dw-om-credo-img,
body .breakdance .dw-om-credo-img figure,
body .breakdance .dw-om-credo-img .breakdance-image-container,
body .breakdance .dw-om-credo-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-om-credo-img img {
  width: 100%; height: auto; display: block;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
body .breakdance .dw-om-credo-photo:hover .dw-om-credo-img img { transform: scale(1.06); filter: saturate(1.05); }
body .breakdance .dw-om-credo-veil {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: flex-end; padding: clamp(1.25rem, 3vw, 2rem);
  background: linear-gradient(to top, rgba(27, 5, 8, 0.94) 0%, rgba(66, 14, 26, 0.72) 45%, rgba(66, 14, 26, 0) 100%);
  opacity: 0; transform: translateY(35%);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
body .breakdance .dw-om-credo-photo:hover .dw-om-credo-veil { opacity: 1; transform: none; }
body .breakdance .bde-text.dw-om-credo-veil-text {
  font-family: var(--dw-display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.4; color: var(--dw-bone);
}
body .breakdance .dw-om-credo-body { display: flex; flex-direction: column; align-items: flex-start; }
body .breakdance .dw-om-credo .bde-text.dw-om-p--lead {
  padding-left: clamp(1rem, 2vw, 1.5rem); border-left: 2px solid var(--dw-gold);
}
/* three tiles that lift and light up under the cursor */
/* the hairlines between tiles are the 1px grid gap showing the container behind,
   so every tile has to fill its cell or the container colour leaks through */
body .breakdance .dw-om-tiles {
  width: 100%; margin-top: var(--dw-s5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--dw-line);
  border: 1px solid var(--dw-line); align-items: stretch;
}
body .breakdance .dw-om-tile {
  position: relative; overflow: hidden; background: var(--dw-paper); height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-om-tile::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--dw-gold);
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-om-tile:hover { background: #fff; transform: translateY(-4px); }
body .breakdance .dw-om-tile:hover::after { right: 0; }
body .breakdance .bde-text.dw-om-tile-no {
  font-family: var(--dw-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em;
  color: var(--dw-gold); transition: color 0.3s ease;
}
body .breakdance .bde-heading.dw-om-tile-title {
  margin: 0.5rem 0 0; font-family: var(--dw-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.25; color: var(--dw-ink);
}
body .breakdance .bde-text.dw-om-tile-body {
  margin-top: 0.55rem; font-size: 0.92rem; line-height: 1.65; color: var(--dw-stone);
  transition: color 0.3s ease;
}
body .breakdance .dw-om-tile:hover .bde-text.dw-om-tile-body { color: var(--dw-ink-72); }

/* 3 — history + craft: maroon section, content in a row of tiles, no photograph */
body .breakdance .bde-section.dw-om-craft { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-om-craft-inner {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: flex-start;
}
body .breakdance .dw-om-craft .bde-text.dw-eyebrow { color: var(--dw-bone); }
body .breakdance .dw-om-craft .bde-heading.dw-om-h2 { color: var(--dw-bone); max-width: none; width: 100%; }
body .breakdance .dw-om-craft-head { width: 100%; }

/* the shared tile grid: hairlines are the 1px gap showing the container through,
   so each tile must fill its cell or the container colour leaks into the gaps.
   align-items has to be reset too — Breakdance puts flex-start on every .bde-div. */
body .breakdance .dw-om-steps,
body .breakdance .dw-om-lessons {
  width: 100%; display: grid; gap: 1px; align-items: stretch;
  background: var(--dw-ink); border: 1px solid var(--dw-bone);
}
body .breakdance .dw-om-steps { margin-top: var(--dw-s6); grid-template-columns: repeat(4, 1fr); }
body .breakdance .dw-om-lessons { margin-top: var(--dw-s3); grid-template-columns: repeat(3, 1fr); }

/* cream tiles with maroon type on the maroon section (27 Sept 2026) */
body .breakdance .dw-om-step,
body .breakdance .dw-om-lesson {
  position: relative; overflow: hidden; height: 100%; background: var(--dw-bone);
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.25rem, 2.4vw, 1.9rem);
  transition: background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
/* hover: the tile lifts, turns a lighter cream, and a gold rule runs along its bottom edge */
body .breakdance .dw-om-step::after,
body .breakdance .dw-om-lesson::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--dw-gold);
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-om-step:hover,
body .breakdance .dw-om-lesson:hover { background: var(--dw-cream); transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, 0.7); }
body .breakdance .dw-om-step:hover::after,
body .breakdance .dw-om-lesson:hover::after { right: 0; }

body .breakdance .bde-text.dw-om-step-no {
  font-family: var(--dw-display); font-size: clamp(1.8rem, 2.6vw, 2.3rem); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px var(--dw-ink-72);
  transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}
body .breakdance .dw-om-step:hover .bde-text.dw-om-step-no { color: var(--dw-ink); -webkit-text-stroke-color: var(--dw-ink); }
body .breakdance .bde-text.dw-om-step-kicker {
  margin-top: 0.55rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dw-must);
}
body .breakdance .bde-heading.dw-om-step-title {
  margin: 0.6rem 0 0; font-family: var(--dw-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.25; color: var(--dw-ink);
}
body .breakdance :is(.bde-text, .bde-rich-text).dw-om-step-body {
  margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.7; color: var(--dw-ink-72);
  transition: color 0.3s ease;
}
body .breakdance .dw-om-step:hover :is(.bde-text, .bde-rich-text).dw-om-step-body { color: var(--dw-ink); }

/* the three lessons close the section */
body .breakdance .dw-om-lessons-block { width: 100%; margin-top: var(--dw-s6); }
body .breakdance .bde-heading.dw-om-lessons-head {
  margin: 0; font-family: var(--dw-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; color: var(--dw-bone);
}
body .breakdance .bde-heading.dw-om-lesson-title {
  margin: 0; font-family: var(--dw-display); font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.2; color: var(--dw-ink);
  letter-spacing: -0.01em; transition: color 0.35s ease;
}
body .breakdance .dw-om-lesson:hover .bde-heading.dw-om-lesson-title { color: var(--dw-must); }
body .breakdance .bde-text.dw-om-lesson-body {
  margin-top: 0.6rem; font-size: 0.92rem; line-height: 1.7; color: var(--dw-ink-72);
  transition: color 0.3s ease;
}
body .breakdance .dw-om-lesson:hover .bde-text.dw-om-lesson-body { color: var(--dw-ink); }

/* 5 — contact: cream, layout unchanged */
body .breakdance .bde-section.dw-om-contact { background: var(--dw-bone); }
body .breakdance .dw-om-contact-inner {
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
body .breakdance .dw-om-contact-inner > * { min-width: 0; }
body .breakdance .dw-om-contact-text { display: flex; flex-direction: row; align-items: flex-start; gap: clamp(1.25rem, 3vw, 2.25rem); }
body .breakdance .dw-om-contact-photo { flex: 0 0 auto; width: clamp(6.5rem, 14vw, 10rem); overflow: hidden; }
body .breakdance .dw-om-contact-img,
body .breakdance .dw-om-contact-img figure,
body .breakdance .dw-om-contact-img .breakdance-image-container,
body .breakdance .dw-om-contact-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-om-contact-img img {
  width: 100%; height: auto; display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-om-contact-photo:hover .dw-om-contact-img img { transform: scale(1.05); }
body .breakdance .dw-om-contact-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
/* contact heading: "Zapraszam do kontaktu" always on one line of its own; the size follows the
   column width (≈11.8em for that line), so it shrinks rather than wraps */
/* a size container has no intrinsic width, so it needs an explicit one (row on desktop, column on phones) */
body .breakdance .dw-om-contact-copy { container-type: inline-size; flex: 1 1 auto; width: 100%; }
body .breakdance .dw-om-contact .bde-heading.dw-om-h2 { max-width: none; width: 100%; font-size: min(2.4rem, 8.2cqi); }
body .breakdance .dw-om-contact-h2-line { display: block; white-space: nowrap; }
/* maroon form card on the cream section */
body .breakdance .dw-om-contact-form {
  display: flex; flex-direction: column; align-items: stretch;
  padding: clamp(1.75rem, 3vw, 2.75rem); border-radius: 18px; background: var(--dw-ink);
  box-shadow: 0 34px 60px -34px rgba(27, 5, 8, 0.8);
}
body .breakdance .dw-om-contact-form .bde-text.dw-fine { margin-top: var(--dw-s3); color: var(--dw-bone-55); }
/* stacked variant of the shared form: one field per row, labels visible */
body .breakdance .dw-form--stacked .breakdance-form { flex-direction: column; align-items: stretch; gap: var(--dw-s3); }
body .breakdance .dw-form--stacked .breakdance-form-field { width: 100%; flex: 0 0 auto; }
body .breakdance .dw-form--stacked .breakdance-form-field__label {
  position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal;
  display: block; margin-bottom: 0.5rem;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
/* pills suit the one-line newsletter; a multi-field form reads better with square-ish inputs */
body .breakdance .dw-form--stacked .breakdance-form-field__input {
  width: 100%; max-width: 100%; box-sizing: border-box; border-radius: 8px; padding: 0.85rem 1.1rem;
}
body .breakdance .dw-form--stacked textarea.breakdance-form-field__input { min-height: 9rem; resize: vertical; line-height: 1.6; }
body .breakdance .dw-form--stacked .breakdance-form-footer { width: 100%; flex: 0 0 auto; margin-top: var(--dw-s1); }
body .breakdance .dw-form--stacked .breakdance-form-button { width: 100%; justify-content: center; }
/* fields on the maroon card: cream fields with maroon type; cream button with maroon label and arrow */
body .breakdance .dw-om-contact-form .breakdance-form-field__input {
  border-color: #fff; background: #fff; color: var(--dw-ink);   /* white fields (27 Sept 2026) */
}
body .breakdance .dw-om-contact-form .breakdance-form-field__input::placeholder { color: var(--dw-ink-72); opacity: 1; }
body .breakdance .dw-om-contact-form .breakdance-form-field__input:hover { border-color: var(--dw-bone); }
body .breakdance .dw-om-contact-form .breakdance-form-field__input:focus { border-color: var(--dw-gold); background: #fff; box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.35); }
body .breakdance .dw-om-contact-form .breakdance-form-field__label { color: var(--dw-bone); }
body .breakdance .dw-om-contact-form .breakdance-form-field__required { color: var(--dw-gold); }
body .breakdance .dw-om-contact-form .breakdance-form-button { background: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .dw-om-contact-form .breakdance-form-button::after {
  background-color: transparent; background-image: var(--dw-arrow-ink); background-size: 20px;
  box-shadow: inset 0 0 0 1.5px var(--dw-ink);
}
body .breakdance .dw-om-contact-form .breakdance-form-button:hover { background: var(--dw-cream); }
body .breakdance .dw-om-contact-form .breakdance-form-button:focus-visible { outline-color: var(--dw-bone); }
body .breakdance .dw-om-contact-form .breakdance-form__message,
body .breakdance .dw-om-contact-form .breakdance-form-message { color: var(--dw-bone); }
/* after sending (Breakdance puts the message right after the <form>, inside the element): green pill with a tick for success (author's wish), red for an error — on both forms */
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--success,
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--error {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: var(--dw-s2); padding: 0.8rem 1.1rem; border-radius: 12px; border: 0;
  font-size: 0.95rem; font-weight: 500; line-height: 1.45; color: #fff;
}
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--success { background: #2e7d32; }
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--error { background: #b3261e; }
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--success::before,
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--error::before {
  flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); font-weight: 700; font-size: 0.85rem;
}
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--success::before { content: "✓"; }
body .breakdance .bde-form-builder .breakdance-form-message.breakdance-form-message--error::before { content: "!"; }
/* ---------- Single post ----------
   What changed against the live layout, and why:
   * one reading column capped at ~68ch — the live body ran to 110+ characters per line;
   * left-aligned text — justified Polish in narrow columns opened visible rivers;
   * a single top-to-bottom flow — the live two-column steps read 1-2-3 then jumped back up for 4-5;
   * date and reading time under the title — there was no meta at all;
   * a contents list for longer posts, and the "Składniki" list kept as its own card. */

/* hero: category, title, lead and meta on a narrow centred column */
body .breakdance .bde-section.dw-post-hero {
  background: var(--dw-bone);
  padding: calc(var(--dw-header-h) + var(--dw-s6)) 0 var(--dw-s5);
}
body .breakdance .dw-post-hero-inner {
  width: min(52rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
body .breakdance .bde-heading.dw-post-h1 {
  margin-top: var(--dw-s3); font-family: var(--dw-display); font-weight: 700;
  font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em;
  color: var(--dw-ink); text-wrap: balance; max-width: 22ch;
}
body .breakdance .dw-post-lead {
  margin-top: var(--dw-s3); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7;
  color: var(--dw-ink-72); max-width: 58ch; text-wrap: pretty;
}
body .breakdance .dw-post-meta {
  margin-top: var(--dw-s4); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 0.4rem 1.4rem;
}
body .breakdance .dw-post-meta-item {
  position: relative; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dw-stone);
}
/* a small gold dot between meta items */
body .breakdance .dw-post-meta-item + .dw-post-meta-item::before {
  content: ""; position: absolute; left: -0.9rem; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: var(--dw-gold);
}

/* cover photograph: wider than the text, so it reads as the opening image of the article */
body .breakdance .bde-section.dw-post-cover { background: var(--dw-bone); padding: 0; }
body .breakdance .dw-post-cover-inner { width: min(72rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto; }
body .breakdance .dw-post-cover-img,
body .breakdance .dw-post-cover-img figure,
body .breakdance .dw-post-cover-img .breakdance-image-container,
body .breakdance .dw-post-cover-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-post-cover-img img {
  width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; display: block;
  box-shadow: 0 34px 70px -40px rgba(66, 14, 26, 0.55);
}

/* the reading column */
body .breakdance .bde-section.dw-post-body-band { background: var(--dw-bone); padding-top: var(--dw-s6); }
body .breakdance .dw-post-wrap {
  width: min(44rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: stretch;
}

/* table of contents */
body .breakdance .dw-toc {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  padding: var(--dw-s3) var(--dw-s4); margin-bottom: var(--dw-s5);
  background: var(--dw-paper); border-left: 3px solid var(--dw-gold);
}
body .breakdance .bde-text.dw-toc-head {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dw-stone); margin-bottom: 0.5rem;
}
body .breakdance .bde-text-link.dw-toc-link {
  position: relative; padding: 0.3rem 0 0.3rem 1.1rem; font-size: 0.97rem; line-height: 1.45;
  color: var(--dw-ink); text-decoration: none; transition: color 0.2s ease, padding-left 0.25s ease;
}
body .breakdance .bde-text-link.dw-toc-link::before {
  content: ""; position: absolute; left: 0; top: 0.95em; width: 0.5rem; height: 1px; background: var(--dw-gold);
  transition: width 0.25s ease;
}
body .breakdance .bde-text-link.dw-toc-link:hover { color: var(--dw-must); padding-left: 1.4rem; }
body .breakdance .bde-text-link.dw-toc-link:hover::before { width: 0.8rem; }

/* article typography — the rich text keeps real h2/h3/p/ul, styled here */
body .breakdance .dw-post-body { width: 100%; color: var(--dw-ink); font-size: 1.07rem; line-height: 1.8; }
body .breakdance .dw-post-body > *:first-child { margin-top: 0; }
/* long-form text needs more weight than the 72% ink used for short leads elsewhere */
body .breakdance .dw-post-body p { margin: 0 0 1.35em; color: rgba(66, 14, 26, 0.86); text-wrap: pretty; }
body .breakdance .dw-post-body h2 {
  margin: 2.4em 0 0.7em; font-family: var(--dw-display); font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--dw-ink);
  text-wrap: balance; scroll-margin-top: calc(var(--dw-header-h) + 1.5rem);
}
body .breakdance .dw-post-body h3 {
  margin: 1.9em 0 0.5em; font-family: var(--dw-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.35rem); line-height: 1.3; color: var(--dw-ink);
  scroll-margin-top: calc(var(--dw-header-h) + 1.5rem);
}
body .breakdance .dw-post-body h4 { margin: 1.6em 0 0.4em; font-weight: 600; font-size: 1.08rem; color: var(--dw-ink); }
body .breakdance .dw-post-body ul,
body .breakdance .dw-post-body ol { margin: 0 0 1.5em; padding: 0; list-style: none; }
body .breakdance .dw-post-body li {
  position: relative; margin: 0 0 0.6em; padding-left: 1.6rem; color: rgba(66, 14, 26, 0.86);
}
body .breakdance .dw-post-body ul > li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.78em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--dw-gold);
}
body .breakdance .dw-post-body ol { counter-reset: dw-ol; }
body .breakdance .dw-post-body ol > li { counter-increment: dw-ol; }
body .breakdance .dw-post-body ol > li::before {
  content: counter(dw-ol) "."; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--dw-gold);
}
body .breakdance .dw-post-body strong { color: var(--dw-ink); font-weight: 600; }
body .breakdance .dw-post-body figure.dw-post-figure { margin: 2.2em 0; }
body .breakdance .dw-post-body figure.dw-post-figure img {
  width: 100%; height: auto; display: block; box-shadow: 0 26px 50px -34px rgba(66, 14, 26, 0.5);
}

/* the ingredients list becomes a maroon card — the idea from the live post, kept */
body .breakdance .dw-post-body .dw-recipe-list {
  margin: 0 0 2em; padding: var(--dw-s4) var(--dw-s4) var(--dw-s3);
  background: var(--dw-ink); color: var(--dw-bone);
  box-shadow: 0 30px 60px -36px rgba(66, 14, 26, 0.8);
}
body .breakdance .dw-post-body .dw-recipe-list ul { margin: 0; }
body .breakdance .dw-post-body .dw-recipe-list li {
  color: var(--dw-bone); padding: 0.55em 0 0.55em 1.6rem; margin: 0;
  border-bottom: 1px solid var(--dw-bone-20);
}
body .breakdance .dw-post-body .dw-recipe-list li:last-child { border-bottom: 0; }
body .breakdance .dw-post-body .dw-recipe-list li::before { top: 1.3em; }

/* author — the maroon step in the page rhythm */
body .breakdance .bde-section.dw-post-author-band { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-post-author {
  width: min(44rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: row; align-items: center; gap: clamp(1.5rem, 4vw, 2.75rem);
}
body .breakdance .dw-post-author-photo { flex: 0 0 auto; width: clamp(6.5rem, 14vw, 9rem); }
body .breakdance .dw-post-author-img,
body .breakdance .dw-post-author-img figure,
body .breakdance .dw-post-author-img .breakdance-image-container,
body .breakdance .dw-post-author-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-post-author-img img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 30%; border-radius: 50%;
  border: 3px solid var(--dw-gold); display: block;
}
body .breakdance .dw-post-author-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
body .breakdance .dw-post-author-band .bde-text.dw-eyebrow { color: var(--dw-bone); }
body .breakdance .bde-heading.dw-post-author-name {
  margin: 0.5rem 0 0; font-family: var(--dw-display); font-weight: 700; font-size: 1.6rem; color: var(--dw-bone);
}
body .breakdance .dw-post-author-bio { margin-top: 0.6rem; font-size: 0.98rem; line-height: 1.7; color: var(--dw-bone-80); }
body .breakdance .bde-text-link.dw-post-author-link {
  position: relative; margin-top: var(--dw-s3); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dw-bone); text-decoration: none; padding-bottom: 0.25rem;
}
body .breakdance .bde-text-link.dw-post-author-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--dw-gold);
  transform: scaleX(0.35); transform-origin: left; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .bde-text-link.dw-post-author-link:hover::after { transform: scaleX(1); }

/* more posts */
body .breakdance .bde-section.dw-post-more .dw-home-posts { margin-top: var(--dw-s5); }
/* ---------- Recipe post (layout mirrored from the live site, refreshed) ----------
   Section order is the author's own; see build-post-truskawki.php.
   Author's choices applied here: body copy in near-black, justified; headings keep the maroon
   and run the full content width. */
body .breakdance .dw-rp-wrap { width: min(72rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; }

/* near-black rather than #000: same legibility, less glare against the cream */
body .breakdance .dw-rp-intro,
body .breakdance .dw-rp-prep,
body .breakdance .dw-rp-recipe,
body .breakdance .dw-rp-props,
body .breakdance .dw-rp-author-band { --dw-rp-text: #161616; }

/* justified text; hyphenation (the page is lang="pl") keeps the gaps between words small */
body .breakdance .dw-rp-prose p,
body .breakdance .bde-text.dw-rp-lead,
body .breakdance .dw-rp-method-list li,
body .breakdance .bde-text.dw-rp-prop-body,
body .breakdance .bde-text.dw-rp-author-bio {
  text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto;
}

body .breakdance .dw-rp-prose { width: 100%; max-width: none; font-size: 1.05rem; line-height: 1.8; color: var(--dw-rp-text); }
body .breakdance .dw-rp-prose p { margin: 0 0 1.2em; }
body .breakdance .dw-rp-prose p:last-child { margin-bottom: 0; }

/* 1 — title, lead, meta, contents, cover, story */
body .breakdance .bde-section.dw-rp-intro { background: var(--dw-bone); padding-top: calc(var(--dw-header-h) + var(--dw-s6)); padding-bottom: var(--dw-s5); }
body .breakdance .bde-heading.dw-rp-h1 {
  margin-top: var(--dw-s3); font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.08; color: var(--dw-ink); max-width: none; width: 100%;
}
body .breakdance .bde-text.dw-rp-lead { width: 100%; margin-top: var(--dw-s3); max-width: none; font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.7; color: var(--dw-rp-text); }
/* every anchor a contents link jumps to lands clear of the fixed header */
body .breakdance .bde-heading[id] { scroll-margin-top: calc(var(--dw-header-h) + 1.5rem); }
body .breakdance .dw-rp-meta { justify-content: flex-start; margin-top: var(--dw-s3); }
body .breakdance .dw-rp-cover { margin-top: var(--dw-s5); }
body .breakdance .dw-rp-cover-img,
body .breakdance .dw-rp-cover-img figure,
body .breakdance .dw-rp-cover-img .breakdance-image-container,
body .breakdance .dw-rp-cover-img .breakdance-image-clip { width: 100%; margin: 0; }
/* the whole photograph, at its own proportions — no cropping */
body .breakdance .dw-rp-cover-img img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  box-shadow: 0 34px 70px -40px rgba(66, 14, 26, 0.6);
}
body .breakdance .dw-rp-story { margin-top: var(--dw-s5); }
/* first letter of the story set large, a small editorial touch */
body .breakdance .dw-rp-story p:first-child::first-letter {
  float: left; font-family: var(--dw-display); font-weight: 700; font-size: 3.4em; line-height: 0.9;
  margin: 0.08em 0.12em 0 0; color: var(--dw-ink);
}

/* 2 — five steps in two columns */
/* padding-bottom (not a margin on the next band) keeps the cream running into the photo band */
body .breakdance .bde-section.dw-rp-prep { background: var(--dw-bone); padding-top: 0; padding-bottom: var(--dw-band); }
body .breakdance .bde-heading.dw-rp-h2 {
  width: 100%; max-width: none;
  font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem); color: var(--dw-ink);
}
body .breakdance .dw-rp-prep-intro { margin-top: var(--dw-s3); }
body .breakdance .dw-rp-steps {
  width: 100%; margin-top: var(--dw-s5);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(2rem, 5vw, 4.5rem); align-items: start;
}
body .breakdance .dw-rp-steps > * { min-width: 0; }
body .breakdance .dw-rp-col { display: flex; flex-direction: column; align-items: stretch; gap: var(--dw-s5); }
body .breakdance .dw-rp-step { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.1rem; align-items: start; }
/* numbered disc keeps 1→5 obvious even though the steps split across two columns */
body .breakdance .bde-text.dw-rp-step-no {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--dw-ink); color: var(--dw-bone); font-family: var(--dw-display); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 5px rgba(184, 147, 90, 0.25);
}
body .breakdance .dw-rp-step-text { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
body .breakdance .bde-heading.dw-rp-step-title {
  margin: 0.35rem 0 0; font-family: var(--dw-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.28rem);
  line-height: 1.3; color: var(--dw-ink);
}
body .breakdance .dw-rp-step-body { margin-top: 0.6rem; font-size: 1rem; line-height: 1.75; }
body .breakdance .dw-rp-step-photo { overflow: hidden; border-radius: 18px; border: 3px solid var(--dw-ink); box-shadow: 0 30px 60px -38px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-rp-step-img,
body .breakdance .dw-rp-step-img figure,
body .breakdance .dw-rp-step-img .breakdance-image-container,
body .breakdance .dw-rp-step-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-rp-step-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .dw-rp-step-photo:hover .dw-rp-step-img img { transform: scale(1.04); }

/* 3 — photo band. Both cards now stack in the left column, over the photograph's empty dark
   side; the right side stays open so the glass and the bottle of strawberry wine are visible. */
body .breakdance .bde-section.dw-rp-recipe {
  position: relative; overflow: hidden; isolation: isolate; background: #1c1c1c;
  padding: clamp(4rem, 7vw, 6rem) 0;
}
body .breakdance .bde-section.dw-rp-recipe > .section-container { position: static; }
body .breakdance .dw-rp-recipe-photo { position: absolute; inset: 0; z-index: -2; }
body .breakdance .dw-rp-recipe-img,
body .breakdance .dw-rp-recipe-img figure,
body .breakdance .dw-rp-recipe-img .breakdance-image-container,
body .breakdance .dw-rp-recipe-img .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
/* the photograph as supplied — no gradient; framed from the right so the bottle stays in view */
body .breakdance .dw-rp-recipe-img img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 60%; }
body .breakdance .dw-rp-recipe-inner {
  width: min(72rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 40rem) 1fr; row-gap: 1.25rem; align-items: start;
}
body .breakdance .dw-rp-recipe-inner > * { grid-column: 1; min-width: 0; }
body .breakdance .dw-rp-ingredients {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--dw-ink); color: var(--dw-bone); border-radius: 20px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}
body .breakdance .bde-text.dw-rp-card-kicker { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold); }
body .breakdance .bde-heading.dw-rp-card-title {
  margin: 0.4rem 0 0; font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.75rem); color: inherit;
}
/* "Przepis na wino …" — the H2 of the recipe band, cream on the dark side of the photograph */
body .breakdance .bde-heading.dw-rp-recipe-h2 {
  margin: 0 0 0.25rem; font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15;
  font-size: clamp(1.6rem, 2.8vw, 2.25rem); color: var(--dw-bone);
  -webkit-text-stroke: 1px var(--dw-ink); paint-order: stroke fill;
  text-shadow: 0 1px 3px rgba(27, 5, 8, 0.9), 0 2px 14px rgba(27, 5, 8, 0.8);
  scroll-margin-top: calc(var(--dw-header-h) + 1.5rem);
}
/* links added into the recipe and article text */
body .breakdance .dw-rp-method-list a,
body .breakdance .dw-bp-check-list a,
body .breakdance .dw-rp-prose a {
  color: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--dw-gold);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color 0.2s ease;
}
body .breakdance .dw-rp-method-list a:hover,
body .breakdance .dw-bp-check-list a:hover,
body .breakdance .dw-rp-prose a:hover { text-decoration-color: currentColor; }
body .breakdance .dw-rp-ingredients .bde-heading.dw-rp-card-title { color: var(--dw-bone); }
body .breakdance .dw-rp-ing-list { margin-top: var(--dw-s2); }
/* two columns of ingredients keep the card short, so less of the photograph is covered */
body .breakdance .dw-rp-ing-list ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 2rem; }
body .breakdance .dw-rp-ing-list li {
  position: relative; break-inside: avoid; padding: 0.7em 0 0.7em 1.4rem; border-bottom: 1px solid var(--dw-bone-20);
  font-size: 1rem; line-height: 1.4; color: var(--dw-bone);
}
body .breakdance .dw-rp-ing-list li::before {
  content: ""; position: absolute; left: 0.1rem; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--dw-gold);
}
body .breakdance .dw-rp-method {
  display: flex; flex-direction: column; align-items: stretch;
  background: rgba(246, 241, 232, 0.96); color: var(--dw-ink); border-radius: 20px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem); box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.7);
}
body .breakdance .dw-rp-method .bde-heading.dw-rp-card-title { color: var(--dw-ink); }
body .breakdance .dw-rp-method-list { margin-top: var(--dw-s3); }
body .breakdance .dw-rp-method-list ol { margin: 0; padding: 0; list-style: none; counter-reset: dw-rp; }
body .breakdance .dw-rp-method-list li {
  counter-increment: dw-rp; position: relative; padding: 0 0 1em 2.6rem; margin: 0;
  font-size: 0.98rem; line-height: 1.7; color: var(--dw-rp-text);
}
body .breakdance .dw-rp-method-list li:last-child { padding-bottom: 0; }
body .breakdance .dw-rp-method-list li::before {
  content: counter(dw-rp); position: absolute; left: 0; top: 0.05em; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--dw-ink); color: var(--dw-bone); font-weight: 700; font-size: 0.82rem; line-height: 1;
}
/* a thin rail joining the numbers, so the steps read as one sequence */
body .breakdance .dw-rp-method-list li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(0.875rem - 0.5px); top: 1.95em; bottom: 0.2em; width: 1px; background: var(--dw-line-strong);
}

/* 4 — health benefits: maroon tiles, laid out wide — three across, then two */
body .breakdance .bde-section.dw-rp-props { background: var(--dw-bone); padding-top: var(--dw-s5); }
body .breakdance .dw-rp-props-row {
  width: min(72rem, 100% - 2 * var(--dw-gutter)); margin: var(--dw-s4) auto 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; align-items: stretch;
}
body .breakdance .dw-rp-prop { grid-column: span 2; }
body .breakdance .dw-rp-prop:nth-child(n + 4) { grid-column: span 3; }
/* six tiles: two even rows of three */
body .breakdance .dw-rp-props-row--six .dw-rp-prop:nth-child(n + 4) { grid-column: span 2; }
/* four tiles: two even rows of two */
body .breakdance .dw-rp-props-row--four .dw-rp-prop { grid-column: span 3; }
body .breakdance .dw-rp-prop {
  position: relative; overflow: hidden; height: 100%;
  display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start;
  background: var(--dw-ink); border-radius: 16px; padding: 1.5rem 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 24px 44px -34px rgba(27, 5, 8, 0.8);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, background 0.3s ease;
}
/* gold bar that sweeps along the top on hover */
body .breakdance .dw-rp-prop::before {
  content: ""; position: absolute; left: 0; right: 100%; top: 0; height: 3px; background: var(--dw-gold);
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-rp-prop:hover {
  transform: translateY(-5px); background: var(--dw-ink-soft);
  box-shadow: 0 34px 56px -30px rgba(27, 5, 8, 0.85);
}
body .breakdance .dw-rp-prop:hover::before { right: 0; }
body .breakdance .bde-text.dw-rp-prop-no {
  font-family: var(--dw-display); font-weight: 700; font-size: 2rem; line-height: 1; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px var(--dw-bone-55); transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}
body .breakdance .dw-rp-prop:hover .bde-text.dw-rp-prop-no { color: var(--dw-gold); -webkit-text-stroke-color: var(--dw-gold); }
body .breakdance .dw-rp-prop-text { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
body .breakdance .bde-heading.dw-rp-prop-title { margin: 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--dw-bone); }
body .breakdance .bde-text.dw-rp-prop-body { margin-top: 0.5rem; font-size: 0.93rem; line-height: 1.65; color: var(--dw-bone-80); }

/* FAQ under a post: native <details> rows; the question is an H3, a maroon disc turns into a minus */
body .breakdance .bde-section.dw-rp-faq { background: var(--dw-bone); padding-top: var(--dw-s5); --dw-rp-text: #161616; }
body .breakdance .dw-faq { width: 100%; margin-top: var(--dw-s4); border-top: 1px solid var(--dw-line-strong); }
body .breakdance .dw-faq .dw-faq-item { border-bottom: 1px solid var(--dw-line-strong); }
body .breakdance .dw-faq summary {
  position: relative; display: block; list-style: none; cursor: pointer; padding: 1.25rem 3.5rem 1.25rem 0;
  -webkit-tap-highlight-color: transparent;
}
body .breakdance .dw-faq summary::-webkit-details-marker { display: none; }
body .breakdance .dw-faq summary h3 {
  margin: 0; font-family: var(--dw-display); font-weight: 600; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.35;
  color: var(--dw-ink); transition: color 0.2s ease;
}
body .breakdance .dw-faq summary:hover h3 { color: var(--dw-must); }
body .breakdance .dw-faq summary::before,
body .breakdance .dw-faq summary::after {
  content: ""; position: absolute; right: 0.95rem; top: 50%; width: 0.8rem; height: 2px; margin-top: -1px; background: var(--dw-bone);
  z-index: 1; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-faq summary::after { transform: rotate(90deg); }
body .breakdance .dw-faq .dw-faq-item[open] summary::after { transform: rotate(0deg); }
/* the disc behind the plus/minus */
body .breakdance .dw-faq summary h3::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 2.7rem; height: 2.7rem; margin-top: -1.35rem; border-radius: 50%;
  background: var(--dw-ink); transition: background 0.2s ease;
}
body .breakdance .dw-faq summary:hover h3::after { background: var(--dw-must); }
body .breakdance .dw-faq summary:focus-visible { outline: 3px solid var(--dw-gold); outline-offset: 4px; }
body .breakdance .dw-faq .dw-faq-a { padding: 0 3.5rem 1.4rem 0; }
body .breakdance .dw-faq .dw-faq-a p {
  margin: 0; font-size: 1rem; line-height: 1.75; color: var(--dw-rp-text);
  text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto;
}

/* bottling post — three conditions laid out as on the live site: 1 | 2, then photo | 3 */
body .breakdance .dw-bp-conds {
  width: 100%; margin-top: var(--dw-s5);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--dw-s5) clamp(2rem, 5vw, 4.5rem);
  grid-template-areas: "c1 c2" "img c3"; align-items: start;
}
body .breakdance .dw-bp-conds > * { min-width: 0; }
body .breakdance .dw-bp-cond--1 { grid-area: c1; }
body .breakdance .dw-bp-cond--2 { grid-area: c2; }
body .breakdance .dw-bp-cond--3 { grid-area: c3; }
body .breakdance .dw-bp-cond-photo { grid-area: img; align-self: center; }
body .breakdance .dw-bp-cond-photo .dw-rp-step-img img { aspect-ratio: 1; }
/* the "how do I check?" question and its answers sit in a light box under each condition */
body .breakdance .dw-bp-check {
  margin-top: var(--dw-s3); display: flex; flex-direction: column; align-items: stretch;
  background: var(--dw-paper); border-left: 4px solid var(--dw-gold); border-radius: 14px;
  padding: 1.2rem 1.4rem 1.3rem; box-shadow: 0 22px 44px -34px rgba(66, 14, 26, 0.55);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
body .breakdance .dw-bp-check:hover { transform: translateY(-3px); box-shadow: 0 30px 54px -34px rgba(66, 14, 26, 0.7); }
body .breakdance .bde-heading.dw-bp-check-q { margin: 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.02rem; line-height: 1.35; color: var(--dw-ink); }
body .breakdance .dw-bp-check-list { margin-top: 0.7rem; }
body .breakdance .dw-bp-check-list ul { margin: 0; padding: 0; list-style: none; }
body .breakdance .dw-bp-check-list li {
  position: relative; margin: 0; padding: 0.55em 0 0.55em 1.8rem; border-top: 1px solid var(--dw-line);
  font-size: 0.96rem; line-height: 1.65; color: var(--dw-rp-text);
  text-align: justify; text-align-last: left; -webkit-hyphens: auto; hyphens: auto;
}
body .breakdance .dw-bp-check-list li:first-child { border-top: 0; }
/* a small maroon tick instead of the ❖ glyph */
body .breakdance .dw-bp-check-list li::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.95em; width: 0.45rem; height: 0.8rem;
  border-right: 2px solid var(--dw-ink); border-bottom: 2px solid var(--dw-ink); transform: rotate(40deg);
}
body .breakdance .dw-bp-check-list strong { color: var(--dw-ink); font-weight: 600; }

/* cherry post — two H2 sections before the recipe; the second one needs air above it */
body .breakdance .dw-ws-pre .dw-rp-prep-intro + .bde-heading.dw-ws-h2 { margin-top: var(--dw-s6); }

/* fermentation post — two stages side by side, then three question rows */
body .breakdance .dw-fm-sec + .dw-fm-sec { padding-top: 0; }
body .breakdance .dw-fm-stages {
  width: 100%; margin-top: var(--dw-s4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: stretch;
}
body .breakdance .dw-fm-stages > * { min-width: 0; }
body .breakdance .dw-fm-stage {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: stretch;
  border-radius: 20px; padding: clamp(1.5rem, 2.8vw, 2.2rem);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
body .breakdance .dw-fm-stage::before {
  content: ""; position: absolute; left: 0; right: 100%; top: 0; height: 3px; background: var(--dw-gold);
  transition: right 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-fm-stage:hover { transform: translateY(-5px); }
body .breakdance .dw-fm-stage:hover::before { right: 0; }
/* the lively stage in maroon, the calm one on paper */
body .breakdance .dw-fm-stage--storm { background: var(--dw-ink); box-shadow: 0 34px 60px -38px rgba(27, 5, 8, 0.85); }
body .breakdance .dw-fm-stage--quiet { background: var(--dw-paper); box-shadow: 0 30px 56px -40px rgba(66, 14, 26, 0.55); }
body .breakdance .dw-fm-stage-top { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; }
body .breakdance .bde-text.dw-fm-stage-no { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold); }
body .breakdance .bde-text.dw-fm-stage-time {
  padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; line-height: 1.3;
}
body .breakdance .dw-fm-stage--storm .bde-text.dw-fm-stage-time { background: var(--dw-bone-20); color: var(--dw-bone); }
body .breakdance .dw-fm-stage--quiet .bde-text.dw-fm-stage-time { background: rgba(66, 14, 26, 0.08); color: var(--dw-ink); }
body .breakdance .bde-heading.dw-fm-stage-title {
  margin: 0.9rem 0 0; font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.2;
}
body .breakdance .dw-fm-stage--storm .bde-heading.dw-fm-stage-title { color: var(--dw-bone); }
body .breakdance .dw-fm-stage--quiet .bde-heading.dw-fm-stage-title { color: var(--dw-ink); }
body .breakdance .dw-fm-stage-body { margin-top: var(--dw-s3); font-size: 1rem; line-height: 1.75; }
body .breakdance .dw-fm-stage--storm .dw-fm-stage-body { color: var(--dw-bone); }

body .breakdance .dw-fm-rows { width: 100%; margin-top: var(--dw-s4); display: flex; flex-direction: column; align-items: stretch; }
body .breakdance .dw-fm-row {
  display: grid; grid-template-columns: minmax(0, 17rem) 1fr; gap: clamp(1rem, 4vw, 3.5rem); align-items: start;
  padding: var(--dw-s4) 0; border-top: 1px solid var(--dw-line);
}
body .breakdance .dw-fm-row:last-child { border-bottom: 1px solid var(--dw-line); }
body .breakdance .dw-fm-row > * { min-width: 0; }
body .breakdance .dw-fm-row-head { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.9rem; align-items: start; }
body .breakdance .bde-text.dw-fm-row-no {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--dw-ink); color: var(--dw-ink); font-family: var(--dw-display); font-weight: 700; font-size: 1rem;
  transition: background 0.3s ease, color 0.3s ease;
}
body .breakdance .dw-fm-row:hover .bde-text.dw-fm-row-no { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .bde-heading.dw-fm-row-title {
  margin: 0.3rem 0 0; font-family: var(--dw-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.28rem); line-height: 1.3; color: var(--dw-ink);
}
@media (max-width: 880px) {
  body .breakdance .dw-fm-stages { grid-template-columns: 1fr; }
  body .breakdance .dw-fm-row { grid-template-columns: 1fr; gap: var(--dw-s2); }
}

/* dandelion post — "when to pick" text beside the photo, as on the live site */
body .breakdance .dw-mn-collect {
  width: 100%; margin-top: var(--dw-s4);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
body .breakdance .dw-mn-collect > * { min-width: 0; }
body .breakdance .dw-mn-collect .dw-rp-step-img img { aspect-ratio: 4 / 5; }
/* one-line tile texts: justifying them only opens gaps between words */
body .breakdance .dw-rp-props-row--six .bde-text.dw-rp-prop-body { text-align: left; }
/* section order differs from the strawberry post: text → tiles → photo band → author */
body .breakdance .dw-rp-prep + .dw-rp-props { padding-top: 0; }
body .breakdance .bde-section.dw-rp-recipe + .bde-section.dw-rp-author-band { padding-top: var(--dw-band); }
@media (max-width: 880px) {
  body .breakdance .dw-mn-collect { grid-template-columns: 1fr; }
  body .breakdance .dw-mn-collect .dw-rp-step-img img { aspect-ratio: 16 / 10; }
}

/* clarification post — "Warto pamiętać…" closings in a framed box, the duration as a maroon card */
body .breakdance .dw-cl-note {
  width: 100%; margin-top: var(--dw-s4); display: flex; flex-direction: column; align-items: stretch;
  background: var(--dw-paper); border-left: 4px solid var(--dw-gold); border-radius: 14px;
  padding: 1.3rem 1.6rem; box-shadow: 0 22px 44px -34px rgba(66, 14, 26, 0.55);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
body .breakdance .dw-cl-note:hover { transform: translateY(-3px); box-shadow: 0 30px 54px -34px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-cl-note .dw-rp-prose { font-weight: 500; }
body .breakdance .dw-cl-dur {
  width: 100%; margin-top: var(--dw-s4);
  display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  background: var(--dw-ink); border-radius: 20px; padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: 0 34px 60px -38px rgba(27, 5, 8, 0.85);
}
body .breakdance .dw-cl-dur > * { min-width: 0; }
body .breakdance .dw-cl-dur-head { display: flex; flex-direction: column; align-items: stretch; }
body .breakdance .bde-heading.dw-cl-dur-q { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold); }
body .breakdance .bde-text.dw-cl-dur-value {
  margin-top: 0.7rem; font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.2; color: var(--dw-bone);
}
body .breakdance .dw-cl-dur-body { color: var(--dw-bone); font-size: 1rem; }
body .breakdance .dw-cl-after { margin-top: var(--dw-s4); }
@media (max-width: 880px) {
  body .breakdance .dw-cl-dur { grid-template-columns: 1fr; }
}

/* "5 mistakes" post — one mistake after another, as on the live site; the number sits in a
   left rail and stays in view while its section scrolls past */
body .breakdance .dw-bd-list { gap: 0; align-items: stretch; }
body .breakdance .dw-bd-error {
  width: 100%; display: grid; grid-template-columns: 7.5rem 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start;
  padding: var(--dw-s6) 0; border-top: 1px solid var(--dw-line);
}
body .breakdance .dw-bd-error:first-child { border-top: 0; padding-top: 0; }
body .breakdance .dw-bd-error > * { min-width: 0; }
body .breakdance .dw-bd-rail { position: sticky; top: calc(var(--dw-header-h) + var(--dw-s4)); }
body .breakdance .bde-text.dw-bd-no {
  font-family: var(--dw-display); font-weight: 700; font-size: clamp(3.2rem, 6vw, 5rem); line-height: 0.9; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.5px var(--dw-ink); transition: color 0.4s ease;
}
body .breakdance .dw-bd-error:hover .bde-text.dw-bd-no { color: var(--dw-ink); }
body .breakdance .dw-bd-body { display: flex; flex-direction: column; align-items: stretch; }
/* replaces the ⛔ of the live headings: a small red label says what the section is */
body .breakdance .bde-text.dw-bd-kicker {
  align-self: flex-start; padding: 0.3rem 0.75rem; border-radius: 999px; background: rgba(200, 50, 60, 0.12);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b3262f;
}
body .breakdance .bde-heading.dw-bd-title { margin-top: 0.8rem; }
body .breakdance .dw-bd-prose { margin-top: var(--dw-s3); }
/* sub-heading: on the live site it began with 🍷 — a drawn glass keeps the idea */
body .breakdance .bde-heading.dw-bd-sub {
  position: relative; margin: var(--dw-s4) 0 0; padding-left: 1.7rem;
  font-family: var(--dw-display); font-weight: 600; font-size: clamp(1.08rem, 1.6vw, 1.25rem); line-height: 1.35; color: var(--dw-ink);
}
body .breakdance .bde-heading.dw-bd-sub::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.15em; width: 0.85rem; height: 0.7rem;
  border-radius: 0 0 0.5rem 0.5rem; background: var(--dw-ink);
}
body .breakdance .bde-heading.dw-bd-sub::after {
  content: ""; position: absolute; left: 0.49rem; top: 0.85em; width: 2px; height: 0.45rem; background: var(--dw-ink);
  box-shadow: -3px 0.42rem 0 -0.5px var(--dw-ink), 3px 0.42rem 0 -0.5px var(--dw-ink);
}
body .breakdance .dw-bd-box { margin-top: var(--dw-s4); }
body .breakdance .dw-bd-box .bde-heading.dw-bp-check-q { font-size: 1.08rem; }
body .breakdance .bde-text.dw-bd-box-lead { font-size: 0.98rem; line-height: 1.6; color: var(--dw-rp-text); font-weight: 500; }

/* ---------- interactive table of contents: maroon box, cream type ---------- */
body .breakdance .dw-toc2 {
  width: 100%; margin-top: var(--dw-s4);
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--dw-ink); border-left: 4px solid var(--dw-gold); border-radius: 14px;
  padding: 1.1rem 1.5rem 1.3rem; box-shadow: 0 26px 50px -34px rgba(27, 5, 8, 0.8);
}
body .breakdance .dw-toc2-head {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; cursor: pointer; user-select: none;
}
body .breakdance .bde-text.dw-toc2-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-bone); }
body .breakdance .bde-text.dw-toc2-toggle {
  position: relative; padding-right: 1.1rem; font-size: 0.78rem; font-weight: 600; color: var(--dw-bone-80);
}
body .breakdance .bde-text.dw-toc2-toggle::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 7px; height: 7px; margin-top: -2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(-135deg);
  transition: transform 0.3s ease;
}
body .breakdance .dw-toc2.is-collapsed .bde-text.dw-toc2-toggle::after { transform: translateY(-70%) rotate(45deg); }
/* two columns on wide screens keep the box short. CSS columns, not grid: they fill top to bottom,
   so the list still reads in order (a grid would zigzag across the columns) */
body .breakdance .dw-toc2-list {
  margin-top: 0.8rem; display: block; column-count: 2; column-gap: 2.5rem;
  overflow: hidden; max-height: 40rem; transition: max-height 0.4s ease, margin 0.3s ease, opacity 0.3s ease;
}
body .breakdance .dw-toc2-list > * { break-inside: avoid; }
body .breakdance .dw-toc2.is-collapsed .dw-toc2-list { max-height: 0; margin-top: 0; opacity: 0; }
body .breakdance .bde-text-link.dw-toc2-link,
body .dw-toc-float .dw-toc2-link {
  position: relative; display: block; padding: 0.4rem 0 0.4rem 1rem; font-size: 0.95rem; line-height: 1.4; font-weight: 600;
  color: var(--dw-bone); text-decoration: none; border-left: 2px solid transparent; transition: color 0.2s ease, border-color 0.2s ease, padding-left 0.25s ease;
}
body .breakdance .bde-text-link.dw-toc2-link--sub,
body .dw-toc-float .dw-toc2-link--sub { padding-left: 2rem; font-size: 0.9rem; font-weight: 400; color: var(--dw-bone-80); }
body .breakdance .bde-text-link.dw-toc2-link:hover,
body .dw-toc-float .dw-toc2-link:hover { color: var(--dw-gold); padding-left: 1.3rem; }
body .breakdance .bde-text-link.dw-toc2-link--sub:hover,
body .dw-toc-float .dw-toc2-link--sub:hover { padding-left: 2.3rem; }
/* the section currently on screen */
body .breakdance .bde-text-link.dw-toc2-link.is-active,
body .dw-toc-float .dw-toc2-link.is-active { color: var(--dw-bone); border-left-color: var(--dw-gold); }

/* the in-page box can be switched off; its links then feed only the floating button */
body .breakdance .dw-toc2.dw-toc2--source { display: none; }

/* floating button + panel (appended to <body> by script.js, outside .breakdance) — bottom-left */
body .dw-toc-fab {
  position: fixed; left: 1.5rem; bottom: 1.5rem; z-index: 45;
  display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.15rem; border: 0; border-radius: 999px;
  background: var(--dw-ink); color: var(--dw-bone); font-family: var(--dw-sans); font-size: 0.85rem; font-weight: 600;
  box-shadow: 0 16px 36px -14px rgba(27, 5, 8, 0.7); cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
body .dw-toc-fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
body .dw-toc-fab:hover { background: var(--dw-ink-soft); }
body .dw-toc-fab:focus-visible { outline: 3px solid var(--dw-gold); outline-offset: 3px; }
body .dw-toc-fab-bars { display: inline-flex; flex-direction: column; gap: 3px; }
body .dw-toc-fab-bars i { display: block; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
body .dw-toc-fab-bars i:nth-child(2) { width: 10px; }
body .dw-toc-float {
  position: fixed; left: 1.5rem; bottom: 5rem; z-index: 46; width: min(23rem, calc(100vw - 3rem)); max-height: 70vh; overflow-y: auto;
  background: var(--dw-ink); border-left: 4px solid var(--dw-gold); border-radius: 14px;
  padding: 1rem 1rem 1.1rem; box-shadow: 0 30px 60px -24px rgba(27, 5, 8, 0.7); font-family: var(--dw-sans);
  opacity: 0; transform: translateY(10px) scale(0.98); transform-origin: bottom left; pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
body .dw-toc-float.is-open { opacity: 1; transform: none; pointer-events: auto; }
body .dw-toc-float-title { margin: 0 0 0.5rem 1rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold); }

/* 5 — author: framed photo overlapped by the bio card */
body .breakdance .bde-section.dw-rp-author-band { background: var(--dw-bone); padding-top: 0; }
body .breakdance .dw-rp-author {
  width: min(60rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: center;
}
body .breakdance .dw-rp-author > * { min-width: 0; }
body .breakdance .dw-rp-author-photo { position: relative; z-index: 1; border: 6px solid var(--dw-ink); border-radius: 14px; overflow: hidden; }
body .breakdance .dw-rp-author-img,
body .breakdance .dw-rp-author-img figure,
body .breakdance .dw-rp-author-img .breakdance-image-container,
body .breakdance .dw-rp-author-img .breakdance-image-clip { width: 100%; margin: 0; }
body .breakdance .dw-rp-author-img img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
body .breakdance .dw-rp-author-card {
  position: relative; z-index: 2; margin-left: -3.5rem;
  display: flex; flex-direction: column; align-items: flex-start;
  background: #fff; border-radius: 16px; padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: 0 40px 80px -46px rgba(66, 14, 26, 0.6); border-top: 4px solid var(--dw-ink);
}
/* the author's name is plain text now (not an H2): it is not part of the article's outline */
body .breakdance .dw-rp-author-name { margin: 0.5rem 0 0; line-height: 1.2; font-family: var(--dw-display); font-weight: 700; font-size: 1.6rem; color: var(--dw-ink); }
body .breakdance .bde-text.dw-rp-author-bio { margin-top: var(--dw-s2); font-size: 0.96rem; line-height: 1.75; color: var(--dw-rp-text); }
body .breakdance .dw-rp-author-social { margin-top: var(--dw-s3); }
body .breakdance .dw-social--card .bde-social-icons__icon-wrapper { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-social--card .bde-social-icons__icon-wrapper:hover { background: var(--dw-must); border-color: var(--dw-must); color: var(--dw-bone); }

/* 6 — more posts on the vineyard photograph */
body .breakdance .bde-section.dw-rp-more {
  position: relative; overflow: hidden; isolation: isolate; background: var(--dw-night);
  padding: clamp(4.5rem, 9vw, 7.5rem) 0;
}
body .breakdance .bde-section.dw-rp-more > .section-container { position: static; }
body .breakdance .dw-rp-more-photo { position: absolute; inset: 0; z-index: -2; }
body .breakdance .dw-rp-more-img,
body .breakdance .dw-rp-more-img figure,
body .breakdance .dw-rp-more-img .breakdance-image-container,
body .breakdance .dw-rp-more-img .breakdance-image-clip { width: 100%; height: 100%; margin: 0; }
body .breakdance .dw-rp-more-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
/* no darkening over the vineyard photograph — the heading turns maroon to stay legible on it instead */
body .breakdance .dw-rp-more-inner {
  width: min(72rem, 100% - 2 * var(--dw-gutter)); margin-inline: auto;
  display: flex; flex-direction: column; align-items: stretch;
}
body .breakdance .dw-rp-more-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--dw-s5); }
body .breakdance .bde-heading.dw-rp-more-title { margin: 0; font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.8rem); color: var(--dw-ink); }
body .breakdance .bde-text.dw-rp-more-sub { margin-top: var(--dw-s2); font-size: 1.1rem; font-weight: 600; color: var(--dw-ink); }
/* .bde-div is a flex column, so centring is align-items, not justify-content */
body .breakdance .dw-rp-more-actions { display: flex; flex-direction: column; align-items: center; margin-top: var(--dw-s5); }
/* on a photograph the cards need their own ground */
body .breakdance .dw-postlist--onphoto .ee-post { background: var(--dw-paper); border-radius: 16px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.8); }
body .breakdance .dw-postlist--onphoto .ee-post-wrap { padding: 1.25rem 1.4rem 1.5rem; }
/* ---------- Focus, skip link, reduced motion ---------- */
body .breakdance .bde-text-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
body .bde-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--dw-ink); color: var(--dw-bone); padding: 0.6rem 1rem; }
body .bde-skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  body .breakdance .dw-reveal,
  body .breakdance .dw-hero-text .bde-text,
  body .breakdance .dw-hero-text .bde-heading,
  body .breakdance .dw-hero-text .bde-button { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  body .breakdance .dw-hero .dw-photo img { animation: none !important; }
  body .breakdance .dw-om-hero-img img { transform: scale(1.07) !important; }
  body .breakdance .dw-om-credo-img img,
  body .breakdance .dw-om-contact-img img,
  body .breakdance .dw-om-credo-veil,
  body .breakdance .dw-om-tile { transition: none !important; }
  body .breakdance .dw-om-credo-veil { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body .breakdance .dw-perks { grid-template-columns: repeat(2, 1fr); }
  body .breakdance .dw-posts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  :root { --dw-header-h: 4.75rem; }
  body .breakdance .dw-logo-img img { height: 2.6rem; }
  /* the slide-in panel is pinned to --dw-header-h, so the bar must not change height here */
  body .breakdance .dw-header.is-shrunk .dw-header-row { min-height: var(--dw-header-h); }
  body .breakdance .dw-header.is-shrunk .dw-logo-img img { height: 2.6rem; }
  /* The photo stays a full-bleed background on phones too — previously it became a block
     of its own and the type dropped onto the bare dark section below it. The scrim turns
     vertical (dark at the bottom, where the text sits) instead of sweeping in from the right. */
  body .breakdance .bde-section.dw-hero { min-height: clamp(32rem, 115vw, 44rem); padding-top: 0; }
  body .breakdance .dw-hero .dw-photo { position: absolute; inset: 0; z-index: -1; height: auto; min-height: 0; max-height: none; }
  body .breakdance .dw-hero .dw-photo img { object-position: 47% 50%; }
  /* no maroon gradient on phones (his call, 27 Sept 2026): the photo stays clean and the text
     carries the same maroon outline + dark halo as the "O mnie" hero instead */
  body .breakdance .bde-section.dw-hero::after { display: none; }
  body .breakdance .dw-hero-text .bde-heading.dw-h1 {
    -webkit-text-stroke: 2px var(--dw-ink); paint-order: stroke fill;
    text-shadow: 0 1px 2px rgba(27, 5, 8, 0.9), 0 2px 8px rgba(27, 5, 8, 0.75), 0 4px 26px rgba(27, 5, 8, 0.7);
  }
  body .breakdance .dw-hero-text .bde-text {
    -webkit-text-stroke: 0.5px var(--dw-ink); paint-order: stroke fill;
    text-shadow: 0 1px 3px rgba(27, 5, 8, 0.9), 0 2px 12px rgba(27, 5, 8, 0.85);
  }
  body .breakdance .bde-section.dw-hero > .section-container {
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: clamp(32rem, 115vw, 44rem);
  }
  body .breakdance .dw-hero-text {
    width: auto; margin: 0; justify-content: flex-end;
    padding: calc(var(--dw-header-h) + var(--dw-s5)) var(--dw-gutter) var(--dw-s6);
  }
  body .breakdance .bde-heading.dw-h1 { font-size: clamp(1.65rem, 7vw, 2.45rem); max-width: none; }
  body .breakdance .bde-text.dw-tagline { font-size: clamp(0.88rem, 3.7vw, 1.15rem); }
  body .breakdance .bde-text.dw-tagline::before { width: 2.25rem; }
  body .breakdance .dw-hero-text .bde-button .button-atom {
    font-size: 0.95rem; box-shadow: none; padding: 0.55rem 0.55rem 0.55rem 1.4rem; gap: 0.85rem;
  }
  body .breakdance .dw-hero-text .bde-button .button-atom::after { width: 2.1rem; height: 2.1rem; }
  body .breakdance .dw-steps { grid-template-columns: 1fr; }
  body .breakdance .dw-me-split { grid-template-columns: 1fr; gap: var(--dw-s6); }
  body .breakdance .dw-me-portrait { max-width: 24rem; }

  /* --- About page on one column --- */
  /* the blog-sized band is too shallow for stacked type, so the hero grows a little
     and the scrim turns even: the type then sits over the whole picture */
  body .breakdance .bde-section.dw-om-hero {
    padding: calc(var(--dw-header-h) + var(--dw-s6)) 0 var(--dw-s6);
  }

  body .breakdance .dw-om-credo-inner,
  body .breakdance .dw-om-contact-inner { grid-template-columns: 1fr; gap: var(--dw-s6); }
  body .breakdance .dw-om-credo-photo { max-width: 22rem; }
  /* the veil has nothing to hover on a phone, so the slogan simply stays visible */
  body .breakdance .dw-om-credo-veil { opacity: 1; transform: none; }
  /* a 12rem index column leaves too little for the text once the viewport narrows */
  /* four tiles abreast get too narrow below 960px */
  body .breakdance .dw-om-steps { grid-template-columns: repeat(2, 1fr); }
  body .breakdance .dw-toc2-list { column-count: 1; }
  /* recipe post: columns stack; steps then read straight 1→5 */
  body .breakdance .dw-rp-steps { grid-template-columns: 1fr; gap: var(--dw-s5); }
  body .breakdance .dw-rp-recipe-inner { grid-template-columns: 1fr; }
  /* bottling conditions: one column, in reading order, the photo last */
  body .breakdance .dw-bp-conds { grid-template-columns: 1fr; grid-template-areas: "c1" "c2" "c3" "img"; }
  body .breakdance .dw-bp-cond-photo { max-width: 26rem; }
  /* mistakes: the number moves above its section and stops sticking */
  body .breakdance .dw-bd-error { grid-template-columns: 1fr; gap: 0.6rem; padding: var(--dw-s5) 0; }
  body .breakdance .dw-bd-rail { position: static; }
  body .breakdance .bde-text.dw-bd-no { font-size: 3rem; }
  /* health tiles: two per row on tablets, the last one full width */
  body .breakdance .dw-rp-props-row { grid-template-columns: 1fr 1fr; }
  body .breakdance .dw-rp-prop,
  body .breakdance .dw-rp-prop:nth-child(n + 4) { grid-column: span 1; }
  body .breakdance .dw-rp-prop:last-child { grid-column: 1 / -1; }
  body .breakdance .dw-rp-props-row--six .dw-rp-prop:nth-child(n + 4),
  body .breakdance .dw-rp-props-row--six .dw-rp-prop:last-child { grid-column: span 1; }
  body .breakdance .dw-rp-author { grid-template-columns: 1fr; max-width: 32rem; }
  body .breakdance .dw-rp-author-card { margin: -2.5rem 1rem 0; }
  body .breakdance .dw-about { grid-template-columns: 1fr; gap: var(--dw-s6); }
  body .breakdance .dw-about-media { max-width: 34rem; }
  /* footer: the brand takes a full row, the three link columns share the next one */
  body .breakdance .dw-footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .breakdance .dw-footer-brand { grid-column: 1 / -1; }
  body .breakdance .bde-section.dw-band::after { right: -4rem; bottom: -4rem; opacity: 0.06; }
  body .breakdance .dw-band-inner { grid-template-columns: 1fr; gap: var(--dw-s5); }
}
@media (max-width: 880px) {
  /* The menu becomes a maroon panel that slides in below the bar, so the cream bar with the
     logo and the close button stays put and the page never jumps. */
  body .breakdance .dw-header-row { gap: 1rem; }
  body .breakdance .dw-burger { display: block; }
  body .breakdance .dw-nav {
    position: fixed; top: var(--dw-header-h); left: 0; right: 0; bottom: 0; z-index: 60;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: var(--dw-s5) var(--dw-gutter) var(--dw-s6);
    background: var(--dw-ink);
    transform: translateX(100%); visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.4s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  body .breakdance .dw-header.is-open .dw-nav { transform: none; visibility: visible; transition-delay: 0s; }
  body .breakdance .dw-header.is-open .dw-header-row { min-height: var(--dw-header-h); }

  body .breakdance .dw-nav .bde-text-link.dw-nav-link {
    font-size: 1.4rem; letter-spacing: 0.02em; text-transform: none; font-weight: 500;
    color: var(--dw-bone); padding: 1.15rem 0; border-bottom: 1px solid var(--dw-bone-20);
    /* links fade up one after another once the panel has arrived */
    opacity: 0; transform: translateY(14px); transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
  }
  body .breakdance .dw-header.is-open .dw-nav .bde-text-link.dw-nav-link { opacity: 1; transform: none; }
  body .breakdance .dw-header.is-open .dw-nav .bde-text-link.dw-nav-link:nth-child(1) { transition-delay: 0.12s; }
  body .breakdance .dw-header.is-open .dw-nav .bde-text-link.dw-nav-link:nth-child(2) { transition-delay: 0.19s; }
  body .breakdance .dw-header.is-open .dw-nav .bde-text-link.dw-nav-link:nth-child(3) { transition-delay: 0.26s; }
  body .breakdance .dw-nav .bde-text-link.dw-nav-link::after { background: var(--dw-gold); bottom: -1px; height: 2px; }
  body .breakdance .dw-nav .bde-text-link.dw-nav-link:hover { color: var(--dw-bone); }
  body .breakdance .dw-nav .bde-text-link.dw-nav-link:hover::after { background: var(--dw-gold); }
  body .breakdance .dw-nav .bde-text-link.dw-nav-link.is-current { color: var(--dw-gold); }
  body .breakdance .dw-nav .bde-text-link.dw-nav-link:focus-visible { outline-color: var(--dw-bone); }

  body .breakdance .dw-nav-social {
    margin-top: auto; padding: var(--dw-s5) 0 0; border-left: 0; gap: 0.8rem;
    opacity: 0; transition: opacity 0.3s ease;
  }
  /* the element centres its icons by default; here they line up with the menu links */
  body .breakdance .dw-nav-social .dw-social { justify-content: flex-start; width: 100%; gap: 0.8rem; }
  body .breakdance .dw-header.is-open .dw-nav-social { opacity: 1; transition-delay: 0.32s; }
  /* icons inside the maroon menu panel only — scoped to .dw-nav-social, otherwise these colours
     leaked into the footer (cream glyph on a cream disc = invisible) */
  body .breakdance .dw-nav-social .dw-social .bde-social-icons__icon-wrapper {
    width: 3rem; height: 3rem; color: var(--dw-bone); border-color: var(--dw-bone-20);
  }
  body .breakdance .dw-nav-social .dw-social .bde-social-icons__icon-wrapper svg { width: 1.2rem; height: 1.2rem; }
  body .breakdance .dw-nav-social .dw-social .bde-social-icons__icon-wrapper:hover {
    background: var(--dw-bone); border-color: var(--dw-bone); color: var(--dw-ink);
  }
  /* footer icons on phones: same size as in the menu, colours stay cream disc + maroon glyph */
  body .breakdance .dw-social--footer .bde-social-icons__icon-wrapper { width: 3rem; height: 3rem; }
  body .breakdance .dw-social--footer .bde-social-icons__icon-wrapper svg { width: 1.2rem; height: 1.2rem; }
}
/* scrolling behind the open panel would be disorienting on a phone */
body.dw-menu-open { overflow: hidden; }
@media (max-width: 680px) {
  body .breakdance .dw-perks { grid-template-columns: 1fr; }
  body .breakdance .dw-posts { grid-template-columns: 1fr; }
  /* footer on phones, kept short:
     - contact strip: title + full-width button, the extra sentence hidden,
     - brand: logo and social icons on one row, slogan under them, the blog blurb hidden,
     - link columns: tap-to-open rows (script.js adds .dw-acc-ready; without JS all links show),
     - bottom bar: © and "Do góry" on one row, the alcohol note under them.
     minmax(0, …) so nothing can push the page wider than the screen. */
  body .breakdance .bde-section.dw-footer { padding-top: var(--dw-s5); }
  body .breakdance .dw-footer-cta { flex-direction: column; align-items: stretch; gap: var(--dw-s2); padding: 1.25rem 1.25rem 1.35rem; }
  /* the 22rem flex-basis is meant as a width; in a column it would become a 22rem-tall gap */
  body .breakdance .dw-footer-cta-text { flex: 0 0 auto; }
  body .breakdance .bde-text.dw-footer-cta-title { font-size: 1.3rem; }
  body .breakdance .bde-text.dw-footer-cta-sub { display: none; }
  body .breakdance .dw-footer-cta .bde-button,
  body .breakdance .dw-footer-cta .bde-button .button-atom { width: 100%; justify-content: center; }

  body .breakdance .dw-footer-main { margin-top: var(--dw-s5); grid-template-columns: minmax(0, 1fr); gap: 0; }
  body .breakdance .dw-footer-brand {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--dw-s2) var(--dw-s3);
    margin-bottom: var(--dw-s4);
  }
  body .breakdance .dw-footer-logo { width: 8rem; }
  body .breakdance .bde-text.dw-footer-about { display: none; }
  body .breakdance .dw-social--footer { margin-top: 0; grid-column: 2; grid-row: 1; }
  body .breakdance .bde-text.dw-footer-tag { grid-column: 1 / -1; margin-top: 0; font-size: 0.95rem; }

  body .breakdance .dw-footer-col { gap: 0; }
  body .breakdance .bde-text.dw-footer-col-title { margin: 0; padding: 1rem 0; }
  body .breakdance .dw-footer.dw-acc-ready .bde-text.dw-footer-col-title {
    position: relative; cursor: pointer; padding-right: 2rem; -webkit-tap-highlight-color: transparent;
  }
  /* chevron that turns when the row opens */
  body .breakdance .dw-footer.dw-acc-ready .bde-text.dw-footer-col-title::after {
    content: ""; position: absolute; right: 0.3rem; top: 50%; width: 0.55rem; height: 0.55rem; margin-top: -0.4rem;
    border-right: 1.5px solid var(--dw-bone); border-bottom: 1.5px solid var(--dw-bone);
    transform: rotate(45deg); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  body .breakdance .dw-footer.dw-acc-ready .dw-footer-col.is-open .bde-text.dw-footer-col-title::after { transform: translateY(0.25rem) rotate(-135deg); }
  body .breakdance .dw-footer.dw-acc-ready .dw-footer-col:not(.is-open) .bde-text-link.dw-footer-link { display: none; }
  body .breakdance .dw-footer-col .bde-text-link.dw-footer-link { padding: 0.45rem 0; }
  body .breakdance .dw-footer-col.is-open { padding-bottom: 0.8rem; }

  body .breakdance .dw-footer-bottom {
    margin-top: var(--dw-s4); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--dw-s2);
    padding: var(--dw-s3) 0;
  }
  body .breakdance .bde-text.dw-copy { grid-column: 1; grid-row: 1; }
  body .breakdance .bde-text-link.dw-totop { grid-column: 2; grid-row: 1; font-size: 0; gap: 0; }
  body .breakdance .bde-text.dw-legal { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 0.74rem; }
  /* everything falls into a single column; the index sits above its own text */
  body .breakdance .dw-om-steps,
  body .breakdance .dw-om-lessons { grid-template-columns: 1fr; }
  body .breakdance .dw-rp-props-row { grid-template-columns: 1fr; }
  body .breakdance .dw-rp-ing-list ul { columns: 1; }
  /* single post: author box stacks, the article gets a touch smaller */
  body .breakdance .dw-post-author { flex-direction: column; align-items: flex-start; }
  body .breakdance .dw-post-body { font-size: 1.02rem; }
  body .breakdance .dw-toc { padding: var(--dw-s3); }
  body .breakdance .dw-om-tiles { grid-template-columns: 1fr; }
  body .breakdance .dw-om-contact-text { flex-direction: column; }
  body .breakdance .dw-om-contact-photo { width: 8rem; }
  body .breakdance .bde-text.dw-legal { text-align: left; }
}

/* ---------- Privacy policy (dw-pp): the post reading column, narrower, sections split by hairlines ---------- */
body .breakdance .dw-pp-wrap { width: min(48rem, 100% - 2 * var(--dw-gutter)); }
body .breakdance .dw-rp-intro:has(+ .dw-pp) .dw-rp-wrap { width: min(48rem, 100% - 2 * var(--dw-gutter)); }
body .breakdance .bde-heading.dw-pp-h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  margin-top: var(--dw-s6); padding-top: var(--dw-s5); border-top: 1px solid rgba(66, 14, 26, 0.14);
}
body .breakdance .bde-heading.dw-pp-h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
body .breakdance .dw-pp .dw-rp-prose { font-size: 1rem; }
body .breakdance .dw-pp .dw-rp-prose strong { font-weight: 600; color: var(--dw-ink); }
body .breakdance .dw-pp .dw-rp-prose ul { margin: 0 0 1.2em; padding-left: 1.3em; }
body .breakdance .dw-pp .dw-rp-prose li { margin-bottom: 0.45em; padding-left: 0.2em; }
body .breakdance .dw-pp .dw-rp-prose li::marker { color: var(--dw-gold); }
body .breakdance .dw-pp .dw-rp-prose ul:last-child { margin-bottom: 0; }

/* two cream sections in a row (home: posts → about, since the newsletter band was dropped):
   one hairline at content width instead of a double band of empty space */
body .breakdance .bde-section.dw-section--cream + .bde-section.dw-section--cream { padding-top: 0; }
body .breakdance .bde-section.dw-section--cream + .bde-section.dw-section--cream::before {
  content: ""; display: block; height: 1px; background: rgba(66, 14, 26, 0.14);
  width: min(var(--dw-wrap), 100% - 2 * var(--dw-gutter)); margin: 0 auto var(--dw-band);
}
/* ---------- posts from the draft generator (files/build-draft.php): H3 subsections inside a prose section ---------- */
body .breakdance .bde-heading.dw-draft-h3 {
  width: 100%; margin-top: var(--dw-s5);
  font-family: var(--dw-display); font-weight: 600; line-height: 1.25;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--dw-ink);
}
body .breakdance .dw-draft-sub { margin-top: var(--dw-s2); }
body .breakdance .dw-rp-prep .dw-rp-prose ul { margin: 0 0 1.2em; padding-left: 1.3em; }
body .breakdance .dw-rp-prep .dw-rp-prose li { margin-bottom: 0.45em; }
body .breakdance .dw-rp-prep .dw-rp-prose li::marker { color: var(--dw-gold); }/* a text section right after the recipe photo band needs its own top spacing (draft generator posts) */
body .breakdance .dw-rp-recipe + .bde-section.dw-rp-prep { padding-top: var(--dw-band); }
/* ---------- draft review box (files/build-draft.php "review"): only in drafts, removed on publish ---------- */
body .breakdance .dw-review {
  width: 100%; margin: 0 0 var(--dw-s5); padding: 1.1rem 1.4rem 1.2rem;
  background: #fff3c4; border: 1px solid #e8c547; border-left: 6px solid #d4a017; border-radius: 12px;
  color: #3d2e00;
}
body .breakdance .bde-text.dw-review-title { font-family: var(--dw-display); font-weight: 700; font-size: 1.05rem; color: #5a4300; }
body .breakdance .dw-review-list ul { margin: 0.6rem 0 0.4rem; padding-left: 1.2em; }
body .breakdance .dw-review-list li { margin-bottom: 0.35em; font-size: 0.95rem; line-height: 1.55; }
body .breakdance .bde-text.dw-review-note { font-size: 0.82rem; opacity: 0.8; }
/* blog list page numbers (shown once there are more than 12 posts) */
body .breakdance .dw-postlist .bde-posts-pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--dw-s5); }
body .breakdance .dw-postlist .bde-posts-pagination a,
body .breakdance .dw-postlist .bde-posts-pagination span {
  display: inline-grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 0.6rem; border-radius: 999px;
  font-weight: 600; text-decoration: none; color: var(--dw-ink); border: 1px solid rgba(66, 14, 26, 0.25);
}
body .breakdance .dw-postlist .bde-posts-pagination ul { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
body .breakdance .dw-postlist .bde-posts-pagination li { margin: 0; padding: 0; background: none; border: 0; }
body .breakdance .dw-postlist .bde-posts-pagination .bde-posts-navigation-numbers--active a,
body .breakdance .dw-postlist .bde-posts-pagination a.is-active { background: var(--dw-ink); color: var(--dw-bone); border-color: var(--dw-ink); }
body .breakdance .dw-postlist .bde-posts-pagination a:hover { border-color: var(--dw-ink); }
/* ---------- 404 page (files/build-404.php) ---------- */
body .breakdance .bde-section.dw-404-hero { min-height: 72vh; display: flex; align-items: center; }
body .breakdance .bde-section.dw-404-hero > .section-container { width: 100%; }
body .breakdance .dw-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin-top: var(--dw-s5); }
/* outline pill on a photo: cream border and text, maroon arrow disc */
body .breakdance .bde-button.dw-cta--ghost .button-atom {
  background: rgba(27, 5, 8, 0.35); color: var(--dw-bone); box-shadow: none; font-size: 1rem;
  padding: 0.6rem 0.6rem 0.6rem 1.7rem; border: 1.5px solid var(--dw-bone); backdrop-filter: blur(2px);
}
body .breakdance .bde-button.dw-cta--ghost .button-atom::after { background-color: var(--dw-bone); background-image: var(--dw-arrow-ink); width: 2.3rem; height: 2.3rem; }
body .breakdance .bde-button.dw-cta--ghost .button-atom:hover { background: rgba(27, 5, 8, 0.6); }
body .breakdance .bde-button.dw-cta--ghost .button-atom:focus-visible { outline: 3px solid var(--dw-bone); }body .breakdance .dw-404-hero .dw-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(27, 5, 8, 0.72) 0%, rgba(27, 5, 8, 0.55) 55%, rgba(27, 5, 8, 0.35) 100%); }
body .breakdance .bde-div.dw-404-actions { flex-direction: row; align-items: center; }
/* ================= "O mnie" v2 (files/build-about.php, 18 Oct 2026) – all cream, editorial ================= */
body .breakdance .dw-ab-wrap { width: min(1180px, 100% - 2 * var(--dw-gutter)); margin-inline: auto; }
body .breakdance .bde-section.dw-ab-intro,
body .breakdance .bde-section.dw-ab-facts,
body .breakdance .bde-section.dw-ab-story,
body .breakdance .bde-section.dw-ab-lessons,
body .breakdance .bde-section.dw-ab-contact { background: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .bde-section.dw-ab-quote { background: var(--dw-cream); }
body .breakdance .bde-heading.dw-ab-h1 {
  margin: var(--dw-s2) 0 0; font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.05; color: var(--dw-ink);
}
body .breakdance .bde-heading.dw-ab-h2 {
  margin: var(--dw-s2) 0 0; font-family: var(--dw-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--dw-ink);
}
body .breakdance .bde-heading.dw-ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .breakdance .bde-text.dw-ab-lead { margin-top: var(--dw-s3); font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--dw-ink); font-weight: 500; max-width: 34ch; }
body .breakdance .bde-text.dw-ab-p { margin-top: var(--dw-s2); font-size: 1rem; line-height: 1.8; color: var(--dw-ink-72); max-width: 56ch; }
body .breakdance .bde-text.dw-ab-sign {
  margin-top: var(--dw-s3); padding-left: 1rem; border-left: 2px solid var(--dw-gold);
  font-style: italic; font-weight: 500; color: var(--dw-ink);
}
body .breakdance .dw-ab-actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: var(--dw-s4); }
body .breakdance .bde-text-link.dw-ab-textlink {
  font-weight: 600; color: var(--dw-ink); text-decoration: underline; text-decoration-color: var(--dw-gold);
  text-decoration-thickness: 2px; text-underline-offset: 5px;
}
body .breakdance .bde-text-link.dw-ab-textlink:hover { text-decoration-color: var(--dw-ink); }

/* 1 — intro: text | portrait */
body .breakdance .bde-section.dw-ab-intro { padding: calc(var(--dw-header-h) + var(--dw-s6)) 0 var(--dw-band); }
body .breakdance .dw-ab-intro-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
body .breakdance .dw-ab-portrait { position: relative; justify-self: end; width: min(100%, 440px); }
body .breakdance .dw-ab-portrait::before {
  content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border: 2px solid var(--dw-ink); border-radius: 22px; z-index: 0;
}
body .breakdance .dw-ab-portrait .bde-image { position: relative; z-index: 1; }
body .breakdance .dw-ab-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -35px rgba(27, 5, 8, 0.6); }
body .breakdance .dw-ab-badge {
  position: absolute; z-index: 2; left: -1.6rem; bottom: 2rem; padding: 0.9rem 1.2rem; border-radius: 16px;
  background: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 18px 40px -20px rgba(27, 5, 8, 0.8);
}
body .breakdance .bde-text.dw-ab-badge-big { font-family: var(--dw-display); font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--dw-bone); }
body .breakdance .bde-text.dw-ab-badge-small { margin-top: 0.3rem; font-size: 0.8rem; color: var(--dw-bone); opacity: 0.85; }

/* 2 — three facts: one strip with hairlines */
body .breakdance .bde-section.dw-ab-facts { padding: 0 0 var(--dw-band); }
body .breakdance .dw-ab-facts-row {
  display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(66, 14, 26, 0.18); border-bottom: 1px solid rgba(66, 14, 26, 0.18);
}
body .breakdance .dw-ab-fact { padding: var(--dw-s4) var(--dw-s4) var(--dw-s4) 0; }
body .breakdance .dw-ab-fact + .dw-ab-fact { padding-left: var(--dw-s4); border-left: 1px solid rgba(66, 14, 26, 0.18); }
body .breakdance .bde-text.dw-ab-fact-big { font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--dw-gold); }
body .breakdance .bde-heading.dw-ab-fact-title { margin: 0.8rem 0 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.1rem; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab-fact-body { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.65; color: var(--dw-ink-72); }

/* 3 — story: photo | vertical timeline */
body .breakdance .bde-section.dw-ab-story { padding: 0 0 var(--dw-band); }
body .breakdance .dw-ab-story-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
body .breakdance .dw-ab-story-photo { position: sticky; top: calc(var(--dw-header-h) + 2rem); }
body .breakdance .dw-ab-story-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 22px; box-shadow: 0 30px 60px -35px rgba(27, 5, 8, 0.6); }
body .breakdance .dw-ab-timeline { position: relative; margin-top: var(--dw-s5); padding-left: 2.2rem; }
body .breakdance .dw-ab-timeline::before { content: ""; position: absolute; left: 0.45rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: rgba(66, 14, 26, 0.18); }
body .breakdance .dw-ab-step { position: relative; padding-bottom: var(--dw-s5); }
body .breakdance .dw-ab-step:last-child { padding-bottom: 0; }
body .breakdance .dw-ab-step::before {
  content: ""; position: absolute; left: -2.2rem; top: 0.2rem; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--dw-bone); border: 3px solid var(--dw-gold); box-shadow: 0 0 0 4px var(--dw-bone);
}
body .breakdance .bde-text.dw-ab-step-when { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-gold); }
body .breakdance .bde-heading.dw-ab-step-title { margin: 0.35rem 0 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.3rem; color: var(--dw-ink); }
body .breakdance .dw-ab-step-body { margin-top: 0.5rem; font-size: 1rem; line-height: 1.8; color: var(--dw-ink-72); }

/* 4 — quote */
body .breakdance .bde-section.dw-ab-quote { padding: var(--dw-band) 0; }
body .breakdance .dw-ab-quote-inner { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; }
body .breakdance .bde-text.dw-ab-quote-mark { font-family: var(--dw-display); font-weight: 700; font-size: 6rem; line-height: 0.6; color: var(--dw-gold); height: 3rem; }
body .breakdance .bde-text.dw-ab-quote-text { font-family: var(--dw-display); font-weight: 600; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.3; color: var(--dw-ink); letter-spacing: -0.01em; }
body .breakdance .bde-text.dw-ab-quote-who { margin-top: var(--dw-s3); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }

/* 5 — lessons */
body .breakdance .bde-section.dw-ab-lessons { padding: var(--dw-band) 0; }
body .breakdance .dw-ab-head { display: flex; flex-direction: column; align-items: flex-start; }
body .breakdance .bde-text.dw-ab-head-lead { margin-top: var(--dw-s2); font-size: 1.1rem; line-height: 1.6; color: var(--dw-ink-72); max-width: 50ch; }
body .breakdance .dw-ab-lessons-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: var(--dw-s5); }
body .breakdance .dw-ab-lesson { padding-top: var(--dw-s3); border-top: 2px solid var(--dw-ink); }
body .breakdance .bde-text.dw-ab-lesson-no { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; color: var(--dw-gold); }
body .breakdance .bde-heading.dw-ab-lesson-title { margin: 0.6rem 0 0; font-family: var(--dw-display); font-weight: 600; font-size: 1.35rem; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab-lesson-body { margin-top: 0.6rem; font-size: 1rem; line-height: 1.75; color: var(--dw-ink-72); }

/* 6 — contact: text | light form card */
body .breakdance .bde-section.dw-ab-contact { padding: var(--dw-band) 0; border-top: 1px solid rgba(66, 14, 26, 0.12); }
body .breakdance .dw-ab-contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
body .breakdance .dw-ab-contact-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; border: 3px solid var(--dw-cream); box-shadow: 0 12px 26px -14px rgba(27, 5, 8, 0.6); margin-bottom: var(--dw-s3); }
body .breakdance .dw-ab-contact-photo img { width: 100%; height: 100%; object-fit: cover; }
body .breakdance .dw-ab-form-card {
  background: #fffaf3; border: 1px solid rgba(66, 14, 26, 0.12); border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: 0 30px 60px -40px rgba(27, 5, 8, 0.5);
}
body .breakdance .dw-ab-form-card .breakdance-form-field__label { color: var(--dw-ink); }
body .breakdance .dw-ab-form-card .breakdance-form-field__required { color: var(--dw-gold); }
body .breakdance .dw-ab-form-card .breakdance-form-field__input {
  background: var(--dw-cream); border: 1px solid rgba(66, 14, 26, 0.18); color: var(--dw-ink); border-radius: 12px;
}
body .breakdance .dw-ab-form-card .breakdance-form-field__input::placeholder { color: var(--dw-ink-72); opacity: 0.8; }
body .breakdance .dw-ab-form-card .breakdance-form-field__input:focus { border-color: var(--dw-gold); background: #fff; box-shadow: 0 0 0 3px rgba(184, 147, 90, 0.3); }
body .breakdance .dw-ab-form-card .breakdance-form-button { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-ab-form-card .breakdance-form-button:hover { background: var(--dw-ink-soft); }
body .breakdance .dw-ab-form-card .bde-text.dw-fine { margin-top: var(--dw-s3); color: var(--dw-ink-72); font-size: 0.82rem; }

@media (max-width: 900px) {
  body .breakdance .dw-ab-intro-grid,
  body .breakdance .dw-ab-story-grid,
  body .breakdance .dw-ab-contact-grid { grid-template-columns: 1fr; }
  body .breakdance .dw-ab-portrait { justify-self: center; width: min(100%, 380px); margin-right: 1.4rem; }
  body .breakdance .dw-ab-story-photo { position: static; }
  body .breakdance .dw-ab-story-photo img { aspect-ratio: 16 / 10; }
  body .breakdance .dw-ab-facts-row, body .breakdance .dw-ab-lessons-row { grid-template-columns: 1fr; }
  body .breakdance .dw-ab-fact, body .breakdance .dw-ab-fact + .dw-ab-fact { padding: var(--dw-s3) 0; border-left: 0; }
  body .breakdance .dw-ab-fact + .dw-ab-fact { border-top: 1px solid rgba(66, 14, 26, 0.18); }
}/* decorative quotation mark above the quote (a CSS glyph, not a text element, so it never overlaps the line) */
body .breakdance .bde-text.dw-ab-quote-text::before {
  content: "\201D"; display: block; margin: 0 auto 0.4rem; font-size: 5rem; line-height: 0.8; height: 3rem; color: var(--dw-gold);
}
/* the footer's "Masz jakieś pytanie?" strip repeats the contact section right above it – not on this page */
body .breakdance .dw-ab-contact ~ .dw-footer .dw-footer-cta { display: none; }
body .breakdance .dw-ab-contact ~ .dw-footer { padding-top: var(--dw-s6); }
/* ---- "O mnie" v2 – colour pass (18 Oct 2026): alternating cream tints, maroon details, one maroon quote card ---- */
body .breakdance .bde-section.dw-ab-intro { background: var(--dw-cream); }
body .breakdance .bde-section.dw-ab-facts { background: var(--dw-cream); padding-bottom: var(--dw-band); }
body .breakdance .bde-section.dw-ab-story { background: var(--dw-bone); padding-top: var(--dw-band); }
body .breakdance .bde-section.dw-ab-quote { background: var(--dw-bone); padding-top: 0; }
body .breakdance .bde-section.dw-ab-lessons { background: var(--dw-cream); }
body .breakdance .bde-section.dw-ab-contact { background: var(--dw-bone); border-top: 0; }

/* facts: three white cards with maroon figures */
body .breakdance .dw-ab-facts-row { gap: 1.25rem; border: 0; }
body .breakdance .dw-ab-fact,
body .breakdance .dw-ab-fact + .dw-ab-fact {
  padding: var(--dw-s4); border: 0; border-radius: 18px; background: #fffaf3;
  box-shadow: 0 22px 44px -32px rgba(27, 5, 8, 0.55); border-top: 4px solid var(--dw-ink);
}
body .breakdance .bde-text.dw-ab-fact-big { color: var(--dw-ink); }
body .breakdance .bde-heading.dw-ab-fact-title { color: var(--dw-gold); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; }

/* timeline: maroon line and dots, gold labels */
body .breakdance .dw-ab-timeline::before { background: linear-gradient(var(--dw-ink), rgba(66, 14, 26, 0.25)); }
body .breakdance .dw-ab-step::before { background: var(--dw-ink); border-color: var(--dw-gold); box-shadow: 0 0 0 4px var(--dw-bone); }
body .breakdance .bde-text.dw-ab-step-when { color: var(--dw-ink-soft); }

/* quote: the one strong accent – a rounded maroon card, not a full-width band */
body .breakdance .dw-ab-quote-inner {
  max-width: 980px; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 5rem); border-radius: 28px;
  background: var(--dw-ink); box-shadow: 0 40px 80px -45px rgba(27, 5, 8, 0.85);
}
body .breakdance .bde-text.dw-ab-quote-text { color: var(--dw-bone); }
body .breakdance .bde-text.dw-ab-quote-who { color: var(--dw-gold); }

/* lessons: maroon numbers in discs */
body .breakdance .dw-ab-lesson { border-top-color: var(--dw-gold); }
body .breakdance .bde-text.dw-ab-lesson-no {
  display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--dw-ink); color: var(--dw-bone); letter-spacing: 0.04em;
}

/* intro portrait frame and badge: gold frame line, maroon badge with gold figure */
body .breakdance .dw-ab-portrait::before { border-color: var(--dw-gold); }
body .breakdance .bde-text.dw-ab-badge-big { color: var(--dw-gold); }
@media (max-width: 900px) {
  body .breakdance .dw-ab-fact, body .breakdance .dw-ab-fact + .dw-ab-fact { padding: var(--dw-s3); border-top: 4px solid var(--dw-ink); }
}
/* ---- "O mnie" v2 – two colours only (author, 18 Oct 2026: no gold/yellow) ----
   every gold accent inside the page sections turns maroon; on maroon surfaces it turns cream */
body .breakdance .bde-section[class*="dw-ab-"] { --dw-gold: var(--dw-ink); }
body .breakdance .dw-ab-quote-inner,
body .breakdance .dw-ab-badge { --dw-gold: var(--dw-bone); }
body .breakdance .bde-heading.dw-ab-fact-title { color: var(--dw-ink-72); }
body .breakdance .bde-text.dw-ab-quote-who { color: var(--dw-bone); opacity: 0.75; }
body .breakdance .dw-ab-step::before { border-color: var(--dw-bone); box-shadow: 0 0 0 2px var(--dw-ink), 0 0 0 5px var(--dw-bone); }
body .breakdance .dw-ab-form-card .breakdance-form-field__input:focus { border-color: var(--dw-ink); box-shadow: 0 0 0 3px rgba(66, 14, 26, 0.18); }
/* ---- "O mnie" v2 – only the two brand colours and tints of the cream (#DCD1C5 + white), no yellowish creams ---- */
body .breakdance .bde-section[class*="dw-ab-"] { --dw-ab-light: #eee8e2; --dw-ab-card: #f7f4f1; }
body .breakdance .bde-section.dw-ab-intro,
body .breakdance .bde-section.dw-ab-facts,
body .breakdance .bde-section.dw-ab-lessons { background: var(--dw-ab-light); }
body .breakdance .dw-ab-fact,
body .breakdance .dw-ab-fact + .dw-ab-fact,
body .breakdance .dw-ab-form-card { background: var(--dw-ab-card); }
body .breakdance .dw-ab-form-card .breakdance-form-field__input { background: var(--dw-ab-light); }
body .breakdance .dw-ab-form-card .breakdance-form-field__input:focus { background: #fff; }
body .breakdance .dw-ab-contact-photo { border-color: var(--dw-ab-card); }
/* ---- "O mnie" v2 – backgrounds: exactly the brand cream #DCD1C5, alternating with cream + a touch of maroon
   (#D2C4B9 = 92% #DCD1C5 + 8% #420E1A); cards plain white. No lightened creams (they read yellowish). ---- */
body .breakdance .bde-section[class*="dw-ab-"] { --dw-ab-light: #dcd1c5; --dw-ab-deep: #d2c4b9; --dw-ab-card: #ffffff; }
body .breakdance .bde-section.dw-ab-intro,
body .breakdance .bde-section.dw-ab-facts,
body .breakdance .bde-section.dw-ab-lessons { background: var(--dw-ab-light); }
body .breakdance .bde-section.dw-ab-story,
body .breakdance .bde-section.dw-ab-quote,
body .breakdance .bde-section.dw-ab-contact { background: var(--dw-ab-deep); }
body .breakdance .dw-ab-step::before { box-shadow: 0 0 0 2px var(--dw-ink), 0 0 0 5px var(--dw-ab-deep); border-color: var(--dw-ab-deep); }
body .breakdance .dw-ab-form-card .breakdance-form-field__input { background: #f3eeea; }/* the v1 maroon form card inside the v2 page: its accents (required star, focus ring) are cream, never gold */
body .breakdance .dw-ab-contact .dw-om-contact-form { --dw-gold: var(--dw-bone); }
body .breakdance .dw-ab-contact .dw-om-contact-form .breakdance-form-field__input:focus { border-color: var(--dw-bone); box-shadow: 0 0 0 3px rgba(220, 209, 197, 0.45); }
/* ---------- Main menu: "Kalkulatory" with its two calculators (Nov 2026) ----------
   desktop: the sub-list drops down on hover / keyboard focus; phone panel: the two links sit under it, indented */
body .breakdance .dw-nav-drop { position: relative; display: flex; align-items: center; }
body .breakdance .bde-text-link.dw-nav-link--drop { padding-right: 1.1rem; }
body .breakdance .bde-text-link.dw-nav-link--drop::before {
  content: ""; position: absolute; right: 0; top: 50%; width: 0.42rem; height: 0.42rem; margin-top: -0.32rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  transition: transform 0.25s ease;
}
body .breakdance .dw-nav-sub {
  position: absolute; top: calc(100% + 0.9rem); left: -1.2rem; min-width: 15.5rem; z-index: 80;
  display: flex; flex-direction: column; align-items: stretch; padding: 0.5rem;
  background: #fff; border: 1px solid var(--dw-line); border-radius: 12px; box-shadow: 0 24px 48px -24px rgba(66, 14, 26, 0.45);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
/* invisible bridge, so the pointer can travel from the label to the list without closing it */
body .breakdance .dw-nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
body .breakdance .dw-nav-drop:hover .dw-nav-sub,
body .breakdance .dw-nav-drop:focus-within .dw-nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
body .breakdance .dw-nav-drop:hover .dw-nav-link--drop::before,
body .breakdance .dw-nav-drop:focus-within .dw-nav-link--drop::before { transform: rotate(-135deg) translate(-2px, -2px); }
body .breakdance .bde-text-link.dw-nav-sublink {
  display: block; padding: 0.75rem 0.9rem; border-radius: 8px; text-decoration: none;
  font-family: var(--dw-sans); font-size: 0.92rem; font-weight: 500; color: var(--dw-ink);
  transition: background 0.18s ease;
}
body .breakdance .bde-text-link.dw-nav-sublink:hover,
body .breakdance .bde-text-link.dw-nav-sublink:focus-visible { background: var(--dw-bone); outline: none; }
body .breakdance .bde-text-link.dw-nav-sublink.is-current { font-weight: 600; background: rgba(220, 209, 197, 0.55); }
@media (max-width: 880px) {
  body .breakdance .dw-nav-drop { flex-direction: column; align-items: stretch; }
  body .breakdance .bde-text-link.dw-nav-link--drop { padding-right: 0; }
  body .breakdance .bde-text-link.dw-nav-link--drop::before { display: none; }
  body .breakdance .dw-nav-sub,
  body .breakdance .dw-nav-drop:hover .dw-nav-sub,
  body .breakdance .dw-nav-drop:focus-within .dw-nav-sub {
    position: static; min-width: 0; padding: 0.4rem 0 0.8rem 1rem; background: transparent; border: 0; border-bottom: 1px solid var(--dw-bone-20);
    border-radius: 0; box-shadow: none; opacity: 0; visibility: visible; transform: translateY(14px);
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
  }
  body .breakdance .dw-nav-sub::before { display: none; }
  body .breakdance .dw-header.is-open .dw-nav-sub { opacity: 1; transform: none; }
  body .breakdance .dw-nav-drop .bde-text-link.dw-nav-link { border-bottom: 0; }
  body .breakdance .bde-text-link.dw-nav-sublink { color: var(--dw-bone); font-size: 1.05rem; padding: 0.55rem 0; }
  body .breakdance .bde-text-link.dw-nav-sublink:hover,
  body .breakdance .bde-text-link.dw-nav-sublink:focus-visible,
  body .breakdance .bde-text-link.dw-nav-sublink.is-current { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
  body .breakdance .dw-header.is-open .dw-nav > .bde-text-link.dw-nav-link:nth-child(4) { transition-delay: 0.33s; }
  /* the phone panel's accents are cream, never gold (two-colour rule) */
  body .breakdance .dw-nav .bde-text-link.dw-nav-link.is-current { color: var(--dw-bone); font-weight: 700; }
}

/* ---------- Wine calculators v2 (pages /kalkulator-mocy-wina/ and /kalkulator-cukru-do-wina/) ----------
   The Div .dw-calc is filled by calc.js: tabs, a white card with numbered steps (sliders, fruit chips,
   hydrometer switch, yeast buttons) and a maroon result panel with the filling glass, sticky on wide screens.
   Brand colours only: maroon, cream and their tints, white. */
body .breakdance .bde-section.dw-calc-band { background: var(--dw-bone); padding: 0 0 var(--dw-band); }
body .breakdance .dw-calc { width: 100%; --dw-calc-soft: #f4efea; --dw-calc-line: #e4dad1; }

/* tabs between the two calculators */
body .breakdance .dw-calc-tabs {
  display: inline-flex; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1.25rem; border-radius: 999px;
  background: rgba(66, 14, 26, 0.08);
}
body .breakdance .dw-calc-tab {
  padding: 0.65rem 1.4rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--dw-ink);
  text-decoration: none; transition: background 0.2s ease, color 0.2s ease;
}
body .breakdance a.dw-calc-tab:hover { background: rgba(255, 255, 255, 0.6); }
body .breakdance .dw-calc-tab.is-on { background: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 8px 18px -10px rgba(66, 14, 26, 0.8); }

/* card */
body .breakdance .dw-calc-card {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch;
  background: #fff; border-radius: 22px; box-shadow: 0 40px 80px -48px rgba(66, 14, 26, 0.6), 0 2px 0 rgba(66, 14, 26, 0.04);
}
body .breakdance .dw-calc-form { padding: clamp(1.5rem, 3.5vw, 3rem); display: flex; flex-direction: column; }

/* numbered steps, separated by hairlines */
body .breakdance .dw-calc-step { padding: 1.9rem 0; border-top: 1px solid var(--dw-calc-line); display: flex; flex-direction: column; gap: 1rem; }
body .breakdance .dw-calc-step:first-child { padding-top: 0; border-top: 0; }
body .breakdance .dw-calc-step:last-child { padding-bottom: 0; }
body .breakdance .dw-calc-step-title { margin: 0; display: flex; align-items: center; gap: 0.8rem; font-size: 1.12rem; font-weight: 700; color: var(--dw-ink); letter-spacing: -0.01em; }
body .breakdance .dw-calc-step-no {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--dw-ink); color: var(--dw-bone); font-size: 0.85rem; font-weight: 700;
}
body .breakdance .dw-calc-hint { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--dw-ink-72); }

/* number fields */
body .breakdance .dw-calc-input { position: relative; display: flex; align-items: center; }
body .breakdance .dw-calc-input input {
  width: 100%; min-height: 2.9rem; padding: 0.6rem 2.9rem 0.6rem 0.9rem; border: 1.5px solid var(--dw-calc-line); border-radius: 12px;
  background: var(--dw-calc-soft); color: var(--dw-ink); font: 600 1rem/1.3 var(--dw-sans); -moz-appearance: textfield; appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
body .breakdance .dw-calc-input--small { width: 8.5rem; }
body .breakdance .dw-calc-input input::-webkit-outer-spin-button,
body .breakdance .dw-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body .breakdance .dw-calc-input input:focus { outline: none; background: #fff; border-color: var(--dw-ink); box-shadow: 0 0 0 4px rgba(66, 14, 26, 0.12); }
body .breakdance .dw-calc-input span { position: absolute; right: 0.9rem; font-size: 0.85rem; font-weight: 500; color: var(--dw-ink-72); pointer-events: none; }

/* slider + exact value */
body .breakdance .dw-calc-slider { display: flex; flex-direction: column; gap: 0.7rem; }
body .breakdance .dw-calc-slider + .dw-calc-slider { margin-top: 0.6rem; }
body .breakdance .dw-calc-slider-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
body .breakdance .dw-calc-slider-head label,
body .breakdance .dw-calc-fruit-field label { font-size: 0.86rem; font-weight: 600; color: var(--dw-ink); }
body .breakdance .dw-calc-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 0.4rem 0 0; border-radius: 4px; cursor: pointer;
  background: linear-gradient(to right, var(--dw-ink) 0, var(--dw-ink) var(--p, 0%), var(--dw-calc-line) var(--p, 0%));
}
body .breakdance .dw-calc-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--dw-ink);
  box-shadow: 0 4px 10px -2px rgba(66, 14, 26, 0.45); transition: transform 0.15s ease;
}
body .breakdance .dw-calc-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--dw-ink); box-shadow: 0 4px 10px -2px rgba(66, 14, 26, 0.45);
}
body .breakdance .dw-calc-range:active::-webkit-slider-thumb { transform: scale(1.15); }
body .breakdance .dw-calc-range-scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--dw-ink-72); margin-top: -0.2rem; }

/* fruit chips */
body .breakdance .dw-calc-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body .breakdance .dw-calc-chips-more { display: none; }
body .breakdance .dw-calc-chips.is-open .dw-calc-chips-more { display: contents; }
body .breakdance .dw-calc-chip {
  padding: 0.55rem 1rem; border: 1.5px solid var(--dw-calc-line); border-radius: 999px; background: #fff; cursor: pointer;
  color: var(--dw-ink); font: 500 0.86rem/1.2 var(--dw-sans); transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
body .breakdance .dw-calc-chip:hover { border-color: var(--dw-ink); transform: translateY(-1px); }
body .breakdance .dw-calc-chip.is-on { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-calc-chip.is-on::before { content: "✓ "; }
body .breakdance .dw-calc-chip--more { border-style: dashed; background: transparent; font-weight: 600; }

/* chosen fruit rows */
body .breakdance .dw-calc-fruit-list { display: flex; flex-direction: column; gap: 0.6rem; }
body .breakdance .dw-calc-fruit {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto 2.4rem; gap: 0.9rem; align-items: end;
  padding: 0.9rem 0.9rem 0.9rem 1.1rem; border-radius: 14px; background: var(--dw-calc-soft); border-left: 4px solid var(--dw-ink);
}
body .breakdance .dw-calc-fruit-name { margin: 0; align-self: center; font-weight: 700; font-size: 0.98rem; color: var(--dw-ink); }
body .breakdance .dw-calc-fruit-field { display: flex; flex-direction: column; gap: 0.35rem; }
body .breakdance .dw-calc-fruit-field label { font-size: 0.74rem; font-weight: 500; color: var(--dw-ink-72); }
body .breakdance .dw-calc-fruit .dw-calc-input input { background: #fff; }
body .breakdance .dw-calc-fruit .dw-calc-input--small { width: 7rem; }
body .breakdance .dw-calc-remove {
  width: 2.4rem; height: 2.9rem; border: 0; border-radius: 10px; background: transparent; color: var(--dw-ink-72);
  font: 400 1.5rem/1 var(--dw-sans); cursor: pointer; transition: background 0.18s ease, color 0.18s ease;
}
body .breakdance .dw-calc-remove:hover { background: #fff; color: var(--dw-ink); }
body .breakdance .dw-calc-fruit-list.is-empty::before {
  content: "Nie wybrano owoców – kalkulator liczy sam cukier."; padding: 0.9rem 1.1rem; border-radius: 14px;
  border: 1.5px dashed var(--dw-calc-line); font-size: 0.85rem; color: var(--dw-ink-72);
}
body .breakdance .dw-calc-plain { display: flex; flex-direction: column; gap: 1rem; }
body .breakdance .dw-calc-plain .dw-calc-slider { margin-top: 0.8rem; }

/* hydrometer switch */
body .breakdance .dw-calc-switch-row { display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--dw-ink); align-self: flex-start; }
body .breakdance .dw-calc-switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .breakdance .dw-calc-toggle { position: relative; width: 2.9rem; height: 1.65rem; border-radius: 999px; background: var(--dw-calc-line); transition: background 0.2s ease; flex-shrink: 0; }
body .breakdance .dw-calc-toggle::after {
  content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 5px rgba(66, 14, 26, 0.3); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
body .breakdance .dw-calc-switch-row input:checked + .dw-calc-toggle { background: var(--dw-ink); }
body .breakdance .dw-calc-switch-row input:checked + .dw-calc-toggle::after { transform: translateX(1.25rem); }
body .breakdance .dw-calc-switch-row input:focus-visible + .dw-calc-toggle { outline: 3px solid var(--dw-ink); outline-offset: 3px; }
body .breakdance .dw-calc-blg-fields { display: none; flex-wrap: wrap; gap: 1rem 1.25rem; padding: 1.1rem; border-radius: 14px; background: var(--dw-calc-soft); }
body .breakdance .dw-calc-blg-fields .dw-calc-hint { flex-basis: 100%; }
body .breakdance .dw-calc.is-blg .dw-calc-blg-fields { display: flex; animation: dw-calc-row-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .dw-calc.is-blg .dw-calc-plain { display: none; }

/* yeast: segmented buttons */
body .breakdance .dw-calc-seg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; padding: 0.3rem; border-radius: 14px; background: var(--dw-calc-soft); }
body .breakdance .dw-calc-seg label { position: relative; cursor: pointer; }
body .breakdance .dw-calc-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .breakdance .dw-calc-seg span {
  display: block; padding: 0.7rem 0; border-radius: 10px; text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--dw-ink);
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
body .breakdance .dw-calc-seg label:hover span { background: #fff; }
body .breakdance .dw-calc-seg input:checked + span { background: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 8px 16px -10px rgba(66, 14, 26, 0.9); }
body .breakdance .dw-calc-seg input:focus-visible + span { outline: 3px solid var(--dw-ink); outline-offset: 2px; }

body .breakdance .dw-calc-chip:focus-visible,
body .breakdance .dw-calc-remove:focus-visible,
body .breakdance .dw-calc-tab:focus-visible,
body .breakdance .dw-calc-range:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }

/* result panel: maroon, a soft lighter glow behind the glass, sticky on wide screens */
body .breakdance .dw-calc-side {
  border-radius: 0 22px 22px 0; color: var(--dw-bone);
  background: radial-gradient(120% 70% at 20% 0%, #5a1524 0%, var(--dw-ink) 55%) var(--dw-ink);
}
body .breakdance .dw-calc-result {
  position: sticky; top: calc(var(--dw-header-h) + 1rem);
  padding: clamp(1.75rem, 3.5vw, 2.75rem); display: flex; flex-direction: column; align-items: flex-start;
}
body .breakdance .dw-calc-result p { margin: 0; }
body .breakdance .dw-calc-kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-bone-80); }
body .breakdance .dw-calc-hero { width: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: 1.1rem; }
body .breakdance .dw-calc-head { min-width: 0; }
body .breakdance .dw-calc-big { font-size: clamp(3.4rem, 6vw, 5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.04em; color: #fff; white-space: nowrap; }
body .breakdance .dw-calc-big b { font-weight: inherit; font-variant-numeric: tabular-nums; }
body .breakdance .dw-calc-big span { font-size: 0.42em; font-weight: 600; margin-left: 0.12em; letter-spacing: 0; color: var(--dw-bone); }
body .breakdance .dw-calc-style {
  display: inline-block; margin-top: 0.8rem !important; padding: 0.35rem 0.85rem; border-radius: 999px;
  background: rgba(220, 209, 197, 0.14); font-size: 0.86rem; font-weight: 600; color: var(--dw-bone);
}
body .breakdance .dw-calc-style:empty { display: none; }

/* glass */
body .breakdance .dw-calc-glass { flex-shrink: 0; width: clamp(6.5rem, 10vw, 8.5rem); height: auto; overflow: visible; filter: drop-shadow(0 18px 24px rgba(27, 5, 8, 0.45)); }
body .breakdance .dw-calc-glass-bowl { fill: rgba(220, 209, 197, 0.08); }
body .breakdance .dw-calc-glass-line { fill: none; stroke: var(--dw-bone); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
body .breakdance .dw-calc-glass-shine { fill: none; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2.5; stroke-linecap: round; }
body .breakdance .dw-calc-liquid { transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .dw-calc-wave path { fill: #9b2c42; }
body .breakdance .dw-calc-wave { animation: dw-calc-wave 3.2s linear infinite; }
@keyframes dw-calc-wave { from { transform: translateX(0); } to { transform: translateX(120px); } }
body .breakdance .dw-calc-bubble { fill: rgba(220, 209, 197, 0.8); animation: dw-calc-bubble 2.8s ease-in infinite; opacity: 0; }
body .breakdance .dw-calc-bubble:nth-of-type(2) { animation-delay: 0.7s; animation-duration: 3.4s; }
body .breakdance .dw-calc-bubble:nth-of-type(3) { animation-delay: 1.4s; animation-duration: 2.4s; }
body .breakdance .dw-calc-bubble:nth-of-type(4) { animation-delay: 2.1s; animation-duration: 3s; }
@keyframes dw-calc-bubble { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-62px); opacity: 0; } }
body .breakdance .dw-calc-glass.is-empty .dw-calc-bubble { animation: none; opacity: 0; }

/* sweetness scale (strength) */
body .breakdance .dw-calc-scale { width: 100%; margin-top: 1.8rem; }
body .breakdance .dw-calc-scale-bar { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
body .breakdance .dw-calc-scale-bar span { position: relative; padding-top: 0.95rem; font-size: 0.7rem; font-weight: 500; text-align: center; color: var(--dw-bone-55); transition: color 0.3s ease; }
body .breakdance .dw-calc-scale-bar span::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: 3px; background: var(--dw-bone-20); transition: background 0.3s ease; }
body .breakdance .dw-calc-scale-bar span.is-on { color: #fff; font-weight: 600; }
body .breakdance .dw-calc-scale-bar span.is-on::before { background: var(--dw-bone-55); }
body .breakdance .dw-calc-scale-dot {
  position: absolute; top: 3px; left: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  background: #fff; border: 4px solid var(--dw-bone); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* sugar split bar */
body .breakdance .dw-calc-split { width: 100%; margin-top: 1.8rem; }
body .breakdance .dw-calc-split-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--dw-bone-20); gap: 2px; }
body .breakdance .dw-calc-split-bar i { display: block; height: 100%; width: 0; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .dw-calc-split-fruit { background: #9b2c42; }
body .breakdance .dw-calc-split-add { background: var(--dw-bone); }
body .breakdance .dw-calc-split-legend { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; font-size: 0.74rem; color: var(--dw-bone-80); }
body .breakdance .dw-calc-split-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
body .breakdance .dw-calc-split-legend span::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 2px; flex-shrink: 0; }
body .breakdance .dw-calc-split-l1::before { background: #9b2c42; box-shadow: 0 0 0 1px var(--dw-bone-55); }
body .breakdance .dw-calc-split-l2::before { background: var(--dw-bone); }

/* stat tiles */
body .breakdance .dw-calc-stats { width: 100%; margin-top: 1.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; }
body .breakdance .dw-calc-stats:empty { display: none; }
body .breakdance .dw-calc-stat { padding: 0.8rem 0.9rem; border-radius: 12px; background: rgba(220, 209, 197, 0.09); border: 1px solid rgba(220, 209, 197, 0.14); display: flex; flex-direction: column; gap: 0.25rem; }
body .breakdance .dw-calc-stat span { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.03em; color: var(--dw-bone-80); }
body .breakdance .dw-calc-stat strong { font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; }

body .breakdance .dw-calc-text { width: 100%; }
body .breakdance .dw-calc-note { margin-top: 1.3rem !important; font-size: 0.93rem; line-height: 1.65; color: var(--dw-bone); }
body .breakdance .dw-calc-note strong { color: #fff; }
body .breakdance .dw-calc-result a { color: #fff; text-decoration: underline; text-decoration-color: var(--dw-bone-55); text-underline-offset: 3px; }
body .breakdance .dw-calc-result a:hover { text-decoration-color: #fff; }
body .breakdance .dw-calc-fine { margin-top: 1rem !important; font-size: 0.76rem; line-height: 1.55; color: var(--dw-bone-55); }
body .breakdance .dw-calc-empty { margin-top: 1.4rem !important; font-size: 1rem; line-height: 1.6; color: var(--dw-bone); }
body .breakdance .dw-calc-result.is-blank .dw-calc-scale,
body .breakdance .dw-calc-result.is-blank .dw-calc-split { opacity: 0.35; }
body .breakdance .dw-calc-result a.dw-calc-switch {
  margin-top: 1.6rem; padding: 0.8rem 1.2rem; border: 1.5px solid var(--dw-bone-55); border-radius: 999px;
  font-weight: 600; font-size: 0.88rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.6rem;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body .breakdance .dw-calc-result a.dw-calc-switch::after { content: ""; width: 1rem; height: 1rem; flex-shrink: 0; background: var(--dw-arrow-cream) center / contain no-repeat; transition: transform 0.2s ease; }
body .breakdance .dw-calc-result a.dw-calc-switch:hover { background: var(--dw-bone); color: var(--dw-ink); border-color: var(--dw-bone); }
body .breakdance .dw-calc-result a.dw-calc-switch:hover::after { background-image: var(--dw-arrow-ink); transform: translateX(3px); }

/* motion: fruit rows, card entrance */
body .breakdance .dw-calc-fruit.is-new { animation: dw-calc-row-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes dw-calc-row-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
body .breakdance .dw-calc-fruit.is-leaving { pointer-events: none; animation: dw-calc-row-out 0.26s ease forwards; }
@keyframes dw-calc-row-out { to { opacity: 0; transform: translateX(16px); } }
body .breakdance .dw-calc-card.is-waiting { opacity: 0; transform: translateY(28px); }
body .breakdance .dw-calc-card.is-in { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }

/* the page around the calculator: sugar table */
body .breakdance .dw-calc-table { width: 100%; margin-top: var(--dw-s4); }
body .breakdance .dw-calc-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: 0.98rem; }
body .breakdance .dw-calc-table th,
body .breakdance .dw-calc-table td { padding: 0.8rem 1.1rem; text-align: left; border-bottom: 1px solid var(--dw-line); color: #161616; }
body .breakdance .dw-calc-table th { background: var(--dw-ink); color: var(--dw-bone); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; }
body .breakdance .dw-calc-table tr:last-child td { border-bottom: 0; }
body .breakdance .dw-calc-table tbody tr:nth-child(even) td { background: #f7f3ef; }
body .breakdance .dw-calc-table td:nth-child(3) { white-space: nowrap; font-weight: 600; color: var(--dw-ink); }
body .breakdance .dw-calc-table td:nth-child(2) { white-space: nowrap; }
body .breakdance .dw-calc-table td.dw-calc-src { font-size: 0.82rem; color: var(--dw-ink-72); }
/* on phones the four columns scroll sideways inside the table box, never the page */
body .breakdance .dw-calc-table { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; }
body .breakdance .dw-calc-table table { min-width: 34rem; }
@media (max-width: 600px) { body .breakdance .dw-calc-table th, body .breakdance .dw-calc-table td { padding: 0.7rem 0.75rem; font-size: 0.88rem; } }
/* calculator pages: the shared post blocks (note box, link underlines, FAQ markers) without the gold accent */
body .breakdance .bde-section.dw-calc-sec { --dw-gold: var(--dw-ink); }

@media (max-width: 1020px) {
  body .breakdance .dw-calc-card { grid-template-columns: 1fr; }
  body .breakdance .dw-calc-side { border-radius: 0 0 22px 22px; }
  body .breakdance .dw-calc-result { position: static; }
}
@media (max-width: 600px) {
  body .breakdance .dw-calc-tabs { display: flex; width: 100%; }
  body .breakdance .dw-calc-tab { flex: 1; text-align: center; padding-inline: 0.5rem; white-space: nowrap; font-size: 0.86rem; }
  body .breakdance .dw-calc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  body .breakdance .dw-calc-stat { padding: 0.7rem 0.6rem; }
  body .breakdance .dw-calc-stat span { font-size: 0.64rem; }
  body .breakdance .dw-calc-stat strong { font-size: 0.92rem; }
  body .breakdance .dw-calc-big { font-size: 3.1rem; }
  body .breakdance .dw-calc-fruit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.4rem; }
  body .breakdance .dw-calc-fruit-name { grid-column: 1 / -1; }
  body .breakdance .dw-calc-fruit .dw-calc-input--small { width: 100%; }
  body .breakdance .dw-calc-seg { gap: 0.15rem; padding: 0.25rem; }
  body .breakdance .dw-calc-seg span { font-size: 0.78rem; padding: 0.65rem 0; }
  body .breakdance .dw-calc-glass { width: 5.5rem; }
}
@media (max-width: 880px) {
  body .breakdance .dw-nav .bde-text-link.dw-nav-link::after,
  body .breakdance .dw-nav .bde-text-link.dw-nav-link:hover::after { background: var(--dw-bone); }
}
@media (prefers-reduced-motion: reduce) {
  body .breakdance .dw-calc-wave,
  body .breakdance .dw-calc-bubble,
  body .breakdance .dw-calc-fruit.is-new,
  body .breakdance .dw-calc.is-blg .dw-calc-blg-fields { animation: none; }
  body .breakdance .dw-calc-liquid,
  body .breakdance .dw-calc-scale-dot,
  body .breakdance .dw-calc-split-bar i { transition: none; }
}
/* phones/tablets: result peek bar at the bottom of the screen (calc.js shows it while the form is in view) */
.dw-calc-peek { display: none; }
@media (max-width: 1020px) {
  .dw-calc-peek {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 45;
    display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem 0.8rem 1.2rem; border: 0; border-radius: 16px;
    background: var(--dw-ink); color: var(--dw-bone); font-family: var(--dw-sans); text-align: left; cursor: pointer;
    box-shadow: 0 18px 36px -12px rgba(27, 5, 8, 0.65);
    opacity: 0; visibility: hidden; transform: translateY(120%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, visibility 0s linear 0.35s;
  }
  .dw-calc-peek.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .dw-calc-peek-k { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-bone-80); }
  .dw-calc-peek b { font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
  .dw-calc-peek-s { font-size: 0.82rem; font-weight: 500; color: var(--dw-bone); }
  .dw-calc-peek i { margin-left: auto; width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 50%; background: rgba(220, 209, 197, 0.16) var(--dw-arrow-cream) center / 1rem no-repeat; transform: rotate(90deg); }
  .dw-calc-peek:focus-visible { outline: 3px solid var(--dw-bone); outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .dw-calc-peek { transition: none; } }
/* ---------- Home page: calculators band (Nov 2026) – maroon, between the newest posts and "O blogu" ---------- */
body .breakdance .bde-section.dw-home-calc {
  background: radial-gradient(90% 120% at 50% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
  --dw-gold: var(--dw-bone);
}
body .breakdance .dw-home-calc .bde-text.dw-eyebrow,
body .breakdance .dw-home-calc .bde-heading.dw-h2 { color: var(--dw-bone); }
body .breakdance .dw-home-calc .bde-text.dw-lead { color: var(--dw-bone-80); margin-inline: auto; }
body .breakdance .dw-hc-cards {
  width: min(64rem, 100% - 2 * var(--dw-gutter)); margin: var(--dw-s5) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 2rem);
}
body .breakdance .dw-hc-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem;
  padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: 20px;
  background: rgba(220, 209, 197, 0.07); border: 1px solid rgba(220, 209, 197, 0.18);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
body .breakdance .dw-hc-card:hover { transform: translateY(-4px); background: rgba(220, 209, 197, 0.11); border-color: rgba(220, 209, 197, 0.32); }
/* drawn icons in cream: a wine glass (strength) and a sugar bowl of cubes (sugar) */
body .breakdance .dw-hc-icon { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--dw-bone); position: relative; }
body .breakdance .dw-hc-icon::after {
  content: ""; position: absolute; inset: 0.75rem; background: var(--dw-ink);
  -webkit-mask: var(--dw-hc-mask) center / contain no-repeat; mask: var(--dw-hc-mask) center / contain no-repeat;
}
body .breakdance .dw-hc-card--moc { --dw-hc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12c0 6-2 10-6 10S6 8 6 2z'/%3E%3Cpath d='M6.6 6h10.8'/%3E%3Cpath d='M12 12v9M8 22h8'/%3E%3C/svg%3E"); }
body .breakdance .dw-hc-card--cukier { --dw-hc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='12' width='8' height='8' rx='1'/%3E%3Crect x='13' y='12' width='8' height='8' rx='1'/%3E%3Crect x='8' y='3' width='8' height='8' rx='1'/%3E%3C/svg%3E"); }
body .breakdance .bde-heading.dw-hc-title { margin: 0.4rem 0 0; font-family: var(--dw-display); font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
body .breakdance .bde-text.dw-hc-body { margin: 0; color: var(--dw-bone-80); font-size: 0.98rem; line-height: 1.65; }
body .breakdance .dw-hc-card .bde-button { margin-top: auto; padding-top: 0.6rem; }
@media (max-width: 760px) { body .breakdance .dw-hc-cards { grid-template-columns: 1fr; } }

/* ---------- Recipes: calculator box right after the recipe ---------- */
body .breakdance .bde-section.dw-rp-calcbox { background: var(--dw-bone); padding: var(--dw-s5) 0 var(--dw-band); }
body .breakdance .dw-calcbox {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem 1.75rem;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); border-radius: 18px; background: #fff;
  box-shadow: 0 24px 48px -32px rgba(66, 14, 26, 0.55); border-left: 5px solid var(--dw-ink);
}
body .breakdance .dw-calcbox-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--dw-ink); position: relative;
  --dw-hc-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12c0 6-2 10-6 10S6 8 6 2z'/%3E%3Cpath d='M6.6 6h10.8'/%3E%3Cpath d='M12 12v9M8 22h8'/%3E%3C/svg%3E");
}
body .breakdance .dw-calcbox-icon::after {
  content: ""; position: absolute; inset: 0.75rem; background: var(--dw-bone);
  -webkit-mask: var(--dw-hc-mask) center / contain no-repeat; mask: var(--dw-hc-mask) center / contain no-repeat;
}
body .breakdance .dw-calcbox-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
body .breakdance .bde-text.dw-calcbox-title { margin: 0; font-weight: 700; font-size: 1.12rem; color: var(--dw-ink); }
body .breakdance .bde-text.dw-calcbox-body { margin: 0; font-size: 0.95rem; line-height: 1.6; color: #161616; }
body .breakdance .dw-calcbox-actions { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
body .breakdance .bde-text-link.dw-calcbox-alt { font-size: 0.85rem; font-weight: 500; color: var(--dw-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  body .breakdance .dw-calcbox { grid-template-columns: auto 1fr; }
  body .breakdance .dw-calcbox-actions { grid-column: 1 / -1; align-items: flex-start; }
}

/* ---------- Breadcrumbs above the title, "Zaktualizowano" next to the date ---------- */
body .breakdance .dw-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; margin-bottom: var(--dw-s3); width: 100%;
  font-size: 0.82rem; line-height: 1.5; color: var(--dw-ink-72);
}
body .breakdance .dw-crumbs a { color: var(--dw-ink); text-decoration: none; font-weight: 500; }
body .breakdance .dw-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
body .breakdance .dw-crumbs span[aria-hidden] { color: var(--dw-ink-72); }
body .breakdance .dw-crumbs span[aria-current] { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .breakdance .dw-post-updated { font-style: normal; }
/* ---------- "W skrócie" box under the intro of the fermentation and bottling guides (Search Console, Nov 2026) ---------- */
body .breakdance .bde-section.dw-quick-band { background: var(--dw-bone); padding: 0 0 var(--dw-s5); }
body .breakdance .dw-quick {
  width: 100%; padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem); border-radius: 18px;
  background: #fff; border-left: 5px solid var(--dw-ink); box-shadow: 0 24px 48px -32px rgba(66, 14, 26, 0.55);
}
body .breakdance .bde-text.dw-quick-kicker { margin: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .bde-text.dw-quick-title { margin: 0.4rem 0 0; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; line-height: 1.3; color: var(--dw-ink); }
body .breakdance .dw-quick-body { margin-top: 1rem; color: #161616; font-size: 1rem; line-height: 1.7; }
body .breakdance .dw-quick-body ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
body .breakdance .dw-quick-body li { position: relative; padding-left: 1.4rem; }
body .breakdance .dw-quick-body li::before { content: ""; position: absolute; left: 0.2rem; top: 0.68em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--dw-ink); }
body .breakdance .dw-quick-body strong { color: var(--dw-ink); font-weight: 600; }
body .breakdance .dw-quick-body p { margin: 1rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--dw-line); font-size: 0.88rem; color: var(--dw-ink-72); }
body .breakdance .dw-quick-body a { color: var(--dw-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Recipe tools (Nov 2026): fact tiles, scaling, ticking off, printing ---------- */
/* two colours only inside the recipe band: the kicker and bullets were gold */
body .breakdance .dw-rp-ingredients { --dw-gold: var(--dw-bone); }
body .breakdance .dw-rp-method { --dw-gold: var(--dw-ink); }

/* fact tiles under the title */
body .breakdance .dw-facts {
  width: 100%; margin-top: var(--dw-s4); display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem;
}
body .breakdance .dw-facts-item {
  display: flex; flex-direction: column; gap: 0.3rem; padding: 0.9rem 1rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.55); border: 1px solid var(--dw-line);
}
body .breakdance .dw-facts-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .dw-facts-value { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--dw-ink); }
body .breakdance .dw-rp-cover-wrap-facts { margin-top: var(--dw-s4); }

/* scaling control in the ingredients card */
body .breakdance .dw-scale {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; margin-top: 0.9rem;
  padding: 0.7rem 0.8rem; border-radius: 14px; background: rgba(220, 209, 197, 0.1); border: 1px solid var(--dw-bone-20);
}
body .breakdance .dw-scale-label { font-size: 0.85rem; font-weight: 600; color: var(--dw-bone); }
body .breakdance .dw-scale-ctrl { display: inline-flex; align-items: center; gap: 0.35rem; }
body .breakdance .dw-scale-btn {
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; cursor: pointer; background: var(--dw-bone); color: var(--dw-ink);
  font: 700 1.15rem/1 var(--dw-sans); transition: transform 0.15s ease;
}
body .breakdance .dw-scale-btn:hover { transform: scale(1.08); }
body .breakdance .dw-scale input {
  width: 4.2rem; height: 2.2rem; padding: 0 0.4rem; border: 1.5px solid var(--dw-bone-55); border-radius: 10px; text-align: center;
  background: transparent; color: #fff; font: 700 1rem/1 var(--dw-sans); -moz-appearance: textfield; appearance: none;
}
body .breakdance .dw-scale input::-webkit-outer-spin-button,
body .breakdance .dw-scale input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
body .breakdance .dw-scale input:focus { outline: none; border-color: var(--dw-bone); }
body .breakdance .dw-scale-unit { font-size: 0.85rem; color: var(--dw-bone-80); }
body .breakdance .dw-scale-reset { margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; color: var(--dw-bone); font: 500 0.82rem/1.3 var(--dw-sans); text-decoration: underline; text-underline-offset: 3px; }
body .breakdance .dw-rp-ingredients.is-scaled .bde-text.dw-rp-card-kicker { color: #fff; }
body .breakdance .dw-rp-ing-list li.is-scaled { color: #fff; }

/* ticking off ingredients and steps */
body .breakdance li.dw-tick { cursor: pointer; transition: opacity 0.2s ease; -webkit-tap-highlight-color: transparent; }
body .breakdance li.dw-tick:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
body .breakdance li.dw-tick.is-done { opacity: 0.5; text-decoration: line-through; text-decoration-thickness: 1.5px; }
body .breakdance .dw-rp-ing-list li.dw-tick.is-done::before { background: none; content: "✓"; width: auto; height: auto; margin-top: -0.7em; font-size: 0.85rem; font-weight: 700; color: var(--dw-bone); }
body .breakdance .dw-rp-method-list li.dw-tick.is-done::before { content: "✓"; }
body .breakdance .dw-tick-tip { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.7rem; font-size: 0.76rem; opacity: 0.75; }
body .breakdance .dw-rp-ingredients .dw-tick-tip { color: var(--dw-bone); }
body .breakdance .dw-rp-method .dw-tick-tip { color: var(--dw-ink); }
body .breakdance .dw-tick-clear { padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: 600 0.78rem/1.3 var(--dw-sans); text-decoration: underline; text-underline-offset: 3px; }

/* print button */
body .breakdance .dw-print-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 1.1rem; padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--dw-bone-55); border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--dw-bone); font: 600 0.86rem/1.2 var(--dw-sans); transition: background 0.2s ease, color 0.2s ease;
}
body .breakdance .dw-print-btn::before {
  content: ""; width: 1.05rem; height: 1.05rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .breakdance .dw-print-btn:hover { background: var(--dw-bone); color: var(--dw-ink); }

/* ---------- Printing ----------
   any post: no menu, footer, floating buttons or promo boxes; "Drukuj przepis": only the title, the fact tiles
   and the recipe on a white page, ingredients and steps one under the other, the address at the bottom */
@media print {
  @page { margin: 14mm 14mm 16mm; }
  html, body { background: #fff !important; }
  body .breakdance .bde-section.dw-header,
  body .breakdance .bde-section.dw-footer,
  .dw-toc-fab, .dw-toc-float, .dw-calc-peek,
  body .breakdance .dw-toc2, body .breakdance .dw-crumbs,
  body .breakdance .bde-section.dw-rp-calcbox, body .breakdance .bde-section.dw-rp-more,
  body .breakdance .dw-scale, body .breakdance .dw-tick-tip, body .breakdance .dw-print-btn { display: none !important; }
  body .breakdance .dw-reveal { opacity: 1 !important; transform: none !important; }
  body .breakdance .bde-section.dw-rp-intro { padding-top: 0 !important; }
  body .breakdance .bde-section.dw-rp-recipe { background: #fff !important; padding: 8mm 0 0 !important; overflow: visible; }
  body .breakdance .dw-rp-recipe-photo { display: none !important; }
  body .breakdance .dw-rp-recipe-inner { display: block !important; width: 100% !important; }
  body .breakdance .dw-rp-ingredients,
  body .breakdance .dw-rp-method { background: #fff !important; color: #161616 !important; box-shadow: none !important; border: 1px solid #c9bcb0; border-radius: 10px; padding: 6mm !important; margin-bottom: 5mm; break-inside: avoid; }
  body .breakdance .dw-rp-ingredients .bde-heading.dw-rp-card-title,
  body .breakdance .bde-heading.dw-rp-recipe-h2 { color: var(--dw-ink) !important; -webkit-text-stroke: 0 !important; text-shadow: none !important; }
  body .breakdance .bde-text.dw-rp-card-kicker { color: #555 !important; }
  body .breakdance .dw-rp-ing-list li { color: #161616 !important; border-color: #ddd !important; }
  body .breakdance .dw-rp-ing-list li::before { background: var(--dw-ink) !important; }
  body .breakdance li.dw-tick.is-done { opacity: 1; text-decoration: none; }
  body .breakdance .dw-rp-method-list li { color: #161616 !important; }
  body .breakdance .dw-facts-item { background: #fff !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body.dw-print-recipe .breakdance > .bde-section:not(.dw-rp-intro):not(.dw-rp-recipe) { display: none !important; }
  body.dw-print-recipe .breakdance .dw-rp-intro .dw-rp-cover,
  body.dw-print-recipe .breakdance .dw-rp-intro .dw-rp-story,
  body.dw-print-recipe .breakdance .dw-rp-intro .dw-rp-wrap:not(:first-child) { display: none !important; }
  body.dw-print-recipe::after {
    content: "Przepis ze strony " attr(data-print-url); display: block; margin-top: 6mm; padding-top: 3mm;
    border-top: 1px solid #ccc; font: 9pt/1.4 Poppins, sans-serif; color: #555;
  }
}@media print {
  body .breakdance .bde-section.dw-rp-intro { background: #fff !important; }
  body .breakdance .dw-facts { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
  body .breakdance .dw-facts-item { padding: 2.5mm 3mm !important; }
  body.dw-print-recipe .breakdance .bde-text.dw-rp-lead { display: none !important; }
  body.dw-print-recipe::before {
    content: "DOMOWA WINNICA · domowawinnica.com.pl"; display: block; margin-bottom: 4mm; padding-bottom: 2mm;
    border-bottom: 2px solid #420e1a; font: 600 8.5pt/1.4 Poppins, sans-serif; letter-spacing: 0.14em; color: #420e1a;
  }
}
/* ---------- Ticking off, made visible (Nov 2026, author: "skąd czytelnik ma wiedzieć?") ----------
   ingredients: the bullet becomes an empty box; steps: a box on the right; over each list a line that says what
   to do, counts what is done and fills a thin bar; the first box nudges once when the recipe comes into view */
body .breakdance .dw-rp-ing-list li.dw-tick { padding-left: 2.1rem; border-radius: 6px; transition: background 0.18s ease, opacity 0.2s ease; }
body .breakdance .dw-rp-ing-list li.dw-tick::before,
body .breakdance .dw-rp-ing-list li.dw-tick.is-done::before {
  content: ""; left: 0.1rem; top: 50%; width: 1.15rem; height: 1.15rem; margin-top: -0.575rem; border-radius: 5px;
  background: transparent; border: 1.5px solid var(--dw-bone-80); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; line-height: 1;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body .breakdance .dw-rp-ing-list li.dw-tick.is-done::before { content: "✓"; background: var(--dw-bone); border-color: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .dw-rp-ing-list li.dw-tick:hover { background: rgba(220, 209, 197, 0.08); }
body .breakdance .dw-rp-ing-list li.dw-tick:hover::before { border-color: var(--dw-bone); }

body .breakdance .dw-rp-method-list li.dw-tick { padding-right: 2.6rem; border-radius: 8px; transition: background 0.18s ease, opacity 0.2s ease; }
body .breakdance .dw-rp-method-list li.dw-tick.is-done::before { content: counter(dw-rp); }
body .breakdance .dw-rp-method-list li.dw-tick:hover { background: rgba(66, 14, 26, 0.04); }
body .breakdance .dw-tick-box {
  position: absolute; right: 0.3rem; top: 0.2em; width: 1.3rem; height: 1.3rem; border-radius: 5px; box-sizing: border-box;
  border: 1.5px solid rgba(66, 14, 26, 0.4); background: #fff; display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, border-color 0.18s ease;
}
body .breakdance .dw-rp-method-list li.dw-tick:hover .dw-tick-box { border-color: var(--dw-ink); }
body .breakdance .dw-rp-method-list li.is-done .dw-tick-box { background: var(--dw-ink); border-color: var(--dw-ink); }
body .breakdance .dw-rp-method-list li.is-done .dw-tick-box::after { content: "✓"; color: var(--dw-bone); font-size: 0.8rem; font-weight: 800; line-height: 1; }
/* the struck-through text stays readable: lighter, not hidden */
body .breakdance li.dw-tick.is-done { opacity: 0.55; text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* nudge */
@keyframes dw-tick-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(220, 209, 197, 0); } 50% { box-shadow: 0 0 0 6px rgba(220, 209, 197, 0.35); } }
@keyframes dw-tick-nudge-ink { 0%, 100% { box-shadow: 0 0 0 0 rgba(66, 14, 26, 0); } 50% { box-shadow: 0 0 0 6px rgba(66, 14, 26, 0.18); } }
body .breakdance .dw-rp-ing-list li.is-hint::before { animation: dw-tick-nudge 1.2s ease-in-out 2; }
body .breakdance .dw-rp-method-list li.is-hint .dw-tick-box { animation: dw-tick-nudge-ink 1.2s ease-in-out 2; }

/* progress line over each list */
body .breakdance .dw-tick-bar { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
body .breakdance .dw-tick-bar-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; line-height: 1.35; }
body .breakdance .dw-tick-bar-icon {
  width: 1.05rem; height: 1.05rem; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.5 9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l2.7 2.7L16.5 9'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .breakdance .dw-tick-bar-text { font-weight: 500; }
body .breakdance .dw-tick-bar-count { margin-left: auto; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
body .breakdance .dw-tick-bar-track { height: 4px; border-radius: 2px; overflow: hidden; }
body .breakdance .dw-tick-bar-track i { display: block; height: 100%; width: 0; border-radius: 2px; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .dw-tick-clear { align-self: flex-end; padding: 0; border: 0; background: none; cursor: pointer; color: inherit; font: 600 0.78rem/1.3 var(--dw-sans); text-decoration: underline; text-underline-offset: 3px; opacity: 0.85; }
body .breakdance .dw-rp-ingredients .dw-tick-bar { color: var(--dw-bone); }
body .breakdance .dw-rp-ingredients .dw-tick-bar-track { background: var(--dw-bone-20); }
body .breakdance .dw-rp-ingredients .dw-tick-bar-track i { background: var(--dw-bone); }
body .breakdance .dw-rp-method .dw-tick-bar { color: var(--dw-ink); }
body .breakdance .dw-rp-method .dw-tick-bar-track { background: rgba(66, 14, 26, 0.12); }
body .breakdance .dw-rp-method .dw-tick-bar-track i { background: var(--dw-ink); }
body .breakdance .dw-tick-bar.is-complete .dw-tick-bar-text::after { content: " – gotowe!"; font-weight: 700; }
body .breakdance .dw-tick-tip { display: none; }
@media (prefers-reduced-motion: reduce) {
  body .breakdance .dw-rp-ing-list li.is-hint::before, body .breakdance .dw-rp-method-list li.is-hint .dw-tick-box { animation: none; }
}
/* printed recipe = a checklist to tick with a pen: empty boxes stay, the progress line goes */
@media print {
  body .breakdance .dw-tick-bar { display: none !important; }
  body .breakdance .dw-rp-ing-list li.dw-tick::before { border-color: #420e1a !important; background: #fff !important; content: "" !important; }
  body .breakdance .dw-tick-box { border-color: #420e1a !important; background: #fff !important; }
  body .breakdance .dw-tick-box::after { content: none !important; }
}/* done: only the words fade, the ticked box keeps full colour */
body .breakdance li.dw-tick.is-done { opacity: 1; }
body .breakdance .dw-rp-ing-list li.dw-tick.is-done { color: var(--dw-bone-55); }
body .breakdance .dw-rp-method-list li.dw-tick.is-done { color: rgba(22, 22, 22, 0.42); }
body .breakdance .dw-rp-method-list li.dw-tick.is-done a { color: inherit; }
/* ---------- Stage 3 (Nov 2026): blog filters ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
body .breakdance .dw-postlist[hidden], .dw-bf-results[hidden], .dw-bf-empty[hidden] { display: none !important; }

/* blog: search + category chips over the list */
body .breakdance .dw-bf { width: 100%; margin: 0 0 var(--dw-s5); display: flex; flex-direction: column; gap: 1rem; }
body .breakdance .dw-bf-search { position: relative; max-width: 36rem; }
body .breakdance .dw-bf-search::before {
  content: ""; position: absolute; left: 1.1rem; top: 50%; width: 1.1rem; height: 1.1rem; margin-top: -0.55rem; background: var(--dw-ink-72); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .breakdance .dw-bf-search input {
  width: 100%; min-height: 3.2rem; padding: 0.8rem 1.2rem 0.8rem 3rem; border: 1.5px solid var(--dw-line-strong); border-radius: 999px;
  background: #fff; color: var(--dw-ink); font: 500 1rem/1.3 var(--dw-sans); transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body .breakdance .dw-bf-search input:focus { outline: none; border-color: var(--dw-ink); box-shadow: 0 0 0 4px rgba(66, 14, 26, 0.12); }
body .breakdance .dw-bf-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
body .breakdance .dw-bf-chip {
  display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1.05rem; border: 1.5px solid var(--dw-line-strong); border-radius: 999px;
  background: #fff; color: var(--dw-ink); font: 600 0.88rem/1.2 var(--dw-sans); cursor: pointer; text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
body .breakdance .dw-bf-chip span { font-weight: 500; opacity: 0.65; font-size: 0.8rem; }
body .breakdance .dw-bf-chip:hover { border-color: var(--dw-ink); }
body .breakdance .dw-bf-chip.is-on { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-bf-chip:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }
body .breakdance .dw-bf-status { margin: 0; font-size: 0.85rem; color: var(--dw-ink-72); min-height: 1.2em; }
body .breakdance .dw-bf-empty p { margin: 0; padding: 1.5rem; border-radius: 16px; background: #fff; border: 1.5px dashed var(--dw-line-strong); color: var(--dw-ink); text-align: center; }
body .breakdance .dw-bf-empty a { color: var(--dw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }




/* ---------- "Co się dzieje z moim winem?" (Nov 2026) – layout chosen by the author: symptom menu on the left,
   the chosen symptom on the right; on phones the menu becomes a strip to scroll sideways ---------- */
body .breakdance .dw-diag-ico--nie-pracuje { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 10 5 10 9s-10 4-10 9M17 3c0 5-10 5-10 9s10 4 10 9'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--przestalo-pracowac { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--metne-wino { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 18h10a4 4 0 0 0 .6-7.96A6 6 0 0 0 6.2 11.6 3.3 3.3 0 0 0 7 18z'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--zapach-siarki { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19c-2-3 2-5 0-8s2-5 0-8M12 21c-2-3 2-5 0-8s2-5 0-8M18 19c-2-3 2-5 0-8s2-5 0-8'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--bialy-nalot { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h12l-1.6 16H7.6z'/%3E%3Cpath d='M6.6 9h10.8' stroke-width='3.2'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--zapach-octu { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c3.2 4.2 6 7.4 6 11a6 6 0 0 1-12 0c0-3.6 2.8-6.8 6-11z'/%3E%3C/svg%3E"); }
body .breakdance .dw-diag-ico--musuje-w-butelce { --dw-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='15.5' r='3.5'/%3E%3Ccircle cx='15.5' cy='9' r='2.6'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.8'/%3E%3Ccircle cx='9' cy='6.5' r='1.6'/%3E%3C/svg%3E"); }
body .breakdance .bde-section.dw-diag-band { background: var(--dw-bone); padding: 0 0 var(--dw-band); }
body .breakdance .dw-diag-grid { width: 100%; display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); align-items: start; }

/* menu */
body .breakdance .dw-diag-pick {
  position: sticky; top: calc(var(--dw-header-h) + 1rem); padding: 1rem 0.7rem 0.7rem; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 48px -36px rgba(66, 14, 26, 0.55);
}
body .breakdance .bde-text.dw-diag-pick-title { margin: 0 0 0.6rem 0.75rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .dw-diag-chips { display: flex; flex-direction: column; gap: 0.2rem; }
body .breakdance .bde-text-link.dw-diag-chip {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.55rem 0.75rem; border-radius: 12px;
  color: var(--dw-ink); font: 600 0.95rem/1.25 var(--dw-sans); text-decoration: none; transition: background 0.18s ease, color 0.18s ease;
}
body .breakdance .bde-text-link.dw-diag-chip::before {
  content: ""; flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--dw-bone); transition: background 0.18s ease;
}
body .breakdance .bde-text-link.dw-diag-chip::after {
  content: ""; position: absolute; width: 1.2rem; height: 1.2rem; margin-left: 0.55rem; background: var(--dw-ink);
  -webkit-mask: var(--dw-ico) center / contain no-repeat; mask: var(--dw-ico) center / contain no-repeat;
}
body .breakdance .bde-text-link.dw-diag-chip { position: relative; }
body .breakdance .bde-text-link.dw-diag-chip:hover { background: #f7f3ef; }
body .breakdance .bde-text-link.dw-diag-chip.is-on { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .bde-text-link.dw-diag-chip.is-on::before { background: rgba(220, 209, 197, 0.16); }
body .breakdance .bde-text-link.dw-diag-chip.is-on::after { background: var(--dw-bone); }
body .breakdance .bde-text-link.dw-diag-chip:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }

/* the chosen symptom */
body .breakdance .dw-diag-panels { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
body .breakdance .dw-diag-grid.is-js .dw-diag-card[hidden] { display: none !important; }
body .breakdance .dw-diag-card {
  padding: clamp(1.5rem, 3.4vw, 2.6rem); border-radius: 22px; background: #fff; box-shadow: 0 24px 48px -36px rgba(66, 14, 26, 0.55);
}
body .breakdance .dw-diag-card.is-on { animation: dw-calc-row-in 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
body .breakdance .bde-heading.dw-diag-h2 {
  position: relative; margin: 0; padding-left: 4.2rem; min-height: 3.2rem; display: flex; align-items: center;
  font-family: var(--dw-display); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--dw-ink);
  scroll-margin-top: calc(var(--dw-header-h) + 1.5rem);
}
body .breakdance .bde-heading.dw-diag-h2::before { content: ""; position: absolute; left: 0; top: 50%; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; border-radius: 50%; background: var(--dw-ink); }
body .breakdance .bde-heading.dw-diag-h2::after {
  content: ""; position: absolute; left: 0.85rem; top: 50%; width: 1.5rem; height: 1.5rem; margin-top: -0.75rem; background: var(--dw-bone);
  -webkit-mask: var(--dw-ico) center / contain no-repeat; mask: var(--dw-ico) center / contain no-repeat;
}
body .breakdance .dw-diag-short { margin-top: 1.2rem; padding-bottom: 1.3rem; border-bottom: 1px solid var(--dw-line); font-size: 1.06rem; line-height: 1.7; color: #161616; }
body .breakdance .dw-diag-short p { margin: 0; }
body .breakdance .dw-diag-body { margin-top: 0.4rem; }
body .breakdance .dw-diag-causes { margin: 0; padding: 0; list-style: none; counter-reset: dw-diag; }
body .breakdance .dw-diag-causes li {
  counter-increment: dw-diag; position: relative; padding: 1.25rem 0 1.25rem 2.8rem; border-bottom: 1px solid var(--dw-line);
  color: var(--dw-ink-72); font-size: 0.96rem; line-height: 1.65;
}
body .breakdance .dw-diag-causes li:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
body .breakdance .dw-diag-causes li::before {
  content: counter(dw-diag); position: absolute; left: 0; top: 1.25rem; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--dw-ink); color: var(--dw-ink); font-weight: 700; font-size: 0.82rem;
}
body .breakdance .dw-diag-causes p { margin: 0.3rem 0 0; }
body .breakdance .dw-diag-causes p.dw-diag-cause-title { margin: 0.1rem 0 0; font-weight: 700; font-size: 1.08rem; color: var(--dw-ink); }
body .breakdance .dw-diag-causes p.dw-diag-do { margin-top: 0.7rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--dw-bone); color: #161616; font-size: 0.98rem; }
body .breakdance .dw-diag-causes p.dw-diag-do strong { color: var(--dw-ink); }
body .breakdance .dw-diag-causes p.dw-diag-from { margin-top: 0.5rem; font-size: 0.78rem; color: var(--dw-ink-72); }
body .breakdance .dw-diag-causes a { color: var(--dw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  body .breakdance .dw-diag-grid { grid-template-columns: 1fr; }
  body .breakdance .dw-diag-pick {
    top: var(--dw-header-h); z-index: 20; margin: 0 calc(-1 * var(--dw-gutter)); padding: 0.7rem var(--dw-gutter); border-radius: 0;
    background: var(--dw-bone); box-shadow: 0 10px 20px -18px rgba(66, 14, 26, 0.6);
  }
  body .breakdance .bde-text.dw-diag-pick-title { display: none; }
  body .breakdance .dw-diag-chips { flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 0.45rem; -webkit-overflow-scrolling: touch; }
  body .breakdance .dw-diag-chips::-webkit-scrollbar { display: none; }
  body .breakdance .bde-text-link.dw-diag-chip { width: auto; flex-shrink: 0; white-space: nowrap; padding: 0.35rem 0.9rem 0.35rem 0.35rem; gap: 0.55rem; background: #fff; border-radius: 999px; font-size: 0.86rem; }
  body .breakdance .bde-text-link.dw-diag-chip::before { width: 1.9rem; height: 1.9rem; }
  body .breakdance .bde-text-link.dw-diag-chip::after { width: 1rem; height: 1rem; margin-left: 0.45rem; }
  body .breakdance .bde-heading.dw-diag-h2 { padding-left: 3.6rem; }
  body .breakdance .bde-heading.dw-diag-h2::before { width: 2.7rem; height: 2.7rem; margin-top: -1.35rem; }
  body .breakdance .bde-heading.dw-diag-h2::after { left: 0.7rem; width: 1.3rem; height: 1.3rem; margin-top: -0.65rem; }
  body .breakdance .dw-diag-causes li { padding-left: 2.5rem; }
}/* phones: the sideways strip scrolls inside itself and never widens the page */
@media (max-width: 900px) {
  body .breakdance .dw-diag-grid { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-diag-grid > * { min-width: 0; }
  body .breakdance .dw-diag-chips { max-width: 100%; }
}/* "Co się dzieje z moim winem?" – two colours only (author, 4 Nov 2026): no near-black, no Breakdance slate grey,
   no grey hover; text in maroon and its tints, surfaces in cream, its tints and white */
body .breakdance .bde-section.dw-diag-band,
body .breakdance .bde-section.dw-diag-band .section-container { color: var(--dw-ink); }
body .breakdance .dw-diag-short { color: var(--dw-ink); }
body .breakdance .dw-diag-causes p.dw-diag-do { color: var(--dw-ink); }
body .breakdance .bde-text-link.dw-diag-chip:hover { background: rgba(220, 209, 197, 0.45); }body .breakdance .dw-diag-body,
body .breakdance .dw-diag-body .breakdance-rich-text-styles { color: var(--dw-ink-72); }
/* the intro of this page only (posts keep the near-black body text the author chose for articles) */
body .breakdance:has(.dw-diag-band) .bde-text.dw-rp-lead { color: var(--dw-ink); }body .breakdance:has(.dw-diag-band) .bde-section.dw-rp-intro, body .breakdance:has(.dw-diag-band) .bde-section.dw-rp-intro .section-container { color: var(--dw-ink); }
/* cause numbers: filled maroon discs with cream digits (author, 4 Nov 2026) */
body .breakdance .dw-diag-causes li::before { background: var(--dw-ink); border: 0; color: var(--dw-bone); }
/* ---------- Batch planner v2 "Notes winiarza" (/planer-nastawu-wina/, author's choice 4 Nov 2026) ----------
   plan.js fills .dw-plan-app: a notebook spread (left page: fruit tiles and settings; right page: a ruled shopping
   sheet to tick off, with a maroon strength box) and the schedule as tear-off calendar pages.
   Brand colours only: maroon, cream, their tints, white. */
body .breakdance .dw-plan-app { width: 100%; }
body .breakdance .dw-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body .breakdance .dw-plan p { margin: 0; }

/* notebook */
body .breakdance .dw-nb {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #fff; border-radius: 18px;
  box-shadow: 0 40px 80px -48px rgba(66, 14, 26, 0.6), 0 2px 0 rgba(66, 14, 26, 0.04), 6px 6px 0 -1px #efe7df, 12px 12px 0 -2px #e4dad1;
}
/* spiral binding down the middle */
body .breakdance .dw-nb-rings {
  position: absolute; top: 1.2rem; bottom: 1.2rem; left: 50%; width: 2.4rem; transform: translateX(-50%); z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--dw-bone) 0 3.5px, var(--dw-ink) 4.5px 6.5px, transparent 7.5px) center top / 100% 2.1rem repeat-y;
}
body .breakdance .dw-nb-page { min-width: 0; padding: clamp(1.5rem, 3.2vw, 2.75rem); }
body .breakdance .dw-nb-left { padding-right: clamp(2rem, 4vw, 3.5rem); }
body .breakdance .dw-nb-right {
  padding-left: clamp(3rem, 5vw, 4.25rem); border-radius: 0 18px 18px 0;
  background: linear-gradient(to right, transparent 0 calc(clamp(3rem, 5vw, 4.25rem) - 0.9rem), rgba(66, 14, 26, 0.28) 0 calc(clamp(3rem, 5vw, 4.25rem) - 0.9rem + 1.5px), transparent 0), #fffdfb;
  box-shadow: inset 14px 0 18px -16px rgba(66, 14, 26, 0.35);
}

/* left page */
body .breakdance .dw-nb-label { display: flex; align-items: center; gap: 0.7rem; margin: 1.9rem 0 0.9rem !important; font-size: 1.05rem; font-weight: 700; color: var(--dw-ink); letter-spacing: -0.01em; }
body .breakdance .dw-nb-label:first-child { margin-top: 0 !important; }
body .breakdance .dw-nb-label span {
  display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--dw-ink); color: var(--dw-bone); font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
body .breakdance .dw-nb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; }
body .breakdance .dw-nb-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.85rem 0.4rem 0.75rem; border: 1.5px solid var(--dw-calc-line);
  border-radius: 14px; background: #fff; color: var(--dw-ink); cursor: pointer; font: 600 0.84rem/1.2 var(--dw-sans);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
body .breakdance .dw-nb-tile svg { width: 2.3rem; height: 2.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
body .breakdance .dw-nb-tile:hover { border-color: var(--dw-ink); transform: translateY(-2px); box-shadow: 0 10px 18px -14px rgba(66, 14, 26, 0.8); }
body .breakdance .dw-nb-tile.is-on { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 12px 22px -14px rgba(66, 14, 26, 0.95); }
body .breakdance .dw-nb-tile:focus-visible, body .breakdance .dw-nb-seg button:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }

body .breakdance .dw-nb-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1rem; border-radius: 14px; background: var(--dw-calc-soft); }
body .breakdance .dw-nb-seg button {
  padding: 0.7rem 0.5rem; border: 0; border-radius: 10px; background: transparent; color: var(--dw-ink); cursor: pointer;
  font: 600 0.86rem/1.2 var(--dw-sans); transition: background 0.2s ease, color 0.2s ease;
}
body .breakdance .dw-nb-seg button:hover:not(:disabled) { background: #fff; }
body .breakdance .dw-nb-seg button.is-on { background: var(--dw-ink); color: var(--dw-bone); box-shadow: 0 8px 16px -10px rgba(66, 14, 26, 0.9); }
body .breakdance .dw-nb-seg button:disabled { opacity: 0.4; cursor: not-allowed; }
body .breakdance .dw-nb-mode { display: flex; flex-direction: column; gap: 0.7rem; }
body .breakdance .dw-nb-mode--moc { display: none; }
body .breakdance .dw-plan.is-moc .dw-nb-mode--moc { display: flex; }
body .breakdance .dw-plan.is-moc .dw-nb-mode--przepis { display: none; }
body .breakdance .dw-nb-slider.is-fixed .dw-calc-range,
body .breakdance .dw-nb-slider.is-fixed .dw-calc-range-scale { display: none; }
body .breakdance .dw-nb-date { max-width: 15rem; }
body .breakdance .dw-nb-date input { padding-right: 0.9rem; }

/* right page: ruled shopping sheet */
body .breakdance .dw-nb-sheet-title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .dw-nb-sheet-sub { margin-top: 0.45rem !important; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--dw-ink); }
body .breakdance .dw-nb-empty { margin-top: 1rem !important; color: var(--dw-ink-72); }
body .breakdance .dw-nb-lines {
  margin: 1.1rem 0 0; padding: 0; list-style: none;
  background: linear-gradient(to bottom, transparent calc(100% - 1px), rgba(220, 209, 197, 0.95) 0) 0 0 / 100% 2.75rem;
  border-top: 1px solid rgba(220, 209, 197, 0.95);
}
body .breakdance .dw-nb-line { position: relative; margin: 0; padding: 0; min-height: 2.75rem; display: flex; align-items: center; }
body .breakdance .dw-nb-line::before { display: none; }
body .breakdance .dw-nb-line input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .breakdance .dw-nb-line label { display: flex; align-items: center; gap: 0.6rem; width: 100%; cursor: pointer; }
body .breakdance .dw-nb-line i,
body .breakdance .dw-cal-tick i {
  position: relative; flex-shrink: 0; width: 1.15rem; height: 1.15rem; border: 1.6px solid var(--dw-ink); border-radius: 4px; background: #fff;
  transition: background 0.18s ease;
}
body .breakdance .dw-nb-line i::after,
body .breakdance .dw-cal-tick i::after {
  content: ""; position: absolute; left: 0.33rem; top: 0.1rem; width: 0.3rem; height: 0.6rem; border: solid var(--dw-bone); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform 0.18s ease;
}
body .breakdance .dw-nb-line input:checked + label i,
body .breakdance .dw-cal-page input:checked + .dw-cal-tick i { background: var(--dw-ink); }
body .breakdance .dw-nb-line input:checked + label i::after,
body .breakdance .dw-cal-page input:checked + .dw-cal-tick i::after { transform: rotate(45deg) scale(1); }
body .breakdance .dw-nb-line input:focus-visible + label i,
body .breakdance .dw-cal-page input:focus-visible + .dw-cal-tick i { outline: 3px solid var(--dw-ink); outline-offset: 2px; }
body .breakdance .dw-nb-name { font-size: 0.95rem; color: var(--dw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .breakdance .dw-nb-dots { flex: 1 1 1rem; min-width: 0.8rem; height: 0; border-bottom: 2px dotted rgba(66, 14, 26, 0.28); transform: translateY(0.3rem); }
body .breakdance .dw-nb-line strong { font-size: 1rem; font-weight: 700; color: var(--dw-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
body .breakdance .dw-nb-line.is-done .dw-nb-name,
body .breakdance .dw-nb-line.is-done strong { opacity: 0.45; text-decoration: line-through; }
body .breakdance .dw-nb-portions { margin-top: 0.9rem !important; font-size: 0.86rem; color: var(--dw-ink-72); }
body .breakdance .dw-nb-portions b { color: var(--dw-ink); }
body .breakdance .dw-nb-abv {
  margin-top: 1.3rem; padding: 1.1rem 1.25rem; border-radius: 14px; color: var(--dw-bone);
  background: radial-gradient(120% 90% at 0% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; align-items: baseline;
}
body .breakdance .dw-nb-abv span { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dw-bone-80); }
body .breakdance .dw-nb-abv strong { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; line-height: 1; white-space: nowrap; }
body .breakdance .dw-nb-abv p { grid-column: 1 / -1; margin-top: 0.45rem !important; font-size: 0.84rem; line-height: 1.55; color: var(--dw-bone); }
body .breakdance .dw-nb-fine { margin-top: 1rem !important; font-size: 0.76rem; line-height: 1.55; color: var(--dw-ink-72); }
body .breakdance .dw-nb-fine a { color: var(--dw-ink); font-weight: 600; text-underline-offset: 3px; }

/* schedule: tear-off calendar pages */
body .breakdance .dw-cal { margin-top: 2.25rem; scroll-margin-top: calc(var(--dw-header-h) + 1rem); }
body .breakdance .dw-cal:empty { display: none; }
body .breakdance .dw-cal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 1.4rem; }
body .breakdance .dw-cal-title { margin-top: 0.45rem !important; font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--dw-ink); }
body .breakdance .dw-plan-progress { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.75rem !important; font-size: 0.8rem; color: var(--dw-ink-72); }
body .breakdance .dw-plan-progress span { width: 9rem; height: 6px; border-radius: 3px; background: rgba(66, 14, 26, 0.12); overflow: hidden; }
body .breakdance .dw-plan-progress i { display: block; height: 100%; background: var(--dw-ink); border-radius: 3px; transition: width 0.35s ease; }
body .breakdance .dw-plan-progress b { font-weight: 600; }
body .breakdance .dw-plan-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
body .breakdance .dw-plan-btn {
  padding: 0.8rem 1.35rem; border: 1.5px solid var(--dw-ink); border-radius: 999px; background: var(--dw-ink); color: var(--dw-bone);
  font: 600 0.88rem/1.2 var(--dw-sans); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
body .breakdance .dw-plan-btn:hover { transform: translateY(-1px); background: #5a1524; }
body .breakdance .dw-plan-btn--ghost { background: transparent; color: var(--dw-ink); }
body .breakdance .dw-plan-btn--ghost:hover { background: rgba(255, 255, 255, 0.6); }
body .breakdance .dw-plan-btn:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }

body .breakdance .dw-cal-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
body .breakdance .dw-cal-page {
  position: relative; display: flex; flex-direction: column; margin: 0; padding: 0; overflow: hidden; background: #fff; border-radius: 12px;
  box-shadow: 0 22px 40px -30px rgba(66, 14, 26, 0.7), 0 1px 0 rgba(66, 14, 26, 0.05); transition: opacity 0.2s ease, transform 0.2s ease;
}
body .breakdance .dw-cal-page::before { display: none; }
body .breakdance .dw-cal-page:hover { transform: translateY(-2px); }
/* the maroon top of a calendar page with two binding holes */
body .breakdance .dw-cal-mon {
  padding: 0.85rem 0 0.55rem; text-align: center; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--dw-bone); background:
    radial-gradient(circle at 30% 0.45rem, var(--dw-bone) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 70% 0.45rem, var(--dw-bone) 0 2.5px, transparent 3.5px), var(--dw-ink);
}
body .breakdance .dw-cal-day {
  padding: 0.55rem 0 0.6rem; text-align: center; font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--dw-ink);
  font-variant-numeric: tabular-nums; border-bottom: 1.5px dashed var(--dw-calc-line);
}
body .breakdance .dw-cal-step { padding: 0.9rem 1.1rem 0; font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: var(--dw-ink); }
body .breakdance .dw-cal-text { flex: 1; padding: 0.4rem 1.1rem 0; font-size: 0.84rem; line-height: 1.6; color: var(--dw-ink-72); }
body .breakdance .dw-cal-text a { color: var(--dw-ink); font-weight: 600; text-underline-offset: 3px; }
body .breakdance .dw-cal-page input { position: absolute; opacity: 0; width: 1px; height: 1px; }
body .breakdance .dw-cal-tick {
  display: flex; align-items: center; gap: 0.55rem; margin: 0.9rem 1.1rem 1.1rem; padding-top: 0.8rem; border-top: 1px solid var(--dw-calc-line);
  font-size: 0.82rem; font-weight: 600; color: var(--dw-ink); cursor: pointer;
}
body .breakdance .dw-cal-page.is-done { opacity: 0.55; }
body .breakdance .dw-cal-page.is-done .dw-cal-step { text-decoration: line-through; text-decoration-thickness: 1.5px; }
body .breakdance .dw-plan-note { margin-top: 1.3rem !important; }

@media (max-width: 900px) {
  body .breakdance .dw-nb { grid-template-columns: minmax(0, 1fr); }
  /* one page under the other: no binding, a dashed fold between them */
  body .breakdance .dw-nb-rings { display: none; }
  body .breakdance .dw-nb-left { padding-right: clamp(1.5rem, 3.2vw, 2.75rem); }
  body .breakdance .dw-nb-right { border-radius: 0 0 18px 18px; border-top: 1.5px dashed var(--dw-calc-line); }
}
@media (max-width: 700px) {
  body .breakdance .dw-plan-actions, body .breakdance .dw-plan-btn { width: 100%; }
  body .breakdance .dw-plan-btn { text-align: center; }
  body .breakdance .dw-cal-pages { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-cal-page { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); }
  body .breakdance .dw-cal-mon { grid-column: 1; grid-row: 1; padding: 0.9rem 0 0.35rem; }
  body .breakdance .dw-cal-day { grid-column: 1; grid-row: 2 / span 3; border-bottom: 0; border-right: 1.5px dashed var(--dw-calc-line); background: #fffdfb; font-size: 1.9rem; padding-top: 0.7rem; }
  body .breakdance .dw-cal-step { grid-column: 2; grid-row: 1 / span 1; padding-top: 0.85rem; }
  body .breakdance .dw-cal-text { grid-column: 2; grid-row: 2; }
  body .breakdance .dw-cal-tick { grid-column: 2; grid-row: 3; }
  /* three tabs (two calculators + planner) still fit a phone */
  body .breakdance .dw-calc-tabs { display: flex; max-width: 100%; }
  body .breakdance .dw-calc-tab { flex: 1 1 auto; text-align: center; white-space: nowrap; padding: 0.6rem 0.7rem; font-size: 0.8rem; }
  body .breakdance .dw-nb-name { white-space: normal; }
}

/* printing: only the shopping sheet and the calendar pages */
@media print {
  body.dw-print-plan .breakdance > .bde-section:not(.dw-plan-band) { display: none !important; }
  body.dw-print-plan .breakdance .dw-calc-tabs,
  body.dw-print-plan .breakdance .dw-nb-left,
  body.dw-print-plan .breakdance .dw-nb-rings,
  body.dw-print-plan .breakdance .dw-plan-actions,
  body.dw-print-plan .breakdance .dw-plan-progress { display: none !important; }
  body.dw-print-plan .breakdance .bde-section.dw-plan-band { padding: 0 !important; background: #fff !important; }
  body.dw-print-plan .breakdance .dw-nb { display: block; box-shadow: none; border: 1px solid #c9bcb0; border-radius: 10px; }
  body.dw-print-plan .breakdance .dw-nb-right { padding: 6mm 6mm 6mm 12mm; border: 0; box-shadow: none; }
  body.dw-print-plan .breakdance .dw-nb-abv { background: #fff !important; border: 1.5px solid #420e1a; color: #420e1a; }
  body.dw-print-plan .breakdance .dw-nb-abv span, body.dw-print-plan .breakdance .dw-nb-abv strong, body.dw-print-plan .breakdance .dw-nb-abv p { color: #420e1a !important; }
  body.dw-print-plan .breakdance .dw-cal { margin-top: 6mm; }
  body.dw-print-plan .breakdance .dw-cal-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3mm; }
  body.dw-print-plan .breakdance .dw-cal-page { box-shadow: none; border: 1px solid #c9bcb0; break-inside: avoid; opacity: 1; }
  body.dw-print-plan::before {
    content: "DOMOWA WINNICA · domowawinnica.com.pl/planer-nastawu-wina/"; display: block; margin-bottom: 4mm; padding-bottom: 2mm;
    border-bottom: 2px solid #420e1a; font: 600 8.5pt/1.4 Poppins, sans-serif; letter-spacing: 0.1em; color: #420e1a;
  }
}

body .breakdance .dw-cal-day small { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0; color: var(--dw-ink-72); }
body .breakdance .dw-nb-tile svg { width: 2.6rem; height: 2.6rem; }
/* ---------- "Słownik winiarski" (/slownik-winiarski/, Nov 2026) ----------
   A search box and a sticky letter bar, then the terms grouped by letter: a big letter on the left, white cards with
   the term (H2), the definition, links to the author's posts and the source. Brand colours only. */
body .breakdance .bde-section.dw-gl-band { background: var(--dw-bone); padding: 0 0 var(--dw-band); }
body .breakdance .dw-gl-band p { margin: 0; }
body .breakdance .dw-gl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }
body .breakdance .dw-gl-tools:empty { display: none; }
body .breakdance .dw-gl-search { position: relative; flex: 1 1 22rem; max-width: 34rem; }
body .breakdance .dw-gl-search::before {
  content: ""; position: absolute; left: 1.15rem; top: 50%; width: 1.1rem; height: 1.1rem; transform: translateY(-50%); pointer-events: none;
  background: var(--dw-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m20 20-4.6-4.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .breakdance .dw-gl-search input {
  width: 100%; min-height: 3.2rem; padding: 0.8rem 1.2rem 0.8rem 3rem; border: 1.5px solid transparent; border-radius: 999px; background: #fff;
  color: var(--dw-ink); font: 500 1rem/1.3 var(--dw-sans); box-shadow: 0 16px 34px -26px rgba(66, 14, 26, 0.7); -webkit-appearance: none; appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
body .breakdance .dw-gl-search input::placeholder { color: var(--dw-ink-72); opacity: 0.8; }
body .breakdance .dw-gl-search input:focus { outline: none; border-color: var(--dw-ink); box-shadow: 0 0 0 4px rgba(66, 14, 26, 0.12); }
body .breakdance .dw-gl-count { font-size: 0.85rem; font-weight: 600; color: var(--dw-ink-72); }

/* letter bar: sticky under the header */
body .breakdance .dw-gl-letters {
  position: sticky; top: var(--dw-header-h); z-index: 15; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 1.25rem 0 0.5rem; padding: 0.7rem 0;
  background: rgba(220, 209, 197, 0.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(66, 14, 26, 0.12);
}
body .breakdance .dw-gl-letter {
  display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  font-size: 0.9rem; font-weight: 700; color: var(--dw-ink); text-decoration: none; background: #fff; transition: background 0.18s ease, color 0.18s ease;
}
body .breakdance a.dw-gl-letter:hover, body .breakdance a.dw-gl-letter.is-on { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance a.dw-gl-letter:focus-visible { outline: 3px solid var(--dw-ink); outline-offset: 2px; }
body .breakdance .dw-gl-letter.is-empty { background: transparent; color: var(--dw-ink); opacity: 0.3; }
body .breakdance .dw-gl-band.is-filtered .dw-gl-letters { display: none; }

/* groups */
body .breakdance .dw-gl-group { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.5rem; padding: 2rem 0; border-top: 1px solid rgba(66, 14, 26, 0.14); }
body .breakdance .dw-gl-group:first-of-type { border-top: 0; }
body .breakdance .dw-gl-big {
  position: sticky; top: calc(var(--dw-header-h) + 4.5rem); align-self: start;
  font-size: 4.2rem; font-weight: 700; line-height: 0.9; letter-spacing: -0.04em; color: var(--dw-ink);
}
body .breakdance .dw-gl-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
body .breakdance .dw-gl-term {
  padding: 1.4rem 1.5rem 1.3rem; background: #fff; border-radius: 16px; box-shadow: 0 22px 40px -32px rgba(66, 14, 26, 0.7);
  border-top: 4px solid var(--dw-ink); transition: box-shadow 0.2s ease;
}
body .breakdance .bde-heading.dw-gl-h2 {
  margin: 0 0 0.55rem; font-size: 1.18rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--dw-ink);
  scroll-margin-top: calc(var(--dw-header-h) + 5rem);
}
body .breakdance .dw-gl-def p { font-size: 0.94rem; line-height: 1.7; color: var(--dw-ink); }
body .breakdance .dw-gl-def p + p { margin-top: 0.6rem; }
body .breakdance .dw-gl-def .dw-gl-more { padding-top: 0.6rem; border-top: 1px dashed rgba(66, 14, 26, 0.18); font-size: 0.83rem; }
body .breakdance .dw-gl-def .dw-gl-src { margin-top: 0.3rem; font-size: 0.76rem; color: var(--dw-ink-72); }
body .breakdance .dw-gl-def a { color: var(--dw-ink); font-weight: 600; text-underline-offset: 3px; }
body .breakdance .dw-gl-term:has(h2:target) { box-shadow: 0 0 0 3px var(--dw-ink), 0 22px 40px -32px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-gl-empty { margin-top: 1.5rem !important; padding: 1.3rem 1.5rem; border-radius: 16px; border: 1.5px dashed rgba(66, 14, 26, 0.3); color: var(--dw-ink); }
body .breakdance .dw-gl-empty a { color: var(--dw-ink); font-weight: 600; }

@media (max-width: 900px) {
  body .breakdance .dw-gl-terms { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  body .breakdance .dw-gl-group { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 1.4rem 0; }
  body .breakdance .dw-gl-big { position: static; font-size: 2.6rem; }
  body .breakdance .dw-gl-letters { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--dw-gutter)); margin-right: calc(-1 * var(--dw-gutter)); padding-left: var(--dw-gutter); padding-right: var(--dw-gutter); scrollbar-width: none; }
  body .breakdance .dw-gl-letters::-webkit-scrollbar { display: none; }
  body .breakdance .dw-gl-letter { flex-shrink: 0; }
  body .breakdance .dw-gl-term { padding: 1.2rem 1.2rem 1.1rem; }
}

/* Breakdance's Div is a column by default: the search row and the letter bar run in a row */
body .breakdance .dw-gl-tools, body .breakdance .dw-gl-letters { flex-direction: row; }
body .breakdance .dw-gl-tools { align-items: center; }
body .breakdance .dw-gl-search { display: block; }
body .breakdance .dw-gl-letters > .bde-text, body .breakdance .dw-gl-letters > a { margin: 0; }
/* ---------- Phone menu v3 "Karta od dołu" (author's choice, 4 Nov 2026; the maroon full-screen panel was "brzydkie") ----------
   The menu slides up from the bottom as a cream sheet with rounded top corners and a handle; the page above stays
   visible, dimmed (a tap there closes the sheet – script.js). Inside: a 2×2 grid of big tiles with icons (Strona
   główna, Blog, Narzędzia, O mnie), the three tools as a white list underneath, then the social icons.
   CSS only – every page's header stays as it is in Breakdance. Brand colours only. */
@media (max-width: 880px) {
  /* dim layer over the page, under the sheet; the white bar with the logo and the close button stays clear */
  body .breakdance .dw-header::after {
    content: ""; position: fixed; left: 0; right: 0; top: var(--dw-header-h); bottom: 0; z-index: 55;
    background: rgba(66, 14, 26, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  body .breakdance .dw-header.is-open::after { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* the sheet */
  body .breakdance .dw-header .dw-nav {
    top: auto; bottom: 0; left: 0; right: 0; max-height: calc(100vh - var(--dw-header-h) - 1.5rem); max-height: calc(100dvh - var(--dw-header-h) - 1.5rem);
    display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 0.6rem;
    padding: 0.7rem var(--dw-gutter) calc(1.2rem + env(safe-area-inset-bottom));
    background: var(--dw-bone); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 50px -20px rgba(66, 14, 26, 0.55);
    transform: translateY(105%); visibility: hidden;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s;
  }
  body .breakdance .dw-header.is-open .dw-nav { transform: none; visibility: visible; transition-delay: 0s; }
  /* handle */
  body .breakdance .dw-header .dw-nav::before {
    content: ""; grid-column: 1 / -1; order: -1; justify-self: center; width: 2.6rem; height: 5px; margin: 0 0 0.6rem;
    border-radius: 3px; background: rgba(66, 14, 26, 0.25);
  }
  body .breakdance .dw-header .dw-nav-drop { display: contents; }

  /* the four tiles */
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 0.9rem; min-height: 6.6rem;
    padding: 1rem 1rem 0.95rem; border: 0; border-radius: 18px; background: #fff;
    font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--dw-ink); text-transform: none;
    box-shadow: 0 14px 26px -22px rgba(66, 14, 26, 0.8);
  }
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link::after { display: none; }
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link::before,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop::before {
    content: ""; display: block; position: static; flex-shrink: 0; width: 2.4rem; height: 2.4rem; margin: 0; border: 0; border-radius: 50%; transform: none;
    background: rgba(220, 209, 197, 0.6) var(--dw-tile-ico) center / 1.2rem no-repeat;
  }
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link:hover,
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link:focus-visible { color: var(--dw-ink); outline-color: var(--dw-ink); }
  /* the section you are in: a maroon tile */
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link.is-current { background: var(--dw-ink); color: var(--dw-bone); font-weight: 700; }
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link.is-current::before { background-color: rgba(220, 209, 197, 0.16); background-image: var(--dw-tile-ico-on); }
  /* icons: house, open book, tools, person (maroon; cream on the current tile) */
  body .breakdance .dw-header .dw-nav-link[href="/"] {
    --dw-tile-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4zM10 20v-5h4v5'/%3E%3C/svg%3E");
    --dw-tile-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11 12 4l8 7v9H4zM10 20v-5h4v5'/%3E%3C/svg%3E");
  }
  body .breakdance .dw-header .dw-nav-link[href*="/blog"] {
    --dw-tile-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-1.5v14c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5v-14c-3-.5-6 0-8 1.5zM12 6v14'/%3E%3C/svg%3E");
    --dw-tile-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6c-2-1.5-5-2-8-1.5v14c3-.5 6 0 8 1.5 2-1.5 5-2 8-1.5v-14c-3-.5-6 0-8 1.5zM12 6v14'/%3E%3C/svg%3E");
  }
  body .breakdance .dw-header .dw-nav-link--drop {
    --dw-tile-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M16.5 13v7M13 16.5h7'/%3E%3C/svg%3E");
    --dw-tile-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Cpath d='M16.5 13v7M13 16.5h7'/%3E%3C/svg%3E");
  }
  body .breakdance .dw-header .dw-nav-link[href*="/o-mnie"] {
    --dw-tile-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
    --dw-tile-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
  }

  /* the tools: a white list under the tiles */
  body .breakdance .dw-header .dw-nav-sub,
  body .breakdance .dw-header .dw-nav-drop:hover .dw-nav-sub,
  body .breakdance .dw-header .dw-nav-drop:focus-within .dw-nav-sub {
    grid-column: 1 / -1; order: 5; display: flex; flex-direction: column; margin-top: 0.2rem; padding: 0.3rem 1rem;
    background: #fff; border: 0; border-radius: 18px; box-shadow: 0 14px 26px -22px rgba(66, 14, 26, 0.8);
  }
  body .breakdance .dw-header .dw-nav-sub::before {
    content: "Narzędzia"; display: block; position: static; height: auto; padding: 0.7rem 0 0.2rem;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72);
  }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; font-size: 0.98rem; font-weight: 500; color: var(--dw-ink);
    border-bottom: 1px solid rgba(66, 14, 26, 0.1); border-radius: 0;
  }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink:last-child { border-bottom: 0; }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink::before {
    content: ""; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
    background: rgba(220, 209, 197, 0.6) var(--dw-menu-ico) center / 1.05rem no-repeat;
  }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink::after {
    content: ""; margin-left: auto; width: 1rem; height: 1rem; flex-shrink: 0; opacity: 0.5;
    background: var(--dw-ink); -webkit-mask: var(--dw-arrow) center / contain no-repeat; mask: var(--dw-arrow) center / contain no-repeat;
  }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink:hover,
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink:focus-visible { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink.is-current { font-weight: 700; text-decoration: none; background: transparent; }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink.is-current::before { background-color: var(--dw-ink); background-image: var(--dw-menu-ico-on); }
  /* wine glass, scale, calendar */
  body .breakdance .dw-header .dw-nav-sublink[href*="kalkulator-mocy"] {
    --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10c0 6-2 9-5 9S7 9 7 3zM12 12v8M8 21h8M7.6 7h8.8'/%3E%3C/svg%3E");
    --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10c0 6-2 9-5 9S7 9 7 3zM12 12v8M8 21h8M7.6 7h8.8'/%3E%3C/svg%3E");
  }
  body .breakdance .dw-header .dw-nav-sublink[href*="kalkulator-cukru"] {
    --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M4 7h16M7 7l-3 6a3 3 0 0 0 6 0zM17 7l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
    --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M4 7h16M7 7l-3 6a3 3 0 0 0 6 0zM17 7l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
  }
  body .breakdance .dw-header .dw-nav-sublink[href*="planer-nastawu"] {
    --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
    --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
  }

  /* social icons at the bottom of the sheet */
  body .breakdance .dw-header .dw-nav-social {
    grid-column: 1 / -1; order: 6; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem;
    margin: 0.4rem 0 0; padding: 0.4rem 0.2rem 0; border: 0;
  }
  body .breakdance .dw-header .dw-nav-social::before {
    content: "Pasja zamknięta w każdej kropli"; font-size: 0.86rem; font-weight: 600; color: var(--dw-ink);
  }
  body .breakdance .dw-header .dw-nav-social .dw-social { width: auto; justify-content: flex-end; gap: 0.5rem; }
  body .breakdance .dw-header .dw-nav-social .dw-social .bde-social-icons__icon-wrapper {
    width: 2.6rem; height: 2.6rem; color: var(--dw-ink); border-color: rgba(66, 14, 26, 0.25); background: transparent;
  }
  body .breakdance .dw-header .dw-nav-social .dw-social .bde-social-icons__icon-wrapper:hover { background: var(--dw-ink); border-color: var(--dw-ink); color: var(--dw-bone); }
}

@media (max-width: 880px) and (max-height: 700px) {
  /* short phones: lower tiles, so the tools and the icons fit without scrolling */
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop { min-height: 5.2rem; gap: 0.5rem; padding: 0.8rem 0.9rem; }
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link::before,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop::before { width: 2rem; height: 2rem; background-size: 1rem; }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink { padding: 0.5rem 0; }
}
@media (max-width: 880px) {
  body .breakdance .dw-header .dw-nav-social .dw-social { flex-direction: row; flex-wrap: nowrap; flex-shrink: 0; }
  body .breakdance .dw-header .dw-nav-social::before { flex: 1 1 auto; min-width: 0; }
}
/* Phone menu v3, colours (author, 4 Nov 2026: "kolorystykę na bardziej bordową"): a maroon sheet with soft cream
   tiles and cream icons; the section you are in is a cream tile with maroon text and icon. */
@media (max-width: 880px) {
  body .breakdance .dw-header::after { background: rgba(30, 6, 12, 0.55); }
  body .breakdance .dw-header .dw-nav {
    background: radial-gradient(120% 60% at 15% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
    box-shadow: 0 -20px 50px -20px rgba(30, 6, 12, 0.7);
  }
  body .breakdance .dw-header .dw-nav::before { background: rgba(220, 209, 197, 0.35); }
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop {
    background: rgba(220, 209, 197, 0.1); color: var(--dw-bone); box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14);
  }
  body .breakdance .dw-header .dw-nav > .bde-text-link.dw-nav-link::before,
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop::before {
    background-color: rgba(220, 209, 197, 0.14); background-image: var(--dw-tile-ico-on);
  }
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link:hover,
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link:focus-visible { color: #fff; outline-color: var(--dw-bone); }
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link.is-current { background: var(--dw-bone); color: var(--dw-ink); box-shadow: none; }
  body .breakdance .dw-header .dw-nav .bde-text-link.dw-nav-link.is-current::before { background-color: rgba(66, 14, 26, 0.1); background-image: var(--dw-tile-ico); }

  body .breakdance .dw-header .dw-nav-sub,
  body .breakdance .dw-header .dw-nav-drop:hover .dw-nav-sub,
  body .breakdance .dw-header .dw-nav-drop:focus-within .dw-nav-sub {
    background: rgba(220, 209, 197, 0.1); box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14);
  }
  body .breakdance .dw-header .dw-nav-sub::before { color: var(--dw-bone-80); }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink { color: var(--dw-bone); border-bottom-color: rgba(220, 209, 197, 0.14); }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink::before { background-color: rgba(220, 209, 197, 0.14); background-image: var(--dw-menu-ico-on); }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink::after { background: var(--dw-bone); }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink.is-current { color: #fff; }
  body .breakdance .dw-header .bde-text-link.dw-nav-sublink.is-current::before { background-color: var(--dw-bone); background-image: var(--dw-menu-ico); }

  body .breakdance .dw-header .dw-nav-social::before { color: var(--dw-bone); }
  body .breakdance .dw-header .dw-nav-social .dw-social .bde-social-icons__icon-wrapper { color: var(--dw-bone); border-color: rgba(220, 209, 197, 0.35); }
  body .breakdance .dw-header .dw-nav-social .dw-social .bde-social-icons__icon-wrapper:hover { background: var(--dw-bone); border-color: var(--dw-bone); color: var(--dw-ink); }
}

/* links to the glossary inside post texts: quiet, a dotted underline in the text colour */
body .breakdance a.dw-gl-link {
  color: inherit; font-weight: inherit; text-decoration: underline dotted; text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(66, 14, 26, 0.5); text-underline-offset: 3px;
}
body .breakdance a.dw-gl-link:hover { color: var(--dw-ink); text-decoration-style: solid; text-decoration-color: var(--dw-ink); }

@media (max-width: 880px) {
  /* the desktop underline of the current item does not belong on a tile */
  body .breakdance .dw-header .dw-nav-drop > .bde-text-link.dw-nav-link--drop::after { display: none; }
}
/* ---------- Kalendarz winiarza (/kalendarz-winiarza/, Nov 2026) – "koło roku" ----------
   calendar.js fills .dw-cal-app: the year wheel on a white card (months around, a ring per fruit, today's hand) with
   its legend, and a maroon panel for the chosen month. Brand colours only. */
body .breakdance .dw-cal-app { width: 100%; }
body .breakdance .dw-yr { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; background: #fff; border-radius: 22px;
  box-shadow: 0 40px 80px -48px rgba(66, 14, 26, 0.6), 0 2px 0 rgba(66, 14, 26, 0.04); }
body .breakdance .dw-yr p { margin: 0; }
body .breakdance .dw-yr-wheel { padding: clamp(1.25rem, 3vw, 2.5rem); }
body .breakdance .dw-yr-svg { display: block; width: 100%; max-width: 30rem; height: auto; margin: 0 auto; font-family: var(--dw-sans); }
body .breakdance .dw-yr-seg { fill: #f4efea; transition: fill 0.2s ease; }
body .breakdance .dw-yr-month { cursor: pointer; outline: none; }
body .breakdance .dw-yr-month text { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; fill: var(--dw-ink); pointer-events: none; }
body .breakdance .dw-yr-month:hover .dw-yr-seg { fill: var(--dw-bone); }
body .breakdance .dw-yr-month:focus-visible .dw-yr-seg { stroke: var(--dw-ink); stroke-width: 2.5; }
body .breakdance .dw-yr-month.is-on .dw-yr-seg { fill: var(--dw-ink); }
body .breakdance .dw-yr-month.is-on text { fill: var(--dw-bone); }
body .breakdance .dw-yr-tick { stroke: rgba(66, 14, 26, 0.1); stroke-width: 1; }
body .breakdance .dw-yr-ring { fill: none; stroke: rgba(220, 209, 197, 0.55); stroke-width: 8; }
body .breakdance .dw-yr-arc { fill: none; stroke: var(--dw-ink); stroke-width: 8; stroke-linecap: round; transition: opacity 0.25s ease; }
body .breakdance .dw-yr-arc--late { stroke: rgba(66, 14, 26, 0.35); }
body .breakdance .dw-yr-arc.is-dim { opacity: 0.22; }
body .breakdance .dw-yr-hand { stroke: var(--dw-ink); stroke-width: 2; stroke-dasharray: 3 3; }
body .breakdance .dw-yr-hand-dot { fill: var(--dw-ink); stroke: #fff; stroke-width: 2; }
body .breakdance .dw-yr-core { fill: var(--dw-ink); }
body .breakdance .dw-yr-core-k { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; fill: var(--dw-bone); opacity: 0.8; }
body .breakdance .dw-yr-core-d { font-size: 18px; font-weight: 700; fill: #fff; }

body .breakdance .dw-yr-legend { margin: 1.4rem 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.2rem; }
body .breakdance .dw-yr-legend li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 0.55rem; align-items: baseline; margin: 0; padding: 0.3rem 0; opacity: 0.55; transition: opacity 0.2s ease; }
body .breakdance .dw-yr-legend li::before { display: none; }
body .breakdance .dw-yr-legend li.is-on { opacity: 1; }
body .breakdance .dw-yr-key { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--dw-bone); color: var(--dw-ink); font-size: 0.72rem; font-weight: 700; }
body .breakdance .dw-yr-legend li.is-on .dw-yr-key { background: var(--dw-ink); color: var(--dw-bone); }
body .breakdance .dw-yr-legend b { font-size: 0.9rem; color: var(--dw-ink); }
body .breakdance .dw-yr-legend em { font-style: normal; font-size: 0.76rem; line-height: 1.4; color: var(--dw-ink-72); }
body .breakdance .dw-yr-note { margin-top: 1rem !important; font-size: 0.76rem; line-height: 1.5; color: var(--dw-ink-72); }

/* month panel */
body .breakdance .dw-yr-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 0 22px 22px 0; color: var(--dw-bone);
  background: radial-gradient(120% 70% at 20% 0%, #5a1524 0%, var(--dw-ink) 55%) var(--dw-ink); }
body .breakdance .dw-yr-kicker { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-bone-80); }
body .breakdance .dw-yr-title { margin-top: 0.3rem !important; font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: #fff; }
body .breakdance .dw-yr-h { margin-top: 1.5rem !important; padding-top: 1.1rem; border-top: 1px solid rgba(220, 209, 197, 0.18); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dw-bone-80); }
body .breakdance .dw-yr-fruits { margin: 0.8rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
body .breakdance .dw-yr-fruit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0; padding: 0.85rem 1rem;
  border-radius: 14px; background: rgba(220, 209, 197, 0.1); box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14); }
body .breakdance .dw-yr-fruit::before { display: none; }
body .breakdance .dw-yr-fruit b { display: block; font-size: 1.02rem; color: #fff; }
body .breakdance .dw-yr-fruit span { display: block; margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.4; color: var(--dw-bone-80); }
body .breakdance .dw-yr-fruit p { display: flex; gap: 0.4rem; }
body .breakdance .dw-yr-fruit a { padding: 0.45rem 0.8rem; border-radius: 999px; border: 1px solid rgba(220, 209, 197, 0.4); color: var(--dw-bone); font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; }
body .breakdance .dw-yr-fruit a:hover { background: var(--dw-bone); color: var(--dw-ink); }
body .breakdance .dw-yr-fruits--year .dw-yr-fruit { background: transparent; box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.12); }
body .breakdance .dw-yr-empty { margin-top: 0.7rem !important; font-size: 0.9rem; line-height: 1.6; color: var(--dw-bone); }
body .breakdance .dw-yr-sub { margin-top: 0.8rem !important; font-size: 0.86rem; font-weight: 700; color: #fff; }
body .breakdance .dw-yr-tasks { margin: 0.35rem 0 0; padding: 0; list-style: none; }
body .breakdance .dw-yr-tasks li { margin: 0; padding: 0.3rem 0 0.3rem 1rem; position: relative; font-size: 0.88rem; color: var(--dw-bone); }
body .breakdance .dw-yr-tasks li::before { content: ""; position: absolute; left: 0; top: 0.75rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--dw-bone); }
body .breakdance .dw-yr-tasks b { color: #fff; }
body .breakdance .dw-yr-fine { margin-top: 1rem !important; font-size: 0.76rem; line-height: 1.55; color: var(--dw-bone-55); }
body .breakdance .dw-yr-fine a { color: var(--dw-bone); }

/* the seasons as a table (also what search engines and readers without JavaScript see) */
body .breakdance .dw-cal-table table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; font-size: 0.92rem; }
body .breakdance .dw-cal-table th { text-align: left; padding: 0.8rem 1rem; background: var(--dw-ink); color: var(--dw-bone); font-weight: 600; }
body .breakdance .dw-cal-table td { padding: 0.75rem 1rem; border-top: 1px solid #ece4dc; color: var(--dw-ink); vertical-align: top; }
body .breakdance .dw-cal-table td:last-child { font-size: 0.8rem; color: var(--dw-ink-72); }

@media (max-width: 900px) {
  body .breakdance .dw-yr { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-yr-panel { border-radius: 0 0 22px 22px; }
}
@media (max-width: 600px) {
  body .breakdance .dw-yr-legend { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-cal-table { overflow-x: auto; }
  body .breakdance .dw-cal-table table { min-width: 34rem; }
}

/* phone menu: icon of the calendar (a clock face – the year wheel) */
@media (max-width: 880px) {
  body .breakdance .dw-header .dw-nav-sublink[href*="kalendarz-winiarza"] {
    --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
    --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  }
}

/* month labels a bit larger: the wheel is small on phones */
body .breakdance .dw-yr-month text { font-size: 12.5px; }
body .breakdance .dw-cal-table { margin-top: 1.4rem; }
body .breakdance .dw-cal-table a { color: var(--dw-ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(66, 14, 26, 0.35); text-underline-offset: 3px; }
body .breakdance .dw-cal-table a:hover { text-decoration-color: var(--dw-ink); }
/* ---------- Kalendarz winiarza v2 (author, 6 Nov 2026: "popracuj nad kolorystyką i układem") ----------
   Layout: the wheel on the left, the maroon month panel on the right, the legend under the wheel as its own block
   (on phones: wheel → panel → legend). Colours: cream tracks, maroon arcs; seasons outside the chosen month in cream
   instead of a pinkish faded maroon; numbered badges on the arcs; arrows to step through the months. */
body .breakdance .dw-yr {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "wheel panel" "legend panel";
  overflow: hidden;
}
body .breakdance .dw-yr-wheel { grid-area: wheel; padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0.5rem;
  background: radial-gradient(70% 60% at 50% 45%, #fbf8f5 0%, #fff 70%); }
body .breakdance .dw-yr-panel { grid-area: panel; border-radius: 0; }
body .breakdance .dw-yr-legendbox { grid-area: legend; padding: 1rem clamp(1.25rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.25rem); }
body .breakdance .dw-yr-legend-title { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .dw-yr-legend { margin-top: 0.7rem; }

/* wheel colours */
body .breakdance .dw-yr-seg { fill: rgba(220, 209, 197, 0.45); }
body .breakdance .dw-yr-month:hover .dw-yr-seg { fill: var(--dw-bone); }
body .breakdance .dw-yr-month.is-on .dw-yr-seg { fill: var(--dw-ink); }
body .breakdance .dw-yr-ring { stroke: #f3ede7; stroke-width: 8; }
body .breakdance .dw-yr-arc { stroke-width: 8.5; }
body .breakdance .dw-yr-arc.is-dim { opacity: 1; stroke: var(--dw-bone); }
body .breakdance .dw-yr-arc--late { stroke: #b48e97; }
body .breakdance .dw-yr-arc--late.is-dim { stroke: #e7ddd3; }
body .breakdance .dw-yr-badge circle { fill: #fff; stroke: var(--dw-ink); stroke-width: 1.6; }
body .breakdance .dw-yr-badge text { font-size: 9px; font-weight: 700; fill: var(--dw-ink); }
body .breakdance .dw-yr-badge.is-dim circle { stroke: var(--dw-bone); }
body .breakdance .dw-yr-badge.is-dim text { fill: #a99a8c; }
body .breakdance .dw-yr-hand { stroke-dasharray: none; stroke-width: 2.2; }
body .breakdance .dw-yr-core { fill: var(--dw-ink); stroke: #fff; stroke-width: 4; }

/* legend */
body .breakdance .dw-yr-legend li { opacity: 1; }
body .breakdance .dw-yr-legend li b { font-weight: 500; }
body .breakdance .dw-yr-legend li.is-on b { font-weight: 700; }
body .breakdance .dw-yr-legend li:not(.is-on) em, body .breakdance .dw-yr-legend li:not(.is-on) b { color: var(--dw-ink-72); }
body .breakdance .dw-yr-legend li:not(.is-on) .dw-yr-key { background: #f3ede7; color: var(--dw-ink-72); }

/* month panel */
body .breakdance .dw-yr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; }
body .breakdance .dw-yr-step {
  width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid rgba(220, 209, 197, 0.35); background: transparent; cursor: pointer; position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
body .breakdance .dw-yr-step::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1rem; height: 1rem; background: var(--dw-bone); transform: scaleX(-1);
  -webkit-mask: var(--dw-arrow) center / contain no-repeat; mask: var(--dw-arrow) center / contain no-repeat;
}
body .breakdance .dw-yr-step--next::after { transform: none; }
body .breakdance .dw-yr-step:hover { background: var(--dw-bone); border-color: var(--dw-bone); }
body .breakdance .dw-yr-step:hover::after { background: var(--dw-ink); }
body .breakdance .dw-yr-step:focus-visible { outline: 3px solid var(--dw-bone); outline-offset: 2px; }
body .breakdance .dw-yr-head .dw-yr-kicker, body .breakdance .dw-yr-head .dw-yr-title { text-align: center; }
body .breakdance .dw-yr-fruit { flex-wrap: nowrap; align-items: center; display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.5rem 0.8rem; }
body .breakdance .dw-yr-fruit .dw-yr-key { width: 1.7rem; height: 1.7rem; font-size: 0.75rem; background: var(--dw-bone); color: var(--dw-ink); align-self: start; margin-top: 0.1rem; }
body .breakdance .dw-yr-fruit p { grid-column: 2; flex-wrap: wrap; }
body .breakdance .dw-yr-fruit a.is-main { background: var(--dw-bone); color: var(--dw-ink); border-color: var(--dw-bone); }
body .breakdance .dw-yr-fruit a.is-main:hover { background: #fff; border-color: #fff; }
body .breakdance .dw-yr-year { margin-top: 0.9rem !important; font-size: 0.86rem; line-height: 1.6; color: var(--dw-bone); }
body .breakdance .dw-yr-year a { color: #fff; font-weight: 600; text-underline-offset: 3px; }

@media (max-width: 900px) {
  body .breakdance .dw-yr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "wheel" "panel" "legend"; }
  body .breakdance .dw-yr-wheel { padding-bottom: 1.5rem; }
  body .breakdance .dw-yr-legendbox { padding-top: 1.5rem; }
}

body .breakdance .dw-yr-fruit span.dw-yr-key { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.1rem; font-size: 0.75rem; font-weight: 700; line-height: 1; color: var(--dw-ink); }
/* ---------- "Narzędzia" as a panel with cards (author's choice, 6 Nov 2026) ----------
   script.js adds .dw-drop-click to the drop-down: on wide screens a click on "Narzędzia" opens (.is-open) a wide panel
   under the header with a card per tool – icon, name, one line of description (the descriptions are CSS text, so no
   page tree changes). Hover no longer opens it; without JavaScript the old hover list still works. */
body .breakdance .dw-nav-sublink[href*="kalkulator-mocy"] { --dw-tool-desc: "Ile procent alkoholu będzie miało Twoje wino."; }
body .breakdance .dw-nav-sublink[href*="kalkulator-cukru"] { --dw-tool-desc: "Ile cukru dodać, żeby uzyskać wybraną moc."; }
body .breakdance .dw-nav-sublink[href*="planer-nastawu"] { --dw-tool-desc: "Lista zakupów, cukier w porcjach i terminy."; }
body .breakdance .dw-nav-sublink[href*="kalendarz-winiarza"] { --dw-tool-desc: "Kiedy zbierać owoce i co robić z winem."; }
/* the same line icons as in the phone menu, for wide screens too */
body .breakdance .dw-nav-sublink[href*="kalkulator-mocy"] {
  --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10c0 6-2 9-5 9S7 9 7 3zM12 12v8M8 21h8M7.6 7h8.8'/%3E%3C/svg%3E");
  --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h10c0 6-2 9-5 9S7 9 7 3zM12 12v8M8 21h8M7.6 7h8.8'/%3E%3C/svg%3E");
}
body .breakdance .dw-nav-sublink[href*="kalkulator-cukru"] {
  --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M4 7h16M7 7l-3 6a3 3 0 0 0 6 0zM17 7l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
  --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v16M7 20h10M4 7h16M7 7l-3 6a3 3 0 0 0 6 0zM17 7l-3 6a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
}
body .breakdance .dw-nav-sublink[href*="planer-nastawu"] {
  --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
  --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4M8 14h3'/%3E%3C/svg%3E");
}
body .breakdance .dw-nav-sublink[href*="kalendarz-winiarza"] {
  --dw-menu-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23420E1A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
  --dw-menu-ico-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

@media (min-width: 881px) {
  /* hover and focus no longer open it – only a click (.is-open) */
  body .breakdance .dw-nav-drop.dw-drop-click:hover .dw-nav-sub,
  body .breakdance .dw-nav-drop.dw-drop-click:focus-within .dw-nav-sub { opacity: 0; visibility: hidden; transform: translateY(-6px); }
  body .breakdance .dw-nav-drop.dw-drop-click:hover .dw-nav-link--drop::before,
  body .breakdance .dw-nav-drop.dw-drop-click:focus-within .dw-nav-link--drop::before { transform: rotate(45deg); }
  body .breakdance .dw-nav-drop.dw-drop-click.is-open .dw-nav-link--drop::before { transform: rotate(-135deg) translate(-2px, -2px); }

  body .breakdance .dw-nav-drop.dw-drop-click .dw-nav-sub {
    position: fixed; top: calc(var(--dw-header-h) - 0.25rem); left: 50%; right: auto; width: min(62rem, calc(100vw - 2 * var(--dw-gutter)));
    min-width: 0; margin-left: calc(-1 * min(62rem, calc(100vw - 2 * var(--dw-gutter))) / 2);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; padding: 1.1rem; border: 0; border-radius: 20px;
    background: #fff; box-shadow: 0 30px 60px -30px rgba(66, 14, 26, 0.55), 0 0 0 1px rgba(66, 14, 26, 0.06);
  }
  body .breakdance .dw-nav-drop.dw-drop-click.is-open .dw-nav-sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  body .breakdance .dw-nav-drop.dw-drop-click .dw-nav-sub::before {
    content: "Narzędzia domowego winiarza"; position: static; grid-column: 1 / -1; height: auto; padding: 0.2rem 0.4rem 0.2rem;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72);
  }
  /* cards */
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 16px;
    background: #f8f4f0; font-size: 0.98rem; font-weight: 700; line-height: 1.3; color: var(--dw-ink); letter-spacing: 0; text-transform: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink::before {
    content: ""; width: 2.6rem; height: 2.6rem; margin-bottom: 0.5rem; border-radius: 50%;
    background: #fff var(--dw-menu-ico) center / 1.25rem no-repeat; box-shadow: 0 6px 14px -10px rgba(66, 14, 26, 0.7);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink::after {
    content: var(--dw-tool-desc, ""); font-size: 0.82rem; font-weight: 400; line-height: 1.45; color: var(--dw-ink-72);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:hover,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:focus-visible {
    background: var(--dw-bone); transform: translateY(-2px); box-shadow: 0 16px 28px -22px rgba(66, 14, 26, 0.9); outline: none;
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current { background: var(--dw-ink); color: var(--dw-bone); }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current::before { background-color: rgba(220, 209, 197, 0.16); background-image: var(--dw-menu-ico-on); box-shadow: none; }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current::after { color: var(--dw-bone-80); }
}

/* phones: a tap on the "Narzędzia" tile briefly highlights the tools list below it */
@keyframes dw-tools-flash { 0% { box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14); } 35% { box-shadow: inset 0 0 0 2px var(--dw-bone); } 100% { box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14); } }
@media (max-width: 880px) {
  body .breakdance .dw-header .dw-nav-sub.is-flash { animation: dw-tools-flash 0.9s ease; }
}

/* ---------- "O mnie" v3 (6 Nov 2026, author's choice "baner kinowy") ----------
   Hero like the blog's (photo full width, title centred), then cream sections: a horizontal timeline, "Kim jestem"
   with the portrait, a large quote, three lessons, the contact card. Brand colours only. */
/* hero: taller than the blog's, a soft maroon fade at the bottom for the text and the edge into the cream page */
body .breakdance .bde-section.dw-ab3-hero { min-height: min(78vh, 46rem); display: flex; align-items: center;
  padding: calc(var(--dw-header-h) + var(--dw-s7)) 0 calc(var(--dw-s7) + 2rem); }
body .breakdance .dw-ab3-hero .dw-photo img { object-position: 50% 55%; }
body .breakdance .bde-section.dw-ab3-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(66, 14, 26, 0.15) 0%, rgba(66, 14, 26, 0.35) 55%, rgba(66, 14, 26, 0.7) 100%);
}
body .breakdance .dw-ab3-hero .bde-heading.dw-page-h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); max-width: 16ch; line-height: 1.05; }
body .breakdance .dw-ab3-hero .bde-text.dw-lead { max-width: 40rem; font-size: clamp(1.02rem, 1.5vw, 1.2rem); }
body .breakdance .dw-ab3-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
body .breakdance .bde-text-link.dw-ab3-hero-link {
  color: var(--dw-bone); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(220, 209, 197, 0.6); text-underline-offset: 5px;
  text-shadow: 0 1px 8px rgba(27, 5, 8, 0.8);
}
body .breakdance .bde-text-link.dw-ab3-hero-link:hover { color: #fff; text-decoration-color: #fff; }

/* shared section heads */
body .breakdance .dw-ab3-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
body .breakdance .dw-ab3-head .bde-text.dw-eyebrow { justify-content: center; }

/* 2. timeline: four cards joined by a line, numbers in maroon discs */
body .breakdance .bde-section.dw-ab3-story { background: var(--dw-bone); }
body .breakdance .dw-ab3-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
body .breakdance .dw-ab3-timeline::before {
  content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 1.45rem; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--dw-ink) 0 10px, transparent 10px 18px); opacity: 0.35;
}
body .breakdance .dw-ab3-step { position: relative; z-index: 1; display: flex; flex-direction: column; }
body .breakdance .bde-text.dw-ab3-step-no {
  display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; margin-bottom: 1.1rem;
  background: var(--dw-ink); color: var(--dw-bone); font-size: 0.9rem; font-weight: 700; box-shadow: 0 0 0 6px var(--dw-bone);
}
body .breakdance .bde-text.dw-ab3-step-when { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dw-ink-72); }
body .breakdance .bde-heading.dw-ab3-step-title { margin: 0.35rem 0 0.7rem; font-size: 1.25rem; font-weight: 700; line-height: 1.25; color: var(--dw-ink); }
body .breakdance .dw-ab3-step-body { flex: 1; padding: 1.2rem 1.25rem; border-radius: 16px; background: #fff; box-shadow: 0 22px 40px -32px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-ab3-step-body p { margin: 0; font-size: 0.92rem; line-height: 1.7; color: var(--dw-ink); }
body .breakdance .dw-ab3-step-body a { color: var(--dw-ink); font-weight: 600; text-underline-offset: 3px; }

/* 3. who he is */
body .breakdance .bde-section.dw-ab3-who { background: #e6ddd3; }
body .breakdance .dw-ab3-who-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
body .breakdance .dw-ab3-who-photo { position: relative; }
body .breakdance .dw-ab3-who-img img { width: 100%; height: auto; display: block; border-radius: 20px; aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: 0 40px 70px -40px rgba(66, 14, 26, 0.7); }
body .breakdance .dw-ab3-who-photo .dw-ab-badge { position: absolute; left: -1rem; bottom: 1.5rem; }
body .breakdance .bde-text.dw-ab3-p { font-size: 1.05rem; line-height: 1.8; color: var(--dw-ink); }
body .breakdance .dw-ab3-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 1.8rem 0 1.4rem; }
body .breakdance .dw-ab3-fact { padding: 1rem 1.1rem; border-radius: 14px; background: #fff; border-top: 3px solid var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-fact-big { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-fact-label { margin-top: 0.25rem; font-size: 0.8rem; line-height: 1.45; color: var(--dw-ink-72); }

/* 4. quote */
body .breakdance .bde-section.dw-ab3-quote { background: var(--dw-bone); }
body .breakdance .dw-ab3-quote-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(1rem, 3vw, 2rem) 0; }
body .breakdance .dw-ab3-quote-inner::before {
  content: "\201E"; display: block; font-size: 7rem; line-height: 0.6; font-weight: 700; color: var(--dw-ink); opacity: 0.18; margin-bottom: 0.8rem;
}
body .breakdance .bde-text.dw-ab3-quote-text { max-width: 22ch; font-size: clamp(1.9rem, 4vw, 3.1rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-quote-who { margin-top: 1.4rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dw-ink-72); }

/* 5. lessons */
body .breakdance .bde-section.dw-ab3-lessons { background: #e6ddd3; }
body .breakdance .dw-ab3-lessons-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
body .breakdance .dw-ab3-lesson { padding: 1.8rem 1.6rem; border-radius: 18px; background: #fff; box-shadow: 0 26px 46px -36px rgba(66, 14, 26, 0.75); }
body .breakdance .bde-text.dw-ab3-lesson-no { font-size: 2.6rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: var(--dw-ink); opacity: 0.2; }
body .breakdance .bde-heading.dw-ab3-lesson-title { margin: 0.8rem 0 0.5rem; font-size: 1.3rem; font-weight: 700; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-lesson-body { font-size: 0.95rem; line-height: 1.7; color: var(--dw-ink-72); }

@media (max-width: 1000px) {
  body .breakdance .dw-ab3-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  body .breakdance .dw-ab3-timeline::before { display: none; }
}
@media (max-width: 760px) {
  body .breakdance .bde-section.dw-ab3-hero { min-height: 70vh; }
  body .breakdance .dw-ab3-timeline { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  /* phones: a vertical line through the numbers */
  body .breakdance .dw-ab3-timeline::before {
    display: block; left: 1.45rem; right: auto; top: 1rem; bottom: 1rem; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--dw-ink) 0 10px, transparent 10px 18px);
  }
  body .breakdance .dw-ab3-step { padding-left: 4rem; }
  body .breakdance .bde-text.dw-ab3-step-no { position: absolute; left: 0; top: 0; }
  body .breakdance .dw-ab3-who-grid { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-ab3-who-photo { max-width: 22rem; margin: 0 auto; }
  body .breakdance .dw-ab3-facts { grid-template-columns: minmax(0, 1fr); }
  body .breakdance .dw-ab3-lessons-row { grid-template-columns: minmax(0, 1fr); }
}

body .breakdance .dw-ab3-head .bde-heading.dw-ab-h2, body .breakdance .dw-ab3-head .bde-text.dw-ab-head-lead { text-align: center; margin-left: auto; margin-right: auto; }
body .breakdance .dw-ab3-quote-inner::before { height: 3.6rem; line-height: 1; margin-bottom: 0.4rem; overflow: visible; }
body .breakdance .dw-ab3-hero-actions { width: 100%; }
body .breakdance .dw-ab3-head > .bde-heading, body .breakdance .dw-ab3-head > .bde-text { text-align: center !important; margin-left: auto !important; margin-right: auto !important; align-self: center; }
@media (max-width: 760px) { body .breakdance .bde-section.dw-ab3-hero { min-height: min(70vh, 38rem); } }
body .breakdance .dw-ab3-head { width: 100%; }

body .breakdance .dw-ab3-quote-inner::before { content: ""; position: static; display: block; width: 3.5rem; height: 3px; line-height: 0; font-size: 0; margin: 0 0 1.8rem; background: var(--dw-ink); opacity: 1; }

/* "O mnie" v3, author's corrections (6 Nov 2026):
   1. no maroon fade over the hero photo (the text keeps its outline and shadow, as on the blog),
   2. the three facts in "Kim jestem" as a list instead of small cards: the big word on the left, its line on the right,
      hairlines between them,
   3. the lessons as maroon cards. */
body .breakdance .bde-section.dw-ab3-hero::after { display: none; }

body .breakdance .dw-ab3-facts {
  display: flex; flex-direction: column; gap: 0; margin: 1.8rem 0 1.6rem; border-top: 1px solid rgba(66, 14, 26, 0.18);
}
body .breakdance .dw-ab3-fact {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); align-items: baseline; gap: 1.25rem;
  padding: 1rem 0; border: 0; border-bottom: 1px solid rgba(66, 14, 26, 0.18); border-radius: 0; background: transparent;
}
body .breakdance .bde-text.dw-ab3-fact-big { font-size: 1.6rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-fact-label { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--dw-ink); }
body .breakdance .bde-text.dw-ab3-fact-label::first-letter { text-transform: uppercase; }

body .breakdance .dw-ab3-lesson {
  background: radial-gradient(120% 90% at 0% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
  box-shadow: 0 30px 50px -34px rgba(66, 14, 26, 0.9);
}
body .breakdance .bde-text.dw-ab3-lesson-no { color: var(--dw-bone); opacity: 0.35; }
body .breakdance .bde-heading.dw-ab3-lesson-title { color: #fff; }
body .breakdance .bde-text.dw-ab3-lesson-body { color: var(--dw-bone); }

@media (max-width: 760px) {
  body .breakdance .dw-ab3-fact { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}

body .breakdance .dw-ab3-facts { width: 100%; }

body .breakdance .dw-ab3-fact { width: 100%; box-sizing: border-box; }
body .breakdance .dw-ab3-who .bde-text.dw-ab-sign { border-left-color: var(--dw-ink); }

/* "Kim jestem" facts, layout v3 (author's choice 6 Nov 2026: "bordowa karta obok"): one maroon card under the text,
   the three facts one under another – a cream line icon in a disc, the word, its line. */
body .breakdance .dw-ab3-facts {
  width: 100%; margin: 1.8rem 0 1.6rem; padding: 0.4rem 1.5rem; border: 0; border-radius: 20px; color: var(--dw-bone);
  background: radial-gradient(120% 90% at 0% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
  box-shadow: 0 30px 50px -34px rgba(66, 14, 26, 0.9);
}
body .breakdance .dw-ab3-fact {
  position: relative; display: grid; grid-template-columns: 2.75rem 8.5rem minmax(0, 1fr); align-items: center; gap: 1rem;
  padding: 1.1rem 0; border: 0; border-bottom: 1px solid rgba(220, 209, 197, 0.16); border-radius: 0; background: transparent;
}
body .breakdance .dw-ab3-fact:last-child { border-bottom: 0; }
body .breakdance .dw-ab3-fact::before {
  content: ""; grid-column: 1; grid-row: 1; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: rgba(220, 209, 197, 0.12) var(--dw-fact-ico) center / 1.3rem no-repeat;
}
body .breakdance .dw-ab3-fact > .bde-text.dw-ab3-fact-big { grid-column: 2; grid-row: 1; font-size: 1.35rem; color: #fff; }
body .breakdance .dw-ab3-fact > .bde-text.dw-ab3-fact-label { grid-column: 3; grid-row: 1; font-size: 0.95rem; color: var(--dw-bone); }
/* calendar, person, leaf – cream line icons */
body .breakdance .dw-ab3-fact:nth-child(1) { --dw-fact-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
body .breakdance .dw-ab3-fact:nth-child(2) { --dw-fact-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
body .breakdance .dw-ab3-fact:nth-child(3) { --dw-fact-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DCD1C5' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 15-14 0 10-6 15-14 15M5 19l7-7'/%3E%3C/svg%3E"); }

@media (max-width: 760px) {
  body .breakdance .dw-ab3-facts { padding: 0.3rem 1.1rem; }
  body .breakdance .dw-ab3-fact { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.15rem 0.9rem; }
  body .breakdance .dw-ab3-fact::before { grid-row: 1 / span 2; width: 2.5rem; height: 2.5rem; align-self: center; }
  body .breakdance .dw-ab3-fact > .bde-text.dw-ab3-fact-big { grid-column: 2; grid-row: 1; }
  body .breakdance .dw-ab3-fact > .bde-text.dw-ab3-fact-label { grid-column: 2; grid-row: 2; }
}

body .breakdance .dw-ab3-step-body a { text-decoration: underline; text-decoration-color: rgba(66, 14, 26, 0.4); text-decoration-thickness: 1.5px; background-image: none; box-shadow: none; }
body .breakdance .dw-ab3-step-body a:hover { text-decoration-color: var(--dw-ink); }

/* "Narzędzia" panel on wide screens in maroon (author, 7 Nov 2026: the white panel blended into the white header):
   maroon panel, soft cream cards with cream icons; hover and the current tool in cream with maroon text. */
@media (min-width: 881px) {
  body .breakdance .dw-nav-drop.dw-drop-click .dw-nav-sub {
    background: radial-gradient(120% 120% at 0% 0%, #5a1524 0%, var(--dw-ink) 60%) var(--dw-ink);
    box-shadow: 0 34px 60px -28px rgba(30, 6, 12, 0.75);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .dw-nav-sub::before { color: var(--dw-bone-80); }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink {
    background: rgba(220, 209, 197, 0.1); color: #fff; box-shadow: inset 0 0 0 1px rgba(220, 209, 197, 0.14);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink::before {
    background-color: rgba(220, 209, 197, 0.14); background-image: var(--dw-menu-ico-on); box-shadow: none;
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink::after { color: var(--dw-bone); }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:hover,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:focus-visible,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current {
    background: var(--dw-bone); color: var(--dw-ink); box-shadow: 0 16px 28px -20px rgba(0, 0, 0, 0.6);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:hover::before,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:focus-visible::before,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current::before {
    background-color: rgba(66, 14, 26, 0.1); background-image: var(--dw-menu-ico);
  }
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:hover::after,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink:focus-visible::after,
  body .breakdance .dw-nav-drop.dw-drop-click .bde-text-link.dw-nav-sublink.is-current::after { color: var(--dw-ink-72); }
}

/* Header in cream (author, 7 Nov 2026 – back to the brand cream #DCD1C5 of the original design brief). The pages under it
   often start cream too, so a fine maroon hairline and a soft shadow keep the bar visible. */
body .breakdance .bde-section.dw-header { background: var(--dw-bone); border-bottom: 1px solid rgba(66, 14, 26, 0.14); box-shadow: 0 8px 24px -20px rgba(66, 14, 26, 0.55); }
body .breakdance .dw-header.is-shrunk { box-shadow: 0 12px 30px -20px rgba(66, 14, 26, 0.75); }