:root{ --bg:#ff1aa3; --fg:#fff; --soft:rgba(255,255,255,.35); }
html:has(#mode:checked){ --bg:#fff; --fg:#000; --soft:rgba(0,0,0,.3); }
html,body{ margin:0; background:var(--bg); color:var(--fg); transition:background .4s, color .4s; }
body{
  font:13px/1.45 "Comic Sans MS", "Comic Sans", "Comic Neue", cursive; text-transform:lowercase;
  min-height:100vh; box-sizing:border-box; padding:16px;
  display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:auto 1fr auto; gap:24px 16px;
}
a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }
p{ margin:0; }
.blurb{ display:inline-block; max-width:280px; }
sup{ font-size:9px; margin-right:4px; }

.name{ grid-column:1 / 3; grid-row:1; }
.what{ grid-column:3 / 5; grid-row:1; text-align:center; }

/* little pill switch, pure css */
#mode{ display:none; }
.switch{ grid-column:5 / 7; grid-row:1; justify-self:end; align-self:start; display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.track{ width:30px; height:16px; border:1px solid var(--fg); border-radius:16px; position:relative; transition:border-color .4s; }
.knob{ position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--fg); transition:left .3s cubic-bezier(.3,1.5,.5,1), background .4s; }
#mode:checked + .switch .knob{ left:16px; }
.switch .off, #mode:checked + .switch .on{ display:none; }
#mode:checked + .switch .off{ display:inline; }

/* work falls down the page like a staircase, then starts again */
.work{ grid-column:1 / 7; display:flex; flex-direction:column; gap:28px; justify-content:center; }
.work p{ width:33.33%; box-sizing:border-box; padding-right:16px; }
.work p:nth-child(5n+1){ margin-left:16.66%; }
.work p:nth-child(5n+2){ margin-left:33.33%; }
.work p:nth-child(5n+3){ margin-left:50%; }
.work p:nth-child(5n+4){ margin-left:66.66%; }
.work p:nth-child(5n+5){ margin-left:83.33%; width:16.66%; }

/* a single post: writing on the left, a board of everything on the right, each scrolling on its own */
body.is-post{ height:100vh; height:100dvh; grid-template-rows:auto minmax(0,1fr) auto; }
.post{ grid-column:1 / 7; display:grid; grid-template-columns:repeat(6,1fr); gap:0 16px; min-height:0; }
.post .text, .post .board{ min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--fg) transparent; }
.post .text{ grid-column:1 / 3; padding-right:24px; }
.post.no-board .text{ grid-column:2 / 5; }
.post .head{ margin-bottom:2em; }
.post .copy p + p{ margin-top:1em; }
.post .copy img{ max-width:100%; height:auto; display:block; margin:1em 0; }
.post .copy h1, .post .copy h2, .post .copy h3{ font-size:inherit; font-weight:400; margin:1.5em 0 .5em; }
.post .copy{ padding-bottom:24px; }

.board{ grid-column:3 / 7; padding:4px 4px 0 0; }
.pins{ columns:3 180px; column-gap:16px; padding-bottom:24px; }
/* soft fade where the two columns run off the bottom */
.post .text, .post .board{ -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 32px), transparent); }
.tile{ display:block; break-inside:avoid; margin:0 0 16px; position:relative; color:inherit; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.tile:hover{ text-decoration:none; transform:translateY(-3px) rotate(-.6deg); }
.tile:focus-visible{ outline:1px dotted var(--fg); outline-offset:3px; }
.tile img, .tile video{ width:100%; height:auto; display:block; }
.tile-thumb img{ aspect-ratio:16 / 9; object-fit:cover; }
.tile .over{ position:absolute; left:8px; right:8px; bottom:6px; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.tile:hover .over{ text-decoration:underline; }
/* tiles for things without a picture: inverted little cards */
.card{ background:var(--fg); color:var(--bg); padding:12px; box-sizing:border-box; aspect-ratio:1; display:flex; flex-direction:column; justify-content:space-between; transition:transform .3s cubic-bezier(.2,.8,.2,1), background .4s, color .4s; }
.card.pdf{ aspect-ratio:4 / 5; }
.card.wide{ aspect-ratio:16 / 9; }
.card.link{ aspect-ratio:auto; min-height:96px; gap:16px; }
.card .kind, .card .act{ font-size:11px; }
.card .nm{ font-size:17px; line-height:1.15; overflow-wrap:anywhere; }
.card:hover .act{ text-decoration:underline; }
.card.audio .kind::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--bg); margin-right:6px; vertical-align:1px; }

