/* Whoever you are, I hope you're having a great day! */

/* Palette */
:root {
  --color-brand: #a8432b;
  --color-brand-dark: #7a2f1d;
  --color-visited: #7a5a8a;
  --color-bg: #f6f1e4;
  --color-text: #2a251d;
  --color-text-soft: #4a4436;
  --color-text-muted: #6b6153;
  --color-text-faint: #a89a7a;
  --color-panel: #fffdf7;
  --color-panel-alt: #f1e9d4;
  --color-border: #d8cdb4;
  --color-meta: #3f6b52;
  --color-sep: #c9bb98;
  /* height of the fixed mobile tab bar; the footer reserves it so the bar never covers content */
  --tabbar-h: 56px;
}

/* Base / reset */
body { margin: 0; }
a { color: var(--color-brand); }
a:hover { color: var(--color-brand-dark); }
a:visited { color: var(--color-visited); }

/* visible focus for keyboard users; themes override the colour where the brand red fails contrast */
:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 2px; }

pre {
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--color-panel);
  border: 2px ridge var(--color-border);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
}
code { font-family: 'Courier New', monospace; }
pre code { background: none; padding: 0; }

/* Page shell */
.page-body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
}
.page-content {
  max-width: 1250px;
  margin: 0 auto;
  padding: 40px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.page-content--centered {
  padding: 80px 40px;
  display: flex;
  justify-content: center;
}
/* main column takes the width, sidebar stays narrow: 1250px shell with a
   220px aside, petrapixel-style proportions */
.main-col { flex: 1 1 680px; min-width: 0; }
.diary-main { max-width: 480px; text-align: center; }
.notfound-main { max-width: 520px; text-align: center; }
.sidebar-col { flex: 0 0 220px; min-width: 200px; }

/* Header */
.site-header {
  border-bottom: 3px double var(--color-brand);
  background: var(--color-panel);
  padding: 28px 40px 20px;
  text-align: center;
}
.site-header-inner { max-width: 1250px; margin: 0 auto; position: relative; }
.brand-row { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
/* the title image is the home link; block so the img's auto margins still centre it */
.scene-title-link { display: block; text-decoration: none; }
.scene-title-link:hover .scene-title-ribbon { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .scene-title-ribbon { transition: opacity 0.15s ease-out; }
}
.header-ribbon {
  position: absolute;
  /* must paint above the later positioned sidebar cards; stays below the mobile tab bar (1000) */
  z-index: 10;
  top: 200px;
  /* left-anchored so it hangs off the same corner at any width; the old right
     offset slid off-screen below ~1330px once the header grew to 1250px */
  left: 1220px;
  width: 50px;
  height: 50px;
  transform: rotate(25deg);
  transform-origin: center;
}
.site-nav-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0;
  margin: 20px 0 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.site-nav-sep { color: var(--color-sep); }
.site-nav-link { text-decoration: none; padding-bottom: 2px; color: var(--color-text); }
.site-nav-link.is-active { color: var(--color-brand); border-bottom: 2px solid var(--color-brand); }

/* Footer */
.site-footer {
  border-top: 3px double var(--color-brand);
  background: var(--color-panel);
  padding: 24px 40px;
}
.site-footer-inner {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}
.site-footer-note {
  max-width: 1250px;
  margin: 8px auto 0;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-faint);
  font-style: italic;
}

/* Mobile tab bar + "More" sheet. The tab bar is hidden on desktop, where the
   header nav row links the same pages; the 767px query below shows it. The
   sheet is a native <dialog>, only reachable from the tab bar. */
.mobile-tabbar { display: none; }

.mobile-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  max-height: 75dvh;
  overflow-y: auto;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--color-panel);
  color: var(--color-text);
  border: 2px ridge var(--color-border);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.mobile-sheet::backdrop { background: rgba(20, 16, 10, 0.45); }
