/*
  Shared Portfolio Foundation

  Every public portfolio page loads this file first. Keep universal choices here:
  color tokens, typography, reading widths, accessibility behavior, navigation,
  and common actions. Project stylesheets load after this file and should only
  add rules that make that individual case study distinct.
*/
/* Design tokens: update these colors and font stacks to refresh the visual system consistently. */
:root {
  --ink:#17242d;
  --mute:#5c6c76;
  --paper:#f6f3ec;
  --white:#fffdf8;
  --blue:#174a61;
  --deep:#103548;
  --mint:#e5eee8;
  --aqua:#d7e8e3;
  --lime:#d9e96b;
  --gold:#edc86d;
  --line:#d8d4c9;
  /* Shared brand-mark dimensions keep the landing and project headers in the same visual family. */
  --brand-mark-size:62px;
  --brand-mark-size-mobile:55px;
  /* Shared initials scale keeps the square monogram consistent across every header. */
  --brand-mark-initials-size:1.3rem;
  --brand-mark-initials-size-mobile:1.3rem;
  /* Shared route-frame dimensions keep page transitions visually continuous. */
  --route-gutter:32px;
  --route-header-height:92px;
  --serif:Georgia,serif;
  --sans:Arial,sans-serif
}
/* Baseline and layout helpers. */
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 var(--sans)
}
a {
  color:inherit
}
.wrap {
  width:min(1180px,calc(100% - 48px));
  margin:auto
}
.narrow {
  width:min(760px,calc(100% - 48px));
  margin:auto
}
.skip {
  position:fixed;
  top:-50px;
  left:16px;
  z-index:20;
  padding:8px;
  background:var(--lime)
}
.skip:focus {
  top:16px
}
/* Sticky navigation and the opening case-study section. */
header {
  position:sticky;
  top:0;
  z-index:10;
  border-bottom:1px solid var(--line);
  background:#f6f3ecee;
  backdrop-filter:blur(10px)
}
.portfolioHome {
  display:flex;
  align-items:center;
  gap:16px;
  color:var(--ink);
  font:700 1.15rem/1 var(--sans);
  text-decoration:none;
  white-space:nowrap
}
.portfolioHome b {
  display:inline-grid;
  place-items:center;
  width:var(--brand-mark-size);
  height:var(--brand-mark-size);
  margin:0;
  background:var(--blue);
  color:var(--white);
  font:700 var(--brand-mark-initials-size)/1 var(--sans);
  letter-spacing:-.04em
}
.contactIcons {
  display:flex;
  align-items:center;
  gap:18px
}
.contactIcon {
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  color:inherit;
  text-decoration:none
}
.contactIconImage {
  display:block;
  object-fit:contain
}
.contactIconImage--linkedin {
  width:22px;
  height:22px;
  border-radius:4px
}
.contactIconImage--email {
  width:25px;
  height:25px
}
.contactIcon:focus-visible {
  outline:2px solid currentColor;
  outline-offset:4px
}
.contactIcon:hover {
  opacity:.78
}
.contactIcons--light .contactIconImage--email {
  filter:brightness(0) invert(1)
}
.button {
  display:inline-block;
  padding:12px 17px;
  background:var(--blue);
  color:#fff;
  text-decoration:none;
  font-size:.88rem;
  font-weight:bold
}
/* Secondary hero calls stay visibly clickable without competing with the filled action. */
.quiet {
  display:inline-block;
  margin-left:20px;
  color:var(--blue);
  font-size:.9rem;
  font-weight:bold;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px
}
/* Shared small-screen behavior. Project-specific responsive rules stay in each project stylesheet. */
@media(max-width:560px) {
  .wrap,.narrow {
    width:calc(100% - 32px)
  }

}