/* mypage.bystanek.com — the Mellow components, ported from JSX to classes.
   Structure, spacing and states follow components/*.jsx exactly. The only thing
   invented here is .list-line, noted at the bottom. */

@import url("styles.css");

*{box-sizing:border-box}

/* ---- layout ------------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.top{position:relative;overflow:hidden}
section{padding:var(--section-y) 0}

/* ---- AmbientGlow ------------------------------------------------------- */
@keyframes mellow-drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to{transform:translate3d(5%,3%,0) scale(1.1)}
}
.mellow-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:mellow-drift var(--ambient) var(--ease) infinite alternate;
}
/* A 26s full-bleed gradient repaint is a battery cost on phones. Static there. */
@media (pointer:coarse){.mellow-glow{animation:none}}

/* ---- MonoLabel --------------------------------------------------------- */
.mono{
  font:var(--type-label);letter-spacing:var(--tracking-label);
  text-transform:uppercase;color:var(--text-label);
}
/* No .mono--quiet here on purpose: --text-quiet (#8A8579) measures 3.33:1 on
   paper, under the 4.5:1 floor. Use the default tone. */

/* ---- NavBar ------------------------------------------------------------ */
.nav{
  position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--space-2) var(--space-5);padding:clamp(20px,5vw,34px) 0 0;
}
.nav__brand{
  font:var(--type-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-body);text-decoration:none;margin-right:auto;
  display:inline-flex;align-items:center;min-height:var(--tap-min);
}
.nav__brand:hover{color:var(--text-body)}
.nav__link{
  font:var(--type-nav);color:var(--text-label);text-decoration:none;
  display:inline-flex;align-items:center;min-height:var(--tap-min);
  padding:0 var(--nav-link-px);transition:color var(--micro) var(--ease);
}
.nav__link:hover,.nav__link:active{color:var(--accent-text)}

/* ---- ThemeToggle ------------------------------------------------------- */
.tgl{
  appearance:none;background:none;cursor:pointer;display:inline-flex;align-items:center;
  height:var(--control-h-sm);padding:0 var(--tap-px);border-radius:var(--radius);
  border:var(--border-w) solid var(--border-hairline);color:var(--text-label);
  font:var(--type-label);letter-spacing:var(--tracking-label);text-transform:uppercase;
  transition:color var(--micro) var(--ease),border-color var(--micro) var(--ease),opacity var(--micro) var(--ease);
}
.tgl:hover{color:var(--accent-text);border-color:var(--accent-text)}
/* the reference page cross-fades the whole document on theme change */
html.tw *{transition:background-color var(--micro-slow) var(--ease),border-color var(--micro-slow) var(--ease),color var(--micro-slow) var(--ease),box-shadow var(--micro-slow) var(--ease)!important}
:root[data-theme="dark"] .mellow-glow{opacity:.62}

/* ---- Button ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  font:var(--type-ui);border-radius:var(--radius);border:0;cursor:pointer;text-decoration:none;
  min-width:var(--tap-min);height:var(--control-h);padding:0 var(--control-px);
  transition:background-color var(--micro) var(--ease),color var(--micro) var(--ease),box-shadow var(--micro) var(--ease),opacity var(--micro) var(--ease);
}
.btn:active{opacity:.72}
.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{background:transparent;color:var(--text-body);box-shadow:inset 0 0 0 var(--border-w) var(--border-hairline)}
.btn--line:hover,.btn--line:active{color:var(--accent-text);box-shadow:inset 0 0 0 var(--border-w) var(--accent-text)}

/* ---- hero -------------------------------------------------------------- */
.hero{position:relative;padding:var(--hero-y) 0 clamp(64px,10vw,108px)}
.hero h1{font:var(--type-display)}
.hero h1 em{color:var(--accent-text);font-style:italic}
.hero p{
  max-width:var(--measure-narrow);font:var(--type-lede);
  color:var(--text-muted);margin:var(--space-5) 0 0;
}
.cta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-6)}

/* ---- PhotoFrame -------------------------------------------------------- */
.frame{margin:0}
.frame__img{
  aspect-ratio:3 / 2;background:var(--surface-raised);border-radius:var(--radius);
  display:grid;place-items:center;overflow:hidden;
}
.frame__img img{width:100%;height:100%;object-fit:cover;display:block}
.frame__cap{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:var(--space-4);padding-top:var(--space-2);
}
.frame__cap .mono:last-child{margin-left:auto}

/* ---- SectionHead ------------------------------------------------------- */
.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)}

/* ---- SiteRow ----------------------------------------------------------- */
.list{display:grid}
.row{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:10px var(--space-4);padding:var(--row-y) 0 46px;border-bottom:var(--hairline);
}
.row--first{border-top:var(--hairline)}
.row h3{font:var(--type-h3);color:var(--text-body)}
.row--muted h3{color:var(--text-muted)}
.row h3 a{color:var(--text-body);text-decoration:none;transition:color var(--micro) var(--ease)}
.row:hover h3 a,.row h3 a:active{color:var(--accent-text)}
/* stretched link: the whole row is the tap target, not the title text */
.row h3 a span{position:absolute;inset:0}
.row .mono{grid-column:2;grid-row:1}
.row p{
  grid-column:1;margin:var(--space-1) 0 0;color:var(--text-muted);
  max-width:var(--measure-narrow);font:var(--type-body-sm);
}
@media (max-width:620px){
  .row{grid-template-columns:1fr}
  .row .mono{grid-column:1;grid-row:auto;order:-1}
}

/* ---- Prose ------------------------------------------------------------- */
.prose{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6)}
.prose>.mono{flex:0 0 170px}
.prose__body{flex:1 1 min(100%,32ch);min-width:min(100%,26ch);max-width:var(--measure)}
.prose__body p{margin:0 0 22px}
.prose__body p:last-child{margin:0}

/* ---- SiteFooter -------------------------------------------------------- */
.foot{border-top:var(--hairline);padding:48px 0 72px}
.foot__in{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);align-items:baseline}
.foot__in .mono:first-child{margin-right:auto}
.foot__in a{font:var(--type-nav)}

/* ---- .list-line — the one addition -------------------------------------
   Mellow has no list primitive. This is SiteRow with the paragraph removed and
   the vertical rhythm reduced: same grid, same hairline, same mono tag. No box,
   no fill, no radius. Used for music and gear. */
.list-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;
  gap:6px var(--space-4);padding:var(--space-3) 0;border-bottom:var(--hairline);
}
.list-line:first-child{border-top:var(--hairline)}
.list-line__name{font:var(--type-body-sm);color:var(--text-body)}
.list-line .mono{grid-column:2;grid-row:1;text-align:right}
@media (max-width:620px){
  .list-line{grid-template-columns:1fr}
  .list-line .mono{grid-column:1;grid-row:auto;text-align:left}
}
.after-list{margin:var(--space-4) 0 0;font:var(--type-body-sm);color:var(--text-muted);max-width:var(--measure-narrow)}