.mobile-sheet-grip {
  width: 44px;
  height: 5px;
  margin: 0 auto 12px;
  border-radius: 3px;
  background: var(--color-border);
}
.mobile-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.mobile-sheet-title {
  margin: 0;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-brand);
}
.mobile-sheet-close {
  min-height: 44px;
  padding: 8px 12px;
  background: var(--color-panel-alt);
  border: 2px ridge var(--color-border);
  color: var(--color-text);
  font: inherit;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
.mobile-sheet-list { list-style: none; margin: 0; padding: 0; }
.mobile-sheet-list a {
  display: block;
  box-sizing: border-box;
  min-height: 44px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
}
.mobile-sheet-list li:last-child a { border-bottom: 0; }
.mobile-sheet-list a:hover { color: var(--color-brand); }

@media (prefers-reduced-motion: no-preference) {
  .mobile-sheet[open] { animation: mobile-sheet-in 0.18s ease-out; }
}
@keyframes mobile-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (max-width: 767px) {
  /* one real column on phones: main content takes the full width and the
     sidebar boxes flow below it, instead of the desktop two-column squeeze */
  .page-content {
    display: block;
    padding: 24px 16px;
    /* long URLs / unbroken words would widen the phone page; let them wrap */
    overflow-wrap: break-word;
  }
  /* keep the centered variant flex: the block rule above would win on equal specificity */
  .page-content--centered { display: flex; padding: 48px 16px; }
  .main-col, .sidebar-col { max-width: none; min-width: 0; }
  .sidebar-col { margin-top: 28px; }
  .site-header { padding: 24px 16px 16px; }
  /* the header nav row is replaced by the tab bar on phones */
  .site-header-inner > nav { display: none; }
  /* anchored at left: 1220px; off-screen on a phone and a horizontal-overflow risk */
  .header-ribbon { display: none; }
  /* reserve the tab bar height (+ safe area) so it never covers the last content */
  .site-footer {
    padding-top: 20px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(24px + var(--tabbar-h) + env(safe-area-inset-bottom));
  }

  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--color-panel);
    border-top: 3px double var(--color-brand);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobile-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: var(--tabbar-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-soft);
    cursor: pointer;
  }
  .mobile-tab:hover { color: var(--color-brand); }
  .mobile-tab.is-active {
    color: var(--color-brand);
    font-weight: 700;
    box-shadow: inset 0 3px 0 var(--color-brand);
  }
}

/* clip anything wider than the screen instead of letting the page slide
   sideways; pre blocks scroll on their own, so they're unaffected */
html { overflow-x: hidden; }

/* Sidebar boxes */
/* 14px side padding keeps the 88px linkback buttons two-per-row inside a
   220px sidebar box (2x88 + 6 gap = 182px of 184px inner width). */
.sidebar-box { background: var(--color-panel); border: 2px ridge var(--color-border); padding: 14px 16px; margin-bottom: 20px; }
.sidebar-box--flush-bottom { margin-bottom: 0; } /* archive box: no gap before the changelog box that follows */
.sidebar-box--center { text-align: center; }
.sidebar-box-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-brand);
  font-weight: 700;
  border-bottom: 2px solid var(--color-brand);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.sidebar-box-list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.sidebar-box-text { margin: 0 0 12px; font-size: 13px; color: var(--color-text-soft); }
.sidebar-box-scroll-wrap { position: relative; }
.sidebar-box-scroll { overflow-y: auto; }
.sidebar-box-scroll--lg { max-height: 150px; }
.sidebar-box-scroll--sm { max-height: 126px; }
.sidebar-box-fade {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 20px;
  background: linear-gradient(transparent, var(--color-panel));
  pointer-events: none;
}
.sidebar-box-hint { font-size: 11px; color: var(--color-brand); text-align: center; margin-top: 4px; }

/* the chat iframe is temporarily out of the page (see shoutbox.liquid), so nothing
   matches this rule right now; keep it for when the frame comes back */
.shoutbox-frame { width: 100%; height: 320px; border: 0; display: block; }

/* Deliberately loud (hazard tape + sign): the plain first draft read as ordinary
   sidebar copy and nobody noticed the chat was gone. Remove when the iframe
   returns; scene colours for it live in theme-scene.css. */
.shoutbox-offline {
  position: relative;
  background: var(--color-panel-alt);
  border: 2px solid var(--color-brand);
  padding: 24px 14px 20px;
  text-align: center;
}
/* Hazard tape across the top and bottom edges. */
.shoutbox-offline::before,
.shoutbox-offline::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 10px;
  background: repeating-linear-gradient(-45deg,
    var(--color-brand) 0 7px, transparent 7px 14px);
}
.shoutbox-offline::before { top: 0; }
.shoutbox-offline::after { bottom: 0; }
.shoutbox-offline-sign {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-brand);
}
/* sign and button stay centred, the sentences don't: at ~180px inner width,
   centring left ragged orphans like "it. Sorry!" on their own line */
