/* Recruiter-focused visual refinement: preserves the original colors, typefaces, layout vocabulary and dark mode */
:root { scroll-padding-top: calc(var(--nav) + 18px); }
.hero { isolation: isolate; }
.hero-copy { max-width: 100%; }
.hero h1 { letter-spacing: -.055em; }
.hero-subtitle { max-width: 55ch; line-height: 1.57; }
.hero-positioning { max-width: 61ch; font-size: 1rem; font-weight: 640; line-height: 1.5; }
.section-heading h2 { line-height: 1.1; }
#work .lead { max-width: 66ch; line-height: 1.6; }
.project-card { min-height: 375px; transition: border-color .18s ease, box-shadow .18s ease; }
.project-card.featured { min-height: 405px; }
.project-card:hover { transform: none; box-shadow: var(--shadow-md); }
.project-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.project-card h3 { line-height: 1.18; text-wrap: balance; }
.project-copy { gap: 1rem; }
.project-card-role { display: none; }
.project-proof span { line-height: 1.4; }
.project-meta { border-top: 1px solid var(--border); padding-top: .75rem; }
.project-meta span:first-child { font-weight: 660; }
.project-toolbar { align-items: center; }
.filter-btn { min-height: 44px; }
.filter-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.creator-grid { gap: 1.4rem; }
.creator-panel h3 { text-wrap: balance; }
.creator-panel-family .creator-picture img { object-position: center; }
.creator-actions .button { min-height: 44px; }
.notes-grid { gap: 1.15rem; }
.note-card { border-color: var(--border); }
.note-card .note-link { min-height: 44px; }
.live-client-links { margin-block: .25rem 1rem; }
.live-client-links a { color: var(--primary); font-weight: 730; }
.modal-actions .button { min-height: 44px; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
@media (max-width: 760px) {
 .hero h1 { text-wrap: balance; }
 
 
 
 .project-card, .project-card.featured { min-height: 0; }
 .project-card .project-shot-frame { min-height: 175px; }
 #notes { display: block !important; }
 #notes .notes-grid { grid-template-columns: minmax(0,1fr) !important; }
 #notes .note-card { grid-template-columns: auto minmax(0,1fr) !important; }
 #notes .note-card h3 { line-height: 1.28; }
 #notes .note-card p { line-height: 1.58; }
}
@media (max-width: 410px) {
 
 
 
 .note-card { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
 .project-card, 
}

/* Search and answer-engine-readable on-page FAQ: visible text matches FAQPage JSON-LD. */
.portfolio-faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:1.75rem}
.portfolio-faq-item{padding:clamp(1.2rem,2.5vw,1.55rem);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm)}
.portfolio-faq-item h3{color:var(--heading);font-size:clamp(1.04rem,1.7vw,1.2rem);line-height:1.32;margin:0 0 .7rem}
.portfolio-faq-item p{color:var(--muted);font-size:.98rem;line-height:1.65;margin:0}
.portfolio-proof-direct{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;align-items:center;padding-top:.5rem}
.portfolio-proof-direct a{display:inline-flex;align-items:center;min-height:44px;padding:.68rem 1rem;border-radius:999px;background:var(--surface);color:var(--primary);font-weight:750;border:1px solid var(--border-strong);text-decoration:none}
.portfolio-proof-direct a:hover{border-color:var(--primary)}
.portfolio-proof-direct a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(max-width:760px){.portfolio-faq-grid{grid-template-columns:minmax(0,1fr)}.portfolio-proof-direct{align-items:stretch}.portfolio-proof-direct a{justify-content:center}}


