/* Portfolio Caterina Bustamante: single stylesheet for every page.
   Order: tokens, base, layout, shared components, home, then one section per case study.
   Breakpoints: 768px (layout) and 480px (small phones). Exceptions are noted where they appear.
   Fonts are loaded from each page with a <link>: Bricolage Grotesque 700, Hanken Grotesk 400/500/600, IBM Plex Mono 400. */

/* Tokens */
:root{
  --ink:#171717;
  --bg:#FFFFFF;
  --surface:#DEDEDE;
  --accent:#FF6735;
  --blush:#F5CAC4;
  --lavender:#C3ABF6;
  --peri:#ADBFFD;
  --ochre:#A77E4A;
  --gray:#919191;
  --line:#DCDCDC;            /* every 1px separator and diagram connector: change it here only */
  --hair:var(--line);
  --label:#767676;           /* small labels: 4.5:1 on white (#FFFFFF) */
  --line-on-accent:rgba(23,23,23,.22);
  --display:"Bricolage Grotesque","Arial Black",sans-serif;
  --lh-display:1.1;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s48:48px;--s64:64px;--s120:120px;--s160:160px;
  --wide:1120px;--measure:none;
  --margin:60px;
  --radius:8px;--radius-s:4px;
  --shadow-window:0 16px 40px -8px rgba(23,23,23,.28),0 0 0 1px rgba(23,23,23,.08);
  color-scheme:light;
}
@media (max-width:768px){:root{--margin:16px}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
h1,h2,h3,p,figure,ol,ul,dl,dd{margin:0}
h1,h2,h3{text-wrap:balance}

/* Type */
.label{font:400 13px/1.5 var(--mono);letter-spacing:.02em;color:var(--label)}
.next .label,.site-foot .label,.case-contact .label,.pnode.out .label,.pano .label,.steps li.turn .label{color:inherit}
.pairs,.reason,.pnode,.frame,.dest-shot,.dest-tag,.stat,.eco{--label:#595959} /* on the grey surface, 4.5:1 needs a darker grey */
h1,.title{font:700 clamp(36px,6vw,72px)/var(--lh-display) var(--display);letter-spacing:-.02em}
.title--xl{font-size:clamp(36px,7.8vw,60px)}
.cta .title{font-size:clamp(36px,7.8vw,60px)}
.title--s{font-size:clamp(28px,3.4vw,40px)}
h2{font:600 28px/1.2 var(--sans);letter-spacing:-.02em}
h3{font:600 18px/1.3 var(--sans);letter-spacing:-.01em}
.prose{display:flex;flex-direction:column;gap:var(--s16);max-width:var(--measure)}
.prose p{font-size:16px;line-height:1.6}
.lede{font-size:20px;line-height:1.5;max-width:var(--measure)}
.small,figcaption{font-size:14px;line-height:1.5}
.nb{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.k{display:block;margin-bottom:var(--s8)}

/* Layout: .wrap centers header, main and footer content on the same column */
.wrap{max-width:calc(var(--wide) + 2 * var(--margin));margin-inline:auto;padding-inline:max(var(--margin),env(safe-area-inset-left,0px)) max(var(--margin),env(safe-area-inset-right,0px))}
main{display:flex;flex-direction:column;gap:var(--s120);padding-block:var(--s120) var(--s160)}
section{display:flex;flex-direction:column;gap:var(--s32);min-width:0}
.intro{display:flex;flex-direction:column;gap:var(--s32)}
.intro-text{display:flex;flex-direction:column;gap:var(--s24)}
@media (max-width:768px){main{gap:var(--s64);padding-block:var(--s64) var(--s120)}}

/* Header */
.site-head{display:flex;align-items:center;justify-content:flex-end;gap:var(--s24);padding-block:var(--s12);font-size:14px;line-height:20px}
.site-head a{display:inline-flex;align-items:center;min-height:44px}
.site-head a:hover{text-decoration:underline}
.site-head .name{font-weight:600;margin-right:auto}
.site-head-end{display:flex;align-items:center;gap:var(--s24)}
@media (max-width:480px){.site-head{flex-wrap:wrap;gap:0 var(--s24)}.site-head .name{flex:0 0 100%}}

/* Case tile colors: set on main to tint the whole case, or on a single .tile */
.t-peri{--t:var(--peri)}.t-blush{--t:var(--blush)}.t-ochre{--t:var(--ochre)}.t-gray{--t:var(--gray)}

/* Ringed step number: thin ring, small number. Used by every numbered list and diagram. */
.step-n{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border:1px solid var(--line);border-radius:50%;font:400 11px/1 var(--mono);color:var(--label);font-variant-numeric:tabular-nums}

/* Case hero (a-hero-metadatos): metadata list on the left, description on the right, between two light lines. */
.intro-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32) var(--s64);align-items:start;padding-block:var(--s32);border-block:1px solid var(--line)}
.intro-cols .lede{order:2;max-width:none;font-size:clamp(18px,1.7vw,22px);line-height:1.4}
.meta{order:1;display:flex;flex-direction:column;gap:var(--s16)}
.meta div{display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.meta dd{font-size:18px;line-height:1.4}
@media (max-width:768px){.intro-cols{grid-template-columns:1fr}.intro-cols .lede,.meta{order:0}}

/* Hero tile: screen anchored top-left and bleeding off */
.tile{position:relative;aspect-ratio:2/1;max-width:100%;overflow:hidden;background:var(--t,var(--surface))}
.tile img{position:absolute;left:7%;top:7%;width:var(--w,100%);max-width:none;border-radius:var(--radius);box-shadow:var(--shadow-window)}
.tile.cover img{inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none}

/* Figures */
figure{display:flex;flex-direction:column;gap:var(--s12);min-width:0}
.shot .panel{background:var(--t,var(--surface));padding:clamp(24px,7%,80px) clamp(24px,9%,104px) 0;overflow:hidden}
.shot .panel img{width:100%;border-radius:var(--radius) var(--radius) 0 0;box-shadow:var(--shadow-window)}
.flow-solo{max-width:none}
.group{--line:var(--line-on-accent);--label:#595959;display:grid;gap:var(--s24);padding:var(--s32);background:var(--t,var(--surface))}
.group .flow text[stroke="#ffffff"]{stroke:var(--t,var(--surface))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s32);align-items:center}
.split .flow-solo{min-width:0;order:2}
.split .shot{order:1;min-width:0}
.split .panel{background:none;overflow:hidden;padding:var(--s24) var(--s24) var(--s24) 0;margin:calc(-1 * var(--s24)) calc(-1 * var(--s24)) calc(-1 * var(--s24)) calc(-1 * var(--s32))}
.split .panel img{width:106%;max-width:none;margin-left:-6%;border-radius:0 var(--radius) var(--radius) 0;box-shadow:0 8px 20px -6px rgba(23,23,23,.28),0 0 0 1px rgba(23,23,23,.08)}
@media (max-width:768px){.group{padding:var(--s16)}.split{grid-template-columns:1fr;row-gap:var(--s24)}.split .flow-solo,.split .shot{order:0}.split .panel{margin-left:calc(-1 * var(--s16))}}
.frame{background:var(--surface);padding:var(--s16)}
.frame img{width:100%;border-radius:var(--radius-s)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32);align-items:start}
.fig-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s12);flex-wrap:wrap}
@media (max-width:768px){.grid2{grid-template-columns:1fr}}

