.hgp-dir {background-color: #1E1E1E;background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);background-size: 3px 3px;min-height: 100vh; min-height: 100dvh;display: flex; align-items: center; justify-content: center;padding: clamp(24px, 4vh, 48px) 0; box-sizing: border-box;}
.hgp-dir .hgp-container { width: 100%; }
.hgp-dir-grid {display: grid; grid-template-columns: 1fr 1fr;gap: clamp(32px, 5vw, 72px); align-items: center;max-width: 1100px; margin: 0 auto;padding: 0 clamp(16px, 4vw, 40px); width: 100%; box-sizing: border-box;}
.hgp-dir-text, .hgp-dir-side { min-width: 0; }
.hgp-dir .hgp-tag {font-family: 'JetBrains Mono', monospace;font-size: 11px; font-weight: 700; letter-spacing: 0.16em;color: #C62828; margin-bottom: 14px; display: block;}
.hgp-dir-title {font-family: 'Oswald', sans-serif; font-weight: 700;font-size: clamp(36px, 5vw, 56px); line-height: 1.1; letter-spacing: -0.02em;text-transform: uppercase; color: #FAFAFA; margin-bottom: 18px;}
.hgp-dir-title .hgp-outline { -webkit-text-stroke: 1.5px #8B7765; color: transparent; }
.hgp-dir-bse {border-top: 1px solid rgba(250,250,250,.18); padding-top: 14px; margin: 0 0 22px;max-width: 640px; font-family: 'Roboto Condensed', sans-serif;font-size: 15px; line-height: 1.55; color: rgba(250,250,250,.55);}
.hgp-dir-bse strong { color: rgba(250,250,250,.92); font-weight: 700; letter-spacing: .02em; }
.hgp-dir-modes {display: grid; grid-template-columns: 1fr 1fr;gap: clamp(20px, 2.5vw, 36px); max-width: 640px;}
.hgp-dir-mode {border-left: 2px solid rgba(250,250,250,.2); padding: 2px 0 2px 16px;}
.hgp-dir-mode-label {display: block; font-family: 'JetBrains Mono', monospace;font-size: 10.5px; font-weight: 700; letter-spacing: 0.13em;color: rgba(250,250,250,.8); margin-bottom: 8px; text-transform: uppercase;}
.hgp-dir-mode-sub { color: rgba(250,250,250,.45); font-weight: 500; }
.hgp-dir-mode-text {font-family: 'Roboto Condensed', sans-serif;font-size: 14px; line-height: 1.55; color: rgba(250,250,250,.6); margin: 0;}
.hgp-dir-signature {margin-top: 24px;}
.hgp-dir-sig-line {font-family: 'JetBrains Mono', monospace;font-size: 15px;font-weight: 700;letter-spacing: 0.12em;color: rgba(250,250,250,.45);text-transform: uppercase;margin: 0;line-height: 1.6;}
.hgp-dir-sig-link {margin-top: 12px;font-size: 12px;letter-spacing: .08em;}
.hgp-dir-sig-link a {color: #C62828;text-decoration: none;border-bottom: 1px solid rgba(198,40,40,.5);transition: color .3s ease, border-color .3s ease;}
.hgp-dir-sig-link a:hover {color: #FAFAFA;border-color: #FAFAFA;}
.hgp-dir-side {justify-self: center; text-align: center;display: flex; flex-direction: column; align-items: center; gap: 24px;}
.hgp-dir-photo {position: relative; margin: 0; max-width: 380px; width: 100%;background: #F0EBE4; padding: 14px 14px 0; transform: rotate(-1.2deg);box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: transform 0.35s ease;}
.hgp-dir-photo:hover { transform: rotate(0deg); }
.hgp-dir-photo img { width: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; }
.hgp-dir-photo-caption {font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 500; letter-spacing: 0.1em;white-space: nowrap; color: rgba(10,10,10,.55); padding: 12px 2px;}
.hgp-dir-cta {display: inline-block; font-family: 'JetBrains Mono', monospace;font-weight: 700; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;color: #C62828; background: transparent; border: 2px solid #C62828;padding: 14px 28px; text-decoration: none; transition: all 0.35s ease; border-radius: 2px;text-align: center;}
.hgp-dir-cta:hover { background: #C62828; color: #FAFAFA; }
@media (max-width: 768px) {.hgp-dir { min-height: 0; align-items: flex-start; }.hgp-dir-grid { grid-template-columns: 1fr; gap: 32px; }.hgp-dir-modes { grid-template-columns: 1fr; gap: 20px; }.hgp-dir-side { gap: 20px; }.hgp-dir-photo { max-width: 320px; }.hgp-dir-photo-caption { white-space: normal; }.hgp-dir-cta { width: 100%; max-width: 320px; box-sizing: border-box; font-size: 14px; }.hgp-dir-sig-line { font-size: 13px; }}