/* style.css — Nick Vetock resume/portfolio
   Design system: "proof sheet" — a nod to Nick's print-production and QA
   background. Warm paper ground, technical type, crop-mark framing on
   photography, monospace spec labels standing in for decoration. */

:root {
  /* ---- Color tokens ---- */
  --paper:      #EDEAE1;   /* page ground — warm bond paper */
  --card:       #F8F6EF;   /* elevated surface */
  --ink:        #1D1F1B;   /* primary text, near-black */
  --ink-soft:   #55584F;   /* secondary text */
  --ink-faint:  #63655A;   /* tertiary text / meta */
  --line:       #C9C3AF;   /* hairline rules, crop marks, borders */
  /* Color roles:
     brand = ultramarine, text-safe accent for links, labels, markers
     sage  = calm tertiary for icons, rules, and tinted surfaces
     pop   = the one bright color, reserved for interaction (hover, active,
             typed role). Always paired with ink text, never used as text
             on the light ground. */
  --brand:      #2E30B8;   /* ultramarine, 7.8:1 on paper */
  --brand-deep: #070783;   /* deep ultramarine for pressed/strong states */
  --sage:       #74815F;   /* icons and rules, pulled from the portrait */
  --sage-ink:   #5A6649;   /* text-safe sage, 5:1 on paper */
  --sage-soft:  #E4E6DA;   /* sage tint for chips/backgrounds */
  --sage-wash:  #F1F2EA;   /* faint sage tint for alternate sections */
  --pop:        #FFB81C;   /* marigold, complement of ultramarine */
  --pop-soft:   #FFD978;   /* marigold highlighter tint for text selection */

  /* ---- Hero dark-mode tokens ---- */
  --hero-bg:        #1D1F1B;
  --hero-text:      #F5F2EA;
  --hero-text-soft: rgba(245, 242, 234, 0.78);
  --hero-text-faint: rgba(245, 242, 234, 0.55);
  --hero-pop:       var(--pop);
  --hero-sage:      #9FB088;   /* brightened sage, AA on dark ink */

  /* ---- Type ---- */
  --font-display: "Spectral", "Segoe UI", serif;
  --font-body:    "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-label:   var(--font-body);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.01em;
}

section, header {
  scroll-margin-top: 76px;
}

a {
  color: var(--brand);
  text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent);
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--brand-deep);
  text-decoration-color: var(--pop);
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--pop-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.text-muted {
  color: var(--ink-faint) !important;
}

/* Alternate section backgrounds using the design tokens instead of
   Bootstrap's default white/gray */
.bg-light {
  background-color: var(--sage-wash) !important;
}

section h2,
header h1 {
  font-weight: 600;
}

/* ============ Reveal-on-scroll ============ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Custom SVG icons sit inside an <i> so they inherit the same sizing and
   color rules as the Bootstrap icon font */
.icon-svg {
  display: inline-block;
}
.icon-svg svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}

/* ============ Nav ============ */
.navbar {
  background-color: var(--paper) !important;
  border-bottom-color: var(--line) !important;
}
.navbar-brand {
  font-family: var(--font-display);
  color: var(--ink) !important;
}
.nav-link {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft) !important;
}
.nav-link:hover {
  color: var(--brand) !important;
}

/* ============ Hero (dark mode — the rest of the page stays light) ============ */
.hero-section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
}
@media (max-width: 991.98px) {
  .hero-section {
    padding-top: 76px;
  }
}
/* Bleed the dark hero under the reserved island-nav margin so the nav
   pill floats over it, instead of leaving a light seam beside it */
@media (min-width: 992px) {
  .hero-section {
    width: calc(100% + 6.5rem);
    margin-left: -6.5rem;
    padding-left: 6.5rem;
  }
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*
  top: -10%;
  right: -10%;
  object-position: 50% 20%;
  filter: grayscale(1) brightness(0.22) blur(6px);
  */
  opacity: 0.9;
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, transparent 48%, var(--paper) 100%),
    /*
    linear-gradient(90deg, var(--hero-bg) 0%, var(--hero-bg) 38%, rgba(29, 31, 27, 0.55) 58%, rgba(29, 31, 27, 0.2) 100%);
    */
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}
.hero-section .scroll-cue {
  z-index: 1;
}

