@import url("tokens/pwf-tokens-biskwit.css?v=31e0cbfc");

/* Pracownia Wysokiej Formy - "Pracownia Brut / Biskwit"
 * Component CSS for the design deliverables. Values are tokens only (--pwf-*).
 * Section 1-6 = the system (brief/03). Section 7 = LO-FI wireframe overrides (.lofi), removed for hi-fi.
 * Wireframe-only deviation: the responsive scale is driven by container queries (cqw / @container)
 * instead of vw / @media, because the canvas shows 390 and 1280 side by side in one viewport.
 * The Bricks build uses the same numbers with vw and @media breakpoints 600 / 820.
 */

/* ---------- 1. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--pwf-bg); color: var(--pwf-ink); font-family: var(--pwf-font); font-size: var(--pwf-text-base); line-height: var(--pwf-leading-normal); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--pwf-font-heading); font-weight: 400; line-height: var(--pwf-leading-head); letter-spacing: var(--pwf-tracking-tight); text-transform: lowercase; margin: 0 0 var(--pwf-space-4); overflow-wrap: break-word; text-wrap: pretty; }
h1 { font-size: var(--pwf-text-4xl); }
h2 { font-size: var(--pwf-text-3xl); }
h3 { font-size: var(--pwf-text-2xl); }
h4 { font-family: var(--pwf-font); font-weight: 800; font-size: var(--pwf-text-lg); line-height: var(--pwf-leading-snug); margin: 0 0 var(--pwf-space-3); }
p { margin: 0 0 var(--pwf-space-4); max-width: 66ch; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--pwf-ink); text-decoration-color: var(--pwf-accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { color: var(--pwf-accent); }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: var(--pwf-focus-ring); outline-offset: var(--pwf-focus-offset); }

/* ---------- 2. type roles ---------- */
.hero-h1 { font-size: var(--pwf-text-display); line-height: var(--pwf-leading-head); max-width: 11ch; }
.word-accent { color: var(--pwf-accent); }
.lede { font-size: var(--pwf-text-lg); line-height: 1.5; max-width: 54ch; font-weight: 600; }
.body-s { font-size: var(--pwf-text-sm); }
.muted { color: var(--pwf-muted); }
.mono { font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; }
.mono--caps-ok { text-transform: none; }
.eyebrow { display: inline-block; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); text-transform: lowercase; letter-spacing: var(--pwf-tracking-wider); background: var(--pwf-ink); color: var(--pwf-on-dark); padding: 4px 10px; margin: 0 0 var(--pwf-space-4); }
.eyebrow--plain { background: none; color: var(--pwf-ink); padding: 0; letter-spacing: var(--pwf-tracking-wide); }
.tbd { font-family: var(--pwf-font-mono); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- 3. layout ---------- */
.wrap { max-width: var(--pwf-container); margin: 0 auto; padding: 0 var(--pwf-gutter); }
.band { padding: var(--pwf-space-16) 0; border-bottom: var(--pwf-border-w) solid var(--pwf-ink); }
.band--slip { background: var(--pwf-surface); }
.band--ink { background: var(--pwf-ink); color: var(--pwf-on-dark); }
.band--ink h1, .band--ink h2, .band--ink h3 { color: var(--pwf-on-dark); }
.band--flush { padding: 0; }
.band__head { margin-bottom: var(--pwf-space-8); }
.band__head .lede { margin: 0; }
.band__foot { margin-top: var(--pwf-space-8); }
@container screen (min-width: 820px) {
  .band { padding: var(--pwf-space-24) 0; }
  .band__head { margin-bottom: var(--pwf-space-12); }
}

.grid-2 { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; }
@container screen (min-width: 600px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@container screen (min-width: 820px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.bento { display: grid; gap: var(--pwf-space-4); grid-template-columns: 1fr; grid-auto-rows: minmax(126px, auto); }
@container screen (min-width: 600px) { .bento { grid-template-columns: repeat(4, 1fr); } }
.bento > * { display: flex; flex-direction: column; justify-content: flex-end; }

.row { display: flex; flex-wrap: wrap; gap: var(--pwf-space-3); align-items: center; }
.row--btns { gap: var(--pwf-space-3); margin-top: var(--pwf-space-6); }
.stack { display: flex; flex-direction: column; gap: var(--pwf-space-3); }
.stack--tight { gap: var(--pwf-space-2); }
.stack--loose { gap: var(--pwf-space-6); }

/* ---------- 4. tiles, cards, media ---------- */
.tile { position: relative; background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-m); padding: var(--pwf-space-6); box-shadow: var(--pwf-shadow-sm); }
.tile--blush { background: var(--pwf-tint-blush); }
.tile--celadon { background: var(--pwf-tint-celadon); }
.tile--ink { background: var(--pwf-ink); color: var(--pwf-on-dark); }
.tile--ink h2, .tile--ink h3, .tile--ink h4 { color: var(--pwf-on-dark); }
.tile--hero { border-radius: var(--pwf-radius-xl); overflow: hidden; }
.tile--media { padding: 0; overflow: hidden; border-radius: var(--pwf-radius-l); }
.tile--media > img { width: 100%; height: 100%; object-fit: cover; }
.tile--link { box-shadow: var(--pwf-shadow-md); text-decoration: none; color: inherit; transition: transform var(--pwf-duration-base) var(--pwf-ease-spring), box-shadow var(--pwf-duration-base) var(--pwf-ease-out); }
.tile--link:hover { transform: translate(-3px, -3px); box-shadow: var(--pwf-shadow-lg); color: inherit; }
.tile--link:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pwf-ink); }
.tile__cap { position: absolute; left: var(--pwf-space-3); bottom: var(--pwf-space-3); background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-full); padding: 8px 14px; }

