/*
 * roughlynamed.net
 *
 * Copyright (C) 2026 Magdalena Szweda
 *
 * This file is part of roughlynamed.net.
 *
 * sophies.rocks is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of
 * the License, or (at your option) any later version.
 *
 * sophies.rocks is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with sophies.rocks. If not, see <https://www.gnu.org/licenses/>.
 */
/* ROOT COLORSCHEME CHANGES WHENEVER I FEEL LIKE IT */

/* :root { */
/*     /1* flatwhite *1/ */
/*     --bg: #f1ece4; */
/*     --text: #605a52; */
/*     --accent: #4c5361; */
/*     --border: #93836c; */
/*     --muted: hsl(30, 8%, 55%); */
/* } */

:root {
  /* eink */
  --bg: #f2efe9;
  --text: #2b2926;
  --accent: #7a5c3e;
  --border: #d8d2c4;
  --muted: #8a8578;
}

/* :root { */
/*     /1* classic *1/ */
/*   --bg:     #f8efdf; */
/*   --text:   #33281c; */
/*   --accent: #b8783e; */
/*   --border: #e4e0d8; */
/*   --muted:  #7a6a54 */
/* } */

* {
  box-sizing: border-box;
}

p {
  margin: 0.4rem 0;
}

body {
  font-family:
    "Atkinson Hyperlegible Next",
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: 680px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  line-height: 1.65;
  font-size: 1.05rem;
}

h1,
h2,
h3 {
  font-family: "IBM Plex Serif", Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
  margin-top: 3rem;
}

h1 {
  font-size: 2.1rem;
  margin-top: 0;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 1.4rem;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(181, 83, 60, 0.3);
  text-underline-offset: 3px;
}

nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 1rem;
  color: var(--muted);
}

code,
pre {
  font-family: "IBM Plex Mono", "Courier New", monospace;
  margin: 0.4rem 0;
}

code {
  background: #f0ede6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
}
.buttons div {
  display: inline-block;
}
#recent {
  margin-top: 3rem;
}

#recent h2 {
  margin-top: 0;
}

#recent-now p {
  margin: 0;
}

.recent-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
  align-items: start;
}

.recent-column {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-height: 0;
}

.recent-box {
  border: 1px solid #ddd;
  padding: 1.25rem 1.5rem;
}

.recent-box h3 {
  margin-top: 0;
  font-size: 1.1rem;
}

.recent-box ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 0;
}

.recent-box li + li {
  margin-top: 1.2rem;
}

.recent-box li a {
  font-weight: 600;
}

#recent-publications {
  flex-shrink: 0;
}
#recent-now {
  flex: 0 1 auto;
  min-height: 150px;
  max-height: 500px;
  overflow-y: auto;
  resize: vertical;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg);
}

#recent-now::-webkit-scrollbar {
  width: 8px;
}

#recent-now::-webkit-scrollbar-track {
  background: var(--bg);
}

#recent-now::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

#recent-now::-webkit-scrollbar-thumb:hover {
  background: var(--text);
}

#recent-now ul {
  list-style: none;
  padding-left: 0;
  margin: 1rem 0 0;
}

#recent-now li {
  margin: 0 0 1rem;
}

#recent-now li:last-child {
  margin-bottom: 0;
}

#recent-now time {
  display: block;
  font-size: 0.8em;
  color: var(--muted);
  font-family: "IBM Plex Mono", monospace;
}

@media (max-width: 550px) {
  .recent-grid,
  .terminology-grid {
    grid-template-columns: 1fr;
  }
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Serif";
  src: url("fonts/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("fonts/Atkinson_Hyperlegible_Next/AtkinsonHyperlegibleNext-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 400 700;
  font-display: swap;
}

.pgp-label {
  margin: 0;
  margin-bottom: 0;
}

.pgp-key {
  all: revert;
  white-space: pre-wrap;
  font-family: "Atkinson Hyperlegible Next";
  margin: 0;
}

.tag {
  font-size: 0.7em;
  padding: 0.1em 0.5em;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  margin-left: 0.4em;
}

.tag.done {
  background: #dcead9;
  color: #2e5c31;
}

.tag.todo {
  background: #f0ede6;
  color: var(--muted);
}

.tag.kill {
  background: #f2dcd8;
  color: #8a3b32;
}

.tag.maybe {
  background: #f3e6c8;
  color: #7a5a1c;
}

dl.slashlist dt {
  font-weight: 600;
  margin-top: 1.2em;
}

dl.slashlist dd {
  margin-left: 0;
  color: var(--muted);
  font-size: 0.95em;
}

.terminology {
  margin-top: 3rem;
}

.terminology-intro {
  color: var(--muted);
}

.terminology-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.terminology-grid > div {
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  border-radius: 6px;
}

.terminology-grid h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.terminology-grid ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.terminology-grid li {
  margin: 0.35rem 0;
}

.terminology-grid .icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: -3px;
  margin-right: 0.35rem;
}

.rating-love {
  color: var(--accent);
  font-weight: 700;
}

.rating-like {
  color: var(--text);
}

.rating-okay {
  color: #628c58;
}

.rating-maybe {
  color: #a66b3d;
}

.rating-no {
  color: #a34f45;
}

.rating-never {
  color: #a34f45;
  font-weight: 700;
}