/* ============================================================
   THEME TOKENS
   ============================================================ */
:root{
  --accent:#EE1F25;
  --accent-fill:#E41E24;
}

/* Light */
:root[data-theme="light"]{
  --bg:#FFFFFF;
  --ink:#0B0B0B;
  --muted:#5C5C5C;
  --field:#F7F7F7;
  --field-border:#D9D9D9;
  --focus:var(--accent);
}
/* Dark */
:root[data-theme="dark"]{
  --bg:#0C0C0C;
  --ink:#F2F2F2;
  --muted:#BDBDBD;
  --field:#111111;
  --field-border:#333333;
  --focus:var(--accent);
}

/* ============================================================
   GLOBAL
   ============================================================ */
*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  line-height:1.5;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:underline; text-underline-offset:.2em}
a:hover,a:focus{text-decoration-thickness:.14em}
.muted{color:var(--muted)}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
::selection{background:var(--accent); color:#fff}

/* ============================================================
   TOP NAV
   ============================================================ */
.site-nav{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--field-border);
}
.site-nav__inner{
  max-width:960px; margin:0 auto; padding:.65rem 1rem;
  display:flex; align-items:center; justify-content:space-between;
}
.site-nav a{ text-decoration:none; font-weight:600; color:var(--ink) }
.site-nav a.nav-link{ color:var(--accent) }

/* ============================================================
   PROFILE HEADER (banner + overlapping avatar + meta)
   ============================================================ */
.profile-header{ position:relative; margin:0 0 1.5rem }
.banner{ height:200px; overflow:hidden }
@media (min-width:1000px){ .banner{ height:220px } }
.banner img{ width:100%; height:100%; object-fit:cover }

/* inner container matches site width */
.profile-header__inner{
  max-width:960px; margin:0 auto; padding:0 1rem;
  position:relative; /* for avatar absolute positioning */
}

/* avatar overlaps bottom of banner */
.avatar--overlap{
  position:absolute; left:1rem; bottom:-56px; /* half the avatar height */
  width:112px; height:112px; border-radius:9999px; object-fit:cover;
  border:3px solid var(--accent);
  box-shadow:0 0 0 4px var(--bg); /* halo cutout */
}

/* space for avatar column + tidy rhythm */
.hero-meta{
  padding-top:72px;            /* clears the overlapped avatar */
  margin-left:calc(1rem + 120px);
  max-width:720px;
}
@media (min-width:700px){
  .hero-meta{ margin-left:0; padding-left:140px } /* avatar column on wider screens */
}
.hero-meta h1{
  margin:.25rem 0 .2rem; font-size:2rem; line-height:1.15;
}
.tagline{ margin:0 0 .45rem; color:var(--muted) }
.social ul{
  list-style:none; margin:.25rem 0 0; padding:0;
  display:flex; gap:.9rem;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ max-width:720px; margin:1.75rem auto; padding:0 1rem }
