/* Interaction and diagram corrections shared by the portfolio. */
a { text-decoration: none; }
.project-card,.project-card * { text-decoration: none !important; }
.project-card { display: block; }
.project-card:hover,.project-card:focus-visible { box-shadow: inset 0 4px 0 var(--acid),0 0 0 1px rgba(213,255,63,.3); }
.project-card-cta { color: var(--acid); }

/* Contact details are direct, visible calls to action without turning the copy into buttons. */
#contact p a {
  color: var(--acid);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: rgba(213,255,63,.45);
  text-decoration-thickness: 2px;
  text-underline-offset: .22em;
  transition: color .16s ease, text-decoration-color .16s ease;
}
#contact p a:hover {
  color: #fff;
  text-decoration-color: var(--acid);
}
#contact p a:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: .22rem;
}
.language-switch { display:flex; align-items:center; gap:.28rem; margin-left:auto; color:var(--muted); font:700 .72rem/1 "Courier New",monospace; }
.language-switch button { border:0; padding:.35rem .2rem; background:transparent; color:var(--muted); cursor:pointer; font:inherit; }
.language-switch button[aria-pressed="true"] { color:var(--acid); }
.language-switch button:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }

/* A compact, readable flow rather than a narrow chain of boxes. */
.flow-main { display: none; }
.flow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; margin:0; padding:0; list-style:none; }
.flow-steps li { min-width:0; min-height:132px; padding:1rem; border:1px solid var(--line); background:var(--surface-raised); }
.flow-steps li:nth-child(3n+1) { border-top:3px solid var(--orange); }
.flow-steps li:nth-child(3n+2) { border-top:3px solid var(--acid); }
.flow-step-number { display:block; margin-bottom:.65rem; color:var(--acid); font:700 .72rem/1 "Courier New",monospace; letter-spacing:.12em; }
.flow-steps strong { display:block; font-size:1rem; line-height:1.2; }
.flow-steps small { display:block; margin-top:.42rem; color:var(--muted); font-size:.82rem; line-height:1.35; }

@media (max-width: 1500px) {
  .project-grid { grid-template-columns:minmax(0,1fr); }
  .side-card { position:static; max-width:none; }
}

@media (max-width: 700px) {
  .flow-steps { grid-template-columns:1fr; }
  .flow-steps li { min-height:auto; }
  .brand,nav a,footer a { display:inline-flex; align-items:center; min-height:44px; }
  nav a { padding-inline:.15rem; }
}

section[id] { scroll-margin-top: 84px; }

.hero-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  max-width:740px;
  margin-top:3.2rem;
  border:1px solid var(--line);
  background:var(--line);
}
.hero-summary div {
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:.2rem;
  padding:.85rem 1rem;
  background:rgba(24,27,23,.84);
}
.hero-summary strong {
  color:var(--acid);
  font:700 1.5rem/1 "Courier New",monospace;
  letter-spacing:.04em;
}
.hero-summary span {
  color:var(--muted);
  font:700 .68rem/1.3 "Courier New",monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.evidence-note { max-width:760px; margin:0 0 1.5rem; }

/* Make every action use the same interaction language: acid at rest, orange on intent. */
.button,
.button.alt {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.button:hover,
.button:focus,
.button:active,
.button.alt:hover,
.button.alt:focus,
.button.alt:active {
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
}
.button:focus-visible,
.button.alt:focus-visible {
  outline:3px solid var(--acid);
  outline-offset:3px;
}

.hero-summary strong,
.hero-summary span { display:block; }
.hero-summary div { gap:.35rem; }

/* Readable typography and a consistent rhythm across all public pages. */
:root { --muted:#b1b8a9; }
body { overflow-wrap:break-word; }
h1,h2,h3 { text-wrap:balance; }
a:focus-visible,button:focus-visible { outline:3px solid var(--acid); outline-offset:4px; }
.hero { padding:5rem 0 4rem; }
.hero h1 { max-width:980px; font-size:clamp(2.8rem,6.6vw,6rem); line-height:1.04; }
.hero .lede { max-width:68ch; }
.hero-summary { margin-top:2.4rem; }
.hero-summary span,.eyebrow,.tag { font-size:.8rem; line-height:1.5; }
.hero-summary strong { font-size:1.8rem; }
nav a { font-size:.85rem; letter-spacing:.02em; }
.language-switch { font-size:.85rem; }
.language-switch button { min-width:44px; min-height:44px; }
.button { font-size:.875rem; border-radius:4px; }
.button:hover,.button:focus,.button:active { color:#111310; }
.card { display:flex; flex-direction:column; padding:2rem; }
.card h2,.card h3 { font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.15; }
.card .project-card-cta { margin-top:auto; padding-top:1rem; font-weight:700; }
.grid { gap:1rem; border:0; background:transparent; }
.card { border:1px solid var(--line); border-radius:8px; }
.project-index-link a,.project-card-cta a { display:inline-flex; align-items:center; min-height:44px; color:var(--acid); text-decoration:underline; text-underline-offset:.25em; }
.flow-step-number,.flow-node { font-size:.875rem; line-height:1.5; }
.flow-steps small { font-size:.9375rem; line-height:1.55; }
.project-grid .content h2 { font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.12; }
.project-grid .content>p { font-size:1.1rem; line-height:1.75; }
.side-card { border-radius:6px; }
footer { font-size:.875rem; line-height:1.9; }
#contact p a { overflow-wrap:anywhere; }
@media (min-width:1100px) {
  .project-grid { grid-template-columns:minmax(0,1fr) 270px; gap:2.5rem; }
  .side-card { position:sticky; top:94px; }
}
@media (max-width:700px) {
  .wrap { width:calc(100% - 40px); }
  header .nav { gap:.1rem .25rem; }
  header .brand { font-size:.75rem; letter-spacing:0; }
  header nav { flex-wrap:wrap; gap:0 .75rem; justify-content:flex-start; }
  header nav a { font:600 .8125rem/1.4 Arial,system-ui,sans-serif; letter-spacing:0; text-transform:none; }
  .hero,.project-hero { padding:3rem 0; }
  .hero h1 { font-size:clamp(2.65rem,11vw,3.6rem); }
  .hero-summary { grid-template-columns:1fr; }
  .hero-summary div { flex-direction:row; align-items:center; gap:1rem; padding:.8rem 1rem; }
  .hero-summary strong { min-width:2ch; }
  .hero-summary span { font-size:.8125rem; }
  .card { padding:1.4rem; }
  .card h2,.card h3 { font-size:1.75rem; }
  .actions { gap:.65rem; }
  section[id] { scroll-margin-top:130px; }
  .flow-steps { gap:.75rem; }
  .flow-steps li { padding:1.2rem; }
}