/* NoReasonWeb: personal sites. Shared pieces first, then the three designs (desktop, modern, chaos) and their skins. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 system-ui, sans-serif; color: var(--ink, #1c1c1c); background: var(--bg, #f6f6f6); }
img { max-width: 100%; display: block; }
a { color: var(--link, inherit); }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus, #2f6bff); outline-offset: 2px; }
.boot { padding: 3rem 1.5rem; text-align: center; color: #666; }
.closed { max-width: 30rem; margin: 15vh auto; padding: 0 1.5rem; text-align: center; }
p { margin: 0 0 .6em; }
h1, h2 { margin: 0; line-height: 1.15; }
.empty { opacity: .7; font-style: italic; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 2.6rem; padding: .45em 1.1em; border: 2px solid var(--btn-edge, currentColor);
  background: var(--btn, #222); color: var(--btn-ink, #fff); border-radius: var(--btn-r, 8px); cursor: pointer; font-weight: 600; text-decoration: none; }
.btn.ghost { background: transparent; color: inherit; }
.btn:disabled { opacity: .6; cursor: default; }
.field { display: grid; gap: .25rem; font-size: .92rem; font-weight: 600; margin-bottom: .7rem; }
.field input, .field textarea { font-weight: 400; width: 100%; padding: .55em .7em; border: 1.5px solid var(--edge, #9a9a9a); border-radius: var(--field-r, 6px); background: var(--field, #fff); color: var(--field-ink, #1c1c1c); }
.field textarea { resize: vertical; }

/* Notes */
.note { margin-bottom: 1.4rem; }
.pin { font-size: .78rem; font-weight: 700; opacity: .7; margin-bottom: .3em; }
.prompt-line { font-size: .88rem; font-weight: 700; margin-bottom: .5em; }
.prompt-line a { text-decoration: none; color: var(--accent, inherit); }
.prompt-line a::before { content: "Answering: "; font-weight: 400; opacity: .8; color: var(--ink); }
.note-photo { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; margin: 0 0 .7em; width: 100%; }
.note-photo img { width: 100%; max-height: 520px; object-fit: cover; }
.note-body p:last-child { margin-bottom: 0; }
.note-body a { overflow-wrap: anywhere; }
.mood { font-size: .86rem; font-style: italic; opacity: .8; margin: .5em 0 0; }
.note footer { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin-top: .6rem; font-size: .82rem; }
.note footer time { opacity: .7; }
.reacts { display: flex; gap: .25rem; }
.react { display: inline-flex; align-items: center; gap: .2rem; min-width: 2.1rem; height: 2rem; padding: 0 .4rem; border: 1px solid var(--edge, #ccc); border-radius: 999px; background: transparent; cursor: pointer; font-size: .9rem; line-height: 1; }
.react b { font-size: .75rem; }
.react.did { border-color: var(--accent, #2f6bff); }
.report-link { margin-left: auto; padding: .2rem .3rem; border: 0; background: none; font-size: .76rem; opacity: .55; cursor: pointer; text-decoration: underline; }
.report-link:hover { opacity: 1; }
.player { position: relative; margin: .7em 0; }
.player iframe { border: 0; width: 100%; display: block; border-radius: 10px; }
.player.video iframe { aspect-ratio: 16 / 9; height: auto; }
.player.audio iframe { height: 352px; }
.player.audio.short iframe { height: 152px; }
.player-link { display: inline-block; margin: .5em 0; font-weight: 700; }
.more { width: 100%; margin-top: .5rem; }

/* About */
.facts { margin: 1rem 0; display: grid; gap: .55rem; }
.fact dt { font-size: .76rem; opacity: .7; }
.fact dd { margin: 0; font-weight: 600; }
.tags { list-style: none; padding: 0; margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tags a { display: inline-block; padding: .2em .65em; font-size: .82rem; border: 1px solid var(--edge, #bbb); border-radius: 999px; text-decoration: none; }
.monogram { display: grid; place-items: center; font-weight: 700; font-size: 2.6rem; background: var(--accent, #555); color: var(--on-accent, #fff); }
.streak { font-size: .82rem; font-weight: 700; margin-top: .4rem; }
.streak::before { content: "🔥 "; }

/* Photos */
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .4rem; }
.photos button { padding: 0; border: 0; background: none; cursor: zoom-in; aspect-ratio: 1; }
.photos img { width: 100%; height: 100%; object-fit: cover; }

/* Today's prompt */
.tp-label { font-size: .78rem; font-weight: 700; opacity: .75; margin-bottom: .2em; }
.tp-text { font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.tp-mine, .tp-more { font-size: .86rem; margin: .3em 0 0; }

/* Guestbook */
.gb-form { margin-bottom: 1.2rem; }
.gb-msg { font-size: .88rem; margin: .5rem 0 0; min-height: 1.2em; }
.gb-list { list-style: none; padding: 0; margin: 0; }
.gb-entry { padding: .8rem 0; border-top: 1px dashed var(--edge, #bbb); position: relative; }
.gb-head { margin-bottom: .2em; font-size: .92rem; }
.gb-head time { font-size: .78rem; opacity: .65; margin-left: .3em; }
.gb-body p { margin-bottom: .3em; }
.gb-reply { font-size: .9rem; margin: .4rem 0 0 1rem; padding-left: .7rem; border-left: 3px solid var(--accent, #999); }
.gb-entry .report-link { position: absolute; top: .7rem; right: 0; }

/* The webring */
.ring { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; font-size: .9rem; }
.ring a { font-weight: 700; }
.ring-home { margin-left: auto; font-weight: 400 !important; opacity: .8; }

/* Dialogs and toasts */
dialog.sheet { max-width: 28rem; width: calc(100% - 2rem); border: 0; border-radius: 14px; padding: 1.4rem; color: #1c1c1c; background: #fff; font-family: system-ui, sans-serif; }
dialog::backdrop { background: rgb(10 10 20 / .55); }
dialog.sheet h2 { font-size: 1.3rem; margin-bottom: .5rem; }
dialog.sheet fieldset { border: 0; padding: 0; margin: .8rem 0; display: grid; gap: .35rem; }
dialog.sheet legend { font-weight: 700; margin-bottom: .3rem; }
dialog.sheet .row { display: flex; gap: .5rem; flex-wrap: wrap; }
dialog.sheet .btn { --btn: #1c1c1c; --btn-ink: #fff; }
.viewer { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.viewer img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.viewer-x { position: fixed; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0; background: #fff; color: #111; font-size: 1.6rem; cursor: pointer; }
#nrw-toast { position: fixed; left: 50%; bottom: 4.5rem; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; z-index: 99999;
  background: #1c1c1c; color: #fff; padding: .7rem 1.1rem; border-radius: 10px; font: 600 .92rem/1.3 system-ui, sans-serif; transition: opacity .2s, transform .2s; max-width: calc(100% - 2rem); }
#nrw-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* =====================================================================
   Desktop: windows on a desktop
   ===================================================================== */
.t-desktop { --desk: #0b7a75; --face: #c9c9c4; --hi: #fff; --lo: #6b6b66; --dark: #1d1d1b; --ink: #141414; --title-a: #0c2a6b; --title-b: #3d72b0; --title-ink: #fff;
  --paper: #fffef6; --accent: #0c2a6b; --edge: #8c8c86; --field: #fff; --btn: var(--face); --btn-ink: var(--ink); --btn-r: 0; --field-r: 0; --note: #fff27a;
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif; background: var(--desk); color: var(--ink); }
.t-desktop.s-midnight { --desk: #171a36; --face: #2b2f58; --hi: #4c5290; --lo: #0d0f22; --dark: #05060f; --ink: #ecebff; --title-a: #6b3df5; --title-b: #d14ad1;
  --paper: #22264a; --accent: #b9a6ff; --edge: #5a5f9c; --field: #171a36; --field-ink: #ecebff; --note: #ffd66b; }
.t-desktop.s-midnight .desk { background-image: radial-gradient(1px 1px at 20px 30px, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 120px 80px, #fff6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 70px 140px, #fffa 50%, transparent 51%); background-size: 180px 180px; }
.t-desktop.s-bubblegum { --desk: #ff8fc4; --face: #fbe3f0; --hi: #fff; --lo: #c58aa8; --dark: #6a2b4c; --ink: #3a1430; --title-a: #9b4dea; --title-b: #ff5fa2; --paper: #fff8fc; --accent: #9b2f8a; --edge: #d49ab9; --note: #b8f5ff; }
.t-desktop.s-olive { --desk: #4a5223; --face: #d6d1b3; --hi: #f3f0dd; --lo: #8a855f; --dark: #22240f; --ink: #1f2112; --title-a: #2c3314; --title-b: #6c7a2e; --paper: #f7f4e4; --accent: #4f5a1c; --edge: #99936b; --note: #f5c85c; }
.t-desktop .bevel, .t-desktop .win, .t-desktop .btn, .t-desktop .taskbar, .t-desktop .start, .t-desktop .task, .t-desktop .start-menu {
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dark), inset 2px 2px 0 var(--face), inset -2px -2px 0 var(--lo); }
.desk { min-height: 100vh; padding-bottom: 46px; }
.icons { display: flex; gap: .4rem; padding: .7rem; overflow-x: auto; }
.icon { display: grid; justify-items: center; gap: .3rem; width: 84px; padding: .3rem; border: 1px dotted transparent; background: none; color: #fff; font-size: .8rem; text-shadow: 0 1px 2px #0009; cursor: pointer; text-align: center; }
.icon:focus-visible, .icon:hover { border-color: #fff9; background: #ffffff1f; }
.glyph { width: 40px; height: 40px; display: block; position: relative; }
.g-doc { background: #fff; clip-path: polygon(0 0, 72% 0, 100% 26%, 100% 100%, 0 100%); }
.g-doc::after { content: ""; position: absolute; inset: 14px 7px auto; height: 18px; background: repeating-linear-gradient(#5b6b8a 0 2px, transparent 2px 6px); }
.g-folder { background: linear-gradient(#f7d46a, #e5b53a); border-radius: 2px 4px 3px 3px; top: 6px; height: 32px; }
.g-folder::before { content: ""; position: absolute; left: 0; top: -6px; width: 16px; height: 8px; background: #e5b53a; border-radius: 3px 3px 0 0; }
.g-pic { background: linear-gradient(#7fc8ff 0 55%, #4caf50 55%); border: 3px solid #fff; }
.g-pic::after { content: ""; position: absolute; width: 10px; height: 10px; top: 5px; right: 6px; border-radius: 50%; background: #ffe24d; }
.g-book { background: linear-gradient(90deg, #7a2335 0 18%, #b43a52 18%); border-radius: 2px 4px 4px 2px; }
.g-book::after { content: ""; position: absolute; left: 12px; right: 6px; top: 9px; height: 3px; background: #f5d7a8; box-shadow: 0 6px 0 #f5d7a8; }
.wins { display: grid; gap: 1rem; padding: 0 .7rem 1rem; }
.win { background: var(--face); padding: 3px; color: var(--ink); min-width: 0; }
.win[hidden] { display: none; }
.bar { display: flex; align-items: center; gap: .5rem; padding: 2px 3px 2px 6px; background: linear-gradient(90deg, var(--title-b), var(--title-a)); color: var(--title-ink); filter: saturate(.35) brightness(.9); }
.win.active .bar, .win:only-of-type .bar { filter: none; }
.bar h2 { font: 400 1.35rem/1.1 "VT323", ui-monospace, monospace; flex: 1; letter-spacing: .02em; touch-action: none; }
.min { width: 22px; height: 20px; padding: 0; border: 0; background: var(--face); color: var(--ink); font: 700 .8rem/1 "VT323", monospace; cursor: pointer;
  box-shadow: inset 1px 1px 0 var(--hi), inset -1px -1px 0 var(--dark), inset -2px -2px 0 var(--lo); }
.pane { background: var(--paper); margin-top: 3px; padding: 1rem; box-shadow: inset 1px 1px 0 var(--lo), inset 2px 2px 0 var(--dark); overflow: auto; }
.me { display: flex; gap: .9rem; align-items: center; }
.me-photo { width: 84px; height: 84px; object-fit: cover; flex: none; border: 2px solid var(--ink); }
.t-desktop h1 { font-size: 1.55rem; }
.t-desktop .tagline { margin: .2rem 0 0; opacity: .85; }
.t-desktop .note { padding-bottom: 1.1rem; border-bottom: 1px dashed var(--edge); }
.t-desktop .note.pinned { background: color-mix(in srgb, var(--note) 35%, transparent); margin: -.4rem -.5rem 1.4rem; padding: .6rem .5rem 1rem; }
.sticky { background: var(--note); color: #1d1d1b; padding: 1rem 1rem .8rem; box-shadow: 3px 6px 14px #0004; transform: rotate(-1.5deg); }
.sticky a { color: #1d1d1b; }
.sticky .tp-text { font-family: "VT323", monospace; font-weight: 400; font-size: 1.6rem; line-height: 1.05; }
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; gap: .4rem; padding: 4px; background: var(--face); z-index: 900; color: var(--ink); }
.start-wrap { position: relative; }
.start { height: 34px; padding: 0 .8rem 0 .6rem; border: 0; background: var(--face); font: 400 1.35rem/1 "VT323", monospace; cursor: pointer; display: flex; align-items: center; gap: .35rem; }
.start::before { content: ""; width: 16px; height: 16px; background: conic-gradient(#e53935 0 25%, #43a047 0 50%, #fbc02d 0 75%, #1e88e5 0); transform: skewY(-8deg); }
.start[aria-expanded="true"] { box-shadow: inset 1px 1px 0 var(--dark), inset -1px -1px 0 var(--hi); }
.start-menu { position: absolute; bottom: 42px; left: 0; width: 230px; background: var(--face); padding: .5rem; }
.start-menu .ring { display: grid; gap: 0; }
.start-menu .ring a { display: block; padding: .55rem .7rem; text-decoration: none; color: var(--ink); }
.start-menu .ring a:hover, .start-menu .ring a:focus-visible { background: var(--title-a); color: #fff; }
.start-menu .ring-home { margin: .3rem 0 0; border-top: 1px solid var(--lo); }
.tasks { display: none; gap: .3rem; flex: 1; overflow: hidden; }
.task { height: 34px; min-width: 0; max-width: 160px; flex: 1; padding: 0 .6rem; border: 0; background: var(--face); font-size: .82rem; text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task.on { font-weight: 700; }
.clock { margin-left: auto; padding: .35rem .8rem; font: 400 1.25rem/1 "VT323", monospace;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi); }
.t-desktop .tags a { color: var(--ink); background: var(--face); border-color: var(--edge); border-radius: 0; }
.t-desktop .react { border-radius: 0; border-color: var(--edge); background: var(--face); }
@media (min-width: 900px) {
  .desk { display: grid; grid-template-columns: 104px 1fr; }
  .icons { flex-direction: column; overflow: visible; padding-top: 1rem; }
  .wins { position: relative; display: block; padding: 0; height: calc(100vh - 46px); min-height: 640px; }
  .win, .sticky { position: absolute; }
  .win .pane { max-height: var(--h, 60vh); }
  #w-about { left: 1%; top: 2.5%; width: 30%; --h: 40vh; }
  #w-guestbook { left: 1%; top: 52%; width: 30%; --h: 30vh; }
  #w-notes { left: 33%; top: 2.5%; width: 38%; --h: calc(100vh - 140px); }
  .sticky { right: 3%; top: 4%; width: 23%; }
  #w-photos { right: 2%; top: 34%; width: 25%; --h: 40vh; }
  .tasks { display: flex; }
}
@media (max-width: 899px) { .taskbar .clock { font-size: 1.1rem; } .wins .win .pane { max-height: none; } }

/* =====================================================================
   Modern: two quiet columns
   ===================================================================== */
.t-modern { --bg: #fafaf8; --ink: #1d1e20; --soft: #5c5f63; --accent: #2f5d50; --on-accent: #fff; --edge: #d8d8d2; --card: #fff; --btn: var(--ink); --btn-ink: var(--bg); --btn-edge: var(--ink); --field: #fff;
  font-family: "Figtree", system-ui, sans-serif; background: var(--bg); color: var(--ink); }
.t-modern.s-ink { --bg: #141517; --ink: #ecebe6; --soft: #a2a29c; --accent: #e7b552; --on-accent: #141517; --edge: #34363a; --card: #1c1d20; --field: #1c1d20; --field-ink: #ecebe6; }
.t-modern.s-sage { --bg: #e8eee4; --ink: #1e2a20; --soft: #4f6050; --accent: #4e7a4b; --edge: #c3cfbe; --card: #f4f7f1; }
.t-modern.s-dusk { --bg: #261f33; --ink: #f2ebff; --soft: #b8acd0; --accent: #ff9f7c; --on-accent: #261f33; --edge: #463b5a; --card: #30283f; --field: #30283f; --field-ink: #f2ebff; }
.mod { max-width: 1120px; margin: 0 auto; padding: 2rem 1.25rem 1rem; display: grid; gap: 2.5rem; }
.mod-side .me-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; margin-bottom: 1.2rem; }
.t-modern h1 { font: 400 clamp(2.4rem, 5vw, 3.4rem)/1.02 "Young Serif", Georgia, serif; letter-spacing: -.01em; }
.t-modern h2 { font: 400 1.6rem/1.2 "Young Serif", Georgia, serif; margin: 0 0 1rem; }
.t-modern .tagline { font-size: 1.15rem; color: var(--soft); margin-top: .7rem; }
.t-modern .facts { border-top: 1px solid var(--edge); padding-top: 1rem; margin-top: 1.4rem; }
.t-modern .fact dt { color: var(--soft); opacity: 1; }
.t-modern .fact dd { font-weight: 500; }
.t-modern .tags a { color: var(--ink); }
.mod-nav { display: flex; gap: 1.2rem; margin-top: 1.6rem; font-weight: 600; }
.mod-nav a { color: var(--accent); }
.mod-main > * + * { margin-top: 3rem; }
.t-modern .today-prompt { border-left: 4px solid var(--accent); padding: .3rem 0 .3rem 1.1rem; }
.t-modern .tp-text { font: 400 1.5rem/1.25 "Young Serif", Georgia, serif; }
.t-modern .note { padding-bottom: 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--edge); }
.t-modern .note-body { font-size: 1.12rem; line-height: 1.65; }
.t-modern .note-photo img { border-radius: 4px; }
.t-modern .react { border-color: var(--edge); }
.t-modern .photos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.t-modern .photos img { border-radius: 4px; }
.mod-foot { border-top: 1px solid var(--edge); padding: 1.4rem 0 2rem; }
.mod-foot a { color: var(--ink); }
@media (min-width: 900px) {
  .mod { grid-template-columns: 300px minmax(0, 640px); gap: 5rem; padding-top: 4.5rem; }
  .mod-side { position: sticky; top: 2rem; align-self: start; max-height: calc(100vh - 4rem); overflow: auto; }
  .mod-foot { grid-column: 1 / -1; }
}

/* =====================================================================
   Creative chaos: a scrapbook
   ===================================================================== */
.t-chaos { --bg: #ffe14f; --ink: #161616; --paper: #fff; --accent: #ff2d79; --accent2: #2457ff; --edge: #161616; --tape: #ffffffb3; --btn: var(--accent2); --btn-ink: #fff; --btn-edge: var(--ink); --btn-r: 999px; --field-r: 4px;
  font-family: "Courier Prime", ui-monospace, monospace; background: var(--bg); color: var(--ink);
  background-image: radial-gradient(#0000001f 1.2px, transparent 1.3px); background-size: 18px 18px; }
.t-chaos.s-neon { --bg: #0e0d14; --ink: #f5f3ff; --paper: #1b1924; --accent: #ff2bd6; --accent2: #00d4ff; --edge: #00d4ff; --tape: #ff2bd666; --field: #0e0d14; --field-ink: #f5f3ff;
  background-image: linear-gradient(#ffffff0d 1px, transparent 1px), linear-gradient(90deg, #ffffff0d 1px, transparent 1px); background-size: 32px 32px; }
.t-chaos.s-riso { --bg: #f4eee4; --ink: #24304f; --paper: #fffaf3; --accent: #ff48b0; --accent2: #0078bf; --edge: #24304f; --tape: #ffd60a99; }
.t-chaos.s-zine { --bg: #e7e7e3; --ink: #0d0d0d; --paper: #fff; --accent: #0d0d0d; --accent2: #0d0d0d; --edge: #0d0d0d; --tape: #ffffffcc; }
.t-chaos.s-zine img { filter: grayscale(1) contrast(1.35); }
.chaos { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1rem 2rem; }
.chaos-head { display: grid; justify-items: center; text-align: center; padding: 1.5rem 0 2.5rem; }
.badge-photo { transform: rotate(-4deg); background: var(--paper); padding: .5rem .5rem 1.4rem; box-shadow: 4px 4px 0 var(--edge); margin-bottom: 1rem; }
.badge-photo .me-photo { width: 120px; height: 120px; object-fit: cover; }
.t-chaos h1 { font: 400 clamp(3rem, 11vw, 7.5rem)/.92 "Bagel Fat One", system-ui, sans-serif; color: var(--accent); text-shadow: 4px 4px 0 var(--accent2), 8px 8px 0 var(--edge); letter-spacing: -.01em; max-width: 14ch; overflow-wrap: anywhere; }
.t-chaos.s-neon h1 { text-shadow: 0 0 18px var(--accent), 3px 3px 0 var(--accent2); }
.t-chaos .tagline { margin-top: 1.1rem; font-size: 1.15rem; background: var(--paper); padding: .2rem .7rem; transform: rotate(1deg); border: 2px solid var(--edge); }
.t-chaos h2 { font: 400 1.7rem/1 "Bagel Fat One", system-ui, sans-serif; margin-bottom: .9rem; color: var(--accent2); }
.board { display: grid; gap: 1.6rem; }
.scrap, .t-chaos .note { background: var(--paper); border: 2px solid var(--edge); padding: 1.1rem; position: relative; box-shadow: 5px 5px 0 var(--edge); }
.scrap::before, .t-chaos .note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 24px; margin-left: -48px; background: var(--tape); transform: rotate(-3deg); border: 1px dashed #0002; }
.t-chaos .note { margin: 0 0 1.6rem; }
.t-chaos .note:nth-child(3n+1) { transform: rotate(-1.2deg); }
.t-chaos .note:nth-child(3n+2) { transform: rotate(.9deg); }
.t-chaos .note:nth-child(3n) { transform: rotate(-.4deg); }
.t-chaos .note.pinned { background: var(--accent); color: #fff; }
.t-chaos .note.pinned a, .t-chaos .note.pinned .react { color: #fff; border-color: #fff8; }
.t-chaos.s-zine .note.pinned { color: #fff; }
.t-chaos .note.answer .prompt-line { background: var(--accent2); color: #fff; display: inline-block; padding: .15rem .5rem; transform: rotate(-1deg); }
.t-chaos .note.answer .prompt-line a, .t-chaos .note.answer .prompt-line a::before { color: #fff; }
.t-chaos .note-body { font-size: 1.05rem; }
.t-chaos .react { border: 2px solid var(--edge); border-radius: 999px; }
.prompt-scrap { background: var(--accent2); color: #fff; transform: rotate(1.5deg); }
.prompt-scrap a { color: #fff; }
.prompt-scrap .tp-text { font: 400 1.6rem/1.1 "Bagel Fat One", system-ui, sans-serif; }
.about-scrap { transform: rotate(-1deg); }
.t-chaos .fact dd { font-weight: 700; }
.t-chaos .tags a { color: var(--ink); border: 2px solid var(--edge); background: var(--bg); font-weight: 700; }
.t-chaos .photos img { border: 3px solid var(--paper); outline: 2px solid var(--edge); }
.chaos-foot { margin-top: 2.5rem; background: var(--paper); border: 2px solid var(--edge); padding: .8rem 1rem; box-shadow: 4px 4px 0 var(--edge); }
.chaos-foot a { color: var(--ink); }
@media (min-width: 900px) {
  .board { grid-template-columns: 1fr 1.6fr 1fr; align-items: start; }
  .about-scrap { grid-column: 1; grid-row: 1; }
  .prompt-scrap { grid-column: 3; grid-row: 1; }
  .board > .notes { grid-column: 2; grid-row: 1 / span 3; }
  .photos-scrap { grid-column: 1; grid-row: 2; }
  .gb-scrap { grid-column: 3; grid-row: 2 / span 2; }
}
@media (prefers-reduced-motion: reduce) { #nrw-toast { transition: none; } }