/* Flashlight reveal, inspired by NZSloh's Where's Waldo in the Dark. */
.project-list{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product){
  --lamp-x:50%;--lamp-y:35%;--lamp-on:0;--lamp-radius:240px;
  position:relative;isolation:isolate;overflow:hidden;
  background:#10253f;color:#eef3fa;border:1px solid #35516e;border-radius:12px;
  box-shadow:0 12px 30px #0b1b3033;transition:border-color .25s,box-shadow .25s;
}
:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),
    rgb(255 249 225 / calc(var(--lamp-on) * .34)) 0%,
    rgb(255 232 160 / calc(var(--lamp-on) * .16)) 38%,transparent 78%),
    radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),
    rgb(16 37 63 / calc(.8 - var(--lamp-on) * .8)) 0%,
    rgb(16 37 63 / calc(.8 - var(--lamp-on) * .8)) 38%,
    rgb(16 37 63 / calc(.8 - var(--lamp-on) * .65)) 68%,
    rgb(16 37 63 / .8) 100%);
}
:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(circle 340px at var(--lamp-x) var(--lamp-y),#ffe6a350,transparent 85%);
  opacity:var(--lamp-on);transition:opacity .25s;
}
:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image):is(:hover,:focus-within){--lamp-on:1;border-color:#a99b69;box-shadow:0 15px 35px #0b1b3055,0 0 24px #e3b70514}
.category-card:hover{background:#10253f}
.category-card .category-tag,.category-card .category-bottom{position:relative;z-index:2}
.category-card .category-tag,.category-card .category-bottom p{color:#b9cbe0}
.category-card .category-symbol{background:#203d5d;color:#e9cf7f}
.category-card .round-arrow{color:#10253f}
.project-showcase-card .project-card-heading,.project-list .project .card-body{position:relative;z-index:2}
.project-list .project .card-image{background:#10253f}
.project-list .project .card-kicker,.project-list .project .card-body p,.project-showcase-card .project-card-heading>span{color:#b9cbe0}
.project-list .project .card-more{color:#f1cf61;border-color:#ffffff20}
.project-list .project .card-body h3 a:hover{color:#ffe190}
.project-showcase-card .project-badge{top:14px;left:14px;border:1px solid #ffffff24;background:#203d5d;color:#e9cf7f;width:34px;height:34px;z-index:3}
.project-showcase-card .project-badge svg{width:18px;height:18px}
.project-showcase-card .project-card-heading{padding-top:58px}
.project-showcase-card .project-card-photo img,.project-list .project .card-image img{transition:none}
.project-showcase-card:hover .project-card-photo img,.project-list .project:hover .card-image img{transform:none}
:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image):focus-within{--lamp-x:50%;--lamp-y:25%;--lamp-radius:420px}
@media(hover:none),(pointer:coarse){
  :is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image){--lamp-on:.45;--lamp-radius:320px}
  :is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image):active{--lamp-on:1}
}
@media(max-width:600px){.project-list{gap:20px}.project-showcase-card{--lamp-radius:220px}}
@media(prefers-reduced-motion:reduce){:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image),:is(.project-showcase-card,.project-list .editorial-card.project,.category-card,.home .editorial-card.product .card-image)::before{transition:none}}

.home .editorial-card.product .card-body{position:relative;z-index:2}
.home .editorial-card.product .card-image{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);--lamp-x:50%;--lamp-y:35%;--lamp-radius:240px}
.home .editorial-card.product .card-kicker,.home .editorial-card.product .card-body p{color:var(--on-navy-muted)}
.home .editorial-card.product .card-price,.home .editorial-card.product .card-more{color:#f1cf61}
.home .editorial-card.product .call-price{background:var(--accent);color:var(--navy)}
.home .editorial-card.product:hover .card-image img{transform:none}

/* A soft overhead light remains visible before the pointer enters the card. */
.home :is(.project-showcase-card,.category-card,.editorial-card.product .card-image){--lamp-on:.2}
.home :is(.project-showcase-card,.category-card,.editorial-card.product .card-image)::before{
  background:radial-gradient(ellipse 85% 70% at 50% 0%,#ffe6a34d,transparent 85%);
  opacity:1;
}
.home :is(.project-showcase-card,.category-card,.editorial-card.product .card-image)::after{
  background:
    radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),
      rgb(255 249 225 / calc(var(--lamp-on) * .3)) 0%,
      rgb(255 232 160 / calc(var(--lamp-on) * .14)) 38%,transparent 78%),
    radial-gradient(ellipse 80% 65% at 50% 12%,#ffe6a31c,transparent 85%),
    radial-gradient(circle var(--lamp-radius) at var(--lamp-x) var(--lamp-y),
      rgb(16 37 63 / calc(.48 - var(--lamp-on) * .48)) 0%,
      rgb(16 37 63 / calc(.48 - var(--lamp-on) * .48)) 38%,
      rgb(16 37 63 / calc(.58 - var(--lamp-on) * .43)) 68%,
      rgb(16 37 63 / .58) 100%);
}
.home :is(.project-showcase-card,.category-card,.editorial-card.product .card-image):is(:hover,:focus-within){--lamp-on:1}
@media(hover:none),(pointer:coarse){.home :is(.project-showcase-card,.category-card,.editorial-card.product .card-image){--lamp-on:.4}}

/* Compact cards on the projects archive. */
.projects-archive .project-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}
.projects-archive .project-list .editorial-card.project::before,.projects-archive .project-list .editorial-card.project::after{content:none}
.projects-archive .project-list .editorial-card.project,.projects-archive .project-list .editorial-card.project:is(:hover,:focus-within,:active){box-shadow:none;border-color:#35516e}
.projects-archive .project-list .card-image{aspect-ratio:16/9}
.projects-archive .project-list .card-image img{height:100%;width:100%;object-fit:cover;filter:none;opacity:1}
.projects-archive .project-list .card-body{padding:16px}