/* October 2026: approved Figma frame 274:5224. Interaction rules stay in refinements.css. */
@font-face {
  font-family: Portfolio Roboto;
  src: url('/fonts/roboto-medium.woff2') format('woff2');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root { --link: #d9f66f; }
.contacts { font-family: var(--sans); font-size: 18px; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.project-copy { font-size: 18px; line-height: 1.4; }
.project-copy strong { font-size: inherit; line-height: inherit; letter-spacing: .05em; }
.project-copy .more-content p:first-child > strong { letter-spacing: 0; }
.take-look, .home-categories .inline-look { font: 400 18px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
.app-links { color: var(--link); }
.tv-overview { font-weight: 500; }
.alice-copy { border: 0; padding-bottom: 0; }

@media (min-width: 768px) {
  .contacts { grid-template-rows: 26px; }
  .contacts .interactive-icon, .contacts .telegram { display: none; }
  .contacts a { display: block; }
  .intro { min-height: 557px; }
  .bio h1 { font-size: 45px; line-height: 1.2; letter-spacing: 1.35px; }
  .location { top: 366px; }
  .project-heading h2 { font-size: 32px; line-height: 38px; letter-spacing: 0; }
  .alice .project-heading h2 { letter-spacing: .96px; }
  .eyebrow { margin-top: 13px; }
  .alice { min-height: 550px; }
  .alice .project-heading { padding-top: 0; }
  .alice .eyebrow { margin-top: 18px; }
  .alice-gallery { column-gap: 20px; }
  .alice-copy { margin-top: 174px; }
  .project-copy p+p, .project-copy .more-content, .take-look { margin-top: 25px; }

  .devices { margin-top: 167px; grid-template-rows: 312px minmax(321px, auto); row-gap: 44px; }
  .devices .project-heading { grid-column: 1/3; }
  .devices-icon { margin: 0 0 43px -16px; }
  .devices .eyebrow { max-width: 340px; }
  .devices-video { aspect-ratio: auto; margin-top: 1.6px; }
  .devices-copy { padding-top: 0; margin-top: -5px; }
  .devices-copy { grid-template-rows: auto auto auto; align-items: start; }
  /* Shared rows keep Metrics and Interfaces aligned when the copy wraps. */
  .devices-summary, .devices-types { display: contents; }
  .devices-summary > p, .devices-types > p { width: calc(100% - 18px); margin: 0; }
  .devices-summary > p { grid-column: 1; }
  .devices-types > p, .devices-types > .take-look { grid-column: 2; }
  .devices-summary > p:first-child, .devices-types > p:first-child { grid-row: 1; }
  .devices-summary > p+p, .devices-types > p+p { grid-row: 2; margin-top: 50.2px; }
  .devices-types > .take-look { grid-row: 3; margin-top: 25px; justify-self: start; }
  .devices-summary p+p > strong { letter-spacing: 0; }
  .devices-more > .devices-metrics { display: none; }
  .device-card { align-self: start; aspect-ratio: 317/315; }
  .device-card h3 { font-size: 22px; line-height: 26px; }

  .home { margin-top: 147px; grid-template-rows: 243px minmax(298px, auto); min-height: 646.4px; }
  .home-icon { margin: -2px 0 36px -28px; }
  .home-phone { width: 257px; height: 541px; }
  .home-phone img { width: 257px; height: 549px; }
  .home-copy { align-self: start; }
  .home-copy p+p { margin-top: 25px; }
  .home-grid { grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: 65.4px; gap: 40px 20px; padding: 27px 20px; }
  .home-grid .device-tile { align-self: center; }
  .home-count { font-size: 32px; line-height: 38px; margin-top: -5.3px; width: 126px; justify-self: center; }
  .home-categories { margin-top: 0; padding: 0; width: calc(100% + 0.5px); align-self: start; }
  .home-categories .take-look { margin-top: 25px; }

  .tv { margin-top: 44.6px; min-height: 469px; grid-template-rows: auto; padding-bottom: 0; }
  .tv .project-heading { grid-column: 1; grid-row: 1; }
  .tv-icon { margin: 1px 0 25px -12px; }
  .tv .project-heading h2 { font-size: 26px; line-height: 31px; }
  .tv .eyebrow { width: 250px; max-width: 100%; margin-top: 8px; }
  .tv-copy { grid-column: 4; grid-row: 1; display: block; width: calc(100% - 18px); align-self: start; }
  .tv-copy>p, .tv-copy .tv-metrics { max-width: none; }
  .tv-copy .tv-metrics { margin-top: 25.2px; }
  .tv-metrics .take-look { margin-top: 25.2px; }
  .tv-stage { grid-row: 1; margin: 3px 0 0 2.5px; width: calc(100% + 1px); }
  .tv-cabinet { top: 82.17%; }
}

/* Intermediate widths keep the four-column language without squeezing 18px copy into narrow slots. */
@media (min-width: 768px) and (max-width: 1100px) {
  .bio h1 { font-size: 38px; }
  .intro { min-height: 590px; }
  .project-heading h2 { font-size: 28px; line-height: 1.2; }
  .alice-copy { margin-top: 100px; }
  .alice { min-height: 0; }
  .devices { margin-top: 120px; grid-template-rows: auto auto; }
  .devices-video { aspect-ratio: 655/312; }
  .devices .project-heading h2 { max-width: 100%; }
  .device-card h3 { font-size: 20px; margin-left: 12px; }
  .home { margin-top: 120px; grid-template-rows: 243px auto; }
  .home-phone { width: 100%; }
  .home-phone img { width: 100%; height: auto; }
  .home-grid { grid-template-columns: repeat(6,minmax(0,1fr)); padding-inline: 0; column-gap: 0; row-gap: 34px; }
  .home-categories { grid-column: 1/7; grid-row: 6; width: auto; margin: 20px 10px 0; }
  .home-count { grid-column: 2/6; width: auto; }
  .tv { margin-top: 80px; padding-bottom: 35px; overflow: visible; }
  .tv-stage { grid-column: 2/5; margin-inline: 12px; width: calc(100% - 24px); }
  .tv-copy { grid-column: 2/5; grid-row: 2; width: auto; margin-top: 25px; }
  .tv-copy .tv-metrics { margin-top: 25px; }
}

@media (max-width: 767px) {
  .bio h1 { font-size: clamp(36px, 9.8vw, 44px); line-height: 1.2; }
  .bio p, .bio p:first-of-type { font-size: 18px; letter-spacing: 0; }
  .contacts { width: auto; max-width: 100%; margin-top: 30px; grid-template-rows: repeat(3,auto); gap: 10px; }
  .contacts a { white-space: nowrap; }
  .project-heading h2 { font-size: clamp(26px, 7.2vw, 32px); line-height: 1.2; letter-spacing: 0; }
  .tv .project-heading h2 { font-size: 26px; }
  .project-copy, .project-copy strong { font-size: 18px; line-height: 1.4; }
  .take-look { font-size: 18px; }
  .disclosure { font: 400 13px/1.4 var(--mono); letter-spacing: .05em; }
  .home-count { font-size: 32px; line-height: 38px; }
  .home-grid .device-tile[data-id="198:52784"] { grid-column: 1; }
  .home-mobile-copy .take-look { margin-top: 30px; }
  .home-grid { width: auto; }
}