/* piso 8 · Duo Design, esta página: a maqueta do prédio, o monitor com a página, o papel isométrico,
   a Soft Pad dos Eames à mesa e uma coluna da 606 com livros */

.f-duo-design { --wallc: #E2E4EE; --accent: var(--cobalt); }

.f-duo-design .dd-table { --c: #EDE8DF; --c2: #D3CCBF; }
.f-duo-design .dd-leg { --c: #3A3645; }
.f-duo-design .dd-plate { --c: #FFFFFF; --c2: #DCD6CC; }
.f-duo-design .dd-post { --c: #9C97A6; }
.f-duo-design .dd-mslab { --c2: color-mix(in oklab, var(--c), var(--ink) 18%); }

/* o Studio Display (da biblioteca) mostra a própria página, numa captura verdadeira (13 de Novembro de 2026: o fim
   do terraço e este piso, com o texto), sem pixelizar, como o José Rui pediu; clicar abre-a com 480 px (ovo-este-site) */
.f-duo-design .sd-vidro { background: #F3EEE6 url(img/este-site-ecra.jpg) center / cover no-repeat; }

/* papel isométrico: linhas a 30 e a 150 graus, e as verticais */
/* o poster da Emigre Magazine, emoldurado (a moldura preta e fina é palpite) */
.f-duo-design .dd-poster {
  background: #F28C5A url(img/emigre.jpg) center / cover no-repeat;
  border: calc(1.4 * var(--u)) solid #1F1C2C;
  box-shadow: calc(1.2 * var(--u)) calc(1.6 * var(--u)) calc(2.4 * var(--u)) rgb(31 28 44 / .22);
}
/* o papel isométrico na mesa */
.f-duo-design .dd-paper {
  background:
    repeating-linear-gradient(30deg, rgb(61 111 182 / .28) 0 1px, transparent 1px calc(6 * var(--u))),
    repeating-linear-gradient(150deg, rgb(61 111 182 / .28) 0 1px, transparent 1px calc(6 * var(--u))),
    repeating-linear-gradient(90deg, rgb(61 111 182 / .18) 0 1px, transparent 1px calc(10.4 * var(--u))),
    #FFFFFF;
  box-shadow: 0 0 0 calc(.6 * var(--u)) rgb(31 28 44 / .14);
}
/* o esquadro de acrílico */
.f-duo-design .dd-square {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: rgb(244 132 102 / .55);
}

/* ---------- uma coluna da 606, com livros: as calhas e as prateleiras são as peças da 606 da biblioteca ---------- */
/* livros de pé: as lombadas na face da frente, as folhas por cima, a capa do último de lado */
.f-duo-design .dd-bk { --top: repeating-linear-gradient(180deg, #F3EDE1 0 calc(2.4 * var(--u)), #CDC3B0 0 calc(2.7 * var(--u))); }
.f-duo-design .dd-bk-a { --c2: #3D6FB6; --c1: repeating-linear-gradient(180deg, #2B2937 0 calc(3 * var(--u)), #E9573F 0 calc(5 * var(--u)), #F1ECE2 0 calc(8.2 * var(--u)), #3D6FB6 0 calc(10.4 * var(--u)), #D7C29A 0 calc(13.6 * var(--u)), #5E8C6E 0 calc(15.4 * var(--u)), #1F1C2C 0 calc(18 * var(--u)), #F2C14E 0 calc(19.8 * var(--u)), #9C3F31 0 calc(22.8 * var(--u)), #E5DCCB 0 calc(25 * var(--u))); }
.f-duo-design .dd-bk-b { /* livros de arte, altos e grossos */
  --c2: #E5DCCB; --c1: repeating-linear-gradient(180deg, #F1ECE2 0 calc(3.6 * var(--u)), #1F1C2C 0 calc(7 * var(--u)), #F2C14E 0 calc(9.4 * var(--u)), #3D6FB6 0 calc(13 * var(--u)), #E5DCCB 0 calc(15 * var(--u)), #9C3F31 0 calc(18.6 * var(--u)));
}
.f-duo-design .dd-bk-c { /* livros de bolso, finos e claros */
  --c2: #F2C14E; --c1: repeating-linear-gradient(180deg, #E9573F 0 calc(1.8 * var(--u)), #F1ECE2 0 calc(3.4 * var(--u)), #F2C14E 0 calc(5 * var(--u)), #1F1C2C 0 calc(6.4 * var(--u)), #9FB6D9 0 calc(8.4 * var(--u)), #F1ECE2 0 calc(9.8 * var(--u)), #5E8C6E 0 calc(11.4 * var(--u)), #E5DCCB 0 calc(13 * var(--u)), #2B2937 0 calc(14.2 * var(--u)), #D9805F 0 calc(16 * var(--u)));
}
.f-duo-design .dd-bk-d { /* uma colecção: lombadas pretas iguais, com a faixa amarela no alto */
  --c2: #2B2937; --c1: linear-gradient(90deg, transparent 16%, #F2C14E 0 23%, transparent 0), repeating-linear-gradient(180deg, #2B2937 0 calc(2.4 * var(--u)), #57525F 0 calc(2.7 * var(--u)));
}
/* livros deitados: a capa por cima (--c), a lombada à frente, as folhas de lado */
.f-duo-design .dd-flat { --c2: #ECE4D2; }
.f-duo-design .dd-pilha { --c: transparent; }

/* o VARMBLIXT, aceso; um clique apaga-o e outro acende-o: apagado é o popover vb-luz (no lb.html) aberto. A luz
   (o --vb-aceso, da biblioteca) entra e sai devagar e clareia em volta: a parede da direita, por cima da
   prateleira (por baixo, a prateleira faz sombra), o tampo da prateleira e a capa do livro ao lado. Na parede,
   o ::after da .wall-r, a largura é a altura contada de cima e a altura é o y a partir de 8: o candeeiro está a
   47,6 de cima e a 216 do princípio, e a sombra da prateleira começa a 54, num degradê de 4 */
.f-duo-design { --vb-aceso: 1; transition: --vb-aceso .6s ease; }
:root:has(#vb-luz:popover-open) .f-duo-design { --vb-aceso: 0; }
.f-duo-design .wall-r {
  --c1:
    linear-gradient(90deg, transparent, var(--wallc)) calc(50 * var(--u)) calc(168 * var(--u)) / calc(4 * var(--u)) calc(96 * var(--u)) no-repeat,
    radial-gradient(circle at calc(47.6 * var(--u)) calc(48 * var(--u)),
      rgb(255 240 212 / calc(.95 * var(--vb-aceso))),
      rgb(255 196 128 / calc(.5 * var(--vb-aceso))) calc(20 * var(--u)),
      rgb(255 196 128 / 0) calc(48 * var(--u)))
      0 calc(168 * var(--u)) / calc(54 * var(--u)) calc(96 * var(--u)) no-repeat,
    var(--wallc);
}
.f-duo-design .dd-vb-prat {
  --top: radial-gradient(circle at calc(11 * var(--u)) calc(59 * var(--u)),
      rgb(255 232 196 / calc(.95 * var(--vb-aceso))) calc(11 * var(--u)),
      rgb(255 190 120 / calc(.55 * var(--vb-aceso))) calc(16 * var(--u)),
      rgb(255 190 120 / 0) calc(30 * var(--u))),
    var(--v606-cor);
}

/* o cartaz do plano estratégico (Herb Kelleher), na parede da direita, sem moldura */
.f-duo-design .dd-plano {
  background: #F3F1EC url(img/plano-estrategico-480.jpg) center / cover no-repeat;
  box-shadow: calc(-.8 * var(--u)) calc(1 * var(--u)) calc(2.4 * var(--u)) rgb(31 28 44 / .28);
}
/* ao lado, os dois cartazes de «F*ck You, Pay Me», a palestra de Mike Monteiro (CreativeMornings, São Francisco,
   Março de 2011), pendurados como o do plano, sem moldura; a margem branca é a do papel */
.f-duo-design .dd-cartaz {
  background: #FFFFFF center / cover no-repeat;
  box-shadow: calc(-.8 * var(--u)) calc(1 * var(--u)) calc(2.4 * var(--u)) rgb(31 28 44 / .28);
}
.f-duo-design .dd-cartaz-fuck { background-image: url(img/fuck-you-480.jpg); }
.f-duo-design .dd-cartaz-pay { background-image: url(img/pay-me-480.jpg); }

/* os três livros de capa para a frente, na 606: a capa num plano (.dd-capa), com sombra; por trás dele, a caixa que
   lhe dá a grossura (.dd-livro-frente, mais abaixo) */
.f-duo-design .dd-capa {
  background: #F3EEE6 center / cover no-repeat;
  box-shadow: calc(-.6 * var(--u)) calc(.4 * var(--u)) calc(1.2 * var(--u)) rgb(31 28 44 / .28), inset 0 0 0 calc(.2 * var(--u)) rgb(31 28 44 / .15);
}
.f-duo-design .dd-capa-grid { background-image: url(img/livro-grid-480.jpg); }
.f-duo-design .dd-capa-brody { background-image: url(img/livro-brody-480.jpg); }
.f-duo-design .dd-capa-disorder { background-image: url(img/livro-disorder-480.jpg); }
/* a Ray Gun, revista, deitada em cima de um livro da prateleira de baixo: a capa por cima, as folhas de lado */
.f-duo-design .dd-revista { --c: #E9E4DA; --c1: #D9D3C7; --c2: #E2DCD0; background: #E9E4DA url(img/livro-raygun-480.jpg) center / 100% 100% no-repeat; }
/* (a capa vai no fundo do próprio elemento e não no --top: um url() dentro de uma variável resolve-se a partir da
   página, e não desta folha, e ficava a apontar para /img/) */

/* os livros da 606, à escala da estante (1,25 cm por unidade), com as medidas das edições que as capas mostram,
   cada um com a sua grossura. De pé, à cabeça de uma fila: a lombada na face da frente, as folhas por cima, entre
   as duas capas, e a capa na ponta, num plano à parte (.dd-livro-capa), à frente da face da caixa, que fica
   transparente. De capa para a frente: a caixa atrás da capa, com as folhas por cima e do lado e a lombada do lado
   de lá. Deitados, por cima de uma pilha: a capa por cima, a lombada à frente e as folhas de lado. Na lombada, o
   título e o nome são riscas da cor das letras, só no meio da grossura; as lombadas são palpites, tirados das cores
   das capas */
.f-duo-design .dd-livro {
  --c2: transparent;
  --top: linear-gradient(90deg, var(--lomb) 0 calc(.4 * var(--u)), transparent 0),
    linear-gradient(180deg, var(--borda) 0 calc(.25 * var(--u)), #F3EDE1 0 calc(100% - .25 * var(--u)), var(--borda) 0);
}
.f-duo-design .dd-livro-capa { background: #F3EEE6 center / 100% 100% no-repeat; box-shadow: inset 0 0 0 calc(.2 * var(--u)) rgb(31 28 44 / .15); }
.f-duo-design .dd-livro-deitado {
  --c2: linear-gradient(90deg, var(--lomb) 0 calc(.4 * var(--u)), transparent 0),
    linear-gradient(180deg, var(--borda) 0 calc(.3 * var(--u)), #F3EDE1 0 calc(100% - .3 * var(--u)), var(--borda) 0);
}
.f-duo-design .dd-livro-frente {
  --c1: transparent;
  --top: linear-gradient(180deg, var(--lomb) 0 calc(.4 * var(--u)), transparent 0),
    linear-gradient(90deg, var(--borda) 0 calc(.25 * var(--u)), #F3EDE1 0 calc(100% - .25 * var(--u)), var(--borda) 0);
  --c2: linear-gradient(90deg, var(--borda) 0 calc(.25 * var(--u)), #F3EDE1 0 calc(100% - .25 * var(--u)), var(--borda) 0);
}
/* de capa para a frente: só se vêem as pontas das capas */
.f-duo-design .dd-livro-grid { --lomb: #EC6724; --borda: #EC6724; }
.f-duo-design .dd-livro-brody { --lomb: #6F55B8; --borda: #7A63CF; }
.f-duo-design .dd-livro-disorder { --lomb: #CEC1B1; --borda: #E4DED5; }
/* de pé (na lombada, os 90deg vão de cima para baixo e os 180deg atravessam a grossura) */
.f-duo-design .dd-livro-sheep { --lomb: #3F4690; --borda: #3F4690;
  --c1: linear-gradient(180deg, #3F4690 0 25%, transparent 0 75%, #3F4690 0),
    linear-gradient(90deg, #3F4690 0 8%, #F4F1E8 0 46%, #3F4690 0 56%, #E9C46A 0 80%, #3F4690 0);
}
.f-duo-design .dd-livro-capa-sheep { background-image: url(img/livro-sheep-480.jpg); }
.f-duo-design .dd-livro-bringhurst { --lomb: #1E1F23; --borda: #1E1F23;
  --c1: linear-gradient(180deg, #1E1F23 0 28%, transparent 0 72%, #1E1F23 0),
    linear-gradient(90deg, #1E1F23 0 7%, #F2EEE6 0 50%, #1E1F23 0 60%, #C9844E 0 76%, #1E1F23 0 88%, #F2EEE6 0 93%, #1E1F23 0);
}
.f-duo-design .dd-livro-capa-bringhurst { background-image: url(img/livro-bringhurst-480.jpg); }
.f-duo-design .dd-livro-rework { --lomb: #141414; --borda: #141414;
  --c1: linear-gradient(180deg, #141414 0 28%, transparent 0 72%, #141414 0),
    linear-gradient(90deg, #141414 0 7%, #A7A7A7 0 15%, #E1251B 0 33%, #141414 0 58%, #8F8F8F 0 86%, #141414 0);
}
.f-duo-design .dd-livro-capa-rework { background-image: url(img/livro-rework-480.jpg); }
.f-duo-design .dd-livro-thinking { --lomb: #F5F3EB; --borda: #F5F3EB;
  --c1: linear-gradient(180deg, #F5F3EB 0 30%, transparent 0 70%, #F5F3EB 0),
    linear-gradient(90deg, #F5F3EB 0 6%, #232323 0 44%, #F5F3EB 0 54%, #232323 0 78%, #F5F3EB 0 89%, #232323 0 94%, #F5F3EB 0);
}
.f-duo-design .dd-livro-capa-thinking {   /* virada para o VARMBLIXT: a luz dele, que vem de baixo, quando está aceso */
  background-image:
    radial-gradient(circle at calc(9 * var(--u)) calc(14.4 * var(--u)),
      rgb(255 176 96 / calc(.34 * var(--vb-aceso))), rgb(255 176 96 / 0) calc(19 * var(--u))),
    url(img/livro-thinking-480.jpg);
}
.f-duo-design .dd-livro-ware { --lomb: #A4C9DB; --borda: #A4C9DB;
  --c1: linear-gradient(180deg, #A4C9DB 0 26%, transparent 0 74%, #A4C9DB 0),
    linear-gradient(90deg, #A4C9DB 0 6%, #EF4459 0 13%, #4FA3D1 0 19%, #A4C9DB 0 22%, #1F1C1F 0 52%, #A4C9DB 0 64%, #FFFFFF 0 86%, #A4C9DB 0 91%, #1F1C1F 0 95%, #A4C9DB 0);
}
.f-duo-design .dd-livro-capa-ware { background-image: url(img/livro-ware-480.jpg); }
.f-duo-design .dd-livro-friends { --lomb: #FBFAF4; --borda: #FBFAF4;
  --c1: linear-gradient(180deg, #FBFAF4 0 28%, transparent 0 72%, #FBFAF4 0),
    linear-gradient(90deg, #FBFAF4 0 8%, #E4472C 0 32%, #FBFAF4 0 40%, #3FB2C2 0 60%, #FBFAF4 0 68%, #2E2E33 0 86%, #FBFAF4 0 91%, #E4472C 0 95%, #FBFAF4 0);
}
.f-duo-design .dd-livro-capa-friends { background-image: url(img/livro-friends-480.jpg); }
.f-duo-design .dd-livro-pollan { --lomb: #86CBB7; --borda: #86CBB7;
  --c1: linear-gradient(180deg, #86CBB7 0 27%, transparent 0 73%, #86CBB7 0),
    linear-gradient(90deg, #86CBB7 0 6%, #1F2421 0 30%, #86CBB7 0 36%, #FFFFFF 0 72%, #86CBB7 0 87%, #F47B20 0 94%, #86CBB7 0);
}
.f-duo-design .dd-livro-capa-pollan { background-image: url(img/livro-pollan-480.jpg); }
/* deitados (na lombada, os 90deg atravessam a grossura e os 180deg vão da cabeça do livro para o pé) */
.f-duo-design .dd-livro-organic { --lomb: #3F6B2B; --borda: #4E7A34;
  background: #6B8E3A url(img/livro-organic-480.jpg) center / 100% 100% no-repeat;
  --c1: linear-gradient(90deg, #3F6B2B 0 28%, transparent 0 72%, #3F6B2B 0),
    linear-gradient(180deg, #3F6B2B 0 5%, #FFFFFF 0 11%, #3F6B2B 0 16%, #FFFFFF 0 66%, #3F6B2B 0 74%, #F2D36B 0 86%, #3F6B2B 0);
}
/* Koya Bound: pano azul-acinzentado; a lombada é palpite (pano liso, com o título escuro ao meio) */
.f-duo-design .dd-livro-koya { --lomb: #3F4B5E; --borda: #4D5A70;
  background: #465367 url(img/livro-koya-480.jpg) center / 100% 100% no-repeat;
  --c1: linear-gradient(90deg, #4D5A70 0 30%, transparent 0 70%, #4D5A70 0),
    linear-gradient(180deg, #4D5A70 0 30%, #232A36 0 62%, #4D5A70 0);
}
.f-duo-design .dd-livro-botanical { --lomb: #C8443B; --borda: #EFE8D8;
  background: #EFE8D8 url(img/livro-botanical-480.jpg) center / 100% 100% no-repeat;
  --c1: linear-gradient(90deg, #C8443B 0 28%, transparent 0 72%, #C8443B 0),
    linear-gradient(180deg, #C8443B 0 8%, #F3E9D2 0 52%, #C8443B 0 62%, #F3E9D2 0 80%, #C8443B 0);
}