/* Page layout for the Bystanek portfolio.
   Every value comes from tokens/ — nothing hardcoded except structure. */

*{box-sizing:border-box}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

.mono{font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label)}

/* Hero field. Bled past the hero and down through the index, clipped by .top. */
.top{position:relative;overflow:hidden}
.glow{
  position:absolute;left:-12%;right:-12%;top:-24%;height:1650px;pointer-events:none;
  background:
    radial-gradient(42% 34% at 32% 26%,var(--glow-near),transparent 72%),
    radial-gradient(52% 30% at 66% 62%,var(--glow-far),transparent 74%);
  animation:drift var(--ambient) var(--ease) infinite alternate;
}
@keyframes drift{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(5%,3%,0) scale(1.1)}}
/* The loop is a full-bleed repaint: not worth the battery on phones. */
@media (pointer:coarse){.glow{animation:none}}
@media (prefers-reduced-motion:reduce){.glow{animation:none}}

/* Nav */
nav{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-4);padding:var(--space-5) 0 0}
nav .brand{
  font:var(--type-label);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-body);margin-right:auto;
  /* Match the links' hit-area height so a wrapped row stays evenly spaced. */
  display:inline-flex;align-items:center;min-height:var(--tap-min);
}
nav a{
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  padding:0 var(--nav-link-px);
  font:var(--type-nav);color:var(--text-label);
  transition:color var(--micro) var(--ease);
}
nav a:hover,nav a:active{color:var(--accent-text)}

/* Theme toggle */
.tgl{
  appearance:none;background:none;cursor:pointer;
  display:inline-flex;align-items:center;
  height:var(--control-h-sm);padding:0 13px;
  border:var(--hairline);border-radius:var(--radius);
  font:var(--type-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-label);
  transition:color var(--micro) var(--ease),border-color var(--micro) var(--ease);
}
.tgl:hover{color:var(--accent-text);border-color:var(--accent-text)}
.tgl:active{color:var(--accent-text);opacity:.72}

/* Hero */
.hero{position:relative;padding:var(--hero-y) 0 var(--section-y)}
.hero h1{font:var(--type-display);letter-spacing:var(--tracking-display)}
.hero h1 .em{color:var(--accent-text);font-style:italic}
.hero .lede{max-width:var(--measure-narrow);font:var(--type-lede);color:var(--text-muted);margin:var(--space-5) 0 0}

/* Buttons */
.cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}
.btn{
  display:inline-flex;align-items:center;
  height:var(--control-h);padding:0 var(--control-px);
  border-radius:var(--radius);font:var(--type-ui);
  transition:background var(--micro) var(--ease),color var(--micro) var(--ease),border-color var(--micro) var(--ease);
}
.btn-fill{background:var(--accent-fill);color:var(--text-on-accent)}
.btn-fill:hover,.btn-fill:active{background:var(--accent-fill-hover);color:var(--text-on-accent)}
.btn-line{border:var(--hairline);color:var(--text-body)}
.btn-line:hover,.btn-line:active{border-color:var(--accent-text);color:var(--accent-text)}

/* Sections */
section{padding:var(--section-y) 0}
.shead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding-bottom:var(--space-1)}
.shead h2{font:var(--type-h2);letter-spacing:var(--tracking-display)}

/* The work list. No cards — one hairline and a lot of air. */
.list{display:grid}
.item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:var(--space-1) var(--space-5);
  padding:var(--row-y) 0;
  border-bottom:var(--hairline);
}
.item:first-child{border-top:var(--hairline)}
.item h3{grid-column:1;font:var(--type-h3);letter-spacing:var(--tracking-display)}
.item h3 a{color:var(--text-body);transition:color var(--micro) var(--ease)}
.item:hover h3 a{color:var(--accent-text)}
.item .tag{grid-column:2;grid-row:1}
.item p{grid-column:1;margin:var(--space-1) 0 0;color:var(--text-muted);max-width:var(--measure-narrow);font:var(--type-body-sm)}
.item .meta{grid-column:1;margin-top:var(--space-2);color:var(--text-quiet)}
.item.is-quiet h3{color:var(--text-muted)}

@media (max-width:620px){
  .item{grid-template-columns:1fr}
  .item .tag{grid-column:1;grid-row:auto;order:-1}
}

/* Narrow: the brand takes its own row so the links sit together underneath
   rather than being spread apart by its auto margin. Three links plus the
   toggle still fit on one line — no hamburger needed. */
@media (max-width:460px){
  nav .brand{flex:1 0 100%;margin-right:0}
  nav{gap:0 var(--space-3)}
}

/* About */
.about{position:relative}
.about .grid{display:grid;grid-template-columns:170px minmax(0,1fr);gap:var(--space-6)}
.about .prose p{margin:0 0 var(--space-4);max-width:var(--measure)}
.about .prose p:last-child{margin:0}

@media (max-width:620px){
  .about .grid{grid-template-columns:1fr;gap:var(--space-3)}
}

/* Footer */
footer{border-top:var(--hairline);padding:var(--space-6) 0 var(--space-7)}
footer .in{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:baseline;width:100%}
footer .mono:first-child{margin-right:auto}
footer a{
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  padding:0 var(--nav-link-px);font:var(--type-nav);
}

/* Theme swap: cross-fade colours so the toggle doesn't snap. */
html.tw *{
  transition:background-color var(--micro-slow) var(--ease),border-color var(--micro-slow) var(--ease),
             color var(--micro-slow) var(--ease)!important;
}