.media { overflow: hidden; border-bottom: var(--pwf-border-w) solid var(--pwf-ink); }
.media > img, .media > .ph { width: 100%; height: 100%; object-fit: cover; }
.media--11 { aspect-ratio: 1 / 1; }
.media--32 { aspect-ratio: 3 / 2; }
.media--45 { aspect-ratio: 4 / 5; }
.media--169 { aspect-ratio: 16 / 9; }
.media--flush { border-bottom: 0; }

.card { display: flex; flex-direction: column; background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-m); overflow: hidden; box-shadow: var(--pwf-shadow-md); text-decoration: none; color: inherit; transition: transform var(--pwf-duration-base) var(--pwf-ease-spring), box-shadow var(--pwf-duration-base) var(--pwf-ease-out); }
.card:hover { transform: translate(-3px, -3px); box-shadow: var(--pwf-shadow-lg); color: inherit; }
.card__img { aspect-ratio: 3 / 2; border-bottom: var(--pwf-border-w) solid var(--pwf-ink); overflow: hidden; }
.card__img > img, .card__img > .ph { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pwf-space-3); padding: var(--pwf-space-6); flex: 1; }
.card__body > * { margin: 0; }
.card__meta { margin-top: auto; }
.card .btn { width: 100%; }

/* striped placeholder - only where the photo / embed does not exist */
.ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--pwf-space-4); background-color: var(--pwf-surface); background-image: repeating-linear-gradient(45deg, var(--pwf-bg) 0 7px, var(--pwf-surface) 7px 14px); color: var(--pwf-muted); font-family: var(--pwf-font-mono); font-weight: 500; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); }
.ph--tile { border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-l); }

/* ---------- 5. controls ---------- */
.btn { font-family: var(--pwf-font); font-weight: 800; font-size: var(--pwf-text-base); text-transform: lowercase; white-space: nowrap; padding: 13px var(--pwf-space-8); min-height: var(--pwf-target-min); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-s); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--pwf-space-2); box-shadow: var(--pwf-shadow-sm); text-decoration: none; color: var(--pwf-ink); background: var(--pwf-surface); transition: transform var(--pwf-duration-fast) var(--pwf-ease-out), box-shadow var(--pwf-duration-fast) var(--pwf-ease-out), background var(--pwf-duration-base); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--pwf-shadow-md); }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pwf-ink); }
.btn--primary { background: var(--pwf-accent); color: var(--pwf-on-accent); }
.btn--primary:hover { background: var(--pwf-accent-dark); color: var(--pwf-on-accent); }
.btn--secondary { background: var(--pwf-surface); color: var(--pwf-ink); }
.btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--pwf-ink); text-decoration: underline; text-decoration-color: var(--pwf-accent); text-decoration-thickness: 2.5px; text-underline-offset: 5px; padding-left: var(--pwf-space-4); padding-right: var(--pwf-space-4); }
.btn--ghost:hover { transform: none; box-shadow: none; background: var(--pwf-accent-subtle); }
.btn--block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--pwf-bg); color: var(--pwf-muted); cursor: not-allowed; transform: none; box-shadow: none; border-style: dashed; }
.btn--state-hover { transform: translate(-2px, -2px); box-shadow: var(--pwf-shadow-md); }
.btn--state-press { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--pwf-ink); }

