/* Shared design tokens and primitives. Page styles consume these semantic values. */
:root{
  color-scheme:light;
  --background:0 0% 97.65%;
  --foreground:0 0% 9%;
  --card:0 0% 100%;
  --card-foreground:0 0% 9%;
  --primary:0 0% 10%;
  --primary-foreground:0 0% 98%;
  --secondary:0 0% 100%;
  --secondary-foreground:0 0% 30%;
  --muted:0 0% 96%;
  --muted-foreground:0 0% 45%;
  --text-secondary:0 0% 37%;
  --text-tertiary:0 0% 58%;
  --border:0 0% 89%;
  --border-subtle:0 0% 93%;
  --input:0 0% 89%;
  --ring:0 0% 58%;
  --media-background:0 0% 97%;
  --positive:145 62% 34%;
  --negative:0 58% 55%;
  --radius:.625rem;
  --control-height:2.5rem;
  --control-font-size:.875rem;
  --control-padding-x:1rem;
  --font-size-h1:24px;
  --font-size-h2:22px;
  --font-size-h3:20px;
  --font-size-h4:18px;
  --font-size-h5:16px;
  --font-size-h6:14px;
  --font-weight-heading:550;
  --font-line-height-heading:1.25;
  --surface-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.04);
  --glass-panel-background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(232,232,232,.70));
  --glass-panel-solid:rgba(242,242,242,.80);
  --glass-panel-fallback:rgba(245,245,245,.97);
  --glass-border:rgba(255,255,255,.88);
  --glass-color:#333;
  --glass-item-hover:rgba(255,255,255,.88);
  --glass-item-background:rgba(255,255,255,.58);
  --glass-divider:rgba(85,85,85,.18);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.94),inset 0 0 0 1px rgba(110,110,110,.10),0 18px 44px rgba(0,0,0,.14);
  --glass-button-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 2px 8px rgba(0,0,0,.06);
  --placeholder-background:linear-gradient(135deg,#dfe7e8 0%,#e8e1d8 52%,#d4d9d0 100%);
  --placeholder-secondary-background:linear-gradient(135deg,#e4e0ec,#e7d9d2 55%,#dce4e0);
  --placeholder-foreground:#173b40;
  --placeholder-secondary-foreground:#433653;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --background:0 0% 11.76%;
  --foreground:0 0% 93%;
  --card:0 0% 10%;
  --card-foreground:0 0% 92%;
  --primary:0 0% 91%;
  --primary-foreground:0 0% 10%;
  --secondary:0 0% 12%;
  --secondary-foreground:0 0% 86%;
  --muted:0 0% 14%;
  --muted-foreground:0 0% 64%;
  --text-secondary:0 0% 76%;
  --text-tertiary:0 0% 59%;
  --border:0 0% 23%;
  --border-subtle:0 0% 19%;
  --input:0 0% 25%;
  --ring:0 0% 66%;
  --media-background:0 0% 12%;
  --positive:145 52% 58%;
  --negative:0 66% 68%;
  --surface-shadow:0 1px 2px rgba(0,0,0,.24),0 8px 22px rgba(0,0,0,.20);
  --glass-panel-background:linear-gradient(145deg,rgba(32,35,40,.94),rgba(22,24,28,.88));
  --glass-panel-solid:rgba(25,27,32,.92);
  --glass-panel-fallback:rgba(25,27,32,.98);
  --glass-border:rgba(255,255,255,.14);
  --glass-color:#ededed;
  --glass-item-hover:rgba(255,255,255,.09);
  --glass-item-background:rgba(255,255,255,.06);
  --glass-divider:rgba(255,255,255,.14);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.035),0 18px 44px rgba(0,0,0,.38);
  --glass-button-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 12px rgba(0,0,0,.26);
  --placeholder-background:linear-gradient(135deg,#172326 0%,#242321 52%,#1d2825 100%);
  --placeholder-secondary-background:linear-gradient(135deg,#211f2a,#2b2225 55%,#202a2b);
  --placeholder-foreground:#d2e1df;
  --placeholder-secondary-foreground:#e0d8ed;
}
html{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
h1,h2,h3,h4,h5,h6{
  margin:0;color:inherit;font-family:inherit;font-weight:var(--font-weight-heading);
  line-height:var(--font-line-height-heading);letter-spacing:-.02em;text-wrap:pretty;
}
h1{font-size:var(--font-size-h1)}
h2{font-size:var(--font-size-h2)}
h3{font-size:var(--font-size-h3)}
h4{font-size:var(--font-size-h4)}
h5{font-size:var(--font-size-h5)}
h6{font-size:var(--font-size-h6)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;height:var(--control-height);
  padding:0 var(--control-padding-x);border:1px solid hsl(var(--border));border-radius:999px;
  background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));
  font:500 var(--control-font-size)/1 "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;
}
.btn-secondary:hover{background:hsl(var(--muted));border-color:hsl(var(--input))}
.btn-primary,.btn-primary:link,.btn-primary:visited{
  background:hsl(var(--primary));border-color:hsl(var(--primary));color:hsl(var(--primary-foreground));
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:focus-visible,.btn-primary:active,
.actions .btn-primary:hover,.actions .btn-primary:focus,.actions .btn-primary:active{
  background:hsl(var(--primary))!important;border-color:hsl(var(--primary))!important;
  color:hsl(var(--primary-foreground))!important;
}
.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{pointer-events:none;opacity:.5}
.btn-glass{
  -webkit-backdrop-filter:blur(14px) saturate(155%);
  backdrop-filter:blur(14px) saturate(155%);box-shadow:var(--glass-button-shadow);
}
.btn-glass.btn-secondary,.btn-glass.btn-secondary:link,.btn-glass.btn-secondary:visited,
.btn-glass.btn-primary,.btn-glass.btn-primary:link,.btn-glass.btn-primary:visited{
  border-color:var(--glass-border);background:var(--glass-panel-background);color:var(--glass-color);
}
.btn-glass.btn-secondary:hover,.btn-glass.btn-secondary:focus-visible,
.btn-glass.btn-primary:hover,.btn-glass.btn-primary:focus,.btn-glass.btn-primary:focus-visible,
.btn-glass.btn-primary:active,.actions .btn-glass.btn-primary:hover,
.actions .btn-glass.btn-primary:focus,.actions .btn-glass.btn-primary:active{
  border-color:var(--glass-border)!important;background:var(--glass-item-hover)!important;
  color:hsl(var(--foreground))!important;box-shadow:var(--glass-button-shadow)!important;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .btn-glass.btn-secondary,.btn-glass.btn-primary{background:var(--glass-panel-fallback)}
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;-webkit-font-smoothing:antialiased}
.page{min-height:100vh;padding:32px 24px 96px}
.case-page{padding-top:96px}
.content{width:min(568px,100%);margin:0 auto}
.profile{display:flex;flex-direction:column;gap:32px}
.topbar{display:flex;align-items:center;justify-content:space-between;min-height:40px;width:100%;margin:0;transform:none}
.actions{display:flex;align-items:center;gap:12px}
.avatar{display:block;width:40px;height:40px;object-fit:cover;border-radius:50%}
.copy{display:flex;flex-direction:column;gap:24px}
.meta{display:flex;align-items:center;justify-content:space-between;gap:16px}
.meta h1,.meta p,.bio,.work h2,.info h3,.info p{margin:0;font-weight:500}
.meta h1{font-size:14px;line-height:16.8px;white-space:nowrap}
.meta p{color:hsl(var(--muted-foreground));font-size:13px;line-height:20px;white-space:nowrap}
.bio{color:hsl(var(--text-secondary));font-size:14px;line-height:23px;text-wrap:pretty}
.loading,.load-error{color:hsl(var(--muted-foreground));font-size:14px;line-height:1.6}
.load-error{margin-top:32px}
.case-shell{width:min(100%,980px);margin:0 auto}
.back-link,.case-footer a{color:hsl(var(--muted-foreground));text-decoration:none;font-size:13px}
.back-link:hover,.case-footer a:hover{color:hsl(var(--foreground))}
@media(max-width:600px){
  .page{padding:24px 16px 64px}
  .content,.case-shell{width:100%;min-width:0}
  .profile{gap:28px}
  .topbar{width:100%;margin:0}
  .actions{gap:8px}
  .site-nav-brand{min-height:36px}
  .site-nav-links{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:12px}
  .site-nav-link{font-size:13px}
  .copy{min-width:0}
  .bio{overflow-wrap:anywhere}
  .work{margin-top:48px}
  .card,.card-art{min-width:0;width:100%}
  .card-art{aspect-ratio:1.45}
  .case-page{padding:28px 16px 56px}
  .case-header,.case-intro,.case-body,.case-impact{width:100%;min-width:0}
  .case-header h1{font-size:var(--font-size-h1);overflow-wrap:anywhere}
  .case-excerpt{font-size:16px}
  .credits{gap:18px 24px}
  .case-cover{width:100%;margin:36px auto 48px}
  .media-block.full{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  .gallery{grid-template-columns:1fr}
  .columns,.columns.ratio-1\\:1,.columns.ratio-3\\:2,.columns.ratio-2\\:3{grid-template-columns:minmax(0,1fr);gap:20px}
  .metrics-grid,.case-impact .metrics-grid{grid-template-columns:minmax(0,1fr)}
  .placeholder-window{min-height:240px;padding:20px}
  .case-footer{margin-top:64px}
}
@media(max-width:380px){.meta{align-items:flex-start;flex-direction:column;gap:4px}}

/* Plutchik reference link — scoped to this specific Sanity URL. */
a[href*="wikipedia.org/wiki/Robert_Plutchik"]{
  text-decoration-line:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,currentColor 42%,transparent);
  transition:color .18s ease,text-decoration-color .18s ease,text-decoration-thickness .18s ease;
}
a[href*="wikipedia.org/wiki/Robert_Plutchik"]:hover{
  text-decoration-color:currentColor;
  text-decoration-thickness:2px;
}
a[href*="wikipedia.org/wiki/Robert_Plutchik"]:focus-visible{
  outline:2px solid hsl(var(--foreground));
  outline-offset:3px;
}

/* Soft blur-up reveal */
@keyframes soft-reveal-up{
  from{opacity:0;filter:blur(10px);translate:0 18px}
  to{opacity:1;filter:blur(0);translate:0 0}
}
.reveal-in{opacity:0;translate:0 18px;filter:blur(10px);will-change:opacity,translate,filter}
.reveal-in.is-visible{animation:soft-reveal-up .95s cubic-bezier(.16,1,.3,1) both}
@media(prefers-reduced-motion:reduce){
  .reveal-in,.reveal-in.is-visible{opacity:1;filter:none;translate:none;animation:none;will-change:auto}
}

@media(max-width:380px){
  .page{padding-right:12px;padding-left:12px}
  .meta{align-items:flex-start;flex-direction:column;gap:4px}
  .bio{font-size:14px;line-height:1.65}
  .case-page{padding-right:12px;padding-left:12px}
  .media-block.full{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px}
}


/* About page — shares the site's neutral type and color tokens. */
.about-page{padding:32px 24px 96px}
.about-wrap{display:flex;flex-direction:column;gap:56px}
.about-hero{display:block}
.about-intro-copy{display:flex;flex-direction:column;gap:16px;min-width:0}
.about-intro-copy>p{margin:0;color:hsl(var(--text-secondary));font-size:14px;line-height:24px;text-wrap:pretty}
.about-section{display:flex;flex-direction:column;gap:18px}
.about-section>h2{margin:0;color:hsl(var(--foreground));font-size:14px;line-height:22px;font-weight:600;letter-spacing:-.1px}
.about-entry-list{display:flex;flex-direction:column;min-width:0}
.about-work-row{display:block;padding:20px 0;border-bottom:1px solid hsl(var(--border))}
.about-work-row:first-child{padding-top:0}
.about-work-row:last-child{padding-bottom:0;border-bottom:0}
.about-work-main{min-width:0}
.about-work-main h3{margin:0;color:hsl(var(--foreground));font-size:14px;line-height:22px;font-weight:550}
.about-work-main h3 span{color:hsl(var(--muted-foreground));font-weight:400}
.about-work-main h3 .about-entry-link{color:inherit;text-decoration:none}
.about-work-main h3 .about-entry-link:hover{text-decoration:underline;text-underline-offset:3px}
.about-work-main time{display:block;margin-top:2px;color:hsl(var(--text-tertiary));font-size:12px;line-height:19px;text-align:left;white-space:normal}
.about-work-main p{width:100%;margin:8px 0 0;max-width:none;color:hsl(var(--muted-foreground));font-size:13px;line-height:21px}

.about-music-description{margin:0;color:hsl(var(--foreground));font-size:14px;line-height:23px;text-wrap:pretty}
.about-music-card{display:flex;align-items:center;gap:12px;min-width:0;padding:12px;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--card))}
.about-music-art{width:64px;height:64px;flex:0 0 64px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 50% 50%,#e8e8e8 0 13%,#171717 14% 35%,#6c3323 36% 43%,#080808 44% 100%);color:#fff}
.about-music-art span{font-size:0}
.about-music-info{display:flex;min-width:0;flex:1;flex-direction:column;gap:4px}
.about-music-info strong{color:hsl(var(--foreground));font-size:14px;line-height:20px;font-weight:500}
.about-music-info span{overflow:hidden;color:hsl(var(--muted-foreground));font-size:12px;line-height:18px;text-overflow:ellipsis;white-space:nowrap}
.about-spotify{flex:0 0 auto}
.about-photo-grid{
  column-count:2;
  column-gap:12px;
  width:100%;
}
.about-snapshot{
  display:inline-block;width:100%;min-width:0;margin:0 0 12px;padding:0;
  overflow:hidden;break-inside:avoid;vertical-align:top;
  border:1px solid hsl(var(--border));border-radius:var(--radius);
  background:hsl(var(--muted));cursor:zoom-in;
}
.about-snapshot img{
  display:block;width:100%;height:auto;max-height:none;
  object-fit:contain;transition:transform .22s ease;
}
.about-snapshot:hover img{transform:scale(1.025)}
.about-snapshot:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}
.about-snapshot.is-expanded{cursor:zoom-out}
.about-snapshot.is-expanded img{width:100%;height:auto;max-height:75vh;object-fit:contain;transform:none;}
@media(max-width:600px){
  .about-page{padding:24px 16px 64px}
  .about-wrap{gap:44px}
  .about-intro-copy{gap:14px}
  .about-intro-copy>p{font-size:14px;line-height:23px}
  .about-section{gap:16px}
  .about-work-row{padding:18px 0}
  .about-work-row:first-child{padding-top:0}
  .about-work-main time{font-size:12px;line-height:19px}
  .about-photo-grid{column-gap:8px}
  .about-snapshot{margin-bottom:8px}
  .about-music-card{gap:10px;padding:10px}
  .about-music-art{width:56px;height:56px;flex-basis:56px}
  .about-music-info strong{font-size:13px}
  .about-spotify{height:36px;padding:0 10px;font-size:12px}
}
@media(max-width:380px){
  .about-page{padding-right:12px;padding-left:12px}
}


.lastfm-widget{display:flex;flex-direction:column;gap:12px;min-width:0}
.lastfm-widget .about-music-card{min-width:0}
.lastfm-music-info small{color:hsl(var(--muted-foreground));font-size:11px;line-height:16px}
.about-music-info strong a{color:inherit;text-decoration:none}
.about-music-info strong a:hover{text-decoration:underline;text-underline-offset:3px}
.lastfm-toptracks{display:flex;flex-direction:column;gap:10px}
.lastfm-toptracks h3{margin:0;color:hsl(var(--foreground));font-size:13px;line-height:20px;font-weight:500}
.lastfm-track-list{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.lastfm-track-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:start;gap:10px}
.lastfm-track-row>a{min-width:0;color:hsl(var(--foreground));font-size:13px;line-height:18px;text-decoration:none}
.lastfm-track-row>a:hover{text-decoration:underline;text-underline-offset:3px}
.lastfm-track-row small{display:block;margin-top:2px;color:hsl(var(--muted-foreground));font-size:11px;line-height:16px}
.lastfm-rank,.lastfm-playcount{padding-top:1px;color:hsl(var(--muted-foreground));font-size:11px;line-height:16px;font-variant-numeric:tabular-nums}
.lastfm-empty{margin:0;color:hsl(var(--muted-foreground));font-size:12px;line-height:18px}
.lastfm-credit{margin:0;text-align:right;color:hsl(var(--muted-foreground));font-size:10px;line-height:16px}
.lastfm-credit a{color:inherit;text-decoration:none}
.lastfm-credit a:hover{text-decoration:underline;text-underline-offset:2px}


