@charset "utf-8";

@font-face { font-family: Space; src: url("./assets/space-grotesk-bold.ttf") format("truetype"); font-style: normal; font-weight: 700; font-display: swap; }

@font-face { font-family: Instrument; src: url("./assets/instrument-serif-italic.ttf") format("truetype"); font-style: italic; font-weight: 400; font-display: swap; }

:root { color-scheme: dark; --ink: #ddd7d1; --muted: #aca2aa; --link: #c8b6d0; --line: #514653; --panel: #18151bdd; --grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.09' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }

* { box-sizing: border-box; }

html { scroll-padding-top: 24px; }

body { margin: 0px; background: var(--grain),#131214; color: var(--ink); font-family: Verdana, Arial, sans-serif; font-size: 1rem; line-height: 1.7; }

::selection { background: rgb(102, 93, 73); color: rgb(255, 255, 255); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 4px; }

a:hover { color: rgb(240, 232, 239); }

a:focus-visible, summary:focus-visible { outline: rgb(202, 182, 208) solid 2px; outline-offset: 5px; }

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3, p, figure { margin: 0px; }

p + p { margin-top: 17px; }

.site { width: min(1040px, 100% - 80px); margin: 27px auto 30px; }

.skip-link { position: absolute; left: 16px; top: 0px; z-index: 5; padding: 10px; background: rgb(221, 221, 221); color: rgb(17, 17, 17); transform: translateY(-130%); }

.skip-link:focus { transform: none; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 17px; border-bottom: 1px solid rgb(68, 59, 68); }

.site-name { font-family: Space, Arial, sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.09em; line-height: 1; text-decoration: none; color: rgb(214, 203, 217); }

.site-name em { font-family: Instrument, Georgia, serif; font-weight: 400; font-size: 1.18em; padding: 0px 0.055em; color: rgb(185, 165, 192); }

.site-header nav { display: flex; gap: 26px; font-size: 0.875rem; }

.intro { display: grid; grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 0.85fr); gap: 52px; align-items: center; padding: 60px 0px 74px; }

.location { display: block; font-family: "Courier New", monospace; font-size: 0.8125rem; color: var(--muted); margin-bottom: 20px; }

h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.6rem, 7.2vw, 5.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.055em; color: rgb(227, 218, 212); margin-bottom: 26px; }

h1 em { font-family: Instrument, Georgia, serif; font-weight: 400; font-size: 1.14em; color: rgb(194, 173, 203); white-space: nowrap; }

.intro-lead { font-size: 1.2rem; line-height: 1.65; color: rgb(212, 201, 211); max-width: 43ch; }

.thought { max-width: 340px; width: 100%; justify-self: center; text-align: center; padding-bottom: 12px; }

.loop { width: 100%; height: auto; display: block; }

.loop-lines { stroke: rgb(183, 173, 126); transform-origin: 170px 170px; transition: transform 0.7s; }

.loop-lines ellipse:nth-child(2) { stroke: rgb(157, 142, 169); }

.loop-lines ellipse:nth-child(4) { stroke: rgb(138, 136, 112); }

.loop-center { fill: rgb(196, 184, 137); }

.thought:hover .loop-lines { transform: rotate(18deg); }

.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 22px; margin-bottom: 27px; }

h2 { font-family: Verdana, Arial, sans-serif; font-size: 1.1rem; line-height: 1.4; font-weight: 400; color: rgb(205, 191, 210); }

.section-heading > span { font-family: "Courier New", monospace; font-size: 0.8125rem; color: var(--muted); }

.workbench { padding: 29px 0px 48px; border-top: 1px dotted rgb(76, 65, 76); }

.project-notes { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 76px; }

.project-notes h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 400; line-height: 1.4; color: rgb(210, 200, 210); margin-bottom: 8px; }

.project-notes p { font-size: 1rem; line-height: 1.75; color: rgb(184, 174, 186); max-width: 43ch; }

.tomato-project { padding: 12px 0px 0px 18px; border-left: 1px solid rgb(105, 86, 90); }

.tomato-project h3 { font-family: Instrument, Georgia, serif; font-style: italic; font-size: 2.6rem; line-height: 1.2; color: rgb(198, 162, 159); margin-bottom: 13px; }

.other-projects { padding: 0px 4px 0px 0px; }

.other-projects article + article { margin-top: 29px; }

.project-status { display: block; font-size: 0.875rem; font-family: "Courier New", monospace; color: rgb(158, 146, 159); margin-top: 13px; }

