/* Personal introduction, selected work, team strengths, then case studies. */
.portfolio-home { background: var(--paper); overflow-x: clip; }
.home-container, .intro-section { width: calc(100% - 128px); max-width: 1312px; margin-inline: auto; }
.intro-section { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(44px, 6vw, 100px); align-items: center; padding: 30px 0 40px; scroll-margin-top: 20px; }
.intro-section::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: calc((100vw - 100%) / 2); }
.intro-role { font-size: 13px; letter-spacing: 1.3px; color: var(--plum); }
.intro-copy h1 { font-family: var(--serif); font-size: clamp(52px, 5.1vw, 74px); font-weight: 400; letter-spacing: -2.5px; line-height: 1.1; margin: 17px 0 20px; }
.intro-statement { font-size: clamp(25px, 2.45vw, 35px); line-height: 1.3; letter-spacing: -.75px; max-width: 650px; }
.intro-details { margin-top: 26px; max-width: 700px; color: #5c4e66; font-size: 18px; line-height: 1.65; }
.intro-details p + p { margin-top: 20px; }
.intro-links { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-top: 25px; }
.intro-links a, .quiet-link { border-bottom: 1px solid #bd669f; padding: 3px 0; font-size: 16px; }
.intro-links span, .quiet-link span { margin-left: 9px; }
.intro-links a:hover, .quiet-link:hover { color: var(--plum); border-bottom-width: 2px; padding-bottom: 2px; }
.intro-portrait { justify-self: end; width: 100%; max-width: 400px; }
.intro-portrait img { width: 100%; height: auto; }
.portrait-scene { position: relative; isolation: isolate; --motion-x: 0px; --motion-y: 0px; --motion-turn: 0deg; }
.portrait-scene > img { position: relative; z-index: 1; mix-blend-mode: multiply; transform: scale(.9); transform-origin: center bottom; }
.portrait-scene > .portrait-foreground { position: absolute; inset: 0; z-index: 2; mix-blend-mode: normal; pointer-events: none; clip-path: polygon(4% 100%, 6% 97%, 5% 92%, 8% 84%, 8.5% 77%, 11% 73%, 8% 69%, 9% 64%, 12% 59%, 15% 53%, 17% 48%, 18% 44%, 21% 38%, 23% 32%, 25% 24%, 27% 18%, 29% 14%, 33% 10%, 38% 7%, 44% 5%, 49% 4.5%, 55% 5%, 59% 6.5%, 63% 10%, 67% 15%, 70% 22%, 73% 30%, 76% 39%, 79% 45%, 81% 49%, 84% 49%, 87% 50%, 90% 53%, 92% 58%, 94% 65%, 94% 71%, 92.5% 78%, 91% 85%, 89% 94%, 87% 100%); }
.portrait-atmosphere { position: absolute; inset: -16px -18px -8px; pointer-events: none; }
.portrait-wash { position: absolute; inset: 6% 6% 4%; border-radius: 48% 48% 3px 3px; background: #faf0f7; transform: translate(calc(var(--motion-x) * -.55), calc(var(--motion-y) * -.55)); }
.portrait-chimes { position: absolute; left: -8%; top: -4%; width: calc(108% + max(64px, (100vw - 1312px) / 2) - 18px); height: 108%; overflow: visible; }
.chime-rail { stroke: #c3b3a5; stroke-width: .65; stroke-linecap: round; }
.chain { fill: none; stroke-width: .65; stroke-linecap: round; }
.chain-lilac { stroke: #bca7ce; }
.chain-pink { stroke: #d3a9bb; }
.chain-butter { stroke: #c9b784; }
@media (max-width: 700px) { .portrait-atmosphere { inset: -8px -12px -4px; } }
@media (prefers-reduced-motion: reduce) { .portrait-wash { transform: none; } }
.team-section { background: #fff6d5; padding: 24px 0 28px; }
.team-section h2, .work-index h2 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.2; letter-spacing: -.8px; }
.team-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.team-columns article { padding: 0 30px; border-left: 1px solid #ddcfa3; }
.team-columns article:first-child { padding-left: 0; border-left: 0; }
.team-columns article:last-child { padding-right: 0; }
.team-columns h3 { font-family: var(--serif); font-size: 23px; line-height: 1.25; font-weight: 400; letter-spacing: -.35px; margin-bottom: 10px; }
.team-columns p { font-size: 17px; line-height: 1.5; color: #5c4e66; }
.work-index { padding-block: 26px 38px; scroll-margin-top: 25px; }
.work-index-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.work-index-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.work-index-grid > a { display: block; min-width: 0; --preview-accent: #d7c4e9; }
.work-index-grid > a:nth-child(2) { --preview-accent: #efbdd2; }
.work-index-grid > a:nth-child(3) { --preview-accent: #e4cf7a; }
.work-index-copy { border-left: 2px solid var(--preview-accent); padding-left: 16px; transition: border-color .2s; }
.work-preview { position: relative; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 18px; border-radius: 5px; background: var(--lilac); }
.work-preview img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.preview-remix { padding: 16px 16px 0; background: #f5e0ea; }
.preview-remix img { object-position: center top; border-radius: 3px 3px 0 0; }
.preview-ascension { padding: 16px 16px 0; background: #eae4f1; }
.preview-ascension img { object-fit: contain; border-radius: 3px 3px 0 0; }
.preview-note { position: absolute; bottom: 10px; left: 24px; padding: 3px 8px; border-radius: 4px; background: #fffbfef2; font-size: 11px; color: #66516e; }
.preview-booking img { object-position: center; }
.work-index-grid > a:hover .work-preview img { transform: scale(1.025); }
.work-index-grid > a:hover .work-index-copy { border-color: var(--plum); }
.work-index-grid h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; line-height: 1.3; margin-bottom: 6px; }
.work-index-grid h3 span { white-space: nowrap; font-family: 'DM Sans', sans-serif; }
.work-index-grid p { font-size: 15px; color: #5c4e66; line-height: 1.5; }
.work-index-grid > a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.case-gallery { padding-top: 38px; border-top: 1px solid var(--line); scroll-margin-top: 25px; }
.case-gallery .project-visual { border-radius: 6px; }
.case-gallery .project-description h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.7px; }
.case-study-link { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding-bottom: 4px; border-bottom: 1px solid #bd669f; color: var(--plum); font-size: 16px; }
.case-study-link:hover { border-bottom-color: currentColor; }
.portfolio-home footer h2 { font-family: var(--serif); font-size: 46px; letter-spacing: -1px; font-weight: 400; }
@media (max-width: 1000px) {
  .home-container, .intro-section { width: calc(100% - 64px); }
  .intro-section { gap: 35px; grid-template-columns: 1.5fr 1fr; }
  .intro-details { font-size: 17px; }
  .intro-portrait { align-self: start; margin-top: 22px; }
  .portrait-atmosphere { inset: -12px -2px -8px; }
  .portrait-chimes { width: calc(108% + 30px); }
  .team-columns article { padding-inline: 20px; }
  .team-columns h3 { font-size: 21px; }
  .work-index-grid { gap: 16px; }
  .work-index-copy { padding-left: 12px; }
}
@media (max-width: 700px) {
  .home-container, .intro-section { width: calc(100% - 44px); }
  .intro-section { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 20px 24px; }
  .intro-copy h1 { font-size: 54px; letter-spacing: -1.8px; }
  .intro-statement { font-size: 27px; letter-spacing: -.5px; }
  .intro-details { margin-top: 18px; font-size: 16px; line-height: 1.55; }
  .intro-details p + p { margin-top: 14px; }
  .intro-links { gap: 15px 26px; }
  .intro-links a { font-size: 15px; }
  .intro-portrait { max-width: 200px; justify-self: center; margin-top: 0; }
  .portrait-atmosphere { inset: -8px -12px -4px; }
  .portrait-chimes { width: calc(108% + (100vw - 200px) / 2 - 12px); }
  .team-section { padding-block: 28px; }
  .team-section h2, .work-index h2 { font-size: 30px; }
  .team-columns { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .team-columns article, .team-columns article:first-child { padding: 18px 0 0; border-left: 0; border-top: 1px solid #ddcfa3; }
  .team-columns article:first-child { border-top: 0; padding-top: 0; }
  .team-columns h3 { font-size: 23px; margin-bottom: 7px; }
  .work-index { padding-block: 28px; }
  .work-index-heading { align-items: baseline; flex-wrap: wrap; gap: 10px 16px; }
  .quiet-link { font-size: 14px; white-space: nowrap; }
  .quiet-link span { margin-left: 4px; }
  .work-index-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .work-index-grid h3 { font-size: 22px; }
  .work-index-grid p { font-size: 16px; }
  .case-gallery { padding-top: 28px; }
  .portfolio-home footer h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { .work-index-copy, .work-preview img { transition: none; } .work-index-grid > a:hover .work-preview img { transform: none; } }

/* Actual Phase 2 design replaces the conceptual Ascension preview. */
.work-preview.preview-ascension img{object-fit:cover;object-position:top;width:100%;height:100%}
.asc-home-preview{padding:30px 45px 0;height:530px;overflow:hidden;background:#eae4f1}
.asc-home-preview .cover-top{color:#51425c;margin-bottom:25px}
.asc-home-preview>img{width:90%;margin:auto;border-radius:8px 8px 0 0;box-shadow:0 10px 35px #44334e1a}
@media(max-width:600px){.asc-home-preview{height:310px;padding:20px 20px 0}.asc-home-preview .cover-top{font-size:10px;letter-spacing:1px;margin-bottom:20px}.asc-home-preview>img{width:100%}}

/* Light catches on individual strands, entirely behind the portrait. */
.chain-glint{pointer-events:none;fill:#c398d0;stroke:#fff9ef;stroke-width:.55}
.chime:nth-of-type(3n+1) .chain-glint{fill:#dba9c1}
.chime:nth-of-type(3n+2) .chain-glint{fill:#dcc57b}
.work-preview::after,.case-gallery .project-visual::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(240px circle at var(--light-x,50%) var(--light-y,50%),#fffaf34a,transparent 75%);opacity:0;transition:opacity .4s ease;z-index:4}
.work-preview.light-active::after,.case-gallery .project-visual.light-active::after{opacity:1}
.work-preview{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
.intro-links span,.quiet-link span,.case-study-link span,.work-index-grid h3 span{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .work-index-grid>a:hover .work-preview{transform:translateY(-4px);box-shadow:0 10px 25px #63497012}
 .case-gallery .project-visual{transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}
 .case-gallery .project-visual:hover{transform:translateY(-3px);box-shadow:0 12px 32px #63497012}
 .intro-links a:hover span,.quiet-link:hover span,.case-study-link:hover span,.work-index-grid>a:hover h3 span{transform:translateX(4px)}
}
.work-index-grid>a:focus-visible .work-preview,.case-gallery .project-visual:focus-visible{outline:2px solid #795d87;outline-offset:5px}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .chain-glint,.work-preview::after,.case-gallery .project-visual::after{display:none}
 .work-preview,.work-preview img,.case-gallery .project-visual,.intro-links span,.quiet-link span,.case-study-link span,.work-index-grid h3 span{transition:none!important;transform:none!important}
}
@media(hover:none),(pointer:coarse){.chain-glint,.work-preview::after,.case-gallery .project-visual::after{display:none}.work-index-grid>a:hover .work-preview img,.case-gallery .project-visual:hover{transform:none}}