/* Solvology. Brand colours taken from the logo source (solvology.svg). */

/* Display font: self-hosted, SIL Open Font Licence. The file is not included:
   download Barlow Condensed SemiBold (600) as woff2 into public/fonts/.
   Until then the fallback stack below is used. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #080605;       /* brand black, warm near-black */
  --paper: #ffffff;
  --muted: #4f4b47;     /* secondary text, ~8.5:1 on white */
  --surface: #f1f0ee;   /* placeholders, table stripes */
  --rule: #d9d6d2;
  --magenta: #e10a7d;   /* ~4.6:1 on white: OK for text, used for focus and accents */
  --yellow: #f4ea03;    /* ~1.3:1 on white: decoration only, never text */
  --stripe-dark: #080605; /* hazard stripe stays black in both themes */

  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --measure: 65ch;
  --gap: clamp(1rem, 3vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #edebe8;
    --paper: #080605;
    --muted: #b3aea8;
    --surface: #1b1917;
    --rule: #33302d;
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* The tilted hero squares may poke past the viewport on small screens: never scroll sideways. */
html { overflow-x: clip; }

body {
  margin: 0 auto;
  max-width: 76rem;
  padding: var(--gap);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.6;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--magenta); }

/* Visible keyboard focus everywhere; magenta clears 3:1 on both backgrounds. */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--gap);
  top: var(--gap);
  padding: 0.5rem 1rem;
  background: var(--paper);
  z-index: 2;
}

/* ---------- Header and hero ---------- */

.logo { margin: 0.5rem 0 0; }
.logo img { width: min(100%, 30rem); }

/* The one bold element: the hero photo with the mark's two squares
   peeking out behind it, tilted at the mark's angle. Positions mirror the
   mark: magenta top right, yellow bottom left. */
.hero-frame {
  position: relative;
  isolation: isolate;
  margin: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4.5vw, 3rem) clamp(4.5rem, 9vw, 6.5rem); /* room for the squares; grow with the offsets below */
}
.hero-frame::before,
.hero-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(4.5rem, 13vw, 9.5rem);
  aspect-ratio: 1097 / 922;         /* the brushed squares from the logo, already tilted */
  background: center / contain no-repeat;
}
.hero-frame::before {
  background-image: url("square-magenta.svg");
  top: clamp(-3.5rem, -5.5vw, -1.5rem);
  right: clamp(-3.5rem, -5.5vw, -1.5rem);
}
.hero-frame::after {
  background-image: url("square-yellow.svg");
  bottom: clamp(-3.5rem, -5.5vw, -1.5rem);
  left: clamp(-3.5rem, -5.5vw, -1.5rem);
}
.hero-frame img,
.placeholder--hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 60rem) {
  .hero-frame img,
  .placeholder--hero { aspect-ratio: 21 / 9; }
}

.hero-text {
  display: grid;
  gap: 1rem var(--gap);
}
@media (min-width: 50rem) {
  .hero-text { grid-template-columns: 3fr 2fr; align-items: start; }
}

.intro {
  max-width: var(--measure);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  line-height: 1.45;
  margin: 0;
}

.hero-text nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-stretch: condensed;
  font-size: 1.5rem;
  line-height: 1.4;
}

/* Yellow and black is safety marking; used exactly once. */
.hazard {
  height: 0.75rem;
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  background: repeating-linear-gradient(
    -45deg,
    var(--yellow) 0 0.75rem,
    var(--stripe-dark) 0.75rem 1.5rem
  );
}

/* ---------- Placeholders (delete once all photos exist) ---------- */

.placeholder {
  display: grid;
  place-items: center;
  padding: 1rem;
  text-align: center;
  background: var(--surface);
  color: var(--muted);
}

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

.project {
  display: grid;
  gap: 1.5rem var(--gap);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
.project:first-of-type { border-top: 0; padding-top: 0; }

@media (min-width: 50rem) {
  .project { grid-template-columns: 6fr 5fr; align-items: start; }
  /* Alternate media left and right */
  .project:nth-of-type(even) .project-media { order: 2; }
}

/* Corner square per project, tilted at the mark's angle, on the outer edge.
   Mirrors the mark: yellow bottom left when the photo is on the left,
   magenta top right when it is on the right. Smaller than the hero squares
   so the hero stays the loudest element. */
.project-media {
  position: relative;
  isolation: isolate;
}
.project-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: clamp(3.5rem, 9vw, 6.5rem);
  aspect-ratio: 1097 / 922;
  background: url("square-yellow.svg") center / contain no-repeat;
  bottom: clamp(-2.5rem, -3.75vw, -1rem);
  left: clamp(-2.5rem, -3.75vw, -1rem);
}
.project:nth-of-type(even) .project-media::before {
  background-image: url("square-magenta.svg");
  bottom: auto;
  left: auto;
  top: clamp(-2.5rem, -3.75vw, -1rem);
  right: clamp(-2.5rem, -3.75vw, -1rem);
}

.project-media img,
.project-media video,
.project-media .placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.project h3 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: condensed;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.tagline {
  font-size: 1.15rem;
  color: var(--muted);
  margin: 0 0 1rem;
}

.project-body > p { max-width: var(--measure); }

/* Phase indicator. Set data-phase="1".."5" on the <ol> and aria-current="step"
   on the matching <li>; screen readers announce the current step. */
.phase {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 1.5rem 0;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--muted);
}
.phase li {
  flex: 1;
  padding-top: 0.5rem;
  position: relative;
}
.phase li::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 0.35rem;
  background: var(--rule);
}
.phase[data-phase="1"] li:nth-child(-n+1)::before,
.phase[data-phase="2"] li:nth-child(-n+2)::before,
.phase[data-phase="3"] li:nth-child(-n+3)::before,
.phase[data-phase="4"] li:nth-child(-n+4)::before,
.phase[data-phase="5"] li:nth-child(-n+5)::before { background: var(--ink); }
.phase li[aria-current="step"] { color: var(--ink); font-weight: 700; }
.phase li[aria-current="step"]::before { background: var(--magenta); }

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.spec th,
.spec td {
  text-align: left;
  vertical-align: top;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}
.spec th {
  width: 9.5rem;
  padding-right: 1rem;
  font-weight: 600;
  color: var(--muted);
}
.spec td { font-variant-numeric: tabular-nums; }

.tags {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0;
}

/* Optional build log: native <details>, no JavaScript. */
.log { margin-top: 1.25rem; }
.log summary {
  cursor: pointer;
  font-weight: 600;
  width: fit-content;
}
.log ol {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.log li { margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */

.site-footer {
  margin-top: clamp(3rem, 8vw, 5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.9rem;
}
.site-footer p { max-width: var(--measure); margin: 0 0 0.5rem; }
.disclaimer { color: var(--ink); }