.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); text-transform: lowercase; letter-spacing: var(--pwf-tracking-wide); padding: 8px 14px; border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-full); background: var(--pwf-surface); color: var(--pwf-ink); text-decoration: none; }
.chip--tap { min-height: var(--pwf-target-min); padding: 12px 20px; transition: transform var(--pwf-duration-base) var(--pwf-ease-spring); }
.chip--tap:hover { transform: scale(1.06) rotate(-1.5deg); color: var(--pwf-ink); }
.chip--active { background: var(--pwf-tint-blush); }
.chip--celadon { background: var(--pwf-tint-celadon); }
.chip--blush { background: var(--pwf-tint-blush); }
.chip--outline { background: transparent; border-style: dashed; }

.field { display: block; margin-bottom: var(--pwf-space-6); }
.field__label { display: block; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); text-transform: lowercase; letter-spacing: var(--pwf-tracking-wide); margin-bottom: var(--pwf-space-2); }
.input { width: 100%; font-family: var(--pwf-font); font-weight: 600; font-size: var(--pwf-text-base); padding: 12px var(--pwf-space-4); min-height: var(--pwf-target-min); background: var(--pwf-surface); color: var(--pwf-ink); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-s); transition: box-shadow var(--pwf-duration-fast) var(--pwf-ease-out); }
.input::placeholder { color: var(--pwf-muted); font-weight: 400; }
.input:hover { box-shadow: var(--pwf-shadow-sm); }
.input:focus { outline: none; border-color: var(--pwf-accent); box-shadow: 0 0 0 3px var(--pwf-accent-subtle), var(--pwf-shadow-sm); }
.input--area { min-height: 132px; resize: vertical; }
.input--state-hover { box-shadow: var(--pwf-shadow-sm); }
.input--state-focus { border-color: var(--pwf-accent); box-shadow: 0 0 0 3px var(--pwf-accent-subtle), var(--pwf-shadow-sm); }
.input--error { background: #F7E4E0; border-color: var(--pwf-danger); }
.field__msg { font-family: var(--pwf-font-mono); font-size: var(--pwf-text-xs); font-weight: 700; letter-spacing: var(--pwf-tracking-wide); margin: var(--pwf-space-2) 0 0; color: var(--pwf-danger); }
.field__hint { font-family: var(--pwf-font-mono); font-size: var(--pwf-text-xs); font-weight: 500; margin: var(--pwf-space-3) 0 0; color: var(--pwf-muted); }
.check { display: flex; align-items: flex-start; gap: var(--pwf-space-3); min-height: 44px; font-weight: 600; font-size: var(--pwf-text-sm); cursor: pointer; }
.check input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--pwf-accent); flex-shrink: 0; }

.alert { display: flex; gap: var(--pwf-space-4); align-items: flex-start; padding: var(--pwf-space-4) var(--pwf-space-6); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-s); box-shadow: var(--pwf-shadow-sm); color: var(--pwf-on-dark); font-size: var(--pwf-text-sm); max-width: 620px; }
.alert b { display: block; font-family: var(--pwf-font-mono); font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); margin-bottom: 3px; }
.alert p { margin: 0; }
.alert__mark { font-family: var(--pwf-font-mono); font-weight: 700; flex-shrink: 0; }
.alert--success { background: var(--pwf-success); }
.alert--warning { background: var(--pwf-warning); }
.alert--error { background: var(--pwf-danger); }

