/* Project portfolio. The artwork and cards are confined to the cases section. */
#main .folio { --rule:var(--line); --wash:var(--surface); --soft:var(--muted); }
#main .folio section {padding:0;background:transparent}
#main .folio .folio-intro {display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:clamp(32px,5vw,88px);padding:20px 0 58px}
#main .folio .folio-kicker {display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--accent);margin:0 0 15px;letter-spacing:.02em}
.folio-kicker::before {content:"";width:22px;height:2px;background:currentColor}
.folio-actions {display:flex;align-items:center;flex-wrap:wrap;gap:4px 25px}
#main .folio-actions button {font-size:16px;min-height:44px;color:var(--soft);padding:6px 0}
#main .folio-actions button:hover {color:var(--text);text-decoration:underline}
#main .folio h1 {font-size:clamp(52px,6.25vw,90px);line-height:.99;letter-spacing:-.065em;text-wrap:balance;font-weight:470}
#main .folio h1 em {color:var(--accent);font:inherit}
#main .folio .folio-deck {font-size:clamp(17px,1.38vw,21px);line-height:1.55;max-width:49ch;color:var(--soft);margin:24px 0}
#main .folio .folio-jump,#main .folio .folio-link {display:inline-flex;align-items:center;gap:14px;color:var(--accent);font-size:16px;font-weight:500;min-height:44px;padding:6px 0}
#main .folio .folio-jump {color:var(--text);border-bottom:1px solid var(--accent)}
#main .folio .folio-link:hover,#main .folio .folio-jump:hover {color:var(--accent);text-decoration:underline;text-underline-offset:5px}
#main .folio .folio-feature {color:#faf8ff;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;position:relative;isolation:isolate;overflow:hidden;min-height:330px;padding:clamp(21px,2.4vw,38px);border:1px solid #62577b;border-radius:6px;background:radial-gradient(ellipse at 88% 43%,#514178 0%,#302a4d 36%,#1b192c 67%,#191a25 100%)}
.folio-feature::before,.folio-feature::after {content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.folio-feature::before {background-image:url('/assets/cases/lumi-orbit.svg');background-repeat:no-repeat;background-position:calc(100% + 65px) 49%;background-size:auto 118%;transition:transform .45s ease}
.folio-feature::after {background:linear-gradient(90deg,rgba(23,21,37,.68),rgba(23,21,37,.38) 39%,transparent 66%)}
a.folio-feature:hover::before {transform:scale(1.035)}
#main .folio-feature-top,#main .folio-feature-end {display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px;line-height:1.35;gap:15px}
.folio-feature-top>span:first-child,.folio-feature-top>span:last-child {text-shadow:0 1px 5px #151023}
#main .folio-feature .folio-lumi {width:clamp(145px,14vw,215px);height:auto;margin:23px 0 9px}
.folio-feature-fact {display:grid;gap:0}
#main .folio-feature-fact strong {font-size:clamp(56px,5.8vw,82px);line-height:1.03;letter-spacing:-.07em;font-weight:480}
#main .folio-feature-fact>span {font-size:16px;line-height:1.5;max-width:29ch}
#main .folio-feature-end {margin-top:22px;padding-top:13px;border-top:1px solid #ffffff51;font-weight:450}
#main .folio-feature-end span {font-size:21px;line-height:1}
#main .folio .folio-library {border-top:1px solid var(--rule);padding:44px 0 75px}
.folio-toolbar {display:flex;align-items:end;justify-content:space-between;gap:28px}
#main .folio-toolbar h2,#main .folio-related h2 {font-size:clamp(32px,3.6vw,50px);letter-spacing:-.05em;line-height:1.08}
#main .folio-toolbar h2 sup {font-size:.4em;font-weight:400;color:var(--soft);vertical-align:top;letter-spacing:-.03em}
#main .folio-toolbar .folio-kicker {margin-bottom:8px}
#main .folio-search {display:grid;gap:4px;width:min(340px,100%);font-size:14px;color:var(--soft)}
#main .folio-search input {min-height:46px;width:100%;border:1px solid var(--rule);background:var(--wash);border-radius:4px;color:var(--text);font-size:16px;padding:10px 14px}
.folio-search input::placeholder {color:var(--soft);opacity:1}
.folio-filters {display:flex;flex-wrap:wrap;gap:8px;margin:25px 0 12px}
#main .folio-filters button {border:1px solid var(--rule);color:var(--text);background:transparent;padding:9px 14px;border-radius:4px;font-size:15px;line-height:1.4;min-height:44px}
#main .folio-filters small {margin-left:5px;font-size:13px;font-variant-numeric:tabular-nums}
#main .folio-filters button:hover {border-color:var(--accent)}
#main .folio-filters [aria-pressed=true] {background:var(--accent);border-color:var(--accent);color:var(--bg)}
#main .folio .folio-count {font-size:14px;color:var(--soft);margin:0 0 18px;line-height:1.5}
.folio-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#main .folio-card {border:1px solid var(--rule);border-radius:5px;overflow:hidden;background:var(--wash);min-width:0;transition:border-color .22s}
#main .folio-card:hover,#main .folio-card:focus-within {border-color:var(--accent)}
#main .folio-card a {display:flex;flex-direction:column;align-items:stretch;height:100%;padding:clamp(19px,1.8vw,28px);color:var(--text)}
#main .folio-card a:focus-visible {outline-offset:-5px}
#main .folio-card-label {display:flex;justify-content:space-between;gap:10px;color:var(--soft);font-size:14px;line-height:1.35}
.folio-card-client {display:flex;align-items:center;gap:12px;min-height:40px;margin:20px 0 12px}
#main .folio-card-client>span:last-child {font-size:15px;font-weight:500;line-height:1.3}
.folio-brand {display:inline-flex;align-items:center;justify-content:center;width:92px;height:40px;padding:7px 9px;background:#fafafa;border-radius:3px}
.folio-brand img {width:100%;height:100%;object-fit:contain}
.folio-brand-dark {background:#252333}
#main .folio-card h3 {font-size:clamp(22px,1.8vw,28px);letter-spacing:-.035em;line-height:1.18;font-weight:480}
#main .folio .folio-card-summary {font-size:16px;line-height:1.55;margin:12px 0 24px;color:var(--soft)}
.folio-card-foot {display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:auto;padding-top:17px;border-top:1px solid var(--rule)}
.folio-card-foot>div {display:grid;gap:4px}
#main .folio-card-foot strong {font-size:clamp(21px,1.8vw,28px);font-weight:450;color:var(--accent);line-height:1.12;letter-spacing:-.035em}
#main .folio-card-foot small {font-size:14px;line-height:1.45;color:var(--soft)}
#main .folio .folio-go {display:grid;place-content:center;width:34px;height:34px;flex:none;border:1px solid var(--rule);border-radius:50%;font-size:18px}
.folio-card:hover .folio-go {background:var(--accent);color:var(--bg)}
.folio-empty {padding:32px;border:1px dashed var(--rule)}
#main .folio-empty p {margin:9px 0;color:var(--soft)}
#main .folio .folio-detail-intro {grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);padding-bottom:48px}
#main .folio-detail-intro h1 {font-size:clamp(39px,4.35vw,66px);line-height:1.04;max-width:21ch}
#main .folio-detail-intro .folio-feature {min-height:290px}
#main .folio-detail-intro .folio-feature-fact strong {font-size:clamp(40px,4vw,60px)}
.folio-fact {position:relative;display:flex;flex-direction:column;align-items:start;justify-content:flex-end;gap:6px;min-height:240px;padding:30px;border:1px solid var(--rule);border-top:3px solid var(--accent);background:var(--wash)}
#main .folio-fact .folio-kicker {margin:0 0 auto}
.folio-fact .folio-brand {margin:10px 0 4px}
#main .folio-fact>strong {font-size:clamp(32px,3.5vw,52px);line-height:1.07;letter-spacing:-.055em;font-weight:450;color:var(--accent)}
#main .folio-fact>span:last-child {font-size:17px;color:var(--soft)}
.folio-spec {display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-block:1px solid var(--rule);padding:24px 0;margin:0}
#main .folio dt {font-size:14px;color:var(--soft)}
#main .folio dd {font-size:17px;line-height:1.45;margin:4px 0 0;font-weight:480}
.folio-body {display:grid;grid-template-columns:minmax(190px,.43fr) minmax(0,1fr);gap:clamp(32px,6vw,100px);border-top:1px solid var(--rule);padding-top:44px}
.folio-spec+.folio-body {border-top:0}
.folio-passport {align-self:start;border-left:2px solid var(--accent);padding:4px 0 4px 20px}
.folio-passport dl {margin:18px 0 0}
.folio-passport dt:not(:first-child) {margin-top:18px}
#main .folio-contents a {display:block;padding:7px 0;color:var(--text);font-size:16px}
.folio-contents a:hover {text-decoration:underline}
#main .folio-narrative section {padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--rule)}
#main .folio-narrative h2 {font-size:clamp(27px,2.65vw,40px);line-height:1.16;margin-bottom:17px}
#main .folio-narrative p,#main .folio-steps li {max-width:68ch;font-size:18px;line-height:1.65;color:var(--soft);margin:12px 0 0}
#main .folio-narrative h3 {font-size:21px;line-height:1.3}
.folio-steps {margin:0;padding-left:1.5em}
.folio-steps li::marker {color:var(--accent)}
.folio-timeline {list-style:none;margin:0;padding:0}
.folio-timeline li {display:grid;grid-template-columns:105px 1fr;gap:16px;padding:17px 0}
#main .folio-timeline time {font-size:15px;color:var(--accent);padding-top:3px}
#main .folio-timeline p {margin-top:6px}
.folio-comparison {border:1px solid var(--rule);background:var(--wash);border-radius:4px;padding:0 clamp(15px,2.2vw,28px)}
.folio-comparison>div {padding:20px 0}
.folio-comparison>div+div {border-top:1px solid var(--rule)}
.folio-comparison dl {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:10px 0 0}
.folio-comparison dl>div:last-child dd {color:var(--accent)}
#main .folio-narrative .folio-note,#main .folio-screen figcaption {font-size:15px;color:var(--soft);line-height:1.55}
.folio-disclosure {border-left:2px solid var(--accent);background:var(--wash);padding:15px 18px;margin-top:20px}
#main .folio-disclosure summary {display:flex;justify-content:space-between;gap:15px;font-size:16px;line-height:1.5}
.folio-disclosure summary::after {content:"+"}.folio-disclosure[open] summary::after {content:"−"}
.folio-screen img {max-height:450px;object-fit:contain;background:var(--wash);width:100%;border:1px solid var(--rule)}
.folio-screen figcaption {margin-top:10px}
.folio-links {display:flex;flex-wrap:wrap;gap:4px 26px;justify-content:flex-end;margin:12px 0 32px}
#main .folio .folio-related {border-top:1px solid var(--rule);padding:38px 0 58px}
.folio-related>div:nth-child(2) {display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:22px 0 12px}
.folio-related>div>a {display:grid;grid-template-columns:1fr auto;align-content:start;gap:5px 16px;padding:20px;border:1px solid var(--rule);background:var(--wash)}
.folio-related>div>a:hover {border-color:var(--accent)}
#main .folio-related a>span {font-size:14px;color:var(--soft)}
#main .folio-related a>strong {grid-column:1;font-size:20px;line-height:1.3;font-weight:450}
.folio-related a>b {grid-column:2;grid-row:1/3;align-self:center;color:var(--accent)}
@media (max-width:1000px) {
  .folio-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #main .folio .folio-intro {gap:28px}
  .folio-feature::before {background-position:calc(100% + 95px) center}
}
@media (max-width:760px) {
  #main .folio .folio-intro {grid-template-columns:minmax(0,1fr);padding:8px 0 32px;gap:24px}
  #main .folio-detail-intro h1 {hyphens:auto;overflow-wrap:anywhere}
  #main .folio h1 br {display:none}
  #main .folio h1 br::after {content:" "}
  #main .folio h1 {font-size:clamp(41px,8.3vw,55px);line-height:1.03}
  #main .folio-detail-intro h1 {font-size:clamp(34px,7.2vw,46px)}
  #main .folio .folio-deck {margin:15px 0 12px}
  #main .folio .folio-feature {min-height:238px}
  .folio-feature::before {background-position:calc(100% + 54px) center}
  #main .folio-feature .folio-lumi {width:146px;margin:16px 0 8px}
  #main .folio-feature-fact strong {font-size:52px}
  #main .folio .folio-library {padding:30px 0 44px}
  .folio-toolbar {align-items:start;flex-direction:column;gap:16px}
  .folio-filters {margin:16px 0 10px}
  #main .folio-filters button {padding:7px 11px}
  .folio-body {grid-template-columns:1fr;gap:28px;padding-top:26px}
  .folio-spec {grid-template-columns:repeat(2,1fr);gap:20px 12px}
  .folio-fact {min-height:165px;padding:20px}
  .folio-contents {width:100%}
  .folio-related>div:nth-child(2) {grid-template-columns:1fr}
}
@media (max-width:550px) {
  .folio-grid {grid-template-columns:1fr}
  #main .folio-search {width:100%}
  #main .folio-feature-top {font-size:13px}
  .folio-feature::before {background-size:auto 104%;background-position:calc(100% + 68px) center}
  .folio-timeline li {grid-template-columns:1fr;gap:4px}
  #main .folio-narrative p,#main .folio-steps li {font-size:17px}
  .folio-links {justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce) {
  .folio-feature::before,#main .folio-card {transition:none}
  a.folio-feature:hover::before {transform:none}
}