/* Local Toolkit tokens: the source's 295/417 card ratio and 3.5deg fan.
   Brand fills belong to these tool cards, not to the site's global palette. */
.toolkit-section {
  --toolkit-card-width: clamp(180px, 18vw, 295px);
  --toolkit-card-ratio: 295 / 417;
  --toolkit-title-size: clamp(3rem, 6vw, 6rem);
  --toolkit-subtitle-size: clamp(1.25rem, 2vw, 2rem);
  --toolkit-ink: #111;
  --toolkit-white: #fff;
  --toolkit-brand-adobe: #e32222;
  --toolkit-brand-figma: #232323;
  --toolkit-brand-cinema: #0c55a8;
  --toolkit-brand-blender: #ea7600;
  --toolkit-brand-webflow: #146ef5;
  --toolkit-brand-javascript: #f7df1e;
  --toolkit-brand-gsap: #0ae448;
  /* Approved A study: optical frost sits on opaque brand fills, keeping
     overlapping card text hidden. These material tokens are Toolkit-only. */
  --toolkit-glass-shadow: 0 calc(var(--poto-space-lg) * .75) calc(var(--poto-space-xl) * 1.25) rgb(0 0 0 / .25), inset 0 1px 0 rgb(255 255 255 / .66), inset 1px 0 0 rgb(255 255 255 / .24), inset -1px 0 0 rgb(255 255 255 / .13), inset 0 -2px 1px rgb(0 0 0 / .18);
  --toolkit-glass-frost: radial-gradient(ellipse 140% 82% at 16% -10%, rgb(255 255 255 / .43), transparent 80%), radial-gradient(ellipse 90% 65% at 115% 110%, rgb(255 255 255 / .13), transparent 75%), linear-gradient(180deg, rgb(255 255 255 / .08), transparent 42%, rgb(0 0 0 / .05));
  width: 100%;
  margin: 0;
  color: var(--poto-paper);
  background: var(--reference-dark);
  scroll-margin-top: 0;
  font-family: 'Poto Reference Variable', Arial, sans-serif;
}
.toolkit-stage { position: relative; padding: calc(var(--poto-control-height) * 2 + var(--poto-space-xl)) var(--poto-space-lg) var(--poto-space-xxl); }
.toolkit-heading { text-align: center; }
.toolkit-heading h2 { margin: 0; font: 700 var(--toolkit-title-size)/1 'Poto Reference Bold', Arial, sans-serif; letter-spacing: -.025em; }
.toolkit-heading h2:focus { outline: none; }
.toolkit-subtitles { display: none; }
.toolkit-cards { display: grid; gap: calc(var(--poto-space-xxl) * 2); margin-top: var(--poto-space-xxl); }
.skill-deck { display: grid; grid-template-columns: repeat(auto-fit, var(--toolkit-card-width)); justify-content: center; gap: var(--poto-space-lg); }
.skill-deck::before { content: attr(aria-label); grid-column: 1 / -1; margin-bottom: var(--poto-space-md); text-align: center; font-size: var(--toolkit-subtitle-size); }
.skill-deck[data-toolkit-deck='identity']::before { content: 'Today'; }
.toolkit-section .toolkit-deck-copy { grid-column: 1 / -1; max-width: 60ch; margin: 0 auto var(--poto-space-md); padding-inline: var(--poto-space-md); text-align: center; font-size: 1rem; line-height: 1.5; }
.skill-card {
  --skill-fill: var(--poto-blue-deep);
  --skill-ink: var(--toolkit-white);
  position: relative;
  width: var(--toolkit-card-width);
  aspect-ratio: var(--toolkit-card-ratio);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--poto-space-lg);
  padding: var(--poto-space-md);
  border-radius: var(--poto-card-radius);
  background: var(--skill-fill);
  color: var(--skill-ink);
  text-align: center;
  backface-visibility: hidden;
}
.skill-card h4 { margin: 0; font: 700 calc(var(--toolkit-card-width) * .245)/.94 'Poto Reference Bold', Arial, sans-serif; letter-spacing: -.025em; }
.skill-card p { margin: 0; padding: var(--poto-space-xs) var(--poto-space-sm); border-radius: var(--poto-space-xl); background: var(--skill-ink); color: var(--skill-fill); font-size: clamp(.6875rem, calc(var(--toolkit-card-width) * .056), 1rem); line-height: 1.4; white-space: nowrap; }
.toolkit-section[data-toolkit-material='frosted-glass'] .skill-card { isolation: isolate; overflow: hidden; box-shadow: var(--toolkit-glass-shadow); }
.toolkit-section[data-toolkit-material='frosted-glass'] .skill-card::before { content: ''; position: absolute; z-index: 0; inset: 0; background: var(--toolkit-glass-frost); pointer-events: none; }
.toolkit-section[data-toolkit-material='frosted-glass'] .skill-card::after { content: ''; position: absolute; z-index: 3; inset: var(--poto-space-xs); border-radius: calc(var(--poto-card-radius) - var(--poto-space-xs)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 -1px 0 rgb(255 255 255 / .09); pointer-events: none; }
.toolkit-section[data-toolkit-material='frosted-glass'] .skill-card :is(h4,p) { position: relative; z-index: 2; }
.toolkit-section[data-toolkit-material='frosted-glass'] :is(.brand-cinema,.brand-webflow,.brand-three)::before { opacity: .45; }
.toolkit-section[data-toolkit-material='frosted-glass'] .skill-card p { box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 3px 8px rgb(0 0 0 / .08); }
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card p { box-shadow: none; }
.brand-adobe { --skill-fill: var(--toolkit-brand-adobe); }
.brand-figma { --skill-fill: var(--toolkit-brand-figma); }
.brand-cinema { --skill-fill: var(--toolkit-white); --skill-ink: var(--toolkit-brand-cinema); }
.brand-blender { --skill-fill: var(--toolkit-brand-blender); --skill-ink: var(--toolkit-ink); }
.brand-unreal, .brand-framer, .brand-glsl { --skill-fill: var(--toolkit-ink); }
.brand-webflow { --skill-fill: var(--toolkit-white); --skill-ink: var(--toolkit-brand-webflow); }
.brand-javascript { --skill-fill: var(--toolkit-brand-javascript); --skill-ink: var(--toolkit-ink); }
.brand-three { --skill-fill: var(--toolkit-white); --skill-ink: var(--toolkit-ink); }
.brand-gsap { --skill-fill: var(--toolkit-ink); --skill-ink: var(--toolkit-brand-gsap); }
.creation-card:nth-of-type(3n + 2) { --skill-fill: var(--poto-blue-mid); }
.creation-card:nth-of-type(3n) { --skill-fill: var(--poto-blue-mid); --skill-ink: var(--toolkit-white); }
.creation-card h4 { font-size: calc(var(--toolkit-card-width) * .19); }
/* Keep the two longest approved names inside the card's text inset. */
.creation-card-long-title h4 { font-size: calc(var(--toolkit-card-width) * .16); }
.creation-card p { max-width: 100%; white-space: normal; text-wrap: balance; }
.identity-card { gap: var(--poto-space-md); }
.identity-card img { position: absolute; z-index: 2; top: var(--poto-space-lg); width: 68%; height: auto; }
.identity-card h4 { font-size: calc(var(--toolkit-card-width) * .28); }
.identity-card p { padding: 0; background: none; color: inherit; font-size: calc(var(--toolkit-card-width) * .074); line-height: 1.3; }
/* The main Today card is a full-frame photograph. Its existing ratio and
   flip stay intact; the grey headroom holds the mark, with the role below. */
.identity-card--portrait { display: block; padding: 0; isolation: isolate; overflow: hidden; background: var(--reference-dark); text-align: left; }
.identity-card--portrait .identity-logo { position: absolute; z-index: 2; top: var(--poto-space-lg); left: var(--poto-space-lg); width: calc(var(--toolkit-card-width) * .6); height: auto; filter: brightness(0); }
.identity-card--portrait .identity-portrait { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait { box-shadow: 0 calc(var(--poto-space-lg) * .75) calc(var(--poto-space-xl) * 1.25) rgb(0 0 0 / .25); }
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait::before,
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait::after { display: none; }
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait p { position: absolute; z-index: 2; top: 58%; left: var(--poto-space-lg); right: var(--poto-space-lg); color: var(--toolkit-white); text-align: center; }
.toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait h4.screen-reader-only { position: absolute; }
.poto-main .identity-card--portrait .identity-role-mobile { display: inline; }
.poto-main .identity-card--portrait .identity-role-desktop { display: none; }
/* Main desktop card: keep the portrait unobscured. The compact mark and
   single-line role share the photograph's existing grey headroom; derive
   their vertical stack from the real logo ratio and existing spacing. */
@media (min-width: 601px) {
  .poto-main .identity-card--portrait .identity-logo {
    top: var(--poto-space-sm);
    left: 50%;
    width: calc(var(--toolkit-card-width) * .45);
    transform: translateX(-50%);
  }
  .poto-main .toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait::before,
  .poto-main .toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait::after { display: none; }
  .poto-main .toolkit-section[data-toolkit-material='frosted-glass'] .identity-card--portrait p {
    top: calc(var(--poto-space-sm) + var(--toolkit-card-width) * .45 * 83 / 355 + var(--poto-space-xs));
    bottom: auto;
    left: var(--poto-space-md);
    right: var(--poto-space-md);
    color: var(--toolkit-ink);
    font-size: clamp(.6875rem, calc(var(--toolkit-card-width) * .056), 1rem);
    line-height: 1.3;
  }
  .poto-main .identity-card--portrait .identity-role-mobile { display: none; }
  .poto-main .identity-card--portrait .identity-role-desktop { display: inline; }
}
.toolkit-scroll-note { display: none; }
.toolkit-section ::selection { color: var(--reference-dark); background: var(--poto-paper); }
.is-reading-toolkit .story-nav { visibility: hidden; pointer-events: none; }

/* Enhancement is opt-in: without JS or with reduced motion every card is readable. */
.toolkit-section.is-enhanced { height: calc(100svh + var(--toolkit-scroll)); }
.toolkit-section.is-enhanced .toolkit-stage { position: sticky; top: 0; height: 100svh; min-height: 0; overflow: clip; padding: 0; }
.is-enhanced .toolkit-heading { position: absolute; z-index: 4; top: 12%; left: 0; width: 100%; }
.is-enhanced .toolkit-subtitles { position: relative; display: block; max-width: 60ch; margin: var(--poto-space-lg) auto 0; height: calc(1rem * 1.5 * 3); }
.toolkit-subtitles h3 { position: absolute; inset: 0; margin: 0; font-size: var(--toolkit-subtitle-size); line-height: 1.3; font-weight: 400; }
.is-enhanced .toolkit-cards { position: absolute; inset: 0; display: block; margin: 0; perspective: 1200px; pointer-events: none; }
.is-enhanced .skill-deck { position: absolute; inset: 0; display: block; }
.is-enhanced .skill-deck::before { display: none; }
.is-enhanced .toolkit-deck-copy { display: none; }
.is-enhanced .skill-card { position: absolute; top: 60%; left: 50%; margin-left: calc(var(--toolkit-card-width) / -2); margin-top: calc(var(--toolkit-card-width) * 417 / 295 / -2); transform-origin: center; }
.is-enhanced .toolkit-scroll-note { position: absolute; bottom: var(--poto-space-xxl); left: 50%; display: block; margin: 0; transform: translateX(-50%); font-size: .75rem; color: var(--poto-paper); }
@media (max-height: 1000px) and (min-width: 601px) {
  .toolkit-section { --toolkit-card-width: clamp(180px, 18vw, 29svh); }
}
@media (max-width: 600px) {
  .toolkit-section { --toolkit-card-width: min(46vw, 220px); --toolkit-title-size: clamp(3rem, 13vw, 4.5rem); --toolkit-subtitle-size: 1.25rem; }
  .toolkit-stage { padding-inline: var(--poto-space-md); }
  .skill-deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--poto-space-md); }
  .skill-card { width: 100%; --toolkit-card-width: calc((100vw - var(--poto-space-md) * 3) / 2); padding: var(--poto-space-sm); }
  .skill-deck[data-toolkit-deck='identity'] { grid-template-columns: var(--toolkit-card-width); }
  .identity-card { --toolkit-card-width: min(46vw, 220px); }
  .is-enhanced .skill-card { width: var(--toolkit-card-width); --toolkit-card-width: min(46vw, 220px); }
  .is-enhanced .toolkit-heading { top: 16%; }
}
@media (max-height: 480px) {
  .toolkit-section { --toolkit-card-width: min(25vw, 42svh); --toolkit-title-size: 3rem; --toolkit-subtitle-size: 1.25rem; }
  .is-enhanced .toolkit-heading { top: 5%; }
  .is-enhanced .toolkit-subtitles { margin-top: var(--poto-space-sm); }
  .is-enhanced .skill-card { top: 65%; }
  .is-enhanced .toolkit-scroll-note { bottom: var(--poto-space-md); }
}
/* The revised three-line narrative needs the same clearance already used by
   short viewports. Keep the fan below the copy on short portrait phones too. */
@media (max-width: 600px) and (min-height: 481px) and (max-height: 700px) {
  .is-enhanced .skill-card { top: 65%; }
}

/* Phase titles share one line box; local motion uses existing spacing tokens. */
.is-enhanced #toolkit-title { display: grid; }
.is-enhanced #toolkit-title [data-toolkit-title] { grid-area: 1 / 1; }
.toolkit-subtitles [data-toolkit-label] { position: absolute; inset: 0; margin: 0; padding-inline: var(--poto-space-lg); font-size: 1rem; line-height: 1.5; font-weight: 400; text-wrap: balance; }