.icon { width: 22px; height: 22px; flex-shrink: 0; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.doodle { position: absolute; right: -10px; bottom: -14px; width: 150px; height: 110px; pointer-events: none; }

/* ---------- 6. blocks ---------- */
/* nav */
.nav { position: relative; background: var(--pwf-surface); border-bottom: var(--pwf-border-w) solid var(--pwf-ink); }
.nav__inner { display: flex; align-items: center; gap: var(--pwf-space-4); min-height: 64px; }
.nav__mark { font-family: var(--pwf-font-heading); font-weight: 400; font-size: var(--pwf-text-lg); text-transform: lowercase; letter-spacing: var(--pwf-tracking-tight); text-decoration: none; color: var(--pwf-ink); line-height: 1; white-space: nowrap; }
.nav__spacer { flex: 1; }
.nav__links { display: none; align-items: center; gap: var(--pwf-space-6); }
.nav__link { display: inline-flex; align-items: center; gap: var(--pwf-space-2); min-height: var(--pwf-target-min); padding: 0 2px; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; text-decoration: none; color: var(--pwf-ink); border-bottom: var(--pwf-border-w) solid transparent; }
.nav__link--active { border-bottom-color: var(--pwf-accent); }
.nav__glyph { display: none; align-items: center; justify-content: center; width: var(--pwf-target-min); height: var(--pwf-target-min); color: var(--pwf-ink); }
.nav__mobile { display: flex; align-items: center; gap: var(--pwf-space-2); }
.nav__glyph--m { display: inline-flex; align-items: center; justify-content: center; width: var(--pwf-target-min); height: var(--pwf-target-min); color: var(--pwf-ink); }
.nav__cta { display: none; padding: 13px var(--pwf-space-6); }
@container screen (min-width: 820px) { .nav__cta { display: inline-flex; } }
.nav__burger { display: inline-flex; align-items: center; justify-content: center; width: var(--pwf-target-min); height: var(--pwf-target-min); background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-s); box-shadow: var(--pwf-shadow-sm); cursor: pointer; color: var(--pwf-ink); }
.nav__panel { border-top: var(--pwf-border-w) solid var(--pwf-ink); background: var(--pwf-surface); padding: var(--pwf-space-4) 0 var(--pwf-space-6); }
.nav__panel-link { display: flex; align-items: center; justify-content: space-between; min-height: var(--pwf-target-min); padding: 0 var(--pwf-space-4); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-s); background: var(--pwf-surface); font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; text-decoration: none; color: var(--pwf-ink); }
@container screen (min-width: 820px) {
  .nav__links { display: flex; gap: var(--pwf-space-4); }
  .nav__glyph { display: inline-flex; }
  .nav__mobile { display: none; }
  .nav__mark { font-size: var(--pwf-text-xl); }
  .nav__link--phone .nav__num { display: none; }
}
@container screen (min-width: 1024px) {
  .nav__links { gap: var(--pwf-space-6); }
  .nav__link--phone .nav__num { display: inline; }
}

/* skip link */
.skip { position: absolute; left: -9999px; top: 0; z-index: 20; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); background: var(--pwf-ink); color: var(--pwf-on-dark); padding: 10px 14px; text-decoration: none; }
.skip:focus { left: 8px; top: 8px; color: var(--pwf-on-dark); }

/* hero */
.hero__tile--main { grid-column: span 1; }
.hero__tile--photo { padding: 0; }
.hero__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; }
.hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@container screen (min-width: 600px) { .hero__photo { aspect-ratio: 2 / 1; flex: 1 1 auto; min-height: 126px; } }
.hero__mark-h1 { margin-bottom: var(--pwf-space-4); }
@container screen (min-width: 600px) {
  .hero__tile--main { grid-column: span 4; grid-row: span 2; }
  .hero__tile--photo { grid-column: span 4; grid-row: span 2; }
  .hero__tile--pick { grid-column: span 2; }
  .hero__tile--voucher { grid-column: span 2; }
  .hero__band { grid-column: span 4; }
}
@container screen (min-width: 820px) {
  .hero__tile--main { grid-column: span 2; grid-row: span 3; --pwf-text-display: clamp(3rem, 6cqw, 5rem); }
  .hero__tile--photo { grid-column: span 2; grid-row: span 2; }
  .hero__tile--pick { grid-column: span 1; grid-row: span 1; }
  .hero__tile--voucher { grid-column: span 1; grid-row: span 1; }
}
.hero__band { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pwf-space-4); }
@container screen (min-width: 820px) {
  .hero__band { flex-direction: row; align-items: center; justify-content: space-between; }
}
.hero__tile--photo, .hero__tile--pick, .hero__tile--voucher { justify-content: flex-end; }

