@font-face {
  font-family: "DM Sans";
  src: url("./assets/fonts/dm-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f7f3ec;
  --ink: #272a28;
  --clay: #a64732;
  --site-muted: #686760;
  --line: #dcd5ca;
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a:focus-visible { outline: 2px solid var(--clay); outline-offset: 7px; }
::selection { background: #e8c2b1; color: var(--ink); }

.page-shell {
  width: min(100%, 1600px);
  min-height: 100svh;
  margin-inline: auto;
  padding-inline: clamp(28px, 5vw, 80px);
  display: flex;
  flex-direction: column;
}

.skip-link {
  position: absolute;
  left: 24px;
  top: 12px;
  z-index: 5;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 113px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  font-size: 28px;
  letter-spacing: -1.5px;
}
.brand-mark { width: 45px; height: 45px; }
.brand-dot { color: var(--clay); }
.family-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  font-size: 13px;
}
.family-prefix { color: var(--site-muted); }
.family-link svg { margin-left: 12px; }
.family-link svg, .planet-link svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform 180ms ease;
}
.family-link:hover svg { transform: translate(2px, -2px); }

.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding-block: 46px 40px;
}
.hero:focus { outline: none; }
.hero-copy { padding-block: 28px 42px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 34px;
  color: var(--clay);
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 1.5;
  text-transform: uppercase;
}
.status > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.page-shell h1 {
  margin: 0;
  font-size: clamp(62px, 6.7vw, 103px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.065em;
}
.page-shell h1 > span { display: block; }
.heading-accent { color: var(--clay); }
.intro {
  margin: 31px 0 18px;
  font-size: clamp(18px, 1.6vw, 23px);
  line-height: 1.5;
  letter-spacing: -.6px;
}
.description {
  max-width: 390px;
  margin: 0;
  color: var(--site-muted);
  font-size: 15px;
  line-height: 1.8;
}
.launch-note {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 43px;
}
.launch-line { width: 30px; height: 1px; background: var(--clay); flex: none; }
.launch-note p { margin: 0; font-size: 12px; line-height: 1.8; }
.launch-note p > span { color: var(--site-muted); }

.hero-visual { min-width: 0; margin: 0; }
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.04;
  overflow: hidden;
  border-radius: 3px 100px 3px 3px;
  background: #d9c7b6;
  isolation: isolate;
}
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 43%; }
.photo-shade {
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent 15%, rgb(28 24 19 / 55%));
  pointer-events: none;
}
.photo-caption {
  position: absolute;
  left: 35px;
  right: 25px;
  bottom: 31px;
  margin: 0;
  color: #fffaf2;
  font-size: clamp(25px, 2.3vw, 36px);
  letter-spacing: -1px;
  line-height: 1.2;
}
.photo-caption > span { color: #f0d2bc; }
.hero-visual figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  color: var(--site-muted);
  font-size: 11px;
  letter-spacing: .1px;
}
.hero-visual figcaption svg { fill: none; stroke: var(--clay); stroke-width: 1.3; }

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 83px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}
.site-footer p { margin: 0; color: var(--site-muted); }
.site-footer p > span { color: var(--ink); }
.planet-link { display: inline-flex; align-items: center; gap: 28px; min-height: 44px; }
.planet-link:hover { color: var(--clay); }
.planet-link:hover svg { transform: translateX(4px); }

@media (min-width: 1600px) {
  .hero { padding-block: 58px 52px; }
  .photo-frame { aspect-ratio: 1.04 / 1; }
}

@media (max-width: 1100px) {
  .site-header { min-height: 96px; }
  .hero { gap: 40px; padding-block: 38px 34px; }
  .page-shell h1 { font-size: clamp(55px, 6.7vw, 74px); }
  .hero-copy { padding-block: 24px; }
  .status { margin-bottom: 26px; }
  .intro { margin-top: 25px; font-size: 18px; }
  .description { font-size: 14px; }
  .launch-note { margin-top: 30px; }
  .photo-frame { aspect-ratio: .83; border-top-right-radius: 80px; }
  .photo-caption { left: 25px; bottom: 25px; font-size: 28px; }
}

