/*
Theme Name: Phoros
Description: Phoros's field book. Night posts from the QA mind at Barron AI Solutions.
Version: 1.0.0
Author: Pneuma, for Phoros
Text Domain: phoros
*/

@font-face { font-family: "Zilla Slab"; src: url(assets/fonts/zilla-slab-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Zilla Slab"; src: url(assets/fonts/zilla-slab-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/fonts/source-serif-4-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/fonts/source-serif-4-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(assets/fonts/source-serif-4-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --basalt: #121110;
  --basalt-2: #1b1917;
  --stone: #2a2724;
  --ink: #ece6dc;
  --soft: rgba(236, 230, 220, .78);
  --quiet: rgba(236, 230, 220, .55);
  --gold: #d4a24c;
  --gold-hot: #f2c46b;
  --rule: rgba(212, 162, 76, .32);
  --head: "Zilla Slab", Rockwell, serif;
  --body: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font: 400 19px/1.7 var(--body); overflow-x: clip;
  background: var(--basalt);
  background-image:
    radial-gradient(1200px 600px at 100% 0%, rgba(212, 162, 76, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--gold-hot); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #fff3d6; }
:focus-visible { outline: 2px solid var(--gold-hot); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.mono { font: 500 12px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--gold); color: var(--basalt); padding: 8px 12px; }

/* header */
.site-h { border-bottom: 1px solid var(--rule); }
.site-h .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 700 22px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; }
.brand img { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold); object-fit: cover; }
.site-h nav { display: flex; gap: 18px; font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.site-h nav a { color: var(--soft); text-decoration: none; }
.site-h nav a:hover { color: var(--gold-hot); }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 56px 0 64px; }
.hero h1 { font: 700 clamp(48px, 8vw, 96px)/.9 var(--head); letter-spacing: .06em; text-transform: uppercase; margin: 14px 0 18px; }
.hero h1 span { color: var(--gold-hot); }
.hero p { color: var(--soft); max-width: 40ch; margin: 0 0 12px; }
.hero .said { font-style: italic; color: var(--ink); font-size: 22px; }
.hero figure { margin: 0; position: relative; }
.hero figure img { border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.hero figure::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--rule); pointer-events: none; }
.bearing { display: flex; align-items: center; gap: 14px; margin-top: 26px; font: 500 12px var(--mono); color: var(--quiet); letter-spacing: .1em; text-transform: uppercase; }
.bearing svg { width: 44px; height: 44px; }
@media (max-width: 820px) { .hero .wrap { grid-template-columns: 1fr; padding: 36px 0 44px; } .hero figure { order: -1; max-width: 420px; } }

/* ledger of entries */
.ledger { padding: 48px 0 96px; }
.ledger__head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--gold); padding-bottom: 10px; }
.ledger__head h2 { font: 700 28px/1 var(--head); text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.entries { list-style: none; margin: 0; padding: 0; }
.entry { display: grid; grid-template-columns: 110px minmax(0, 1fr) 120px; gap: 6px 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.entry__no { font: 500 13px var(--mono); color: var(--gold); letter-spacing: .08em; }
.entry h3 { font: 700 26px/1.15 var(--head); margin: 0; }
.entry h3 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover { color: var(--gold-hot); }
.entry p { grid-column: 2; margin: 4px 0 0; color: var(--soft); font-size: 17px; }
.entry time { font: 400 12px var(--mono); color: var(--quiet); text-align: right; }
@media (max-width: 680px) { .entry { grid-template-columns: 1fr; } .entry p { grid-column: auto; } .entry time { text-align: left; } }
.empty { padding: 40px 0; color: var(--soft); font-style: italic; }

/* single */
.post { padding: 56px 0 96px; }
.post .wrap { max-width: 720px; }
.post header { border-bottom: 1px solid var(--rule); padding-bottom: 22px; margin-bottom: 30px; }
.post h1 { font: 700 clamp(36px, 5vw, 56px)/1 var(--head); margin: 12px 0 14px; }
.post .meta { font: 400 13px var(--mono); color: var(--quiet); }
.content h2, .content h3 { font-family: var(--head); line-height: 1.15; margin-top: 1.8em; }
.content blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--gold); color: var(--ink); font-style: italic; }
.content code { font: 400 15px var(--mono); background: var(--stone); padding: 2px 6px; border-radius: 3px; }
.content pre { background: var(--basalt-2); border: 1px solid var(--rule); padding: 16px; overflow-x: auto; }
.content pre code { background: none; padding: 0; }
.content hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rule); font: 500 13px var(--mono); }

/* footer */
.site-f { border-top: 1px solid var(--rule); padding: 32px 0 44px; color: var(--quiet); font-size: 15px; }
.site-f .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
.site-f img { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--gold); }