/* Tables */
.scroll{overflow-x:auto}
.cmp{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;line-height:1.5}
.cmp th,.cmp td{text-align:left;vertical-align:top;padding:var(--s12) var(--s16) var(--s12) 0;border-top:1px solid var(--line)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:1px solid var(--line)}
.cmp thead th{border-top:0;padding-top:0}
.cmp th{font:400 14px/20px var(--mono);letter-spacing:.02em;width:30%}

/* Ordered steps (b-lista-numerada): ringed number, thin line to the next step */
.steps{list-style:none;padding:0;max-width:var(--measure)}
.steps li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s16);align-items:center;padding-bottom:var(--s24);font-size:16px}
.steps li:last-child{padding-bottom:0}
.steps li:not(:last-child)::after{content:"";position:absolute;left:12px;top:30px;bottom:6px;width:1px;background:var(--line)}
.steps li.turn::before{content:"";width:24px;height:24px;border:1px solid var(--ink);border-radius:50%}

/* Paired evidence */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s16)}
.pairs > div{display:flex;flex-direction:column;gap:var(--s8);padding:var(--s24);background:var(--surface);min-width:0}
.pairs h3{margin-bottom:var(--s4)}
.pairs p{font-size:16px;line-height:1.6}
@media (max-width:768px){.pairs{grid-template-columns:1fr}}

