/* Homepage refinements. The portrait and case-study pages are unchanged. */

#work .case {
  overflow: hidden;
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
}

#work .case::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transform: scaleY(.45);
  transform-origin: center;
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}

#work .case:is(:hover, :focus-visible, :focus-within, .is-selected) {
  background: #30332f;
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(199, 71, 56, .2);
}

#work .case:is(:hover, :focus-visible, :focus-within, .is-selected)::before {
  opacity: 1;
  transform: scaleY(1);
}

#work .case.is-selected {
  background: #343530;
}

#work .case:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

#work .case a:focus-visible {
  outline-color: #f1ebdd;
}

/* A single warm activation for the independent studio. */
#work #case-04::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 15px rgba(238, 182, 107, .15), 0 0 15px rgba(238, 182, 107, .16);
}

#work #case-04.is-selected::after { opacity: .18; }

#work #case-04:is(:hover, :focus-visible, :focus-within)::after {
  animation: epf-ignite .85s ease-out 1 both;
}

@keyframes epf-ignite {
  0% { opacity: 0; }
  34% { opacity: .72; }
  100% { opacity: .22; }
}

/* One glint across the upper edge, then the usual red card state remains. */
#work #case-05::after {
  content: "";
  position: absolute;
  top: 0;
  left: -56px;
  width: 56px;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #e7bf8b 50%, transparent);
  box-shadow: 0 0 7px rgba(239, 191, 132, .45);
}

#work #case-05:is(:hover, :focus-visible, :focus-within)::after {
  animation: five-after-glint .85s ease-out 1 both;
}

@keyframes five-after-glint {
  0% { left: -56px; opacity: 0; }
  20% { opacity: .75; }
  78% { opacity: .5; }
  100% { left: 100%; opacity: 0; }
}

/* A second dark chapter with a distinct, softer tone. */
#notes {
  position: relative;
  isolation: isolate;
  color: #f1ebdd;
  padding-top: 52px;
  padding-bottom: 76px;
}

#notes::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: #202522;
}

#notes .section-heading { border-top-color: #657068; }
#notes .meta,
#notes .eyebrow { color: #aeb8ae; }

#notes .note-entry {
  background: #2b312d;
  border-color: #59645b;
  color: #f1ebdd;
}

#notes .note-entry + .note-entry { margin-top: 18px; }

#notes .notes-list { display: grid; gap: 22px; }
#notes .note-entry + .note-entry { margin-top: 0; }
#notes .note-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 25%);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3vw, 38px);
  border-color: #4e5951;
}
#notes .note-entry:hover,
#notes .note-entry:focus-within {
  border-color: #c74738;
}
#notes .note-entry h3 { margin-top: 14px; margin-bottom: 11px; }
#notes .note-entry p { color: #c5ccc5; margin: 0 0 24px; }
#notes .note-thumb {
  display: block;
  width: 100%;
  height: clamp(130px, 15vw, 172px);
  object-fit: contain;
  opacity: .82;
  transition: opacity .18s ease, filter .18s ease;
}
#notes .note-entry:hover .note-thumb,
#notes .note-entry:focus-within .note-thumb {
  opacity: 1;
  filter: brightness(1.13);
}
@media(max-width: 650px) {
  #notes .note-entry { grid-template-columns: 1fr; }
  #notes .note-thumb { width: min(70%, 210px); height: 100px; justify-self: end; }
}
@media(prefers-reduced-motion: reduce) {
  #notes .note-thumb { transition: none; }
}

#notes .note-link { color: #f1ebdd; }
#notes .note-link:hover,
#notes .note-link:focus-visible { color: #f2aa96; }
#notes .note-link:focus-visible { outline-color: #f1ebdd; }

/* The homepage's interactive portrait is the only portrait. */
#about {
  display: block;
  padding-top: 72px;
  padding-bottom: 86px;
}

#about > div {
  max-width: 750px;
  margin-left: clamp(0px, 5vw, 68px);
}

@media (max-width: 760px) {
  #notes { padding-top: 44px; padding-bottom: 62px; }
  #notes .note-entry { padding: 24px; }
  #about { padding-top: 62px; padding-bottom: 72px; }
  #about > div { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #work .case,
  #work .case::before { transition: none; }
  #work #case-04:is(:hover, :focus-visible, :focus-within)::after {
    animation: none;
    opacity: .22;
  }
  #work #case-05:is(:hover, :focus-visible, :focus-within)::after { animation: none; }
}