@charset "UTF-8";
/* ==========================================================================
   FORMA i FASON — magazyn o biustonoszach
   Arkusz stylów, wersja 1.0
   Struktura:  01 tokeny · 02 reset · 03 typografia · 04 układ · 05 nagłówek
               06 hero · 07 sekcje · 08 komponenty · 09 stopka · 10 ruch
               11 responsywność · 12 druk
   ========================================================================== */

/* ---------- 01 · tokeny -------------------------------------------------- */
:root{
  /* papier i tusz */
  --paper:      #efece6;
  --paper-hi:   #f7f5f1;
  --paper-lo:   #e5e0d7;
  --ink:        #1e1b18;
  --ink-2:      #4c463f;
  --ink-3:      #7c756b;
  --line:       #d2cabd;
  --line-soft:  #e0d9cd;

  /* barwy tkanin */
  --sand:       #efd9c2;
  --sand-deep:  #e2bf9b;
  --clay:       #9b8271;
  --fern:       #4f675c;
  --fern-hi:    #6e8a7c;
  --haze:       #a9b0b8;
  --blush:      #e7c9c2;

  /* akcent interakcji */
  --accent:     var(--fern);
  --accent-ink: #f4f2ec;

  /* miary */
  --page:       1240px;
  --gutter:     clamp(1.25rem, 4vw, 3.5rem);
  --rule:       1px;
  --radius:     0px;

  /* rytm pionowy */
  --s1: .5rem;  --s2: .875rem; --s3: 1.25rem; --s4: 2rem;
  --s5: 3rem;   --s6: 4.5rem;  --s7: 6.5rem;  --s8: 9rem;

  /* typografia */
  --display: "Italiana", "Bodoni Moda", "Didot", "Times New Roman", serif;
  --figure:  "Bodoni Moda", "Didot", "Times New Roman", serif;
  --body:    "Jost", "Futura", "Century Gothic", -apple-system, "Segoe UI", sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 02 · reset -------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  /* ziarno papieru — faktura wtopiona w tło, bez osobnej warstwy nad treścią */
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .12 0 0 0 0 .1 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  color:var(--ink-2);
  font-family:var(--body);
  font-size:clamp(1rem,.97rem + .18vw,1.075rem);
  font-weight:300;
  line-height:1.72;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
[hidden]{ display:none !important; }

::selection{ background:var(--fern); color:var(--accent-ink); }

/* ---------- 03 · typografia --------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--ink);
  margin:0;
  line-height:1.02;
  letter-spacing:.06em;
  text-transform:uppercase;
}
h1{ font-size:clamp(2.6rem,1.5rem + 4.6vw,5.4rem); line-height:.98; letter-spacing:.045em; }
h2{ font-size:clamp(1.9rem,1.25rem + 2.6vw,3.35rem); }
h3{ font-size:clamp(1.15rem,1rem + .7vw,1.6rem); letter-spacing:.1em; }
h4{ font-size:clamp(.95rem,.9rem + .25vw,1.08rem); letter-spacing:.16em; }

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; }
/* odsyłacz w tekście — podkreślenie znikające przy najechaniu.
   Przyciski (.btn) celowo wyłączone, żeby nie dziedziczyły koloru tekstu. */
.prose a:not(.btn){
  color:var(--ink);
  text-decoration:none;
  background-image:linear-gradient(var(--fern),var(--fern));
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:.12em;
  transition:background-size .35s var(--ease), color .35s var(--ease);
}
.prose a:not(.btn):hover,.prose a:not(.btn):focus-visible{ color:var(--fern); background-size:0 1px; }

strong{ font-weight:500; color:var(--ink); }
em{ font-style:italic; }

/* etykieta / nadtytuł */
.kicker{
  font-family:var(--body);
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin:0 0 var(--s3);
  display:flex; align-items:center; gap:.75rem;
}
.kicker::before{
  content:""; width:2.25rem; height:1px; background:var(--line); flex:none;
}
.kicker--center{ justify-content:center; }
.kicker--center::after{ content:""; width:2.25rem; height:1px; background:var(--line); flex:none; }

.lede{
  font-size:clamp(1.08rem,1rem + .5vw,1.32rem);
  line-height:1.6;
  color:var(--ink-2);
  font-weight:300;
}

.figure-num{
  font-family:var(--figure);
  font-weight:400;
  font-size:clamp(2.4rem,1.6rem + 3vw,4rem);
  line-height:1;
  color:var(--ink);
  letter-spacing:-.01em;
}

/* gwiazdka — motyw powtarzany za projektem referencyjnym */
.star{ width:.9em; height:.9em; flex:none; color:var(--sand-deep); }

/* ---------- 04 · układ --------------------------------------------------- */
.wrap{ width:min(100% - (var(--gutter) * 2), var(--page)); margin-inline:auto; position:relative; z-index:1; }
.wrap--tight{ --page:920px; }
.wrap--text{ --page:720px; }

.section{ padding-block:var(--s7); position:relative; }
.section--flush{ padding-block:var(--s6); }
.section--tight{ padding-block:var(--s5); }
.section--article{ padding-top:var(--s5); }
.section + .section{ padding-top:0; }
.band + .section{ padding-top:var(--s7); }

.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

.head{ margin-bottom:var(--s5); }
.head--center{ text-align:center; max-width:56ch; margin-inline:auto; }
.head p{ margin-top:var(--s3); }

/* skip link */
.skip{
  position:absolute; left:.75rem; top:.75rem; z-index:100;
  transform:translateY(-160%);
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none;
  transition:transform .25s var(--ease);
}
.skip:focus{ transform:none; }

:where(a,button,summary,input,select):focus-visible{
  outline:2px solid var(--fern); outline-offset:3px; border-radius:1px;
}

/* ---------- 05 · nagłówek ------------------------------------------------ */
.mast{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-soft);
}
.mast__in{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:var(--s3);
  min-height:74px;
}
.brand{
  display:inline-flex; flex-direction:column; align-items:center;
  text-decoration:none; color:var(--ink); line-height:1;
}
.brand__mark{
  font-family:var(--display);
  font-size:1.32rem; letter-spacing:.34em; text-transform:uppercase;
  padding-left:.34em;
}
.brand__sub{
  font-size:.54rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--ink-3); margin-top:.42em; padding-left:.36em;
}

