@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;
  --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) 0%, var(--background)); 
  --panel-border:  var(--rule);
  --panel-border-active: color-mix(in srgb, var(--tint) 17%, transparent);
  --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);

  /* ── Cream-on-ink text (4 tiers, lightest → strongest) ── */
  --cream-on-ink-faint:     var(--muted);
  --cream-on-ink:           var(--muted); /* body, tags */

  /* ── 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;
}



/* --- DARK MODE BUTTON --- */
.dark-toggle-btn
{
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  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;
}


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 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: 0.68rem;
  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: 0.7rem;
  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: 0.8rem;
}



main
{
  background: var(--background);
  /* padding: 4rem; */
  /* max-width: 1200px; */
  /* width: 100%; */
  margin: 0 auto;
  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;
  border-radius: 999px;
  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: 0.7rem;
  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: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
}

section.intro h2
{
  font-family: var(--font-serif-fancy);
  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-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  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-family: var(--font-serif-fancy);
  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(--cream-on-ink);
}

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: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-on-ink);
}

/* pill-ghost for dark sections */
.pill-ghost
{
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6em 1.4em;
  border-radius: 999px;
  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: 0.7rem;
  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;
}

header.article-header p.tagline .meta-divider
{
  color: var(--rule);
  opacity: 0.35;
  font-weight: 400;
}

header.article-header h1
{
  font-family: var(--font-serif-fancy);
  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;
}

header.article-header time,
header.article-header span.readtime
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 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;
  transition: border-color 0.2s, transform 0.2s;

  max-width: none;
}

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

article.featured:hover h3
{
  color: var(--orange);
}

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;
  opacity: 0.85;
  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: 0.7rem;
  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;
}

article.featured .read-more
{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--orange);
  align-self: flex-start;
}

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

article.featured header strong
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad);
  color: white;
  padding: 0.28em 0.75em;
  border-radius: 999px;
}

article.featured header time
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--cream-on-ink);
}

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

article.featured p
{
  font-style: italic;
  font-size: 0.88rem;
  color: var(--cream-on-ink);
  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(--cream-on-ink-faint);
}

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: 0.7rem;
  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: 0.7rem;
  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-family: var(--font-serif-fancy);
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

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

section.currently li .format
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  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-family: var(--font-serif-fancy);
  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: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

section.books li p.note
{
  font-style: italic;
  font-size: 0.75rem;
  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: 0.7rem;
  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-family: var(--font-serif-fancy);
  font-size: 1rem;
  font-weight: 900;
  color: var(--cream);
  margin-bottom: 0.3rem;
}

section.building li p
{
  font-style: italic;
  font-size: 0.78rem;
  color: var(--cream-on-ink);
  line-height: 1.5;
}

section.building li .status
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25em 0.65em;
  border-radius: 999px;
  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: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  width: 80px;
  flex-shrink: 0;
}

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

section.gear li p
{
  font-style: italic;
  font-size: 0.75rem;
  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;
  transition: border-color 0.2s, transform 0.2s;
}

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:hover h3
{
  color: var(--orange);
}

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;
  opacity: 0.85;
  border-radius: 0;
  margin: 0;
}

ul.card-grid li:nth-child(1) figure
{
  background: var(--grad-warm);
}

ul.card-grid li:nth-child(2) figure
{
  background: var(--grad-blue-purple);
}

ul.card-grid li:nth-child(3) figure
{
  background: var(--grad-purple-warm);
}

ul.card-grid li:nth-child(4) figure
{
  background: var(--grad-blue-warm);
}

ul.card-grid li figure figcaption,
ul.card-grid li a figure figcaption
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  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 time
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--cream-on-ink-faint);
}

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

ul.card-grid li p
{
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cream-on-ink);
  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 li a:hover h3
{
  color: var(--orange);
}

ul.post-rows time
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--cream-on-ink-faint);
  width: 44px;
  flex-shrink: 0;
}

ul.post-rows h3
{
  font-family: var(--font-serif-fancy);
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--tint);
  flex: 1;
  transition: color 0.15s;
}

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

/* --- TAGS --- */
.tag
{
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.32em 0.85em;
  border-radius: 999px;
  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-family: var(--font-serif-fancy);
  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: 0.65rem;
  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;
  transition: border-color 0.2s, transform 0.2s;
}

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;
}

article.writings-lead>a:hover h2,
article.writings-flank>a:hover h3
{
  color: var(--orange);
}

/* 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;
}

.writings-meta time
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--cream-on-ink-faint);
}

/* 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-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--grad);
  color: white;
  padding: 0.28em 0.75em;
  border-radius: 999px;
}

article.writings-lead header time
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--cream-on-ink);
}

/* Lead read-more */
article.writings-lead .read-more
{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--orange);
  margin-top: auto;
  padding-top: 1rem;
  align-self: flex-start;
}

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

/* Lead deck (hook) */
article.writings-lead p:not(.writings-meta)
{
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cream-on-ink);
  line-height: 1.5;
  margin: 0;
}

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

/* Flank hook */
article.writings-flank p:not(.writings-meta)
{
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cream-on-ink);
  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-family: var(--font-serif-fancy);
  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%;
}

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-family: var(--font-serif-fancy);
  font-size: 1rem;
  font-weight: 900;
  color: var(--ink);
  line-height: 1.2;
  transition: color 0.15s;
  margin: 0;
}

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

ul.writings-spotlight-list li>a time
{
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── 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; }

a.writings-row-link:hover .writings-row-text h3 { color: var(--orange); }

/* 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-family: var(--font-serif-fancy);
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  transition: color 0.15s;
}

.writings-row-text p
{
  font-style: italic;
  font-size: 0.8rem;
  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
{
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.writings-row-tag
{
  font-size: 0.6rem;
  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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.25rem;
}

section.about h2
{
  font-family: var(--font-serif-fancy);
  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: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

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

footer p
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  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-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65em 1.5em;
  border-radius: 999px;
  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-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.65em 1.5em;
  border-radius: 999px;
  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: 0.7rem;
  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: 0.7rem;
  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: 0.85rem;
  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: 0.7rem;
  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: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.post-date-author
{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  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: 70px;
  }

  .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: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.projects-hero h1
{
  font-family: var(--font-serif-fancy);
  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: 0.65rem;
  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: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-color, var(--muted));
  opacity: 0.7;
}

.workbench-text h2
{
  font-family: var(--font-serif-fancy);
  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-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  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: 0.72rem;
  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: 0.72rem;
  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;
  }
}