.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  line-height: 1.03;
  color: var(--hero-text);
  margin-bottom: 0.9rem;
}

.hero-role {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  min-height: 1.6em;
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}
.hero-role-prefix {
  color: var(--hero-text);
  margin-right: 0.5ch;
}
.hero-role-typed {
  color: var(--hero-pop);
}
.hero-role .cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--hero-pop);
  margin-left: 3px;
  animation: blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-role .cursor { animation: none; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.hero-lede {
  margin-bottom: 0.9rem;               /* breathing room between the two intro paragraphs */
  max-width: 46ch;
  color: var(--hero-text-soft);
  font-size: 1.1rem;
}

.hero-content {
  text-align: center;
}
.hero-content .hero-role {
  justify-content: center;
}
.hero-content .hero-lede {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.25rem;
  margin-top: 2.5rem;
}

.hero-contact {
  display: flex;
  gap: 0.75rem;
}
.hero-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 242, 234, 0.28);
  color: var(--hero-text-soft);
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.hero-contact a:hover,
.hero-contact a:focus-visible {
  color: var(--hero-bg);
  background-color: var(--hero-pop);
  border-color: var(--hero-pop);
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hero-text-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}
.scroll-cue:hover,
.scroll-cue:focus-visible {
  color: var(--hero-pop);
}
@media (min-width: 992px) {
  .scroll-cue { left: calc(50% + 3.25rem); }
}
.scroll-cue i {
  animation: nudge 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue i { animation: none; }
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
@media (max-width: 767.98px) {
  .scroll-cue { display: none; }
}

/* ============ Hero portrait: plain circle with an ambient glow ============ */
.hero-photo {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.hero-photo::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background: radial-gradient(circle, rgba(255, 184, 28, 0.3), rgba(159, 176, 136, 0.16) 55%, transparent 75%);
  filter: blur(24px);
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(245, 242, 234, 0.14);
}

/* ============ Photo frame ============ */
.photo-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
.photo-frame-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  box-shadow: 0 20px 45px rgba(29, 31, 27, 0.16);
}

.photo-frame-tag {
  position: absolute;
  bottom: -0.6rem;
  right: 0.5rem;
  z-index: 3;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  text-transform: uppercase;
}

@media (max-width: 991.98px) {
  .hero-photo-col { margin-top: 2.5rem; }
}

/* ============ About section: photo + meta ============ */
/* .row.g-5 uses a 3rem gutter, but .container only reserves the default
   1.5rem — match it here so the row's negative margins don't push past
   the viewport edge on narrow screens */
#about .container {
  --bs-gutter-x: 3rem;
}

.about-meta {
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
  padding-top: 1.25rem;
}
.about-meta li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.about-meta i {
  color: var(--sage);
  font-size: 1.05rem;
  width: 1.2rem;
  text-align: center;
}

