/* Supplied Oy-gul screens retain their original content and proportions. */

.screenshot-preview img {
  display: block;
  width: 100%;
  height: auto;
}

.bento-grid .oygul .screenshot-preview {
  padding: 0;
  height: 160px;
  top: 55px;
  left: 22px;
  right: 22px;
  border-radius: 14px 14px 0 0;
  opacity: 1;
}

.bento-grid .oygul .screenshot-preview img {
  object-position: top;
}

.viewer-content .screenshot-preview {
  height: auto;
  max-width: 320px;
  margin: 32px auto 0;
  padding: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 16px 45px #30274218;
  overflow: hidden;
}

.project-screens {
  display: grid;
  gap: 22px;
  margin: 32px 0 0;
  align-items: start;
}

.project-screens figure {
  min-width: 0;
  margin: 0;
}

.project-screens img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid #20252d10;
}

.project-screens figcaption {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 12px;
  color: inherit;
  opacity: .75;
}

.simple-preview.oygul .screenshot-preview {
  max-width: 320px;
  margin: auto;
  padding: 0;
  background: white;
  border: 1px solid #e7eaf0;
  border-radius: 24px;
  overflow: hidden;
}

.oygul-screens>.simple-preview>figcaption {
  text-align: center;
}

.oygul-screens {
  margin-bottom: 28px;
}

@media(max-width:580px) {
  .bento-grid .oygul .screenshot-preview {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 85px;
    margin: 0 0 18px;
    border-radius: 10px;
  }

  .project-screens {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
  }

  .project-screens figure:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }

  .viewer-content .screenshot-preview {
    max-width: 280px;
  }

  .project-screens figcaption {
    font-size: 12px;
  }
}

.project-screens {
  grid-template-columns: repeat(2,minmax(0,1fr));
  max-width: 680px;
  margin-inline: auto;
}

.project-screens figure:last-child {
  grid-column: auto;
  width: auto;
  justify-self: stretch;
}

/* Oy-gul's olive brand color from its interface buttons. */

.bento-grid>.oygul,.work-cover.oygul {
  background: #75865f;
  color: #fff;
}

.bento-grid>.oygul .expand {
  background: #ffffff22;
}

.bento-grid>.oygul p {
  color: #f0f3eb;
}

.card-viewer.oygul {
  color: #fff;
}

.card-viewer.oygul .card-heading p,.card-viewer.oygul .reveal-inner p {
  color: #f0f3eb;
}

.simple-preview.oygul .tile-preview {
  background: #75865f;
}

/* Preserve rounded edges while the card surface expands and contracts. */

.viewer-surface {
  border-radius: 28px;
  overflow: hidden;
}

@media(max-width:580px) {
  .viewer-surface {
    border-radius: 22px;
  }
}

.work-cover.oygul.work-screenshot {
  overflow: hidden;
}

.work-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
}

.project-live {
  display: inline-block;
  margin-top: 12px;
}

.oygul-screens {
  padding: 24px;
  background: #75865f;
  border-radius: 24px;
  color: #fff;
}

.oygul-screens .simple-preview figcaption {
  color: #fff;
}

.oygul-screens .project-screens figcaption {
  color: #fff;
  opacity: .85;
}

@media(max-width:580px) {
  .work-cover.oygul.work-screenshot {
    max-width: 280px;
  }

  .oygul-screens {
    padding: 16px;
  }
}

/* Project color classes must not change the collection grid placement. */

.work-entry>.work-cover {
  grid-column: auto;
  min-width: 0;
  align-self: start;
}

.work-cover.oygul.work-screenshot {
  display: flex;
  justify-content: center;
  width: 210px;
  max-width: 100%;
  height: 320px;
  min-height: 0;
  padding: 14px;
  box-sizing: border-box;
}

.work-cover.oygul.work-screenshot img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.work-entry>div:last-child {
  min-width: 0;
}

@media(max-width:580px) {
  .work-cover.oygul.work-screenshot {
    width: 210px;
    height: 320px;
    justify-self: center;
  }
}

.card-viewer.work-collection .work-entry {
  border-bottom-color: #21242d40;
}

.card-viewer.work-collection .work-entry:last-child {
  border-bottom: 0;
}

