/* Loaded only for print (see the <link media="print"> in index.html) - no
   @media wrapper needed in this file. */

/* --- Hide screen-only chrome and decoration --- */
.site-header,
.mobile-drawer,
.mobile-drawer-backdrop,
.hero-actions,
.hero-feature-gloss,
.hero-pixel-canvas,
.hero-scrim,
type-writer {
  display: none !important;
}

.print-only-header {
  display: block;
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #47546b;
}

.print-only-name {
  display: inline;
}

/* --- Guarantee content is visible: the IntersectionObserver-driven reveal
   has no meaning on a static printed page (nothing "scrolls into view"),
   and print rendering may capture the DOM before the observer has fired. --- */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* --- Page geometry: paper width replaces the on-screen container/section
   rhythm, which would otherwise waste a lot of paper. --- */
.container {
  width: 100% !important;
  max-width: none !important;
  padding: 0 8px !important;
  box-sizing: border-box;
}
.section {
  padding: 18px 0 !important;
}
.site-footer {
  padding: 12px 0 !important;
}
.hero {
  min-height: auto !important;
  padding: 12px 0 20px !important;
  background: #ffffff !important;
}

/* --- The screen body background (--bg-light, a pale gray-blue) is never
   covered by a section in the leftover blank space at the end of a page -
   force plain white paper everywhere, not just inside named sections. --- */
html,
body {
  background: #ffffff !important;
}

/* --- Every section becomes light-on-white: dark backgrounds are unreliable
   in print (many browsers skip background colors by default), so text
   color must not depend on a background that may never render. --- */
.section-dark,
.section-white,
.section-light,
.hero,
.site-footer {
  background: #ffffff !important;
  color: #0f172a !important;
}
.section-dark .eyebrow,
.eyebrow {
  color: #47546b !important;
}
.body-copy,
.section-dark .body-copy {
  color: #333c4d !important;
}

/* --- Single-column for the hero (name/tagline + stat card stacked) and for
   About: the on-screen 280px facts sidebar wastes paper width next to a
   narrow copy column, so facts become one horizontal row above the
   narrative instead of a side-by-side grid. --- */
.hero-grid {
  display: block !important;
}
.about-grid {
  display: block !important;
}
.fact-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px 32px !important;
  margin: 12px 0 20px !important;
}
.hero-feature {
  margin-top: 12px;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
  border: 1px solid #cbd5e1;
}
.hero-feature-inner {
  padding: 14px 16px !important;
}
.hero-feature h2 {
  font-size: 16px !important;
  margin: 8px 0 !important;
}
.hero-divider {
  margin-bottom: 10px !important;
}
.hero-feature .accent,
.status-badge {
  color: #0f172a !important;
}
.status-badge {
  background: none !important;
  border: 1px solid #cbd5e1 !important;
  font-size: 9px !important;
  padding: 4px 8px !important;
}
.feature-value {
  font-size: 15px !important;
}
.feature-value small {
  font-size: 10px !important;
}
.about-facts {
  margin-bottom: 16px;
}

/* --- Project cards: single column (the on-screen multi-column grid would
   otherwise read out of order in ATS text extraction, same issue as About
   above), drop shadows/gradients, keep a plain border so entries stay
   legible and don't get split across a page break --- */
.projects-grid {
  display: block !important;
}
.project-card {
  margin-bottom: 12px;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  transform: none !important;
  break-inside: avoid;
}
.project-card:last-child {
  margin-bottom: 0;
}
.project-card h3,
.project-card .body-copy {
  color: #0f172a !important;
}
.project-card .link-button {
  color: #c2410c !important;
}

/* --- Timeline: dense, resume-style list - no card box, just a hairline
   divider between entries. --- */
.timeline {
  gap: 0 !important;
}
.timeline-item {
  margin: 0 !important;
  padding: 8px 0 !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #cbd5e1 !important;
  transform: none !important;
  break-inside: avoid;
}
.timeline-item:last-child {
  border-bottom: none !important;
}
.timeline-desc {
  margin-top: 4px !important;
}
.timeline-badge {
  background: none !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

/* --- Links carry no click on paper, so print the URL next to anything
   that points off the page. In-page anchors (nav, hero CTAs) are already
   hidden above, so this only touches real external links. --- */
.project-card::after {
  content: attr(href);
  display: block;
  margin-top: 10px;
  font-size: 11px;
  color: #47546b;
  word-break: break-all;
}
.social-links a::after,
.timeline-desc a::after {
  content: " (" attr(href) ")";
  font-size: 12px;
  color: #47546b;
}
.social-links {
  display: block !important;
  column-count: 2;
  column-gap: 24px;
}
.social-links li {
  margin-bottom: 4px;
  break-inside: avoid;
}
/* --- The pill is inline-flex on screen, sized to fit its content; a full
   URL appended after the label is often wider than a print column, so it
   must fill the column and wrap instead of overflowing past the edge. --- */
.social-links a {
  display: flex !important;
  width: 100%;
  box-sizing: border-box;
}
.social-links a::after {
  word-break: break-all;
}