/* ============ Skills: icon-topped category cards ============ */
.category-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 1.75rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(29, 31, 27, 0.08);
  border-color: var(--sage);
}
.category-icon {
  display: flex;
  align-items: center;
  color: var(--sage);
  font-size: 2rem;
  margin-bottom: 1rem;
}
.category-card h5 {
  font-family: var(--font-display);
  font-weight: 600;
}
.category-list {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.category-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.3rem 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.category-list li i {
  color: var(--sage);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* ============ Experience: vertical timeline ============ */
.timeline-item {
  --marker-center: calc(0.2rem + 8px);   /* marker top + half its 16px height */
  position: relative;
  padding-left: calc(2.25rem + 2px);
  padding-bottom: 2.5rem;
}
/* The connecting line runs from the first marker's center to the last marker's center */
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sage-soft);
}
.timeline-item:first-child::before {
  top: var(--marker-center);
}
.timeline-item:last-child {
  padding-bottom: 0;
}
.timeline-item:last-child::before {
  bottom: auto;
  height: var(--marker-center);
}
.timeline-marker {
  position: absolute;
  left: -7px;
  top: 0.2rem;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sage-wash);   /* same as the Work History section background */
  border: 3px solid var(--brand);
}
.timeline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.timeline-role {
  font-family: var(--font-display);
  font-weight: 600;
}
.timeline-date {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.timeline-company {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0.15rem 0 0.75rem;
}
.badge-current {
  display: inline-block;
  background: var(--sage-ink);
  color: #fff;
  font-family: var(--font-label);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  vertical-align: middle;
  margin-left: 0.4rem;
}
.timeline-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.timeline-list li {
  margin-bottom: 0.4rem;
}
.timeline-toggle {
  border: none;
  background: none;
  padding: 0;
  margin-top: 0.4rem;
  font-family: var(--font-label);
  color: var(--brand);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.timeline-toggle:hover {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-color: var(--pop);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.timeline-toggle .bi-chevron-down {
  font-size: 0.7rem;
  transition: transform 0.2s ease;
}
.timeline-toggle[aria-expanded="true"] .bi-chevron-down {
  transform: rotate(180deg);
}
.timeline-toggle .show-less-text {
  display: none;
}
.timeline-toggle[aria-expanded="true"] .show-more-text {
  display: none;
}
.timeline-toggle[aria-expanded="true"] .show-less-text {
  display: inline;
}

/* ============ Portfolio / Education placeholder cards ============ */
.info-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 1.5rem 1.75rem;
  height: 100%;
}
.info-card h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.info-card ul li {
  padding: 0.2rem 0;
  color: var(--ink-soft);
}

/* ============ Buttons: one pill system for every CTA ============
   Primary = filled, for the main action (download). Secondary = outline,
   for supporting links (Behance). Hover wipes a fill in from the left;
   pressing gives a slight squeeze. No lift. */
.btn-pill {
  --pill-bg: transparent;
  --pill-fg: var(--ink);
  --pill-border: var(--ink);
  --pill-hover-bg: var(--pop);
  --pill-hover-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0 1.4rem;
  border: 1px solid var(--pill-border);
  border-radius: 999px;
  background-color: var(--pill-bg);
  background-image: linear-gradient(var(--pill-hover-bg), var(--pill-hover-bg));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  color: var(--pill-fg);
  font-family: var(--font-label);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-size 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.12s ease;
}
.btn-pill:hover,
.btn-pill:focus-visible {
  background-size: 100% 100%;
  /* Once the wipe lands, swap the base color too, so the anti-aliased
     rounded edge doesn't let the resting color fringe through */
  background-color: var(--pill-hover-bg);
  color: var(--pill-hover-fg);
  border-color: var(--pill-hover-bg);
  transition:
    background-size 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 0s linear 0.28s,
    color 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.12s ease;
}
.btn-pill:active {
  transform: scale(0.97);
}
.btn-pill i {
  font-size: 1rem;
}
.btn-pill--primary {
  --pill-bg: var(--brand);
  --pill-fg: #fff;
  --pill-border: var(--brand);
}
.btn-pill--secondary {
  --pill-bg: transparent;
  --pill-fg: var(--brand);
  --pill-border: var(--brand);
}
/* On the dark hero, swap to the brightened tokens so contrast holds */
.btn-pill--primary.btn-pill--on-dark {
  --pill-bg: var(--hero-text);
  --pill-fg: var(--brand-deep);
  --pill-border: var(--hero-text);
}
@media (prefers-reduced-motion: reduce) {
  .btn-pill,
  .btn-pill:hover,
  .btn-pill:focus-visible { transition: none; }
  .btn-pill:active { transform: none; }
}

/* ============ Skills story: bow (aim) -> storm cloud (spark) -> target (hit) ============
   The arrow is fired from the first card, tears through the cloud, and lands in the
   target. Positions are measured at run time; see the script at the end of index.html. */
.skills-story { position: relative; }
.skills-story .category-icon {
  justify-content: center;
  font-size: 3.25rem;
  margin-bottom: 1.25rem;
}
.skills-story .icon-svg { position: relative; }
.skills-story .category-card h5 { text-align: center; }
.skills-story .icon-svg > svg { overflow: visible; }
.row > .story-layer {
  position: absolute;
  inset: 0;
  width: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  z-index: 5;
}
.story-arrow {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sage);
  opacity: 0;
  transform-origin: 91.667% 50%;   /* the arrow tip, at x = 22 of 24 */
}
.story-arrow svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.cloud-body { transform-box: fill-box; transform-origin: 50% 50%; }
.target-body { transform-box: view-box; transform-origin: 12px 22.5px; }   /* pivots on its feet */
.stuck-quiver { transform-box: view-box; transform-origin: 12px 10px; }    /* pivots on the buried tip */
.story-target .stuck { visibility: hidden; }
.story-target .stuck-collar { fill: var(--sage-ink); }
.story-cloud .cloud-bolt { visibility: hidden; }
.storm .drop.frozen { opacity: 0.6; }
.story-bow .story-flash { left: 88%; top: 30%; width: 0.9em; height: 0.9em; margin: -0.45em 0 0 -0.45em; }
.story-cloud .cloud-glow {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 1.5em;
  height: 1em;
  margin: -0.5em 0 0 -0.75em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 184, 28, 0.55), rgba(255, 184, 28, 0));
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.skills-story .story-bow.is-loaded { cursor: crosshair; }
.story-flash {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 1.3em;
  height: 1.3em;
  margin: -0.65em 0 0 -0.65em;
  border-radius: 50%;
  border: 3px solid var(--pop);
  opacity: 0;
  pointer-events: none;
}
/* Storm effects around the cloud */
.storm {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 0;
}
.story-cloud > svg { position: relative; z-index: 1; }   /* rain sits behind the cloud */
.storm .drop {
  position: absolute;
  width: 2px;
  height: 9px;
  border-radius: 2px;
  background: var(--brand);
  opacity: 0;
}