.saidmaxim {
  background: #171717;
  color: #f7f3ec;
}

.saidmaxim p {
  color: #ded8cb;
}

.saidmaxim .expand {
  background: #ffffff22;
}

.said-preview {
  padding: 0!important;
  height: auto!important;
}

.said-site {
  background: #f7f3ec;
  color: #222;
  padding: 24px;
  border-radius: 14px;
  font-family: Georgia,serif;
}

.said-site small {
  display: block;
  margin-bottom: 24px;
}

.said-site strong {
  display: block;
  font-size: 24px;
  line-height: 1.15;
}

.said-site em {
  font-style: normal;
  color: #8b7d60;
}

.said-site>span {
  display: block;
  font-family: Arial,sans-serif;
  font-size: 10px;
  margin-top: 24px;
}

.bento-grid .saidmaxim {
  grid-column: span 12;
}

.bento-grid .saidmaxim>summary {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 150px;
}

.bento-grid .saidmaxim .card-heading {
  flex: 1;
}

.bento-grid .saidmaxim .said-preview {
  width: 45%;
  margin: 0;
}

.bento-grid .saidmaxim .said-site {
  padding: 18px;
}

.bento-grid .saidmaxim .said-site small {
  margin-bottom: 12px;
}

.bento-grid .saidmaxim .said-site strong {
  font-size: 22px;
}

.bento-grid .saidmaxim .said-site>span {
  margin-top: 12px;
}

.simple-project>.said-preview {
  margin: 22px 0;
  background: #171717;
  padding: 24px!important;
  border-radius: 20px;
}

.viewer-content .said-preview {
  max-width: 650px;
}

.viewer-content .said-site {
  padding: 48px;
}

.viewer-content .said-site strong {
  font-size: clamp(30px,5vw,60px);
}

@media(min-width:851px) {

}

@media(max-width:580px) {
  .bento-grid {
    grid-template-areas: "intro intro" "work about" "advicee proteco" "advicee oygul" "said said" "contact contact";
  }

  .bento-grid>.saidmaxim {
    grid-area: said;
    grid-column: 1 / -1;
  }

  .bento-grid .saidmaxim>summary {
    flex-direction: row;
    padding-right: 48px;
    gap: 12px;
  }

  .bento-grid .saidmaxim .said-site {
    padding: 14px;
  }

  .bento-grid .saidmaxim .said-site>span {
    font-size: 8px;
  }

  .viewer-content .said-site {
    padding: 24px;
  }
}

@media(max-width:580px) {
  .bento-grid .saidmaxim .card-heading {
    min-width: 0;
  }

  .bento-grid .saidmaxim .said-preview {
    min-width: 0;
  }

  .bento-grid .saidmaxim>summary {
    min-height: 190px;
    height: auto;
  }

  .bento-grid .saidmaxim .said-site {
    overflow-wrap: anywhere;
  }
}

.bento-grid>.saidmaxim>summary {
  align-items: flex-start;
}

.bento-grid .saidmaxim .card-heading {
  align-self: flex-start;
  padding-bottom: 0;
}

@media(max-width:580px) {
  .bento-grid>.saidmaxim>summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 18px 15px 48px;
    gap: 18px;
  }

  .bento-grid .saidmaxim .card-heading {
    flex: none;
    width: 100%;
  }

  .bento-grid .saidmaxim .said-preview {
    flex: none;
    width: 100%;
    margin: 0;
  }

  .bento-grid .saidmaxim .said-site strong {
    font-size: 20px;
  }
}

.said-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.viewer-content .said-preview.said-screenshot {
  max-width: none;
  height: auto;
  margin: 32px 0 0;
  padding: 0;
  overflow: hidden;
}

.said-work-screenshot {
  height: auto;
  min-height: 0;
  padding: 10px;
  background: #171717;
}

.said-work-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.simple-project>.said-screenshot {
  padding: 12px!important;
}

.bento-grid .saidmaxim .said-screenshot {
  height: 120px!important;
  overflow: hidden;
}

.bento-grid .saidmaxim .said-screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}