/* who */
.who__tile { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.who__body { padding: var(--pwf-space-6); display: flex; flex-direction: column; gap: var(--pwf-space-3); align-items: flex-start; }
.who__body > * { margin: 0; }

/* offer */
.offer__grid { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; }
@container screen (min-width: 600px) { .offer__grid { grid-template-columns: repeat(2, 1fr); } }
@container screen (min-width: 820px) {
  .offer__grid { grid-template-columns: repeat(3, 1fr); }
  .offer__card--lead { grid-column: span 2; }
  .offer__card--lead .card__img { aspect-ratio: 21 / 9; }
}

/* steps */
.steps__strip { display: grid; gap: var(--pwf-space-4); grid-template-columns: 1fr; }
.steps__item { display: flex; flex-direction: column; gap: var(--pwf-space-2); align-items: flex-start; }
.steps__item > * { margin: 0; }
.steps__num { font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xl); letter-spacing: 0; }
.steps__band { display: none; }
@container screen (min-width: 600px) { .steps__strip { grid-template-columns: repeat(3, 1fr); } }
@container screen (min-width: 820px) {
  .steps__strip { grid-template-columns: repeat(6, 1fr); }
  .steps__strip .tile { padding: var(--pwf-space-4); }
  .steps__band { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--pwf-space-4); margin-top: var(--pwf-space-8); }
}

/* about */
.about__grid { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; align-items: start; }
@container screen (min-width: 820px) { .about__grid { grid-template-columns: 5fr 7fr; gap: var(--pwf-space-12); } }
.about__junona { display: grid; grid-template-columns: 1fr; gap: 0; padding: 0; overflow: hidden; margin-top: var(--pwf-space-6); }
@container screen (min-width: 600px) { .about__junona { grid-template-columns: 4fr 6fr; } }
.about__junona .media { border-bottom: 0; }
@container screen (min-width: 600px) { .about__junona .media { border-right: var(--pwf-border-w) solid var(--pwf-ink); } }
.about__junona-body { padding: var(--pwf-space-6); }

/* ig strip */
.ig__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pwf-space-6); }
.ig__inner h3 { margin: 0; }
@container screen (min-width: 820px) { .ig__inner { flex-direction: row; align-items: center; justify-content: space-between; } }

/* cta */
.cta__tile { border-radius: var(--pwf-radius-xl); box-shadow: var(--pwf-shadow-md); text-align: center; max-width: 720px; margin: 0 auto; padding: var(--pwf-space-8) var(--pwf-space-6); }
.cta__tile .lede, .cta__tile p { margin-left: auto; margin-right: auto; }
.cta__tile .row { justify-content: center; }

/* loc */
.loc__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pwf-space-3); }
.loc__tile > * { margin: 0; }

/* footer */
.footer { background: var(--pwf-surface); border-top: var(--pwf-border-w) solid var(--pwf-ink); padding: var(--pwf-space-12) 0; }
.footer__grid { display: grid; gap: var(--pwf-space-8); grid-template-columns: 1fr; }
@container screen (min-width: 820px) { .footer__grid { grid-template-columns: 5fr 3fr 4fr; gap: var(--pwf-space-6); } }
.footer__mark { font-family: var(--pwf-font-heading); font-weight: 400; font-size: var(--pwf-text-lg); text-transform: lowercase; margin: 0 0 var(--pwf-space-3); }
.footer__col { display: flex; flex-direction: column; gap: var(--pwf-space-2); align-items: flex-start; }
.footer__link { display: inline-flex; align-items: center; gap: var(--pwf-space-2); min-height: 44px; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; text-decoration: none; color: var(--pwf-ink); }
.footer__legal { font-family: var(--pwf-font-mono); font-weight: 500; font-size: var(--pwf-text-xs); color: var(--pwf-muted); letter-spacing: var(--pwf-tracking-wide); }

