/* Layout only: card surfaces and button materials come from style.css. */
a.tool-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-size: 0.8rem; text-align: center; }
.site-header { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; max-width: none; height: auto; border-radius: 0; }
.site-header:hover { transform: none; }
.site-header .tool-content { flex-direction: row; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 0; }
.site-header .tool-btn { padding: 8px 12px; font-size: 0.65rem; }
.site-header > .tool-content > a:first-child { color: var(--text); text-decoration: none; font-weight: var(--fw-bold); letter-spacing: -0.04em; margin-right: auto; }
.site-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 28px; }
.hero-content .site-actions { justify-content: center; }
.portfolio-page { overflow: auto; touch-action: auto; user-select: text; -webkit-user-select: text; }
.portfolio-page main { max-width: 1100px; margin: 0 auto; padding: 130px 24px 64px; }
.portfolio-page h1 { font-size: clamp(2.3rem, 7vw, 4.8rem); line-height: 1.02; overflow-wrap: anywhere; }
.portfolio-page h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; }
.portfolio-page main > section { margin-top: 48px; scroll-margin-top: 90px; }
.portfolio-page .accent-text { display: block; margin: 0 0 18px; color: var(--accent); letter-spacing: 0.15em; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.project-card { height: auto; max-width: none; text-align: left; }
.project-card .tool-content { gap: 18px; }
.project-card h2, .project-card h3 { margin: 0; font-size: 1.4rem; line-height: 1.15; text-transform: uppercase; }
.project-card p { margin: 0; }
.project-card .tool-btn { align-self: flex-start; margin-top: auto; }
.project-card small { color: var(--accent); line-height: 1.5; }
.fly-project { width: min(350px, 78vw); pointer-events: auto; }
.fly-project .project-card { width: 100%; }
.fly-project p { font-size: 0.95rem; }
.portfolio-page figure { margin: 0; }
.portfolio-page figure img, .portfolio-page video { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: contain; }
.portfolio-page figcaption { padding-top: 12px; color: var(--gray); font-size: 0.85rem; }
.portfolio-page footer { margin-top: 48px; }
@media (max-width: 480px) {
  .site-header .tool-content { gap: 8px; padding: 9px; }
  .site-header .tool-btn { padding: 8px; font-size: 0.6rem; letter-spacing: 0.5px; }
  .site-header > .tool-content > a:first-child { font-size: 0.85rem; }
  .portfolio-page main { padding: 110px 18px 40px; }
}

/* Native dialog behavior; the existing modal classes provide its material. */
#contact-modal { display: none; border: 0; padding: 20px; max-width: none; max-height: none; color: var(--text); }
#contact-modal[open] { display: flex; }