@media(max-width:580px) {
  .bento-grid .saidmaxim .said-screenshot {
    height: auto!important;
  }

  .bento-grid .saidmaxim .said-screenshot img {
    height: auto;
    object-fit: contain;
  }
}

/* Compact desktop utility row and paired bottom cards. */

@media(min-width:851px) {
  .bento-grid {
    grid-template-rows: 140px 165px 165px 220px;
  }

  .bento-grid>.saidmaxim>summary {
    height: 100%;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 54px;
  }

  .bento-grid .saidmaxim .card-heading p {
    display: none;
  }

  .bento-grid .saidmaxim .said-preview {
    margin: 0;
  }

  .bento-grid>.contact>summary {
    height: 100%;
    align-items: center;
  }

  .bento-grid .work-stack span {
    width: 52px;
    height: 60px;
    font-size: 17px;
  }

  .bento-grid .work-stack {
    bottom: 16px;
  }
}

@media(min-width:851px) {
  .bento-grid>.saidmaxim {
    grid-area: auto;
    grid-row: 4;
    grid-column: 1 / 3;
  }

  .bento-grid>.contact {
    grid-area: auto;
    grid-row: 4;
    grid-column: 3 / 5;
  }
}

@media(min-width:851px) {
  .bento-grid>.tile.contact {
    grid-area: auto;
    grid-row: 4;
    grid-column: 3 / 5;
  }

  .bento-grid>.tile.saidmaxim {
    grid-area: auto;
    grid-row: 4;
    grid-column: 1 / 3;
  }
}

@media(min-width:851px) {
  .bento-grid>.tile.saidmaxim>summary {
    flex-direction: row;
  }

  .bento-grid .saidmaxim .card-heading {
    width: auto;
    min-width: 0;
  }

  .bento-grid .saidmaxim .said-preview {
    width: auto;
    min-width: 0;
  }
}