.nav{ display:flex; align-items:center; gap:var(--s4); }
.nav--end{ justify-content:flex-end; }
.nav a,.nav__btn{
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); text-decoration:none;
  background:none; border:0; padding:.35rem 0; cursor:pointer;
  position:relative; white-space:nowrap;
}
.nav a::after,.nav__btn::after{
  content:""; position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--ink); transition:right .4s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="page"]::after,
.nav__btn:hover::after,.nav__btn[aria-expanded="true"]::after{ right:0; }

/* rozwijane menu działu */
.drop{ position:relative; }
.drop__panel{
  position:absolute; top:calc(100% + 18px); left:0;
  min-width:min(86vw,520px);
  background:var(--paper-hi);
  border:1px solid var(--line);
  padding:var(--s4);
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s2) var(--s4);
  opacity:0; visibility:hidden; translate:0 -8px;
  transition:opacity .28s var(--ease), translate .28s var(--ease), visibility .28s;
  box-shadow:0 30px 60px -34px rgba(30,27,24,.35);
}
.nav--end .drop__panel{ left:auto; right:0; }
.drop[data-open="true"] .drop__panel{ opacity:1; visibility:visible; translate:0 0; }
.drop__panel a{
  font-size:.78rem; letter-spacing:.08em; text-transform:none;
  color:var(--ink-2); padding:.3rem 0;
}
.drop__panel a::after{ background:var(--fern); }
.drop__title{
  grid-column:1 / -1;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-3);
  padding-bottom:.5rem; border-bottom:1px solid var(--line-soft);
}

/* przycisk menu mobilnego */
.burger{
  display:none; background:none; border:0; padding:.5rem; cursor:pointer;
  width:2.75rem; height:2.75rem; align-items:center; justify-content:center;
}
.burger span{ display:block; width:20px; height:1px; background:var(--ink); position:relative; transition:background .2s; }
.burger span::before,.burger span::after{
  content:""; position:absolute; left:0; width:20px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }
.burger[aria-expanded="true"] span{ background:transparent; }
.burger[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.drawer{
  position:fixed; inset:74px 0 0; z-index:55;
  background:var(--paper);
  padding:var(--s5) var(--gutter) var(--s7);
  overflow-y:auto;
  display:none;
}
.drawer[data-open="true"]{ display:block; }
.drawer__group + .drawer__group{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line-soft); }
.drawer h4{ color:var(--ink-3); margin-bottom:var(--s3); }
.drawer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.drawer a{ text-decoration:none; color:var(--ink); font-size:1.02rem; }

