/* Professional security portfolio: editorial typography and authored diagrams. */
:root { color-scheme:light; }
html, body { background:#f4f3ee; }
body { --ink:#182127; --muted:#59615f; --accent:#b33b2b; --line:#ccd0ca; color:var(--ink); font-weight:400; }
::selection { background:#e5b9af; color:#182127; }
.grain,.vignette,.reading-wash,.scene-cut { display:none !important; }
#photo-backdrop.has-photo { opacity:.06; }
#motion-surface { inset:50% 4.5% auto 54%; width:auto; height:auto; aspect-ratio:10/9; transform:translateY(-46%); background:transparent url('./assets/security-practice.svg') center/contain no-repeat; filter:none; opacity:1; }
#motion-surface[data-chapter] { filter:none; }
#atmosphere { position:absolute; inset:0; width:100%; height:100%; transform:none; opacity:1; transition:none; }
[data-practice-player]:not([data-state="ready"]) { opacity:0; }
[data-practice-player] { clip-path:inset(1px); }
.mobile-practice { display:none; }
.masthead { height:90px; padding:0 6.5%; background:#f4f3eef5; border-bottom:1px solid var(--line); }
.wordmark { font:600 16px 'Manrope',sans-serif; letter-spacing:-.5px; text-transform:none; }
.masthead-note { font:10px ui-monospace,SFMono-Regular,monospace; letter-spacing:1.3px; opacity:1; color:var(--muted); }
.header-actions { gap:32px; }
.text-button { font-size:12px; }
.menu-label { font-size:10px; letter-spacing:1.2px; }
.menu-icon i { background:var(--ink); }
#chapter-content { top:90px; bottom:68px; scrollbar-color:#bcc0ba transparent; }
.chapter { padding:44px 0 60px; min-height:100%; }
.intro { padding:0; isolation:isolate; }
.intro::before { display:none; }
.intro-content { width:100%; min-height:calc(100dvh - 158px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:34px 6.5% 40px; text-align:left; }
.intro-profile { width:53%; max-width:650px; position:relative; }
.intro .chapter-kicker { display:flex; align-items:center; gap:10px; margin:0 0 22px; color:var(--accent); font:10px/1.5 ui-monospace,SFMono-Regular,monospace; letter-spacing:1.2px; }
.status-square { width:6px; height:6px; background:var(--accent); flex-shrink:0; }
.intro-name { font:400 22px/1.3 'Manrope',sans-serif; letter-spacing:-.65px; margin:0 0 16px; }
.hero-title { font:500 clamp(70px,6.8vw,102px)/.99 'Manrope',sans-serif; letter-spacing:-.05em; color:var(--ink); text-transform:none; white-space:pre-line; width:auto; margin:0 0 22px -5px; }
.hero-title > span { display:block; }
.hero-accent { color:var(--accent); font-size:.48em; line-height:1.28; letter-spacing:.045em; text-transform:uppercase; }
.intro-role { font-size:16px; line-height:1.5; font-weight:500; margin:0 0 5px; }
.intro-company { font-size:14px; line-height:1.5; color:var(--muted); margin:0 0 17px; }
.intro-qualification { border-left:2px solid var(--accent); padding-left:15px; color:var(--muted); font-size:12px; line-height:1.9; }
.intro-qualification strong { display:block; color:var(--ink); font-size:13px; font-weight:500; }
.intro-scope { display:flex; flex-wrap:wrap; gap:38px; padding:18px 0 0; list-style:none; color:var(--muted); line-height:1.5; margin:19px 0 0; border-top:1px solid var(--line); }
.intro-scope li { font-size:11px; }
.intro-scope strong { display:block; color:var(--ink); font:500 26px/1.15 'Manrope',sans-serif; letter-spacing:-.8px; margin-bottom:3px; }
.intro-scope li:last-child strong { font-size:22px; padding-top:4px; letter-spacing:-.6px; }
.intro .intro-description { font-size:16px; line-height:1.65; max-width:450px; color:var(--ink); margin:22px 0; }
.intro-actions { display:flex; gap:30px; align-items:center; }
.intro-actions .journey-button,.story-next { min-height:44px; background:var(--accent); color:#fff; padding:12px 19px; border:1px solid var(--accent); font:500 12px/1.4 'DM Sans',sans-serif; letter-spacing:0; gap:26px; border-radius:0; }
.intro-actions .journey-button:hover,.story-next:hover { background:#922f22; border-color:#922f22; }
.journey-button .ui-chevron,.story-next .ui-chevron { color:currentColor; width:14px; height:14px; transition:transform .22s ease; }
.journey-button:hover .ui-chevron,.story-next:hover .ui-chevron { transform:translateX(3px); }
.intro-actions .text-button { font-size:12px; color:var(--ink); border-bottom:1px solid var(--line); }
.story-spread,.story-reverse,.growth-spread { display:block; padding:0 0 0 6.5%; }
.story-copy { display:block; width:51%; max-width:650px; padding:20px 34px 20px 0; }
.display-title,.career-panel h3 { font-family:'Manrope',sans-serif; font-weight:500; letter-spacing:-.045em; color:var(--ink); }
.story-copy .display-title,.growth-spread .display-title { font-size:clamp(42px,4.5vw,62px); line-height:1.08; margin:20px 0 28px; }
.story-chapter.is-active .story-copy > .eyebrow { animation:chapter-appear .45s ease both; }
.story-chapter.is-active .story-copy > .display-title { animation:chapter-appear .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes chapter-appear { from { opacity:0; translate:0 15px; } to { opacity:1; translate:0 0; } }
.about .story-copy,.experience .story-copy,.work .story-copy { width:52%; max-width:700px; }
.foundation-rail { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:25px 0; }
.foundation-rail > div { display:flex; gap:11px; padding:16px 12px 18px 0; min-width:0; }
.foundation-rail > div + div { border-left:1px solid var(--line); padding-left:13px; }
.foundation-number { color:var(--accent); font:10px/1.5 ui-monospace,SFMono-Regular,monospace; }
.foundation-detail { display:block; min-width:0; }
.foundation-detail small { display:block; color:var(--muted); font:9px/1.5 ui-monospace,SFMono-Regular,monospace; letter-spacing:.6px; margin:0 0 9px; }
.foundation-detail strong { display:block; color:var(--ink); font:500 12px/1.5 'DM Sans',sans-serif; overflow-wrap:anywhere; }
.eyebrow { color:var(--accent); font:10px/1.6 ui-monospace,SFMono-Regular,monospace; letter-spacing:1px; }
.story-lead { font-size:17px; line-height:1.8; color:var(--ink); }
.story-note { font-size:14px; line-height:1.9; color:var(--muted); }
.story-actions { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:24px; margin-top:27px; }
.quiet-link { color:var(--ink); font-size:12px; border-color:var(--line); padding:10px 0; }
.growth-intro { font-size:15px; }
.milestone-instruction { color:var(--muted); font-size:12px; line-height:1.6; }
.career-tabs { margin:22px 0 24px; border-color:var(--line); }
.career-tabs button { font:12px ui-monospace,SFMono-Regular,monospace; color:var(--muted); }
.career-tabs button[aria-selected="true"] { color:var(--accent); border-color:var(--accent); background:#b33b2b08; }
.experience .career-tabs { position:relative; margin:30px 0 22px; border:0; padding:0; overflow-x:auto; overflow-y:hidden; }
.experience .career-tabs::before,.experience .career-tabs::after { content:""; position:absolute; left:0; top:47px; height:1px; pointer-events:none; }
.experience .career-tabs::before { width:100%; background:var(--line); }
.experience .career-tabs::after { width:var(--milestone-progress,0%); height:2px; background:var(--accent); transition:width .45s ease; }
.experience .career-tabs button { position:relative; z-index:1; height:76px; padding:0 0 28px; border:0; background:transparent; text-align:left; font:500 23px/1.25 'Manrope',sans-serif; letter-spacing:-.8px; transition:color .25s ease,font-size .25s ease; }
.experience .career-tabs button::after { content:""; position:absolute; left:0; top:43px; width:7px; height:7px; border:1px solid var(--muted); border-radius:50%; background:#f4f3ee; }
.experience .career-tabs button[aria-selected="true"] { color:var(--accent); font-size:31px; }
.experience .career-tabs button[aria-selected="true"]::after { border-color:var(--accent); background:var(--accent); }
.career-panel { min-height:232px; }
.career-panel h3 { font-size:29px; line-height:1.25; }
.career-panel p { color:var(--muted); font-size:14px; line-height:1.85; }
.career-panel .milestone-note { color:var(--accent); font-size:11px; }
.speaking-proof { display:grid; grid-template-columns:130px minmax(0,1fr); gap:17px; align-items:start; border-top:1px solid var(--line); padding:16px 0; margin:2px 0 22px; }
.speaking-proof[hidden] { display:none; }
.speaking-proof .eyebrow { font-size:9px; }
.speaking-list { display:grid; gap:7px; }
.speaking-list > div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:11px; font-size:12px; line-height:1.45; }
.speaking-list span { color:var(--accent); font:10px/1.7 ui-monospace,SFMono-Regular,monospace; }
.speaking-list strong { color:var(--ink); font-weight:500; }
.ai-selection { gap:28px; padding:19px 0 23px; margin:27px 0 4px; background:transparent; border:0; border-top:2px solid var(--accent); border-bottom:1px solid var(--line); }
.selection-mark { flex-shrink:0; font:500 clamp(50px,5.5vw,78px)/.95 'Manrope',sans-serif; letter-spacing:-4px; color:var(--accent); }
.ai-selection p { max-width:300px; font-size:15px; line-height:1.55; color:var(--ink); }
.ai-work-list { margin:0 0 24px; }
.ai-work-list > div { display:flex; gap:18px; align-items:baseline; padding:10px 0; border-bottom:1px solid var(--line); }
.ai-work-list > div > span { color:var(--accent); font:10px ui-monospace,SFMono-Regular,monospace; }
.ai-work-list p { margin:0; color:var(--ink); font-size:13px; line-height:1.6; }
.ai-work-list.is-prose { font-size:14px; line-height:1.9; color:var(--muted); }
.contact .story-copy { width:46%; max-width:650px; padding-right:0; }
.contact .story-copy .display-title { font-size:clamp(62px,6.4vw,94px); line-height:1; max-width:650px; }
.contact .story-lead { font-size:19px; line-height:1.65; max-width:550px; }
.contact .story-note { max-width:560px; border-left:2px solid var(--accent); padding-left:15px; margin:25px 0; white-space:pre-line; }
body[data-chapter="contact"] #motion-surface { left:53%; right:5%; opacity:1; }
.mobile-closing-practice { display:none; }
.contact #contact-action { max-width:540px; margin-top:28px; }
.contact #contact-action .contact-link { display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; min-height:88px; padding:17px 21px; color:#fff; background:var(--ink); border:1px solid var(--ink); text-align:left; transition:background .25s ease,border-color .25s ease; }
.contact #contact-action .contact-link:hover { color:#fff; background:#293a42; border-color:#293a42; }
.contact #contact-action .contact-link span,.contact #contact-action .contact-link strong { color:#fff; }
.contact-link small { display:block; color:#d6ded7; font:9px/1.3 ui-monospace,SFMono-Regular,monospace; letter-spacing:1px; margin-bottom:9px; }
.contact-link strong { display:block; font:500 clamp(15px,1.45vw,21px)/1.25 'Manrope',sans-serif; overflow-wrap:anywhere; }
.contact-link .ui-chevron { width:20px; height:20px; rotate:-45deg; }
.contact-secondary { display:flex; gap:27px; margin-top:19px; }
.contact-secondary .quiet-link { color:var(--ink); font-size:12px; border-bottom:1px solid var(--line); }
.contact-secondary .quiet-link:hover { color:var(--accent); border-color:var(--accent); }
.social-links a { color:var(--muted); }
.navigation-bar { left:6.5%; right:6.5%; height:68px; background:#f4f3ee; border-color:var(--line); }
.motion-button,.edit-button,#chapter-label { color:var(--muted); font-size:9px; letter-spacing:.8px; }
.motion-bars i { background:var(--accent); }
.chapter-dot span { color:var(--muted); font:10px ui-monospace,SFMono-Regular,monospace; }
.chapter-dot i { background:#a6aea7; }
.chapter-dot.is-current span { color:var(--accent); }
.chapter-dot.is-current i { background:var(--accent); }
.chapter-controls button { color:var(--ink); background:none; border:0; min-width:58px; font-size:11px; }
.chapter-controls button:not(:disabled):hover { color:var(--accent); background:none; }
.journey-caption { display:none; }
.page-progress { z-index:30; }
.page-progress span { background:var(--accent); }
.prelude { background:#f4f3ee; color:var(--ink); }
.prelude-caption { color:var(--muted); }
.prelude-ring { border-color:var(--line); border-top-color:var(--accent); }
dialog { --ink:#182127; --muted:#59615f; --accent:#b33b2b; --line:#ccd0ca; color:var(--ink); color-scheme:light; background:#f4f3ee; border:1px solid var(--line); box-shadow:0 20px 80px #18212724; }
dialog::backdrop { background:#18212755; backdrop-filter:blur(3px); }
.index-dialog { background:#f4f3ee; }
.index-links .index-title { color:var(--ink); font-family:'Manrope',sans-serif; font-weight:400; }
.index-links .index-number { color:var(--accent); }
.index-links button i { color:var(--muted); }
.index-links .index-photo { display:none; }
.index-footer { display:flex; gap:30px; justify-content:center; align-items:center; flex-wrap:wrap; }
.archive-link { color:var(--muted); }
dialog .field-grid input,dialog .field-grid textarea { background:#fff; border-color:#a6aea7; color:var(--ink); }
dialog .solid-button { color:#fff; background:var(--ink); }
dialog .solid-button:hover { background:#374349; }
dialog .underlined-button { border-color:var(--line); }
.resume-dialog p,.experience-item .company { color:var(--muted); }
.resume-dialog h2 { font-weight:500; }
.project-art { background:#eeeee8; }
.project-art::before,.project-art::after,.art-caption { display:none; }
.project-art img { object-fit:contain; }
.art-number { color:var(--muted); background:transparent; }
.film-dialog { background:#f4f3ee; }
.film-header h2 { color:var(--ink); font-family:'Manrope',sans-serif; }
.film-footer,.film-footer a { color:var(--muted); }
.toast { background:var(--ink); color:#fff; }
@media (min-width:1700px) {
 .intro-content,.story-spread { padding-left:8%; }.intro-profile { max-width:700px; }.intro .intro-description { font-size:18px; max-width:490px; }.intro-scope { font-size:13px; }.intro-qualification { font-size:13px; }.intro-qualification strong { font-size:14px; }.hero-title { font-size:116px; }.story-copy { max-width:710px; } #motion-surface { right:6%; left:55%; }
}
@media (max-height:850px) and (min-width:761px) {
 .intro-content { padding-top:22px; padding-bottom:28px; }.intro .chapter-kicker { margin-bottom:16px; }.intro-name { font-size:21px; margin-bottom:12px; }.hero-title { font-size:72px; margin-bottom:18px; }.intro-company { margin-bottom:14px; }.intro .intro-description { font-size:14px; margin:17px 0; }.intro-scope { margin-top:15px; padding-top:13px; gap:34px; }.intro-scope strong { font-size:24px; }.intro-scope li:last-child strong { font-size:21px; padding-top:3px; }.story-copy .display-title { font-size:47px; }.chapter:not(.intro) { padding-top:30px; }.story-copy { padding-top:0; }
}
@media (max-height:750px) and (min-width:761px) {
 .intro-content { padding-top:20px; padding-bottom:22px; }.intro .chapter-kicker { margin-bottom:12px; }.intro-name { font-size:20px; margin-bottom:10px; }.hero-title { font-size:64px; margin-bottom:15px; }.intro-company { margin-bottom:12px; }.intro-qualification { line-height:1.7; }.intro-scope { padding-top:10px; margin-top:12px; }.intro-scope strong { font-size:26px; }.intro-scope li:last-child strong { font-size:22px; padding-top:4px; }.intro .intro-description { margin:15px 0; }
 .contact .story-copy .display-title { font-size:72px; margin:14px 0 18px; }.contact .story-lead { font-size:17px; line-height:1.55; }.contact .story-note { margin:17px 0; }.contact #contact-action { margin-top:18px; }.contact #contact-action .contact-link { min-height:78px; }.contact-secondary { margin-top:10px; }
}
@media (max-width:1100px) and (min-width:761px) {
 .masthead-note { display:none; }.intro-profile { width:58%; }.hero-title { font-size:72px; }.intro .intro-description { max-width:370px; }.story-copy,.about .story-copy,.experience .story-copy,.work .story-copy { width:55%; padding-right:28px; }.story-copy .display-title { font-size:44px; }.story-lead { font-size:15px; }#motion-surface { left:60%; right:1.5%; }.foundation-detail strong { font-size:11px; }.contact .story-copy { width:47%; }.contact .story-copy .display-title { font-size:clamp(55px,6vw,70px); }.contact .story-lead { font-size:16px; }body[data-chapter="contact"] #motion-surface { left:55%; right:2%; }
}
@media (max-width:760px) {
 .masthead { height:72px; padding:0 7%; }.wordmark { font-size:14px; }.masthead-note { display:none; }.header-actions { gap:22px; }.menu-label { display:none; }
 #chapter-content { top:72px; bottom:62px; padding-bottom:0; mask-image:none; }#motion-surface { display:none; }
 .chapter,.chapter:last-child { min-height:calc(100dvh - 134px); padding:40px 7% 65px; }
 .intro { padding:36px 7% 55px; }.intro-content { display:block; padding:0; min-height:0; }.intro-profile { width:100%; max-width:none; }
 .intro .chapter-kicker { font-size:9px; margin-bottom:24px; letter-spacing:.7px; }.intro-name { font-size:20px; margin-bottom:20px; }.hero-title { font-size:70px; line-height:1; margin:0 0 27px -3px; }
 .intro-role { font-size:14px; max-width:320px; }.intro-company { font-size:13px; margin-bottom:24px; }.intro-qualification { font-size:11px; padding-left:12px; }.intro-qualification strong { font-size:12px; }.intro-scope { gap:24px; margin-top:22px; padding-top:17px; }.intro-scope li { font-size:10px; }.intro-scope strong { font-size:25px; }.intro-scope li:last-child strong { font-size:21px; }.intro .intro-description { font-size:15px; margin:24px 0; max-width:360px; }
 .intro-actions { gap:24px; }.intro-actions .journey-button { font-size:11px; padding:12px 15px; gap:15px; }.intro-actions .text-button { font-size:11px; }
 .mobile-practice { display:block; position:relative; width:100%; aspect-ratio:10/9; margin-top:38px; background:url('./assets/security-practice.svg') center/contain no-repeat; }
 #mobile-atmosphere { display:block; position:absolute; inset:0; width:100%; height:100%; }
 .story-spread,.story-reverse,.growth-spread { display:block; padding:0; }.story-copy,.about .story-copy,.experience .story-copy,.work .story-copy,.contact .story-copy { width:100%; max-width:none; padding:0; }.story-copy .display-title { font-size:40px; margin:18px 0 27px; }.story-lead,.growth-intro { font-size:15px; line-height:1.8; }.story-note { font-size:13px; margin:18px 0; }.story-actions { gap:21px; flex-wrap:wrap; }.story-next { font-size:11px; }.career-panel { min-height:0; margin-bottom:25px; }.career-panel h3 { font-size:28px; }.career-panel p { font-size:14px; }.career-panel .milestone-note { font-size:11px; }.growth-spread .career-tabs { margin:18px 0 24px; }.growth-spread .milestone-instruction { margin-top:20px; }
 .foundation-rail { display:block; margin:24px 0; }.foundation-rail > div { display:flex; align-items:baseline; gap:10px; padding:11px 0; }.foundation-rail > div + div { padding-left:0; border-left:0; border-top:1px solid var(--line); }.foundation-number { min-width:20px; }.foundation-detail { display:grid; grid-template-columns:108px minmax(0,1fr); gap:8px; width:100%; align-items:baseline; }.foundation-detail small { font-size:9px; margin:0; }.foundation-detail strong { font-size:12px; }
 .experience .career-tabs { margin:25px 0 17px; }.experience .career-tabs button { font-size:17px; height:64px; padding-bottom:24px; }.experience .career-tabs button[aria-selected="true"] { font-size:23px; }.experience .career-tabs::before,.experience .career-tabs::after { top:37px; }.experience .career-tabs button::after { top:33px; }
 .selection-mark { font-size:48px; letter-spacing:-2.8px; }.ai-selection { gap:15px; padding:17px 0; }.ai-selection p { font-size:13px; }.ai-work-list p { font-size:12px; }.speaking-proof { display:block; padding:13px 0; }.speaking-proof .eyebrow { display:block; margin-bottom:10px; }.speaking-list > div { grid-template-columns:95px minmax(0,1fr); }.contact .story-copy .display-title { font-size:clamp(50px,14vw,68px); }.contact .story-lead { font-size:17px; }.contact .story-note { margin:18px 0; }.mobile-closing-practice { display:block; position:relative; width:100%; aspect-ratio:10/9; margin:5px 0 0; }.mobile-closing-practice hyperframes-player { display:block; position:absolute; inset:0; width:100%; height:100%; }.contact #contact-action { margin-top:7px; }.contact #contact-action .contact-link { min-height:78px; }.contact-link strong { font-size:15px; }.contact-secondary { gap:23px; flex-wrap:wrap; }
 .contact-link { font-size:16px; gap:16px; }.ai-selection { gap:20px; }.ai-selection p { font-size:13px; }
 .navigation-bar { left:7%; right:7%; height:62px; }.motion-button { font-size:8px; }.edit-button { display:none; }.chapter-nav { left:52%; gap:5px; }.chapter-dot { width:23px; }.chapter-dot span { font-size:9px; }.chapter-dot.is-current i { width:22px; }.chapter-controls button { min-width:28px; width:28px; padding:6px; }.chapter-controls .ui-chevron { width:13px; }
 .index-dialog { padding:26px 7%; }.index-links button { padding:20px 0; }.index-links .index-title { font-size:25px; }.index-links button i { display:none; }.index-links .ui-chevron { margin-left:auto; }.index-footer { gap:22px; justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .journey-button .ui-chevron,.story-next .ui-chevron,.experience .career-tabs button,.experience .career-tabs::after,.contact #contact-action .contact-link { transition:none; }.story-chapter.is-active .story-copy > .eyebrow,.story-chapter.is-active .story-copy > .display-title { animation:none; } }
@media print { html,body,dialog { --ink:#111; --muted:#333; --accent:#111; --line:#ccc; color:#111; background:white; }.resume-dialog p,.experience-item .company { color:#333; } }