/*
 Theme Name:     Twenty Twenty Child Theme
 Theme URI:      http://monteamador.com
 Description:    Twenty Twenty Child Theme for Modification
 Author:         Monte Amador
 Author URI:     http://monteamador.com
 Template:       twentytwenty
 Version:        1.0.0
*/
/* =Theme customization starts here
------------------------------------------------------- */
@font-face {
  font-family: montebello-sans;
  src: url("assets/fonts/Montebello-Sans.eot");
  src: url("assets/fonts/Montebello-Sans.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Montebello-Sans.otf") format("opentype"), url("assets/fonts/Montebello-Sans.woff") format("woff"), url("assets/fonts/Montebello-Sans.woff2") format("woff2"), url("assets/fonts/Montebello-Sans.ttf") format("truetype"), url("assets/fonts/Montebello-Sans.svg#Montebello-Sans") format("svg"); }

@font-face {
  font-family: montebello-rounded;
  src: url("assets/fonts/Montebello-Rounded.eot");
  src: url("assets/fonts/Montebello-Rounded.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Montebello-Rounded.otf") format("opentype"), url("assets/fonts/Montebello-Rounded.woff") format("woff"), url("assets/fonts/Montebello-Rounded.woff2") format("woff2"), url("assets/fonts/Montebello-Rounded.ttf") format("truetype"), url("assets/fonts/Montebello-Rounded.svg#Montebello-Rounded") format("svg"); }

/* Headings: reset parent tight letter-spacing (Twenty Twenty base h1–h6, .faux-heading). */
h1,
h2,
h3,
h4,
h5,
h6,
.faux-heading {
  letter-spacing: normal;
}

h1.entry-title, h2.entry-title {
  font-family: 'montebello-sans', sans-serif; }

.featured-media-inner img {
  max-height: 600px;
  width: auto; }

div.site-description {
  font-family: "Courier New", Courier, monospace; }

p.last-updated {
  text-align: center; }