/* Flow diagrams (SVG): outlines only, 1px light strokes; the emphasised nodes keep an ink outline */
.flow{display:block;width:100%;height:auto;color:var(--ink)}
.flow .lb{font:400 12px var(--mono);letter-spacing:.02em;fill:var(--label)}
.flow .tt{font:600 24px var(--sans);letter-spacing:-.02em;fill:var(--ink)}
.flow .nd{font:400 14px var(--sans)}
.flow rect,.flow polygon{fill:none !important;stroke:var(--line);stroke-width:1}
.flow rect[fill="currentColor"]{stroke:var(--ink)}
.flow text[fill="#ffffff"]{fill:var(--ink)}
.flow path{stroke:var(--line)}
.flow marker path{fill:var(--line);stroke:none}
.flow line{stroke:var(--line)}
.flows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s48);align-items:start}
@media (max-width:768px){.flows{grid-template-columns:1fr}}

/* Results */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s48) var(--s32)}
.stat{display:flex;flex-direction:column;gap:var(--s8);padding-top:var(--s16);border-top:1px solid var(--line);min-width:0}
.stat b{font-weight:400;font-variant-numeric:tabular-nums}
.stat p{font-size:14px;line-height:1.5}
@media (max-width:768px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.stats{grid-template-columns:1fr}}

/* Button */
.btn{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s16);background:var(--ink);color:var(--bg);font-size:14px}
.btn:focus-visible{outline-offset:2px}

/* Next project band, closes every case */
.next{background:var(--accent)}
.next a{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s24);padding-block:var(--s120)}
.next .go{font-size:16px;display:inline-flex;gap:var(--s8)}
.next .go span{transition:transform .25s ease}
.next a:hover .go span,.next a:focus-visible .go span{transform:translateX(6px)}
.next a:focus-visible{outline-offset:-8px}

/* Case contact: generic invitation placed just before the next-project band, same on every case.
   A full-width blush band (token) that sits flush against the orange band; smaller than it on purpose:
   body-size copy, shorter padding. To add a case-specific line later, put
   <p class="small case-contact-note">…</p> after .case-contact-lead; no other change is needed. */
.case-contact{position:relative;overflow:hidden;background:var(--lavender)}
/* Dot texture: strongest on the right edge, fading out to the left; sits behind the content */
.case-contact::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,var(--ink) 1.2px,transparent 1.7px);background-size:16px 16px;opacity:.35;-webkit-mask-image:linear-gradient(to left,#000,transparent 55%);mask-image:linear-gradient(to left,#000,transparent 55%)}
.case-contact .wrap{position:relative}
.case-contact-inner{display:flex;flex-direction:column;gap:var(--s24);padding-block:var(--s64)}
.case-contact-lead{text-wrap:balance}
.case-contact-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s8) var(--s24)}
.case-contact-actions a:not(.btn){display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-position:from-font}
@media (max-width:768px){.case-contact-inner{padding-block:var(--s48)}.case-contact::before{opacity:.25}}

/* Footer legal line */
.legal{display:flex;justify-content:space-between;gap:var(--s16);flex-wrap:wrap;padding-top:var(--s16);border-top:1px solid var(--line-on-accent)}

/* Home */
.hero .title span{display:block}
.hero .title{font-size:clamp(36px,7vw,88px)}
.projects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s24)}
.project{display:flex;flex-direction:column;gap:var(--s24);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.project:hover,.project:focus-visible{transform:translateY(-8px)}
.project-img{width:100%;aspect-ratio:1/1;object-fit:cover}
.project-text{display:flex;flex-direction:column;gap:var(--s12)}
.project-copy{display:flex;flex-direction:column;gap:var(--s8)}
.more{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.more-row{border-top:1px solid var(--line)}
.more-link{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4) var(--s16);padding:var(--s16) 0}
a.more-link:hover h3{text-decoration:underline}

/* Project lists: while one project is hovered or focused, the others fade to .35 and it stays at 1.
   Existing hover effects (card lift, underline) are untouched. Hover only where a pointer exists. */
.projects>li,.more-row{transition:opacity .22s ease}
@media (hover:hover){
  .projects:has(.project:hover)>li:not(:has(.project:hover)),
  .more:has(a.more-link:hover)>.more-row:not(:has(a.more-link:hover)){opacity:.35}
}
.projects:has(.project:focus-visible)>li:not(:has(.project:focus-visible)),
.more:has(a.more-link:focus-visible)>.more-row:not(:has(a.more-link:focus-visible)){opacity:.35}
.site-foot{background:var(--accent)}
.site-foot .wrap{display:flex;flex-direction:column;gap:var(--s120);padding-block:var(--s120) var(--s32)}
.footer-main{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s32);flex-wrap:wrap}
.cta{display:flex;flex-direction:column;gap:var(--s24)}
.email{font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.01em;text-decoration:underline;text-underline-position:from-font;display:inline-flex;align-items:center;min-height:44px}
.footer-links{display:flex;flex-direction:column;align-items:flex-end;font-size:14px;line-height:20px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}
.footer-links a:hover{text-decoration:underline}
@media (max-width:768px){
  .site-foot .wrap{gap:var(--s64);padding-top:var(--s64)}
  .footer-links{align-items:flex-start}
  .email{font-size:20px;line-height:28px;word-break:break-all}
}
/* Mobile: projects become a horizontal scroller. Two cards fit fully and a 16px sliver (same as the left margin) of the third shows
   at the right edge. The list bleeds to the viewport edges and re-applies --margin as inner padding, so the
   first card keeps the site's side padding. Vertical padding/margin keep hover lift and focus ring unclipped. */