/* Mobile refinement: the hamburger menu already provides all navigation links. */
@media(max-width:760px){
 .mobile-sticky-jump{display:none!important}
 .tabby-v3-launcher{width:48px;min-width:48px;height:48px;min-height:48px;justify-content:center;padding:.65rem;box-shadow:0 8px 26px rgba(76,29,149,.22)}
 body:not(.chat-away-from-hero):not(.tabby-v3-open) .tabby-v3-launcher{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 .hero{padding-top:calc(var(--nav) + 1.45rem)!important}
 
}

/* Professional real-world website screenshot presentation */
#work .project-card .project-shot-frame{background:var(--surface-raised);border-bottom:1px solid var(--border)}
#work .project-shot-frame img{object-position:center top}
#work .project-card:hover .project-shot-frame{border-color:var(--border-strong)}
@media(prefers-reduced-motion:reduce){#work .project-card .project-shot-frame img{transform:none!important}}

/* Accessible, deliberate project actions instead of an invisible card-sized button */
#projectsGrid .project-card{cursor:default}
#projectsGrid .project-open-btn{font:inherit;color:var(--heading);width:100%;padding:.85rem .2rem;border:0;border-top:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.75rem;text-align:left;min-height:52px}
#projectsGrid .project-open-btn span:last-child{color:var(--primary);font-weight:850;white-space:nowrap}
#projectsGrid .project-open-btn:hover span:last-child{text-decoration:underline;text-underline-offset:3px}
#projectsGrid .project-open-btn:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}
@media(max-width:760px){#projectsGrid .project-open-btn{min-height:52px}}

/* WCAG 2.2 keyboard/touch clarity: deliberate hit areas and contrast */
.proof-visual .browser-topbar .address{color:var(--heading)!important;font-weight:750}
#copyEmailBtn{min-width:100px;min-height:44px;padding:.65rem .8rem;display:inline-flex;align-items:center;justify-content:center;border-radius:8px}
.footer-links[aria-label="Contact and profile links"] a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem .1rem}
.footer-links[aria-label="Contact and profile links"]{gap:.5rem}

/* Case-study footer stays readable instead of squeezing status + CTA on phones */
section[id]{scroll-margin-top:calc(var(--nav) + 24px)}
@media(max-width:760px){
 #projectsGrid .project-open-btn{align-items:flex-start;flex-direction:column;gap:.45rem;padding:.85rem .2rem}
 #projectsGrid .project-open-btn > span:first-child{font-size:.82rem;line-height:1.45}
 #projectsGrid .project-open-btn > span:last-child{align-self:flex-end;font-size:.95rem;min-height:24px}
}

/* Project modal related notes: readable contrast in both themes, no washed-out chips */
.modal-related-notes .related-note-links { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:.65rem; }
.modal-related-notes .related-note-links a { display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:48px;padding:.75rem 1rem;border-radius:14px;font-size:.94rem;line-height:1.4;white-space:normal;text-wrap:pretty;text-decoration:none;box-shadow:none; }
html:not(.dark) .modal-related-notes .related-note-links a { background:#f0f5fc!important;color:#17324f!important;border:1px solid #b8cadd!important; }
html.dark .modal-related-notes .related-note-links a { background:#17243c!important;color:#f4f7ff!important;border:1px solid #4b617f!important; }
html:not(.dark) .modal-related-notes .related-note-links a:hover,html:not(.dark) .modal-related-notes .related-note-links a:focus-visible { background:#e0ebfb!important;color:#102744!important;border-color:#4169a1!important; }
html.dark .modal-related-notes .related-note-links a:hover,html.dark .modal-related-notes .related-note-links a:focus-visible { background:#263d60!important;color:#ffffff!important;border-color:#91b8ee!important; }
.modal-related-notes .related-note-links a:focus-visible { outline:3px solid #79bafa!important;outline-offset:3px; }
#projectsGrid .project-live-preview { display:inline-flex;align-items:center;gap:.45rem;margin:.85rem 0 .15rem;min-height:44px;padding:.6rem .9rem;max-width:100%;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface-raised);color:var(--heading);font-size:.9rem;font-weight:800;text-decoration:none;line-height:1.35; }
#projectsGrid .project-live-preview:hover { border-color:var(--primary);color:var(--primary); }
#projectsGrid .project-live-preview:focus-visible { outline:3px solid var(--primary);outline-offset:3px; }
@media(max-width:620px){.modal-related-notes .related-note-links{grid-template-columns:1fr}#projectsGrid .project-live-preview{width:100%;justify-content:center;text-align:center}}

/* Original design, focused maintenance and repair */
.client-website-shortcuts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.1rem 0 1.7rem;padding:.85rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-size:clamp(.875rem,1.1vw,.97rem)}
.client-website-shortcuts strong{color:var(--heading);font-weight:750}
.client-website-shortcuts a{color:var(--primary);text-decoration:underline;text-underline-offset:.24em;min-height:44px;display:inline-flex;align-items:center;padding:.2rem 0;font-weight:650}
.youtube-handle{margin:.1rem 0 .7rem;color:var(--muted);font-size:max(.875rem,14px);overflow-wrap:anywhere}
.skip-link:focus-visible,.skip-link:focus{background:#fff!important;color:#161c2f!important;outline:3px solid #1e4bc5!important;outline-offset:3px}
.reveal{opacity:1!important;transform:none!important}
.marquee-wrap{display:none!important}
.creator-panel-family{display:flex!important;flex-direction:column!important;min-width:0}
.creator-panel-family .creator-picture{display:block!important;flex:none!important;width:100%!important;max-width:100%;aspect-ratio:1200/630!important;height:auto!important;min-height:0!important;overflow:hidden;position:relative}
.creator-panel-family .creator-picture img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.creator-panel-family .creator-family-content{width:100%;min-width:0;box-sizing:border-box}
.creator-panel-family .creator-family-content h3{overflow-wrap:normal;word-break:normal}
.creator-panel-family .creator-picture.bigworld-image-unavailable{display:flex!important;align-items:center;justify-content:center;min-height:200px!important}
.creator-panel-family .creator-picture.bigworld-image-unavailable img{display:none!important}
.creator-panel-family .creator-picture.bigworld-image-unavailable::after{content:'Big World: stories and printables';font-weight:750;font-size:1.125rem;max-width:28ch;text-align:center;line-height:1.4}
@media(max-width:900px){.creator-panel-family{display:flex!important;flex-direction:column!important}}
@media(max-width:760px){}


/* Two distinct YouTube channels; uses the portfolio's original purple/blue palette. */
#creator .section-heading { margin: 0 auto 2rem; max-width: 880px; text-align: center; }
#creator .section-heading h2 { margin: .55rem 0 0; color: var(--heading); font-family: "Space Grotesk", Inter, sans-serif; font-size: clamp(1.8rem, 3.6vw, 2.85rem); line-height: 1.16; letter-spacing: -.035em; text-wrap: balance; }
#creator .creator-intro { max-width: 66ch; margin: .85rem auto 0; color: var(--muted); line-height: 1.65; font-size: clamp(1rem, 1.5vw, 1.1rem); }
#creator .creator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; align-items:stretch; }
#creator .creator-panel { display:flex; flex-direction:column; min-width:0; height:100%; padding:0; overflow:hidden; border:1px solid var(--border-strong); background:var(--surface-raised); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); }
#creator .creator-panel-tech { border-top:3px solid var(--primary); }
#creator .creator-panel-family { border-top:3px solid var(--primary-2); }
#creator .creator-tech-art, #creator .creator-picture { width:100%; height:auto; aspect-ratio:1200/630; min-height:0; border:0; border-radius:0; overflow:hidden; }
#creator .creator-tech-art { display:flex; align-items:center; gap:1.2rem; padding:clamp(1rem,3vw,2rem); color:white; background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.2),transparent 45%),linear-gradient(130deg,#39208b 0%,#6737bc 52%,#2563eb 100%); }
#creator .creator-tech-art strong { display:block; font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(1.3rem,2.7vw,1.9rem); letter-spacing:-.03em; }
#creator .creator-tech-art span:not(.creator-tech-logo):not(.creator-tech-play) { display:block; font-size:clamp(.78rem,1.3vw,.94rem); color:rgba(255,255,255,.95); line-height:1.5; }
#creator .creator-tech-logo { display:grid;place-items:center;flex:none;width:clamp(52px,7vw,78px);aspect-ratio:1;border:1px solid rgba(255,255,255,.5);border-radius:19px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(1.15rem,2.3vw,1.8rem);font-weight:800;background:rgba(255,255,255,.15); }
#creator .creator-tech-play { margin-left:auto;opacity:.85;font-size:1.7rem; }
#creator .creator-picture { display:block!important; flex:none!important; aspect-ratio:1200/630!important; position:relative; }
#creator .creator-picture img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
#creator .creator-family-content { display:flex;flex:1;flex-direction:column; gap:.25rem; min-width:0; padding:clamp(1.2rem,2.5vw,1.8rem); }
#creator .creator-kicker { align-self:flex-start; margin:0 0 .3rem; color:var(--primary); font-size:.82rem; line-height:1.4; font-weight:800; letter-spacing:.015em; }
#creator .creator-panel h3 { margin:0; font-size:clamp(1.25rem,2.1vw,1.55rem); line-height:1.26; color:var(--heading); font-family:"Space Grotesk",Inter,sans-serif; }
#creator .youtube-handle { margin:0 0 .75rem; font-size:.9rem; color:var(--muted); font-weight:650; overflow-wrap:anywhere; }
#creator .creator-family-content > p:not(.creator-kicker):not(.youtube-handle) { margin:0 0 .95rem; color:var(--muted); font-size:.96rem; line-height:1.6; }
#creator .creator-tags { display:flex;flex-wrap:wrap;gap:.42rem; margin:.2rem 0 1.1rem; }
#creator .creator-tags span { display:inline-flex; align-items:center; min-height:30px; padding:.32rem .65rem; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb,var(--primary) 6%,var(--surface-solid)); color:var(--heading); font-size:.77rem; line-height:1.3; font-weight:700; }
#creator .creator-actions { display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto; }
#creator .creator-actions .button { min-height:46px; white-space:normal; text-align:center; padding:.75rem .95rem; font-size:.87rem; line-height:1.35; }
#creator .creator-picture:focus-visible, #creator .creator-actions a:focus-visible { outline:3px solid var(--primary);outline-offset:3px; }
@media (max-width:850px) {
  #creator .creator-grid {grid-template-columns:1fr;max-width:650px;margin-inline:auto;}
  #creator .creator-tech-art {aspect-ratio:1200/540;}
}
@media (max-width:480px) {
  #creator .creator-family-content {padding:1.1rem;}
  #creator .creator-actions {flex-direction:column;}
  #creator .creator-actions .button {width:100%;}
  #creator .creator-tech-art {gap:.75rem;}
  #creator .creator-tech-play {font-size:1.25rem;}
}
/* The hero now introduces Tabitha, with case studies kept in the Work section. */
@media (min-width:1081px) {
 .hero {min-height: min(760px,100svh);}
 .hero-grid {grid-template-columns:minmax(0,1.1fr) minmax(330px,.9fr);}
 .hero-showcase-clean {width:100%;max-width:480px;justify-self:center;}
 .hero-showcase-clean .portrait-card {margin:0;}
}