:root{
  --iris:#2d0092;
  --pink:#df2061;
  --bone:#ffffff;
  --bone-75:rgba(255,255,255,.75);
  --bone-60:rgba(255,255,255,.6);
  --bone-50:rgba(255,255,255,.5);
  --serif:'Softcore',Georgia,serif;
  --sans:'Tekio Grotesk',system-ui,sans-serif;
  --max-w:72rem;
  --pad-x:20px;
}
@media (min-width:640px){ :root{ --pad-x:32px } }

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background:var(--iris);
  color:var(--bone);
  font-family:var(--sans);
  line-height:1.5;
}
img{ display:block; max-width:100%; height:auto }
p,ul{ margin:0; padding:0 }
ul{ list-style:none }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }

.layout{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  overflow-x:clip;
}
.container{
  max-width:var(--max-w);
  margin-inline:auto;
  padding-inline:var(--pad-x);
}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
}
.skip-link:focus{
  position:absolute; left:1rem; top:1rem; z-index:50;
  width:auto; height:auto; margin:0;
  overflow:visible; clip:auto; white-space:normal;
  background:var(--iris); color:var(--bone);
  padding:.5rem 1rem; border-radius:.125rem;
  outline:2px solid var(--pink); outline-offset:2px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:var(--iris);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-top:16px;
}
.brand{
  display:flex; align-items:center; gap:14px;
  line-height:1.25;
}
.brand img{ height:36px; width:auto }

.nav-desktop{ display:none }
.nav-desktop ul{
  display:flex; flex-direction:column; gap:4px;
  align-items:flex-end;
}
.nav-link{
  font-family:var(--serif);
  font-size:16px;
  color:var(--bone-75);
  transition:color .15s cubic-bezier(.4,0,.2,1);
}
.nav-link:hover,
.nav-link:focus-visible{ color:var(--pink) }
.nav-link[aria-current="page"]{ color:var(--pink) }

.menu-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
  margin:-9px -9px 0 0; /* keep 44px hit area without inflating layout */
}
.nav-mobile{ background:var(--iris) }
.nav-mobile[hidden]{ display:none }
.nav-mobile ul{ padding-block:8px }
.nav-mobile .nav-link{ display:block; padding-block:12px }

@media (min-width:768px){
  .nav-desktop{ display:block }
  .menu-btn,.nav-mobile{ display:none }
}

/* ---------- tagline (row 2) ---------- */
.tagline-wrap{ padding-top:10px; padding-bottom:10px }
.tagline{ margin:0; text-align:left }
.tagline span{
  display:inline-block;
  font-family:var(--serif);
  font-size:17px; line-height:1.35; color:var(--bone);
}
@media (min-width:768px){
  .tagline-wrap{ padding-top:0; margin-top:-10px }
  .tagline{
    margin:0 0 0 calc((100% - 64px) * 5 / 44);
    width:calc((100% - 64px) * 5 / 11 * 0.75);
  }
  .tagline span{
    white-space:nowrap;
    transform-origin:left top;
    font-size:20px;
  }
}


/* ---------- intro ---------- */
main{ flex:1; background:var(--iris) }
.intro{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  padding-top:24px;
  padding-bottom:55px;
}
.intro-aside{ display:flex; flex-direction:column; gap:13px }
.photo-wrap{ position:relative; z-index:0; width:100% }
.caption{
  font-family:var(--serif);
  font-size:20px; line-height:1.75rem;
  color:var(--bone-75);
}

.intro-text{
  display:flex; flex-direction:column;
  position:relative; z-index:1;
}
.lead{
  font-family:var(--serif);
  font-size:21px; line-height:1.625;
  color:var(--bone);
}
.body-copy{
  margin-top:24px;
  display:flex; flex-direction:column; gap:13px;
  font-size:18px; line-height:1.625;
  color:var(--bone);
}
.closer{
  margin-top:24px;
  font-size:19px; line-height:1.6;
  color:var(--bone);
}
.links-row{
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:flex-end;
  column-gap:32px; row-gap:16px;
  margin-top:24px;
}
.links-row a{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  transition:color .15s cubic-bezier(.4,0,.2,1);
}
.link-contact{ color:var(--pink) }
.link-newsletter{ color:var(--bone) }
.links-row a:hover,
.links-row a:focus-visible{ text-decoration:underline; text-underline-offset:4px }

@media (min-width:768px){
  .intro{ grid-template-columns:38.2fr 61.8fr }
  .photo-wrap{
    width:168%;
    -webkit-mask-image:linear-gradient(to right, black 60%, rgba(0,0,0,0.2) 60%);
    mask-image:linear-gradient(to right, black 60%, rgba(0,0,0,0.2) 60%);
  }
  .photo-wrap img{ width:100%; max-width:none }
  .intro-text{ max-width:61.8% }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--iris) }
.site-footer .container{ padding-block:20px }
.site-footer p{
  font-size:12px; line-height:1rem;
  color:var(--bone-50);
}

/* ---------- reveal animation ---------- */
@keyframes reveal{
  from{ opacity:0; transform:translateY(10px) }
  to{ opacity:1; transform:none }
}
.reveal{ animation:reveal .6s cubic-bezier(.4,0,.2,1) both }
.reveal-delayed{ animation-delay:.15s }
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-delayed{ animation:none }
}

/* ---------- focus visibility ---------- */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
  border-radius:.125rem;
}

/* ---------- nav: disabled item (journal, pending Substack) ---------- */
.nav-link.is-disabled{
  color:rgba(255,255,255,.35);
  cursor:default;
  pointer-events:none;
}

/* ---------- about page ---------- */
.photo-caption{ text-align:center }
@media (min-width:768px){
  /* 168% szer. kolumny × 60% maski = widoczna część zdjęcia */
  .photo-caption{ width:calc(168% * 0.6) }
}
.about-meta{
  margin-top:10px;
  font-size:12px; line-height:1.1rem;
  color:var(--bone-60);
}
.about-prose .lead{ margin-bottom:24px }
.about-prose .body-copy{ margin-top:0; gap:21px }

/* about: zdanie-zawias przed track record */
.pivot-line{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:var(--bone);
}



/* adres mailowy pod miastami */
.contact-line{ margin-top:4px }
.contact-line a{ color:var(--bone-60); transition:color .15s cubic-bezier(.4,0,.2,1) }
.contact-line a:hover, .contact-line a:focus-visible{ color:var(--pink) }

/* pikselowa koperta przy adresie */
.pixel-mail{
  width:18px; height:18px;
  image-rendering:pixelated;
  display:inline-block;
  vertical-align:-5px;
  margin-right:6px;
}