/* gallery */
.gallery__chips { display: flex; flex-wrap: wrap; gap: var(--pwf-space-3); }
.gallery__grid { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; }
@container screen (min-width: 600px) { .gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@container screen (min-width: 820px) { .gallery__grid { grid-template-columns: repeat(3, 1fr); } }
.gallery__tile { padding: 0; overflow: hidden; border-radius: var(--pwf-radius-l); }
.gallery__cap { display: block; padding: var(--pwf-space-3) var(--pwf-space-4); }
@container screen (min-width: 600px) {
  .gallery__tile--wide { grid-column: span 2; }
  .gallery__tile--wide .media { aspect-ratio: 3 / 2; }
}
.gallery__group + .gallery__group { margin-top: var(--pwf-space-16); }
.gallery__group h2 { margin-bottom: var(--pwf-space-6); }

/* contact */
.contact__grid { display: grid; gap: var(--pwf-space-6); grid-template-columns: 1fr; grid-template-areas: "info" "form" "map"; }
@container screen (min-width: 820px) {
  .contact__grid { grid-template-columns: 5fr 7fr; grid-template-areas: "info form" "map form"; align-items: start; }
}
.contact__info { grid-area: info; }
.contact__form { grid-area: form; }
.contact__map { grid-area: map; }
.contact__row { display: flex; align-items: center; gap: var(--pwf-space-3); min-height: 44px; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; color: var(--pwf-ink); text-decoration: none; }
.contact__addr { border-top: var(--pwf-border-w) solid var(--pwf-ink); padding-top: var(--pwf-space-4); margin-top: var(--pwf-space-4); }
.contact__addr h4 { margin-bottom: var(--pwf-space-1); }
.form__tile { box-shadow: var(--pwf-shadow-md); }
.form__grid { display: grid; grid-template-columns: 1fr; gap: 0 var(--pwf-space-4); }
@container screen (min-width: 600px) {
  .form__grid { grid-template-columns: repeat(2, 1fr); }
  .form__field--full { grid-column: 1 / -1; }
}
.map__frame { aspect-ratio: 4 / 5; }
.map__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@container screen (min-width: 600px) { .map__frame { aspect-ratio: 3 / 2; } }

/* ---------- 7. LO-FI wireframe layer (.lofi) - dropped in hi-fi ---------- */
.screen { container-type: inline-size; container-name: screen; background: var(--pwf-bg); color: var(--pwf-ink);
  --pwf-text-2xl: clamp(1.6rem, 4.5cqw, 2rem);
  --pwf-text-3xl: clamp(2rem, 6cqw, 2.75rem);
  --pwf-text-4xl: clamp(2.4rem, 7.5cqw, 3.5rem);
  --pwf-text-5xl: clamp(3rem, 9cqw, 4.5rem);
  --pwf-text-display: clamp(3.2rem, 11cqw, 9rem);
}
.lofi { --pwf-accent: var(--pwf-ink); --pwf-accent-dark: var(--pwf-ink); --pwf-on-accent: var(--pwf-on-dark); }
.lofi .tile--blush, .lofi .chip--blush, .lofi .chip--active { background: var(--pwf-surface); }
.lofi .tile--celadon { background: var(--pwf-bg); }
.lofi .tile--blush::after, .lofi .tile--celadon::after { position: absolute; top: 6px; right: 10px; font-family: var(--pwf-font-mono); font-weight: 500; font-size: 10px; letter-spacing: var(--pwf-tracking-wide); color: var(--pwf-muted); pointer-events: none; }
.lofi .tile--blush::after { content: "blush"; }
.lofi .tile--celadon::after { content: "celadon"; }
.lofi .chip--active::before, .lofi .btn--primary::before { content: none; }
.lofi img { filter: grayscale(1) contrast(1.03); }
.lofi a { text-decoration-color: var(--pwf-ink); }

/* hero bento - wariant v2 (D3, 2026-08-22): kafel zdjęcia na pełną wysokość (1:1, cała kotka w kadrze),
   pick i voucher przeniesione na sam koniec bento, pod pasek „dla firm”. */
@container screen (min-width: 820px) {
  .bento--v2 .hero__tile--photo { grid-column: span 2; grid-row: span 3; }
  .bento--v2 .hero__photo { aspect-ratio: auto; flex: 1 1 auto; min-height: 126px; }
  .bento--v2 .hero__photo > img { object-position: 50% 18%; }
  .bento--v2 .hero__tile--pick, .bento--v2 .hero__tile--voucher { grid-column: span 2; grid-row: span 1; }
}

/* gallery - warianty D3 */
.gallery__grid--overlay .gallery__tile { position: relative; }
.gallery__grid--overlay .media { border-bottom: 0; }
.gallery__grid--overlay .gallery__cap { position: absolute; left: var(--pwf-space-3); bottom: var(--pwf-space-3); background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-full); padding: 8px 14px; }
.gallery__grid--nowide .gallery__tile--wide { grid-column: span 1; }
.gallery__grid--nowide .gallery__tile--wide .media { aspect-ratio: 4 / 5; }
.contact__tel-btn { display: flex; margin-bottom: var(--pwf-space-4); }
@container screen (min-width: 820px) { .contact__tel-btn { display: none; } }
.form__alert { margin-top: var(--pwf-space-4); }

