@font-face
{
  font-family: 'Bastliga-One';
  src: url('/fonts/bastliga-one.regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face
{
  font-family: 'Playfair Display';
  src: url('/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face
{
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face
{
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face
{
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face
{
  font-family: 'Space Mono';
  src: url('/fonts/SpaceMono-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


:root
{
  /* Light Theme */
  --background: #FCF3EA;
  /* rgb(251, 248, 245); */
  --background-vivid: white;
  /* 
  Original color:
  --background: rgb(250, 247, 244);
  
  Nice darker red color:
  --background: rgb(252, 238, 225); 
  */
  --card-paperwhite: rgb(251, 248, 245);
  --code-midgray: #ddd;
  --blockquote-gray: #f0f0f0;
  --border-gray: rgb(199, 199, 199);
  --text: rgb(52, 44, 38);
  /* #222; */
  --text-hover-shiny: #4d7ba9;
  --text-mobile-menu: white;
  --text-nav: #9a8878;

  --cream: #FCF3EA;
  --paper: #FDF8F2;
  --ink: #1a1410;
  --surface-dark: #1a1410;
  --muted: #9a8878;
  --rule: #e2d4c4;
  --orange: rgb(231, 90, 34);
  --blue: rgb(44, 118, 246);
  --purple: rgb(117, 102, 215);
  --grad: linear-gradient(135deg,
      rgba(235, 85, 75, 0.9),
      rgba(220, 125, 85, 0.85),
      rgba(131, 174, 255, 0.7),
      rgba(60, 165, 235, 0.9),
      rgba(130, 120, 225, 0.7));

  --button-background-mobile-menu: rgba(0, 0, 0, 0.4);
  --muted-gray: #666;
  --caption-warm: #928475;
  --quote-warm: #453f37;
  --awesome-blue: rgba(0, 145, 255, 1);
  --awesome-orange: rgba(255, 68, 0, 1);
  --accent-orange: rgb(230, 129, 58);
  --accent-blue: rgb(44, 118, 246);
  --accent-yellownote: #F2BA4B;

  
  --font-serif-fancy: "Playfair Display", "Georgia", "Charter", "Garamond", serif;
  --font-serif: "Georgia", "Charter", "Garamond", serif;
  --font-sans-serif: ui-sans-serif, -apple-system, system-ui, Segoe UI, Helvetica, Apple Color Emoji, Arial, sans-serif, Segoe UI Emoji, Segoe UI Symbol;
  --font-mono: ui-monospace, "Space Mono", SFMono-Regular, Consolas, monospace;

  /* ── Type scale ── */
  --text-xs: 0.6rem;    /* tags — intentionally tiny */
  --text-sm: 0.7rem;    /* labels, dates, badges, captions */
  --text-md: 0.82rem;   /* hooks, descriptions, read-more */
  --border-radius: 20px;
  

  --closeButton-mobile-menu: white;
  --text-mobile-menu-hover: black;
  --background-mobile-menu: linear-gradient(135deg,
      rgba(170, 45, 0, 0.7),
      rgba(0, 98, 174, 0.7) 50%,
      rgba(83, 44, 173, 0.7) 100%);

  /* Juicy */
  --background-gradient-juicy: linear-gradient(135deg,
      rgb(246, 75, 59),
      rgb(255, 132, 73),
      rgb(92, 134, 217),
      rgb(31, 156, 228),
      rgb(117, 102, 215));

  /* Faded */
  --background-gradient: linear-gradient(135deg,
      rgba(235, 85, 75, 0.9),
      rgba(220, 125, 85, 0.9),
      rgba(131, 174, 255, 0.6),
      rgba(60, 165, 235, 0.9),
      rgba(130, 120, 225, 0.6));

  /* 24 looks good on computer, honestly on mobile too. 16 minimum on a lot of mobile sites and apple. */
  --padding: 24px;
  --padding-mobile: 16px;
  --padding-body: 3rem;
  --padding-page: 4rem;

  /*
  Insta uses 935. Apple 980. Most ~900. Web search 652. Blogs 650 to 740. 
  8.5" Letter Paper is ~816.
  1200 max otherwise.
  576px is a good blog size for the SF pro text font.
  I settled on about 600px.
  */
  --max-width-article: 600px;
  /*  600 looks better tbh*/
  --max-width-main: 818px;
  --max-width-desktop: 1200px;
  /* TODO: Larger than 1200 max, include some cool art in margins. */

  /* Prevent font scaling in landscape while allowing user zoom */
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;

  /* ── Adaptive tint – flips to white in dark mode ── */
  --tint: var(--ink);

  /* ── Ink-tinted overlays (on cream/light surfaces) ── */
  --hover-bg: color-mix(in srgb, var(--tint) 7%, transparent);
  --aside-surface: color-mix(in srgb, var(--tint) 2.5%, transparent);
  --tag-neutral-bg: color-mix(in srgb, var(--tint) 6%, transparent);
  --figure-label: color-mix(in srgb, var(--tint) 20%, transparent);

  /* ── Signature ── */
  --signature-color: rgb(149, 137, 122);
  --signature-hover: rgb(120, 93, 75);

  /* ── Panel surfaces ── */
  --panel-bg-soft:  color-mix(in srgb, var(--tint) 0%, var(--background)); 
  --panel-bg-hover: color-mix(in srgb, var(--tint) 6%, var(--background));
  --panel-border:  var(--rule);
  --panel-border-active: color-mix(in srgb, var(--tint) 17%, transparent);
  /* --panel-border-active: var(--orange); */
  --panel-text-ghost: color-mix(in srgb, var(--tint) 10%, transparent);
  --panel-caption:    color-mix(in srgb, var(--tint) 12%, transparent);
  --panel-pill-border: color-mix(in srgb, var(--tint) 25%, transparent);
  --panel-pill-border-hover: color-mix(in srgb, var(--tint) 60%, transparent);

  /* ── Accent gradients for thumbnail/figure backgrounds ── */
  --grad-orange-blue: linear-gradient(135deg, color-mix(in srgb, var(--orange) 16%, transparent), color-mix(in srgb, var(--blue) 12%, transparent));
  --grad-warm:        linear-gradient(135deg, color-mix(in srgb, var(--orange) 16%, transparent), rgba(255, 160, 80, 0.1));
  --grad-blue-purple: linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, transparent), color-mix(in srgb, var(--purple) 16%, transparent));
  --grad-purple-warm: linear-gradient(135deg, color-mix(in srgb, var(--purple) 13%, transparent), color-mix(in srgb, var(--orange) 10%, transparent));
  --grad-blue-warm:   linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, var(--orange) 14%, transparent));

  /* ── Post UI ── */
  --post-meta-color: #a09080;
  --post-nav-rule:   rgba(180, 165, 148, 0.2);

  --articles-bg: color-mix(in srgb, var(--muted) 8%, var(--background));
  --writings-hero-bg: var(--articles-bg);
  --writings-body-bg: var(--background);
}

:root.dark
{
  --background: rgb(18, 18, 18);
  --background-vivid: black;
  --rule: #4b433b;;
  --ink: #e8e0d8;
  --text: #eaeaea;
  --text-mobile-menu: white;
  --background-mobile-menu: linear-gradient(135deg,
      rgba(157, 42, 0, 0.7),
      rgba(0, 92, 163, 0.7) 50%,
      rgba(82, 34, 151, 0.7) 100%);

  --background-gradient: linear-gradient(135deg,
      rgba(128, 80, 50, 0.1),
      rgba(115, 57, 82, 0.1),
      rgba(118, 60, 100, 0.1),
      rgba(65, 65, 128, 0.1),
      rgba(72, 128, 112, 0.1),
      rgba(75, 50, 128, 0.1),
      rgba(68, 50, 120, 0.1));
  --background-gradient: linear-gradient(135deg,
      rgba(255, 160, 100, 0.1),
      rgba(230, 115, 165, 0.1),
      rgba(235, 120, 200, 0.1),
      rgba(130, 130, 255, 0.1),
      rgba(145, 255, 225, 0.1),
      rgba(150, 100, 255, 0.1),
      rgba(135, 100, 240, 0.1));

  --button-background-mobile-menu: rgba(160, 160, 160, .5);
  --muted-gray: #999;
  --caption-warm: rgb(156, 154, 146);
  --quote-warm: rgb(165, 162, 153);
  --accent-blue: rgba(73, 152, 247, 1);
  --card-paperwhite: rgb(13, 13, 13);
  --code-midgray: #1c1c1c;
  --blockquote-gray: #2a2a2a;
  --border-gray: rgba(57, 57, 57, 1);

  --tint: var(--cream);
  --signature-color: rgb(100, 94, 88);
  --signature-hover: rgb(150, 130, 115);
  --post-meta-color: rgb(155, 143, 133);
  --post-nav-rule: rgba(80, 72, 65, 0.4);
  
  --panel-bg-soft: color-mix(in srgb, var(--tint) 3%, var(--background)); /* container resting state */
  --panel-bg:      color-mix(in srgb, var(--tint) 4%, var(--background)); /* elevated / hover state */

  --articles-bg: var(--surface-dark);
  --writings-hero-bg: var(--surface-dark);
  --writings-body-bg: var(--surface-dark);
}

html
{
  background: var(--background);
  overflow-x: hidden;
}



/* ── shared pill shape ── */
.dark-toggle-btn,
nav a,
section.intro ul.tags li,
.pill-ghost,
.pill-grad,
.pill-ink,
article.featured header strong,
section.currently li .format,
section.building li .status,
.tag,
article.writings-lead header strong,
.status-badge
{
  border-radius: 999px;
}

/* ── shared label-mono pattern ── */
section.intro ul.tags li,
.pill-ghost,
.pill-grad,
.pill-ink,
article.featured header strong,
section.currently li .format,
section.building li .status,
.tag,
article.writings-lead header strong,
.status-badge,
.ticket-overline,
#ticket-fullscreen,
.ticket-flair
{
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── shared article card ── */
.article-card
{
  transition: border-color 0.2s, transform 0.2s;
}

.article-card h2,
.article-card h3
{
  transition: color 0.15s;
}

.article-card:hover h2,
.article-card:hover h3
{
  color: var(--orange);
}

/* ── shared time ── */
time
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- DARK MODE BUTTON --- */
.dark-toggle-btn
{
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;

  /* size = icon + padding on each side */
  width: calc(24px + 1.5em);
  height: calc(24px + 1.5em);
}

.dark-toggle-btn:hover
{
  background: var(--hover-bg);
}

.dark-toggle-btn svg
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* true center regardless of button size */
  width: 24px;
  height: 24px;
  opacity: 0;
  pointer-events: none;
  fill: var(--text-nav);
}

.dark-toggle-btn:hover svg
{
  fill: var(--accent-yellownote);
}

/* Show sun icon in light mode */
:root .icon-sun
{
  opacity: 1;
}

/* Show moon icon in dark mode */
:root.dark .icon-sun
{
  opacity: 0;
}

:root.dark .icon-moon
{
  opacity: 1;
}

*,
*::before,
*::after
{
  margin: 0;
  padding: 0;
}

body
{
  background: var(--background);
  color: var(--ink);
  font-family: var(--font-serif);
  /* font-size: 1.1rem; */
  line-height: 1.75;
  overflow-x: hidden;
  border: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


body.no-scroll
{
  overflow: hidden;
  position: fixed;
  width: 100%;
}

header
{
  text-align: left;
  margin: 0;
  /* border-bottom: 1px solid var(--rule); */
}

pre,
code
{
  font-family: var(--font-mono);
  font-size: .9rem;
  background: var(--code-midgray);
  padding: 0.25rem 0.7rem;
  border-radius: var(--border-radius);
}

pre
{
  display: block;
  padding: 1rem;
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

hr
{
  border-style: none;
  background-color: var(--rule);
  height: 1px;
}

article
{
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}

article p
{
  color: var(--ink);
  margin-bottom: 1.6rem;
}

article a:hover
{
  text-decoration: underline;
}

article h1
{
  line-height: 1.2;
}

article h2
{
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 2.75rem 0 0.85rem;
}

article h3
{
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 2.25rem 0 0.75rem;
}

article ul,
article ol
{
  padding-left: 1.5rem;
  margin-bottom: 1.6rem;
}

article li
{
  color: var(--ink);
  margin-bottom: 0.7rem;
}

article>figure figcaption
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--caption-warm);
  margin: 0.75rem 0 1.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6
{
  font-family: var(--font-serif-fancy);
  font-weight: 900;
}

h1
{
  font-size: 2.5rem;
  margin: 1rem 0;
}

/* link */
a
{
  color: var(--accent-blue);
  text-decoration: none;
}

/* quote */
q
{
  font-family: var(--font-serif);
  color: var(--quote-warm);
  font-style: italic;
}

ul p,
li p
{
  display: block;
  margin: 0;
}

a:hover
{
  border-color: var(--muted-gray);
}

img
{
  width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  /* margin-bottom: 0.25em; */
  /* spacing between image and caption */
}

video
{
  width: 100%;
  max-width: 100vw;
  max-height: 80vh;
  height: auto;
  border-radius: var(--border-radius);
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

svg
{
  fill: var(--text);
  display: inline-block;
  width: 2rem;
  height: auto;
}

button
{
  background: none;
  border: none;
  margin: none;
  /* margin-top: 1rem; */
  /* padding: 0.7rem 1rem; */
  /* font-size: 1rem; */
  /* cursor: pointer; */
}

blockquote
{
  /* border-left: 4px solid var(--accent-blue); */
  /* background: var(--blockquote-gray); */
  padding: 0.7rem 1rem;
  margin: 1.5rem 0;
  color: var(--muted-gray);
  font-style: italic;
}

article aside
{
  border-radius: 8px;
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem;
  margin: 2rem 0;
  background: var(--aside-surface);

}

article aside p
{
  font-size: 1rem;
  line-height: 1.65;
  color: var(--caption-warm);
  margin: 0;
}

article aside p + p
{
  margin-top: 0.75rem;
}

article aside strong
{
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

table,
th,
td
{
  border: 1px solid var(--border-gray);
  border-collapse: collapse;
  padding: 0.75rem;
}

small
{
  color: var(--muted-gray);
  font-style: italic;
  font-size: var(--text-md);
}

main
{
  background: var(--background);
  /* padding: 4rem; */
  /* max-width: 1200px; */
  width: 100%;
  flex: auto;
}

/* ── 404 ── */
.page-404 h1 {
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 2.5rem var(--padding) 1.5rem;
}

.page-404 img {
  max-width: 90%;
  display: block;
  margin: 2rem auto;
}

/* ── NAV (homepage) ── */
nav
{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.1rem 2rem;
  border-bottom: 1px solid var(--rule);
  /* max-width: var(--max-width-desktop); */
  margin: 0 auto;
}

nav h1
{
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

nav a
{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  padding: 0.8em 1em;
  transition: background 0.15s, color 0.15s;
}

nav a:hover
{
  background: var(--hover-bg);
  color: var(--ink);
}

/* ------------------- DESKTOP NAV ------------------- */

.nav-logo
{
  display: flex;
  /* flex-direction: row; */
  align-items: center;
  margin: 0;
  gap: 1rem;
}

.nav-logo img
{
  display: block;
  width: auto;
  height: 40px;
  justify-content: center;
  border-radius: 0;
}

.nav-links
{
  display: flex;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  gap: 1.2em;
  align-items: center;
}

.nav-links svg
{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: var(--text-nav);
}


/* ── SECTION 1: INTRO ── */
section
{
  /* max-width: var(--max-width-main); */
  margin: 0 auto;
}

section.intro
{
  min-height: 96vh; /* use svh for mobile */
  display: grid;
  grid-template-columns: 1fr 64px;
  max-width: var(--max-width-desktop);

  /* border-bottom: 1px solid var(--rule); */


  /* border-right: 1px solid var(--rule);
  border-left: 1px solid var(--rule); */
  padding: 0 2.5rem;
}

section.intro>div
{
  padding: 3rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

section.intro p.eyebrow
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

section.intro h2
{
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

section.intro h2 span:first-of-type
{
  font-size: clamp(5rem, 13vw, 10rem);
  display: block;
}

section.intro h2 span:last-of-type
{
  font-size: clamp(2rem, 6vw, 5rem);
  display: block;
  font-weight: 900;
}

section.intro h2 em
{
  font-size: clamp(3.5rem, 9vw, 7rem);
  display: block;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

section.intro p.dek
{
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 2.5rem;
}

section.intro nav.pills
{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 2rem 0;
  padding: 0;
  border: none;
  justify-content: flex-start;
  align-items: flex-start;
  align-self: auto;
}

/* scattered tags */
section.intro ul.tags
{
  list-style: none;
  position: relative;
  height: 100px;
}

section.intro ul.tags li
{
  position: absolute;
  font-size: var(--text-sm);
  padding: 0.32em 0.85em;
  transition: transform 0.2s;
  cursor: default;
}

section.intro ul.tags li:hover
{
  transform: scale(1.07) rotate(0deg) !important;
}

section.intro ul.tags li:nth-child(1) { left: 0%;  top: 18px; transform: rotate(-2.5deg); }
section.intro ul.tags li:nth-child(2) { left: 13%; top: 54px; transform: rotate(1.5deg);  }
section.intro ul.tags li:nth-child(3) { left: 28%; top: 16px; transform: rotate(-1deg);   }
section.intro ul.tags li:nth-child(4) { left: 46%; top: 50px; transform: rotate(2.5deg);  }
section.intro ul.tags li:nth-child(5) { left: 62%; top: 14px; transform: rotate(-2deg);   }
section.intro ul.tags li:nth-child(6) { left: 78%; top: 48px; transform: rotate(1deg);    }

/* signature strip */
section.intro aside
{
  border-left: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
}

section.intro aside span
{
  font-family: 'Bastliga-One';
  /* font-weight: bold; */
  font-size: 4rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  cursor: default;
}


/* ── SECTION 2: ARTICLES ── */
section.articles
{
  background: var(--articles-bg);
  padding: 5rem 0;
  border-top: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
}

section.articles>header,
section.articles>#articles-container
{
  max-width: var(--max-width-desktop);
  margin-left: auto;
  margin-right: auto;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

section.articles>header
{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3.5rem;
  gap: 2rem;
}

section.articles>header h2
{
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--tint);
}

section.articles>header h2 em
{
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

section.articles>header div
{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  padding-bottom: 0.7rem;
  flex-shrink: 0;
}

section.articles>header p
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* pill-ghost for dark sections */
.pill-ghost
{
  display: inline-flex;
  align-items: center;
  font-size: var(--text-sm);
  padding: 0.6em 1.4em;
  border: 2px solid var(--panel-pill-border);
  color: var(--panel-pill-border-hover);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, transform 0.12s;
}

.pill-ghost:hover
{
  border-color: var(--panel-pill-border-hover);
  color: var(--panel-pill-border-hover);
  transform: translateY(-2px);
}

/* --- ARTICLE HEADER --- */
header.article-header
{
  /* max-width: var(--max-width-article); */
  margin: 0 auto;
  padding: 4rem 2.5rem 0rem;
  /* padding: 4rem 2.5rem 3.5rem; */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border-bottom: 1px solid var(--rule); */
}

header.article-header>*
{
  width: 100%;
  max-width: var(--max-width-article);
}

header.article-header p.tagline
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.85rem;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.6em;
}

header.article-header p.tagline time
{
  /* color: var(--caption-warm); */
  font-weight: 400;
  letter-spacing: 0.08em;
}

.meta-divider
{
  color: var(--muted);
}

header.article-header h1
{
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 0.97;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 1rem;
}

header.article-header p.dek
{
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

header.article-header div.post-meta
{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}

header.article-header div.post-meta div
{
  display: flex;
  gap: 1.5rem;
}

/* featured article */
article.featured
{
  border-radius: 20px;
  background: var(--panel-bg-soft);
  border: 1px solid var(--panel-border);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  margin: 0 0 1.25rem 0;
  padding: 0;
  /* cursor: pointer; */
  min-height: 340px;

  max-width: none;
}

article.featured:hover
{
  border-color: var(--panel-border-active);
  transform: translateY(-2px);
}


article.featured figure
{
  /* background: var(--grad-orange-blue); */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

article.featured figure img
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  z-index: 1;
}

/* article.featured figure::before
{
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  top: 30px;
  left: 20px;
  border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%;
  background: color-mix(in srgb, var(--orange) 15%, transparent);
} */

/* article.featured figure::after
{
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  bottom: 25px;
  right: 15px;
  border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
} */

article.featured figure figcaption
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-caption);
  position: relative;
  z-index: 2;
}

article.featured>a
{
  display: contents;
  text-decoration: none;
  color: inherit;
}

article.featured>div,
article.featured>a>div
{
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ── shared read-more ── */
.read-more
{
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--orange);
  align-self: flex-start;
}

article.featured .read-more
{
  font-weight: 700;
  letter-spacing: 0.08em;
}

article.featured header
{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

article.featured header strong
{
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  background: var(--grad);
  color: white;
  padding: 0.28em 0.75em;
}

article.featured header time
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  color: var(--muted);
}

article.featured h3
{
  font-size: 1.8rem;
  font-weight: 900;
  line-height: 1.05;
  color: var(--tint);
  margin-bottom: 0.85rem;
}

article.featured p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  margin-bottom: 1.5rem;
}

/* date groups */
section.articles section
{
  margin-top: 2.5rem;
}

section.articles section>h4,
section.writings-month>h4
{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

section.articles section>h4::before,
section.articles section>h4::after,
section.writings-month>h4::before,
section.writings-month>h4::after
{
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}



/* --- Hero sparse photo + one-liner --- */
header.about-hero
{
  max-width: var(--max-width-article);
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2.5rem;
  align-items: center;
  border-bottom: 1px solid var(--rule);
}

header.about-hero figure
{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--rule);
  /* background: var(--grad-orange-blue); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

header.about-hero figure span
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--figure-label);
}

header.about-hero div p.oneliner
{
  font-family: var(--font-serif-fancy);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 0.85rem;
}

header.about-hero div p.sub
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.8;
}


/* --- BIO --- */
section.bio p
{
  font-size: 1rem;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 1.25rem;
  /* font-family: var(--font-serif-fancy); */
}

section.bio p:last-child
{
  margin-bottom: 0;
}

/* --- CURRENTLY --- */
section.currently ul
{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

section.currently li
{
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

section.currently li:last-child
{
  border-bottom: none;
}

section.currently li .thumb
{
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

section.currently li:nth-child(1) .thumb
{
  background: var(--grad-blue-purple);
}

section.currently li:nth-child(2) .thumb
{
  background: var(--grad-warm);
}

section.currently li:nth-child(3) .thumb
{
  background: var(--grad-purple-warm);
}

section.currently li .thumb svg
{
  width: 22px;
  height: 22px;
  stroke: var(--muted);
  fill: none;
}

section.currently li h3
{
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

section.currently li p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
}

section.currently li .format
{
  font-size: var(--text-sm);
  padding: 0.22em 0.6em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- BOOKS --- */
section.books ul
{
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

section.books li
{
  padding: 0.85rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

section.books li:nth-child(odd)
{
  padding-left: 0;
  border-right: 1px solid var(--rule);
  padding-right: 1rem;
}

section.books li:nth-child(even)
{
  padding-left: 1rem;
}

section.books li:last-child,
section.books li:nth-last-child(2):nth-child(odd)
{
  border-bottom: none;
}

section.books li h3
{
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
}

section.books li p.author
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

section.books li p.note
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* --- QUOTES --- */
section.quotes ul
{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

section.quotes li
{
  padding: 1.25rem 0 1.25rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid var(--rule);
  transition: border-color 0.2s;
}

section.quotes li:last-child
{
  border-bottom: none;
}

section.quotes li:hover
{
  border-left-color: var(--orange);
}

section.quotes li blockquote p
{
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.7rem;
}

section.quotes li blockquote cite
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* --- BUILDING --- */
section.building ul
{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

section.building li
{
  background: var(--surface-dark);
  border-radius: 14px;
  border: 1px solid var(--rule);
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
}

section.building li h3
{
  font-size: 1rem;
  font-weight: 900;
  color: var(--cream);
  margin-bottom: 0.3rem;
}

section.building li p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.5;
}

section.building li .status
{
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  padding: 0.25em 0.65em;
  white-space: nowrap;
  flex-shrink: 0;
}





/* ── GEAR ── */
section.gear ul
{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

section.gear li
{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

section.gear li:last-child
{
  border-bottom: none;
}

section.gear li .gear-cat
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 80px;
  flex-shrink: 0;
}

section.gear li h3
{
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--ink);
  flex: 1;
}

section.gear li p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  text-align: right;
}



/* card grid */
ul.card-grid
{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

ul.card-grid li
{
  background: var(--panel-bg-soft);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
}

ul.card-grid li>a
{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

ul.card-grid li:hover
{
  border-color: var(--panel-border-active);
  transform: translateY(-2px);
}


ul.card-grid li figure,
ul.card-grid li a figure
{
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

ul.card-grid li figure img,
ul.card-grid li a figure img
{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

ul.card-grid li figure figcaption,
ul.card-grid li a figure figcaption
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-text-ghost);
  position: relative;
  z-index: 1;
}

ul.card-grid li>div,
ul.card-grid li>a>div
{
  padding: 1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

ul.card-grid li>div header,
ul.card-grid li>a>div header
{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 1rem;
  margin-top: auto;
}



ul.card-grid li h3
{
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--tint);
  margin-bottom: 0.35rem;
}

ul.card-grid li p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.5;
}

/* plain rows */
ul.post-rows
{
  list-style: none;
  background: var(--panel-bg-soft);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
}

ul.post-rows li a
{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--panel-border);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}

ul.post-rows li:last-child a
{
  border-bottom: none;
}

ul.post-rows li a:hover
{
  background: var(--panel-bg-hover);
}


ul.post-rows time
{
  width: 54px;
  flex-shrink: 0;
}

ul.post-rows h3
{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--tint);
  flex: 1;
}

ul.post-rows p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  text-align: right;
  max-width: 220px;
  flex-shrink: 0;
}

/* --- TAGS --- */
.tag
{
  font-size: var(--text-xs);
  padding: 0.32em 0.85em;
  white-space: nowrap;
  background: hsl(30 15% 60% / 0.15); 
  color: hsl(30 20% 72% / 0.8); 
  border: 1px solid currentColor;
}

.tag:hover
{
  transform: scale(1.07) rotate(0deg) !important;
}

/* Tag color system — set --tag-color per tag, shared rule does the rest */
[class*="tag-"]
{
  --tag-color:  var(--muted);
  color:        var(--tag-color);
  background:   color-mix(in srgb, var(--tag-color) 10%, transparent);
  border-color: color-mix(in srgb, var(--tag-color) 25%, transparent);
}

.tag-art      { --tag-color: var(--purple); }
.tag-life     { --tag-color: var(--orange); }
.tag-build    { --tag-color: var(--blue);   }
.tag-game     { --tag-color: var(--blue);   }
.tag-gamedev  { --tag-color: var(--blue);   }
.tag-meta     { --tag-color: var(--muted);  }
.tag-book     { --tag-color: var(--orange); }
.tag-audio    { --tag-color: var(--blue);   }
.tag-podcast  { --tag-color: var(--purple); }
.tag-idea     { --tag-color: var(--muted);  }
.tag-active   { --tag-color: var(--orange); }
.tag-code     { --tag-color: var(--blue);   }
.tag-fun      { --tag-color: var(--orange); }
.tag-graphics { --tag-color: var(--blue);   }
.tag-design   { --tag-color: var(--purple); }
.tag-thoughts { --tag-color: var(--orange); }
.tag-craft    { --tag-color: var(--orange); }

/* --- writings page ---

/* --- Page masthead --- */
section.writings-hero
{
  background: var(--articles-bg);
  padding: 2.5rem var(--padding) 1.5rem;
  /* border-bottom: 1px solid var(--rule); */
}

section.writings-hero > div
{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: var(--max-width-desktop);
  margin-left: auto;
  margin-right: auto;
}

section.writings-hero h2
{
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 0.35rem;
}

section.writings-hero h2 em
{
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

section.writings-hero p
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Body wrapper ── */
.writings-body
{
  background: linear-gradient(to bottom, var(--articles-bg) 0%, var(--background) 60%);
  padding: 2rem 0 6rem;
}

/* All inner sections share the same horizontal gutter */
.writings-body #writings-hero,
.writings-body #writings-spotlight,
.writings-body nav.filter-by-tag
{
  max-width: var(--max-width-desktop);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
}

/* ── BENTO GRID ── */
.writings-hero-grid
{
  display: grid;
  grid-template-columns: 1fr 1.8fr 1fr;
  gap: 0.75rem;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: visible;
}

.writings-flank-col
{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: transparent;
}

article.writings-lead,
article.writings-flank
{
  background: var(--panel-bg-soft);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: none;
  margin: 0;
  padding: 0;
}

article.writings-flank
{
  flex: 1;
}

article.writings-lead:hover,
article.writings-flank:hover
{
  border-color: var(--panel-border-active);
  transform: translateY(-2px);
}

article.writings-lead>a,
article.writings-flank>a
{
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}


/* Images fill the top of each card */
article.writings-lead figure,
article.writings-flank figure
{
  width: 100%;
  overflow: hidden;
  /* background: var(--grad-warm); */
  flex-shrink: 0;
}

article.writings-lead figure         { aspect-ratio: 4 / 3; }
article.writings-flank figure        { aspect-ratio: 16 / 10; }


article.writings-lead figure img,
article.writings-flank figure img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

/* Text block below image */
article.writings-lead>a>div,
article.writings-flank>a>div
{
  padding: 1rem 1.1rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* meta row: tag pill + date */
.writings-meta
{
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Both lead and flank: meta pushed to bottom */
article.writings-lead .writings-meta,
article.writings-flank .writings-meta
{
  margin: auto 0 0;
  padding-top: 1rem;
}



/* Lead: "Latest" badge + date row */
article.writings-lead header
{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
}

/* latest badge */
article.writings-lead header strong
{
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  background: var(--grad);
  color: white;
  padding: 0.28em 0.75em;
}



article.writings-lead .read-more
{
  letter-spacing: 0.06em;
  margin-top: auto;
  padding-top: 1rem;
}

/* Lead headline */
article.writings-lead h2
{
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--tint);
  margin: 0 0 0.35rem;
}

/* Lead deck (hook) */
article.writings-lead p:not(.writings-meta)
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* Flank headline */
article.writings-flank h3
{
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.15;
  color: var(--tint);
  margin: 0 0 0.35rem;
}

/* Flank hook */
article.writings-flank p:not(.writings-meta)
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* ── BENTO RESPONSIVE ── */
@media (max-width: 860px)
{
  .writings-hero-grid
  {
    grid-template-columns: 1fr 1fr;
  }

  .writings-hero-grid article.writings-lead
  {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  article.writings-lead figure { aspect-ratio: 16 / 9; }
}

@media (max-width: 540px)
{
  .writings-hero-grid
  {
    grid-template-columns: 1fr;
  }

  .writings-hero-grid article.writings-lead { grid-column: auto; }

  article.writings-flank figure { aspect-ratio: 4 / 3; }
}

/* ── SPOTLIGHT STRIP ── */
.writings-spotlight
{
  border-top: 1px solid var(--rule);
  padding-top: 0;
  margin-top: 2.5rem;
}

.writings-spotlight>header
{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.25rem 0 1rem;
  gap: 1rem;
}

.writings-spotlight>header h4
{
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--muted);
}

/* The tag word is bold ink, not cream — legible on any background */
.writings-spotlight>header h4 em
{
  font-style: italic;
  font-weight: 900;
  color: var(--ink);
}

.writings-spotlight>header a.pill-ghost
{
  flex-shrink: 0;
}

ul.writings-spotlight-list
{
  list-style: none;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  margin-bottom: 2.5rem;
  scrollbar-width: none;
}

ul.writings-spotlight-list::-webkit-scrollbar { display: none; }

ul.writings-spotlight-list li
{
  flex: 0 0 230px;
}

ul.writings-spotlight-list li>a
{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s;
  height: 100%;
  background: var(--panel-bg-soft);
}

ul.writings-spotlight-list li>a:hover
{
  border-color: var(--orange);
}

ul.writings-spotlight-list li>a figure
{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  /* background: var(--grad-warm); */
  flex-shrink: 0;
}

ul.writings-spotlight-list li>a figure img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  margin: 0;
}

ul.writings-spotlight-list li>a div
{
  padding: 0.75rem 0.85rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

ul.writings-spotlight-list li>a h3
{
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  margin: 0;
}

/* ── TAG FILTER NAV ── */
nav.filter-by-tag
{
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  
  /* Overwrite default nav styling */
  padding: 0;
  border-bottom: none;
  justify-content: left;
}

.filter-by-tag-btn
{
  text-decoration: none;
  color: var(--muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-by-tag-btn.active
{
  background: var(--grad);
  border-color: white;
  color: white;
}

.writings-body nav.filter-by-tag
{
  /* margin-top: 2.5rem; */
  border-top: 1px solid var(--rule);
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}

/* ── ARCHIVE: centered column ── */
#writings-container,
#archive-container
{
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--padding);
  padding-right: var(--padding);
  margin-top: 2rem;
}

#filter-by-tag-see-all
{
  padding: 1.5rem 0 0.7rem;
  display: flex;
  justify-content: center;
}

section.writings-month
{
  margin-bottom: 2rem;
}

/* Month label with rules either side */
/* (reuses the shared rule from section.articles — no duplication needed) */

ul.writings-list
{
  list-style: none;
}

/* ── ARCHIVE ROW ── */
li.writings-row
{
  border-bottom: 1px solid var(--rule);
}

li.writings-row:last-child
{
  border-bottom: none;
}

/* Full-width link: square image left, text right */
a.writings-row-link
{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s;
}

a.writings-row-link:hover { opacity: 0.78; }



/* Square thumbnail */
a.writings-row-link figure
{
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  /* background: var(--grad-warm); */
  margin: 0;
}

a.writings-row-link figure img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
  display: block;
}

/* Text column: title → hook → meta */
.writings-row-text
{
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.writings-row-text h3
{
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
}

.writings-row-text p
{
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Meta row: date · tag — sits at the bottom of the text column */
.writings-row-meta
{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}

time.writings-row-date
{
  color: var(--muted);
  white-space: nowrap;
}

.writings-row-tag
{
  font-size: var(--text-xs);
  padding: 0.2em 0.65em;
  white-space: nowrap;
  cursor: default;
  pointer-events: none;
}

/* ── SECTION 3: ABOUT – cream ── */
section.about
{
  padding: 6rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  max-width: var(--max-width-main);
  margin-left: auto;
  margin-right: auto;
}

section.about header p
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

section.about h2
{
  font-size: clamp(2.5rem, 6vw, 4.2rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 1.5rem;
}

section.about h2 em
{
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
}

section.about p.bio
{
  font-style: italic;
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 2rem;
}

section.about nav
{
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  border: none;
}

section.about ul
{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

section.about ul li
{
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  transition: border-color 0.15s;
}

section.about ul li:hover
{
  border-color: var(--muted);
}

section.about ul li strong
{
  font-family: var(--font-serif-fancy);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
}

section.about ul li strong.grad-text
{
  font-size: 2.2rem;
}

section.about ul li span
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── TICKET COUNTER ── */
section.ticket
{
  border-top: none;
  padding: 10rem 2.5rem 4rem;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 1.25rem;
  touch-action: manipulation;
}

section.ticket *
{
  touch-action: manipulation;
}

/*
  HOW TO EDIT THE TEAR
  ─────────────────────────────────────────────────────────────────────────────
  ::before = main tear lines (6 of them). ::after = ghost copies shifted right.
  Together they create the chromatic aberration spread.

  Each line is controlled by three properties — same index must stay in sync:

    background-image    chunk pattern across the width (percentages = chunk edges)
                        color opacity: 66=~40%, 44=~27%, 33=~20%, 22=~13%
                        colors: red=#ff0033  blue=#0066ff  green=#00ff44

    background-size     "100% Npx" — N is the line thickness in pixels

    background-position "0 Npx" — N is distance from the top of .ticket-tear

  Quick tweaks:
    thicker line    → increase background-size height (e.g. 2px → 5px)
    move line       → change background-position Y
    brighter        → raise opacity hex (22 → 44 → 66 → 88)
    more spread     → increase translateX on ::after
    more lines      → add a gradient to all three lists (image, size, position)
    taller zone     → increase .ticket-tear height
  ─────────────────────────────────────────────────────────────────────────────
*/
.ticket-tear
{
  position: relative;
  height: 28px;  /* total height of the tear zone */
  overflow: visible;
  pointer-events: none;
  padding: 0 0 2rem;
}

.ticket-tear::before
{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 7%, #ff003366 7%, #ff003366 21%, transparent 21%, transparent 34%, #ff003366 34%, #ff003366 49%, transparent 49%, transparent 63%, #ff003366 63%, #ff003366 100%),  /* line 1 — red heavy */
    linear-gradient(90deg, #0066ff55 0%, #0066ff55 14%, transparent 14%, transparent 26%, #0066ff55 26%, #0066ff55 44%, transparent 44%, transparent 58%, #0066ff55 58%, #0066ff55 73%, transparent 73%, transparent 100%),  /* line 2 — blue dominant */
    linear-gradient(90deg, transparent 0%, transparent 9%, #00ff4433 9%, #00ff4433 31%, transparent 31%, transparent 47%, #ff003344 47%, #ff003344 62%, transparent 62%, transparent 78%, #00ff4433 78%, #00ff4433 100%),    /* line 3 — green + red */
    linear-gradient(90deg, #ff003355 0%, #ff003355 11%, transparent 11%, transparent 19%, #0066ff44 19%, #0066ff44 38%, transparent 38%, transparent 52%, #00ff4422 52%, #00ff4422 69%, transparent 69%, transparent 81%, #ff003355 81%, #ff003355 100%),  /* line 4 — full RGB */
    linear-gradient(90deg, transparent 0%, transparent 16%, #0066ff33 16%, #0066ff33 35%, transparent 35%, transparent 54%, #0066ff44 54%, #0066ff44 67%, transparent 67%, transparent 100%),                                /* line 5 — blue ghost */
    linear-gradient(90deg, #ff003322 0%, #ff003322 28%, transparent 28%, transparent 51%, #ff003333 51%, #ff003333 74%, transparent 74%, transparent 100%);                                                                  /* line 6 — dim red */
  background-size:
    100% 8px,  /* line 1 thickness */
    100% 6px,  /* line 2 thickness */
    100% 16px,  /* line 3 thickness */
    100% 8px,  /* line 4 thickness */
    100% 3px,  /* line 5 thickness */
    100% 6px;  /* line 6 thickness */
  background-position:
    0 0px,   /* line 1 Y */
    0 8%,   /* line 2 Y */
    0 14px,  /* line 3 Y */
    0 22px,  /* line 4 Y */
    0 26px,  /* line 5 Y */
    0 35px;  /* line 6 Y */
  background-repeat: no-repeat;
  filter: blur(0.3px);  /* slight softening — raise for glow, set 0 for sharp */
}

/* ghost layer — same structure as ::before but shifted right for aberration */
.ticket-tear::after
{
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 4%, #ff003333 4%, #ff003333 18%, transparent 18%, transparent 39%, #ff003333 39%, #ff003333 55%, transparent 55%, transparent 100%),
    linear-gradient(90deg, #0066ff22 0%, #0066ff22 22%, transparent 22%, transparent 41%, #0066ff33 41%, #0066ff33 60%, transparent 60%, transparent 77%, #0066ff22 77%, #0066ff22 100%),
    linear-gradient(90deg, transparent 0%, transparent 11%, #ff003322 11%, #ff003322 30%, transparent 30%, transparent 58%, #0066ff22 58%, #0066ff22 79%, transparent 79%, transparent 100%);
  background-size: 100% 2px, 100% 2px, 100% 2px;
  background-position: 0 3px, 0 9px, 0 18px;
  background-repeat: no-repeat;
  transform: translateX(4px);  /* ← increase this to widen the chromatic spread */
}

/* Invisible wrapper on desktop — children participate directly in section.ticket's flex row */
.ticket-inner
{
  display: contents;
}

.ticket-overline
{
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-size: var(--text-sm);
  color: var(--tc-dim, #3a7a3a);
  padding: 0.6em 0;
}

#ticket-fullscreen
{
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  font-size: var(--text-sm);
  color: var(--tc-dim, #3a7a3a);
  background: none;
  border: 2px solid var(--tc-dim, #3a7a3a);
  border-radius: 4px;
  padding: 0.6em 1.4em;
  cursor: pointer;
  touch-action: manipulation;
  transition: color 0.2s, border-color 0.2s;
}

#ticket-fullscreen:hover
{
  color: var(--tc, #00ff46);
  border-color: var(--tc, #00ff46);
}

/* When the section itself is the fullscreen element */
section.ticket:fullscreen
{
  background: #000;
  border-top: none;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

:root:not(.dark) section.ticket:fullscreen
{
  background: oklch(0.95 0.01 80);
}

section.ticket:fullscreen .ticket-inner
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem;
  transform: scale(var(--fs-scale, 1.2));
  transform-origin: center center;
}

section.ticket:fullscreen.portrait .ticket-inner
{
  flex-direction: column;
  align-items: center;
}

section.ticket:fullscreen.portrait .ticket-badge-row
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2rem;
}


.ticket-terminal
{
  position: relative;
  box-sizing: border-box;
  touch-action: manipulation;
  background: color-mix(in srgb, #000 calc(var(--glitch-dark, 0) * 100%), #0d0d0d);
  border: 1px solid var(--tc-dim, #1f4f1f);
  border-radius: 8px;
  padding: 2rem 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 500px;
  max-width: 100%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--tc, #00ff46) 6%, transparent);
  transition: border-color 0.6s, box-shadow 0.6s;
}

.ticket-label
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc-dim, #3a7a3a);
}

.ticket-counter-wrap
{
  display: flex;
  gap: 0.1em;
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 8vw, 4rem);
  font-weight: 700;
  color: var(--tc, #00ff46);
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--tc, #00ff46) 50%, transparent);
  align-items: center;
  transition: color 0.6s, text-shadow 0.6s;
}

.ticket-digit
{
  display: inline-block;
  width: 0.62em;
  height: 60px;
  overflow: hidden;
  position: relative;
  line-height: 60px;
}

.ticket-digit-inner
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: top 0.15s ease-out;
}

.ticket-digit-inner div
{
  height: 60px;
  line-height: 60px;
  text-align: center;
}

#ticket-btn > span
{
  pointer-events: none;
}

/* Ticket button */
#ticket-btn
{
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc, #00ff46);
  background: none;
  border: 1px solid var(--tc-dim, #1f6b1f);
  border-radius: 4px;
  padding: 1em 2em; 
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.6s;
}

#ticket-btn:hover:not(:disabled)
{
  background: color-mix(in srgb, var(--tc, #00ff46) 7%, transparent);
  border-color: var(--tc, #00ff46);
  box-shadow: 0 0 10px color-mix(in srgb, var(--tc, #00ff46) 15%, transparent);
}

#ticket-btn:disabled
{
  color: var(--tc-dim, #3a7a3a);
  border-color: var(--tc-dim, #1a3a1a);
  cursor: default;
}

#ticket-msg
{
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.1em;
  color: var(--tc, #00ff46);
  text-align: center;
  line-height: 1.5;
  min-height: 5em;
  visibility: hidden;
}

#ticket-msg.visible
{
  visibility: visible;
}

/* ── Prestige color palette — set on section so both columns inherit ── */
/* Global prestige — drives terminal + global flair */
section.ticket                         { --tc: oklch(0.87 0.22 145); --tc-dim: oklch(0.50 0.10 145); --tc-bg: oklch(0.22 0.05 145); }
section.ticket[data-prestige="1"]      { --tc: oklch(0.87 0.22 264); --tc-dim: oklch(0.50 0.10 264); --tc-bg: oklch(0.22 0.05 264); }
section.ticket[data-prestige="2"]      { --tc: oklch(0.87 0.22 55);  --tc-dim: oklch(0.50 0.10 55);  --tc-bg: oklch(0.22 0.05 55);  }
section.ticket[data-prestige="3"]      { --tc: oklch(0.87 0.22 95);  --tc-dim: oklch(0.50 0.10 95);  --tc-bg: oklch(0.22 0.05 95);  }
section.ticket[data-prestige="4"]      { --tc: oklch(0.87 0.22 25);  --tc-dim: oklch(0.50 0.10 25);  --tc-bg: oklch(0.22 0.05 25);  }
section.ticket[data-prestige="5"]      { --tc: oklch(0.87 0.22 285); --tc-dim: oklch(0.50 0.10 285); --tc-bg: oklch(0.22 0.05 285); }
section.ticket[data-prestige="6"]      { --tc: oklch(0.75 0.10 30);  --tc-dim: oklch(0.50 0.06 30);  --tc-bg: oklch(0.22 0.03 30);  }
section.ticket[data-prestige="7"]      { --tc: oklch(0.95 0.08 80);  --tc-dim: oklch(0.60 0.04 80);  --tc-bg: oklch(0.22 0.02 80);  }
section.ticket[data-prestige="8"]      { --tc: oklch(0.96 0.05 220); --tc-dim: oklch(0.62 0.03 220); --tc-bg: oklch(0.22 0.02 220); }
section.ticket[data-prestige="9"]      { --tc: oklch(0.97 0.02 220); --tc-dim: oklch(0.65 0.02 220); --tc-bg: oklch(0.22 0.01 220); }

/* Local prestige — drives personal flair wall only */
section.ticket                              { --lc: oklch(0.87 0.22 145); --lc-dim: oklch(0.40 0.10 145); --lc-bg: oklch(0.22 0.05 145); }
section.ticket[data-local-prestige="1"]     { --lc: oklch(0.87 0.22 264); --lc-dim: oklch(0.40 0.10 264); --lc-bg: oklch(0.22 0.05 264); }
section.ticket[data-local-prestige="2"]     { --lc: oklch(0.87 0.22 55);  --lc-dim: oklch(0.40 0.10 55);  --lc-bg: oklch(0.22 0.05 55);  }
section.ticket[data-local-prestige="3"]     { --lc: oklch(0.87 0.22 95);  --lc-dim: oklch(0.40 0.10 95);  --lc-bg: oklch(0.22 0.05 95);  }
section.ticket[data-local-prestige="4"]     { --lc: oklch(0.87 0.22 25);  --lc-dim: oklch(0.40 0.10 25);  --lc-bg: oklch(0.22 0.05 25);  }
section.ticket[data-local-prestige="5"]     { --lc: oklch(0.87 0.22 285); --lc-dim: oklch(0.40 0.10 285); --lc-bg: oklch(0.22 0.05 285); }
section.ticket[data-local-prestige="6"]     { --lc: oklch(0.75 0.10 30);  --lc-dim: oklch(0.40 0.06 30);  --lc-bg: oklch(0.22 0.03 30);  }
section.ticket[data-local-prestige="7"]     { --lc: oklch(0.95 0.08 80);  --lc-dim: oklch(0.50 0.04 80);  --lc-bg: oklch(0.22 0.02 80);  }
section.ticket[data-local-prestige="8"]     { --lc: oklch(0.96 0.05 220); --lc-dim: oklch(0.52 0.03 220); --lc-bg: oklch(0.22 0.02 220); }
section.ticket[data-local-prestige="9"]     { --lc: oklch(0.97 0.02 220); --lc-dim: oklch(0.55 0.02 220); --lc-bg: oklch(0.22 0.01 220); }

/* Light mode prestige palette — saturated ink on paper */
:root:not(.dark) section.ticket                         { --tc: oklch(0.35 0.18 145); --tc-dim: oklch(0.55 0.12 145); --tc-bg: oklch(0.93 0.04 145); }
:root:not(.dark) section.ticket[data-prestige="1"]      { --tc: oklch(0.35 0.18 264); --tc-dim: oklch(0.55 0.12 264); --tc-bg: oklch(0.93 0.04 264); }
:root:not(.dark) section.ticket[data-prestige="2"]      { --tc: oklch(0.38 0.18 55);  --tc-dim: oklch(0.55 0.12 55);  --tc-bg: oklch(0.93 0.04 55);  }
:root:not(.dark) section.ticket[data-prestige="3"]      { --tc: oklch(0.40 0.16 95);  --tc-dim: oklch(0.55 0.10 95);  --tc-bg: oklch(0.93 0.04 95);  }
:root:not(.dark) section.ticket[data-prestige="4"]      { --tc: oklch(0.38 0.18 25);  --tc-dim: oklch(0.55 0.12 25);  --tc-bg: oklch(0.93 0.04 25);  }
:root:not(.dark) section.ticket[data-prestige="5"]      { --tc: oklch(0.38 0.18 285); --tc-dim: oklch(0.55 0.12 285); --tc-bg: oklch(0.93 0.04 285); }
:root:not(.dark) section.ticket[data-prestige="6"]      { --tc: oklch(0.40 0.08 30);  --tc-dim: oklch(0.55 0.06 30);  --tc-bg: oklch(0.93 0.03 30);  }
:root:not(.dark) section.ticket[data-prestige="7"]      { --tc: oklch(0.30 0.06 80);  --tc-dim: oklch(0.55 0.04 80);  --tc-bg: oklch(0.93 0.02 80);  }
:root:not(.dark) section.ticket[data-prestige="8"]      { --tc: oklch(0.30 0.04 220); --tc-dim: oklch(0.55 0.03 220); --tc-bg: oklch(0.93 0.02 220); }
:root:not(.dark) section.ticket[data-prestige="9"]      { --tc: oklch(0.25 0.02 220); --tc-dim: oklch(0.50 0.02 220); --tc-bg: oklch(0.93 0.01 220); }

:root:not(.dark) section.ticket                              { --lc: oklch(0.35 0.18 145); --lc-dim: oklch(0.55 0.12 145); --lc-bg: oklch(0.93 0.04 145); }
:root:not(.dark) section.ticket[data-local-prestige="1"]     { --lc: oklch(0.35 0.18 264); --lc-dim: oklch(0.55 0.12 264); --lc-bg: oklch(0.93 0.04 264); }
:root:not(.dark) section.ticket[data-local-prestige="2"]     { --lc: oklch(0.38 0.18 55);  --lc-dim: oklch(0.55 0.12 55);  --lc-bg: oklch(0.93 0.04 55);  }
:root:not(.dark) section.ticket[data-local-prestige="3"]     { --lc: oklch(0.40 0.16 95);  --lc-dim: oklch(0.55 0.10 95);  --lc-bg: oklch(0.93 0.04 95);  }
:root:not(.dark) section.ticket[data-local-prestige="4"]     { --lc: oklch(0.38 0.18 25);  --lc-dim: oklch(0.55 0.12 25);  --lc-bg: oklch(0.93 0.04 25);  }
:root:not(.dark) section.ticket[data-local-prestige="5"]     { --lc: oklch(0.38 0.18 285); --lc-dim: oklch(0.55 0.12 285); --lc-bg: oklch(0.93 0.04 285); }
:root:not(.dark) section.ticket[data-local-prestige="6"]     { --lc: oklch(0.40 0.08 30);  --lc-dim: oklch(0.55 0.06 30);  --lc-bg: oklch(0.93 0.03 30);  }
:root:not(.dark) section.ticket[data-local-prestige="7"]     { --lc: oklch(0.30 0.06 80);  --lc-dim: oklch(0.55 0.04 80);  --lc-bg: oklch(0.93 0.02 80);  }
:root:not(.dark) section.ticket[data-local-prestige="8"]     { --lc: oklch(0.30 0.04 220); --lc-dim: oklch(0.55 0.03 220); --lc-bg: oklch(0.93 0.02 220); }
:root:not(.dark) section.ticket[data-local-prestige="9"]     { --lc: oklch(0.25 0.02 220); --lc-dim: oklch(0.50 0.02 220); --lc-bg: oklch(0.93 0.01 220); }

/* ── Badge row ── */
/* On desktop: display:contents makes children participate directly in section.ticket's
   flex row, restoring the original prestige | terminal | personal three-column layout. */
.ticket-badge-row
{
  display: contents;
}

.ticket-prestige
{
  order: -1;
}

.ticket-spacer
{
  order: -2;
  width: 120px;
  flex-shrink: 0;
}

.ticket-prestige,
.ticket-personal,
.ticket-lucky
{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 120px;
  flex-shrink: 0;
}

.ticket-prestige-label
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tc-dim, #54af54);
  flex-shrink: 0;
}

.ticket-flair-wall
{
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
}

.ticket-flair
{
  display: inline-block;
  position: relative;
  font-size: 0.75rem;
  color: var(--tc, #00ff46);
  background: var(--tc-bg, #0d1f0d);
  border: 1px solid var(--tc-dim, #1f4f1f);
  border-radius: 4px;
  padding: 0.3em 0.75em;
  white-space: nowrap;
  user-select: none;
  cursor: default;
}

.ticket-tooltip
{
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a1a;
  color: #e8e8e8;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 0.5em 1em;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: none;
  min-width: 120px;
  max-width: min(280px, 70vw);
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.ticket-flair:hover,
.ticket-flair.tooltip-visible
{
  z-index: 10;
}

.ticket-flair:hover .ticket-tooltip,
.ticket-flair.tooltip-visible .ticket-tooltip
{
  opacity: 1;
}

.ticket-flair:nth-child(odd)  { transform: rotate(-2deg); --badge-rotate: -2deg; }
.ticket-flair:nth-child(even) { transform: rotate(1.5deg); --badge-rotate: 1.5deg; }

/* Personal flair uses local prestige color track */
.ticket-flair-personal
{
  color: var(--lc, #00ff46);
  background: var(--lc-bg, #0d1f0d);
  border-color: var(--lc-dim, #1f4f1f);
}

.ticket-badge-hidden
{
  display: none !important;
}

.ticket-drawer-toggle
{
  display: block;
  margin: 0.25rem auto 0;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tc-dim, #1f4f1f);
  cursor: pointer;
  padding: 0.25em 0;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.ticket-drawer-toggle:hover
{
  opacity: 1;
}

/* Lucky badges — pill shape, gold, emoji only */
.ticket-flair-lucky
{
  border-radius: 999px;
  color: #ffd700;
  background: oklch(0.18 0.04 80);
  border-color: oklch(0.40 0.08 80);
  font-size: 1rem;
  padding: 0.3em 0.6em;
  letter-spacing: 0;
}

@keyframes badge-pop
{
  0%   { transform: rotate(var(--badge-rotate, -2deg)) scale(0.5); opacity: 0; }
  60%  { transform: rotate(var(--badge-rotate, -2deg)) scale(1.15); opacity: 1; }
  100% { transform: rotate(var(--badge-rotate, -2deg)) scale(1); }
}

.ticket-flair-new
{
  animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rollover-flash
{
  0%   { text-shadow: 0 0 12px color-mix(in srgb, var(--tc, #00ff46) 50%, transparent); }
  30%  { text-shadow: 0 0 40px var(--tc, #00ff46), 0 0 80px color-mix(in srgb, var(--tc, #00ff46) 60%, transparent); }
  100% { text-shadow: 0 0 12px color-mix(in srgb, var(--tc, #00ff46) 50%, transparent); }
}

.ticket-counter-wrap.rollover
{
  animation: rollover-flash 0.6s ease-out;
}

@keyframes lucky-flash
{
  0%   { color: var(--tc); text-shadow: none; }
  15%  { color: #ffd700; text-shadow: 0 0 20px #ffd700, 0 0 50px #ffd700aa; }
  70%  { color: #ffd700; text-shadow: 0 0 14px #ffd700, 0 0 30px #ffd70066; }
  100% { color: var(--tc); text-shadow: none; }
}

@keyframes lucky-flash-border
{
  0%   { border-color: var(--tc-dim); box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 6%, transparent); }
  15%  { border-color: #ffd700; box-shadow: 0 0 40px #ffd70066, 0 0 80px #ffd70033; }
  70%  { border-color: #ffd700aa; box-shadow: 0 0 28px #ffd70044; }
  100% { border-color: var(--tc-dim); box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 6%, transparent); }
}

.ticket-terminal.lucky-flash::after
{
  animation: lucky-flash-border 2s ease-out forwards;
}

@keyframes lucky-flash-btn
{
  0%   { color: var(--tc); border-color: var(--tc-dim); }
  15%  { color: #ffd700; border-color: #ffd700; text-shadow: 0 0 20px #ffd700, 0 0 50px #ffd700aa; }
  70%  { color: #ffd700; border-color: #ffd700aa; text-shadow: 0 0 14px #ffd700, 0 0 30px #ffd70066; }
  100% { color: var(--tc); border-color: var(--tc-dim); text-shadow: none; }
}

.ticket-terminal.lucky-flash .ticket-digit-inner,
.ticket-terminal.lucky-flash .ticket-label,
.ticket-terminal.lucky-flash #ticket-msg
{
  animation: lucky-flash 2s ease-out forwards;
}

.ticket-terminal.lucky-flash #ticket-btn
{
  animation: lucky-flash-btn 2s ease-out forwards;
}


/* ── Multiplier stamp ────────────────────────────────────────────────────── */

.ticket-cps-bar
{
  position: absolute;
  top: 0.6rem;
  right: 4rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.ticket-cps-bar.bar-revealed
{
  opacity: 1;
}

/* Segment colors — unlit always dim, lit takes tier color */
.ticket-cps-bar span { color: var(--tc-dim); transition: color 80ms; }
.ticket-cps-bar span.lit[data-seg="amber"]  { color: oklch(0.80 0.18 70); }
.ticket-cps-bar span.lit[data-seg="green"]  { color: oklch(0.92 0.28 145); }
.ticket-cps-bar span.lit[data-seg="purple"] { color: oklch(0.82 0.20 285); }
.ticket-cps-bar span.lit[data-seg="cyan"]   { color: oklch(0.88 0.18 200); }
.ticket-cps-bar span.lit[data-seg="red"]    { color: oklch(0.70 0.22 25); }

.ticket-mult-stamp
{
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25em 0.5em;
  border-radius: 4px;
  border: 1px solid;
  --badge-rotate: 3deg;
  transform: rotate(var(--badge-rotate));
  pointer-events: none;
  user-select: none;
}

.ticket-mult-stamp.stamp-pop
{
  animation: badge-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stamp tier colors */
.ticket-mult-stamp[data-tier="amber"]
{
  color: oklch(0.80 0.18 70);
  background: oklch(0.18 0.06 70);
  border-color: oklch(0.45 0.12 70);
}

.ticket-mult-stamp[data-tier="green"]
{
  color: oklch(0.92 0.28 145);
  background: oklch(0.16 0.07 145);
  border-color: oklch(0.55 0.18 145);
}

.ticket-mult-stamp[data-tier="purple"]
{
  color: oklch(0.82 0.20 285);
  background: oklch(0.18 0.06 285);
  border-color: oklch(0.45 0.12 285);
}

.ticket-mult-stamp[data-tier="cyan"]
{
  color: oklch(0.88 0.18 200);
  background: oklch(0.18 0.06 200);
  border-color: oklch(0.50 0.14 200);
}

/* ── Groove / streak heartbeat ───────────────────────────────────────────── */

@keyframes groove-pulse
{
  0%, 100% { box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 6%, transparent); }
  50%      { box-shadow: 0 0 44px color-mix(in srgb, var(--tc) 20%, transparent); }
}

@keyframes purple-pulse
{
  0%, 100% { box-shadow: 0 0 24px oklch(0.45 0.12 285 / 0.15); }
  50%      { box-shadow: 0 0 52px oklch(0.45 0.12 285 / 0.45), 0 0 20px oklch(0.82 0.20 285 / 0.2); }
}

/* Starpower */
@keyframes cyan-pulse
{
  /* radial flash at peak — wide spread simulates energy expanding from a point source */
  0%, 100% { box-shadow: 0 0 32px oklch(0.50 0.14 200 / 0.35), 0 0 12px oklch(0.88 0.18 200 / 0.15); }
  40%, 60% { box-shadow: 0 0 120px oklch(0.50 0.14 200 / 0.45), 0 0 40px oklch(0.88 0.18 200 / 0.45), 0 0 8px oklch(0.97 0.02 200 / 0.9); }
}

@keyframes cyan-arc-border
{
  /* white-hot double flash — border goes near-white at arc peaks, hard cuts only */
  0%, 100% { border-color: var(--tc-dim); }
  7%       { border-color: oklch(0.96 0.04 200); }
  14%      { border-color: var(--tc-dim); }
  21%      { border-color: oklch(0.96 0.04 200); }
  28%      { border-color: var(--tc-dim); }
}

/* Streak glow lives on ::before, lucky flash on ::after — both isolated from JS-driven terminal animations */
.ticket-terminal::before,
.ticket-terminal::after
{
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="amber"]:not([hidden]))
{
  --flicker-color: oklch(0.80 0.18 70);
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="green"]:not([hidden]))
{
  --flicker-color: oklch(0.92 0.28 145);
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="purple"]:not([hidden]))
{
  --flicker-color: oklch(0.82 0.20 285);
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="cyan"]:not([hidden]))
{
  --flicker-color: oklch(0.88 0.18 200);
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="amber"]:not([hidden]))::before
{
  animation: amber-groove 1.4s ease-in-out infinite;
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="green"]:not([hidden]))::before
{
  animation: groove-pulse 1.4s ease-in-out infinite;
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="purple"]:not([hidden]))::before
{
  animation: purple-pulse 0.9s ease-in-out infinite;
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="cyan"]:not([hidden]))::before
{
  animation: cyan-pulse 0.7s ease-in-out infinite;
}

.ticket-terminal:has(.ticket-mult-stamp[data-tier="cyan"]:not([hidden]))
{
  animation: screen-tear 0.8s steps(1) infinite, cyan-arc-border 1.6s steps(1) infinite;
}

@keyframes amber-groove
{
  0%, 100% { box-shadow: 0 0 24px oklch(0.45 0.12 70 / 0.2); }
  50%      { box-shadow: 0 0 44px oklch(0.45 0.12 70 / 0.5), 0 0 16px oklch(0.80 0.18 70 / 0.2); }
}

/* Light mode stamp overrides */
:root:not(.dark) .ticket-mult-stamp[data-tier="amber"]
{
  color: oklch(0.40 0.16 70);
  background: oklch(0.93 0.04 70);
  border-color: oklch(0.60 0.12 70);
}

:root:not(.dark) .ticket-mult-stamp[data-tier="green"]
{
  color: oklch(0.30 0.22 145);
  background: oklch(0.93 0.05 145);
  border-color: oklch(0.50 0.18 145);
}

:root:not(.dark) .ticket-mult-stamp[data-tier="purple"]
{
  color: oklch(0.38 0.18 285);
  background: oklch(0.93 0.04 285);
  border-color: oklch(0.55 0.12 285);
}

:root:not(.dark) .ticket-mult-stamp[data-tier="cyan"]
{
  color: oklch(0.35 0.16 200);
  background: oklch(0.93 0.04 200);
  border-color: oklch(0.55 0.12 200);
}

/* Light mode VU meter segment colors */
:root:not(.dark) .ticket-cps-bar span.lit[data-seg="amber"]  { color: oklch(0.50 0.16 70); }
:root:not(.dark) .ticket-cps-bar span.lit[data-seg="green"]  { color: oklch(0.40 0.22 145); }
:root:not(.dark) .ticket-cps-bar span.lit[data-seg="purple"] { color: oklch(0.45 0.18 285); }
:root:not(.dark) .ticket-cps-bar span.lit[data-seg="cyan"]   { color: oklch(0.40 0.16 200); }
:root:not(.dark) .ticket-cps-bar span.lit[data-seg="red"]    { color: oklch(0.45 0.20 25); }

@keyframes overload-flicker
{
  0%   { border-color: var(--tc-dim); }
  20%  { border-color: var(--flicker-color, #ff3b3b); box-shadow: 0 0 32px color-mix(in srgb, var(--flicker-color, #ff3b3b) 33%, transparent); }
  40%  { border-color: var(--tc-dim); }
  60%  { border-color: var(--flicker-color, #ff3b3b); box-shadow: 0 0 24px color-mix(in srgb, var(--flicker-color, #ff3b3b) 27%, transparent); }
  80%  { border-color: var(--tc-dim); }
  100% { border-color: var(--flicker-color, #ff3b3b); box-shadow: 0 0 40px color-mix(in srgb, var(--flicker-color, #ff3b3b) 40%, transparent); }
}

.ticket-terminal.overloaded
{
  animation: overload-flicker 0.4s ease-in-out infinite;
}

.ticket-terminal.overloaded #ticket-btn
{
  color: #ff3b3b;
  border-color: #ff3b3b88;
}

@keyframes screen-tear
{
  0%   { transform: translateX(0)    skewX(0deg);    }
  7%   { transform: translateX(-5px) skewX(-0.4deg); }
  8%   { transform: translateX(4px)  skewX(0.3deg);  }
  9%   { transform: translateX(0)    skewX(0deg);    }
  43%  { transform: translateX(0)    skewX(0deg);    }
  44%  { transform: translateX(7px)  skewX(0.5deg);  }
  45%  { transform: translateX(-3px) skewX(-0.2deg); }
  46%  { transform: translateX(0)    skewX(0deg);    }
  100% { transform: translateX(0)    skewX(0deg);    }
}

.ticket-terminal.overloaded
{
  animation: overload-flicker 0.4s ease-in-out infinite, screen-tear 0.6s steps(1) infinite;
}

/* ── TICKET LIGHT MODE GLITCH — ink pressure / paper jam aesthetic ── */
@keyframes ink-pressure
{
  0%   { border-color: oklch(0.70 0.04 80); box-shadow: 0 2px 8px oklch(0.60 0.04 80 / 0.12); }
  20%  { border-color: oklch(0.45 0.22 25); box-shadow: 0 0 0 2px oklch(0.45 0.22 25), 0 2px 16px oklch(0.45 0.22 25 / 0.25); }
  40%  { border-color: oklch(0.70 0.04 80); box-shadow: 0 2px 8px oklch(0.60 0.04 80 / 0.12); }
  60%  { border-color: oklch(0.45 0.22 25); box-shadow: 0 0 0 2px oklch(0.45 0.22 25), 0 2px 12px oklch(0.45 0.22 25 / 0.20); }
  80%  { border-color: oklch(0.70 0.04 80); box-shadow: 0 2px 8px oklch(0.60 0.04 80 / 0.12); }
  100% { border-color: oklch(0.45 0.22 25); box-shadow: 0 0 0 3px oklch(0.45 0.22 25), 0 2px 20px oklch(0.45 0.22 25 / 0.30); }
}

@keyframes paper-jam
{
  0%   { transform: translateX(0)    skewX(0deg);     }
  7%   { transform: translateX(-4px) skewX(0.5deg);   }
  8%   { transform: translateX(3px)  skewX(-0.3deg);  }
  9%   { transform: translateX(0)    skewX(0deg);     }
  43%  { transform: translateX(0)    skewY(0deg);     }
  44%  { transform: translateX(5px)  skewY(0.4deg);   }
  45%  { transform: translateX(-2px) skewY(-0.2deg);  }
  46%  { transform: translateX(0)    skewY(0deg);     }
  100% { transform: translateX(0)    skewX(0deg);     }
}

:root:not(.dark) .ticket-terminal.overloaded
{
  animation: ink-pressure 0.4s ease-in-out infinite, paper-jam 0.7s steps(1) infinite;
}

:root:not(.dark) .ticket-terminal.overloaded #ticket-btn
{
  color: oklch(0.45 0.22 25);
  border-color: oklch(0.45 0.22 25);
  font-weight: 900;
}

/* Lucky flash — light mode: tuned gold glow on cream */
@keyframes lucky-flash-light
{
  0%   { color: var(--tc); text-shadow: none; }
  15%  { color: #a07800; text-shadow: 0 0 6px #c8a000cc, 0 2px 14px #c8a00066; }
  70%  { color: #a07800; text-shadow: 0 0 4px #c8a000aa, 0 2px 10px #c8a00044; }
  100% { color: var(--tc); text-shadow: none; }
}

@keyframes lucky-flash-border-light
{
  0%   { border-color: oklch(0.70 0.04 80); box-shadow: 0 2px 8px oklch(0.60 0.04 80 / 0.12); }
  15%  { border-color: #a07800; box-shadow: 0 0 0 2px #c8a000bb, 0 4px 18px #c8a00044; }
  70%  { border-color: #a0780088; box-shadow: 0 0 0 1px #c8a00077, 0 4px 12px #c8a00022; }
  100% { border-color: oklch(0.70 0.04 80); box-shadow: 0 2px 8px oklch(0.60 0.04 80 / 0.12); }
}

@keyframes lucky-flash-btn-light
{
  0%   { color: var(--tc); border-color: var(--tc-dim); text-shadow: none; }
  15%  { color: #a07800; border-color: #a07800; text-shadow: 0 0 6px #c8a000cc, 0 2px 14px #c8a00066; }
  70%  { color: #a07800; border-color: #a0780088; text-shadow: 0 0 4px #c8a000aa, 0 2px 10px #c8a00044; }
  100% { color: var(--tc); border-color: var(--tc-dim); text-shadow: none; }
}

:root:not(.dark) .ticket-terminal.lucky-flash::after
{
  animation: lucky-flash-border-light 2s ease-out forwards;
}

:root:not(.dark) .ticket-terminal.lucky-flash .ticket-digit-inner,
:root:not(.dark) .ticket-terminal.lucky-flash .ticket-label,
:root:not(.dark) .ticket-terminal.lucky-flash #ticket-msg
{
  animation: lucky-flash-light 2s ease-out forwards;
}

:root:not(.dark) .ticket-terminal.lucky-flash #ticket-btn
{
  animation: lucky-flash-btn-light 2s ease-out forwards;
}

/* ── TICKET LIGHT MODE — paper ticket aesthetic ── */
:root:not(.dark) .ticket-terminal
{
  background: color-mix(in srgb, var(--tc, oklch(0.35 0.18 145)) calc(var(--glitch-dark, 0) * 40%), oklch(0.97 0.01 80));
  border-color: oklch(0.70 0.04 80);
  box-shadow: 0 2px 12px oklch(0.60 0.04 80 / 0.15), inset 0 0 0 1px oklch(0.88 0.02 80);
}

:root:not(.dark) .ticket-label,
:root:not(.dark) .ticket-prestige-label
{
  color: oklch(0.45 0.04 80);
}

:root:not(.dark) .ticket-counter-wrap
{
  text-shadow: none;
}

:root:not(.dark) #ticket-msg
{
  color: var(--tc, oklch(0.35 0.18 145));
}

:root:not(.dark) #ticket-btn
{
  color: var(--tc, oklch(0.35 0.18 145));
  border-color: var(--tc-dim, oklch(0.55 0.12 145));
}

:root:not(.dark) #ticket-btn:hover:not(:disabled)
{
  background: color-mix(in srgb, var(--tc, oklch(0.35 0.18 145)) 8%, transparent);
  border-color: var(--tc, oklch(0.35 0.18 145));
  box-shadow: none;
}

:root:not(.dark) #ticket-fullscreen,
:root:not(.dark) .ticket-overline
{
  color: var(--muted);
  border-color: var(--muted);
}

:root:not(.dark) #ticket-fullscreen:hover
{
  color: var(--tc, oklch(0.35 0.18 145));
  border-color: var(--tc, oklch(0.35 0.18 145));
}

:root:not(.dark) .ticket-tooltip
{
  background: oklch(0.97 0.01 80);
  color: oklch(0.20 0.02 80);
  border-color: oklch(0.75 0.03 80);
}

/* Lucky badges on paper — gold ink on warm white */
:root:not(.dark) .ticket-flair-lucky
{
  color: oklch(0.42 0.12 80);
  background: oklch(0.94 0.04 80);
  border-color: oklch(0.65 0.08 80);
}

/* ── TICKET MOBILE ── */
@media (max-width: 900px)
{
  section.ticket
  {
    flex-direction: column;
    align-items: center;
    padding: 7rem var(--padding-mobile) 3rem;
    gap: 1.5rem;
  }

  .ticket-overline
  {
    left: var(--padding-mobile);
  }

  /* Restore badge-row as a real flex container so prestige + personal sit side by side */
  .ticket-badge-row
  {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
  }

  .ticket-prestige
  {
    order: 0; /* reset desktop order override */
  }

  .ticket-prestige,
  .ticket-personal,
  .ticket-lucky
  {
    flex: 1;
    width: auto;
  }

  .ticket-spacer { display: none; }

  .ticket-tooltip
  {
    min-width: 80px;
    max-width: min(200px, 60vw);
  }
}

/* ── FOOTER ── */
footer
{
  padding: 1.5rem 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

footer p
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

footer a
{
  color: var(--text-nav);
}

footer a:hover
{
  text-decoration: underline;
  color: var(--accent-orange);
}

/* Apply to containers or text elements where wrapping is needed */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
div
{
  word-wrap: break-word;
  /* legacy */
  overflow-wrap: break-word;
  /* modern */
}

article img,
article video
{
  display: block;

  /* Uncomment this section to expand images beyond text like reader view in safari */
  /* max-width: var(--max-width-main);
  width: var(--max-width-main);
  margin-left: calc((var(--max-width-main) - 100%) / 2 * -1);
  margin-right: calc((var(--max-width-main) - 100%) / 2 * -1); */

  /* Use this section for classic width */
  max-width: var(--max-width-main);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* --------------- SIGNATURE ---------------- */

.signature
{
  font-family: 'Bastliga-One';
  font-size: 3rem;
  margin: 0;
}

.signature-large
{
  font-family: 'Bastliga-One';
  font-weight: normal;
  font-size: 6rem;
  margin: 0;
}

/* ------------------- GRADIENT UTILITIES ------------------- */

.grad-text
{
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pill-grad
{
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.65em 1.5em;
  border: 2px solid white;
  background: var(--grad);
  color: white;
  text-decoration: none;
  /* cursor: pointer; */
  transition: opacity 0.15s, transform 0.12s;
}

.pill-grad:hover
{
  opacity: 0.88;
  transform: translateY(-2px);
}

.pill-ink
{
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.65em 1.5em;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.12s;
}

.pill-ink:hover
{
  background: var(--surface-dark);
  color: var(--cream);
  transform: translateY(-2px);
}


/* --- ABOUT PAGE --- */

.about {
  /* max-width: var(--max-width-article); */
  margin: 0 auto;
  padding: 0 2rem 6rem;
}

.about section {
  margin-top: 3.5rem;
  max-width: var(--max-width-article);
}

.about section > h2 {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

.about section > h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* blockquote reset — global rule pollutes section.quotes */
.about section.quotes li blockquote {
  border-left: none;
  background: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font-style: normal;
}

.about section.quotes li blockquote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 0.7rem;
}

.about section.quotes li blockquote cite {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: normal;
}

/* building h3s need 900 explicitly since global h2/h3 weight may vary */
.about section.building li h3 {
  font-weight: 900;
  color: var(--cream);
}

.about .section-subtitle {
  font-style: italic;
  font-size: var(--text-md);
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.about section.gear ul li p
{
  max-width: 250px;
}


/* ------------------- MOBILE MENU ------------------- */
/* Soap bubble V2 */
.mobile-menu
{
  position: fixed;
  inset: 0;
  top: 0;
  left: 0;
  /* height: 100vh;
  width: 100vw; */

  background-image: var(--background-mobile-menu);
  background-blend-mode: screen;
  background-size: 100% 100%;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s ease;
}

.menu-button
{
  display: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  z-index: 1001;
}

.menu-button svg
{
  width: 100%;
  height: 100%;
}

.menu-button line
{
  stroke: var(--text);
}

#closeIcon
{
  display: none;
}

#closeIcon line
{
  stroke: var(--closeButton-mobile-menu);
}

.menu-button circle
{
  fill: var(--button-background-mobile-menu);
}

.mobile-menu svg,
.mobile-menu .dark-toggle-btn
{
  display: flex;
  flex-shrink: 1;
  width: 36px;
  height: 36px;
  max-width: 36px;
  min-width: 24px;
  max-height: 36px;
  min-height: 24px;
  /* color: rgba(255, 255, 255, 0.62); */
}



/* --- POSTS! --- */

#post-grid-container
{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 800px;
  margin: 0;
}

.post-grid
{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}

#post-row-container
{
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
}

.post-row
{
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 150px;
}

.post-row img
{
  width: 150px;
  height: auto;
  max-height: 150px;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 4px;
  display: block;
}

.post-text
{
  flex: 1;
  /* Experimenting with card-style layout */
  /* padding: 0 1rem 1rem 1rem; */
}

.post-text h2
{
  margin: 0 0 0.3rem 0;
}

.post-text a
{
  color: var(--text);
}

.post-text a:hover
{
  color: var(--muted-gray);
}

.post-text p,
small
{
  margin: 0.7rem 0;
  padding: 0;
}

.post-text small
{
  font-size: var(--text-sm);
  color: var(--post-meta-color);
  text-transform: uppercase;
  font-style: normal;
  letter-spacing: 0.08em;
  margin-top: 9px;
  display: block;
}

.post-card img
{
  width: 100%;
  display: block;
  object-fit: cover;
  /* height: 160px; */
  max-height: 300px;
  margin-bottom: .8rem;

  /* Play with this if going for card-style layout */
  /* border-radius: var(--border-radius) var(--border-radius) 0px 0px; */
}

.post-nav
{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin: 3rem auto 0;
  padding: 1rem;
  border-top: 1px solid var(--post-nav-rule);
  border-bottom: none;
  text-align: center;
  max-width: var(--max-width-article);
}

.post-nav-prev
{
  text-align: left;
}

.post-nav-random
{
  text-align: center;
}

.post-nav-next
{
  text-align: right;
}

/* bottom of post links */
.post-nav a
{
  /* color: var(--muted-gray); */
  font-size: var(--text-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.post-date-author
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--caption-warm);
}

.post-breadcrumbs
{
  color: var(--muted-gray);
  padding: 1rem 0;
  /* Add this margin if coloring the main content! */
  /* margin: 0 0 1rem 0; */
  font-size: 0.9em;
}

.post-breadcrumbs a
{
  font-weight: bold;
  color: var(--muted-gray);
}

.post-breadcrumbs a:hover
{
  text-decoration: underline;

}



.date-divider
{
  display: flex;
  align-items: center;
  width: 100%;
}

.date-divider hr
{
  flex: 1;
  border: none;
  margin: 0;
}

/* --- July 2025 --- */
.date-divider-label
{
  margin: 0 1.5rem;
}

.post-divider
{
  margin: 0;
}



/* --- STARFIELD PROJECT (javascript canvas w/ stars on it --- */
#starfield
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}


/* --- MOBILE SETTINGS --- */

@media (max-width: 680px)
{
  section.intro h2 span:last-of-type
  {
    margin-top: clamp(0.3em, calc(0.3em + (680px - 100vw) * 0.003), 1em);
  }
}

/* @media (max-width: 738px) */
@media (max-width: 738px)
{
  nav
  {
    padding: 0 var(--padding-mobile);
  }

  nav a
  {
    text-decoration: none;
    padding: 0.7rem 0;
    border-radius: none;
    transition: none;
  }

  nav a:hover
  {
    background: none;
    color: var(--ink);
  }

  section.intro
  {
    padding: 0;
  }

  section.intro>div
  {
    padding: var(--padding-mobile);
    margin: 0;
  }

  section.about
  {
    padding: 4rem var(--padding-mobile);
  }

  section.articles
  {
    padding: 4rem 0;
  }

  section.articles>header,
  section.articles>#articles-container
  {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }
  
  header.article-header
  {
    padding: 2rem var(--padding-mobile) 0rem;
  }

  .about
  {
    padding: 0 var(--padding-mobile) var(--padding-mobile);
  }
  
  header.about-hero
  {
    padding: 3rem 0 2rem;
  }
  
  article
  {
    padding: var(--padding-mobile);
  }

  article.featured
  {
    grid-template-columns: 1fr;
    grid-template-rows: 200px auto;
  }

  article.featured>div,
  article.featured>a>div
  {
    padding: 1.25rem 1.5rem;
    gap: 0.7rem;
  }

  article.featured h3
  {
    font-size: 1.3rem;
    margin-bottom: 0.4rem;
    margin-top: 0;
  }

  article.featured p
  {
    margin-bottom: 0.75rem;
  }

  ul.post-rows p,
  ul.post-rows .tag
  {
    display: none;
  }

  ul.post-rows li a
  {
    gap: 0.75rem;
  }

  section.intro ul.tags
  {
    overflow: visible;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    position: static;
  }

  section.intro ul.tags li
  {
    position: static;
    transform: none !important;
  }

  section.intro ul.tags li:nth-child(odd)  { transform: rotate(-1.5deg) !important; }
  section.intro ul.tags li:nth-child(even) { transform: rotate(1.5deg)  !important; }

  section.about
  {
    grid-template-columns: 1fr;
  }

  .post-nav
  {
    margin: 1rem var(--padding-mobile) 0;
  }

  section.writings-hero
  {
    padding: 1.5rem var(--padding-mobile) 0;
  }

  .writings-body
  {
    padding: 1.5rem 0 4rem;
  }

  .writings-body #writings-hero,
  .writings-body #writings-spotlight,
  .writings-body nav.filter-by-tag
  {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }

  #writings-container
  {
    padding-left: var(--padding-mobile);
    padding-right: var(--padding-mobile);
  }

  footer
  {
    /* Remove that bottom padding */
    padding: var(--padding-mobile);
    border: none;
  }

  .signature-large
  {
    font-size: 4rem;
  }

  /* ----------- NAVIGATION ----------- */
  .nav-links
  {
    display: none;
  }

  .menu-button
  {
    display: block;
  }

  .mobile-menu.show
  {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu .menu-animatable
  {
    color: var(--text-mobile-menu);
    transform: translateX(50px);
    opacity: 0;
    font-size: 1.5rem;
    /* letter-spacing: normal; */
    margin: 0.7rem 0;
    font-weight: bold;
  }

  .dark-toggle-btn svg
  {
    /* Remember this is the mobile menu coloring */
    fill: var(--text-mobile-menu);
  }

  .mobile-menu .menu-animatable:hover
  {
    color: var(--text-mobile-menu-hover);
  }

  .mobile-menu.show .menu-animatable
  {
    animation: slideIn 0.3s ease forwards;
  }

  .mobile-menu.show .menu-animatable:nth-child(1)
  {
    animation-delay: 0.05s;
  }

  .mobile-menu.show .menu-animatable:nth-child(2)
  {
    animation-delay: 0.10s;
  }

  .mobile-menu.show .menu-animatable:nth-child(3)
  {
    animation-delay: 0.15s;
  }

  .mobile-menu.show .menu-animatable:nth-child(4)
  {
    animation-delay: 0.20s;
  }

  .mobile-menu.show .menu-animatable:nth-child(5)
  {
    animation-delay: 0.25s;
  }

  .mobile-menu.show .menu-animatable:nth-child(6)
  {
    animation-delay: 0.30s;
  }

  @keyframes slideIn
  {
    to
    {
      transform: translateX(0);
      opacity: 1;
    }
  }

  section.gear li
  {
    gap: 0.35rem;
  }

  section.gear li .gear-cat
  {
    width: 90px;
  }

  .about section.gear ul li p
  {
    max-width: 160px;
    flex-shrink: 1;
  }

}

@keyframes fadeIn
{
  from
  {
    opacity: 0;
    transform: translateY(12px);
  }

  to
  {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animate background position for subtle color drift */
@keyframes gradientShift
{
  0%
  {
    background-position: 0% 50%;
  }

  50%
  {
    background-position: 100% 50%;
  }

  100%
  {
    background-position: 0% 50%;
  }
}

/* ─────────────────────────────────────────────
   PROJECTS PAGE
   ───────────────────────────────────────────── */

:root
{
  --green: rgb(34, 160, 100);
}

:root.dark
{
  --green: rgb(52, 185, 120);
}

/* ── Page wrapper ── */
.projects-page
{
  background: var(--background);
}

/* ── Hero ── */
.projects-hero
{
  /* todo this should match the intro padding */
  padding: 3.5rem var(--padding) 3.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.projects-overline
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.projects-hero h1
{
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}

.projects-hero h1 em
{
  font-style: italic;
  font-weight: 400;
}

.projects-subline
{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.projects-subline span
{
  color: var(--orange);
}

/* ── Workbenches list ── */
.workbenches
{
  list-style: none;
}

/* ── Individual workbench ── */
.workbench
{
  border-top: 1px solid var(--rule);
}

.workbench:last-child
{
  border-bottom: 1px solid var(--rule);
}

.workbench:nth-child(even) { background: color-mix(in srgb, var(--ink) 3%, var(--background)); }
.workbench:nth-child(odd)  { background: var(--background); }

.workbench-inner
{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
}

/* flip image side on even workbenches */
.workbench:nth-child(even) .workbench-inner
{
  direction: rtl;
}

.workbench:nth-child(even) .workbench-inner > *
{
  direction: ltr;
}

/* ── Visual side ── */
.workbench-visual
{
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
}

/* Big ghost number — chalk on wall */
.workbench-num
{
  font-family: 'Bastliga-One', var(--font-serif-fancy);
  font-size: clamp(10rem, 22vw, 18rem);
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--accent-color, var(--muted)) 9%, transparent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.visual-frame
{
  position: relative;
  z-index: 1;
  width: 75%;
  max-width: 380px;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow:
    0 8px 40px color-mix(in srgb, var(--ink) 12%, transparent),
    0 2px 8px  color-mix(in srgb, var(--ink) 8%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.workbench:hover .visual-frame
{
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow: 0 16px 56px color-mix(in srgb, var(--ink) 18%, transparent);
}

.visual-frame img
{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--border-radius);
}

/* logo gets breathing room */
.visual-frame img.visual-logo-pad
{
  padding: 3rem;
  background: var(--background);
}

/* placeholder when no image yet */
.visual-placeholder
{
  position: relative;
  z-index: 1;
  width: 75%;
  max-width: 380px;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
  border: 2px dashed color-mix(in srgb, var(--accent-color, var(--muted)) 30%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--accent-color, var(--muted)) 4%, transparent);
}

.visual-placeholder svg
{
  width: 48px;
  height: 48px;
  fill: none;
  color: color-mix(in srgb, var(--accent-color, var(--muted)) 35%, transparent);
}

.placeholder-label
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-color, var(--muted)) 55%, transparent);
}

/* tape corners on placeholder */
.visual-placeholder::before,
.visual-placeholder::after
{
  content: '';
  position: absolute;
  width: 28px;
  height: 8px;
  background: color-mix(in srgb, var(--accent-color, var(--muted)) 22%, transparent);
  border-radius: 2px;
}

.visual-placeholder::before { top: -4px;    left: 20px;  transform: rotate(-3deg); }
.visual-placeholder::after  { bottom: -4px; right: 20px; transform: rotate(2deg);  }

/* ── Text side ── */
.workbench-text
{
  padding: 3.5rem 3rem 3.5rem 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  border-left: 1px solid var(--rule);
  position: relative;
}

.workbench:nth-child(even) .workbench-text
{
  border-left: none;
  border-right: 1px solid var(--rule);
}

/* colored accent stripe */
.workbench-text::before
{
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 3px;
  background: var(--accent-color, var(--muted));
  border-radius: 2px;
  opacity: 0.35;
  transition: opacity 0.25s ease, height 0.25s ease, top 0.25s ease;
}

.workbench:hover .workbench-text::before
{
  opacity: 0.7;
  top: 15%;
  height: 70%;
}

.workbench:nth-child(even) .workbench-text::before
{
  left: auto;
  right: 0;
}

.project-num
{
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color, var(--muted));
  opacity: 0.7;
}

.workbench-text h2
{
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.05;
}

.workbench-text h2 em
{
  font-style: italic;
  font-weight: 400;
}

.project-oneliner
{
  font-family: var(--font-serif-fancy);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.workbench-text p
{
  font-size: 0.95rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--ink) 75%, transparent);
  max-width: 42ch;
  margin: 0;
}

.workbench-footer
{
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* ── Status badges ── */
.status-badge
{
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  padding: 0.3em 0.9em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.status-badge::before
{
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.status-in-progress
{
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--orange) 25%, transparent);
}

.status-shipped
{
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 25%, transparent);
}

.status-bench
{
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent);
}

/* ── Project link ── */
.project-link
{
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color, var(--blue));
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color, var(--blue)) 30%, transparent);
  transition: gap 0.2s ease, border-color 0.2s ease;
}

.project-link:hover
{
  gap: 0.75em;
  border-color: var(--accent-color, var(--blue));
  color: var(--accent-color, var(--blue));
}

/* ── Empty workbench slot ── */
.workbench-empty .workbench-inner
{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.workbench-empty-content
{
  text-align: center;
  padding: 3rem;
}

.workbench-empty-content p
{
  font-family: var(--font-mono);
  font-size: var(--text-md);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

.tape-line
{
  width: 120px;
  height: 6px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  border-radius: 3px;
  margin: 1rem auto 0;
}

/* ── Responsive ── */
@media (max-width: 720px)
{
  .workbench-inner
  {
    grid-template-columns: 1fr;
    direction: ltr !important;
  }

  .workbench:nth-child(even) .workbench-inner > *
  {
    direction: ltr;
  }

  .workbench-visual
  {
    min-height: 260px;
    padding: 2.5rem 2rem;
  }

  .workbench-text
  {
    padding: 2.5rem 1.5rem;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--rule);
  }

  .workbench-text::before
  {
    display: none;
  }

  .projects-hero
  {
    padding: 3rem 1.5rem 2rem;
  }
}