@media (max-width:768px){
  .projects{display:flex;gap:var(--s16);margin-inline:calc(-1 * var(--margin));padding:var(--s8) var(--margin);margin-block:calc(-1 * var(--s8));overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--margin);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .projects::-webkit-scrollbar{display:none}
  .projects>li{flex:0 0 calc((100% - 32px) / 2);min-width:0;scroll-snap-align:start}
}

/* Case: third-party portal. Before/after ecosystem diagram */
.eco{display:flex;flex-direction:column;gap:var(--s32);padding:0}
.eco-row{display:flex;flex-direction:column;gap:var(--s12)}
.eco-line{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);align-items:center}
.eco-line.after{grid-template-columns:minmax(0,1fr) 56px minmax(0,2fr)}
.node{display:flex;align-items:center;justify-content:center;min-height:56px;padding:var(--s8);text-align:center;font-size:14px;line-height:1.3;border:1px solid var(--line)}
.node.solid{border-color:var(--ink)}
.node.out{border-style:dashed}
.link{position:relative;height:1px;background:var(--line)}
.link.mail{background:none;border-top:1px dashed var(--line)}
.link .label{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-size:12px}
.zone{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);align-items:center;padding:var(--s8);border:1px solid var(--line)}
@media (max-width:480px){.eco{padding:0}.eco-line{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr) 20px minmax(0,1fr)}.eco-line.after{grid-template-columns:minmax(0,1fr) 20px minmax(0,2fr)}.link .label{display:none}.node{font-size:12px}}

/* Case: Tecno Fast Rental. Side-by-side evidence frames and the three destinations */
.frame.fit{aspect-ratio:4/5;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.frame.fit img,.frame.fit svg{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:top}
.dests{display:flex;flex-direction:column;gap:var(--s24)}
.dest-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s24);row-gap:0}
.dest{display:grid;grid-row:span 5;grid-template-rows:subgrid;border-top:1px solid var(--line);min-width:0}
.dest.out{border-top-style:dashed}
.dest > *{padding-top:var(--s16)}
.dest-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s8)}
.dest-tag{background:var(--surface);padding:0 var(--s8)}
.dest-count{display:flex;align-items:baseline;gap:var(--s12)}
.dest-count b{font-weight:400;font-variant-numeric:tabular-nums}
.dest-src{font-size:14px;line-height:1.5;align-self:start}
.dest-shot{padding:var(--s16) var(--s16) 0;margin-top:var(--s16);aspect-ratio:4/5;max-width:100%;overflow:hidden;background:var(--surface)}
.dest-shot img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:var(--radius-s) var(--radius-s) 0 0;box-shadow:0 0 0 1px var(--hair)}
@media (max-width:768px){
  .frame.fit{aspect-ratio:auto}
  .frame.fit img,.frame.fit svg{height:auto;width:100%}
  .dest-grid{grid-template-columns:1fr;row-gap:var(--s48)}
  .dest{display:flex;flex-direction:column;grid-row:auto}
  .dest-shot{aspect-ratio:auto;padding-bottom:var(--s16)}
  .dest-shot img{height:auto;border-radius:var(--radius-s)}
}