.shoutbox-offline-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-soft);
  text-align: left;
}
.shoutbox-offline-text:last-of-type { margin-bottom: 14px; }

/* Currently */
.status-badge-link { display: inline-block; line-height: 0; }
.status-badge-link img { display: block; border: 0; }

/* Contact */
.contact-text { margin: 0 0 6px; font-size: 13px; color: var(--color-text-soft); }
.contact-text:last-child { margin: 0; }
.contact-text a { text-decoration: none; }

/* Now page */
.now-list { margin: 0; padding: 0; list-style: none; }
.now-item { margin-bottom: 10px; font-size: 14px; color: var(--color-text-soft); }
.now-item:last-child { margin-bottom: 0; }
.now-label { color: var(--color-meta); margin-right: 4px; }
.now-emoji, .wip-emoji { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.now-updated { margin: 0 0 24px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); }
.now-signoff { margin-top: 20px; }
.now-list--media .medialog-item:last-child { margin-bottom: 0; }

/* Media log */
.medialog-item { margin-bottom: 10px; color: var(--color-text-soft); }
.medialog-kind { color: var(--color-meta); font-weight: 700; }
.medialog-date { color: var(--color-text-muted); }
.medialog-note { color: var(--color-text-muted); font-style: italic; margin-top: 2px; }

/* Visitors */
.visitor-counter {
  background: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--color-brand);
}
.visitor-counter a {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #e8a559;
  text-decoration: none;
  letter-spacing: 1px;
}

/* Archive */
.archive-item { margin-bottom: 6px; }

/* Changelog */
.changelog-item { margin-bottom: 8px; color: var(--color-text-soft); }
.changelog-date { color: var(--color-text-muted); }

/* Links */
.linkback-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.linkback-item {
  width: 88px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--color-text-faint);
}
.linkback-item a { display: block; line-height: 0; }
.button-preview { text-align: center; margin-bottom: 12px; }
.button-preview img { display: inline-block; border: 0; image-rendering: pixelated; }
.button-note { margin: 0 0 8px; font-size: 12px; color: var(--color-text-soft); }
.button-textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--color-text-soft);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 6px;
  resize: vertical;
}
.button-hint { margin: 8px 0 0; font-size: 11px; color: var(--color-text-muted); }

/* Page titles / body copy */
.page-title { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; margin: 0 0 8px; }
.page-title--home { margin-bottom: 14px; }
.page-title--wide { margin-bottom: 20px; }
.diary-title { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; margin: 0 0 16px; }
.subsection-title { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; margin: 0 0 12px; }
.section-title {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin: 0 0 4px;
}
.page-subtitle { margin: 0 0 28px; color: var(--color-text-soft); font-size: 15px; }
.page-subtitle--tight { margin-bottom: 20px; }
.lede { margin: 0 0 14px; color: var(--color-text-soft); font-size: 16px; }
.lede--loose { margin-bottom: 32px; }
.diary-text { margin: 0 0 14px; color: var(--color-text-soft); font-size: 16px; }
.diary-text:last-child { margin-bottom: 28px; }
.section-divider { border: 0; border-top: 1px solid var(--color-border); margin: 28px 0; }
.breadcrumb-back { margin: 0 0 16px; }
.breadcrumb-back a { font-size: 13px; text-decoration: none; }

/* CTA buttons */
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.cta-row--centered { justify-content: center; margin-bottom: 0; }
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--color-text);
  color: var(--color-text);
  text-decoration: none;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* Narrower button for the sidebar, where the full-size one crowds the box. */
.btn--sm { padding: 7px 14px; font-size: 11px; }

/* Entry lists (home, blog, guides, category pages) */
.entry { padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.entry--compact { padding: 20px 0; }
.entry-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-meta); font-weight: 700; margin-bottom: 6px; }
.entry-title { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; margin: 0 0 10px; font-weight: normal; }
.entry-title--compact { font-size: 21px; margin-bottom: 8px; }
.entry-title a { color: var(--color-text); text-decoration: none; }
.new-badge { display: inline-block; vertical-align: middle; margin-left: 8px; image-rendering: pixelated; }
.entry-summary { margin: 0 0 10px; color: var(--color-text-soft); font-size: 15px; }
.entry-summary--compact { margin-bottom: 8px; }
.entry-link { font-size: 13px; text-decoration: none; }
.entry-empty { color: var(--color-text-soft); font-size: 15px; padding: 20px 0; }
.entry-empty--flush { padding: 0; }