/* ---------- 8. HI-FI surface layer (.hifi) - D3; "quiet but not dead" (reguła 8) ---------- */
.hifi .band--grain { background-image: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--pwf-ink) 4%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--pwf-ink) 4%, transparent) 31px 32px); }
.hifi .band--slip.band--grain { background-image: repeating-linear-gradient(0deg, transparent 0 31px, color-mix(in srgb, var(--pwf-ink) 3%, transparent) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, color-mix(in srgb, var(--pwf-ink) 3%, transparent) 31px 32px); }
.hifi .band--ink { background-image: linear-gradient(158deg, color-mix(in srgb, var(--pwf-surface) 7%, var(--pwf-ink)), var(--pwf-ink) 70%); }
.hifi .tile--blush { background-image: linear-gradient(155deg, color-mix(in srgb, var(--pwf-surface) 30%, var(--pwf-tint-blush)), var(--pwf-tint-blush) 64%); }
.hifi .tile--celadon { background-image: linear-gradient(155deg, color-mix(in srgb, var(--pwf-surface) 30%, var(--pwf-tint-celadon)), var(--pwf-tint-celadon) 64%); }
.hifi .tile--ink { background-image: linear-gradient(158deg, color-mix(in srgb, var(--pwf-surface) 8%, var(--pwf-ink)), var(--pwf-ink) 70%); }
.hifi .card { background-image: linear-gradient(180deg, var(--pwf-surface), color-mix(in srgb, var(--pwf-bg) 55%, var(--pwf-surface))); }
.doodle--sm { position: absolute; top: -22px; right: 20px; width: 72px; height: 48px; pointer-events: none; }

/* canvas chrome (annotation only, never part of the page design) */
.canvas { padding: 56px 48px 96px; background: #E7E1D8; }
.canvas__title { font-family: var(--pwf-font-heading); font-weight: 400; text-transform: lowercase; font-size: 2.25rem; margin: 0 0 var(--pwf-space-3); }
.canvas__row { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 48px; }
.canvas__group + .canvas__group { margin-top: 96px; }
.frame { display: flex; flex-direction: column; gap: var(--pwf-space-3); flex: 0 0 auto; }
.frame__label { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; background: var(--pwf-ink); color: var(--pwf-on-dark); padding: 6px 12px; }
.frame__body { border: var(--pwf-border-w) solid var(--pwf-ink); box-shadow: var(--pwf-shadow-lg); overflow: hidden; background: var(--pwf-bg); }
.legend { display: grid; gap: var(--pwf-space-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 1180px; background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-m); box-shadow: var(--pwf-shadow-sm); padding: var(--pwf-space-6); margin: 0 0 64px; }
.legend__item { font-size: var(--pwf-text-sm); }
.legend__item b { display: block; font-family: var(--pwf-font-mono); font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; margin-bottom: 4px; }
.states { display: grid; gap: var(--pwf-space-6); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); padding: var(--pwf-space-8); }
.states__cell { background: var(--pwf-surface); border: var(--pwf-border-w) solid var(--pwf-ink); border-radius: var(--pwf-radius-m); padding: var(--pwf-space-6); }
.states__cell h4 { font-family: var(--pwf-font-mono); font-weight: 700; font-size: var(--pwf-text-xs); letter-spacing: var(--pwf-tracking-wide); text-transform: lowercase; margin-bottom: var(--pwf-space-4); }
.states__note { font-family: var(--pwf-font-mono); font-weight: 500; font-size: 11px; color: var(--pwf-muted); letter-spacing: var(--pwf-tracking-wide); margin-top: var(--pwf-space-2); }
.focus-demo { outline: var(--pwf-focus-ring); outline-offset: var(--pwf-focus-offset); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }