/* Phone layer for the portfolio. Loaded last, so it only reshapes what the
   desktop sheets already built: long copy swaps to a short variant, stacked
   cards become compact icon rows, project lists become swipeable rows and
   secondary detail folds away. The breakpoint matches portfolio-dev-mobile.js. */
.text-short { display: none; }

/* Folds are rendered closed and opened by script on wide screens; the content
   shows there even before that, so desktop never sees a collapsed list. */
details[data-fold] > summary { display: none; }
/* The footer's column headings live in the summary, so wide screens keep them
   as plain, untappable headings. */
details.footer-group[data-fold] > summary { display: block; list-style: none; pointer-events: none; }
.footer-group > summary::-webkit-details-marker { display: none; }
@media (min-width: 801px) { details[data-fold]::details-content { content-visibility: visible; display: contents; } }
.package-more { flex: 1; }
.timeline-more .timeline { margin-top: 38px; }
.carousel-nav { display: none; }

@media (max-width: 800px) {
  .text-long { display: none; }
  .text-short { display: inline; }

  /* Shared fold toggle: a full-width row with a chevron that turns. */
  details[data-fold] > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
  details[data-fold] > summary::-webkit-details-marker { display: none; }
  details[data-fold] > summary::after { content: ''; width: 9px; height: 9px; margin: -4px 4px 0 auto; border-right: 2px solid #8bb9ff; border-bottom: 2px solid #8bb9ff; transform: rotate(45deg); transition: transform .25s var(--ease); }
  details[data-fold][open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
  details[data-fold] > summary .icon { width: 18px; height: 18px; color: #8bb9ff; flex-shrink: 0; }

  /* Swipeable rows bleed to the screen edge and snap card by card. */
  main .projects, main .hw-grid, main .evidence, main .packages { display: grid; grid-auto-flow: column; grid-auto-columns: 84%; grid-template-columns: none; gap: 12px; margin-inline: -20px; padding: 4px 20px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  main .projects::-webkit-scrollbar, main .hw-grid::-webkit-scrollbar, main .evidence::-webkit-scrollbar, main .packages::-webkit-scrollbar { display: none; }
  main .projects > *, main .hw-grid > *, main .evidence > *, main .packages > * { scroll-snap-align: start; min-width: 0; margin: 0; }
  main .projects > [hidden], main .hw-grid > [hidden] { display: none; }
  .carousel-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
  .carousel-nav[hidden] { display: none; }
  .carousel-nav button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #344256; border-radius: 50%; background: #141d29; color: #dbe5f1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .2s, background .2s, border-color .2s; }
  .carousel-nav button:not(:disabled):active { background: #0066ff; border-color: #0066ff; color: #fff; }
  .carousel-nav button:disabled { opacity: .35; cursor: default; }
  .carousel-nav button:focus-visible { outline: 2px solid #8bb9ff; outline-offset: 3px; }
  .carousel-nav .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .carousel-dots { display: flex; gap: 6px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 99px; background: #344256; transition: width .3s var(--ease), background .3s; }
  .carousel-dots i.is-active { width: 20px; background: #0066ff; }
  /* Until the row is first moved, a small label says it swipes. */
  .carousel-hint { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); color: #7d8da3; font-size: 12px; letter-spacing: .02em; white-space: nowrap; transition: opacity .3s; pointer-events: none; }
  .carousel-nav.is-used .carousel-hint { opacity: 0; }
  .carousel-nav:not([hidden]) { margin-bottom: 18px; }

  /* Project cards in a row: the highlights fold into the summary. */
  .projects .project { display: flex; flex-direction: column; }
  .projects .project-info { display: flex; flex-direction: column; flex: 1; }
  .projects .project-info > p:not(.eyebrow) { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .projects .project-highlights { display: none; }
  .projects .project-info > .button, .projects .project-info > .status { margin-top: auto; align-self: flex-start; }
  .projects .tech-chips { margin-bottom: 18px; }

  /* Hardware cards: the tall icon header shrinks to a badge beside the title. */
  .hw-grid .hw-card { display: flex; flex-direction: column; }
  .hw-grid .hw-art { min-height: 0; height: 92px; }
  .hw-grid .hw-icon { width: 52px; height: 52px; }
  .hw-grid .hw-body { flex: 1; }

  /* Stacked icon-on-top cards become compact rows: icon left, copy right. */
  .included li, .values li, .toolkit article, .process-steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 4px; align-items: start; padding: 16px; }
  .included li > .tile-icon, .values li > .tile-icon, .toolkit article > .tile-icon, .process-steps li > .step-number { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; }
  .included li > :not(.tile-icon), .values li > :not(.tile-icon), .toolkit article > :not(.tile-icon), .process-steps li > :not(.step-number) { grid-column: 2; margin: 0; }
  .included li h3, .values li h3, .toolkit article h3, .process-steps li h3 { font-size: 17px; line-height: 1.3; }
  .included li p, .values li p, .toolkit article p, .process-steps li p { font-size: 14px; line-height: 1.5; }
  .included, .values, .toolkit { gap: 10px; }

  /* The process reads as a stepper: one line runs through the icons. */
  .process-steps { position: relative; gap: 10px; }
  .process-steps li { position: relative; }
  .process-steps li:not(:last-child)::after { content: ''; position: absolute; left: 37px; top: 62px; bottom: -12px; width: 2px; background: linear-gradient(#0066ff80, #0066ff10); }
  .process-steps .step-count { order: -1; font-size: 11.5px; letter-spacing: .08em; color: #8bb9ff; }

  /* Track hero: the four offers become a two-by-two grid of icon tiles. */
  .track-panel { padding: 16px; }
  .track-panel .diagram-label { margin-bottom: 12px; }
  .track-panel .hw-offer-list, .hw-offer .hw-offer-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .track-panel .hw-offer-list li, .hw-offer .hw-offer-list li { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px; }
  .track-panel .hw-offer-list li span:not(.tile-icon), .hw-offer .hw-offer-list li div > span { display: none; }
  .track-panel .hw-offer-list strong, .hw-offer .hw-offer-list strong { font-size: 14.5px; line-height: 1.3; }
  .track-panel .hw-offer-list .tile-icon, .hw-offer .hw-offer-list .tile-icon { width: 40px; height: 40px; }
  .track-hero .actions { display: grid; grid-template-columns: 1fr; gap: 10px; }

  /* Packages swipe like the projects; the badge sticks out above the card,
     so the row leaves room for it. The feature list folds behind "what's included". */
  main .packages { padding-top: 16px; margin-top: -8px; }
  main .packages .package { display: flex; flex-direction: column; }
  main .packages .package > .button { margin-top: auto; }
  .package-more { flex: 0 0 auto; margin: 18px 0 16px; border-top: 1px solid #2b3645; border-bottom: 1px solid #2b3645; }
  .package-more > summary { color: #dbe5f1; font-size: 14.5px; font-weight: 600; }
  .package-more ul { margin: 0 0 12px; }
  .package-more li:first-child { border-top: 0; }

  /* Expertise: each discipline's bullet list turns into tags. */
  .services article ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
  .services article li { margin: 0; padding: 5px 10px; border: 1px solid #2f4462; border-radius: 99px; background: #0d1520b3; font-size: 12.5px; line-height: 1.3; }
  .services article li::before { display: none; }
  .capability-side li span { display: none; }
  .capability-side li { align-items: center; }

  /* About: the monogram is decoration, so it gives its space to the facts. */
  .maker-monogram { font-size: 64px; margin-block: 8px 12px; }
  .timeline-more { margin-top: 22px; }
  .timeline-more > summary { justify-content: flex-start; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; background: #141d29; color: #dbe5f1; font-size: 14.5px; font-weight: 600; }
  .timeline-more[open] > summary { margin-bottom: 30px; }
  .timeline-more .timeline { margin-top: 0; }

  /* Work: the filters scroll in one line instead of wrapping. */
  .work-filters { flex-wrap: nowrap; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
  .work-filters::-webkit-scrollbar { display: none; }
  /* The fading edge shows the filter bar runs on past the screen. */
  .work-filters { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
  .work-filters button { flex-shrink: 0; min-height: 40px; padding: 8px 16px; }
  .work-filters .filter-count { flex-shrink: 0; white-space: nowrap; padding-right: 20px; }

  /* Rows that were already icon-left just get tighter. */
  .system-layers li { gap: 14px; padding: 16px; }
  .system-layers h3, .chain h3 { font-size: 17px; line-height: 1.3; }
  .system-layers p { margin-top: 4px; font-size: 14px; line-height: 1.5; }
  .chain li { padding: 12px 0; }
  .chain p { margin-top: 2px; }

  /* Contact: the intake diagram is decoration; the form matters more here. */
  .contact-visual { display: none; }

  /* Footer: each column becomes a fold, so the page ends in one short block. */
  .footer-nav { display: block; border-top: 1px solid var(--line); }
  .footer-group { border-bottom: 1px solid var(--line); }
  .footer-group:last-child { border-bottom: 0; }
  details.footer-group[data-fold] > summary { display: flex; min-height: 54px; pointer-events: auto; }
  .footer-group > summary h2 { margin: 0; }
  .footer-group ul { margin: 0 0 14px; gap: 0; }
  .footer-group a { padding: 9px 0; font-size: 15px; }
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
  details[data-fold] > summary::after, .carousel-dots i, .carousel-nav button, .carousel-hint { transition: none; }
}