@media(min-width:851px) {
  .bento-grid>.tile.saidmaxim>summary {
    align-items: stretch;
  }

  .bento-grid .saidmaxim .card-heading {
    align-self: flex-start;
  }

  .bento-grid .saidmaxim .said-preview {
    align-self: stretch;
    min-height: 0;
    overflow: hidden;
  }

  .bento-grid .saidmaxim .said-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

@media(min-width:851px) {
  .bento-grid>.tile.saidmaxim>summary {
    gap: 12px;
  }

  .bento-grid .saidmaxim .card-heading {
    flex: 0 0 24%;
    padding: 8px 0 0 8px;
  }

  .bento-grid .saidmaxim .said-preview {
    flex: 1;
  }
}

@media(min-width:851px) {
  .bento-grid .saidmaxim .said-preview {
    height: 100%!important;
    border-radius: 12px 12px 0 0;
  }

  .bento-grid .saidmaxim .said-screenshot img {
    border-radius: 12px 12px 0 0;
  }
}

/* Separate the dark website screenshot from its project card. */

.bento-grid>.tile.saidmaxim p {
  color: #55506b;
}

.bento-grid .saidmaxim .said-screenshot {
  box-shadow: 0 0 0 1px #30264b24;
}

.card-viewer.saidmaxim .card-heading p,.card-viewer.saidmaxim .reveal-inner p {
  color: #55506b;
}

/* Said-Maxim's original --accent-2 brand color. */

.bento-grid>.tile.saidmaxim,.work-cover.saidmaxim {
  background: #a78bfa;
  color: #08080c;
}

.bento-grid>.tile.saidmaxim p,.card-viewer.saidmaxim .card-heading p,.card-viewer.saidmaxim .reveal-inner p {
  color: #242035;
}

.card-viewer.saidmaxim {
  color: #08080c;
}

.simple-project>.said-screenshot {
  background: #a78bfa;
}

@media(min-width:851px) {
  .bento-grid>.tile.saidmaxim>summary {
    padding: 18px 18px 0 12px;
  }
}

/* Keep the expand control above the screenshot on every screen size. */

.bento-grid>.tile.saidmaxim>summary {
  position: relative;
}

.bento-grid .saidmaxim .expand {
  position: absolute;
  top: auto;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  background: #f7f3ec;
  color: #08080c;
  box-shadow: 0 2px 10px #08080c20;
}

@media(max-width:580px) {
  .bento-grid .saidmaxim .expand {
    right: 12px;
    bottom: 12px;
  }
}

.bento-grid>.tile.saidmaxim .expand {
  z-index: 5;
}

.bento-grid>.tile.saidmaxim .expand {
  box-shadow: none;
}

@media(min-width:851px) {
  .bento-grid>.tile.saidmaxim .expand {
    left: 20px;
    right: auto;
    bottom: 20px;
  }
}

/* One consistent anchor for every grid card's expand control. */

.bento-grid>.tile>summary {
  position: relative;
}

.bento-grid>.tile .card-heading {
  position: static;
}

.bento-grid>.tile .expand {
  position: absolute;
  top: auto;
  left: auto;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  box-shadow: none;
}

.bento-grid>.tile.saidmaxim .expand {
  left: auto;
  right: 20px;
  bottom: 20px;
  color: #fff;
  background: #ffffff22;
}

.bento-grid>.tile.saidmaxim>summary:hover .expand {
  background: #ffffff33;
}

@media(max-width:580px) {
  .bento-grid>.tile .expand,.bento-grid>.tile.saidmaxim .expand,.bento-grid>.tile.oygul .expand {
    left: auto;
    right: 12px;
    bottom: 12px;
  }
}

@media(min-width:851px) {
  .bento-grid>.tile {
    height: 100%;
    min-height: 0;
  }

  .bento-grid>.tile>summary {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
  }
}

.bento-grid>.tile.oygul .expand {
  color: #191b20;
  background: #00000012;
}

.bento-grid>.tile.oygul>summary:hover .expand {
  background: #00000024;
}

/* Desktop project swap: Oy-gul uses the tall right column. */

@media(min-width:851px) {
  .bento-grid {
    grid-template-areas: "advicee work about oygul" "advicee intro intro oygul" "proteco intro intro oygul" "said said contact contact";
  }

  .bento-grid>.tile.oygul .screenshot-preview {
    top: 80px;
    left: 22px;
    right: 22px;
    height: calc(100% - 80px);
    margin: 0;
    opacity: 1;
  }

  .bento-grid>.tile.proteco .tile-preview {
    position: absolute;
    top: 55px;
    left: 22px;
    right: 22px;
    height: 110px;
    margin: 0;
    padding: 0;
    border-radius: 14px 14px 0 0;
  }

  .bento-grid>.tile.proteco .tile-preview .mock-scene {
    transform: scale(.65);
    transform-origin: top center;
  }

  .bento-grid>.tile.proteco .sample {
    display: none;
  }
}

/* Actual Proteco bot and admin interface screenshots. */

.proteco-screenshot {
  padding: 0!important;
  overflow: hidden;
  border-radius: 14px;
  background: #17232e;
}

.proteco-screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.viewer-content .proteco-screenshot {
  height: auto;
  max-width: 340px;
  margin: 28px auto;
  padding: 0;
}

.proteco-gallery {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
  margin-top: 32px;
}

.proteco-gallery figure {
  margin: 0;
  min-width: 0;
}

.proteco-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid #21242d22;
}

.proteco-gallery figcaption {
  margin-top: 10px;
  font-size: 14px;
}

.proteco-gallery .portrait-screen {
  max-width: 340px;
  justify-self: center;
  grid-column: 1/-1;
}

.proteco-work-screenshot {
  padding: 12px;
  overflow: hidden;
  height: 280px;
  min-height: 0;
}

.proteco-work-screenshot img {
  height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 10px;
}

.proteco-simple-screens>.proteco-screenshot {
  height: auto;
  max-width: 340px;
  margin: 24px auto;
}

.bento-grid>.tile.proteco .proteco-screenshot img {
  object-position: top;
}

@media(min-width:851px) {
  .bento-grid>.tile.proteco .proteco-screenshot {
    top: 55px;
    left: 22px;
    right: 22px;
    height: calc(100% - 55px);
    padding: 0;
  }
}