/* the viewer that opens when you click a tile */
.lb{ position:fixed; inset:0; z-index:50; background:var(--bg); color:var(--fg); display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:16px; box-sizing:border-box; }
.lb[hidden]{ display:none; }
html.lb-open, html.lb-open body{ overflow:hidden; }
.lb-bar{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.lb button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-transform:lowercase; }
.lb button:hover{ text-decoration:underline; }
.lb button:focus{ outline:none; }
.lb button:focus-visible, .lb a:focus-visible{ outline:1px dotted var(--fg); outline-offset:3px; }
.lb-open[hidden]{ display:none; }
.lb-open{ margin-right:16px; }
.lb-stage{ display:flex; align-items:center; justify-content:center; min-height:0; padding:16px 0; }
.lb-content{ width:100%; max-width:1100px; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.lb-content > p.label{ align-self:flex-start; }
.lb-content.image img{ max-width:100%; max-height:calc(100dvh - 130px); width:auto; height:auto; object-fit:contain; }
.lb-content .item{ width:100%; }
.lb-content.video video{ width:100%; max-height:calc(100dvh - 190px); object-fit:contain; display:block; }
.lb-content.audio{ max-width:520px; }
.lb-content .frame{ width:100%; aspect-ratio:16 / 9; max-height:calc(100dvh - 160px); }
.lb-content iframe{ border:0; width:100%; height:100%; display:block; }
.lb-content iframe.sc{ height:166px; }
.lb-content .code{ width:100%; }
.lb-content .code iframe{ height:auto; min-height:152px; }
.lb-content iframe.pdf{ height:calc(100dvh - 140px); background:#fff; }

/* our own players: plain text buttons and a thin line, like the rest of the site */
.custom audio{ display:none; }
.custom video{ cursor:pointer; }
.custom video + .ctl{ margin-top:10px; }
.ctl .row{ display:flex; align-items:baseline; gap:12px; }
.ctl button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-transform:lowercase; }
.ctl button:hover{ text-decoration:underline; }
.ctl .pp{ min-width:52px; text-align:left; }
.ctl .name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ctl .time{ font-variant-numeric:tabular-nums; opacity:.75; white-space:nowrap; }
.ctl .bar{
  --p:0%;
  -webkit-appearance:none; appearance:none; display:block; width:100%; height:14px; margin:6px 0 0; padding:0;
  background:linear-gradient(var(--fg), var(--fg)) 0 50% / var(--p) 1px no-repeat,
             linear-gradient(var(--soft), var(--soft)) 0 50% / 100% 1px no-repeat;
  cursor:pointer;
}
.ctl .bar::-webkit-slider-thumb{ -webkit-appearance:none; width:9px; height:9px; border-radius:50%; background:var(--fg); border:0; transition:transform .2s; }
.ctl .bar::-moz-range-thumb{ width:9px; height:9px; border-radius:50%; background:var(--fg); border:0; }
.ctl .bar::-moz-range-track{ background:transparent; }
.ctl .bar:hover::-webkit-slider-thumb{ transform:scale(1.4); }
.ctl .bar:focus-visible{ outline:1px dotted var(--fg); outline-offset:3px; }
.on .pp::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--fg); margin-right:6px; vertical-align:1px; animation:blink 1.2s infinite; }
@keyframes blink{ 50%{ opacity:.2; } }

.where{ grid-column:1 / 3; align-self:end; }
.links{ grid-column:3 / 5; align-self:end; }
.mail{ grid-column:5 / 7; align-self:end; text-align:right; }

@media (max-width:700px){
  body{ grid-template-columns:1fr; grid-template-rows:none; }
  body > *{ grid-column:1 !important; grid-row:auto !important; text-align:left !important; }
  .switch{ justify-self:start; order:-1; }
  .work p, .work p:nth-child(n){ width:75%; margin-left:0; }
  .work p:nth-child(even){ margin-left:25%; }
  body.is-post{ height:auto; }
  .post{ display:block; }
  .post .text, .post .board{ overflow:visible; padding-right:0; }
  .board{ margin-top:32px; -webkit-mask-image:none !important; mask-image:none !important; }
  .post .text{ -webkit-mask-image:none; mask-image:none; }
  .pins{ columns:2; column-gap:12px; }
  .tile{ margin-bottom:12px; }
  .card .nm{ font-size:15px; }
}