/* ---------- 06 · hero ---------------------------------------------------- */
.hero{ position:relative; padding-block:var(--s6) var(--s5); overflow:hidden; }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(1.5rem,4vw,4.5rem);
  align-items:center;
}
.hero__art{ position:relative; max-width:400px; width:100%; justify-self:center; }
.hero__copy{ position:relative; }
.hero h1 .u{ display:block; }
.hero__lede{ margin-top:var(--s4); max-width:46ch; }
.hero__meta{
  margin-top:var(--s5); display:flex; flex-wrap:wrap; gap:var(--s5);
  padding-top:var(--s4); border-top:1px solid var(--line);
}
.hero__meta div{ max-width:26ch; }
.hero__meta p{ font-size:.85rem; color:var(--ink-3); margin:.4rem 0 0; line-height:1.5; }

/* dysk z ilustracją — kluczowy motyw projektu */
.disc{
  position:relative;
  aspect-ratio:1;
  border-radius:50%;
  background:var(--sand);
  overflow:hidden;
  display:grid; place-items:center;
}
.disc--clay{ background:var(--clay); }
.disc--fern{ background:var(--fern); }
.disc--haze{ background:var(--haze); }
.disc--blush{ background:var(--blush); }
.disc--paper{ background:var(--paper-lo); }
.disc > svg,.disc > img{ width:100%; height:100%; object-fit:contain; }

/* łuk — kształt „arch” z sekcji produktowej */
.arch{
  border-radius:50vw 50vw 3px 3px;
  overflow:hidden; position:relative;
  background:var(--sand);
  aspect-ratio:3 / 4;
  display:grid; place-items:center;
  max-width:400px; margin-inline:auto; width:100%;
}
.arch > svg,.arch > img{ width:100%; height:100%; object-fit:contain; }

/* nić — sygnaturowa linia biegnąca przez stronę */
.thread{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  color:var(--ink);
  opacity:.3;
}
.thread path{
  fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len,2000); stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset 1.9s var(--ease);
}
.thread.is-drawn path{ stroke-dashoffset:0; }

/* ---------- 07 · sekcje -------------------------------------------------- */
.band{
  background:var(--fern); color:var(--accent-ink);
  padding-block:var(--s7); position:relative; overflow:hidden;
  margin-block:0;
}
.band--clay{ background:var(--clay); }
.band--haze{ background:var(--haze); color:var(--ink); }
.band h2,.band h3{ color:inherit; }
.band .kicker{ color:inherit; opacity:.72; }
.band .kicker::before,.band .kicker::after{ background:currentColor; opacity:.5; }
.band__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
.band p{ opacity:.92; }
.band .figures > div{ border-left-color:currentColor; }
.band .figures p{ color:inherit; opacity:.75; }
.band .figure-num{ color:inherit; }
.band::after{
  content:""; position:absolute; right:-8%; top:-40%; width:46%; aspect-ratio:1;
  border:1px solid currentColor; opacity:.18; border-radius:50%;
}

/* siatki */
.grid{ display:grid; gap:clamp(1.5rem,3vw,2.75rem); }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* karta z dyskiem — wzorzec „Trending now” */
.tile{ text-decoration:none; color:inherit; display:block; }
.tile .disc,.tile .arch{ transition:transform .6s var(--ease); }
.tile:hover .disc,.tile:focus-visible .disc,
.tile:hover .arch,.tile:focus-visible .arch{ transform:translateY(-8px); }
.tile__label{
  display:block; margin-top:var(--s3);
  font-family:var(--display); font-size:1.05rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink); line-height:1.2;
}
.tile__note{ display:block; margin-top:.5rem; font-size:.83rem; color:var(--ink-3); line-height:1.55; }
.tile__more{
  display:inline-block; margin-top:.7rem; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fern); position:relative; padding-bottom:2px;
}
.tile__more::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform-origin:right; transform:scaleX(0); transition:transform .4s var(--ease); }
.tile:hover .tile__more::after,.tile:focus-visible .tile__more::after{ transform-origin:left; transform:scaleX(1); }