@media (max-width: 800px) {
  .page-shell { padding-inline: 28px; }
  .site-header { min-height: 91px; }
  .brand { font-size: 25px; gap: 9px; }
  .brand-mark { width: 40px; height: 40px; }
  .family-link { font-size: 12px; }
  .family-link svg { margin-left: 5px; }
  .hero { grid-template-columns: 1fr; gap: 32px; padding-block: 40px 35px; }
  .hero-copy { padding: 0; }
  .status { margin-bottom: 24px; }
  .page-shell h1 { font-size: clamp(64px, 11vw, 88px); }
  .intro { font-size: 21px; margin-top: 25px; }
  .description { max-width: 430px; font-size: 15px; }
  .launch-note { margin-top: 27px; }
  .hero-visual { width: 100%; }
  .photo-frame { aspect-ratio: 1.28; border-top-right-radius: 90px; }
  .hero-photo { object-position: 50% 40%; }
  .photo-caption { font-size: 32px; left: 28px; bottom: 26px; }
  .site-footer { min-height: 85px; }
}

@media (max-width: 480px) {
  .page-shell { padding-inline: 22px; }
  .site-header { min-height: 83px; gap: 12px; }
  .brand { gap: 6px; font-size: 23px; letter-spacing: -1.25px; }
  .brand-mark { width: 35px; height: 35px; }
  .family-prefix { display: none; }
  .family-link { font-size: 11px; gap: 4px; }
  .family-link svg { width: 13px; height: 13px; margin: 0; }
  .hero { padding-top: 35px; gap: 30px; }
  .status { margin-bottom: 24px; font-size: 11px; letter-spacing: 1.7px; }
  .page-shell h1 { font-size: clamp(53px, 13.5vw, 64px); line-height: 1.07; letter-spacing: -.065em; }
  .intro { margin-top: 23px; margin-bottom: 15px; font-size: 18px; letter-spacing: -.4px; }
  .description { max-width: 330px; font-size: 14px; line-height: 1.75; }
  .launch-note { gap: 13px; margin-top: 24px; }
  .launch-note p { font-size: 11px; }
  .launch-line { width: 23px; }
  .photo-frame { aspect-ratio: .98; border-top-right-radius: 65px; }
  .photo-caption { left: 23px; bottom: 22px; font-size: 27px; }
  .hero-visual figcaption { padding-top: 13px; font-size: 10px; }
  .hero-visual figcaption svg { width: 19px; height: 19px; }
  .site-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 8px; padding-block: 19px; font-size: 11px; }
  .planet-link { min-height: 44px; gap: 18px; }
}

