/* Kosmos Magnesów. Page-local choreography; the ScrollCraft engine is unmodified. */
:root {
  --sc-canvas: #fffefd;
  --sc-surface: #f0eaf4;
  --sc-ink: #38263e;
  --sc-ink-soft: #65556b;
  --sc-accent: #b52e55;
  --sc-accent-ink: #fffefd;
  --sc-font-display: Manrope, sans-serif;
  --sc-font-text: Manrope, sans-serif;
  --pink: var(--sc-accent);
  --muted: var(--sc-ink-soft);
}
html { scroll-padding-top: 32px; }
body { overflow-x: clip; }
h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h1 em,h2 em { font-family: inherit; font-style: normal; letter-spacing: inherit; }
.reveal { animation: none; }
.button,.button span,.preset,.nav nav a { transition-duration: 180ms; }
.button:hover { transform: none; }
.button:active,.preset:active { transform: scale(.97); }
.section,.process-section,.kit-section,.faq-section { padding-block: 80px; }
.hero { min-height: min(900px,100svh); padding-block: 145px 60px; gap: 40px; }
.hero h1 { font-size: clamp(44px,5.25vw,76px); line-height: 1.04; letter-spacing: -.065em; }
.hero h1 em { font-size: 1em; }
.hero .intro { max-width: 370px; line-height: 1.75; }
.hero-visual { min-height: 540px; border-radius: 42% 42% 32px 32px; }
.hero-sample { position: absolute; right: -10px; top: 65px; z-index: 2; }
.hero-visual>div[data-sc-parallax]:not(.hero-sample) { mix-blend-mode: multiply; }
.hero-sample .floating-magnet { position: relative; inset: auto; }
.hero .photo-credit { font-size: 9px; }
.ideas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.ideas .section-heading { align-self: start; padding-top: 24px; }
.ideas-layout { margin: 0; display: block; }
.photo-shell { max-width: 600px; }
.photo-shell img { height: 320px; object-fit: cover; }
.uses { margin-top: 22px; }
.uses article { padding-block: 16px; }
.uses h3 { font-size: 18px; }
.uses p { margin-top: 4px; line-height: 1.65; }
.process-grid { gap: 72px; }
.process-copy h2 { font-size: clamp(36px,4vw,56px); }
.video-shell { max-width: 480px; justify-self: end; }
.workshop { background: var(--lilac); --assembly-size: clamp(190px,23vw,300px); }
.workshop-stage { background: var(--lilac); display: flex; flex-direction: column; justify-content: center; min-height: 650px; }
.workshop-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 64px; align-items: center; padding-block: 32px; }
.workshop h2 { font-size: clamp(46px,5.5vw,80px); line-height: 1.03; }
.workshop .preview-copy>p:not(.eyebrow) { margin-top: 22px; max-width: 390px; font-size: 15px; }
.workshop .preview-copy>p.small-note { font-size: 11px; }
.workshop .file-input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.upload-label:has(+input:focus-visible) { outline: 3px solid var(--pink); outline-offset: 5px; }
.workshop .preview-copy .upload-status { font-size: 11px; min-height: 38px; }
.workshop .preset { background: #fffefd; font-size: 12px; }
.workshop .preset.selected { background: var(--ink); }
.workshop .upload-label { background: var(--pink); min-height: 46px; }
.assembly-board { position: relative; min-width: 0; align-self: stretch; min-height: 530px; display: flex; flex-direction: column; justify-content: space-between; padding: 28px; background: #fffefd; border-radius: 32px; box-shadow: 0 24px 60px #38263e0b; }
.assembly-note { display: flex; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: .09em; color: var(--muted); }
.assembly-object { position: relative; flex: none; width: var(--assembly-size); height: var(--assembly-size); align-self: center; margin-block: 30px 90px; perspective: 1000px; }
.assembly-base,.assembly-core,.assembly-face,.assembly-film { position: absolute; inset: 0; border-radius: 24px; transform-origin: 50% 50%; }
.assembly-base { background: #38263e; box-shadow: 0 18px 36px #38263e19; transform: translate(0,7px) rotate(-6deg); }
.assembly-core { background: #ddd5e1; box-shadow: inset 0 2px 0 #fffefd; transform: translate(0,3px) rotate(-6deg); }
.assembly-face { transform: rotate(-6deg); }
.assembly-film { pointer-events: none; background: linear-gradient(130deg,#fff9,transparent 42%,#fff3); box-shadow: inset 1px 2px 0 #ffffffb0; transform: rotate(-6deg); }
.assembly-face .magnet-preview { width: 100%; height: 100%; transform: none; transition: none; box-shadow: 0 4px 4px #38263e12; }
.assembly-face #magnet-art { padding: 28px; }
.assembly-face #magnet-art strong { font-size: clamp(43px,4.8vw,66px); }
.assembly-face #magnet-art small { font-size: 10px; }
.assembly-dimension { position: absolute; left: 0; right: 0; bottom: -50px; text-align: center; font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.assembly-dimension::before,.assembly-dimension::after { content: ''; display: inline-block; vertical-align: middle; height: 1px; background: #b7a8bd; width: 25%; margin: 0 10px; }
.assembly-caption { text-align: center; }
.assembly-caption strong { display: block; font-size: 16px; line-height: 1.4; }
.assembly-caption p { color: var(--muted); font-size: 10px; margin-top: 6px; }
.workshop-next { margin: 0 auto 24px; font-size: 13px; min-height: 32px; }
.kit-layout { margin-top: 36px; }
.facts { margin-top: 40px; padding-top: 28px; }
.facts .format-count { font-size: inherit; color: inherit; }
.kit-info .button { margin-top: 20px; }
.calculator-section { padding-block: 64px; }
.faq-section { padding-block: 64px; }
.contact-section { padding-block: 72px 40px; }
.contact-card { padding: 48px; gap: 70px; }
.contact-card h2 { font-size: 52px; }
.footer { padding-bottom: 32px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-2px); }
}
/* Native content when JS is unavailable. No invisible or unreachable controls. */
html:not(.sc-ready) .workshop-stage { padding-block: 40px; }
@media(min-width:1600px) { .hero-visual { min-height: 590px; } }
@media(max-width:1100px) {
  .hero { gap: 24px; }
  .hero-visual { min-height: 460px; }
  .ideas,.workshop-layout,.process-grid { gap: 40px; }
  .workshop .preset { padding-inline: 11px; }
  .assembly-board { padding: 22px; }
}
@media(max-width:800px) {
  .section,.process-section,.kit-section,.faq-section { padding-block: 52px; }
  .hero { min-height: auto; padding-block: 115px 40px; gap: 28px; }
  .hero h1 { font-size: clamp(40px,9.5vw,65px); margin-block: 16px 20px; }
  .hero-copy { max-width: 650px; }
  .hero .intro { max-width: 480px; font-size: 14px; }
  .hero .actions { margin-top: 20px; gap: 18px; }
  .hero-visual { min-height: 350px; max-width: 440px; }
  .hero-machine { width: 80%; margin-top: 20px; }
  .hero-sample { right: 10px; top: 60px; }
  .hero .photo-credit { font-size: 7px; }
  .ideas { grid-template-columns: 1fr; gap: 26px; }
  .ideas .section-heading { padding-top: 0; }
  .ideas h2,.kit-section h2 { margin-top: 0; }
  .ideas .section-heading>p:last-child { margin-top: 16px; font-size: 14px; }
  .photo-shell img { height: 270px; }
  .uses article { padding-block: 14px; }
  .uses p { font-size: 12px; }
  .process-grid { gap: 28px; }
  .steps { margin-top: 24px; }
  .steps li { margin-top: 18px; }
  .video-shell { width: 100%; max-width: 390px; justify-self: center; }
  .workshop { --assembly-size: 180px; }
  .workshop-stage { min-height: 0; }
  .workshop-layout { grid-template-columns: 1fr; gap: 14px; padding-block: 20px 10px; }
  .workshop h2 { font-size: 38px; margin-top: 12px; }
  .workshop h2 br { display: none; }
  .workshop .preview-copy>p:not(.eyebrow) { margin-top: 10px; max-width: none; font-size: 12px; line-height: 1.5; }
  .workshop .preset-group { margin-top: 14px; gap: 6px; }
  .workshop .preset { min-height: 44px; font-size: 10px; padding: 9px 12px; }
  .workshop .upload-label { margin-top: 10px; min-height: 44px; padding: 8px 18px; font-size: 11px; }
  .workshop .file-input { margin-top: 6px; font-size: 10px; }
  .workshop .preview-copy>p.small-note { font-size: 10px; margin-top: 10px!important; }
  .workshop .preview-copy .upload-status { font-size: 10px; min-height: 0; margin-top: 4px!important; }
  .assembly-board { min-height: 300px; padding: 18px; border-radius: 24px; }
  .assembly-object { margin-block: 25px 50px; }
  .assembly-note { font-size: 8px; }
  .assembly-face #magnet-art { padding: 20px; }
  .assembly-face #magnet-art strong { font-size: 40px; }
  .assembly-face #magnet-art small { font-size: 7px; }
  .assembly-face #magnet-art>span { font-size: 17px; right: 16px; top: 15px; }
  .assembly-dimension { bottom: -30px; font-size: 9px; }
  .assembly-caption strong { font-size: 13px; }
  .assembly-caption p { font-size: 8px; }
  .workshop-next { margin-bottom: 14px; min-height: 28px; font-size: 11px; }
  .kit-layout { gap: 28px; margin-top: 28px; }
  .kit-image-shell { max-width: 380px; justify-self: center; }
  .facts { gap: 24px; }
  .calculator-section { gap: 28px; }
  .calculator-copy>p:not(.eyebrow) { margin-top: 18px; font-size: 14px; }
  .calculator-copy>p.small-note { font-size: 10px; }
  .contact-section { padding-block: 48px 32px; }
  .contact-card { padding: 28px; gap: 12px; }
  .contact-card h2 { font-size: 42px; }
  .contact-card h2 br:nth-child(2) { display: none; }
  .contact-card .signature { margin-top: 16px; }
}
@media(max-width:450px) {
  .hero-visual { min-height: 300px; }
  .hero-machine { width: 86%; }
  .hero .floating-label { font-size: 9px; }
  .hero .floating-magnet { width: 90px; height: 90px; }
  .product-label { top: 18px; }
  h2 { font-size: 36px; }
}
/* Very short screens use ordinary flow. No pinned content can be clipped. */
@media(max-height:740px), (prefers-reduced-motion:reduce) {
  .workshop { height: auto!important; }
  .workshop-stage { height: auto; position: relative; overflow: visible; padding-block: 24px; }
  .assembly-base { transform: translate(0,7px) rotate(-6deg)!important; }
  .assembly-core { transform: translate(0,3px) rotate(-6deg)!important; }
  .assembly-face,.assembly-film { transform: rotate(-6deg)!important; }
  .assembly-film { opacity: .55!important; }
}