/* ============ Reach out: messenger dove ============ */
.reach-dove {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 1.15em;                      /* the dodge hops upward, so no extra room below */
  margin-bottom: -0.12em;              /* the drawing sits above its frame's bottom edge; tuck it to the heading */
  font-size: 4.5rem;
  color: var(--sage);
}
.reach-dove.is-ready { cursor: crosshair; }
.dove-flight {
  animation: dove-bob 2.6s ease-in-out infinite;
}
.dove-svg {
  display: block;
  width: 1.125em;
  height: 1em;
  fill: currentColor;
  overflow: visible;
  transform-origin: 50% 60%;
}
/* Wings rotate from the shoulder and foreshorten on the downstroke, rather than flipping flat */
.dove-wing {
  transform-box: view-box;
  transform-origin: 13.9px 11.2px;     /* near shoulder */
  animation: dove-flap 0.9s ease-in-out infinite;
}
.dove-wing-far {
  fill: var(--sage-ink);               /* darker, so it reads as the wing behind the body */
  transform-box: view-box;
  transform-origin: 15.5px 11.5px;     /* far shoulder, set into the back */
  animation: dove-flap-far 0.9s ease-in-out infinite;
  animation-delay: -0.06s;
}
.dove-letter rect { fill: var(--card); stroke: var(--sage-ink); stroke-width: 0.7; }
.dove-letter path { stroke: var(--sage-ink); stroke-width: 0.6; stroke-linejoin: round; }
@keyframes dove-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
/* A low wingbeat that swoops well down on each stroke, but never stands upright */
@keyframes dove-flap {
  0%, 100% { transform: rotate(-14deg) scaleY(1); }
  50% { transform: rotate(-54deg) scaleY(0.86); }
}
@keyframes dove-flap-far {
  0%, 100% { transform: rotate(-10deg) scaleY(1); }
  50% { transform: rotate(-40deg) scaleY(0.84); }
}
.dodge-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.8em;
  height: 0.8em;
  margin-left: -0.4em;
  color: var(--sage);
  opacity: 0;
  pointer-events: none;
  transform-origin: 91.667% 50%;       /* rotate about the tip as it follows the arc */
}
.dodge-arrow svg { width: 100%; height: 100%; fill: currentColor; display: block; }
@media (prefers-reduced-motion: reduce) {
  .dove-flight, .dove-wing, .dove-wing-far { animation: none; }
}

/* ============ Selected Work: case study cards + modals ============ */
.work-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  overflow: hidden;
  color: inherit;
  font: inherit;
  cursor: pointer;
  --work-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.22s var(--work-ease), box-shadow 0.22s var(--work-ease), border-color 0.22s var(--work-ease);
}
.work-card:hover,
.work-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(29, 31, 27, 0.1);
  border-color: var(--sage);
}
.work-cover {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.work-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.22s var(--work-ease);
}
.work-card:hover .work-cover img,
.work-card:focus-visible .work-cover img { transform: scale(1.06); }
.work-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.5rem 1.5rem;
  flex: 1;
}
.work-meta {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.work-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.25;
  color: var(--ink);
}
.work-summary {
  color: var(--ink-soft);
}
.work-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--brand);
}
.work-cta i { transition: transform 0.22s var(--work-ease); display: inline-block; }
.work-card:hover .work-cta i { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .work-card, .work-cover img, .work-cta i { transition: none; }
  .work-card:hover, .work-card:focus-visible { transform: none; }
  .work-card:hover .work-cover img, .work-card:hover .work-cta i { transform: none; }
}


