/* home.css — the public site, on top of paper.css.

   Loaded by home/page.html, so by every home page: main_home.html (with
   project, hobbies, explore and about), about_me.html, demos.html,
   twitter.html, coffee.html and legal_product_landing.html.

   Everything sits under .app-home and uses paper.css tokens. Shared p-
   components are composed here, never restyled. */

.app-home {
  --home-num-w: 2.5rem;
  --home-date-w: 11rem;
  --home-photo-w: 10.5rem;
  --home-article-w: 52rem;
}

/* ---------------------------------------------------------- the sheet -- */

.app-home .home-paper {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  counter-reset: home-section;
}

.app-home :is(.home-entries, .home-timeline, .home-plain-list, .home-legal-list, .home-legal-questions) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ------------------------------------------------------ front matter -- */

.app-home .home-front {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.app-home .home-front-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.app-home .home-front-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  color: var(--ink-2);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}
.app-home .home-front-nav a {
  color: var(--ink-2);
  text-decoration: none;
}
.app-home .home-front-nav a:hover,
.app-home .home-front-nav a[aria-current="page"] { color: var(--accent); }

/* Abstract beside the contents, as on the front page of a working paper. */
.app-home .home-abstract {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--space-7);
  align-items: start;
}

.app-home .home-contents {
  display: grid;
  gap: var(--space-2);
}

/* ---------------------------------------------------------- sections -- */

.app-home .home-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.app-home .home-section > a { justify-self: start; }

.app-home .home-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

/* Homepage sections are numbered like the chapters of a paper. */
.app-home .home-paper.is-chapters > .home-section .home-section-head h2::before {
  counter-increment: home-section;
  content: counter(home-section) ".";
  margin-inline-end: var(--space-3);
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

/* Entries: projects, research and the legal capabilities. */
.app-home .home-entries { counter-reset: home-entry; }
.app-home .home-entries > li + li { border-top: 1px solid var(--rule-2); }

/* Selected work reads across on wide sheets; numbered lists stay a column. */
.app-home .home-entries:not(.is-numbered) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  gap: 0 var(--space-6);
}
.app-home .home-entries:not(.is-numbered) > li { border-top: 1px solid var(--rule-2); }
.app-home .home-entries:not(.is-numbered) .home-entry {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.app-home .home-entries:not(.is-numbered) .home-entry-go { margin-top: auto; }

.app-home .home-entries.is-numbered > li {
  display: grid;
  grid-template-columns: var(--home-num-w) minmax(0, 1fr);
  counter-increment: home-entry;
}
.app-home .home-entries.is-numbered > li::before {
  content: counter(home-entry, decimal-leading-zero);
  padding-top: var(--space-4);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-numeric: lining-nums tabular-nums;
}

.app-home .home-entry {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-4);
  color: var(--ink);
  text-decoration: none;
}
.app-home a.home-entry:hover .home-entry-title { color: var(--accent); }

.app-home .home-entry-title {
  font-size: var(--text-lg);
  transition: color var(--dur) var(--ease);
}

.app-home .home-entry-desc {
  max-width: var(--measure);
  color: var(--ink-2);
}

.app-home .home-entry-go {
  color: var(--accent);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}

.app-home .home-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------- about -- */

.app-home .home-about {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.app-home .home-facts {
  display: grid;
  margin: 0;
}
.app-home .home-facts > div {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px dotted var(--rule);
}
.app-home .home-facts > div:first-child { padding-top: 0; }
.app-home .home-facts dt {
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-variant-caps: all-small-caps;
  letter-spacing: var(--track-caps);
}
.app-home .home-facts dd { margin: 0; }

.app-home .home-colophon {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

/* ------------------------------------------------------------ footer -- */

.app-home .home-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}
.app-home .home-foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.app-home .home-foot-links a {
  color: var(--ink-2);
  text-decoration: none;
}
.app-home .home-foot-links a:hover { color: var(--accent); }

/* ---------------------------------------------------------------- CV -- */

.app-home .home-cv-intro {
  display: grid;
  grid-template-columns: var(--home-photo-w) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

.app-home .home-cv-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  object-fit: cover;
}

/* Dated entries: CV experience and education, the legal workflow. */
.app-home .home-timeline > li {
  display: grid;
  grid-template-columns: var(--home-date-w) minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.app-home .home-timeline > li + li { border-top: 1px solid var(--rule-2); }

.app-home .home-timeline-place {
  margin-top: var(--space-1);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-style: italic;
}

.app-home .home-certs {
  display: grid;
  gap: var(--space-1);
}

.app-home .home-contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: var(--dialog-w);
}
.app-home .home-contact-full { grid-column: 1 / -1; }

/* ---------------------------------------------------------- articles -- */

.app-home .home-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  max-width: var(--home-article-w);
}

/* ----------------------------------------------------- legal landing -- */

.app-home .home-legal-hero {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-7);
  align-items: start;
}

.app-home .home-legal-card {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  background: var(--ground);
}

.app-home .home-legal-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.app-home .home-legal-brand > span { display: grid; }

.app-home .home-legal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  gap: 0 var(--space-6);
}
.app-home .home-legal-list > li {
  padding-block: var(--space-2);
  border-bottom: 1px dotted var(--rule);
}

.app-home .home-legal-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  gap: var(--space-4) var(--space-6);
}
.app-home .home-legal-questions > li {
  padding-inline-start: var(--space-4);
  border-inline-start: 1px solid var(--accent);
  font-style: italic;
}

.app-home .home-faq { max-width: var(--measure); }
.app-home .home-faq details { border-bottom: 1px solid var(--rule-2); }
.app-home .home-faq summary {
  padding-block: var(--space-3);
  font-weight: var(--wt-head);
  cursor: pointer;
}
.app-home .home-faq summary:hover { color: var(--accent); }
.app-home .home-faq details > p {
  padding-bottom: var(--space-4);
  color: var(--ink-2);
}

.app-home .home-legal-final {
  justify-items: start;
}

/* ------------------------------------------------------------ phones -- */

@media (max-width: 40rem) {
  .app-home .home-paper { gap: var(--space-7); }
  .app-home .home-abstract,
  .app-home .home-about,
  .app-home .home-legal-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .app-home .home-cv-intro { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .app-home .home-cv-photo { max-width: var(--home-photo-w); }
  .app-home .home-timeline > li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .app-home .home-contact-form { grid-template-columns: minmax(0, 1fr); }
}