@import url("style-base.css");

/* Portfolio V2 keeps the editorial template's layout and adds project-specific treatments. */
.hero{padding-top:clamp(5rem,11vw,9rem);padding-bottom:clamp(5rem,10vw,8rem)}
.hero-intro{color:var(--muted)}
.case-meta{font-size:13px;color:var(--muted);margin:20px 0 18px;line-height:1.7}
.case-hero .text-link{margin-top:2px}
.home-brief{max-width:690px}
.home-brief p{font-size:18px;color:var(--muted)}
.home-brief .text-link{margin-top:8px}
.resume-identity{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:24px 0 18px;color:var(--muted);font-size:14px}
.resume-identity strong{color:var(--ink);font-size:18px}
.resume-identity a{color:var(--ink);text-underline-offset:3px}
.resume-print{background:none;border:0;border-bottom:1px solid currentColor;cursor:pointer;color:var(--ink);font:inherit}
.ev-figure a{display:block}
.article-body .source-note a,.reading .source-note a{color:var(--accent)}
.case-spl code{background:transparent;padding:0;font:inherit;color:inherit}
@media(max-width:720px){.case-spl{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}}
.case-screenshot{margin:30px 0 46px}
.case-screenshot a{display:block;border:1px solid var(--rule);background:#13171a;overflow:hidden}
.case-screenshot a:hover,.case-screenshot a:focus-visible{border-color:var(--accent)}
.case-screenshot img{width:100%;height:auto}
.case-screenshot figcaption{font-size:13px;line-height:1.6;color:var(--muted);margin-top:10px}
.case-screenshot figcaption strong{color:var(--ink);font-weight:600}
.case-screenshot--mobile{max-width:390px}
.case-screenshot--mobile img{max-height:680px;object-fit:contain}
.case-chapter .text-link{margin-top:4px}
.ot-topology{margin:30px 0 42px;padding:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ot-topology__flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ot-topology__flow>div{min-width:0;padding:4px 18px;border-left:1px solid var(--rule)}
.ot-topology__flow>div:first-child{border-left:0;padding-left:0}
.ot-topology__flow span{display:block;color:var(--accent);font-size:10px;font-weight:650;letter-spacing:.08em;text-transform:uppercase}
.ot-topology__flow strong{display:block;margin:9px 0 4px;font-size:17px;line-height:1.25}
.ot-topology__flow small,.ot-topology figcaption{color:var(--muted);font-size:12px;line-height:1.55}
.ot-topology figcaption{margin-top:21px}
@media(max-width:600px){.ot-topology__flow{grid-template-columns:1fr}.ot-topology__flow>div,.ot-topology__flow>div:first-child{padding:12px 0;border-left:0;border-top:1px solid var(--rule)}.ot-topology__flow>div:first-child{border-top:0}}
.aws-path{margin:30px 0 36px;padding:20px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.aws-path ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.aws-path li{position:relative;min-width:0;padding-right:12px}
.aws-path li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:26px;color:var(--accent)}
.aws-path span{display:block;color:var(--accent);font:600 10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.aws-path strong{display:block;margin:9px 0 6px;font-size:15px;line-height:1.35}
.aws-path small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.aws-path figcaption{margin-top:18px;color:var(--muted);font-size:12px;line-height:1.5}
@media(max-width:720px){.aws-path ol{grid-template-columns:1fr;gap:22px}.aws-path li{padding:0 0 0 18px;border-left:2px solid var(--rule)}.aws-path li:not(:last-child)::after{content:"↓";left:0;right:auto;top:auto;bottom:-23px}.aws-path strong{font-size:16px}}
.source-links{padding-left:1.25rem}
.source-links li{margin-bottom:8px}
.architecture-map{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:27px 0;margin:28px 0}
.architecture-map__node{padding:13px 14px;background:var(--wash);min-width:0}
.architecture-map__node span{display:block;font:600 10px/1.5 ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.architecture-map__node strong{display:block;margin:8px 0 4px;font-size:17px;line-height:1.25}
.architecture-map__node small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.architecture-map__arrow{color:var(--accent);font-size:22px;align-self:center;text-align:center}
.architecture-map__flow,.architecture-map__secondary{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);gap:7px}
.architecture-map__secondary{margin-top:13px}
.architecture-map__bridge{font-size:12px!important;line-height:1.5!important;color:var(--muted)!important;margin:15px 0 0!important}
.architecture-map__secondary .architecture-map__node{border-left:2px solid var(--accent);background:transparent}
.architecture-map figcaption{font-size:12px;color:var(--muted);margin-top:15px}
@media(max-width:720px){.architecture-map__flow,.architecture-map__secondary{display:flex;flex-direction:column}.architecture-map__arrow{transform:rotate(90deg);line-height:1}.architecture-map__secondary{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}.case-screenshot--mobile{margin-left:auto;margin-right:auto}}
@media print{
  @page{size:A4;margin:12mm}
  .resume-page .page-hero{padding:0 0 9px}
  .resume-page .page-hero .eyebrow,.resume-page .page-hero h1,.resume-page .page-hero .lead{display:none}
  .resume-page .resume-identity{margin:0;gap:3px 18px;font-size:12px}
  .resume-page .resume-identity strong{flex-basis:100%;font-size:28px;line-height:1.2}
  .resume-page .reading{padding:16px 0 0}
  .resume-page .shell{padding:0}
  .resume-page .resume-top{grid-template-columns:1.5fr 1fr;gap:30px}
  .resume-page .resume-group{padding:15px 0;break-inside:avoid}
  .resume-page .resume-group h2{font-size:18px;margin:0 0 9px}
  .resume-page .resume-group h3{font-size:14px;margin:0 0 3px}
  .resume-page .resume-group small{font-size:11px}
  .resume-page .resume-group p,.resume-page .resume-group li{font-size:12px;line-height:1.5}
  .resume-page .resume-group p{margin-bottom:9px}
  .resume-page .resume-group ul{padding-left:18px;margin:9px 0 0}
  .resume-page .resume-group li{margin:0 0 5px}
}