/* filar / cecha z ikoną liniową */
.pillar{ text-align:center; }
.pillar__icon{ width:64px; height:64px; margin:0 auto var(--s3); color:var(--sand-deep); }
.pillar h3{ font-size:1.02rem; letter-spacing:.14em; margin-bottom:.7rem; }
.pillar p{ font-size:.88rem; color:var(--ink-3); line-height:1.6; }

/* liczby */
.figures{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
.figures > div{ padding-left:var(--s3); border-left:1px solid var(--line); }
.figures p{ font-size:.85rem; color:var(--ink-3); margin:.6rem 0 0; line-height:1.55; max-width:24ch; }

/* proza artykułu */
.prose{ max-width:74ch; }
.prose h2{
  margin-top:var(--s6); margin-bottom:var(--s3);
  font-size:clamp(1.45rem,1.15rem + 1.15vw,2.05rem);
  letter-spacing:.07em;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:var(--s5); margin-bottom:var(--s2); font-size:1.12rem; letter-spacing:.12em; }
.prose ul,.prose ol{ margin:0 0 1.3em; padding-left:1.15rem; }
.prose li{ margin-bottom:.55em; padding-left:.35rem; }
.prose ul{ list-style:none; padding-left:0; }
.prose ul li{ position:relative; padding-left:1.5rem; }
.prose ul li::before{
  content:""; position:absolute; left:0; top:.72em; width:.6rem; height:1px; background:var(--sand-deep);
}
.prose ol{ counter-reset:n; list-style:none; padding-left:0; }
.prose ol li{ position:relative; padding-left:2.4rem; counter-increment:n; }
.prose ol li::before{
  content:counter(n,decimal-leading-zero);
  position:absolute; left:0; top:.05em;
  font-family:var(--figure); font-size:.92rem; color:var(--sand-deep);
}
.prose > *:first-child{ margin-top:0; }

/* układ artykułu z boczną nawigacją */
.article{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,240px);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
.aside{ position:sticky; top:104px; font-size:.85rem; }
.aside__box + .aside__box{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line-soft); }
.aside h4{ color:var(--ink-3); margin-bottom:var(--s3); }
.aside ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.aside a{ color:var(--ink-2); text-decoration:none; line-height:1.45; display:inline-block; }
.aside a:hover{ color:var(--fern); }
.toc a[data-active="true"]{ color:var(--ink); font-weight:400; }

/* tabela */
.table-scroll{ overflow-x:auto; margin:var(--s4) 0; border-top:1px solid var(--ink); }
table{ width:100%; border-collapse:collapse; font-size:.9rem; min-width:460px; }
th,td{ text-align:left; padding:.72rem .9rem; border-bottom:1px solid var(--line-soft); }
th{
  font-family:var(--body); font-weight:400; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
}
td:first-child{ color:var(--ink); font-weight:400; }
tbody tr:hover{ background:var(--paper-hi); }

/* wyróżnik / cytat redakcyjny */
.pull{
  margin:var(--s5) 0;
  padding:var(--s4) 0 var(--s4) var(--s4);
  border-left:2px solid var(--sand-deep);
  font-family:var(--display);
  font-size:clamp(1.2rem,1rem + 1vw,1.75rem);
  line-height:1.28; letter-spacing:.03em; text-transform:none;
  color:var(--ink);
}

/* ramka informacyjna */
.note{
  background:var(--paper-hi);
  border:1px solid var(--line);
  padding:var(--s4);
  margin:var(--s5) 0;
}
.note h4{ margin-bottom:var(--s2); color:var(--ink); }
.note p{ font-size:.92rem; }
.note--sand{ background:color-mix(in srgb,var(--sand) 45%, var(--paper-hi)); border-color:var(--sand-deep); }

/* odsyłacz tematyczny do sklepu */
.shop{
  margin:var(--s5) 0;
  padding:var(--s5);
  background:var(--paper-hi);
  border:1px solid var(--line);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s4); align-items:center;
}
.shop__disc{ width:96px; }
.shop h4{ letter-spacing:.14em; margin-bottom:.6rem; }
.shop p{ font-size:.92rem; margin-bottom:var(--s3); }
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; color:var(--accent-ink); background:var(--ink);
  padding:.95rem 1.6rem; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), gap .35s var(--ease);
}
.btn:hover,.btn:focus-visible{ background:transparent; color:var(--ink); gap:1.1rem; }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--accent-ink); }
.btn--light{ background:var(--accent-ink); color:var(--ink); border-color:var(--accent-ink); }
.btn--light:hover{ background:transparent; color:var(--accent-ink); }
.btn svg{ width:.9rem; }