.about h2{ margin:.25rem 0 .5rem }
.about p{ margin:0 0 1rem }
.clamp-3{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.linklike{
  background:none; border:0; padding:0; font:inherit; color:var(--accent);
  text-decoration:underline; cursor:pointer;
}

/* ============================================================
   FEED (Notes)
   ============================================================ */
.feed{ max-width:720px; margin:1.75rem auto 2.5rem; padding:0 1rem }
.tweet{
  display:flex; gap:.75rem; padding:1rem 0;
  border-bottom:1px solid var(--field-border);
  cursor:pointer;
}
.tweet.expanded { background: transparent; }
.tweet__avatar img{ width:48px; height:48px; border-radius:50% }
.tweet__body{ flex:1 }
.tweet__head{ font-size:.92rem; margin-bottom:.3rem }
.tweet__head .name{ font-weight:600 }
.tweet__head time{ color:var(--muted) }
.tweet__text{ margin:.25rem 0 .55rem }
.tweet__actions{ font-size:.88rem }
.pager{ margin-top:1rem; display:flex; gap:.5rem }
.pager button{
  padding:.4rem .8rem; border:1px solid var(--field-border);
  background:var(--field); color:var(--ink); cursor:pointer;
}
.pager button:disabled{ opacity:.5; cursor:default }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{
  margin-top:3rem; padding:1rem; text-align:center;
  border-top:1px solid var(--field-border); color:var(--muted);
}
.footer a{ color:var(--accent) }

/* ============================================================
   FORMS / BUTTONS (shared)
   ============================================================ */
input,textarea,select{
  background:var(--field); color:var(--ink);
  border:1px solid var(--field-border); padding:.5rem; border-radius:4px; font:inherit;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  outline:none;
}
button{ font:inherit; cursor:pointer }
.btn{ display:inline-block; padding:.5rem 1rem; border-radius:4px; border:1px solid transparent; text-align:center }
.btn.primary{ background:var(--accent-fill); color:#fff; border-color:var(--accent-fill) }
.btn.ghost{ background:transparent; color:var(--accent); border-color:var(--accent) }

/* ============================================================
   MARKDOWN INSIDE NOTES
   ============================================================ */
.tweet__text :where(h1,h2,h3){ margin:.6em 0 .3em; font-weight:700; font-size:1.1em }
.tweet__text p{ margin:.5em 0 }
.tweet__text code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95em; padding:.15em .3em;
  border:1px solid var(--field-border); background:var(--field); border-radius:3px;
}
.tweet__text pre{
  padding:.75rem; overflow:auto; border:1px solid var(--field-border);
  background:var(--field); border-radius:4px;
}
.tweet__text ul,.tweet__text ol{ margin:.5em 0 .5em 1.25em }
.tweet__text blockquote{
  margin:.6em 0; padding-left:.75em; border-left:3px solid var(--accent); color:var(--muted);
}

/* ===== POLISH OVERRIDES (paste at end) ===== */

/* Top nav: a bit tighter */
.site-nav__inner { padding: .55rem 1rem; gap: .75rem; }
.site-nav .brand { letter-spacing: .2px; }

/* Banner: shorter, social-profile feel */
.profile-header .banner { height: 180px; }
@media (max-width: 900px){ .profile-header .banner { height: 160px; } }
.profile-header .banner > img { width: 100%; height: 100%; object-fit: cover; }

/* Avatar: smaller, clean overlap */
.avatar--overlap {
  width: 96px; height: 96px;
  border-width: 2px;               /* slimmer ring */
  left: 1rem; bottom: -48px;       /* ~50% overlap */
  box-shadow: 0 0 0 4px var(--bg); /* halo cutout */
  object-fit: cover; border-radius: 50%;
}

/* Meta block left-aligned beside avatar */
.profile-header__inner { max-width: 960px; padding: 0 1rem; }
.profile-header .hero-meta {
  margin-left: calc(1rem + 110px); /* clears avatar */
  padding-top: 56px;               /* clears overlap */
  text-align: left;
}
.profile-header .hero-meta h1 { margin: .15rem 0 0; font-size: 1.9rem; line-height: 1.15; }
.profile-header .tagline { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }

/* Social row tidy */
.hero-meta .social ul { display: flex; gap: .75rem; padding: 0; margin: .5rem 0 0; list-style: none; }
.hero-meta .social a { text-decoration: none; }
.hero-meta .social a:hover { text-decoration: underline; }

/* About spacing */
.about { max-width: 720px; margin: 1.25rem auto 1.5rem; }
.about h2 { margin: .2rem 0 .5rem; font-size: 1.05rem; }

/* Notes: quieter rhythm */
.feed { max-width: 720px; margin: 1.5rem auto 2rem; }
.tweet { padding: .85rem 0; }
.tweet__avatar img { width: 44px; height: 44px; border-radius: 50%; }
.tweet__actions .permalink { margin-left: auto; color: var(--muted); }
.tweet__actions .permalink:hover { color: var(--accent); }

/* Footer: lighter */
.footer { margin-top: 2.5rem; padding: .75rem 1rem; font-size: .9rem; }

/* Mobile stacking */
@media (max-width: 560px){
  .avatar--overlap { width: 88px; height: 88px; bottom: -44px; left: 1rem; }
  .profile-header .hero-meta { margin-left: 1rem; padding-top: 56px; }
  .profile-header .hero-meta h1 { font-size: 1.6rem; }
}

/* === HERO ALIGNMENT: text starts at the same left edge as About/Notes === */
.profile-header__inner{ position:relative; max-width:960px; padding:0 1rem; }

/* avatar sits on the container’s left edge; does NOT push the text column */
.avatar--overlap{
  position:absolute;
  left:1rem;                 /* align to container left */
  bottom:-48px;              /* ~50% overlap */
  width:96px; height:96px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px var(--bg);
}

/* text column aligns with the global content column (no extra margin-left) */
.profile-header .hero-meta{
  margin-left:0;             /* << key: align with About/Notes */
  padding-top:60px;          /* clear the overlapping avatar vertically */
  text-align:left;
}

/* tidy heading + tagline rhythm */
.profile-header .hero-meta h1{ margin:.1rem 0 .2rem; line-height:1.15; }
.profile-header .tagline{ margin:0 0 .4rem; font-size:.95rem; color:var(--muted); }

/* keep About/Feed widths consistent (already true, but reaffirm) */
.about,.feed{ max-width:720px; margin:1.5rem auto; padding:0 1rem; }

/* small screens: keep the same left alignment */
@media (max-width:560px){
  .avatar--overlap{ width:88px; height:88px; bottom:-44px; left:1rem; }
  .profile-header .hero-meta{ padding-top:56px; }
}

/* === Tight hero alignment + avatar placement (overrides) === */
:root{
  /* tweak these two to fine-tune quickly */
  --container: 720px;      /* content width (matches About/Notes) */
  --gutter: 1rem;          /* left padding inside the container */
  --avatar: 120px;         /* avatar size – change to match your green circle */
}

/* Make header content use the same column as About/Notes */
.profile-header__inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;      /* for absolute avatar */
}