.filter-row { margin-bottom: 28px; font-size: 13px; }
.filter-row a { text-decoration: none; }
.filter-sep { color: var(--color-sep); }

.pager { display: flex; justify-content: space-between; margin-top: 24px; font-size: 13px; }
.pager--gap { gap: 16px; }
.pager-link { text-decoration: none; }
.pager-link.is-disabled { color: var(--color-text-faint); }

.view-all { text-align: center; margin-top: 24px; }
.view-all a { font-size: 13px; }

/* Post / guide layout */
.post-meta { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--color-meta); font-weight: 700; margin-bottom: 8px; }
.post-title { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; margin: 0 0 24px; line-height: 1.25; }
.post-title--tight { margin-bottom: 12px; }
.post-body { color: var(--color-text-soft); font-size: 16px; }
.post-tags { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 13px; }
.post-tags strong { color: var(--color-text); }
.guide-summary { margin: 0 0 24px; color: var(--color-text-muted); font-size: 16px; font-style: italic; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 24px; }
.tag { font-size: 11px; background: var(--color-panel-alt); color: var(--color-text-muted); padding: 3px 8px; }
.guide-footnote { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: 13px; color: var(--color-text-muted); }

/* Projects */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.project-card { background: var(--color-panel); border: 2px ridge var(--color-border); }
.project-card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-panel-alt);
  color: var(--color-text-faint);
  font-size: 12px;
  border-bottom: 2px ridge var(--color-border);
}
.project-card-body { padding: 16px; }
.project-card-title { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; margin: 0 0 6px; font-weight: normal; }
.project-card-desc { margin: 0 0 10px; color: var(--color-text-soft); font-size: 14px; }
.project-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.project-card-link { font-size: 13px; text-decoration: none; }
.project-card-link.is-disabled { color: var(--color-text-faint); }

/* Categories */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.category-card { background: var(--color-panel); border: 2px ridge var(--color-border); padding: 20px; }
.category-card-title { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; margin: 0 0 8px; font-weight: normal; }
.category-card-title a { color: var(--color-text); text-decoration: none; }
.category-card-desc { margin: 0 0 10px; color: var(--color-text-soft); font-size: 14px; }
.category-card-count { font-size: 12px; color: var(--color-text-muted); }

.empty-card { background: var(--color-panel); border: 2px ridge var(--color-border); padding: 24px; }
.empty-card p { margin: 0; color: var(--color-text-soft); font-size: 15px; }

/* Guide callout (GrapheneOS.md) */
.guide-callout { background: var(--color-panel); border: 2px ridge var(--color-border); padding: 16px 20px; margin: 16px 0 24px; }
.guide-callout label { display: block; font-size: 13px; font-weight: bold; color: var(--color-text); margin-bottom: 8px; }
.guide-callout select {
  width: 100%;
  max-width: 320px;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  background: #fff;
  color: var(--color-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.guide-callout p { margin: 12px 0 0; font-size: 14px; }
.code-pill { font-family: 'Courier New', monospace; background: var(--color-panel-alt); padding: 2px 6px; }

/* About page: profile card beside the intro text */
.about-intro { display: flex; gap: 20px; align-items: flex-start; }
.about-intro-text { flex: 1; min-width: 0; }
.profile-card {
  box-sizing: border-box;
  flex: 0 0 220px;
  background: transparent;
  border: 2px ridge var(--color-border);
  padding: 14px;
  text-align: center;
}
.profile-card-name {
  margin: 0 0 10px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 20px;
  color: var(--color-text);
}
.profile-card-flags { display: flex; justify-content: center; gap: 6px; margin-bottom: 12px; }
.profile-card-flag { display: block; image-rendering: pixelated; border: 1px solid var(--color-border); }
.profile-card-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  text-align: left;
}
.profile-badge {
  min-width: 0;
}
.profile-badge-icon {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}

/* below ~600px the 220px card and the text column no longer fit side by side */
@media (max-width: 600px) {
  .about-intro { flex-direction: column; }
  .profile-card { flex: none; width: 100%; max-width: 240px; }
}