/* pytania i odpowiedzi */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq summary{
  list-style:none; cursor:pointer; padding:1.35rem 2.5rem 1.35rem 0; position:relative;
  font-family:var(--display); font-size:1rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); line-height:1.35;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.75rem;
  width:12px; height:12px;
  border-right:1px solid var(--ink-3); border-bottom:1px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .35s var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg); }
.faq .faq__a{ padding:0 var(--s5) 1.6rem 0; font-size:.94rem; color:var(--ink-2); }

/* okruszki */
.crumbs{ padding-block:var(--s3); border-top:1px solid var(--line-soft); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.crumbs li::after{ content:"·"; margin-left:.5rem; color:var(--line); }
.crumbs li:last-child::after{ display:none; }
.crumbs a{ text-decoration:none; color:var(--ink-3); }
.crumbs a:hover{ color:var(--ink); }

/* nawigacja poprzedni / następny */
.pager{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:var(--s6); }
.pager a{ background:var(--paper); padding:var(--s4); text-decoration:none; display:block; transition:background .35s var(--ease); }
.pager a:hover{ background:var(--paper-hi); }
.pager span{ display:block; font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem; }
.pager strong{ font-family:var(--display); font-weight:400; font-size:1.05rem; letter-spacing:.09em; text-transform:uppercase; }
.pager a:last-child{ text-align:right; }

/* kalkulator rozmiaru */
.calc{ background:var(--paper-hi); border:1px solid var(--line); padding:var(--s5); margin:var(--s5) 0; }
.calc__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4); }
.calc label{ display:block; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.6rem; }
.calc input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--ink);
  padding:.5rem 0; font-family:var(--figure); font-size:1.6rem; color:var(--ink);
}
.calc input:focus{ outline:none; border-color:var(--fern); }
.calc__out{ margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line-soft); display:flex; align-items:baseline; gap:var(--s3); flex-wrap:wrap; }
.calc__size{ font-family:var(--figure); font-size:clamp(2rem,1.4rem + 2vw,3.2rem); color:var(--ink); line-height:1; }
.calc__msg{ font-size:.85rem; color:var(--ink-3); max-width:34ch; }

/* indeks działu */
.index-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.index-list li{ border-bottom:1px solid var(--line-soft); }
.index-list a{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s4);
  align-items:baseline; padding:1.5rem 0; text-decoration:none; color:inherit;
  transition:padding-inline .4s var(--ease), background .4s var(--ease);
}
.index-list a:hover{ padding-inline:1rem; background:var(--paper-hi); }
.index-list .n{ font-family:var(--figure); font-size:.85rem; color:var(--sand-deep); }
.index-list .t{ font-family:var(--display); font-size:clamp(1.05rem,.95rem + .6vw,1.45rem); letter-spacing:.09em; text-transform:uppercase; color:var(--ink); }
.index-list .d{ display:block; font-family:var(--body); font-size:.85rem; letter-spacing:0; text-transform:none; color:var(--ink-3); margin-top:.45rem; max-width:62ch; }
.index-list .arrow{ color:var(--ink-3); font-size:.85rem; }

/* lista odsyłaczy (strona 404) */
.link-list h4{ color:var(--ink-3); margin-bottom:var(--s3); }
.link-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.link-list a{ color:var(--ink-2); text-decoration:none; font-size:.92rem; }
.link-list a:hover{ color:var(--fern); }

/* odstęp między grupami w kolumnie stopki */
.foot__top h4 + ul + h4{ margin-top:var(--s4); }

