/* jouret.dev — home page */

/* ---------- Hero ---------- */

.home .hero { min-height: min(88vh, 920px); min-height: min(88svh, 920px); }
.home .hero-content { padding-block: 120px 120px; }

.home .hero h1 {
  margin: 0 0 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--accent);
}
.hero-intro {
  margin: 0 0 30px;
  max-width: 34em;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--text-dim);
}
.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-links a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 5px;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.hero-links a:hover { color: var(--accent); text-decoration-color: var(--accent); }

/* ---------- Page body ---------- */

.page {
  max-width: calc(780px + 2 * var(--gutter));
  padding-block: 20px 40px;
}
.block {
  padding-block: clamp(48px, 8vw, 80px);
  border-top: 1px solid var(--line);
}
.block:first-child { border-top: 0; }
.block h2 {
  margin: 0 0 18px;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.block-note { margin: -8px 0 28px; color: var(--text-dim); }
.block a:not(.feature) { color: var(--accent); text-underline-offset: 3px; }
.block h3 a:not(.feature) { color: var(--text); }
.block h3 a:not(.feature):hover { color: var(--accent); }

.prose p {
  margin: 0 0 1.1em;
  font-size: 1.08rem;
  color: var(--text-dim);
}

/* About: portrait beside the copy */
.about { display: grid; gap: 28px; align-items: start; }
@media (min-width: 700px) { .about { grid-template-columns: 240px minmax(0, 1fr); gap: 36px; } }
.portrait { margin: 0; max-width: 300px; }
.portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* Placeholder copy, to be rewritten. Delete the span once it's real text. */
.draft {
  color: var(--warm);
  background: rgba(255, 180, 107, 0.07);
  border-bottom: 1px dashed rgba(255, 180, 107, 0.5);
  font-style: normal;
}
.draft::before {
  content: 'draft';
  margin-right: 0.5em;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255, 180, 107, 0.18);
  font-family: var(--mono);
  font-size: 0.68em;
  letter-spacing: 0.05em;
  vertical-align: 0.12em;
  text-transform: uppercase;
}

/* ---------- Projects ---------- */

.feature {
  display: block;
  margin-bottom: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: var(--surface);
  transition: border-color 0.25s;
}
.feature:hover { border-color: rgba(127, 216, 255, 0.4); }
.feature img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
}
.feature-text { padding: 22px 24px 24px; }
.feature h3 { margin: 0 0 8px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.01em; }
.feature p { margin: 0 0 10px; color: var(--text-dim); }
.feature .go { color: var(--accent); font-size: 0.95rem; }

.projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.project {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.project h3 { margin: 0 0 4px; font-size: 1.08rem; font-weight: 600; }
.project p { margin: 0 0 6px; color: var(--text-dim); font-size: 0.97rem; }
@media (max-width: 560px) {
  .project { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .thumb { max-width: 240px; }
}

.feature .meta, .project .meta {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-faint) !important;
}
.tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--text-dim);
  vertical-align: 0.2em;
}
.tag.live { color: var(--ok); border-color: rgba(110, 231, 168, 0.4); }
.tag.wip { color: var(--warm); border-color: rgba(255, 180, 107, 0.4); }
.more { margin: 28px 0 0; }

/* ---------- About this site ---------- */

details summary {
  cursor: pointer;
  width: fit-content;
  font-size: 0.9rem;
  color: var(--text-dim);
}
details summary:hover { color: var(--text); }

.colophon { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--text-dim); }
.colophon li::marker { color: var(--ok); content: '✓  '; }
.colophon b { color: var(--text); font-weight: 500; }
.headers { margin-top: 22px; }
.code-block {
  margin: 12px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #090b11;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--text-dim);
  overflow-x: auto;
  white-space: pre;
}
.code-block .k { color: var(--accent); }
.code-caption { margin: 10px 0 0; font-size: 0.85rem; color: var(--text-faint); }

/* ---------- Contact ---------- */

.contact p { margin: 0 0 14px; color: var(--text-dim); }
.contact .email { margin: 10px 0 24px; }
.contact .email {
  color: var(--accent);
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.elsewhere { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.elsewhere li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; }
.elsewhere span { font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); padding-top: 2px; }
.contact .where { margin-top: 24px; font-family: var(--mono); font-size: 0.8rem; color: var(--text-faint); }