/* About page — inline Valorant link for the IGL mention. */
.about-igl-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:hsl(var(--text-tertiary));
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.about-igl-icon{
  display:inline-block;
  width:0;
  height:.95em;
  margin-left:0;
  overflow:hidden;
  vertical-align:-.12em;
  opacity:0;
  transform:translateX(-4px) scale(.85);
  transition:width .22s cubic-bezier(.2,.7,.2,1),margin-left .22s cubic-bezier(.2,.7,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.about-igl-icon img{
  display:block;
  width:14px;
  height:14px;
  max-width:none;
  object-fit:contain;
}
.about-xavante-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-color:hsl(var(--text-tertiary));
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.about-xavante-icon{
  display:inline-block;
  width:0;
  height:1em;
  margin-left:0;
  overflow:hidden;
  vertical-align:-.28em;
  opacity:0;
  transform:translateX(-4px) scale(.85);
  transition:width .22s cubic-bezier(.2,.7,.2,1),margin-left .22s cubic-bezier(.2,.7,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.about-xavante-icon img{display:block;width:16px;height:16px;max-width:none;object-fit:contain}
.about-xavante-link:hover,.about-xavante-link:focus-visible{color:#c8102e;text-decoration-color:#c8102e}
.about-xavante-link:hover .about-xavante-icon,.about-xavante-link:focus-visible .about-xavante-icon{width:16px;margin-left:5px;opacity:1;transform:translateX(0) scale(1)}
.about-xavante-link:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px;border-radius:2px}
@media(hover:none){.about-xavante-icon{width:16px;margin-left:5px;opacity:1;transform:none}}

.about-igl-link:hover,
.about-igl-link:focus-visible{
  color:#ff4655;
  text-decoration-color:#ff4655;
}
.about-igl-link:hover .about-igl-icon,
.about-igl-link:focus-visible .about-igl-icon{
  width:14px;
  margin-left:6px;
  opacity:1;
  transform:translateX(0) scale(1);
}
.about-igl-link:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
  border-radius:2px;
}
@media(hover:none){
  .about-igl-icon{
    width:14px;
    margin-left:6px;
    opacity:1;
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-igl-link,
  .about-igl-icon{transition:none}
}


/* About page — company links use accessible brand colors and line-height-aligned marks. */
.about-company-link{
  --company-icon-width:23px;
  display:inline-flex;
  align-items:center;
  vertical-align:middle;
  line-height:22px;
  color:inherit;
  text-decoration:underline;
  text-decoration-color:hsl(var(--muted-foreground));
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.about-company-link-pleno{--company-link-color:#00246B}
.about-company-link-noticiato{--company-link-color:#806500}
.about-company-link-cade{--company-link-color:#C00057;--company-icon-width:46px}
.about-company-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:0;
  height:22px;
  margin-left:0;
  overflow:hidden;
  vertical-align:middle;
  opacity:0;
  transform:translateX(-4px) scale(.85);
  transition:width .22s cubic-bezier(.2,.7,.2,1),margin-left .22s cubic-bezier(.2,.7,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.about-company-icon img{
  display:block;
  width:auto;
  height:22px;
  max-width:48px;
  max-height:22px;
  object-fit:contain;
  flex:0 0 auto;
}
.about-company-link:hover,
.about-company-link:focus-visible{
  color:var(--company-link-color);
  text-decoration-color:currentColor;
}
.about-company-link:hover .about-company-icon,
.about-company-link:focus-visible .about-company-icon{
  width:var(--company-icon-width);
  margin-left:6px;
  opacity:1;
  transform:translateX(0) scale(1);
}
.about-company-link:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
  border-radius:2px;
}
@media(hover:none){
  .about-company-icon{
    width:var(--company-icon-width);
    margin-left:6px;
    opacity:1;
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-company-link,
  .about-company-icon{transition:none}
}

/* About page — compact circular return control aligned with the former navigation row. */
.about-back-button{
  width:40px;
  min-width:40px;
  padding:0;
  border-radius:50%;
}
.about-back-button svg{display:block;flex:0 0 18px}


/* Last.fm third-party album embed. */
.lastfm-embed-period{
  margin:0;
  color:hsl(var(--muted-foreground));
  font-size:12px;
  line-height:18px;
}
.lastfm-embed-frame{
  display:block;
  width:100%;
  height:480px;
  border:0;
  border-radius:16px;
  background:hsl(var(--card));
}

/* Image-based inline symbols on the About page. */
.about-inline-emojis{display:inline-flex;align-items:center;gap:4px;margin-left:3px;vertical-align:-.18em}
.about-inline-emojis img{display:block;width:17px;height:17px;object-fit:contain}
.about-inline-emojis img:last-child{width:20px;height:13px;border-radius:2px}

/* On touch layouts, keep company marks hidden instead of forcing hover states. */
@media(max-width:600px){
  .about-company-icon{
    display:none !important;
  }
}

/* Persistent São Paulo state flag beside the location mention. */
.about-location-icon{
  display:inline-block;
  width:18px;
  height:13px;
  margin-left:5px;
  vertical-align:-1px;
}
.about-location-icon img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:2px;
}


/* Home — return to the same plain white page structure used by About. */
/* About page — inline contact links with the same icon-reveal behavior as Valorant. */
.about-inline-emojis .about-salute{
  display:inline-block;
  font-family:"Segoe UI Emoji","Segoe UI",sans-serif;
  font-size:17px;
  line-height:1;
  vertical-align:baseline;
}
.about-contact-copy{margin:0;color:hsl(var(--text-secondary));font-size:14px;line-height:24px;text-wrap:pretty}
.about-contact-link{
  --contact-color:#65b9e8;
  position:relative;
  display:inline;
  margin:0;
  padding:0;
  border:0;
  border-radius:2px;
  background:transparent;
  color:inherit;
  font:inherit;
  line-height:inherit;
  text-decoration:underline;
  text-decoration-color:hsl(var(--text-tertiary));
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  cursor:pointer;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.about-contact-linkedin{--contact-color:#0a66c2}
.about-contact-email{--contact-color:#65b9e8}
.about-contact-whatsapp{--contact-color:#1fa968}
.about-contact-icon{
  display:inline-block;
  width:0;
  height:.95em;
  margin-left:0;
  overflow:hidden;
  vertical-align:-.12em;
  opacity:0;
  transform:translateX(-4px) scale(.85);
  transition:width .22s cubic-bezier(.2,.7,.2,1),margin-left .22s cubic-bezier(.2,.7,.2,1),opacity .16s ease,transform .22s cubic-bezier(.2,.7,.2,1);
}
.about-contact-icon svg{
  display:block;
  width:14px;
  height:14px;
  max-width:none;
  fill:currentColor;
}
.about-contact-email .about-contact-icon svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.about-contact-check-icon{display:none}
.about-contact-email.is-copied .about-contact-copy-icon{display:none}
.about-contact-email.is-copied .about-contact-check-icon{display:block}
.about-contact-link:hover,
.about-contact-link:focus-visible{
  color:var(--contact-color);
  text-decoration-color:currentColor;
}
.about-contact-link:hover .about-contact-icon,
.about-contact-link:focus-visible .about-contact-icon{
  width:14px;
  margin-left:6px;
  opacity:1;
  transform:translateX(0) scale(1);
}
.about-contact-link:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
@media(hover:none){
  .about-contact-icon{
    width:14px;
    margin-left:6px;
    opacity:1;
    transform:none;
  }
}
@media(prefers-reduced-motion:reduce){
  .about-contact-link,
  .about-contact-icon{transition:none}
}
@media(max-width:600px){
  .about-contact-copy{font-size:14px;line-height:23px}
}


/* Glass navigation menus and translucent custom pointer. */
.home-page .topbar{position:relative;z-index:2}
.nav-more-wrap{position:relative;display:flex;z-index:20}
/* Keep the pointer inside the trigger/menu interaction area while crossing the visual gap. */
.nav-more-wrap::after{content:"";position:absolute;top:100%;right:0;width:208px;height:4px;pointer-events:none}
.nav-more-wrap.is-open::after{pointer-events:auto}
.nav-more-trigger{width:40px;min-width:40px;padding:0;border-radius:50%}
.nav-more-trigger svg{display:block;transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.nav-more-wrap.is-open .nav-more-trigger svg{transform:rotate(45deg)}
.nav-glass-menu,.nav-contact-menu{
  position:absolute;z-index:30;
  border:1px solid var(--glass-border);
  border-radius:16px;
  background:var(--glass-panel-background);
  background-color:var(--glass-panel-solid);
  -webkit-backdrop-filter:blur(30px) saturate(175%);
  backdrop-filter:blur(30px) saturate(175%);
  box-shadow:var(--glass-shadow);
}
.nav-glass-menu{
  top:calc(100% + 4px);right:0;width:208px;padding:7px;
  transform-origin:top right;
  animation:nav-menu-appear .22s cubic-bezier(.2,.7,.2,1) both;
}
.nav-glass-menu[hidden]{display:none}
.nav-menu-item{
  display:flex;align-items:center;width:100%;min-height:40px;padding:0 11px;
  border:0;border-radius:9px;background:transparent;color:var(--glass-color);
  font:550 13px/1.3 "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  text-align:left;text-decoration:none;cursor:pointer;
  transition:background .16s ease,color .16s ease;
}
.nav-menu-item:hover,.nav-menu-item:focus-visible{background:var(--glass-item-hover);color:hsl(var(--foreground))}
.nav-menu-item:focus-visible,.nav-contact-icon:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.nav-menu-divider{display:block;height:1px;margin:4px 5px;background:var(--glass-divider)}
.nav-glass-menu .nav-menu-item.reveal-in{
  opacity:0;filter:none;translate:none;transform:translateY(4px);will-change:opacity,transform;
}
.nav-glass-menu .nav-menu-item.reveal-in.is-visible{
  animation:nav-menu-item-reveal .18s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes nav-menu-item-reveal{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:translateY(0)}
}
.nav-contact-wrap{position:relative}
.nav-contact-wrap::after{
  content:"";
  position:absolute;
  top:100%;
  right:-8px;
  left:-8px;
  height:12px;
  pointer-events:none;
}
.nav-contact-wrap.is-open::after,
.nav-contact-wrap.is-keyboard-open::after{pointer-events:auto}
.nav-contact-trigger{justify-content:center}
.nav-contact-wrap:hover > .nav-contact-trigger,
.nav-contact-wrap:focus-within > .nav-contact-trigger,
.nav-contact-wrap.is-open > .nav-contact-trigger{
  background:var(--glass-item-hover);color:hsl(var(--foreground));
}
.nav-contact-menu{
  top:calc(100% + 4px);right:0;display:flex;align-items:center;gap:5px;z-index:31;
  padding:7px;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(4px) scale(.98);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.7,.2,1),visibility 0s linear .18s;
}
.nav-contact-wrap:hover > .nav-contact-menu,
.nav-contact-wrap.is-open > .nav-contact-menu,
.nav-contact-wrap.is-keyboard-open > .nav-contact-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.nav-contact-icon{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;
  color:var(--glass-color);text-decoration:none;background:var(--glass-item-background);
  opacity:1;transform:none;
  transition:background .16s ease,color .16s ease;
}
.nav-contact-icon svg{display:block;width:18px;height:18px}
.nav-contact-icon:hover{background:var(--glass-item-hover);color:hsl(var(--foreground))}
@keyframes nav-menu-appear{
  from{opacity:0;transform:translateY(-5px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(max-width:600px){
  .nav-glass-menu{right:0}
  .nav-contact-menu{top:calc(100% + 7px)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-glass-menu,.nav-contact-menu{background:var(--glass-panel-fallback)}
}
@media(prefers-reduced-motion:reduce){
  .nav-glass-menu{animation:none}
  .nav-contact-menu{transition:none}
  .nav-more-trigger svg{transition:none}
}
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  body.has-portfolio-cursor,
  body.has-portfolio-cursor a,
  body.has-portfolio-cursor button,
  body.has-portfolio-cursor [role="button"],
  body.has-portfolio-cursor summary,
  body.has-portfolio-cursor label,
  body.has-portfolio-cursor .card,
  body.has-portfolio-cursor [data-custom-cursor-area],
  body.has-portfolio-cursor [data-custom-cursor-area] *{cursor:none !important}
  body.has-portfolio-cursor input,
  body.has-portfolio-cursor textarea,
  body.has-portfolio-cursor select,
  body.has-portfolio-cursor [contenteditable="true"]{cursor:text !important}
  .portfolio-cursor{
    position:fixed;top:0;left:0;z-index:10000;
    width:31px;height:31px;display:block;
    pointer-events:none;opacity:0;
    transform:translate3d(-100px,-100px,0);
    transition:transform .08s cubic-bezier(.2,.7,.2,1),opacity .14s ease,filter .18s ease;
    will-change:transform,opacity;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.16));
  }
  .portfolio-cursor.is-visible{opacity:1}
  .portfolio-cursor.is-hovering{filter:drop-shadow(0 2px 4px rgba(0,0,0,.22))}
  .portfolio-cursor svg{display:block;width:31px;height:31px;overflow:visible}
}
@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .portfolio-cursor{display:none !important}
}


/* Copy-email feedback inside the contact flyout. */
.nav-contact-icon.nav-email-copy{
  position:relative;
  padding:0;
  border:0;
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.nav-email-copy .nav-email-gmail-icon,
.nav-email-copy .nav-email-check-icon{
  position:absolute;
  inset:0;
  width:20px;
  height:20px;
  margin:auto;
}
.nav-email-copy .nav-email-gmail-icon{
  display:block !important;
  fill:initial;
  stroke:none;
}
.nav-email-copy .nav-email-check-icon{
  display:none !important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-email-copy.is-copied .nav-email-gmail-icon{display:none !important}
.nav-email-copy.is-copied .nav-email-check-icon{display:block !important}
.nav-copy-tooltip[hidden]{display:none}
.nav-copy-tooltip{
  position:absolute;
  right:50%;
  bottom:calc(100% + 10px);
  z-index:40;
  width:max-content;
  padding:8px 11px;
  border:1px solid var(--glass-border);
  border-radius:10px;
  background:var(--glass-panel-background);
  color:var(--glass-color);
  font:550 12px/1.2 "Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(50%,5px) scale(.97);
  -webkit-backdrop-filter:blur(24px) saturate(175%);
  backdrop-filter:blur(24px) saturate(175%);
  box-shadow:var(--glass-shadow);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.7,.2,1),visibility 0s linear .18s;
}
.nav-email-copy.is-copied .nav-copy-tooltip{
  opacity:1;
  visibility:visible;
  transform:translate(50%,0) scale(1);
  transition-delay:0s;
}
.nav-email-copy:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav-copy-tooltip{background:var(--glass-panel-fallback)}
}
@media(prefers-reduced-motion:reduce){
  .nav-copy-tooltip{transition:none}
}


/* Theme control shared by the + menu and back-only page headers. */
.theme-toggle-menu{justify-content:space-between;gap:12px}
.theme-toggle-content{display:flex;align-items:center;gap:10px;min-width:0}
.theme-toggle-icons{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:17px;height:17px}
.theme-toggle-icons svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle-icons svg.theme-icon-moon{display:block}
.theme-toggle-icons svg.theme-icon-sun{display:none}
html[data-theme="dark"] .theme-toggle-icons svg.theme-icon-moon{display:none}
html[data-theme="dark"] .theme-toggle-icons svg.theme-icon-sun{display:block}
.theme-toggle-compact{width:40px;min-width:40px;padding:0;border-radius:50%}
.theme-toggle-compact .theme-toggle-icons,.theme-toggle-compact .theme-toggle-icons svg{width:18px;height:18px}
.theme-toggle-compact:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}
@media(prefers-reduced-motion:reduce){.theme-toggle-icons svg{transition:none}}


/* Secondary-page navigation stays available while scrolling. */
.about-topbar{
  position:fixed;
  top:16px;
  left:50%;
  translate:-50% 0;
  z-index:1100;
  width:min(var(--secondary-nav-width,568px),calc(100% - 48px));
  margin:0;
  pointer-events:none;
}
.about-topbar>*{pointer-events:auto}
.about-page{padding-top:88px}
@media(max-width:600px){
  .about-topbar{
    top:12px;
    width:min(var(--secondary-nav-width,568px),calc(100% - 32px));
  }
  .about-page{padding-top:76px}
}

/* Shared local clock and weather footer. */
#app{display:flex;min-height:100vh;flex-direction:column}
.page{flex:1 0 auto;min-height:calc(100vh - 72px)}
.site-footer{
  flex:0 0 auto;
  padding:0 24px max(16px,env(safe-area-inset-bottom));
  color:hsl(var(--muted-foreground));
}
.site-footer-inner{
  display:grid;
  width:min(100%,568px);
  grid-template-columns:1fr auto;
  min-height:56px;
  align-items:center;
  gap:20px;
  margin:0 auto;
  border-top:1px solid hsl(var(--border-subtle));
}
.site-footer-clock,.site-footer-weather{display:flex;min-width:0;align-items:center;gap:8px;color:hsl(var(--text-secondary));font-size:12px;font-variant-numeric:tabular-nums}
.site-weather-icon{display:block;width:18px;height:18px;flex:0 0 18px}
@media(max-width:600px){
  .page{min-height:calc(100vh - 72px)}
  .site-footer{padding-right:16px;padding-left:16px}
}
@media(max-width:380px){
  .site-footer{padding-right:12px;padding-left:12px}
}
/* Floating return-to-top control for secondary pages. */
.back-to-top{
  position:fixed;
  right:max(24px,env(safe-area-inset-right));
  bottom:max(24px,env(safe-area-inset-bottom));
  z-index:1200;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid hsl(var(--border));
  border-radius:50%;
  background:hsl(var(--card) / .88);
  color:hsl(var(--foreground));
  box-shadow:var(--surface-shadow,0 4px 18px rgba(0,0,0,.12));
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(8px) scale(.96);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,background .18s ease;
  cursor:pointer;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}
.back-to-top:hover{background:hsl(var(--card))}
.back-to-top svg{
  display:block;
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.back-to-top:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:3px}
@media(max-width:600px){
  .back-to-top{
    right:max(16px,env(safe-area-inset-right));
    bottom:max(32px,env(safe-area-inset-bottom));
    width:42px;
    height:42px;
  }
}
@media(prefers-reduced-motion:reduce){
  .back-to-top{transition:none}
}
.work{display:flex;flex-direction:column;gap:12px;margin-top:64px}.work h2{font-size:14px;line-height:22px;letter-spacing:-.1px}.list{display:flex;flex-direction:column;gap:32px}.card{display:flex;flex-direction:column;gap:8px;color:inherit;text-decoration:none}.card-art{width:100%;aspect-ratio:520/284.75;overflow:hidden;border:1px solid hsl(var(--border));border-radius:8px;background:hsl(var(--media-background));box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.04)}.card-art .media-block{width:100%;height:100%;margin:0}.card-art img,.card-art video{width:100%;height:100%;object-fit:cover}.art-fallback{width:100%;height:100%;background:hsl(var(--media-background))}.info{min-height:43px}.info h3{color:hsl(var(--text-secondary));font-size:14px;line-height:23px;white-space:nowrap}.info p{color:hsl(var(--text-tertiary));font-size:13px;line-height:20px;letter-spacing:-.1px;white-space:nowrap}.card:hover .info h3{color:hsl(var(--foreground))}.case-page{padding-top:48px}.case-header{max-width:720px;margin:76px auto 48px}.case-meta{margin:0 0 16px;color:hsl(var(--text-tertiary));font-size:13px}.case-header h1{margin:0;font-size:var(--font-size-h1);line-height:var(--font-line-height-heading);letter-spacing:-.025em;font-weight:var(--font-weight-heading)}.case-excerpt{max-width:620px;margin:24px 0 0;color:hsl(var(--text-secondary));font-size:18px;line-height:1.55}.credits{display:flex;flex-wrap:wrap;gap:20px 36px;margin:28px 0 0}.credits div{display:flex;flex-direction:column;gap:5px}.credits dt{color:hsl(var(--text-tertiary));font-size:11px;text-transform:uppercase;letter-spacing:.06em}.credits dd{margin:0;color:hsl(var(--foreground));font-size:13px;white-space:pre-line}.case-cover{margin:0 calc((min(100vw - 48px,980px) - min(100vw - 48px,980px))/2) 72px}.case-cover .media-block{margin:0}.case-cover .media-block.full{margin-left:calc((980px - 100vw)/2);margin-right:calc((980px - 100vw)/2)}.case-cover img,.case-cover video{width:100%;max-height:80vh;object-fit:contain}.case-body{width:min(100%,680px);margin:0 auto;font-size:16px;line-height:1.75;color:hsl(var(--foreground))}.case-body>p{margin:0 0 22px}.case-body h2{margin:64px 0 20px;font-size:var(--font-size-h2);line-height:var(--font-line-height-heading);letter-spacing:-.02em;color:hsl(var(--foreground))}.case-body h3{margin:40px 0 14px;font-size:var(--font-size-h3);line-height:var(--font-line-height-heading);color:hsl(var(--foreground))}.case-body h4{margin:32px 0 12px;font-size:var(--font-size-h4);line-height:var(--font-line-height-heading);color:hsl(var(--foreground))}.case-body h5{margin:28px 0 10px;font-size:var(--font-size-h5);line-height:var(--font-line-height-heading);color:hsl(var(--foreground))}.case-body h6{margin:24px 0 10px;font-size:var(--font-size-h6);line-height:var(--font-line-height-heading);color:hsl(var(--foreground))}.case-body blockquote{margin:32px 0;padding-left:20px;border-left:2px solid hsl(var(--foreground));color:hsl(var(--text-secondary));font-size:20px;line-height:1.5}.case-body a{color:inherit;text-underline-offset:3px}.media-block{margin:36px auto}.media-block img,.media-block video{display:block;width:100%;height:auto;max-height:85vh;object-fit:contain;background:hsl(var(--media-background))}.media-block.cover{margin:0}.media-block.wide{width:min(100%,980px);max-width:none}.media-block.full{width:100vw;max-width:none;margin-left:calc((680px - 100vw)/2);margin-right:calc((680px - 100vw)/2)}.media-block figcaption{margin-top:10px;color:hsl(var(--text-tertiary));font-size:12px;line-height:1.5}.gallery{display:grid;margin:40px 0}.gallery .media-block{width:100%;margin:0}.gallery.cols-1{grid-template-columns:1fr}.gallery.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gallery.gap-small{gap:8px}.gallery.gap-medium{gap:16px}.gallery.gap-large{gap:28px}.pullquote{margin:56px 0;padding:28px 0;border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border))}.pullquote blockquote{margin:0;border:0;padding:0;font-size:clamp(22px,3vw,32px);color:hsl(var(--foreground))}.pullquote figcaption{margin-top:16px;color:hsl(var(--text-tertiary));font-size:13px}.metric{display:flex;flex-direction:column;gap:5px;padding:24px;border:1px solid hsl(var(--border));border-radius:8px}.metric strong{font-size:36px;letter-spacing:-.04em}.metric span{font-size:14px}.metric small{color:hsl(var(--text-tertiary));font-size:12px}.columns{display:grid;gap:32px;margin:40px 0}.columns.ratio-1\:1{grid-template-columns:1fr 1fr}.columns.ratio-3\:2{grid-template-columns:1.2fr .8fr}.columns.ratio-2\:3{grid-template-columns:.8fr 1.2fr}.content-column{min-width:0}.content-column .media-block{width:100%;margin:20px 0}.content-column p{margin:0 0 16px}.external-embed{padding:18px;border:1px solid hsl(var(--border));border-radius:8px}.external-embed a{font-size:14px}.external-embed small{display:block;margin-top:6px;color:hsl(var(--text-tertiary))}.case-footer{margin:100px auto 0;padding-top:24px;border-top:1px solid hsl(var(--border));max-width:680px}@media(max-width:700px){.work{margin-top:56px}.list{gap:28px}.case-page{padding:32px 20px 56px}.case-header{margin:56px auto 32px}.case-excerpt{font-size:16px}.case-cover{margin-bottom:48px}.case-body{font-size:15px}.media-block.full{width:calc(100% + 40px);margin-left:-20px;margin-right:-20px}.gallery.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}.columns,.columns.ratio-1\:1,.columns.ratio-3\:2,.columns.ratio-2\:3{grid-template-columns:1fr;gap:16px}}@media(max-width:380px){.info h3,.info p{white-space:normal}}
.case-body .rich-list{margin:0 0 24px;padding-left:1.4em}.case-body .rich-list li{padding-left:.25em;margin:0 0 8px}.metrics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:36px 0}.metrics-grid .metric{margin:0}.media-block.fit-cover img{object-fit:cover}@media(max-width:500px){.metrics-grid{grid-template-columns:1fr}}
/* Editorial case layout */
.case-page{padding-top:48px;padding-bottom:100px}
.case-shell{width:min(100%,980px)}
.case-header{max-width:760px;margin:76px auto 44px}
.case-header h1{font-size:var(--font-size-h1);line-height:var(--font-line-height-heading);letter-spacing:-.025em;font-weight:var(--font-weight-heading)}
.case-meta{margin-bottom:18px}
.case-excerpt{max-width:680px;font-size:18px;line-height:1.55;margin-top:22px}
.credits{gap:24px 64px;margin-top:34px;padding-top:22px;border-top:1px solid hsl(var(--border))}
.case-intro,.case-body{width:min(100%,680px);margin:0 auto;font-size:16px;line-height:1.75;color:hsl(var(--foreground))}
.case-intro>p,.case-body>p{margin:0 0 22px}
.case-cover{width:min(100%,980px);margin:52px auto 80px}
.case-cover .media-block{width:100%;margin:0}
.case-cover img,.case-cover video{width:100%;max-height:76vh;object-fit:cover;border-radius:3px}
.case-impact{width:min(100%,760px);margin:0 auto 76px}
.case-impact>h2{font-size:14px;font-weight:500;color:hsl(var(--text-tertiary));margin:0 0 18px}
.case-impact .metrics-grid{margin:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.case-impact .metric{padding:22px 20px;border:0;border-top:1px solid hsl(var(--border));border-radius:0}
.case-impact .metric strong{font-size:clamp(26px,3vw,38px);font-weight:550;letter-spacing:-.05em}
.case-impact .metric span{font-size:13px;line-height:1.5;color:hsl(var(--text-secondary))}
.case-body h2{margin:72px 0 18px;font-size:var(--font-size-h2);line-height:var(--font-line-height-heading);letter-spacing:-.02em;font-weight:var(--font-weight-heading)}
.case-body h3{margin:44px 0 14px;font-size:var(--font-size-h3);line-height:var(--font-line-height-heading);font-weight:var(--font-weight-heading)}
.case-body .media-block{margin:34px auto}
.case-placeholder{width:min(100%,980px);margin:54px auto 76px}
.placeholder-window{min-height:360px;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;position:relative;background:var(--placeholder-background);color:var(--placeholder-foreground)}
.placeholder-window:before{content:"";position:absolute;width:44%;aspect-ratio:1;border:1px solid rgba(23,59,64,.28);border-radius:50%;right:8%;top:-12%;box-shadow:0 0 0 28px rgba(255,255,255,.12),0 0 0 58px rgba(255,255,255,.10)}
.placeholder-window:after{content:"";position:absolute;width:34%;height:58%;right:13%;bottom:-8%;background:rgba(255,255,255,.24);border:1px solid rgba(23,59,64,.18);transform:rotate(12deg)}
.placeholder-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.14em;position:relative;z-index:1}
.placeholder-window strong{font-size:clamp(28px,5vw,54px);line-height:1;letter-spacing:-.05em;max-width:460px;position:relative;z-index:1}
.placeholder-window i{display:block;width:24%;height:5px;background:rgba(23,59,64,.25);position:relative;z-index:1}
.placeholder-window i:nth-of-type(2){width:17%}.placeholder-window i:nth-of-type(3){width:11%}
.case-placeholder.secondary .placeholder-window{background:var(--placeholder-secondary-background);color:var(--placeholder-secondary-foreground)}
.case-placeholder figcaption{margin-top:10px;color:hsl(var(--text-tertiary));font-size:11px}
.case-footer{margin-top:96px}
@media(max-width:700px){.case-header{margin:54px auto 36px}.case-impact .metrics-grid{grid-template-columns:1fr 1fr}.placeholder-window{min-height:260px;padding:24px}.case-cover{margin:40px auto 56px}}
@media(max-width:480px){.case-impact .metrics-grid{grid-template-columns:1fr}.case-impact .metric{padding:18px 0}}

/* Mobile layout overrides (kept after editorial desktop rules). */
@media(max-width:600px){
  .case-page{padding:28px 16px 56px}
  .case-shell,.case-header,.case-intro,.case-body,.case-impact{width:100%;min-width:0}
  .case-header{margin:52px auto 32px}
  .case-header h1{font-size:var(--font-size-h1);overflow-wrap:anywhere}
  .case-excerpt{font-size:16px}
  .credits{gap:18px 24px}
  .case-cover{width:100%;margin:36px auto 48px}
  .case-cover img,.case-cover video{max-height:none}
  .media-block.full{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .columns,.columns.ratio-1\\:1,.columns.ratio-3\\:2,.columns.ratio-2\\:3{grid-template-columns:minmax(0,1fr);gap:20px}
  .metrics-grid,.case-impact .metrics-grid{grid-template-columns:minmax(0,1fr)}
  .placeholder-window{min-height:240px;padding:20px}
  .case-footer{margin-top:64px}
}
@media(max-width:380px){
  .case-page{padding-right:12px;padding-left:12px}
  .media-block.full{width:calc(100% + 24px);margin-left:-12px;margin-right:-12px}
  .case-header h1{font-size:var(--font-size-h1)}
  .case-body{font-size:14px}
}


/* Case pages — editorial structure inspired by the reference study. */
.case-page{
  padding:32px 24px 112px;
}
.case-shell{
  width:min(100%,1000px);
  margin:0 auto;
}
.case-header{
  width:min(100%,860px);
  max-width:860px;
  margin:76px auto 0;
}
.case-kicker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:0 0 20px;
  color:hsl(var(--muted-foreground));
  font-size:12px;
  line-height:18px;
}
.case-kicker{
  color:hsl(var(--text-secondary));
  font-weight:550;
}
.case-updated{
  color:hsl(var(--text-tertiary));
  font-variant-numeric:tabular-nums;
}
.case-header h1{
  max-width:840px;
  font-size:var(--font-size-h1);
  line-height:var(--font-line-height-heading);
  letter-spacing:-.025em;
  font-weight:var(--font-weight-heading);
  text-wrap:pretty;
}
.case-excerpt{
  max-width:740px;
  margin:24px 0 0;
  color:hsl(var(--text-secondary));
  font-size:18px;
  line-height:1.55;
  text-wrap:pretty;
}
.case-cover{
  width:min(100%,1000px);
  margin:48px auto 56px;
}
.case-cover .media-block{
  width:100%;
  margin:0;
}
.case-cover img,
.case-cover video{
  display:block;
  width:100%;
  max-height:76vh;
  object-fit:cover;
  border-radius:4px;
}
.case-overview{
  width:min(100%,860px);
  margin:0 auto 72px;
  padding:24px 0;
  border-top:1px solid hsl(var(--border));
  border-bottom:1px solid hsl(var(--border));
}
.case-overview dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px 32px;
  margin:0;
}
.case-overview dl.case-overview-fields-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.case-overview dl.case-overview-fields-4{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.case-overview-item{
  display:flex;
  width:100%;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.case-overview-item dt{
  color:hsl(var(--text-tertiary));
  font-size:11px;
  line-height:16px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.case-overview-item dd{
  margin:0;
  color:hsl(var(--foreground));
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere;
}
.case-overview-item--credits dd{white-space:pre-line}
.case-overview-item--link dd{display:flex}
.case-overview-item--link .case-prototype-trigger{
  min-height:36px;
  padding:0 12px;
  text-decoration:none;
  white-space:nowrap;
}
.case-credit-list{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.case-credit-line{
  display:flex;
  flex-direction:column;
  gap:1px;
}
.case-credit-line small{
  color:hsl(var(--text-tertiary));
  font-size:11px;
  line-height:16px;
}
.case-intro,
.case-body{
  width:min(100%,720px);
  margin:0 auto;
  color:hsl(var(--foreground));
  font-size:16px;
  line-height:1.75;
}
.case-intro>p,
.case-body>p{
  margin:0 0 22px;
}
.case-impact{
  width:min(100%,860px);
  margin:76px auto;
}
.case-impact>h2{
  margin:0 0 24px;
  color:hsl(var(--text-tertiary));
  font-size:13px;
  line-height:20px;
  font-weight:500;
}
.case-impact .metrics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:28px 22px;
  margin:0;
}
.case-impact .metric{
  min-width:0;
  margin:0;
  padding:16px 0 0;
  border:0;
  border-top:1px solid hsl(var(--border));
  border-radius:0;
}
.case-impact .metric strong{
  color:hsl(var(--foreground));
  font-size:clamp(26px,3.2vw,40px);
  line-height:1.05;
  font-weight:550;
  letter-spacing:-.05em;
  overflow-wrap:anywhere;
}
.case-impact .metric span{
  color:hsl(var(--text-secondary));
  font-size:13px;
  line-height:1.5;
}
.case-impact .metric small{
  color:hsl(var(--text-tertiary));
  font-size:11px;
  line-height:1.5;
}
.case-body h2{
  margin:72px 0 18px;
  color:hsl(var(--foreground));
  font-size:var(--font-size-h2);
  line-height:var(--font-line-height-heading);
  font-weight:var(--font-weight-heading);
  letter-spacing:-.02em;
  text-wrap:pretty;
}
.case-body h3{
  margin:42px 0 14px;
  color:hsl(var(--foreground));
  font-size:var(--font-size-h3);
  line-height:var(--font-line-height-heading);
  font-weight:var(--font-weight-heading);
}
.case-body .media-block{
  margin:24px auto;
}
.case-body .media-block img{
  border-radius:calc(var(--radius) / 2);
}
.case-page .media-block:has(> img) > figcaption{
  display:none;
}
.image-lightbox-trigger{
  cursor:zoom-in;
  transition:filter .18s ease,box-shadow .18s ease;
}
.image-lightbox-trigger:hover{
  filter:brightness(.94);
}
.image-lightbox-trigger:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.image-lightbox{
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100%;
  max-height:none;
  margin:0;
  padding:24px;
  border:0;
  overflow:hidden;
  background:transparent;
}
.image-lightbox[open]{
  display:grid;
  place-items:center;
}
.image-lightbox::backdrop{
  background:rgba(12,12,14,.62);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}
.image-lightbox-image{
  display:block;
  width:auto;
  height:auto;
  max-width:min(96vw,1800px);
  max-height:92vh;
  max-height:92dvh;
  object-fit:contain;
  border-radius:calc(var(--radius) / 2);
  box-shadow:0 12px 48px rgba(0,0,0,.24);
}
.image-lightbox-close{
  position:fixed;
  z-index:1;
  top:max(16px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  width:var(--control-height);
  padding:0;
}
.image-lightbox-close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
@media(prefers-reduced-motion:reduce){
  .image-lightbox-trigger{transition:none}
}
.case-body .columns{
  gap:24px;
  margin:32px 0;
}
.case-body .columns .media-block{
  margin:0;
}
.case-body .media-block.wide{
  position:relative;
  left:50%;
  width:min(calc(100vw - 48px),980px);
  max-width:none;
  transform:translateX(-50%);
}
.case-body .gallery{
  position:relative;
  left:50%;
  width:min(calc(100vw - 48px),980px);
  transform:translateX(-50%);
}
.case-body .pullquote{
  margin:56px 0;
}
.case-footer{
  width:min(100%,720px);
  margin:104px auto 0;
  padding-top:24px;
  border-top:1px solid hsl(var(--border));
}
.case-placeholder{
  width:min(100%,1000px);
  margin:48px auto 56px;
}
.case-placeholder .placeholder-window{
  min-height:440px;
  border-radius:4px;
}
.case-placeholder figcaption{
  margin-top:10px;
  color:hsl(var(--text-tertiary));
  font-size:11px;
  line-height:1.5;
}

@media(max-width:700px){
  .case-page{
    padding:28px 20px 72px;
  }
  .case-header{
    width:100%;
    margin:56px auto 0;
  }
  .case-header h1{
    font-size:var(--font-size-h1);
  }
  .case-excerpt{
    margin-top:18px;
    font-size:16px;
    line-height:1.55;
  }
  .case-cover{
    width:100%;
    margin:36px auto 40px;
  }
  .case-cover img,
  .case-cover video{
    max-height:none;
  }
  .case-overview{
    width:100%;
    margin-bottom:56px;
  }
  .case-overview dl{
    gap:22px 20px;
  }
  .case-intro,
  .case-body{
    width:100%;
    font-size:15px;
  }
  .case-impact{
    width:100%;
    margin:60px auto;
  }
  .case-impact .metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px 18px;
  }
  .case-body .media-block.wide,
  .case-body .gallery{
    width:calc(100vw - 40px);
  }
  .case-body .columns{
    gap:20px;
    margin:28px 0;
  }
  .case-placeholder .placeholder-window{
    min-height:280px;
  }
  .case-footer{
    margin-top:72px;
  }
}
@media(max-width:430px){
  .case-page{
    padding-right:16px;
    padding-left:16px;
  }
  .case-kicker-row{
    align-items:flex-start;
    flex-direction:column;
    gap:4px;
  }
  .case-impact .metrics-grid{
    grid-template-columns:1fr;
  }
  .case-body .media-block.wide,
  .case-body .gallery{
    width:calc(100vw - 32px);
  }
  .case-placeholder .placeholder-window{
    min-height:230px;
    padding:20px;
  }
}


/* Case refinements — shared About back control, results and related work. */
.case-page .case-shell>.about-topbar{
  margin:0;
  justify-content:space-between;
}
.case-page .case-header{
  margin-top:72px;
  margin-bottom:44px;
}
.case-page .case-header h1{
  margin:0;
}
.case-impact .metrics-grid{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:24px;
}
.case-impact .metric{
  flex:1 1 calc(33.333% - 16px);
  min-width:180px;
  min-height:132px;
  padding:18px 0 0;
  border:0;
  border-top:1px solid hsl(var(--border));
  border-radius:0;
  gap:8px;
}
.case-impact .metric strong{
  display:block;
  font-size:clamp(30px,3.7vw,42px);
  line-height:1;
  font-weight:600;
  letter-spacing:-.055em;
}
.case-impact .metric-positive strong{color:hsl(var(--positive))}
.case-impact .metric-negative strong{color:hsl(var(--negative))}
.case-impact .metric-neutral strong{color:hsl(var(--foreground))}
.case-impact .metric span{
  max-width:260px;
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.5;
}
.case-impact .metric small{
  color:hsl(var(--text-tertiary));
  font-size:11px;
  line-height:1.45;
}
.case-body .external-embed{
  position:relative;
  left:50%;
  width:min(calc(100vw - 48px),980px);
  max-width:none;
  margin:48px 0;
  padding:0;
  border:0;
  border-radius:0;
  transform:translateX(-50%);
}
.case-body .external-embed iframe{
  display:block;
  width:100%;
  height:min(82vh,900px);
  min-height:560px;
  border:1px solid hsl(var(--border));
  border-radius:8px;
  background:hsl(var(--card));
}
.case-body .external-embed figcaption{
  margin-top:10px;
  color:hsl(var(--text-tertiary));
  font-size:12px;
  line-height:1.5;
}
.case-body .external-embed-fallback{
  display:inline-block;
  margin-top:8px;
  color:hsl(var(--text-tertiary));
  font-size:12px;
}
.case-more-projects{
  margin:112px 0 0;
  padding-top:28px;
  border-top:1px solid hsl(var(--border));
}
.case-more-projects>h2{
  margin:0 0 24px;
  color:hsl(var(--text-tertiary));
  font-size:14px;
  line-height:22px;
  font-weight:500;
  letter-spacing:-.01em;
}
.case-more-projects .list{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.case-more-projects .card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
@media(max-width:700px){
  .case-page .case-header{
    margin-top:52px;
    margin-bottom:36px;
  }
  .case-impact .metrics-grid{
    gap:22px 16px;
  }
  .case-impact .metric{
    flex:1 1 calc(50% - 8px);
    min-width:145px;
    min-height:116px;
  }
  .case-body .external-embed{
    width:calc(100vw - 40px);
  }
  .case-body .external-embed iframe{
    min-height:480px;
    height:72vh;
  }
  .case-more-projects{
    margin-top:80px;
  }
}
@media(max-width:430px){
  .case-impact .metric{
    flex-basis:calc(50% - 8px);
    min-width:132px;
  }
  .case-body .external-embed{
    width:calc(100vw - 32px);
  }
  .case-body .external-embed iframe{
    min-height:420px;
    height:70vh;
  }
}


/* Keep case pages on the same content column as Home and About. */
.case-page .case-shell{
  width:min(568px,100%);
  max-width:568px;
  margin-left:auto;
  margin-right:auto;
}


/* Experiments archive */
.experiments-page{
  min-height:100vh;
  padding:32px 24px 112px;
}
.experiments-wrap{
  width:min(100%,568px);
  max-width:568px;
  margin:0 auto;
}
.experiments-wrap>.about-topbar{
  margin:0;
  justify-content:space-between;
}
.experiments-header{
  margin:72px 0 36px;
}
.experiments-header h1{
  font-size:var(--font-size-h1);
  line-height:var(--font-line-height-heading);
  font-weight:var(--font-weight-heading);
}
.experiments-library .list{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.experiment-card .info p{
  max-width:100%;
  white-space:normal;
  color:hsl(var(--text-tertiary));
  font-size:13px;
  line-height:1.55;
}
.experiments-empty{
  margin:0;
  color:hsl(var(--text-tertiary));
  font-size:14px;
  line-height:1.6;
}
@media(max-width:600px){
  .experiments-page{padding:28px 16px 72px}
  .experiments-header{margin:52px 0 30px}
}


:root[data-theme="dark"] .placeholder-window:before{
  border-color:rgba(220,235,232,.24);
  box-shadow:0 0 0 28px rgba(220,235,232,.05),0 0 0 58px rgba(220,235,232,.035);
}
:root[data-theme="dark"] .placeholder-window:after{
  background:rgba(220,235,232,.06);
  border-color:rgba(220,235,232,.16);
}
:root[data-theme="dark"] .placeholder-window i{background:rgba(220,235,232,.28)}
:root[data-theme="dark"] .case-body .external-embed iframe{color-scheme:dark}


/* Dynamic covers: still image, video, embedded component or interactive comparison. */
.card-interactive-cover{min-width:0}
.card-interactive-cover .card-art{
  display:grid;
  place-items:center;
  height:auto;
  aspect-ratio:1920/869;
}
.card-art-interactive{
  overflow:hidden;
  background:hsl(var(--background));
}
.card-interactive-cover .card-info-link{display:block;color:inherit;text-decoration:none}
.card-interactive-cover .card-info-link:hover h3{color:hsl(var(--foreground))}
.card-art .comparison-frame{
  width:80%;
  height:80%;
  aspect-ratio:1920/869;
  border-radius:12px;
}
.comparison-frame{
  --comparison-position:50%;
  position:relative;
  width:100%;
  aspect-ratio:1920/869;
  overflow:hidden;
  isolation:isolate;
  background:#fff;
  color:#171717;
  border:1px solid hsl(var(--border));
  border-radius:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 8px 22px rgba(0,0,0,.05);
  cursor:pointer;
  touch-action:pan-y;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.comparison-frame:hover{
  transform:translateY(-2px) scale(1.012);
  border-color:hsl(var(--input));
  box-shadow:0 4px 10px rgba(0,0,0,.09),0 14px 30px rgba(0,0,0,.10);
}
.comparison-frame.is-dragging{
  cursor:ew-resize;
  transform:none;
}
.comparison-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#fff;
  pointer-events:none;
}
.comparison-image img{
  display:block;
  width:calc(100% + 24px);
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:left top;
  user-select:none;
  -webkit-user-drag:none;
}
.comparison-image-before{
  z-index:2;
  clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0);
}
.comparison-divider{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  left:var(--comparison-position);
  width:2px;
  transform:translateX(-50%);
  background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.2),0 0 14px rgba(0,0,0,.14);
  pointer-events:none;
}
.comparison-divider-handle{
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:40px;
  height:40px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:50%;
  background:#fff;
  color:#171717;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transform:translate(-50%,-50%);
}
.comparison-divider-handle i{
  display:block;
  width:5px;
  height:5px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
}
.comparison-divider-handle i:first-child{transform:rotate(225deg)}
.comparison-range{
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  width:1px;
  height:1px;
  margin:0;
  opacity:0;
  overflow:hidden;
  clip-path:inset(50%);
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
}
.comparison-frame:has(.comparison-range:focus-visible){
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.case-cover:has(.comparison-frame){
  display:grid;
  place-items:center;
  aspect-ratio:1920/869;
  overflow:hidden;
  background:hsl(var(--background));
  border-radius:10px;
}
.case-cover .comparison-frame{
  width:80%;
  height:80%;
}
.cover-embed{
  position:relative;
  width:100%;
  height:100%;
  min-height:320px;
  overflow:hidden;
  background:#fff;
  color:#171717;
}
.cover-embed iframe{
  display:block;
  width:100%;
  height:100%;
  min-height:inherit;
  border:0;
  background:#fff;
}
.cover-embed>a{
  position:absolute;
  right:12px;
  bottom:12px;
  padding:6px 9px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:4px;
  background:rgba(255,255,255,.94);
  color:#222;
  font-size:11px;
  text-decoration:none;
}
.card-art .cover-embed{min-height:0}
.card-art .cover-embed iframe{min-height:0}
.case-cover .cover-embed{height:min(76vh,760px)}
.case-cover .cover-embed iframe{height:100%}
@media(max-width:700px){
  .comparison-frame{border-radius:9px}
  .comparison-divider{
    width:3px;
    background:linear-gradient(to right,#171717 0 1px,#fff 1px 2px,#171717 2px 3px);
    box-shadow:0 0 0 1px rgba(255,255,255,.8),0 0 0 2px rgba(0,0,0,.28),0 0 10px rgba(0,0,0,.24);
  }
  .comparison-divider-handle{width:34px;height:34px}
  .case-cover .cover-embed{height:65vh;min-height:420px}
}
@media(prefers-reduced-motion:reduce){
  .comparison-frame{transition:none}
  .comparison-frame:hover{transform:none}
}


/* Embedded prototypes inside editorial case content. */
.case-body .external-embed{
  padding:0;
  overflow:hidden;
  background:#fff;
}
.case-body .external-embed iframe{
  display:block;
  width:100%;
  height:min(76vh,760px);
  min-height:620px;
  border:0;
  border-radius:4px;
  background:#fff;
}
.case-body .external-embed figcaption{
  padding:12px 16px 0;
}
.case-body .external-embed .external-embed-fallback{
  display:inline-block;
  margin:12px 16px 16px;
}
@media(max-width:700px){
  .case-body .external-embed iframe{
    height:65vh;
    min-height:520px;
  }
}


/* Case title hierarchy: keep the semantic h1, but use the shared H5 visual scale on every case. */
.case-page:not(.writing-article-page) .case-header h1{
  font-size:var(--font-size-h5);
  line-height:var(--font-line-height-heading);
}
.case-page:not(.writing-article-page) .case-excerpt{
  font-size:16px;
  line-height:1.65;
}

/* Cobalto comparison: make the image frame visible and slightly wider than the case column. */
.case-cover.case-cover-cobalto:has(.comparison-frame){
  position:relative;
  left:50%;
  translate:-50% 0;
  width:min(120%,calc(100vw - 48px));
  max-width:none;
  margin:48px 0 56px;
  border:1px solid hsl(var(--border));
  border-radius:12px;
  background:hsl(var(--media-background));
  box-shadow:inset 0 0 0 1px hsl(var(--border-subtle)),var(--surface-shadow);
}
.case-cover.case-cover-cobalto .comparison-frame{
  width:86%;
  height:84%;
  border:1px solid hsl(var(--border));
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

/* Cobalto feedback: a responsive, theme-aware conversation presented as a framed media block. */
.cobalto-chat-frame{
  position:relative;
  left:50%;
  translate:-50% 0;
  width:min(920px,calc(100vw - 48px));
  margin:72px 0 84px;
  padding:clamp(30px,5vw,64px) clamp(18px,5vw,58px);
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:12px;
  background:hsl(var(--media-background));
  color:hsl(var(--foreground));
  box-shadow:inset 0 0 0 1px hsl(var(--border-subtle)),var(--surface-shadow);
}
.cobalto-chat{
  display:flex;
  flex-direction:column;
  gap:clamp(52px,7vw,94px);
  width:100%;
}
.cobalto-chat-message{
  position:relative;
  display:block;
  width:fit-content;
  max-width:94%;
  min-width:0;
  padding:clamp(16px,2.5vw,30px);
  border:1px solid hsl(var(--border));
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
  font-size:clamp(18px,2.15vw,29px);
  line-height:1.42;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
  opacity:0;
  transform:translateY(12px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 2px 8px rgba(0,0,0,.035);
}
.cobalto-chat-message.is-visible{
  opacity:1;
  transform:translateY(0);
}
.cobalto-chat-message-1{
  align-self:flex-end;
  max-width:94%;
  border-radius:28px 28px 4px 28px;
}
.cobalto-chat-message-2{
  align-self:flex-start;
  max-width:86%;
  margin-left:4%;
  border-radius:28px 28px 28px 4px;
}
.cobalto-chat-message-3{
  align-self:flex-start;
  max-width:76%;
  margin-left:13%;
  border-radius:28px 28px 28px 4px;
}
.cobalto-chat-copy{
  display:block;
  min-height:1.42em;
}
.cobalto-chat-message.is-writing .cobalto-chat-copy::after{
  content:"";
  display:inline-block;
  width:1px;
  height:.95em;
  margin-left:2px;
  vertical-align:-.08em;
  background:currentColor;
  animation:cobalto-chat-caret .9s steps(2,start) infinite;
}
.cobalto-chat-message.is-complete .cobalto-chat-copy::after{display:none}
.cobalto-chat-typing{
  display:none;
  align-items:center;
  gap:6px;
  min-height:1.42em;
}
.cobalto-chat-message.is-typing .cobalto-chat-typing{display:inline-flex}
.cobalto-chat-message.is-typing .cobalto-chat-copy{display:none}
.cobalto-chat-typing i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor;
  opacity:.42;
  animation:cobalto-chat-dot 1s ease-in-out infinite;
}
.cobalto-chat-typing i:nth-child(2){animation-delay:.14s}
.cobalto-chat-typing i:nth-child(3){animation-delay:.28s}
@keyframes cobalto-chat-dot{
  0%,60%,100%{opacity:.34;transform:translateY(0)}
  30%{opacity:.9;transform:translateY(-3px)}
}
@keyframes cobalto-chat-caret{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media(max-width:700px){
  .case-cover.case-cover-cobalto:has(.comparison-frame){
    left:auto;
    translate:none;
    width:100%;
    margin:36px auto 48px;
  }
  .case-cover.case-cover-cobalto .comparison-frame{
    width:88%;
    height:82%;
  }
  .cobalto-chat-frame{
    left:auto;
    translate:none;
    width:100%;
    margin:48px 0 56px;
    padding:26px 16px;
    border-radius:9px;
  }
  .cobalto-chat{gap:42px}
  .cobalto-chat-message{
    max-width:94%;
    padding:16px 18px;
    font-size:clamp(16px,4.4vw,21px);
    border-radius:22px 22px 4px 22px;
  }
  .cobalto-chat-message-2{margin-left:2%;border-radius:22px 22px 22px 4px}
  .cobalto-chat-message-3{margin-left:8%;max-width:84%;border-radius:22px 22px 22px 4px}
}
@media(prefers-reduced-motion:reduce){
  .cobalto-chat-message{opacity:1;transform:none;transition:none}
  .cobalto-chat-typing{display:none!important}
  .cobalto-chat-message.is-writing .cobalto-chat-copy::after{animation:none}
}


/* Cobalto chats: one-column media frame with a consistent 16:9 ratio. */
.cobalto-chat-frame{
  position:relative;
  left:auto;
  translate:none;
  display:flex;
  width:100%;
  max-width:720px;
  aspect-ratio:16 / 9;
  margin:58px auto 68px;
  padding:clamp(12px,3vw,28px);
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:12px;
  background:hsl(var(--media-background));
  color:hsl(var(--foreground));
  box-shadow:inset 0 0 0 1px hsl(var(--border-subtle)),var(--surface-shadow);
}
.cobalto-chat{
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(8px,1.5vw,16px);
  width:100%;
  min-height:0;
  height:100%;
}
.cobalto-chat-message{
  flex:0 0 auto;
  padding:clamp(9px,1.4vw,15px) clamp(13px,1.9vw,21px);
  font-size:clamp(14px,1.45vw,18px);
  line-height:1.35;
  letter-spacing:-.018em;
  opacity:0;
  filter:blur(4px);
  transform:translateY(10px) scale(.985);
  transition:
    opacity .32s ease,
    transform .36s cubic-bezier(.2,.8,.2,1),
    filter .36s ease;
}
.cobalto-chat-message.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0) scale(1);
}
@media(max-width:700px){
  .cobalto-chat-frame{
    width:100%;
    max-width:720px;
    aspect-ratio:16 / 9;
    margin:36px auto 44px;
    padding:10px;
    border-radius:9px;
  }
  .cobalto-chat{gap:6px}
  .cobalto-chat-message{
    max-width:94%;
    padding:7px 10px;
    font-size:clamp(11px,3.1vw,14px);
    line-height:1.28;
    letter-spacing:-.01em;
    border-radius:18px 18px 4px 18px;
  }
  .cobalto-chat-message-2{margin-left:2%;border-radius:18px 18px 18px 4px}
  .cobalto-chat-message-3{margin-left:7%;max-width:84%;border-radius:18px 18px 18px 4px}
}
@media(prefers-reduced-motion:reduce){
  .cobalto-chat-message{opacity:1;filter:none;transform:none;transition:none}
}


/* Chat alignment and pacing refinement — shared by both Cobalto conversations. */
.cobalto-chat{
  justify-content:space-evenly;
  gap:clamp(10px,1.8vw,18px);
}
.cobalto-chat-message{
  align-self:flex-start;
  margin-left:0;
  margin-right:auto;
  text-align:left;
  max-width:94%;
  padding:clamp(9px,1.2vw,14px) clamp(12px,1.6vw,18px);
  font-size:clamp(12.5px,1.05vw,15px);
  line-height:1.42;
  letter-spacing:-.012em;
  transition:
    opacity .52s ease,
    transform .56s cubic-bezier(.2,.8,.2,1),
    filter .56s ease;
}
.cobalto-chat-message-1,
.cobalto-chat-message-2,
.cobalto-chat-message-3{
  align-self:flex-start;
  margin-left:0;
  margin-right:auto;
  max-width:94%;
  border-radius:22px 22px 22px 4px;
}
.cobalto-chat-message.is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0) scale(1);
}
@media(max-width:700px){
  .cobalto-chat{
    justify-content:space-evenly;
    gap:8px;
  }
  .cobalto-chat-message,
  .cobalto-chat-message-1,
  .cobalto-chat-message-2,
  .cobalto-chat-message-3{
    align-self:flex-start;
    margin-left:0;
    margin-right:auto;
    max-width:94%;
    padding:7px 10px;
    font-size:clamp(10px,2.35vw,12px);
    line-height:1.38;
    letter-spacing:-.008em;
    border-radius:17px 17px 17px 4px;
  }
}

/* Embedded prototype: one responsive grid column, centered inside its own rounded frame. */
.case-body .external-embed{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  position:relative;
  left:auto;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:48px 0;
  padding:0;
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:14px;
  background:hsl(var(--card));
  transform:none;
  box-shadow:var(--surface-shadow);
}
.case-body .external-embed iframe{
  display:block;
  grid-column:1 / -1;
  width:100%;
  height:min(78vh,840px);
  min-height:560px;
  border:0;
  border-radius:inherit;
  background:hsl(var(--card));
}
.case-body .external-embed figcaption{
  grid-column:1 / -1;
  margin:0;
  padding:12px 16px 0;
}
.case-body .external-embed .external-embed-fallback{
  grid-column:1 / -1;
  margin:10px 16px 16px;
}
@media(max-width:700px){
  .case-body .external-embed{
    width:100%;
    margin:36px 0;
    border-radius:12px;
  }
  .case-body .external-embed iframe{
    height:70vh;
    min-height:480px;
  }
}


/* Conversations begin in parallel, with a smaller type scale and enough room between bubbles. */
.cobalto-chat-message{
  font-size:clamp(11.5px,.92vw,13.5px);
  line-height:1.42;
}
@media(max-width:700px){
  .cobalto-chat-message,
  .cobalto-chat-message-1,
  .cobalto-chat-message-2,
  .cobalto-chat-message-3{
    font-size:clamp(9.5px,2.15vw,11.5px);
    line-height:1.38;
  }
}




/* Case metadata and prototype launcher. */
.case-overview-with-action{
  display:flex;
  align-items:stretch;
  flex-direction:column;
  gap:24px;
}
.case-overview-with-action dl{
  width:100%;
  min-width:0;
}
.case-overview-actions{
  align-self:flex-start;
}
.case-prototype-trigger{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:44px;
  padding:0 16px;
  border:1px solid hsl(var(--border-strong,var(--border)));
  border-radius:8px;
  background:hsl(var(--card));
  color:hsl(var(--foreground));
  font:inherit;
  font-size:13px;
  line-height:1;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.case-prototype-trigger:hover{
  border-color:hsl(var(--foreground));
  background:hsl(var(--muted));
}
.case-prototype-trigger:active{transform:translateY(1px)}
.case-prototype-trigger svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Fullscreen prototype viewer — the iframe is only mounted visually in this modal. */
.case-prototype-modal{
  position:fixed;
  z-index:3000;
  inset:0;
  display:grid;
  place-items:center;
  padding:3.5vh 3vw;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease,visibility .24s ease;
}
.case-prototype-modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.case-prototype-backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,8,12,.72);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.case-prototype-dialog{
  position:relative;
  z-index:1;
  width:min(94vw,1800px);
  height:93vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 90px rgba(0,0,0,.38);
}
.case-prototype-dialog iframe{
  display:block;
  width:calc(100% + 18px);
  max-width:none;
  height:100%;
  border:0;
  border-radius:inherit;
  background:#fff;
  color-scheme:light;
}
.case-prototype-close{
  position:absolute;
  z-index:3;
  top:16px;
  left:16px;
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid rgba(255,255,255,.3);
  border-radius:50%;
  background:rgba(20,20,22,.84);
  color:#fff;
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background .18s ease,transform .18s ease;
}
.case-prototype-close:hover{
  background:rgba(10,10,12,.98);
  transform:scale(1.04);
}
.case-prototype-close svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.case-prototype-close:focus-visible,
.case-prototype-trigger:focus-visible{
  outline:2px solid hsl(var(--foreground));
  outline-offset:3px;
}
body.prototype-modal-open{overflow:hidden}
@media(max-width:700px){
  .case-overview-with-action{
    align-items:stretch;
    flex-direction:column;
    gap:22px;
  }
  .case-prototype-trigger{
    width:100%;
    min-height:46px;
  }
  .case-prototype-modal{padding:2vh 2vw}
  .case-prototype-dialog{
    width:96vw;
    height:94dvh;
    border-radius:12px;
  }
  .case-prototype-close{
    top:10px;
    left:10px;
    width:38px;
    height:38px;
  }
}
@media(prefers-reduced-motion:reduce){
  .case-prototype-modal,
  .case-prototype-trigger,
  .case-prototype-close{transition:none}
}



/* Cobalto — unified comparison with an expandable 500px viewport. */
.cobalto-nav-comparison{
  position:relative;
  left:50%;
  translate:-50% 0;
  width:min(980px,calc(100vw - 48px));
  margin:64px 0 76px;
  color:hsl(var(--foreground));
  font-family:inherit;
}
.cobalto-nav-labels{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:76px;
  padding:0 28px;
  margin:0 0 11px;
}
.cobalto-nav-label-group{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.cobalto-nav-label{
  color:hsl(var(--foreground));
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:.035em;
}
.cobalto-nav-count{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  color:hsl(var(--text-tertiary));
  font-size:12px;
  line-height:1.3;
  font-weight:400;
  white-space:nowrap;
}
.cobalto-nav-count strong{
  color:hsl(var(--text-secondary));
  font-size:13px;
  line-height:1;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cobalto-nav-count-after strong{color:hsl(var(--foreground))}
.cobalto-nav-frame{
  position:relative;
  width:100%;
  max-height:500px;
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--card));
  box-shadow:var(--surface-shadow);
  transition:max-height .42s cubic-bezier(.2,.8,.2,1);
}
.cobalto-nav-comparison.is-expanded .cobalto-nav-frame{max-height:none}
.cobalto-nav-panels-viewport{
  position:relative;
  width:100%;
  height:auto;
  overflow:visible;
}
.cobalto-nav-comparison-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start;
  column-gap:76px;
  width:100%;
  height:auto;
  padding:22px 28px 24px;
}
.cobalto-nav-comparison-grid:after{
  position:absolute;
  top:20px;
  bottom:20px;
  left:50%;
  width:1px;
  background:hsl(var(--border));
  content:"";
  pointer-events:none;
}
.cobalto-nav-card-mobile-heading,
.cobalto-nav-mobile-divider{display:none}
.cobalto-nav-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-self:start;
  min-width:0;
  height:auto;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  color:hsl(var(--card-foreground));
  box-shadow:none;
}
.cobalto-nav-card-before{
  max-height:460px;
  overflow:hidden;
}
.cobalto-nav-card-before:after{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  height:72px;
  background:linear-gradient(to bottom,hsl(var(--card) / 0),hsl(var(--card) / .96) 82%,hsl(var(--card)));
  content:"";
  pointer-events:none;
}
.cobalto-nav-comparison.is-expanded .cobalto-nav-card-before{
  max-height:none;
  overflow:visible;
}
.cobalto-nav-comparison.is-expanded .cobalto-nav-card-before:after{display:none}
.cobalto-legacy-content{
  display:flex;
  flex-direction:column;
  gap:13px;
  min-height:0;
  padding:0;
}
.cobalto-tree-group{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.cobalto-tree-heading{
  display:block;
  margin:0;
  padding:0 0 2px;
  color:hsl(var(--text-secondary));
  font-family:inherit;
  font-size:12px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:0;
}
.cobalto-tree-items{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0;
  margin-left:2px;
  padding:0 0 0 10px;
  border-left:1px solid hsl(var(--border));
}
.cobalto-tree-link{
  position:relative;
  display:block;
  min-width:0;
  padding:2px 0 2px 1px;
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.3;
  font-weight:400;
  overflow-wrap:anywhere;
}
.cobalto-tree-link:before{
  position:absolute;
  top:50%;
  left:-11px;
  width:8px;
  border-top:1px solid hsl(var(--border));
  content:"";
}
.cobalto-proposed-content{
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  padding:0;
}
.cobalto-proposed-section-heading{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:22px;
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:0;
}
.cobalto-nav-icon{
  display:block;
  flex:0 0 auto;
  width:17px;
  height:17px;
  color:hsl(var(--text-tertiary));
}
.cobalto-proposed-section-heading .cobalto-nav-icon{
  width:16px;
  height:16px;
  color:hsl(var(--text-secondary));
}
.cobalto-quick-list{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.cobalto-quick-item,.cobalto-area-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:39px;
  padding:7px 7px;
  border-bottom:1px solid hsl(var(--border-subtle));
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.3;
  font-weight:500;
}
.cobalto-quick-item .cobalto-nav-icon,.cobalto-area-item .cobalto-nav-icon{
  width:17px;
  height:17px;
  color:hsl(var(--text-tertiary));
}
.cobalto-quick-item span,.cobalto-area-item span{min-width:0}
.cobalto-area-list{
  display:flex;
  flex-direction:column;
  min-width:0;
  margin-top:7px;
  padding-top:0;
  border-top:0;
}
.cobalto-area-item{
  min-height:39px;
  border-bottom:1px solid hsl(var(--border-subtle));
}
.cobalto-area-item:last-child{border-bottom:0}
.cobalto-nav-expand{
  position:absolute;
  z-index:5;
  bottom:10px;
  left:50%;
  translate:-50% 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  padding:5px 11px;
  border:1px solid hsl(var(--border));
  border-radius:999px;
  background:hsl(var(--card) / .94);
  color:hsl(var(--text-secondary));
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--surface-shadow);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.cobalto-nav-expand:hover{
  border-color:hsl(var(--foreground) / .28);
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.cobalto-nav-expand:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.cobalto-nav-expand svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-expand-up{display:none}
.cobalto-nav-comparison.is-expanded .cobalto-expand-down{display:none}
.cobalto-nav-comparison.is-expanded .cobalto-expand-up{display:block}
.cobalto-nav-comparison.is-expanded .cobalto-nav-expand{bottom:10px}
.cobalto-nav-comparison[data-nav-state="pending"] [data-nav-sequence],
.cobalto-nav-comparison[data-nav-state="animating"] [data-nav-sequence]{
  opacity:0;
  filter:blur(3px);
  transform:translateY(8px);
  transition:opacity .38s cubic-bezier(.2,.8,.2,1),transform .44s cubic-bezier(.2,.8,.2,1),filter .44s ease;
}
.cobalto-nav-comparison[data-nav-state="pending"] [data-nav-sequence].is-visible,
.cobalto-nav-comparison[data-nav-state="animating"] [data-nav-sequence].is-visible{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}
@media(max-width:760px){
  .cobalto-nav-frame{max-height:600px}
  .cobalto-nav-comparison{
    left:auto;
    translate:none;
    width:100%;
    margin:48px 0 58px;
  }
  .cobalto-nav-labels{display:none}
  .cobalto-nav-card-mobile-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    min-width:0;
    margin:0 0 9px;
  }
  .cobalto-nav-comparison-grid{
    grid-template-columns:minmax(0,1fr);
    row-gap:0;
    padding:15px 16px 46px;
  }
  .cobalto-nav-comparison-grid:after{display:none}
  .cobalto-nav-card-before{
    max-height:180px;
    padding:0;
    border:0;
  }
  .cobalto-nav-card-before:after{display:none!important}
  .cobalto-nav-mobile-divider{
    display:block;
    width:100%;
    height:1px;
    flex:0 0 1px;
    margin:14px 0 16px;
    background:hsl(var(--border));
  }
  .cobalto-nav-card-after{max-height:none}
  .cobalto-proposed-content{gap:6px}
  .cobalto-proposed-section-heading{min-height:20px}
  .cobalto-quick-item,.cobalto-area-item{
    min-height:33px;
    padding-top:5px;
    padding-bottom:5px;
  }
  .cobalto-area-list{margin-top:4px}
  .cobalto-nav-comparison.is-expanded .cobalto-nav-card-before{
    max-height:none;
    padding:0;
    border:0;
  }
  .cobalto-nav-expand{bottom:8px}
  .cobalto-nav-comparison.is-expanded .cobalto-nav-expand{bottom:8px}
}
@media(max-width:380px){
  .cobalto-nav-labels{padding:0 12px}
  .cobalto-nav-comparison-grid{padding-right:12px;padding-left:12px}
  .cobalto-nav-expand{min-height:30px;padding:4px 10px}
}
@media(prefers-reduced-motion:reduce){
  .cobalto-nav-frame,.cobalto-nav-expand,
  .cobalto-nav-comparison[data-nav-state="pending"] [data-nav-sequence],
  .cobalto-nav-comparison[data-nav-state="animating"] [data-nav-sequence]{
    transition:none;
  }
  .cobalto-nav-comparison[data-nav-state="pending"] [data-nav-sequence],
  .cobalto-nav-comparison[data-nav-state="animating"] [data-nav-sequence]{
    opacity:1;
    filter:none;
    transform:none;
  }
}


/* Cobalto — heuristic sequence using the exact legacy sidebar tree. */
.cobalto-heuristic-figure{
  width:100%;
  max-width:680px;
  height:auto;
  margin:42px auto 60px;
  color:hsl(var(--foreground));
  font-family:inherit;
}
.cobalto-heuristic-frame{
  --cobalto-heuristic-accent:hsl(2 72% 49%);
  --cobalto-heuristic-accent-soft:hsl(2 72% 49% / .12);
  --cobalto-heuristic-accent-line:hsl(2 72% 49% / .62);
  display:flex;
  flex-direction:column;
  width:100%;
  height:auto;
  min-height:0;
  aspect-ratio:auto;
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--card));
  color:hsl(var(--card-foreground));
  box-shadow:var(--surface-shadow);
}
:root[data-theme="dark"] .cobalto-heuristic-frame{
  --cobalto-heuristic-accent:hsl(2 82% 68%);
  --cobalto-heuristic-accent-soft:hsl(2 82% 65% / .16);
  --cobalto-heuristic-accent-line:hsl(2 82% 68% / .72);
}
.cobalto-heuristic-menu{
  position:relative;
  flex:0 0 400px;
  box-sizing:border-box;
  width:100%;
  height:400px;
  min-height:400px;
  max-height:400px;
  padding:17px 19px 16px;
  overflow:hidden;
  background:hsl(var(--card));
}
.cobalto-heuristic-menu:after{
  position:absolute;
  z-index:3;
  right:0;
  bottom:0;
  left:0;
  height:78px;
  opacity:0;
  content:"";
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    hsl(var(--card) / 0) 0%,
    hsl(var(--card) / .72) 48%,
    hsl(var(--card)) 100%
  );
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  transition:opacity .24s ease;
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-heuristic-menu:after,
.cobalto-heuristic-frame[data-heuristic-step="6"] .cobalto-heuristic-menu:after{
  opacity:1;
}
.cobalto-heuristic-menu [hidden]{display:none!important}
.cobalto-heuristic-menu .cobalto-legacy-content{
  gap:13px;
  height:auto;
  min-height:0;
  padding:0;
  opacity:1;
  transform:translateY(0);
  transition:opacity .16s ease,transform .18s cubic-bezier(.2,.8,.2,1);
}
.cobalto-heuristic-menu .cobalto-legacy-content.is-switching{
  opacity:0;
  transform:translateY(3px);
  pointer-events:none;
}
.cobalto-heuristic-menu .cobalto-tree-heading[data-heuristic-target],
.cobalto-heuristic-menu .cobalto-tree-link[data-heuristic-target]{
  position:relative;
  padding-right:36px;
  border-radius:3px;
  transition:color .28s ease,background-color .28s ease,box-shadow .28s ease,padding .28s ease;
}
.cobalto-heuristic-menu .cobalto-tree-items[data-heuristic-target]{
  transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease;
}
.cobalto-heuristic-menu .cobalto-tree-link{
  margin:0;
  overflow-wrap:anywhere;
  transition:color .28s ease,background-color .28s ease,box-shadow .28s ease,padding .28s ease;
}
.cobalto-heuristic-menu .cobalto-tree-label{
  display:inline-block;
  position:relative;
  transition:transform .48s cubic-bezier(.2,.8,.2,1);
}
.cobalto-heuristic-pointer{display:none}
.cobalto-heuristic-question{
  position:absolute;
  z-index:2;
  top:50%;
  right:9px;
  display:block;
  color:var(--cobalto-heuristic-accent);
  font-size:15px;
  line-height:1;
  font-weight:700;
  opacity:0;
  transform:translateY(-50%) scale(.5) rotate(-18deg);
  pointer-events:none;
}
.cobalto-heuristic-dash-stroke{
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  opacity:0;
  pointer-events:none;
}
.cobalto-heuristic-dash-stroke svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}
.cobalto-heuristic-dash-stroke rect{
  fill:none;
  stroke:var(--cobalto-heuristic-accent);
  stroke-width:1.5;
  stroke-dasharray:5 4;
  stroke-dashoffset:0;
  vector-effect:non-scaling-stroke;
}
.cobalto-heuristic-spacing-indicator{
  position:absolute;
  z-index:2;
  top:50%;
  right:9px;
  display:block;
  width:12px;
  height:16px;
  opacity:0;
  transform:translateY(-50%) scale(.65);
  pointer-events:none;
}
.cobalto-heuristic-spacing-indicator:before{
  position:absolute;
  top:3px;
  bottom:3px;
  left:5px;
  width:1.5px;
  background:var(--cobalto-heuristic-accent);
  content:"";
}
.cobalto-heuristic-spacing-indicator:after,
.cobalto-heuristic-spacing-indicator i{
  position:absolute;
  left:2px;
  width:7px;
  height:7px;
  border-top:1.5px solid var(--cobalto-heuristic-accent);
  border-left:1.5px solid var(--cobalto-heuristic-accent);
  content:"";
}
.cobalto-heuristic-spacing-indicator:after{
  top:0;
  transform:rotate(45deg);
}
.cobalto-heuristic-spacing-indicator i{
  bottom:0;
  transform:rotate(225deg);
}

/* Heuristic 2 — two red question marks call out the unclear page names. */
.cobalto-heuristic-menu .is-heuristic-step-2 .cobalto-tree-link[data-heuristic-target~="2"]{
  padding-right:30px;
  color:var(--cobalto-heuristic-accent);
  background:var(--cobalto-heuristic-accent-soft);
  box-shadow:inset 3px 0 0 var(--cobalto-heuristic-accent);
}
.cobalto-heuristic-menu .is-heuristic-step-2 .cobalto-tree-link[data-heuristic-target~="2"] .cobalto-heuristic-question{
  animation:cobalto-heuristic-question-in .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cobalto-heuristic-question-in{
  0%{opacity:0;transform:translateY(-50%) scale(.35) rotate(-20deg)}
  70%{opacity:1;transform:translateY(-50%) scale(1.18) rotate(6deg)}
  100%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
}

/* Heuristic 4 — the complete dropdown tree is traced with animated dashed red strokes. */
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-heading[data-heuristic-target~="4"]{
  padding:5px 8px;
  color:var(--cobalto-heuristic-accent);
  background:var(--cobalto-heuristic-accent-soft);
  box-shadow:inset 3px 0 0 var(--cobalto-heuristic-accent);
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-items[data-heuristic-target~="4"]{
  border-left:2px solid var(--cobalto-heuristic-accent-line);
  background:linear-gradient(90deg,var(--cobalto-heuristic-accent-soft),transparent 72%);
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-link.is-structure-only{
  min-height:15px;
  padding:3px 0 3px 1px;
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-link.is-structure-only .cobalto-tree-label{
  visibility:hidden;
}
.cobalto-heuristic-menu .is-heuristic-step-4 .cobalto-heuristic-dash-stroke{
  opacity:1;
}
.cobalto-heuristic-menu .is-heuristic-step-4 .cobalto-heuristic-dash-stroke rect{
  animation:cobalto-heuristic-dash-flow .85s linear infinite;
}
@keyframes cobalto-heuristic-dash-flow{
  to{stroke-dashoffset:-18}
}

/* Heuristic 5 — red vertical measures make the insufficient gaps explicit. */
.cobalto-heuristic-menu .is-heuristic-step-5 .cobalto-tree-link[data-heuristic-target~="5"]{
  padding-left:7px;
  color:var(--cobalto-heuristic-accent);
  background:var(--cobalto-heuristic-accent-soft);
  box-shadow:inset 3px 0 0 var(--cobalto-heuristic-accent);
}
.cobalto-heuristic-menu .is-heuristic-step-5 .cobalto-tree-link[data-heuristic-target~="5"] .cobalto-heuristic-spacing-indicator{
  animation:cobalto-heuristic-spacing-in .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cobalto-heuristic-spacing-in{
  0%{opacity:0;transform:translateY(-50%) scale(.6)}
  100%{opacity:1;transform:translateY(-50%) scale(1)}
}

/* Heuristic 6 — text shifts right and each line receives a red question-mark icon placeholder. */
.cobalto-heuristic-frame[data-heuristic-step="6"] .cobalto-legacy-content{
  outline:1.5px solid var(--cobalto-heuristic-accent-line);
  outline-offset:4px;
  border-radius:3px;
}
.cobalto-heuristic-frame[data-heuristic-step="6"] .cobalto-tree-heading{
  padding:4px 7px;
  border-radius:3px;
  color:var(--cobalto-heuristic-accent);
  background:var(--cobalto-heuristic-accent-soft);
  box-shadow:inset 3px 0 0 var(--cobalto-heuristic-accent);
}
.cobalto-heuristic-frame[data-heuristic-step="6"] .cobalto-tree-items{
  border-left:2px solid var(--cobalto-heuristic-accent-line);
}
.cobalto-heuristic-frame[data-heuristic-step="6"] .cobalto-tree-link{
  padding-left:6px;
  border-radius:2px;
  color:var(--cobalto-heuristic-accent);
  background:var(--cobalto-heuristic-accent-soft);
}
.cobalto-heuristic-menu .is-heuristic-step-6 .cobalto-tree-label{
  transform:none;
}
.cobalto-heuristic-menu .is-heuristic-step-6 .cobalto-tree-link,
.cobalto-heuristic-menu .is-heuristic-step-6 .cobalto-tree-heading{
  padding-left:24px;
}
.cobalto-heuristic-menu .is-heuristic-step-6 .cobalto-heuristic-question{
  right:auto;
  left:5px;
  opacity:1;
  transform:translateY(-50%) scale(1);
  animation:cobalto-heuristic-icon-placeholder .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cobalto-heuristic-icon-placeholder{
  0%{opacity:0;transform:translateY(-50%) scale(.4) rotate(-15deg)}
  70%{opacity:1;transform:translateY(-50%) scale(1.15) rotate(5deg)}
  100%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
}

.cobalto-heuristic-assessment{
  display:block;
  width:100%;
  height:auto;
  min-height:0;
  padding:16px 19px 12px;
  border-top:1px solid hsl(var(--border));
  background:hsl(var(--card));
}
.cobalto-heuristic-assessment-panels{
  display:grid;
  width:100%;
  height:auto;
  min-height:0;
}
.cobalto-heuristic-assessment-panel{
  grid-area:1 / 1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:0;
  height:auto;
  opacity:0;
  filter:blur(2px);
  transform:translateY(6px);
  transition:opacity .34s ease,filter .34s ease,transform .38s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.cobalto-heuristic-assessment-panel.is-active{
  opacity:1;
  filter:blur(0);
  transform:translateY(0);
}
.cobalto-heuristic-assessment-label{
  margin:0 0 2px;
  color:var(--cobalto-heuristic-accent);
  font-size:10px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.cobalto-heuristic-assessment-panel h4{
  margin:0;
  color:hsl(var(--foreground));
  font-size:14px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.01em;
}
.cobalto-heuristic-assessment-panel p{
  margin:0;
  color:hsl(var(--text-secondary));
  font-size:13px;
  line-height:1.55;
  font-weight:400;
}

/* Four story-style progress segments use the same four-second cadence as the loop. */
.cobalto-heuristic-progress{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:0 19px 14px;
  background:hsl(var(--card));
}
.cobalto-heuristic-progress-segment{
  position:relative;
  display:block;
  flex:1 1 0;
  min-width:0;
  height:3px;
  overflow:hidden;
  border-radius:999px;
  background:hsl(var(--border));
}
.cobalto-heuristic-progress-segment:after{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--cobalto-heuristic-accent);
  content:"";
  transform:scaleX(0);
  transform-origin:left center;
}
.cobalto-heuristic-progress-segment.is-complete:after{
  transform:scaleX(1);
}
.cobalto-heuristic-progress-segment.is-active:after{
  animation:cobalto-heuristic-progress 4s linear both;
}
.cobalto-heuristic-progress.is-paused .cobalto-heuristic-progress-segment.is-active:after{
  animation-play-state:paused;
}
.cobalto-heuristic-progress.is-static .cobalto-heuristic-progress-segment.is-active:after{
  animation:none;
  transform:scaleX(1);
}
@keyframes cobalto-heuristic-progress{
  to{transform:scaleX(1)}
}

@media(max-width:700px){
  .cobalto-heuristic-figure{margin:34px auto 48px}
  .cobalto-heuristic-menu{padding:14px 13px 13px}
  .cobalto-heuristic-menu .cobalto-legacy-content{gap:12px}
  .cobalto-heuristic-menu .cobalto-tree-link{font-size:12px;line-height:1.35}
  .cobalto-heuristic-assessment{padding:14px 13px 10px}
  .cobalto-heuristic-assessment-panel h4{font-size:13px}
  .cobalto-heuristic-assessment-panel p{font-size:12px;line-height:1.5}
  .cobalto-heuristic-progress{padding:0 13px 12px}
}
@media(max-width:380px){
  .cobalto-heuristic-menu{padding:12px 11px}
  .cobalto-heuristic-menu .cobalto-tree-link[data-heuristic-target],
  .cobalto-heuristic-menu .cobalto-tree-heading[data-heuristic-target]{padding-right:30px}
  .cobalto-heuristic-pointer{right:5px;width:19px}
  .cobalto-heuristic-progress{gap:5px}
}
@media(prefers-reduced-motion:reduce){
  .cobalto-heuristic-menu,
  .cobalto-heuristic-menu .cobalto-legacy-content,
  .cobalto-heuristic-pointer,
  .cobalto-heuristic-question,
  .cobalto-heuristic-dash-stroke rect,
  .cobalto-heuristic-spacing-indicator,
  .cobalto-heuristic-assessment-panel,
  .cobalto-heuristic-menu .cobalto-tree-heading,
  .cobalto-heuristic-menu .cobalto-tree-link,
  .cobalto-heuristic-menu .cobalto-tree-items,
  .cobalto-heuristic-menu .cobalto-tree-label,
  .cobalto-heuristic-progress-segment:after{
    transition:none!important;
    animation:none!important;
  }
  .cobalto-heuristic-menu .is-heuristic-step-2 .cobalto-heuristic-question,
  .cobalto-heuristic-menu .is-heuristic-step-5 .cobalto-heuristic-spacing-indicator,
  .cobalto-heuristic-menu .is-heuristic-step-6 .cobalto-heuristic-question{
    opacity:1;
    transform:translateY(-50%) scale(1);
  }
  .cobalto-heuristic-progress-segment.is-active:after{
    transform:scaleX(1);
  }
}


/* Cobalto heuristic refinements — emphasize only the relevant navigation structure. */

/* Stage 2: leave the labels and rows neutral; the two red question marks carry the signal. */
.cobalto-heuristic-menu .is-heuristic-step-2 .cobalto-tree-link[data-heuristic-target~="2"]{
  padding-left:1px;
  padding-right:36px;
  color:hsl(var(--text-secondary));
  background:transparent;
  box-shadow:none;
}

/* Stage 4: animate the tree spine and its branch connectors, not the text rows. */
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-heading[data-heuristic-target~="4"]{
  padding:0 0 2px;
  color:hsl(var(--text-secondary));
  background:transparent;
  box-shadow:none;
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-items[data-heuristic-target~="4"]{
  border-left:0;
  background-image:repeating-linear-gradient(
    to bottom,
    var(--cobalto-heuristic-accent) 0 4px,
    transparent 4px 8px
  );
  background-size:1.5px 8px;
  background-position:left top;
  background-repeat:repeat-y;
  animation:cobalto-heuristic-tree-axis-flow .8s linear infinite;
}
.cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-link.is-structure-only:before{
  left:-10px;
  width:10px;
  border-top:0;
  background-image:repeating-linear-gradient(
    to right,
    var(--cobalto-heuristic-accent) 0 4px,
    transparent 4px 8px
  );
  background-size:8px 1.5px;
  background-position:left center;
  background-repeat:repeat-x;
  animation:cobalto-heuristic-tree-branch-flow .8s linear infinite;
}
@keyframes cobalto-heuristic-tree-axis-flow{
  to{background-position:left -8px}
}
@keyframes cobalto-heuristic-tree-branch-flow{
  to{background-position:-8px center}
}

/* Stage 5: a static red bracket spans the distance between consecutive page labels. */
.cobalto-heuristic-menu .is-heuristic-step-5 .cobalto-tree-link[data-heuristic-target~="5"]{
  padding-left:1px;
  padding-right:28px;
  color:hsl(var(--text-secondary));
  background:transparent;
  box-shadow:none;
}
.cobalto-heuristic-spacing-bracket{
  position:absolute;
  z-index:2;
  top:-50%;
  right:8px;
  display:block;
  width:10px;
  height:100%;
  opacity:0;
  pointer-events:none;
}
.cobalto-heuristic-spacing-bracket:before{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:1.5px;
  background:var(--cobalto-heuristic-accent);
  content:"";
}
.cobalto-heuristic-spacing-bracket:after,
.cobalto-heuristic-spacing-bracket i{
  position:absolute;
  right:0;
  display:block;
  width:9px;
  height:1.5px;
  background:var(--cobalto-heuristic-accent);
  content:"";
}
.cobalto-heuristic-spacing-bracket:after{top:0}
.cobalto-heuristic-spacing-bracket i{bottom:0}
.cobalto-heuristic-menu .is-heuristic-step-5 [data-heuristic-spacing="2"] .cobalto-heuristic-spacing-bracket,
.cobalto-heuristic-menu .is-heuristic-step-5 [data-heuristic-spacing="3"] .cobalto-heuristic-spacing-bracket{
  opacity:1;
}

/* The dashed tree and spacing brackets become static under reduced-motion preferences. */
@media(prefers-reduced-motion:reduce){
  .cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-items[data-heuristic-target~="4"],
  .cobalto-heuristic-frame[data-heuristic-step="4"] .cobalto-tree-link.is-structure-only:before{
    animation:none!important;
  }
  .cobalto-heuristic-menu .is-heuristic-step-5 [data-heuristic-spacing="2"] .cobalto-heuristic-spacing-bracket,
  .cobalto-heuristic-menu .is-heuristic-step-5 [data-heuristic-spacing="3"] .cobalto-heuristic-spacing-bracket{
    opacity:1;
  }
}


/* Cobalto — quick-access sidebar with nested navigation surfaces. */
.cobalto-nav-presentation{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:5 / 4;
  min-height:0;
  margin:48px auto 64px;
  padding:clamp(24px,5vw,48px);
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--card));
  box-shadow:var(--surface-shadow);
}
.cobalto-nav-presentation-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
}
.cobalto-nav-presentation .cobalto-proposed-content{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(100%,380px);
  margin-inline:auto;
}
.cobalto-nav-presentation .cobalto-quick-section{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  overflow:hidden;
  border:1px solid hsl(var(--border-subtle));
  border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--muted));
}
.cobalto-nav-presentation .cobalto-proposed-section-heading{
  display:flex;
  align-items:center;
  min-height:28px;
  padding:0 7px 3px;
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.cobalto-nav-presentation .cobalto-quick-list{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:4px;
  overflow:hidden;
  border:1px solid hsl(var(--border) / .72);
  border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));
}
.cobalto-nav-presentation .cobalto-quick-item,
.cobalto-nav-presentation .cobalto-area-item{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:8px 9px;
  border:0;
  border-radius:calc(var(--radius) - 5px);
  color:hsl(var(--text-secondary));
  font-size:13px;
  line-height:1.35;
  font-weight:500;
  cursor:default;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.cobalto-nav-presentation .cobalto-quick-item + .cobalto-quick-item{
  border-top:1px solid hsl(var(--border-subtle));
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.cobalto-nav-presentation .cobalto-quick-item .cobalto-nav-icon,
.cobalto-nav-presentation .cobalto-area-item .cobalto-nav-icon{
  color:hsl(var(--text-tertiary));
  transition:color .16s ease;
}
.cobalto-nav-presentation .cobalto-area-list{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  margin:0;
  padding:0;
}
.cobalto-nav-presentation .cobalto-area-item{
  min-height:42px;
  padding:8px 12px;
  border:1px solid hsl(var(--border-subtle));
  background:hsl(var(--secondary));
}
.cobalto-nav-presentation .cobalto-quick-item:hover,
.cobalto-nav-presentation .cobalto-area-item:hover{
  background:hsl(var(--foreground) / .07);
  color:hsl(var(--foreground));
  transform:translateX(2px);
}
.cobalto-nav-presentation .cobalto-quick-item:hover .cobalto-nav-icon,
.cobalto-nav-presentation .cobalto-area-item:hover .cobalto-nav-icon{
  color:hsl(var(--foreground));
}
.cobalto-nav-presentation .cobalto-quick-item:focus-visible,
.cobalto-nav-presentation .cobalto-area-item:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:-2px;
}
@media(hover:none){
  .cobalto-nav-presentation .cobalto-quick-item:hover,
  .cobalto-nav-presentation .cobalto-area-item:hover{
    transform:none;
  }
}
@media(max-width:600px){
  .cobalto-nav-presentation{
    aspect-ratio:auto;
    min-height:440px;
    margin:36px auto 48px;
    padding:22px;
  }
  .cobalto-nav-presentation .cobalto-proposed-content{
    width:min(100%,380px);
  }
}
@media(prefers-reduced-motion:reduce){
  .cobalto-nav-presentation .cobalto-quick-item,
  .cobalto-nav-presentation .cobalto-area-item,
  .cobalto-nav-presentation .cobalto-nav-icon{
    transition:none;
  }
}


/* Cobalto — animated accessibility toolbar. */
.cobalto-accessibility-figure{
  position:relative;
  display:block;
  width:100%;
  max-width:980px;
  margin:42px auto 60px;
}
.cobalto-accessibility-frame{
  --background:0 0% 97.65%;
  --foreground:0 0% 9%;
  --card:0 0% 100%;
  --secondary:0 0% 99%;
  --secondary-foreground:0 0% 30%;
  --muted:0 0% 94%;
  --border:0 0% 87%;
  --primary:0 0% 10%;
  --primary-foreground:0 0% 98%;
  --text-secondary:0 0% 37%;
  --accessibility-blue:#225da5;
  position:relative;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  box-shadow:var(--surface-shadow);
  transition:background-color .48s ease,color .36s ease,border-color .36s ease;
}
.cobalto-accessibility-frame[data-accessibility-theme="dark"]{
  --background:0 0% 11.76%;
  --foreground:0 0% 93%;
  --card:0 0% 10%;
  --secondary:0 0% 14%;
  --secondary-foreground:0 0% 86%;
  --muted:0 0% 18%;
  --border:0 0% 25%;
  --primary:0 0% 91%;
  --primary-foreground:0 0% 10%;
  --text-secondary:0 0% 76%;
  --accessibility-blue:#86b8ff;
}
.cobalto-accessibility-frame[data-accessibility-contrast="true"]{
  --border:0 0% 48%;
  --text-secondary:0 0% 12%;
  --accessibility-blue:#0645a6;
}
.cobalto-accessibility-frame[data-accessibility-theme="dark"][data-accessibility-contrast="true"]{
  --border:0 0% 70%;
  --text-secondary:0 0% 96%;
  --accessibility-blue:#a9ceff;
}
.cobalto-accessibility-toolbar{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  max-width:calc(100% - 28px);
  padding:10px;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) + 2px);
  background:hsl(var(--card));
  box-shadow:var(--surface-shadow);
  transform:scale(var(--accessibility-toolbar-scale,1));
  transform-origin:center;
  transition:background-color .36s ease,border-color .36s ease,box-shadow .36s ease,transform .32s cubic-bezier(.2,.8,.2,1);
}
.cobalto-accessibility-control{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:40px;
  height:40px;
  padding:0;
  border:1px solid hsl(var(--border));
  border-radius:7px;
  background:hsl(var(--secondary));
  color:hsl(var(--secondary-foreground));
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cobalto-accessibility-control:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.cobalto-accessibility-text-control{
  font-size:calc(15px * var(--accessibility-font-scale,1));
  letter-spacing:-.045em;
}
.cobalto-accessibility-control.is-selected{
  border-color:hsl(var(--primary));
  background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.cobalto-accessibility-icon-control svg{
  display:block;
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),fill .24s ease,filter .24s ease;
}
.cobalto-accessibility-support{
  gap:8px;
  width:auto;
  min-width:0;
  margin-left:8px;
  padding:0 13px;
  border-color:var(--accessibility-blue);
  border-radius:6px;
  background:transparent;
  color:var(--accessibility-blue);
  font-size:calc(13px * var(--accessibility-font-scale,1));
  font-weight:550;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.cobalto-accessibility-support svg{
  display:block;
  flex:0 0 auto;
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-accessibility-control:hover,
.cobalto-accessibility-control.is-demo-hovered{
  border-color:hsl(var(--text-secondary) / .55);
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.cobalto-accessibility-control.is-selected:hover,
.cobalto-accessibility-control.is-selected.is-demo-hovered{
  border-color:hsl(var(--primary));
  background:hsl(var(--primary));
  color:hsl(var(--primary-foreground));
}
.cobalto-accessibility-support:hover,
.cobalto-accessibility-support.is-demo-hovered{
  border-color:var(--accessibility-blue);
  background:hsl(var(--accessibility-blue) / .08);
  color:var(--accessibility-blue);
}
.cobalto-accessibility-text-control[data-accessibility-control="smaller"].is-demo-hovered span{
  transform:translateY(1px) scale(.9);
}
.cobalto-accessibility-text-control[data-accessibility-control="default"].is-demo-hovered span{
  transform:scale(1.08);
}
.cobalto-accessibility-text-control[data-accessibility-control="larger"].is-demo-hovered span{
  animation:cobalto-accessibility-letter-pulse .52s ease-in-out infinite alternate;
}
.cobalto-accessibility-text-control span{display:block;transition:transform .2s ease}
.cobalto-accessibility-icon-control[data-accessibility-control="contrast"].is-demo-hovered svg{
  transform:rotate(16deg) scale(1.12);
  filter:drop-shadow(0 0 3px hsl(var(--accessibility-blue) / .3));
}
.cobalto-accessibility-icon-control[data-accessibility-control="theme"].is-demo-hovered svg{
  transform:rotate(-22deg) scale(1.12);
  fill:hsl(var(--accessibility-blue) / .14);
}
.cobalto-accessibility-frame[data-accessibility-theme="dark"] .cobalto-accessibility-icon-control[data-accessibility-control="theme"] svg{
  fill:hsl(var(--accessibility-blue) / .14);
}
.cobalto-accessibility-support.is-demo-hovered svg{
  animation:cobalto-accessibility-headset-rock .48s ease-in-out infinite alternate;
}
.cobalto-accessibility-control.is-demo-clicked{
  transform:scale(.94);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
}
.cobalto-accessibility-support.is-demo-clicked{
  background:hsl(var(--accessibility-blue) / .09);
}
.cobalto-accessibility-status{
  position:absolute;
  right:16px;
  bottom:13px;
  left:16px;
  display:block;
  color:hsl(var(--text-secondary));
  font-size:11px;
  line-height:1.3;
  text-align:center;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .2s ease,transform .2s ease;
  pointer-events:none;
}
.cobalto-accessibility-status.is-visible{
  opacity:1;
  transform:translateY(0);
}
.cobalto-accessibility-demo-cursor.portfolio-cursor{
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  width:31px;
  height:31px;
  display:block;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-40px,-40px,0);
  transition:opacity .16s ease;
  will-change:transform;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
.cobalto-accessibility-demo-cursor.is-visible{opacity:1}
.cobalto-accessibility-demo-cursor svg{
  display:block;
  width:31px;
  height:31px;
  overflow:visible;
}
.cobalto-accessibility-demo-cursor.is-pressed{filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}
@keyframes cobalto-accessibility-letter-pulse{
  from{transform:scale(1)}
  to{transform:scale(1.18)}
}
@keyframes cobalto-accessibility-headset-rock{
  0%{transform:rotate(-8deg)}
  100%{transform:rotate(8deg)}
}
@media(max-width:540px) and (prefers-reduced-motion:no-preference){
  .cobalto-accessibility-demo-cursor.portfolio-cursor{display:block!important}
}
@media(max-width:540px){
  .cobalto-accessibility-figure{margin:32px auto 46px}
  .cobalto-accessibility-frame{aspect-ratio:4 / 3}
  .cobalto-accessibility-toolbar{
    display:grid;
    grid-template-columns:repeat(5,40px);
    gap:8px;
    width:max-content;
    max-width:calc(100% - 24px);
    padding:9px;
  }
  .cobalto-accessibility-control{
    width:40px;
    height:40px;
    border-radius:7px;
  }
  .cobalto-accessibility-text-control{font-size:calc(15px * var(--accessibility-font-scale,1))}
  .cobalto-accessibility-icon-control svg{width:19px;height:19px}
  .cobalto-accessibility-support{
    grid-column:1 / -1;
    justify-content:center;
    gap:7px;
    width:auto;
    min-width:0;
    min-height:40px;
    margin:0;
    padding:0 10px;
    font-size:calc(12px * var(--accessibility-font-scale,1));
  }
  .cobalto-accessibility-support svg{width:17px;height:17px}
}
@media(max-width:360px){
  .cobalto-accessibility-toolbar{grid-template-columns:repeat(5,38px);gap:6px;padding:8px}
  .cobalto-accessibility-control{width:38px;height:38px}
  .cobalto-accessibility-support{min-height:40px;padding:0 8px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .cobalto-accessibility-frame,
  .cobalto-accessibility-toolbar,
  .cobalto-accessibility-control,
  .cobalto-accessibility-control span,
  .cobalto-accessibility-icon-control svg,
  .cobalto-accessibility-status{
    transition:none!important;
    animation:none!important;
  }
  .cobalto-accessibility-demo-cursor{display:none!important}
}


/* Cobalto — emotional sidebar customization controls. */
.cobalto-emotion-sidebar-figure{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  box-sizing:border-box;
  width:100%;
  max-width:980px;
  aspect-ratio:5 / 4;
  min-height:0;
  margin:48px auto 64px;
  padding:clamp(24px,5vw,48px);
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--card));
  box-shadow:var(--surface-shadow);
}
.cobalto-emotion-sidebar-stage{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  place-items:center;
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
}
.cobalto-emotion-sidebar{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:11px;
  box-sizing:border-box;
  width:min(100%,420px);
  min-width:0;
  padding:15px;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 1px);
  background:hsl(var(--card));
  box-shadow:var(--surface-shadow);
  color:hsl(var(--foreground));
  transition:width .2s ease,background-color .2s ease,border-color .2s ease;
}
.cobalto-emotion-sidebar-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
.cobalto-emotion-sidebar-collapse,
.cobalto-emotion-sidebar-edit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  border:1px solid transparent;
  border-radius:calc(var(--radius) - 4px);
  background:transparent;
  color:hsl(var(--text-secondary));
  font-family:inherit;
  font-size:12px;
  line-height:1;
  font-weight:550;
  cursor:pointer;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
.cobalto-emotion-sidebar-collapse{
  justify-content:flex-start;
  padding:5px 8px;
}
.cobalto-emotion-sidebar-edit{
  flex:0 0 32px;
  width:32px;
  padding:6px;
}
.cobalto-emotion-sidebar-collapse:hover,
.cobalto-emotion-sidebar-edit:hover{
  border-color:hsl(var(--border));
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.cobalto-emotion-sidebar-edit[aria-pressed="true"]{
  border-color:hsl(var(--foreground) / .18);
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.cobalto-emotion-sidebar-collapse:focus-visible,
.cobalto-emotion-sidebar-edit:focus-visible,
.cobalto-emotion-sidebar-reorder button:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:2px;
}
.cobalto-emotion-sidebar-collapse svg{
  display:block;
  flex:0 0 auto;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-emotion-sidebar-edit svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-emotion-sidebar-content{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.cobalto-emotion-sidebar-search{
  display:flex;
  align-items:center;
  gap:9px;
  box-sizing:border-box;
  width:100%;
  min-height:39px;
  padding:0 11px;
  border:1px solid hsl(var(--border));
  border-radius:calc(var(--radius) - 3px);
  background:hsl(var(--muted));
  color:hsl(var(--text-tertiary));
  transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease;
}
.cobalto-emotion-sidebar-search:focus-within{
  border-color:hsl(var(--ring));
  background:hsl(var(--card));
  box-shadow:0 0 0 2px hsl(var(--ring) / .12);
}
.cobalto-emotion-sidebar-search svg{
  display:block;
  flex:0 0 auto;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-emotion-sidebar-search input{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:36px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:hsl(var(--foreground));
  font-family:inherit;
  font-size:12px;
  line-height:1.3;
}
.cobalto-emotion-sidebar-search input::placeholder{
  color:hsl(var(--text-tertiary));
  opacity:1;
}
.cobalto-emotion-sidebar .cobalto-quick-section{
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  padding:10px;
  overflow:hidden;
  border:1px solid hsl(var(--border-subtle));
  border-radius:calc(var(--radius) - 2px);
  background:hsl(var(--muted));
}
.cobalto-emotion-sidebar .cobalto-proposed-section-heading{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:24px;
  padding:0 5px 2px;
  color:hsl(var(--text-secondary));
  font-size:11px;
  line-height:1.3;
  font-weight:650;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.cobalto-emotion-sidebar .cobalto-proposed-section-heading .cobalto-nav-icon{
  width:15px;
  height:15px;
  color:hsl(var(--text-secondary));
}
.cobalto-emotion-sidebar .cobalto-quick-list,
.cobalto-emotion-sidebar .cobalto-area-list{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  margin:0;
  padding:3px;
  border:1px solid hsl(var(--border) / .72);
  border-radius:calc(var(--radius) - 4px);
  background:hsl(var(--card));
}
.cobalto-emotion-sidebar .cobalto-area-list{
  gap:3px;
  padding:0;
  border:0;
  background:transparent;
}
.cobalto-emotion-sidebar .cobalto-emotion-sidebar-item{
  display:flex;
  align-items:center;
  gap:9px;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:35px;
  padding:5px 7px;
  border:0;
  border-radius:calc(var(--radius) - 5px);
  color:hsl(var(--text-secondary));
  font-size:12px;
  line-height:1.35;
  font-weight:500;
  transition:background-color .16s ease,color .16s ease;
}
.cobalto-emotion-sidebar .cobalto-quick-item + .cobalto-quick-item{
  border-top:1px solid hsl(var(--border-subtle));
  border-top-left-radius:0;
  border-top-right-radius:0;
}
.cobalto-emotion-sidebar .cobalto-area-item{
  min-height:36px;
  padding:6px 9px;
  border:1px solid hsl(var(--border-subtle));
  background:hsl(var(--secondary));
}
.cobalto-emotion-sidebar .cobalto-emotion-sidebar-item > .cobalto-nav-icon{
  display:block;
  flex:0 0 auto;
  width:16px;
  height:16px;
  color:hsl(var(--text-tertiary));
}
.cobalto-emotion-sidebar-label{
  display:block;
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cobalto-emotion-sidebar .cobalto-emotion-sidebar-item[hidden],
.cobalto-emotion-sidebar [data-sidebar-group][hidden]{
  display:none!important;
}
.cobalto-emotion-sidebar-reorder{
  display:none;
  flex:0 0 auto;
  align-items:center;
  gap:2px;
  margin-left:auto;
}
.cobalto-emotion-sidebar-reorder button{
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  padding:4px;
  border:1px solid transparent;
  border-radius:calc(var(--radius) - 5px);
  background:transparent;
  color:hsl(var(--text-secondary));
  cursor:pointer;
  transition:background-color .14s ease,border-color .14s ease,color .14s ease,opacity .14s ease;
}
.cobalto-emotion-sidebar-reorder button:hover:not(:disabled){
  border-color:hsl(var(--border));
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.cobalto-emotion-sidebar-reorder button:disabled{
  opacity:.28;
  cursor:not-allowed;
}
.cobalto-emotion-sidebar-reorder svg{
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cobalto-emotion-sidebar.is-editing .cobalto-emotion-sidebar-reorder{
  display:inline-flex;
}
.cobalto-emotion-sidebar.is-editing .cobalto-emotion-sidebar-item{
  padding-right:4px;
}
.cobalto-emotion-sidebar.is-editing .cobalto-emotion-sidebar-reorder button:not(:disabled){
  background:hsl(var(--muted) / .7);
}
.cobalto-emotion-sidebar.is-collapsed{
  width:min(100%,260px);
}
.cobalto-emotion-sidebar.is-collapsed .cobalto-emotion-sidebar-content{
  display:none;
}
.cobalto-emotion-sidebar-status{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
@media(hover:hover){
  .cobalto-emotion-sidebar .cobalto-emotion-sidebar-item:hover{
    background:hsl(var(--foreground) / .055);
    color:hsl(var(--foreground));
  }
  .cobalto-emotion-sidebar .cobalto-emotion-sidebar-item:hover > .cobalto-nav-icon{
    color:hsl(var(--foreground));
  }
}
@media(max-width:600px){
  .cobalto-emotion-sidebar-figure{
    aspect-ratio:auto;
    min-height:460px;
    margin:36px auto 48px;
    padding:22px;
  }
  .cobalto-emotion-sidebar-stage{
    height:auto;
  }
  .cobalto-emotion-sidebar{
    width:100%;
    padding:13px;
  }
}
@media(prefers-reduced-motion:reduce){
  .cobalto-emotion-sidebar,
  .cobalto-emotion-sidebar-collapse,
  .cobalto-emotion-sidebar-edit,
  .cobalto-emotion-sidebar-search,
  .cobalto-emotion-sidebar-item,
  .cobalto-emotion-sidebar-reorder button{
    transition:none;
  }
}

/* Cobalto Agent Swarm: centered 1fr media frame using the shared case-frame language. */
.case-body .media-block.cobalto-agent-swarm-frame{
  width:min(100%,720px);
  max-width:720px;
  margin:48px auto 56px;
  padding:12px;
  overflow:hidden;
  border:1px solid hsl(var(--border));
  border-radius:12px;
  background:hsl(var(--media-background));
  box-shadow:inset 0 0 0 1px hsl(var(--border-subtle)),var(--surface-shadow);
}
.case-body .cobalto-agent-swarm-frame video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  max-height:none;
  object-fit:contain;
  border-radius:6px;
  background:hsl(var(--media-background));
  cursor:pointer;
}
.case-body .cobalto-agent-swarm-frame video:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.case-body .cobalto-agent-swarm-frame figcaption{
  padding:0 4px;
  text-align:center;
}
@media(max-width:600px){
  .case-body .media-block.cobalto-agent-swarm-frame{
    width:100%;
    margin:36px auto 44px;
    padding:8px;
    border-radius:10px;
  }
}


/* Case cards — let video covers define their own height. */
.card-art:has(video){
  height:auto;
  aspect-ratio:auto;
}
.card-art .media-block:has(video){
  height:auto;
}
.card-art video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}


/* Portfolio case refinements — external project link and compact result metrics. */
.case-overview-actions{
  display:flex;
  flex:0 0 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.case-overview-actions .case-prototype-trigger{
  text-decoration:none;
}
.case-impact .metrics-grid{
  align-items:flex-start;
}
.case-impact .metric{
  height:fit-content;
  min-height:0;
  align-self:flex-start;
}
.case-impact .metric strong{
  color:hsl(var(--positive));
  font-size:var(--font-size-h5);
  line-height:var(--font-line-height-heading);
}
@media(max-width:700px){
  .case-overview-with-action{
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
  }
  .case-overview-actions{
    width:100%;
  }
}

/* Remove apenas a linha divisória acima de Resultados no case PLENO. */
.case-impact-pleno{border-top:0;padding-top:0}


/* Expandable dossier text — shared portfolio frame and theme tokens. */
.expandable-text-frame{
  position:relative;
  width:100%;
  max-height:500px;
  margin:36px 0 48px;
  overflow:hidden;
  box-sizing:border-box;
  border:1px solid hsl(var(--border));
  border-radius:var(--radius);
  background:hsl(var(--card));
  color:hsl(var(--card-foreground));
  box-shadow:var(--surface-shadow);
  transition:max-height .42s cubic-bezier(.2,.8,.2,1);
}
.expandable-text-content{
  padding:24px 28px 82px;
}
.expandable-text-content > :first-child{margin-top:0}
.expandable-text-content > :last-child{margin-bottom:0}
.expandable-text-frame:not(.is-expanded):after{
  position:absolute;
  z-index:1;
  right:0;
  bottom:0;
  left:0;
  height:116px;
  background:linear-gradient(to bottom,hsl(var(--card) / 0),hsl(var(--card) / .96) 76%,hsl(var(--card)));
  content:"";
  pointer-events:none;
}
.expandable-text-footer{
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  justify-content:center;
  padding:12px 16px 15px;
  background:linear-gradient(to bottom,hsl(var(--card) / 0),hsl(var(--card) / .88) 38%,hsl(var(--card)));
}
.expandable-text-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  padding:5px 11px;
  border:1px solid hsl(var(--border));
  border-radius:999px;
  background:hsl(var(--card) / .94);
  color:hsl(var(--text-secondary));
  font-family:inherit;
  font-size:11px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  box-shadow:var(--surface-shadow);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.expandable-text-toggle:hover{
  border-color:hsl(var(--foreground) / .28);
  background:hsl(var(--muted));
  color:hsl(var(--foreground));
}
.expandable-text-toggle:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
}
.expandable-text-toggle svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.expandable-text-chevron-up{display:none}
.expandable-text-frame.is-expanded{max-height:6000px}
.expandable-text-frame.is-expanded:after{display:none}
.expandable-text-frame.is-expanded .expandable-text-content{padding-bottom:20px}
.expandable-text-frame.is-expanded .expandable-text-footer{
  position:relative;
  padding:8px 16px 16px;
  background:hsl(var(--card));
}
.expandable-text-frame.is-expanded .expandable-text-chevron-down{display:none}
.expandable-text-frame.is-expanded .expandable-text-chevron-up{display:block}
@media(max-width:600px){
  .expandable-text-frame{margin:30px 0 42px}
  .expandable-text-content{padding:20px 17px 78px}
  .expandable-text-frame.is-expanded .expandable-text-content{padding-bottom:16px}
}
@media(prefers-reduced-motion:reduce){
  .expandable-text-frame,
  .expandable-text-toggle{transition:none}
}
/* Writing index and article pages. Uses the shared glass controls and neutral type tokens. */
.writing-page{
  padding:32px 24px 104px;
}
.writing-page .writing-wrap{
  width:min(568px,100%);
  display:flex;
  flex-direction:column;
  gap:0;
}
.writing-header{
  margin:66px 0 30px;
}
.writing-intro-copy{
  display:flex;
  flex-direction:column;
  gap:0;
  max-width:560px;
}
.writing-intro-copy p{
  margin:0;
  color:hsl(var(--text-secondary));
  font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:24px;
  text-wrap:pretty;
}
.writing-intro-lead{color:hsl(var(--text-secondary))}
.writing-library{display:flex;flex-direction:column;gap:0}
.writing-grid{display:flex;flex-direction:column}
.writing-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:center;
  gap:20px;
  min-width:0;
  padding:17px 0;
  border-bottom:1px solid hsl(var(--border-subtle));
  color:inherit;
  text-decoration:none;
}
.writing-card:first-child{border-top:1px solid hsl(var(--border-subtle))}
.writing-card:focus-visible{
  outline:2px solid hsl(var(--ring));
  outline-offset:3px;
  border-radius:2px;
}
.writing-card-info{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
}
.writing-card-title{
  margin:0;
  color:hsl(var(--text-secondary));
  font-size:16px;
  line-height:22px;
  font-weight:550;
  letter-spacing:-.15px;
  text-wrap:pretty;
}
.writing-card-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:7px;
  row-gap:2px;
  color:hsl(var(--text-tertiary));
  font-size:12px;
  line-height:18px;
}
.writing-card-date{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.writing-card-tag{display:inline-flex;align-items:center;gap:7px}
.writing-card-tag-separator{color:hsl(var(--text-tertiary))}
.writing-card-link-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  color:hsl(var(--text-tertiary));
  opacity:0;
  translate:-3px 3px;
  transition:opacity .18s ease,translate .18s ease,color .18s ease;
}
.writing-card-link-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.writing-card:hover .writing-card-title,
.writing-card:focus-visible .writing-card-title{color:hsl(var(--foreground))}
.writing-card:hover .writing-card-link-icon,
.writing-card:focus-visible .writing-card-link-icon{
  color:hsl(var(--foreground));
  opacity:1;
  translate:0 0;
}
.writing-empty{
  margin:14px 0 0;
  color:hsl(var(--text-tertiary));
  font-size:13px;
  line-height:22px;
}
.writing-empty[hidden]{display:none}
.writing-article-page{
  padding-top:32px;
  padding-bottom:112px;
}
.writing-article-shell{width:min(100%,1000px)}
.writing-article-header{margin-top:72px}
.writing-article-header .case-kicker-row{
  justify-content:flex-start;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
}
.writing-article-header .case-kicker{
  color:hsl(var(--text-tertiary));
  font-size:12px;
  font-weight:450;
  text-transform:none;
  letter-spacing:0;
}
.writing-article-page .case-cover{
  margin-top:42px;
  margin-bottom:60px;
}
.writing-article-page .case-cover img{
  border-radius:12px;
}
.writing-article-body{
  width:min(100%,720px);
  margin-top:0;
}
.writing-article-body>p{margin-bottom:24px}
.writing-article-body h2{margin-top:58px}
.writing-article-body h3{margin-top:38px}
.writing-article-body blockquote{
  border-left-color:rgba(76,130,176,.55);
  color:hsl(var(--text-secondary));
}
.writing-more-readings{
  width:min(100%,860px);
  margin:112px auto 0;
  padding-top:28px;
  border-top:1px solid hsl(var(--border));
}
.writing-more-readings>h2{
  margin:0 0 24px;
  color:hsl(var(--text-tertiary));
  font-size:14px;
  line-height:22px;
  font-weight:500;
  letter-spacing:-.01em;
}
.writing-more-readings .writing-grid{gap:0}
@media(max-width:700px){
  .writing-page{padding:24px 20px 72px}
  .writing-header{margin:52px 0 26px}
  .writing-article-page{padding:28px 20px 72px}
  .writing-article-header{margin-top:54px}
  .writing-article-page .case-cover{margin:34px auto 44px}
  .writing-more-readings{margin-top:76px}
}
@media(max-width:430px){
  .writing-page{padding-right:16px;padding-left:16px}
  .writing-card{grid-template-columns:minmax(0,1fr) 20px;gap:12px;padding:15px 0}
  .writing-card-title{font-size:15px;line-height:21px}
  .writing-card-meta{font-size:11px;line-height:17px;column-gap:6px}
  .writing-card-tag,.writing-card-tag-separator{gap:6px}
  .writing-card-link-icon{width:20px;height:20px}
  .writing-article-page{padding-right:16px;padding-left:16px}
  .writing-article-header h1{font-size:var(--font-size-h1)}
}
@media(prefers-reduced-motion:reduce){
  .writing-card-link-icon{transition:none}
}