/* ---------- 09 · stopka -------------------------------------------------- */
.foot{ background:var(--ink); color:#cfc8bf; margin-top:var(--s8); padding-block:var(--s6) var(--s4); position:relative; z-index:1; }
.foot a{ color:#cfc8bf; text-decoration:none; }
.foot a:hover{ color:#fff; }
.foot__top{ display:grid; grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,1fr)); gap:var(--s5); }
.foot h4{ color:#8f877d; margin-bottom:var(--s3); font-size:.6rem; letter-spacing:.3em; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:.85rem; }
.foot .brand__mark{ color:#f2eee7; }
.foot .brand__sub{ color:#8f877d; }
.foot__blurb{ font-size:.85rem; line-height:1.65; margin-top:var(--s4); max-width:34ch; color:#a29a90; }
.foot__bot{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid #322e2a;
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between;
  font-size:.72rem; letter-spacing:.1em; color:#8f877d;
}
.foot__bot a{ color:#a29a90; }

/* ---------- 10 · ruch ---------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(22px); }
.is-in[data-reveal]{ opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease); }
.is-in[data-reveal="1"]{ transition-delay:.08s; }
.is-in[data-reveal="2"]{ transition-delay:.16s; }
.is-in[data-reveal="3"]{ transition-delay:.24s; }
.is-in[data-reveal="4"]{ transition-delay:.32s; }

.hero h1 .u{ overflow:hidden; padding-bottom:.14em; margin-bottom:-.14em; }
.hero h1 .u > span{ display:block; transform:translateY(105%); }
.hero.is-ready h1 .u > span{ transform:none; transition:transform 1.05s var(--ease); }
.hero.is-ready h1 .u:nth-child(2) > span{ transition-delay:.1s; }
.hero.is-ready h1 .u:nth-child(3) > span{ transition-delay:.2s; }
.hero__art,.hero__lede,.hero__meta{ opacity:0; transform:translateY(18px); }
.hero.is-ready .hero__art{ opacity:1; transform:none; transition:opacity 1.1s var(--ease) .12s, transform 1.1s var(--ease) .12s; }
.hero.is-ready .hero__lede{ opacity:1; transform:none; transition:opacity .9s var(--ease) .34s, transform .9s var(--ease) .34s; }
.hero.is-ready .hero__meta{ opacity:1; transform:none; transition:opacity .9s var(--ease) .46s, transform .9s var(--ease) .46s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  [data-reveal],.hero__art,.hero__lede,.hero__meta{ opacity:1 !important; transform:none !important; }
  .hero h1 .u > span{ transform:none !important; }
  .thread path{ stroke-dashoffset:0 !important; }
}

/* ---------- 11 · responsywność ------------------------------------------- */
@media (max-width:1080px){
  .article{ grid-template-columns:minmax(0,1fr); }
  .aside{ position:static; border-top:1px solid var(--line); padding-top:var(--s4); }
  .aside__box + .aside__box{ margin-top:var(--s4); }
}
@media (max-width:900px){
  :root{ --s7:4.5rem; --s8:6rem; }
  .mast__in{ grid-template-columns:auto 1fr auto; min-height:66px; }
  .nav--start,.nav--end .drop{ display:none; }
  .nav--end{ gap:var(--s3); }
  .burger{ display:inline-flex; }
  .drawer{ inset-block-start:66px; }
  .hero__grid{ grid-template-columns:minmax(0,1fr); gap:var(--s5); }
  .hero__art{ max-width:420px; }
  .band__grid{ grid-template-columns:minmax(0,1fr); }
  .grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--3{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__top{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .figures{ grid-template-columns:minmax(0,1fr); gap:var(--s4); }
}
@media (max-width:640px){
  :root{ --s5:2.25rem; --s6:3.25rem; --s7:3.75rem; }
  /* na telefonie nagłówek prowadzi, ilustracja idzie pod niego */
  .hero__grid{ gap:var(--s4); }
  .hero__copy{ order:-1; }
  .hero__art{ max-width:250px; }
  .grid--2,.grid--3,.grid--4{ grid-template-columns:minmax(0,1fr); }
  .grid--4.grid--keep{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shop{ grid-template-columns:minmax(0,1fr); text-align:left; }
  .shop__disc{ width:72px; }
  .calc__row{ grid-template-columns:minmax(0,1fr); }
  .pager{ grid-template-columns:minmax(0,1fr); }
  .pager a:last-child{ text-align:left; }
  .foot__top{ grid-template-columns:minmax(0,1fr); }
  .index-list a{ grid-template-columns:auto minmax(0,1fr); }
  .index-list .arrow{ display:none; }
  .brand__sub{ letter-spacing:.24em; }
  .hero__meta{ gap:var(--s4); }
}

/* ---------- 12 · druk ---------------------------------------------------- */
@media print{
  .mast,.drawer,.foot,.pager,.shop,.thread{ display:none !important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding-block:1rem; }
  a{ text-decoration:underline; }
}