.work-modal .modal-content {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
}
.work-modal .modal-header,
.work-modal .modal-footer {
  border-color: var(--line);
  padding: 1.25rem 1.75rem;
}
.work-modal .modal-title {
  font-weight: 600;
  margin: 0;
}
.work-modal .modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: 1.75rem;
}
@media (min-width: 992px) {
  .work-modal .modal-body {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .work-overview {
    position: sticky;
    top: 0;
  }
}
.work-role {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.work-role i { color: var(--sage); }
.work-section-title {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sage-ink);
  margin: 1.25rem 0 0.4rem;
}
.work-overview p { color: var(--ink-soft); }
.work-tools {
  font-size: 0.9rem;
  margin-top: 1.25rem;
}
/* Tools sit under the role as part of the header block, so the divider moves below them */
.work-role:has(+ .work-tools) {
  padding-bottom: 0.35rem;
  border-bottom: 0;
}
.work-role + .work-tools {
  margin: 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.work-tools span {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 0.4rem;
}
.work-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.work-gallery img,
.work-gallery iframe {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
}
.work-gallery iframe {
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

/* Selected Work is website-only: keep it out of anything printed from the page */
@media print {
  #portfolio,
  .work-modal,
  .modal-backdrop {
    display: none !important;
  }
  /* Scroll-reveal content never animates in on paper, so show it outright */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ Certifications: horizontal logo cards ============ */
.cert-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(29, 31, 27, 0.08);
  border-color: var(--sage);
}
.cert-logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sage);
  font-size: 1.3rem;
  overflow: hidden;
}
.cert-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Institution wordmark logos are wide, not square — give them a
   letterbox slot instead of squeezing them into the badge box */
.cert-logo-brand {
  width: 120px;
  height: 48px;
}
/* Tablet widths: two cards per row is too tight for logo + text side by side,
   so stack the logo above the text. Desktop and phones keep the side-by-side layout. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .cert-card {
    flex-direction: column;
    gap: 0.85rem;
  }
  .cert-logo img {
    object-position: left center;
  }
}
.cert-body h5 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.cert-issuer {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.cert-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.cert-list li {
  padding: 0.15rem 0;
}

/* ============ Contact ============ */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.95rem;
}
.contact-list li {
  border-bottom: 1px solid var(--line);
}
.contact-list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 0.1rem;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease, gap 0.15s ease;
}
.contact-list a:hover {
  color: var(--brand);
  gap: 1rem;
}
.contact-list i {
  color: var(--sage);
  font-size: 1.1rem;
  width: 1.3rem;
}

.contact-download {
  margin-top: 2rem;
}

footer {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  border-top-color: var(--line) !important;
  color: var(--ink-faint) !important;
}

/* Reserve a margin for the floating island nav so it never overlaps content */
@media (min-width: 992px) {
  body {
    padding-left: 6.5rem;
  }
}

/* ============ Floating island nav (desktop, ≥lg) ============ */
#islandNav {
  position: fixed;
  top: 50%;
  left: 1.5rem;
  transform: translateY(-50%);
  z-index: 1030;

  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-radius: 999px;

  background: rgba(248, 246, 239, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(29, 31, 27, 0.14);
  border: 1px solid var(--line);
}

/* The dove is wide and short, so it reads small in the same square as the other
   nav glyphs. Scale it up to match their visual weight. */
.island-link .nav-dove svg {
  width: 1.32em;
  height: 1.32em;
  overflow: visible;
}

.island-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ink-soft);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.island-link:hover,
.island-link:focus-visible {
  background-color: var(--sage-soft);
  color: var(--ink);
  outline: none;
}

.island-link.active {
  background-color: var(--pop);
  color: var(--ink);
}

/* Tooltip-style label on hover, floats to the right of the island */
.island-link::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--card);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 0.72rem;
  padding: 4px 10px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.island-link:hover::after,
.island-link:focus-visible::after {
  opacity: 1;
}