/*
  tuckyes: an old-school profile, in black and white.
  Plain boxes, plain links, newest posts first. Nothing here is trying to keep you.
  Page background and effect come from site.md.
*/
@font-face { font-family: "Figtree"; src: url(fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(fonts/figtree-italic.woff2) format("woff2"); font-weight: 300 900; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;
  --page-bg: #030304;
  --page-bg-image: none;
  --page-bg-size: auto;

  --sheet: rgba(10, 10, 10, .8);
  --box: #0d0d0d;
  --head: #1d1d1d;
  --cell-th: #171717;
  --cell-td: #111;
  --line: #2e2e2e;
  --line-soft: #222;
  --text: #dcdcdc;
  --muted: #8c8c8c;
  --bright: #fff;
  --font: "Figtree", Verdana, Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--page-bg); background-image: var(--page-bg-image); background-size: var(--page-bg-size); }
body { margin: 0; color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; }
a { color: var(--bright); text-decoration: underline; text-decoration-color: #666; text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--bright); }
:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 8px; }
strong { color: var(--bright); }

/* ---------- film grain, vignette, and (from site.js) dust and scratches ---------- */
body[data-effect="grain"]::before {
  content: ""; position: fixed; inset: -240px; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .09;
  animation: grain 1s steps(10) infinite;
}
body[data-effect="grain"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .85) 100%);
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-120px, -200px); }
  20% { transform: translate(-40px, 100px); }
  30% { transform: translate(170px, -60px); }
  40% { transform: translate(-200px, 140px); }
  50% { transform: translate(60px, 210px); }
  60% { transform: translate(220px, -10px); }
  70% { transform: translate(-90px, 60px); }
  80% { transform: translate(30px, -150px); }
  90% { transform: translate(-180px, -90px); }
}
body[data-effect="pixels"]::after, body[data-effect="stars"]::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0, 0, 0, .85) 100%);
}
.fx-pixels, .fx-stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; image-rendering: pixelated; }
.fx-dust { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* ---------- top bar ---------- */
.topbar { background: #141414; border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 900px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.logo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--bright); text-decoration: none; }
.logo span { font-weight: 400; color: var(--muted); }
.topbar nav { display: flex; flex-wrap: wrap; font-size: 13px; }
.topbar nav a { color: var(--text); text-decoration: none; padding: 0 10px; border-left: 1px solid var(--line); line-height: 1.2; }
.topbar nav a:first-child { padding-left: 0; border-left: 0; }
.topbar nav a:hover { color: var(--bright); text-decoration: underline; }

/* ---------- the page ---------- */
.sheet { max-width: 900px; margin: 18px auto 0; padding: 20px; background: var(--sheet); border: 1px solid var(--line); }
.profile { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }

/* ---------- name, photo, status ---------- */
.id h1 { font-size: 26px; font-weight: 700; line-height: 1.15; color: var(--bright); margin: 0 0 10px; }
.id-row { display: flex; gap: 12px; align-items: flex-start; }
.pic { flex: none; width: 140px; }
.pic img, .no-photo { display: block; width: 140px; border: 1px solid var(--line); }
.pic img { height: auto; }
.no-photo { display: grid; place-items: center; height: 168px; color: var(--muted); font-size: 12px; background: var(--box); }
.id-text { font-size: 13px; }
.headline { font-style: italic; margin-bottom: 10px; }
.where { color: var(--muted); }
.online { color: var(--bright); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.online .dot { width: 7px; height: 7px; background: var(--bright); }
.login { color: var(--muted); }
.mood strong { font-weight: 600; }
.viewmy { margin: 12px 0 16px; font-size: 13px; font-weight: 700; color: var(--muted); }
.viewmy span { color: var(--line); margin: 0 2px; }

/* ---------- boxes ---------- */
.box { background: var(--box); border: 1px solid var(--line); margin-bottom: 16px; overflow: hidden; }
.box > h2 { font-size: 14px; font-weight: 700; line-height: 1.3; padding: 5px 10px; background: var(--head); color: var(--bright); border-bottom: 1px solid var(--line); }
.box > :not(h2):not(table) { margin-left: 10px; margin-right: 10px; }
.box > h2 + * { margin-top: 10px; }
.box > :last-child { margin-bottom: 10px; }
.box > :first-child:not(h2) { margin-top: 10px; }
.box > h2 + table { margin-top: 0; }
.box > table:last-child { margin-bottom: 0; }
.box .sub { font-size: 12px; font-weight: 400; margin-left: 8px; }
.empty { color: var(--muted); font-style: italic; }
.count { font-size: 13px; color: var(--muted); }
.viewall { font-size: 12px; font-weight: 700; text-align: right; }

/* contact box */
.actions { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; font-size: 13px; }
.actions li::before { content: "» "; color: var(--muted); }
.actions button { font: inherit; color: var(--bright); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: #666; text-underline-offset: 2px; }
.actions button:hover { text-decoration-color: var(--bright); }

.url p { font-weight: 700; word-break: break-all; }

/* tables: the old two-tone cells */
.box table { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 13px; }
.box th, .box td { padding: 5px 8px; vertical-align: top; }
.box th { width: 90px; text-align: left; font-weight: 700; color: var(--bright); background: var(--cell-th); }
.box td { background: var(--cell-td); }
.stars { white-space: nowrap; }
.watched { margin: 2px 0 0; padding-left: 18px; }

/* ---------- right column ---------- */
.music iframe { display: block; width: calc(100% - 20px); border: 0; border-radius: 12px; background: transparent; color-scheme: normal; }
.music .now { font-weight: 700; font-size: 13px; }
.music audio { width: calc(100% - 20px); }
.music .music-link { font-size: 12px; margin-top: 8px; }
.music .sp-label { font-size: 12px; font-weight: 700; color: var(--muted); margin: 10px 10px 4px; }
.music .sp-list { font-size: 13px; padding-left: 0; list-style-position: inside; margin-top: 0; margin-bottom: 0; }
.music .sp-list li { margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music .sp-list li::marker { color: var(--muted); }
.music .sp-list li.on > a { color: var(--bright); font-weight: 700; text-decoration: none; }
.music .sp-list .by { color: var(--muted); }

/* posts */
.post { padding: 10px 0; border-top: 1px solid var(--line-soft); }
.box > h2 + .post { padding-top: 0; border-top: 0; }
.post-when { font-size: 12px; color: var(--muted); font-weight: 700; margin: 0 0 3px; }
.post-mood { font-weight: 400; margin-left: 8px; }
.post-body p { margin: 0 0 6px; }
.post-body img { max-width: min(100%, 320px); border: 1px solid var(--line); display: block; margin: 6px 0; }
.post-body .photos img { max-width: none; border: 0; margin: 0; }
.posts-all > .post:first-of-type { border-top: 0; padding-top: 0; }

/* blurbs */
.blurbs h3 { font-size: 14px; font-weight: 700; color: var(--bright); margin: 12px 10px 3px; }
.blurbs h2 + h3 { margin-top: 10px; }

/* tiles, for friends and things without photos */
.top8 { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px 6px; }
.top8 a, .top8 li > span { display: block; text-align: center; font-size: 11px; line-height: 1.25; }
.tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--line); margin-bottom: 4px; color: var(--bright); background: #1a1a1a; font-size: 16px; font-weight: 700; padding: 6px; line-height: 1.1; text-align: center; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile img + .tile-name { display: none; }
.top8 .tile-name { font-size: 16px; font-weight: 300; }
.tile.t1, .tile.t4 { background: #222; } .tile.t2, .tile.t5 { background: #151515; }
.top8 .label { display: block; overflow-wrap: anywhere; }

/* stuff I've made */
.made { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.box > h2 + .made { padding-top: 0; border-top: 0; }
.made .tile { width: 90px; margin: 0; font-size: 13px; }
.made .thumb { margin: 0; grid-template-columns: 90px; }
.made .thumb img { aspect-ratio: 1; }
.made .thumb:not(:has(figure:not(.gone))) { display: block; width: 90px; aspect-ratio: 1; background: #1a1a1a; border: 1px solid var(--line); }
.made h3 { font-size: 15px; font-weight: 700; color: var(--bright); margin-bottom: 3px; }
.made-text p { margin: 0 0 6px; }
.stats { font-size: 12px; color: var(--muted); }
.made-text .photos { grid-template-columns: repeat(auto-fill, 72px); }

/* photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; margin: 8px 0 0; }
.photos figure { margin: 0; }
.photos button { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: zoom-in; border: 1px solid var(--line); background: #1a1a1a; }
.photos button:hover { border-color: #777; }
.photos button:focus-visible { outline: 2px solid var(--bright); outline-offset: 2px; }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gone { display: none !important; }
.photos:not(:has(figure:not(.gone))) { display: none; }

/* comments: name on the left, words on the right */
.comment { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 3px; margin: 0 0 3px; font-size: 13px; }
.comment .who { background: var(--cell-th); padding: 8px; font-weight: 700; text-align: center; }
.comment .said { padding: 8px 10px; background: var(--cell-td); }
.comment .when { color: var(--muted); font-size: 12px; font-weight: 700; }

/* ---------- cookbook ---------- */
.recipes { padding-left: 18px; margin-top: 6px; font-size: 13px; }
.recipes li { margin: 2px 0; }
.recipes li::marker { color: var(--muted); }
.cat { font-size: 13px; font-weight: 700; color: var(--muted); margin: 12px 10px 0; }
.box > h2 + .cat { margin-top: 10px; }
.single .recipes { columns: 2 220px; font-size: 14px; }
.recipe .facts { font-size: 13px; color: var(--muted); font-weight: 700; }
.recipe .photos { grid-template-columns: minmax(0, 360px); }
.recipe-body { font-size: 14px; }
.recipe-body h2, .recipe-body h3 { font-size: 15px; font-weight: 700; color: var(--bright); margin: 14px 0 4px; }
.recipe-body ul, .recipe-body ol { padding-left: 22px; margin: 4px 0 10px; }
.recipe-body li { margin: 3px 0; }
.recipe-body img { max-width: min(100%, 420px); border: 1px solid var(--line); }

/* ---------- single pages ---------- */
.single h1 { font-size: 24px; font-weight: 700; color: var(--bright); margin: 4px 0 14px; }
.crumbs { font-size: 12px; color: var(--muted); }

/* ---------- footer ---------- */
.foot { max-width: 900px; margin: 0 auto; padding: 14px 16px 40px; text-align: center; font-size: 12px; color: var(--muted); }
.foot p:first-child a { padding: 0 10px; border-left: 1px solid var(--line); }
.foot p:first-child a:first-child { border-left: 0; }
.foot .fine { margin-top: 6px; }

/* ---------- photo viewer ---------- */
dialog.lb { border: 1px solid var(--line); padding: 10px; background: #0d0d0d; color: var(--text); max-width: min(94vw, 1000px); }
dialog.lb::backdrop { background: rgba(0, 0, 0, .9); }
dialog.lb img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
dialog.lb .bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 8px; font-size: 13px; }
dialog.lb button { font: 700 13px var(--font); background: var(--head); color: var(--bright); border: 1px solid var(--line); padding: 4px 12px; cursor: pointer; }

/* ---------- smaller screens ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-effect="grain"]::before { animation: none; }
}
@media (max-width: 860px) {
  /* one column: put the posts near the top instead of after every info box */
  .profile { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .left, .right { display: contents; }
  .id { order: 1; } .contact { order: 2; } .music { order: 3; } .posts { order: 4; } .blurbs { order: 5; }
  .interests { order: 6; } .details { order: 7; } .friends { order: 8; } .stuff { order: 9; }
  .cookbook { order: 10; } .comments { order: 11; } .url { order: 12; }
  .sheet { margin-top: 0; border-left: 0; border-right: 0; }
}
@media (max-width: 560px) {
  .sheet { padding: 14px 12px; }
  .bar-inner { gap: 6px 16px; }
}
@media (max-width: 420px) {
  .top8 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 6px; }
  .pic, .pic img, .no-photo { width: 116px; }
  .comment { grid-template-columns: minmax(0, 1fr); }
  .comment .who { text-align: left; }
  .made { grid-template-columns: 72px minmax(0, 1fr); }
  .made .tile, .made .thumb, .made .thumb:not(:has(figure:not(.gone))) { width: 72px; }
  .made .thumb { grid-template-columns: 72px; }
  .made .tile { font-size: 11px; }
}