/* brianprzezdziecki.com polish layer (professional bundle only) */
.builds-axis,.build{grid-template-columns:280px minmax(0,1fr)}
@media (max-width:900px){.builds-axis,.build{grid-template-columns:150px minmax(0,1fr)}}
@media (max-width:600px){.builds-axis,.build{grid-template-columns:1fr}}
@media (max-width:640px){
  .axis .yrs span:not(:first-child):not(:last-child){font-size:0}
  .axis .yrs span:last-child{transform:translateX(-100%)}
  .rows .nm{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
}
.photo.empty{display:none}
@media (max-width:900px){.then,.yearcard{min-height:0}}
/* ---- mobile / touch layer ---- */
@media (max-width:600px){
  .page{padding-top:8vh;padding-bottom:80px}
  .lbl,.counts,.quote-src,.summary,.more,.back,.age,.stream .m,.ledger .m,.ledger .oc,.hint,.wlabel,.readout .d,.side .stat{font-size:12px!important}
  .pill{font-size:13px;padding:7px 0}
  .pill small{font-size:11.5px}
  .pills{row-gap:2px}
  .play{font-size:13px;padding:10px 0}
  input.search{font-size:16px;width:100%;padding:8px 0}
  .controls{gap:10px 20px}
  /* Then: one column, no empty cells, scrubber right under the month */
  .then{display:block}
  .then>div:nth-child(2){display:none}
  .then .big{font-size:40px}
  .scrub,.yearbar{display:grid;grid-template-columns:1fr auto;gap:0 16px;margin-top:18px}
  .scrub canvas,.yearbar canvas{grid-column:1/-1;grid-row:1}
  .scrub .play,.yearbar .play{grid-row:2}
  .yearbar #all{justify-self:end}
  .hint{margin-left:0}
  /* Interests: name and note get the full width, the time bar sits under them */
  .rows li,.axis{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"nm ct" "sp sp";gap:4px 12px;padding:10px 0}
  .axis{padding:6px 0}
  .rows .nm,.axis>div:first-child{grid-area:nm}
  .rows .span,.axis .yrs{grid-area:sp}
  .rows .ct,.axis>div:last-child{grid-area:ct;align-self:start}
  .rows .nm{display:block;white-space:normal;-webkit-line-clamp:unset;line-height:1.35}
  .rows .nm small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:2px 0 0;white-space:normal;font-size:12.5px}
  .axis .yrs span:not(:first-child):not(:last-child){font-size:0}
  .rows li{padding:8px 0}
  /* Builds: full name, description inline (no hover on a phone) */
  .build{padding:12px 0}
  .build .nm{white-space:normal;color:var(--ink)}
  .build .nm small{font-size:11px}
  /* Years */
  .ynav .arrows{font-size:20px;gap:28px}
  .ynav .arrows button{padding:6px 4px}
  .ydots{gap:2px 16px}
  .yearcard .head{font-size:18px}
}
.bwhat{display:none;color:var(--dim);font-size:13px;line-height:1.5;margin:4px 0 6px}
@media (hover:none),(max-width:600px){
  .bwhat{display:block}
  .build .bwhat{grid-column:1/-1}
}
section:has(#searches){display:none!important}
@media (max-width:600px){
  .row{grid-template-columns:30px minmax(0,1fr);gap:2px 10px;padding:16px 0}
  .row .t{white-space:nowrap}
  .row .d{grid-column:2;font-size:11.5px;color:var(--faint)}
}
.social{display:flex;gap:14px;margin:10px 0 0;font-family:var(--mono);font-size:11px}
.social a{color:var(--faint);text-decoration:none;transition:color .2s}
.social a:hover{color:var(--ink)}
@media (max-width:600px){.social{font-size:12px;gap:18px}.social a{padding:4px 0}}
@media (max-width:600px){
  .sky{height:min(74vh,660px)}
  /* interests: name, a one-line note and the count; the time bars are desktop detail */
  .rows .span,.axis{display:none!important}
  .rows li{grid-template-areas:"nm ct";grid-template-columns:minmax(0,1fr) 44px;padding:9px 0}
  .rows .nm small{-webkit-line-clamp:1}
}