.music { padding: 28px 0px 29px; border-top: 1px dotted rgb(76, 65, 76); }

.record-grid { display: grid; grid-template-columns: repeat(7, minmax(0px, 1fr)); gap: 17px; align-items: start; list-style: none; padding: 0px; margin: 0px; }

.record-grid li { min-width: 0px; }

.record-grid li:nth-child(2n) { transform: translateY(12px); }

.record { display: flex; flex-direction: column; gap: 5px; text-decoration: none; line-height: 1.45; }

.record img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid rgb(110, 99, 111); margin-bottom: 6px; }

.record strong { font-family: Arial, sans-serif; font-size: 0.875rem; font-weight: 400; color: rgb(196, 178, 206); overflow-wrap: anywhere; }

.record > span { font-size: 0.875rem; color: rgb(167, 154, 169); overflow-wrap: anywhere; }

.record:hover strong, .record:focus-visible strong { color: rgb(255, 255, 255); text-decoration: underline; }

.record:hover img, .record:focus-visible img { border-color: rgb(207, 187, 216); }

.credits { display: block; width: fit-content; margin: 34px 0px 0px auto; font-size: 0.75rem; color: rgb(151, 139, 154); }

.footnotes { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 76px; padding: 25px 0px 33px; border-top: 1px dotted rgb(64, 54, 64); }

.game-note p { font-size: 0.875rem; line-height: 1.8; color: rgb(169, 156, 172); }

.game-note strong { font-family: "Courier New", monospace; font-weight: 400; color: rgb(199, 182, 210); }

.game-note details { margin-top: 10px; }

.footnotes summary { font-size: 0.875rem; cursor: pointer; width: fit-content; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

.game-note details p { margin-top: 10px; }

.background > div { padding-top: 12px; }

.background p { font-size: 1rem; line-height: 1.75; color: rgb(184, 174, 186); }

.contact { display: flex; flex-wrap: wrap; gap: 28px; border-top: 1px solid rgb(73, 60, 73); padding: 22px 0px 26px; }

.contact > a { font-size: 0.875rem; }

footer { padding: 15px 0px 0px; border-top: 1px dotted rgb(64, 54, 64); font-size: 0.75rem; color: var(--muted); }

.footer-main { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }

.footer-main a { font-size: 0.875rem; }

.other-designs { margin-top: 12px; }

.other-designs summary { font-size: 0.875rem; width: fit-content; cursor: pointer; }

.other-designs nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 9px; font-size: 0.875rem; }

@media (max-width: 1000px) {
  .site { width: calc(100% - 56px); }
  .intro { gap: 32px; padding: 47px 0px 54px; }
  .project-notes, .footnotes { gap: 44px; }
  .record-grid { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 25px 20px; }
  .record-grid li:nth-child(2n) { transform: none; }
}

@media (max-width: 720px) {
  .site { width: calc(100% - 40px); margin: 20px auto 24px; }
  .intro { grid-template-columns: 1fr; gap: 8px; padding: 39px 0px 37px; }
  .intro-copy { max-width: 580px; }
  h1 { font-size: 4.2rem; }
  .location { margin-bottom: 16px; }
  .intro-lead { font-size: 1.15rem; }
  .thought { max-width: 250px; margin: 0px auto; padding-bottom: 0px; }
  .project-notes { grid-template-columns: 1fr; gap: 28px; }
  .tomato-project { padding-top: 0px; }
  .other-projects { padding: 0px 0px 0px 19px; }
  .project-notes p { max-width: 57ch; }
  .workbench { padding-bottom: 35px; }
  .record-grid { gap: 22px 16px; }
  .footnotes { gap: 28px; }
  .contact { padding: 22px 0px 26px; }
}

