/* Counsel bios. Warmer and closer than the home page.
   Section names work in legal terms first: In brief, Time at the bar, Selected cases, In chambers. */

.bio-page { background: #1c1b19 url(/assets/grain.png) repeat; }

/* ---------- smoke ---------- */
.smoke { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.smoke i {
  position: absolute; inset: -20% -40%;
  background: url(/assets/smoke.png) center / 60% auto repeat-x;
  filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(.9);
  mix-blend-mode: screen; opacity: .02;
  animation: drift 90s linear infinite;
}
.smoke i + i { opacity: .012; background-size: 85% auto; animation-duration: 140s; animation-direction: reverse; top: 10%; }
@keyframes drift { to { transform: translateX(25%); } }
@media (prefers-reduced-motion: reduce) { .smoke i { animation: none; } }
.bio-page main, .bio-page .foot, .bio-page .flutes { position: relative; z-index: 2; }

/* ---------- opening: portrait under the lamp ---------- */
.bio-open {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: end; gap: clamp(2rem, 6vw, 7rem);
  padding: 9rem clamp(1.25rem, 5vw, 5rem) 0; max-width: 1400px; margin: 0 auto;
}
@media (max-width: 820px) { .bio-open { grid-template-columns: 1fr; padding-top: 6.5rem; } }

.bio-portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #23211f; --mx: 50%; --my: 30%; }
/* Counsel are lit: the portrait comes up out of the dark once, then stays at full, true colour. */
.bio-portrait img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.12) saturate(.4); transition: filter 1.1s var(--ease); }
.bio-portrait.is-lit img { filter: none; }
.bio-blank { display: grid; place-items: center; height: 100%; font-family: var(--caps); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: #83786a; background: radial-gradient(circle at 50% 35%, #262422, #1c1b19 70%); }

.bio-title { padding-bottom: 2svh; }
.bio-title .brush { font-size: clamp(3.4rem, 8.6vw, 8rem); line-height: .95; }
.bio-line { font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; color: #ece5d9; margin-top: 2rem; max-width: 30rem; }
.bio-contact { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; font-size: 1.1rem; }
.bio-contact a { color: var(--paper); border-bottom: 1px solid #43403c; padding-bottom: .2rem; transition: color .3s, border-color .3s; }
.bio-contact a:hover { color: var(--foil); border-color: var(--foil-dim); }

/* ---------- shared section frame ---------- */
.bio-notes, .bio-pepeha, .bio-credits, .bio-work, .bio-talk {
  max-width: 1400px; margin: 0 auto; padding: 8svh clamp(1.25rem, 5vw, 5rem) 0;
}
.bio-notes { padding-top: 7svh; }

/* ---------- in brief ---------- */
.notes-body { columns: 2 22rem; column-gap: clamp(2rem, 5vw, 5rem); font-size: 1.18rem; line-height: 1.7; color: #ece5d9; }
.notes-body p { break-inside: avoid; margin-bottom: 1.3rem; }
.notes-body p:first-child::first-letter {
  float: left; font-family: var(--serif); font-size: 4.6em; line-height: .82; padding: .08em .12em 0 0; color: var(--foil);
}

/* ---------- pepeha ---------- */
.bio-pepeha { text-align: center; }
.pepeha { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height: 1.55; color: var(--paper); }

/* ---------- in brief and time at the bar: the facts in a narrow column on the left, the prose on the right ---------- */
.bio-about {
  max-width: 1400px; margin: 0 auto; padding: 8svh clamp(1.25rem, 5vw, 5rem) 0;
  display: grid; grid-template-columns: minmax(15rem, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.bio-about .bio-notes, .bio-about .bio-credits { max-width: none; margin: 0; padding: 0; }
.bio-about .bio-credits { grid-column: 1; grid-row: 1; }
.bio-about .bio-notes { grid-column: 2; grid-row: 1; }
.bio-about .notes-body { columns: auto; max-width: 40rem; }
.bio-about .credits div { grid-template-columns: 1fr; gap: .3rem; }
@media (max-width: 860px) {
  .bio-about { grid-template-columns: 1fr; gap: 3rem; }
  .bio-about .bio-credits, .bio-about .bio-notes { grid-column: 1; grid-row: auto; }
}

/* ---------- time at the bar ---------- */
.credits { max-width: 60rem; }
.credits div {
  display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px dotted #43403c; align-items: baseline;
}
.credits dt { font-family: var(--caps); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--foil-dim); }
.credits dd { font-size: 1.12rem; color: var(--paper); }
.to-come dd, .a.to-come { color: #988c7d; font-style: italic; }

/* ---------- selected cases ---------- */
.tracks { list-style: none; border-top: 1px solid #2f2c29; }
.tracks li {
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem; align-items: baseline;
  padding: 1.3rem 0; border-bottom: 1px solid #2f2c29; transition: background .5s, padding .5s var(--ease);
}
.tracks li:hover { background: linear-gradient(90deg, rgba(184,105,46,.10), transparent 70%); padding-left: .6rem; }
.tracks .no { font-family: var(--caps); font-size: .70rem; letter-spacing: .2em; color: var(--muted); }
.tracks li:hover .no { color: var(--ember); }
.tracks .case { display: block; font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.15; color: var(--paper); }
.tracks li:hover .case { color: var(--foil); }
/* the case reference sits in plain type above the court and date */
.tracks .where .ref { display: block; font-family: var(--serif); font-style: italic; font-size: 1rem; letter-spacing: 0; text-transform: none; color: #b9ae9f; margin-bottom: .2rem; }
/* a case with a note on the record links to it */
.tracks .case a { color: inherit; }
.tracks .case a::after { content: ' \2192'; font-family: var(--body); font-size: .7em; color: var(--foil-dim); transition: color .3s; }
.tracks .case a:hover::after { color: var(--foil); }
.tracks .what { display: block; color: #d0c6b6; margin-top: .3rem; font-size: 1.02rem; }
.tracks .where { font-family: var(--caps); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: #988c7d; text-align: right; max-width: 17rem; line-height: 1.8; }
@media (max-width: 640px) {
  .tracks li { grid-template-columns: 1fr; gap: .4rem; }
  .tracks .where { text-align: left; max-width: none; }
}

/* ---------- in chambers ---------- */
.bio-talk .brush { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: 3.4rem; }
/* the questions drop down like the ones on the home page (.ask-item styles live in styles.css) */
.bio-talk .brush { margin-bottom: 2rem; }
.bio-talk .asks { max-width: 46rem; }
.bio-talk .ask-answer .to-come { font-style: italic; color: var(--muted); }

/* ---------- next in chambers ---------- */
.bio-next {
  display: flex; align-items: center; gap: 1.6rem; max-width: 1400px; margin: 16svh auto 12svh;
  padding: 0 clamp(1.25rem, 5vw, 5rem);
}
.next-photo { width: 92px; aspect-ratio: 3 / 4; overflow: hidden; background: #1c1b19; flex: none; }
.next-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) brightness(.8); transition: filter .8s var(--ease); }
.bio-next:hover .next-photo img { filter: none; }
.next-text .kicker { display: block; margin-bottom: .5rem; }
.next-name { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1; color: var(--paper); transition: color .5s; }
.bio-next:hover .next-name { color: var(--foil); }
.next-name::after { content: ''; display: inline-block; width: 2.4rem; height: 1px; background: var(--foil-dim); margin-left: 1rem; vertical-align: middle; transition: width .6s var(--ease); }
.bio-next:hover .next-name::after { width: 4.4rem; }

/* touch screens: no drifting smoke, it costs smooth scrolling */
@media (hover: none), (max-width: 860px) { .smoke { display: none; } }
.bio-portrait img { object-position: 50% 35%; }