/* Gwenna Tech resource site: palette from Gwenna's look (copper hair, ivory suit, charcoal turtleneck, gold) */
@font-face { font-family: Inter; src: url(/Inter.ttf) format("truetype"); font-weight: 100 900; }
:root { --bg: #f3eee5; --bg2: #f8e2d2; --card: #fffdf9; --ink: #26231f; --muted: #675e54; --line: #e7dfd2; --accent: #b4451a; --accent-ink: #fff; --soft: #f7e3d6; --gold: #b5821f; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1d20; --bg2: #3b2317; --card: #25262a; --ink: #f5f0e7; --muted: #aca497; --line: #393a41; --accent: #e8753f; --accent-ink: #1c1d20; --soft: #43271a; --gold: #e3b458; }
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(900px 520px at 50% -120px, var(--bg2), var(--bg) 70%) no-repeat, var(--bg); color: var(--ink); font: 18px/1.6 Inter, system-ui, sans-serif; }
main { max-width: 720px; margin: 0 auto; padding: 28px 16px 64px; }
header { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
header img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--accent); }
header a { color: var(--ink); text-decoration: none; font-weight: 850; letter-spacing: -0.2px; }
header span { color: var(--muted); font-size: 14px; }
.pin { width: 18px; height: 18px; vertical-align: -3px; color: var(--accent); }
h1 { font-size: clamp(30px, 6vw, 46px); line-height: 1.08; letter-spacing: -1.2px; margin: 0 0 18px; text-wrap: balance; }
.kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 999px; background: var(--soft); color: var(--accent); font-size: 13px; font-weight: 750; letter-spacing: 0.4px; text-transform: uppercase; }
article { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 26px 24px; box-shadow: 0 20px 50px rgba(40, 25, 15, 0.08); }
article h2 { font-size: 22px; margin: 30px 0 8px; letter-spacing: -0.3px; }
article h2:first-child { margin-top: 0; }
article a { color: var(--accent); }
article code { background: var(--soft); padding: 2px 6px; border-radius: 6px; font-size: 0.92em; }
article pre { background: var(--soft); padding: 16px; border-radius: 14px; overflow: auto; white-space: pre-wrap; }
article pre code { background: none; padding: 0; }
article li { margin: 6px 0; }
article li::marker { color: var(--accent); }
article table { width: 100%; border-collapse: collapse; font-size: 16px; }
article th, article td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
article th { color: var(--muted); font-weight: 650; }
.src { margin-top: 26px; font-size: 14px; color: var(--muted); }
.src a { color: var(--muted); }
.hero { display: flex; gap: 20px; align-items: center; margin-bottom: 26px; }
.hero img { width: 112px; height: 112px; border-radius: 28px; object-fit: cover; flex: none; box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--accent); }
.hero p { margin: 0; color: var(--muted); }
ul.list { list-style: none; padding: 0; margin: 0; }
ul.list li { border-top: 1px solid var(--line); padding: 14px 0; }
ul.list li:first-child { border-top: 0; padding-top: 0; }
ul.list a { color: var(--ink); font-weight: 700; text-decoration: none; }
ul.list a:hover { color: var(--accent); }
.follow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.follow a { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 750; padding: 12px 22px; border-radius: 999px; }
.follow a.alt { background: transparent; color: var(--ink); border: 2px solid var(--line); }
.disc { margin-top: 18px; font-size: 13px; color: var(--muted); }