/* Avatar: pinned to the upper-left corner, overlapping the banner seam */
.avatar--overlap{
  position: absolute;
  left: var(--gutter);              /* exact same left as text column */
  top: calc(-0.5 * var(--avatar));  /* overlap by ~50% */
  width: var(--avatar);
  height: var(--avatar);
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);  /* white halo */
}

/* Kill any leftover left offset and align hero text with the column */
.profile-header__inner .hero-meta{
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-top: calc(0.5 * var(--avatar) + 8px); /* clears the overlap */
  text-align: left;
}

/* Ensure the rest of the site uses the same column */
.about, .feed{
  max-width: var(--container);
  margin: 1.5rem auto;
  padding: 0 var(--gutter);
}

/* Small screens: keep alignment, scale avatar slightly */
@media (max-width: 560px){
  :root{ --avatar: 96px; }
  .profile-header__inner .hero-meta{ padding-top: calc(0.5 * var(--avatar) + 6px); }
}

a.permalink {
  font-size: 0.95rem;       /* slightly smaller, inline with text */
  text-decoration: none;    /* no underline */
  color: var(--muted);      /* gray by default */
  vertical-align: middle;   /* keeps icon aligned with text baseline */
}

a.permalink:hover {
  color: var(--accent);     /* red on hover */
}

/* Permalink icon */
.permalink{
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.permalink:hover,
.permalink:focus{
  color: var(--accent);
  text-decoration: none;
}
.permalink svg{
  width: 16px;
  height: 16px;
  display: block;
}

/* a11y helper for hidden text */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ===== Contact layout ===== */
.contact { max-width: 720px; margin: 2rem auto; padding: 0 1rem; }
.contact__head h1 { margin: 0 0 .25rem; }
.contact__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1rem;
  margin-top: 1rem;
}
.contact__form .field { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
.actions { display: flex; gap: .5rem; }

/* Labels */
.contact label {
  font-weight: 600;
  margin-bottom: .35rem;
}

/* Inputs – robust cross-theme legibility */
input, textarea, select {
  box-sizing: border-box;
  width: 100%;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--field-border);
  padding: .6rem .7rem;
  border-radius: 6px;
  font: inherit;
}
input::placeholder,
textarea::placeholder { color: var(--muted); opacity: 1; }

/* Focus */
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  outline: none;
}

/* Dark-mode autofill & browser quirks */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out; /* prevent yellow flash */
}
:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] textarea:-webkit-autofill,
:root[data-theme="dark"] select:-webkit-autofill {
  box-shadow: 0 0 0 1000px var(--field) inset !important; /* force bg */
}

/* Error/read-only states (optional hooks) */
input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #e5484d;
  box-shadow: 0 0 0 3px color-mix(in srgb, #e5484d 28%, transparent);
}
input[readonly], textarea[readonly] { opacity: .75; }

/* Compact on small screens */
@media (max-width: 640px){
  .contact__form { grid-template-columns: 1fr; }
}