@media(max-width:580px) {
  .bento-grid>.tile.proteco .proteco-screenshot {
    height: 75px;
    margin: 0 0 12px;
  }

  .proteco-gallery {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Proteco Sharq navy sampled from the supplied official logo. */

.bento-grid>.tile.proteco,.work-cover.proteco {
  background: #334f8a;
  color: #fff;
}

.bento-grid>.tile.proteco p {
  color: #e3e9f5;
}

.bento-grid>.tile.proteco .expand {
  color: #fff;
  background: #ffffff22;
}

.bento-grid>.tile.proteco>summary:hover .expand {
  background: #ffffff33;
}

.card-viewer.proteco {
  color: #fff;
}

.card-viewer.proteco .card-heading p,.card-viewer.proteco .reveal-inner p {
  color: #e3e9f5;
}

.proteco-simple-screens {
  background: #334f8a;
  color: #fff;
  padding: 24px;
  border-radius: 24px;
}

@media(max-width:580px) {
  .proteco-simple-screens {
    padding: 16px;
  }
}

/* Mobile screenshots meet the card's bottom edge. */

@media(max-width:580px) {
  .bento-grid>.tile.proteco>summary,.bento-grid>.tile.oygul>summary {
    box-sizing: border-box;
    padding-bottom: 0;
  }

  .bento-grid>.tile.proteco .proteco-screenshot,.bento-grid>.tile.oygul .screenshot-preview {
    position: absolute;
    top: 64px;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: auto;
    margin: 0;
    padding: 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }

  .bento-grid>.tile.proteco .proteco-screenshot img,.bento-grid>.tile.oygul .screenshot-preview img {
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .bento-grid>.tile.saidmaxim>summary {
    height: 230px;
    min-height: 0;
    box-sizing: border-box;
    padding: 18px 15px 0;
    gap: 0;
    display: block;
  }

  .bento-grid>.tile.saidmaxim .said-preview {
    position: absolute;
    top: 58px;
    bottom: 0;
    left: 15px;
    right: 15px;
    width: auto;
    height: auto!important;
    margin: 0;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
  }

  .bento-grid>.tile.saidmaxim .said-screenshot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 12px 12px 0 0;
  }
}

/* Shared finishing details: clear controls, focus, and stable previews. */
:root { --control-size: 44px; --focus-ring: #244fef; }
::selection { background: #244fef; color: #fff; }
.languages { gap: 2px; }
.languages button { min-width: var(--control-size); min-height: var(--control-size); border-radius: 8px; }
.languages button:hover { background: #191b2008; }
.prompt-close { width: var(--control-size); height: var(--control-size); }
.viewer-close:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.bento-grid>.tile.advicee .expand { background: #244fef; color: #fff; box-shadow: 0 2px 8px #10257724; }
.bento-grid>.tile.advicee>summary:hover .expand { background: #183bd0; }
.bento-grid>.tile>summary:focus-visible { outline: 3px solid #244fef; outline-offset: -4px; }
.bento-grid>.tile.advicee>summary:focus-visible,.bento-grid>.tile.proteco>summary:focus-visible,.bento-grid>.tile.about>summary:focus-visible { outline-color: #fff; }
.project-screens figcaption,.proteco-gallery figcaption { line-height: 1.5; }
.viewer-content { scrollbar-color: #929bad transparent; }
.card-viewer { scrollbar-color: #929bad transparent; scrollbar-width: thin; }
@media(max-width:580px) {
 .viewer-close { width: var(--control-size); height: var(--control-size); }
 .bento-header { gap: 12px; }
 .bento-header .brand { letter-spacing: -.03em; }
 .bento-grid .advicee .tile-preview { right: 12px; border-radius: 12px 12px 0 0; }
 .bento-grid .advicee .tile-preview .mock-scene { width: 240px; transform: scale(.58); }
 .bento-grid .advicee .tile-preview .mock-window { width: 240px; }
}

/* Contrast corrections retain the project's established surface colors. */
.bento-grid>.tile.work-collection p { color: #59431c; }
.card-viewer.advicee .card-heading p,.card-viewer.advicee .reveal-inner p { color: #fff; }
.card-viewer.oygul .card-heading p,.card-viewer.oygul .reveal-inner p { color: #191b20; }
.oygul-screens .simple-preview figcaption,.oygul-screens .project-screens figcaption { color: #191b20; opacity: 1; }
.bento-footer { color: #626773; }
.mock-top { color: #626773; }

/* Case studies keep the problem, contribution, and outcome easy to scan. */
.project-story { max-width: 70ch; }
.project-story section { margin-top: 32px; }
.project-story h3 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
.project-story ul { padding-left: 22px; margin: 20px 0; }
.project-story li { margin: 0 0 14px; line-height: 1.7; }
.simple-project .project-story section { padding: 0; border: 0; }
@media(max-width:580px) { .project-story h3 { font-size: 21px; } }

/* The contribution is the first line of each expanded project. */
.viewer-content>.project-role-label { margin: 0 0 16px; font-size: 16px; line-height: 1.5; font-weight: 600; color: inherit; }

.viewer-content .card-heading .project-role-label {
  margin: 12px 0 16px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: inherit;
}

/* Role badges belong to the title, rather than the description. */
.viewer-content .card-heading .project-role-label {
  display: inline-block;
  max-width: 100%;
  margin: 8px 0 0;
  padding: 6px 12px;
  border: 0;
  border-radius: 8px;
  background: #ffffff18;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
}
.card-viewer.saidmaxim .card-heading .project-role-label {
  background: #08080c0a;
}
@media(max-width:580px) {
  .viewer-content .card-heading .project-role-label {
    margin-top: 7px;
    padding: 6px 10px;
    font-size: 13px;
  }
}

/* Light text on dark surfaces needs less weight for the same visual emphasis. */
.card-viewer.advicee .card-heading h2,
.card-viewer.proteco .card-heading h2,
.card-viewer.oygul .card-heading h2 {
  font-weight: 600;
}
.card-viewer.advicee .card-heading .project-role-label,
.card-viewer.proteco .card-heading .project-role-label,
.card-viewer.oygul .card-heading .project-role-label {
  font-weight: 500;
}

/* Real screenshots, each workflow paired with its mobile counterpart. */
.project-device-gallery { margin: 32px 0; }
.project-device-set { margin: 0 0 36px; }
.project-device-set h3 { font-size: 22px; line-height: 1.35; margin: 0 0 16px; }
.project-device-pair { display: grid; grid-template-columns: minmax(0,3.8fr) minmax(0,1fr); align-items: start; gap: 20px; max-width: 800px; margin-inline: auto; }
.project-device-pair figure { margin: 0; min-width: 0; }
.project-device-pair figcaption { font-size: 13px; margin-bottom: 8px; font-weight: 600; }
.project-device-pair a { display: block; }
.project-device-pair img { display: block; width: 100%; height: auto; object-fit: contain; object-position: top left; border-radius: 10px; }
.screenshot-note { font-size: 13px; opacity: .85; }
.simple-project .project-device-set { padding: 0; border: 0; }
.bento-grid>.tile.advicee .advicee-screenshot { top: 76px; left: 20px; right: 20px; bottom: 0; height: auto; padding: 0; margin: 0; position: absolute; border-radius: 12px 12px 0 0; }
.bento-grid>.tile.advicee .advicee-screenshot img { width: 100%; height: auto; display: block; }
.advicee-work-screenshot { padding: 12px; min-height: 0; }
.advicee-work-screenshot img { display: block; width: 100%; height: auto; border-radius: 10px; }
@media(max-width:580px) {
 .project-device-pair { grid-template-columns: minmax(0,3fr) minmax(0,1fr); gap: 12px; }
 .project-device-set h3 { font-size: 19px; }
 .project-device-pair img { border-radius: 7px; }
 .project-device-pair figcaption { font-size: 12px; }
 .bento-grid>.tile.advicee .advicee-screenshot { top: 64px; left: 12px; right: 12px; padding: 0; }
}

/* Fill the tall Advicee card with a right-cropped desktop preview. */
.bento-grid>.tile.advicee .advicee-screenshot {
  right: 0;
  bottom: 20px;
  border-radius: 12px 0 0 0;
}
.bento-grid>.tile.advicee .advicee-screenshot img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left top;
}
@media(max-width:580px) {
  .bento-grid>.tile.advicee .advicee-screenshot {
    right: 0;
    bottom: 12px;
  }
}