@media (max-width: 350px) {
  .page-shell { padding-inline: 18px; }
  .brand { font-size: 20px; gap: 5px; }
  .brand-mark { width: 30px; height: 30px; }
  .family-link { font-size: 10px; }
  .page-shell h1 { font-size: 47px; }
  .intro { font-size: 16px; }
  .description { font-size: 13px; }
  .photo-caption { font-size: 25px; left: 20px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@font-face { font-family:"DM Sans"; src:url("/assets/fonts/dm-sans-bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
#main-content:focus { outline:none; }
.site-nav { display:flex; flex-wrap:wrap; align-items:center; gap:28px; font-size:14px; }
.site-nav a { display:flex; align-items:center; min-height:44px; }
.site-nav a:hover,.site-nav [aria-current] { color:var(--clay); }
.content-section { padding-block:65px; border-top:1px solid var(--line); }
.eyebrow { color:var(--clay); text-transform:uppercase; letter-spacing:1.5px; font-size:11px; line-height:1.7; margin:0 0 17px; }
.page-shell h2 { font-size:clamp(30px,3.4vw,48px); font-weight:400; line-height:1.15; letter-spacing:-.045em; margin:0 0 24px; }
.home-intro { display:grid; grid-template-columns:1fr 1fr; column-gap:7%; }
.home-intro .eyebrow { grid-column:1/-1; }
.home-intro h2 { grid-row:2/4; max-width:470px; }
.home-intro > p:not(.eyebrow) { margin:0 0 18px; color:var(--site-muted); line-height:1.85; max-width:550px; }
.text-link { color:var(--clay); font-size:14px; line-height:1.7; text-decoration:underline; text-underline-offset:5px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.section-heading h2 { margin-bottom:0; }
.post-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:27px; }
.post-card { border:1px solid var(--line); border-radius:3px; background:#fbf8f3; overflow:hidden; }
.card-link { display:block; height:100%; }
.card-link:hover h3 { color:var(--clay); }
.post-card:focus-within { outline:2px solid var(--clay); outline-offset:5px; }
.card-link:focus-visible { outline-offset:-4px; }
.card-link > img { width:100%; height:auto; border-bottom:1px solid var(--line); }
.card-copy { padding:27px; }
.card-copy .eyebrow { font-size:10px; margin-bottom:13px; }
.card-copy :is(h2,h3) { font-size:25px; font-weight:400; line-height:1.24; letter-spacing:-.7px; margin:0 0 18px; }
.card-copy > p:not(.eyebrow) { font-size:14px; color:var(--site-muted); line-height:1.8; margin:0 0 22px; }
.read-link { display:flex; justify-content:space-between; color:var(--clay); font-size:12px; line-height:1.7; }
.faq { max-width:900px; margin-inline:auto; }
.faq details { border-bottom:1px solid var(--line); padding-block:20px; }
.faq summary { cursor:pointer; font-size:18px; line-height:1.5; }
.faq details p { color:var(--site-muted); font-size:15px; line-height:1.85; max-width:700px; }
.faq a,.article-body a,.prose-page a,.editor-note a { color:var(--clay); text-decoration:underline; text-underline-offset:4px; }
.breadcrumbs { padding-block:30px; font-size:12px; color:var(--site-muted); line-height:1.6; }
.breadcrumbs ol { display:flex; flex-wrap:wrap; gap:7px 13px; list-style:none; margin:0; padding:0; }
.breadcrumbs li+li::before { content:'/'; padding-right:13px; color:var(--line); }
.breadcrumbs a:hover { color:var(--clay); }
.blog-intro { padding-block:25px 45px; border-top:0; }
.blog-intro h1,.prose-page h1 { font-size:clamp(43px,5vw,76px); letter-spacing:-.055em; line-height:1.1; }
.article-lead { font-size:clamp(18px,1.6vw,22px); line-height:1.75; letter-spacing:-.3px; max-width:850px; }
.blog-intro .article-lead { max-width:720px; color:var(--site-muted); }
.editor-note { padding:24px; background:#eee8de; border-radius:3px; font-size:13px; line-height:1.85; margin:24px 0 55px; }
.article-header { max-width:1000px; padding-block:20px 30px; }
.article-header h1 { font-size:clamp(39px,5vw,73px); line-height:1.11; letter-spacing:-.05em; }
.article-cover { margin:0 0 42px; max-width:1200px; }
.article-cover img { width:100%; height:auto; aspect-ratio:40/21; object-fit:cover; border-radius:12px; }
.article-cover figcaption { margin-top:12px; font-size:12px; line-height:1.7; color:var(--site-muted); }
.article-meta { display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--site-muted); font-size:11px; line-height:1.8; margin-top:27px; }
.article-meta a { color:var(--clay); text-decoration:underline; text-underline-offset:3px; }
.article-grid { display:grid; grid-template-columns:240px minmax(0,760px); gap:clamp(40px,6vw,95px); padding-bottom:55px; }
.toc { align-self:start; position:sticky; top:25px; border-top:1px solid var(--line); padding-top:25px; }
.toc p { font-size:12px; text-transform:uppercase; letter-spacing:1px; margin:0 0 16px; color:var(--clay); }
.toc ol { list-style:none; padding:0; margin:0; }
.toc li { padding-block:7px; font-size:12px; line-height:1.7; color:var(--site-muted); }
.toc a:hover { color:var(--clay); }
.toc a { display:block; padding:4px 10px; border-inline-start:2px solid transparent; border-radius:0 6px 6px 0; transition:background-color .14s ease,color .14s ease; }
.toc a[aria-current="location"] { color:var(--clay); background:#eee8de; border-inline-start-color:var(--clay); font-weight:650; }
.toc a:focus-visible { outline:2px solid var(--clay); outline-offset:3px; }
.article-body { font-size:17px; line-height:1.9; overflow-wrap:anywhere; }
.article-body section { padding-top:28px; scroll-margin-top:24px; }
.article-body h2,.prose-page h2 { font-size:clamp(27px,2.6vw,36px); line-height:1.25; letter-spacing:-.8px; margin-bottom:23px; }
.article-body p { margin:0 0 24px; }
.article-body ul { padding-left:22px; }
.article-body li { padding-left:6px; margin-bottom:12px; }
.checklist { padding:23px 24px 14px 45px!important; background:#eee8de; border-radius:3px; }
.question-list { margin:0; }
.question-list dt { font-size:21px; line-height:1.45; margin-top:28px; color:var(--clay); }
.question-list dd { margin:10px 0 25px; }
.sources { border-top:1px solid var(--line); margin-top:40px; font-size:14px; }
.sources .editor-note { margin-bottom:0; }
.related .post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1000px; }
.prose-page { max-width:850px; margin-inline:auto; padding-block:25px 70px; }
.prose-page > p:not(.eyebrow) { font-size:17px; line-height:1.9; }
.prose-page .article-lead { font-size:21px!important; }
.prose-page h2 { margin-top:42px; }
.site-footer nav { display:flex; gap:24px; flex-wrap:wrap; }
.site-footer nav a { display:flex; align-items:center; min-height:44px; }
.site-footer nav a:hover { color:var(--clay); }
@media(max-width:1000px) {
  .post-grid { gap:16px; }
  .card-copy { padding:21px; }
  .card-copy :is(h2,h3) { font-size:22px; }
  .article-grid { grid-template-columns:190px minmax(0,1fr); gap:35px; }
}
@media(max-width:800px) {
  .content-section { padding-block:42px; }
  .home-intro { display:block; }
  .post-grid { grid-template-columns:1fr; gap:24px; }
  .card-link { display:grid; grid-template-columns:40% 1fr; align-items:center; }
  .card-link>img { border-bottom:0; }
  .card-copy { padding:24px; }
  .card-copy :is(h2,h3) { font-size:25px; }
  .card-copy>p:not(.eyebrow) { font-size:13px; }
  .article-grid { grid-template-columns:1fr; gap:10px; }
  .toc { position:static; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .toc li { padding-block:5px; font-size:13px; }
  .article-header { padding-top:8px; }
  .article-body { font-size:16px; }
  .related .post-grid { grid-template-columns:1fr; }
  .site-footer { flex-wrap:wrap; padding-block:20px; }
}
@media(max-width:580px) {
  .site-header { flex-wrap:wrap; gap:0 20px; padding-block:15px 9px; }
  .site-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; font-size:13px; width:100%; padding-top:8px; }
  .brand { margin-right:auto; }
  .section-heading { display:block; }
  .section-heading .text-link { display:inline-block; margin-top:18px; }
  .card-link { display:block; }
  .card-link>img { border-bottom:1px solid var(--line); }
  .card-copy { padding:24px; }
  .blog-intro h1,.prose-page h1 { font-size:41px; }
  .article-header h1 { font-size:39px; }
  .article-meta { gap:5px 15px; margin-top:20px; }
  .article-lead { font-size:18px; }
  .breadcrumbs { padding-block:24px; font-size:11px; }
  .site-footer nav { gap:6px 22px; }
}

/* Nuxt: opakowanie treści strony nie zmienia układu. */
.contents { display: contents; }

/* Readable editorial tables, including narrow screens. */
.guide-table-wrap { max-width:100%; overflow-x:auto; margin:0 0 28px; }
.guide-table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.6; }
.guide-table th,.guide-table td { text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--line,#ded8cf); }
.guide-table th { color:var(--clay); background:rgba(166,71,50,.06); }
.guide-table-wrap:focus-visible { outline:2px solid var(--clay); outline-offset:4px; }