@media (max-width: 480px) {
  .site { width: calc(100% - 32px); }
  .site-header nav { gap: 18px; }
  .site-name { font-size: 1.6rem; }
  h1 { font-size: 3.5rem; margin-bottom: 20px; }
  .intro { padding-top: 34px; }
  .thought { max-width: 220px; }
  .section-heading { gap: 15px; margin-bottom: 22px; }
  .section-heading > span { max-width: 114px; text-align: right; }
  .record-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px 20px; }
  .record > span { font-size: 0.875rem; }
  .footnotes { grid-template-columns: 1fr; gap: 24px; }
  .contact { gap: 24px; }
  .footer-main { flex-wrap: wrap; gap: 9px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .loop-lines { transition: none; }
  .thought:hover .loop-lines { transform: none; }
}
/* Feed and archive controls. */
.section-meta { display: flex; gap: 8px 20px; justify-content: space-between; flex-wrap: wrap; font: .65rem/1.6 'Courier New', monospace; color: #b4a4bc; margin: 0 0 23px; }
.listening { display: flex; align-items: center; gap: 14px; border: 1px dashed #66506e; background: #251d2b; padding: 12px; margin-bottom: 14px; font-size: .85rem; }
.listening a { text-decoration: none; }
.listening-icon { font-size: 1.8rem; color: #c196a7; }
.eyebrow { text-transform: uppercase; font: .65rem/1.6 'Courier New', monospace; letter-spacing: 1px; color: #b4a4bc; margin-bottom: 3px; }
.feed-note { margin-top: 24px; color: #b4a4bc; font: .7rem/1.6 Verdana, sans-serif; }
.feed-note summary { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.feed-note p { margin-top: 10px; }
.activity-section { background: #19161d; border: 1px solid #665a70; transform: rotate(-.4deg); }
.activity-section h2 { background: #302635; color: #ddd6dc; border-bottom: 1px dashed #78617f; }
.activity-section h2 > span { float: right; }
.activity-list { padding: 0; margin: 0; list-style: none; }
.activity-list li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px dashed #43374a; }
.activity-list li:first-child { padding-top: 0; }
.activity-list li:last-child { border: 0; }
.activity-list p { font: .8rem/1.7 Verdana, sans-serif; overflow-wrap: anywhere; }
.activity-list time, .fine-print { color: #b4a4bc; font: .68rem/1.7 'Courier New', monospace; }
.activity-dot { color: #c196a7; }
.fine-print { margin-top: 14px; }
.empty-note { font-size: .9rem; }
.canvas-section { background: #211d24; border: 1px solid #665a70; transform: rotate(.3deg); }
.canvas-section h2 { background: #3a2e3e; border-bottom: 2px solid #78586c; color: #e1d7e6; }
.canvas-section > p { font-size: .9rem; }
.repo-stats { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0; color: #b4a4bc; font: .7rem/1.5 'Courier New', monospace; }
.repo-stats strong { color: #ddd6dc; }
.archive-disclosure { border-top: 1px dashed #665a70; margin-top: 20px; padding-top: 14px; }
.archive-disclosure > summary { cursor: pointer; font-size: .9rem; color: #c4accf; }
.archive-controls { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; margin: 18px 0 8px; }
.archive-controls label { font: .7rem/1.5 'Courier New', monospace; }
.archive-controls label[for=repo-sort] { grid-area: 1 / 2; }
.archive-controls input, .archive-controls select { width: 100%; min-width: 0; background: #141117; color: #e3dfe4; border: 1px solid #665a70; border-radius: 0; padding: 10px 8px; font: .75rem/1.4 Verdana,sans-serif; }
.archive-controls input:focus-visible, .archive-controls select:focus-visible { outline: 2px solid #c196a7; outline-offset: 2px; }
.archive-repo { padding: 12px 0; border-bottom: 1px dashed #43374a; display: flex; gap: 15px; justify-content: space-between; font: .8rem/1.5 Verdana,sans-serif; }
.archive-repo a { min-width: 0; overflow-wrap: anywhere; }
.archive-repo a span { display: block; color: #b4a4bc; font-size: .7rem; margin-top: 3px; }
.repo-stars { flex-shrink: 0; color: #b4a4bc; font: .7rem/1.5 'Courier New', monospace; }
.small-button { background: #302635; border: 1px solid #78617f; padding: 8px 12px; font: .75rem/1.5 'Courier New', monospace; margin-top: 15px; }
.small-button:hover { background: #514051; }
[hidden] { display: none !important; }

.record-grid > .record:nth-child(2n) { transform: translateY(12px); }
.record-cover img { margin: 0 0 6px; }
.record h3 { font: 400 .875rem/1.45 Arial, sans-serif; color: #c4b2ce; overflow-wrap: anywhere; }
.record p { font-size: .875rem; line-height: 1.45; color: #a79aa9; overflow-wrap: anywhere; }
.record:hover h3 { color: white; text-decoration: underline; }
.feed-note { margin: 34px 0 0; text-align: right; }
.feed-note p { text-align: left; }
.more-notes { border-top: 1px dotted #403640; padding: 18px 0; }
.more-notes > summary { cursor: pointer; color: var(--link); font-size: .875rem; }
.more-notes .section { margin: 22px 0 0; padding: 0; background: none; border: 0; transform: none; }
.more-notes h2 { background: none; border: 0; margin-bottom: 16px; }
.return-button { border: 0; background: none; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 4px; font: .875rem Verdana, sans-serif; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #cab6d0; outline-offset: 5px; }
#intro-title:focus { outline: none; }
@media(max-width:1000px) { .record-grid > .record:nth-child(2n) { transform: none; } }
@media(max-width:430px) { .archive-controls { grid-template-columns: 1fr; } .archive-controls label[for=repo-sort] { grid-area: auto; } }

/* Long-form listening history. */
.history-intro { color: #b4a4bc; font-size: .9rem; line-height: 1.7; margin-bottom: 24px; }
.history-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 8px 0 28px; }
.history-totals strong { display: block; color: #ddd6dc; font: 400 clamp(1.5rem, 4vw, 2.8rem)/1.2 Georgia, serif; }
.history-totals span { display: block; margin-top: 8px; color: #b4a4bc; font: .65rem/1.5 'Courier New', monospace; }
.history-overview, .month-chart { margin: 0 0 28px; }
.history-overview figcaption, .month-chart figcaption { color: #b4a4bc; font: .65rem/1.5 'Courier New', monospace; margin-bottom: 14px; }
.history-row { display: grid; grid-template-columns: 44px 1fr 70px; gap: 12px; align-items: center; margin: 12px 0; font: .75rem/1.5 'Courier New', monospace; }
.history-row > span:last-child { text-align: right; color: #b4a4bc; }
.history-bar-track { background: #27202b; height: 12px; }
.history-bar { display: block; height: 100%; background: #b998b6; }
.history-gap { opacity: .65; grid-template-columns: 44px 1fr; }
.history-year { border-top: 1px dotted #66506e; }
.history-year > summary { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; cursor: pointer; }
.history-year-number { font: italic 1.8rem/1.2 Georgia, serif; color: #c4b2ce; }
.history-year-artist { flex: 1; font-size: .85rem; overflow-wrap: anywhere; }
.history-year-hours { white-space: nowrap; font: .7rem/1.5 'Courier New', monospace; color: #b4a4bc; }
.history-year-body { padding: 0 0 24px; }
.month-chart { margin-top: 20px; }
.month-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.month-column { text-align: center; color: #b4a4bc; font: .6rem/1.5 'Courier New', monospace; }
.month-track { height: 80px; display: flex; align-items: end; background: #211b25; margin: 5px 0; }
.month-track span { width: 100%; background: #927c9e; }
.history-artists { padding-left: 22px; margin-top: 12px; color: #b4a4bc; }
.history-artists li { padding: 6px 0 6px 5px; font-size: .8rem; }
.history-artists li span:first-child { color: #ddd6dc; overflow-wrap: anywhere; }
.history-artists li span:last-child { float: right; margin-left: 10px; font: .7rem/1.7 'Courier New', monospace; }
.recent-shelf > summary { cursor: pointer; color: #c4b2ce; margin: 20px 0; font-size: .85rem; }
.history-year > summary:focus-visible, .recent-shelf > summary:focus-visible { outline: 2px solid #cab6d0; outline-offset: 4px; }
@media(max-width:480px) { .month-bars { gap: 3px; } .month-column { font-size: .5rem; } .history-year > summary { gap: 12px; } .history-year-number { font-size: 1.4rem; } }
.listening-rankings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin: 0 0 32px; }
.listening-rankings h3 { color: #c4b2ce; font: italic 1.3rem/1.3 Georgia, serif; }
.listening-rankings .history-artists li { position: relative; padding-right: 58px; min-height: 25px; }
.listening-rankings .history-artists li > span:last-child { position: absolute; top: 6px; right: 0; font-size: .6rem; }
.listening-rankings a { text-decoration: none; }
.listening-rankings a:hover { text-decoration: underline; }
.listening-rankings small { display: block; color: #b4a4bc; font-size: .65rem; margin: 3px 0 6px; }
.observed-row { grid-template-columns: 78px 1fr 90px; }
.history-no-data { grid-column: 2 / 4; }
.monthly-rotation summary { cursor: pointer; color: #c4b2ce; font-size: .85rem; }
.rotation-months { padding: 0; list-style: none; margin: 18px 0; }
.rotation-months li { display: flex; gap: 20px; margin: 12px 0; font-size: .8rem; }
.rotation-months strong { flex: 0 0 78px; font: .7rem/1.7 'Courier New', monospace; }
.rotation-months span { overflow-wrap: anywhere; }
@media(max-width:600px) { .listening-rankings { grid-template-columns: 1fr; gap: 26px; } .observed-row { gap: 8px; grid-template-columns: 70px 1fr 80px; font-size: .65rem; } }

/* The shelf stays open; listening history reads like liner notes. */
.shelf-caption { margin: 30px 0 0; color: #b4a4bc; font: .65rem/1.7 'Courier New', monospace; }
.shelf-caption a { text-decoration: none; }
.shelf-notes { margin-top: 36px; }
.shelf-notes > summary { width: fit-content; cursor: pointer; color: #b4a4bc; font: italic 1rem/1.5 Georgia, serif; }
.shelf-notes > summary:hover { color: #ddd6dc; }
.shelf-notes > summary:focus-visible { outline: 2px solid #cab6d0; outline-offset: 4px; }
.shelf-notes > .history-intro { margin-top: 24px; }
.shelf-notes .listening-rankings { margin-top: 24px; }

/* A little RuneScape character sheet tucked into the garden. */
.game-note { min-width: 0; }
.osrs-heading { margin-bottom: 14px; }
.osrs-caption { font: .65rem/1.5 'Courier New', monospace; color: #b4a4bc; }
.osrs-heading h2 { display: flex; align-items: center; gap: 10px; margin: 7px 0 2px; font: italic 2rem/1.2 Georgia, serif; color: #d4c3db; }
.osrs-heading img, .osrs-skills img, .osrs-bosses img, .osrs-items img { object-fit: contain; image-rendering: pixelated; flex-shrink: 0; }
.osrs-heading p, .game-note .osrs-summary { font: .65rem/1.8 'Courier New', monospace; color: #b7aaa0; }
.osrs-skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; margin: 15px 0; padding: 8px; background: transparent; border: 1px dotted #514657; }
.osrs-skill { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 7px 5px; background: #211d26; border-bottom: 1px solid #302735; }
.osrs-skill-name { display: flex; flex-direction: column; gap: 4px; color: #c8bca5; font: .5rem/1.2 'Courier New', monospace; }
.osrs-skill-name img { width: 21px; height: 21px; }
.game-note .osrs-skill strong { font: 1rem/1 'Courier New', monospace; color: #ead488; text-shadow: 1px 1px #000; }
.game-note .osrs-note { font-size: .75rem; line-height: 1.7; margin: 12px 0; }
.game-note .osrs-details { margin: 15px 0 0; }
.game-note .osrs-details summary { font: italic .9rem/1.5 Georgia, serif; color: #bfa9cb; }
.osrs-bosses { list-style: none; padding: 0; margin: 14px 0; }
.osrs-bosses li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dotted #40382e; font-size: .7rem; }
.osrs-bosses li span { flex: 1; }
.osrs-bosses li strong { font-size: .7rem; }
.osrs-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; max-height: 360px; overflow: auto; }
.osrs-item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; padding: 10px 4px; background: transparent; font: .6rem/1.5 'Courier New', monospace; overflow-wrap: anywhere; }
.osrs-item:hover { background: #241e2b; }
.osrs-details h3 { margin-top: 14px; font: italic 1rem Georgia, serif; color: #bfa9cb; }
.game-note .osrs-source { margin-top: 20px; font: .6rem/1.8 'Courier New', monospace; color: #b4a4bc; }
.osrs-source a { color: #bfa9cb; }

.osrs-account-details { padding-top: 12px; border-top: 1px dotted #40382e; }
.game-note .osrs-account-details > summary { font-size: .75rem; color: #b4a4bc; }
.game-note .osrs-account-details .osrs-summary { margin-top: 14px; }

/* A quiet doorway to the collection. */
.bank-door { display: flex; gap: 14px; align-items: center; margin-top: 20px; padding: 16px 0; border-top: 1px dotted #514657; border-bottom: 1px dotted #514657; text-decoration: none; color: #cbb6d4; font: italic 1.1rem/1.4 Georgia, serif; }
.bank-door img { image-rendering: pixelated; object-fit: contain; }
.bank-door > span:nth-child(2) { flex: 1; }
.bank-door small { display: block; color: #a99bae; font: .6rem/1.7 'Courier New', monospace; margin-top: 5px; }
.bank-door:hover { color: #e5d4ed; border-color: #9b82aa; }