body.dark-mode p.block-editor-rich-text__editable {
  outline: 5px dotted #333; }

pre.wp-block-code code {
  color: #2a2a2a; }

code {
  color: #fdfdfd; }

body.page-id-7 h1 {
  font-size: 7.4rem; }

body.page-id-7 .to-the-content {
  display: none; }

body.page-id-7 .post-inner {
  display: none; }

body.page-id-7 main#site-content {
  padding-bottom: 0; }

span.ninja-forms-req-symbol {
  color: #1EA1C2; }

.footer-top-visible .footer-nav-widgets-wrapper, .footer-top-hidden #site-footer {
  margin-top: 0;
  padding-top: 8rem;
  border-color: #fdfdfd; }

div.footer-top {
  border-color: #fdfdfd; }

aside.footer-widgets-outer-wrapper {
  border-color: #fdfdfd; }

main#site-content {
  padding-bottom: 5rem; }

/* Layout: neutralize parent Twenty Twenty .post-inner { padding-top: 8rem } at ≥700px only; below 700px parent’s 5rem stays. Does not affect .cover-header + .post-inner at ≥1220px (higher specificity in parent). */
@media (min-width: 700px) {
  .post-inner {
    padding-top: 0;
  }
}

/* Sections: parent Twenty Twenty caps .section-inner.thin at 58rem at all widths; widen only on desktop (matches child 1024px breakpoints). */
@media (min-width: 1024px) {
  .section-inner.thin {
    max-width: 75rem;
  }
}

  html.js body.home.wp-singular.page-template-default.page.page-id-2.logged-in.admin-bar.custom-background.wp-custom-logo.wp-embed-responsive.wp-theme-twentytwenty.wp-child-theme-twentytwentychild.singular.enable-search-modal.missing-post-thumbnail.has-no-pagination.not-showing-comments.show-avatars.footer-top-visible.customize-support header#site-header.header-footer-group div.header-inner.section-inner div.header-navigation-wrapper div.header-toggles.hide-no-js div.toggle-wrapper.nav-toggle-wrapper.has-expanded-menu::before  {
  background-color: #fdfdfd;
}

html.js body.home.wp-singular.page-template-default.page.page-id-2.logged-in.admin-bar.custom-background.wp-custom-logo.wp-embed-responsive.wp-theme-twentytwenty.wp-child-theme-twentytwentychild.singular.enable-search-modal.missing-post-thumbnail.has-no-pagination.not-showing-comments.show-avatars.footer-top-visible.customize-support header#site-header.header-footer-group div.header-inner.section-inner div.header-navigation-wrapper div.header-toggles.hide-no-js div.toggle-wrapper.search-toggle-wrapper::before {
  background-color: #fdfdfd!important;
}

/* Home portfolio grid (Phase 2 — section width + cards: layered shadow, hover lift + thumbnail zoom on .front-page-portfolio__card — see rules below).
 * Width: below 1024px, match Twenty Twenty .entry-content default column (max-width: 58rem, width: calc(100% - 4rem)).
 * From 1024px up, wider artboard: max-width 1200px, same 4rem width model, centered.
 * Horizontal: only safe-area insets; no 1.5rem side padding (avoids stacking with the 4rem column rule on tablet/mobile).
 */
.front-page-portfolio {
  box-sizing: border-box;
  max-width: 58rem;
  width: calc(100% - 4rem);
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  padding-top: 8rem;
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

@media (min-width: 1024px) {
  .front-page-portfolio {
    max-width: 1200px;
  }
}

.front-page-portfolio__grid {
  display: grid;
  gap: 25px;
  grid-template-columns: 1fr;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Home portfolio — card: equal-height rows (grid stretch), flex column + bottom-aligned nav (margin-top: auto on nav).
 * Stronger hairline + drop shadow (default/hover); fine-pointer hover adds lift translateY(-3px), deeper shadow, and img scale(1.08) inside .card-media (overflow hidden).
 * prefers-reduced-motion: no card/img transition or hover transforms/zoom — decorative only; chips/links remain primary targets. */
.front-page-portfolio .front-page-portfolio__card {
  box-sizing: border-box;
  min-width: 0;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow:
    0 0 0 1px rgba(222, 222, 222, 0.11),
    0 12px 32px rgba(0, 0, 0, 0.42);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .front-page-portfolio .front-page-portfolio__card:hover {
    box-shadow:
      0 0 0 1px rgba(222, 222, 222, 0.17),
      0 17px 42px rgba(0, 0, 0, 0.52);
    transform: translateY(-3px);
  }

  .front-page-portfolio .front-page-portfolio__card:hover .front-page-portfolio__card-image {
    transform: scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .front-page-portfolio .front-page-portfolio__card {
    transition: none;
  }

  .front-page-portfolio .front-page-portfolio__card-image {
    transition: none;
  }

  .front-page-portfolio .front-page-portfolio__card-media-hover {
    transition: none;
  }

  .front-page-portfolio a.front-page-portfolio__card-project-link {
    transition: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .front-page-portfolio .front-page-portfolio__card:hover {
    transform: none;
  }

  .front-page-portfolio .front-page-portfolio__card:hover .front-page-portfolio__card-image {
    transform: none;
  }
}

/* Home portfolio — card media frame (crop to fill; fixed 16:9 image area across the grid). */
.front-page-portfolio .front-page-portfolio__card-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
}

.front-page-portfolio .front-page-portfolio__card-body {
  padding-inline: 25px;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.front-page-portfolio .front-page-portfolio__card-body nav.front-page-card-links {
  margin-top: auto;
}

.front-page-portfolio .front-page-portfolio__card-media.front-page-portfolio__card-media--empty {
  background-color: #333333;
}

/* Home portfolio — image link overlay: fine pointer = full-bleed scrim, opacity 0 → 1 on card:hover / image-link :focus-visible (0.5s ease); (hover: none) or coarse pointer = lower-third bar, always visible, no opacity animation. #fff label/icon; rgba(0,0,0,0.7) scrim family. */
.front-page-portfolio .front-page-portfolio__card-media > a.front-page-portfolio__card-image-link {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

/* Touch / coarse (default): lower third strip, CTA always readable; transition none on overlay. */
.front-page-portfolio .front-page-portfolio__card-media-hover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0.75rem 0.65rem;
  background-color: rgba(42, 42, 42, 0.7);
  color: #ffffff;
  opacity: 1;
  pointer-events: auto;
  transition: none;
}

.front-page-portfolio .front-page-portfolio__card-media-hover-row {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  max-width: 100%;
  text-align: center;
}

.front-page-portfolio .front-page-portfolio__card-media-hover-label {
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff;
}

.front-page-portfolio .front-page-portfolio__card-media-hover-icon {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
}

.front-page-portfolio .front-page-portfolio__card-media-hover-icon svg,
.front-page-portfolio .front-page-portfolio__card-media-hover-icon path {
  fill: #ffffff;
}

.front-page-portfolio .front-page-portfolio__card-media-hover-icon svg {
  display: block;
  width: 1.35em;
  height: 1.35em;
}

.front-page-portfolio .front-page-portfolio__card-image-link:focus-visible {
  outline: 2px solid #dedede;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .front-page-portfolio .front-page-portfolio__card-media-hover {
    inset: 0;
    padding: 0.75rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
  }

  .front-page-portfolio .front-page-portfolio__card-media-hover-label {
    font-size: 2.3rem;
  }

  .front-page-portfolio .front-page-portfolio__card:hover .front-page-portfolio__card-media-hover {
    opacity: 1;
    pointer-events: auto;
  }

  .front-page-portfolio .front-page-portfolio__card-image-link:focus-visible .front-page-portfolio__card-media-hover {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none), (pointer: coarse) {
  /* Explicit lower-third / always-on CTA for touch (same layout as base; resets inset:0 from fine-pointer rule when both queries match). */
  .front-page-portfolio .front-page-portfolio__card-media-hover {
    inset: unset;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }

  .front-page-portfolio .front-page-portfolio__card-media-hover-label {
    font-size: 1.6rem;
  }
}

.front-page-portfolio .front-page-portfolio__card-media .front-page-portfolio__card-image {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  transition: transform 0.5s ease;
  z-index: 0;
}

/* Home portfolio — card client line: Twenty Twenty H4 scale (2.4rem / 700 / 1.25); tight card margins (0.75rem top, 0.5rem bottom).
 * Light surface token #dedede — same as project link chips; hover/focus text uses darker grays (#d0d0d0 / #c8c8c8) on dark card. */
.front-page-portfolio h2.front-page-portfolio__card-client-heading {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  color: #dedede;
  text-align: left; /* override inherited centering from page/section utilities */
  /* Flex item: clear horizontal auto margins from theme .entry-content h* so the heading doesn’t center in the column flex container. */
  margin-inline: 0;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
}

.front-page-portfolio a.front-page-portfolio__card-client-heading-link {
  display: block;
  text-align: left;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.front-page-portfolio a.front-page-portfolio__card-client-heading-link:link,
.front-page-portfolio a.front-page-portfolio__card-client-heading-link:visited {
  color: #dedede;
  text-decoration: none;
}

.front-page-portfolio a.front-page-portfolio__card-client-heading-link:hover,
.front-page-portfolio a.front-page-portfolio__card-client-heading-link:active {
  color: #d0d0d0;
  text-decoration: none;
}

.front-page-portfolio a.front-page-portfolio__card-client-heading-link:focus {
  color: #dedede;
  text-decoration: none;
}

.front-page-portfolio a.front-page-portfolio__card-client-heading-link:focus-visible {
  outline: 2px solid #dedede;
  outline-offset: 2px;
  color: #dedede;
}

/* Homepage portfolio card — bold “Role” label (span only; rest of line stays normal). */
.front-page-portfolio .front-page-portfolio__card-role-label {
  font-weight: 700;
}

/* Home portfolio — project links (Phase 2): inline label + chain icon beside text.
 * Color/fill follow global <a> + Customizer output (no chip styling, no hex on the anchor).
 * twentytwenty_get_theme_svg() may emit a fixed fill; overridden with currentColor below. */
.front-page-portfolio nav.front-page-card-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.front-page-portfolio nav.front-page-card-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.front-page-portfolio a.front-page-portfolio__card-project-link {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35em;
  max-width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color 0.5s ease;
}

.front-page-portfolio a.front-page-portfolio__card-project-link .front-page-portfolio__card-project-link-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.front-page-portfolio a.front-page-portfolio__card-project-link .front-page-portfolio__card-project-link-icon svg {
  display: block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

.front-page-portfolio a.front-page-portfolio__card-project-link .front-page-portfolio__card-project-link-icon svg,
.front-page-portfolio a.front-page-portfolio__card-project-link .front-page-portfolio__card-project-link-icon path {
  fill: currentColor !important;
}

.front-page-portfolio a.front-page-portfolio__card-project-link:hover {
  color: #ffffff;
}

.front-page-portfolio a.front-page-portfolio__card-project-link:focus-visible {
  color: #ffffff;
}

/* Cover hero — ACF link chips (portfolio cover only): frosted glass pills; :hover / :focus-visible use inverse (dark text on light).
 * nav margin-top clears space from entry-header meta (date) above. prefers-reduced-transparency / dark-mode / motion: nested blocks. */
.cover-header nav.portfolio-cover-links {
  margin-top: clamp(1.65rem, 4.5vw, 2.75rem);
}

@media (min-width: 1000px) {
  .cover-header nav.portfolio-cover-links {
    margin-top: clamp(2rem, 3vw, 3rem);
  }
}

.cover-header nav.portfolio-cover-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.cover-header nav.portfolio-cover-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

.cover-header nav.portfolio-cover-links .faux-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(100%, 36rem);
  box-sizing: border-box;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  padding: 0.85rem 1.75rem;
  min-height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 9999px;
  background-color: rgba(16, 18, 22, 0.9);
  color: #f6f6f6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease,
    box-shadow 0.5s ease,
    text-shadow 0.5s ease;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header nav.portfolio-cover-links .faux-button {
    background-color: rgba(16, 18, 22, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}

.cover-header nav.portfolio-cover-links .faux-button:link,
.cover-header nav.portfolio-cover-links .faux-button:visited {
  color: #f6f6f6;
}

.cover-header nav.portfolio-cover-links .faux-button:hover {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 10, 12, 0.2);
  color: #121212;
  text-shadow: none;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 22px rgba(0, 0, 0, 0.2);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header nav.portfolio-cover-links .faux-button:hover {
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

.cover-header nav.portfolio-cover-links .faux-button:active {
  background-color: #e4e4e4;
  border-color: rgba(10, 10, 12, 0.26);
  color: #0a0a0a;
  text-shadow: none;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.14) inset,
    0 4px 14px rgba(0, 0, 0, 0.18);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header nav.portfolio-cover-links .faux-button:active {
    background-color: rgba(238, 238, 238, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

.cover-header nav.portfolio-cover-links .faux-button:focus:not(:focus-visible) {
  outline: none;
}

.cover-header nav.portfolio-cover-links .faux-button:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  color: #121212;
  text-shadow: none;
  border-color: rgba(10, 10, 12, 0.22);
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 0 5px rgba(10, 10, 12, 0.82),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 22px rgba(0, 0, 0, 0.22);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cover-header nav.portfolio-cover-links .faux-button,
  .cover-header nav.portfolio-cover-links .faux-button:hover,
  .cover-header nav.portfolio-cover-links .faux-button:active,
  .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .cover-header nav.portfolio-cover-links .faux-button {
    background-color: rgba(16, 18, 22, 0.94);
  }

  .cover-header nav.portfolio-cover-links .faux-button:hover {
    background-color: #f6f6f6;
    border-color: rgba(10, 10, 12, 0.2);
    color: #121212;
    text-shadow: none;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 6px 22px rgba(0, 0, 0, 0.2);
  }

  .cover-header nav.portfolio-cover-links .faux-button:active {
    background-color: #e4e4e4;
    border-color: rgba(10, 10, 12, 0.26);
    color: #0a0a0a;
    text-shadow: none;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.14) inset,
      0 4px 14px rgba(0, 0, 0, 0.18);
  }

  .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
    background-color: #ffffff;
    border-color: rgba(10, 10, 12, 0.22);
    color: #121212;
    text-shadow: none;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 1),
      0 0 0 5px rgba(10, 10, 12, 0.82),
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 8px 22px rgba(0, 0, 0, 0.22);
  }

  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button {
    background-color: rgba(10, 11, 14, 0.96);
  }

  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:hover {
    background-color: #f0f0ef;
    border-color: rgba(8, 8, 10, 0.22);
    color: #0c0c0c;
    text-shadow: none;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88) inset,
      0 6px 22px rgba(0, 0, 0, 0.22);
  }

  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:active {
    background-color: #dcdcda;
    border-color: rgba(8, 8, 10, 0.28);
    color: #0a0a0a;
    text-shadow: none;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.16) inset,
      0 4px 14px rgba(0, 0, 0, 0.2);
  }

  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
    background-color: #f4f4f3;
    border-color: rgba(8, 8, 10, 0.24);
    color: #111111;
    text-shadow: none;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 1),
      0 0 0 6px rgba(8, 8, 10, 0.88),
      0 1px 0 rgba(255, 255, 255, 0.88) inset,
      0 8px 22px rgba(0, 0, 0, 0.26);
  }
}

/* body.dark-mode: rest = dark glass; hover/active/focus-visible = same inverse light chips with slightly softer fill to reduce glare. */
body.dark-mode .cover-header nav.portfolio-cover-links .faux-button {
  border-color: rgba(255, 255, 255, 0.38);
  background-color: rgba(10, 11, 14, 0.92);
  color: #fafafa;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button {
    background-color: rgba(10, 11, 14, 0.72);
  }
}

body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:hover {
  background-color: rgba(244, 244, 243, 0.98);
  border-color: rgba(8, 8, 10, 0.22);
  color: #0c0c0c;
  text-shadow: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 22px rgba(0, 0, 0, 0.22);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:hover {
    background-color: rgba(244, 244, 243, 0.95);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:active {
  background-color: #dcdcda;
  border-color: rgba(8, 8, 10, 0.28);
  color: #0a0a0a;
  text-shadow: none;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16) inset,
    0 4px 14px rgba(0, 0, 0, 0.2);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:active {
    background-color: rgba(226, 226, 224, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  color: #111111;
  text-shadow: none;
  border-color: rgba(8, 8, 10, 0.24);
  background-color: #f4f4f3;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 0 6px rgba(8, 8, 10, 0.88),
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 8px 22px rgba(0, 0, 0, 0.26);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    background-color: rgba(244, 244, 243, 0.97);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-header nav.portfolio-cover-links .faux-button,
  .cover-header nav.portfolio-cover-links .faux-button:hover,
  .cover-header nav.portfolio-cover-links .faux-button:active,
  .cover-header nav.portfolio-cover-links .faux-button:focus-visible {
    transition: none;
  }
}

/* Portfolio cover — Module: Links below content (#post-inner). Values mirror cover hero; do not edit hero block above. */
#post-inner nav.portfolio-cover-content-links {
  margin-top: clamp(1.65rem, 4.5vw, 2.75rem);
}

@media (min-width: 1000px) {
  #post-inner nav.portfolio-cover-content-links {
    margin-top: clamp(2rem, 3vw, 3rem);
  }
}

#post-inner nav.portfolio-cover-content-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

#post-inner nav.portfolio-cover-content-links li {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}

#post-inner nav.portfolio-cover-content-links .faux-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: min(100%, 36rem);
  box-sizing: border-box;
  margin: 0;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  padding: 0.85rem 1.75rem;
  min-height: 3rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 9999px;
  background-color: rgba(16, 18, 22, 0.9);
  color: #f6f6f6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 8px 24px rgba(0, 0, 0, 0.35);
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    color 0.5s ease,
    box-shadow 0.5s ease,
    text-shadow 0.5s ease;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #post-inner nav.portfolio-cover-content-links .faux-button {
    background-color: rgba(16, 18, 22, 0.62);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}

#post-inner nav.portfolio-cover-content-links .faux-button:link,
#post-inner nav.portfolio-cover-content-links .faux-button:visited {
  color: #f6f6f6;
}

#post-inner nav.portfolio-cover-content-links .faux-button:hover {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(10, 10, 12, 0.2);
  color: #121212;
  text-shadow: none;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 6px 22px rgba(0, 0, 0, 0.2);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #post-inner nav.portfolio-cover-content-links .faux-button:hover {
    background-color: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

#post-inner nav.portfolio-cover-content-links .faux-button:active {
  background-color: #e4e4e4;
  border-color: rgba(10, 10, 12, 0.26);
  color: #0a0a0a;
  text-shadow: none;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.14) inset,
    0 4px 14px rgba(0, 0, 0, 0.18);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #post-inner nav.portfolio-cover-content-links .faux-button:active {
    background-color: rgba(238, 238, 238, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

#post-inner nav.portfolio-cover-content-links .faux-button:focus:not(:focus-visible) {
  outline: none;
}

#post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  color: #121212;
  text-shadow: none;
  border-color: rgba(10, 10, 12, 0.22);
  background-color: rgba(255, 255, 255, 0.98);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 0 5px rgba(10, 10, 12, 0.82),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 22px rgba(0, 0, 0, 0.22);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

@media (prefers-reduced-transparency: reduce) {
  #post-inner nav.portfolio-cover-content-links .faux-button,
  #post-inner nav.portfolio-cover-content-links .faux-button:hover,
  #post-inner nav.portfolio-cover-content-links .faux-button:active,
  #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  #post-inner nav.portfolio-cover-content-links .faux-button {
    background-color: rgba(16, 18, 22, 0.94);
  }

  #post-inner nav.portfolio-cover-content-links .faux-button:hover {
    background-color: #f6f6f6;
    border-color: rgba(10, 10, 12, 0.2);
    color: #121212;
    text-shadow: none;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      0 6px 22px rgba(0, 0, 0, 0.2);
  }

  #post-inner nav.portfolio-cover-content-links .faux-button:active {
    background-color: #e4e4e4;
    border-color: rgba(10, 10, 12, 0.26);
    color: #0a0a0a;
    text-shadow: none;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.14) inset,
      0 4px 14px rgba(0, 0, 0, 0.18);
  }

  #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
    background-color: #ffffff;
    border-color: rgba(10, 10, 12, 0.22);
    color: #121212;
    text-shadow: none;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 1),
      0 0 0 5px rgba(10, 10, 12, 0.82),
      0 1px 0 rgba(255, 255, 255, 0.9) inset,
      0 8px 22px rgba(0, 0, 0, 0.22);
  }

  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button {
    background-color: rgba(10, 11, 14, 0.96);
  }

  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:hover {
    background-color: #f0f0ef;
    border-color: rgba(8, 8, 10, 0.22);
    color: #0c0c0c;
    text-shadow: none;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.88) inset,
      0 6px 22px rgba(0, 0, 0, 0.22);
  }

  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:active {
    background-color: #dcdcda;
    border-color: rgba(8, 8, 10, 0.28);
    color: #0a0a0a;
    text-shadow: none;
    box-shadow:
      0 2px 5px rgba(0, 0, 0, 0.16) inset,
      0 4px 14px rgba(0, 0, 0, 0.2);
  }

  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    outline: 3px solid #0a0a0a;
    outline-offset: 3px;
    background-color: #f4f4f3;
    border-color: rgba(8, 8, 10, 0.24);
    color: #111111;
    text-shadow: none;
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 1),
      0 0 0 6px rgba(8, 8, 10, 0.88),
      0 1px 0 rgba(255, 255, 255, 0.88) inset,
      0 8px 22px rgba(0, 0, 0, 0.26);
  }
}

