.portfolio-page { min-height: 100vh; padding: clamp(48px, 8vw, 112px) 0; background: var(--bg, #080d0b); }
.portfolio-head { max-width: 900px; margin-bottom: clamp(48px, 7vw, 88px); }
.portfolio-footer { border-top:1px solid var(--line); background:var(--bg-alt); }
.portfolio-footer__in { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:92px; padding-block:20px; color:var(--fg-muted); font-size:.83rem; }
.portfolio-footer__in .logo { color:var(--fg); }
.portfolio-footer__in > a:last-child { color:var(--fg); text-decoration:none; font-weight:600; }
.portfolio-footer__in > a:last-child span { color:var(--accent); }
.portfolio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.portfolio-grid[hidden], .portfolio-detail[hidden] { display: none !important; }
.portfolio-card { overflow: hidden; background: var(--surface, #111917); color: var(--fg, #f1f5f3); border: 1px solid var(--line, #1f2e28); border-radius: var(--r-lg, 16px); }
.portfolio-card__visual { display:block; position:relative; aspect-ratio:1600/740; overflow:hidden; background:#123522; }
.portfolio-card__badge { position:absolute; left:16px; bottom:16px; padding:8px 11px; border:1px solid rgba(255,255,255,.25); border-radius:999px; background:rgba(5,13,9,.78); color:#f1f5f3; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.portfolio-card__body { padding: 24px; }
.portfolio-card__body h3 { margin: 0 0 10px; }
.portfolio-card__body h3 a { color: var(--fg, #f1f5f3); }
.portfolio-card__body p { margin: 0; color: var(--fg-muted, #a5b2ab); }
.portfolio-card__eyebrow, .portfolio-detail__eyebrow { margin: 0 0 10px; color: var(--accent, #12c466); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-message { color: var(--fg-muted, #a5b2ab); }
.portfolio-detail { max-width: 1120px; }
.portfolio-detail__back { display: inline-block; margin-bottom: 28px; color: inherit; font-weight: 700; }
.portfolio-detail__notice { margin: 28px 0; padding: 16px 20px; border-left: 3px solid var(--accent, #12c466); color: var(--fg-muted, #b4c0b8); background: var(--surface, #111917); }
.portfolio-custom-content { display: grid; gap: 32px; margin-top: 36px; }
.portfolio-custom-cover { display: block; width: 100%; max-height: 640px; object-fit: cover; }
.portfolio-custom-text { max-width: 780px; color: var(--fg-muted, #b4c0b8); line-height: 1.75; white-space: pre-line; }
.portfolio-custom-text p, .portfolio-pdf__description { margin: 0; }
.portfolio-custom-text--quote { padding: 20px 24px; border-left: 3px solid var(--accent, #12c466); color: var(--fg, #f1f5f3); background: var(--surface, #111917); }
.portfolio-pdf { overflow: hidden; border: 1px solid var(--line, #1f2e28); border-radius: var(--r-lg, 16px); background: var(--surface, #111917); }
.portfolio-pdf__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; }
.portfolio-pdf__head h3 { margin: 0; }
.portfolio-pdf__description { margin-top: 8px; color: var(--fg-muted, #a5b2ab); }
.portfolio-pdf__preview { display: block; width: 100%; height: min(78vh, 900px); min-height: 480px; border: 0; border-top: 1px solid var(--line, #1f2e28); background: #fff; }
.case-intro { max-width:780px; margin:30px 0 48px; color:var(--fg-muted,#b4c0b8); font-size:1.08rem; }
.case-moments { display:grid; gap:56px; }
.case-moment { overflow:hidden; border:1px solid var(--line,#1f2e28); border-radius:var(--r-lg,16px); background:var(--surface,#111917); }
.case-moment__head { display:flex; align-items:end; justify-content:space-between; gap:16px; padding:24px 26px 16px; }
.case-moment__number { color:var(--accent,#12c466); font-size:.68rem; font-weight:700; letter-spacing:.16em; }
.case-moment__head h3 { margin:7px 0 0; font-size:clamp(1.35rem,2.5vw,1.8rem); }
.case-moment__tag { color:var(--fg-muted,#a5b2ab); font-size:.76rem; }
.studio-tools { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; padding:13px 24px; border-block:1px solid var(--line,#1f2e28); color:var(--fg-muted,#bec9c2); font-size:.76rem; }
.studio-tools__label { margin-right:4px; color:var(--accent,#12c466); font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.studio-tools > span:not(.studio-tools__label) { display:inline-flex; align-items:center; gap:7px; }
.tool-icon { width:14px; height:14px; display:inline-grid; place-items:center; color:var(--accent,#12c466); }
.tool-icon--track { border:2px solid currentColor; border-radius:50%; box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#12c466) 20%,transparent); }
.tool-icon--poly { border:1.5px solid currentColor; clip-path:polygon(50% 0,100% 36%,77% 100%,15% 82%,0 26%); background:color-mix(in srgb,var(--accent,#12c466) 28%,transparent); }
.tool-icon--arrow { font-style:normal; font-size:18px; line-height:1; }
.tool-icon--note { border:1px solid currentColor; border-radius:3px; font-size:9px; font-style:normal; font-weight:700; }
.case-board { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(230px,.7fr); gap:0; align-items:stretch; }
.tactic-pitch { display:block; width:100%; height:auto; min-height:260px; background:#0c1711; }
.tactic-pitch--small { width:100%; height:100%; min-height:0; object-fit:cover; }
.pitch-bg { fill:#16452f; }
.pitch-lines { fill:none; stroke:rgba(232,244,235,.68); stroke-width:2; }
.pitch-dot { fill:#e8f4eb; }
.player circle { stroke:#f2f5ef; stroke-width:2.5; }
.player text { fill:white; font:700 11px/1 sans-serif; text-anchor:middle; dominant-baseline:middle; }
.player--home circle { fill:#15477a; }
.player--away circle { fill:#19753f; }
.mark-poly { fill:#d7f36b; fill-opacity:.13; stroke:#d7f36b; stroke-width:3; stroke-dasharray:9 6; }
.mark-zone { fill:url(#hatch); stroke:#d7f36b; stroke-width:2; }
.mark-arrow { fill:none; stroke:#d7f36b; stroke-width:4; stroke-linecap:round; }
.mark-track { fill:none; stroke:#59d5d0; stroke-width:3; stroke-dasharray:7 7; stroke-linecap:round; }
.callout rect { fill:#09130e; fill-opacity:.94; stroke:#d7f36b; stroke-width:1.5; }
.callout text { fill:#f2f5ef; font:600 13px/1 sans-serif; }
.case-comment { display:flex; flex-direction:column; padding:25px; border-left:1px solid var(--line,#1f2e28); background:var(--surface-2,#151f1a); }
.case-comment__icon { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--accent,#12c466); border-radius:5px; color:var(--accent,#12c466); font-size:.8rem; font-weight:700; }
.case-comment__label { margin:17px 0 7px; color:var(--accent,#12c466); font-size:.67rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.case-comment > p:last-of-type { margin:0; color:var(--fg,#eaf0ec); line-height:1.65; }
.case-comment__meta { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:auto; padding-top:24px; color:var(--fg-muted,#a5b2ab); font-size:.67rem; }
.legend-dot { width:9px; height:9px; border:1px solid white; border-radius:50%; }
.legend-dot--home { background:#15477a; }
.legend-dot--away { margin-left:7px; background:#19753f; }
.case-disclosure { margin-top:28px; color:var(--fg-muted,#a5b2ab); font-size:.84rem; }
@media (max-width:900px) { .portfolio-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .case-board { grid-template-columns:1fr; } .case-comment { border-left:0; border-top:1px solid var(--line,#1f2e28); } }
@media (max-width:600px) { .portfolio-grid { grid-template-columns:1fr; } .studio-tools { gap:12px; } .case-moment__head { align-items:start; flex-direction:column; } .tactic-pitch { min-height:0; } .case-comment { padding:20px; } }

.tactic-pitch--vertical { max-height:760px; }
.vertical-arrow { fill:none; stroke:#f2f5ef; stroke-width:4; stroke-linecap:round; }
.target-player { fill:#ee7b38; stroke:#f2f5ef; stroke-width:3; }
.target-ball { fill:#fff; }
.callout__small { font-size:11px !important; font-weight:400 !important; }
.case-board--vertical { grid-template-columns:minmax(0,1.1fr) minmax(250px,.8fr); align-items:center; }
@media (max-width:900px) { .case-board--vertical { grid-template-columns:1fr; } .tactic-pitch--vertical { width:min(100%,560px); margin-inline:auto; } }

/* AI-generated fictional match stills with Studio-style overlays */
.photo-frame { position:relative; align-self:stretch; min-width:0; overflow:hidden; background:#13281d; }
.photo-frame img { display:block; width:100%; height:auto; aspect-ratio:1600/740; object-fit:cover; }
.photo-frame--small { width:100%; height:100%; }
.photo-frame--small img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
.photo-annotations { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.photo-ring { fill:none; stroke:#d7f36b; stroke-width:4; vector-effect:non-scaling-stroke; }
.photo-arrow { fill:none; stroke:#d7f36b; stroke-width:4; stroke-linecap:round; marker-end:url(#photoArrowTip); vector-effect:non-scaling-stroke; }
.photo-track { fill:none; stroke:#36d9e5; stroke-width:4; stroke-dasharray:9 8; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.photo-chain { fill:none; stroke:#d7f36b; stroke-width:4; stroke-dasharray:7 6; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.photo-zone { fill:#d7f36b; fill-opacity:.17; stroke:#d7f36b; stroke-width:3; vector-effect:non-scaling-stroke; }
.photo-label rect { fill:#08120c; fill-opacity:.94; stroke:#d7f36b; stroke-width:2; vector-effect:non-scaling-stroke; }
.photo-label text { fill:#f4f7f2; font:700 15px/1 sans-serif; }
.photo-frame__tag { position:absolute; left:12px; bottom:12px; padding:6px 9px; border:1px solid rgba(255,255,255,.35); border-radius:999px; background:rgba(5,13,9,.78); color:#fff; font-size:.62rem; letter-spacing:.04em; }
.case-board--photo-overview { grid-template-columns:minmax(0,1.3fr) minmax(270px,.85fr); align-items:center; }
.case-board--photo-overview .photo-frame { align-self:center; }
.match-overview { min-width:0; padding:18px; border-left:1px solid var(--line,#1f2e28); background:var(--surface-2,#151f1a); }
.match-overview__label { margin:0 0 10px; color:var(--accent,#12c466); font-size:.65rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.match-overview .tactic-pitch--vertical { width:min(100%,360px); max-height:600px; margin-inline:auto; }
.match-overview .case-comment { margin:12px -18px -18px; border-left:0; border-top:1px solid var(--line,#1f2e28); }
@media (max-width:900px) { .case-board--photo-overview { grid-template-columns:1fr; align-items:stretch; } .case-board--photo-overview .photo-frame { align-self:stretch; } .match-overview { border-left:0; border-top:1px solid var(--line,#1f2e28); } }
@media (max-width:600px) { .portfolio-footer__in { align-items:flex-start; flex-direction:column; justify-content:center; gap:10px; } }