/* Naseem Alsabah — Official Links
   Static, accessible, mobile-first design. No JavaScript or external dependencies. */
:root {
  color-scheme: light;
  --ivory: #fefbf6;
  --green: #38761d;
  --green-soft: #a2c791;
  --green-focus: #25530f;
  --ink: #242723;
  --muted: #667064;
  --outline: #dbe4d7;
  --card: #ffffff;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 280px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.page { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: clamp(32px, 6vh, 68px) 22px 26px; }
.shell { width: 100%; max-width: 498px; margin: 0 auto; }
.profile-header { text-align: center; }
.top-rule { width: min(72%, 278px); height: 4px; background: var(--green-soft); margin: 0 auto 32px; border-radius: 10px; }
.site-mark { display: block; width: 94px; height: 94px; margin: 0 auto 19px; }
h1 { margin: 0; font-size: clamp(27px, 6.2vw, 33px); line-height: 1.23; font-weight: 640; letter-spacing: -0.035em; }
.subtitle { margin: 9px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; font-weight: 430; letter-spacing: 0.018em; }
.links { display: grid; gap: 13px; margin-top: 40px; }
.link-card { display: flex; align-items: center; gap: 15px; min-height: 91px; padding: 17px 20px; background: var(--card); border: 1px solid var(--outline); border-radius: 15px; color: inherit; text-decoration: none; box-shadow: 0 3px 14px rgba(24, 44, 24, 0.025); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; -webkit-tap-highlight-color: rgba(56,118,29,.12); }
.link-card:hover { transform: translateY(-2px); border-color: #afcba3; box-shadow: 0 8px 24px rgba(28,55,22,.075); }
.link-card:active { transform: translateY(0); }
.link-card:focus-visible { outline: 3px solid var(--green-focus); outline-offset: 4px; }
.icon-outer { width: 45px; height: 45px; flex: 0 0 45px; display: flex; align-items: center; justify-content: center; }
.icon-outer--website { color: #828982; }
.globe { display: block; }
.facebook-logo { width: 36px; height: 36px; object-fit: contain; display: block; }
.youtube-logo { width: 40px; height: auto; object-fit: contain; display: block; }
.link-content { display: flex; flex: 1 1 auto; min-width: 0; flex-direction: column; gap: 3px; }
.link-title { font-size: 16px; line-height: 1.35; font-weight: 630; letter-spacing: -.01em; }
.link-url { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.external-icon { color: #8a9388; flex: 0 0 24px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin-left: 3px; }
.site-footer { display: flex; flex-direction: column; align-items: center; padding-top: 37px; }
.footer-line { height: 1px; width: 35px; background: #c5d6bc; }
.site-footer p { margin: 15px 0 0; color: #657164; font-size: 12px; letter-spacing: .015em; }
@media (max-width: 380px) {
 .page { padding: 28px 17px 22px; }
 .top-rule { margin-bottom: 28px; }
 .links { margin-top: 34px; gap: 11px; }
 .link-card { padding: 15px 13px; gap: 10px; min-height: 85px; }
 .icon-outer { width: 40px; height: 40px; flex-basis: 40px; }
 .link-url { font-size: 12px; }
 .external-icon { flex-basis: 20px; width: 20px; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
 .link-card { transition: none; }
 .link-card:hover, .link-card:active { transform: none; }
}