/* A candidate portfolio, presented as a guided sequence of project chapters. */
html { scroll-padding-top: 0; }
body.career-portfolio { --highlight-yellow: #ffe600; --yellow-control-shadow: 0 2px 1px #15151566, 0 5px 8px #15151538; --name-color: var(--ink); --louvro-ruby: #a61d35; background: var(--ink); padding-bottom: 95px; }
.career-portfolio>main { background: var(--paper); }
.candidate-cover { max-width: 1644px; margin: auto; padding: 44px var(--gutter) 46px; min-height: min(720px,calc(100svh - 85px)); display: flex; flex-direction: column; scroll-margin-top: 0; overflow: hidden; }
.candidate-cover:focus { outline: none; }
.cover-topline { display: flex; justify-content: space-between; align-items: center; gap: 25px; }
.cover-topline p { font-size: 10px; letter-spacing: .11em; }
.cover-topline>span { font-size: 8px; letter-spacing: .1em; color: #796e60; }
.cover-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: 3%; align-items: center; flex: 1; padding-top: 35px; }
.cover-copy { position: relative; }
.cover-hello { font-size: 13px; margin-bottom: 18px; }
.career-portfolio .cover-copy h1 { display: block; color: var(--ink); filter: none; text-shadow: none; font-family: var(--font); font-size: clamp(90px,9vw,145px); font-weight: 500; letter-spacing: -.07em; line-height: .96; margin: 0; }
.career-portfolio .cover-copy h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: inherit; text-shadow: none; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .career-portfolio .cover-copy h1 { background: none; -webkit-text-fill-color: currentColor; text-shadow: none; filter: none; animation: none; }
  .career-portfolio .cover-copy h1 em { text-shadow: none; }
}
@media print, (forced-colors: active) {
  .career-portfolio .cover-copy h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); filter: none; text-shadow: none; animation: none; }
  .career-portfolio .cover-copy h1 em { text-shadow: none; }
}
.cover-spark { position: relative; display: inline-block; vertical-align: top; top: -.08em; margin-left: .28em; color: var(--highlight-yellow); text-shadow: none; font-size: .45em; line-height: 1; letter-spacing: 0; animation: slow-rotate 28s linear infinite; }
.cover-spark svg { display: block; width: 1em; height: 1em; filter: drop-shadow(0 2px 1px #15151580) drop-shadow(0 5px 5px #15151545); }
.career-portfolio .project-visual .project-open,
.career-portfolio .project-visual:hover .project-open,
.career-portfolio .louvro-project-open,
.career-portfolio .comparison-handle,
.career-portfolio .project-cursor { background: var(--highlight-yellow); color: var(--ink); box-shadow: var(--yellow-control-shadow); }
.career-portfolio .card-louvro { position: relative; }
.louvro-project-stage { position: relative; }
.louvro-project-open { min-width: 44px; min-height: 44px; }
.louvro-project-open:hover { transform: rotate(45deg); }
.career-portfolio .case-next button span,
.career-portfolio .video-play>span { color: var(--highlight-yellow); -webkit-text-stroke: .3px #777; }
.cover-statement { max-width: 350px; font-size: 13px; line-height: 1.85; margin-top: 27px; color: #5f574d; }
.cover-motion { min-width: 0; position: relative; width: calc(100% + 8%); margin-left: -2%; mix-blend-mode: multiply; }
.cover-motion-stage { aspect-ratio: 848/480; mask-image: radial-gradient(ellipse closest-side,#000 58%,#000c 72%,transparent 100%); }
.cover-motion video { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.76); }
.cover-motion-error { font-size: 11px; text-align: center; padding: 15px; }
.cover-motion-error a { text-decoration: underline; text-underline-offset: 4px; }
.career-portfolio .work-section { scroll-margin-top: 25px; padding-top: 30px; }
.career-portfolio .project-card { scroll-margin-top: 30px; }
.career-portfolio .project-card+.project-card { margin-top: 65px; }
.project-contribution { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; margin: 25px 0 0; padding: 22px 0 0; border-top: 1px solid #15151525; }
.project-contribution dt { font-size: 7px; letter-spacing: .09em; color: #8a7561; margin-bottom: 9px; }
.project-contribution dd { margin: 0; font-size: 12px; line-height: 1.75; max-width: 340px; }
.career-portfolio .flow-project-meta { padding-top: 18px; justify-content: start; }
.career-portfolio .flow-project-meta>p:first-child { display: none; }
.career-portfolio .candidate-contact { max-width: none; margin: 0; padding: 48px var(--gutter) 26px; border-color: var(--line); background: var(--ink); color: var(--paper); scroll-margin-top: 35px; }
.candidate-contact>.contact-panel,.candidate-contact>.footer-meta { max-width: 1500px; margin-left: auto; margin-right: auto; }
.contact-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; align-items: start; }
.contact-panel h2 { font-size: clamp(56px,6vw,92px); font-weight: 450; letter-spacing: -.065em; line-height: 1; }
.contact-options { min-width: 0; }
.contact-option { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 23px 0; border-bottom: 1px solid var(--line); }
.contact-option:first-child { border-top: 1px solid var(--line); }
.contact-option small { display: block; font-size: 11px; color: var(--muted); }
.contact-option strong { display: block; font-size: clamp(22px,2.4vw,32px); font-weight: 450; letter-spacing: -.035em; margin-top: 8px; white-space: nowrap; }
.contact-option-arrow { width: 43px; height: 43px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #15151535; border-radius: 50%; font-size: 23px; transition: background .3s,color .3s,rotate .3s; }
.contact-option:hover .contact-option-arrow { background: var(--ink); color: var(--paper); rotate: 8deg; }
.career-portfolio .footer-meta { margin-top: 36px; border-color: var(--line); }
.career-portfolio .footer-meta p { color: var(--muted); }
.walkthrough-nav { position: fixed; z-index: 30; bottom: 14px; left: 50%; translate: -50% 0; width: min(calc(100% - 48px),1000px); min-height: 64px; padding: 11px 17px; display: flex; align-items: center; gap: 22px; border: 1px solid #15151525; border-radius: 10px; background: #fbf9f3f2; color: var(--ink); backdrop-filter: blur(20px); box-shadow: 0 7px 35px #15151514; }
.walkthrough-nav>button:first-child { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid #15151540; border-radius: 50%; background: none; font-size: 20px; flex-shrink: 0; }
.walkthrough-nav>button:disabled { opacity: .25; cursor: default; }
.walkthrough-position { display: flex; align-items: baseline; gap: 6px; font-size: 12px; white-space: nowrap; }
.chapter-total { font-size: 8px; color: #8b7e6c; }
#chapter-title { font-size: 10px; margin-left: 10px; }
.walkthrough-nav nav { display: flex; justify-content: center; gap: 25px; flex: 1; font-size: 9px; color: #8b7e6c; }
.walkthrough-nav nav a { position: relative; padding: 10px 0; }
.walkthrough-nav nav a[aria-current=step] { color: var(--ink); }
.walkthrough-nav nav a[aria-current=step]:after { content: ''; position: absolute; height: 3px; width: 3px; border-radius: 50%; background: var(--accent); left: calc(50% - 1px); bottom: 1px; }
#chapter-next { display: flex; align-items: center; justify-content: space-between; gap: 22px; background: var(--highlight-yellow); color: var(--ink); padding: 11px 16px; border-radius: 5px; box-shadow: var(--yellow-control-shadow); min-width: 112px; min-height: 39px; font-size: 10px; margin-left: auto; }
#chapter-next>span { font-size: 17px; }
#chapter-contact { display: none; }
.walkthrough-nav:has([data-chapter-link="contact"][aria-current="step"]) { background: var(--ink); color: var(--paper); border-color: var(--line); }
.walkthrough-nav:has([data-chapter-link="contact"][aria-current="step"])>button:first-child { border-color: var(--line); }
.walkthrough-nav:has([data-chapter-link="contact"][aria-current="step"]) :is(.chapter-total,nav) { color: var(--muted); }
.walkthrough-nav:has([data-chapter-link="contact"][aria-current="step"]) nav a[aria-current="step"] { color: var(--paper); }
@media(max-width:1100px) {
  .cover-grid { gap: 3%; grid-template-columns: .9fr 1.1fr; }
  .career-portfolio .cover-copy h1 { font-size: 10vw; }
  .walkthrough-nav { gap: 17px; }
  .walkthrough-nav nav { gap: 18px; }
}
/* A compact desktop opening keeps the first project close to the motion study. */
@media screen and (min-width:761px) {
  .candidate-cover { min-height: 0; padding-top: clamp(28px,3vw,44px); padding-bottom: 20px; }
  .cover-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 2.5%; flex: none; padding-top: clamp(28px,3vw,44px); }
  .career-portfolio .cover-copy h1 { font-size: clamp(76px,10.2vw,154px); }
  .cover-statement { max-width: 365px; font-size: 14px; line-height: 1.75; margin-top: 25px; }
  .cover-spark { font-size: .4em; }
  .cover-motion { width: 112%; margin-left: -6%; }
  .cover-motion-stage { mask-image: radial-gradient(ellipse closest-side,#000 65%,#000e 80%,transparent 100%); }
  .career-portfolio .work-section { padding-top: 8px; }
  .career-portfolio .card-loev { padding-top: 20px; }
}
@media(max-width:760px) {
  body.career-portfolio { padding-bottom: 87px; }
  .candidate-cover { min-height: 0; padding-top: 30px; padding-bottom: 28px; }
  .cover-topline { gap: 15px; align-items: start; }
  .cover-topline p { font-size: 8px; letter-spacing: .06em; max-width: 210px; line-height: 1.8; }
  .cover-topline>span { font-size: 7px; padding-top: 3px; }
  .cover-grid { display: block; padding-top: 24px; }
  .cover-hello { font-size: 11px; margin-bottom: 13px; }
  .career-portfolio .cover-copy h1 { font-size: clamp(76px,21vw,118px); line-height: .96; }
  .cover-spark { font-size: .5em; }
  .cover-statement { font-size: 11px; line-height: 1.8; max-width: 310px; margin-top: 22px; }
  .cover-motion { width: calc(100% + 20px); margin-left: -10px; margin-top: 23px; }
  .career-portfolio .work-section { padding-top: 22px; scroll-margin-top: 20px; }
  .career-portfolio .project-card { scroll-margin-top: 20px; }
  .career-portfolio .project-card+.project-card { margin-top: 41px; }
  .project-contribution { display: block; padding-top: 7px; margin-top: 20px; }
  .project-contribution>div { display: grid; grid-template-columns: 88px 1fr; gap: 15px; padding: 12px 0; border-bottom: 1px solid #15151518; }
  .project-contribution dt { font-size: 6px; line-height: 1.7; margin-bottom: 0; padding-top: 2px; }
  .project-contribution dd { font-size: 10px; line-height: 1.7; }
  .career-portfolio .flow-project-meta { padding-top: 13px; }
  .career-portfolio .candidate-contact { scroll-margin-top: 25px; padding-top: 32px; }
  .contact-panel { display: block; }
  .contact-panel h2 { font-size: 54px; margin-bottom: 28px; }
  .contact-option { padding: 21px 0; gap: 15px; }
  .contact-option small { font-size: 10px; }
  .contact-option strong { font-size: 23px; }
  .contact-option-arrow { width: 37px; height: 37px; font-size: 20px; }
  .career-portfolio .footer-meta p,.career-portfolio .back-to-top { font-size: 7px; }
  .walkthrough-nav { bottom: 11px; width: calc(100% - 28px); min-height: 59px; padding: 10px 12px; gap: 13px; border-radius: 8px; }
  .walkthrough-nav nav { display: none; }
  .walkthrough-nav>button:first-child { width: 30px; height: 30px; font-size: 18px; }
  .walkthrough-position { font-size: 11px; gap: 4px; }
  #chapter-title { font-size: 9px; margin-left: 6px; }
  #chapter-next { min-width: 92px; gap: 14px; min-height: 35px; font-size: 9px; padding: 8px 11px; }
  .walkthrough-nav:has(#chapter-contact:not([hidden])) { gap: 8px; }
  .walkthrough-nav:has(#chapter-contact:not([hidden])) .walkthrough-position { display: grid; grid-template-columns: max-content 1fr; gap: 0 4px; line-height: 1.25; }
  .walkthrough-nav:has(#chapter-contact:not([hidden])) #chapter-title { grid-column: 1/-1; margin: 2px 0 0; }
  .walkthrough-nav:has(#chapter-contact:not([hidden])) #chapter-next { min-width: 62px; gap: 10px; padding: 8px 10px; }
  #chapter-contact { display: flex; align-items: center; gap: 6px; min-height: 35px; padding: 8px 9px; border: 1px solid #15151540; border-radius: 5px; background: transparent; color: inherit; font-size: 9px; white-space: nowrap; flex-shrink: 0; }
  #chapter-contact>span { font-size: 12px; }
}
@media(max-width:370px) {
  .cover-topline p { font-size: 7px; }
  .career-portfolio .cover-copy h1 { font-size: 76px; }
  .cover-statement { font-size: 10px; }
  .contact-option strong { font-size: 21px; }
  .walkthrough-nav { gap: 10px; padding-left: 10px; padding-right: 10px; }
  #chapter-title { font-size: 8px; }
  #chapter-next { min-width: 78px; font-size: 8px; gap: 10px; }
  #chapter-contact { font-size: 8px; }
}
@media print {
  .folio-bar,.walkthrough-nav,.project-cursor,.project-dialog,.start-portfolio,.flow-project-link,.project-open,.home-film-toggle { display: none!important; }
  body.career-portfolio { padding-bottom: 0; background: white; }
  .candidate-cover,.career-portfolio .project-card { break-before: page; }
  .candidate-cover { min-height: 0; }
  .candidate-contact { break-before: page; }
  .career-portfolio .project-visual { transform: none!important; }
  .career-portfolio .projects-grid { display: block; }
  .career-portfolio .floating-object { animation: none!important; }
}

/* LOEV's opening cover pairs a project portrait with the actual app interface. */
.portfolio-flow .loev-feature { height: 650px; aspect-ratio: auto; background: radial-gradient(ellipse at 30% 75%,#53354b70,transparent 58%),#211723; color: #FAF2F5; text-align: left; }
.loev-feature-copy { position: absolute; top: 12%; left: 6%; z-index: 4; }
.loev-feature-kicker { display: block; font-size: 8px; letter-spacing: .13em; color: #d1b5c6; }
.loev-feature-title { display: block; margin-top: 35px; font-size: clamp(66px,7.5vw,112px); font-weight: 500; letter-spacing: -.07em; line-height: .96; }
.loev-feature-title em { font-family: var(--serif); font-weight: 400; }
.loev-feature-portrait { position: absolute; top: 7%; right: 5%; bottom: 7%; width: 40%; overflow: hidden; background: #ece7e4; border-radius: 3px; transform: rotate(3deg); box-shadow: 0 22px 50px #08050b45; }
.loev-feature-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 24%; transition: scale 1.2s var(--ease); }
.loev-feature-phone { position: absolute; left: 42%; bottom: 6%; width: 23%; max-width: 280px; aspect-ratio: 516/1048; border: 6px solid #0b080c; border-radius: 28px; background: #0b080c; overflow: hidden; transform: rotate(-8deg); box-shadow: 12px 24px 40px #08040c80; z-index: 3; }
.loev-feature-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.loev-feature-tools { position: absolute; left: 6%; bottom: 8%; display: flex; gap: 8px; font-size: 8px; letter-spacing: .08em; color: #e2cdda; }
.loev-feature-tools>span { padding: 9px 13px; border: 1px solid #f1dbea45; border-radius: 30px; }
.loev-feature .project-open { z-index: 5; background: #faf2f5; color: #211723; }
@media(hover:hover) and (pointer:fine) { .loev-feature:hover .loev-feature-portrait img { scale: 1.035; } }
.motion-off .loev-feature:hover .loev-feature-portrait img { scale: 1; }
@media(max-width:760px) {
  .portfolio-flow .loev-feature { height: clamp(520px,110vw,660px); }
  .loev-feature-copy { left: 7%; top: 7%; }
  .loev-feature-kicker { font-size: 6px; letter-spacing: .09em; }
  .loev-feature-title { margin-top: 23px; font-size: clamp(52px,12vw,68px); }
  .loev-feature-portrait { top: 32%; right: 4%; bottom: 6%; width: 58%; transform: rotate(3deg); }
  .loev-feature-phone { left: 7%; bottom: 6%; width: 35%; max-width: 190px; border-width: 4px; border-radius: 21px; }
  .loev-feature-phone img { border-radius: 16px; }
  .loev-feature-tools { left: auto; right: 6%; top: 8%; bottom: auto; flex-direction: column; gap: 6px; font-size: 5px; }
  .loev-feature-tools>span { padding: 6px 9px; }
}
@media(prefers-reduced-motion:reduce) { .loev-feature:hover .loev-feature-portrait img { scale: 1; } }

/* Silent product films keep their own white video surface. */
.portfolio-video-scene { display: grid; grid-template-columns: 1fr .85fr; align-items: center; gap: 7%; padding: 35px 6%; min-height: 650px; border-radius: 4px; overflow: hidden; }
.loev-film-scene { background: #201721; color: var(--paper); }
.video-scene-kicker { font-size: 8px; letter-spacing: .13em; line-height: 1.8; }
.video-scene-title { font-size: clamp(52px,6.3vw,96px); letter-spacing: -.065em; line-height: .98; margin-top: 38px; }
.video-scene-title>em { font-family: var(--serif); font-weight: 400; }
.video-scene-note { font-size: 7px; line-height: 1.9; letter-spacing: .1em; margin-top: 43px; opacity: .6; }
.portfolio-player { width: 100%; min-width: 0; }
.portfolio-video-surface { position: relative; width: 100%; aspect-ratio: 9/16; overflow: hidden; background: #fff; }
.portfolio-video-surface video { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-loev-player { width: min(100%,255px); justify-self: center; }
.home-loev-player .portfolio-video-surface { aspect-ratio: 886/1920; background: #080608; border: 5px solid #0a070a; border-radius: 24px; box-shadow: 0 28px 50px #0004; }
.portfolio-player .home-film-toggle { position: static; width: 100%; padding: 15px 0 11px; border-radius: 0; border-bottom: 1px solid #15151555; background: none; color: inherit; font-size: 10px; backdrop-filter: none; }
.home-loev-player .home-film-toggle { border-color: #f3f0e955; }
.portfolio-player .home-film-error { margin-top: 13px; font-size: 10px; line-height: 1.8; }
.louvro-film-scene { align-items: stretch; gap: 0; padding: 0; background: #fff; min-height: 650px; }
.louvro-film-scene .portfolio-scene-copy { position: relative; isolation: isolate; overflow: hidden; padding: 50px 11%; background: var(--louvro-ruby); color: #FFF3EC; }
.louvro-film-scene .portfolio-scene-copy:before { content: ''; position: absolute; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 22% 30%,#ed819450 0,transparent 48%),radial-gradient(ellipse at 76% 79%,#43051f66 0,transparent 54%); filter: blur(38px); }
.louvro-video-panel { display: grid; place-items: center; min-width: 0; padding: 40px 8%; background: #fff; color: var(--ink); }
.louvro-film-scene .video-scene-title { font-size: clamp(43px,4.4vw,68px); margin-top: 27px; }
.home-louvro-product { width: min(100%,360px); height: 290px; object-fit: contain; margin-top: 16px; filter: drop-shadow(9px 18px 14px #422c1e25); }
.louvro-film-scene .video-scene-note { margin-top: 18px; }
.home-louvro-player { width: min(100%,320px); justify-self: center; }
.flow-film .portfolio-player { max-width: 100%; }
@media(max-width:760px) {
  .portfolio-video-scene { display: block; min-height: 0; padding: 24px 22px; }
  .video-scene-kicker { font-size: 6px; letter-spacing: .06em; }
  .video-scene-title { font-size: 38px; margin-top: 17px; line-height: 1.05; }
  .loev-film-scene .video-scene-title br { display: none; }
  .loev-film-scene .video-scene-title em { margin-left: .1em; }
  .loev-film-scene .video-scene-note { font-size: 6px; margin-top: 13px; }
  .home-loev-player { width: 72%; max-width: 250px; margin: 23px auto 0; }
  .home-loev-player .portfolio-video-surface { border-width: 4px; border-radius: 20px; }
  .portfolio-player .home-film-toggle { font-size: 9px; padding-top: 12px; }
  .louvro-film-scene .portfolio-scene-copy { display: grid; grid-template-columns: 1fr .7fr; align-items: center; gap: 9px; }
  .louvro-film-scene .video-scene-kicker { grid-column: 1/-1; }
  .louvro-film-scene .video-scene-title { font-size: clamp(27px,7.7vw,42px); margin-top: 7px; }
  .home-louvro-product { width: 100%; height: 120px; margin-top: 0; }
  .louvro-film-scene .video-scene-note { grid-column: 1/-1; margin-top: 3px; font-size: 6px; }
  .home-louvro-player { width: 77%; max-width: 260px; margin: 22px auto 0; }
}

/* The single current Louvro film is in the hero; packaging gets the full row. */
.career-portfolio .louvro-inline-details { display: block; }

/* All four product families sit beside the automatically playing Louvro film. */
.home-louvro-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 23px; margin-top: 25px; max-width: 475px; }
.home-louvro-products figure { min-width: 0; margin: 0; }
.home-louvro-products img { height: 135px; width: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px #ffe5dc55) drop-shadow(0 15px 12px #36000f66) drop-shadow(0 30px 25px #350a1e30); transition: translate .7s var(--ease); }
.home-louvro-products figcaption { font-size: 9px; margin-top: 10px; text-align: center; color: inherit; }
@media(hover:hover) and (pointer:fine) { .home-louvro-products figure:hover img { translate: 0 -7px; } }
.motion-off .home-louvro-products figure:hover img { translate: none; }
@media(max-width:760px) {
  .louvro-film-scene { padding: 0; }
  .louvro-film-scene .portfolio-scene-copy { display: block; padding: 24px 22px; }
  .louvro-video-panel { padding: 30px 22px; }
  .louvro-video-panel .home-louvro-player { margin: 0 auto; }
  .home-louvro-products { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 20px; }
  .home-louvro-products img { height: 80px; filter: drop-shadow(0 1px 1px #ffe5dc55) drop-shadow(0 8px 7px #36000f66); }
  .home-louvro-products figcaption { font-size: 8px; line-height: 1.6; margin-top: 9px; }
  .louvro-film-scene .video-scene-note { margin-top: 18px; }
}
@media(prefers-reduced-motion:reduce) { .home-louvro-products figure:hover img { translate: none; } }

/* Keep the approved email readable on narrow phones. */
.contact-option[href^="mailto:"] strong { white-space: normal; overflow-wrap: anywhere; }