/* body.dark-mode: rest = dark glass; hover/active/focus-visible = same inverse light chips with slightly softer fill to reduce glare. */
body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button {
  border-color: rgba(255, 255, 255, 0.38);
  background-color: rgba(10, 11, 14, 0.92);
  color: #fafafa;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button {
    background-color: rgba(10, 11, 14, 0.72);
  }
}

body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:hover {
  background-color: rgba(244, 244, 243, 0.98);
  border-color: rgba(8, 8, 10, 0.22);
  color: #0c0c0c;
  text-shadow: none;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 22px rgba(0, 0, 0, 0.22);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:hover {
    background-color: rgba(244, 244, 243, 0.95);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:active {
  background-color: #dcdcda;
  border-color: rgba(8, 8, 10, 0.28);
  color: #0a0a0a;
  text-shadow: none;
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.16) inset,
    0 4px 14px rgba(0, 0, 0, 0.2);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:active {
    background-color: rgba(226, 226, 224, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
  outline: 3px solid #0a0a0a;
  outline-offset: 3px;
  color: #111111;
  text-shadow: none;
  border-color: rgba(8, 8, 10, 0.24);
  background-color: #f4f4f3;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 1),
    0 0 0 6px rgba(8, 8, 10, 0.88),
    0 1px 0 rgba(255, 255, 255, 0.88) inset,
    0 8px 22px rgba(0, 0, 0, 0.26);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.dark-mode #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    background-color: rgba(244, 244, 243, 0.97);
    -webkit-backdrop-filter: blur(10px) saturate(1.05);
    backdrop-filter: blur(10px) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  #post-inner nav.portfolio-cover-content-links .faux-button,
  #post-inner nav.portfolio-cover-content-links .faux-button:hover,
  #post-inner nav.portfolio-cover-content-links .faux-button:active,
  #post-inner nav.portfolio-cover-content-links .faux-button:focus-visible {
    transition: none;
  }
}

/* Cover title — frosted readability (cover template only): dark glass behind the main heading; not link chips, not in-content nav, not .entry-content body.
 * Parent .cover-header .entry-header * keeps title color #fff — this block only adds surface + blur for contrast on hero imagery. */
.cover-header h1.entry-title,
.cover-header h2.entry-title {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  isolation: isolate;
  padding: 0.35em 0.65em;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.52);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header h1.entry-title,
  .cover-header h2.entry-title {
    background-color: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(5px) saturate(1.15);
    backdrop-filter: blur(5px) saturate(1.15);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cover-header h1.entry-title,
  .cover-header h2.entry-title {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-header h1.entry-title,
  .cover-header h2.entry-title {
    transition: none;
  }
}

/* Cover photo credit — frosted (matches title; Phase 1 markup). Outside .entry-header — explicit light text.
 * Layout: base (<768px) = bottom-centered; min-width 768px = bottom-right (aligns with theme breakpoint tier). */
.cover-header .cover-header__photo-credit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: fit-content;
  max-width: min(90%, 24rem);
  z-index: 3;
  box-sizing: border-box;
  margin: 0;
  margin-inline: auto;
  padding: 0.4em 0.65em;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(0.78rem, 1.28vw, 0.92rem);
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

@media (min-width: 768px) {
  .cover-header .cover-header__photo-credit {
    left: auto;
    right: max(1rem, env(safe-area-inset-right, 0px));
    margin-inline: 0;
    width: auto;
    max-width: min(55vw, 22rem);
    text-align: right;
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cover-header .cover-header__photo-credit {
    background-color: rgba(0, 0, 0, 0.38);
    -webkit-backdrop-filter: blur(5px) saturate(1.15);
    backdrop-filter: blur(5px) saturate(1.15);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cover-header .cover-header__photo-credit {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.24);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover-header .cover-header__photo-credit {
    transition: none;
  }
}

@media (min-width: 768px) {
  .front-page-portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .front-page-portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Home portfolio — pagination
 * Scoped to homepage portfolio block only (paginate_links type=list).
 * prev/next: WordPress outputs <a class="prev page-numbers" …> and <a class="next page-numbers" …>
 * inside their own <li>. li:has(> a.prev) / li:has(> a.next) pin those to the row edges; numeric
 * <li> stay in-flow and flex as a centered cluster. When a side control is omitted, numbers stay centered.
 * Wrapper: full width of the portfolio block (same as grid) so the row is not a narrow 75% bar on any viewport.
 * ul: 2rem sides below desktop (entry-column rhythm); 1024+ uses a bit more room for side absolutes.
 */
.front-page-portfolio .front-page-portfolio__pagination {
  width: 100%;
  max-width: 100%;
  margin-top: 1.75rem;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0.25rem 2rem;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .front-page-portfolio .front-page-portfolio__pagination ul.page-numbers {
    padding: 0.25rem min(8vw, 6rem);
  }
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers li {
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Side controls: out of document flow so the remaining <li> form a true centered number group. */
.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers li:has(> a.prev) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 1;
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers li:has(> a.next) {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
}

@media (max-width: 767px) {
  .front-page-portfolio .front-page-portfolio__pagination ul.page-numbers {
    padding-left: clamp(0.5rem, 4vw, 2rem);
    padding-right: clamp(0.5rem, 4vw, 2rem);
  }
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers a,
.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers span {
  display: inline-block;
  padding: 0.25em 0.5em;
  text-decoration: none;
  color: inherit;
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers a:hover,
.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers a:focus {
  text-decoration: underline;
}

.front-page-portfolio .front-page-portfolio__pagination ul.page-numbers a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration: none;
}

/* Singular portfolio — project details (Phase 2): meta panel under hero / above .entry-content.
 * Row --summary: 2 columns at min-width 700px (matches child .post-inner breakpoint); stacks to 1 col below.
 * Row --tasks: full width; WYSIWYG in .portfolio-module-tasks__item.
 * Scoped with .single-portfolio on body for singular portfolio posts (with .portfolio-project-details markup).
 * The portfolio post-type body class is not relied on here — it is not present on singular portfolio body on this site.
 * No global .entry-content changes. */

.single-portfolio .portfolio-project-details {
  margin-bottom: clamp(1.25rem, 4vw, 2.5rem);
}

.single-portfolio .portfolio-project-details .portfolio-project-details__inner {
  box-sizing: border-box;
  border: 1px solid rgba(253, 253, 253, 0.18);
  border-radius: 16px;
  background-color: rgba(0, 0, 0, 0.28);
  padding: clamp(1rem, 3vw, 1.75rem);
}

.single-portfolio .portfolio-project-details__row--summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
  min-width: 0;
}

@media (min-width: 700px) {
  .single-portfolio .portfolio-project-details__row--summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

.single-portfolio .portfolio-project-details__col {
  min-width: 0;
}

.single-portfolio .portfolio-project-details__col:only-child {
  grid-column: 1 / -1;
}

.single-portfolio .portfolio-project-details__row--tasks:not(:first-child) {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(253, 253, 253, 0.12);
}

.single-portfolio .portfolio-project-details .portfolio-module-roles__text,
.single-portfolio .portfolio-project-details .portfolio-module-collaboration__text {
  margin: 0;
  color: #fdfdfd;
  font-size: 1.6rem;
  line-height: 1.45;
}

.single-portfolio .portfolio-project-details .portfolio-module-collaboration__text {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  column-gap: 0.25ch;
  row-gap: 0.25em;
}

.single-portfolio .portfolio-project-details .portfolio-module-collaboration__prefix {
  flex: 0 0 auto;
}

.single-portfolio .portfolio-project-details .portfolio-module-roles__label,
.single-portfolio .portfolio-project-details .portfolio-module-collaboration__label {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.88;
  color: #fdfdfd;
}

.single-portfolio .portfolio-project-details .portfolio-module-roles__label {
  font-weight: 700;
}

.single-portfolio .portfolio-project-details .portfolio-module-collaboration__value {
  flex: 1 1 0;
  min-width: 0;
  color: #fdfdfd;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__label {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.88;
  color: #fdfdfd;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item {
  color: #fdfdfd;
  font-size: 1.6rem;
  line-height: 1.5;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item > *:first-child {
  margin-top: 0;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item > *:last-child {
  margin-bottom: 0;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item p {
  margin: 0 0 0.85em;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item ul,
.single-portfolio .portfolio-project-details .portfolio-module-tasks__item ol {
  margin: 0 0 0.85em 1.25em;
  padding: 0;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item li {
  margin-bottom: 0.35em;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item a {
  color: #1ea1c2;
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item a:hover {
  color: #fdfdfd;
}

.single-portfolio .portfolio-project-details .portfolio-module-tasks__item a:focus-visible {
  outline: 2px solid #1ea1c2;
  outline-offset: 2px;
}