/* Homepage components; shared tokens and controls are in site.css. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; padding: 8px 16px; background: var(--color-bg); }
.skip-link:focus { top: 8px; }
/* Header brick: the same markup and sticky behavior at every screen size. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "identity contacts" "navigation appearance";
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding-block: calc(var(--space-2) + env(safe-area-inset-top, 0px)) var(--space-1);
  padding-inline: max(32px, calc((100% - var(--reading-width)) / 2), env(safe-area-inset-left, 0px)) max(32px, calc((100% - var(--reading-width)) / 2), env(safe-area-inset-right, 0px));
  isolation: isolate;
  background: var(--color-bg);
}
.site-name { grid-area: identity; min-width: 0; margin: 0; font: 400 32px/1.25 Georgia, "Times New Roman", "Songti SC", serif; letter-spacing: -1.3px; }
.site-name-link { display: inline-block; min-height: 1.25em; vertical-align: top; white-space: nowrap; text-decoration: none; }
.name-first { position: relative; }
.is-typing .name-first::after {
  content: "";
  position: absolute;
  left: 100%;
  top: .12em;
  height: .95em;
  border-left: 1px solid var(--color-accent);
  animation: blink-caret 1s steps(1) infinite;
}
@keyframes blink-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.site-nav { grid-area: navigation; grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-half); min-width: 0; width: 100%; padding-right: calc(var(--control-size) + var(--space-1)); }
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-size); padding: 4px 10px; border-radius: 999px; color: var(--color-subtle); font-size: 13px; line-height: 1.6; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { color: var(--color-accent); background: var(--color-soft); }
.site-nav a[aria-current] { color: var(--color-accent); background: var(--color-soft); }
.contact-links { grid-area: contacts; justify-self: end; display: flex; align-items: center; gap: var(--space-half); }
.site-header > [data-theme-toggle-slot], .site-header > .theme-toggle { grid-area: appearance; justify-self: end; }
/* Content bricks: section, prose, entry, metadata, and tag. Content stays in HTML. */
.site-content { padding-top: var(--space-3); outline: none; }
.content-section { margin-bottom: var(--space-5); }
.section-title { position: relative; margin: 0; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -.4px; }
.section-title::before { content: "#"; position: absolute; right: calc(100% + 14px); color: var(--color-subtle); opacity: .55; font-weight: 400; }
.prose p { margin: 0 0 var(--space-1); color: var(--color-body); }
.prose p:last-child { margin-bottom: 0; }
/* Native disclosures keep all headings operable without JavaScript. */
.disclosure-summary { position: relative; display: flex; align-items: center; min-height: 28px; width: fit-content; max-width: 100%; list-style: none; cursor: pointer; }
.disclosure-summary::-webkit-details-marker { display: none; }
.section-disclosure > .disclosure-summary::before { content: none; }
.disclosure-summary::before { content: ""; position: absolute; left: -18px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 6px solid var(--color-subtle); transform: rotate(0); transition: transform .15s ease; }
details[open] > .disclosure-summary::before { transform: rotate(90deg); }
.disclosure-summary:is(:hover, :active, :focus-visible) { color: var(--color-accent); }
.section-disclosure > .disclosure-summary:is(:hover, :active, :focus-visible) .section-title::before { color: var(--color-accent); opacity: 1; }
.disclosure-summary:is(:hover, :active, :focus-visible)::before { border-left-color: var(--color-accent); }
details[open] > .disclosure-summary { margin-bottom: var(--space-1); }
.builds-section > .disclosure-summary { padding-left: 16px; }
.builds-section > .disclosure-summary::before { left: 0; }
.builds-section > .disclosure-summary:is(:hover, :active, :focus-visible) .builds-theme { color: var(--color-accent); }
/* Group related lines closely; whitespace separates entries without horizontal rules. */
.entry { padding: 0; }
.entry + .entry { margin-top: var(--space-3); }
.education-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.education-logo { display: block; width: 40px; height: 40px; padding: 4px; overflow: hidden; border-radius: 7px; background: #f0ede5; }
.education-copy { min-width: 0; }
.education-copy h3 { margin: 0 0 4px; font-size: 17px; font-weight: 500; line-height: 1.5; }
.education-degree { display: block; width: fit-content; color: var(--color-body); font-size: 15px; line-height: 1.5; }
.builds-section + .builds-section { margin-top: var(--space-4); }
.builds-section:not([open]) + .builds-section { margin-top: var(--space-1); }
.builds-theme { margin: 0; font-size: 13px; color: var(--color-subtle); font-weight: 500; letter-spacing: .03em; }
.project-heading { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.project-title { min-width: 0; margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; letter-spacing: -.25px; }
.project-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.project-meta { flex-basis: 100%; font-size: 13px; color: var(--color-subtle); margin-right: 3px; }
.project-heading .project-github { width: 28px; height: 28px; flex: 0 0 28px; }
.project-github svg { width: 15px; height: 15px; }
.project-tag, .writing-tag { display: inline-block; padding: 1px 7px; border: 1px solid var(--color-border); border-radius: 5px; color: var(--color-subtle); font-size: 11px; line-height: 1.6; }
.project-desc, .writing-detail { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--color-body); }
.writing-list { list-style: none; padding: 0; margin: 0; }
.writing-list li { padding: 0; }
.writing-list li + li { margin-top: var(--space-3); }
.writing-list li > a { font-size: 17px; font-weight: 500; }
.writing-detail { display: block; margin-top: 8px; }
.writing-tag { margin-right: 6px; vertical-align: 1px; }
.page-ending { display: flex; align-items: center; gap: var(--space-1); min-height: 24px; margin: 0; color: var(--color-subtle); font-size: 14px; }
.page-ending::before { content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); }
.status-word { display: inline-block; min-width: 11ch; }
.page-ending.is-running::before { animation: breathing-dot 1.25s ease-in-out infinite; }
@keyframes breathing-dot {
  0%, 100% { opacity: .35; transform: scale(.72); box-shadow: 0 0 2px var(--color-accent); }
  50% { opacity: 1; transform: scale(1); box-shadow: 0 0 9px 2px var(--color-accent); }
}
@supports (background-clip: text) {
  .page-ending.is-running .status-word {
    background: linear-gradient(110deg, var(--color-subtle) 35%, var(--color-text) 50%, var(--color-subtle) 65%);
    background-size: 250% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: status-sheen 2.8s linear infinite;
  }
}
@keyframes status-sheen { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.site-footer { padding: var(--space-5) 0 var(--space-4); color: var(--color-subtle); font-size: 12px; }
/* A wide reading column fits all controls on one line. Reserve the name cell so
   typing never shifts the navigation or contact actions. */
@media (min-width: 900px) {
  .site-header {
    grid-template-columns: 184px minmax(0, 1fr) auto auto;
    grid-template-areas: "identity navigation contacts appearance";
    column-gap: var(--space-1);
  }
  .site-nav { grid-column: 2; padding-right: 0; }
  .site-nav a { padding-inline: 8px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 116px; }
  .site-header { gap: var(--space-1); padding-top: calc(var(--space-1) + env(safe-area-inset-top, 0px)); padding-inline: max(24px, env(safe-area-inset-left, 0px)) max(24px, env(safe-area-inset-right, 0px)); }
  .site-name { font-size: 28px; letter-spacing: -1px; }
  .site-nav { gap: 0; }
  .site-nav a { padding-inline: 4px; font-size: 12px; }
  .site-content { padding-top: var(--space-2); }
  .section-title::before { right: calc(100% + 8px); font-size: 17px; }
  .education-item { grid-template-columns: 36px minmax(0, 1fr); }
  .education-logo { width: 36px; height: 36px; }
  .education-copy h3 { font-size: 16px; }
}
@media (max-width: 360px) {
  .site-name { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .disclosure-summary::before { transition: none; }
  .page-ending.is-running::before, .page-ending.is-running .status-word { animation: none; }
  .is-typing .name-first::after { display: none; animation: none; }
}