/* Case: Visita LCO. Information architecture, CSS wireframes and interactive scenes */
.ia-legend{display:flex;flex-wrap:wrap;gap:var(--s16) var(--s24);font-size:14px}
.ia-legend span{display:inline-flex;align-items:center;gap:var(--s8)}
.ia-legend i{display:inline-block;width:28px;height:14px}
.ia{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:var(--s24) var(--s12)}
@media (min-width:1024px){.ia{grid-template-columns:repeat(8,minmax(0,1fr))}} /* exception: eight stages need the room */
.ia-stage{display:flex;flex-direction:column;gap:var(--s12);min-width:0}
.n{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 8px;font-size:13px;line-height:1.3;text-align:center;overflow-wrap:anywhere}
.n + .n::before{content:"";position:absolute;left:50%;top:-13px;width:1px;height:12px;background:var(--line)}
.sc{border:1px solid var(--ink);border-radius:999px}
.sub{border:1px solid var(--line);border-radius:999px}
.pop{border:1px dashed var(--line);border-radius:var(--radius-s)}
.vr{border:1px solid var(--ink);border-radius:var(--radius-s)}
.ia-stage>.step-n{margin-bottom:var(--s4)}
.wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s24)}
.wf{container-type:inline-size}
.ws{position:relative;aspect-ratio:16/10;max-width:100%;overflow:hidden;background:var(--bg);border:1px solid var(--ink);font-family:var(--mono);color:var(--ink)}
.ws.g{background:var(--surface)}
.ws .top{position:absolute;top:5cqw;left:5cqw;right:5cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw}
.ws .ttl{font-size:3.4cqw}
.ws .ico{width:3cqw;height:3cqw;border:1px solid var(--ink);border-radius:50%}
.ws .tabs{display:flex;gap:.6cqw;background:var(--bg);padding:.8cqw}
.ws .tabs i{width:4.5cqw;height:1.4cqw;background:var(--gray)}.ws .tabs i.on{background:var(--ink)}
.ws .mt{position:absolute;bottom:0;width:45%;height:42%;background:var(--bg);clip-path:polygon(50% 0,100% 100%,0 100%)}
.ws .mt.a{left:5%}.ws .mt.b{left:45%;height:34%}
.ws .st{position:absolute;width:5cqw;height:5cqw;background:var(--bg);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.ws .av{position:absolute;width:10cqw;height:10cqw;border:1px solid var(--ink);border-radius:50%;background:var(--bg)}
.ws .blk{position:absolute;background:var(--ink)}
.ws .x{position:absolute;border:1px solid var(--ink);background:linear-gradient(to top right,transparent calc(50% - .5px),var(--ink) 50%,transparent calc(50% + .5px)),linear-gradient(to top left,transparent calc(50% - .5px),var(--ink) 50%,transparent calc(50% + .5px))}
.ws .ln{position:absolute;display:flex;flex-direction:column;gap:1.2cqw}
.ws .ln i{display:block;height:.9cqw;background:var(--gray)}
.ws .card{position:absolute;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.ws .card svg,.ws .big svg{width:7cqw;height:7cqw}
.ws .big{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:1.5cqw;text-align:center;font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.ws .big.left{right:auto;justify-content:flex-start}
.ws .big.left svg{width:4cqw;height:4cqw}
.ws .pill{position:absolute;border:1px solid var(--ink);font-size:2.2cqw;padding:.8cqw 2cqw;background:var(--bg)}
.ws .c{left:50%;transform:translateX(-50%)}
.ws .r360{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--sans);font-size:5cqw;font-weight:600;border:1px solid var(--ink);border-radius:50%;padding:1.5cqw 3cqw;background:var(--bg)}
.xp{display:flex;flex-direction:column;gap:var(--s32)}
.pano{position:relative;aspect-ratio:2/1;max-width:100%;overflow:hidden;background:#141414;cursor:grab;touch-action:none;user-select:none}
.pano canvas{display:block;width:100%;height:100%}
.pano:active{cursor:grabbing}
.pano:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.pano .label{position:absolute;background:var(--bg);color:var(--ink);padding:4px var(--s8)}
.pano-hint{left:50%;bottom:var(--s16);transform:translateX(-50%);transition:opacity .3s ease}
.pano.used .pano-hint{opacity:0}
.px{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:#05070f}
.px-l{position:absolute;left:-4%;width:108%;max-width:none;will-change:transform;pointer-events:none}
.px-l:first-child{top:-4%;height:108%;object-fit:cover}
.px-b{bottom:-3%}
.px .pano-hint{position:absolute;left:50%;bottom:var(--s16);transform:translateX(-50%);background:var(--bg);color:var(--ink);padding:4px var(--s8);transition:opacity .3s ease}
.px.used .pano-hint{opacity:0}

/* Case: Image processor */
.cmpf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32);align-items:start}
.cmpf-head{display:flex;justify-content:space-between;gap:var(--s8);padding-bottom:var(--s8);border-bottom:1px solid var(--line);margin-bottom:var(--s16)}
.cmpf-list{list-style:none;padding:0;display:flex;flex-direction:column}
.cmpf-list li{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--s16);align-items:center;padding-bottom:var(--s24);font-size:15px}
.cmpf-list li:last-child{padding-bottom:0}
.cmpf-list li:not(:last-child)::after{content:"";position:absolute;left:12px;top:30px;bottom:6px;width:1px;background:var(--line)}
.reasons{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s16)}
.reason{display:flex;flex-direction:column;gap:var(--s12);padding:var(--s24);background:var(--surface);min-width:0}
.reason p{font-size:16px;line-height:1.6}
.pipe{list-style:none;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s24)}
.pnode{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:var(--s8);min-width:0;font-size:14px;line-height:1.4}
.pnode b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.pnode .loop{display:inline-flex;align-items:center;gap:var(--s8);font-size:12px}
.pnode:not(:last-child)::after{content:"";position:absolute;top:12px;left:32px;right:calc(-1 * var(--s24) + 8px);height:1px;background:var(--line)}
@media (max-width:900px){ /* exception: seven nodes need more than 768px before they stack */
  .pipe{grid-template-columns:1fr;max-width:var(--measure);gap:var(--s24)}
  .pnode{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:var(--s16);row-gap:var(--s4)}
  .pnode>.step-n{grid-row:1/span 4}
  .pnode>:not(.step-n){grid-column:2}
  .pnode:not(:last-child)::after{left:12px;right:auto;top:30px;bottom:calc(-1 * var(--s24) + 6px);width:1px;height:auto}
}
.bars{display:flex;flex-direction:column;gap:var(--s16)}
.bar{display:flex;flex-direction:column;gap:var(--s4)}
.bar-top{display:flex;justify-content:space-between;gap:var(--s16);align-items:baseline}
.track{display:flex;height:24px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--hair)}
.seg{height:100%}
.seg.manual{background:var(--surface)}
.seg.dev{background:var(--ochre)}
.seg.run{background:var(--ink);min-width:3px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s24)}
.legend span{display:inline-flex;align-items:center;gap:var(--s8)}
.sw{width:12px;height:12px;display:inline-block}
.pats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s32)}
.pat{display:block;width:100%;height:auto}
.pat rect{fill:var(--surface);stroke:var(--label);vector-effect:non-scaling-stroke}
.pat .pat-border{fill:none}
.pf{display:flex;flex-direction:column;gap:var(--s16)}
.pf-head{display:flex;justify-content:space-between;gap:var(--s16);flex-wrap:wrap;border-top:1px solid var(--line);padding-top:var(--s8)}
.pf-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s8)}
.pf-tiles img,.pf-pano{width:100%;max-width:720px}
.mock{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden;background:var(--ochre)}
.mock .an-frame{position:absolute;left:12%;top:10%;width:76%;border:0;box-shadow:var(--shadow-window)}
.an{display:flex;flex-direction:column;gap:var(--s16)}
.an-frame{position:relative;aspect-ratio:1120/677;max-width:100%;overflow:hidden;border:1px solid var(--hair);border-radius:var(--radius)}
.an-f{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;animation:an-fade 12s infinite ease-in-out}
.an-f2{animation-delay:-8s}.an-f3{animation-delay:-4s}
@keyframes an-fade{0%,29%{opacity:1}35%,94%{opacity:0}100%{opacity:1}}
.an-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s16)}
.an-s{position:relative;padding-top:var(--s8);border-top:1px solid var(--hair)}
.an-bar{position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--ink);transform-origin:left;transform:scaleX(0);animation:an-prog 12s infinite linear}
.an-s2 .an-bar{animation-delay:-8s}.an-s3 .an-bar{animation-delay:-4s}
@keyframes an-prog{0%{transform:scaleX(0)}33.2%{transform:scaleX(1)}33.4%,100%{transform:scaleX(0)}}
@media (max-width:768px){.reasons{grid-template-columns:1fr}}
@media (max-width:480px){.cmp{min-width:0}.cmp th,.cmp td{padding-right:var(--s8)}.cmp th{font-size:12px;width:28%}.cmpf{gap:var(--s16)}.cmpf-list li{grid-template-columns:1fr}.pf-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){
  .project,.next .go span,.pano-hint,.projects>li,.more-row{transition:none}
  .project:hover,.project:focus-visible{transform:none}
  .an-f,.an-bar{animation:none}
  .an-f1{opacity:1}
}