/* ==================================================================
   Project pages — the shared furniture
   Everything a case-study page needs that is not specific to one
   project: the hero, the facts strip, the note grid, the takeaway
   list. A project stylesheet re-points the accent trio and adds only
   its own pieces on top. Load order: styles.css, project.css, <page>.css
   ================================================================== */

/* ---------- Nav ---------- */
.nav__back {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  transition: color 0.3s var(--ease);
}
.nav__back:hover { color: var(--accent-3); }

/* ---------- Hero ---------- */
.proj {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 150px var(--gut) 90px;
}
.proj__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: clamp(11px, 1.3vw, 13px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-3);
  margin-bottom: 32px;
}
.proj__eyebrow .dot {
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  flex: 0 0 auto;
}
.js .proj__eyebrow .dot { animation: pulse 2.4s ease-in-out infinite; }

.proj__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 6.6vw, 82px);
  line-height: 0.99;
  letter-spacing: -0.035em;
  margin-bottom: 30px;
}
.proj__title .hero__line--accent .hero__line-in { color: var(--accent-3); }
.proj__lede {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--ink-dim);
  max-width: 680px;
  margin-bottom: 52px;
}

/* ---------- Facts strip ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 56px;
}
.fact {
  background: var(--bg);
  padding: 22px 22px 20px;
  transition: background 0.4s var(--ease);
}
.fact:hover { background: var(--bg-2); }
.fact dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.fact dd { font-size: 14.5px; color: var(--ink); line-height: 1.45; }

/* ---------- Note grid ---------- */
.notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.note { background: var(--bg); padding: 28px 26px; transition: background 0.4s var(--ease); }
.note:hover { background: var(--bg-2); }
.note h4 { font-family: var(--display); font-size: 17px; font-weight: 600; margin-bottom: 10px; }
.note p { font-size: 14.5px; color: var(--ink-dim); }

/* ---------- Takeaways ---------- */
.takeaways {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.takeaways li {
  background: var(--bg);
  padding: 24px 26px;
  font-size: 16px;
  color: var(--ink-dim);
  transition: background 0.4s var(--ease);
}
.takeaways li:hover { background: var(--bg-2); }
.takeaways strong { color: var(--ink); font-weight: 600; }
.takeaways em { color: var(--accent-3); font-style: normal; }

.proj__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 44px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .proj { padding-top: 128px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .notes { grid-template-columns: 1fr; }
  .nav__back { display: none; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr; }
  .proj__cta .btn { flex: 1 1 auto; text-align: center; }
}

/* ==================================================================
   Diagrams
   Shared by every project page. The boxes and arrows take their colour
   from the page's own accent trio, so one diagram language serves all
   of them without any page hard-coding a hex value.
   ================================================================== */
.diagram {
  margin: 44px 0 0;
  border: 1px solid var(--line);
  background: var(--bg-2);
  padding: clamp(20px, 3.5vw, 40px);
  overflow-x: auto;
}
.diagram svg { width: 100%; min-width: 660px; height: auto; display: block; }
.diagram figcaption {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}

.d-box rect { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.d-box--fn rect { stroke: color-mix(in srgb, var(--accent) 55%, transparent); }
.d-box--store rect {
  fill: color-mix(in srgb, var(--accent) 5%, transparent);
  stroke: color-mix(in srgb, var(--accent) 40%, transparent);
}
.d-box--out rect { stroke: color-mix(in srgb, var(--accent-2) 60%, transparent); }
/* a box the boundary refuses */
.d-box--off rect { stroke: var(--line); stroke-dasharray: 4 4; fill: transparent; }
.d-box--off .d-t, .d-box--off .d-s { fill: var(--ink-faint); }

.d-t {
  fill: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  text-anchor: middle;
}
.d-s {
  fill: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11px;
  text-anchor: middle;
}
.d-l {
  fill: var(--accent-3);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.d-flow path { stroke: var(--accent); stroke-width: 1.5; fill: none; }
.d-line path { stroke: var(--line); stroke-width: 1; fill: none; stroke-dasharray: 4 4; }
.d-arrows path { fill: var(--accent); stroke: none; }
/* the path the boundary stops */
.d-deny path { stroke: var(--ink-faint); stroke-width: 1.5; fill: none; opacity: 0.6; }
.d-cross path { stroke: var(--ink-faint); stroke-width: 1.5; fill: none; }

/* the flow draws itself once the diagram arrives */
.js .diagram.is-in .d-flow path {
  stroke-dasharray: 120;
  animation: flowDraw 0.7s var(--ease) both;
}
.js .diagram.is-in .d-flow path:nth-child(2) { animation-delay: 0.12s; }
.js .diagram.is-in .d-flow path:nth-child(3) { animation-delay: 0.24s; }
.js .diagram.is-in .d-flow path:nth-child(4) { animation-delay: 0.36s; }
@keyframes flowDraw {
  from { stroke-dashoffset: 120; }
  to { stroke-dashoffset: 0; }
}

/* a page that must state what it is deliberately not showing */
.disclaimer {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  font-size: 14.5px;
  color: var(--ink-dim);
  max-width: 760px;
}
.disclaimer b { color: var(--ink); font-weight: 600; }