/* Contact validation + messages */
input:invalid, textarea:invalid { border-color: #e5484d; }
.form-msg { margin-top: .75rem; font-weight: 600; }
.form-msg.success { color: #0a7b48; }
.form-msg.error { color: #e5484d; }

/* === Site Nav spacing & active link === */
.site-nav__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-nav__inner .nav-link {
  margin-left: 1.5rem;   /* consistent spacing between links */
  text-decoration: none;
  color: var(--text);
  font-weight: 400;      /* normal weight */
}

.site-nav__inner .nav-link[aria-current="page"] {
  font-weight: 600;      /* highlight current page */
  border-bottom: 1px solid currentColor; /* subtle underline */
}

/* Single note view */
.note-page {
  max-width: 680px;
  margin: 4rem auto;
  padding: 2rem;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--field);
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.note-page .tweet {
  margin: 0;
  border: 0;
}

.note-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-top: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.note-close:hover,
.note-close:focus {
  background: var(--bg2, rgba(0,0,0,0.05));
  color: var(--accent);
}
.note-close {
  background: var(--field);
  border: 1px solid var(--field-border);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .35rem .65rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: .4rem;
  line-height: 1;
  transition: background .2s, color .2s, border-color .2s;
}

.note-close:hover,
.note-close:focus {
  background: rgba(0,0,0,0.05);
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

.note-close .x {
  font-size: 1rem;
  line-height: 1;
}

.note-close .esc {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
}
/* === Note close button: balanced X + ESC (final override) === */
.note-page { position: relative; } /* ensure absolute child anchors correctly */

.note-page .note-close{
  position: absolute;
  top: .75rem;
  right: .75rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .46rem;

  padding: .42rem .72rem;           /* comfy pill */
  border-radius: 10px;
  border: 1px solid var(--field-border);
  background: var(--field);
  color: var(--muted);

  line-height: 1;                   /* tight vertical rhythm */
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

/* Slightly larger X, slightly smaller ESC */
.note-page .note-close .x  { font-size: 1.12rem; line-height: 1; }
.note-page .note-close .esc{ font-size: .84rem;  letter-spacing: .05em; opacity: .9; }

.note-page .note-close:hover,
.note-page .note-close:focus{
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--field));
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}
/* === Note close pill (refined) === */
.note-page .note-close {
  position: absolute;
  top: .75rem;
  right: .75rem;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;

  padding: .35rem .65rem;
  border-radius: 8px;
  border: 1px solid var(--field-border);
  background: var(--field);
  color: var(--muted);

  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.note-page .note-close .x {
  font-size: 1.25rem;   /* slightly larger */
  line-height: 1;
}

.note-page .note-close .esc {
  font-size: .8rem;     /* smaller, secondary */
  text-transform: lowercase; /* makes it subtler */
  letter-spacing: .03em;
  opacity: .9;
}

.note-page .note-close:hover,
.note-page .note-close:focus {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--field));
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}
/* === Close keycap: centered × esc === */
.note-page { position: relative; }

.note-close{
  all: unset;                               /* wipe earlier styles clean */
  position: absolute; top: 12px; right: 12px;
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: .42rem;

  padding: .46rem .74rem;
  min-width: 86px;                          /* keeps text centered in pill */
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--field);
  color: var(--muted);
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  z-index: 3;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.note-close .x   { font-size: 1.18rem; line-height: 1; }
.note-close .esc { font-size: .88rem;  letter-spacing: .04em; text-transform: lowercase; }

.note-close:hover,
.note-close:focus{
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--field));
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}
/* === FINAL: Note close pill (centred, no glyph bleed) === */
.note-page { position: relative; }

.note-page .note-close{
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .48rem;
  padding: .50rem .80rem;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: var(--field);
  color: var(--muted);
  box-sizing: border-box;
  white-space: nowrap;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}

.note-page .note-close .x{
  /* fix the overhang by boxing & centring the glyph */
  display: inline-block;
  width: 1.25em;                 /* gives breathing room */
  text-align: center;
  font-size: 1.28rem;            /* slightly larger than “esc” */
  line-height: 1;
  transform: translateY(-.02em); /* tiny optical nudge */
}

.note-page .note-close .esc{
  font-size: .90rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  line-height: 1;
}

.note-page .note-close:hover,
.note-page .note-close:focus{
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--field));
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  outline: none;
}